@gusto/embedded-react-sdk 0.52.2 → 0.54.0

package/dist/components/Employee/Deductions/shared/DeductionsForm/DeductionsForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeductionsForm.js","sources":["../../../../../../src/components/Employee/Deductions/shared/DeductionsForm/DeductionsForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useMemo, useState } from 'react'\nimport type {\n  Garnishment,\n  GarnishmentType,\n} from '@gusto/embedded-api/models/components/garnishment'\nimport { StandardDeductionForm } from './StandardDeductionForm'\nimport { ChildSupportFormView } from './ChildSupportFormView'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Grid } from '@/components/Common/Grid/Grid'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { ActionsLayout } from '@/components/Common'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport type { ResourceDictionary } from '@/types/Helpers'\n\n/** @internal */\nexport type DeductionsFormDictionary = ResourceDictionary<'Employee.DeductionsForm'>\n\n// Garnishment types the form supports (mirrors the legacy SUPPORTED_GARNISHMENT_TYPES).\nconst SUPPORTED_GARNISHMENT_TYPES: readonly GarnishmentType[] = [\n  'child_support',\n  'federal_tax_lien',\n  'state_tax_lien',\n  'student_loan',\n  'creditor_garnishment',\n  'federal_loan',\n  'other_garnishment',\n] as const\n\ntype Variant = { kind: 'custom' } | { kind: 'garnishment'; type: GarnishmentType }\n\nfunction deductionToVariant(deduction: Garnishment): Variant {\n  const type = deduction.garnishmentType\n  if (!deduction.courtOrdered) return { kind: 'custom' }\n  return {\n    kind: 'garnishment',\n    type: type && SUPPORTED_GARNISHMENT_TYPES.includes(type) ? type : 'child_support',\n  }\n}\n\n/** @internal */\nexport interface DeductionsFormProps {\n  /** Optional CSS class for the root section. */\n  className?: string\n  /** The associated employee identifier. */\n  employeeId: string\n  /** When provided, the form is in edit mode and the deduction's existing\n   *  garnishment type selects the inline form variant. Omit for add mode. */\n  deduction?: Garnishment | null\n  /**\n   * Translation overrides for the form's strings. Each consuming block\n   * passes the dictionary it resolved from its own namespace so partner\n   * overrides on that namespace flow into the form text.\n   */\n  dictionary?: DeductionsFormDictionary\n  /** Called after a successful save with the saved row and whether it was a create or update. */\n  onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void\n  /** Called when the user cancels the form. */\n  onCancel: () => void\n}\n\n/** @internal */\nexport function DeductionsForm({\n  className,\n  employeeId,\n  deduction,\n  dictionary,\n  onSaved,\n  onCancel,\n}: DeductionsFormProps) {\n  useI18n('Employee.DeductionsForm')\n  useComponentDictionary('Employee.DeductionsForm', dictionary)\n  const { t } = useTranslation('Employee.DeductionsForm')\n  const Components = useComponentContext()\n\n  const isEdit = !!deduction\n  const title = isEdit ? t('editTitle') : t('addTitle')\n\n  // Pre-select the variant in edit mode; let the user pick in add mode.\n  const initialVariant = useMemo<Variant | null>(\n    () => (deduction ? deductionToVariant(deduction) : null),\n    [deduction],\n  )\n  const [variant, setVariant] = useState<Variant | null>(initialVariant)\n\n  const garnishmentTypeOptions = useMemo(\n    () =>\n      SUPPORTED_GARNISHMENT_TYPES.map(value => ({\n        value,\n        label: garnishmentTypeLabel(t, value),\n      })),\n    [t],\n  )\n\n  const handleSelectDeductionType = (selection: string) => {\n    if (selection === 'custom') {\n      setVariant({ kind: 'custom' })\n    } else {\n      setVariant({ kind: 'garnishment', type: 'child_support' })\n    }\n  }\n\n  const handleSelectGarnishmentType = (value: string) => {\n    setVariant({ kind: 'garnishment', type: value as GarnishmentType })\n  }\n\n  return (\n    <section className={className}>\n      <Grid gap={32}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Components.Heading as=\"h2\">{title}</Components.Heading>\n          <Components.Text variant=\"supporting\">{t('description')}</Components.Text>\n        </Flex>\n\n        {!isEdit && (\n          <>\n            <Flex flexDirection=\"column\" gap={20}>\n              <Components.RadioGroup\n                label={t('variantLabel')}\n                description={t('variantDescription')}\n                options={[\n                  { value: 'garnishment', label: t('garnishmentOption') },\n                  { value: 'custom', label: t('customOption') },\n                ]}\n                defaultValue={variant?.kind === 'custom' ? 'custom' : undefined}\n                onChange={handleSelectDeductionType}\n                isRequired\n              />\n\n              {variant?.kind === 'garnishment' && (\n                <Components.Select\n                  label={t('garnishmentTypeLabel')}\n                  placeholder=\"\"\n                  options={garnishmentTypeOptions}\n                  value={variant.type}\n                  onChange={handleSelectGarnishmentType}\n                  isRequired\n                />\n              )}\n            </Flex>\n\n            {variant !== null && <hr />}\n\n            {variant === null && (\n              <ActionsLayout>\n                <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n                  {t('actions.cancel')}\n                </Components.Button>\n              </ActionsLayout>\n            )}\n          </>\n        )}\n\n        {variant?.kind === 'custom' && (\n          <StandardDeductionForm\n            employeeId={employeeId}\n            deduction={deduction ?? null}\n            courtOrdered={false}\n            title={t('types.custom')}\n            onSaved={onSaved}\n            onCancel={onCancel}\n          />\n        )}\n        {variant?.kind === 'garnishment' && variant.type === 'child_support' && (\n          <ChildSupportFormView\n            employeeId={employeeId}\n            deduction={deduction ?? null}\n            onSaved={onSaved}\n            onCancel={onCancel}\n          />\n        )}\n        {variant?.kind === 'garnishment' && variant.type !== 'child_support' && (\n          <StandardDeductionForm\n            employeeId={employeeId}\n            deduction={deduction ?? null}\n            courtOrdered={true}\n            garnishmentType={variant.type}\n            title={garnishmentTypeLabel(t, variant.type)}\n            onSaved={onSaved}\n            onCancel={onCancel}\n          />\n        )}\n      </Grid>\n    </section>\n  )\n}\n\nfunction garnishmentTypeLabel(\n  t: ReturnType<typeof useTranslation<'Employee.DeductionsForm'>>['t'],\n  value: GarnishmentType,\n): string {\n  switch (value) {\n    case 'child_support':\n      return t('types.childSupport')\n    case 'federal_tax_lien':\n      return t('types.federalTaxLien')\n    case 'state_tax_lien':\n      return t('types.stateTaxLien')\n    case 'student_loan':\n      return t('types.studentLoan')\n    case 'creditor_garnishment':\n      return t('types.creditorGarnishment')\n    case 'federal_loan':\n      return t('types.federalLoan')\n    case 'other_garnishment':\n      return t('types.otherGarnishment')\n  }\n}\n"],"names":["SUPPORTED_GARNISHMENT_TYPES","deductionToVariant","deduction","type","DeductionsForm","className","employeeId","dictionary","onSaved","onCancel","useI18n","useComponentDictionary","t","useTranslation","Components","useComponentContext","isEdit","title","initialVariant","useMemo","variant","setVariant","useState","garnishmentTypeOptions","value","garnishmentTypeLabel","handleSelectDeductionType","selection","handleSelectGarnishmentType","jsxs","Grid","Flex","jsx","Fragment","ActionsLayout","StandardDeductionForm","ChildSupportFormView"],"mappings":"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"}
+{"version":3,"file":"DeductionsForm.js","sources":["../../../../../../src/components/Employee/Deductions/shared/DeductionsForm/DeductionsForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useMemo, useState } from 'react'\nimport type {\n  Garnishment,\n  GarnishmentType,\n} from '@gusto/embedded-api/models/components/garnishment'\nimport { StandardDeductionForm } from './StandardDeductionForm'\nimport { ChildSupportFormView } from './ChildSupportFormView'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Grid } from '@/components/Common/Grid/Grid'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { ActionsLayout } from '@/components/Common'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport type { ResourceDictionary } from '@/types/Helpers'\nimport type { LoaderComponentType } from '@/components/Base'\n\n/** @internal */\nexport type DeductionsFormDictionary = ResourceDictionary<'Employee.DeductionsForm'>\n\n// Garnishment types the form supports (mirrors the legacy SUPPORTED_GARNISHMENT_TYPES).\nconst SUPPORTED_GARNISHMENT_TYPES: readonly GarnishmentType[] = [\n  'child_support',\n  'federal_tax_lien',\n  'state_tax_lien',\n  'student_loan',\n  'creditor_garnishment',\n  'federal_loan',\n  'other_garnishment',\n] as const\n\ntype Variant = { kind: 'custom' } | { kind: 'garnishment'; type: GarnishmentType }\n\nfunction deductionToVariant(deduction: Garnishment): Variant {\n  const type = deduction.garnishmentType\n  if (!deduction.courtOrdered) return { kind: 'custom' }\n  return {\n    kind: 'garnishment',\n    type: type && SUPPORTED_GARNISHMENT_TYPES.includes(type) ? type : 'child_support',\n  }\n}\n\n/** @internal */\nexport interface DeductionsFormProps {\n  /** Optional CSS class for the root section. */\n  className?: string\n  /** The associated employee identifier. */\n  employeeId: string\n  /** When provided, the form is in edit mode and the deduction's existing\n   *  garnishment type selects the inline form variant. Omit for add mode. */\n  deduction?: Garnishment | null\n  /**\n   * Translation overrides for the form's strings. Each consuming block\n   * passes the dictionary it resolved from its own namespace so partner\n   * overrides on that namespace flow into the form text.\n   */\n  dictionary?: DeductionsFormDictionary\n  /** Called after a successful save with the saved row and whether it was a create or update. */\n  onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void\n  /** Called when the user cancels the form. */\n  onCancel: () => void\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/** @internal */\nexport function DeductionsForm({\n  className,\n  employeeId,\n  deduction,\n  dictionary,\n  onSaved,\n  onCancel,\n  LoaderComponent,\n}: DeductionsFormProps) {\n  useI18n('Employee.DeductionsForm')\n  useComponentDictionary('Employee.DeductionsForm', dictionary)\n  const { t } = useTranslation('Employee.DeductionsForm')\n  const Components = useComponentContext()\n\n  const isEdit = !!deduction\n  const title = isEdit ? t('editTitle') : t('addTitle')\n\n  // Pre-select the variant in edit mode; let the user pick in add mode.\n  const initialVariant = useMemo<Variant | null>(\n    () => (deduction ? deductionToVariant(deduction) : null),\n    [deduction],\n  )\n  const [variant, setVariant] = useState<Variant | null>(initialVariant)\n\n  const garnishmentTypeOptions = useMemo(\n    () =>\n      SUPPORTED_GARNISHMENT_TYPES.map(value => ({\n        value,\n        label: garnishmentTypeLabel(t, value),\n      })),\n    [t],\n  )\n\n  const handleSelectDeductionType = (selection: string) => {\n    if (selection === 'custom') {\n      setVariant({ kind: 'custom' })\n    } else {\n      setVariant({ kind: 'garnishment', type: 'child_support' })\n    }\n  }\n\n  const handleSelectGarnishmentType = (value: string) => {\n    setVariant({ kind: 'garnishment', type: value as GarnishmentType })\n  }\n\n  return (\n    <section className={className}>\n      <Grid gap={32}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Components.Heading as=\"h2\">{title}</Components.Heading>\n          <Components.Text variant=\"supporting\">{t('description')}</Components.Text>\n        </Flex>\n\n        {!isEdit && (\n          <>\n            <Flex flexDirection=\"column\" gap={20}>\n              <Components.RadioGroup\n                label={t('variantLabel')}\n                description={t('variantDescription')}\n                options={[\n                  { value: 'garnishment', label: t('garnishmentOption') },\n                  { value: 'custom', label: t('customOption') },\n                ]}\n                defaultValue={variant?.kind === 'custom' ? 'custom' : undefined}\n                onChange={handleSelectDeductionType}\n                isRequired\n              />\n\n              {variant?.kind === 'garnishment' && (\n                <Components.Select\n                  label={t('garnishmentTypeLabel')}\n                  placeholder=\"\"\n                  options={garnishmentTypeOptions}\n                  value={variant.type}\n                  onChange={handleSelectGarnishmentType}\n                  isRequired\n                />\n              )}\n            </Flex>\n\n            {variant !== null && <hr />}\n\n            {variant === null && (\n              <ActionsLayout>\n                <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n                  {t('actions.cancel')}\n                </Components.Button>\n              </ActionsLayout>\n            )}\n          </>\n        )}\n\n        {variant?.kind === 'custom' && (\n          <StandardDeductionForm\n            employeeId={employeeId}\n            deduction={deduction ?? null}\n            courtOrdered={false}\n            title={t('types.custom')}\n            onSaved={onSaved}\n            onCancel={onCancel}\n            LoaderComponent={LoaderComponent}\n          />\n        )}\n        {variant?.kind === 'garnishment' && variant.type === 'child_support' && (\n          <ChildSupportFormView\n            employeeId={employeeId}\n            deduction={deduction ?? null}\n            onSaved={onSaved}\n            onCancel={onCancel}\n            LoaderComponent={LoaderComponent}\n          />\n        )}\n        {variant?.kind === 'garnishment' && variant.type !== 'child_support' && (\n          <StandardDeductionForm\n            employeeId={employeeId}\n            deduction={deduction ?? null}\n            courtOrdered={true}\n            garnishmentType={variant.type}\n            title={garnishmentTypeLabel(t, variant.type)}\n            onSaved={onSaved}\n            onCancel={onCancel}\n            LoaderComponent={LoaderComponent}\n          />\n        )}\n      </Grid>\n    </section>\n  )\n}\n\nfunction garnishmentTypeLabel(\n  t: ReturnType<typeof useTranslation<'Employee.DeductionsForm'>>['t'],\n  value: GarnishmentType,\n): string {\n  switch (value) {\n    case 'child_support':\n      return t('types.childSupport')\n    case 'federal_tax_lien':\n      return t('types.federalTaxLien')\n    case 'state_tax_lien':\n      return t('types.stateTaxLien')\n    case 'student_loan':\n      return t('types.studentLoan')\n    case 'creditor_garnishment':\n      return t('types.creditorGarnishment')\n    case 'federal_loan':\n      return t('types.federalLoan')\n    case 'other_garnishment':\n      return t('types.otherGarnishment')\n  }\n}\n"],"names":["SUPPORTED_GARNISHMENT_TYPES","deductionToVariant","deduction","type","DeductionsForm","className","employeeId","dictionary","onSaved","onCancel","LoaderComponent","useI18n","useComponentDictionary","t","useTranslation","Components","useComponentContext","isEdit","title","initialVariant","useMemo","variant","setVariant","useState","garnishmentTypeOptions","value","garnishmentTypeLabel","handleSelectDeductionType","selection","handleSelectGarnishmentType","jsxs","Grid","Flex","jsx","Fragment","ActionsLayout","StandardDeductionForm","ChildSupportFormView"],"mappings":";;;;;;;;;;AAoBA,MAAMA,IAA0D;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAIA,SAASC,EAAmBC,GAAiC;AAC3D,QAAMC,IAAOD,EAAU;AACvB,SAAKA,EAAU,eACR;AAAA,IACL,MAAM;AAAA,IACN,MAAMC,KAAQH,EAA4B,SAASG,CAAI,IAAIA,IAAO;AAAA,EAAA,IAHhC,EAAE,MAAM,SAAA;AAK9C;AA0BO,SAASC,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAJ;AAAA,EACA,YAAAK;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AACF,GAAwB;AACtB,EAAAC,EAAQ,yBAAyB,GACjCC,EAAuB,2BAA2BL,CAAU;AAC5D,QAAM,EAAE,GAAAM,EAAA,IAAMC,EAAe,yBAAyB,GAChDC,IAAaC,EAAA,GAEbC,IAAS,CAAC,CAACf,GACXgB,IAAiBL,EAATI,IAAW,cAAiB,UAAN,GAG9BE,IAAiBC;AAAA,IACrB,MAAOlB,IAAYD,EAAmBC,CAAS,IAAI;AAAA,IACnD,CAACA,CAAS;AAAA,EAAA,GAEN,CAACmB,GAASC,CAAU,IAAIC,EAAyBJ,CAAc,GAE/DK,IAAyBJ;AAAA,IAC7B,MACEpB,EAA4B,IAAI,CAAAyB,OAAU;AAAA,MACxC,OAAAA;AAAA,MACA,OAAOC,EAAqBb,GAAGY,CAAK;AAAA,IAAA,EACpC;AAAA,IACJ,CAACZ,CAAC;AAAA,EAAA,GAGEc,IAA4B,CAACC,MAAsB;AACvD,IACEN,EADEM,MAAc,WACL,EAAE,MAAM,aAER,EAAE,MAAM,eAAe,MAAM,iBAFX;AAAA,EAIjC,GAEMC,IAA8B,CAACJ,MAAkB;AACrD,IAAAH,EAAW,EAAE,MAAM,eAAe,MAAMG,GAA0B;AAAA,EACpE;AAEA,2BACG,WAAA,EAAQ,WAAApB,GACP,UAAA,gBAAAyB,EAACC,GAAA,EAAK,KAAK,IACT,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAC,EAAClB,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAG,GAAM;AAAA,MACnC,gBAAAe,EAAClB,EAAW,MAAX,EAAgB,SAAQ,cAAc,UAAAF,EAAE,aAAa,EAAA,CAAE;AAAA,IAAA,GAC1D;AAAA,IAEC,CAACI,KACA,gBAAAa,EAAAI,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAJ,EAACE,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAAClB,EAAW;AAAA,UAAX;AAAA,YACC,OAAOF,EAAE,cAAc;AAAA,YACvB,aAAaA,EAAE,oBAAoB;AAAA,YACnC,SAAS;AAAA,cACP,EAAE,OAAO,eAAe,OAAOA,EAAE,mBAAmB,EAAA;AAAA,cACpD,EAAE,OAAO,UAAU,OAAOA,EAAE,cAAc,EAAA;AAAA,YAAE;AAAA,YAE9C,cAAcQ,GAAS,SAAS,WAAW,WAAW;AAAA,YACtD,UAAUM;AAAA,YACV,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAGXN,GAAS,SAAS,iBACjB,gBAAAY;AAAA,UAAClB,EAAW;AAAA,UAAX;AAAA,YACC,OAAOF,EAAE,sBAAsB;AAAA,YAC/B,aAAY;AAAA,YACZ,SAASW;AAAA,YACT,OAAOH,EAAQ;AAAA,YACf,UAAUQ;AAAA,YACV,YAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ,GAEJ;AAAA,MAECR,MAAY,QAAQ,gBAAAY,EAAC,MAAA,CAAA,CAAG;AAAA,MAExBZ,MAAY,QACX,gBAAAY,EAACE,GAAA,EACC,UAAA,gBAAAF,EAAClB,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASN,GAC3D,UAAAI,EAAE,gBAAgB,GACrB,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,IAGDQ,GAAS,SAAS,YACjB,gBAAAY;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,YAAA9B;AAAA,QACA,WAAWJ,KAAa;AAAA,QACxB,cAAc;AAAA,QACd,OAAOW,EAAE,cAAc;AAAA,QACvB,SAAAL;AAAA,QACA,UAAAC;AAAA,QACA,iBAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHW,GAAS,SAAS,iBAAiBA,EAAQ,SAAS,mBACnD,gBAAAY;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,YAAA/B;AAAA,QACA,WAAWJ,KAAa;AAAA,QACxB,SAAAM;AAAA,QACA,UAAAC;AAAA,QACA,iBAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAGHW,GAAS,SAAS,iBAAiBA,EAAQ,SAAS,mBACnD,gBAAAY;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,YAAA9B;AAAA,QACA,WAAWJ,KAAa;AAAA,QACxB,cAAc;AAAA,QACd,iBAAiBmB,EAAQ;AAAA,QACzB,OAAOK,EAAqBb,GAAGQ,EAAQ,IAAI;AAAA,QAC3C,SAAAb;AAAA,QACA,UAAAC;AAAA,QACA,iBAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,EAAA,CAEJ,EAAA,CACF;AAEJ;AAEA,SAASgB,EACP,GACAD,GACQ;AACR,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,aAAO,EAAE,oBAAoB;AAAA,IAC/B,KAAK;AACH,aAAO,EAAE,sBAAsB;AAAA,IACjC,KAAK;AACH,aAAO,EAAE,oBAAoB;AAAA,IAC/B,KAAK;AACH,aAAO,EAAE,mBAAmB;AAAA,IAC9B,KAAK;AACH,aAAO,EAAE,2BAA2B;AAAA,IACtC,KAAK;AACH,aAAO,EAAE,mBAAmB;AAAA,IAC9B,KAAK;AACH,aAAO,EAAE,wBAAwB;AAAA,EAAA;AAEvC;"}

package/dist/components/Employee/Deductions/shared/DeductionsForm/StandardDeductionForm.d.ts

@@ -1,4 +1,5 @@
 import { Garnishment, GarnishmentType } from '@gusto/embedded-api/models/components/garnishment';
+import { LoaderComponentType } from '../../../../Base';
 interface StandardDeductionFormProps {
     employeeId: string;
     deduction: Garnishment | null;
@@ -13,7 +14,8 @@ interface StandardDeductionFormProps {
     title: string;
     onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void;
     onCancel: () => void;
+    LoaderComponent?: LoaderComponentType;
 }
 /** @internal */
-export declare function StandardDeductionForm({ employeeId, deduction, courtOrdered, garnishmentType, title, onSaved, onCancel, }: StandardDeductionFormProps): import("react").JSX.Element;
+export declare function StandardDeductionForm({ employeeId, deduction, courtOrdered, garnishmentType, title, onSaved, onCancel, LoaderComponent, }: StandardDeductionFormProps): import("react").JSX.Element;
 export {};

package/dist/components/Employee/Deductions/shared/DeductionsForm/StandardDeductionForm.js

@@ -1,65 +1,67 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useTranslation as f } from "react-i18next";
-import { useWatch as D } from "react-hook-form";
-import { useDeductionForm as b } from "../useDeductionForm/useDeductionForm.js";
-import { Form as h } from "../../../../Common/Form/Form.js";
-import { Flex as u } from "../../../../Common/Flex/Flex.js";
-import { ActionsLayout as y } from "../../../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as A } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
-import { BaseLayout as g } from "../../../../Base/Base.js";
+import { useTranslation as D } from "react-i18next";
+import { useWatch as b } from "react-hook-form";
+import { useDeductionForm as h } from "../useDeductionForm/useDeductionForm.js";
+import { Form as y } from "../../../../Common/Form/Form.js";
+import { Flex as l } from "../../../../Common/Flex/Flex.js";
+import { ActionsLayout as A } from "../../../../Common/ActionsLayout/ActionsLayout.js";
+import { BaseLayout as f } from "../../../../Base/Base.js";
 import { SDKFormProvider as R } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { useComponentContext as x } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
 function S({
   employeeId: t,
   deduction: a,
   courtOrdered: o,
   garnishmentType: n,
   title: m,
-  onSaved: l,
-  onCancel: p
+  onSaved: p,
+  onCancel: g,
+  LoaderComponent: s
 }) {
-  const { t: s } = f("Employee.DeductionsForm"), c = A(), i = b({
+  const { t: c } = D("Employee.DeductionsForm"), u = x(), i = h({
     employeeId: t,
     garnishmentId: a?.uuid,
     courtOrdered: o,
     defaultValues: o && n ? { garnishmentType: n } : void 0
   });
   if (i.isLoading)
-    return /* @__PURE__ */ e(g, { isLoading: !0, error: i.errorHandling.errors });
+    return /* @__PURE__ */ e(f, { isLoading: !0, error: i.errorHandling.errors, LoaderComponent: s });
   const { Fields: r } = i.form;
   return /* @__PURE__ */ e(
-    x,
+    E,
     {
       form: i,
       Fields: r,
-      Components: c,
-      t: s,
+      Components: u,
+      t: c,
       title: m,
-      onSaved: l,
-      onCancel: p
+      onSaved: p,
+      onCancel: g,
+      LoaderComponent: s
     }
   );
 }
-function x({
+function E({
   form: t,
   Fields: a,
   Components: o,
   t: n,
   title: m,
-  onSaved: l,
-  onCancel: p
+  onSaved: p,
+  onCancel: g,
+  LoaderComponent: s
 }) {
-  const s = D({
+  const c = b({
     control: t.form.hookFormInternals.formMethods.control,
     name: "deductAsPercentage"
-  }), c = s === !0 || s === "true", i = async () => {
+  }), u = c === !0 || c === "true", i = async () => {
     const r = await t.actions.onSubmit();
-    r && l(r.data, r.mode);
+    r && p(r.data, r.mode);
   };
-  return /* @__PURE__ */ e(g, { error: t.errorHandling.errors, children: /* @__PURE__ */ e(R, { formHookResult: t, children: /* @__PURE__ */ e(h, { onSubmit: i, children: /* @__PURE__ */ d(u, { flexDirection: "column", gap: 32, children: [
+  return /* @__PURE__ */ e(f, { error: t.errorHandling.errors, LoaderComponent: s, children: /* @__PURE__ */ e(R, { formHookResult: t, children: /* @__PURE__ */ e(y, { onSubmit: i, children: /* @__PURE__ */ d(l, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ e(o.Heading, { as: "h3", children: m }),
-    /* @__PURE__ */ d(u, { flexDirection: "column", gap: 20, children: [
-      /* @__PURE__ */ d(u, { flexDirection: "column", gap: 20, children: [
+    /* @__PURE__ */ d(l, { flexDirection: "column", gap: 20, children: [
+      /* @__PURE__ */ d(l, { flexDirection: "column", gap: 20, children: [
         /* @__PURE__ */ e(
           a.Description,
           {
@@ -87,8 +89,8 @@ function x({
           a.Amount,
           {
             label: n("standard.amountLabel"),
-            format: c ? "percent" : "currency",
-            description: n(c ? "standard.amountPercentDescription" : "standard.amountFixedDescription"),
+            format: u ? "percent" : "currency",
+            description: n(u ? "standard.amountPercentDescription" : "standard.amountFixedDescription"),
             min: 0,
             validationMessages: {
               REQUIRED: n("standard.amountRequired"),
@@ -97,7 +99,7 @@ function x({
           }
         )
       ] }),
-      a.TotalAmount && a.AnnualMaximum && /* @__PURE__ */ d(u, { flexDirection: "column", gap: 20, children: [
+      a.TotalAmount && a.AnnualMaximum && /* @__PURE__ */ d(l, { flexDirection: "column", gap: 20, children: [
         /* @__PURE__ */ e(
           a.TotalAmount,
           {
@@ -124,8 +126,8 @@ function x({
         )
       ] })
     ] }),
-    /* @__PURE__ */ d(y, { children: [
-      /* @__PURE__ */ e(o.Button, { variant: "secondary", type: "button", onClick: p, children: n("actions.cancel") }),
+    /* @__PURE__ */ d(A, { children: [
+      /* @__PURE__ */ e(o.Button, { variant: "secondary", type: "button", onClick: g, children: n("actions.cancel") }),
       /* @__PURE__ */ e(o.Button, { type: "submit", isLoading: t.status.isPending, children: n("actions.save") })
     ] })
   ] }) }) }) });

package/dist/components/Employee/Deductions/shared/DeductionsForm/StandardDeductionForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StandardDeductionForm.js","sources":["../../../../../../src/components/Employee/Deductions/shared/DeductionsForm/StandardDeductionForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport type {\n  Garnishment,\n  GarnishmentType,\n} from '@gusto/embedded-api/models/components/garnishment'\nimport type { Control } from 'react-hook-form'\nimport { useDeductionForm } from '../useDeductionForm'\nimport type { DeductionFormData } from '../useDeductionForm'\nimport { Form } from '@/components/Common/Form'\nimport { ActionsLayout } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface StandardDeductionFormProps {\n  employeeId: string\n  deduction: Garnishment | null\n  /** Court-ordered garnishments require `garnishmentType`. Custom deductions don't. */\n  courtOrdered: boolean\n  /** Only meaningful when `courtOrdered: true`. Selects the garnishment type\n   *  on create. Ignored in edit mode (the existing type is preserved). */\n  garnishmentType?: GarnishmentType\n  /** Section heading shown above the form. The parent picker is responsible\n   *  for translating the garnishment-type label so this component doesn't\n   *  need to repeat the labels mapping. */\n  title: string\n  onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void\n  onCancel: () => void\n}\n\n/** @internal */\nexport function StandardDeductionForm({\n  employeeId,\n  deduction,\n  courtOrdered,\n  garnishmentType,\n  title,\n  onSaved,\n  onCancel,\n}: StandardDeductionFormProps) {\n  const { t } = useTranslation('Employee.DeductionsForm')\n  const Components = useComponentContext()\n\n  const form = useDeductionForm({\n    employeeId,\n    garnishmentId: deduction?.uuid,\n    courtOrdered,\n    defaultValues: courtOrdered && garnishmentType ? { garnishmentType } : undefined,\n  })\n\n  if (form.isLoading) {\n    return <BaseLayout isLoading error={form.errorHandling.errors} />\n  }\n\n  const { Fields } = form.form\n  return (\n    <ReadyForm\n      form={form}\n      Fields={Fields}\n      Components={Components}\n      t={t}\n      title={title}\n      onSaved={onSaved}\n      onCancel={onCancel}\n    />\n  )\n}\n\n// Split into a child component so we can call `useWatch` on the form's control\n// only once the hook is in its ready state (the control reference exists then).\nfunction ReadyForm({\n  form,\n  Fields,\n  Components,\n  t,\n  title,\n  onSaved,\n  onCancel,\n}: {\n  form: Extract<ReturnType<typeof useDeductionForm>, { isLoading: false }>\n  Fields: Extract<ReturnType<typeof useDeductionForm>, { isLoading: false }>['form']['Fields']\n  Components: ReturnType<typeof useComponentContext>\n  t: ReturnType<typeof useTranslation<'Employee.DeductionsForm'>>['t']\n  title: string\n  onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void\n  onCancel: () => void\n}) {\n  // useWatch subscribes to changes; getValues only reads once. We need the\n  // subscription because `Fields.Amount`'s `format` and `description` props\n  // need to re-render when the user toggles Percentage / Fixed amount.\n  // The RadioGroup's options carry string values (`'true'`/`'false'`), which\n  // round-trip into form state as strings — only `coerceStringBoolean` in the\n  // zod preprocessor turns them into actual booleans at validation time. So\n  // here we explicitly compare against both shapes; `Boolean('false')` would\n  // be truthy and surface the wrong copy under the Amount field.\n  const watchedDeductAsPercentageRaw = useWatch({\n    control: form.form.hookFormInternals.formMethods.control as Control<DeductionFormData>,\n    name: 'deductAsPercentage',\n  }) as boolean | 'true' | 'false' | undefined\n  const watchedDeductAsPercentage =\n    watchedDeductAsPercentageRaw === true || watchedDeductAsPercentageRaw === 'true'\n\n  const handleSubmit = async () => {\n    const result = await form.actions.onSubmit()\n    if (result) onSaved(result.data, result.mode)\n  }\n\n  return (\n    <BaseLayout error={form.errorHandling.errors}>\n      <SDKFormProvider formHookResult={form}>\n        <Form onSubmit={handleSubmit}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Components.Heading as=\"h3\">{title}</Components.Heading>\n            <Flex flexDirection=\"column\" gap={20}>\n              <Flex flexDirection=\"column\" gap={20}>\n                <Fields.Description\n                  label={t('standard.descriptionLabel')}\n                  validationMessages={{ REQUIRED: t('standard.descriptionRequired') }}\n                />\n                <Fields.Recurring\n                  label={t('standard.frequencyLabel')}\n                  getOptionLabel={(value: boolean) =>\n                    value ? t('standard.frequencyRecurring') : t('standard.frequencyOneTime')\n                  }\n                  validationMessages={{ REQUIRED: t('standard.frequencyRequired') }}\n                />\n                <Fields.DeductAsPercentage\n                  label={t('standard.typeLabel')}\n                  getOptionLabel={(value: boolean) =>\n                    value ? t('standard.typePercentage') : t('standard.typeFixed')\n                  }\n                  validationMessages={{ REQUIRED: t('standard.typeRequired') }}\n                />\n                <Fields.Amount\n                  label={t('standard.amountLabel')}\n                  format={watchedDeductAsPercentage ? 'percent' : 'currency'}\n                  description={\n                    watchedDeductAsPercentage\n                      ? t('standard.amountPercentDescription')\n                      : t('standard.amountFixedDescription')\n                  }\n                  min={0}\n                  validationMessages={{\n                    REQUIRED: t('standard.amountRequired'),\n                    NEGATIVE_AMOUNT: t('standard.amountNonNegative'),\n                  }}\n                />\n              </Flex>\n              {Fields.TotalAmount && Fields.AnnualMaximum && (\n                <Flex flexDirection=\"column\" gap={20}>\n                  <Fields.TotalAmount\n                    label={t('standard.totalAmountLabel')}\n                    description={t('standard.totalAmountDescription')}\n                    format=\"currency\"\n                    min={0}\n                    validationMessages={{\n                      NEGATIVE_AMOUNT: t('standard.amountNonNegative'),\n                    }}\n                  />\n                  <Fields.AnnualMaximum\n                    label={t('standard.annualMaxLabel')}\n                    description={t('standard.annualMaxDescription')}\n                    format=\"currency\"\n                    min={0}\n                    validationMessages={{\n                      NEGATIVE_AMOUNT: t('standard.amountNonNegative'),\n                    }}\n                  />\n                </Flex>\n              )}\n            </Flex>\n            <ActionsLayout>\n              <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n                {t('actions.cancel')}\n              </Components.Button>\n              <Components.Button type=\"submit\" isLoading={form.status.isPending}>\n                {t('actions.save')}\n              </Components.Button>\n            </ActionsLayout>\n          </Flex>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["StandardDeductionForm","employeeId","deduction","courtOrdered","garnishmentType","title","onSaved","onCancel","t","useTranslation","Components","useComponentContext","form","useDeductionForm","BaseLayout","Fields","jsx","ReadyForm","watchedDeductAsPercentageRaw","useWatch","watchedDeductAsPercentage","handleSubmit","result","SDKFormProvider","Form","jsxs","Flex","value","ActionsLayout"],"mappings":"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"}
+{"version":3,"file":"StandardDeductionForm.js","sources":["../../../../../../src/components/Employee/Deductions/shared/DeductionsForm/StandardDeductionForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport type {\n  Garnishment,\n  GarnishmentType,\n} from '@gusto/embedded-api/models/components/garnishment'\nimport type { Control } from 'react-hook-form'\nimport { useDeductionForm } from '../useDeductionForm'\nimport type { DeductionFormData } from '../useDeductionForm'\nimport { Form } from '@/components/Common/Form'\nimport { ActionsLayout } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { LoaderComponentType } from '@/components/Base'\n\ninterface StandardDeductionFormProps {\n  employeeId: string\n  deduction: Garnishment | null\n  /** Court-ordered garnishments require `garnishmentType`. Custom deductions don't. */\n  courtOrdered: boolean\n  /** Only meaningful when `courtOrdered: true`. Selects the garnishment type\n   *  on create. Ignored in edit mode (the existing type is preserved). */\n  garnishmentType?: GarnishmentType\n  /** Section heading shown above the form. The parent picker is responsible\n   *  for translating the garnishment-type label so this component doesn't\n   *  need to repeat the labels mapping. */\n  title: string\n  onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void\n  onCancel: () => void\n  LoaderComponent?: LoaderComponentType\n}\n\n/** @internal */\nexport function StandardDeductionForm({\n  employeeId,\n  deduction,\n  courtOrdered,\n  garnishmentType,\n  title,\n  onSaved,\n  onCancel,\n  LoaderComponent,\n}: StandardDeductionFormProps) {\n  const { t } = useTranslation('Employee.DeductionsForm')\n  const Components = useComponentContext()\n\n  const form = useDeductionForm({\n    employeeId,\n    garnishmentId: deduction?.uuid,\n    courtOrdered,\n    defaultValues: courtOrdered && garnishmentType ? { garnishmentType } : undefined,\n  })\n\n  if (form.isLoading) {\n    return (\n      <BaseLayout isLoading error={form.errorHandling.errors} LoaderComponent={LoaderComponent} />\n    )\n  }\n\n  const { Fields } = form.form\n  return (\n    <ReadyForm\n      form={form}\n      Fields={Fields}\n      Components={Components}\n      t={t}\n      title={title}\n      onSaved={onSaved}\n      onCancel={onCancel}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\n// Split into a child component so we can call `useWatch` on the form's control\n// only once the hook is in its ready state (the control reference exists then).\nfunction ReadyForm({\n  form,\n  Fields,\n  Components,\n  t,\n  title,\n  onSaved,\n  onCancel,\n  LoaderComponent,\n}: {\n  form: Extract<ReturnType<typeof useDeductionForm>, { isLoading: false }>\n  Fields: Extract<ReturnType<typeof useDeductionForm>, { isLoading: false }>['form']['Fields']\n  Components: ReturnType<typeof useComponentContext>\n  t: ReturnType<typeof useTranslation<'Employee.DeductionsForm'>>['t']\n  title: string\n  onSaved: (deduction: Garnishment, mode: 'create' | 'update') => void\n  onCancel: () => void\n  LoaderComponent?: LoaderComponentType\n}) {\n  // useWatch subscribes to changes; getValues only reads once. We need the\n  // subscription because `Fields.Amount`'s `format` and `description` props\n  // need to re-render when the user toggles Percentage / Fixed amount.\n  // The RadioGroup's options carry string values (`'true'`/`'false'`), which\n  // round-trip into form state as strings — only `coerceStringBoolean` in the\n  // zod preprocessor turns them into actual booleans at validation time. So\n  // here we explicitly compare against both shapes; `Boolean('false')` would\n  // be truthy and surface the wrong copy under the Amount field.\n  const watchedDeductAsPercentageRaw = useWatch({\n    control: form.form.hookFormInternals.formMethods.control as Control<DeductionFormData>,\n    name: 'deductAsPercentage',\n  }) as boolean | 'true' | 'false' | undefined\n  const watchedDeductAsPercentage =\n    watchedDeductAsPercentageRaw === true || watchedDeductAsPercentageRaw === 'true'\n\n  const handleSubmit = async () => {\n    const result = await form.actions.onSubmit()\n    if (result) onSaved(result.data, result.mode)\n  }\n\n  return (\n    <BaseLayout error={form.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <SDKFormProvider formHookResult={form}>\n        <Form onSubmit={handleSubmit}>\n          <Flex flexDirection=\"column\" gap={32}>\n            <Components.Heading as=\"h3\">{title}</Components.Heading>\n            <Flex flexDirection=\"column\" gap={20}>\n              <Flex flexDirection=\"column\" gap={20}>\n                <Fields.Description\n                  label={t('standard.descriptionLabel')}\n                  validationMessages={{ REQUIRED: t('standard.descriptionRequired') }}\n                />\n                <Fields.Recurring\n                  label={t('standard.frequencyLabel')}\n                  getOptionLabel={(value: boolean) =>\n                    value ? t('standard.frequencyRecurring') : t('standard.frequencyOneTime')\n                  }\n                  validationMessages={{ REQUIRED: t('standard.frequencyRequired') }}\n                />\n                <Fields.DeductAsPercentage\n                  label={t('standard.typeLabel')}\n                  getOptionLabel={(value: boolean) =>\n                    value ? t('standard.typePercentage') : t('standard.typeFixed')\n                  }\n                  validationMessages={{ REQUIRED: t('standard.typeRequired') }}\n                />\n                <Fields.Amount\n                  label={t('standard.amountLabel')}\n                  format={watchedDeductAsPercentage ? 'percent' : 'currency'}\n                  description={\n                    watchedDeductAsPercentage\n                      ? t('standard.amountPercentDescription')\n                      : t('standard.amountFixedDescription')\n                  }\n                  min={0}\n                  validationMessages={{\n                    REQUIRED: t('standard.amountRequired'),\n                    NEGATIVE_AMOUNT: t('standard.amountNonNegative'),\n                  }}\n                />\n              </Flex>\n              {Fields.TotalAmount && Fields.AnnualMaximum && (\n                <Flex flexDirection=\"column\" gap={20}>\n                  <Fields.TotalAmount\n                    label={t('standard.totalAmountLabel')}\n                    description={t('standard.totalAmountDescription')}\n                    format=\"currency\"\n                    min={0}\n                    validationMessages={{\n                      NEGATIVE_AMOUNT: t('standard.amountNonNegative'),\n                    }}\n                  />\n                  <Fields.AnnualMaximum\n                    label={t('standard.annualMaxLabel')}\n                    description={t('standard.annualMaxDescription')}\n                    format=\"currency\"\n                    min={0}\n                    validationMessages={{\n                      NEGATIVE_AMOUNT: t('standard.amountNonNegative'),\n                    }}\n                  />\n                </Flex>\n              )}\n            </Flex>\n            <ActionsLayout>\n              <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n                {t('actions.cancel')}\n              </Components.Button>\n              <Components.Button type=\"submit\" isLoading={form.status.isPending}>\n                {t('actions.save')}\n              </Components.Button>\n            </ActionsLayout>\n          </Flex>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["StandardDeductionForm","employeeId","deduction","courtOrdered","garnishmentType","title","onSaved","onCancel","LoaderComponent","t","useTranslation","Components","useComponentContext","form","useDeductionForm","jsx","BaseLayout","Fields","ReadyForm","watchedDeductAsPercentageRaw","useWatch","watchedDeductAsPercentage","handleSubmit","result","SDKFormProvider","Form","jsxs","Flex","value","ActionsLayout"],"mappings":";;;;;;;;;;AAmCO,SAASA,EAAsB;AAAA,EACpC,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AACF,GAA+B;AAC7B,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,yBAAyB,GAChDC,IAAaC,EAAA,GAEbC,IAAOC,EAAiB;AAAA,IAC5B,YAAAb;AAAA,IACA,eAAeC,GAAW;AAAA,IAC1B,cAAAC;AAAA,IACA,eAAeA,KAAgBC,IAAkB,EAAE,iBAAAA,MAAoB;AAAA,EAAA,CACxE;AAED,MAAIS,EAAK;AACP,WACE,gBAAAE,EAACC,KAAW,WAAS,IAAC,OAAOH,EAAK,cAAc,QAAQ,iBAAAL,GAAkC;AAI9F,QAAM,EAAE,QAAAS,MAAWJ,EAAK;AACxB,SACE,gBAAAE;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,MAAAL;AAAA,MACA,QAAAI;AAAA,MACA,YAAAN;AAAA,MACA,GAAAF;AAAA,MACA,OAAAJ;AAAA,MACA,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;AAIA,SAASU,EAAU;AAAA,EACjB,MAAAL;AAAA,EACA,QAAAI;AAAA,EACA,YAAAN;AAAA,EACA,GAAAF;AAAA,EACA,OAAAJ;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AACF,GASG;AASD,QAAMW,IAA+BC,EAAS;AAAA,IAC5C,SAASP,EAAK,KAAK,kBAAkB,YAAY;AAAA,IACjD,MAAM;AAAA,EAAA,CACP,GACKQ,IACJF,MAAiC,MAAQA,MAAiC,QAEtEG,IAAe,YAAY;AAC/B,UAAMC,IAAS,MAAMV,EAAK,QAAQ,SAAA;AAClC,IAAIU,KAAQjB,EAAQiB,EAAO,MAAMA,EAAO,IAAI;AAAA,EAC9C;AAEA,SACE,gBAAAR,EAACC,KAAW,OAAOH,EAAK,cAAc,QAAQ,iBAAAL,GAC5C,4BAACgB,GAAA,EAAgB,gBAAgBX,GAC/B,UAAA,gBAAAE,EAACU,GAAA,EAAK,UAAUH,GACd,UAAA,gBAAAI,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAZ,EAACJ,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAN,GAAM;AAAA,IACnC,gBAAAqB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,MAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAZ;AAAA,UAACE,EAAO;AAAA,UAAP;AAAA,YACC,OAAOR,EAAE,2BAA2B;AAAA,YACpC,oBAAoB,EAAE,UAAUA,EAAE,8BAA8B,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,QAEpE,gBAAAM;AAAA,UAACE,EAAO;AAAA,UAAP;AAAA,YACC,OAAOR,EAAE,yBAAyB;AAAA,YAClC,gBAAgB,CAACmB,MACPnB,EAARmB,IAAU,gCAAmC,2BAAN;AAAA,YAEzC,oBAAoB,EAAE,UAAUnB,EAAE,4BAA4B,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,QAElE,gBAAAM;AAAA,UAACE,EAAO;AAAA,UAAP;AAAA,YACC,OAAOR,EAAE,oBAAoB;AAAA,YAC7B,gBAAgB,CAACmB,MACPnB,EAARmB,IAAU,4BAA+B,oBAAN;AAAA,YAErC,oBAAoB,EAAE,UAAUnB,EAAE,uBAAuB,EAAA;AAAA,UAAE;AAAA,QAAA;AAAA,QAE7D,gBAAAM;AAAA,UAACE,EAAO;AAAA,UAAP;AAAA,YACC,OAAOR,EAAE,sBAAsB;AAAA,YAC/B,QAAQY,IAA4B,YAAY;AAAA,YAChD,aAEMZ,EADJY,IACM,sCACA,iCADmC;AAAA,YAG3C,KAAK;AAAA,YACL,oBAAoB;AAAA,cAClB,UAAUZ,EAAE,yBAAyB;AAAA,cACrC,iBAAiBA,EAAE,4BAA4B;AAAA,YAAA;AAAA,UACjD;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MACCQ,EAAO,eAAeA,EAAO,mCAC3BU,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAZ;AAAA,UAACE,EAAO;AAAA,UAAP;AAAA,YACC,OAAOR,EAAE,2BAA2B;AAAA,YACpC,aAAaA,EAAE,iCAAiC;AAAA,YAChD,QAAO;AAAA,YACP,KAAK;AAAA,YACL,oBAAoB;AAAA,cAClB,iBAAiBA,EAAE,4BAA4B;AAAA,YAAA;AAAA,UACjD;AAAA,QAAA;AAAA,QAEF,gBAAAM;AAAA,UAACE,EAAO;AAAA,UAAP;AAAA,YACC,OAAOR,EAAE,yBAAyB;AAAA,YAClC,aAAaA,EAAE,+BAA+B;AAAA,YAC9C,QAAO;AAAA,YACP,KAAK;AAAA,YACL,oBAAoB;AAAA,cAClB,iBAAiBA,EAAE,4BAA4B;AAAA,YAAA;AAAA,UACjD;AAAA,QAAA;AAAA,MACF,EAAA,CACF;AAAA,IAAA,GAEJ;AAAA,sBACCoB,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAd,EAACJ,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASJ,GAC3D,UAAAE,EAAE,gBAAgB,EAAA,CACrB;AAAA,MACA,gBAAAM,EAACJ,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWE,EAAK,OAAO,WACrD,UAAAJ,EAAE,cAAc,EAAA,CACnB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF,EAAA,CACF,GACF,GACF;AAEJ;"}

package/dist/components/Employee/Documents/management/DocumentManager.js

@@ -1,17 +1,16 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useTranslation as s, Trans as p } from "react-i18next";
-import { useEmployeeFormsGetSuspense as u } from "@gusto/embedded-api/react-query/employeeFormsGet";
+import { useTranslation as s, Trans as u } from "react-i18next";
+import { useEmployeeFormsGetSuspense as p } from "@gusto/embedded-api/react-query/employeeFormsGet";
 import { useEmployeeFormsGetPdfSuspense as f } from "@gusto/embedded-api/react-query/employeeFormsGetPdf";
 import { BaseComponent as d } from "../../../Base/Base.js";
 import { useBase as C } from "../../../Base/useBase.js";
 import { Flex as D } from "../../../Common/Flex/Flex.js";
 import { ActionsLayout as y } from "../../../Common/ActionsLayout/ActionsLayout.js";
 import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
 import { useI18n as h } from "../../../../i18n/I18n.js";
 import { componentEvents as E } from "../../../../shared/constants.js";
 import { DocumentViewer as x } from "../../../Common/DocumentViewer/DocumentViewer.js";
-function P(o) {
+function N(o) {
   return h("Employee.DocumentManager"), /* @__PURE__ */ e(d, { ...o, componentName: "Employee.DocumentManager", children: /* @__PURE__ */ e(w, { employeeId: o.employeeId, formId: o.formId }) });
 }
 function w({
@@ -20,13 +19,13 @@ function w({
 }) {
   const { t: r } = s("Employee.DocumentManager"), t = g(), { onEvent: a } = C(), {
     data: { form: n }
-  } = u({ employeeId: o, formId: i }), {
+  } = p({ employeeId: o, formId: i }), {
     data: { formPdf: c }
   } = f({ employeeId: o, formId: i }), m = c?.documentUrl;
   return n ? /* @__PURE__ */ l(D, { flexDirection: "column", gap: 16, children: [
     n.title && /* @__PURE__ */ e(t.Heading, { as: "h2", children: n.title }),
     m && /* @__PURE__ */ e(t.Text, { children: /* @__PURE__ */ e(
-      p,
+      u,
       {
         t: r,
         i18nKey: "downloadDocumentCta",
@@ -57,6 +56,6 @@ function w({
   ] }) : null;
 }
 export {
-  P as DocumentManager
+  N as DocumentManager
 };
 //# sourceMappingURL=DocumentManager.js.map

package/dist/components/Employee/Documents/management/DocumentManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentManager.js","sources":["../../../../../src/components/Employee/Documents/management/DocumentManager.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { useEmployeeFormsGetSuspense } from '@gusto/embedded-api/react-query/employeeFormsGet'\nimport { useEmployeeFormsGetPdfSuspense } from '@gusto/embedded-api/react-query/employeeFormsGetPdf'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport type { BaseComponentKeys } from '@/components/Base/Base'\nimport { ActionsLayout, Flex } from '@/components/Common'\nimport { DocumentViewer } from '@/components/Common/DocumentViewer'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link DocumentManager}.\n *\n * @public\n */\nexport interface DocumentManagerProps extends BaseComponentInterface<'Employee.DocumentManager'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** The identifier of the form to display. */\n  formId: string\n}\n\n/**\n * Read-only document viewer for the admin-facing employee dashboard. Renders the\n * selected form's PDF — including unsigned forms, which are shown as-is.\n * Signing is intentionally not offered here; forms are signed by the employee\n * during onboarding, not by an admin viewing the dashboard.\n *\n * @remarks\n * Emits the following events:\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `CANCEL` | The back button is selected | — |\n *\n * @param props - See {@link DocumentManagerProps}.\n * @public\n */\nexport function DocumentManager(props: DocumentManagerProps) {\n  useI18n('Employee.DocumentManager')\n  return (\n    <BaseComponent {...props} componentName=\"Employee.DocumentManager\">\n      <DocumentManagerRoot employeeId={props.employeeId} formId={props.formId} />\n    </BaseComponent>\n  )\n}\n\nfunction DocumentManagerRoot({\n  employeeId,\n  formId,\n}: Omit<DocumentManagerProps, BaseComponentKeys>) {\n  const { t } = useTranslation('Employee.DocumentManager')\n  const Components = useComponentContext()\n  const { onEvent } = useBase()\n\n  const {\n    data: { form },\n  } = useEmployeeFormsGetSuspense({ employeeId, formId })\n  const {\n    data: { formPdf },\n  } = useEmployeeFormsGetPdfSuspense({ employeeId, formId })\n\n  const pdfUrl = formPdf?.documentUrl\n\n  if (!form) return null\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {form.title && <Components.Heading as=\"h2\">{form.title}</Components.Heading>}\n      {pdfUrl && (\n        <Components.Text>\n          <Trans\n            t={t}\n            i18nKey=\"downloadDocumentCta\"\n            components={{\n              downloadLink: (\n                <Components.Link\n                  href={pdfUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  download={`${form.title || 'form'}.pdf`}\n                />\n              ),\n            }}\n          />\n        </Components.Text>\n      )}\n      <DocumentViewer url={pdfUrl} title={form.title} viewDocumentLabel={t('viewDocumentCta')} />\n\n      <ActionsLayout>\n        <Components.Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(componentEvents.CANCEL)\n          }}\n        >\n          {t('backCta')}\n        </Components.Button>\n      </ActionsLayout>\n    </Flex>\n  )\n}\n"],"names":["DocumentManager","props","useI18n","jsx","BaseComponent","DocumentManagerRoot","employeeId","formId","t","useTranslation","Components","useComponentContext","onEvent","useBase","form","useEmployeeFormsGetSuspense","formPdf","useEmployeeFormsGetPdfSuspense","pdfUrl","jsxs","Flex","Trans","DocumentViewer","ActionsLayout","componentEvents"],"mappings":";;;;;;;;;;;;;AAwCO,SAASA,EAAgBC,GAA6B;AAC3D,SAAAC,EAAQ,0BAA0B,GAEhC,gBAAAC,EAACC,GAAA,EAAe,GAAGH,GAAO,eAAc,4BACtC,UAAA,gBAAAE,EAACE,GAAA,EAAoB,YAAYJ,EAAM,YAAY,QAAQA,EAAM,QAAQ,GAC3E;AAEJ;AAEA,SAASI,EAAoB;AAAA,EAC3B,YAAAC;AAAA,EACA,QAAAC;AACF,GAAkD;AAChD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,0BAA0B,GACjDC,IAAaC,EAAA,GACb,EAAE,SAAAC,EAAA,IAAYC,EAAA,GAEd;AAAA,IACJ,MAAM,EAAE,MAAAC,EAAA;AAAA,EAAK,IACXC,EAA4B,EAAE,YAAAT,GAAY,QAAAC,GAAQ,GAChD;AAAA,IACJ,MAAM,EAAE,SAAAS,EAAA;AAAA,EAAQ,IACdC,EAA+B,EAAE,YAAAX,GAAY,QAAAC,GAAQ,GAEnDW,IAASF,GAAS;AAExB,SAAKF,IAGH,gBAAAK,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAN,EAAK,2BAAUJ,EAAW,SAAX,EAAmB,IAAG,MAAM,YAAK,MAAA,CAAM;AAAA,IACtDQ,KACC,gBAAAf,EAACO,EAAW,MAAX,EACC,UAAA,gBAAAP;AAAA,MAACkB;AAAA,MAAA;AAAA,QACC,GAAAb;AAAA,QACA,SAAQ;AAAA,QACR,YAAY;AAAA,UACV,cACE,gBAAAL;AAAA,YAACO,EAAW;AAAA,YAAX;AAAA,cACC,MAAMQ;AAAA,cACN,QAAO;AAAA,cACP,KAAI;AAAA,cACJ,UAAU,GAAGJ,EAAK,SAAS,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACnC;AAAA,MAEJ;AAAA,IAAA,GAEJ;AAAA,IAEF,gBAAAX,EAACmB,GAAA,EAAe,KAAKJ,GAAQ,OAAOJ,EAAK,OAAO,mBAAmBN,EAAE,iBAAiB,EAAA,CAAG;AAAA,sBAExFe,GAAA,EACC,UAAA,gBAAApB;AAAA,MAACO,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,UAAAE,EAAQY,EAAgB,MAAM;AAAA,QAChC;AAAA,QAEC,YAAE,SAAS;AAAA,MAAA;AAAA,IAAA,EACd,CACF;AAAA,EAAA,GACF,IAnCgB;AAqCpB;"}
+{"version":3,"file":"DocumentManager.js","sources":["../../../../../src/components/Employee/Documents/management/DocumentManager.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport { useEmployeeFormsGetSuspense } from '@gusto/embedded-api/react-query/employeeFormsGet'\nimport { useEmployeeFormsGetPdfSuspense } from '@gusto/embedded-api/react-query/employeeFormsGetPdf'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport type { BaseComponentKeys } from '@/components/Base/Base'\nimport { ActionsLayout, Flex } from '@/components/Common'\nimport { DocumentViewer } from '@/components/Common/DocumentViewer'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link DocumentManager}.\n *\n * @public\n */\nexport interface DocumentManagerProps extends BaseComponentInterface<'Employee.DocumentManager'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** The identifier of the form to display. */\n  formId: string\n}\n\n/**\n * Read-only document viewer for the admin-facing employee dashboard. Renders the\n * selected form's PDF — including unsigned forms, which are shown as-is.\n * Signing is intentionally not offered here; forms are signed by the employee\n * during onboarding, not by an admin viewing the dashboard.\n *\n * @remarks\n * Emits the following events:\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `CANCEL` | The back button is selected | — |\n *\n * @param props - See {@link DocumentManagerProps}.\n * @public\n */\nexport function DocumentManager(props: DocumentManagerProps) {\n  useI18n('Employee.DocumentManager')\n  return (\n    <BaseComponent {...props} componentName=\"Employee.DocumentManager\">\n      <DocumentManagerRoot employeeId={props.employeeId} formId={props.formId} />\n    </BaseComponent>\n  )\n}\n\nfunction DocumentManagerRoot({\n  employeeId,\n  formId,\n}: Omit<DocumentManagerProps, BaseComponentKeys>) {\n  const { t } = useTranslation('Employee.DocumentManager')\n  const Components = useComponentContext()\n  const { onEvent } = useBase()\n\n  const {\n    data: { form },\n  } = useEmployeeFormsGetSuspense({ employeeId, formId })\n  const {\n    data: { formPdf },\n  } = useEmployeeFormsGetPdfSuspense({ employeeId, formId })\n\n  const pdfUrl = formPdf?.documentUrl\n\n  if (!form) return null\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {form.title && <Components.Heading as=\"h2\">{form.title}</Components.Heading>}\n      {pdfUrl && (\n        <Components.Text>\n          <Trans\n            t={t}\n            i18nKey=\"downloadDocumentCta\"\n            components={{\n              downloadLink: (\n                <Components.Link\n                  href={pdfUrl}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  download={`${form.title || 'form'}.pdf`}\n                />\n              ),\n            }}\n          />\n        </Components.Text>\n      )}\n      <DocumentViewer url={pdfUrl} title={form.title} viewDocumentLabel={t('viewDocumentCta')} />\n\n      <ActionsLayout>\n        <Components.Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(componentEvents.CANCEL)\n          }}\n        >\n          {t('backCta')}\n        </Components.Button>\n      </ActionsLayout>\n    </Flex>\n  )\n}\n"],"names":["DocumentManager","props","useI18n","jsx","BaseComponent","DocumentManagerRoot","employeeId","formId","t","useTranslation","Components","useComponentContext","onEvent","useBase","form","useEmployeeFormsGetSuspense","formPdf","useEmployeeFormsGetPdfSuspense","pdfUrl","jsxs","Flex","Trans","DocumentViewer","ActionsLayout","componentEvents"],"mappings":";;;;;;;;;;;;AAwCO,SAASA,EAAgBC,GAA6B;AAC3D,SAAAC,EAAQ,0BAA0B,GAEhC,gBAAAC,EAACC,GAAA,EAAe,GAAGH,GAAO,eAAc,4BACtC,UAAA,gBAAAE,EAACE,GAAA,EAAoB,YAAYJ,EAAM,YAAY,QAAQA,EAAM,QAAQ,GAC3E;AAEJ;AAEA,SAASI,EAAoB;AAAA,EAC3B,YAAAC;AAAA,EACA,QAAAC;AACF,GAAkD;AAChD,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,0BAA0B,GACjDC,IAAaC,EAAA,GACb,EAAE,SAAAC,EAAA,IAAYC,EAAA,GAEd;AAAA,IACJ,MAAM,EAAE,MAAAC,EAAA;AAAA,EAAK,IACXC,EAA4B,EAAE,YAAAT,GAAY,QAAAC,GAAQ,GAChD;AAAA,IACJ,MAAM,EAAE,SAAAS,EAAA;AAAA,EAAQ,IACdC,EAA+B,EAAE,YAAAX,GAAY,QAAAC,GAAQ,GAEnDW,IAASF,GAAS;AAExB,SAAKF,IAGH,gBAAAK,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAN,EAAK,2BAAUJ,EAAW,SAAX,EAAmB,IAAG,MAAM,YAAK,MAAA,CAAM;AAAA,IACtDQ,KACC,gBAAAf,EAACO,EAAW,MAAX,EACC,UAAA,gBAAAP;AAAA,MAACkB;AAAA,MAAA;AAAA,QACC,GAAAb;AAAA,QACA,SAAQ;AAAA,QACR,YAAY;AAAA,UACV,cACE,gBAAAL;AAAA,YAACO,EAAW;AAAA,YAAX;AAAA,cACC,MAAMQ;AAAA,cACN,QAAO;AAAA,cACP,KAAI;AAAA,cACJ,UAAU,GAAGJ,EAAK,SAAS,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,QACnC;AAAA,MAEJ;AAAA,IAAA,GAEJ;AAAA,IAEF,gBAAAX,EAACmB,GAAA,EAAe,KAAKJ,GAAQ,OAAOJ,EAAK,OAAO,mBAAmBN,EAAE,iBAAiB,EAAA,CAAG;AAAA,sBAExFe,GAAA,EACC,UAAA,gBAAApB;AAAA,MAACO,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,UAAAE,EAAQY,EAAgB,MAAM;AAAA,QAChC;AAAA,QAEC,YAAE,SAAS;AAAA,MAAA;AAAA,IAAA,EACd,CACF;AAAA,EAAA,GACF,IAnCgB;AAqCpB;"}

package/dist/components/Employee/Documents/management/Documents.d.ts

@@ -26,4 +26,4 @@ export interface DocumentsProps extends BaseComponentInterface<'Employee.Managem
  * @returns The documents management flow.
  * @public
  */
-export declare function Documents({ dictionary, FallbackComponent, ...props }: DocumentsProps): import("react").JSX.Element;
+export declare function Documents({ dictionary, FallbackComponent, LoaderComponent, ...props }: DocumentsProps): import("react").JSX.Element;

package/dist/components/Employee/Documents/management/Documents.js

@@ -1,35 +1,42 @@
 import { jsx as n } from "react/jsx-runtime";
-import { createMachine as r } from "robot3";
-import { useMemo as c } from "react";
+import { createMachine as c } from "robot3";
+import { useMemo as i } from "react";
 import { DocumentsCardContextual as a } from "./DocumentsComponents.js";
-import { documentsStateMachine as i } from "./documentsStateMachine.js";
-import { Flow as u } from "../../../Flow/Flow.js";
+import { documentsStateMachine as u } from "./documentsStateMachine.js";
+import { Flow as s } from "../../../Flow/Flow.js";
 import { BaseBoundaries as p } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
-import { useComponentDictionary as s, useI18n as f } from "../../../../i18n/I18n.js";
-function D({ employeeId: o, onEvent: e }) {
-  f("Employee.Management.Documents");
-  const m = c(
-    () => r("card", i, (t) => ({
-      ...t,
+import { useComponentDictionary as f, useI18n as D } from "../../../../i18n/I18n.js";
+function l({ employeeId: e, onEvent: m, LoaderComponent: o }) {
+  D("Employee.Management.Documents");
+  const t = i(
+    () => c("card", u, (r) => ({
+      ...r,
       component: a,
-      employeeId: o
+      employeeId: e,
+      LoaderComponent: o
     })),
-    [o]
+    [e, o]
   );
-  return /* @__PURE__ */ n(u, { machine: m, onEvent: e });
+  return /* @__PURE__ */ n(s, { machine: t, onEvent: m });
 }
-function w({ dictionary: o, FallbackComponent: e, ...m }) {
-  return s("Employee.Management.Documents", o), /* @__PURE__ */ n(
+function F({
+  dictionary: e,
+  FallbackComponent: m,
+  LoaderComponent: o,
+  ...t
+}) {
+  return f("Employee.Management.Documents", e), /* @__PURE__ */ n(
     p,
     {
       componentName: "Employee.Management.Documents",
-      FallbackComponent: e,
-      children: /* @__PURE__ */ n(D, { ...m })
+      FallbackComponent: m,
+      LoaderComponent: o,
+      children: /* @__PURE__ */ n(l, { LoaderComponent: o, ...t })
     }
   );
 }
 export {
-  w as Documents
+  F as Documents
 };
 //# sourceMappingURL=Documents.js.map

package/dist/components/Employee/Documents/management/Documents.js.map

@@ -1 +1 @@
-{"version":3,"file":"Documents.js","sources":["../../../../../src/components/Employee/Documents/management/Documents.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport { DocumentsCardContextual, type DocumentsContextInterface } from './DocumentsComponents'\nimport { documentsStateMachine } from './documentsStateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\n\n/**\n * Props for {@link Documents}.\n *\n * @public\n */\nexport interface DocumentsProps extends BaseComponentInterface<'Employee.Management.Documents'> {\n  /** The associated employee identifier. */\n  employeeId: string\n}\n\nfunction DocumentsFlow({ employeeId, onEvent }: DocumentsProps) {\n  useI18n('Employee.Management.Documents')\n\n  const machine = useMemo(\n    () =>\n      createMachine('card', documentsStateMachine, (ctx: DocumentsContextInterface) => ({\n        ...ctx,\n        component: DocumentsCardContextual,\n        employeeId,\n      })),\n    [employeeId],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Standalone employee documents management flow.\n *\n * @remarks\n * Orchestrates the documents card and the per-form document manager. The flow\n * starts on the documents card and routes to the document manager when a row's\n * View CTA is selected; cancelling from the document manager returns to the\n * card.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/documents/card/viewRequested` | Fired when a row's View CTA is clicked on the documents card | `{ employeeId: string; formId: string }` |\n *\n * @param props - See {@link DocumentsProps}.\n * @returns The documents management flow.\n * @public\n */\nexport function Documents({ dictionary, FallbackComponent, ...props }: DocumentsProps) {\n  useComponentDictionary('Employee.Management.Documents', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.Documents\"\n      FallbackComponent={FallbackComponent}\n    >\n      <DocumentsFlow {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["DocumentsFlow","employeeId","onEvent","useI18n","machine","useMemo","createMachine","documentsStateMachine","ctx","DocumentsCardContextual","jsx","Flow","Documents","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries"],"mappings":";;;;;;;;;AAmBA,SAASA,EAAc,EAAE,YAAAC,GAAY,SAAAC,KAA2B;AAC9D,EAAAC,EAAQ,+BAA+B;AAEvC,QAAMC,IAAUC;AAAA,IACd,MACEC,EAAc,QAAQC,GAAuB,CAACC,OAAoC;AAAA,MAChF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,YAAAR;AAAA,IAAA,EACA;AAAA,IACJ,CAACA,CAAU;AAAA,EAAA;AAGb,SAAO,gBAAAS,EAACC,GAAA,EAAK,SAAAP,GAAkB,SAAAF,EAAA,CAAkB;AACnD;AAoBO,SAASU,EAAU,EAAE,YAAAC,GAAY,mBAAAC,GAAmB,GAAGC,KAAyB;AACrF,SAAAC,EAAuB,iCAAiCH,CAAU,GAEhE,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MAEA,UAAA,gBAAAJ,EAACV,GAAA,EAAe,GAAGe,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGhC;"}
+{"version":3,"file":"Documents.js","sources":["../../../../../src/components/Employee/Documents/management/Documents.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport { DocumentsCardContextual, type DocumentsContextInterface } from './DocumentsComponents'\nimport { documentsStateMachine } from './documentsStateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\n\n/**\n * Props for {@link Documents}.\n *\n * @public\n */\nexport interface DocumentsProps extends BaseComponentInterface<'Employee.Management.Documents'> {\n  /** The associated employee identifier. */\n  employeeId: string\n}\n\nfunction DocumentsFlow({ employeeId, onEvent, LoaderComponent }: DocumentsProps) {\n  useI18n('Employee.Management.Documents')\n\n  const machine = useMemo(\n    () =>\n      createMachine('card', documentsStateMachine, (ctx: DocumentsContextInterface) => ({\n        ...ctx,\n        component: DocumentsCardContextual,\n        employeeId,\n        LoaderComponent,\n      })),\n    [employeeId, LoaderComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Standalone employee documents management flow.\n *\n * @remarks\n * Orchestrates the documents card and the per-form document manager. The flow\n * starts on the documents card and routes to the document manager when a row's\n * View CTA is selected; cancelling from the document manager returns to the\n * card.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/documents/card/viewRequested` | Fired when a row's View CTA is clicked on the documents card | `{ employeeId: string; formId: string }` |\n *\n * @param props - See {@link DocumentsProps}.\n * @returns The documents management flow.\n * @public\n */\nexport function Documents({\n  dictionary,\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: DocumentsProps) {\n  useComponentDictionary('Employee.Management.Documents', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.Documents\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <DocumentsFlow LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["DocumentsFlow","employeeId","onEvent","LoaderComponent","useI18n","machine","useMemo","createMachine","documentsStateMachine","ctx","DocumentsCardContextual","jsx","Flow","Documents","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries"],"mappings":";;;;;;;;;AAmBA,SAASA,EAAc,EAAE,YAAAC,GAAY,SAAAC,GAAS,iBAAAC,KAAmC;AAC/E,EAAAC,EAAQ,+BAA+B;AAEvC,QAAMC,IAAUC;AAAA,IACd,MACEC,EAAc,QAAQC,GAAuB,CAACC,OAAoC;AAAA,MAChF,GAAGA;AAAA,MACH,WAAWC;AAAA,MACX,YAAAT;AAAA,MACA,iBAAAE;AAAA,IAAA,EACA;AAAA,IACJ,CAACF,GAAYE,CAAe;AAAA,EAAA;AAG9B,SAAO,gBAAAQ,EAACC,GAAA,EAAK,SAAAP,GAAkB,SAAAH,EAAA,CAAkB;AACnD;AAoBO,SAASW,EAAU;AAAA,EACxB,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAZ;AAAA,EACA,GAAGa;AACL,GAAmB;AACjB,SAAAC,EAAuB,iCAAiCH,CAAU,GAEhE,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MACA,iBAAAZ;AAAA,MAEA,UAAA,gBAAAQ,EAACX,GAAA,EAAc,iBAAAG,GAAmC,GAAGa,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGlE;"}

package/dist/components/Employee/Documents/management/DocumentsCard/DocumentsCard.d.ts

@@ -1,5 +1,6 @@
 import { EventType } from '../../../../../shared/constants';
 import { OnEventType } from '../../../../Base/useBase';
+import { LoaderComponentType } from '../../../../Base';
 /**
  * Props for {@link DocumentsCard}.
  *
@@ -10,6 +11,8 @@ export interface DocumentsCardProps {
     employeeId: string;
     /** Event handler fired when a row's View CTA is clicked. */
     onEvent: OnEventType<EventType, unknown>;
+    /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */
+    LoaderComponent?: LoaderComponentType;
 }
 /**
  * Standalone "Documents" (forms) card. Owns its own data fetch via

package/dist/components/Employee/Documents/management/DocumentsCard/DocumentsCard.js

@@ -1,21 +1,27 @@
 import { jsx as e } from "react/jsx-runtime";
 import { useTranslation as c } from "react-i18next";
-import { Loading as d } from "../../../../Common/Loading/Loading.js";
-import { EmptyData as l } from "../../../../Common/EmptyData/EmptyData.js";
-import { useComponentContext as p } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
-import { BaseBoundaries as g, BaseLayout as f } from "../../../../Base/Base.js";
-import { useI18n as y } from "../../../../../i18n/I18n.js";
-import { componentEvents as E } from "../../../../../shared/constants.js";
+import { Loading as l } from "../../../../Common/Loading/Loading.js";
+import { EmptyData as g } from "../../../../Common/EmptyData/EmptyData.js";
+import { BaseBoundaries as p, BaseLayout as f } from "../../../../Base/Base.js";
+import { useComponentContext as y } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as E } from "../../../../../i18n/I18n.js";
+import { componentEvents as C } from "../../../../../shared/constants.js";
 import { useDocumentsList as D } from "../../shared/useDocumentsList/useDocumentsList.js";
 import { useDataView as S } from "../../../../Common/DataView/useDataView.js";
-import { DataView as C } from "../../../../Common/DataView/DataView.js";
+import { DataView as L } from "../../../../Common/DataView/DataView.js";
 function A(o) {
-  return /* @__PURE__ */ e(g, { componentName: "Employee.Management.Documents", children: /* @__PURE__ */ e(h, { ...o }) });
+  return /* @__PURE__ */ e(
+    p,
+    {
+      componentName: "Employee.Management.Documents",
+      LoaderComponent: o.LoaderComponent,
+      children: /* @__PURE__ */ e(h, { ...o })
+    }
+  );
 }
-function h({ employeeId: o, onEvent: s }) {
-  y("Employee.Management.Documents");
-  const { t } = c("Employee.Management.Documents"), r = p(), i = D({ employeeId: o }), a = i.isLoading ? [] : i.data.forms, m = [
+function h({ employeeId: o, onEvent: s, LoaderComponent: a }) {
+  E("Employee.Management.Documents");
+  const { t } = c("Employee.Management.Documents"), r = y(), i = D({ employeeId: o }), m = i.isLoading ? [] : i.data.forms, u = [
     {
       key: "title",
       title: t("columns.title"),
@@ -36,15 +42,15 @@ function h({ employeeId: o, onEvent: s }) {
       title: t("columns.requiresSigning"),
       render: (n) => n.requiresSigning ? /* @__PURE__ */ e(r.Badge, { status: "warning", children: t("signingStatus.notSigned") }) : /* @__PURE__ */ e(r.Badge, { status: "success", children: t("signingStatus.signed") })
     }
-  ], u = S({
-    data: a,
-    columns: m,
+  ], d = S({
+    data: m,
+    columns: u,
     itemMenu: (n) => /* @__PURE__ */ e(
       r.Button,
       {
         variant: "secondary",
         onClick: () => {
-          s(E.EMPLOYEE_MANAGEMENT_DOCUMENTS_CARD_VIEW_REQUESTED, {
+          s(C.EMPLOYEE_MANAGEMENT_DOCUMENTS_CARD_VIEW_REQUESTED, {
             employeeId: o,
             formId: n.uuid
           });
@@ -52,9 +58,9 @@ function h({ employeeId: o, onEvent: s }) {
         children: t("viewCta")
       }
     ),
-    emptyState: () => /* @__PURE__ */ e(l, { title: t("emptyState.title"), description: t("emptyState.description") })
+    emptyState: () => /* @__PURE__ */ e(g, { title: t("emptyState.title"), description: t("emptyState.description") })
   });
-  return /* @__PURE__ */ e(f, { error: i.errorHandling.errors, children: /* @__PURE__ */ e(r.Box, { withPadding: !1, header: /* @__PURE__ */ e(r.BoxHeader, { title: t("title") }), children: i.isLoading ? /* @__PURE__ */ e(d, {}) : /* @__PURE__ */ e(C, { label: t("listLabel"), isWithinBox: !0, ...u }) }) });
+  return /* @__PURE__ */ e(f, { error: i.errorHandling.errors, LoaderComponent: a, children: /* @__PURE__ */ e(r.Box, { withPadding: !1, header: /* @__PURE__ */ e(r.BoxHeader, { title: t("title") }), children: i.isLoading ? /* @__PURE__ */ e(l, {}) : /* @__PURE__ */ e(L, { label: t("listLabel"), isWithinBox: !0, ...d }) }) });
 }
 export {
   A as DocumentsCard

package/dist/components/Employee/Documents/management/DocumentsCard/DocumentsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentsCard.js","sources":["../../../../../../src/components/Employee/Documents/management/DocumentsCard/DocumentsCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Form } from '@gusto/embedded-api/models/components/form'\nimport { useDocumentsList } from '../../shared/useDocumentsList'\nimport { DataView, useDataView, EmptyData, Loading } from '@/components/Common'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/**\n * Props for {@link DocumentsCard}.\n *\n * @public\n */\nexport interface DocumentsCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired when a row's View CTA is clicked. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone \"Documents\" (forms) card. Owns its own data fetch via\n * {@link useDocumentsList} and renders the employee's forms in a table with a\n * per-row \"View\" action. Emits\n * `employee/management/documents/card/viewRequested` with\n * `{ employeeId, formId }` when a row's View CTA is clicked. The card is\n * read-only — viewing or signing a form happens in the screen the parent\n * routes to — and renders no alerts: alert rendering is the parent's\n * responsibility.\n *\n * @param props - See {@link DocumentsCardProps}.\n * @returns The documents card.\n * @public\n */\nexport function DocumentsCard(props: DocumentsCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.Documents\">\n      <DocumentsCardContent {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction DocumentsCardContent({ employeeId, onEvent }: DocumentsCardProps) {\n  useI18n('Employee.Management.Documents')\n  const { t } = useTranslation('Employee.Management.Documents')\n  const Components = useComponentContext()\n\n  const documentsList = useDocumentsList({ employeeId })\n\n  const forms = documentsList.isLoading ? [] : documentsList.data.forms\n\n  const formsColumns = [\n    {\n      key: 'title',\n      title: t('columns.title'),\n      render: (form: Form) => form.title || '-',\n    },\n    {\n      key: 'year',\n      title: t('columns.year'),\n      render: (form: Form) => (form.year ? String(form.year) : '-'),\n    },\n    {\n      key: 'status',\n      title: t('columns.status'),\n      render: (form: Form) => (form.draft ? t('status.draft') : t('status.final')),\n    },\n    {\n      key: 'requiresSigning',\n      title: t('columns.requiresSigning'),\n      render: (form: Form) =>\n        form.requiresSigning ? (\n          <Components.Badge status=\"warning\">{t('signingStatus.notSigned')}</Components.Badge>\n        ) : (\n          <Components.Badge status=\"success\">{t('signingStatus.signed')}</Components.Badge>\n        ),\n    },\n  ]\n\n  const formsDataView = useDataView({\n    data: forms,\n    columns: formsColumns,\n    itemMenu: (form: Form) => (\n      <Components.Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DOCUMENTS_CARD_VIEW_REQUESTED, {\n            employeeId,\n            formId: form.uuid,\n          })\n        }}\n      >\n        {t('viewCta')}\n      </Components.Button>\n    ),\n    emptyState: () => (\n      <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n    ),\n  })\n\n  return (\n    <BaseLayout error={documentsList.errorHandling.errors}>\n      <Components.Box withPadding={false} header={<Components.BoxHeader title={t('title')} />}>\n        {documentsList.isLoading ? (\n          <Loading />\n        ) : (\n          <DataView label={t('listLabel')} isWithinBox {...formsDataView} />\n        )}\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["DocumentsCard","props","jsx","BaseBoundaries","DocumentsCardContent","employeeId","onEvent","useI18n","useTranslation","Components","useComponentContext","documentsList","useDocumentsList","forms","formsColumns","form","formsDataView","useDataView","componentEvents","EmptyData","BaseLayout","Loading","DataView"],"mappings":";;;;;;;;;;;;AAoCO,SAASA,EAAcC,GAA2B;AACvD,SACE,gBAAAC,EAACC,KAAe,eAAc,iCAC5B,4BAACC,GAAA,EAAsB,GAAGH,GAAO,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAqB,EAAE,YAAAC,GAAY,SAAAC,KAA+B;AACzE,EAAAC,EAAQ,+BAA+B;AACvC,QAAM,EAAE,EAAA,IAAMC,EAAe,+BAA+B,GACtDC,IAAaC,EAAA,GAEbC,IAAgBC,EAAiB,EAAE,YAAAP,GAAY,GAE/CQ,IAAQF,EAAc,YAAY,CAAA,IAAKA,EAAc,KAAK,OAE1DG,IAAe;AAAA,IACnB;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,eAAe;AAAA,MACxB,QAAQ,CAACC,MAAeA,EAAK,SAAS;AAAA,IAAA;AAAA,IAExC;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,cAAc;AAAA,MACvB,QAAQ,CAACA,MAAgBA,EAAK,OAAO,OAAOA,EAAK,IAAI,IAAI;AAAA,IAAA;AAAA,IAE3D;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,gBAAgB;AAAA,MACzB,QAAQ,CAACA,MAAgBA,EAAK,QAAQ,EAAE,cAAc,IAAI,EAAE,cAAc;AAAA,IAAA;AAAA,IAE5E;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,yBAAyB;AAAA,MAClC,QAAQ,CAACA,MACPA,EAAK,kBACH,gBAAAb,EAACO,EAAW,OAAX,EAAiB,QAAO,WAAW,YAAE,yBAAyB,GAAE,IAEjE,gBAAAP,EAACO,EAAW,OAAX,EAAiB,QAAO,WAAW,UAAA,EAAE,sBAAsB,EAAA,CAAE;AAAA,IAAA;AAAA,EAEpE,GAGIO,IAAgBC,EAAY;AAAA,IAChC,MAAMJ;AAAA,IACN,SAASC;AAAA,IACT,UAAU,CAACC,MACT,gBAAAb;AAAA,MAACO,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,UAAAH,EAAQY,EAAgB,mDAAmD;AAAA,YACzE,YAAAb;AAAA,YACA,QAAQU,EAAK;AAAA,UAAA,CACd;AAAA,QACH;AAAA,QAEC,YAAE,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAGhB,YAAY,MACV,gBAAAb,EAACiB,GAAA,EAAU,OAAO,EAAE,kBAAkB,GAAG,aAAa,EAAE,wBAAwB,EAAA,CAAG;AAAA,EAAA,CAEtF;AAED,2BACGC,GAAA,EAAW,OAAOT,EAAc,cAAc,QAC7C,UAAA,gBAAAT,EAACO,EAAW,KAAX,EAAe,aAAa,IAAO,0BAASA,EAAW,WAAX,EAAqB,OAAO,EAAE,OAAO,GAAG,GAClF,UAAAE,EAAc,YACb,gBAAAT,EAACmB,GAAA,EAAQ,IAET,gBAAAnB,EAACoB,GAAA,EAAS,OAAO,EAAE,WAAW,GAAG,aAAW,IAAE,GAAGN,EAAA,CAAe,GAEpE,GACF;AAEJ;"}
+{"version":3,"file":"DocumentsCard.js","sources":["../../../../../../src/components/Employee/Documents/management/DocumentsCard/DocumentsCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Form } from '@gusto/embedded-api/models/components/form'\nimport { useDocumentsList } from '../../shared/useDocumentsList'\nimport { DataView, useDataView, EmptyData, Loading } from '@/components/Common'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\n\n/**\n * Props for {@link DocumentsCard}.\n *\n * @public\n */\nexport interface DocumentsCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired when a row's View CTA is clicked. */\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Standalone \"Documents\" (forms) card. Owns its own data fetch via\n * {@link useDocumentsList} and renders the employee's forms in a table with a\n * per-row \"View\" action. Emits\n * `employee/management/documents/card/viewRequested` with\n * `{ employeeId, formId }` when a row's View CTA is clicked. The card is\n * read-only — viewing or signing a form happens in the screen the parent\n * routes to — and renders no alerts: alert rendering is the parent's\n * responsibility.\n *\n * @param props - See {@link DocumentsCardProps}.\n * @returns The documents card.\n * @public\n */\nexport function DocumentsCard(props: DocumentsCardProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.Documents\"\n      LoaderComponent={props.LoaderComponent}\n    >\n      <DocumentsCardContent {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction DocumentsCardContent({ employeeId, onEvent, LoaderComponent }: DocumentsCardProps) {\n  useI18n('Employee.Management.Documents')\n  const { t } = useTranslation('Employee.Management.Documents')\n  const Components = useComponentContext()\n\n  const documentsList = useDocumentsList({ employeeId })\n\n  const forms = documentsList.isLoading ? [] : documentsList.data.forms\n\n  const formsColumns = [\n    {\n      key: 'title',\n      title: t('columns.title'),\n      render: (form: Form) => form.title || '-',\n    },\n    {\n      key: 'year',\n      title: t('columns.year'),\n      render: (form: Form) => (form.year ? String(form.year) : '-'),\n    },\n    {\n      key: 'status',\n      title: t('columns.status'),\n      render: (form: Form) => (form.draft ? t('status.draft') : t('status.final')),\n    },\n    {\n      key: 'requiresSigning',\n      title: t('columns.requiresSigning'),\n      render: (form: Form) =>\n        form.requiresSigning ? (\n          <Components.Badge status=\"warning\">{t('signingStatus.notSigned')}</Components.Badge>\n        ) : (\n          <Components.Badge status=\"success\">{t('signingStatus.signed')}</Components.Badge>\n        ),\n    },\n  ]\n\n  const formsDataView = useDataView({\n    data: forms,\n    columns: formsColumns,\n    itemMenu: (form: Form) => (\n      <Components.Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DOCUMENTS_CARD_VIEW_REQUESTED, {\n            employeeId,\n            formId: form.uuid,\n          })\n        }}\n      >\n        {t('viewCta')}\n      </Components.Button>\n    ),\n    emptyState: () => (\n      <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n    ),\n  })\n\n  return (\n    <BaseLayout error={documentsList.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <Components.Box withPadding={false} header={<Components.BoxHeader title={t('title')} />}>\n        {documentsList.isLoading ? (\n          <Loading />\n        ) : (\n          <DataView label={t('listLabel')} isWithinBox {...formsDataView} />\n        )}\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["DocumentsCard","props","jsx","BaseBoundaries","DocumentsCardContent","employeeId","onEvent","LoaderComponent","useI18n","useTranslation","Components","useComponentContext","documentsList","useDocumentsList","forms","formsColumns","form","formsDataView","useDataView","componentEvents","EmptyData","BaseLayout","Loading","DataView"],"mappings":";;;;;;;;;;;AAuCO,SAASA,EAAcC,GAA2B;AACvD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,iBAAiBF,EAAM;AAAA,MAEvB,UAAA,gBAAAC,EAACE,GAAA,EAAsB,GAAGH,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGvC;AAEA,SAASG,EAAqB,EAAE,YAAAC,GAAY,SAAAC,GAAS,iBAAAC,KAAuC;AAC1F,EAAAC,EAAQ,+BAA+B;AACvC,QAAM,EAAE,EAAA,IAAMC,EAAe,+BAA+B,GACtDC,IAAaC,EAAA,GAEbC,IAAgBC,EAAiB,EAAE,YAAAR,GAAY,GAE/CS,IAAQF,EAAc,YAAY,CAAA,IAAKA,EAAc,KAAK,OAE1DG,IAAe;AAAA,IACnB;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,eAAe;AAAA,MACxB,QAAQ,CAACC,MAAeA,EAAK,SAAS;AAAA,IAAA;AAAA,IAExC;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,cAAc;AAAA,MACvB,QAAQ,CAACA,MAAgBA,EAAK,OAAO,OAAOA,EAAK,IAAI,IAAI;AAAA,IAAA;AAAA,IAE3D;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,gBAAgB;AAAA,MACzB,QAAQ,CAACA,MAAgBA,EAAK,QAAQ,EAAE,cAAc,IAAI,EAAE,cAAc;AAAA,IAAA;AAAA,IAE5E;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,yBAAyB;AAAA,MAClC,QAAQ,CAACA,MACPA,EAAK,kBACH,gBAAAd,EAACQ,EAAW,OAAX,EAAiB,QAAO,WAAW,YAAE,yBAAyB,GAAE,IAEjE,gBAAAR,EAACQ,EAAW,OAAX,EAAiB,QAAO,WAAW,UAAA,EAAE,sBAAsB,EAAA,CAAE;AAAA,IAAA;AAAA,EAEpE,GAGIO,IAAgBC,EAAY;AAAA,IAChC,MAAMJ;AAAA,IACN,SAASC;AAAA,IACT,UAAU,CAACC,MACT,gBAAAd;AAAA,MAACQ,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,UAAAJ,EAAQa,EAAgB,mDAAmD;AAAA,YACzE,YAAAd;AAAA,YACA,QAAQW,EAAK;AAAA,UAAA,CACd;AAAA,QACH;AAAA,QAEC,YAAE,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAGhB,YAAY,MACV,gBAAAd,EAACkB,GAAA,EAAU,OAAO,EAAE,kBAAkB,GAAG,aAAa,EAAE,wBAAwB,EAAA,CAAG;AAAA,EAAA,CAEtF;AAED,2BACGC,GAAA,EAAW,OAAOT,EAAc,cAAc,QAAQ,iBAAAL,GACrD,UAAA,gBAAAL,EAACQ,EAAW,KAAX,EAAe,aAAa,IAAO,QAAQ,gBAAAR,EAACQ,EAAW,WAAX,EAAqB,OAAO,EAAE,OAAO,GAAG,GAClF,UAAAE,EAAc,YACb,gBAAAV,EAACoB,GAAA,EAAQ,IAET,gBAAApB,EAACqB,GAAA,EAAS,OAAO,EAAE,WAAW,GAAG,aAAW,IAAE,GAAGN,EAAA,CAAe,GAEpE,GACF;AAEJ;"}

package/dist/components/Employee/Documents/management/DocumentsComponents.js

@@ -1,25 +1,33 @@
 import { jsx as t } from "react/jsx-runtime";
-import { DocumentManager as u } from "./DocumentManager.js";
-import { useFlow as n } from "../../../Flow/useFlow.js";
+import { DocumentManager as p } from "./DocumentManager.js";
+import { useFlow as m } from "../../../Flow/useFlow.js";
 import { ensureRequired as r } from "../../../../helpers/ensureRequired.js";
-import { DocumentsCard as p } from "./DocumentsCard/DocumentsCard.js";
-function l() {
-  const { employeeId: e, onEvent: o } = n();
-  return /* @__PURE__ */ t(p, { employeeId: r(e), onEvent: o });
-}
+import { DocumentsCard as d } from "./DocumentsCard/DocumentsCard.js";
 function s() {
-  const { employeeId: e, formId: o, onEvent: m } = n();
+  const { employeeId: o, onEvent: e, LoaderComponent: n } = m();
+  return /* @__PURE__ */ t(
+    d,
+    {
+      employeeId: r(o),
+      onEvent: e,
+      LoaderComponent: n
+    }
+  );
+}
+function C() {
+  const { employeeId: o, formId: e, onEvent: n, LoaderComponent: u } = m();
   return /* @__PURE__ */ t(
-    u,
+    p,
     {
-      employeeId: r(e),
-      formId: r(o),
-      onEvent: m
+      employeeId: r(o),
+      formId: r(e),
+      onEvent: n,
+      LoaderComponent: u
     }
   );
 }
 export {
-  s as DocumentManagerContextual,
-  l as DocumentsCardContextual
+  C as DocumentManagerContextual,
+  s as DocumentsCardContextual
 };
 //# sourceMappingURL=DocumentsComponents.js.map