@abgov/react-components 6.11.0-dev.12 → 6.11.0-dev.15

package/index.mjs

@@ -10,7 +10,7 @@ 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 { t as transformProps, l as lowercase, k as kebab, f as format, p as parseISO, i as isValid } from "./parseISO-BHUUf1QW.mjs";
+import { t as transformProps, l as lowercase, k as kebab, C as CalendarDate, f as format, p as parseISO, i as isValid } from "./calendar-date-Chmr7h4a.mjs";
 function GoabAccordion({
   open,
   onChange,
@@ -496,1088 +496,966 @@ function GoabDataGrid({
     }
   );
 }
-function GoabDatePicker({
-  value,
-  error,
-  min,
-  max,
-  disabled,
-  relative,
-  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`");
-    }
-  }, []);
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    const current = ref.current;
-    const handleChange = (e) => {
-      const detail = e.detail;
-      onChange == null ? void 0 : onChange({ ...detail, event: e });
-    };
-    if (onChange) {
-      current.addEventListener("_change", handleChange);
-    }
-    return () => {
-      if (onChange) {
-        current.removeEventListener("_change", handleChange);
-      }
-    };
-  }, [onChange]);
-  const formatValue = (val) => {
-    if (!val) return "";
-    if (val instanceof Date) {
-      return val.toISOString();
-    }
-    return val;
-  };
-  return /* @__PURE__ */ jsx(
-    "goa-date-picker",
-    {
-      ref,
-      value: formatValue(value) || void 0,
-      error: error ? "true" : void 0,
-      disabled: disabled ? "true" : void 0,
-      min: formatValue(min) || void 0,
-      max: formatValue(max) || void 0,
-      relative: relative ? "true" : void 0,
-      ..._props
-    }
-  );
-}
-function GoabDetails({
-  open,
-  children,
-  ...rest
-}) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsx(
-    "goa-details",
-    {
-      open: open ? "true" : void 0,
-      ..._props,
-      children
-    }
+function dispatch(el, eventName, detail, opts) {
+  if (!el) {
+    console.error("dispatch element is null");
+    return;
+  }
+  el.dispatchEvent(
+    new CustomEvent(eventName, {
+      composed: true,
+      bubbles: opts == null ? void 0 : opts.bubbles,
+      detail
+    })
   );
 }
-function GoabDivider(props) {
-  return /* @__PURE__ */ jsx(
-    "goa-divider",
-    {
-      mt: props.mt,
-      mr: props.mr,
-      mb: props.mb,
-      ml: props.ml,
-      testid: props.testId
-    }
+function relay(el, eventName, data, opts) {
+  if (!el) {
+    console.error("dispatch element is null");
+    return;
+  }
+  el.dispatchEvent(
+    new CustomEvent("msg", {
+      composed: true,
+      bubbles: opts == null ? void 0 : opts.bubbles,
+      detail: {
+        action: eventName,
+        data
+      }
+    })
   );
 }
-function GoabDrawer({
-  position,
-  open,
-  heading,
-  maxSize,
-  testId,
-  actions,
-  children,
-  onClose
-}) {
-  const el = useRef(null);
-  useEffect(() => {
-    var _a;
-    if (!(el == null ? void 0 : el.current) || !onClose) {
+class PublicFormController {
+  constructor(type) {
+    __privateAdd(this, _PublicFormController_instances);
+    __publicField(this, "state");
+    __publicField(this, "_formData");
+    __publicField(this, "_formRef");
+    __publicField(this, "_isCompleting", false);
+    this.type = type;
+  }
+  // Obtain reference to the form element
+  init(e) {
+    if (this._formRef) {
+      console.warn("init: form element has already been set");
       return;
     }
-    (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
-    return () => {
-      var _a2;
-      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
+    this._formRef = e.detail.el;
+    this.state = {
+      uuid: crypto.randomUUID(),
+      form: {},
+      history: [],
+      editting: "",
+      status: "not-started"
     };
-  }, [el, onClose]);
-  return /* @__PURE__ */ jsxs(
-    "goa-drawer",
-    {
-      ref: el,
-      position,
-      open: open ? true : void 0,
-      heading: typeof heading === "string" ? heading : void 0,
-      maxsize: maxSize,
-      testid: testId,
-      children: [
-        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
-        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
-        children
-      ]
+  }
+  initList(e) {
+    this._formRef = e.detail.el;
+    this.state = [];
+  }
+  // Public method to allow for the initialization of the state
+  initState(state, callback) {
+    relay(this._formRef, "external::init:state", state);
+    if (typeof state === "string") {
+      this.state = JSON.parse(state);
+    } else if (!Array.isArray(state)) {
+      this.state = state;
+    }
+    if (callback) {
+      setTimeout(callback, 200);
     }
-  );
-}
-function stringify(value) {
-  if (typeof value === "undefined") {
-    return "";
   }
-  if (typeof value === "string") {
-    return value;
+  updateListState(e) {
+    const detail = e.detail;
+    if (!Array.isArray(detail.data)) {
+      return;
+    }
+    this.state = detail.data;
   }
-  return JSON.stringify(value);
-}
-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) {
+  updateObjectState(e) {
+    var _a, _b;
+    if (Array.isArray(this.state)) {
       return;
     }
-    const current = el.current;
-    const handler = (e) => {
-      const detail = e.detail;
-      onChange == null ? void 0 : onChange({ ...detail, event: e });
-    };
-    if (onChange) {
-      current.addEventListener("_change", handler);
+    const detail = e.detail;
+    if (detail.type === "list") {
+      this.state = {
+        ...this.state,
+        form: { ...((_a = this.state) == null ? void 0 : _a.form) || {}, [detail.id]: detail.data }
+      };
+    } else {
+      this.state = {
+        ...this.state,
+        ...detail.data,
+        form: { ...((_b = this.state) == null ? void 0 : _b.form) || {}, ...detail.data.form },
+        history: detail.data.history
+      };
     }
-    return () => {
-      if (onChange) {
-        current.removeEventListener("_change", handler);
-      }
-    };
-  }, [el, onChange]);
-  return /* @__PURE__ */ jsx(
-    "goa-dropdown",
-    {
-      ref: el,
-      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
+  }
+  getStateList() {
+    if (!this.state) {
+      return [];
     }
-  );
-}
-function GoabDropdownOption(props) {
-  useEffect(() => {
-    console.warn("GoabDropdownOption is deprecated. Please use GoabDropdownItem");
-  }, []);
-  return /* @__PURE__ */ jsx(GoabDropdownItem, { ...props });
-}
-function GoabDropdownItem({
-  value,
-  label,
-  filter,
-  name,
-  mountType = "append"
-}) {
-  return /* @__PURE__ */ jsx(
-    "goa-dropdown-item",
-    {
-      value,
-      label,
-      filter,
-      name,
-      mount: mountType
-    }
-  );
-}
-function GoabFileUploadCard({
-  onDelete,
-  onCancel,
-  filename,
-  ...rest
-}) {
-  const el = useRef(null);
-  const _props = transformProps({ filename, ...rest }, lowercase);
-  useEffect(() => {
-    if (!el.current) return;
-    const current = el.current;
-    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, filename]);
-  return /* @__PURE__ */ jsx("goa-file-upload-card", { ref: el, ..._props });
-}
-function GoabFileUploadInput({
-  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, event: e });
-    };
-    current.addEventListener("_selectFile", handler);
-    return () => {
-      current.removeEventListener("_selectFile", handler);
-    };
-  }, [el, onSelectFile]);
-  return /* @__PURE__ */ jsx("goa-file-upload-input", { ref: el, ..._props });
-}
-function GoabAppFooter({
-  children,
-  ...rest
-}) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsx("goa-app-footer", { ..._props, children });
-}
-function GoabAppFooterMetaSection({
-  children,
-  ...rest
-}) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsx("goa-app-footer-meta-section", { slot: "meta", ..._props, children });
-}
-function GoabAppFooterNavSection({
-  children,
-  ...rest
-}) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsx("goa-app-footer-nav-section", { slot: "nav", ..._props, children });
-}
-function GoabFieldset({
-  onContinue,
-  children,
-  ...rest
-}) {
-  const ref = useRef(null);
-  const _props = transformProps(rest, kebab);
-  useEffect(() => {
-    if (!ref.current) return;
-    const current = ref.current;
-    const continueListener = (e) => {
-      const event = e.detail;
-      return onContinue == null ? void 0 : onContinue(event);
-    };
-    if (onContinue) {
-      current.addEventListener("_continue", continueListener);
-    }
-    return () => {
-      if (onContinue) {
-        current.removeEventListener("_continue", continueListener);
-      }
-    };
-  }, [ref, onContinue]);
-  return /* @__PURE__ */ jsx("goa-fieldset", { ref, ..._props, children });
-}
-function GoabPublicFormPage({
-  onContinue,
-  children,
-  ...rest
-}) {
-  const ref = useRef(null);
-  const _props = transformProps(rest, kebab);
-  useEffect(() => {
-    if (!ref.current) return;
-    const current = ref.current;
-    const continueListener = (e) => {
-      onContinue == null ? void 0 : onContinue(e);
-    };
-    if (onContinue) {
-      current.addEventListener("_continue", continueListener);
+    if (!Array.isArray(this.state)) {
+      console.warn(
+        "Utils:getStateList: unable to update the state of a non-multi form type",
+        this.state
+      );
+      return [];
     }
-    return () => {
-      if (onContinue) {
-        current.removeEventListener("_continue", continueListener);
-      }
-    };
-  }, [ref, onContinue]);
-  return /* @__PURE__ */ jsx("goa-public-form-page", { ref, ..._props, children });
-}
-function GoabPublicFormSummary({
-  heading = "",
-  ...rest
-}) {
-  const _props = transformProps(
-    { heading, ...rest },
-    lowercase
-  );
-  return /* @__PURE__ */ jsx("goa-public-form-summary", { ..._props });
-}
-function GoabPublicForm({
-  onInit,
-  onComplete,
-  onStateChange,
-  children,
-  ...rest
-}) {
-  const ref = useRef(null);
-  const initialized = useRef(false);
-  const _props = transformProps(rest, lowercase);
-  useLayoutEffect(() => {
-    if (!ref.current) return;
-    const current = ref.current;
-    const initListener = (e) => {
-      onInit == null ? void 0 : onInit(e);
-    };
-    if (onInit && !initialized.current) {
-      current.addEventListener("_init", initListener);
+    if (this.state.length === 0) {
+      return [];
     }
-    const completeListener = (e) => {
-      const detail = e.detail;
-      onComplete == null ? void 0 : onComplete(detail);
-    };
-    const stateChangeListener = (e) => {
-      const detail = e.detail;
-      onStateChange == null ? void 0 : onStateChange(detail.data);
-    };
-    if (onComplete) {
-      current.addEventListener("_complete", completeListener);
+    return this.state.map((s) => {
+      return Object.values(s.form).filter((item) => {
+        var _a;
+        return ((_a = item == null ? void 0 : item.data) == null ? void 0 : _a.type) === "details";
+      }).map((item) => {
+        var _a;
+        return item.data.type === "details" && ((_a = item.data) == null ? void 0 : _a.fieldsets) || {};
+      }).reduce(
+        (acc, item) => {
+          for (const [key, value] of Object.entries(item)) {
+            acc[key] = value.value;
+          }
+          return acc;
+        },
+        {}
+      );
+    });
+  }
+  // getStateItems(group: string): Record<string, FieldsetItemState>[] {
+  //   if (Array.isArray(this.state)) {
+  //     console.error(
+  //       "Utils:getStateItems: unable to update the state of a multi form type",
+  //     );
+  //     return [];
+  //   }
+  //   if (!this.state) {
+  //     console.error("Utils:getStateItems: state has not yet been set");
+  //     return [];
+  //   }
+  //
+  //   const data = this.state.form[group].data;
+  //   if (data.type !== "list") {
+  //     return [];
+  //   }
+  //
+  //   return data.items.;
+  // }
+  // Public method to allow for the retrieval of the state value
+  getStateValue(group, key) {
+    if (Array.isArray(this.state)) {
+      console.error("getStateValue: unable to update the state of a multi form type");
+      return "";
     }
-    if (onStateChange) {
-      current.addEventListener("_stateChange", stateChangeListener);
+    if (!this.state) {
+      console.error("getStateValue: state has not yet been set");
+      return "";
     }
-    return () => {
-      if (onInit) {
-        current.removeEventListener("_init", initListener);
-      }
-      if (onComplete) {
-        current.removeEventListener("_complete", completeListener);
-      }
-      if (onStateChange) {
-        current.removeEventListener("_stateChange", stateChangeListener);
-      }
-    };
-  }, [onInit, onComplete, onStateChange]);
-  return /* @__PURE__ */ jsx("goa-public-form", { ref, ..._props, children });
-}
-function GoabPublicSubform({
-  id = "",
-  name = "",
-  continueMsg = "",
-  onInit,
-  onStateChange,
-  children,
-  ...rest
-}) {
-  const ref = useRef(null);
-  const _props = transformProps(
-    { id, name, "continue-msg": continueMsg, ...rest },
-    kebab
-  );
-  useEffect(() => {
-    if (!ref.current) return;
-    const current = ref.current;
-    const initListener = (e) => {
-      onInit == null ? void 0 : onInit(e);
-    };
-    const stateChangeListener = (e) => {
-      onStateChange == null ? void 0 : onStateChange(e);
-    };
-    if (onInit) {
-      current.addEventListener("_init", initListener);
+    const data = this.state.form[group].data;
+    if (data.type !== "details") {
+      return "";
     }
-    if (onStateChange) {
-      current.addEventListener("_stateChange", stateChangeListener);
+    return data.fieldsets[key].value;
+  }
+  // Public method to allow for the continuing to the next page
+  continueTo(next) {
+    if (!next) {
+      console.error("continueTo [name] is undefined");
+      return;
     }
-    return () => {
-      if (onInit) {
-        current.removeEventListener("_init", initListener);
-      }
-      if (onStateChange) {
-        current.removeEventListener("_stateChange", stateChangeListener);
-      }
-    };
-  }, [ref, onInit, onStateChange]);
-  return /* @__PURE__ */ jsx("goa-public-subform", { ref, ..._props, children });
-}
-function GoabPublicSubformIndex({
-  heading = "",
-  sectionTitle = "",
-  actionButtonText = "",
-  buttonVisibility = "hidden",
-  children,
-  ...rest
-}) {
-  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,
-  ...rest
-}) {
-  const _props = transformProps(
-    { status, ...rest },
-    lowercase
-  );
-  return /* @__PURE__ */ jsx("goa-public-form-task", { ..._props, children });
-}
-function GoabPublicFormTaskList({
-  children,
-  ...rest
-}) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsx("goa-public-form-task-list", { ..._props, children });
-}
-function GoabFormItem({
-  error,
-  helpText,
-  publicFormSummaryOrder,
-  children,
-  ...rest
-}) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsxs(
-    "goa-form-item",
-    {
-      error: typeof error === "string" ? error : void 0,
-      helptext: typeof helpText === "string" ? helpText : void 0,
-      "public-form-summary-order": publicFormSummaryOrder,
-      ..._props,
-      children: [
-        error && typeof error !== "string" && /* @__PURE__ */ jsx("div", { slot: "error", children: error }),
-        helpText && typeof helpText !== "string" && /* @__PURE__ */ jsx("div", { slot: "helptext", children: helpText }),
-        children
-      ]
+    relay(this._formRef, "external::continue", { next });
+  }
+  // Public method to perform validation and send the appropriate messages to the form elements
+  validate(e, field, validators, options) {
+    var _a;
+    const { el, state, cancelled } = e.detail;
+    const value = (_a = state == null ? void 0 : state[field]) == null ? void 0 : _a.value;
+    window.scrollTo({ top: 0, behavior: "smooth" });
+    if (cancelled) {
+      return [true, value];
     }
-  );
-}
-function GoabFormStep(props) {
-  return /* @__PURE__ */ jsx("goa-form-step", { text: props.text, status: props.status });
-}
-function GoabFormStepper({
-  testId,
-  step,
-  mt,
-  mb,
-  ml,
-  mr,
-  onChange,
-  children
-}) {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (!ref.current) {
+    for (const validator of validators) {
+      const msg = validator(value);
+      __privateMethod(this, _PublicFormController_instances, dispatchError_fn).call(this, el, field, msg, options);
+      if (msg) {
+        return [false, ""];
+      }
+    }
+    return [true, value];
+  }
+  /**
+   * Validates a group of fields ensuring that at least `minPassCount` of the items within the group
+   * passes. This is useful in the scenario when n number fields are required out of n+m number of fields.
+   *
+   * @param {string[]} fields - An array of field names to be validated.
+   * @param {Event} e - The event object associated with the validation trigger.
+   * @param {FieldValidator[]} validators - An array of validator functions to apply to the fields.
+   * @return {[number, Record<string, boolean>]} - Returns back the number of fields that passed and a record of the fields and their pass status.
+   */
+  validateGroup(e, fields, validators) {
+    let passCount = 0;
+    const validGroups = {};
+    for (const field of fields) {
+      const [_valid] = this.validate(e, field, validators, { grouped: true });
+      if (_valid) {
+        validGroups[field] = true;
+        passCount++;
+      }
+    }
+    return [passCount, validGroups];
+  }
+  edit(index) {
+    relay(this._formRef, "external::alter:state", { index, operation: "edit" });
+  }
+  remove(index) {
+    relay(this._formRef, "external::alter:state", {
+      index,
+      operation: "remove"
+    });
+  }
+  /**
+   * Completes the form and triggers the onComplete callback.
+   * This method should be used when you want to complete a form without navigating to a summary page.
+   *
+   * @important Developers must validate the form before calling this method.
+   *
+   * @example
+   * // Validate first, then complete
+   * const [isValid] = this.validate(e, "firstName", [
+   *   requiredValidator("First name is required.")
+   * ]);
+   * if (isValid) {
+   *   this.complete();
+   * }
+   * @returns void
+   */
+  complete() {
+    if (!this._formRef) {
+      console.error("complete: form ref is not set");
       return;
     }
-    const current = ref.current;
-    const changeListener = (e) => {
-      const detail = e.detail;
-      onChange == null ? void 0 : onChange(detail);
-    };
-    current.addEventListener("_change", changeListener);
-    return () => {
-      current.removeEventListener("_change", changeListener);
-    };
-  }, [ref, onChange]);
-  return /* @__PURE__ */ jsx(
-    "goa-form-stepper",
-    {
-      ref,
-      testid: testId,
-      step,
-      mt,
-      mr,
-      mb,
-      ml,
-      children
+    if (this._isCompleting) {
+      console.warn("complete: completion already in progress");
+      return;
     }
-  );
-}
-function GoabGrid({
-  gap,
-  minChildWidth,
-  mt,
-  mr,
-  mb,
-  ml,
-  testId,
-  children
-}) {
-  return /* @__PURE__ */ jsx(
-    "goa-grid",
-    {
-      gap,
-      minchildwidth: minChildWidth,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId,
-      children
+    this._isCompleting = true;
+    relay(this._formRef, "fieldset::submit", null, { bubbles: true });
+    this._isCompleting = false;
+  }
+  /**
+   * Completes a subform and returns control to the parent form.
+   * This method should be used when working with subforms that need to complete without a summary page.
+   *
+   * @important Developers must validate the subform before calling this method.
+   *
+   * @example
+   * // Validate first, then complete the subform
+   * const [isValid] = this._childFormController.validate(e, "fullName", [
+   *   requiredValidator("Please enter the dependent's full name.")
+   * ]);
+   * if (isValid) {
+   *   this._childFormController.completeSubform();
+   * }
+   * @returns void
+   */
+  completeSubform() {
+    if (!this._formRef) {
+      console.error("completeSubform: form ref is not set");
+      return;
     }
-  );
+    if (this._isCompleting) {
+      console.warn("completeSubform: completion already in progress");
+      return;
+    }
+    const formRef = this._formRef;
+    this._isCompleting = true;
+    const stateChangeHandler = (e) => {
+      formRef.removeEventListener("_stateChange", stateChangeHandler);
+      dispatch(formRef, "_complete", {}, { bubbles: true });
+      this._isCompleting = false;
+    };
+    formRef.addEventListener("_stateChange", stateChangeHandler);
+    dispatch(formRef, "_continue", null, { bubbles: true });
+  }
+  // removes any data collected that doesn't correspond with the final history path
+  clean(data) {
+    return data.history.reduce((acc, fieldsetId) => {
+      acc[fieldsetId] = data.form[fieldsetId];
+      return acc;
+    }, {});
+  }
 }
-function GoabHeroBanner({
-  heading,
-  backgroundUrl,
-  minHeight,
-  maxContentWidth,
-  backgroundColor,
-  textColor,
-  children,
-  testId
-}) {
-  return /* @__PURE__ */ jsx(
-    "goa-hero-banner",
-    {
-      heading,
-      backgroundurl: backgroundUrl,
-      minheight: minHeight,
-      maxcontentwidth: maxContentWidth,
-      backgroundcolor: backgroundColor,
-      textcolor: textColor,
-      testid: testId,
-      children
+_PublicFormController_instances = new WeakSet();
+updateObjectListState_fn = function(detail) {
+  var _a;
+  if (!Array.isArray(detail.data)) {
+    return;
+  }
+  if (Array.isArray(this.state)) {
+    return;
+  }
+  this.state = {
+    ...this.state,
+    form: {
+      ...((_a = this.state) == null ? void 0 : _a.form) || {},
+      [detail.id]: detail.data
     }
+  };
+};
+// Private method to dispatch the error message to the form element
+dispatchError_fn = function(el, name, msg, options) {
+  el.dispatchEvent(
+    new CustomEvent("msg", {
+      composed: true,
+      detail: {
+        action: "external::set:error",
+        data: {
+          name,
+          msg,
+          grouped: options == null ? void 0 : options.grouped
+        }
+      }
+    })
   );
-}
-function GoabHeroBannerActions({
-  children
-}) {
-  return /* @__PURE__ */ jsx("div", { slot: "actions", children });
-}
-function GoabIconButton({
-  variant = "color",
-  size = "medium",
+};
+function GoabDatePicker({
+  value,
+  error,
+  min,
+  max,
   disabled,
-  onClick,
-  actionArgs,
-  actionArg,
-  children,
+  relative,
+  onChange,
   ...rest
 }) {
   const ref = useRef(null);
-  const _props = transformProps(
-    { variant, size, ...rest },
-    lowercase
-  );
+  const _props = transformProps(rest, lowercase);
   useEffect(() => {
-    if (!ref.current) {
-      return;
+    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`");
     }
-    if (!onClick) {
+  }, []);
+  useEffect(() => {
+    if (!ref.current) {
       return;
     }
     const current = ref.current;
-    const listener = () => {
-      onClick == null ? void 0 : onClick();
+    const handleChange = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
-    current.addEventListener("_click", listener);
+    if (onChange) {
+      current.addEventListener("_change", handleChange);
+    }
     return () => {
-      current.removeEventListener("_click", listener);
+      if (onChange) {
+        current.removeEventListener("_change", handleChange);
+      }
     };
-  }, [ref, onClick]);
+  }, [onChange]);
+  const formatValue = (val) => {
+    if (!val) return "";
+    if (val instanceof Date) {
+      return new CalendarDate(val).toString();
+    }
+    return val;
+  };
   return /* @__PURE__ */ jsx(
-    "goa-icon-button",
+    "goa-date-picker",
     {
       ref,
+      value: formatValue(value) || void 0,
+      error: error ? "true" : void 0,
       disabled: disabled ? "true" : void 0,
-      "action-arg": actionArg,
-      "action-args": JSON.stringify(actionArgs),
-      ..._props,
-      children
+      min: formatValue(min) || void 0,
+      max: formatValue(max) || void 0,
+      relative: relative ? "true" : void 0,
+      ..._props
     }
   );
 }
-function GoabIcon({
-  inverted,
+function GoabDetails({
+  open,
+  children,
   ...rest
 }) {
   const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsx(
-    "goa-icon",
+    "goa-details",
     {
-      inverted: typeof inverted === "boolean" ? inverted ? "true" : void 0 : inverted,
-      ..._props
+      open: open ? "true" : void 0,
+      ..._props,
+      children
     }
   );
 }
-function GoabInput({
-  variant = "goa",
-  textAlign = "left",
-  focused,
-  disabled,
-  readonly,
-  error,
-  leadingContent,
-  trailingContent,
-  onTrailingIconClick,
-  onChange,
-  onFocus,
-  onBlur,
-  onKeyPress,
-  ...rest
+function GoabDivider(props) {
+  return /* @__PURE__ */ jsx(
+    "goa-divider",
+    {
+      mt: props.mt,
+      mr: props.mr,
+      mb: props.mb,
+      ml: props.ml,
+      testid: props.testId
+    }
+  );
+}
+function GoabDrawer({
+  position,
+  open,
+  heading,
+  maxSize,
+  testId,
+  actions,
+  children,
+  onClose
 }) {
-  const ref = useRef(null);
-  const _props = transformProps({ variant, textalign: textAlign, ...rest }, lowercase);
+  const el = useRef(null);
   useEffect(() => {
-    if (!ref.current) {
+    var _a;
+    if (!(el == null ? void 0 : el.current) || !onClose) {
       return;
     }
-    const current = ref.current;
-    const changeListener = (e) => {
-      const detail = e.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, event: e });
-    };
-    const blurListener = (e) => {
-      const detail = e.detail;
-      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
-    };
-    const keypressListener = (e) => {
-      const detail = e.detail;
-      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
-    };
-    current.addEventListener("_change", changeListener);
-    current.addEventListener("_trailingIconClick", clickListener);
-    current.addEventListener("_focus", focusListener);
-    current.addEventListener("_blur", blurListener);
-    current.addEventListener("_keyPress", keypressListener);
+    (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
     return () => {
-      current.removeEventListener("_change", changeListener);
-      current.removeEventListener("_trailingIconClick", clickListener);
-      current.removeEventListener("_focus", focusListener);
-      current.removeEventListener("_blur", blurListener);
-      current.removeEventListener("_keyPress", keypressListener);
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
     };
-  }, [ref, onChange, onTrailingIconClick, onFocus, onBlur, onKeyPress]);
+  }, [el, onClose]);
   return /* @__PURE__ */ jsxs(
-    "goa-input",
+    "goa-drawer",
     {
-      ref,
-      ..._props,
-      focused: focused ? "true" : void 0,
-      disabled: disabled ? "true" : void 0,
-      readonly: readonly ? "true" : void 0,
-      error: error ? "true" : void 0,
-      handletrailingiconclick: onTrailingIconClick ? "true" : "false",
+      ref: el,
+      position,
+      open: open ? true : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      maxsize: maxSize,
+      testid: testId,
       children: [
-        leadingContent && /* @__PURE__ */ jsx("div", { slot: "leadingContent", children: leadingContent }),
-        trailingContent && /* @__PURE__ */ jsx("div", { slot: "trailingContent", children: trailingContent })
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
+        children
       ]
     }
   );
 }
-const onDateChangeHandler = (onChange) => {
-  return ({ name, value, event }) => {
-    if (!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), event });
-      return;
-    }
-    if (isValid(value)) {
-      onChange == null ? void 0 : onChange({ name, value, event });
-      return;
-    }
-  };
-};
-const onTimeChangeHandler = (onChange) => {
-  return ({ name, value, event }) => {
-    if (!value) {
-      onChange == null ? void 0 : onChange({ name, value: "", event });
-      return;
-    }
-    onChange == null ? void 0 : onChange({ name, value, event });
-  };
-};
-function toString(value, tmpl = "yyyy-MM-dd") {
-  if (!value) {
+function stringify(value) {
+  if (typeof value === "undefined") {
     return "";
   }
   if (typeof value === "string") {
-    return format(parseISO(value), tmpl);
-  }
-  if (value.toISOString() === (/* @__PURE__ */ new Date(0)).toISOString()) {
-    return "";
+    return value;
   }
-  return format(value, tmpl);
-}
-function GoabInputText(props) {
-  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "text" });
-}
-function GoabInputPassword(props) {
-  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "password" });
+  return JSON.stringify(value);
 }
-function GoabInputDate({
+function GoabDropdown({
   value,
-  min = "",
-  max = "",
-  ...props
+  onChange,
+  disabled,
+  error,
+  filterable,
+  multiselect,
+  native,
+  relative,
+  children,
+  ...rest
 }) {
-  return /* @__PURE__ */ jsx(
-    GoabInput,
-    {
-      ...props,
-      type: "date",
-      onChange: onDateChangeHandler(props.onChange),
-      min: toString(min),
-      max: toString(max),
-      value: toString(value)
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
     }
-  );
-}
-function GoabInputTime({
-  value,
-  min = "",
-  max = "",
-  ...props
-}) {
+    const current = el.current;
+    const handler = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    if (onChange) {
+      current.addEventListener("_change", handler);
+    }
+    return () => {
+      if (onChange) {
+        current.removeEventListener("_change", handler);
+      }
+    };
+  }, [el, onChange]);
   return /* @__PURE__ */ jsx(
-    GoabInput,
+    "goa-dropdown",
     {
-      ...props,
-      onChange: onTimeChangeHandler(props.onChange),
-      value,
-      type: "time"
+      ref: el,
+      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
     }
   );
 }
-function GoabInputDateTime({
+function GoabDropdownOption(props) {
+  useEffect(() => {
+    console.warn("GoabDropdownOption is deprecated. Please use GoabDropdownItem");
+  }, []);
+  return /* @__PURE__ */ jsx(GoabDropdownItem, { ...props });
+}
+function GoabDropdownItem({
   value,
-  min = "",
-  max = "",
-  ...props
+  label,
+  filter,
+  name,
+  mountType = "append"
 }) {
   return /* @__PURE__ */ jsx(
-    GoabInput,
+    "goa-dropdown-item",
     {
-      ...props,
-      onChange: onDateChangeHandler(props.onChange),
-      value: toString(value, "yyyy-MM-dd'T'HH:mm"),
-      type: "datetime-local"
+      value,
+      label,
+      filter,
+      name,
+      mount: mountType
     }
   );
 }
-function GoabInputEmail(props) {
-  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "email" });
+function GoabFileUploadCard({
+  onDelete,
+  onCancel,
+  filename,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps({ filename, ...rest }, lowercase);
+  useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+    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, filename]);
+  return /* @__PURE__ */ jsx("goa-file-upload-card", { ref: el, ..._props });
 }
-function GoabInputSearch(props) {
-  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "search", trailingIcon: "search" });
+function GoabFileUploadInput({
+  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, event: e });
+    };
+    current.addEventListener("_selectFile", handler);
+    return () => {
+      current.removeEventListener("_selectFile", handler);
+    };
+  }, [el, onSelectFile]);
+  return /* @__PURE__ */ jsx("goa-file-upload-input", { ref: el, ..._props });
 }
-function GoabInputUrl(props) {
-  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "url" });
+function GoabAppFooter({
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-footer", { ..._props, children });
 }
-function GoabInputTel(props) {
-  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "tel" });
+function GoabAppFooterMetaSection({
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-footer-meta-section", { slot: "meta", ..._props, children });
 }
-function GoabInputFile(props) {
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      id: props.id,
-      name: props.name,
-      type: "file",
-      onChange: (e) => {
-        var _a;
-        return (_a = props.onChange) == null ? void 0 : _a.call(props, {
-          name: e.target.name,
-          value: e.target.value,
-          event: e.nativeEvent
-        });
-      },
-      style: { backgroundColor: "revert" }
+function GoabAppFooterNavSection({
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-footer-nav-section", { slot: "nav", ..._props, children });
+}
+function GoabFieldset({
+  onContinue,
+  children,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps(rest, kebab);
+  useEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const continueListener = (e) => {
+      const event = e.detail;
+      return onContinue == null ? void 0 : onContinue(event);
+    };
+    if (onContinue) {
+      current.addEventListener("_continue", continueListener);
+    }
+    return () => {
+      if (onContinue) {
+        current.removeEventListener("_continue", continueListener);
+      }
+    };
+  }, [ref, onContinue]);
+  return /* @__PURE__ */ jsx("goa-fieldset", { ref, ..._props, children });
+}
+function GoabPublicFormPage({
+  onContinue,
+  children,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps(rest, kebab);
+  useEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const continueListener = (e) => {
+      onContinue == null ? void 0 : onContinue(e);
+    };
+    if (onContinue) {
+      current.addEventListener("_continue", continueListener);
     }
+    return () => {
+      if (onContinue) {
+        current.removeEventListener("_continue", continueListener);
+      }
+    };
+  }, [ref, onContinue]);
+  return /* @__PURE__ */ jsx("goa-public-form-page", { ref, ..._props, children });
+}
+function GoabPublicFormSummary({
+  heading = "",
+  ...rest
+}) {
+  const _props = transformProps(
+    { heading, ...rest },
+    lowercase
   );
+  return /* @__PURE__ */ jsx("goa-public-form-summary", { ..._props });
 }
-function GoabInputMonth(props) {
-  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "month" });
+function GoabPublicForm({
+  onInit,
+  onComplete,
+  onStateChange,
+  children,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const initialized = useRef(false);
+  const _props = transformProps(rest, lowercase);
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const initListener = (e) => {
+      onInit == null ? void 0 : onInit(e);
+    };
+    if (onInit && !initialized.current) {
+      current.addEventListener("_init", initListener);
+    }
+    const completeListener = (e) => {
+      const detail = e.detail;
+      onComplete == null ? void 0 : onComplete(detail);
+    };
+    const stateChangeListener = (e) => {
+      const detail = e.detail;
+      onStateChange == null ? void 0 : onStateChange(detail.data);
+    };
+    if (onComplete) {
+      current.addEventListener("_complete", completeListener);
+    }
+    if (onStateChange) {
+      current.addEventListener("_stateChange", stateChangeListener);
+    }
+    return () => {
+      if (onInit) {
+        current.removeEventListener("_init", initListener);
+      }
+      if (onComplete) {
+        current.removeEventListener("_complete", completeListener);
+      }
+      if (onStateChange) {
+        current.removeEventListener("_stateChange", stateChangeListener);
+      }
+    };
+  }, [onInit, onComplete, onStateChange]);
+  return /* @__PURE__ */ jsx("goa-public-form", { ref, ..._props, children });
 }
-function GoabInputNumber({
-  min = Number.MIN_VALUE,
-  max = Number.MAX_VALUE,
-  value,
-  textAlign = "right",
-  ...props
+function GoabPublicSubform({
+  id = "",
+  name = "",
+  continueMsg = "",
+  onInit,
+  onStateChange,
+  children,
+  ...rest
 }) {
-  const onNumberChange = ({ name, value: value2, event }) => {
-    var _a;
-    (_a = props.onChange) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
-  };
-  const onFocus = ({ name, value: value2, event }) => {
-    var _a;
-    (_a = props.onFocus) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
-  };
-  const onBlur = ({ name, value: value2, event }) => {
-    var _a;
-    (_a = props.onBlur) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
-  };
-  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), event });
-  };
-  return /* @__PURE__ */ jsx(
-    GoabInput,
-    {
-      ...props,
-      onChange: onNumberChange,
-      min: min == null ? void 0 : min.toString(),
-      max: max == null ? void 0 : max.toString(),
-      value: value == null ? void 0 : value.toString(),
-      onFocus,
-      onBlur,
-      type: "number",
-      onKeyPress,
-      textAlign
+  const ref = useRef(null);
+  const _props = transformProps(
+    { id, name, "continue-msg": continueMsg, ...rest },
+    kebab
+  );
+  useEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const initListener = (e) => {
+      onInit == null ? void 0 : onInit(e);
+    };
+    const stateChangeListener = (e) => {
+      onStateChange == null ? void 0 : onStateChange(e);
+    };
+    if (onInit) {
+      current.addEventListener("_init", initListener);
     }
-  );
-}
-function GoabInputRange(props) {
-  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "range" });
-}
-const GoabLinearProgress = ({
-  progress,
-  percentVisibility,
-  ariaLabel,
-  ariaLabelledBy,
-  testId
-}) => {
-  return /* @__PURE__ */ jsx(
-    "goa-linear-progress",
-    {
-      progress,
-      "percent-visibility": percentVisibility,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      testid: testId
+    if (onStateChange) {
+      current.addEventListener("_stateChange", stateChangeListener);
     }
-  );
-};
-function GoabLink({
-  actionArgs,
-  actionArg,
+    return () => {
+      if (onInit) {
+        current.removeEventListener("_init", initListener);
+      }
+      if (onStateChange) {
+        current.removeEventListener("_stateChange", stateChangeListener);
+      }
+    };
+  }, [ref, onInit, onStateChange]);
+  return /* @__PURE__ */ jsx("goa-public-subform", { ref, ..._props, children });
+}
+function GoabPublicSubformIndex({
+  heading = "",
+  sectionTitle = "",
+  actionButtonText = "",
+  buttonVisibility = "hidden",
   children,
   ...rest
 }) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsx(
-    "goa-link",
-    {
-      "action-arg": actionArg,
-      "action-args": JSON.stringify(actionArgs),
-      ..._props,
-      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 GoALinkButton({
-  type = "primary",
+function GoabPublicFormTask({
+  status = "cannot-start",
   children,
   ...rest
 }) {
   const _props = transformProps(
-    { type, ...rest },
+    { status, ...rest },
     lowercase
   );
-  return /* @__PURE__ */ jsx("goa-link-button", { ..._props, children });
+  return /* @__PURE__ */ jsx("goa-public-form-task", { ..._props, children });
 }
-function GoabMenuButton({
-  type = "primary",
-  testId,
-  onAction,
+function GoabPublicFormTaskList({
   children,
   ...rest
 }) {
-  const el = useRef(null);
-  const _props = transformProps(
-    { type, testid: testId, ...rest },
-    kebab
-  );
-  useEffect(() => {
-    if (!el.current) {
-      return;
-    }
-    if (!onAction) {
-      return;
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-public-form-task-list", { ..._props, children });
+}
+function GoabFormItem({
+  error,
+  helpText,
+  publicFormSummaryOrder,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsxs(
+    "goa-form-item",
+    {
+      error: typeof error === "string" ? error : void 0,
+      helptext: typeof helpText === "string" ? helpText : void 0,
+      "public-form-summary-order": publicFormSummaryOrder,
+      ..._props,
+      children: [
+        error && typeof error !== "string" && /* @__PURE__ */ jsx("div", { slot: "error", children: error }),
+        helpText && typeof helpText !== "string" && /* @__PURE__ */ jsx("div", { slot: "helptext", children: helpText }),
+        children
+      ]
     }
-    const current = el.current;
-    const listener = (e) => {
-      const detail = e.detail;
-      onAction == null ? void 0 : onAction(detail);
-    };
-    current.addEventListener("_action", listener);
-    return () => {
-      current.removeEventListener("_action", listener);
-    };
-  }, [el, onAction]);
-  return /* @__PURE__ */ jsx("goa-menu-button", { ..._props, ref: el, children });
+  );
 }
-function GoabMenuAction(props) {
-  const _props = transformProps(props, lowercase);
-  return /* @__PURE__ */ jsx("goa-menu-action", { ..._props });
+function GoabFormStep(props) {
+  return /* @__PURE__ */ jsx("goa-form-step", { text: props.text, status: props.status });
 }
-function GoabMicrositeHeader({
-  type,
-  version,
-  feedbackUrl,
-  maxContentWidth,
-  feedbackUrlTarget,
-  headerUrlTarget,
+function GoabFormStepper({
   testId,
-  onFeedbackClick
+  step,
+  mt,
+  mb,
+  ml,
+  mr,
+  onChange,
+  children
 }) {
-  const el = useRef(null);
+  const ref = useRef(null);
   useEffect(() => {
-    if (!el.current) {
-      return;
-    }
-    if (!onFeedbackClick) {
+    if (!ref.current) {
       return;
     }
-    const current = el.current;
-    const listener = () => {
-      onFeedbackClick();
+    const current = ref.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange(detail);
     };
-    current.addEventListener("_feedbackClick", listener);
+    current.addEventListener("_change", changeListener);
     return () => {
-      current.removeEventListener("_feedbackClick", listener);
+      current.removeEventListener("_change", changeListener);
     };
-  }, [el, onFeedbackClick]);
+  }, [ref, onChange]);
   return /* @__PURE__ */ jsx(
-    "goa-microsite-header",
+    "goa-form-stepper",
     {
-      ref: el,
-      type,
-      version: typeof version === "string" ? version : void 0,
-      feedbackurl: feedbackUrl,
+      ref,
       testid: testId,
-      maxcontentwidth: maxContentWidth,
-      feedbackurltarget: feedbackUrlTarget,
-      headerurltarget: headerUrlTarget,
-      hasfeedbackhandler: onFeedbackClick ? "true" : "false",
-      children: version && typeof version !== "string" && /* @__PURE__ */ jsx("div", { slot: "version", children: version })
+      step,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
     }
   );
 }
-function GoabModal({
+function GoabGrid({
+  gap,
+  minChildWidth,
+  mt,
+  mr,
+  mb,
+  ml,
+  testId,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-grid",
+    {
+      gap,
+      minchildwidth: minChildWidth,
+      mt,
+      mr,
+      mb,
+      ml,
+      testid: testId,
+      children
+    }
+  );
+}
+function GoabHeroBanner({
   heading,
+  backgroundUrl,
+  minHeight,
+  maxContentWidth,
+  backgroundColor,
+  textColor,
   children,
-  maxWidth,
-  open,
-  actions,
-  transition,
-  calloutVariant,
-  onClose,
   testId
 }) {
-  const el = useRef(null);
-  useEffect(() => {
-    if (!el.current) {
-      return;
-    }
-    const current = el.current;
-    const listener = () => {
-      onClose == null ? void 0 : onClose();
-    };
-    current.addEventListener("_close", listener);
-    return () => {
-      current.removeEventListener("_close", listener);
-    };
-  }, [el, onClose]);
-  return /* @__PURE__ */ jsxs(
-    "goa-modal",
+  return /* @__PURE__ */ jsx(
+    "goa-hero-banner",
     {
-      ref: el,
-      open: open ? "true" : void 0,
-      closable: onClose ? "true" : "false",
-      heading: typeof heading === "string" ? heading : void 0,
-      maxwidth: maxWidth,
-      transition,
-      calloutvariant: calloutVariant,
+      heading,
+      backgroundurl: backgroundUrl,
+      minheight: minHeight,
+      maxcontentwidth: maxContentWidth,
+      backgroundcolor: backgroundColor,
+      textcolor: textColor,
       testid: testId,
-      children: [
-        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
-        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
-        children
-      ]
+      children
     }
   );
 }
-const GoabNotification = ({
-  type = "information",
-  ariaLive,
-  maxContentWidth,
+function GoabHeroBannerActions({
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { slot: "actions", children });
+}
+function GoabIconButton({
+  variant = "color",
+  size = "medium",
+  disabled,
+  onClick,
+  actionArgs,
+  actionArg,
   children,
-  testId,
-  onDismiss
-}) => {
-  const el = useRef(null);
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps(
+    { variant, size, ...rest },
+    lowercase
+  );
   useEffect(() => {
-    if (!el.current) {
+    if (!ref.current) {
       return;
     }
-    const current = el.current;
+    if (!onClick) {
+      return;
+    }
+    const current = ref.current;
     const listener = () => {
-      onDismiss == null ? void 0 : onDismiss();
+      onClick == null ? void 0 : onClick();
     };
-    current.addEventListener("_dismiss", listener);
+    current.addEventListener("_click", listener);
     return () => {
-      current.removeEventListener("_dismiss", listener);
+      current.removeEventListener("_click", listener);
     };
-  }, [el, onDismiss]);
+  }, [ref, onClick]);
   return /* @__PURE__ */ jsx(
-    "goa-notification",
+    "goa-icon-button",
     {
-      ref: el,
-      type,
-      testid: testId,
-      maxcontentwidth: maxContentWidth,
-      arialive: ariaLive,
+      ref,
+      disabled: disabled ? "true" : void 0,
+      "action-arg": actionArg,
+      "action-args": JSON.stringify(actionArgs),
+      ..._props,
       children
     }
   );
-};
-function GoabOneColumnLayout(props) {
-  return /* @__PURE__ */ jsx("goa-one-column-layout", { children: props.children });
-}
-function GoabPageBlock(props) {
-  return /* @__PURE__ */ jsx("goa-page-block", { width: props.width, testid: props.testId, children: props.children });
 }
-function GoabPages(props) {
+function GoabIcon({
+  inverted,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsx(
-    "goa-pages",
+    "goa-icon",
     {
-      current: props.current,
-      ml: props.ml,
-      mr: props.mr,
-      mt: props.mt,
-      mb: props.mb,
-      children: props.children
+      inverted: typeof inverted === "boolean" ? inverted ? "true" : void 0 : inverted,
+      ..._props
     }
   );
 }
-function GoabPagination({ onChange, ...props }) {
+function GoabInput({
+  variant = "goa",
+  textAlign = "left",
+  focused,
+  disabled,
+  readonly,
+  error,
+  leadingContent,
+  trailingContent,
+  onTrailingIconClick,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyPress,
+  ...rest
+}) {
   const ref = useRef(null);
+  const _props = transformProps({ variant, textalign: textAlign, ...rest }, lowercase);
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -1585,807 +1463,929 @@ function GoabPagination({ onChange, ...props }) {
     const current = ref.current;
     const changeListener = (e) => {
       const detail = e.detail;
-      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, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
+    const keypressListener = (e) => {
+      const detail = e.detail;
+      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
     };
     current.addEventListener("_change", changeListener);
+    current.addEventListener("_trailingIconClick", clickListener);
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
+    current.addEventListener("_keyPress", keypressListener);
     return () => {
       current.removeEventListener("_change", changeListener);
+      current.removeEventListener("_trailingIconClick", clickListener);
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
+      current.removeEventListener("_keyPress", keypressListener);
     };
-  }, [ref, onChange]);
-  return /* @__PURE__ */ jsx(
-    "goa-pagination",
+  }, [ref, onChange, onTrailingIconClick, onFocus, onBlur, onKeyPress]);
+  return /* @__PURE__ */ jsxs(
+    "goa-input",
     {
       ref,
-      itemcount: props.itemCount,
-      perpagecount: props.perPageCount,
-      pagenumber: props.pageNumber,
-      variant: props.variant,
-      mt: props.mt,
-      mb: props.mb,
-      ml: props.ml,
-      mr: props.mr,
-      testid: props.testId
+      ..._props,
+      focused: focused ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      readonly: readonly ? "true" : void 0,
+      error: error ? "true" : void 0,
+      handletrailingiconclick: onTrailingIconClick ? "true" : "false",
+      children: [
+        leadingContent && /* @__PURE__ */ jsx("div", { slot: "leadingContent", children: leadingContent }),
+        trailingContent && /* @__PURE__ */ jsx("div", { slot: "trailingContent", children: trailingContent })
+      ]
     }
   );
 }
-function GoabPopover({
-  target,
-  padded,
-  relative,
-  children,
-  ...rest
+const onDateChangeHandler = (onChange) => {
+  return ({ name, value, event }) => {
+    if (!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), event });
+      return;
+    }
+    if (isValid(value)) {
+      onChange == null ? void 0 : onChange({ name, value, event });
+      return;
+    }
+  };
+};
+const onTimeChangeHandler = (onChange) => {
+  return ({ name, value, event }) => {
+    if (!value) {
+      onChange == null ? void 0 : onChange({ name, value: "", event });
+      return;
+    }
+    onChange == null ? void 0 : onChange({ name, value, event });
+  };
+};
+function toString(value, tmpl = "yyyy-MM-dd") {
+  if (!value) {
+    return "";
+  }
+  if (typeof value === "string") {
+    return format(parseISO(value), tmpl);
+  }
+  if (value.toISOString() === (/* @__PURE__ */ new Date(0)).toISOString()) {
+    return "";
+  }
+  return format(value, tmpl);
+}
+function GoabInputText(props) {
+  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "text" });
+}
+function GoabInputPassword(props) {
+  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "password" });
+}
+function GoabInputDate({
+  value,
+  min = "",
+  max = "",
+  ...props
 }) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsxs(
-    "goa-popover",
+  return /* @__PURE__ */ jsx(
+    GoabInput,
     {
-      padded: typeof padded === "undefined" ? void 0 : padded ? "true" : "false",
-      relative: relative ? "true" : void 0,
-      ..._props,
-      children: [
-        children,
-        target && /* @__PURE__ */ jsx("div", { slot: "target", children: target })
-      ]
+      ...props,
+      type: "date",
+      onChange: onDateChangeHandler(props.onChange),
+      min: toString(min),
+      max: toString(max),
+      value: toString(value)
     }
   );
 }
-function GoabPushDrawer({
-  testid,
-  open,
-  heading,
-  width,
-  actions,
-  children,
-  onClose
+function GoabInputTime({
+  value,
+  min = "",
+  max = "",
+  ...props
 }) {
-  const el = useRef(null);
-  useEffect(() => {
-    const elCurrent = el == null ? void 0 : el.current;
-    if (!elCurrent || !onClose) {
-      return;
-    }
-    elCurrent.addEventListener("_close", onClose);
-    return () => {
-      elCurrent.removeEventListener("_close", onClose);
-    };
-  }, [el, onClose]);
-  return /* @__PURE__ */ jsxs(
-    "goa-push-drawer",
+  return /* @__PURE__ */ jsx(
+    GoabInput,
     {
-      ref: el,
-      testid,
-      open: open ? true : void 0,
-      heading: typeof heading === "string" ? heading : void 0,
-      width,
-      children: [
-        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
-        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
-        children
-      ]
+      ...props,
+      onChange: onTimeChangeHandler(props.onChange),
+      value,
+      type: "time"
     }
   );
 }
-function GoabRadioItem({
-  name,
-  label,
+function GoabInputDateTime({
   value,
-  description,
-  reveal,
-  revealAriaLabel,
-  maxWidth,
-  disabled,
-  checked,
-  error,
-  ariaLabel,
-  children,
-  mt,
-  mr,
-  mb,
-  ml
+  min = "",
+  max = "",
+  ...props
 }) {
-  return /* @__PURE__ */ jsxs(
-    "goa-radio-item",
+  return /* @__PURE__ */ jsx(
+    GoabInput,
     {
-      name,
-      label,
-      value,
-      description: typeof description === "string" ? description : void 0,
-      maxwidth: maxWidth,
-      error: error ? "true" : void 0,
-      disabled: disabled ? "true" : void 0,
-      checked: checked ? "true" : void 0,
-      arialabel: ariaLabel,
-      revealarialabel: revealAriaLabel,
-      mt,
-      mr,
-      mb,
-      ml,
-      children: [
-        description && typeof description !== "string" && /* @__PURE__ */ jsx("div", { slot: "description", children: description }),
-        reveal && /* @__PURE__ */ jsx("div", { slot: "reveal", children: reveal }),
-        children
-      ]
+      ...props,
+      onChange: onDateChangeHandler(props.onChange),
+      value: toString(value, "yyyy-MM-dd'T'HH:mm"),
+      type: "datetime-local"
     }
   );
 }
-function GoabRadioGroup({
-  disabled,
-  error,
-  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, event: e });
-    };
-    const currentEl = el.current;
-    if (onChange) {
-      currentEl.addEventListener("_change", listener);
-    }
-    return () => {
-      if (onChange) {
-        currentEl.removeEventListener("_change", listener);
-      }
-    };
-  }, [name, onChange]);
+function GoabInputEmail(props) {
+  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "email" });
+}
+function GoabInputSearch(props) {
+  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "search", trailingIcon: "search" });
+}
+function GoabInputUrl(props) {
+  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "url" });
+}
+function GoabInputTel(props) {
+  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "tel" });
+}
+function GoabInputFile(props) {
   return /* @__PURE__ */ jsx(
-    "goa-radio-group",
+    "input",
     {
-      ref: el,
-      ..._props,
-      name,
-      disabled: disabled ? "true" : void 0,
-      error: error ? "true" : void 0,
-      children
+      id: props.id,
+      name: props.name,
+      type: "file",
+      onChange: (e) => {
+        var _a;
+        return (_a = props.onChange) == null ? void 0 : _a.call(props, {
+          name: e.target.name,
+          value: e.target.value,
+          event: e.nativeEvent
+        });
+      },
+      style: { backgroundColor: "revert" }
     }
   );
 }
-function GoabSideMenuGroup(props) {
+function GoabInputMonth(props) {
+  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "month" });
+}
+function GoabInputNumber({
+  min = Number.MIN_VALUE,
+  max = Number.MAX_VALUE,
+  value,
+  textAlign = "right",
+  ...props
+}) {
+  const onNumberChange = ({ name, value: value2, event }) => {
+    var _a;
+    (_a = props.onChange) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
+  };
+  const onFocus = ({ name, value: value2, event }) => {
+    var _a;
+    (_a = props.onFocus) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
+  };
+  const onBlur = ({ name, value: value2, event }) => {
+    var _a;
+    (_a = props.onBlur) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
+  };
+  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), event });
+  };
   return /* @__PURE__ */ jsx(
-    "goa-side-menu-group",
+    GoabInput,
     {
-      heading: props.heading,
-      icon: props.icon,
-      testid: props.testId,
-      mt: props.mt,
-      mr: props.mr,
-      mb: props.mb,
-      ml: props.ml,
-      children: props.children
+      ...props,
+      onChange: onNumberChange,
+      min: min == null ? void 0 : min.toString(),
+      max: max == null ? void 0 : max.toString(),
+      value: value == null ? void 0 : value.toString(),
+      onFocus,
+      onBlur,
+      type: "number",
+      onKeyPress,
+      textAlign
     }
   );
 }
-function GoabSideMenuHeading(props) {
-  return /* @__PURE__ */ jsxs("goa-side-menu-heading", { icon: props.icon, testid: props.testId, children: [
-    props.children,
-    props.meta && /* @__PURE__ */ jsx("span", { slot: "meta", children: props.meta })
-  ] });
-}
-function GoabSideMenu(props) {
-  return /* @__PURE__ */ jsx("goa-side-menu", { testid: props.testId, children: props.children });
+function GoabInputRange(props) {
+  return /* @__PURE__ */ jsx(GoabInput, { ...props, type: "range" });
 }
-const GoabSkeleton = ({
-  maxWidth,
-  size,
-  lineCount,
-  type,
-  testId,
-  mt,
-  mr,
-  mb,
-  ml
+const GoabLinearProgress = ({
+  progress,
+  percentVisibility,
+  ariaLabel,
+  ariaLabelledBy,
+  testId
 }) => {
   return /* @__PURE__ */ jsx(
-    "goa-skeleton",
+    "goa-linear-progress",
     {
-      maxwidth: maxWidth,
-      linecount: lineCount,
-      type,
-      size,
-      mt,
-      mr,
-      mb,
-      ml,
+      progress,
+      "percent-visibility": percentVisibility,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       testid: testId
     }
   );
 };
-function GoabSpacer(props) {
+function GoabLink({
+  actionArgs,
+  actionArg,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsx(
-    "goa-spacer",
+    "goa-link",
     {
-      hspacing: props.hSpacing,
-      vspacing: props.vSpacing,
-      testid: props.testId
+      "action-arg": actionArg,
+      "action-args": JSON.stringify(actionArgs),
+      ..._props,
+      children
     }
   );
 }
-function GoabSpinner({
+function GoALinkButton({
+  type = "primary",
+  children,
+  ...rest
+}) {
+  const _props = transformProps(
+    { type, ...rest },
+    lowercase
+  );
+  return /* @__PURE__ */ jsx("goa-link-button", { ..._props, children });
+}
+function GoabMenuButton({
+  type = "primary",
+  testId,
+  onAction,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(
+    { type, testid: testId, ...rest },
+    kebab
+  );
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onAction) {
+      return;
+    }
+    const current = el.current;
+    const listener = (e) => {
+      const detail = e.detail;
+      onAction == null ? void 0 : onAction(detail);
+    };
+    current.addEventListener("_action", listener);
+    return () => {
+      current.removeEventListener("_action", listener);
+    };
+  }, [el, onAction]);
+  return /* @__PURE__ */ jsx("goa-menu-button", { ..._props, ref: el, children });
+}
+function GoabMenuAction(props) {
+  const _props = transformProps(props, lowercase);
+  return /* @__PURE__ */ jsx("goa-menu-action", { ..._props });
+}
+function GoabMicrositeHeader({
   type,
-  size,
-  progress,
-  invert,
-  testId
+  version,
+  feedbackUrl,
+  maxContentWidth,
+  feedbackUrlTarget,
+  headerUrlTarget,
+  testId,
+  onFeedbackClick
 }) {
-  return /* @__PURE__ */ jsx(
-    "goa-spinner",
-    {
-      type,
-      size,
-      progress,
-      invert: invert ? "true" : void 0,
-      testid: testId
-    }
-  );
-}
-function GoabTable({ onSort, ...props }) {
-  const ref = useRef(null);
+  const el = useRef(null);
   useEffect(() => {
-    if (!ref.current) {
+    if (!el.current) {
       return;
     }
-    const current = ref.current;
-    const sortListener = (e) => {
-      const detail = e.detail;
-      onSort == null ? void 0 : onSort(detail);
+    if (!onFeedbackClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onFeedbackClick();
     };
-    current.addEventListener("_sort", sortListener);
+    current.addEventListener("_feedbackClick", listener);
     return () => {
-      current.removeEventListener("_sort", sortListener);
+      current.removeEventListener("_feedbackClick", listener);
     };
-  }, [ref, onSort]);
+  }, [el, onFeedbackClick]);
   return /* @__PURE__ */ jsx(
-    "goa-table",
+    "goa-microsite-header",
     {
-      ref,
-      width: props.width,
-      variant: props.variant,
-      testid: props.testId,
-      mt: props.mt,
-      mb: props.mb,
-      ml: props.ml,
-      mr: props.mr,
-      children: /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: props.children })
+      ref: el,
+      type,
+      version: typeof version === "string" ? version : void 0,
+      feedbackurl: feedbackUrl,
+      testid: testId,
+      maxcontentwidth: maxContentWidth,
+      feedbackurltarget: feedbackUrlTarget,
+      headerurltarget: headerUrlTarget,
+      hasfeedbackhandler: onFeedbackClick ? "true" : "false",
+      children: version && typeof version !== "string" && /* @__PURE__ */ jsx("div", { slot: "version", children: version })
     }
   );
 }
-function GoabTableSortHeader({
-  children,
-  ...rest
-}) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsx("goa-table-sort-header", { ..._props, children });
-}
-function GoabTabs({
-  initialTab,
+function GoabModal({
+  heading,
   children,
-  testId,
-  variant,
-  onChange
+  maxWidth,
+  open,
+  actions,
+  transition,
+  calloutVariant,
+  onClose,
+  testId
 }) {
-  const ref = useRef(null);
+  const el = useRef(null);
   useEffect(() => {
-    const element = ref.current;
-    if (element && onChange) {
-      const handler = (event) => {
-        const detail = event.detail;
-        onChange(detail);
-      };
-      element.addEventListener("_change", handler);
-      return () => {
-        element.removeEventListener("_change", handler);
-      };
+    if (!el.current) {
+      return;
     }
-  }, [onChange]);
-  return /* @__PURE__ */ jsx("goa-tabs", { ref, initialtab: initialTab, testid: testId, variant, children });
-}
-function GoabTab({ heading, disabled, slug, children }) {
+    const current = el.current;
+    const listener = () => {
+      onClose == null ? void 0 : onClose();
+    };
+    current.addEventListener("_close", listener);
+    return () => {
+      current.removeEventListener("_close", listener);
+    };
+  }, [el, onClose]);
   return /* @__PURE__ */ jsxs(
-    "goa-tab",
+    "goa-modal",
     {
-      slug,
-      disabled: disabled ? "true" : void 0,
+      ref: el,
+      open: open ? "true" : void 0,
+      closable: onClose ? "true" : "false",
       heading: typeof heading === "string" ? heading : void 0,
+      maxwidth: maxWidth,
+      transition,
+      calloutvariant: calloutVariant,
+      testid: testId,
       children: [
-        typeof heading !== "string" && /* @__PURE__ */ jsx("span", { slot: "heading", children: heading }),
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
         children
       ]
     }
   );
 }
-const GoabTemporaryNotificationCtrl = ({
-  verticalPosition = "bottom",
-  horizontalPosition = "center",
+const GoabNotification = ({
+  type = "information",
+  ariaLive,
+  maxContentWidth,
+  children,
   testId,
-  ...rest
+  onDismiss
 }) => {
   const el = useRef(null);
-  const _props = transformProps(
-    { "vertical-position": verticalPosition, "horizontal-position": horizontalPosition, ...rest },
-    kebab
-  );
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onDismiss == null ? void 0 : onDismiss();
+    };
+    current.addEventListener("_dismiss", listener);
+    return () => {
+      current.removeEventListener("_dismiss", listener);
+    };
+  }, [el, onDismiss]);
   return /* @__PURE__ */ jsx(
-    "goa-temp-notification-ctrl",
+    "goa-notification",
     {
       ref: el,
-      ..._props,
-      testid: testId
+      type,
+      testid: testId,
+      maxcontentwidth: maxContentWidth,
+      arialive: ariaLive,
+      children
     }
   );
 };
-function GoabText({
-  as,
-  tag,
-  children,
-  ...rest
-}) {
-  const _props = transformProps(rest, lowercase);
+function GoabOneColumnLayout(props) {
+  return /* @__PURE__ */ jsx("goa-one-column-layout", { children: props.children });
+}
+function GoabPageBlock(props) {
+  return /* @__PURE__ */ jsx("goa-page-block", { width: props.width, testid: props.testId, children: props.children });
+}
+function GoabPages(props) {
   return /* @__PURE__ */ jsx(
-    "goa-text",
+    "goa-pages",
     {
-      as: tag || as,
-      ..._props,
-      children
+      current: props.current,
+      ml: props.ml,
+      mr: props.mr,
+      mt: props.mt,
+      mb: props.mb,
+      children: props.children
     }
   );
 }
-function GoabTextArea({
-  readOnly,
-  disabled,
-  error,
-  onChange,
-  onKeyPress,
-  onBlur,
-  ...rest
-}) {
-  const el = useRef(null);
-  const _props = transformProps(rest, lowercase);
+function GoabPagination({ onChange, ...props }) {
+  const ref = useRef(null);
   useEffect(() => {
-    if (!el.current) {
+    if (!ref.current) {
       return;
     }
-    const current = el.current;
+    const current = ref.current;
     const changeListener = (e) => {
       const detail = e.detail;
-      onChange == null ? void 0 : onChange({ ...detail, event: e });
-    };
-    const keypressListener = (e) => {
-      const detail = e.detail;
-      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
-    };
-    const blurListener = (e) => {
-      const detail = e.detail;
-      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+      onChange(detail);
     };
     current.addEventListener("_change", changeListener);
-    current.addEventListener("_keyPress", keypressListener);
-    current.addEventListener("_blur", blurListener);
     return () => {
       current.removeEventListener("_change", changeListener);
-      current.removeEventListener("_keyPress", keypressListener);
-      current.removeEventListener("_blur", blurListener);
     };
-  }, [el, onChange, onKeyPress, onBlur]);
+  }, [ref, onChange]);
   return /* @__PURE__ */ jsx(
-    "goa-textarea",
-    {
-      ref: el,
-      readOnly: readOnly ? "true" : void 0,
-      disabled: disabled ? "true" : void 0,
-      error: error ? "true" : void 0,
-      ..._props
-    }
-  );
-}
-function GoabThreeColumnLayout(props) {
-  return /* @__PURE__ */ jsxs(
-    "goa-three-column-layout",
+    "goa-pagination",
     {
-      leftcolumnwidth: props.leftColumnWidth,
-      rightcolumnwidth: props.rightColumnWidth,
-      maxcontentwidth: props.maxContentWidth,
-      children: [
-        props.header && /* @__PURE__ */ jsx("div", { slot: "header", children: props.header }),
-        props.nav && /* @__PURE__ */ jsx("div", { slot: "nav", children: props.nav }),
-        props.sidebar && /* @__PURE__ */ jsx("div", { slot: "side-menu", children: props.sidebar }),
-        props.sideMenu && /* @__PURE__ */ jsx("div", { slot: "side-menu", children: props.sideMenu }),
-        props.children,
-        props.footer && /* @__PURE__ */ jsx("div", { slot: "footer", children: props.footer })
-      ]
+      ref,
+      itemcount: props.itemCount,
+      perpagecount: props.perPageCount,
+      pagenumber: props.pageNumber,
+      variant: props.variant,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      testid: props.testId
     }
   );
 }
-function GoabTooltip({
-  content,
+function GoabPopover({
+  target,
+  padded,
+  relative,
   children,
   ...rest
 }) {
   const _props = transformProps(rest, lowercase);
-  const isStringContent = typeof content === "string";
   return /* @__PURE__ */ jsxs(
-    "goa-tooltip",
+    "goa-popover",
     {
-      content: isStringContent ? content : void 0,
+      padded: typeof padded === "undefined" ? void 0 : padded ? "true" : "false",
+      relative: relative ? "true" : void 0,
       ..._props,
       children: [
-        !isStringContent && content && /* @__PURE__ */ jsx("div", { slot: "content", children: content }),
-        children
-      ]
-    }
-  );
-}
-function GoabTwoColumnLayout(props) {
-  return /* @__PURE__ */ jsxs(
-    "goa-two-column-layout",
-    {
-      navcolumnwidth: props.navColumnWidth,
-      maxcontentwidth: props.maxContentWidth,
-      children: [
-        props.header && /* @__PURE__ */ jsx("div", { slot: "header", children: props.header }),
-        props.nav && /* @__PURE__ */ jsx("div", { slot: "nav", children: props.nav }),
-        props.children,
-        props.footer && /* @__PURE__ */ jsx("div", { slot: "footer", children: props.footer })
+        children,
+        target && /* @__PURE__ */ jsx("div", { slot: "target", children: target })
       ]
     }
   );
 }
-const GoabFilterChip = ({
-  iconTheme = "outline",
-  error,
-  onClick,
-  ...rest
-}) => {
+function GoabPushDrawer({
+  testid,
+  open,
+  heading,
+  width,
+  actions,
+  children,
+  onClose
+}) {
   const el = useRef(null);
-  const _props = transformProps(
-    { icontheme: iconTheme, ...rest },
-    lowercase
-  );
   useEffect(() => {
-    if (!el.current) return;
-    if (!onClick) return;
-    const current = el.current;
-    current.addEventListener("_click", onClick);
+    const elCurrent = el == null ? void 0 : el.current;
+    if (!elCurrent || !onClose) {
+      return;
+    }
+    elCurrent.addEventListener("_close", onClose);
     return () => {
-      current.removeEventListener("_click", onClick);
+      elCurrent.removeEventListener("_close", onClose);
     };
-  }, [el, onClick]);
-  return /* @__PURE__ */ jsx(
-    "goa-filter-chip",
+  }, [el, onClose]);
+  return /* @__PURE__ */ jsxs(
+    "goa-push-drawer",
     {
       ref: el,
-      error: error ? "true" : void 0,
-      ..._props
+      testid,
+      open: open ? true : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      width,
+      children: [
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
+        children
+      ]
     }
   );
-};
-function dispatch(el, eventName, detail, opts) {
-  if (!el) {
-    console.error("dispatch element is null");
-    return;
-  }
-  el.dispatchEvent(
-    new CustomEvent(eventName, {
-      composed: true,
-      bubbles: opts == null ? void 0 : opts.bubbles,
-      detail
-    })
-  );
-}
-function relay(el, eventName, data, opts) {
-  if (!el) {
-    console.error("dispatch element is null");
-    return;
-  }
-  el.dispatchEvent(
-    new CustomEvent("msg", {
-      composed: true,
-      bubbles: opts == null ? void 0 : opts.bubbles,
-      detail: {
-        action: eventName,
-        data
-      }
-    })
-  );
 }
-class PublicFormController {
-  constructor(type) {
-    __privateAdd(this, _PublicFormController_instances);
-    __publicField(this, "state");
-    __publicField(this, "_formData");
-    __publicField(this, "_formRef");
-    __publicField(this, "_isCompleting", false);
-    this.type = type;
-  }
-  // Obtain reference to the form element
-  init(e) {
-    if (this._formRef) {
-      console.warn("init: form element has already been set");
-      return;
-    }
-    this._formRef = e.detail.el;
-    this.state = {
-      uuid: crypto.randomUUID(),
-      form: {},
-      history: [],
-      editting: "",
-      status: "not-started"
-    };
-  }
-  initList(e) {
-    this._formRef = e.detail.el;
-    this.state = [];
-  }
-  // Public method to allow for the initialization of the state
-  initState(state, callback) {
-    relay(this._formRef, "external::init:state", state);
-    if (typeof state === "string") {
-      this.state = JSON.parse(state);
-    } else if (!Array.isArray(state)) {
-      this.state = state;
-    }
-    if (callback) {
-      setTimeout(callback, 200);
-    }
-  }
-  updateListState(e) {
-    const detail = e.detail;
-    if (!Array.isArray(detail.data)) {
-      return;
-    }
-    this.state = detail.data;
-  }
-  updateObjectState(e) {
-    var _a, _b;
-    if (Array.isArray(this.state)) {
-      return;
-    }
-    const detail = e.detail;
-    if (detail.type === "list") {
-      this.state = {
-        ...this.state,
-        form: { ...((_a = this.state) == null ? void 0 : _a.form) || {}, [detail.id]: detail.data }
-      };
-    } else {
-      this.state = {
-        ...this.state,
-        ...detail.data,
-        form: { ...((_b = this.state) == null ? void 0 : _b.form) || {}, ...detail.data.form },
-        history: detail.data.history
-      };
-    }
-  }
-  getStateList() {
-    if (!this.state) {
-      return [];
-    }
-    if (!Array.isArray(this.state)) {
-      console.warn(
-        "Utils:getStateList: unable to update the state of a non-multi form type",
-        this.state
-      );
-      return [];
-    }
-    if (this.state.length === 0) {
-      return [];
-    }
-    return this.state.map((s) => {
-      return Object.values(s.form).filter((item) => {
-        var _a;
-        return ((_a = item == null ? void 0 : item.data) == null ? void 0 : _a.type) === "details";
-      }).map((item) => {
-        var _a;
-        return item.data.type === "details" && ((_a = item.data) == null ? void 0 : _a.fieldsets) || {};
-      }).reduce(
-        (acc, item) => {
-          for (const [key, value] of Object.entries(item)) {
-            acc[key] = value.value;
-          }
-          return acc;
-        },
-        {}
-      );
-    });
-  }
-  // getStateItems(group: string): Record<string, FieldsetItemState>[] {
-  //   if (Array.isArray(this.state)) {
-  //     console.error(
-  //       "Utils:getStateItems: unable to update the state of a multi form type",
-  //     );
-  //     return [];
-  //   }
-  //   if (!this.state) {
-  //     console.error("Utils:getStateItems: state has not yet been set");
-  //     return [];
-  //   }
-  //
-  //   const data = this.state.form[group].data;
-  //   if (data.type !== "list") {
-  //     return [];
-  //   }
-  //
-  //   return data.items.;
-  // }
-  // Public method to allow for the retrieval of the state value
-  getStateValue(group, key) {
-    if (Array.isArray(this.state)) {
-      console.error("getStateValue: unable to update the state of a multi form type");
-      return "";
+function GoabRadioItem({
+  name,
+  label,
+  value,
+  description,
+  reveal,
+  revealAriaLabel,
+  maxWidth,
+  disabled,
+  checked,
+  error,
+  ariaLabel,
+  children,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  return /* @__PURE__ */ jsxs(
+    "goa-radio-item",
+    {
+      name,
+      label,
+      value,
+      description: typeof description === "string" ? description : void 0,
+      maxwidth: maxWidth,
+      error: error ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      checked: checked ? "true" : void 0,
+      arialabel: ariaLabel,
+      revealarialabel: revealAriaLabel,
+      mt,
+      mr,
+      mb,
+      ml,
+      children: [
+        description && typeof description !== "string" && /* @__PURE__ */ jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsx("div", { slot: "reveal", children: reveal }),
+        children
+      ]
     }
-    if (!this.state) {
-      console.error("getStateValue: state has not yet been set");
-      return "";
+  );
+}
+function GoabRadioGroup({
+  disabled,
+  error,
+  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, event: e });
+    };
+    const currentEl = el.current;
+    if (onChange) {
+      currentEl.addEventListener("_change", listener);
     }
-    const data = this.state.form[group].data;
-    if (data.type !== "details") {
-      return "";
+    return () => {
+      if (onChange) {
+        currentEl.removeEventListener("_change", listener);
+      }
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-radio-group",
+    {
+      ref: el,
+      ..._props,
+      name,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      children
     }
-    return data.fieldsets[key].value;
-  }
-  // Public method to allow for the continuing to the next page
-  continueTo(next) {
-    if (!next) {
-      console.error("continueTo [name] is undefined");
-      return;
+  );
+}
+function GoabSideMenuGroup(props) {
+  return /* @__PURE__ */ jsx(
+    "goa-side-menu-group",
+    {
+      heading: props.heading,
+      icon: props.icon,
+      testid: props.testId,
+      mt: props.mt,
+      mr: props.mr,
+      mb: props.mb,
+      ml: props.ml,
+      children: props.children
     }
-    relay(this._formRef, "external::continue", { next });
-  }
-  // Public method to perform validation and send the appropriate messages to the form elements
-  validate(e, field, validators, options) {
-    var _a;
-    const { el, state, cancelled } = e.detail;
-    const value = (_a = state == null ? void 0 : state[field]) == null ? void 0 : _a.value;
-    window.scrollTo({ top: 0, behavior: "smooth" });
-    if (cancelled) {
-      return [true, value];
+  );
+}
+function GoabSideMenuHeading(props) {
+  return /* @__PURE__ */ jsxs("goa-side-menu-heading", { icon: props.icon, testid: props.testId, children: [
+    props.children,
+    props.meta && /* @__PURE__ */ jsx("span", { slot: "meta", children: props.meta })
+  ] });
+}
+function GoabSideMenu(props) {
+  return /* @__PURE__ */ jsx("goa-side-menu", { testid: props.testId, children: props.children });
+}
+const GoabSkeleton = ({
+  maxWidth,
+  size,
+  lineCount,
+  type,
+  testId,
+  mt,
+  mr,
+  mb,
+  ml
+}) => {
+  return /* @__PURE__ */ jsx(
+    "goa-skeleton",
+    {
+      maxwidth: maxWidth,
+      linecount: lineCount,
+      type,
+      size,
+      mt,
+      mr,
+      mb,
+      ml,
+      testid: testId
     }
-    for (const validator of validators) {
-      const msg = validator(value);
-      __privateMethod(this, _PublicFormController_instances, dispatchError_fn).call(this, el, field, msg, options);
-      if (msg) {
-        return [false, ""];
-      }
+  );
+};
+function GoabSpacer(props) {
+  return /* @__PURE__ */ jsx(
+    "goa-spacer",
+    {
+      hspacing: props.hSpacing,
+      vspacing: props.vSpacing,
+      testid: props.testId
     }
-    return [true, value];
-  }
-  /**
-   * Validates a group of fields ensuring that at least `minPassCount` of the items within the group
-   * passes. This is useful in the scenario when n number fields are required out of n+m number of fields.
-   *
-   * @param {string[]} fields - An array of field names to be validated.
-   * @param {Event} e - The event object associated with the validation trigger.
-   * @param {FieldValidator[]} validators - An array of validator functions to apply to the fields.
-   * @return {[number, Record<string, boolean>]} - Returns back the number of fields that passed and a record of the fields and their pass status.
-   */
-  validateGroup(e, fields, validators) {
-    let passCount = 0;
-    const validGroups = {};
-    for (const field of fields) {
-      const [_valid] = this.validate(e, field, validators, { grouped: true });
-      if (_valid) {
-        validGroups[field] = true;
-        passCount++;
-      }
+  );
+}
+function GoabSpinner({
+  type,
+  size,
+  progress,
+  invert,
+  testId
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-spinner",
+    {
+      type,
+      size,
+      progress,
+      invert: invert ? "true" : void 0,
+      testid: testId
     }
-    return [passCount, validGroups];
-  }
-  edit(index) {
-    relay(this._formRef, "external::alter:state", { index, operation: "edit" });
-  }
-  remove(index) {
-    relay(this._formRef, "external::alter:state", {
-      index,
-      operation: "remove"
-    });
-  }
-  /**
-   * Completes the form and triggers the onComplete callback.
-   * This method should be used when you want to complete a form without navigating to a summary page.
-   *
-   * @important Developers must validate the form before calling this method.
-   *
-   * @example
-   * // Validate first, then complete
-   * const [isValid] = this.validate(e, "firstName", [
-   *   requiredValidator("First name is required.")
-   * ]);
-   * if (isValid) {
-   *   this.complete();
-   * }
-   * @returns void
-   */
-  complete() {
-    if (!this._formRef) {
-      console.error("complete: form ref is not set");
+  );
+}
+function GoabTable({ onSort, ...props }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
       return;
     }
-    if (this._isCompleting) {
-      console.warn("complete: completion already in progress");
-      return;
+    const current = ref.current;
+    const sortListener = (e) => {
+      const detail = e.detail;
+      onSort == null ? void 0 : onSort(detail);
+    };
+    current.addEventListener("_sort", sortListener);
+    return () => {
+      current.removeEventListener("_sort", sortListener);
+    };
+  }, [ref, onSort]);
+  return /* @__PURE__ */ jsx(
+    "goa-table",
+    {
+      ref,
+      width: props.width,
+      variant: props.variant,
+      testid: props.testId,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      children: /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: props.children })
+    }
+  );
+}
+function GoabTableSortHeader({
+  children,
+  ...rest
+}) {
+  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);
+  useEffect(() => {
+    const element = ref.current;
+    if (element && onChange) {
+      const handler = (event) => {
+        const detail = event.detail;
+        onChange(detail);
+      };
+      element.addEventListener("_change", handler);
+      return () => {
+        element.removeEventListener("_change", handler);
+      };
+    }
+  }, [onChange]);
+  return /* @__PURE__ */ jsx("goa-tabs", { ref, initialtab: initialTab, testid: testId, variant, children });
+}
+function GoabTab({ heading, disabled, slug, children }) {
+  return /* @__PURE__ */ jsxs(
+    "goa-tab",
+    {
+      slug,
+      disabled: disabled ? "true" : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      children: [
+        typeof heading !== "string" && /* @__PURE__ */ jsx("span", { slot: "heading", children: heading }),
+        children
+      ]
     }
-    this._isCompleting = true;
-    relay(this._formRef, "fieldset::submit", null, { bubbles: true });
-    this._isCompleting = false;
-  }
-  /**
-   * Completes a subform and returns control to the parent form.
-   * This method should be used when working with subforms that need to complete without a summary page.
-   *
-   * @important Developers must validate the subform before calling this method.
-   *
-   * @example
-   * // Validate first, then complete the subform
-   * const [isValid] = this._childFormController.validate(e, "fullName", [
-   *   requiredValidator("Please enter the dependent's full name.")
-   * ]);
-   * if (isValid) {
-   *   this._childFormController.completeSubform();
-   * }
-   * @returns void
-   */
-  completeSubform() {
-    if (!this._formRef) {
-      console.error("completeSubform: form ref is not set");
-      return;
+  );
+}
+const GoabTemporaryNotificationCtrl = ({
+  verticalPosition = "bottom",
+  horizontalPosition = "center",
+  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,
+      ..._props,
+      testid: testId
     }
-    if (this._isCompleting) {
-      console.warn("completeSubform: completion already in progress");
+  );
+};
+function GoabText({
+  as,
+  tag,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-text",
+    {
+      as: tag || as,
+      ..._props,
+      children
+    }
+  );
+}
+function GoabTextArea({
+  readOnly,
+  disabled,
+  error,
+  onChange,
+  onKeyPress,
+  onBlur,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
       return;
     }
-    const formRef = this._formRef;
-    this._isCompleting = true;
-    const stateChangeHandler = (e) => {
-      formRef.removeEventListener("_stateChange", stateChangeHandler);
-      dispatch(formRef, "_complete", {}, { bubbles: true });
-      this._isCompleting = false;
+    const current = el.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
-    formRef.addEventListener("_stateChange", stateChangeHandler);
-    dispatch(formRef, "_continue", null, { bubbles: true });
-  }
-  // removes any data collected that doesn't correspond with the final history path
-  clean(data) {
-    return data.history.reduce((acc, fieldsetId) => {
-      acc[fieldsetId] = data.form[fieldsetId];
-      return acc;
-    }, {});
-  }
+    const keypressListener = (e) => {
+      const detail = e.detail;
+      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
+    current.addEventListener("_change", changeListener);
+    current.addEventListener("_keyPress", keypressListener);
+    current.addEventListener("_blur", blurListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+      current.removeEventListener("_keyPress", keypressListener);
+      current.removeEventListener("_blur", blurListener);
+    };
+  }, [el, onChange, onKeyPress, onBlur]);
+  return /* @__PURE__ */ jsx(
+    "goa-textarea",
+    {
+      ref: el,
+      readOnly: readOnly ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      ..._props
+    }
+  );
 }
-_PublicFormController_instances = new WeakSet();
-updateObjectListState_fn = function(detail) {
-  var _a;
-  if (!Array.isArray(detail.data)) {
-    return;
-  }
-  if (Array.isArray(this.state)) {
-    return;
-  }
-  this.state = {
-    ...this.state,
-    form: {
-      ...((_a = this.state) == null ? void 0 : _a.form) || {},
-      [detail.id]: detail.data
+function GoabThreeColumnLayout(props) {
+  return /* @__PURE__ */ jsxs(
+    "goa-three-column-layout",
+    {
+      leftcolumnwidth: props.leftColumnWidth,
+      rightcolumnwidth: props.rightColumnWidth,
+      maxcontentwidth: props.maxContentWidth,
+      children: [
+        props.header && /* @__PURE__ */ jsx("div", { slot: "header", children: props.header }),
+        props.nav && /* @__PURE__ */ jsx("div", { slot: "nav", children: props.nav }),
+        props.sidebar && /* @__PURE__ */ jsx("div", { slot: "side-menu", children: props.sidebar }),
+        props.sideMenu && /* @__PURE__ */ jsx("div", { slot: "side-menu", children: props.sideMenu }),
+        props.children,
+        props.footer && /* @__PURE__ */ jsx("div", { slot: "footer", children: props.footer })
+      ]
+    }
+  );
+}
+function GoabTooltip({
+  content,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  const isStringContent = typeof content === "string";
+  return /* @__PURE__ */ jsxs(
+    "goa-tooltip",
+    {
+      content: isStringContent ? content : void 0,
+      ..._props,
+      children: [
+        !isStringContent && content && /* @__PURE__ */ jsx("div", { slot: "content", children: content }),
+        children
+      ]
+    }
+  );
+}
+function GoabTwoColumnLayout(props) {
+  return /* @__PURE__ */ jsxs(
+    "goa-two-column-layout",
+    {
+      navcolumnwidth: props.navColumnWidth,
+      maxcontentwidth: props.maxContentWidth,
+      children: [
+        props.header && /* @__PURE__ */ jsx("div", { slot: "header", children: props.header }),
+        props.nav && /* @__PURE__ */ jsx("div", { slot: "nav", children: props.nav }),
+        props.children,
+        props.footer && /* @__PURE__ */ jsx("div", { slot: "footer", children: props.footer })
+      ]
+    }
+  );
+}
+const GoabFilterChip = ({
+  iconTheme = "outline",
+  error,
+  onClick,
+  ...rest
+}) => {
+  const el = useRef(null);
+  const _props = transformProps(
+    { icontheme: iconTheme, ...rest },
+    lowercase
+  );
+  useEffect(() => {
+    if (!el.current) return;
+    if (!onClick) return;
+    const current = el.current;
+    current.addEventListener("_click", onClick);
+    return () => {
+      current.removeEventListener("_click", onClick);
+    };
+  }, [el, onClick]);
+  return /* @__PURE__ */ jsx(
+    "goa-filter-chip",
+    {
+      ref: el,
+      error: error ? "true" : void 0,
+      ..._props
     }
-  };
-};
-// Private method to dispatch the error message to the form element
-dispatchError_fn = function(el, name, msg, options) {
-  el.dispatchEvent(
-    new CustomEvent("msg", {
-      composed: true,
-      detail: {
-        action: "external::set:error",
-        data: {
-          name,
-          msg,
-          grouped: options == null ? void 0 : options.grouped
-        }
-      }
-    })
   );
 };
 function usePublicFormController(type = "details") {