@gusto/embedded-react-sdk 0.13.2 → 0.13.4

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 0.13.4
+
+### Fixes
+
+- Patch release for bug fixes and improvements around finite state machines
+
+## 0.13.3
+
+### Fixes
+
+- Apply system styles to alert UI for consistent styling
+- Hide admin fields when self-onboarding and add form validation
+- Update useField to correctly handle component props
+- Replace self-onboarding checkbox with switchfield card component
+
+### Chores & Maintenance
+
+- Bump react-hook-form from 7.62.0 to 7.63.0
+- Bump robot3 from 1.1.1 to 1.2.0
+- Bump typescript-eslint from 8.44.0 to 8.44.1
+- Bump eslint from 9.35.0 to 9.36.0
+- Bump eslint-plugin-react-refresh from 0.4.20 to 0.4.21
+- Bump tsx from 4.20.5 to 4.20.6
+- Bump sass-embedded from 1.92.1 to 1.93.2
+- Bump msw from 2.11.2 to 2.11.3
+- Bump lint-staged from 16.1.6 to 16.2.0
+- Bump @eslint/js from 9.35.0 to 9.36.0
+
 ## 0.13.2
 
 ### Features & Enhancements

package/dist/assets/icons/close.svg.js

@@ -1,10 +1,10 @@
 import * as e from "react";
-const l = ({
+const n = ({
   title: t,
-  titleId: r,
-  ...o
-}) => /* @__PURE__ */ e.createElement("svg", { width: 36, height: 36, viewBox: "0 0 36 36", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": r, ...o }, t ? /* @__PURE__ */ e.createElement("title", { id: r }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M23 13L13 23M13 13L23 23", stroke: "currentColor", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
+  titleId: o,
+  ...r
+}) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": o, ...r }, t ? /* @__PURE__ */ e.createElement("title", { id: o }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M15 5L5 15M5 5L15 15", stroke: "#535862", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
 export {
-  l as default
+  n as default
 };
 //# sourceMappingURL=close.svg.js.map

package/dist/assets/icons/close.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"close.svg.js","sources":["../../../src/assets/icons/close.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgClose = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 36, height: 36, viewBox: \"0 0 36 36\", fill: \"currentColor\", 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: \"M23 13L13 23M13 13L23 23\", stroke: \"currentColor\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgClose;\n"],"names":["SvgClose","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAW,CAAC;AAAA,EAChB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,gBAAgB,OAAO,8BAA8B,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,KAAWD,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,4BAA4B,QAAQ,gBAAgB,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}
+{"version":3,"file":"close.svg.js","sources":["../../../src/assets/icons/close.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgClose = ({\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: \"M15 5L5 15M5 5L15 15\", stroke: \"#535862\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgClose;\n"],"names":["SvgClose","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAW,CAAC;AAAA,EAChB,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,wBAAwB,QAAQ,WAAW,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/assets/icons/download-cloud.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const n = ({
+  title: t,
+  titleId: o,
+  ...r
+}) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": o, ...r }, t ? /* @__PURE__ */ e.createElement("title", { id: o }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M5.33301 11.3333L7.99967 14M7.99967 14L10.6663 11.3333M7.99967 14V8M13.333 11.1619C14.1473 10.4894 14.6663 9.47196 14.6663 8.33333C14.6663 6.30829 13.0247 4.66667 10.9997 4.66667C10.854 4.66667 10.7177 4.59066 10.6438 4.46516C9.77438 2.98989 8.1693 2 6.33301 2C3.57158 2 1.33301 4.23858 1.33301 7C1.33301 8.3774 1.88997 9.62472 2.79097 10.529", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  n as default
+};
+//# sourceMappingURL=download-cloud.svg.js.map

package/dist/assets/icons/download-cloud.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"download-cloud.svg.js","sources":["../../../src/assets/icons/download-cloud.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgDownloadCloud = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 16, height: 16, viewBox: \"0 0 16 16\", 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.33301 11.3333L7.99967 14M7.99967 14L10.6663 11.3333M7.99967 14V8M13.333 11.1619C14.1473 10.4894 14.6663 9.47196 14.6663 8.33333C14.6663 6.30829 13.0247 4.66667 10.9997 4.66667C10.854 4.66667 10.7177 4.59066 10.6438 4.46516C9.77438 2.98989 8.1693 2 6.33301 2C3.57158 2 1.33301 4.23858 1.33301 7C1.33301 8.3774 1.88997 9.62472 2.79097 10.529\", stroke: \"currentColor\", strokeWidth: 1.5, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgDownloadCloud;\n"],"names":["SvgDownloadCloud","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAmB,CAAC;AAAA,EACxB,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,0VAA0V,QAAQ,gBAAgB,aAAa,KAAK,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/assets/icons/hamburger.svg.js

@@ -1,10 +1,10 @@
 import * as e from "react";
-const a = ({
+const n = ({
   title: t,
-  titleId: l,
-  ...r
-}) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 21, height: 20, viewBox: "0 0 21 20", fill: "none", "aria-labelledby": l, ...r }, t ? /* @__PURE__ */ e.createElement("title", { id: l }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M12.375 3.125C12.375 4.16053 11.5355 5 10.5 5C9.46447 5 8.625 4.16053 8.625 3.125C8.625 2.08947 9.46447 1.25 10.5 1.25C11.5355 1.25 12.375 2.08947 12.375 3.125Z", fill: "currentColor" }), /* @__PURE__ */ e.createElement("path", { d: "M12.375 10C12.375 11.0355 11.5355 11.875 10.5 11.875C9.46447 11.875 8.625 11.0355 8.625 10C8.625 8.96447 9.46447 8.125 10.5 8.125C11.5355 8.125 12.375 8.96447 12.375 10Z", fill: "currentColor" }), /* @__PURE__ */ e.createElement("path", { d: "M10.5 18.75C11.5355 18.75 12.375 17.9105 12.375 16.875C12.375 15.8395 11.5355 15 10.5 15C9.46447 15 8.625 15.8395 8.625 16.875C8.625 17.9105 9.46447 18.75 10.5 18.75Z", fill: "currentColor" }));
+  titleId: r,
+  ...o
+}) => /* @__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, ...o }, t ? /* @__PURE__ */ e.createElement("title", { id: r }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M9.99996 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999C10.8333 9.53976 10.4602 9.16666 9.99996 9.16666C9.53972 9.16666 9.16663 9.53976 9.16663 9.99999C9.16663 10.4602 9.53972 10.8333 9.99996 10.8333Z", stroke: "#535862", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ e.createElement("path", { d: "M9.99996 4.99999C10.4602 4.99999 10.8333 4.6269 10.8333 4.16666C10.8333 3.70642 10.4602 3.33333 9.99996 3.33333C9.53972 3.33333 9.16663 3.70642 9.16663 4.16666C9.16663 4.6269 9.53972 4.99999 9.99996 4.99999Z", stroke: "#535862", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ e.createElement("path", { d: "M9.99996 16.6667C10.4602 16.6667 10.8333 16.2936 10.8333 15.8333C10.8333 15.3731 10.4602 15 9.99996 15C9.53972 15 9.16663 15.3731 9.16663 15.8333C9.16663 16.2936 9.53972 16.6667 9.99996 16.6667Z", stroke: "#535862", strokeWidth: 1.66667, strokeLinecap: "round", strokeLinejoin: "round" }));
 export {
-  a as default
+  n as default
 };
 //# sourceMappingURL=hamburger.svg.js.map

package/dist/assets/icons/hamburger.svg.js.map

@@ -1 +1 @@
-{"version":3,"file":"hamburger.svg.js","sources":["../../../src/assets/icons/hamburger.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgHamburger = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 21, height: 20, viewBox: \"0 0 21 20\", fill: \"none\", \"aria-labelledby\": titleId, ...props }, title ? /* @__PURE__ */ React.createElement(\"title\", { id: titleId }, title) : null, /* @__PURE__ */ React.createElement(\"path\", { d: \"M12.375 3.125C12.375 4.16053 11.5355 5 10.5 5C9.46447 5 8.625 4.16053 8.625 3.125C8.625 2.08947 9.46447 1.25 10.5 1.25C11.5355 1.25 12.375 2.08947 12.375 3.125Z\", fill: \"currentColor\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M12.375 10C12.375 11.0355 11.5355 11.875 10.5 11.875C9.46447 11.875 8.625 11.0355 8.625 10C8.625 8.96447 9.46447 8.125 10.5 8.125C11.5355 8.125 12.375 8.96447 12.375 10Z\", fill: \"currentColor\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M10.5 18.75C11.5355 18.75 12.375 17.9105 12.375 16.875C12.375 15.8395 11.5355 15 10.5 15C9.46447 15 8.625 15.8395 8.625 16.875C8.625 17.9105 9.46447 18.75 10.5 18.75Z\", fill: \"currentColor\" }));\nexport default SvgHamburger;\n"],"names":["SvgHamburger","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAe,CAAC;AAAA,EACpB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,MAAsB,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,8BAA8B,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,mBAAmBF,GAAS,GAAGC,EAAK,GAAIF,IAAwB,gBAAAG,EAAM,cAAc,SAAS,EAAE,IAAIF,EAAO,GAAID,CAAK,IAAI,MAAsB,gBAAAG,EAAM,cAAc,QAAQ,EAAE,GAAG,oKAAoK,MAAM,eAAc,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,6KAA6K,MAAM,eAAc,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,0KAA0K,MAAM,eAAc,CAAE,CAAC;"}
+{"version":3,"file":"hamburger.svg.js","sources":["../../../src/assets/icons/hamburger.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgHamburger = ({\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: \"M9.99996 10.8333C10.4602 10.8333 10.8333 10.4602 10.8333 9.99999C10.8333 9.53976 10.4602 9.16666 9.99996 9.16666C9.53972 9.16666 9.16663 9.53976 9.16663 9.99999C9.16663 10.4602 9.53972 10.8333 9.99996 10.8333Z\", stroke: \"#535862\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M9.99996 4.99999C10.4602 4.99999 10.8333 4.6269 10.8333 4.16666C10.8333 3.70642 10.4602 3.33333 9.99996 3.33333C9.53972 3.33333 9.16663 3.70642 9.16663 4.16666C9.16663 4.6269 9.53972 4.99999 9.99996 4.99999Z\", stroke: \"#535862\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }), /* @__PURE__ */ React.createElement(\"path\", { d: \"M9.99996 16.6667C10.4602 16.6667 10.8333 16.2936 10.8333 15.8333C10.8333 15.3731 10.4602 15 9.99996 15C9.53972 15 9.16663 15.3731 9.16663 15.8333C9.16663 16.2936 9.53972 16.6667 9.99996 16.6667Z\", stroke: \"#535862\", strokeWidth: 1.66667, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgHamburger;\n"],"names":["SvgHamburger","title","titleId","props","React"],"mappings":";AACK,MAACA,IAAe,CAAC;AAAA,EACpB,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,QAAQ,EAAE,GAAG,qNAAqN,QAAQ,WAAW,aAAa,SAAS,eAAe,SAAS,gBAAgB,QAAO,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,mNAAmN,QAAQ,WAAW,aAAa,SAAS,eAAe,SAAS,gBAAgB,QAAO,CAAE,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,sMAAsM,QAAQ,WAAW,aAAa,SAAS,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/assets/icons/receipt-check.svg.js

@@ -0,0 +1,10 @@
+import * as e from "react";
+const n = ({
+  title: t,
+  titleId: r,
+  ...o
+}) => /* @__PURE__ */ e.createElement("svg", { width: 42, height: 42, viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": r, ...o }, t ? /* @__PURE__ */ e.createElement("title", { id: r }, t) : null, /* @__PURE__ */ e.createElement("path", { d: "M15.75 18.375L19.25 21.875L27.125 14M35 36.75V13.65C35 10.7097 35 9.23959 34.4278 8.11655C33.9245 7.1287 33.1213 6.32555 32.1335 5.82222C31.0104 5.25 29.5403 5.25 26.6 5.25H15.4C12.4597 5.25 10.9896 5.25 9.86655 5.82222C8.8787 6.32555 8.07555 7.1287 7.57222 8.11655C7 9.23959 7 10.7097 7 13.65V36.75L11.8125 33.25L16.1875 36.75L21 33.25L25.8125 36.75L30.1875 33.25L35 36.75Z", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }));
+export {
+  n as default
+};
+//# sourceMappingURL=receipt-check.svg.js.map

package/dist/assets/icons/receipt-check.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"receipt-check.svg.js","sources":["../../../src/assets/icons/receipt-check.svg?react"],"sourcesContent":["import * as React from \"react\";\nconst SvgReceiptCheck = ({\n  title,\n  titleId,\n  ...props\n}) => /* @__PURE__ */ React.createElement(\"svg\", { width: 42, height: 42, viewBox: \"0 0 42 42\", 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: \"M15.75 18.375L19.25 21.875L27.125 14M35 36.75V13.65C35 10.7097 35 9.23959 34.4278 8.11655C33.9245 7.1287 33.1213 6.32555 32.1335 5.82222C31.0104 5.25 29.5403 5.25 26.6 5.25H15.4C12.4597 5.25 10.9896 5.25 9.86655 5.82222C8.8787 6.32555 8.07555 7.1287 7.57222 8.11655C7 9.23959 7 10.7097 7 13.65V36.75L11.8125 33.25L16.1875 36.75L21 33.25L25.8125 36.75L30.1875 33.25L35 36.75Z\", stroke: \"currentColor\", strokeWidth: 3, strokeLinecap: \"round\", strokeLinejoin: \"round\" }));\nexport default SvgReceiptCheck;\n"],"names":["SvgReceiptCheck","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,0XAA0X,QAAQ,gBAAgB,aAAa,GAAG,eAAe,SAAS,gBAAgB,SAAS,CAAC;"}

package/dist/components/Base/Base.js

@@ -10,6 +10,7 @@ import { FadeIn as _ } from "../Common/FadeIn/FadeIn.js";
 import { BaseContext as j } from "./useBase.js";
 import { componentEvents as F } from "../../shared/constants.js";
 import { useAsyncError as K } from "../Common/hooks/useAsyncError.js";
+import "classnames";
 import { InternalError as P } from "../Common/InternalError/InternalError.js";
 import { snakeCaseToCamelCase as w } from "../../helpers/formattedStrings.js";
 import { useComponentContext as M } from "../../contexts/ComponentAdapter/useComponentContext.js";
@@ -28,7 +29,7 @@ const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
     return t.metadata?.key && typeof t.metadata.key == "string" ? a = t.metadata.key : t.metadata?.state && typeof t.metadata.state == "string" ? a = t.metadata.state : t.errorKey && (a = t.errorKey), t.errors.flatMap((r) => x(r, m + a));
   }
   return [];
-}, rt = ({
+}, ot = ({
   children: t,
   FallbackComponent: n = P,
   LoaderComponent: m,
@@ -82,6 +83,6 @@ const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
   );
 };
 export {
-  rt as BaseComponent
+  ot as BaseComponent
 };
 //# sourceMappingURL=Base.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\nimport { Suspense, useState, useCallback } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type FieldError, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError, useAsyncError } from '@/components/Common'\nimport { snakeCaseToCamelCase } from '@/helpers/formattedStrings'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  children?: ReactNode\n  className?: string\n  defaultValues?: unknown\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\n// Base component wrapper with error and suspense handling\nexport interface BaseComponentInterface<TResourceKey extends keyof Resources = keyof Resources>\n  extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**Traverses errorList and finds items with message properties */\nconst renderErrorList = (errorList: FieldError[]): React.ReactNode[] => {\n  return errorList.map(errorFromList => {\n    if (errorFromList.message) {\n      return <li key={errorFromList.key}>{errorFromList.message}</li>\n    }\n    return null\n  })\n}\n/**Recuresively parses error list and constructs an array of objects containing attribute value error messages associated with form fields. Nested errors construct '.' separated keys\n * metadata.state is a special case for state taxes validation errors\n */\nconst getFieldErrors = (\n  error: EntityErrorObject,\n  parentKey?: string,\n): { key: string; message: string }[] => {\n  const keyPrefix = parentKey ? parentKey + '.' : ''\n  if (error.category === 'invalid_attribute_value' || error.category === 'invalid_operation') {\n    return [\n      {\n        key: snakeCaseToCamelCase(keyPrefix + error.errorKey),\n        message: error.message ?? '',\n      },\n    ]\n  }\n  if (error.category === 'nested_errors' && error.errors !== undefined) {\n    //TODO: clean this up once Metadata type is fixed in openapi spec\n    let keySuffix = ''\n    //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    if (error.metadata?.key && typeof error.metadata.key === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.key as string\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    } else if (error.metadata?.state && typeof error.metadata.state === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.state as string\n    } else if (error.errorKey) {\n      keySuffix = error.errorKey\n    }\n    return error.errors.flatMap(err => getFieldErrors(err, keyPrefix + keySuffix))\n  }\n  return []\n}\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n}: BaseComponentInterface<TResourceKey>) => {\n  const [error, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<FieldError[] | null>(null)\n  const throwError = useAsyncError()\n  const { t } = useTranslation()\n  const Components = useComponentContext()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  // Enhanced setError that also clears fieldErrors when error is cleared\n  const setErrorWithFieldsClear = useCallback((error: KnownErrors | null) => {\n    setError(error)\n    if (!error) {\n      setFieldErrors(null)\n    }\n  }, [])\n\n  const processError = (error: KnownErrors) => {\n    setError(error)\n    //422\tapplication/json - content relaited error\n    if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n      setFieldErrors(error.errors.flatMap(err => getFieldErrors(err)))\n    }\n  }\n\n  const baseSubmitHandler = useCallback(\n    async <T,>(data: T, componentHandler: SubmitHandler<T>) => {\n      setError(null)\n      setFieldErrors(null)\n      try {\n        await componentHandler(data)\n      } catch (err) {\n        if (\n          err instanceof APIError ||\n          err instanceof SDKValidationError ||\n          err instanceof UnprocessableEntityErrorObject\n        ) {\n          processError(err)\n        } else throwError(err)\n      }\n    },\n    [setError, throwError],\n  )\n\n  return (\n    <BaseContext.Provider\n      value={{\n        fieldErrors,\n        setError: setErrorWithFieldsClear,\n        onEvent,\n        throwError,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n      }}\n    >\n      <QueryErrorResetBoundary>\n        {({ reset: resetQueries }) => (\n          <ErrorBoundary\n            FallbackComponent={FallbackComponent}\n            onReset={resetQueries}\n            onError={err => {\n              onEvent(componentEvents.ERROR, err)\n            }}\n          >\n            {(error || fieldErrors) && (\n              <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n                {fieldErrors && <Components.UnorderedList items={renderErrorList(fieldErrors)} />}\n                {error && error instanceof APIError && (\n                  <Components.Text>{error.message}</Components.Text>\n                )}\n                {error && error instanceof SDKValidationError && (\n                  <Components.Text as=\"pre\">{error.pretty()}</Components.Text>\n                )}\n              </Components.Alert>\n            )}\n            <Suspense fallback={<LoaderComponent />}>\n              <FadeIn>{children}</FadeIn>\n            </Suspense>\n          </ErrorBoundary>\n        )}\n      </QueryErrorResetBoundary>\n    </BaseContext.Provider>\n  )\n}\n"],"names":["renderErrorList","errorList","errorFromList","jsx","getFieldErrors","error","parentKey","keyPrefix","snakeCaseToCamelCase","keySuffix","err","BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","baseSubmitHandler","data","componentHandler","APIError","SDKValidationError","BaseContext","QueryErrorResetBoundary","resetQueries","jsxs","ErrorBoundary","componentEvents","Suspense","FadeIn"],"mappings":"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"}
+{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\nimport { Suspense, useState, useCallback } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type FieldError, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError, useAsyncError } from '@/components/Common'\nimport { snakeCaseToCamelCase } from '@/helpers/formattedStrings'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  children?: ReactNode\n  className?: string\n  defaultValues?: unknown\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\n// Base component wrapper with error and suspense handling\nexport interface BaseComponentInterface<TResourceKey extends keyof Resources = keyof Resources>\n  extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**Traverses errorList and finds items with message properties */\nconst renderErrorList = (errorList: FieldError[]): React.ReactNode[] => {\n  return errorList.map(errorFromList => {\n    if (errorFromList.message) {\n      return <li key={errorFromList.key}>{errorFromList.message}</li>\n    }\n    return null\n  })\n}\n/**Recuresively parses error list and constructs an array of objects containing attribute value error messages associated with form fields. Nested errors construct '.' separated keys\n * metadata.state is a special case for state taxes validation errors\n */\nconst getFieldErrors = (\n  error: EntityErrorObject,\n  parentKey?: string,\n): { key: string; message: string }[] => {\n  const keyPrefix = parentKey ? parentKey + '.' : ''\n  if (error.category === 'invalid_attribute_value' || error.category === 'invalid_operation') {\n    return [\n      {\n        key: snakeCaseToCamelCase(keyPrefix + error.errorKey),\n        message: error.message ?? '',\n      },\n    ]\n  }\n  if (error.category === 'nested_errors' && error.errors !== undefined) {\n    //TODO: clean this up once Metadata type is fixed in openapi spec\n    let keySuffix = ''\n    //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    if (error.metadata?.key && typeof error.metadata.key === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.key as string\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    } else if (error.metadata?.state && typeof error.metadata.state === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.state as string\n    } else if (error.errorKey) {\n      keySuffix = error.errorKey\n    }\n    return error.errors.flatMap(err => getFieldErrors(err, keyPrefix + keySuffix))\n  }\n  return []\n}\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n}: BaseComponentInterface<TResourceKey>) => {\n  const [error, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<FieldError[] | null>(null)\n  const throwError = useAsyncError()\n  const { t } = useTranslation()\n  const Components = useComponentContext()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  // Enhanced setError that also clears fieldErrors when error is cleared\n  const setErrorWithFieldsClear = useCallback((error: KnownErrors | null) => {\n    setError(error)\n    if (!error) {\n      setFieldErrors(null)\n    }\n  }, [])\n\n  const processError = (error: KnownErrors) => {\n    setError(error)\n    //422\tapplication/json - content relaited error\n    if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n      setFieldErrors(error.errors.flatMap(err => getFieldErrors(err)))\n    }\n  }\n\n  const baseSubmitHandler = useCallback(\n    async <T,>(data: T, componentHandler: SubmitHandler<T>) => {\n      setError(null)\n      setFieldErrors(null)\n      try {\n        await componentHandler(data)\n      } catch (err) {\n        if (\n          err instanceof APIError ||\n          err instanceof SDKValidationError ||\n          err instanceof UnprocessableEntityErrorObject\n        ) {\n          processError(err)\n        } else throwError(err)\n      }\n    },\n    [setError, throwError],\n  )\n\n  return (\n    <BaseContext.Provider\n      value={{\n        fieldErrors,\n        setError: setErrorWithFieldsClear,\n        onEvent,\n        throwError,\n        baseSubmitHandler,\n        LoadingIndicator: LoaderComponent,\n      }}\n    >\n      <QueryErrorResetBoundary>\n        {({ reset: resetQueries }) => (\n          <ErrorBoundary\n            FallbackComponent={FallbackComponent}\n            onReset={resetQueries}\n            onError={err => {\n              onEvent(componentEvents.ERROR, err)\n            }}\n          >\n            {(error || fieldErrors) && (\n              <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n                {fieldErrors && <Components.UnorderedList items={renderErrorList(fieldErrors)} />}\n                {error && error instanceof APIError && (\n                  <Components.Text>{error.message}</Components.Text>\n                )}\n                {error && error instanceof SDKValidationError && (\n                  <Components.Text as=\"pre\">{error.pretty()}</Components.Text>\n                )}\n              </Components.Alert>\n            )}\n            <Suspense fallback={<LoaderComponent />}>\n              <FadeIn>{children}</FadeIn>\n            </Suspense>\n          </ErrorBoundary>\n        )}\n      </QueryErrorResetBoundary>\n    </BaseContext.Provider>\n  )\n}\n"],"names":["renderErrorList","errorList","errorFromList","jsx","getFieldErrors","error","parentKey","keyPrefix","snakeCaseToCamelCase","keySuffix","err","BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","baseSubmitHandler","data","componentHandler","APIError","SDKValidationError","BaseContext","QueryErrorResetBoundary","resetQueries","jsxs","ErrorBoundary","componentEvents","Suspense","FadeIn"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,MAAMA,IAAkB,CAACC,MAChBA,EAAU,IAAI,CAAAC,MACfA,EAAc,UACT,gBAAAC,EAAC,MAAA,EAA4B,UAAAD,EAAc,QAAA,GAAlCA,EAAc,GAA4B,IAErD,IACR,GAKGE,IAAiB,CACrBC,GACAC,MACuC;AACvC,QAAMC,IAAYD,IAAYA,IAAY,MAAM;AAChD,MAAID,EAAM,aAAa,6BAA6BA,EAAM,aAAa;AACrE,WAAO;AAAA,MACL;AAAA,QACE,KAAKG,EAAqBD,IAAYF,EAAM,QAAQ;AAAA,QACpD,SAASA,EAAM,WAAW;AAAA,MAAA;AAAA,IAC5B;AAGJ,MAAIA,EAAM,aAAa,mBAAmBA,EAAM,WAAW,QAAW;AAEpE,QAAII,IAAY;AAEhB,WAAIJ,EAAM,UAAU,OAAO,OAAOA,EAAM,SAAS,OAAQ,WAEvDI,IAAYJ,EAAM,SAAS,MAElBA,EAAM,UAAU,SAAS,OAAOA,EAAM,SAAS,SAAU,WAElEI,IAAYJ,EAAM,SAAS,QAClBA,EAAM,aACfI,IAAYJ,EAAM,WAEbA,EAAM,OAAO,QAAQ,CAAAK,MAAON,EAAeM,GAAKH,IAAYE,CAAS,CAAC;AAAA,EAC/E;AACA,SAAO,CAAA;AACT,GAIaE,KAAgB,CAAyD;AAAA,EACpF,UAAAC;AAAA,EACA,mBAAAC,IAAoBC;AAAA,EACpB,iBAAiBC;AAAA,EACjB,SAAAC;AACF,MAA4C;AAC1C,QAAM,CAACX,GAAOY,CAAQ,IAAIC,EAA6B,IAAI,GACrD,CAACC,GAAaC,CAAc,IAAIF,EAA8B,IAAI,GAClEG,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAaC,EAAA,GAEb,EAAE,kBAAkBC,EAAA,IAAgCC,EAAA,GAEpDC,IAAkBd,KAA6BY,GAG/CG,IAA0BC,EAAY,CAAC1B,MAA8B;AACzE,IAAAY,EAASZ,CAAK,GACTA,KACHe,EAAe,IAAI;AAAA,EAEvB,GAAG,CAAA,CAAE,GAECY,IAAe,CAAC3B,MAAuB;AAC3C,IAAAY,EAASZ,CAAK,GAEVA,aAAiB4B,KAAkC,MAAM,QAAQ5B,EAAM,MAAM,KAC/Ee,EAAef,EAAM,OAAO,QAAQ,OAAOD,EAAeM,CAAG,CAAC,CAAC;AAAA,EAEnE,GAEMwB,IAAoBH;AAAA,IACxB,OAAWI,GAASC,MAAuC;AACzD,MAAAnB,EAAS,IAAI,GACbG,EAAe,IAAI;AACnB,UAAI;AACF,cAAMgB,EAAiBD,CAAI;AAAA,MAC7B,SAASzB,GAAK;AACZ,QACEA,aAAe2B,KACf3B,aAAe4B,KACf5B,aAAeuB,IAEfD,EAAatB,CAAG,MACAA,CAAG;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAACO,GAAUI,CAAU;AAAA,EAAA;AAGvB,SACE,gBAAAlB;AAAA,IAACoC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,aAAApB;AAAA,QACA,UAAUW;AAAA,QACV,SAAAd;AAAA,QACA,YAAAK;AAAA,QACA,mBAAAa;AAAA,QACA,kBAAkBL;AAAA,MAAA;AAAA,MAGpB,4BAACW,GAAA,EACE,UAAA,CAAC,EAAE,OAAOC,QACT,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,mBAAA9B;AAAA,UACA,SAAS4B;AAAA,UACT,SAAS,CAAA/B,MAAO;AACd,YAAAM,EAAQ4B,EAAgB,OAAOlC,CAAG;AAAA,UACpC;AAAA,UAEE,UAAA;AAAA,aAAAL,KAASc,MACT,gBAAAuB,EAACjB,EAAW,OAAX,EAAiB,OAAOF,EAAE,yBAAyB,GAAG,QAAO,SAC3D,UAAA;AAAA,cAAAJ,uBAAgBM,EAAW,eAAX,EAAyB,OAAOzB,EAAgBmB,CAAW,GAAG;AAAA,cAC9Ed,KAASA,aAAiBgC,KACzB,gBAAAlC,EAACsB,EAAW,MAAX,EAAiB,YAAM,SAAQ;AAAA,cAEjCpB,KAASA,aAAiBiC,KACzB,gBAAAnC,EAACsB,EAAW,MAAX,EAAgB,IAAG,OAAO,UAAApB,EAAM,OAAA,EAAO,CAAE;AAAA,YAAA,GAE9C;AAAA,YAEF,gBAAAF,EAAC0C,KAAS,UAAU,gBAAA1C,EAAC0B,KAAgB,GACnC,UAAA,gBAAA1B,EAAC2C,GAAA,EAAQ,UAAAlC,EAAA,CAAS,EAAA,CACpB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EACF,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,41 +1,41 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import m from "./DataCards.module.scss.js";
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import d from "./DataCards.module.scss.js";
 import { Flex as C } from "../../Flex/Flex.js";
 import { useComponentContext as v } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-const u = ({
-  data: l,
+const D = ({
+  data: o,
   columns: h,
-  itemMenu: o,
-  onSelect: s,
+  itemMenu: s,
+  onSelect: a,
   emptyState: c,
-  footer: a
+  footer: m
 }) => {
-  const t = v();
-  return /* @__PURE__ */ d("div", { role: "list", "data-testid": "data-cards", children: [
-    l.length === 0 && c && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(t.Card, { children: c() }) }),
-    l.map((i, n) => /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(
-      t.Card,
+  const i = v();
+  return /* @__PURE__ */ n("div", { role: "list", "data-testid": "data-cards", children: [
+    o.length === 0 && c && /* @__PURE__ */ r("div", { role: "listitem", children: /* @__PURE__ */ r(i.Card, { children: c() }) }),
+    o.map((t, l) => /* @__PURE__ */ r("div", { role: "listitem", children: /* @__PURE__ */ r(
+      i.Card,
       {
-        menu: o && o(i),
-        onSelect: s ? (r) => {
-          s(i, r);
+        menu: s && s(t),
+        onSelect: a ? (e) => {
+          a(t, e);
         } : void 0,
-        children: h.map((r, p) => /* @__PURE__ */ d(C, { flexDirection: "column", gap: 0, children: [
-          /* @__PURE__ */ e("h5", { className: m.columnTitle, children: r.title }),
-          /* @__PURE__ */ d("div", { className: m.columnData, children: [
+        children: h.map((e, p) => /* @__PURE__ */ n(C, { flexDirection: "column", gap: 0, children: [
+          e.title && /* @__PURE__ */ r("h5", { className: d.columnTitle, children: e.title }),
+          /* @__PURE__ */ n("div", { className: d.columnData, children: [
             " ",
-            r.render ? r.render(i) : String(i[r.key])
+            e.render ? e.render(t) : String(t[e.key])
           ] })
         ] }, p))
       }
-    ) }, n)),
-    a && /* @__PURE__ */ e("div", { role: "listitem", children: /* @__PURE__ */ e(t.Card, { children: (() => {
-      const i = a();
-      return Object.entries(i).map(([n, r]) => /* @__PURE__ */ e("div", { children: r }, n));
+    ) }, l)),
+    m && /* @__PURE__ */ r("div", { role: "listitem", children: /* @__PURE__ */ r(i.Card, { children: (() => {
+      const t = m();
+      return Object.entries(t).map(([l, e]) => /* @__PURE__ */ r("div", { className: d.footerItem, children: e }, l));
     })() }) })
   ] });
 };
 export {
-  u as DataCards
+  D as DataCards
 };
 //# sourceMappingURL=DataCards.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataCards.js","sources":["../../../../../src/components/Common/DataView/DataCards/DataCards.tsx"],"sourcesContent":["import styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn } from '@/components/Common/DataView/useDataView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  return (\n    <div role=\"list\" data-testid=\"data-cards\">\n      {data.length === 0 && emptyState && (\n        <div role=\"listitem\">\n          <Components.Card>{emptyState()}</Components.Card>\n        </div>\n      )}\n      {data.map((item, index) => (\n        <div role=\"listitem\" key={index}>\n          <Components.Card\n            menu={itemMenu && itemMenu(item)}\n            onSelect={\n              onSelect\n                ? (checked: boolean) => {\n                    onSelect(item, checked)\n                  }\n                : undefined\n            }\n          >\n            {columns.map((column, index) => (\n              <Flex key={index} flexDirection=\"column\" gap={0}>\n                <h5 className={styles.columnTitle}>{column.title}</h5>\n                <div className={styles.columnData}>\n                  {' '}\n                  {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                </div>\n              </Flex>\n            ))}\n          </Components.Card>\n        </div>\n      ))}\n      {footer && (\n        <div role=\"listitem\">\n          <Components.Card>\n            {(() => {\n              const footerContent = footer()\n\n              // Footer content is always an object with column keys\n              return Object.entries(footerContent).map(([key, content]) => (\n                <div key={key}>{content}</div>\n              ))\n            })()}\n          </Components.Card>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","emptyState","footer","Components","useComponentContext","jsxs","jsx","item","index","checked","column","Flex","styles","footerContent","key","content"],"mappings":";;;;AAcO,MAAMA,IAAY,CAAK;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAAC,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAAR,EAAK,WAAW,KAAKI,KACpB,gBAAAK,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACH,EAAW,MAAX,EAAiB,UAAAF,EAAA,GAAa,GACjC;AAAA,IAEDJ,EAAK,IAAI,CAACU,GAAMC,MACf,gBAAAF,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA;AAAA,MAACH,EAAW;AAAA,MAAX;AAAA,QACC,MAAMJ,KAAYA,EAASQ,CAAI;AAAA,QAC/B,UACEP,IACI,CAACS,MAAqB;AACpB,UAAAT,EAASO,GAAME,CAAO;AAAA,QACxB,IACA;AAAA,QAGL,UAAAX,EAAQ,IAAI,CAACY,GAAQF,wBACnBG,GAAA,EAAiB,eAAc,UAAS,KAAK,GAC5C,UAAA;AAAA,UAAA,gBAAAL,EAAC,MAAA,EAAG,WAAWM,EAAO,aAAc,YAAO,OAAM;AAAA,UACjD,gBAAAP,EAAC,OAAA,EAAI,WAAWO,EAAO,YACpB,UAAA;AAAA,YAAA;AAAA,YACAF,EAAO,SAASA,EAAO,OAAOH,CAAI,IAAI,OAAOA,EAAKG,EAAO,GAAc,CAAC;AAAA,UAAA,EAAA,CAC3E;AAAA,QAAA,EAAA,GALSF,CAMX,CACD;AAAA,MAAA;AAAA,IAAA,EACH,GApBwBA,CAqB1B,CACD;AAAA,IACAN,uBACE,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAI,EAACH,EAAW,MAAX,EACG,WAAA,MAAM;AACN,YAAMU,IAAgBX,EAAA;AAGtB,aAAO,OAAO,QAAQW,CAAa,EAAE,IAAI,CAAC,CAACC,GAAKC,CAAO,MACrD,gBAAAT,EAAC,OAAA,EAAe,UAAAS,EAAA,GAAND,CAAc,CACzB;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 styles from './DataCards.module.scss'\nimport type { useDataViewPropReturn } from '@/components/Common/DataView/useDataView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataCardsProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n}\n\nexport const DataCards = <T,>({\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n}: DataCardsProps<T>) => {\n  const Components = useComponentContext()\n  return (\n    <div role=\"list\" data-testid=\"data-cards\">\n      {data.length === 0 && emptyState && (\n        <div role=\"listitem\">\n          <Components.Card>{emptyState()}</Components.Card>\n        </div>\n      )}\n      {data.map((item, index) => (\n        <div role=\"listitem\" key={index}>\n          <Components.Card\n            menu={itemMenu && itemMenu(item)}\n            onSelect={\n              onSelect\n                ? (checked: boolean) => {\n                    onSelect(item, checked)\n                  }\n                : undefined\n            }\n          >\n            {columns.map((column, index) => (\n              <Flex key={index} flexDirection=\"column\" gap={0}>\n                {column.title && <h5 className={styles.columnTitle}>{column.title}</h5>}\n                <div className={styles.columnData}>\n                  {' '}\n                  {column.render ? column.render(item) : String(item[column.key as keyof T])}\n                </div>\n              </Flex>\n            ))}\n          </Components.Card>\n        </div>\n      ))}\n      {footer && (\n        <div role=\"listitem\">\n          <Components.Card>\n            {(() => {\n              const footerContent = footer()\n\n              // Footer content is always an object with column keys\n              return Object.entries(footerContent).map(([key, content]) => (\n                <div key={key} className={styles.footerItem}>\n                  {content}\n                </div>\n              ))\n            })()}\n          </Components.Card>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["DataCards","data","columns","itemMenu","onSelect","emptyState","footer","Components","useComponentContext","jsxs","jsx","item","index","checked","column","Flex","styles","footerContent","key","content"],"mappings":";;;;AAcO,MAAMA,IAAY,CAAK;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AACF,MAAyB;AACvB,QAAMC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAAC,OAAA,EAAI,MAAK,QAAO,eAAY,cAC1B,UAAA;AAAA,IAAAR,EAAK,WAAW,KAAKI,KACpB,gBAAAK,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA,EAACH,EAAW,MAAX,EAAiB,UAAAF,EAAA,GAAa,GACjC;AAAA,IAEDJ,EAAK,IAAI,CAACU,GAAMC,MACf,gBAAAF,EAAC,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAA;AAAA,MAACH,EAAW;AAAA,MAAX;AAAA,QACC,MAAMJ,KAAYA,EAASQ,CAAI;AAAA,QAC/B,UACEP,IACI,CAACS,MAAqB;AACpB,UAAAT,EAASO,GAAME,CAAO;AAAA,QACxB,IACA;AAAA,QAGL,UAAAX,EAAQ,IAAI,CAACY,GAAQF,wBACnBG,GAAA,EAAiB,eAAc,UAAS,KAAK,GAC3C,UAAA;AAAA,UAAAD,EAAO,SAAS,gBAAAJ,EAAC,MAAA,EAAG,WAAWM,EAAO,aAAc,YAAO,MAAA,CAAM;AAAA,UAClE,gBAAAP,EAAC,OAAA,EAAI,WAAWO,EAAO,YACpB,UAAA;AAAA,YAAA;AAAA,YACAF,EAAO,SAASA,EAAO,OAAOH,CAAI,IAAI,OAAOA,EAAKG,EAAO,GAAc,CAAC;AAAA,UAAA,EAAA,CAC3E;AAAA,QAAA,EAAA,GALSF,CAMX,CACD;AAAA,MAAA;AAAA,IAAA,EACH,GApBwBA,CAqB1B,CACD;AAAA,IACAN,uBACE,OAAA,EAAI,MAAK,YACR,UAAA,gBAAAI,EAACH,EAAW,MAAX,EACG,WAAA,MAAM;AACN,YAAMU,IAAgBX,EAAA;AAGtB,aAAO,OAAO,QAAQW,CAAa,EAAE,IAAI,CAAC,CAACC,GAAKC,CAAO,wBACpD,OAAA,EAAc,WAAWH,EAAO,YAC9B,UAAAG,EAAA,GADOD,CAEV,CACD;AAAA,IACH,GAAA,GACF,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -1,10 +1,12 @@
-const t = "_columnTitle_1rhjs_1", l = "_columnData_1rhjs_8", o = {
+const t = "_columnTitle_13axu_1", o = "_columnData_13axu_8", e = "_footerItem_13axu_13", a = {
   columnTitle: t,
-  columnData: l
+  columnData: o,
+  footerItem: e
 };
 export {
-  l as columnData,
+  o as columnData,
   t as columnTitle,
-  o as default
+  a as default,
+  e as footerItem
 };
 //# sourceMappingURL=DataCards.module.scss.js.map

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

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

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

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

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

@@ -1,54 +1,55 @@
 import { jsx as l } from "react/jsx-runtime";
-import { useTranslation as $ } from "react-i18next";
-import { useComponentContext as g } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { VisuallyHidden as b } from "../../VisuallyHidden/VisuallyHidden.js";
-function D(a, r) {
+import { useTranslation as g } from "react-i18next";
+import { useComponentContext as D } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { VisuallyHidden as h } from "../../VisuallyHidden/VisuallyHidden.js";
+function m(s, r) {
   if (r.render)
-    return r.render(a);
+    return r.render(s);
   if (r.key) {
     const n = r.key;
-    return String(a[n] ?? "");
+    return String(s[n] ?? "");
   }
   return "";
 }
-const x = ({
-  label: a,
+const F = ({
+  label: s,
   data: r,
   columns: n,
-  itemMenu: s,
-  onSelect: c,
-  emptyState: f,
-  footer: k
+  itemMenu: c,
+  onSelect: a,
+  emptyState: d,
+  footer: f,
+  variant: b
 }) => {
-  const p = g(), { t: d } = $("common"), h = [
-    ...c ? [
+  const p = D(), { t: k } = g("common"), u = [
+    ...a ? [
       {
         key: "select-header",
-        content: /* @__PURE__ */ l(b, { children: d("table.selectRowHeader") })
+        content: /* @__PURE__ */ l(h, { children: k("table.selectRowHeader") })
       }
     ] : [],
     ...n.map((t, e) => ({
       key: typeof t.key == "string" ? t.key : `header-${e}`,
       content: t.title
     })),
-    ...s ? [
+    ...c ? [
       {
         key: "actions-header",
-        content: /* @__PURE__ */ l(b, { children: d("table.actionsColumnHeader") })
+        content: /* @__PURE__ */ l(h, { children: k("table.actionsColumnHeader") })
       }
     ] : []
-  ], u = r.map((t, e) => {
+  ], C = r.map((t, e) => {
     const i = [
-      ...c ? [
+      ...a ? [
         {
           key: `select-${e}`,
           content: /* @__PURE__ */ l(
             p.Checkbox,
             {
               onChange: (o) => {
-                c(t, o);
+                a(t, o);
               },
-              label: d("table.selectRowLabel"),
+              label: k("table.selectRowLabel"),
               shouldVisuallyHideLabel: !0
             }
           )
@@ -56,12 +57,12 @@ const x = ({
       ] : [],
       ...n.map((o, y) => ({
         key: typeof o.key == "string" ? o.key : `cell-${y}`,
-        content: D(t, o)
+        content: m(t, o)
       })),
-      ...s ? [
+      ...c ? [
         {
           key: `menu-${e}`,
-          content: s(t)
+          content: c(t)
         }
       ] : []
     ];
@@ -69,10 +70,10 @@ const x = ({
       key: `row-${e}`,
       data: i
     };
-  }), C = (() => {
-    if (!k) return;
-    const t = k(), e = [];
-    return c && e.push({
+  }), $ = (() => {
+    if (!f) return;
+    const t = f(), e = [];
+    return a && e.push({
       key: "footer-select",
       content: ""
     }), n.forEach((i, o) => {
@@ -81,7 +82,7 @@ const x = ({
         key: `footer-${y}`,
         content: t[y] || ""
       });
-    }), s && e.push({
+    }), c && e.push({
       key: "footer-actions",
       content: ""
     }), e;
@@ -89,16 +90,18 @@ const x = ({
   return /* @__PURE__ */ l(
     p.Table,
     {
-      "aria-label": a,
+      "aria-label": s,
       "data-testid": "data-table",
-      headers: h,
-      rows: u,
-      footer: C,
-      emptyState: f ? f() : void 0
+      headers: u,
+      rows: C,
+      footer: $,
+      emptyState: d ? d() : void 0,
+      variant: b,
+      hasCheckboxColumn: !!a
     }
   );
 };
 export {
-  x as DataTable
+  F as DataTable
 };
 //# sourceMappingURL=DataTable.js.map

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

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

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

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

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

@@ -1,36 +1,39 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
-import { useRef as d, useMemo as u } from "react";
+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 b } from "./DataTable/DataTable.js";
-import { DataCards as k } from "./DataCards/DataCards.js";
-import { useContainerBreakpoints as w } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-const V = ({
+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 = ({
   pagination: t,
   isFetching: s,
   breakAt: a = "small",
-  footer: i,
-  ...m
+  breakpoints: i,
+  footer: m,
+  variant: p,
+  ...c
 }) => {
-  const e = d(null), o = w({
-    ref: e
-  }), c = o.length > 0, r = !o.includes(a), l = u(() => r ? k : b, [r]);
-  return /* @__PURE__ */ p(
+  const e = b(null), o = h({
+    ref: e,
+    breakpoints: i
+  }), l = o.length > 0, r = !o.includes(a), f = k(() => r ? x : w, [r]);
+  return /* @__PURE__ */ u(
     "div",
     {
       "data-testid": "data-view",
       className: D.dataViewContainer,
-      ref: (f) => {
-        e.current = f;
+      ref: (d) => {
+        e.current = d;
       },
       children: [
-        c && /* @__PURE__ */ n(l, { ...m, footer: i }),
+        l && /* @__PURE__ */ n(f, { ...c, footer: m, variant: p }),
         t && /* @__PURE__ */ n(C, { ...t, isFetching: s })
       ]
     }
   );
 };
 export {
-  V as DataView
+  y as DataView
 };
 //# sourceMappingURL=DataView.js.map