@gusto/embedded-react-sdk 0.37.0 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## 0.38.0
+
+### Features & Enhancements
+
+- Add date range filter to PayrollList and PayrollHistory
+- Add SDK Dev App for standalone component development
+- Add ManagementEmployeeList component and refactor EmployeeList
+- Add DetailViewLayout and EmployeeTable reusable components
+- Add icon prop to Button component
+- Update payroll breadcrumb labels
+- Disable past dates in Pay Schedule first pay date picker
+- Support prop-based field connection via formHookResult
+
+### Fixes
+
+- Fix breadcrumb navigation guards and post-submit flow
+- Fix off-cycle, dismissal, and transition payroll bugs (breadcrumb display, cancel transitions, date range handling, employee selection, PTO labeling)
+- Keep excluded employees visible in PayrollConfiguration after calculation
+- Fix gross-up modal layout and calculate button alignment
+- Fix payroll history sorting and pagination
+- Treat blank time off fields as zero to prevent raw API error
+- Hide direct deposit banner and ACH deadline messages for check-only payrolls
+- Keep start/end date fields visible for check-only payrolls
+- Sync contractor self-onboarding toggle with API status changes
+- Wire up missing dictionary overrides in Contractor components
+- Scope PaymentMethod loading spinner to the specific row being deleted
+- Respect withReimbursements prop in off-cycle payroll configuration
+- Update gross pay live when editing bonus and fixed compensation amounts
+- Prevent dropdown flicker on rapid blur-focus in MultiSelectComboBox
+- Fix NumberField onBlur value formatting
+- Fix compensation base validators and child support required attributes
+- Ensure all labels display in payroll receipt mobile layout
+- Reduce spacing between input section title and description
+- Clarify tax withholding rates copy
+
+### Chores & Maintenance
+
+- Add tests, Storybook stories, and documentation for new components
+- Add icon assets (umbrella, search-lg, user-02, edit-02)
+- Re-enable e2e tests on ubuntu-latest runners
+- Bump i18next from 25.10.4 to 26.0.3
+- Bump react-i18next from 16.6.6 to 17.0.2
+- Bump Storybook packages to 10.3.4
+- Bump various dev dependencies (sass-embedded, vite-plugin-svgr, @playwright/test, typescript-eslint, and others)
+
 ## 0.37.0
 
 ### Features & Enhancements

package/README.md

@@ -48,6 +48,9 @@ Live documentation is available at: https://docs.gusto.com/embedded-payroll/docs
   - [Employee Onboarding](docs/workflows-overview/employee-onboarding/employee-onboarding.md)
     - [Employee Self-Onboarding](docs/workflows-overview/employee-onboarding/employee-self-onboarding.md)
   - [Run Payroll](docs/workflows-overview/run-payroll.md)
+  - [Off-Cycle Payroll (Bonus & Correction)](docs/workflows-overview/off-cycle-payroll.md)
+  - [Dismissal Payroll](docs/workflows-overview/dismissal-payroll.md)
+  - [Transition Payroll](docs/workflows-overview/transition-payroll.md)
 - [Hooks (Experimental)](docs/hooks/hooks.md)
   - [useEmployeeDetailsForm](docs/hooks/useEmployeeDetailsForm.md)
   - [useCompensationForm](docs/hooks/useCompensationForm.md)

package/dist/UNSTABLE_Hooks.js

@@ -1,5 +1,5 @@
-import { useErrorHandling as e } from "./components/UNSTABLE_Hooks/useErrorHandling.js";
-import { collectErrors as m } from "./components/UNSTABLE_Hooks/collectErrors.js";
+import { useErrorHandling as e } from "./hooks/useErrorHandling.js";
+import { collectErrors as m } from "./helpers/collectErrors.js";
 import { CheckboxHookField as d } from "./components/UNSTABLE_Hooks/form/fields/CheckboxHookField.js";
 import { CompensationErrorCodes as i } from "./components/UNSTABLE_Hooks/hooks/useCompensationForm/compensationSchema.js";
 import { CompensationForm as f } from "./components/UNSTABLE_Hooks/hooks/useCompensationForm/CompensationForm.js";

package/dist/assets/icons/filter-funnel.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const o = ({
+  title: t,
+  titleId: r,
+  ...n
+}) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": r, ...n }, t ? /* @__PURE__ */ e.createElement("title", { id: r }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M5 10H15M2.5 5H17.5M7.5 15H12.5", stroke: "currentColor", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  o as default
+};
+//# sourceMappingURL=filter-funnel.svg.js.map

package/dist/assets/icons/filter-funnel.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-funnel.svg.js","sources":["../../../src/assets/icons/filter-funnel.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgFilterFunnel = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 20, height: 20, viewBox: \"0 0 20 20\", fill: \"none\", xmlns: \"http://www.w3.org/2000/svg\", \"aria-labelledby\": titleId, ...props }, title ? /* @__PURE__ */ React.createElement(\"title\", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement(\"path\", { d: \"M5 10H15M2.5 5H17.5M7.5 15H12.5\", stroke: \"currentColor\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgFilterFunnel;\n"],"names":["SvgFilterFunnel","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAkB,CAAC;AAAA,EACvB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,KAAWD,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,mCAAmC,QAAQ,gBAAgB,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/components/Base/createCompoundContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"createCompoundContext.js","sources":["../../../src/components/Base/createCompoundContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport function createCompoundContext<T>(contextName: string, defaultValue: T | null = null) {\n  const context = createContext<T | null>(defaultValue)\n\n  const useCompoundContext = () => {\n    const ctx = useContext(context)\n    if (!ctx) {\n      throw new Error(`${contextName} must be used within its Provider.`)\n    }\n    return ctx\n  }\n\n  return [useCompoundContext, context.Provider] as const\n}\n"],"names":["createCompoundContext","contextName","defaultValue","context","createContext","ctx","useContext"],"mappings":";AAEO,SAASA,EAAyBC,GAAqBC,IAAyB,MAAM;AAC3F,QAAMC,IAAUC,EAAwBF,CAAY;AAUpD,SAAO,CARoB,MAAM;AAC/B,UAAMG,IAAMC,EAAWH,CAAO;AAC9B,QAAI,CAACE;AACH,YAAM,IAAI,MAAM,GAAGJ,CAAW,oCAAoC;AAEpE,WAAOI;AAAA,EACT,GAE4BF,EAAQ,QAAQ;AAC9C;"}
+{"version":3,"file":"createCompoundContext.js","sources":["../../../src/components/Base/createCompoundContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport function createCompoundContext<T>(contextName: string, defaultValue: T | null = null) {\n  const context = createContext(defaultValue)\n\n  const useCompoundContext = () => {\n    const ctx = useContext(context)\n    if (!ctx) {\n      throw new Error(`${contextName} must be used within its Provider.`)\n    }\n    return ctx\n  }\n\n  return [useCompoundContext, context.Provider] as const\n}\n"],"names":["createCompoundContext","contextName","defaultValue","context","createContext","ctx","useContext"],"mappings":";AAEO,SAASA,EAAyBC,GAAqBC,IAAyB,MAAM;AAC3F,QAAMC,IAAUC,EAAcF,CAAY;AAU1C,SAAO,CARoB,MAAM;AAC/B,UAAMG,IAAMC,EAAWH,CAAO;AAC9B,QAAI,CAACE;AACH,YAAM,IAAI,MAAM,GAAGJ,CAAW,oCAAoC;AAEpE,WAAOI;AAAA,EACT,GAE4BF,EAAQ,QAAQ;AAC9C;"}

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

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

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

@@ -0,0 +1,17 @@
+interface DateRangeFilterProps {
+    startDate: Date | null;
+    endDate: Date | null;
+    onStartDateChange: (date: Date | null) => void;
+    onEndDateChange: (date: Date | null) => void;
+    onClear: () => void;
+    startDateLabel: string;
+    endDateLabel: string;
+    applyLabel: string;
+    resetLabel: string;
+    triggerLabel: string;
+    isFilterActive: boolean;
+    maxEndDate?: Date;
+    minStartDate?: Date;
+}
+export declare const DateRangeFilter: ({ startDate, endDate, onStartDateChange, onEndDateChange, onClear, startDateLabel, endDateLabel, applyLabel, resetLabel, triggerLabel, isFilterActive, maxEndDate, minStartDate, }: DateRangeFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Common/DateRangeFilter/DateRangeFilter.js

@@ -0,0 +1,100 @@
+import { jsxs as f, Fragment as H, jsx as n } from "react/jsx-runtime";
+import { useState as v, useRef as M, useCallback as t, useMemo as _ } from "react";
+import { Popover as q, Dialog as w } from "react-aria-components";
+import k from "./DateRangeFilter.module.scss.js";
+import { Flex as z } from "../Flex/Flex.js";
+import { useComponentContext as E } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useTheme as G } from "../../../contexts/ThemeProvider/useTheme.js";
+/* empty css                       */
+import $ from "../../../assets/icons/filter-funnel.svg.js";
+const b = (e) => e.toLocaleDateString("en-US", { month: "short", day: "numeric" }), nn = ({
+  startDate: e,
+  endDate: o,
+  onStartDateChange: d,
+  onEndDateChange: h,
+  onClear: i,
+  startDateLabel: s,
+  endDateLabel: c,
+  applyLabel: B,
+  resetLabel: F,
+  triggerLabel: g,
+  isFilterActive: R,
+  maxEndDate: O,
+  minStartDate: S
+}) => {
+  const { Button: u, ButtonIcon: j, DateRangePicker: N } = E(), { container: P } = G(), [p, l] = v(!1), [r, x] = v(null), m = M(null), y = t(() => {
+    x(e && o ? { start: e, end: o } : null), l(!0);
+  }, [e, o]), U = t(() => {
+    l(!1);
+  }, []), V = t(() => {
+    r ? (d(r.start), h(r.end)) : i(), l(!1);
+  }, [r, d, h, i]), I = t(() => {
+    i(), l(!1);
+  }, [i]), T = t((a) => {
+    x(a);
+  }, []), C = _(() => !R || !e || !o ? null : `${b(e)} – ${b(o)}`, [R, e, o]), A = C ? /* @__PURE__ */ n(
+    u,
+    {
+      buttonRef: m,
+      "aria-label": g,
+      "aria-haspopup": "dialog",
+      "aria-expanded": p,
+      onClick: y,
+      variant: "secondary",
+      icon: /* @__PURE__ */ n($, {}),
+      className: k.triggerButton,
+      children: C
+    }
+  ) : /* @__PURE__ */ n(
+    j,
+    {
+      buttonRef: m,
+      "aria-label": g,
+      "aria-haspopup": "dialog",
+      "aria-expanded": p,
+      onClick: y,
+      variant: "tertiary",
+      children: /* @__PURE__ */ n($, {})
+    }
+  );
+  return /* @__PURE__ */ f(H, { children: [
+    A,
+    /* @__PURE__ */ n(
+      q,
+      {
+        UNSTABLE_portalContainer: P.current,
+        isOpen: p,
+        onOpenChange: (a) => {
+          a || U();
+        },
+        triggerRef: m,
+        placement: "bottom end",
+        offset: 8,
+        shouldUpdatePosition: !0,
+        children: /* @__PURE__ */ n(w, { "aria-label": `${s} – ${c}`, children: /* @__PURE__ */ f("div", { className: k.popoverContent, children: [
+          /* @__PURE__ */ n(
+            N,
+            {
+              label: `${s} – ${c}`,
+              shouldVisuallyHideLabel: !0,
+              value: r,
+              onChange: T,
+              startDateLabel: s,
+              endDateLabel: c,
+              minValue: S,
+              maxValue: O
+            }
+          ),
+          /* @__PURE__ */ f(z, { gap: 8, justifyContent: "flex-end", children: [
+            /* @__PURE__ */ n(u, { variant: "tertiary", onClick: I, children: F }),
+            /* @__PURE__ */ n(u, { variant: "primary", onClick: V, children: B })
+          ] })
+        ] }) })
+      }
+    )
+  ] });
+};
+export {
+  nn as DateRangeFilter
+};
+//# sourceMappingURL=DateRangeFilter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeFilter.js","sources":["../../../../src/components/Common/DateRangeFilter/DateRangeFilter.tsx"],"sourcesContent":["import { useState, useRef, useCallback, useMemo } from 'react'\nimport { Dialog, Popover } from 'react-aria-components'\nimport styles from './DateRangeFilter.module.scss'\nimport type { DateRange } from '@/components/Common/UI/DateRangePicker/DateRangePickerTypes'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useTheme } from '@/contexts/ThemeProvider'\nimport FilterFunnelIcon from '@/assets/icons/filter-funnel.svg?react'\n\nconst formatFilterDate = (date: Date): string =>\n  date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n\ninterface DateRangeFilterProps {\n  startDate: Date | null\n  endDate: Date | null\n  onStartDateChange: (date: Date | null) => void\n  onEndDateChange: (date: Date | null) => void\n  onClear: () => void\n  startDateLabel: string\n  endDateLabel: string\n  applyLabel: string\n  resetLabel: string\n  triggerLabel: string\n  isFilterActive: boolean\n  maxEndDate?: Date\n  minStartDate?: Date\n}\n\nexport const DateRangeFilter = ({\n  startDate,\n  endDate,\n  onStartDateChange,\n  onEndDateChange,\n  onClear,\n  startDateLabel,\n  endDateLabel,\n  applyLabel,\n  resetLabel,\n  triggerLabel,\n  isFilterActive,\n  maxEndDate,\n  minStartDate,\n}: DateRangeFilterProps) => {\n  const { Button, ButtonIcon, DateRangePicker } = useComponentContext()\n  const { container } = useTheme()\n\n  const [isOpen, setIsOpen] = useState(false)\n  const [draftRange, setDraftRange] = useState<DateRange | null>(null)\n  const triggerRef = useRef<HTMLButtonElement>(null)\n\n  const handleOpen = useCallback(() => {\n    const range = startDate && endDate ? { start: startDate, end: endDate } : null\n    setDraftRange(range)\n    setIsOpen(true)\n  }, [startDate, endDate])\n\n  const handleClose = useCallback(() => {\n    setIsOpen(false)\n  }, [])\n\n  const handleApply = useCallback(() => {\n    if (draftRange) {\n      onStartDateChange(draftRange.start)\n      onEndDateChange(draftRange.end)\n    } else {\n      onClear()\n    }\n    setIsOpen(false)\n  }, [draftRange, onStartDateChange, onEndDateChange, onClear])\n\n  const handleReset = useCallback(() => {\n    onClear()\n    setIsOpen(false)\n  }, [onClear])\n\n  const handleRangeChange = useCallback((range: DateRange | null) => {\n    setDraftRange(range)\n  }, [])\n\n  const filterDateLabel = useMemo(() => {\n    if (!isFilterActive || !startDate || !endDate) return null\n    return `${formatFilterDate(startDate)} – ${formatFilterDate(endDate)}`\n  }, [isFilterActive, startDate, endDate])\n\n  const triggerButton = filterDateLabel ? (\n    <Button\n      buttonRef={triggerRef}\n      aria-label={triggerLabel}\n      aria-haspopup=\"dialog\"\n      aria-expanded={isOpen}\n      onClick={handleOpen}\n      variant=\"secondary\"\n      icon={<FilterFunnelIcon />}\n      className={styles.triggerButton}\n    >\n      {filterDateLabel}\n    </Button>\n  ) : (\n    <ButtonIcon\n      buttonRef={triggerRef}\n      aria-label={triggerLabel}\n      aria-haspopup=\"dialog\"\n      aria-expanded={isOpen}\n      onClick={handleOpen}\n      variant=\"tertiary\"\n    >\n      <FilterFunnelIcon />\n    </ButtonIcon>\n  )\n\n  return (\n    <>\n      {triggerButton}\n\n      <Popover\n        UNSTABLE_portalContainer={container.current}\n        isOpen={isOpen}\n        onOpenChange={open => {\n          if (!open) handleClose()\n        }}\n        triggerRef={triggerRef}\n        placement=\"bottom end\"\n        offset={8}\n        shouldUpdatePosition\n      >\n        <Dialog aria-label={`${startDateLabel} – ${endDateLabel}`}>\n          <div className={styles.popoverContent}>\n            <DateRangePicker\n              label={`${startDateLabel} – ${endDateLabel}`}\n              shouldVisuallyHideLabel\n              value={draftRange}\n              onChange={handleRangeChange}\n              startDateLabel={startDateLabel}\n              endDateLabel={endDateLabel}\n              minValue={minStartDate}\n              maxValue={maxEndDate}\n            />\n\n            <Flex gap={8} justifyContent=\"flex-end\">\n              <Button variant=\"tertiary\" onClick={handleReset}>\n                {resetLabel}\n              </Button>\n              <Button variant=\"primary\" onClick={handleApply}>\n                {applyLabel}\n              </Button>\n            </Flex>\n          </div>\n        </Dialog>\n      </Popover>\n    </>\n  )\n}\n"],"names":["formatFilterDate","date","DateRangeFilter","startDate","endDate","onStartDateChange","onEndDateChange","onClear","startDateLabel","endDateLabel","applyLabel","resetLabel","triggerLabel","isFilterActive","maxEndDate","minStartDate","Button","ButtonIcon","DateRangePicker","useComponentContext","container","useTheme","isOpen","setIsOpen","useState","draftRange","setDraftRange","triggerRef","useRef","handleOpen","useCallback","handleClose","handleApply","handleReset","handleRangeChange","range","filterDateLabel","useMemo","triggerButton","jsx","FilterFunnelIcon","styles","jsxs","Fragment","Popover","open","Dialog","Flex"],"mappings":";;;;;;;;;AASA,MAAMA,IAAmB,CAACC,MACxBA,EAAK,mBAAmB,SAAS,EAAE,OAAO,SAAS,KAAK,WAAW,GAkBxDC,KAAkB,CAAC;AAAA,EAC9B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AACF,MAA4B;AAC1B,QAAM,EAAE,QAAAC,GAAQ,YAAAC,GAAY,iBAAAC,EAAA,IAAoBC,EAAA,GAC1C,EAAE,WAAAC,EAAA,IAAcC,EAAA,GAEhB,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAYC,CAAa,IAAIF,EAA2B,IAAI,GAC7DG,IAAaC,EAA0B,IAAI,GAE3CC,IAAaC,EAAY,MAAM;AAEnC,IAAAJ,EADcvB,KAAaC,IAAU,EAAE,OAAOD,GAAW,KAAKC,MAAY,IACvD,GACnBmB,EAAU,EAAI;AAAA,EAChB,GAAG,CAACpB,GAAWC,CAAO,CAAC,GAEjB2B,IAAcD,EAAY,MAAM;AACpC,IAAAP,EAAU,EAAK;AAAA,EACjB,GAAG,CAAA,CAAE,GAECS,IAAcF,EAAY,MAAM;AACpC,IAAIL,KACFpB,EAAkBoB,EAAW,KAAK,GAClCnB,EAAgBmB,EAAW,GAAG,KAE9BlB,EAAA,GAEFgB,EAAU,EAAK;AAAA,EACjB,GAAG,CAACE,GAAYpB,GAAmBC,GAAiBC,CAAO,CAAC,GAEtD0B,IAAcH,EAAY,MAAM;AACpC,IAAAvB,EAAA,GACAgB,EAAU,EAAK;AAAA,EACjB,GAAG,CAAChB,CAAO,CAAC,GAEN2B,IAAoBJ,EAAY,CAACK,MAA4B;AACjE,IAAAT,EAAcS,CAAK;AAAA,EACrB,GAAG,CAAA,CAAE,GAECC,IAAkBC,EAAQ,MAC1B,CAACxB,KAAkB,CAACV,KAAa,CAACC,IAAgB,OAC/C,GAAGJ,EAAiBG,CAAS,CAAC,MAAMH,EAAiBI,CAAO,CAAC,IACnE,CAACS,GAAgBV,GAAWC,CAAO,CAAC,GAEjCkC,IAAgBF,IACpB,gBAAAG;AAAA,IAACvB;AAAA,IAAA;AAAA,MACC,WAAWW;AAAA,MACX,cAAYf;AAAA,MACZ,iBAAc;AAAA,MACd,iBAAeU;AAAA,MACf,SAASO;AAAA,MACT,SAAQ;AAAA,MACR,wBAAOW,GAAA,EAAiB;AAAA,MACxB,WAAWC,EAAO;AAAA,MAEjB,UAAAL;AAAA,IAAA;AAAA,EAAA,IAGH,gBAAAG;AAAA,IAACtB;AAAA,IAAA;AAAA,MACC,WAAWU;AAAA,MACX,cAAYf;AAAA,MACZ,iBAAc;AAAA,MACd,iBAAeU;AAAA,MACf,SAASO;AAAA,MACT,SAAQ;AAAA,MAER,4BAACW,GAAA,CAAA,CAAiB;AAAA,IAAA;AAAA,EAAA;AAItB,SACE,gBAAAE,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAL;AAAA,IAED,gBAAAC;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,0BAA0BxB,EAAU;AAAA,QACpC,QAAAE;AAAA,QACA,cAAc,CAAAuB,MAAQ;AACpB,UAAKA,KAAMd,EAAA;AAAA,QACb;AAAA,QACA,YAAAJ;AAAA,QACA,WAAU;AAAA,QACV,QAAQ;AAAA,QACR,sBAAoB;AAAA,QAEpB,UAAA,gBAAAY,EAACO,GAAA,EAAO,cAAY,GAAGtC,CAAc,MAAMC,CAAY,IACrD,UAAA,gBAAAiC,EAAC,OAAA,EAAI,WAAWD,EAAO,gBACrB,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAACrB;AAAA,YAAA;AAAA,cACC,OAAO,GAAGV,CAAc,MAAMC,CAAY;AAAA,cAC1C,yBAAuB;AAAA,cACvB,OAAOgB;AAAA,cACP,UAAUS;AAAA,cACV,gBAAA1B;AAAA,cACA,cAAAC;AAAA,cACA,UAAUM;AAAA,cACV,UAAUD;AAAA,YAAA;AAAA,UAAA;AAAA,UAGZ,gBAAA4B,EAACK,GAAA,EAAK,KAAK,GAAG,gBAAe,YAC3B,UAAA;AAAA,YAAA,gBAAAR,EAACvB,GAAA,EAAO,SAAQ,YAAW,SAASiB,GACjC,UAAAtB,GACH;AAAA,8BACCK,GAAA,EAAO,SAAQ,WAAU,SAASgB,GAChC,UAAAtB,EAAA,CACH;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,EAAA,CACF,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/Common/DateRangeFilter/DateRangeFilter.module.scss.js

@@ -0,0 +1,10 @@
+const t = "_triggerButton_151is_1", o = "_popoverContent_151is_6", e = {
+  triggerButton: t,
+  popoverContent: o
+};
+export {
+  e as default,
+  o as popoverContent,
+  t as triggerButton
+};
+//# sourceMappingURL=DateRangeFilter.module.scss.js.map

package/dist/components/Common/DateRangeFilter/DateRangeFilter.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeFilter.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,2 @@
+import { DetailViewLayoutProps } from './DetailViewLayoutTypes';
+export declare function DetailViewLayout({ title, subtitle, onBack, backLabel, actions, tabs, selectedTabId, onTabChange, children, className, }: DetailViewLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/DetailViewLayout/DetailViewLayoutTypes.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { TabProps } from '../UI/Tabs/TabsTypes';
+type BackNavigation = {
+    onBack: () => void;
+    backLabel: string;
+} | {
+    onBack?: never;
+    backLabel?: never;
+};
+type TabbedContent = {
+    tabs: TabProps[];
+    selectedTabId: string;
+    onTabChange: (id: string) => void;
+    children?: never;
+} | {
+    tabs?: never;
+    selectedTabId?: never;
+    onTabChange?: never;
+    children: ReactNode;
+};
+type BaseDetailViewLayoutProps = {
+    /**
+     * Page title displayed as a heading
+     */
+    title: string;
+    /**
+     * Optional subtitle displayed below the title
+     */
+    subtitle?: string;
+    /**
+     * Action buttons rendered in the page header (right-aligned on desktop)
+     */
+    actions?: ReactNode;
+    /**
+     * Optional CSS class name applied to the root element
+     */
+    className?: string;
+};
+export type DetailViewLayoutProps = BaseDetailViewLayoutProps & BackNavigation & TabbedContent;
+export {};

package/dist/components/Common/DetailViewLayout/index.d.ts

@@ -0,0 +1,3 @@
+import "./types/i18next.d.ts"
+export { DetailViewLayout } from './DetailViewLayout';
+export type { DetailViewLayoutProps } from './DetailViewLayoutTypes';

package/dist/components/Common/Fields/CheckboxField/CheckboxField.js

@@ -1,35 +1,37 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useField as b } from "../hooks/useField.js";
-import { useComponentContext as h } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-const P = ({
+import { jsx as b } from "react/jsx-runtime";
+import { useField as h } from "../hooks/useField.js";
+import { useComponentContext as k } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+const R = ({
   rules: o,
   defaultValue: e,
   name: t,
-  errorMessage: n,
-  isRequired: r,
-  onChange: m,
-  transform: s,
-  description: p,
-  onBlur: c,
-  inputRef: i,
-  FieldComponent: C,
-  ...x
+  control: n,
+  errorMessage: r,
+  isRequired: m,
+  onChange: s,
+  transform: p,
+  description: c,
+  onBlur: i,
+  inputRef: C,
+  FieldComponent: x,
+  ...d
 }) => {
-  const d = h(), f = b({
+  const f = k(), l = h({
     name: t,
+    control: n,
     rules: o,
     defaultValue: e,
-    errorMessage: n,
-    isRequired: r,
-    onChange: m,
-    transform: s,
-    description: p,
-    onBlur: c,
-    inputRef: i
-  }), l = C ?? d.Checkbox;
-  return /* @__PURE__ */ u(l, { ...x, ...f });
+    errorMessage: r,
+    isRequired: m,
+    onChange: s,
+    transform: p,
+    description: c,
+    onBlur: i,
+    inputRef: C
+  }), u = x ?? f.Checkbox;
+  return /* @__PURE__ */ b(u, { ...d, ...l });
 };
 export {
-  P as CheckboxField
+  R as CheckboxField
 };
 //# sourceMappingURL=CheckboxField.js.map

package/dist/components/Common/Fields/CheckboxField/CheckboxField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.js","sources":["../../../../../src/components/Common/Fields/CheckboxField/CheckboxField.tsx"],"sourcesContent":["import type { ComponentType } from 'react'\nimport { useField, type UseFieldProps } from '@/components/Common/Fields/hooks/useField'\nimport type { CheckboxProps } from '@/components/Common/UI/Checkbox/CheckboxTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport interface CheckboxFieldProps\n  extends Omit<CheckboxProps, 'name' | 'value' | 'isInvalid'>, UseFieldProps<boolean> {\n  FieldComponent?: ComponentType<CheckboxProps>\n}\n\nexport const CheckboxField: React.FC<CheckboxFieldProps> = ({\n  rules,\n  defaultValue,\n  name,\n  errorMessage,\n  isRequired,\n  onChange,\n  transform,\n  description,\n  onBlur,\n  inputRef,\n  FieldComponent,\n  ...checkboxProps\n}: CheckboxFieldProps) => {\n  const Components = useComponentContext()\n  const fieldProps = useField({\n    name,\n    rules,\n    defaultValue,\n    errorMessage,\n    isRequired,\n    onChange,\n    transform,\n    description,\n    onBlur,\n    inputRef,\n  })\n\n  const RenderComponent = FieldComponent ?? Components.Checkbox\n  return <RenderComponent {...checkboxProps} {...fieldProps} />\n}\n"],"names":["CheckboxField","rules","defaultValue","name","errorMessage","isRequired","onChange","transform","description","onBlur","inputRef","FieldComponent","checkboxProps","Components","useComponentContext","fieldProps","useField","RenderComponent","jsx"],"mappings":";;;AAUO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACL,MAA0B;AACxB,QAAMC,IAAaC,EAAA,GACbC,IAAaC,EAAS;AAAA,IAC1B,MAAAb;AAAA,IACA,OAAAF;AAAA,IACA,cAAAC;AAAA,IACA,cAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAEKO,IAAkBN,KAAkBE,EAAW;AACrD,SAAO,gBAAAK,EAACD,GAAA,EAAiB,GAAGL,GAAgB,GAAGG,EAAA,CAAY;AAC7D;"}
+{"version":3,"file":"CheckboxField.js","sources":["../../../../../src/components/Common/Fields/CheckboxField/CheckboxField.tsx"],"sourcesContent":["import type { ComponentType } from 'react'\nimport { useField, type UseFieldProps } from '@/components/Common/Fields/hooks/useField'\nimport type { CheckboxProps } from '@/components/Common/UI/Checkbox/CheckboxTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport interface CheckboxFieldProps\n  extends Omit<CheckboxProps, 'name' | 'value' | 'isInvalid'>, UseFieldProps<boolean> {\n  FieldComponent?: ComponentType<CheckboxProps>\n}\n\nexport const CheckboxField: React.FC<CheckboxFieldProps> = ({\n  rules,\n  defaultValue,\n  name,\n  control,\n  errorMessage,\n  isRequired,\n  onChange,\n  transform,\n  description,\n  onBlur,\n  inputRef,\n  FieldComponent,\n  ...checkboxProps\n}: CheckboxFieldProps) => {\n  const Components = useComponentContext()\n  const fieldProps = useField({\n    name,\n    control,\n    rules,\n    defaultValue,\n    errorMessage,\n    isRequired,\n    onChange,\n    transform,\n    description,\n    onBlur,\n    inputRef,\n  })\n\n  const RenderComponent = FieldComponent ?? Components.Checkbox\n  return <RenderComponent {...checkboxProps} {...fieldProps} />\n}\n"],"names":["CheckboxField","rules","defaultValue","name","control","errorMessage","isRequired","onChange","transform","description","onBlur","inputRef","FieldComponent","checkboxProps","Components","useComponentContext","fieldProps","useField","RenderComponent","jsx"],"mappings":";;;AAUO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGC;AACL,MAA0B;AACxB,QAAMC,IAAaC,EAAA,GACbC,IAAaC,EAAS;AAAA,IAC1B,MAAAd;AAAA,IACA,SAAAC;AAAA,IACA,OAAAH;AAAA,IACA,cAAAC;AAAA,IACA,cAAAG;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAEKO,IAAkBN,KAAkBE,EAAW;AACrD,SAAO,gBAAAK,EAACD,GAAA,EAAiB,GAAGL,GAAgB,GAAGG,EAAA,CAAY;AAC7D;"}

package/dist/components/Common/Fields/CheckboxGroupField/CheckboxGroupField.d.ts

@@ -6,5 +6,5 @@ export interface CheckboxGroupFieldProps<TValue> extends Omit<CheckboxGroupProps
     options: GenericCheckboxGroupOption<TValue>[];
     convertValueToString?: (value: TValue) => string;
 }
-export declare const CheckboxGroupField: <TValue = string>({ rules, defaultValue, name, errorMessage, isRequired, onChange: onChangeFromProps, transform, options, description, onBlur, inputRef, convertValueToString, ...checkboxGroupProps }: CheckboxGroupFieldProps<TValue>) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroupField: <TValue = string>({ rules, defaultValue, name, control, errorMessage, isRequired, onChange: onChangeFromProps, transform, options, description, onBlur, inputRef, convertValueToString, ...checkboxGroupProps }: CheckboxGroupFieldProps<TValue>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Common/Fields/CheckboxGroupField/CheckboxGroupField.js

@@ -1,42 +1,44 @@
-import { jsx as x } from "react/jsx-runtime";
-import { useField as F } from "../hooks/useField.js";
-import { useComponentContext as G } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useStringifyGenericFieldValueArray as b } from "../hooks/useStringifyGenericFieldValue.js";
-const v = ({
+import { jsx as F } from "react/jsx-runtime";
+import { useField as G } from "../hooks/useField.js";
+import { useComponentContext as b } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useStringifyGenericFieldValueArray as k } from "../hooks/useStringifyGenericFieldValue.js";
+const A = ({
   rules: o,
   defaultValue: e,
   name: r,
-  errorMessage: n,
-  isRequired: t,
-  onChange: i,
-  transform: s,
-  options: p,
-  description: m,
-  onBlur: u,
-  inputRef: C,
-  convertValueToString: c,
-  ...l
+  control: n,
+  errorMessage: t,
+  isRequired: i,
+  onChange: s,
+  transform: p,
+  options: m,
+  description: u,
+  onBlur: C,
+  inputRef: c,
+  convertValueToString: l,
+  ...a
 }) => {
-  const a = G(), { value: f, onChange: d, ...g } = F({
+  const f = b(), { value: d, onChange: g, ...h } = G({
     name: r,
+    control: n,
     rules: o,
     defaultValue: e,
-    errorMessage: n,
-    isRequired: t,
-    onChange: i,
-    transform: s,
-    description: m,
-    onBlur: u,
-    inputRef: C
-  }), h = b({
-    options: p,
-    value: f,
-    onChange: d,
-    convertValueToString: c
+    errorMessage: t,
+    isRequired: i,
+    onChange: s,
+    transform: p,
+    description: u,
+    onBlur: C,
+    inputRef: c
+  }), x = k({
+    options: m,
+    value: d,
+    onChange: g,
+    convertValueToString: l
   });
-  return /* @__PURE__ */ x(a.CheckboxGroup, { ...l, ...g, ...h });
+  return /* @__PURE__ */ F(f.CheckboxGroup, { ...a, ...h, ...x });
 };
 export {
-  v as CheckboxGroupField
+  A as CheckboxGroupField
 };
 //# sourceMappingURL=CheckboxGroupField.js.map

package/dist/components/Common/Fields/CheckboxGroupField/CheckboxGroupField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroupField.js","sources":["../../../../../src/components/Common/Fields/CheckboxGroupField/CheckboxGroupField.tsx"],"sourcesContent":["import { useField, type UseFieldProps } from '@/components/Common/Fields/hooks/useField'\nimport type { CheckboxGroupProps } from '@/components/Common/UI/CheckboxGroup/CheckboxGroupTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { CheckboxGroupOption } from '@/components/Common/UI/CheckboxGroup/CheckboxGroupTypes'\nimport {\n  useStringifyGenericFieldValueArray,\n  type OptionWithGenericValue,\n} from '@/components/Common/Fields/hooks/useStringifyGenericFieldValue'\n\ntype GenericCheckboxGroupOption<TValue> = OptionWithGenericValue<TValue, CheckboxGroupOption>\n\nexport interface CheckboxGroupFieldProps<TValue>\n  extends\n    Omit<CheckboxGroupProps, 'value' | 'onChange' | 'options' | 'isInvalid'>,\n    UseFieldProps<TValue[]> {\n  options: GenericCheckboxGroupOption<TValue>[]\n  convertValueToString?: (value: TValue) => string\n}\n\nexport const CheckboxGroupField = <TValue = string,>({\n  rules,\n  defaultValue,\n  name,\n  errorMessage,\n  isRequired,\n  onChange: onChangeFromProps,\n  transform,\n  options,\n  description,\n  onBlur,\n  inputRef,\n  convertValueToString,\n  ...checkboxGroupProps\n}: CheckboxGroupFieldProps<TValue>) => {\n  const Components = useComponentContext()\n  const { value, onChange, ...fieldProps } = useField({\n    name,\n    rules,\n    defaultValue,\n    errorMessage,\n    isRequired,\n    onChange: onChangeFromProps,\n    transform,\n    description,\n    onBlur,\n    inputRef,\n  })\n\n  const stringFieldProps = useStringifyGenericFieldValueArray<TValue, CheckboxGroupOption>({\n    options,\n    value,\n    onChange,\n    convertValueToString,\n  })\n\n  return <Components.CheckboxGroup {...checkboxGroupProps} {...fieldProps} {...stringFieldProps} />\n}\n"],"names":["CheckboxGroupField","rules","defaultValue","name","errorMessage","isRequired","onChangeFromProps","transform","options","description","onBlur","inputRef","convertValueToString","checkboxGroupProps","Components","useComponentContext","value","onChange","fieldProps","useField","stringFieldProps","useStringifyGenericFieldValueArray","jsx"],"mappings":";;;;AAmBO,MAAMA,IAAqB,CAAmB;AAAA,EACnD,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,GAAGC;AACL,MAAuC;AACrC,QAAMC,IAAaC,EAAA,GACb,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,IAAeC,EAAS;AAAA,IAClD,MAAAhB;AAAA,IACA,OAAAF;AAAA,IACA,cAAAC;AAAA,IACA,cAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAUC;AAAA,IACV,WAAAC;AAAA,IACA,aAAAE;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAEKS,IAAmBC,EAAgE;AAAA,IACvF,SAAAb;AAAA,IACA,OAAAQ;AAAA,IACA,UAAAC;AAAA,IACA,sBAAAL;AAAA,EAAA,CACD;AAED,SAAO,gBAAAU,EAACR,EAAW,eAAX,EAA0B,GAAGD,GAAqB,GAAGK,GAAa,GAAGE,GAAkB;AACjG;"}
+{"version":3,"file":"CheckboxGroupField.js","sources":["../../../../../src/components/Common/Fields/CheckboxGroupField/CheckboxGroupField.tsx"],"sourcesContent":["import { useField, type UseFieldProps } from '@/components/Common/Fields/hooks/useField'\nimport type { CheckboxGroupProps } from '@/components/Common/UI/CheckboxGroup/CheckboxGroupTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { CheckboxGroupOption } from '@/components/Common/UI/CheckboxGroup/CheckboxGroupTypes'\nimport {\n  useStringifyGenericFieldValueArray,\n  type OptionWithGenericValue,\n} from '@/components/Common/Fields/hooks/useStringifyGenericFieldValue'\n\ntype GenericCheckboxGroupOption<TValue> = OptionWithGenericValue<TValue, CheckboxGroupOption>\n\nexport interface CheckboxGroupFieldProps<TValue>\n  extends\n    Omit<CheckboxGroupProps, 'value' | 'onChange' | 'options' | 'isInvalid'>,\n    UseFieldProps<TValue[]> {\n  options: GenericCheckboxGroupOption<TValue>[]\n  convertValueToString?: (value: TValue) => string\n}\n\nexport const CheckboxGroupField = <TValue = string,>({\n  rules,\n  defaultValue,\n  name,\n  control,\n  errorMessage,\n  isRequired,\n  onChange: onChangeFromProps,\n  transform,\n  options,\n  description,\n  onBlur,\n  inputRef,\n  convertValueToString,\n  ...checkboxGroupProps\n}: CheckboxGroupFieldProps<TValue>) => {\n  const Components = useComponentContext()\n  const { value, onChange, ...fieldProps } = useField({\n    name,\n    control,\n    rules,\n    defaultValue,\n    errorMessage,\n    isRequired,\n    onChange: onChangeFromProps,\n    transform,\n    description,\n    onBlur,\n    inputRef,\n  })\n\n  const stringFieldProps = useStringifyGenericFieldValueArray<TValue, CheckboxGroupOption>({\n    options,\n    value,\n    onChange,\n    convertValueToString,\n  })\n\n  return <Components.CheckboxGroup {...checkboxGroupProps} {...fieldProps} {...stringFieldProps} />\n}\n"],"names":["CheckboxGroupField","rules","defaultValue","name","control","errorMessage","isRequired","onChangeFromProps","transform","options","description","onBlur","inputRef","convertValueToString","checkboxGroupProps","Components","useComponentContext","value","onChange","fieldProps","useField","stringFieldProps","useStringifyGenericFieldValueArray","jsx"],"mappings":";;;;AAmBO,MAAMA,IAAqB,CAAmB;AAAA,EACnD,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAUC;AAAA,EACV,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,GAAGC;AACL,MAAuC;AACrC,QAAMC,IAAaC,EAAA,GACb,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,IAAeC,EAAS;AAAA,IAClD,MAAAjB;AAAA,IACA,SAAAC;AAAA,IACA,OAAAH;AAAA,IACA,cAAAC;AAAA,IACA,cAAAG;AAAA,IACA,YAAAC;AAAA,IACA,UAAUC;AAAA,IACV,WAAAC;AAAA,IACA,aAAAE;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAEKS,IAAmBC,EAAgE;AAAA,IACvF,SAAAb;AAAA,IACA,OAAAQ;AAAA,IACA,UAAAC;AAAA,IACA,sBAAAL;AAAA,EAAA,CACD;AAED,SAAO,gBAAAU,EAACR,EAAW,eAAX,EAA0B,GAAGD,GAAqB,GAAGK,GAAa,GAAGE,GAAkB;AACjG;"}