@gusto/embedded-react-sdk 0.22.0 → 0.23.0

package/dist/components/Employee/Profile/useProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProfile.js","sources":["../../../../src/components/Employee/Profile/useProfile.ts"],"sourcesContent":["import type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { EmployeeWorkAddress } from '@gusto/embedded-api/models/components/employeeworkaddress'\nimport { type Location } from '@gusto/embedded-api/models/components/location'\nimport { createCompoundContext } from '@/components/Base'\n\n//Interface for context passed down to component slots\ntype ProfileContextType = {\n  companyLocations: Location[]\n  workAddresses?: EmployeeWorkAddress[]\n  employee?: Employee\n  isSelfOnboardingIntended?: boolean\n  isPending: boolean\n  isAdmin: boolean\n  handleCancel: () => void\n  isSelfOnboardingEnabled: boolean\n  hasCompletedSelfOnboarding: boolean\n}\n\nconst [useProfile, ProfileProvider] = createCompoundContext<ProfileContextType>('ProfileContext')\nexport { useProfile, ProfileProvider }\n"],"names":["useProfile","ProfileProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,CAACA,GAAYC,CAAe,IAAIC,EAA0C,gBAAgB;"}
+{"version":3,"file":"useProfile.js","sources":["../../../../src/components/Employee/Profile/useProfile.ts"],"sourcesContent":["import type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { EmployeeWorkAddress } from '@gusto/embedded-api/models/components/employeeworkaddress'\nimport { type Location } from '@gusto/embedded-api/models/components/location'\nimport { createCompoundContext } from '@/components/Base'\n\n//Interface for context passed down to component slots\ntype ProfileContextType = {\n  companyLocations: Location[]\n  workAddresses?: EmployeeWorkAddress[]\n  employee?: Employee\n  isSelfOnboardingIntended?: boolean\n  isPending: boolean\n  isAdmin: boolean\n  handleCancel: () => void\n  isSelfOnboardingEnabled: boolean\n  hasCompletedSelfOnboarding: boolean\n}\n\nconst [useProfile, ProfileProvider] = createCompoundContext<ProfileContextType>('ProfileContext')\nexport { useProfile, ProfileProvider }\n"],"names":["useProfile","ProfileProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,CAACA,GAAYC,CAAe,IAAIC,EAA0C,gBAAgB;"}

package/dist/components/Employee/StateTaxes/useStateTaxes.js

@@ -9,11 +9,12 @@ import "../../Base/useBase.js";
 import "../../../shared/constants.js";
 import "classnames";
 import "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import "dompurify";
 import { createCompoundContext as t } from "../../Base/createCompoundContext.js";
-const [c, d] = t("StateTaxesContext");
+const [d, u] = t("StateTaxesContext");
 export {
-  d as StateTaxesProvider,
-  c as useStateTaxes
+  u as StateTaxesProvider,
+  d as useStateTaxes
 };
 //# sourceMappingURL=useStateTaxes.js.map

package/dist/components/Employee/StateTaxes/useStateTaxes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStateTaxes.js","sources":["../../../../src/components/Employee/StateTaxes/useStateTaxes.ts"],"sourcesContent":["import type { EmployeeStateTaxesList } from '@gusto/embedded-api/models/components/employeestatetaxeslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype StateTaxesContextType = {\n  employeeStateTaxes: EmployeeStateTaxesList[]\n  isPending: boolean\n  isAdmin: boolean\n}\n\nconst [useStateTaxes, StateTaxesProvider] =\n  createCompoundContext<StateTaxesContextType>('StateTaxesContext')\nexport { useStateTaxes, StateTaxesProvider }\n"],"names":["useStateTaxes","StateTaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;AASA,MAAM,CAACA,GAAeC,CAAkB,IACtCC,EAA6C,mBAAmB;"}
+{"version":3,"file":"useStateTaxes.js","sources":["../../../../src/components/Employee/StateTaxes/useStateTaxes.ts"],"sourcesContent":["import type { EmployeeStateTaxesList } from '@gusto/embedded-api/models/components/employeestatetaxeslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype StateTaxesContextType = {\n  employeeStateTaxes: EmployeeStateTaxesList[]\n  isPending: boolean\n  isAdmin: boolean\n}\n\nconst [useStateTaxes, StateTaxesProvider] =\n  createCompoundContext<StateTaxesContextType>('StateTaxesContext')\nexport { useStateTaxes, StateTaxesProvider }\n"],"names":["useStateTaxes","StateTaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,CAACA,GAAeC,CAAkB,IACtCC,EAA6C,mBAAmB;"}

package/dist/components/Employee/Taxes/FederalForm.js

@@ -4,12 +4,12 @@ import { useFormContext as m } from "react-hook-form";
 import { z as t } from "zod";
 import "../../../shared/constants.js";
 import "classnames";
-import { useComponentContext as g } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { RadioGroupField as g } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import { TextInputField as f } from "../../Common/Fields/TextInputField/TextInputField.js";
+import { NumberInputField as l } from "../../Common/Fields/NumberInputField/NumberInputField.js";
+import { useComponentContext as c } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import "react";
 import { SelectField as s } from "../../Common/Fields/SelectField/SelectField.js";
-import { RadioGroupField as f } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
-import { NumberInputField as l } from "../../Common/Fields/NumberInputField/NumberInputField.js";
-import { TextInputField as c } from "../../Common/Fields/TextInputField/TextInputField.js";
 const p = t.object({
   w4DataType: t.literal("rev_2020_w4"),
   filingStatus: t.string().min(1),
@@ -29,7 +29,7 @@ function A() {
   return e("w4DataType") === "rev_2020_w4" ? /* @__PURE__ */ i(b, {}) : /* @__PURE__ */ i(S, {});
 }
 function b() {
-  const { t: e } = o("Employee.Taxes"), r = g(), d = [
+  const { t: e } = o("Employee.Taxes"), r = c(), d = [
     { value: "Single", label: e("filingStatusSingle") },
     { value: "Married", label: e("filingStatusMarried") },
     { value: "Head of Household", label: e("filingStatusHeadOfHousehold") },
@@ -48,7 +48,7 @@ function b() {
       }
     ),
     /* @__PURE__ */ i(
-      f,
+      g,
       {
         name: "twoJobs",
         isRequired: !0,
@@ -147,7 +147,7 @@ function S() {
       }
     ),
     /* @__PURE__ */ i(
-      c,
+      f,
       {
         name: "additionalWithholding",
         label: e("additionalWithholding"),

package/dist/components/Employee/Taxes/useTaxes.js

@@ -9,11 +9,12 @@ import "../../Base/useBase.js";
 import "../../../shared/constants.js";
 import "classnames";
 import "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import "dompurify";
 import { createCompoundContext as o } from "../../Base/createCompoundContext.js";
-const [d, u] = o("TaxesContext");
+const [u, f] = o("TaxesContext");
 export {
-  u as TaxesProvider,
-  d as useTaxes
+  f as TaxesProvider,
+  u as useTaxes
 };
 //# sourceMappingURL=useTaxes.js.map

package/dist/components/Employee/Taxes/useTaxes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTaxes.js","sources":["../../../../src/components/Employee/Taxes/useTaxes.ts"],"sourcesContent":["import type { EmployeeStateTaxesList } from '@gusto/embedded-api/models/components/employeestatetaxeslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype TaxesContextType = {\n  employeeStateTaxes: EmployeeStateTaxesList[]\n  isPending: boolean\n  isAdmin: boolean\n}\n\nconst [useTaxes, TaxesProvider] = createCompoundContext<TaxesContextType>('TaxesContext')\nexport { useTaxes, TaxesProvider }\n"],"names":["useTaxes","TaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;AASA,MAAM,CAACA,GAAUC,CAAa,IAAIC,EAAwC,cAAc;"}
+{"version":3,"file":"useTaxes.js","sources":["../../../../src/components/Employee/Taxes/useTaxes.ts"],"sourcesContent":["import type { EmployeeStateTaxesList } from '@gusto/embedded-api/models/components/employeestatetaxeslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype TaxesContextType = {\n  employeeStateTaxes: EmployeeStateTaxesList[]\n  isPending: boolean\n  isAdmin: boolean\n}\n\nconst [useTaxes, TaxesProvider] = createCompoundContext<TaxesContextType>('TaxesContext')\nexport { useTaxes, TaxesProvider }\n"],"names":["useTaxes","TaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,CAACA,GAAUC,CAAa,IAAIC,EAAwC,cAAc;"}

package/dist/components/Flow/Flow.d.ts

@@ -2,9 +2,9 @@ import { Machine } from 'robot3';
 import { OnEventType } from '../Base/useBase';
 import { FlowContextInterface } from './useFlow';
 import { EventType } from '../../shared/constants';
-type FlowProps = {
-    machine: Machine<object, FlowContextInterface>;
+type FlowProps<M extends Machine> = {
+    machine: M;
     onEvent: OnEventType<EventType, unknown>;
 };
-export declare const Flow: ({ onEvent, machine }: FlowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Flow: <M extends Machine<object, FlowContextInterface>>({ onEvent, machine, }: FlowProps<M>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Flow/Flow.js

@@ -1,53 +1,58 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { useMachine as B } from "react-robot";
-import { useTranslation as C } from "react-i18next";
-import { FlowBreadcrumbs as v } from "../Common/FlowBreadcrumbs/FlowBreadcrumbs.js";
-import { Flex as l, FlexItem as u } from "../Common/Flex/Flex.js";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { useMachine as v } from "react-robot";
+import { useTranslation as w } from "react-i18next";
+import { FlowBreadcrumbs as F } from "../Common/FlowBreadcrumbs/FlowBreadcrumbs.js";
+import { Flex as s, FlexItem as d } from "../Common/Flex/Flex.js";
 import "classnames";
-import { useComponentContext as w } from "../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../shared/constants.js";
+import { useComponentContext as j } from "../../contexts/ComponentAdapter/useComponentContext.js";
 import "react";
-import { FlowContext as F } from "./useFlow.js";
-const L = ({ onEvent: d, machine: x }) => {
-  const f = w(), { t: b } = C(), [r, g, i] = B(x, {
-    onEvent: a,
+import { FlowContext as E } from "./useFlow.js";
+const q = ({
+  onEvent: x,
+  machine: f
+}) => {
+  const b = j(), { t: g } = w(), [r, h, c] = v(f, {
+    onEvent: i,
     component: null,
     progressBarCta: null
   }), {
-    progressBarType: m = null,
+    progressBarType: l = null,
     totalSteps: o = null,
     currentStep: t = null,
     currentBreadcrumbId: n,
-    breadcrumbs: h = {}
+    breadcrumbs: B = {}
   } = r.context;
-  function a(s, c) {
-    i.child ? i.child.send({ type: s, payload: c }) : g({ type: s, payload: c }), d(s, c);
+  function i(m, a) {
+    const p = { type: m, payload: a }, C = h;
+    c.child ? c.child.send(p) : C(p), x(m, a);
   }
-  return /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
-    F.Provider,
+  return /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(
+    E.Provider,
     {
       value: {
         ...r.context
       },
-      children: /* @__PURE__ */ p(l, { flexDirection: "column", gap: 32, children: [
-        m === "progress" && t && o && /* @__PURE__ */ e(
-          f.ProgressBar,
+      children: /* @__PURE__ */ u(s, { flexDirection: "column", gap: 32, children: [
+        l === "progress" && t && o && /* @__PURE__ */ e(
+          b.ProgressBar,
           {
             totalSteps: o,
             currentStep: t,
-            label: b("progressBarLabel", { totalSteps: o, currentStep: t }),
+            label: g("progressBarLabel", { totalSteps: o, currentStep: t }),
             cta: r.context.progressBarCta
           }
         ),
-        m === "breadcrumbs" && /* @__PURE__ */ p(l, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [
-          /* @__PURE__ */ e(u, { flexGrow: 1, children: /* @__PURE__ */ e(
-            v,
+        l === "breadcrumbs" && /* @__PURE__ */ u(s, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [
+          /* @__PURE__ */ e(d, { flexGrow: 1, children: /* @__PURE__ */ e(
+            F,
             {
-              breadcrumbs: n ? h[n] ?? [] : [],
+              breadcrumbs: n ? B[n] ?? [] : [],
               currentBreadcrumbId: n,
-              onEvent: a
+              onEvent: i
             }
           ) }),
-          /* @__PURE__ */ e(u, { children: r.context.progressBarCta && /* @__PURE__ */ e(r.context.progressBarCta, {}) })
+          /* @__PURE__ */ e(d, { children: r.context.progressBarCta && /* @__PURE__ */ e(r.context.progressBarCta, {}) })
         ] }),
         r.context.component && /* @__PURE__ */ e(r.context.component, {})
       ] })
@@ -55,6 +60,6 @@ const L = ({ onEvent: d, machine: x }) => {
   ) });
 };
 export {
-  L as Flow
+  q as Flow
 };
 //# sourceMappingURL=Flow.js.map

package/dist/components/Flow/Flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flow.js","sources":["../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useMachine } from 'react-robot'\nimport { type Machine } from 'robot3'\nimport { useTranslation } from 'react-i18next'\nimport type { OnEventType } from '../Base/useBase'\nimport { FlowBreadcrumbs } from '../Common/FlowBreadcrumbs/FlowBreadcrumbs'\nimport { Flex } from '../Common/Flex'\nimport { FlexItem } from '../Common'\nimport type { FlowContextInterface } from './useFlow'\nimport { FlowContext } from './useFlow'\nimport { type EventType } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ntype FlowProps = {\n  machine: Machine<object, FlowContextInterface>\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport const Flow = ({ onEvent, machine }: FlowProps) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const [current, send, service] = useMachine(machine, {\n    onEvent: handleEvent,\n    component: null,\n    progressBarCta: null,\n  })\n\n  const {\n    progressBarType = null,\n    totalSteps = null,\n    currentStep = null,\n    currentBreadcrumbId,\n    breadcrumbs = {},\n  } = current.context\n\n  function handleEvent(type: EventType, data: unknown): void {\n    //When dealing with nested state machine, correct machine needs to recieve an event\n    if (service.child) {\n      //@ts-expect-error: not sure why 'type' type is incorrectly derived here\n      service.child.send({ type: type, payload: data })\n    } else {\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n      send({ type: type, payload: data })\n    }\n    // Pass event upstream - onEvent can be optional on Flow component\n    onEvent(type, data)\n  }\n\n  return (\n    <Flex>\n      <FlowContext.Provider\n        value={{\n          ...current.context,\n        }}\n      >\n        <Flex flexDirection=\"column\" gap={32}>\n          {progressBarType === 'progress' && currentStep && totalSteps && (\n            <Components.ProgressBar\n              totalSteps={totalSteps}\n              currentStep={currentStep}\n              label={t('progressBarLabel', { totalSteps, currentStep })}\n              cta={current.context.progressBarCta}\n            />\n          )}\n          {progressBarType === 'breadcrumbs' && (\n            <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n              <FlexItem flexGrow={1}>\n                <FlowBreadcrumbs\n                  breadcrumbs={currentBreadcrumbId ? (breadcrumbs[currentBreadcrumbId] ?? []) : []}\n                  currentBreadcrumbId={currentBreadcrumbId}\n                  onEvent={handleEvent}\n                />\n              </FlexItem>\n              <FlexItem>\n                {current.context.progressBarCta && <current.context.progressBarCta />}\n              </FlexItem>\n            </Flex>\n          )}\n          {current.context.component && <current.context.component />}\n        </Flex>\n      </FlowContext.Provider>\n    </Flex>\n  )\n}\n"],"names":["Flow","onEvent","machine","Components","useComponentContext","t","useTranslation","current","send","service","useMachine","handleEvent","progressBarType","totalSteps","currentStep","currentBreadcrumbId","breadcrumbs","type","data","Flex","jsx","FlowContext","jsxs","FlexItem","FlowBreadcrumbs"],"mappings":";;;;;;;;;AAiBO,MAAMA,IAAO,CAAC,EAAE,SAAAC,GAAS,SAAAC,QAAyB;AACvD,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAASC,GAAMC,CAAO,IAAIC,EAAWR,GAAS;AAAA,IACnD,SAASS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB;AAAA,EAAA,CACjB,GAEK;AAAA,IACJ,iBAAAC,IAAkB;AAAA,IAClB,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,qBAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,EAAC,IACbT,EAAQ;AAEZ,WAASI,EAAYM,GAAiBC,GAAqB;AAEzD,IAAIT,EAAQ,QAEVA,EAAQ,MAAM,KAAK,EAAE,MAAAQ,GAAY,SAASC,GAAM,IAGhDV,EAAK,EAAE,MAAAS,GAAY,SAASC,EAAA,CAAM,GAGpCjB,EAAQgB,GAAMC,CAAI;AAAA,EACpB;AAEA,2BACGC,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGd,EAAQ;AAAA,MAAA;AAAA,MAGb,UAAA,gBAAAe,EAACH,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,QAAAP,MAAoB,cAAcE,KAAeD,KAChD,gBAAAO;AAAA,UAACjB,EAAW;AAAA,UAAX;AAAA,YACC,YAAAU;AAAA,YACA,aAAAC;AAAA,YACA,OAAOT,EAAE,oBAAoB,EAAE,YAAAQ,GAAY,aAAAC,GAAa;AAAA,YACxD,KAAKP,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxBK,MAAoB,iBACnB,gBAAAU,EAACH,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,aAAaT,IAAuBC,EAAYD,CAAmB,KAAK,CAAA,IAAM,CAAA;AAAA,cAC9E,qBAAAA;AAAA,cACA,SAASJ;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UACA,gBAAAS,EAACG,GAAA,EACE,UAAAhB,EAAQ,QAAQ,oCAAmBA,EAAQ,QAAQ,gBAAhB,CAAA,CAA+B,EAAA,CACrE;AAAA,QAAA,GACF;AAAA,QAEDA,EAAQ,QAAQ,+BAAcA,EAAQ,QAAQ,WAAhB,CAAA,CAA0B;AAAA,MAAA,EAAA,CAC3D;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"Flow.js","sources":["../../../src/components/Flow/Flow.tsx"],"sourcesContent":["import { useMachine } from 'react-robot'\nimport { type Machine, type SendFunction } from 'robot3'\nimport { useTranslation } from 'react-i18next'\nimport type { OnEventType } from '../Base/useBase'\nimport { FlowBreadcrumbs } from '../Common/FlowBreadcrumbs/FlowBreadcrumbs'\nimport { Flex } from '../Common/Flex'\nimport { FlexItem } from '../Common'\nimport type { FlowContextInterface } from './useFlow'\nimport { FlowContext } from './useFlow'\nimport { type EventType } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ntype FlowProps<M extends Machine> = {\n  machine: M\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport const Flow = <M extends Machine<object, FlowContextInterface>>({\n  onEvent,\n  machine,\n}: FlowProps<M>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation()\n  const [current, send, service] = useMachine(machine, {\n    onEvent: handleEvent,\n    component: null,\n    progressBarCta: null,\n  })\n\n  const {\n    progressBarType = null,\n    totalSteps = null,\n    currentStep = null,\n    currentBreadcrumbId,\n    breadcrumbs = {},\n  } = current.context\n\n  function handleEvent(type: EventType, data: unknown): void {\n    const event = { type, payload: data }\n    const sendFn = send as SendFunction<string>\n    //When dealing with nested state machine, correct machine needs to recieve an event\n    if (service.child) {\n      ;(service.child.send as SendFunction<string>)(event)\n    } else {\n      sendFn(event)\n    }\n    // Pass event upstream - onEvent can be optional on Flow component\n    onEvent(type, data)\n  }\n\n  return (\n    <Flex>\n      <FlowContext.Provider\n        value={{\n          ...current.context,\n        }}\n      >\n        <Flex flexDirection=\"column\" gap={32}>\n          {progressBarType === 'progress' && currentStep && totalSteps && (\n            <Components.ProgressBar\n              totalSteps={totalSteps}\n              currentStep={currentStep}\n              label={t('progressBarLabel', { totalSteps, currentStep })}\n              cta={current.context.progressBarCta}\n            />\n          )}\n          {progressBarType === 'breadcrumbs' && (\n            <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n              <FlexItem flexGrow={1}>\n                <FlowBreadcrumbs\n                  breadcrumbs={currentBreadcrumbId ? (breadcrumbs[currentBreadcrumbId] ?? []) : []}\n                  currentBreadcrumbId={currentBreadcrumbId}\n                  onEvent={handleEvent}\n                />\n              </FlexItem>\n              <FlexItem>\n                {current.context.progressBarCta && <current.context.progressBarCta />}\n              </FlexItem>\n            </Flex>\n          )}\n          {current.context.component && <current.context.component />}\n        </Flex>\n      </FlowContext.Provider>\n    </Flex>\n  )\n}\n"],"names":["Flow","onEvent","machine","Components","useComponentContext","t","useTranslation","current","send","service","useMachine","handleEvent","progressBarType","totalSteps","currentStep","currentBreadcrumbId","breadcrumbs","type","data","event","sendFn","Flex","jsx","FlowContext","jsxs","FlexItem","FlowBreadcrumbs"],"mappings":";;;;;;;;;;AAiBO,MAAMA,IAAO,CAAkD;AAAA,EACpE,SAAAC;AAAA,EACA,SAAAC;AACF,MAAoB;AAClB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACR,CAACC,GAASC,GAAMC,CAAO,IAAIC,EAAWR,GAAS;AAAA,IACnD,SAASS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB;AAAA,EAAA,CACjB,GAEK;AAAA,IACJ,iBAAAC,IAAkB;AAAA,IAClB,YAAAC,IAAa;AAAA,IACb,aAAAC,IAAc;AAAA,IACd,qBAAAC;AAAA,IACA,aAAAC,IAAc,CAAA;AAAA,EAAC,IACbT,EAAQ;AAEZ,WAASI,EAAYM,GAAiBC,GAAqB;AACzD,UAAMC,IAAQ,EAAE,MAAAF,GAAM,SAASC,EAAA,GACzBE,IAASZ;AAEf,IAAIC,EAAQ,QACRA,EAAQ,MAAM,KAA8BU,CAAK,IAEnDC,EAAOD,CAAK,GAGdlB,EAAQgB,GAAMC,CAAI;AAAA,EACpB;AAEA,2BACGG,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGhB,EAAQ;AAAA,MAAA;AAAA,MAGb,UAAA,gBAAAiB,EAACH,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,QAAAT,MAAoB,cAAcE,KAAeD,KAChD,gBAAAS;AAAA,UAACnB,EAAW;AAAA,UAAX;AAAA,YACC,YAAAU;AAAA,YACA,aAAAC;AAAA,YACA,OAAOT,EAAE,oBAAoB,EAAE,YAAAQ,GAAY,aAAAC,GAAa;AAAA,YACxD,KAAKP,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGxBK,MAAoB,iBACnB,gBAAAY,EAACH,GAAA,EAAK,eAAc,OAAM,gBAAe,iBAAgB,YAAW,UAClE,UAAA;AAAA,UAAA,gBAAAC,EAACG,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,aAAaX,IAAuBC,EAAYD,CAAmB,KAAK,CAAA,IAAM,CAAA;AAAA,cAC9E,qBAAAA;AAAA,cACA,SAASJ;AAAA,YAAA;AAAA,UAAA,GAEb;AAAA,UACA,gBAAAW,EAACG,GAAA,EACE,UAAAlB,EAAQ,QAAQ,oCAAmBA,EAAQ,QAAQ,gBAAhB,CAAA,CAA+B,EAAA,CACrE;AAAA,QAAA,GACF;AAAA,QAEDA,EAAQ,QAAQ,+BAAcA,EAAQ,QAAQ,WAAhB,CAAA,CAA0B;AAAA,MAAA,EAAA,CAC3D;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ConfirmWireDetails.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { useMemo, useRef, useState } from 'react'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { ConfirmWireDetailsBanner } from './ConfirmWireDetailsBanner'\nimport { confirmWireDetailsMachine } from './confirmWireDetailsStateMachine'\nimport { type ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport styles from './ConfirmWireDetails.module.scss'\nimport { BaseComponent, BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\n\nexport interface ConfirmWireDetailsProps extends BaseComponentInterface {\n  companyId: string\n  wireInId?: string\n}\n\nexport function ConfirmWireDetails(props: ConfirmWireDetailsProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props} />\n    </BaseComponent>\n  )\n}\n\nfunction Root({ companyId, wireInId, onEvent }: ConfirmWireDetailsProps) {\n  const { Modal, LoadingSpinner } = useComponentContext()\n  const [isModalOpen, setIsModalOpen] = useState(false)\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n\n  const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n    companyUuid: companyId,\n  })\n\n  const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n    r => r.status === 'awaiting_funds',\n  )\n\n  const selectedWireInId = useMemo(() => {\n    if (wireInId) {\n      return wireInId\n    }\n\n    return activeWireInRequests[0]?.uuid\n  }, [wireInId, activeWireInRequests[0]?.uuid])\n\n  const confirmWireDetailsMachineInstance = useMemo(\n    () =>\n      createMachine(\n        'banner',\n        confirmWireDetailsMachine,\n        (): ConfirmWireDetailsContextInterface => ({\n          component: null,\n          companyId,\n          wireInId,\n          selectedWireInId,\n          onEvent: handleEvent,\n          modalContainerRef,\n        }),\n      ),\n    [companyId, wireInId],\n  )\n  const [current, send] = useMachine(confirmWireDetailsMachineInstance)\n\n  function handleEvent(type: EventType, data?: unknown) {\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n    send({ type, payload: data })\n\n    if (type === payrollWireEvents.PAYROLL_WIRE_START_TRANSFER) {\n      setIsModalOpen(true)\n    }\n\n    if (\n      type === payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL ||\n      type === payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL ||\n      type === payrollWireEvents.PAYROLL_WIRE_FORM_DONE\n    ) {\n      setIsModalOpen(false)\n    }\n\n    onEvent(type, data)\n  }\n\n  const handleStartWireTransfer = () => {\n    handleEvent(payrollWireEvents.PAYROLL_WIRE_START_TRANSFER)\n  }\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false)\n  }\n\n  const CurrentComponent = current.context.component\n  const Footer = CurrentComponent?.Footer || undefined\n\n  return (\n    <FlowContext.Provider\n      value={{\n        ...current.context,\n        onEvent: handleEvent,\n      }}\n    >\n      <ConfirmWireDetailsBanner\n        companyId={companyId}\n        wireInId={wireInId}\n        onStartWireTransfer={handleStartWireTransfer}\n        onEvent={onEvent}\n        confirmationAlert={current.context.confirmationAlert}\n      />\n      <Modal\n        isOpen={isModalOpen}\n        onClose={handleCloseModal}\n        containerRef={modalContainerRef}\n        footer={\n          Footer && (\n            <BaseBoundaries\n              LoaderComponent={() => (\n                <div className={styles.footer}>\n                  <LoadingSpinner size=\"sm\" />\n                </div>\n              )}\n            >\n              <Footer onEvent={handleEvent} />\n            </BaseBoundaries>\n          )\n        }\n      >\n        {CurrentComponent && <CurrentComponent />}\n      </Modal>\n    </FlowContext.Provider>\n  )\n}\n"],"names":["ConfirmWireDetails","props","jsx","BaseComponent","Root","companyId","wireInId","onEvent","Modal","LoadingSpinner","useComponentContext","isModalOpen","setIsModalOpen","useState","modalContainerRef","useRef","wireInRequestsData","useWireInRequestsListSuspense","activeWireInRequests","r","selectedWireInId","useMemo","confirmWireDetailsMachineInstance","createMachine","confirmWireDetailsMachine","handleEvent","current","send","useMachine","type","data","payrollWireEvents","handleStartWireTransfer","handleCloseModal","CurrentComponent","Footer","jsxs","FlowContext","ConfirmWireDetailsBanner","BaseBoundaries","styles"],"mappings":";;;;;;;;;;;;;AAkBO,SAASA,EAAmBC,GAAgC;AACjE,SACE,gBAAAC,EAACC,KAAe,GAAGF,GACjB,4BAACG,GAAA,EAAM,GAAGH,GAAO,EAAA,CACnB;AAEJ;AAEA,SAASG,EAAK,EAAE,WAAAC,GAAW,UAAAC,GAAU,SAAAC,KAAoC;AACvE,QAAM,EAAE,OAAAC,GAAO,gBAAAC,EAAA,IAAmBC,EAAA,GAC5B,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9CC,IAAoBC,EAAuB,IAAI,GAE/C,EAAE,MAAMC,EAAA,IAAuBC,EAA8B;AAAA,IACjE,aAAaZ;AAAA,EAAA,CACd,GAEKa,KAAwBF,EAAmB,qBAAqB,CAAA,GAAI;AAAA,IACxE,CAAAG,MAAKA,EAAE,WAAW;AAAA,EAAA,GAGdC,IAAmBC,EAAQ,MAC3Bf,KAIGY,EAAqB,CAAC,GAAG,MAC/B,CAACZ,GAAUY,EAAqB,CAAC,GAAG,IAAI,CAAC,GAEtCI,IAAoCD;AAAA,IACxC,MACEE;AAAA,MACE;AAAA,MACAC;AAAA,MACA,OAA2C;AAAA,QACzC,WAAW;AAAA,QACX,WAAAnB;AAAA,QACA,UAAAC;AAAA,QACA,kBAAAc;AAAA,QACA,SAASK;AAAA,QACT,mBAAAX;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACT,GAAWC,CAAQ;AAAA,EAAA,GAEhB,CAACoB,GAASC,CAAI,IAAIC,EAAWN,CAAiC;AAEpE,WAASG,EAAYI,GAAiBC,GAAgB;AAEpD,IAAAH,EAAK,EAAE,MAAAE,GAAM,SAASC,EAAA,CAAM,GAExBD,MAASE,EAAkB,+BAC7BnB,EAAe,EAAI,IAInBiB,MAASE,EAAkB,oCAC3BF,MAASE,EAAkB,4BAC3BF,MAASE,EAAkB,2BAE3BnB,EAAe,EAAK,GAGtBL,EAAQsB,GAAMC,CAAI;AAAA,EACpB;AAEA,QAAME,IAA0B,MAAM;AACpC,IAAAP,EAAYM,EAAkB,2BAA2B;AAAA,EAC3D,GAEME,IAAmB,MAAM;AAC7B,IAAArB,EAAe,EAAK;AAAA,EACtB,GAEMsB,IAAmBR,EAAQ,QAAQ,WACnCS,IAASD,GAAkB,UAAU;AAE3C,SACE,gBAAAE;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGX,EAAQ;AAAA,QACX,SAASD;AAAA,MAAA;AAAA,MAGX,UAAA;AAAA,QAAA,gBAAAvB;AAAA,UAACoC;AAAA,UAAA;AAAA,YACC,WAAAjC;AAAA,YACA,UAAAC;AAAA,YACA,qBAAqB0B;AAAA,YACrB,SAAAzB;AAAA,YACA,mBAAmBmB,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAErC,gBAAAxB;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,QAAQG;AAAA,YACR,SAASsB;AAAA,YACT,cAAcnB;AAAA,YACd,QACEqB,KACE,gBAAAjC;AAAA,cAACqC;AAAA,cAAA;AAAA,gBACC,iBAAiB,MACf,gBAAArC,EAAC,OAAA,EAAI,WAAWsC,EAAO,QACrB,UAAA,gBAAAtC,EAACO,GAAA,EAAe,MAAK,KAAA,CAAK,EAAA,CAC5B;AAAA,gBAGF,UAAA,gBAAAP,EAACiC,GAAA,EAAO,SAASV,EAAA,CAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAKnC,UAAAS,uBAAqBA,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,MACzC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ConfirmWireDetails.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/ConfirmWireDetails.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMachine } from 'react-robot'\nimport { useMemo, useRef, useState } from 'react'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { ConfirmWireDetailsBanner } from './ConfirmWireDetailsBanner'\nimport { confirmWireDetailsMachine } from './confirmWireDetailsStateMachine'\nimport { type ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport styles from './ConfirmWireDetails.module.scss'\nimport { BaseComponent, BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { FlowContext } from '@/components/Flow/useFlow'\nimport { payrollWireEvents, type EventType } from '@/shared/constants'\n\nexport interface ConfirmWireDetailsProps extends BaseComponentInterface {\n  companyId: string\n  wireInId?: string\n}\n\nexport function ConfirmWireDetails(props: ConfirmWireDetailsProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props} />\n    </BaseComponent>\n  )\n}\n\nfunction Root({ companyId, wireInId, onEvent }: ConfirmWireDetailsProps) {\n  const { Modal, LoadingSpinner } = useComponentContext()\n  const [isModalOpen, setIsModalOpen] = useState(false)\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n\n  const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n    companyUuid: companyId,\n  })\n\n  const activeWireInRequests = (wireInRequestsData.wireInRequestList || []).filter(\n    r => r.status === 'awaiting_funds',\n  )\n\n  const selectedWireInId = useMemo(() => {\n    if (wireInId) {\n      return wireInId\n    }\n\n    return activeWireInRequests[0]?.uuid\n  }, [wireInId, activeWireInRequests[0]?.uuid])\n\n  const confirmWireDetailsMachineInstance = useMemo(\n    () =>\n      createMachine(\n        'banner',\n        confirmWireDetailsMachine,\n        (): ConfirmWireDetailsContextInterface => ({\n          component: null,\n          companyId,\n          wireInId,\n          selectedWireInId,\n          onEvent: handleEvent,\n          modalContainerRef,\n        }),\n      ),\n    [companyId, wireInId],\n  )\n  const [current, send] = useMachine(confirmWireDetailsMachineInstance)\n\n  function handleEvent(type: EventType, data?: unknown) {\n    send({ type, payload: data })\n\n    if (type === payrollWireEvents.PAYROLL_WIRE_START_TRANSFER) {\n      setIsModalOpen(true)\n    }\n\n    if (\n      type === payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_CANCEL ||\n      type === payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL ||\n      type === payrollWireEvents.PAYROLL_WIRE_FORM_DONE\n    ) {\n      setIsModalOpen(false)\n    }\n\n    onEvent(type, data)\n  }\n\n  const handleStartWireTransfer = () => {\n    handleEvent(payrollWireEvents.PAYROLL_WIRE_START_TRANSFER)\n  }\n\n  const handleCloseModal = () => {\n    setIsModalOpen(false)\n  }\n\n  const CurrentComponent = current.context.component\n  const Footer = CurrentComponent?.Footer || undefined\n\n  return (\n    <FlowContext.Provider\n      value={{\n        ...current.context,\n        onEvent: handleEvent,\n      }}\n    >\n      <ConfirmWireDetailsBanner\n        companyId={companyId}\n        wireInId={wireInId}\n        onStartWireTransfer={handleStartWireTransfer}\n        onEvent={onEvent}\n        confirmationAlert={current.context.confirmationAlert}\n      />\n      <Modal\n        isOpen={isModalOpen}\n        onClose={handleCloseModal}\n        containerRef={modalContainerRef}\n        footer={\n          Footer && (\n            <BaseBoundaries\n              LoaderComponent={() => (\n                <div className={styles.footer}>\n                  <LoadingSpinner size=\"sm\" />\n                </div>\n              )}\n            >\n              <Footer onEvent={handleEvent} />\n            </BaseBoundaries>\n          )\n        }\n      >\n        {CurrentComponent && <CurrentComponent />}\n      </Modal>\n    </FlowContext.Provider>\n  )\n}\n"],"names":["ConfirmWireDetails","props","jsx","BaseComponent","Root","companyId","wireInId","onEvent","Modal","LoadingSpinner","useComponentContext","isModalOpen","setIsModalOpen","useState","modalContainerRef","useRef","wireInRequestsData","useWireInRequestsListSuspense","activeWireInRequests","r","selectedWireInId","useMemo","confirmWireDetailsMachineInstance","createMachine","confirmWireDetailsMachine","handleEvent","current","send","useMachine","type","data","payrollWireEvents","handleStartWireTransfer","handleCloseModal","CurrentComponent","Footer","jsxs","FlowContext","ConfirmWireDetailsBanner","BaseBoundaries","styles"],"mappings":";;;;;;;;;;;;;AAkBO,SAASA,EAAmBC,GAAgC;AACjE,SACE,gBAAAC,EAACC,KAAe,GAAGF,GACjB,4BAACG,GAAA,EAAM,GAAGH,GAAO,EAAA,CACnB;AAEJ;AAEA,SAASG,EAAK,EAAE,WAAAC,GAAW,UAAAC,GAAU,SAAAC,KAAoC;AACvE,QAAM,EAAE,OAAAC,GAAO,gBAAAC,EAAA,IAAmBC,EAAA,GAC5B,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9CC,IAAoBC,EAAuB,IAAI,GAE/C,EAAE,MAAMC,EAAA,IAAuBC,EAA8B;AAAA,IACjE,aAAaZ;AAAA,EAAA,CACd,GAEKa,KAAwBF,EAAmB,qBAAqB,CAAA,GAAI;AAAA,IACxE,CAAAG,MAAKA,EAAE,WAAW;AAAA,EAAA,GAGdC,IAAmBC,EAAQ,MAC3Bf,KAIGY,EAAqB,CAAC,GAAG,MAC/B,CAACZ,GAAUY,EAAqB,CAAC,GAAG,IAAI,CAAC,GAEtCI,IAAoCD;AAAA,IACxC,MACEE;AAAA,MACE;AAAA,MACAC;AAAA,MACA,OAA2C;AAAA,QACzC,WAAW;AAAA,QACX,WAAAnB;AAAA,QACA,UAAAC;AAAA,QACA,kBAAAc;AAAA,QACA,SAASK;AAAA,QACT,mBAAAX;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACT,GAAWC,CAAQ;AAAA,EAAA,GAEhB,CAACoB,GAASC,CAAI,IAAIC,EAAWN,CAAiC;AAEpE,WAASG,EAAYI,GAAiBC,GAAgB;AACpD,IAAAH,EAAK,EAAE,MAAAE,GAAM,SAASC,EAAA,CAAM,GAExBD,MAASE,EAAkB,+BAC7BnB,EAAe,EAAI,IAInBiB,MAASE,EAAkB,oCAC3BF,MAASE,EAAkB,4BAC3BF,MAASE,EAAkB,2BAE3BnB,EAAe,EAAK,GAGtBL,EAAQsB,GAAMC,CAAI;AAAA,EACpB;AAEA,QAAME,IAA0B,MAAM;AACpC,IAAAP,EAAYM,EAAkB,2BAA2B;AAAA,EAC3D,GAEME,IAAmB,MAAM;AAC7B,IAAArB,EAAe,EAAK;AAAA,EACtB,GAEMsB,IAAmBR,EAAQ,QAAQ,WACnCS,IAASD,GAAkB,UAAU;AAE3C,SACE,gBAAAE;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,GAAGX,EAAQ;AAAA,QACX,SAASD;AAAA,MAAA;AAAA,MAGX,UAAA;AAAA,QAAA,gBAAAvB;AAAA,UAACoC;AAAA,UAAA;AAAA,YACC,WAAAjC;AAAA,YACA,UAAAC;AAAA,YACA,qBAAqB0B;AAAA,YACrB,SAAAzB;AAAA,YACA,mBAAmBmB,EAAQ,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAErC,gBAAAxB;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,QAAQG;AAAA,YACR,SAASsB;AAAA,YACT,cAAcnB;AAAA,YACd,QACEqB,KACE,gBAAAjC;AAAA,cAACqC;AAAA,cAAA;AAAA,gBACC,iBAAiB,MACf,gBAAArC,EAAC,OAAA,EAAI,WAAWsC,EAAO,QACrB,UAAA,gBAAAtC,EAACO,GAAA,EAAe,MAAK,KAAA,CAAK,EAAA,CAC5B;AAAA,gBAGF,UAAA,gBAAAP,EAACiC,GAAA,EAAO,SAASV,EAAA,CAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAKnC,UAAAS,uBAAqBA,GAAA,CAAA,CAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,MACzC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/ConfirmWireDetails/ConfirmWireDetailsForm/ConfirmWireDetailsForm.js

@@ -16,12 +16,12 @@ import { useComponentDictionary as z, useI18n as g } from "../../../../i18n/I18n
 import { Flex as p, FlexItem as f } from "../../../Common/Flex/Flex.js";
 import { payrollWireEvents as N } from "../../../../shared/constants.js";
 import "classnames";
-import "react";
-import { TextAreaField as V } from "../../../Common/Fields/TextAreaField/TextAreaField.js";
-import { useDateFormatter as J } from "../../../../hooks/useDateFormatter.js";
+import { TextInputField as V } from "../../../Common/Fields/TextInputField/TextInputField.js";
+import { DatePickerField as J } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
 import { NumberInputField as Q } from "../../../Common/Fields/NumberInputField/NumberInputField.js";
-import { TextInputField as X } from "../../../Common/Fields/TextInputField/TextInputField.js";
-import { DatePickerField as Z } from "../../../Common/Fields/DatePickerField/DatePickerField.js";
+import "react";
+import { TextAreaField as X } from "../../../Common/Fields/TextAreaField/TextAreaField.js";
+import { useDateFormatter as Z } from "../../../../hooks/useDateFormatter.js";
 const $ = r.object({
   amountSent: r.number().positive(),
   dateSent: r.date(),
@@ -43,7 +43,7 @@ const oe = ({
   modalContainerRef: y
 }) => {
   z("Payroll.ConfirmWireDetailsForm", i), g("Payroll.ConfirmWireDetailsForm");
-  const { onEvent: a, baseSubmitHandler: I } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = S(), R = J(), { data: P } = U({
+  const { onEvent: a, baseSubmitHandler: I } = Y(), { t } = F("Payroll.ConfirmWireDetailsForm"), { Heading: v, Text: b } = S(), R = Z(), { data: P } = U({
     wireInRequestUuid: o
   }), W = P.wireInRequest, { data: q } = G({
     companyId: n,
@@ -95,7 +95,7 @@ const oe = ({
             }
           ),
           /* @__PURE__ */ e(
-            Z,
+            J,
             {
               name: "dateSent",
               label: t("dateLabel"),
@@ -105,7 +105,7 @@ const oe = ({
             }
           ),
           /* @__PURE__ */ e(
-            X,
+            V,
             {
               name: "bankName",
               label: t("bankNameLabel"),
@@ -115,7 +115,7 @@ const oe = ({
               errorMessage: t("validations.bankName")
             }
           ),
-          /* @__PURE__ */ e(V, { name: "additionalNotes", label: t("notesLabel"), rows: 3 })
+          /* @__PURE__ */ e(X, { name: "additionalNotes", label: t("notesLabel"), rows: 3 })
         ] })
       }
     ) })

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

@@ -1,12 +1,13 @@
-import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { jsx as l, jsxs as m } from "react/jsx-runtime";
 import { useTranslation as P } from "react-i18next";
 import { getBlockerTranslationKeys as v } from "../payrollHelpers.js";
 import { useComponentContext as A } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { Flex as m } from "../../../Common/Flex/Flex.js";
+import { Flex as d } from "../../../Common/Flex/Flex.js";
 import "classnames";
+import "../../../../shared/constants.js";
 import "react";
 import { useI18n as C } from "../../../../i18n/I18n.js";
-function F({
+function H({
   blockers: o,
   onMultipleViewClick: i,
   multipleViewLabel: h,
@@ -30,7 +31,7 @@ function F({
     };
   }), t = p[0];
   if (!y && t)
-    return /* @__PURE__ */ l(a, { status: "error", label: t.title, className: s, children: /* @__PURE__ */ d(m, { flexDirection: "column", gap: 8, children: [
+    return /* @__PURE__ */ l(a, { status: "error", label: t.title, className: s, children: /* @__PURE__ */ m(d, { flexDirection: "column", gap: 8, children: [
       /* @__PURE__ */ l(c, { children: t.description }),
       t.helpText && t.helpText !== t.description && /* @__PURE__ */ l(c, { variant: "supporting", size: "sm", children: t.helpText })
     ] }) });
@@ -41,7 +42,7 @@ function F({
       status: "error",
       label: e("multipleIssuesTitle", { count: o.length }),
       className: s,
-      children: /* @__PURE__ */ d(m, { flexDirection: "column", gap: 16, children: [
+      children: /* @__PURE__ */ m(d, { flexDirection: "column", gap: 16, children: [
         /* @__PURE__ */ l(x, { items: g }),
         i && /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(f, { variant: "secondary", onClick: i, title: u, children: u }) })
       ] })
@@ -49,6 +50,6 @@ function F({
   );
 }
 export {
-  F as PayrollBlockerAlerts
+  H 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 { type ApiPayrollBlocker, getBlockerTranslationKeys } 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  onMultipleViewClick?: () => void\n  multipleViewLabel?: string\n}\n\n/**\n * PayrollBlockerAlerts - Alert-style component for inline blocker display\n * Shows single blocker as alert, or multiple blockers as summary with \"Review\" button\n * Returns null for empty blocker arrays\n */\nexport function PayrollBlockerAlerts({\n  blockers,\n  onMultipleViewClick,\n  multipleViewLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  // Return null for empty blockers array\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blocker.key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase()),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelp') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\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        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n  const defaultMultipleLabel = multipleViewLabel || t('viewAllBlockers')\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        {onMultipleViewClick && (\n          <div>\n            <Button variant=\"secondary\" onClick={onMultipleViewClick} title={defaultMultipleLabel}>\n              {defaultMultipleLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onMultipleViewClick","multipleViewLabel","className","useI18n","t","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","l","description","helpText","singleBlocker","jsx","jsxs","Flex","listItems","defaultMultipleLabel"],"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,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAG/C,MAAIX,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMY,IAAsBZ,EAAS,SAAS,GAExCa,IAAmBb,EAAS,IAAI,CAAAc,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQZ,EAAEU,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAQ,IAAI,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAKA,EAAE,YAAA,CAAa;AAAA,IAAA,CACnF,GACKC,IAAcd,EAAEU,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAWT,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKe,IAAWf,EAAEU,EAAgB,aAAa,EAAE,cAAcV,EAAE,oBAAoB,GAAG;AAEzF,WAAO;AAAA,MACL,GAAGS;AAAA,MACH,OAAAG;AAAA,MACA,aAAAE;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKC,IAAgBR,EAAiB,CAAC;AAExC,MAAI,CAACD,KAAuBS;AAC1B,WACE,gBAAAC,EAACf,GAAA,EAAM,QAAO,SAAQ,OAAOc,EAAc,OAAO,WAAAlB,GAChD,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAACb,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCY,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAACb,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,SAAA,CACjB;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMgB,IAAYZ,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK,GACzDY,IAAuBxB,KAAqBG,EAAE,iBAAiB;AAErE,SACE,gBAAAiB;AAAA,IAACf;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAOF,EAAE,uBAAuB,EAAE,OAAOL,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACZ,GAAA,EAAc,OAAOe,EAAA,CAAW;AAAA,QAChCxB,KACC,gBAAAqB,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACd,GAAA,EAAO,SAAQ,aAAY,SAASP,GAAqB,OAAOyB,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 { type ApiPayrollBlocker, getBlockerTranslationKeys } 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  onMultipleViewClick?: () => void\n  multipleViewLabel?: string\n}\n\n/**\n * PayrollBlockerAlerts - Alert-style component for inline blocker display\n * Shows single blocker as alert, or multiple blockers as summary with \"Review\" button\n * Returns null for empty blocker arrays\n */\nexport function PayrollBlockerAlerts({\n  blockers,\n  onMultipleViewClick,\n  multipleViewLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  // Return null for empty blockers array\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blocker.key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase()),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelp') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\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        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n  const defaultMultipleLabel = multipleViewLabel || t('viewAllBlockers')\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        {onMultipleViewClick && (\n          <div>\n            <Button variant=\"secondary\" onClick={onMultipleViewClick} title={defaultMultipleLabel}>\n              {defaultMultipleLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onMultipleViewClick","multipleViewLabel","className","useI18n","t","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","l","description","helpText","singleBlocker","jsx","jsxs","Flex","listItems","defaultMultipleLabel"],"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,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAG/C,MAAIX,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMY,IAAsBZ,EAAS,SAAS,GAExCa,IAAmBb,EAAS,IAAI,CAAAc,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQZ,EAAEU,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAQ,IAAI,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAKA,EAAE,YAAA,CAAa;AAAA,IAAA,CACnF,GACKC,IAAcd,EAAEU,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAWT,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKe,IAAWf,EAAEU,EAAgB,aAAa,EAAE,cAAcV,EAAE,oBAAoB,GAAG;AAEzF,WAAO;AAAA,MACL,GAAGS;AAAA,MACH,OAAAG;AAAA,MACA,aAAAE;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKC,IAAgBR,EAAiB,CAAC;AAExC,MAAI,CAACD,KAAuBS;AAC1B,WACE,gBAAAC,EAACf,GAAA,EAAM,QAAO,SAAQ,OAAOc,EAAc,OAAO,WAAAlB,GAChD,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAACb,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCY,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAACb,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,SAAA,CACjB;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMgB,IAAYZ,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK,GACzDY,IAAuBxB,KAAqBG,EAAE,iBAAiB;AAErE,SACE,gBAAAiB;AAAA,IAACf;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAOF,EAAE,uBAAuB,EAAE,OAAOL,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACZ,GAAA,EAAc,OAAOe,EAAA,CAAW;AAAA,QAChCxB,KACC,gBAAAqB,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACd,GAAA,EAAO,SAAQ,aAAY,SAASP,GAAqB,OAAOyB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -4,11 +4,12 @@ import f from "classnames";
 import u from "./PayrollBlockerList.module.scss.js";
 import { useComponentContext as h } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { FlexItem as x, Flex as o } from "../../../Common/Flex/Flex.js";
+import "../../../../shared/constants.js";
 import "react";
 import { DataView as y } from "../../../Common/DataView/DataView.js";
 import { useDataView as g } from "../../../Common/DataView/useDataView.js";
 import { useI18n as b } from "../../../../i18n/I18n.js";
-function I({ blockers: i, className: s }) {
+function V({ blockers: i, className: s }) {
   b("Payroll.PayrollBlocker");
   const { t: l } = p("Payroll.PayrollBlocker"), { Button: c, Text: n, Heading: m } = h(), d = g({
     data: i,
@@ -35,6 +36,6 @@ function I({ blockers: i, className: s }) {
   ] }) });
 }
 export {
-  I as PayrollBlockerList
+  V as PayrollBlockerList
 };
 //# sourceMappingURL=PayrollBlockerList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollBlockerList.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport styles from './PayrollBlockerList.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex, FlexItem } from '@/components/Common'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { useI18n } from '@/i18n'\n\nexport interface PayrollBlocker {\n  id: string\n  title: string\n  description: string\n  action?: {\n    label: string\n    onClick: () => void\n  }\n}\n\ninterface PayrollBlockerListProps {\n  blockers: PayrollBlocker[]\n  className?: string\n}\n\n/**\n * PayrollBlockerList - DataView-based component displaying payroll blockers\n * Shows each blocker with individual resolution buttons\n */\nexport function PayrollBlockerList({ blockers, className }: PayrollBlockerListProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Button, Text, Heading } = useComponentContext()\n\n  const dataViewProps = useDataView({\n    data: blockers,\n    columns: [\n      {\n        title: t('blockerSectionLabel'),\n        render: blocker => (\n          <FlexItem flexGrow={1}>\n            <Flex flexDirection=\"column\" gap={8}>\n              <Text weight=\"semibold\">{blocker.title}</Text>\n              <Text variant=\"supporting\">{blocker.description}</Text>\n            </Flex>\n          </FlexItem>\n        ),\n      },\n      {\n        title: '',\n        render: blocker => {\n          // For presentational purposes, just show the primary action if it exists\n          const action = blocker.action\n\n          if (!action) {\n            return null\n          }\n\n          return (\n            <Flex justifyContent=\"flex-end\" alignItems=\"center\">\n              <Button variant=\"secondary\" onClick={action.onClick} title={action.label}>\n                {action.label}\n              </Button>\n            </Flex>\n          )\n        },\n      },\n    ],\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <Flex flexDirection=\"column\" gap={24}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('blockersListTitle')}\n        </Heading>\n\n        <DataView {...dataViewProps} label={t('blockersListTitle')} />\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollBlockerList","blockers","className","useI18n","t","useTranslation","Button","Text","Heading","useComponentContext","dataViewProps","useDataView","blocker","jsx","FlexItem","jsxs","Flex","action","classNames","styles","DataView"],"mappings":";;;;;;;;;;AA4BO,SAASA,EAAmB,EAAE,UAAAC,GAAU,WAAAC,KAAsC;AACnF,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GAE5BC,IAAgBC,EAAY;AAAA,IAChC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP;AAAA,QACE,OAAOG,EAAE,qBAAqB;AAAA,QAC9B,QAAQ,CAAAQ,MACN,gBAAAC,EAACC,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAH,EAACN,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAQ,OAAM;AAAA,UACvC,gBAAAC,EAACN,GAAA,EAAK,SAAQ,cAAc,YAAQ,YAAA,CAAY;AAAA,QAAA,EAAA,CAClD,EAAA,CACF;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,OAAO;AAAA,QACP,QAAQ,CAAAK,MAAW;AAEjB,gBAAMK,IAASL,EAAQ;AAEvB,iBAAKK,sBAKFD,GAAA,EAAK,gBAAe,YAAW,YAAW,UACzC,4BAACV,GAAA,EAAO,SAAQ,aAAY,SAASW,EAAO,SAAS,OAAOA,EAAO,OAChE,UAAAA,EAAO,OACV,EAAA,CACF,IARO;AAAA,QAUX;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAIhB,EAAS,WAAW,IACf,OAIP,gBAAAY,EAAC,OAAA,EAAI,WAAWK,EAAWC,EAAO,MAAMjB,CAAS,GAC/C,UAAA,gBAAAa,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAH,EAACL,KAAQ,IAAG,MAAK,UAAS,MACvB,UAAAJ,EAAE,mBAAmB,GACxB;AAAA,sBAECgB,GAAA,EAAU,GAAGV,GAAe,OAAON,EAAE,mBAAmB,EAAA,CAAG;AAAA,EAAA,EAAA,CAC9D,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"PayrollBlockerList.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport styles from './PayrollBlockerList.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex, FlexItem } from '@/components/Common'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { useI18n } from '@/i18n'\n\nexport interface PayrollBlocker {\n  id: string\n  title: string\n  description: string\n  action?: {\n    label: string\n    onClick: () => void\n  }\n}\n\ninterface PayrollBlockerListProps {\n  blockers: PayrollBlocker[]\n  className?: string\n}\n\n/**\n * PayrollBlockerList - DataView-based component displaying payroll blockers\n * Shows each blocker with individual resolution buttons\n */\nexport function PayrollBlockerList({ blockers, className }: PayrollBlockerListProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Button, Text, Heading } = useComponentContext()\n\n  const dataViewProps = useDataView({\n    data: blockers,\n    columns: [\n      {\n        title: t('blockerSectionLabel'),\n        render: blocker => (\n          <FlexItem flexGrow={1}>\n            <Flex flexDirection=\"column\" gap={8}>\n              <Text weight=\"semibold\">{blocker.title}</Text>\n              <Text variant=\"supporting\">{blocker.description}</Text>\n            </Flex>\n          </FlexItem>\n        ),\n      },\n      {\n        title: '',\n        render: blocker => {\n          // For presentational purposes, just show the primary action if it exists\n          const action = blocker.action\n\n          if (!action) {\n            return null\n          }\n\n          return (\n            <Flex justifyContent=\"flex-end\" alignItems=\"center\">\n              <Button variant=\"secondary\" onClick={action.onClick} title={action.label}>\n                {action.label}\n              </Button>\n            </Flex>\n          )\n        },\n      },\n    ],\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <Flex flexDirection=\"column\" gap={24}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('blockersListTitle')}\n        </Heading>\n\n        <DataView {...dataViewProps} label={t('blockersListTitle')} />\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollBlockerList","blockers","className","useI18n","t","useTranslation","Button","Text","Heading","useComponentContext","dataViewProps","useDataView","blocker","jsx","FlexItem","jsxs","Flex","action","classNames","styles","DataView"],"mappings":";;;;;;;;;;;AA4BO,SAASA,EAAmB,EAAE,UAAAC,GAAU,WAAAC,KAAsC;AACnF,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GAE5BC,IAAgBC,EAAY;AAAA,IAChC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP;AAAA,QACE,OAAOG,EAAE,qBAAqB;AAAA,QAC9B,QAAQ,CAAAQ,MACN,gBAAAC,EAACC,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAH,EAACN,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAQ,OAAM;AAAA,UACvC,gBAAAC,EAACN,GAAA,EAAK,SAAQ,cAAc,YAAQ,YAAA,CAAY;AAAA,QAAA,EAAA,CAClD,EAAA,CACF;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,OAAO;AAAA,QACP,QAAQ,CAAAK,MAAW;AAEjB,gBAAMK,IAASL,EAAQ;AAEvB,iBAAKK,sBAKFD,GAAA,EAAK,gBAAe,YAAW,YAAW,UACzC,4BAACV,GAAA,EAAO,SAAQ,aAAY,SAASW,EAAO,SAAS,OAAOA,EAAO,OAChE,UAAAA,EAAO,OACV,EAAA,CACF,IARO;AAAA,QAUX;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAIhB,EAAS,WAAW,IACf,OAIP,gBAAAY,EAAC,OAAA,EAAI,WAAWK,EAAWC,EAAO,MAAMjB,CAAS,GAC/C,UAAA,gBAAAa,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAH,EAACL,KAAQ,IAAG,MAAK,UAAS,MACvB,UAAAJ,EAAE,mBAAmB,GACxB;AAAA,sBAECgB,GAAA,EAAU,GAAGV,GAAe,OAAON,EAAE,mBAAmB,EAAA,CAAG;AAAA,EAAA,EAAA,CAC9D,EAAA,CACF;AAEJ;"}

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

@@ -10,15 +10,15 @@ import { TimeOffField as ee } from "./TimeOffField.js";
 import { Flex as y } from "../../Common/Flex/Flex.js";
 import { Grid as S } from "../../Common/Grid/Grid.js";
 import "classnames";
-import { useComponentContext as te } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as ne } from "../../../i18n/I18n.js";
-import { Form as re } from "../../Common/Form/Form.js";
-import { firstLastName as ie, formatNumberAsCurrency as se } from "../../../helpers/formattedStrings.js";
-import { getAdditionalEarningsCompensations as oe, getReimbursementCompensation as ae, calculateGrossPay as G } from "../helpers.js";
-import { HOURS_COMPENSATION_NAMES as k, EXCLUDED_ADDITIONAL_EARNINGS as me, COMPENSATION_NAME_DOUBLE_OVERTIME as le, COMPENSATION_NAME_OVERTIME as de, COMPENSATION_NAME_REGULAR_HOURS as ue, COMPENSATION_NAME_REIMBURSEMENT as ce, COMPENSATION_NAME_CASH_TIPS as pe, COMPENSATION_NAME_COMMISSION as fe, COMPENSATION_NAME_CORRECTION_PAYMENT as he, COMPENSATION_NAME_PAYCHECK_TIPS as Ce, COMPENSATION_NAME_BONUS as Ne } from "../../../shared/constants.js";
-import { useContainerBreakpoints as Ee } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { RadioGroupField as te } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 import { TextInputField as R } from "../../Common/Fields/TextInputField/TextInputField.js";
-import { RadioGroupField as ge } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+import { useComponentContext as ne } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as re } from "../../../i18n/I18n.js";
+import { Form as ie } from "../../Common/Form/Form.js";
+import { firstLastName as se, formatNumberAsCurrency as oe } from "../../../helpers/formattedStrings.js";
+import { getAdditionalEarningsCompensations as ae, getReimbursementCompensation as me, calculateGrossPay as G } from "../helpers.js";
+import { HOURS_COMPENSATION_NAMES as k, EXCLUDED_ADDITIONAL_EARNINGS as le, COMPENSATION_NAME_DOUBLE_OVERTIME as de, COMPENSATION_NAME_OVERTIME as ue, COMPENSATION_NAME_REGULAR_HOURS as ce, COMPENSATION_NAME_REIMBURSEMENT as pe, COMPENSATION_NAME_CASH_TIPS as fe, COMPENSATION_NAME_COMMISSION as he, COMPENSATION_NAME_CORRECTION_PAYMENT as Ce, COMPENSATION_NAME_PAYCHECK_TIPS as Ne, COMPENSATION_NAME_BONUS as Ee } from "../../../shared/constants.js";
+import { useContainerBreakpoints as ge } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
 const be = m.object({
   hourlyCompensations: m.record(m.string(), m.record(m.string(), m.string().optional())),
   timeOffCompensations: m.record(m.string(), m.string().optional()),
@@ -67,22 +67,22 @@ const be = m.object({
   paySchedule: l,
   isOffCycle: C = !1
 }) => {
-  const { Button: x, Heading: c, Text: H } = te(), { t } = Z("Payroll.PayrollEditEmployee");
-  ne("Payroll.PayrollEditEmployee");
-  const f = d.jobs?.find((e) => e.primary), T = f ? [f] : [], v = X(null), p = Ee({
+  const { Button: x, Heading: c, Text: H } = ne(), { t } = Z("Payroll.PayrollEditEmployee");
+  re("Payroll.PayrollEditEmployee");
+  const f = d.jobs?.find((e) => e.primary), T = f ? [f] : [], v = X(null), p = ge({
     ref: v
   }).includes("small");
   s?.hourlyCompensations?.forEach((e) => {
     const n = d.jobs?.find((o) => o.uuid === e.jobUuid);
     n && !T.find((o) => o.uuid === n.uuid) && T.push(n);
   });
-  const P = (s?.paidTimeOff || []).filter((e) => e.name), _ = oe({
+  const P = (s?.paidTimeOff || []).filter((e) => e.name), _ = ae({
     flsaStatus: f?.compensations?.[0]?.flsaStatus,
     existingFixedCompensations: s?.fixedCompensations || [],
     primaryJobUuid: f?.uuid,
     fixedCompensationTypes: b,
-    excludedTypes: me
-  }), N = ae(
+    excludedTypes: le
+  }), N = me(
     s?.fixedCompensations || [],
     b,
     f?.uuid
@@ -90,28 +90,28 @@ const be = m.object({
     (o) => o.jobUuid === e && o.name?.toLowerCase() === n.toLowerCase()
   ), $ = (e) => {
     switch (e) {
-      case ue:
+      case ce:
         return t("compensationNames.regularHours");
-      case de:
+      case ue:
         return t("compensationNames.overtime");
-      case le:
+      case de:
         return t("compensationNames.doubleOvertime");
       default:
         return e;
     }
   }, j = (e) => {
     switch (e) {
-      case Ne:
+      case Ee:
         return t("fixedCompensationNames.bonus");
-      case Ce:
+      case Ne:
         return t("fixedCompensationNames.paycheckTips");
-      case he:
+      case Ce:
         return t("fixedCompensationNames.correctionPayment");
-      case fe:
+      case he:
         return t("fixedCompensationNames.commission");
-      case pe:
+      case fe:
         return t("fixedCompensationNames.cashTips");
-      case ce:
+      case pe:
         return t("fixedCompensationNames.reimbursement");
       default:
         return e;
@@ -185,7 +185,7 @@ const be = m.object({
     i,
     l,
     C
-  ]), V = ie({
+  ]), V = se({
     first_name: d.firstName,
     last_name: d.lastName
   }), z = (e) => {
@@ -196,7 +196,7 @@ const be = m.object({
       f?.uuid
     );
     E(n);
-  }, L = se(q || 0), U = /* @__PURE__ */ a(
+  }, L = oe(q || 0), U = /* @__PURE__ */ a(
     y,
     {
       flexDirection: p ? "row" : "column",
@@ -235,7 +235,7 @@ const be = m.object({
       }
     ),
     /* @__PURE__ */ a(K, { ...I, children: [
-      /* @__PURE__ */ a(re, { children: [
+      /* @__PURE__ */ a(ie, { children: [
         T.length > 0 && /* @__PURE__ */ a("div", { className: u.fieldGroup, children: [
           /* @__PURE__ */ r(c, { as: "h3", children: t("regularHoursTitle") }),
           T.map((e) => /* @__PURE__ */ a(y, { flexDirection: "column", gap: 8, children: [
@@ -308,7 +308,7 @@ const be = m.object({
         /* @__PURE__ */ a("div", { className: u.fieldGroup, children: [
           /* @__PURE__ */ r(c, { as: "h4", children: t("paymentMethodTitle") }),
           /* @__PURE__ */ r(
-            ge,
+            te,
             {
               name: "paymentMethod",
               isRequired: !0,