@gusto/embedded-react-sdk 0.55.7 → 0.55.8

package/dist/components/Employee/EmployeeList/management/ManagementEmployeeList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ManagementEmployeeList.js","sources":["../../../../../src/components/Employee/EmployeeList/management/ManagementEmployeeList.tsx"],"sourcesContent":["import { useState, useMemo } from 'react'\nimport { useEmployeeList, type EmployeeType } from '../shared/useEmployeeList'\nimport { ManagementEmployeeListView } from './ManagementEmployeeListView'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * The tab currently selected on {@link ManagementEmployeeList | EmployeeList}.\n *\n * @public\n */\nexport type EmployeeTab = 'active' | 'onboarding' | 'dismissed'\n\n/**\n * Props for {@link ManagementEmployeeList}.\n *\n * @public\n */\nexport interface ManagementEmployeeListProps extends BaseComponentInterface<'Employee.ManagementEmployeeList'> {\n  /** The associated company identifier. */\n  companyId: string\n  /** Tab to render first: Active, Onboarding, or Dismissed. Defaults to `'active'`. */\n  initialTab?: EmployeeTab\n}\n\nconst mapTabToEmployeeType = (tab: EmployeeTab): EmployeeType => {\n  switch (tab) {\n    case 'active':\n      return 'active'\n    case 'onboarding':\n      return 'onboarding'\n    case 'dismissed':\n      return 'terminated'\n  }\n}\n\nfunction ManagementEmployeeListRoot({\n  companyId,\n  initialTab = 'active',\n  onEvent,\n  dictionary,\n  LoaderComponent,\n}: ManagementEmployeeListProps) {\n  useI18n('Employee.ManagementEmployeeList')\n  useComponentDictionary('Employee.ManagementEmployeeList', dictionary)\n\n  const [selectedTab, setSelectedTab] = useState<EmployeeTab>(initialTab)\n\n  const employeeType = useMemo(() => mapTabToEmployeeType(selectedTab), [selectedTab])\n\n  const employeeList = useEmployeeList({\n    companyId,\n    employeeType,\n  })\n\n  if (employeeList.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={employeeList.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  const handleEdit = (employeeId: string) => {\n    onEvent(componentEvents.EMPLOYEE_UPDATE, { employeeId })\n  }\n\n  const handleAddEmployee = () => {\n    onEvent(componentEvents.EMPLOYEE_CREATE)\n  }\n\n  const handleDismiss = (employeeId: string) => {\n    onEvent(componentEvents.EMPLOYEE_DISMISS, { employeeId })\n  }\n\n  const handleTabChange = (tab: EmployeeTab) => {\n    setSelectedTab(tab)\n  }\n\n  return (\n    <BaseLayout error={employeeList.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <ManagementEmployeeListView\n        selectedTab={selectedTab}\n        onTabChange={handleTabChange}\n        employees={employeeList.data.employees}\n        isFetching={employeeList.status.isFetching}\n        pagination={employeeList.pagination}\n        status={employeeList.status}\n        onEdit={handleEdit}\n        onDismiss={handleDismiss}\n        onDelete={async (employeeId: string) => {\n          await employeeList.actions.onDelete(employeeId)\n          onEvent(componentEvents.EMPLOYEE_DELETED, { employeeId })\n        }}\n        onAddEmployee={handleAddEmployee}\n      />\n    </BaseLayout>\n  )\n}\n\n/**\n * Renders a tabbed list of a company's employees split across Active, Onboarding, and Dismissed\n * tabs, with per-row actions tailored to each tab (edit, delete, dismiss). Dismissed rows have no\n * available actions, so no menu is rendered for them.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/create` | Fired when the user clicks \"Add employee\". | — |\n * | `employee/update` | Fired when the user selects \"Edit\" on a row. | `{ employeeId: string }` |\n * | `employee/dismiss` | Fired when the user selects \"Dismiss\" on a row in the Active tab. | `{ employeeId: string }` |\n * | `employee/deleted` | Fired after a row's delete action completes. | `{ employeeId: string }` |\n *\n * @public\n */\nexport function ManagementEmployeeList({\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: ManagementEmployeeListProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.ManagementEmployeeList\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <ManagementEmployeeListRoot LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["mapTabToEmployeeType","tab","ManagementEmployeeListRoot","companyId","initialTab","onEvent","dictionary","LoaderComponent","useI18n","useComponentDictionary","selectedTab","setSelectedTab","useState","employeeType","useMemo","employeeList","useEmployeeList","jsx","BaseLayout","handleEdit","employeeId","componentEvents","handleAddEmployee","handleDismiss","handleTabChange","ManagementEmployeeListView","ManagementEmployeeList","FallbackComponent","props","BaseBoundaries"],"mappings":";;;;;;;AA0BA,MAAMA,IAAuB,CAACC,MAAmC;AAC/D,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EAAA;AAEb;AAEA,SAASC,EAA2B;AAAA,EAClC,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AACF,GAAgC;AAC9B,EAAAC,EAAQ,iCAAiC,GACzCC,EAAuB,mCAAmCH,CAAU;AAEpE,QAAM,CAACI,GAAaC,CAAc,IAAIC,EAAsBR,CAAU,GAEhES,IAAeC,EAAQ,MAAMd,EAAqBU,CAAW,GAAG,CAACA,CAAW,CAAC,GAE7EK,IAAeC,EAAgB;AAAA,IACnC,WAAAb;AAAA,IACA,cAAAU;AAAA,EAAA,CACD;AAED,MAAIE,EAAa;AACf,WACE,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,OAAOH,EAAa,cAAc;AAAA,QAClC,iBAAAR;AAAA,MAAA;AAAA,IAAA;AAKN,QAAMY,IAAa,CAACC,MAAuB;AACzC,IAAAf,EAAQgB,EAAgB,iBAAiB,EAAE,YAAAD,EAAA,CAAY;AAAA,EACzD,GAEME,IAAoB,MAAM;AAC9B,IAAAjB,EAAQgB,EAAgB,eAAe;AAAA,EACzC,GAEME,IAAgB,CAACH,MAAuB;AAC5C,IAAAf,EAAQgB,EAAgB,kBAAkB,EAAE,YAAAD,EAAA,CAAY;AAAA,EAC1D,GAEMI,IAAkB,CAACvB,MAAqB;AAC5C,IAAAU,EAAeV,CAAG;AAAA,EACpB;AAEA,2BACGiB,GAAA,EAAW,OAAOH,EAAa,cAAc,QAAQ,iBAAAR,GACpD,UAAA,gBAAAU;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,aAAAf;AAAA,MACA,aAAac;AAAA,MACb,WAAWT,EAAa,KAAK;AAAA,MAC7B,YAAYA,EAAa,OAAO;AAAA,MAChC,YAAYA,EAAa;AAAA,MACzB,QAAQA,EAAa;AAAA,MACrB,QAAQI;AAAA,MACR,WAAWI;AAAA,MACX,UAAU,OAAOH,MAAuB;AACtC,cAAML,EAAa,QAAQ,SAASK,CAAU,GAC9Cf,EAAQgB,EAAgB,kBAAkB,EAAE,YAAAD,EAAA,CAAY;AAAA,MAC1D;AAAA,MACA,eAAeE;AAAA,IAAA;AAAA,EAAA,GAEnB;AAEJ;AAiBO,SAASI,EAAuB;AAAA,EACrC,mBAAAC;AAAA,EACA,iBAAApB;AAAA,EACA,GAAGqB;AACL,GAAgC;AAC9B,SACE,gBAAAX;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAF;AAAA,MACA,iBAAApB;AAAA,MAEA,UAAA,gBAAAU,EAACf,GAAA,EAA2B,iBAAAK,GAAmC,GAAGqB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAG/E;"}
+{"version":3,"file":"ManagementEmployeeList.js","sources":["../../../../../src/components/Employee/EmployeeList/management/ManagementEmployeeList.tsx"],"sourcesContent":["import { useState, useMemo } from 'react'\nimport { useEmployeeList, type EmployeeType } from '../shared/useEmployeeList'\nimport { ManagementEmployeeListView } from './ManagementEmployeeListView'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * The tab currently selected on {@link ManagementEmployeeList | EmployeeList}.\n *\n * @public\n */\nexport type EmployeeTab = 'active' | 'onboarding' | 'dismissed'\n\n/**\n * Props for {@link ManagementEmployeeList}.\n *\n * @public\n */\nexport interface ManagementEmployeeListProps extends BaseComponentInterface<'Employee.ManagementEmployeeList'> {\n  /** The associated company identifier. */\n  companyId: string\n  /** Tab to render first: Active, Onboarding, or Dismissed. Defaults to `'active'`. */\n  initialTab?: EmployeeTab\n}\n\nconst mapTabToEmployeeType = (tab: EmployeeTab): EmployeeType => {\n  switch (tab) {\n    case 'active':\n      return 'active'\n    case 'onboarding':\n      return 'onboarding'\n    case 'dismissed':\n      return 'terminated'\n  }\n}\n\nfunction ManagementEmployeeListRoot({\n  companyId,\n  initialTab = 'active',\n  onEvent,\n  dictionary,\n  LoaderComponent,\n  className,\n}: ManagementEmployeeListProps) {\n  useI18n('Employee.ManagementEmployeeList')\n  useComponentDictionary('Employee.ManagementEmployeeList', dictionary)\n\n  const [selectedTab, setSelectedTab] = useState<EmployeeTab>(initialTab)\n\n  const employeeType = useMemo(() => mapTabToEmployeeType(selectedTab), [selectedTab])\n\n  const employeeList = useEmployeeList({\n    companyId,\n    employeeType,\n  })\n\n  if (employeeList.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={employeeList.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  const handleEdit = (employeeId: string) => {\n    onEvent(componentEvents.EMPLOYEE_UPDATE, { employeeId })\n  }\n\n  const handleAddEmployee = () => {\n    onEvent(componentEvents.EMPLOYEE_CREATE)\n  }\n\n  const handleDismiss = (employeeId: string) => {\n    onEvent(componentEvents.EMPLOYEE_DISMISS, { employeeId })\n  }\n\n  const handleTabChange = (tab: EmployeeTab) => {\n    setSelectedTab(tab)\n  }\n\n  return (\n    <BaseLayout error={employeeList.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <ManagementEmployeeListView\n        selectedTab={selectedTab}\n        onTabChange={handleTabChange}\n        employees={employeeList.data.employees}\n        isFetching={employeeList.status.isFetching}\n        pagination={employeeList.pagination}\n        status={employeeList.status}\n        onEdit={handleEdit}\n        onDismiss={handleDismiss}\n        onDelete={async (employeeId: string) => {\n          await employeeList.actions.onDelete(employeeId)\n          onEvent(componentEvents.EMPLOYEE_DELETED, { employeeId })\n        }}\n        onAddEmployee={handleAddEmployee}\n        className={className}\n      />\n    </BaseLayout>\n  )\n}\n\n/**\n * Renders a tabbed list of a company's employees split across Active, Onboarding, and Dismissed\n * tabs, with per-row actions tailored to each tab (edit, delete, dismiss). Dismissed rows have no\n * available actions, so no menu is rendered for them.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/create` | Fired when the user clicks \"Add employee\". | — |\n * | `employee/update` | Fired when the user selects \"Edit\" on a row. | `{ employeeId: string }` |\n * | `employee/dismiss` | Fired when the user selects \"Dismiss\" on a row in the Active tab. | `{ employeeId: string }` |\n * | `employee/deleted` | Fired after a row's delete action completes. | `{ employeeId: string }` |\n *\n * @public\n */\nexport function ManagementEmployeeList({\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: ManagementEmployeeListProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.ManagementEmployeeList\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <ManagementEmployeeListRoot LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["mapTabToEmployeeType","tab","ManagementEmployeeListRoot","companyId","initialTab","onEvent","dictionary","LoaderComponent","className","useI18n","useComponentDictionary","selectedTab","setSelectedTab","useState","employeeType","useMemo","employeeList","useEmployeeList","jsx","BaseLayout","handleEdit","employeeId","componentEvents","handleAddEmployee","handleDismiss","handleTabChange","ManagementEmployeeListView","ManagementEmployeeList","FallbackComponent","props","BaseBoundaries"],"mappings":";;;;;;;AA0BA,MAAMA,IAAuB,CAACC,MAAmC;AAC/D,UAAQA,GAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EAAA;AAEb;AAEA,SAASC,EAA2B;AAAA,EAClC,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACF,GAAgC;AAC9B,EAAAC,EAAQ,iCAAiC,GACzCC,EAAuB,mCAAmCJ,CAAU;AAEpE,QAAM,CAACK,GAAaC,CAAc,IAAIC,EAAsBT,CAAU,GAEhEU,IAAeC,EAAQ,MAAMf,EAAqBW,CAAW,GAAG,CAACA,CAAW,CAAC,GAE7EK,IAAeC,EAAgB;AAAA,IACnC,WAAAd;AAAA,IACA,cAAAW;AAAA,EAAA,CACD;AAED,MAAIE,EAAa;AACf,WACE,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,OAAOH,EAAa,cAAc;AAAA,QAClC,iBAAAT;AAAA,MAAA;AAAA,IAAA;AAKN,QAAMa,IAAa,CAACC,MAAuB;AACzC,IAAAhB,EAAQiB,EAAgB,iBAAiB,EAAE,YAAAD,EAAA,CAAY;AAAA,EACzD,GAEME,IAAoB,MAAM;AAC9B,IAAAlB,EAAQiB,EAAgB,eAAe;AAAA,EACzC,GAEME,IAAgB,CAACH,MAAuB;AAC5C,IAAAhB,EAAQiB,EAAgB,kBAAkB,EAAE,YAAAD,EAAA,CAAY;AAAA,EAC1D,GAEMI,IAAkB,CAACxB,MAAqB;AAC5C,IAAAW,EAAeX,CAAG;AAAA,EACpB;AAEA,2BACGkB,GAAA,EAAW,OAAOH,EAAa,cAAc,QAAQ,iBAAAT,GACpD,UAAA,gBAAAW;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,aAAAf;AAAA,MACA,aAAac;AAAA,MACb,WAAWT,EAAa,KAAK;AAAA,MAC7B,YAAYA,EAAa,OAAO;AAAA,MAChC,YAAYA,EAAa;AAAA,MACzB,QAAQA,EAAa;AAAA,MACrB,QAAQI;AAAA,MACR,WAAWI;AAAA,MACX,UAAU,OAAOH,MAAuB;AACtC,cAAML,EAAa,QAAQ,SAASK,CAAU,GAC9ChB,EAAQiB,EAAgB,kBAAkB,EAAE,YAAAD,EAAA,CAAY;AAAA,MAC1D;AAAA,MACA,eAAeE;AAAA,MACf,WAAAf;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAiBO,SAASmB,EAAuB;AAAA,EACrC,mBAAAC;AAAA,EACA,iBAAArB;AAAA,EACA,GAAGsB;AACL,GAAgC;AAC9B,SACE,gBAAAX;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAF;AAAA,MACA,iBAAArB;AAAA,MAEA,UAAA,gBAAAW,EAAChB,GAAA,EAA2B,iBAAAK,GAAmC,GAAGsB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAG/E;"}

package/dist/components/Employee/EmployeeList/management/ManagementEmployeeListView.js

@@ -1,19 +1,19 @@
-import { jsx as a, jsxs as l, Fragment as V } from "react/jsx-runtime";
-import { useState as F } from "react";
-import { useTranslation as B } from "react-i18next";
+import { jsx as a, jsxs as l, Fragment as F } from "react/jsx-runtime";
+import { useState as B } from "react";
+import { useTranslation as H } from "react-i18next";
 import { Flex as d } from "../../../Common/Flex/Flex.js";
-import { EmptyData as H } from "../../../Common/EmptyData/EmptyData.js";
-import { HamburgerMenu as J } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useComponentContext as O } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { EmployeeOnboardingStatusBadge as _ } from "../../../Common/OnboardingStatusBadge/index.js";
+import { EmptyData as J } from "../../../Common/EmptyData/EmptyData.js";
+import { HamburgerMenu as O } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as _ } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { EmployeeOnboardingStatusBadge as W } from "../../../Common/OnboardingStatusBadge/index.js";
 import u from "../../../../assets/icons/pencil.svg.js";
-import W from "../../../../assets/icons/trashcan.svg.js";
-import { firstLastName as Y } from "../../../../helpers/formattedStrings.js";
+import Y from "../../../../assets/icons/trashcan.svg.js";
+import { firstLastName as q } from "../../../../helpers/formattedStrings.js";
 import { formatDateLongWithYear as g } from "../../../../helpers/dateFormatting.js";
-import q from "../../../../assets/icons/plus-circle.svg.js";
-import { useDataView as z } from "../../../Common/DataView/useDataView.js";
-import { DataView as G } from "../../../Common/DataView/DataView.js";
-function mt({
+import z from "../../../../assets/icons/plus-circle.svg.js";
+import { useDataView as G } from "../../../Common/DataView/useDataView.js";
+import { DataView as K } from "../../../Common/DataView/DataView.js";
+function de({
   selectedTab: o,
   onTabChange: p,
   employees: b,
@@ -23,60 +23,61 @@ function mt({
   onDismiss: D,
   onDelete: C,
   onAddEmployee: L,
-  pagination: P
+  pagination: P,
+  className: S
 }) {
-  const { t } = B("Employee.ManagementEmployeeList"), r = O(), [s, m] = F(null), {
-    handleNextPage: S,
-    handleFirstPage: v,
-    handleLastPage: k,
-    handlePreviousPage: w,
-    handleItemsPerPageChange: x,
-    currentPage: A,
-    totalPages: E,
-    totalCount: j,
-    itemsPerPage: T
-  } = P, I = [
+  const { t: e } = H("Employee.ManagementEmployeeList"), r = _(), [s, m] = B(null), {
+    handleNextPage: v,
+    handleFirstPage: k,
+    handleLastPage: w,
+    handlePreviousPage: x,
+    handleItemsPerPageChange: A,
+    currentPage: E,
+    totalPages: j,
+    totalCount: T,
+    itemsPerPage: I
+  } = P, M = [
     {
       id: "active",
-      label: t("tabs.active"),
+      label: e("tabs.active"),
       content: null
     },
     {
       id: "onboarding",
-      label: t("tabs.onboarding"),
+      label: e("tabs.onboarding"),
       content: null
     },
     {
       id: "dismissed",
-      label: t("tabs.dismissed"),
+      label: e("tabs.dismissed"),
       content: null
     }
-  ], M = () => {
-    const e = {
+  ], N = () => {
+    const t = {
       key: "name",
-      title: t("nameLabel"),
-      render: (n) => Y({
+      title: e("nameLabel"),
+      render: (n) => q({
         first_name: n.firstName,
         last_name: n.lastName
       })
     }, i = {
       key: "jobTitle",
-      title: t("jobTitleLabel"),
+      title: e("jobTitleLabel"),
       render: (n) => n.primaryJob?.title ?? "-"
     };
-    return o === "active" ? [e, i] : o === "onboarding" ? [
-      e,
+    return o === "active" ? [t, i] : o === "onboarding" ? [
+      t,
       {
         key: "startDate",
-        title: t("startDateLabel"),
+        title: e("startDateLabel"),
         render: (n) => g(n.primaryJob?.hireDate) || "-"
       },
       i,
       {
         key: "status",
-        title: t("statusLabel"),
+        title: e("statusLabel"),
         render: (n) => /* @__PURE__ */ a(
-          _,
+          W,
           {
             onboarded: n.onboarded,
             onboardingStatus: n.onboardingStatus
@@ -84,80 +85,88 @@ function mt({
         )
       }
     ] : [
-      e,
+      t,
       i,
       {
         key: "lastDay",
-        title: t("lastDayLabel"),
+        title: e("lastDayLabel"),
         render: (n) => {
           const c = n.terminations?.[0];
           return g(c?.effectiveDate) || "-";
         }
       }
     ];
-  }, { ...N } = z({
+  }, { ...V } = G({
     data: b,
-    columns: M(),
-    itemMenu: (e) => {
+    columns: N(),
+    itemMenu: (t) => {
       const i = [];
-      return e.allowedActions.includes("edit") && i.push({
-        label: t("editCta"),
+      return t.allowedActions.includes("edit") && i.push({
+        label: e("editCta"),
         onClick: () => {
-          y(e.uuid);
+          y(t.uuid);
         },
         icon: /* @__PURE__ */ a(u, { "aria-hidden": !0 })
-      }), e.allowedActions.includes("dismiss") && i.push({
-        label: t("dismissCta"),
+      }), t.allowedActions.includes("dismiss") && i.push({
+        label: e("dismissCta"),
         onClick: () => {
-          D(e.uuid);
+          D(t.uuid);
         },
-        icon: /* @__PURE__ */ a(W, { "aria-hidden": !0 })
-      }), e.allowedActions.includes("delete") && i.push({
-        label: t("cancelCta"),
+        icon: /* @__PURE__ */ a(Y, { "aria-hidden": !0 })
+      }), t.allowedActions.includes("delete") && i.push({
+        label: e("cancelCta"),
         onClick: () => {
-          m(e.uuid);
+          m(t.uuid);
         },
         icon: /* @__PURE__ */ a(u, { "aria-hidden": !0 })
-      }), i.length === 0 ? null : /* @__PURE__ */ a(J, { items: i, triggerLabel: t("hamburgerTitle") });
+      }), i.length === 0 ? null : /* @__PURE__ */ a(O, { items: i, triggerLabel: e("hamburgerTitle") });
     },
     isFetching: f,
     pagination: {
-      handleNextPage: S,
-      handleFirstPage: v,
-      handleLastPage: k,
-      handlePreviousPage: w,
-      handleItemsPerPageChange: x,
-      currentPage: A,
-      totalPages: E,
-      totalCount: j,
-      itemsPerPage: T
+      handleNextPage: v,
+      handleFirstPage: k,
+      handleLastPage: w,
+      handlePreviousPage: x,
+      handleItemsPerPageChange: A,
+      currentPage: E,
+      totalPages: j,
+      totalCount: T,
+      itemsPerPage: I
     },
     emptyState: () => {
-      let e = "", i = "";
-      return o === "active" ? (e = t("emptyState.active.title"), i = t("emptyState.active.description")) : o === "onboarding" ? (e = t("emptyState.onboarding.title"), i = t("emptyState.onboarding.description")) : (e = t("emptyState.dismissed.title"), i = t("emptyState.dismissed.description")), /* @__PURE__ */ a(H, { title: e, description: i });
+      let t = "", i = "";
+      return o === "active" ? (t = e("emptyState.active.title"), i = e("emptyState.active.description")) : o === "onboarding" ? (t = e("emptyState.onboarding.title"), i = e("emptyState.onboarding.description")) : (t = e("emptyState.dismissed.title"), i = e("emptyState.dismissed.description")), /* @__PURE__ */ a(J, { title: t, description: i });
     }
   });
-  return /* @__PURE__ */ l(V, { children: [
-    /* @__PURE__ */ l(d, { flexDirection: "column", gap: 32, children: [
+  return /* @__PURE__ */ l(F, { children: [
+    /* @__PURE__ */ a("section", { className: S, children: /* @__PURE__ */ l(d, { flexDirection: "column", gap: 32, children: [
       /* @__PURE__ */ l(d, { justifyContent: "space-between", alignItems: "center", children: [
-        /* @__PURE__ */ a(r.Heading, { as: "h2", children: t("title") }),
-        /* @__PURE__ */ a(r.Button, { variant: "secondary", onClick: L, icon: /* @__PURE__ */ a(q, {}), children: t("addEmployeeCta") })
+        /* @__PURE__ */ a(r.Heading, { as: "h2", children: e("title") }),
+        /* @__PURE__ */ a(
+          r.Button,
+          {
+            variant: "secondary",
+            onClick: L,
+            icon: /* @__PURE__ */ a(z, {}),
+            children: e("addEmployeeCta")
+          }
+        )
       ] }),
       /* @__PURE__ */ l(d, { flexDirection: "column", gap: 0, children: [
         /* @__PURE__ */ a(
           r.Tabs,
           {
-            tabs: I,
+            tabs: M,
             selectedId: o,
-            onSelectionChange: (e) => {
-              p(e);
+            onSelectionChange: (t) => {
+              p(t);
             },
-            "aria-label": t("tabsLabel")
+            "aria-label": e("tabsLabel")
           }
         ),
-        /* @__PURE__ */ a(G, { label: t("employeeListLabel"), ...N })
+        /* @__PURE__ */ a(K, { label: e("employeeListLabel"), ...V })
       ] })
-    ] }),
+    ] }) }),
     /* @__PURE__ */ a(
       r.Dialog,
       {
@@ -174,15 +183,15 @@ function mt({
         },
         isPrimaryActionLoading: h.isPending,
         isDestructive: !0,
-        title: t("deleteDialog.title"),
-        primaryActionLabel: t("deleteDialog.confirmCta"),
-        closeActionLabel: t("deleteDialog.cancelCta"),
-        children: t("deleteDialog.description")
+        title: e("deleteDialog.title"),
+        primaryActionLabel: e("deleteDialog.confirmCta"),
+        closeActionLabel: e("deleteDialog.cancelCta"),
+        children: e("deleteDialog.description")
       }
     )
   ] });
 }
 export {
-  mt as ManagementEmployeeListView
+  de as ManagementEmployeeListView
 };
 //# sourceMappingURL=ManagementEmployeeListView.js.map

package/dist/components/Employee/EmployeeList/management/ManagementEmployeeListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ManagementEmployeeListView.js","sources":["../../../../../src/components/Employee/EmployeeList/management/ManagementEmployeeListView.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { UseEmployeeListResult, EmployeeWithActions } from '../shared/useEmployeeList'\nimport { DataView, EmptyData, useDataView } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { EmployeeOnboardingStatusBadge } from '@/components/Common/OnboardingStatusBadge'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\ntype EmployeeTab = 'active' | 'onboarding' | 'dismissed'\n\n/** @internal */\nexport interface ManagementEmployeeListViewProps extends Pick<\n  Extract<UseEmployeeListResult, { isLoading: false }>,\n  'pagination' | 'status'\n> {\n  employees: EmployeeWithActions[]\n  isFetching: boolean\n  selectedTab: EmployeeTab\n  onTabChange: (tab: EmployeeTab) => void\n  onEdit: (employeeId: string) => void\n  onDismiss: (employeeId: string) => void\n  onDelete: (employeeId: string) => Promise<void>\n  onAddEmployee: () => void\n}\n\n/** @internal */\nexport function ManagementEmployeeListView({\n  selectedTab,\n  onTabChange,\n  employees,\n  isFetching,\n  status,\n  onEdit,\n  onDismiss,\n  onDelete,\n  onAddEmployee,\n  pagination,\n}: ManagementEmployeeListViewProps) {\n  const { t } = useTranslation('Employee.ManagementEmployeeList')\n  const Components = useComponentContext()\n  const [employeeToDelete, setEmployeeToDelete] = useState<string | null>(null)\n\n  const {\n    handleNextPage,\n    handleFirstPage,\n    handleLastPage,\n    handlePreviousPage,\n    handleItemsPerPageChange,\n    currentPage,\n    totalPages,\n    totalCount,\n    itemsPerPage,\n  } = pagination\n\n  const tabs = [\n    {\n      id: 'active',\n      label: t('tabs.active'),\n      content: null,\n    },\n    {\n      id: 'onboarding',\n      label: t('tabs.onboarding'),\n      content: null,\n    },\n    {\n      id: 'dismissed',\n      label: t('tabs.dismissed'),\n      content: null,\n    },\n  ]\n\n  const getColumns = () => {\n    const nameColumn = {\n      key: 'name',\n      title: t('nameLabel'),\n      render: (employee: EmployeeWithActions) => {\n        return firstLastName({\n          first_name: employee.firstName,\n          last_name: employee.lastName,\n        })\n      },\n    }\n\n    const jobTitleColumn = {\n      key: 'jobTitle',\n      title: t('jobTitleLabel'),\n      render: (employee: EmployeeWithActions) => {\n        return employee.primaryJob?.title ?? '-'\n      },\n    }\n\n    if (selectedTab === 'active') {\n      return [nameColumn, jobTitleColumn]\n    }\n\n    if (selectedTab === 'onboarding') {\n      return [\n        nameColumn,\n        {\n          key: 'startDate',\n          title: t('startDateLabel'),\n          render: (employee: EmployeeWithActions) => {\n            const formattedDate = formatDateLongWithYear(employee.primaryJob?.hireDate)\n            return formattedDate || '-'\n          },\n        },\n        jobTitleColumn,\n        {\n          key: 'status',\n          title: t('statusLabel'),\n          render: (employee: EmployeeWithActions) => (\n            <EmployeeOnboardingStatusBadge\n              onboarded={employee.onboarded}\n              onboardingStatus={employee.onboardingStatus}\n            />\n          ),\n        },\n      ]\n    }\n\n    return [\n      nameColumn,\n      jobTitleColumn,\n      {\n        key: 'lastDay',\n        title: t('lastDayLabel'),\n        render: (employee: EmployeeWithActions) => {\n          const termination = employee.terminations?.[0]\n          const formattedDate = formatDateLongWithYear(termination?.effectiveDate)\n          return formattedDate || '-'\n        },\n      },\n    ]\n  }\n\n  const { ...dataViewProps } = useDataView({\n    data: employees,\n    columns: getColumns(),\n    itemMenu: employee => {\n      const menuItems = []\n\n      if (employee.allowedActions.includes('edit')) {\n        menuItems.push({\n          label: t('editCta'),\n          onClick: () => {\n            onEdit(employee.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      if (employee.allowedActions.includes('dismiss')) {\n        menuItems.push({\n          label: t('dismissCta'),\n          onClick: () => {\n            onDismiss(employee.uuid)\n          },\n          icon: <TrashCanSvg aria-hidden />,\n        })\n      }\n\n      if (employee.allowedActions.includes('delete')) {\n        menuItems.push({\n          label: t('cancelCta'),\n          onClick: () => {\n            setEmployeeToDelete(employee.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      if (menuItems.length === 0) {\n        return null\n      }\n\n      return <HamburgerMenu items={menuItems} triggerLabel={t('hamburgerTitle')} />\n    },\n    isFetching,\n    pagination: {\n      handleNextPage,\n      handleFirstPage,\n      handleLastPage,\n      handlePreviousPage,\n      handleItemsPerPageChange,\n      currentPage,\n      totalPages,\n      totalCount,\n      itemsPerPage,\n    },\n    emptyState: () => {\n      let title = ''\n      let description = ''\n\n      if (selectedTab === 'active') {\n        title = t('emptyState.active.title')\n        description = t('emptyState.active.description')\n      } else if (selectedTab === 'onboarding') {\n        title = t('emptyState.onboarding.title')\n        description = t('emptyState.onboarding.description')\n      } else {\n        title = t('emptyState.dismissed.title')\n        description = t('emptyState.dismissed.description')\n      }\n\n      return <EmptyData title={title} description={description} />\n    },\n  })\n\n  return (\n    <>\n      <Flex flexDirection=\"column\" gap={32}>\n        <Flex justifyContent=\"space-between\" alignItems=\"center\">\n          <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n          <Components.Button variant=\"secondary\" onClick={onAddEmployee} icon={<PlusCircleIcon />}>\n            {t('addEmployeeCta')}\n          </Components.Button>\n        </Flex>\n\n        <Flex flexDirection=\"column\" gap={0}>\n          <Components.Tabs\n            tabs={tabs}\n            selectedId={selectedTab}\n            onSelectionChange={id => {\n              onTabChange(id as EmployeeTab)\n            }}\n            aria-label={t('tabsLabel')}\n          />\n\n          <DataView label={t('employeeListLabel')} {...dataViewProps} />\n        </Flex>\n      </Flex>\n\n      <Components.Dialog\n        isOpen={!!employeeToDelete}\n        onClose={() => {\n          setEmployeeToDelete(null)\n        }}\n        onPrimaryActionClick={async () => {\n          if (employeeToDelete) {\n            try {\n              await onDelete(employeeToDelete)\n              setEmployeeToDelete(null)\n            } catch {\n              // Keep dialog open on error\n            }\n          }\n        }}\n        isPrimaryActionLoading={status.isPending}\n        isDestructive\n        title={t('deleteDialog.title')}\n        primaryActionLabel={t('deleteDialog.confirmCta')}\n        closeActionLabel={t('deleteDialog.cancelCta')}\n      >\n        {t('deleteDialog.description')}\n      </Components.Dialog>\n    </>\n  )\n}\n"],"names":["ManagementEmployeeListView","selectedTab","onTabChange","employees","isFetching","status","onEdit","onDismiss","onDelete","onAddEmployee","pagination","useTranslation","Components","useComponentContext","employeeToDelete","setEmployeeToDelete","useState","handleNextPage","handleFirstPage","handleLastPage","handlePreviousPage","handleItemsPerPageChange","currentPage","totalPages","totalCount","itemsPerPage","tabs","getColumns","nameColumn","employee","firstLastName","jobTitleColumn","formatDateLongWithYear","jsx","EmployeeOnboardingStatusBadge","termination","dataViewProps","useDataView","menuItems","PencilSvg","TrashCanSvg","HamburgerMenu","title","description","EmptyData","jsxs","Fragment","Flex","PlusCircleIcon","id","DataView"],"mappings":"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"}
+{"version":3,"file":"ManagementEmployeeListView.js","sources":["../../../../../src/components/Employee/EmployeeList/management/ManagementEmployeeListView.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { UseEmployeeListResult, EmployeeWithActions } from '../shared/useEmployeeList'\nimport { DataView, EmptyData, useDataView } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { EmployeeOnboardingStatusBadge } from '@/components/Common/OnboardingStatusBadge'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\ntype EmployeeTab = 'active' | 'onboarding' | 'dismissed'\n\n/** @internal */\nexport interface ManagementEmployeeListViewProps extends Pick<\n  Extract<UseEmployeeListResult, { isLoading: false }>,\n  'pagination' | 'status'\n> {\n  employees: EmployeeWithActions[]\n  isFetching: boolean\n  selectedTab: EmployeeTab\n  onTabChange: (tab: EmployeeTab) => void\n  onEdit: (employeeId: string) => void\n  onDismiss: (employeeId: string) => void\n  onDelete: (employeeId: string) => Promise<void>\n  onAddEmployee: () => void\n  /** CSS class name applied to the root element. */\n  className?: string\n}\n\n/** @internal */\nexport function ManagementEmployeeListView({\n  selectedTab,\n  onTabChange,\n  employees,\n  isFetching,\n  status,\n  onEdit,\n  onDismiss,\n  onDelete,\n  onAddEmployee,\n  pagination,\n  className,\n}: ManagementEmployeeListViewProps) {\n  const { t } = useTranslation('Employee.ManagementEmployeeList')\n  const Components = useComponentContext()\n  const [employeeToDelete, setEmployeeToDelete] = useState<string | null>(null)\n\n  const {\n    handleNextPage,\n    handleFirstPage,\n    handleLastPage,\n    handlePreviousPage,\n    handleItemsPerPageChange,\n    currentPage,\n    totalPages,\n    totalCount,\n    itemsPerPage,\n  } = pagination\n\n  const tabs = [\n    {\n      id: 'active',\n      label: t('tabs.active'),\n      content: null,\n    },\n    {\n      id: 'onboarding',\n      label: t('tabs.onboarding'),\n      content: null,\n    },\n    {\n      id: 'dismissed',\n      label: t('tabs.dismissed'),\n      content: null,\n    },\n  ]\n\n  const getColumns = () => {\n    const nameColumn = {\n      key: 'name',\n      title: t('nameLabel'),\n      render: (employee: EmployeeWithActions) => {\n        return firstLastName({\n          first_name: employee.firstName,\n          last_name: employee.lastName,\n        })\n      },\n    }\n\n    const jobTitleColumn = {\n      key: 'jobTitle',\n      title: t('jobTitleLabel'),\n      render: (employee: EmployeeWithActions) => {\n        return employee.primaryJob?.title ?? '-'\n      },\n    }\n\n    if (selectedTab === 'active') {\n      return [nameColumn, jobTitleColumn]\n    }\n\n    if (selectedTab === 'onboarding') {\n      return [\n        nameColumn,\n        {\n          key: 'startDate',\n          title: t('startDateLabel'),\n          render: (employee: EmployeeWithActions) => {\n            const formattedDate = formatDateLongWithYear(employee.primaryJob?.hireDate)\n            return formattedDate || '-'\n          },\n        },\n        jobTitleColumn,\n        {\n          key: 'status',\n          title: t('statusLabel'),\n          render: (employee: EmployeeWithActions) => (\n            <EmployeeOnboardingStatusBadge\n              onboarded={employee.onboarded}\n              onboardingStatus={employee.onboardingStatus}\n            />\n          ),\n        },\n      ]\n    }\n\n    return [\n      nameColumn,\n      jobTitleColumn,\n      {\n        key: 'lastDay',\n        title: t('lastDayLabel'),\n        render: (employee: EmployeeWithActions) => {\n          const termination = employee.terminations?.[0]\n          const formattedDate = formatDateLongWithYear(termination?.effectiveDate)\n          return formattedDate || '-'\n        },\n      },\n    ]\n  }\n\n  const { ...dataViewProps } = useDataView({\n    data: employees,\n    columns: getColumns(),\n    itemMenu: employee => {\n      const menuItems = []\n\n      if (employee.allowedActions.includes('edit')) {\n        menuItems.push({\n          label: t('editCta'),\n          onClick: () => {\n            onEdit(employee.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      if (employee.allowedActions.includes('dismiss')) {\n        menuItems.push({\n          label: t('dismissCta'),\n          onClick: () => {\n            onDismiss(employee.uuid)\n          },\n          icon: <TrashCanSvg aria-hidden />,\n        })\n      }\n\n      if (employee.allowedActions.includes('delete')) {\n        menuItems.push({\n          label: t('cancelCta'),\n          onClick: () => {\n            setEmployeeToDelete(employee.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      if (menuItems.length === 0) {\n        return null\n      }\n\n      return <HamburgerMenu items={menuItems} triggerLabel={t('hamburgerTitle')} />\n    },\n    isFetching,\n    pagination: {\n      handleNextPage,\n      handleFirstPage,\n      handleLastPage,\n      handlePreviousPage,\n      handleItemsPerPageChange,\n      currentPage,\n      totalPages,\n      totalCount,\n      itemsPerPage,\n    },\n    emptyState: () => {\n      let title = ''\n      let description = ''\n\n      if (selectedTab === 'active') {\n        title = t('emptyState.active.title')\n        description = t('emptyState.active.description')\n      } else if (selectedTab === 'onboarding') {\n        title = t('emptyState.onboarding.title')\n        description = t('emptyState.onboarding.description')\n      } else {\n        title = t('emptyState.dismissed.title')\n        description = t('emptyState.dismissed.description')\n      }\n\n      return <EmptyData title={title} description={description} />\n    },\n  })\n\n  return (\n    <>\n      <section className={className}>\n        <Flex flexDirection=\"column\" gap={32}>\n          <Flex justifyContent=\"space-between\" alignItems=\"center\">\n            <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n            <Components.Button\n              variant=\"secondary\"\n              onClick={onAddEmployee}\n              icon={<PlusCircleIcon />}\n            >\n              {t('addEmployeeCta')}\n            </Components.Button>\n          </Flex>\n\n          <Flex flexDirection=\"column\" gap={0}>\n            <Components.Tabs\n              tabs={tabs}\n              selectedId={selectedTab}\n              onSelectionChange={id => {\n                onTabChange(id as EmployeeTab)\n              }}\n              aria-label={t('tabsLabel')}\n            />\n\n            <DataView label={t('employeeListLabel')} {...dataViewProps} />\n          </Flex>\n        </Flex>\n      </section>\n\n      <Components.Dialog\n        isOpen={!!employeeToDelete}\n        onClose={() => {\n          setEmployeeToDelete(null)\n        }}\n        onPrimaryActionClick={async () => {\n          if (employeeToDelete) {\n            try {\n              await onDelete(employeeToDelete)\n              setEmployeeToDelete(null)\n            } catch {\n              // Keep dialog open on error\n            }\n          }\n        }}\n        isPrimaryActionLoading={status.isPending}\n        isDestructive\n        title={t('deleteDialog.title')}\n        primaryActionLabel={t('deleteDialog.confirmCta')}\n        closeActionLabel={t('deleteDialog.cancelCta')}\n      >\n        {t('deleteDialog.description')}\n      </Components.Dialog>\n    </>\n  )\n}\n"],"names":["ManagementEmployeeListView","selectedTab","onTabChange","employees","isFetching","status","onEdit","onDismiss","onDelete","onAddEmployee","pagination","className","t","useTranslation","Components","useComponentContext","employeeToDelete","setEmployeeToDelete","useState","handleNextPage","handleFirstPage","handleLastPage","handlePreviousPage","handleItemsPerPageChange","currentPage","totalPages","totalCount","itemsPerPage","tabs","getColumns","nameColumn","employee","firstLastName","jobTitleColumn","formatDateLongWithYear","jsx","EmployeeOnboardingStatusBadge","termination","dataViewProps","useDataView","menuItems","PencilSvg","TrashCanSvg","HamburgerMenu","title","description","EmptyData","jsxs","Fragment","Flex","PlusCircleIcon","id","DataView"],"mappings":"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"}

package/dist/components/Employee/EmployeeList/onboarding/EmployeeList.js

@@ -1,18 +1,19 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useEmployeeList as d } from "../shared/useEmployeeList.js";
-import { EmployeeListView as y } from "./EmployeeListView.js";
-import { BaseBoundaries as L, BaseLayout as l } from "../../../Base/Base.js";
-import { useI18n as O, useComponentDictionary as D } from "../../../../i18n/I18n.js";
+import { useEmployeeList as y } from "../shared/useEmployeeList.js";
+import { EmployeeListView as L } from "./EmployeeListView.js";
+import { BaseBoundaries as O, BaseLayout as l } from "../../../Base/Base.js";
+import { useI18n as D, useComponentDictionary as f } from "../../../../i18n/I18n.js";
 import { componentEvents as n } from "../../../../shared/constants.js";
-function f({
+function g({
   companyId: s,
   onEvent: o,
   dictionary: a,
   showContinueButton: m = !1,
-  LoaderComponent: E
+  LoaderComponent: E,
+  className: p
 }) {
-  O("Employee.EmployeeList"), D("Employee.EmployeeList", a);
-  const e = d({
+  D("Employee.EmployeeList"), f("Employee.EmployeeList", a);
+  const e = y({
     companyId: s
   });
   if (e.isLoading)
@@ -24,21 +25,21 @@ function f({
         LoaderComponent: E
       }
     );
-  const p = (i, t) => {
+  const c = (i, t) => {
     o(n.EMPLOYEE_UPDATE, { employeeId: i, onboardingStatus: t });
-  }, c = () => {
-    o(n.EMPLOYEE_CREATE);
   }, u = () => {
+    o(n.EMPLOYEE_CREATE);
+  }, d = () => {
     o(n.EMPLOYEE_ONBOARDING_DONE);
   };
   return /* @__PURE__ */ r(l, { error: e.errorHandling.errors, LoaderComponent: E, children: /* @__PURE__ */ r(
-    y,
+    L,
     {
       employees: e.data.employees,
       isFetching: e.status.isFetching,
       pagination: e.pagination,
       status: e.status,
-      onEdit: p,
+      onEdit: c,
       onDelete: async (i) => {
         await e.actions.onDelete(i), o(n.EMPLOYEE_DELETED, { employeeId: i });
       },
@@ -53,24 +54,25 @@ function f({
           onboardingStatus: t.onboardingStatus
         }));
       },
-      onAddEmployee: c,
-      onSkip: u,
-      showContinueButton: m
+      onAddEmployee: u,
+      onSkip: d,
+      showContinueButton: m,
+      className: p
     }
   ) });
 }
-function N({ FallbackComponent: s, LoaderComponent: o, ...a }) {
+function h({ FallbackComponent: s, LoaderComponent: o, ...a }) {
   return /* @__PURE__ */ r(
-    L,
+    O,
     {
       componentName: "Employee.EmployeeList",
       FallbackComponent: s,
       LoaderComponent: o,
-      children: /* @__PURE__ */ r(f, { LoaderComponent: o, ...a })
+      children: /* @__PURE__ */ r(g, { LoaderComponent: o, ...a })
     }
   );
 }
 export {
-  N as EmployeeList
+  h as EmployeeList
 };
 //# sourceMappingURL=EmployeeList.js.map

package/dist/components/Employee/EmployeeList/onboarding/EmployeeList.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmployeeList.js","sources":["../../../../../src/components/Employee/EmployeeList/onboarding/EmployeeList.tsx"],"sourcesContent":["import type { OnboardingStatus } from '@gusto/embedded-api/models/operations/putv1employeesemployeeidonboardingstatus'\nimport { useEmployeeList } from '../shared/useEmployeeList'\nimport { EmployeeListView } from './EmployeeListView'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link EmployeeList}.\n *\n * @public\n */\nexport interface EmployeeListProps extends BaseComponentInterface<'Employee.EmployeeList'> {\n  /** The associated company identifier. */\n  companyId: string\n  /**\n   * Controls visibility of the Continue button in the employee list.\n   *\n   * @remarks\n   *\n   * When `true`, displays a Continue button below the populated employee list and\n   * a Skip button in the empty state. These controls trigger the `employee/onboarding/done` event,\n   * allowing navigation to the next step in a multi-step flow (e.g., company onboarding).\n   *\n   * When `false` (default), hides both buttons. Use this when the employee list is the final destination\n   * in its flow and no further navigation is needed (e.g., standalone employee onboarding where\n   * the list is the terminal screen).\n   *\n   * @defaultValue `false`\n   */\n  showContinueButton?: boolean\n}\n\nfunction EmployeeListRoot({\n  companyId,\n  onEvent,\n  dictionary,\n  showContinueButton = false,\n  LoaderComponent,\n}: EmployeeListProps) {\n  useI18n('Employee.EmployeeList')\n  useComponentDictionary('Employee.EmployeeList', dictionary)\n\n  const employeeList = useEmployeeList({\n    companyId,\n  })\n\n  if (employeeList.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={employeeList.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  const handleEdit = (employeeId: string, onboardingStatus?: OnboardingStatus) => {\n    onEvent(componentEvents.EMPLOYEE_UPDATE, { employeeId, onboardingStatus })\n  }\n\n  const handleAddEmployee = () => {\n    onEvent(componentEvents.EMPLOYEE_CREATE)\n  }\n\n  const handleSkip = () => {\n    onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n  }\n\n  return (\n    <BaseLayout error={employeeList.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <EmployeeListView\n        employees={employeeList.data.employees}\n        isFetching={employeeList.status.isFetching}\n        pagination={employeeList.pagination}\n        status={employeeList.status}\n        onEdit={handleEdit}\n        onDelete={async (employeeId: string) => {\n          await employeeList.actions.onDelete(employeeId)\n          onEvent(componentEvents.EMPLOYEE_DELETED, { employeeId })\n        }}\n        onCancelSelfOnboarding={async (employeeId: string) => {\n          const onboardingStatus = await employeeList.actions.onCancelSelfOnboarding(employeeId)\n          if (!onboardingStatus) return\n          onEvent(componentEvents.EMPLOYEE_ONBOARDING_STATUS_UPDATED, onboardingStatus)\n        }}\n        onReview={async (employeeId: string) => {\n          const onboardingStatus = await employeeList.actions.onReview(employeeId)\n          if (!onboardingStatus) return\n          onEvent(componentEvents.EMPLOYEE_ONBOARDING_STATUS_UPDATED, onboardingStatus)\n          onEvent(componentEvents.EMPLOYEE_UPDATE, {\n            employeeId,\n            onboardingStatus: onboardingStatus.onboardingStatus,\n          })\n        }}\n        onAddEmployee={handleAddEmployee}\n        onSkip={handleSkip}\n        showContinueButton={showContinueButton}\n      />\n    </BaseLayout>\n  )\n}\n\n/**\n * Renders a paginated list of a company's employees with per-row onboarding actions (edit,\n * delete, review, cancel self-onboarding) and an \"Add employee\" entry point.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/create` | Fired when the user clicks \"Add employee\". | — |\n * | `employee/update` | Fired when the user selects \"Edit\" or \"Review\" on a row. | `{ employeeId: string, onboardingStatus?: OnboardingStatus }` |\n * | `employee/deleted` | Fired after a row's delete action completes. | `{ employeeId: string }` |\n * | `employee/onboardingStatus/updated` | Fired after the \"Review\" or \"Cancel self-onboarding\" action updates an employee's onboarding status. | The updated `EmployeeOnboardingStatus` record |\n * | `employee/onboarding/done` | Fired when the user clicks the skip/done control to leave the onboarding employee list. | — |\n *\n * @public\n */\nexport function EmployeeList({ FallbackComponent, LoaderComponent, ...props }: EmployeeListProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.EmployeeList\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <EmployeeListRoot LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["EmployeeListRoot","companyId","onEvent","dictionary","showContinueButton","LoaderComponent","useI18n","useComponentDictionary","employeeList","useEmployeeList","jsx","BaseLayout","handleEdit","employeeId","onboardingStatus","componentEvents","handleAddEmployee","handleSkip","EmployeeListView","EmployeeList","FallbackComponent","props","BaseBoundaries"],"mappings":";;;;;;AAiCA,SAASA,EAAiB;AAAA,EACxB,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,iBAAAC;AACF,GAAsB;AACpB,EAAAC,EAAQ,uBAAuB,GAC/BC,EAAuB,yBAAyBJ,CAAU;AAE1D,QAAMK,IAAeC,EAAgB;AAAA,IACnC,WAAAR;AAAA,EAAA,CACD;AAED,MAAIO,EAAa;AACf,WACE,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,OAAOH,EAAa,cAAc;AAAA,QAClC,iBAAAH;AAAA,MAAA;AAAA,IAAA;AAKN,QAAMO,IAAa,CAACC,GAAoBC,MAAwC;AAC9E,IAAAZ,EAAQa,EAAgB,iBAAiB,EAAE,YAAAF,GAAY,kBAAAC,GAAkB;AAAA,EAC3E,GAEME,IAAoB,MAAM;AAC9B,IAAAd,EAAQa,EAAgB,eAAe;AAAA,EACzC,GAEME,IAAa,MAAM;AACvB,IAAAf,EAAQa,EAAgB,wBAAwB;AAAA,EAClD;AAEA,2BACGJ,GAAA,EAAW,OAAOH,EAAa,cAAc,QAAQ,iBAAAH,GACpD,UAAA,gBAAAK;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,WAAWV,EAAa,KAAK;AAAA,MAC7B,YAAYA,EAAa,OAAO;AAAA,MAChC,YAAYA,EAAa;AAAA,MACzB,QAAQA,EAAa;AAAA,MACrB,QAAQI;AAAA,MACR,UAAU,OAAOC,MAAuB;AACtC,cAAML,EAAa,QAAQ,SAASK,CAAU,GAC9CX,EAAQa,EAAgB,kBAAkB,EAAE,YAAAF,EAAA,CAAY;AAAA,MAC1D;AAAA,MACA,wBAAwB,OAAOA,MAAuB;AACpD,cAAMC,IAAmB,MAAMN,EAAa,QAAQ,uBAAuBK,CAAU;AACrF,QAAKC,KACLZ,EAAQa,EAAgB,oCAAoCD,CAAgB;AAAA,MAC9E;AAAA,MACA,UAAU,OAAOD,MAAuB;AACtC,cAAMC,IAAmB,MAAMN,EAAa,QAAQ,SAASK,CAAU;AACvE,QAAKC,MACLZ,EAAQa,EAAgB,oCAAoCD,CAAgB,GAC5EZ,EAAQa,EAAgB,iBAAiB;AAAA,UACvC,YAAAF;AAAA,UACA,kBAAkBC,EAAiB;AAAA,QAAA,CACpC;AAAA,MACH;AAAA,MACA,eAAeE;AAAA,MACf,QAAQC;AAAA,MACR,oBAAAb;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAiBO,SAASe,EAAa,EAAE,mBAAAC,GAAmB,iBAAAf,GAAiB,GAAGgB,KAA4B;AAChG,SACE,gBAAAX;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAF;AAAA,MACA,iBAAAf;AAAA,MAEA,UAAA,gBAAAK,EAACV,GAAA,EAAiB,iBAAAK,GAAmC,GAAGgB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGrE;"}
+{"version":3,"file":"EmployeeList.js","sources":["../../../../../src/components/Employee/EmployeeList/onboarding/EmployeeList.tsx"],"sourcesContent":["import type { OnboardingStatus } from '@gusto/embedded-api/models/operations/putv1employeesemployeeidonboardingstatus'\nimport { useEmployeeList } from '../shared/useEmployeeList'\nimport { EmployeeListView } from './EmployeeListView'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link EmployeeList}.\n *\n * @public\n */\nexport interface EmployeeListProps extends BaseComponentInterface<'Employee.EmployeeList'> {\n  /** The associated company identifier. */\n  companyId: string\n  /**\n   * Controls visibility of the Continue button in the employee list.\n   *\n   * @remarks\n   *\n   * When `true`, displays a Continue button below the populated employee list and\n   * a Skip button in the empty state. These controls trigger the `employee/onboarding/done` event,\n   * allowing navigation to the next step in a multi-step flow (e.g., company onboarding).\n   *\n   * When `false` (default), hides both buttons. Use this when the employee list is the final destination\n   * in its flow and no further navigation is needed (e.g., standalone employee onboarding where\n   * the list is the terminal screen).\n   *\n   * @defaultValue `false`\n   */\n  showContinueButton?: boolean\n}\n\nfunction EmployeeListRoot({\n  companyId,\n  onEvent,\n  dictionary,\n  showContinueButton = false,\n  LoaderComponent,\n  className,\n}: EmployeeListProps) {\n  useI18n('Employee.EmployeeList')\n  useComponentDictionary('Employee.EmployeeList', dictionary)\n\n  const employeeList = useEmployeeList({\n    companyId,\n  })\n\n  if (employeeList.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={employeeList.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  const handleEdit = (employeeId: string, onboardingStatus?: OnboardingStatus) => {\n    onEvent(componentEvents.EMPLOYEE_UPDATE, { employeeId, onboardingStatus })\n  }\n\n  const handleAddEmployee = () => {\n    onEvent(componentEvents.EMPLOYEE_CREATE)\n  }\n\n  const handleSkip = () => {\n    onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n  }\n\n  return (\n    <BaseLayout error={employeeList.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <EmployeeListView\n        employees={employeeList.data.employees}\n        isFetching={employeeList.status.isFetching}\n        pagination={employeeList.pagination}\n        status={employeeList.status}\n        onEdit={handleEdit}\n        onDelete={async (employeeId: string) => {\n          await employeeList.actions.onDelete(employeeId)\n          onEvent(componentEvents.EMPLOYEE_DELETED, { employeeId })\n        }}\n        onCancelSelfOnboarding={async (employeeId: string) => {\n          const onboardingStatus = await employeeList.actions.onCancelSelfOnboarding(employeeId)\n          if (!onboardingStatus) return\n          onEvent(componentEvents.EMPLOYEE_ONBOARDING_STATUS_UPDATED, onboardingStatus)\n        }}\n        onReview={async (employeeId: string) => {\n          const onboardingStatus = await employeeList.actions.onReview(employeeId)\n          if (!onboardingStatus) return\n          onEvent(componentEvents.EMPLOYEE_ONBOARDING_STATUS_UPDATED, onboardingStatus)\n          onEvent(componentEvents.EMPLOYEE_UPDATE, {\n            employeeId,\n            onboardingStatus: onboardingStatus.onboardingStatus,\n          })\n        }}\n        onAddEmployee={handleAddEmployee}\n        onSkip={handleSkip}\n        showContinueButton={showContinueButton}\n        className={className}\n      />\n    </BaseLayout>\n  )\n}\n\n/**\n * Renders a paginated list of a company's employees with per-row onboarding actions (edit,\n * delete, review, cancel self-onboarding) and an \"Add employee\" entry point.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/create` | Fired when the user clicks \"Add employee\". | — |\n * | `employee/update` | Fired when the user selects \"Edit\" or \"Review\" on a row. | `{ employeeId: string, onboardingStatus?: OnboardingStatus }` |\n * | `employee/deleted` | Fired after a row's delete action completes. | `{ employeeId: string }` |\n * | `employee/onboardingStatus/updated` | Fired after the \"Review\" or \"Cancel self-onboarding\" action updates an employee's onboarding status. | The updated `EmployeeOnboardingStatus` record |\n * | `employee/onboarding/done` | Fired when the user clicks the skip/done control to leave the onboarding employee list. | — |\n *\n * @public\n */\nexport function EmployeeList({ FallbackComponent, LoaderComponent, ...props }: EmployeeListProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.EmployeeList\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <EmployeeListRoot LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["EmployeeListRoot","companyId","onEvent","dictionary","showContinueButton","LoaderComponent","className","useI18n","useComponentDictionary","employeeList","useEmployeeList","jsx","BaseLayout","handleEdit","employeeId","onboardingStatus","componentEvents","handleAddEmployee","handleSkip","EmployeeListView","EmployeeList","FallbackComponent","props","BaseBoundaries"],"mappings":";;;;;;AAiCA,SAASA,EAAiB;AAAA,EACxB,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,iBAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,EAAAC,EAAQ,uBAAuB,GAC/BC,EAAuB,yBAAyBL,CAAU;AAE1D,QAAMM,IAAeC,EAAgB;AAAA,IACnC,WAAAT;AAAA,EAAA,CACD;AAED,MAAIQ,EAAa;AACf,WACE,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,OAAOH,EAAa,cAAc;AAAA,QAClC,iBAAAJ;AAAA,MAAA;AAAA,IAAA;AAKN,QAAMQ,IAAa,CAACC,GAAoBC,MAAwC;AAC9E,IAAAb,EAAQc,EAAgB,iBAAiB,EAAE,YAAAF,GAAY,kBAAAC,GAAkB;AAAA,EAC3E,GAEME,IAAoB,MAAM;AAC9B,IAAAf,EAAQc,EAAgB,eAAe;AAAA,EACzC,GAEME,IAAa,MAAM;AACvB,IAAAhB,EAAQc,EAAgB,wBAAwB;AAAA,EAClD;AAEA,2BACGJ,GAAA,EAAW,OAAOH,EAAa,cAAc,QAAQ,iBAAAJ,GACpD,UAAA,gBAAAM;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,WAAWV,EAAa,KAAK;AAAA,MAC7B,YAAYA,EAAa,OAAO;AAAA,MAChC,YAAYA,EAAa;AAAA,MACzB,QAAQA,EAAa;AAAA,MACrB,QAAQI;AAAA,MACR,UAAU,OAAOC,MAAuB;AACtC,cAAML,EAAa,QAAQ,SAASK,CAAU,GAC9CZ,EAAQc,EAAgB,kBAAkB,EAAE,YAAAF,EAAA,CAAY;AAAA,MAC1D;AAAA,MACA,wBAAwB,OAAOA,MAAuB;AACpD,cAAMC,IAAmB,MAAMN,EAAa,QAAQ,uBAAuBK,CAAU;AACrF,QAAKC,KACLb,EAAQc,EAAgB,oCAAoCD,CAAgB;AAAA,MAC9E;AAAA,MACA,UAAU,OAAOD,MAAuB;AACtC,cAAMC,IAAmB,MAAMN,EAAa,QAAQ,SAASK,CAAU;AACvE,QAAKC,MACLb,EAAQc,EAAgB,oCAAoCD,CAAgB,GAC5Eb,EAAQc,EAAgB,iBAAiB;AAAA,UACvC,YAAAF;AAAA,UACA,kBAAkBC,EAAiB;AAAA,QAAA,CACpC;AAAA,MACH;AAAA,MACA,eAAeE;AAAA,MACf,QAAQC;AAAA,MACR,oBAAAd;AAAA,MACA,WAAAE;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AAiBO,SAASc,EAAa,EAAE,mBAAAC,GAAmB,iBAAAhB,GAAiB,GAAGiB,KAA4B;AAChG,SACE,gBAAAX;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAF;AAAA,MACA,iBAAAhB;AAAA,MAEA,UAAA,gBAAAM,EAACX,GAAA,EAAiB,iBAAAK,GAAmC,GAAGiB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGrE;"}

package/dist/components/Employee/EmployeeList/onboarding/EmployeeListView.js

@@ -1,19 +1,19 @@
-import { jsx as e, jsxs as r, Fragment as w } from "react/jsx-runtime";
-import { useState as A } from "react";
-import { useTranslation as S } from "react-i18next";
+import { jsx as e, jsxs as r, Fragment as A } from "react/jsx-runtime";
+import { useState as S } from "react";
+import { useTranslation as T } from "react-i18next";
 import { Flex as f } from "../../../Common/Flex/Flex.js";
-import { EmptyData as T } from "../../../Common/EmptyData/EmptyData.js";
+import { EmptyData as x } from "../../../Common/EmptyData/EmptyData.js";
 import { ActionsLayout as p } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { HamburgerMenu as x } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useComponentContext as E } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { EmployeeOnboardingStatusBadge as P } from "../../../Common/OnboardingStatusBadge/index.js";
+import { HamburgerMenu as E } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as P } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { EmployeeOnboardingStatusBadge as j } from "../../../Common/OnboardingStatusBadge/index.js";
 import s from "../../../../assets/icons/pencil.svg.js";
-import j from "../../../../assets/icons/trashcan.svg.js";
-import { firstLastName as B } from "../../../../helpers/formattedStrings.js";
+import B from "../../../../assets/icons/trashcan.svg.js";
+import { firstLastName as V } from "../../../../helpers/formattedStrings.js";
 import g from "../../../../assets/icons/plus-circle.svg.js";
-import { useDataView as V } from "../../../Common/DataView/useDataView.js";
-import { DataView as _ } from "../../../Common/DataView/DataView.js";
-function X({
+import { useDataView as _ } from "../../../Common/DataView/useDataView.js";
+import { DataView as N } from "../../../Common/DataView/DataView.js";
+function Y({
   employees: o,
   isFetching: h,
   pagination: C,
@@ -24,15 +24,16 @@ function X({
   onReview: L,
   onAddEmployee: d,
   onSkip: m,
-  showContinueButton: u
+  showContinueButton: u,
+  className: k
 }) {
-  const { t } = S("Employee.EmployeeList"), n = E(), [l, c] = A(null), { ...k } = V({
+  const { t } = T("Employee.EmployeeList"), n = P(), [l, c] = S(null), { ...w } = _({
     data: o,
     columns: [
       {
         key: "name",
         title: t("nameLabel"),
-        render: (i) => B({
+        render: (i) => V({
           first_name: i.firstName,
           last_name: i.lastName
         })
@@ -41,7 +42,7 @@ function X({
         key: "status",
         title: t("statusLabel"),
         render: (i) => /* @__PURE__ */ e(
-          P,
+          j,
           {
             onboarded: i.onboarded,
             onboardingStatus: i.onboardingStatus
@@ -74,18 +75,18 @@ function X({
         onClick: () => {
           c(i.uuid);
         },
-        icon: /* @__PURE__ */ e(j, { "aria-hidden": !0 })
-      }), /* @__PURE__ */ e(x, { items: a, triggerLabel: t("hamburgerTitle") });
+        icon: /* @__PURE__ */ e(B, { "aria-hidden": !0 })
+      }), /* @__PURE__ */ e(E, { items: a, triggerLabel: t("hamburgerTitle") });
     },
     isFetching: h,
     pagination: C,
-    emptyState: () => /* @__PURE__ */ e(T, { title: t("emptyTableTitle"), description: t("emptyTableDescription"), children: /* @__PURE__ */ r(p, { justifyContent: "center", children: [
+    emptyState: () => /* @__PURE__ */ e(x, { title: t("emptyTableTitle"), description: t("emptyTableDescription"), children: /* @__PURE__ */ r(p, { justifyContent: "center", children: [
       u && /* @__PURE__ */ e(n.Button, { variant: "secondary", onClick: m, children: t("skipCta") }),
       /* @__PURE__ */ e(n.Button, { variant: "primary", onClick: d, icon: /* @__PURE__ */ e(g, {}), children: t("addEmployeeCta") })
     ] }) })
   });
-  return /* @__PURE__ */ r(w, { children: [
-    /* @__PURE__ */ r(f, { flexDirection: "column", gap: 24, children: [
+  return /* @__PURE__ */ r(A, { children: [
+    /* @__PURE__ */ e("section", { className: k, children: /* @__PURE__ */ r(f, { flexDirection: "column", gap: 24, children: [
       /* @__PURE__ */ r(f, { justifyContent: "space-between", alignItems: "center", children: [
         /* @__PURE__ */ e(n.Heading, { as: "h2", children: t("title") }),
         o.length > 0 && /* @__PURE__ */ e(
@@ -98,9 +99,9 @@ function X({
           }
         )
       ] }),
-      /* @__PURE__ */ e(_, { label: t("employeeListLabel"), ...k }),
+      /* @__PURE__ */ e(N, { label: t("employeeListLabel"), ...w }),
       u && o.length > 0 && /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(n.Button, { onClick: m, children: t("continueCta") }) })
-    ] }),
+    ] }) }),
     /* @__PURE__ */ e(
       n.Dialog,
       {
@@ -126,6 +127,6 @@ function X({
   ] });
 }
 export {
-  X as EmployeeListView
+  Y as EmployeeListView
 };
 //# sourceMappingURL=EmployeeListView.js.map