@gusto/embedded-react-sdk 0.14.1 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # Changelog
 
+## 0.16.0
+
+### Features & Enhancements
+
+- Add breadcrumb navigation to payroll flow component
+- Add CTA (Call to Action) functionality to payroll flow breadcrumbs
+- Add translation support for pay schedule names
+- Enable multiple resource file loading in useI18n hook
+
+### Fixes
+
+- Memoize employee UUID array and switch to API filtering for better performance
+
+### Chores & Maintenance
+
+- Add missing run payroll documentation
+- Bump react-i18next from 16.0.1 to 16.1.0
+- Bump eslint from 9.37.0 to 9.38.0
+- Bump vite from 6.4.0 to 6.4.1
+- Bump typescript-eslint from 8.46.1 to 8.46.2
+- Bump lint-staged from 16.2.4 to 16.2.5
+- Bump msw from 2.11.5 to 2.11.6
+
+## 0.15.0
+
+### Features & Enhancements
+
+- Remove deprecated payroll flow and unstable prefix - Payroll components are now stable
+- Implement pagination for payroll configuration
+- Add logic to hide skip payroll functionality
+- Add emptyState back to DataView component
+- Sort payroll config by API instead of client for better performance
+
+### Fixes
+
+- Update PayrollHistory to include correct amount
+- Fix twoPercentShareholder form integration and error handling
+
+### Refactoring
+
+- Refactor pagination control to uncontrolled component
+
+### Chores & Maintenance
+
+- Upgrade embedded client to latest 0.8.1
+- Bump dompurify from 3.2.7 to 3.3.0
+- Bump react-hook-form from 7.64.0 to 7.65.0
+- Bump vite from 6.3.6 to 6.4.0
+- Bump typescript-eslint from 8.46.0 to 8.46.1
+- Bump eslint-plugin-react-refresh from 0.4.23 to 0.4.24
+
 ## 0.14.1
 
 ### Fixes

package/dist/assets/icons/feature-icon-check.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const l = ({
+  title: t,
+  titleId: r,
+  ...a
+}) => /* @__PURE__ */ e.createElement("svg", { width: 52, height: 52, viewBox: "0 0 52 52", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": r, ...a }, t ? /* @__PURE__ */ e.createElement("title", { id: r }, t) : null, /* @__PURE__ */ e.createElement("g", { filter: "url(#filter0_dii_11785_12181)" }, /* @__PURE__ */ e.createElement("path", { d: "M2 11C2 5.47715 6.47715 1 12 1H40C45.5229 1 50 5.47715 50 11V39C50 44.5229 45.5228 49 40 49H12C6.47715 49 2 44.5228 2 39V11Z", fill: "white" }), /* @__PURE__ */ e.createElement("path", { d: "M12 1.5H40C45.2467 1.5 49.5 5.75329 49.5 11V39C49.5 44.2467 45.2467 48.5 40 48.5H12C6.7533 48.5 2.5 44.2467 2.5 39V11C2.5 5.7533 6.75329 1.5 12 1.5Z", stroke: "#D5D7DA" }), /* @__PURE__ */ e.createElement("path", { d: "M34 19L23 30L18 25", stroke: "black", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ e.createElement("defs", null, /* @__PURE__ */ e.createElement("filter", { id: "filter0_dii_11785_12181", x: 0, y: 0, width: 52, height: 52, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ e.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), /* @__PURE__ */ e.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ e.createElement("feOffset", { dy: 1 }), /* @__PURE__ */ e.createElement("feGaussianBlur", { stdDeviation: 1 }), /* @__PURE__ */ e.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_11785_12181" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_11785_12181", result: "shape" }), /* @__PURE__ */ e.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ e.createElement("feOffset", { dy: -2 }), /* @__PURE__ */ e.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: -1, k3: 1 }), /* @__PURE__ */ e.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect2_innerShadow_11785_12181" }), /* @__PURE__ */ e.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ e.createElement("feMorphology", { radius: 1, operator: "erode", in: "SourceAlpha", result: "effect3_innerShadow_11785_12181" }), /* @__PURE__ */ e.createElement("feOffset", null), /* @__PURE__ */ e.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: -1, k3: 1 }), /* @__PURE__ */ e.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.18 0" }), /* @__PURE__ */ e.createElement("feBlend", { mode: "normal", in2: "effect2_innerShadow_11785_12181", result: "effect3_innerShadow_11785_12181" }))));
+export {
+  l as default
+};
+//# sourceMappingURL=feature-icon-check.svg.js.map

package/dist/assets/icons/feature-icon-check.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-icon-check.svg.js","sources":["../../../src/assets/icons/feature-icon-check.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgFeatureIconCheck = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 52, height: 52, viewBox: \"0 0 52 52\", 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(\"g\", { filter: \"url(#filter0_dii_11785_12181)\" }, /* @__PURE__ */ React.createElement(\"path\", { d: \"M2 11C2 5.47715 6.47715 1 12 1H40C45.5229 1 50 5.47715 50 11V39C50 44.5229 45.5228 49 40 49H12C6.47715 49 2 44.5228 2 39V11Z\", fill: \"white\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M12 1.5H40C45.2467 1.5 49.5 5.75329 49.5 11V39C49.5 44.2467 45.2467 48.5 40 48.5H12C6.7533 48.5 2.5 44.2467 2.5 39V11C2.5 5.7533 6.75329 1.5 12 1.5Z\", stroke: \"#D5D7DA\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M34 19L23 30L18 25\", stroke: \"black\", strokeWidth: 2, strokeLinecap: \"round\", strokeLinejoin: \"round\" })), /* @__PURE__ */ React.createElement(\"defs\", null, /* @__PURE__ */ React.createElement(\"filter\", { id: \"filter0_dii_11785_12181\", x: 0, y: 0, width: 52, height: 52, filterUnits: \"userSpaceOnUse\", colorInterpolationFilters: \"sRGB\" }, /* @__PURE__ */ React.createElement(\"feFlood\", { floodOpacity: 0, result: \"BackgroundImageFix\" }), /* @__PURE__ */ React.createElement(\"feColorMatrix\", { in: \"SourceAlpha\", type: \"matrix\", values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\", result: \"hardAlpha\" }), /* @__PURE__ */ React.createElement(\"feOffset\", { dy: 1 }), /* @__PURE__ */ React.createElement(\"feGaussianBlur\", { stdDeviation: 1 }), /* @__PURE__ */ React.createElement(\"feColorMatrix\", { type: \"matrix\", values: \"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0\" }), /* @__PURE__ */ React.createElement(\"feBlend\", { mode: \"normal\", in2: \"BackgroundImageFix\", result: \"effect1_dropShadow_11785_12181\" }), /* @__PURE__ */ React.createElement(\"feBlend\", { mode: \"normal\", in: \"SourceGraphic\", in2: \"effect1_dropShadow_11785_12181\", result: \"shape\" }), /* @__PURE__ */ React.createElement(\"feColorMatrix\", { in: \"SourceAlpha\", type: \"matrix\", values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\", result: \"hardAlpha\" }), /* @__PURE__ */ React.createElement(\"feOffset\", { dy: -2 }), /* @__PURE__ */ React.createElement(\"feComposite\", { in2: \"hardAlpha\", operator: \"arithmetic\", k2: -1, k3: 1 }), /* @__PURE__ */ React.createElement(\"feColorMatrix\", { type: \"matrix\", values: \"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.05 0\" }), /* @__PURE__ */ React.createElement(\"feBlend\", { mode: \"normal\", in2: \"shape\", result: \"effect2_innerShadow_11785_12181\" }), /* @__PURE__ */ React.createElement(\"feColorMatrix\", { in: \"SourceAlpha\", type: \"matrix\", values: \"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\", result: \"hardAlpha\" }), /* @__PURE__ */ React.createElement(\"feMorphology\", { radius: 1, operator: \"erode\", in: \"SourceAlpha\", result: \"effect3_innerShadow_11785_12181\" }), /* @__PURE__ */ React.createElement(\"feOffset\", null), /* @__PURE__ */ React.createElement(\"feComposite\", { in2: \"hardAlpha\", operator: \"arithmetic\", k2: -1, k3: 1 }), /* @__PURE__ */ React.createElement(\"feColorMatrix\", { type: \"matrix\", values: \"0 0 0 0 0.0392157 0 0 0 0 0.0496732 0 0 0 0 0.0705882 0 0 0 0.18 0\" }), /* @__PURE__ */ React.createElement(\"feBlend\", { mode: \"normal\", in2: \"effect2_innerShadow_11785_12181\", result: \"effect3_innerShadow_11785_12181\" }))));\nexport default SvgFeatureIconCheck;\n"],"names":["SvgFeatureIconCheck","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAsB,CAAC;AAAA,EAC3B,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,EAAO,GAAID,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,KAAK,EAAE,QAAQ,gCAA+B,GAAoB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,gIAAgI,MAAM,QAAO,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,wJAAwJ,QAAQ,UAAS,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,sBAAsB,QAAQ,SAAS,aAAa,GAAG,eAAe,SAAS,gBAAgB,QAAO,CAAE,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,MAAsB,gBAAAA,EAAM,cAAc,UAAU,EAAE,IAAI,2BAA2B,GAAG,GAAG,GAAG,GAAG,OAAO,IAAI,QAAQ,IAAI,aAAa,kBAAkB,2BAA2B,OAAM,GAAoB,gBAAAA,EAAM,cAAc,WAAW,EAAE,cAAc,GAAG,QAAQ,qBAAoB,CAAE,GAAmB,gBAAAA,EAAM,cAAc,iBAAiB,EAAE,IAAI,eAAe,MAAM,UAAU,QAAQ,6CAA6C,QAAQ,YAAW,CAAE,GAAmB,gBAAAA,EAAM,cAAc,YAAY,EAAE,IAAI,GAAG,GAAmB,gBAAAA,EAAM,cAAc,kBAAkB,EAAE,cAAc,EAAC,CAAE,GAAmB,gBAAAA,EAAM,cAAc,iBAAiB,EAAE,MAAM,UAAU,QAAQ,qEAAoE,CAAE,GAAmB,gBAAAA,EAAM,cAAc,WAAW,EAAE,MAAM,UAAU,KAAK,sBAAsB,QAAQ,iCAAgC,CAAE,GAAmB,gBAAAA,EAAM,cAAc,WAAW,EAAE,MAAM,UAAU,IAAI,iBAAiB,KAAK,kCAAkC,QAAQ,QAAO,CAAE,GAAmB,gBAAAA,EAAM,cAAc,iBAAiB,EAAE,IAAI,eAAe,MAAM,UAAU,QAAQ,6CAA6C,QAAQ,YAAW,CAAE,GAAmB,gBAAAA,EAAM,cAAc,YAAY,EAAE,IAAI,GAAE,CAAE,GAAmB,gBAAAA,EAAM,cAAc,eAAe,EAAE,KAAK,aAAa,UAAU,cAAc,IAAI,IAAI,IAAI,EAAC,CAAE,GAAmB,gBAAAA,EAAM,cAAc,iBAAiB,EAAE,MAAM,UAAU,QAAQ,qEAAoE,CAAE,GAAmB,gBAAAA,EAAM,cAAc,WAAW,EAAE,MAAM,UAAU,KAAK,SAAS,QAAQ,kCAAiC,CAAE,GAAmB,gBAAAA,EAAM,cAAc,iBAAiB,EAAE,IAAI,eAAe,MAAM,UAAU,QAAQ,6CAA6C,QAAQ,YAAW,CAAE,GAAmB,gBAAAA,EAAM,cAAc,gBAAgB,EAAE,QAAQ,GAAG,UAAU,SAAS,IAAI,eAAe,QAAQ,kCAAiC,CAAE,GAAmB,gBAAAA,EAAM,cAAc,YAAY,IAAI,GAAmB,gBAAAA,EAAM,cAAc,eAAe,EAAE,KAAK,aAAa,UAAU,cAAc,IAAI,IAAI,IAAI,EAAC,CAAE,GAAmB,gBAAAA,EAAM,cAAc,iBAAiB,EAAE,MAAM,UAAU,QAAQ,qEAAoE,CAAE,GAAmB,gBAAAA,EAAM,cAAc,WAAW,EAAE,MAAM,UAAU,KAAK,mCAAmC,QAAQ,kCAAiC,CAAE,CAAC,CAAC,CAAC;"}

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

@@ -13,5 +13,6 @@ export type DataViewProps<T> = {
     footer?: useDataViewPropReturn<T>['footer'];
     isFetching?: boolean;
     variant?: TableProps['variant'];
+    emptyState?: useDataViewPropReturn<T>['emptyState'];
 };
-export declare const DataView: <T>({ pagination, isFetching, breakAt, breakpoints: customBreakpoints, footer, variant, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataView: <T>({ pagination, isFetching, breakAt, breakpoints: customBreakpoints, footer, variant, emptyState, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,39 +1,40 @@
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { useRef as b, useMemo as k } from "react";
-import { PaginationControl as C } from "../PaginationControl/PaginationControl.js";
-import D from "./DataView.module.scss.js";
-import { DataTable as w } from "./DataTable/DataTable.js";
-import { DataCards as x } from "./DataCards/DataCards.js";
-import { useContainerBreakpoints as h } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-const y = ({
+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 = ({
   pagination: t,
   isFetching: s,
   breakAt: a = "small",
   breakpoints: i,
   footer: m,
   variant: p,
-  ...c
+  emptyState: c,
+  ...l
 }) => {
-  const e = b(null), o = h({
+  const e = k(null), o = j({
     ref: e,
     breakpoints: i
-  }), l = o.length > 0, r = !o.includes(a), f = k(() => r ? x : w, [r]);
-  return /* @__PURE__ */ u(
+  }), f = o.length > 0, r = !o.includes(a), d = C(() => r ? h : x, [r]);
+  return /* @__PURE__ */ b(
     "div",
     {
       "data-testid": "data-view",
-      className: D.dataViewContainer,
-      ref: (d) => {
-        e.current = d;
+      className: w.dataViewContainer,
+      ref: (u) => {
+        e.current = u;
       },
       children: [
-        l && /* @__PURE__ */ n(f, { ...c, footer: m, variant: p }),
-        t && /* @__PURE__ */ n(C, { ...t, isFetching: s })
+        f && /* @__PURE__ */ n(d, { ...l, footer: m, variant: p, emptyState: c }),
+        t && /* @__PURE__ */ n(D, { ...t, isFetching: s })
       ]
     }
   );
 };
 export {
-  y as DataView
+  N 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}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  variant,\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 && <Component {...dataViewProps} footer={footer} variant={variant} />}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","variant","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AAwBO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaJ;AAAA,EAAA,CACd,GAGKQ,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASP,CAAO,GAExCW,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,KAAyB,gBAAAS,EAACP,GAAA,EAAW,GAAGP,GAAe,QAAAF,GAAgB,SAAAC,GAAkB;AAAA,QACzFL,KAAc,gBAAAoB,EAACC,GAAA,EAAmB,GAAGrB,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 } 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;"}

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

@@ -0,0 +1,2 @@
+import { FlowBreadcrumbsProps } from './FlowBreadcrumbsTypes';
+export declare function FlowBreadcrumbs({ breadcrumbs, currentBreadcrumbId, onEvent, }: FlowBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/FlowBreadcrumbs/FlowBreadcrumbs.js

@@ -0,0 +1,52 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useTranslation as f } from "react-i18next";
+import { useMemo as c } from "react";
+import { useComponentContext as u } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { componentEvents as B } from "../../../shared/constants.js";
+import { useI18n as C } from "../../../i18n/I18n.js";
+function V({
+  breadcrumbs: o,
+  currentBreadcrumbId: l,
+  onEvent: a
+}) {
+  const { Breadcrumbs: i } = u(), s = o.reduce(
+    (e, n) => (n.namespace && e.push(n.namespace), e),
+    []
+  );
+  C(s);
+  const { t } = f(s), p = c(
+    () => o.map((e) => {
+      const n = e.namespace ? t(e.label, {
+        ns: e.namespace,
+        defaultValue: e.label,
+        ...e.variables
+      }) : t(e.label, {
+        defaultValue: e.label,
+        ...e.variables
+      });
+      return {
+        id: e.id,
+        label: n
+      };
+    }),
+    [o, t]
+  );
+  return /* @__PURE__ */ r(
+    i,
+    {
+      breadcrumbs: p,
+      currentBreadcrumbId: l,
+      onClick: (e) => {
+        const n = o.find((m) => m.id === e);
+        a && n && a(B.BREADCRUMB_NAVIGATE, {
+          key: e,
+          onNavigate: n.onNavigate
+        });
+      }
+    }
+  );
+}
+export {
+  V as FlowBreadcrumbs
+};
+//# sourceMappingURL=FlowBreadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowBreadcrumbs.js","sources":["../../../../src/components/Common/FlowBreadcrumbs/FlowBreadcrumbs.tsx"],"sourcesContent":["import type { CustomTypeOptions } from 'i18next'\nimport { useTranslation } from 'react-i18next'\nimport { useMemo } from 'react'\nimport type { FlowBreadcrumbsProps } from './FlowBreadcrumbsTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents } from '@/shared/constants'\nimport { useI18n } from '@/i18n/I18n'\n\nexport function FlowBreadcrumbs({\n  breadcrumbs,\n  currentBreadcrumbId,\n  onEvent,\n}: FlowBreadcrumbsProps) {\n  const { Breadcrumbs } = useComponentContext()\n  const namespaces = breadcrumbs.reduce<Array<keyof CustomTypeOptions['resources']>>(\n    (acc, breadcrumb) => {\n      if (breadcrumb.namespace) {\n        acc.push(breadcrumb.namespace as keyof CustomTypeOptions['resources'])\n      }\n      return acc\n    },\n    [],\n  )\n  useI18n(namespaces)\n  const { t } = useTranslation(namespaces)\n\n  const parsedBreadcrumbs = useMemo(\n    () =>\n      breadcrumbs.map(breadcrumb => {\n        const translatedLabel = breadcrumb.namespace\n          ? (t(breadcrumb.label, {\n              ns: breadcrumb.namespace,\n              defaultValue: breadcrumb.label,\n              ...breadcrumb.variables,\n            } as never) as unknown as string)\n          : (t(breadcrumb.label, {\n              defaultValue: breadcrumb.label,\n              ...breadcrumb.variables,\n            } as never) as unknown as string)\n        return {\n          id: breadcrumb.id,\n          label: translatedLabel,\n        }\n      }),\n    [breadcrumbs, t],\n  )\n\n  const handleBreadcrumbClick = (breadcrumbId: string) => {\n    const breadcrumb = breadcrumbs.find(breadcrumb => breadcrumb.id === breadcrumbId)\n    if (onEvent && breadcrumb) {\n      onEvent(componentEvents.BREADCRUMB_NAVIGATE, {\n        key: breadcrumbId,\n        onNavigate: breadcrumb.onNavigate,\n      })\n    }\n  }\n\n  return (\n    <Breadcrumbs\n      breadcrumbs={parsedBreadcrumbs}\n      currentBreadcrumbId={currentBreadcrumbId}\n      onClick={handleBreadcrumbClick}\n    />\n  )\n}\n"],"names":["FlowBreadcrumbs","breadcrumbs","currentBreadcrumbId","onEvent","Breadcrumbs","useComponentContext","namespaces","acc","breadcrumb","useI18n","useTranslation","parsedBreadcrumbs","useMemo","translatedLabel","jsx","breadcrumbId","componentEvents"],"mappings":";;;;;;AAQO,SAASA,EAAgB;AAAA,EAC9B,aAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,SAAAC;AACF,GAAyB;AACvB,QAAM,EAAE,aAAAC,EAAA,IAAgBC,EAAA,GAClBC,IAAaL,EAAY;AAAA,IAC7B,CAACM,GAAKC,OACAA,EAAW,aACbD,EAAI,KAAKC,EAAW,SAAiD,GAEhED;AAAA,IAET,CAAA;AAAA,EAAC;AAEH,EAAAE,EAAQH,CAAU;AAClB,QAAM,EAAE,EAAA,IAAMI,EAAeJ,CAAU,GAEjCK,IAAoBC;AAAA,IACxB,MACEX,EAAY,IAAI,CAAAO,MAAc;AAC5B,YAAMK,IAAkBL,EAAW,YAC9B,EAAEA,EAAW,OAAO;AAAA,QACnB,IAAIA,EAAW;AAAA,QACf,cAAcA,EAAW;AAAA,QACzB,GAAGA,EAAW;AAAA,MAAA,CACN,IACT,EAAEA,EAAW,OAAO;AAAA,QACnB,cAAcA,EAAW;AAAA,QACzB,GAAGA,EAAW;AAAA,MAAA,CACN;AACd,aAAO;AAAA,QACL,IAAIA,EAAW;AAAA,QACf,OAAOK;AAAA,MAAA;AAAA,IAEX,CAAC;AAAA,IACH,CAACZ,GAAa,CAAC;AAAA,EAAA;AAajB,SACE,gBAAAa;AAAA,IAACV;AAAA,IAAA;AAAA,MACC,aAAaO;AAAA,MACb,qBAAAT;AAAA,MACA,SAd0B,CAACa,MAAyB;AACtD,cAAMP,IAAaP,EAAY,KAAK,CAAAO,MAAcA,EAAW,OAAOO,CAAY;AAChF,QAAIZ,KAAWK,KACbL,EAAQa,EAAgB,qBAAqB;AAAA,UAC3C,KAAKD;AAAA,UACL,YAAYP,EAAW;AAAA,QAAA,CACxB;AAAA,MAEL;AAAA,IAMa;AAAA,EAAA;AAGf;"}

package/dist/components/Common/FlowBreadcrumbs/FlowBreadcrumbsTypes.d.ts

@@ -0,0 +1,44 @@
+import { OnEventType } from '../../Base/useBase';
+import { EventType } from '../../../types/Helpers';
+export interface FlowBreadcrumb {
+    /**
+     * Unique key for the breadcrumb step
+     */
+    id: string;
+    /**
+     * Translation key for the breadcrumb label
+     */
+    label: string;
+    /**
+     * Optional translation namespace
+     */
+    namespace?: string;
+    /**
+     * Optional variables for the breadcrumb label
+     */
+    variables?: Record<string, unknown>;
+    /**
+     * Event handler for breadcrumb navigation
+     */
+    onNavigate?: (context: unknown) => unknown;
+}
+export interface BreadcrumbNode {
+    /**
+     * Parent node key (null for root nodes)
+     */
+    parent: string | null;
+    /**
+     * The breadcrumb item data
+     */
+    item: FlowBreadcrumb;
+}
+export type BreadcrumbNodes = Record<string, BreadcrumbNode>;
+export type BreadcrumbTrail = Record<string, FlowBreadcrumb[]>;
+export interface FlowBreadcrumbsProps {
+    breadcrumbs: FlowBreadcrumb[];
+    currentBreadcrumbId?: string;
+    /**
+     * Event handler for breadcrumb navigation
+     */
+    onEvent?: OnEventType<EventType, unknown>;
+}

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

@@ -0,0 +1,3 @@
+import "./types/i18next.d.ts"
+export { FlowBreadcrumbs } from './FlowBreadcrumbs';
+export type { FlowBreadcrumbsProps } from './FlowBreadcrumbsTypes';

package/dist/components/Common/PaginationControl/PaginationControl.js

@@ -1,34 +1,34 @@
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useState as f } from "react";
-import { useTranslation as v } from "react-i18next";
-import { Flex as h } from "../Flex/Flex.js";
-import e from "./PaginationControl.module.scss.js";
-import { useComponentContext as s } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import S from "../../../assets/icons/pagination_first.svg.js";
-import x from "../../../assets/icons/pagination_previous.svg.js";
-import I from "../../../assets/icons/pagination_next.svg.js";
-import L from "../../../assets/icons/pagination_last.svg.js";
-import { InlineSpinner as N } from "../InlineSpinner/InlineSpinner.js";
-const P = ({
+import { jsx as n, jsxs as e } from "react/jsx-runtime";
+import { useTranslation as C } from "react-i18next";
+import { Flex as f } from "../Flex/Flex.js";
+import l from "./PaginationControl.module.scss.js";
+import { useComponentContext as r } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import v from "../../../assets/icons/pagination_first.svg.js";
+import h from "../../../assets/icons/pagination_previous.svg.js";
+import x from "../../../assets/icons/pagination_next.svg.js";
+import S from "../../../assets/icons/pagination_last.svg.js";
+import { InlineSpinner as I } from "../InlineSpinner/InlineSpinner.js";
+const L = ({
   currentPage: i,
   totalPages: o,
-  isFetching: c,
-  handleFirstPage: m,
-  handlePreviousPage: p,
-  handleNextPage: g,
+  isFetching: s,
+  handleFirstPage: c,
+  handlePreviousPage: m,
+  handleNextPage: p,
   handleLastPage: d,
-  handleItemsPerPageChange: u
+  handleItemsPerPageChange: g,
+  itemsPerPage: u = 5
 }) => {
-  const { t } = v("common"), a = s(), [b, C] = f("5");
-  return o < 2 ? null : /* @__PURE__ */ n("section", { className: e.paginationControl, "data-testid": "pagination-control", children: /* @__PURE__ */ r(h, { justifyContent: "space-between", alignItems: "center", children: [
-    /* @__PURE__ */ n("div", { className: e.paginationControlCount, children: /* @__PURE__ */ n("section", { children: /* @__PURE__ */ n(
+  const { t } = C("common"), a = r();
+  return o < 2 ? null : /* @__PURE__ */ n("section", { className: l.paginationControl, "data-testid": "pagination-control", children: /* @__PURE__ */ e(f, { justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ n("div", { className: l.paginationControlCount, children: /* @__PURE__ */ n("section", { children: /* @__PURE__ */ n(
       a.Select,
       {
         label: t("labels.paginationControllCountLabel"),
         shouldVisuallyHideLabel: !0,
-        value: b,
-        onChange: (l) => {
-          C(l), u(Number(l));
+        value: u.toString(),
+        onChange: (b) => {
+          g(Number(b));
         },
         options: [
           { value: "5", label: "5" },
@@ -37,15 +37,15 @@ const P = ({
         ]
       }
     ) }) }),
-    /* @__PURE__ */ r("div", { className: e.paginationControlButtons, children: [
-      c && /* @__PURE__ */ n(N, { ariaLabel: t("labels.paginationFetchingLabel") }),
+    /* @__PURE__ */ e("div", { className: l.paginationControlButtons, children: [
+      s && /* @__PURE__ */ n(I, { ariaLabel: t("labels.paginationFetchingLabel") }),
       /* @__PURE__ */ n(
         a.ButtonIcon,
         {
           "aria-label": t("icons.paginationFirst"),
           isDisabled: i === 1,
-          onClick: m,
-          children: /* @__PURE__ */ n(S, {})
+          onClick: c,
+          children: /* @__PURE__ */ n(v, {})
         }
       ),
       /* @__PURE__ */ n(
@@ -54,8 +54,8 @@ const P = ({
           "aria-label": t("icons.paginationPrev"),
           "data-testid": "pagination-previous",
           isDisabled: i === 1,
-          onClick: p,
-          children: /* @__PURE__ */ n(x, {})
+          onClick: m,
+          children: /* @__PURE__ */ n(h, {})
         }
       ),
       /* @__PURE__ */ n(
@@ -64,8 +64,8 @@ const P = ({
           "aria-label": t("icons.paginationNext"),
           "data-testid": "pagination-next",
           isDisabled: i === o,
-          onClick: g,
-          children: /* @__PURE__ */ n(I, {})
+          onClick: p,
+          children: /* @__PURE__ */ n(x, {})
         }
       ),
       /* @__PURE__ */ n(
@@ -74,16 +74,16 @@ const P = ({
           "aria-label": t("icons.paginationLast"),
           isDisabled: i === o,
           onClick: d,
-          children: /* @__PURE__ */ n(L, {})
+          children: /* @__PURE__ */ n(S, {})
         }
       )
     ] })
   ] }) });
-}, q = (i) => {
-  const o = s();
-  return o.PaginationControl ? /* @__PURE__ */ n(o.PaginationControl, { ...i }) : /* @__PURE__ */ n(P, { ...i });
+}, T = (i) => {
+  const o = r();
+  return o.PaginationControl ? /* @__PURE__ */ n(o.PaginationControl, { ...i }) : /* @__PURE__ */ n(L, { ...i });
 };
 export {
-  q as PaginationControl
+  T as PaginationControl
 };
 //# sourceMappingURL=PaginationControl.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationControl.js","sources":["../../../../src/components/Common/PaginationControl/PaginationControl.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { Flex } from '../Flex/Flex'\nimport { InlineSpinner } from '../InlineSpinner'\nimport style from './PaginationControl.module.scss'\nimport type { PaginationControlProps } from './PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport PaginationFirstIcon from '@/assets/icons/pagination_first.svg?react'\nimport PaginationPrevIcon from '@/assets/icons/pagination_previous.svg?react'\nimport PaginationNextIcon from '@/assets/icons/pagination_next.svg?react'\nimport PaginationLastIcon from '@/assets/icons/pagination_last.svg?react'\n\nconst DefaultPaginationControl = ({\n  currentPage,\n  totalPages,\n  isFetching,\n  handleFirstPage,\n  handlePreviousPage,\n  handleNextPage,\n  handleLastPage,\n  handleItemsPerPageChange,\n}: PaginationControlProps) => {\n  const { t } = useTranslation('common')\n  const Components = useComponentContext()\n  const [pageSize, setPageSize] = useState('5')\n\n  if (totalPages < 2) {\n    return null\n  }\n  return (\n    <section className={style.paginationControl} data-testid=\"pagination-control\">\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\n        <div className={style.paginationControlCount}>\n          <section>\n            <Components.Select\n              label={t('labels.paginationControllCountLabel')}\n              shouldVisuallyHideLabel\n              value={pageSize}\n              onChange={n => {\n                setPageSize(n)\n                handleItemsPerPageChange(Number(n))\n              }}\n              options={[\n                { value: '5', label: '5' },\n                { value: '10', label: '10' },\n                { value: '50', label: '50' },\n              ]}\n            />\n          </section>\n        </div>\n        <div className={style.paginationControlButtons}>\n          {isFetching && <InlineSpinner ariaLabel={t('labels.paginationFetchingLabel')} />}\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationFirst')}\n            isDisabled={currentPage === 1}\n            onClick={handleFirstPage}\n          >\n            <PaginationFirstIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationPrev')}\n            data-testid=\"pagination-previous\"\n            isDisabled={currentPage === 1}\n            onClick={handlePreviousPage}\n          >\n            <PaginationPrevIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationNext')}\n            data-testid=\"pagination-next\"\n            isDisabled={currentPage === totalPages}\n            onClick={handleNextPage}\n          >\n            <PaginationNextIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationLast')}\n            isDisabled={currentPage === totalPages}\n            onClick={handleLastPage}\n          >\n            <PaginationLastIcon />\n          </Components.ButtonIcon>\n        </div>\n      </Flex>\n    </section>\n  )\n}\n\nexport const PaginationControl = (props: PaginationControlProps) => {\n  const Components = useComponentContext()\n\n  return Components.PaginationControl ? (\n    <Components.PaginationControl {...props} />\n  ) : (\n    <DefaultPaginationControl {...props} />\n  )\n}\n"],"names":["DefaultPaginationControl","currentPage","totalPages","isFetching","handleFirstPage","handlePreviousPage","handleNextPage","handleLastPage","handleItemsPerPageChange","useTranslation","Components","useComponentContext","pageSize","setPageSize","useState","jsx","style","jsxs","Flex","n","InlineSpinner","PaginationFirstIcon","PaginationPrevIcon","PaginationNextIcon","PaginationLastIcon","PaginationControl","props"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAA2B,CAAC;AAAA,EAChC,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,0BAAAC;AACF,MAA8B;AAC5B,QAAM,EAAE,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAaC,EAAA,GACb,CAACC,GAAUC,CAAW,IAAIC,EAAS,GAAG;AAE5C,SAAIZ,IAAa,IACR,OAGP,gBAAAa,EAAC,WAAA,EAAQ,WAAWC,EAAM,mBAAmB,eAAY,sBACvD,UAAA,gBAAAC,EAACC,GAAA,EAAK,gBAAe,iBAAgB,YAAW,UAC9C,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAM,wBACpB,4BAAC,WAAA,EACC,UAAA,gBAAAD;AAAA,MAACL,EAAW;AAAA,MAAX;AAAA,QACC,OAAO,EAAE,qCAAqC;AAAA,QAC9C,yBAAuB;AAAA,QACvB,OAAOE;AAAA,QACP,UAAU,CAAAO,MAAK;AACb,UAAAN,EAAYM,CAAC,GACbX,EAAyB,OAAOW,CAAC,CAAC;AAAA,QACpC;AAAA,QACA,SAAS;AAAA,UACP,EAAE,OAAO,KAAK,OAAO,IAAA;AAAA,UACrB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,UACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,QAAK;AAAA,MAC7B;AAAA,IAAA,GAEJ,EAAA,CACF;AAAA,IACA,gBAAAF,EAAC,OAAA,EAAI,WAAWD,EAAM,0BACnB,UAAA;AAAA,MAAAb,KAAc,gBAAAY,EAACK,GAAA,EAAc,WAAW,EAAE,gCAAgC,GAAG;AAAA,MAC9E,gBAAAL;AAAA,QAACL,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,uBAAuB;AAAA,UACrC,YAAYT,MAAgB;AAAA,UAC5B,SAASG;AAAA,UAET,4BAACiB,GAAA,CAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEvB,gBAAAN;AAAA,QAACL,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYT,MAAgB;AAAA,UAC5B,SAASI;AAAA,UAET,4BAACiB,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtB,gBAAAP;AAAA,QAACL,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYT,MAAgBC;AAAA,UAC5B,SAASI;AAAA,UAET,4BAACiB,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtB,gBAAAR;AAAA,QAACL,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,YAAYT,MAAgBC;AAAA,UAC5B,SAASK;AAAA,UAET,4BAACiB,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,GAEaC,IAAoB,CAACC,MAAkC;AAClE,QAAMhB,IAAaC,EAAA;AAEnB,SAAOD,EAAW,oBAChB,gBAAAK,EAACL,EAAW,mBAAX,EAA8B,GAAGgB,EAAA,CAAO,IAEzC,gBAAAX,EAACf,GAAA,EAA0B,GAAG0B,EAAA,CAAO;AAEzC;"}
+{"version":3,"file":"PaginationControl.js","sources":["../../../../src/components/Common/PaginationControl/PaginationControl.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { Flex } from '../Flex/Flex'\nimport { InlineSpinner } from '../InlineSpinner'\nimport style from './PaginationControl.module.scss'\nimport type { PaginationControlProps, PaginationItemsPerPage } from './PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport PaginationFirstIcon from '@/assets/icons/pagination_first.svg?react'\nimport PaginationPrevIcon from '@/assets/icons/pagination_previous.svg?react'\nimport PaginationNextIcon from '@/assets/icons/pagination_next.svg?react'\nimport PaginationLastIcon from '@/assets/icons/pagination_last.svg?react'\n\nconst DefaultPaginationControl = ({\n  currentPage,\n  totalPages,\n  isFetching,\n  handleFirstPage,\n  handlePreviousPage,\n  handleNextPage,\n  handleLastPage,\n  handleItemsPerPageChange,\n  itemsPerPage = 5,\n}: PaginationControlProps) => {\n  const { t } = useTranslation('common')\n  const Components = useComponentContext()\n\n  if (totalPages < 2) {\n    return null\n  }\n\n  return (\n    <section className={style.paginationControl} data-testid=\"pagination-control\">\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\n        <div className={style.paginationControlCount}>\n          <section>\n            <Components.Select\n              label={t('labels.paginationControllCountLabel')}\n              shouldVisuallyHideLabel\n              value={itemsPerPage.toString()}\n              onChange={n => {\n                handleItemsPerPageChange(Number(n) as PaginationItemsPerPage)\n              }}\n              options={[\n                { value: '5', label: '5' },\n                { value: '10', label: '10' },\n                { value: '50', label: '50' },\n              ]}\n            />\n          </section>\n        </div>\n        <div className={style.paginationControlButtons}>\n          {isFetching && <InlineSpinner ariaLabel={t('labels.paginationFetchingLabel')} />}\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationFirst')}\n            isDisabled={currentPage === 1}\n            onClick={handleFirstPage}\n          >\n            <PaginationFirstIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationPrev')}\n            data-testid=\"pagination-previous\"\n            isDisabled={currentPage === 1}\n            onClick={handlePreviousPage}\n          >\n            <PaginationPrevIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationNext')}\n            data-testid=\"pagination-next\"\n            isDisabled={currentPage === totalPages}\n            onClick={handleNextPage}\n          >\n            <PaginationNextIcon />\n          </Components.ButtonIcon>\n          <Components.ButtonIcon\n            aria-label={t('icons.paginationLast')}\n            isDisabled={currentPage === totalPages}\n            onClick={handleLastPage}\n          >\n            <PaginationLastIcon />\n          </Components.ButtonIcon>\n        </div>\n      </Flex>\n    </section>\n  )\n}\n\nexport const PaginationControl = (props: PaginationControlProps) => {\n  const Components = useComponentContext()\n\n  return Components.PaginationControl ? (\n    <Components.PaginationControl {...props} />\n  ) : (\n    <DefaultPaginationControl {...props} />\n  )\n}\n"],"names":["DefaultPaginationControl","currentPage","totalPages","isFetching","handleFirstPage","handlePreviousPage","handleNextPage","handleLastPage","handleItemsPerPageChange","itemsPerPage","useTranslation","Components","useComponentContext","jsx","style","jsxs","Flex","n","InlineSpinner","PaginationFirstIcon","PaginationPrevIcon","PaginationNextIcon","PaginationLastIcon","PaginationControl","props"],"mappings":";;;;;;;;;;AAWA,MAAMA,IAA2B,CAAC;AAAA,EAChC,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,MAA8B;AAC5B,QAAM,EAAE,EAAA,IAAMC,EAAe,QAAQ,GAC/BC,IAAaC,EAAA;AAEnB,SAAIV,IAAa,IACR,OAIP,gBAAAW,EAAC,WAAA,EAAQ,WAAWC,EAAM,mBAAmB,eAAY,sBACvD,UAAA,gBAAAC,EAACC,GAAA,EAAK,gBAAe,iBAAgB,YAAW,UAC9C,UAAA;AAAA,IAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWC,EAAM,wBACpB,4BAAC,WAAA,EACC,UAAA,gBAAAD;AAAA,MAACF,EAAW;AAAA,MAAX;AAAA,QACC,OAAO,EAAE,qCAAqC;AAAA,QAC9C,yBAAuB;AAAA,QACvB,OAAOF,EAAa,SAAA;AAAA,QACpB,UAAU,CAAAQ,MAAK;AACb,UAAAT,EAAyB,OAAOS,CAAC,CAA2B;AAAA,QAC9D;AAAA,QACA,SAAS;AAAA,UACP,EAAE,OAAO,KAAK,OAAO,IAAA;AAAA,UACrB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,UACtB,EAAE,OAAO,MAAM,OAAO,KAAA;AAAA,QAAK;AAAA,MAC7B;AAAA,IAAA,GAEJ,EAAA,CACF;AAAA,IACA,gBAAAF,EAAC,OAAA,EAAI,WAAWD,EAAM,0BACnB,UAAA;AAAA,MAAAX,KAAc,gBAAAU,EAACK,GAAA,EAAc,WAAW,EAAE,gCAAgC,GAAG;AAAA,MAC9E,gBAAAL;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,uBAAuB;AAAA,UACrC,YAAYV,MAAgB;AAAA,UAC5B,SAASG;AAAA,UAET,4BAACe,GAAA,CAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEvB,gBAAAN;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYV,MAAgB;AAAA,UAC5B,SAASI;AAAA,UAET,4BAACe,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtB,gBAAAP;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,eAAY;AAAA,UACZ,YAAYV,MAAgBC;AAAA,UAC5B,SAASI;AAAA,UAET,4BAACe,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtB,gBAAAR;AAAA,QAACF,EAAW;AAAA,QAAX;AAAA,UACC,cAAY,EAAE,sBAAsB;AAAA,UACpC,YAAYV,MAAgBC;AAAA,UAC5B,SAASK;AAAA,UAET,4BAACe,GAAA,CAAA,CAAmB;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ,GAEaC,IAAoB,CAACC,MAAkC;AAClE,QAAMb,IAAaC,EAAA;AAEnB,SAAOD,EAAW,oBAChB,gBAAAE,EAACF,EAAW,mBAAX,EAA8B,GAAGa,EAAA,CAAO,IAEzC,gBAAAX,EAACb,GAAA,EAA0B,GAAGwB,EAAA,CAAO;AAEzC;"}

package/dist/components/Common/PaginationControl/PaginationControlTypes.d.ts

@@ -1,10 +1,12 @@
+export type PaginationItemsPerPage = 5 | 10 | 50;
 export type PaginationControlProps = {
     handleFirstPage: () => void;
     handlePreviousPage: () => void;
     handleNextPage: () => void;
     handleLastPage: () => void;
-    handleItemsPerPageChange: (n: number) => void;
+    handleItemsPerPageChange: (n: PaginationItemsPerPage) => void;
     currentPage: number;
     totalPages: number;
+    itemsPerPage: PaginationItemsPerPage;
     isFetching?: boolean;
 };

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

@@ -0,0 +1,2 @@
+import { BreadcrumbsProps } from './BreadcrumbsTypes';
+export declare function Breadcrumbs({ className, breadcrumbs, currentBreadcrumbId, 'aria-label': ariaLabel, onClick, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx as l } from "react/jsx-runtime";
+import t from "classnames";
+import i from "./Breadcrumbs.module.scss.js";
+import { Flex as p } from "../../Flex/Flex.js";
+function N({
+  className: n,
+  breadcrumbs: c,
+  currentBreadcrumbId: o,
+  "aria-label": m = "Breadcrumbs",
+  onClick: r
+}) {
+  return /* @__PURE__ */ l(p, { flexDirection: "column", children: /* @__PURE__ */ l("nav", { "aria-label": m, className: t(i.root, n), children: /* @__PURE__ */ l("ol", { className: i.list, children: c.map((e) => {
+    const a = e.id === o, s = !a && r;
+    return /* @__PURE__ */ l(
+      "li",
+      {
+        className: t(i.item, s && i.clickable),
+        "aria-current": a ? "step" : !1,
+        children: s ? /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            className: i.link,
+            onClick: () => {
+              r(e.id);
+            },
+            children: e.label
+          }
+        ) : /* @__PURE__ */ l("span", { children: e.label })
+      },
+      e.id
+    );
+  }) }) }) });
+}
+export {
+  N as Breadcrumbs
+};
+//# sourceMappingURL=Breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../../../src/components/Common/UI/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import classnames from 'classnames'\nimport { Flex } from '../../Flex'\nimport type { BreadcrumbsProps } from './BreadcrumbsTypes'\nimport styles from './Breadcrumbs.module.scss'\n\nexport function Breadcrumbs({\n  className,\n  breadcrumbs,\n  currentBreadcrumbId,\n  'aria-label': ariaLabel = 'Breadcrumbs',\n  onClick,\n}: BreadcrumbsProps) {\n  return (\n    <Flex flexDirection=\"column\">\n      <nav aria-label={ariaLabel} className={classnames(styles.root, className)}>\n        <ol className={styles.list}>\n          {breadcrumbs.map(breadcrumb => {\n            const isCurrentbreadcrumb = breadcrumb.id === currentBreadcrumbId\n            const isClickable = !isCurrentbreadcrumb && onClick\n\n            return (\n              <li\n                key={breadcrumb.id}\n                className={classnames(styles.item, isClickable && styles.clickable)}\n                aria-current={isCurrentbreadcrumb ? 'step' : false}\n              >\n                {isClickable ? (\n                  <button\n                    type=\"button\"\n                    className={styles.link}\n                    onClick={() => {\n                      onClick(breadcrumb.id)\n                    }}\n                  >\n                    {breadcrumb.label}\n                  </button>\n                ) : (\n                  <span>{breadcrumb.label}</span>\n                )}\n              </li>\n            )\n          })}\n        </ol>\n      </nav>\n    </Flex>\n  )\n}\n"],"names":["Breadcrumbs","className","breadcrumbs","currentBreadcrumbId","ariaLabel","onClick","jsx","Flex","classnames","styles","breadcrumb","isCurrentbreadcrumb","isClickable"],"mappings":";;;;AAKO,SAASA,EAAY;AAAA,EAC1B,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAcC,IAAY;AAAA,EAC1B,SAAAC;AACF,GAAqB;AACnB,SACE,gBAAAC,EAACC,KAAK,eAAc,UAClB,4BAAC,OAAA,EAAI,cAAYH,GAAW,WAAWI,EAAWC,EAAO,MAAMR,CAAS,GACtE,UAAA,gBAAAK,EAAC,MAAA,EAAG,WAAWG,EAAO,MACnB,UAAAP,EAAY,IAAI,CAAAQ,MAAc;AAC7B,UAAMC,IAAsBD,EAAW,OAAOP,GACxCS,IAAc,CAACD,KAAuBN;AAE5C,WACE,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAWE,EAAWC,EAAO,MAAMG,KAAeH,EAAO,SAAS;AAAA,QAClE,gBAAcE,IAAsB,SAAS;AAAA,QAE5C,UAAAC,IACC,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAWG,EAAO;AAAA,YAClB,SAAS,MAAM;AACb,cAAAJ,EAAQK,EAAW,EAAE;AAAA,YACvB;AAAA,YAEC,UAAAA,EAAW;AAAA,UAAA;AAAA,QAAA,IAGd,gBAAAJ,EAAC,QAAA,EAAM,UAAAI,EAAW,MAAA,CAAM;AAAA,MAAA;AAAA,MAfrBA,EAAW;AAAA,IAAA;AAAA,EAmBtB,CAAC,EAAA,CACH,EAAA,CACF,GACF;AAEJ;"}

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

@@ -0,0 +1,16 @@
+const t = "_root_czg77_2", c = "_list_czg77_5", _ = "_item_czg77_13", l = "_link_czg77_31", o = "_clickable_czg77_45", i = {
+  root: t,
+  list: c,
+  item: _,
+  link: l,
+  clickable: o
+};
+export {
+  o as clickable,
+  i as default,
+  _ as item,
+  l as link,
+  c as list,
+  t as root
+};
+//# sourceMappingURL=Breadcrumbs.module.scss.js.map

package/dist/components/Common/UI/Breadcrumbs/Breadcrumbs.module.scss.js.map

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

package/dist/components/Common/UI/Breadcrumbs/BreadcrumbsTypes.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export interface Breadcrumb {
+    id: string;
+    label: ReactNode;
+}
+export interface BreadcrumbsProps {
+    /**
+     * Array of breadcrumbs
+     */
+    breadcrumbs: Breadcrumb[];
+    /**
+     * Current breadcrumb id
+     */
+    currentBreadcrumbId?: string;
+    /**
+     * Accessibility label for the breadcrumbs
+     */
+    'aria-label'?: string;
+    /**
+     * Additional CSS class name for the breadcrumbs container
+     */
+    className?: string;
+    /**
+     * Event handler for breadcrumb navigation
+     */
+    onClick?: (id: string) => void;
+}

package/dist/components/Common/UI/Breadcrumbs/index.d.ts

@@ -0,0 +1,3 @@
+import "./types/i18next.d.ts"
+export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps, Breadcrumb } from './BreadcrumbsTypes';

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 { Flex as n } from "../../Flex/Flex.js";
-import p from "./ProgressBar.module.scss.js";
+import n from "./ProgressBar.module.scss.js";
+import { Flex as p } from "../../Flex/Flex.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(n, { flexDirection: "column", children: [
+  return /* @__PURE__ */ t(p, { flexDirection: "column", children: [
     o && /* @__PURE__ */ r(o, {}),
-    /* @__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 }) }) })
+    /* @__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 }) }) })
   ] });
 }
 export {