@gusto/embedded-react-sdk 0.27.0 → 0.28.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 0.28.0
+
+### Features & Enhancements
+
+- Extend DataTable for radio selection mode
+- Update InformationRequests empty state title and remove description
+
+### Breaking changes
+
+#### Card component adapter (selection props)
+
+If you supply a custom **Card** via the [component adapter](./docs/component-adapter/component-adapter.md), update it to use the new API: the Card no longer receives `onSelect`. Selection UI (checkbox or radio) is now passed as the `action` prop.
+
+```tsx
+// Before: Card received onSelect and rendered its own checkbox
+Card: ({ children, menu, className, onSelect }) => (
+  <div className={className}>
+    {onSelect && <input type="checkbox" onChange={e => onSelect(e.target.checked)} />}
+    {children}
+    {menu}
+  </div>
+)
+
+// After: Card receives pre-rendered selection UI via action
+Card: ({ children, menu, className, action }) => (
+  <div className={className}>
+    {action}
+    {children}
+    {menu}
+  </div>
+)
+```
+
 ## 0.27.0
 
 ### Features & Enhancements

package/dist/components/Common/DataView/DataCards/DataCards.d.ts

@@ -1,10 +1,12 @@
-import { useDataViewPropReturn } from '../useDataView';
+import { useDataViewPropReturn, SelectionMode } from '../useDataView';
 export type DataCardsProps<T> = {
     columns: useDataViewPropReturn<T>['columns'];
     data: useDataViewPropReturn<T>['data'];
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
+    isItemSelected?: useDataViewPropReturn<T>['isItemSelected'];
     emptyState?: useDataViewPropReturn<T>['emptyState'];
     footer?: useDataViewPropReturn<T>['footer'];
+    selectionMode?: SelectionMode;
 };
-export declare const DataCards: <T>({ data, columns, itemMenu, onSelect, emptyState, footer, }: DataCardsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataCards: <T>({ data, columns, itemMenu, onSelect, isItemSelected, emptyState, footer, selectionMode, }: DataCardsProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/DataView/DataCards/DataCards.js

@@ -1,41 +1,61 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import d from "./DataCards.module.scss.js";
-import { Flex as C } from "../../Flex/Flex.js";
-import { useComponentContext as v } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-const D = ({
-  data: o,
-  columns: h,
-  itemMenu: s,
-  onSelect: a,
-  emptyState: c,
-  footer: m
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { useId as g } from "react";
+import { useTranslation as x } from "react-i18next";
+import s from "./DataCards.module.scss.js";
+import { Flex as L } from "../../Flex/Flex.js";
+import { useComponentContext as N } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+const H = ({
+  data: d,
+  columns: p,
+  itemMenu: c,
+  onSelect: o,
+  isItemSelected: f,
+  emptyState: m,
+  footer: h,
+  selectionMode: C = "multiple"
 }) => {
-  const i = v();
-  return /* @__PURE__ */ n("div", { role: "list", "data-testid": "data-cards", children: [
-    o.length === 0 && c && /* @__PURE__ */ r("div", { role: "listitem", children: /* @__PURE__ */ r(i.Card, { children: c() }) }),
-    o.map((t, l) => /* @__PURE__ */ r("div", { role: "listitem", children: /* @__PURE__ */ r(
-      i.Card,
+  const i = N(), { t: u } = x("common"), v = g(), b = (e, t) => {
+    if (!o) return;
+    const r = f?.(e, t) ?? !1;
+    return C === "single" ? /* @__PURE__ */ l(
+      i.Radio,
       {
-        menu: s && s(t),
-        onSelect: a ? (e) => {
-          a(t, e);
-        } : void 0,
-        children: h.map((e, p) => /* @__PURE__ */ n(C, { flexDirection: "column", gap: 0, children: [
-          e.title && /* @__PURE__ */ r("h5", { className: d.columnTitle, children: e.title }),
-          /* @__PURE__ */ n("div", { className: d.columnData, children: [
-            " ",
-            e.render ? e.render(t) : String(t[e.key])
-          ] })
-        ] }, p))
+        name: v,
+        value: r,
+        onChange: () => {
+          o(e, !0);
+        },
+        label: u("card.selectRowLabel"),
+        shouldVisuallyHideLabel: !0
       }
-    ) }, l)),
-    m && /* @__PURE__ */ r("div", { role: "listitem", children: /* @__PURE__ */ r(i.Card, { children: (() => {
-      const t = m();
-      return Object.entries(t).map(([l, e]) => /* @__PURE__ */ r("div", { className: d.footerItem, children: e }, l));
+    ) : /* @__PURE__ */ l(
+      i.Checkbox,
+      {
+        value: r,
+        onChange: (n) => {
+          o(e, n);
+        },
+        label: u("card.selectRowLabel"),
+        shouldVisuallyHideLabel: !0
+      }
+    );
+  };
+  return /* @__PURE__ */ a("div", { role: "list", "data-testid": "data-cards", children: [
+    d.length === 0 && m && /* @__PURE__ */ l("div", { role: "listitem", children: /* @__PURE__ */ l(i.Card, { children: m() }) }),
+    d.map((e, t) => /* @__PURE__ */ l("div", { role: "listitem", children: /* @__PURE__ */ l(i.Card, { menu: c && c(e), action: b(e, t), children: p.map((r, n) => /* @__PURE__ */ a(L, { flexDirection: "column", gap: 0, children: [
+      r.title && /* @__PURE__ */ l("h5", { className: s.columnTitle, children: r.title }),
+      /* @__PURE__ */ a("div", { className: s.columnData, children: [
+        " ",
+        r.render ? r.render(e) : String(e[r.key])
+      ] })
+    ] }, n)) }) }, t)),
+    h && /* @__PURE__ */ l("div", { role: "listitem", children: /* @__PURE__ */ l(i.Card, { children: (() => {
+      const e = h();
+      return Object.entries(e).map(([t, r]) => /* @__PURE__ */ l("div", { className: s.footerItem, children: r }, t));
     })() }) })
   ] });
 };
 export {
-  D as DataCards
+  H as DataCards
 };
 //# sourceMappingURL=DataCards.js.map

package/dist/components/Common/DataView/DataCards/DataCards.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn } from '@/components/Common/DataView/useDataView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  return (\n    <div role=\"list\" data-testid=\"data-cards\">\n      {data.length === 0 && emptyState && (\n        <div role=\"listitem\">\n          <Components.Card>{emptyState()}</Components.Card>\n        </div>\n      )}\n      {data.map((item, index) => (\n        <div role=\"listitem\" key={index}>\n          <Components.Card\n            menu={itemMenu && itemMenu(item)}\n            onSelect={\n              onSelect\n                ? (checked: boolean) => {\n                    onSelect(item, checked)\n                  }\n                : undefined\n            }\n          >\n            {columns.map((column, index) => (\n              <Flex key={index} flexDirection=\"column\" gap={0}>\n                {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n                <div className={styles.columnData}>\n                  {' '}\n                  {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                </div>\n              </Flex>\n            ))}\n          </Components.Card>\n        </div>\n      ))}\n      {footer && (\n        <div role=\"listitem\">\n          <Components.Card>\n            {(() => {\n              const footerContent = footer()\n\n              // Footer content is always an object with column keys\n              return Object.entries(footerContent).map(([key, content]) => (\n                <div key={key} className={styles.footerItem}>\n                  {content}\n                </div>\n              ))\n            })()}\n          </Components.Card>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","emptyState","footer","Components","useComponentContext","jsxs","jsx","item","index","checked","column","Flex","styles","footerContent","key","content"],"mappings":";;;;AAcO,MAAMA,IAAY,CAAK;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAAC,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAAR,EAAK,WAAW,KAAKI,KACpB,gBAAAK,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACH,EAAW,MAAX,EAAiB,UAAAF,EAAA,GAAa,GACjC;AAAA,IAEDJ,EAAK,IAAI,CAACU,GAAMC,MACf,gBAAAF,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA;AAAA,MAACH,EAAW;AAAA,MAAX;AAAA,QACC,MAAMJ,KAAYA,EAASQ,CAAI;AAAA,QAC/B,UACEP,IACI,CAACS,MAAqB;AACpB,UAAAT,EAASO,GAAME,CAAO;AAAA,QACxB,IACA;AAAA,QAGL,UAAAX,EAAQ,IAAI,CAACY,GAAQF,wBACnBG,GAAA,EAAiB,eAAc,UAAS,KAAK,GAC3C,UAAA;AAAA,UAAAD,EAAO,SAAS,gBAAAJ,EAAC,MAAA,EAAG,WAAWM,EAAO,aAAc,YAAO,MAAA,CAAM;AAAA,UAClE,gBAAAP,EAAC,OAAA,EAAI,WAAWO,EAAO,YACpB,UAAA;AAAA,YAAA;AAAA,YACAF,EAAO,SAASA,EAAO,OAAOH,CAAI,IAAI,OAAOA,EAAKG,EAAO,GAAc,CAAC;AAAA,UAAA,EAAA,CAC3E;AAAA,QAAA,EAAA,GALSF,CAMX,CACD;AAAA,MAAA;AAAA,IAAA,EACH,GApBwBA,CAqB1B,CACD;AAAA,IACAN,uBACE,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAI,EAACH,EAAW,MAAX,EACG,WAAA,MAAM;AACN,YAAMU,IAAgBX,EAAA;AAGtB,aAAO,OAAO,QAAQW,CAAa,EAAE,IAAI,CAAC,CAACC,GAAKC,CAAO,wBACpD,OAAA,EAAc,WAAWH,EAAO,YAC9B,UAAAG,EAAA,GADOD,CAEV,CACD;AAAA,IACH,GAAA,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import { useId } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn, SelectionMode } from '@/components/Common/DataView/useDataView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  isItemSelected?: useDataViewPropReturn<T>['isItemSelected']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  selectionMode?: SelectionMode\n}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  isItemSelected,\n  emptyState,\n  footer,\n  selectionMode = 'multiple',\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n\n  const renderAction = (item: T, index: number) => {\n    if (!onSelect) return undefined\n\n    const isSelected = isItemSelected?.(item, index) ?? false\n\n    if (selectionMode === 'single') {\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            onSelect(item, true)\n          }}\n          label={t('card.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect(item, checked)\n        }}\n        label={t('card.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  return (\n    <div role=\"list\" data-testid=\"data-cards\">\n      {data.length === 0 && emptyState && (\n        <div role=\"listitem\">\n          <Components.Card>{emptyState()}</Components.Card>\n        </div>\n      )}\n      {data.map((item, index) => (\n        <div role=\"listitem\" key={index}>\n          <Components.Card menu={itemMenu && itemMenu(item)} action={renderAction(item, index)}>\n            {columns.map((column, colIndex) => (\n              <Flex key={colIndex} flexDirection=\"column\" gap={0}>\n                {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n                <div className={styles.columnData}>\n                  {' '}\n                  {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                </div>\n              </Flex>\n            ))}\n          </Components.Card>\n        </div>\n      ))}\n      {footer && (\n        <div role=\"listitem\">\n          <Components.Card>\n            {(() => {\n              const footerContent = footer()\n\n              return Object.entries(footerContent).map(([key, content]) => (\n                <div key={key} className={styles.footerItem}>\n                  {content}\n                </div>\n              ))\n            })()}\n          </Components.Card>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","isItemSelected","emptyState","footer","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","renderAction","item","index","isSelected","jsx","checked","jsxs","column","colIndex","Flex","styles","footerContent","key","content"],"mappings":";;;;;;AAkBO,MAAMA,IAAY,CAAK;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,MAAyB;AACvB,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAiBC,EAAA,GAEjBC,IAAe,CAACC,GAASC,MAAkB;AAC/C,QAAI,CAACb,EAAU;AAEf,UAAMc,IAAab,IAAiBW,GAAMC,CAAK,KAAK;AAEpD,WAAIT,MAAkB,WAElB,gBAAAW;AAAA,MAACV,EAAW;AAAA,MAAX;AAAA,QACC,MAAMI;AAAA,QACN,OAAOK;AAAA,QACP,UAAU,MAAM;AACd,UAAAd,EAASY,GAAM,EAAI;AAAA,QACrB;AAAA,QACA,OAAOL,EAAE,qBAAqB;AAAA,QAC9B,yBAAuB;AAAA,MAAA;AAAA,IAAA,IAM3B,gBAAAQ;AAAA,MAACV,EAAW;AAAA,MAAX;AAAA,QACC,OAAOS;AAAA,QACP,UAAU,CAACE,MAAqB;AAC9B,UAAAhB,EAASY,GAAMI,CAAO;AAAA,QACxB;AAAA,QACA,OAAOT,EAAE,qBAAqB;AAAA,QAC9B,yBAAuB;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7B;AAEA,SACE,gBAAAU,EAAC,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAApB,EAAK,WAAW,KAAKK,KACpB,gBAAAa,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACV,EAAW,MAAX,EAAiB,UAAAH,EAAA,GAAa,GACjC;AAAA,IAEDL,EAAK,IAAI,CAACe,GAAMC,MACf,gBAAAE,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACV,EAAW,MAAX,EAAgB,MAAMN,KAAYA,EAASa,CAAI,GAAG,QAAQD,EAAaC,GAAMC,CAAK,GAChF,UAAAf,EAAQ,IAAI,CAACoB,GAAQC,MACpB,gBAAAF,EAACG,GAAA,EAAoB,eAAc,UAAS,KAAK,GAC9C,UAAA;AAAA,MAAAF,EAAO,SAAS,gBAAAH,EAAC,MAAA,EAAG,WAAWM,EAAO,aAAc,YAAO,MAAA,CAAM;AAAA,MAClE,gBAAAJ,EAAC,OAAA,EAAI,WAAWI,EAAO,YACpB,UAAA;AAAA,QAAA;AAAA,QACAH,EAAO,SAASA,EAAO,OAAON,CAAI,IAAI,OAAOA,EAAKM,EAAO,GAAc,CAAC;AAAA,MAAA,EAAA,CAC3E;AAAA,IAAA,EAAA,GALSC,CAMX,CACD,EAAA,CACH,EAAA,GAXwBN,CAY1B,CACD;AAAA,IACAV,uBACE,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAY,EAACV,EAAW,MAAX,EACG,WAAA,MAAM;AACN,YAAMiB,IAAgBnB,EAAA;AAEtB,aAAO,OAAO,QAAQmB,CAAa,EAAE,IAAI,CAAC,CAACC,GAAKC,CAAO,wBACpD,OAAA,EAAc,WAAWH,EAAO,YAC9B,UAAAG,EAAA,GADOD,CAEV,CACD;AAAA,IACH,GAAA,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/Common/DataView/DataTable/DataTable.d.ts

@@ -1,4 +1,4 @@
-import { useDataViewPropReturn } from '../useDataView';
+import { useDataViewPropReturn, SelectionMode } from '../useDataView';
 import { TableProps } from '../../UI/Table/TableTypes';
 export type DataTableProps<T> = {
     label: string;
@@ -9,5 +9,6 @@ export type DataTableProps<T> = {
     emptyState?: useDataViewPropReturn<T>['emptyState'];
     footer?: useDataViewPropReturn<T>['footer'];
     variant?: TableProps['variant'];
+    selectionMode?: SelectionMode;
 };
-export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, emptyState, footer, variant, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, emptyState, footer, variant, selectionMode, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/DataView/DataTable/DataTable.js

@@ -1,63 +1,78 @@
 import { jsx as l } from "react/jsx-runtime";
-import { useTranslation as g } from "react-i18next";
-import { useComponentContext as D } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
-function m(s, r) {
-  if (r.render)
-    return r.render(s);
-  if (r.key) {
-    const n = r.key;
-    return String(s[n] ?? "");
+import { useId as v, useState as x } from "react";
+import { useTranslation as T } from "react-i18next";
+import { useComponentContext as V } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { VisuallyHidden as p } from "../../VisuallyHidden/VisuallyHidden.js";
+function w(i, o) {
+  if (o.render)
+    return o.render(i);
+  if (o.key) {
+    const a = o.key;
+    return String(i[a] ?? "");
   }
   return "";
 }
-const F = ({
-  label: s,
-  data: r,
-  columns: n,
+const q = ({
+  label: i,
+  data: o,
+  columns: a,
   itemMenu: c,
-  onSelect: a,
-  emptyState: d,
-  footer: f,
-  variant: b
+  onSelect: n,
+  emptyState: f,
+  footer: k,
+  variant: b,
+  selectionMode: h = "multiple"
 }) => {
-  const p = D(), { t: k } = g("common"), u = [
-    ...a ? [
+  const u = V(), { t: d } = T("common"), C = v(), [g, m] = x(null), R = [
+    ...n ? [
       {
         key: "select-header",
-        content: /* @__PURE__ */ l(h, { children: k("table.selectRowHeader") })
+        content: /* @__PURE__ */ l(p, { children: d("table.selectRowHeader") })
       }
     ] : [],
-    ...n.map((t, e) => ({
+    ...a.map((t, e) => ({
       key: typeof t.key == "string" ? t.key : `header-${e}`,
       content: t.title
     })),
     ...c ? [
       {
         key: "actions-header",
-        content: /* @__PURE__ */ l(h, { children: k("table.actionsColumnHeader") })
+        content: /* @__PURE__ */ l(p, { children: d("table.actionsColumnHeader") })
       }
     ] : []
-  ], C = r.map((t, e) => {
-    const i = [
-      ...a ? [
+  ], $ = (t, e) => {
+    m(e), n?.(t, !0);
+  }, D = (t, e) => h === "single" ? /* @__PURE__ */ l(
+    u.Radio,
+    {
+      name: C,
+      value: g === e,
+      onChange: () => {
+        $(t, e);
+      },
+      label: d("table.selectRowLabel"),
+      shouldVisuallyHideLabel: !0
+    }
+  ) : /* @__PURE__ */ l(
+    u.Checkbox,
+    {
+      onChange: (r) => {
+        n?.(t, r);
+      },
+      label: d("table.selectRowLabel"),
+      shouldVisuallyHideLabel: !0
+    }
+  ), H = o.map((t, e) => {
+    const r = [
+      ...n ? [
         {
           key: `select-${e}`,
-          content: /* @__PURE__ */ l(
-            p.Checkbox,
-            {
-              onChange: (o) => {
-                a(t, o);
-              },
-              label: k("table.selectRowLabel"),
-              shouldVisuallyHideLabel: !0
-            }
-          )
+          content: D(t, e)
         }
       ] : [],
-      ...n.map((o, y) => ({
-        key: typeof o.key == "string" ? o.key : `cell-${y}`,
-        content: m(t, o)
+      ...a.map((s, y) => ({
+        key: typeof s.key == "string" ? s.key : `cell-${y}`,
+        content: w(t, s)
       })),
       ...c ? [
         {
@@ -68,16 +83,16 @@ const F = ({
     ];
     return {
       key: `row-${e}`,
-      data: i
+      data: r
     };
-  }), $ = (() => {
-    if (!f) return;
-    const t = f(), e = [];
-    return a && e.push({
+  }), L = (() => {
+    if (!k) return;
+    const t = k(), e = [];
+    return n && e.push({
       key: "footer-select",
       content: ""
-    }), n.forEach((i, o) => {
-      const y = typeof i.key == "string" ? i.key : `column-${o}`;
+    }), a.forEach((r, s) => {
+      const y = typeof r.key == "string" ? r.key : `column-${s}`;
       e.push({
         key: `footer-${y}`,
         content: t[y] || ""
@@ -88,20 +103,20 @@ const F = ({
     }), e;
   })();
   return /* @__PURE__ */ l(
-    p.Table,
+    u.Table,
     {
-      "aria-label": s,
+      "aria-label": i,
       "data-testid": "data-table",
-      headers: u,
-      rows: C,
-      footer: $,
-      emptyState: d ? d() : void 0,
+      headers: R,
+      rows: H,
+      footer: L,
+      emptyState: f ? f() : void 0,
       variant: b,
-      hasCheckboxColumn: !!a
+      hasCheckboxColumn: !!n
     }
   );
 };
 export {
-  F as DataTable
+  q as DataTable
 };
 //# sourceMappingURL=DataTable.js.map

package/dist/components/Common/DataView/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn } from '../useDataView'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  variant?: TableProps['variant']\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n  variant,\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content: <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n  ]\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: (\n                <Components.Checkbox\n                  onChange={(checked: boolean) => {\n                    onSelect(item, checked)\n                  }}\n                  label={t('table.selectRowLabel')}\n                  shouldVisuallyHideLabel\n                />\n              ),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  const buildFooterData = () => {\n    if (!footer) return undefined\n\n    const footerContent = footer()\n    const footerCells: TableData[] = []\n\n    // Add select column footer (empty)\n    if (onSelect) {\n      footerCells.push({\n        key: 'footer-select',\n        content: '',\n      })\n    }\n\n    // Add data column footers\n    columns.forEach((column, index) => {\n      const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n      footerCells.push({\n        key: `footer-${columnKey}`,\n        content: footerContent[columnKey] || '',\n      })\n    })\n\n    // Add actions column footer (empty)\n    if (itemMenu) {\n      footerCells.push({\n        key: 'footer-actions',\n        content: '',\n      })\n    }\n\n    return footerCells\n  }\n\n  const footerData = buildFooterData()\n\n  return (\n    <Components.Table\n      aria-label={label}\n      data-testid=\"data-table\"\n      headers={headers}\n      rows={rows}\n      footer={footerData}\n      emptyState={emptyState ? emptyState() : undefined}\n      variant={variant}\n      hasCheckboxColumn={!!onSelect}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","emptyState","footer","variant","Components","useComponentContext","t","useTranslation","headers","jsx","VisuallyHidden","index","rows","rowIndex","rowData","checked","colIndex","footerData","footerContent","footerCells","columnKey"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  variant?: TableProps['variant']\n  selectionMode?: SelectionMode\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n  variant,\n  selectionMode = 'multiple',\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const [selectedRadioIndex, setSelectedRadioIndex] = useState<number | null>(null)\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content: <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n  ]\n\n  const handleRadioSelect = (item: T, rowIndex: number) => {\n    setSelectedRadioIndex(rowIndex)\n    onSelect?.(item, true)\n  }\n\n  const renderSelectionControl = (item: T, rowIndex: number) => {\n    if (selectionMode === 'single') {\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={selectedRadioIndex === rowIndex}\n          onChange={() => {\n            handleRadioSelect(item, rowIndex)\n          }}\n          label={t('table.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    return (\n      <Components.Checkbox\n        onChange={(checked: boolean) => {\n          onSelect?.(item, checked)\n        }}\n        label={t('table.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: renderSelectionControl(item, rowIndex),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  const buildFooterData = () => {\n    if (!footer) return undefined\n\n    const footerContent = footer()\n    const footerCells: TableData[] = []\n\n    // Add select column footer (empty)\n    if (onSelect) {\n      footerCells.push({\n        key: 'footer-select',\n        content: '',\n      })\n    }\n\n    // Add data column footers\n    columns.forEach((column, index) => {\n      const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n      footerCells.push({\n        key: `footer-${columnKey}`,\n        content: footerContent[columnKey] || '',\n      })\n    })\n\n    // Add actions column footer (empty)\n    if (itemMenu) {\n      footerCells.push({\n        key: 'footer-actions',\n        content: '',\n      })\n    }\n\n    return footerCells\n  }\n\n  const footerData = buildFooterData()\n\n  return (\n    <Components.Table\n      aria-label={label}\n      data-testid=\"data-table\"\n      headers={headers}\n      rows={rows}\n      footer={footerData}\n      emptyState={emptyState ? emptyState() : undefined}\n      variant={variant}\n      hasCheckboxColumn={!!onSelect}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","emptyState","footer","variant","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","headers","jsx","VisuallyHidden","index","handleRadioSelect","rowIndex","renderSelectionControl","checked","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey"],"mappings":"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"}

package/dist/components/Common/DataView/DataView.d.ts

@@ -1,5 +1,5 @@
 import { TableProps } from '../UI/Table/TableTypes';
-import { useDataViewPropReturn } from './useDataView';
+import { useDataViewPropReturn, SelectionMode } from './useDataView';
 import { useContainerBreakpointsProps } from '../../../hooks/useContainerBreakpoints/useContainerBreakpoints';
 export type DataViewProps<T> = {
     columns: useDataViewPropReturn<T>['columns'];
@@ -8,11 +8,13 @@ export type DataViewProps<T> = {
     label: string;
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
+    isItemSelected?: useDataViewPropReturn<T>['isItemSelected'];
     breakAt?: string;
     breakpoints?: useContainerBreakpointsProps['breakpoints'];
     footer?: useDataViewPropReturn<T>['footer'];
     isFetching?: boolean;
     variant?: TableProps['variant'];
     emptyState?: useDataViewPropReturn<T>['emptyState'];
+    selectionMode?: SelectionMode;
 };
-export declare const DataView: <T>({ pagination, isFetching, breakAt, breakpoints: customBreakpoints, footer, variant, emptyState, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataView: <T>({ pagination, isFetching, breakAt, breakpoints: customBreakpoints, footer, variant, emptyState, selectionMode, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/DataView/DataView.js

@@ -1,11 +1,11 @@
-import { jsxs as b, jsx as n } from "react/jsx-runtime";
-import { useRef as k, useMemo as C } from "react";
-import { PaginationControl as D } from "../PaginationControl/PaginationControl.js";
-import w from "./DataView.module.scss.js";
-import { DataTable as x } from "./DataTable/DataTable.js";
-import { DataCards as h } from "./DataCards/DataCards.js";
-import { useContainerBreakpoints as j } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-const N = ({
+import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { useRef as C, useMemo as D } from "react";
+import { PaginationControl as w } from "../PaginationControl/PaginationControl.js";
+import x from "./DataView.module.scss.js";
+import { DataTable as h } from "./DataTable/DataTable.js";
+import { DataCards as j } from "./DataCards/DataCards.js";
+import { useContainerBreakpoints as v } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+const P = ({
   pagination: t,
   isFetching: s,
   breakAt: a = "small",
@@ -13,28 +13,38 @@ const N = ({
   footer: m,
   variant: p,
   emptyState: c,
-  ...l
+  selectionMode: l,
+  ...f
 }) => {
-  const e = k(null), o = j({
+  const e = C(null), o = v({
     ref: e,
     breakpoints: i
-  }), f = o.length > 0, r = !o.includes(a), d = C(() => r ? h : x, [r]);
-  return /* @__PURE__ */ b(
+  }), d = o.length > 0, r = !o.includes(a), u = D(() => r ? j : h, [r]);
+  return /* @__PURE__ */ k(
     "div",
     {
       "data-testid": "data-view",
-      className: w.dataViewContainer,
-      ref: (u) => {
-        e.current = u;
+      className: x.dataViewContainer,
+      ref: (b) => {
+        e.current = b;
       },
       children: [
-        f && /* @__PURE__ */ n(d, { ...l, footer: m, variant: p, emptyState: c }),
-        t && /* @__PURE__ */ n(D, { ...t, isFetching: s })
+        d && /* @__PURE__ */ n(
+          u,
+          {
+            ...f,
+            footer: m,
+            variant: p,
+            emptyState: c,
+            selectionMode: l
+          }
+        ),
+        t && /* @__PURE__ */ n(w, { ...t, isFetching: s })
       ]
     }
   );
 };
 export {
-  N as DataView
+  P as DataView
 };
 //# sourceMappingURL=DataView.js.map

package/dist/components/Common/DataView/DataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport type { TableProps } from '../UI/Table/TableTypes'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { useContainerBreakpointsProps } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  breakAt?: string\n  breakpoints?: useContainerBreakpointsProps['breakpoints']\n  footer?: useDataViewPropReturn<T>['footer']\n  isFetching?: boolean\n  variant?: TableProps['variant']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  variant,\n  emptyState,\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n    breakpoints: customBreakpoints,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && (\n        <Component {...dataViewProps} footer={footer} variant={variant} emptyState={emptyState} />\n      )}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","variant","emptyState","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAyBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaL;AAAA,EAAA,CACd,GAGKS,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASR,CAAO,GAExCY,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,uBACEE,GAAA,EAAW,GAAGP,GAAe,QAAAH,GAAgB,SAAAC,GAAkB,YAAAC,GAAwB;AAAA,QAEzFN,KAAc,gBAAAqB,EAACC,GAAA,EAAmB,GAAGtB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}
+{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport type { TableProps } from '../UI/Table/TableTypes'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn, SelectionMode } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { useContainerBreakpointsProps } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  isItemSelected?: useDataViewPropReturn<T>['isItemSelected']\n  breakAt?: string\n  breakpoints?: useContainerBreakpointsProps['breakpoints']\n  footer?: useDataViewPropReturn<T>['footer']\n  isFetching?: boolean\n  variant?: TableProps['variant']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  selectionMode?: SelectionMode\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  variant,\n  emptyState,\n  selectionMode,\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n    breakpoints: customBreakpoints,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && (\n        <Component\n          {...dataViewProps}\n          footer={footer}\n          variant={variant}\n          emptyState={emptyState}\n          selectionMode={selectionMode}\n        />\n      )}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","variant","emptyState","selectionMode","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AA2BO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaN;AAAA,EAAA,CACd,GAGKU,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAAST,CAAO,GAExCa,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KACC,gBAAAS;AAAA,UAACP;AAAA,UAAA;AAAA,YACE,GAAGP;AAAA,YACJ,QAAAJ;AAAA,YACA,SAAAC;AAAA,YACA,YAAAC;AAAA,YACA,eAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHP,KAAc,gBAAAsB,EAACC,GAAA,EAAmB,GAAGvB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}

package/dist/components/Common/DataView/useDataView.d.ts

@@ -1,4 +1,5 @@
 import { PaginationControlProps } from '../PaginationControl/PaginationControlTypes';
+export type SelectionMode = 'multiple' | 'single';
 type DataViewColumn<T> = {
     key: keyof T;
     title: string | React.ReactNode;
@@ -15,9 +16,11 @@ export type useDataViewProp<T> = {
     pagination?: PaginationControlProps;
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
+    isItemSelected?: (item: T, index: number) => boolean;
     emptyState?: () => React.ReactNode;
     footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
+    selectionMode?: SelectionMode;
 };
 export type useDataViewPropReturn<T> = {
     pagination?: PaginationControlProps;
@@ -25,9 +28,11 @@ export type useDataViewPropReturn<T> = {
     columns: DataViewColumn<T>[];
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
+    isItemSelected?: (item: T, index: number) => boolean;
     emptyState?: () => React.ReactNode;
     footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
+    selectionMode?: SelectionMode;
 };
-export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, pagination, emptyState, footer, isFetching, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
+export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, isItemSelected, pagination, emptyState, footer, isFetching, selectionMode, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
 export {};

package/dist/components/Common/DataView/useDataView.js

@@ -1,24 +1,39 @@
-import { useMemo as a } from "react";
-const x = ({
+import { useMemo as D } from "react";
+const j = ({
   columns: r,
-  data: s,
-  itemMenu: o,
-  onSelect: w,
-  pagination: V,
-  emptyState: p,
-  footer: u,
-  isFetching: P
-}) => a(() => ({
-  pagination: V,
-  data: s,
+  data: w,
+  itemMenu: V,
+  onSelect: p,
+  isItemSelected: s,
+  pagination: u,
+  emptyState: P,
+  footer: a,
+  isFetching: o,
+  selectionMode: x
+}) => D(() => ({
+  pagination: u,
+  data: w,
   columns: r,
-  itemMenu: o,
-  onSelect: w,
-  emptyState: p,
-  footer: u,
-  isFetching: P
-}), [V, s, r, o, w, p, u, P]);
+  itemMenu: V,
+  onSelect: p,
+  isItemSelected: s,
+  emptyState: P,
+  footer: a,
+  isFetching: o,
+  selectionMode: x
+}), [
+  u,
+  w,
+  r,
+  V,
+  p,
+  s,
+  P,
+  a,
+  o,
+  x
+]);
 export {
-  x as useDataView
+  j as useDataView
 };
 //# sourceMappingURL=useDataView.js.map

package/dist/components/Common/DataView/useDataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\n// Type for footer object keys - allows data keys and custom string keys\ntype FooterKeys<T> = keyof T | string\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n}\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n  footer,\n  isFetching,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n      footer,\n      isFetching,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState, footer, isFetching])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","footer","isFetching","useMemo"],"mappings":";AAwCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAJ;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,IAED,CAACH,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,GAAYC,GAAQC,CAAU,CAAC;"}
+{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\nexport type SelectionMode = 'multiple' | 'single'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\ntype FooterKeys<T> = keyof T | string\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  isItemSelected?: (item: T, index: number) => boolean\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n  selectionMode?: SelectionMode\n}\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  isItemSelected?: (item: T, index: number) => boolean\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n  selectionMode?: SelectionMode\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  isItemSelected,\n  pagination,\n  emptyState,\n  footer,\n  isFetching,\n  selectionMode,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      isItemSelected,\n      emptyState,\n      footer,\n      isFetching,\n      selectionMode,\n    }\n  }, [\n    pagination,\n    data,\n    columns,\n    itemMenu,\n    onSelect,\n    isItemSelected,\n    emptyState,\n    footer,\n    isFetching,\n    selectionMode,\n  ])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","isItemSelected","pagination","emptyState","footer","isFetching","selectionMode","useMemo"],"mappings":";AA6CO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAL;AAAA,EACA,MAAAJ;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAE;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,IAED;AAAA,EACDJ;AAAA,EACAJ;AAAA,EACAD;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,CACD;"}

package/dist/components/Common/UI/Breadcrumbs/Breadcrumbs.js

@@ -1,9 +1,9 @@
 import { jsx as l } from "react/jsx-runtime";
 import h from "classnames";
+import { Flex as u } from "../../Flex/Flex.js";
 import { BreadcrumbsDefaults as k } from "./BreadcrumbsTypes.js";
 import r from "./Breadcrumbs.module.scss.js";
 import { applyMissingDefaults as x } from "../../../../helpers/applyMissingDefaults.js";
-import { Flex as u } from "../../Flex/Flex.js";
 function I(p) {
   const f = x(p, k), {
     className: s,

package/dist/components/Common/UI/Card/Card.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from './CardTypes';
-export declare function Card({ onSelect, children, menu, className }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ children, menu, className, action }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/UI/Card/Card.js

@@ -1,25 +1,15 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { useTranslation as n } from "react-i18next";
-import s from "classnames";
-import { Flex as i } from "../../Flex/Flex.js";
-import { Checkbox as c } from "../Checkbox/Checkbox.js";
-import m from "./Card.module.scss.js";
-function v({ onSelect: e, children: l, menu: o, className: a }) {
-  const { t } = n("common");
-  return /* @__PURE__ */ r("div", { className: s(m.cardContainer, a), "data-testid": "data-card", children: /* @__PURE__ */ d(i, { flexDirection: "row", gap: 8, children: [
-    e && /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-      c,
-      {
-        onChange: e,
-        label: t("card.selectRowLabel"),
-        shouldVisuallyHideLabel: !0
-      }
-    ) }),
-    /* @__PURE__ */ r("div", { style: { flexGrow: 1, flexShrink: 1 }, children: /* @__PURE__ */ r(i, { flexDirection: "column", gap: 16, children: l }) }),
-    o && /* @__PURE__ */ r("div", { children: o })
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import a from "classnames";
+import { Flex as d } from "../../Flex/Flex.js";
+import c from "./Card.module.scss.js";
+function x({ children: l, menu: i, className: o, action: e }) {
+  return /* @__PURE__ */ r("div", { className: a(c.cardContainer, o), "data-testid": "data-card", children: /* @__PURE__ */ t(d, { flexDirection: "row", gap: 8, children: [
+    e && /* @__PURE__ */ r("div", { children: e }),
+    /* @__PURE__ */ r("div", { style: { flexGrow: 1, flexShrink: 1 }, children: /* @__PURE__ */ r(d, { flexDirection: "column", gap: 16, children: l }) }),
+    i && /* @__PURE__ */ r("div", { children: i })
   ] }) });
 }
 export {
-  v as Card
+  x as Card
 };
 //# sourceMappingURL=Card.js.map

package/dist/components/Common/UI/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../../../src/components/Common/UI/Card/Card.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport cn from 'classnames'\nimport { Flex } from '../../Flex/Flex'\nimport { Checkbox } from '../Checkbox/Checkbox'\nimport styles from './Card.module.scss'\nimport { type CardProps } from '@/components/Common/UI/Card/CardTypes'\n\nexport function Card({ onSelect, children, menu, className }: CardProps) {\n  const { t } = useTranslation('common')\n\n  return (\n    <div className={cn(styles.cardContainer, className)} data-testid=\"data-card\">\n      <Flex flexDirection=\"row\" gap={8}>\n        {onSelect && (\n          <div>\n            <Checkbox\n              onChange={onSelect}\n              label={t('card.selectRowLabel')}\n              shouldVisuallyHideLabel\n            />\n          </div>\n        )}\n        <div style={{ flexGrow: 1, flexShrink: 1 }}>\n          <Flex flexDirection={'column'} gap={16}>\n            {children}\n          </Flex>\n        </div>\n        {menu && <div>{menu}</div>}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["Card","onSelect","children","menu","className","useTranslation","jsx","cn","styles","jsxs","Flex","Checkbox"],"mappings":";;;;;;AAOO,SAASA,EAAK,EAAE,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,WAAAC,KAAwB;AACvE,QAAM,EAAE,EAAA,IAAMC,EAAe,QAAQ;AAErC,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,eAAeJ,CAAS,GAAG,eAAY,aAC/D,UAAA,gBAAAK,EAACC,GAAA,EAAK,eAAc,OAAM,KAAK,GAC5B,UAAA;AAAA,IAAAT,uBACE,OAAA,EACC,UAAA,gBAAAK;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,UAAUV;AAAA,QACV,OAAO,EAAE,qBAAqB;AAAA,QAC9B,yBAAuB;AAAA,MAAA;AAAA,IAAA,GAE3B;AAAA,sBAED,OAAA,EAAI,OAAO,EAAE,UAAU,GAAG,YAAY,KACrC,UAAA,gBAAAK,EAACI,KAAK,eAAe,UAAU,KAAK,IACjC,UAAAR,GACH,GACF;AAAA,IACCC,KAAQ,gBAAAG,EAAC,OAAA,EAAK,UAAAH,EAAA,CAAK;AAAA,EAAA,EAAA,CACtB,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"Card.js","sources":["../../../../../src/components/Common/UI/Card/Card.tsx"],"sourcesContent":["import cn from 'classnames'\nimport { Flex } from '../../Flex/Flex'\nimport styles from './Card.module.scss'\nimport { type CardProps } from '@/components/Common/UI/Card/CardTypes'\n\nexport function Card({ children, menu, className, action }: CardProps) {\n  return (\n    <div className={cn(styles.cardContainer, className)} data-testid=\"data-card\">\n      <Flex flexDirection=\"row\" gap={8}>\n        {action && <div>{action}</div>}\n        <div style={{ flexGrow: 1, flexShrink: 1 }}>\n          <Flex flexDirection={'column'} gap={16}>\n            {children}\n          </Flex>\n        </div>\n        {menu && <div>{menu}</div>}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["Card","children","menu","className","action","jsx","cn","styles","jsxs","Flex"],"mappings":";;;;AAKO,SAASA,EAAK,EAAE,UAAAC,GAAU,MAAAC,GAAM,WAAAC,GAAW,QAAAC,KAAqB;AACrE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAGC,EAAO,eAAeJ,CAAS,GAAG,eAAY,aAC/D,UAAA,gBAAAK,EAACC,GAAA,EAAK,eAAc,OAAM,KAAK,GAC5B,UAAA;AAAA,IAAAL,KAAU,gBAAAC,EAAC,SAAK,UAAAD,EAAA,CAAO;AAAA,sBACvB,OAAA,EAAI,OAAO,EAAE,UAAU,GAAG,YAAY,KACrC,UAAA,gBAAAC,EAACI,KAAK,eAAe,UAAU,KAAK,IACjC,UAAAR,GACH,GACF;AAAA,IACCC,KAAQ,gBAAAG,EAAC,OAAA,EAAK,UAAAH,EAAA,CAAK;AAAA,EAAA,EAAA,CACtB,EAAA,CACF;AAEJ;"}

package/dist/components/Common/UI/Card/CardTypes.d.ts

@@ -1,9 +1,5 @@
 import { ReactNode } from 'react';
 export interface CardProps {
-    /**
-     * Callback function when the card is selected
-     */
-    onSelect?: (checked: boolean) => void;
     /**
      * Content to be displayed inside the card
      */
@@ -16,4 +12,8 @@ export interface CardProps {
      * CSS className to be applied
      */
     className?: string;
+    /**
+     * Optional action element (e.g., checkbox, radio) to be displayed on the left side
+     */
+    action?: ReactNode;
 }

package/dist/components/Common/UI/FileInput/FileInput.js

@@ -7,13 +7,13 @@ import { FileInputDefaults as K } from "./FileInputTypes.js";
 import n from "./FileInput.module.scss.js";
 import { applyMissingDefaults as L } from "../../../../helpers/applyMissingDefaults.js";
 import { FieldLayout as O } from "../../FieldLayout/FieldLayout.js";
+import { Flex as y } from "../../Flex/Flex.js";
 import { ButtonIcon as R } from "../Button/ButtonIcon.js";
 import W from "../../../../assets/icons/icon-trashcan.svg.js";
 import Z from "../../../../assets/icons/icon-file-outline.svg.js";
 import $ from "../../../../assets/icons/icon-file-pdf.svg.js";
 import H from "../../../../assets/icons/icon-file-png.svg.js";
 import V from "../../../../assets/icons/icon-file-jpg.svg.js";
-import { Flex as y } from "../../Flex/Flex.js";
 function Q(i) {
   return i === "application/pdf" ? $ : i === "image/png" ? H : i === "image/jpeg" || i === "image/jpg" ? V : Z;
 }

package/dist/components/Common/UI/ProgressBar/ProgressBar.js

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import c from "classnames";
-import n from "./ProgressBar.module.scss.js";
-import { Flex as p } from "../../Flex/Flex.js";
+import { Flex as n } from "../../Flex/Flex.js";
+import p from "./ProgressBar.module.scss.js";
 import { VisuallyHidden as d } from "../../VisuallyHidden/VisuallyHidden.js";
 function y({
   className: i,
@@ -13,9 +13,9 @@ function y({
   const s = Math.max(1, Math.min(m, e)), l = {
     "--g-progress-bar-width": `${s * 100 / e}%`
   };
-  return /* @__PURE__ */ t(p, { flexDirection: "column", children: [
+  return /* @__PURE__ */ t(n, { flexDirection: "column", children: [
     o && /* @__PURE__ */ r(o, {}),
-    /* @__PURE__ */ r("div", { className: c(n.root, i), style: l, children: /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r("progress", { "aria-label": a, value: s, max: e }) }) })
+    /* @__PURE__ */ r("div", { className: c(p.root, i), style: l, children: /* @__PURE__ */ r(d, { children: /* @__PURE__ */ r("progress", { "aria-label": a, value: s, max: e }) }) })
   ] });
 }
 export {

package/dist/components/Contractor/Profile/ContractorProfileForm.js

@@ -6,15 +6,15 @@ import { useComponentContext as D } from "../../../contexts/ComponentAdapter/use
 import { useI18n as I } from "../../../i18n/I18n.js";
 import { Form as O } from "../../Common/Form/Form.js";
 import { Grid as n } from "../../Common/Grid/Grid.js";
+import { Flex as x } from "../../Common/Flex/Flex.js";
 import { TextInputField as l } from "../../Common/Fields/TextInputField/TextInputField.js";
-import { NumberInputField as x } from "../../Common/Fields/NumberInputField/NumberInputField.js";
+import { NumberInputField as w } from "../../Common/Fields/NumberInputField/NumberInputField.js";
 import { RadioGroupField as d } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
-import { SwitchField as w } from "../../Common/Fields/SwitchField/SwitchField.js";
-import { DatePickerField as E } from "../../Common/Fields/DatePickerField/DatePickerField.js";
-import { usePlaceholderSSN as j, normalizeSSN as v } from "../../../helpers/ssn.js";
-import { usePlaceholderEin as G, normalizeEin as z } from "../../../helpers/federalEin.js";
-import { ContractorOnboardingStatus as A } from "../../../shared/constants.js";
-import { Flex as B } from "../../Common/Flex/Flex.js";
+import { SwitchField as E } from "../../Common/Fields/SwitchField/SwitchField.js";
+import { DatePickerField as j } from "../../Common/Fields/DatePickerField/DatePickerField.js";
+import { usePlaceholderSSN as v, normalizeSSN as G } from "../../../helpers/ssn.js";
+import { usePlaceholderEin as z, normalizeEin as A } from "../../../helpers/federalEin.js";
+import { ContractorOnboardingStatus as B } from "../../../shared/constants.js";
 function re({
   formMethods: u,
   handleSubmit: f,
@@ -33,7 +33,7 @@ function re({
 }) {
   const a = D();
   I("Contractor.Profile");
-  const { t: e } = T("Contractor.Profile"), q = j(t?.hasSsn ?? !1), P = G(t?.hasEin ?? !1);
+  const { t: e } = T("Contractor.Profile"), q = v(t?.hasSsn ?? !1), P = z(t?.hasEin ?? !1);
   return /* @__PURE__ */ i("section", { className: F, children: /* @__PURE__ */ i(S, { ...u, children: /* @__PURE__ */ r(O, { onSubmit: f, children: [
     /* @__PURE__ */ r(n, { gridTemplateColumns: "1fr", gap: 24, className: "mb-8", children: [
       /* @__PURE__ */ r("header", { children: [
@@ -42,12 +42,12 @@ function re({
       ] }),
       /* @__PURE__ */ i("div", { className: C.switchFieldContainer, children: /* @__PURE__ */ r(n, { gap: 16, children: [
         /* @__PURE__ */ i(
-          w,
+          E,
           {
             name: "selfOnboarding",
             label: e("fields.selfOnboarding.label"),
             description: e("fields.selfOnboarding.description"),
-            isDisabled: t && t.onboardingStatus !== A.ADMIN_ONBOARDING_INCOMPLETE
+            isDisabled: t && t.onboardingStatus !== B.ADMIN_ONBOARDING_INCOMPLETE
           }
         ),
         p && /* @__PURE__ */ i(
@@ -81,7 +81,7 @@ function re({
             name: "ssn",
             label: e("fields.ssn.label"),
             placeholder: q,
-            transform: v,
+            transform: G,
             isRequired: !0
           }
         )
@@ -101,7 +101,7 @@ function re({
             name: "ein",
             label: e("fields.ein.label"),
             placeholder: P,
-            transform: z,
+            transform: A,
             isRequired: !0
           }
         )
@@ -116,7 +116,7 @@ function re({
         }
       ),
       h && /* @__PURE__ */ i(
-        x,
+        w,
         {
           name: "hourlyRate",
           label: e("fields.hourlyRate.label"),
@@ -126,7 +126,7 @@ function re({
         }
       ),
       /* @__PURE__ */ i(
-        E,
+        j,
         {
           name: "startDate",
           label: e("fields.startDate.label"),
@@ -135,7 +135,7 @@ function re({
         }
       )
     ] }),
-    /* @__PURE__ */ i(B, { gap: 12, justifyContent: "flex-end", children: /* @__PURE__ */ i(a.Button, { type: "submit", variant: "primary", isDisabled: o.isSubmitting, children: o.isSubmitting ? e(s ? "buttons.updating" : "buttons.creating") : e(s ? "buttons.update" : "buttons.create") }) })
+    /* @__PURE__ */ i(x, { gap: 12, justifyContent: "flex-end", children: /* @__PURE__ */ i(a.Button, { type: "submit", variant: "primary", isDisabled: o.isSubmitting, children: o.isSubmitting ? e(s ? "buttons.updating" : "buttons.creating") : e(s ? "buttons.update" : "buttons.create") }) })
   ] }) }) });
 }
 export {

package/dist/components/InformationRequests/InformationRequestList/InformationRequestList.js

@@ -5,9 +5,9 @@ import { InformationRequestStatus as s, InformationRequestType as i } from "@gus
 import { BaseComponent as x } from "../../Base/Base.js";
 import "../../Base/useBase.js";
 import { useComponentContext as S } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as T, useI18n as k } from "../../../i18n/I18n.js";
-import { DataView as v } from "../../Common/DataView/DataView.js";
-import { useDataView as D } from "../../Common/DataView/useDataView.js";
+import { useComponentDictionary as T, useI18n as D } from "../../../i18n/I18n.js";
+import { DataView as k } from "../../Common/DataView/DataView.js";
+import { useDataView as v } from "../../Common/DataView/useDataView.js";
 import { FlexItem as E, Flex as u } from "../../Common/Flex/Flex.js";
 import "classnames";
 import { informationRequestEvents as C } from "../../../shared/constants.js";
@@ -18,14 +18,14 @@ function X(r) {
 }
 function A({
   companyId: r,
-  dictionary: d,
+  dictionary: f,
   filterByPayrollBlocking: m = !1,
-  onEvent: f
+  onEvent: y
 }) {
-  T("InformationRequests.InformationRequestList", d), k("InformationRequests.InformationRequestList");
-  const { t } = P("InformationRequests.InformationRequestList"), { Heading: R, Text: l, Button: y, Badge: c } = S(), { data: g } = w({
+  T("InformationRequests.InformationRequestList", f), D("InformationRequests.InformationRequestList");
+  const { t } = P("InformationRequests.InformationRequestList"), { Heading: R, Text: l, Button: g, Badge: c } = S(), { data: h } = w({
     companyUuid: r
-  }), h = (g.informationRequestList ?? []).filter((e) => {
+  }), p = (h.informationRequestList ?? []).filter((e) => {
     const o = e.status !== s.Approved;
     return m ? e.blockingPayroll && o : o;
   }), I = (e) => {
@@ -50,9 +50,9 @@ function A({
       default:
         return null;
     }
-  }, b = D({
-    data: h,
-    emptyState: () => /* @__PURE__ */ n(L, { title: t("emptyTableTitle") }),
+  }, b = v({
+    data: p,
+    emptyState: () => /* @__PURE__ */ n(L, { title: t("emptyTableTitle"), description: t("emptyTableDescription") }),
     columns: [
       {
         key: "type",
@@ -63,20 +63,20 @@ function A({
         key: "status",
         title: t("columns.status"),
         render: (e) => {
-          const o = q(e.status), p = !m && e.blockingPayroll;
-          return !o && !p ? null : /* @__PURE__ */ a(u, { gap: 8, alignItems: "center", children: [
+          const o = q(e.status), d = !m && e.blockingPayroll;
+          return !o && !d ? null : /* @__PURE__ */ a(u, { gap: 8, alignItems: "center", children: [
             o && /* @__PURE__ */ n(c, { status: o.badgeStatus, children: o.label }),
-            p && /* @__PURE__ */ n(c, { status: "error", children: t("status.payrollBlocking") })
+            d && /* @__PURE__ */ n(c, { status: "error", children: t("status.payrollBlocking") })
           ] });
         }
       }
     ],
     itemMenu: (e) => e.status === s.PendingResponse ? /* @__PURE__ */ n(
-      y,
+      g,
       {
         variant: "secondary",
         onClick: () => {
-          f(C.INFORMATION_REQUEST_RESPOND, {
+          y(C.INFORMATION_REQUEST_RESPOND, {
             requestId: e.uuid
           });
         },
@@ -87,9 +87,9 @@ function A({
   return /* @__PURE__ */ a(u, { flexDirection: "column", gap: 20, children: [
     /* @__PURE__ */ a(u, { flexDirection: "column", gap: 2, children: [
       /* @__PURE__ */ n(R, { as: "h2", styledAs: "h4", children: t("title") }),
-      /* @__PURE__ */ n(l, { children: t("description") })
+      p.length > 0 && /* @__PURE__ */ n(l, { children: t("description") })
     ] }),
-    /* @__PURE__ */ n(v, { ...b, label: t("title") })
+    /* @__PURE__ */ n(k, { ...b, label: t("title") })
   ] });
 }
 export {

package/dist/components/InformationRequests/InformationRequestList/InformationRequestList.js.map

@@ -1 +1 @@
-{"version":3,"file":"InformationRequestList.js","sources":["../../../../src/components/InformationRequests/InformationRequestList/InformationRequestList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport type { InformationRequest } from '@gusto/embedded-api/models/components/informationrequest'\nimport {\n  InformationRequestStatus,\n  InformationRequestType,\n} from '@gusto/embedded-api/models/components/informationrequest'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { EmptyData, Flex, FlexItem } from '@/components/Common'\nimport { informationRequestEvents } from '@/shared/constants'\nimport type { BadgeProps } from '@/components/Common/UI/Badge/BadgeTypes'\n\ninterface InformationRequestListProps extends BaseComponentInterface<'InformationRequests.InformationRequestList'> {\n  companyId: string\n  filterByPayrollBlocking?: boolean\n  onEvent: BaseComponentInterface['onEvent']\n}\n\nexport function InformationRequestList(props: InformationRequestListProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\ntype StatusMapping = {\n  label: string\n  badgeStatus: BadgeProps['status']\n} | null\n\nfunction Root({\n  companyId,\n  dictionary,\n  filterByPayrollBlocking = false,\n  onEvent,\n}: InformationRequestListProps) {\n  useComponentDictionary('InformationRequests.InformationRequestList', dictionary)\n  useI18n('InformationRequests.InformationRequestList')\n  const { t } = useTranslation('InformationRequests.InformationRequestList')\n  const { Heading, Text, Button, Badge } = useComponentContext()\n\n  const { data } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n\n  const informationRequests = data.informationRequestList ?? []\n\n  const visibleRequests = informationRequests.filter(request => {\n    const isNotApproved = request.status !== InformationRequestStatus.Approved\n\n    if (filterByPayrollBlocking) {\n      return request.blockingPayroll && isNotApproved\n    }\n\n    return isNotApproved\n  })\n\n  const getTypeLabel = (type: InformationRequest['type']): string => {\n    switch (type) {\n      case InformationRequestType.CompanyOnboarding:\n        return t('types.companyOnboarding')\n      case InformationRequestType.AccountProtection:\n        return t('types.accountProtection')\n      case InformationRequestType.PaymentRequest:\n        return t('types.paymentRequest')\n      case InformationRequestType.PaymentError:\n        return t('types.paymentError')\n      default:\n        return t('types.unknown')\n    }\n  }\n\n  const getStatusMapping = (status: InformationRequest['status']): StatusMapping => {\n    switch (status) {\n      case InformationRequestStatus.PendingResponse:\n        return { label: t('status.incomplete'), badgeStatus: 'info' }\n      case InformationRequestStatus.PendingReview:\n        return { label: t('status.underReview'), badgeStatus: 'warning' }\n      default:\n        return null\n    }\n  }\n\n  const dataViewProps = useDataView({\n    data: visibleRequests,\n    emptyState: () => <EmptyData title={t('emptyTableTitle')} />,\n    columns: [\n      {\n        key: 'type',\n        title: t('columns.type'),\n        render: request => (\n          <FlexItem flexGrow={1}>\n            <Text weight=\"medium\">{getTypeLabel(request.type)}</Text>\n          </FlexItem>\n        ),\n      },\n      {\n        key: 'status',\n        title: t('columns.status'),\n        render: request => {\n          const statusMapping = getStatusMapping(request.status)\n          const showPayrollBlockingBadge = !filterByPayrollBlocking && request.blockingPayroll\n\n          if (!statusMapping && !showPayrollBlockingBadge) {\n            return null\n          }\n\n          return (\n            <Flex gap={8} alignItems=\"center\">\n              {statusMapping && (\n                <Badge status={statusMapping.badgeStatus}>{statusMapping.label}</Badge>\n              )}\n              {showPayrollBlockingBadge && (\n                <Badge status=\"error\">{t('status.payrollBlocking')}</Badge>\n              )}\n            </Flex>\n          )\n        },\n      },\n    ],\n    itemMenu: request => {\n      const isPendingResponse = request.status === InformationRequestStatus.PendingResponse\n      if (!isPendingResponse) {\n        return null\n      }\n      return (\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(informationRequestEvents.INFORMATION_REQUEST_RESPOND, {\n              requestId: request.uuid,\n            })\n          }}\n        >\n          {t('cta.respond')}\n        </Button>\n      )\n    },\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={20}>\n      <Flex flexDirection=\"column\" gap={2}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('title')}\n        </Heading>\n        <Text>{t('description')}</Text>\n      </Flex>\n\n      <DataView {...dataViewProps} label={t('title')} />\n    </Flex>\n  )\n}\n"],"names":["InformationRequestList","props","jsx","BaseComponent","Root","companyId","dictionary","filterByPayrollBlocking","onEvent","useComponentDictionary","useI18n","useTranslation","Heading","Text","Button","Badge","useComponentContext","data","useInformationRequestsGetInformationRequestsSuspense","visibleRequests","request","isNotApproved","InformationRequestStatus","getTypeLabel","type","InformationRequestType","getStatusMapping","status","dataViewProps","useDataView","EmptyData","FlexItem","statusMapping","showPayrollBlockingBadge","jsxs","Flex","informationRequestEvents","DataView"],"mappings":";;;;;;;;;;;;;;;AAsBO,SAASA,EAAuBC,GAAoC;AACzE,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAOA,SAASG,EAAK;AAAA,EACZ,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,yBAAAC,IAA0B;AAAA,EAC1B,SAAAC;AACF,GAAgC;AAC9B,EAAAC,EAAuB,8CAA8CH,CAAU,GAC/EI,EAAQ,4CAA4C;AACpD,QAAM,EAAE,EAAA,IAAMC,EAAe,4CAA4C,GACnE,EAAE,SAAAC,GAAS,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,EAAA,IAAUC,EAAA,GAEnC,EAAE,MAAAC,EAAA,IAASC,EAAqD;AAAA,IACpE,aAAab;AAAA,EAAA,CACd,GAIKc,KAFsBF,EAAK,0BAA0B,CAAA,GAEf,OAAO,CAAAG,MAAW;AAC5D,UAAMC,IAAgBD,EAAQ,WAAWE,EAAyB;AAElE,WAAIf,IACKa,EAAQ,mBAAmBC,IAG7BA;AAAA,EACT,CAAC,GAEKE,IAAe,CAACC,MAA6C;AACjE,YAAQA,GAAA;AAAA,MACN,KAAKC,EAAuB;AAC1B,eAAO,EAAE,yBAAyB;AAAA,MACpC,KAAKA,EAAuB;AAC1B,eAAO,EAAE,yBAAyB;AAAA,MACpC,KAAKA,EAAuB;AAC1B,eAAO,EAAE,sBAAsB;AAAA,MACjC,KAAKA,EAAuB;AAC1B,eAAO,EAAE,oBAAoB;AAAA,MAC/B;AACE,eAAO,EAAE,eAAe;AAAA,IAAA;AAAA,EAE9B,GAEMC,IAAmB,CAACC,MAAwD;AAChF,YAAQA,GAAA;AAAA,MACN,KAAKL,EAAyB;AAC5B,eAAO,EAAE,OAAO,EAAE,mBAAmB,GAAG,aAAa,OAAA;AAAA,MACvD,KAAKA,EAAyB;AAC5B,eAAO,EAAE,OAAO,EAAE,oBAAoB,GAAG,aAAa,UAAA;AAAA,MACxD;AACE,eAAO;AAAA,IAAA;AAAA,EAEb,GAEMM,IAAgBC,EAAY;AAAA,IAChC,MAAMV;AAAA,IACN,YAAY,MAAM,gBAAAjB,EAAC4B,KAAU,OAAO,EAAE,iBAAiB,GAAG;AAAA,IAC1D,SAAS;AAAA,MACP;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,cAAc;AAAA,QACvB,QAAQ,CAAAV,MACN,gBAAAlB,EAAC6B,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAA7B,EAACW,GAAA,EAAK,QAAO,UAAU,UAAAU,EAAaH,EAAQ,IAAI,GAAE,EAAA,CACpD;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,gBAAgB;AAAA,QACzB,QAAQ,CAAAA,MAAW;AACjB,gBAAMY,IAAgBN,EAAiBN,EAAQ,MAAM,GAC/Ca,IAA2B,CAAC1B,KAA2Ba,EAAQ;AAErE,iBAAI,CAACY,KAAiB,CAACC,IACd,OAIP,gBAAAC,EAACC,GAAA,EAAK,KAAK,GAAG,YAAW,UACtB,UAAA;AAAA,YAAAH,uBACEjB,GAAA,EAAM,QAAQiB,EAAc,aAAc,YAAc,OAAM;AAAA,YAEhEC,KACC,gBAAA/B,EAACa,GAAA,EAAM,QAAO,SAAS,UAAA,EAAE,wBAAwB,EAAA,CAAE;AAAA,UAAA,GAEvD;AAAA,QAEJ;AAAA,MAAA;AAAA,IACF;AAAA,IAEF,UAAU,CAAAK,MACkBA,EAAQ,WAAWE,EAAyB,kBAKpE,gBAAApB;AAAA,MAACY;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,UAAAN,EAAQ4B,EAAyB,6BAA6B;AAAA,YAC5D,WAAWhB,EAAQ;AAAA,UAAA,CACpB;AAAA,QACH;AAAA,QAEC,YAAE,aAAa;AAAA,MAAA;AAAA,IAAA,IAXX;AAAA,EAcX,CACD;AAED,SACE,gBAAAc,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAjC,EAACU,KAAQ,IAAG,MAAK,UAAS,MACvB,UAAA,EAAE,OAAO,GACZ;AAAA,MACA,gBAAAV,EAACW,GAAA,EAAM,UAAA,EAAE,aAAa,EAAA,CAAE;AAAA,IAAA,GAC1B;AAAA,sBAECwB,GAAA,EAAU,GAAGT,GAAe,OAAO,EAAE,OAAO,EAAA,CAAG;AAAA,EAAA,GAClD;AAEJ;"}
+{"version":3,"file":"InformationRequestList.js","sources":["../../../../src/components/InformationRequests/InformationRequestList/InformationRequestList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useInformationRequestsGetInformationRequestsSuspense } from '@gusto/embedded-api/react-query/informationRequestsGetInformationRequests'\nimport type { InformationRequest } from '@gusto/embedded-api/models/components/informationrequest'\nimport {\n  InformationRequestStatus,\n  InformationRequestType,\n} from '@gusto/embedded-api/models/components/informationrequest'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { EmptyData, Flex, FlexItem } from '@/components/Common'\nimport { informationRequestEvents } from '@/shared/constants'\nimport type { BadgeProps } from '@/components/Common/UI/Badge/BadgeTypes'\n\ninterface InformationRequestListProps extends BaseComponentInterface<'InformationRequests.InformationRequestList'> {\n  companyId: string\n  filterByPayrollBlocking?: boolean\n  onEvent: BaseComponentInterface['onEvent']\n}\n\nexport function InformationRequestList(props: InformationRequestListProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\ntype StatusMapping = {\n  label: string\n  badgeStatus: BadgeProps['status']\n} | null\n\nfunction Root({\n  companyId,\n  dictionary,\n  filterByPayrollBlocking = false,\n  onEvent,\n}: InformationRequestListProps) {\n  useComponentDictionary('InformationRequests.InformationRequestList', dictionary)\n  useI18n('InformationRequests.InformationRequestList')\n  const { t } = useTranslation('InformationRequests.InformationRequestList')\n  const { Heading, Text, Button, Badge } = useComponentContext()\n\n  const { data } = useInformationRequestsGetInformationRequestsSuspense({\n    companyUuid: companyId,\n  })\n\n  const informationRequests = data.informationRequestList ?? []\n\n  const visibleRequests = informationRequests.filter(request => {\n    const isNotApproved = request.status !== InformationRequestStatus.Approved\n\n    if (filterByPayrollBlocking) {\n      return request.blockingPayroll && isNotApproved\n    }\n\n    return isNotApproved\n  })\n\n  const getTypeLabel = (type: InformationRequest['type']): string => {\n    switch (type) {\n      case InformationRequestType.CompanyOnboarding:\n        return t('types.companyOnboarding')\n      case InformationRequestType.AccountProtection:\n        return t('types.accountProtection')\n      case InformationRequestType.PaymentRequest:\n        return t('types.paymentRequest')\n      case InformationRequestType.PaymentError:\n        return t('types.paymentError')\n      default:\n        return t('types.unknown')\n    }\n  }\n\n  const getStatusMapping = (status: InformationRequest['status']): StatusMapping => {\n    switch (status) {\n      case InformationRequestStatus.PendingResponse:\n        return { label: t('status.incomplete'), badgeStatus: 'info' }\n      case InformationRequestStatus.PendingReview:\n        return { label: t('status.underReview'), badgeStatus: 'warning' }\n      default:\n        return null\n    }\n  }\n\n  const dataViewProps = useDataView({\n    data: visibleRequests,\n    emptyState: () => (\n      <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')} />\n    ),\n    columns: [\n      {\n        key: 'type',\n        title: t('columns.type'),\n        render: request => (\n          <FlexItem flexGrow={1}>\n            <Text weight=\"medium\">{getTypeLabel(request.type)}</Text>\n          </FlexItem>\n        ),\n      },\n      {\n        key: 'status',\n        title: t('columns.status'),\n        render: request => {\n          const statusMapping = getStatusMapping(request.status)\n          const showPayrollBlockingBadge = !filterByPayrollBlocking && request.blockingPayroll\n\n          if (!statusMapping && !showPayrollBlockingBadge) {\n            return null\n          }\n\n          return (\n            <Flex gap={8} alignItems=\"center\">\n              {statusMapping && (\n                <Badge status={statusMapping.badgeStatus}>{statusMapping.label}</Badge>\n              )}\n              {showPayrollBlockingBadge && (\n                <Badge status=\"error\">{t('status.payrollBlocking')}</Badge>\n              )}\n            </Flex>\n          )\n        },\n      },\n    ],\n    itemMenu: request => {\n      const isPendingResponse = request.status === InformationRequestStatus.PendingResponse\n      if (!isPendingResponse) {\n        return null\n      }\n      return (\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(informationRequestEvents.INFORMATION_REQUEST_RESPOND, {\n              requestId: request.uuid,\n            })\n          }}\n        >\n          {t('cta.respond')}\n        </Button>\n      )\n    },\n  })\n\n  return (\n    <Flex flexDirection=\"column\" gap={20}>\n      <Flex flexDirection=\"column\" gap={2}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('title')}\n        </Heading>\n        {visibleRequests.length > 0 && <Text>{t('description')}</Text>}\n      </Flex>\n\n      <DataView {...dataViewProps} label={t('title')} />\n    </Flex>\n  )\n}\n"],"names":["InformationRequestList","props","jsx","BaseComponent","Root","companyId","dictionary","filterByPayrollBlocking","onEvent","useComponentDictionary","useI18n","useTranslation","Heading","Text","Button","Badge","useComponentContext","data","useInformationRequestsGetInformationRequestsSuspense","visibleRequests","request","isNotApproved","InformationRequestStatus","getTypeLabel","type","InformationRequestType","getStatusMapping","status","dataViewProps","useDataView","EmptyData","FlexItem","statusMapping","showPayrollBlockingBadge","jsxs","Flex","informationRequestEvents","DataView"],"mappings":"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"}

package/dist/i18n/en/InformationRequests.InformationRequestList.json.js

@@ -1,20 +1,22 @@
-const o = "Information requests", e = "We need you to share some more information about your business. This info will be used to keep your business secure and ensure that our data about your company is correct. Please make sure to do this soon since it may otherwise impact your ability to run payroll.", t = "Tasks from Gusto", n = { type: "Type", status: "Status" }, s = { companyOnboarding: "Company Onboarding", accountProtection: "Account Protection", paymentRequest: "Payment Request", paymentError: "Payment Error", unknown: "Information Request" }, r = { incomplete: "Incomplete", underReview: "Under review", payrollBlocking: "Payroll blocking" }, a = { respond: "Respond" }, i = {
-  title: o,
-  description: e,
-  emptyTableTitle: t,
-  columns: n,
-  types: s,
-  status: r,
-  cta: a
+const e = "Information requests", t = "We need you to share some more information about your business. This info will be used to keep your business secure and ensure that our data about your company is correct. Please make sure to do this soon since it may otherwise impact your ability to run payroll.", o = "No information requests", n = "There are no information requests that need your response at this time.", s = { type: "Type", status: "Status" }, r = { companyOnboarding: "Company Onboarding", accountProtection: "Account Protection", paymentRequest: "Payment Request", paymentError: "Payment Error", unknown: "Information Request" }, a = { incomplete: "Incomplete", underReview: "Under review", payrollBlocking: "Payroll blocking" }, i = { respond: "Respond" }, u = {
+  title: e,
+  description: t,
+  emptyTableTitle: o,
+  emptyTableDescription: n,
+  columns: s,
+  types: r,
+  status: a,
+  cta: i
 };
 export {
-  n as columns,
-  a as cta,
-  i as default,
-  e as description,
-  t as emptyTableTitle,
-  r as status,
-  o as title,
-  s as types
+  s as columns,
+  i as cta,
+  u as default,
+  t as description,
+  n as emptyTableDescription,
+  o as emptyTableTitle,
+  a as status,
+  e as title,
+  r as types
 };
 //# sourceMappingURL=InformationRequests.InformationRequestList.json.js.map

package/dist/i18n/en/InformationRequests.InformationRequestList.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"InformationRequests.InformationRequestList.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"InformationRequests.InformationRequestList.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/types/i18next.d.ts

@@ -1302,6 +1302,7 @@ export interface InformationRequestsInformationRequestList{
 "title":string;
 "description":string;
 "emptyTableTitle":string;
+"emptyTableDescription":string;
 "columns":{
 "type":string;
 "status":string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gusto/embedded-react-sdk",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "homepage": "https://github.com/Gusto/embedded-react-sdk",
   "bugs": {
     "url": "https://github.com/Gusto/embedded-react-sdk/issues"