@abgov/react-components 6.10.0-dev.8 → 6.10.0-next.1

package/index.mjs

@@ -10,30 +10,23 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _PublicFormController_instances, updateObjectListState_fn, dispatchError_fn;
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useEffect, useLayoutEffect, useState, useCallback } from "react";
-import { G, a } from "./icon-CoYGOp1V.mjs";
+import { t as transformProps, l as lowercase, k as kebab } from "./icon-CCNDGfBO.mjs";
+import { G, a } from "./icon-CCNDGfBO.mjs";
 function GoabAccordion({
   open,
-  heading,
-  headingSize,
-  secondaryText,
-  headingContent,
-  iconPosition,
-  maxWidth,
-  testId,
   onChange,
+  headingContent,
   children,
-  mt,
-  mr,
-  mb,
-  ml
+  ...rest
 }) {
   const ref = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     const element = ref.current;
     if (element && onChange) {
       const handler = (event) => {
         const customEvent = event;
-        onChange(customEvent.detail.open);
+        onChange == null ? void 0 : onChange(customEvent.detail.open);
       };
       element.addEventListener("_change", handler);
       return () => {
@@ -46,16 +39,7 @@ function GoabAccordion({
     {
       ref,
       open: open ? "true" : void 0,
-      headingsize: headingSize,
-      heading,
-      secondarytext: secondaryText,
-      iconposition: iconPosition,
-      maxwidth: maxWidth,
-      testid: testId,
-      mt,
-      mr,
-      mb,
-      ml,
+      ..._props,
       children: [
         headingContent && /* @__PURE__ */ jsx("div", { slot: "headingcontent", children: headingContent }),
         children
@@ -64,15 +48,12 @@ function GoabAccordion({
   );
 }
 function GoabAppHeader({
-  heading,
-  url,
-  maxContentWidth,
-  fullMenuBreakpoint,
-  testId,
+  onMenuClick,
   children,
-  onMenuClick
+  ...rest
 }) {
   const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (!el.current) {
       return;
@@ -82,7 +63,7 @@ function GoabAppHeader({
     }
     const current = el.current;
     const listener = () => {
-      onMenuClick();
+      onMenuClick == null ? void 0 : onMenuClick();
     };
     current.addEventListener("_menuClick", listener);
     return () => {
@@ -93,26 +74,18 @@ function GoabAppHeader({
     "goa-app-header",
     {
       ref: el,
-      heading,
-      url,
-      fullmenubreakpoint: fullMenuBreakpoint,
-      maxcontentwidth: maxContentWidth,
-      testid: testId,
       hasmenuclickhandler: onMenuClick ? "true" : "false",
+      ..._props,
       children
     }
   );
 }
-function GoabAppHeaderMenu(props) {
-  return /* @__PURE__ */ jsx(
-    "goa-app-header-menu",
-    {
-      heading: props.heading,
-      leadingicon: props.leadingIcon,
-      testid: props.testId,
-      children: props.children
-    }
-  );
+function GoabAppHeaderMenu({
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-header-menu", { ..._props, children });
 }
 function getIconValue(icon, iconType) {
   if (icon !== void 0) {
@@ -121,30 +94,17 @@ function getIconValue(icon, iconType) {
   return iconType ? "true" : "false";
 }
 function GoabBadge({
-  type,
-  content,
   icon,
-  testId,
-  mt,
-  mr,
-  mb,
-  ml,
-  ariaLabel,
-  iconType
+  iconType,
+  ...rest
 }) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsx(
     "goa-badge",
     {
-      type,
-      content,
       icon: getIconValue(icon, iconType),
-      testid: testId,
-      arialabel: ariaLabel,
       icontype: iconType,
-      mt,
-      mr,
-      mb,
-      ml
+      ..._props
     }
   );
 }
@@ -248,45 +208,27 @@ function GoabEmergencyBadge({
     }
   );
 }
-function GoabBlock(props) {
-  return /* @__PURE__ */ jsx(
-    "goa-block",
-    {
-      gap: props.gap,
-      direction: props.direction,
-      alignment: props.alignment,
-      width: props.width,
-      "min-width": props.minWidth,
-      "max-width": props.maxWidth,
-      mt: props.mt,
-      mr: props.mr,
-      mb: props.mb,
-      ml: props.ml,
-      testid: props.testId,
-      children: props.children
-    }
+function GoabBlock({
+  testId,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(
+    { testid: testId, ...rest },
+    kebab
   );
+  return /* @__PURE__ */ jsx("goa-block", { ..._props, children });
 }
 function GoabButton({
   disabled,
-  type,
-  size,
-  variant,
-  leadingIcon,
-  trailingIcon,
-  width,
-  testId,
-  children,
   onClick,
-  mt,
-  mr,
-  mb,
-  ml,
-  action,
   actionArgs,
-  actionArg
+  actionArg,
+  children,
+  ...rest
 }) {
   const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (!el.current) {
       return;
@@ -296,7 +238,7 @@ function GoabButton({
     }
     const current = el.current;
     const listener = () => {
-      onClick();
+      onClick == null ? void 0 : onClick();
     };
     current.addEventListener("_click", listener);
     return () => {
@@ -307,62 +249,30 @@ function GoabButton({
     "goa-button",
     {
       ref: el,
-      type,
-      size,
-      variant,
       disabled: disabled ? "true" : void 0,
-      leadingicon: leadingIcon,
-      trailingicon: trailingIcon,
-      width,
-      testid: testId,
-      action,
       "action-arg": actionArg,
       "action-args": JSON.stringify(actionArgs),
-      mt,
-      mr,
-      mb,
-      ml,
+      ..._props,
       children
     }
   );
 }
 function GoabButtonGroup({
-  alignment,
-  gap,
-  testId,
   children,
-  mt,
-  mr,
-  mb,
-  ml
+  ...rest
 }) {
-  return /* @__PURE__ */ jsx(
-    "goa-button-group",
-    {
-      alignment,
-      gap,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId,
-      children
-    }
-  );
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-button-group", { ..._props, children });
 }
 function GoabCalendar({
-  name,
-  value,
   min,
   max,
-  testId,
-  mt,
-  mr,
-  mb,
-  ml,
-  onChange
+  onChange,
+  name,
+  ...rest
 }) {
   const ref = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -384,72 +294,41 @@ function GoabCalendar({
     {
       ref,
       name,
-      value,
       min: min || void 0,
       max: max || void 0,
-      testid: testId,
-      mt,
-      mr,
-      mb,
-      ml
+      ..._props
     }
   );
 }
 const GoabCallout = ({
-  heading,
   type = "information",
   iconTheme = "outline",
   size = "large",
-  maxWidth,
-  testId,
   ariaLive = "off",
   children,
-  mt,
-  mr,
-  mb,
-  ml
+  ...rest
 }) => {
-  return /* @__PURE__ */ jsx(
-    "goa-callout",
-    {
-      heading,
-      type,
-      size,
-      maxwidth: maxWidth,
-      arialive: ariaLive,
-      icontheme: iconTheme,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId,
-      children
-    }
+  const _props = transformProps(
+    { type, icontheme: iconTheme, size, arialive: ariaLive, ...rest },
+    lowercase
   );
+  return /* @__PURE__ */ jsx("goa-callout", { ..._props, children });
 };
 function GoabCheckbox({
-  id,
-  name,
-  testId,
   error,
-  disabled,
   checked,
   indeterminate,
+  disabled,
   value,
-  text,
   description,
   reveal,
-  revealAriaLabel,
-  maxWidth,
-  children,
   onChange,
-  ariaLabel,
-  mt,
-  mr,
-  mb,
-  ml
+  name,
+  children,
+  ...rest
 }) {
   const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (!el.current) {
       return;
@@ -457,7 +336,7 @@ function GoabCheckbox({
     const current = el.current;
     const listener = (e) => {
       const detail = e.detail;
-      onChange == null ? void 0 : onChange(detail);
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
     current.addEventListener("_change", listener);
     return () => {
@@ -467,24 +346,15 @@ function GoabCheckbox({
   return /* @__PURE__ */ jsxs(
     "goa-checkbox",
     {
-      testid: testId,
       ref: el,
-      id,
+      ..._props,
       name,
       error: error ? "true" : void 0,
       checked: checked ? "true" : void 0,
       indeterminate: indeterminate ? "true" : void 0,
       disabled: disabled ? "true" : void 0,
-      text,
       value: typeof value === "boolean" ? value ? "true" : void 0 : value,
-      arialabel: ariaLabel,
-      revealarialabel: revealAriaLabel,
       description: typeof description === "string" ? description : void 0,
-      maxwidth: maxWidth,
-      mt,
-      mr,
-      mb,
-      ml,
       children: [
         children,
         typeof description !== "string" && description && /* @__PURE__ */ jsx("div", { slot: "description", children: description }),
@@ -514,7 +384,7 @@ function GoabCheckboxList({
     const listener = (e) => {
       try {
         const detail = e.detail;
-        onChange == null ? void 0 : onChange(detail);
+        onChange == null ? void 0 : onChange({ ...detail, event: e });
       } catch (error2) {
         console.error("Error handling checkbox list change:", error2);
       }
@@ -551,26 +421,19 @@ function GoabCheckboxList({
   );
 }
 const GoabChip = ({
-  leadingIcon,
-  iconTheme,
-  deletable,
   error,
-  variant,
-  content,
+  deletable,
   onClick,
-  mt,
-  mr,
-  mb,
-  ml,
-  testId
+  ...rest
 }) => {
   const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (!el.current) return;
     if (!onClick) return;
     const current = el.current;
     const listener = () => {
-      onClick();
+      onClick == null ? void 0 : onClick();
     };
     current.addEventListener("_click", listener);
     return () => {
@@ -581,17 +444,9 @@ const GoabChip = ({
     "goa-chip",
     {
       ref: el,
-      leadingicon: leadingIcon,
-      icontheme: iconTheme,
       error: error ? "true" : void 0,
       deletable: deletable ? "true" : void 0,
-      content,
-      variant,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId
+      ..._props
     }
   );
 };
@@ -616,61 +471,48 @@ const GoabCircularProgress = ({
   );
 };
 function GoabContainer({
-  accent,
   heading,
   title,
-  padding,
-  children,
   actions,
-  type,
-  width,
-  maxWidth,
-  mt,
-  mr,
-  mb,
-  ml,
-  testId
+  children,
+  ...rest
 }) {
+  const _props = transformProps(rest, lowercase);
   const headingContent = heading || title;
-  return /* @__PURE__ */ jsxs(
-    "goa-container",
+  return /* @__PURE__ */ jsxs("goa-container", { ..._props, children: [
+    headingContent && /* @__PURE__ */ jsx("div", { slot: "title", children: headingContent }),
+    children,
+    actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions })
+  ] });
+}
+function GoabDataGrid({
+  keyboardIconVisibility = "visible",
+  keyboardIconPosition = "left",
+  keyboardNav,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-data-grid",
     {
-      type,
-      padding,
-      accent,
-      width,
-      maxwidth: maxWidth,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId,
-      children: [
-        headingContent && /* @__PURE__ */ jsx("div", { slot: "title", children: headingContent }),
-        children,
-        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions })
-      ]
+      "keyboard-icon-visibility": keyboardIconVisibility,
+      "keyboard-icon-position": keyboardIconPosition,
+      "keyboard-nav": keyboardNav,
+      children
     }
   );
 }
 function GoabDatePicker({
-  name,
   value,
   error,
   min,
   max,
-  testId,
   disabled,
-  type,
-  mt,
-  mr,
-  mb,
-  ml,
   relative,
-  width,
-  onChange
+  onChange,
+  ...rest
 }) {
   const ref = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (value && typeof value !== "string") {
       console.warn("Using a `Date` type for value is deprecated. Instead use a string of the format `yyyy-mm-dd`");
@@ -683,7 +525,7 @@ function GoabDatePicker({
     const current = ref.current;
     const handleChange = (e) => {
       const detail = e.detail;
-      onChange == null ? void 0 : onChange(detail);
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
     if (onChange) {
       current.addEventListener("_change", handleChange);
@@ -694,47 +536,39 @@ function GoabDatePicker({
       }
     };
   }, [onChange]);
-  const formatValue = (value2) => {
-    if (!value2) return "";
-    if (value2 instanceof Date) {
-      return value2.toISOString();
+  const formatValue = (val) => {
+    if (!val) return "";
+    if (val instanceof Date) {
+      return val.toISOString();
     }
-    return value2;
+    return val;
   };
   return /* @__PURE__ */ jsx(
     "goa-date-picker",
     {
       ref,
-      name,
       value: formatValue(value) || void 0,
-      type,
       error: error ? "true" : void 0,
       disabled: disabled ? "true" : void 0,
       min: formatValue(min) || void 0,
       max: formatValue(max) || void 0,
-      testid: testId,
-      mt,
-      mr,
-      mb,
-      ml,
       relative: relative ? "true" : void 0,
-      width
+      ..._props
     }
   );
 }
-function GoabDetails(props) {
+function GoabDetails({
+  open,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsx(
     "goa-details",
     {
-      heading: props.heading,
-      open: props.open ? "true" : void 0,
-      maxwidth: props.maxWidth,
-      testid: props.testId,
-      mt: props.mt,
-      mr: props.mr,
-      mb: props.mb,
-      ml: props.ml,
-      children: props.children
+      open: open ? "true" : void 0,
+      ..._props,
+      children
     }
   );
 }
@@ -759,54 +593,51 @@ function stringify(value) {
   }
   return JSON.stringify(value);
 }
-function GoabDropdown(props) {
+function GoabDropdown({
+  value,
+  onChange,
+  disabled,
+  error,
+  filterable,
+  multiselect,
+  native,
+  relative,
+  children,
+  ...rest
+}) {
   const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (!el.current) {
       return;
     }
     const current = el.current;
     const handler = (e) => {
-      var _a;
       const detail = e.detail;
-      (_a = props.onChange) == null ? void 0 : _a.call(props, detail);
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
-    if (props.onChange) {
+    if (onChange) {
       current.addEventListener("_change", handler);
     }
     return () => {
-      if (props.onChange) {
+      if (onChange) {
         current.removeEventListener("_change", handler);
       }
     };
-  }, [el, props]);
+  }, [el, onChange]);
   return /* @__PURE__ */ jsx(
     "goa-dropdown",
     {
       ref: el,
-      name: props.name,
-      value: stringify(props.value),
-      arialabel: props.ariaLabel,
-      arialabelledby: props.ariaLabelledBy,
-      disabled: props.disabled ? "true" : void 0,
-      error: props.error ? "true" : void 0,
-      filterable: props.filterable ? "true" : void 0,
-      leadingicon: props.leadingIcon,
-      maxheight: props.maxHeight,
-      mb: props.mb,
-      ml: props.ml,
-      mr: props.mr,
-      mt: props.mt,
-      multiselect: props.multiselect ? "true" : void 0,
-      native: props.native ? "true" : void 0,
-      placeholder: props.placeholder,
-      testid: props.testId,
-      width: props.width,
-      maxwidth: props.maxWidth,
-      relative: props.relative ? "true" : void 0,
-      autocomplete: props.autoComplete,
-      id: props.id,
-      children: props.children
+      value: stringify(value),
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      filterable: filterable ? "true" : void 0,
+      multiselect: multiselect ? "true" : void 0,
+      native: native ? "true" : void 0,
+      relative: relative ? "true" : void 0,
+      ..._props,
+      children
     }
   );
 }
@@ -835,111 +666,75 @@ function GoabDropdownItem({
   );
 }
 function GoabFileUploadCard({
-  filename,
-  size,
-  type,
-  progress,
-  error,
-  testId,
   onDelete,
-  onCancel
+  onCancel,
+  filename,
+  ...rest
 }) {
   const el = useRef(null);
+  const _props = transformProps({ filename, ...rest }, lowercase);
   useEffect(() => {
     if (!el.current) return;
     const current = el.current;
-    const deleteHandler = () => onDelete == null ? void 0 : onDelete({ filename });
-    const cancelHandler = () => onCancel == null ? void 0 : onCancel({ filename });
+    const deleteHandler = (event) => onDelete == null ? void 0 : onDelete({ filename, event });
+    const cancelHandler = (event) => onCancel == null ? void 0 : onCancel({ filename, event });
     current.addEventListener("_delete", deleteHandler);
     current.addEventListener("_cancel", cancelHandler);
     return () => {
       current.removeEventListener("_delete", deleteHandler);
       current.removeEventListener("_cancel", cancelHandler);
     };
-  }, [el, onDelete, onCancel]);
-  return /* @__PURE__ */ jsx(
-    "goa-file-upload-card",
-    {
-      ref: el,
-      filename,
-      size,
-      type,
-      progress,
-      error,
-      testid: testId
-    }
-  );
+  }, [el, onDelete, onCancel, filename]);
+  return /* @__PURE__ */ jsx("goa-file-upload-card", { ref: el, ..._props });
 }
 function GoabFileUploadInput({
-  variant,
-  accept,
-  maxFileSize,
-  testId,
-  onSelectFile
+  onSelectFile,
+  ...rest
 }) {
   const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (!el.current) return;
     const current = el.current;
     const handler = (e) => {
       const detail = e.detail;
-      onSelectFile(detail);
+      onSelectFile({ ...detail, event: e });
     };
     current.addEventListener("_selectFile", handler);
     return () => {
       current.removeEventListener("_selectFile", handler);
     };
   }, [el, onSelectFile]);
-  return /* @__PURE__ */ jsx(
-    "goa-file-upload-input",
-    {
-      ref: el,
-      variant,
-      accept,
-      maxfilesize: maxFileSize,
-      testid: testId
-    }
-  );
+  return /* @__PURE__ */ jsx("goa-file-upload-input", { ref: el, ..._props });
 }
 function GoabAppFooter({
-  maxContentWidth,
   children,
-  testId,
-  url
+  ...rest
 }) {
-  return /* @__PURE__ */ jsx("goa-app-footer", { maxcontentwidth: maxContentWidth, testid: testId, url, children });
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-footer", { ..._props, children });
 }
 function GoabAppFooterMetaSection({
-  testId,
-  children
+  children,
+  ...rest
 }) {
-  return /* @__PURE__ */ jsx("goa-app-footer-meta-section", { testid: testId, slot: "meta", children });
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-footer-meta-section", { slot: "meta", ..._props, children });
 }
 function GoabAppFooterNavSection({
-  heading,
-  maxColumnCount = 1,
-  testId,
-  children
+  children,
+  ...rest
 }) {
-  return /* @__PURE__ */ jsx(
-    "goa-app-footer-nav-section",
-    {
-      slot: "nav",
-      heading,
-      maxcolumncount: maxColumnCount,
-      testid: testId,
-      children
-    }
-  );
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-footer-nav-section", { slot: "nav", ..._props, children });
 }
 function GoabFieldset({
-  id,
-  sectionTitle,
-  dispatchOn,
   onContinue,
-  children
+  children,
+  ...rest
 }) {
   const ref = useRef(null);
+  const _props = transformProps(rest, kebab);
   useEffect(() => {
     if (!ref.current) return;
     const current = ref.current;
@@ -956,35 +751,15 @@ function GoabFieldset({
       }
     };
   }, [ref, onContinue]);
-  return /* @__PURE__ */ jsx(
-    "goa-fieldset",
-    {
-      ref,
-      id,
-      "section-title": sectionTitle,
-      "dispatch-on": dispatchOn,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("goa-fieldset", { ref, ..._props, children });
 }
 function GoabPublicFormPage({
-  id = "",
-  heading = "",
-  subHeading = "",
-  summaryHeading = "",
-  sectionTitle = "",
-  backUrl = "",
-  type = "step",
-  buttonText = "",
-  buttonVisibility = "visible",
   onContinue,
   children,
-  mt,
-  mr,
-  mb,
-  ml
+  ...rest
 }) {
   const ref = useRef(null);
+  const _props = transformProps(rest, kebab);
   useEffect(() => {
     if (!ref.current) return;
     const current = ref.current;
@@ -1000,49 +775,28 @@ function GoabPublicFormPage({
       }
     };
   }, [ref, onContinue]);
-  return /* @__PURE__ */ jsx(
-    "goa-public-form-page",
-    {
-      ref,
-      id,
-      heading,
-      "sub-heading": subHeading,
-      "section-title": sectionTitle,
-      "back-url": backUrl,
-      type,
-      "button-text": buttonText,
-      "button-visibility": buttonVisibility,
-      "summary-heading": summaryHeading,
-      mt,
-      mr,
-      mb,
-      ml,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("goa-public-form-page", { ref, ..._props, children });
 }
 function GoabPublicFormSummary({
-  heading = ""
+  heading = "",
+  ...rest
 }) {
-  const ref = useRef(null);
-  return /* @__PURE__ */ jsx(
-    "goa-public-form-summary",
-    {
-      ref,
-      heading
-    }
+  const _props = transformProps(
+    { heading, ...rest },
+    lowercase
   );
+  return /* @__PURE__ */ jsx("goa-public-form-summary", { ..._props });
 }
 function GoabPublicForm({
-  status = "complete",
-  name,
   onInit,
   onComplete,
   onStateChange,
-  children
+  children,
+  ...rest
 }) {
   const ref = useRef(null);
   const initialized = useRef(false);
+  const _props = transformProps(rest, lowercase);
   useLayoutEffect(() => {
     if (!ref.current) return;
     const current = ref.current;
@@ -1078,15 +832,7 @@ function GoabPublicForm({
       }
     };
   }, [onInit, onComplete, onStateChange]);
-  return /* @__PURE__ */ jsx(
-    "goa-public-form",
-    {
-      ref,
-      status,
-      name,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("goa-public-form", { ref, ..._props, children });
 }
 function GoabPublicSubform({
   id = "",
@@ -1095,12 +841,13 @@ function GoabPublicSubform({
   onInit,
   onStateChange,
   children,
-  mt,
-  mr,
-  mb,
-  ml
+  ...rest
 }) {
   const ref = useRef(null);
+  const _props = transformProps(
+    { id, name, "continue-msg": continueMsg, ...rest },
+    kebab
+  );
   useEffect(() => {
     if (!ref.current) return;
     const current = ref.current;
@@ -1125,20 +872,7 @@ function GoabPublicSubform({
       }
     };
   }, [ref, onInit, onStateChange]);
-  return /* @__PURE__ */ jsx(
-    "goa-public-subform",
-    {
-      ref,
-      id,
-      name,
-      "continue-msg": continueMsg,
-      mt,
-      mr,
-      mb,
-      ml,
-      children
-    }
-  );
+  return /* @__PURE__ */ jsx("goa-public-subform", { ref, ..._props, children });
 }
 function GoabPublicSubformIndex({
   heading = "",
@@ -1146,86 +880,47 @@ function GoabPublicSubformIndex({
   actionButtonText = "",
   buttonVisibility = "hidden",
   children,
-  mt,
-  mr,
-  mb,
-  ml
+  ...rest
 }) {
-  const ref = useRef(null);
-  return /* @__PURE__ */ jsx(
-    "goa-public-subform-index",
-    {
-      ref,
-      heading,
-      "section-title": sectionTitle,
-      "action-button-text": actionButtonText,
-      "button-visibility": buttonVisibility,
-      slot: "subform-index",
-      mt,
-      mr,
-      mb,
-      ml,
-      children
-    }
+  const _props = transformProps(
+    { heading, "section-title": sectionTitle, "action-button-text": actionButtonText, "button-visibility": buttonVisibility, ...rest },
+    kebab
   );
+  return /* @__PURE__ */ jsx("goa-public-subform-index", { slot: "subform-index", ..._props, children });
 }
-function GoabPublicFormTask({ status = "cannot-start", children }) {
-  return /* @__PURE__ */ jsx("goa-public-form-task", { status, children });
+function GoabPublicFormTask({
+  status = "cannot-start",
+  children,
+  ...rest
+}) {
+  const _props = transformProps(
+    { status, ...rest },
+    lowercase
+  );
+  return /* @__PURE__ */ jsx("goa-public-form-task", { ..._props, children });
 }
 function GoabPublicFormTaskList({
-  heading = "",
   children,
-  mt,
-  mr,
-  mb,
-  ml
+  ...rest
 }) {
-  return /* @__PURE__ */ jsx(
-    "goa-public-form-task-list",
-    {
-      heading,
-      mt,
-      mr,
-      mb,
-      ml,
-      children
-    }
-  );
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-public-form-task-list", { ..._props, children });
 }
 function GoabFormItem({
-  children,
-  helpText,
   error,
-  requirement,
-  label,
-  labelSize,
-  maxWidth,
+  helpText,
   publicFormSummaryOrder,
-  name,
-  mt,
-  mr,
-  mb,
-  ml,
-  testId,
-  id
+  children,
+  ...rest
 }) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxs(
     "goa-form-item",
     {
-      label,
-      labelsize: labelSize,
       error: typeof error === "string" ? error : void 0,
-      requirement,
       helptext: typeof helpText === "string" ? helpText : void 0,
-      maxwidth: maxWidth,
       "public-form-summary-order": publicFormSummaryOrder,
-      name,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId,
-      id,
+      ..._props,
       children: [
         error && typeof error !== "string" && /* @__PURE__ */ jsx("div", { slot: "error", children: error }),
         helpText && typeof helpText !== "string" && /* @__PURE__ */ jsx("div", { slot: "helptext", children: helpText }),
@@ -1330,24 +1025,20 @@ function GoabHeroBannerActions({
   return /* @__PURE__ */ jsx("div", { slot: "actions", children });
 }
 function GoabIconButton({
-  icon,
-  disabled,
   variant = "color",
-  onClick,
   size = "medium",
-  title,
-  ariaLabel,
-  testId,
-  children,
-  mt,
-  mr,
-  mb,
-  ml,
-  action,
+  disabled,
+  onClick,
   actionArgs,
-  actionArg
+  actionArg,
+  children,
+  ...rest
 }) {
   const ref = useRef(null);
+  const _props = transformProps(
+    { variant, size, ...rest },
+    lowercase
+  );
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -1357,7 +1048,7 @@ function GoabIconButton({
     }
     const current = ref.current;
     const listener = () => {
-      onClick();
+      onClick == null ? void 0 : onClick();
     };
     current.addEventListener("_click", listener);
     return () => {
@@ -1368,20 +1059,10 @@ function GoabIconButton({
     "goa-icon-button",
     {
       ref,
-      icon,
       disabled: disabled ? "true" : void 0,
-      variant,
-      size,
-      title,
-      arialabel: ariaLabel,
-      action,
       "action-arg": actionArg,
       "action-args": JSON.stringify(actionArgs),
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId,
+      ..._props,
       children
     }
   );
@@ -3057,45 +2738,23 @@ function validateTimezone(_hours, minutes) {
   return minutes >= 0 && minutes <= 59;
 }
 function GoabInput({
-  id,
-  debounce,
-  name,
-  type,
-  autoCapitalize,
-  autoComplete,
-  leadingIcon,
-  trailingIcon,
   variant = "goa",
+  textAlign = "left",
   focused,
   disabled,
   readonly,
-  value,
-  placeholder,
   error,
-  width,
-  testId,
-  min,
-  max,
-  step,
-  prefix,
-  suffix,
-  ariaLabel,
-  mt,
-  mr,
-  mb,
-  ml,
   leadingContent,
   trailingContent,
-  maxLength,
-  trailingIconAriaLabel,
-  textAlign = "left",
   onTrailingIconClick,
   onChange,
   onFocus,
   onBlur,
-  onKeyPress
+  onKeyPress,
+  ...rest
 }) {
   const ref = useRef(null);
+  const _props = transformProps({ variant, textalign: textAlign, ...rest }, lowercase);
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -3103,22 +2762,22 @@ function GoabInput({
     const current = ref.current;
     const changeListener = (e) => {
       const detail = e.detail;
-      onChange == null ? void 0 : onChange(detail);
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
     const clickListener = () => {
       onTrailingIconClick == null ? void 0 : onTrailingIconClick();
     };
     const focusListener = (e) => {
       const detail = e.detail;
-      onFocus == null ? void 0 : onFocus(detail);
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
     };
     const blurListener = (e) => {
       const detail = e.detail;
-      onBlur == null ? void 0 : onBlur(detail);
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
     };
     const keypressListener = (e) => {
       const detail = e.detail;
-      onKeyPress == null ? void 0 : onKeyPress(detail);
+      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
     };
     current.addEventListener("_change", changeListener);
     current.addEventListener("_trailingIconClick", clickListener);
@@ -3137,37 +2796,12 @@ function GoabInput({
     "goa-input",
     {
       ref,
-      debounce,
+      ..._props,
       focused: focused ? "true" : void 0,
-      type,
-      name,
-      autocapitalize: autoCapitalize,
-      autocomplete: autoComplete,
-      id,
-      leadingicon: leadingIcon,
-      trailingicon: trailingIcon,
-      variant,
       disabled: disabled ? "true" : void 0,
       readonly: readonly ? "true" : void 0,
-      placeholder,
       error: error ? "true" : void 0,
-      testid: testId,
-      value,
-      width,
-      min,
-      max,
-      step,
-      maxlength: maxLength,
-      prefix,
-      suffix,
-      arialabel: ariaLabel,
-      mt,
-      mr,
-      mb,
-      ml,
       handletrailingiconclick: onTrailingIconClick ? "true" : "false",
-      trailingiconarialabel: trailingIconAriaLabel,
-      textalign: textAlign,
       children: [
         leadingContent && /* @__PURE__ */ jsx("div", { slot: "leadingContent", children: leadingContent }),
         trailingContent && /* @__PURE__ */ jsx("div", { slot: "trailingContent", children: trailingContent })
@@ -3176,28 +2810,28 @@ function GoabInput({
   );
 }
 const onDateChangeHandler = (onChange) => {
-  return ({ name, value }) => {
+  return ({ name, value, event }) => {
     if (!value) {
-      onChange == null ? void 0 : onChange({ name, value: "" });
+      onChange == null ? void 0 : onChange({ name, value: "", event });
       return;
     }
     if (typeof value === "string" && isValid(new Date(value))) {
-      onChange == null ? void 0 : onChange({ name, value: parseISO(value) });
+      onChange == null ? void 0 : onChange({ name, value: parseISO(value), event });
       return;
     }
     if (isValid(value)) {
-      onChange == null ? void 0 : onChange({ name, value });
+      onChange == null ? void 0 : onChange({ name, value, event });
       return;
     }
   };
 };
 const onTimeChangeHandler = (onChange) => {
-  return ({ name, value }) => {
+  return ({ name, value, event }) => {
     if (!value) {
-      onChange == null ? void 0 : onChange({ name, value: "" });
+      onChange == null ? void 0 : onChange({ name, value: "", event });
       return;
     }
-    onChange == null ? void 0 : onChange({ name, value });
+    onChange == null ? void 0 : onChange({ name, value, event });
   };
 };
 function toString(value, tmpl = "yyyy-MM-dd") {
@@ -3289,7 +2923,11 @@ function GoabInputFile(props) {
       type: "file",
       onChange: (e) => {
         var _a;
-        return (_a = props.onChange) == null ? void 0 : _a.call(props, { name: e.target.name, value: e.target.value });
+        return (_a = props.onChange) == null ? void 0 : _a.call(props, {
+          name: e.target.name,
+          value: e.target.value,
+          event: e.nativeEvent
+        });
       },
       style: { backgroundColor: "revert" }
     }
@@ -3305,21 +2943,21 @@ function GoabInputNumber({
   textAlign = "right",
   ...props
 }) {
-  const onNumberChange = ({ name, value: value2 }) => {
+  const onNumberChange = ({ name, value: value2, event }) => {
     var _a;
-    (_a = props.onChange) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2) });
+    (_a = props.onChange) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
   };
-  const onFocus = ({ name, value: value2 }) => {
+  const onFocus = ({ name, value: value2, event }) => {
     var _a;
-    (_a = props.onFocus) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2) });
+    (_a = props.onFocus) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
   };
-  const onBlur = ({ name, value: value2 }) => {
+  const onBlur = ({ name, value: value2, event }) => {
     var _a;
-    (_a = props.onBlur) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2) });
+    (_a = props.onBlur) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
   };
-  const onKeyPress = ({ name, value: value2, key }) => {
+  const onKeyPress = ({ name, value: value2, key, event }) => {
     var _a;
-    (_a = props.onKeyPress) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), key: parseInt(key) });
+    (_a = props.onKeyPress) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), key: parseInt(key), event });
   };
   return /* @__PURE__ */ jsx(
     GoabInput,
@@ -3358,49 +2996,46 @@ const GoabLinearProgress = ({
     }
   );
 };
-function GoabLink(props) {
+function GoabLink({
+  actionArgs,
+  actionArg,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsx(
     "goa-link",
     {
-      leadingicon: props.leadingIcon,
-      trailingicon: props.trailingIcon,
-      action: props.action,
-      "action-arg": props.actionArg,
-      "action-args": JSON.stringify(props.actionArgs),
-      testid: props.testId,
-      mt: props.mt,
-      mb: props.mb,
-      ml: props.ml,
-      mr: props.mr,
-      children: props.children
+      "action-arg": actionArg,
+      "action-args": JSON.stringify(actionArgs),
+      ..._props,
+      children
     }
   );
 }
-function GoALinkButton({ type = "primary", ...props }) {
-  return /* @__PURE__ */ jsx(
-    "goa-link-button",
-    {
-      type,
-      leadingicon: props.leadingIcon,
-      trailingicon: props.trailingIcon,
-      mt: props.mt,
-      mb: props.mb,
-      ml: props.ml,
-      mr: props.mr,
-      children: props.children
-    }
+function GoALinkButton({
+  type = "primary",
+  children,
+  ...rest
+}) {
+  const _props = transformProps(
+    { type, ...rest },
+    lowercase
   );
+  return /* @__PURE__ */ jsx("goa-link-button", { ..._props, children });
 }
 function GoabMenuButton({
-  text,
   type = "primary",
-  leadingIcon,
-  maxWidth,
   testId,
   onAction,
-  children
+  children,
+  ...rest
 }) {
   const el = useRef(null);
+  const _props = transformProps(
+    { type, testid: testId, ...rest },
+    kebab
+  );
   useEffect(() => {
     if (!el.current) {
       return;
@@ -3411,17 +3046,18 @@ function GoabMenuButton({
     const current = el.current;
     const listener = (e) => {
       const detail = e.detail;
-      onAction(detail);
+      onAction == null ? void 0 : onAction(detail);
     };
     current.addEventListener("_action", listener);
     return () => {
       current.removeEventListener("_action", listener);
     };
   }, [el, onAction]);
-  return /* @__PURE__ */ jsx("goa-menu-button", { ref: el, text, type, testid: testId, "leading-icon": leadingIcon, "max-width": maxWidth, children });
+  return /* @__PURE__ */ jsx("goa-menu-button", { ..._props, ref: el, children });
 }
-function GoabMenuAction({ text, icon, action, testId }) {
-  return /* @__PURE__ */ jsx("goa-menu-action", { text, action, icon, testid: testId });
+function GoabMenuAction(props) {
+  const _props = transformProps(props, lowercase);
+  return /* @__PURE__ */ jsx("goa-menu-action", { ..._props });
 }
 function GoabMicrositeHeader({
   type,
@@ -3597,31 +3233,18 @@ function GoabPagination({ onChange, ...props }) {
 }
 function GoabPopover({
   target,
-  testId,
-  maxWidth,
-  minWidth,
   padded,
-  position,
   relative,
   children,
-  mt,
-  mr,
-  mb,
-  ml
+  ...rest
 }) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxs(
     "goa-popover",
     {
-      testid: testId,
-      maxwidth: maxWidth,
-      minwidth: minWidth,
       padded: typeof padded === "undefined" ? void 0 : padded ? "true" : "false",
-      position,
       relative: relative ? "true" : void 0,
-      mt,
-      mr,
-      mb,
-      ml,
+      ..._props,
       children: [
         children,
         target && /* @__PURE__ */ jsx("div", { slot: "target", children: target })
@@ -3673,27 +3296,20 @@ function GoabRadioItem({
   );
 }
 function GoabRadioGroup({
-  name,
-  value,
-  children,
-  orientation,
   disabled,
   error,
-  id,
-  testId,
-  ariaLabel,
-  mt,
-  mr,
-  mb,
-  ml,
-  onChange
+  onChange,
+  name,
+  children,
+  ...rest
 }) {
   const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (!el.current) return;
     const listener = (e) => {
       const detail = e.detail;
-      onChange == null ? void 0 : onChange(detail);
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
     const currentEl = el.current;
     if (onChange) {
@@ -3708,19 +3324,11 @@ function GoabRadioGroup({
   return /* @__PURE__ */ jsx(
     "goa-radio-group",
     {
-      testid: testId,
       ref: el,
-      id,
+      ..._props,
       name,
-      value,
-      orientation,
       disabled: disabled ? "true" : void 0,
       error: error ? "true" : void 0,
-      arialabel: ariaLabel,
-      mt,
-      mr,
-      mb,
-      ml,
       children
     }
   );
@@ -3835,16 +3443,17 @@ function GoabTable({ onSort, ...props }) {
   );
 }
 function GoabTableSortHeader({
-  name,
-  direction = "none",
-  children
+  children,
+  ...rest
 }) {
-  return /* @__PURE__ */ jsx("goa-table-sort-header", { name, direction, children });
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-table-sort-header", { ..._props, children });
 }
 function GoabTabs({
   initialTab,
   children,
   testId,
+  variant,
   onChange
 }) {
   const ref = useRef(null);
@@ -3861,10 +3470,10 @@ function GoabTabs({
       };
     }
   }, [onChange]);
-  return /* @__PURE__ */ jsx("goa-tabs", { ref, initialtab: initialTab, testid: testId, children });
+  return /* @__PURE__ */ jsx("goa-tabs", { ref, initialtab: initialTab, testid: testId, variant, children });
 }
-function GoabTab({ heading, children }) {
-  return /* @__PURE__ */ jsxs("goa-tab", { children: [
+function GoabTab({ heading, disabled, children }) {
+  return /* @__PURE__ */ jsxs("goa-tab", { disabled: disabled ? "true" : void 0, children: [
     heading && /* @__PURE__ */ jsx("span", { slot: "heading", children: heading }),
     children
   ] });
@@ -3872,60 +3481,50 @@ function GoabTab({ heading, children }) {
 const GoabTemporaryNotificationCtrl = ({
   verticalPosition = "bottom",
   horizontalPosition = "center",
-  testId
+  testId,
+  ...rest
 }) => {
   const el = useRef(null);
+  const _props = transformProps(
+    { "vertical-position": verticalPosition, "horizontal-position": horizontalPosition, ...rest },
+    kebab
+  );
   return /* @__PURE__ */ jsx(
     "goa-temp-notification-ctrl",
     {
       ref: el,
-      "vertical-position": verticalPosition,
-      "horizontal-position": horizontalPosition,
+      ..._props,
       testid: testId
     }
   );
 };
-function GoabText(props) {
+function GoabText({
+  as,
+  tag,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsx(
     "goa-text",
     {
-      as: props.tag || props.as,
-      size: props.size,
-      maxwidth: props.maxWidth,
-      color: props.color,
-      id: props.id,
-      mt: props.mt,
-      mb: props.mb,
-      ml: props.ml,
-      mr: props.mr,
-      children: props.children
+      as: tag || as,
+      ..._props,
+      children
     }
   );
 }
 function GoabTextArea({
-  name,
-  value,
-  placeholder,
-  rows,
   readOnly,
   disabled,
-  countBy,
-  maxCount,
-  width,
-  maxWidth,
-  testId,
   error,
-  ariaLabel,
-  mt,
-  mr,
-  mb,
-  ml,
-  autoComplete,
   onChange,
   onKeyPress,
-  onBlur
+  onBlur,
+  ...rest
 }) {
   const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
     if (!el.current) {
       return;
@@ -3933,15 +3532,15 @@ function GoabTextArea({
     const current = el.current;
     const changeListener = (e) => {
       const detail = e.detail;
-      onChange == null ? void 0 : onChange(detail);
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
     const keypressListener = (e) => {
       const detail = e.detail;
-      onKeyPress == null ? void 0 : onKeyPress(detail);
+      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
     };
     const blurListener = (e) => {
       const detail = e.detail;
-      onBlur == null ? void 0 : onBlur(detail);
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
     };
     current.addEventListener("_change", changeListener);
     current.addEventListener("_keyPress", keypressListener);
@@ -3956,24 +3555,10 @@ function GoabTextArea({
     "goa-textarea",
     {
       ref: el,
-      name,
-      placeholder,
-      value,
-      rows,
       readOnly: readOnly ? "true" : void 0,
       disabled: disabled ? "true" : void 0,
-      countby: countBy,
-      maxcount: maxCount,
-      width,
-      maxwidth: maxWidth,
       error: error ? "true" : void 0,
-      testid: testId,
-      arialabel: ariaLabel,
-      mt,
-      mr,
-      mb,
-      ml,
-      autocomplete: autoComplete
+      ..._props
     }
   );
 }
@@ -3995,23 +3580,21 @@ function GoabThreeColumnLayout(props) {
     }
   );
 }
-function GoabTooltip(props) {
-  const isStringContent = typeof props.content === "string";
+function GoabTooltip({
+  content,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  const isStringContent = typeof content === "string";
   return /* @__PURE__ */ jsxs(
     "goa-tooltip",
     {
-      position: props.position,
-      content: isStringContent ? props.content : void 0,
-      halign: props.hAlign,
-      testid: props.testId,
-      maxwidth: props.maxWidth,
-      mt: props.mt,
-      mr: props.mr,
-      mb: props.mb,
-      ml: props.ml,
+      content: isStringContent ? content : void 0,
+      ..._props,
       children: [
-        !isStringContent && props.content && /* @__PURE__ */ jsx("div", { slot: "content", children: props.content }),
-        props.children
+        !isStringContent && content && /* @__PURE__ */ jsx("div", { slot: "content", children: content }),
+        children
       ]
     }
   );
@@ -4034,15 +3617,14 @@ function GoabTwoColumnLayout(props) {
 const GoabFilterChip = ({
   iconTheme = "outline",
   error,
-  content,
   onClick,
-  mt,
-  mr,
-  mb,
-  ml,
-  testId
+  ...rest
 }) => {
   const el = useRef(null);
+  const _props = transformProps(
+    { icontheme: iconTheme, ...rest },
+    lowercase
+  );
   useEffect(() => {
     if (!el.current) return;
     if (!onClick) return;
@@ -4056,14 +3638,8 @@ const GoabFilterChip = ({
     "goa-filter-chip",
     {
       ref: el,
-      icontheme: iconTheme,
       error: error ? "true" : void 0,
-      content,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId
+      ..._props
     }
   );
 };
@@ -4492,6 +4068,7 @@ export {
   GoabChip,
   GoabCircularProgress,
   GoabContainer,
+  GoabDataGrid,
   GoabDatePicker,
   GoabDetails,
   GoabDivider,