@abgov/react-components 6.11.0 → 7.0.0-dev.2

package/index.js

@@ -12,7 +12,20 @@ var _PublicFormController_instances, updateObjectListState_fn, dispatchError_fn;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const parseISO = require("./parseISO-Dj57mwuH.js");
+const lowercase = (input) => input.toLowerCase();
+const kebab = (input) => input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+function transformProps(props, transform = lowercase) {
+  const result = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (value === void 0) continue;
+    if (key.startsWith("data-")) {
+      result[key] = value;
+    } else {
+      result[transform(key)] = value;
+    }
+  }
+  return result;
+}
 function GoabAccordion({
   open,
   onChange,
@@ -21,7 +34,7 @@ function GoabAccordion({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   react.useEffect(() => {
     const element = ref.current;
     if (element && onChange) {
@@ -51,10 +64,11 @@ function GoabAccordion({
 function GoabAppHeader({
   onMenuClick,
   children,
+  secondaryText,
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   react.useEffect(() => {
     if (!el.current) {
       return;
@@ -76,17 +90,20 @@ function GoabAppHeader({
     {
       ref: el,
       hasmenuclickhandler: onMenuClick ? "true" : "false",
+      secondarytext: secondaryText,
       ..._props,
+      version: "2",
       children
     }
   );
 }
 function GoabAppHeaderMenu({
   children,
+  slotName,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-header-menu", { ..._props, children });
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-header-menu", { slot: slotName, ..._props, children });
 }
 function getIconValue(icon, iconType) {
   if (icon !== void 0) {
@@ -94,114 +111,23 @@ function getIconValue(icon, iconType) {
   }
   return iconType ? "true" : "false";
 }
-function GoabBadge({ icon, iconType, ...rest }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+function GoabBadge({
+  icon,
+  iconType,
+  size = "medium",
+  emphasis = "strong",
+  ...rest
+}) {
+  const _props = transformProps({ size, emphasis, ...rest }, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-badge",
     {
       icon: getIconValue(icon, iconType),
       icontype: iconType,
-      ..._props
-    }
-  );
-}
-function GoabInfoBadge({
-  content,
-  testId,
-  icon,
-  mt,
-  mr,
-  mb,
-  ml,
-  ariaLabel
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    GoabBadge,
-    {
-      type: "information",
-      icon,
-      content,
-      testId,
-      ariaLabel,
-      mt,
-      mr,
-      mb,
-      ml
-    }
-  );
-}
-function GoabSuccessBadge({
-  content,
-  testId,
-  icon,
-  mt,
-  mr,
-  mb,
-  ml,
-  ariaLabel
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    GoabBadge,
-    {
-      type: "success",
-      icon,
-      content,
-      ariaLabel,
-      testId,
-      mt,
-      mr,
-      mb,
-      ml
-    }
-  );
-}
-function GoabImportantBadge({
-  content,
-  testId,
-  icon,
-  mt,
-  mr,
-  mb,
-  ml,
-  ariaLabel
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    GoabBadge,
-    {
-      type: "important",
-      icon,
-      content,
-      testId,
-      ariaLabel,
-      mt,
-      mr,
-      mb,
-      ml
-    }
-  );
-}
-function GoabEmergencyBadge({
-  content,
-  testId,
-  icon,
-  mt,
-  mr,
-  mb,
-  ml,
-  ariaLabel
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    GoabBadge,
-    {
-      type: "emergency",
-      icon,
-      content,
-      testId,
-      ariaLabel,
-      mt,
-      mr,
-      mb,
-      ml
+      ..._props,
+      version: "2",
+      size,
+      emphasis
     }
   );
 }
@@ -210,9 +136,9 @@ function GoabBlock({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(
+  const _props = transformProps(
     { testid: testId, ...rest },
-    parseISO.kebab
+    kebab
   );
   return /* @__PURE__ */ jsxRuntime.jsx("goa-block", { ..._props, children });
 }
@@ -225,7 +151,7 @@ function GoabButton({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   react.useEffect(() => {
     if (!el.current) {
       return;
@@ -250,6 +176,7 @@ function GoabButton({
       "action-arg": actionArg,
       "action-args": JSON.stringify(actionArgs),
       ..._props,
+      version: "2",
       children
     }
   );
@@ -258,7 +185,7 @@ function GoabButtonGroup({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-button-group", { ..._props, children });
 }
 function GoabCalendar({
@@ -269,7 +196,7 @@ function GoabCalendar({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   react.useEffect(() => {
     if (!ref.current) {
       return;
@@ -293,6 +220,7 @@ function GoabCalendar({
       name,
       min: min || void 0,
       max: max || void 0,
+      version: "2",
       ..._props
     }
   );
@@ -302,14 +230,15 @@ const GoabCallout = ({
   iconTheme = "outline",
   size = "large",
   ariaLive = "off",
+  emphasis = "medium",
   children,
   ...rest
 }) => {
-  const _props = parseISO.transformProps(
-    { type, icontheme: iconTheme, size, arialive: ariaLive, ...rest },
-    parseISO.lowercase
+  const _props = transformProps(
+    { type, icontheme: iconTheme, size, arialive: ariaLive, emphasis, ...rest },
+    lowercase
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-callout", { ..._props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-callout", { ..._props, version: "2", children });
 };
 function GoabCheckbox({
   error,
@@ -322,10 +251,11 @@ function GoabCheckbox({
   onChange,
   name,
   children,
+  size = "default",
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps({ size, ...rest }, lowercase);
   react.useEffect(() => {
     if (!el.current) {
       return;
@@ -352,6 +282,7 @@ function GoabCheckbox({
       disabled: disabled ? "true" : void 0,
       value: typeof value === "boolean" ? value ? "true" : void 0 : value,
       description: typeof description === "string" ? description : void 0,
+      version: "2",
       children: [
         children,
         typeof description !== "string" && description && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "description", children: description }),
@@ -367,6 +298,7 @@ function GoabCheckboxList({
   error,
   testId,
   maxWidth,
+  size = "default",
   children,
   onChange,
   mt,
@@ -379,24 +311,12 @@ function GoabCheckboxList({
     if (!el.current) return;
     const current = el.current;
     const listener = (e) => {
-      try {
-        const detail = e.detail;
-        onChange == null ? void 0 : onChange({ ...detail, event: e });
-      } catch (error2) {
-        console.error("Error handling checkbox list change:", error2);
-      }
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
-    try {
-      current.addEventListener("_change", listener);
-    } catch (error2) {
-      console.error("Failed to attach checkbox list listener:", error2);
-    }
+    current.addEventListener("_change", listener);
     return () => {
-      try {
-        current.removeEventListener("_change", listener);
-      } catch (error2) {
-        console.error("Failed to remove checkbox list listener:", error2);
-      }
+      current.removeEventListener("_change", listener);
     };
   }, [onChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -409,6 +329,8 @@ function GoabCheckboxList({
       error: error ? "true" : void 0,
       testid: testId,
       maxwidth: maxWidth,
+      version: "2",
+      size,
       mt,
       mr,
       mb,
@@ -424,7 +346,7 @@ const GoabChip = ({
   ...rest
 }) => {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   react.useEffect(() => {
     if (!el.current) return;
     if (!onClick) return;
@@ -449,7 +371,7 @@ const GoabChip = ({
 };
 const GoabCircularProgress = ({
   visible,
-  message,
+  message: message2,
   progress,
   variant,
   size,
@@ -459,7 +381,7 @@ const GoabCircularProgress = ({
     "goa-circular-progress",
     {
       visible: visible ? "true" : void 0,
-      message,
+      message: message2,
       progress,
       variant,
       size,
@@ -474,7 +396,7 @@ function GoabContainer({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   const headingContent = heading || title;
   return /* @__PURE__ */ jsxRuntime.jsxs("goa-container", { ..._props, children: [
     headingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "title", children: headingContent }),
@@ -498,140 +420,2335 @@ function GoabDataGrid({
     }
   );
 }
-function GoabDatePicker({
-  value,
-  error,
-  min,
-  max,
-  disabled,
-  relative,
-  onChange,
-  ...rest
-}) {
-  const ref = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
-  react.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`");
-    }
-  }, []);
-  react.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__ */ jsxRuntime.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 = parseISO.transformProps(rest, parseISO.lowercase);
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.useRef(null);
-  react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
-        children
-      ]
-    }
-  );
-}
-function stringify(value) {
-  if (typeof value === "undefined") {
-    return "";
   }
-  if (typeof value === "string") {
-    return value;
+  initList(e) {
+    this._formRef = e.detail.el;
+    this.state = [];
   }
-  return JSON.stringify(value);
-}
-function GoabDropdown({
-  value,
-  onChange,
+  // 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, 201);
+    }
+  }
+  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 "";
+    }
+    if (!this.state) {
+      console.error("getStateValue: state has not yet been set");
+      return "";
+    }
+    const data = this.state.form[group].data;
+    if (data.type !== "details") {
+      return "";
+    }
+    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;
+    }
+    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];
+    }
+    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;
+    }
+    if (this._isCompleting) {
+      console.warn("complete: completion already in progress");
+      return;
+    }
+    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;
+    }, {});
+  }
+}
+_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 toDate(argument) {
+  const argStr = Object.prototype.toString.call(argument);
+  if (argument instanceof Date || typeof argument === "object" && argStr === "[object Date]") {
+    return new argument.constructor(+argument);
+  } else if (typeof argument === "number" || argStr === "[object Number]" || typeof argument === "string" || argStr === "[object String]") {
+    return new Date(argument);
+  } else {
+    return /* @__PURE__ */ new Date(NaN);
+  }
+}
+function constructFrom(date, value) {
+  if (date instanceof Date) {
+    return new date.constructor(value);
+  } else {
+    return new Date(value);
+  }
+}
+function addDays(date, amount) {
+  const _date = toDate(date);
+  if (isNaN(amount)) return constructFrom(date, NaN);
+  if (!amount) {
+    return _date;
+  }
+  _date.setDate(_date.getDate() + amount);
+  return _date;
+}
+function addMonths(date, amount) {
+  const _date = toDate(date);
+  if (isNaN(amount)) return constructFrom(date, NaN);
+  if (!amount) {
+    return _date;
+  }
+  const dayOfMonth = _date.getDate();
+  const endOfDesiredMonth = constructFrom(date, _date.getTime());
+  endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0);
+  const daysInMonth = endOfDesiredMonth.getDate();
+  if (dayOfMonth >= daysInMonth) {
+    return endOfDesiredMonth;
+  } else {
+    _date.setFullYear(
+      endOfDesiredMonth.getFullYear(),
+      endOfDesiredMonth.getMonth(),
+      dayOfMonth
+    );
+    return _date;
+  }
+}
+const millisecondsInWeek = 6048e5;
+const millisecondsInDay = 864e5;
+const millisecondsInMinute = 6e4;
+const millisecondsInHour = 36e5;
+let defaultOptions = {};
+function getDefaultOptions() {
+  return defaultOptions;
+}
+function startOfWeek(date, options) {
+  var _a, _b, _c, _d;
+  const defaultOptions2 = getDefaultOptions();
+  const weekStartsOn = (options == null ? void 0 : options.weekStartsOn) ?? ((_b = (_a = options == null ? void 0 : options.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.weekStartsOn) ?? defaultOptions2.weekStartsOn ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.weekStartsOn) ?? 0;
+  const _date = toDate(date);
+  const day = _date.getDay();
+  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+  _date.setDate(_date.getDate() - diff);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+function startOfISOWeek(date) {
+  return startOfWeek(date, { weekStartsOn: 1 });
+}
+function getISOWeekYear(date) {
+  const _date = toDate(date);
+  const year = _date.getFullYear();
+  const fourthOfJanuaryOfNextYear = constructFrom(date, 0);
+  fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4);
+  fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0);
+  const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear);
+  const fourthOfJanuaryOfThisYear = constructFrom(date, 0);
+  fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4);
+  fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0);
+  const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear);
+  if (_date.getTime() >= startOfNextYear.getTime()) {
+    return year + 1;
+  } else if (_date.getTime() >= startOfThisYear.getTime()) {
+    return year;
+  } else {
+    return year - 1;
+  }
+}
+function startOfDay(date) {
+  const _date = toDate(date);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+function getTimezoneOffsetInMilliseconds(date) {
+  const _date = toDate(date);
+  const utcDate = new Date(
+    Date.UTC(
+      _date.getFullYear(),
+      _date.getMonth(),
+      _date.getDate(),
+      _date.getHours(),
+      _date.getMinutes(),
+      _date.getSeconds(),
+      _date.getMilliseconds()
+    )
+  );
+  utcDate.setUTCFullYear(_date.getFullYear());
+  return +date - +utcDate;
+}
+function differenceInCalendarDays(dateLeft, dateRight) {
+  const startOfDayLeft = startOfDay(dateLeft);
+  const startOfDayRight = startOfDay(dateRight);
+  const timestampLeft = +startOfDayLeft - getTimezoneOffsetInMilliseconds(startOfDayLeft);
+  const timestampRight = +startOfDayRight - getTimezoneOffsetInMilliseconds(startOfDayRight);
+  return Math.round((timestampLeft - timestampRight) / millisecondsInDay);
+}
+function startOfISOWeekYear(date) {
+  const year = getISOWeekYear(date);
+  const fourthOfJanuary = constructFrom(date, 0);
+  fourthOfJanuary.setFullYear(year, 0, 4);
+  fourthOfJanuary.setHours(0, 0, 0, 0);
+  return startOfISOWeek(fourthOfJanuary);
+}
+function isSameDay(dateLeft, dateRight) {
+  const dateLeftStartOfDay = startOfDay(dateLeft);
+  const dateRightStartOfDay = startOfDay(dateRight);
+  return +dateLeftStartOfDay === +dateRightStartOfDay;
+}
+function isDate(value) {
+  return value instanceof Date || typeof value === "object" && Object.prototype.toString.call(value) === "[object Date]";
+}
+function isValid(date) {
+  if (!isDate(date) && typeof date !== "number") {
+    return false;
+  }
+  const _date = toDate(date);
+  return !isNaN(Number(_date));
+}
+function startOfYear(date) {
+  const cleanDate = toDate(date);
+  const _date = constructFrom(date, 0);
+  _date.setFullYear(cleanDate.getFullYear(), 0, 1);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+const formatDistanceLocale = {
+  lessThanXSeconds: {
+    one: "less than a second",
+    other: "less than {{count}} seconds"
+  },
+  xSeconds: {
+    one: "1 second",
+    other: "{{count}} seconds"
+  },
+  halfAMinute: "half a minute",
+  lessThanXMinutes: {
+    one: "less than a minute",
+    other: "less than {{count}} minutes"
+  },
+  xMinutes: {
+    one: "1 minute",
+    other: "{{count}} minutes"
+  },
+  aboutXHours: {
+    one: "about 1 hour",
+    other: "about {{count}} hours"
+  },
+  xHours: {
+    one: "1 hour",
+    other: "{{count}} hours"
+  },
+  xDays: {
+    one: "1 day",
+    other: "{{count}} days"
+  },
+  aboutXWeeks: {
+    one: "about 1 week",
+    other: "about {{count}} weeks"
+  },
+  xWeeks: {
+    one: "1 week",
+    other: "{{count}} weeks"
+  },
+  aboutXMonths: {
+    one: "about 1 month",
+    other: "about {{count}} months"
+  },
+  xMonths: {
+    one: "1 month",
+    other: "{{count}} months"
+  },
+  aboutXYears: {
+    one: "about 1 year",
+    other: "about {{count}} years"
+  },
+  xYears: {
+    one: "1 year",
+    other: "{{count}} years"
+  },
+  overXYears: {
+    one: "over 1 year",
+    other: "over {{count}} years"
+  },
+  almostXYears: {
+    one: "almost 1 year",
+    other: "almost {{count}} years"
+  }
+};
+const formatDistance = (token, count, options) => {
+  let result;
+  const tokenValue = formatDistanceLocale[token];
+  if (typeof tokenValue === "string") {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace("{{count}}", count.toString());
+  }
+  if (options == null ? void 0 : options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return "in " + result;
+    } else {
+      return result + " ago";
+    }
+  }
+  return result;
+};
+function buildFormatLongFn(args) {
+  return (options = {}) => {
+    const width = options.width ? String(options.width) : args.defaultWidth;
+    const format2 = args.formats[width] || args.formats[args.defaultWidth];
+    return format2;
+  };
+}
+const dateFormats = {
+  full: "EEEE, MMMM do, y",
+  long: "MMMM do, y",
+  medium: "MMM d, y",
+  short: "MM/dd/yyyy"
+};
+const timeFormats = {
+  full: "h:mm:ss a zzzz",
+  long: "h:mm:ss a z",
+  medium: "h:mm:ss a",
+  short: "h:mm a"
+};
+const dateTimeFormats = {
+  full: "{{date}} 'at' {{time}}",
+  long: "{{date}} 'at' {{time}}",
+  medium: "{{date}}, {{time}}",
+  short: "{{date}}, {{time}}"
+};
+const formatLong = {
+  date: buildFormatLongFn({
+    formats: dateFormats,
+    defaultWidth: "full"
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats,
+    defaultWidth: "full"
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats,
+    defaultWidth: "full"
+  })
+};
+const formatRelativeLocale = {
+  lastWeek: "'last' eeee 'at' p",
+  yesterday: "'yesterday at' p",
+  today: "'today at' p",
+  tomorrow: "'tomorrow at' p",
+  nextWeek: "eeee 'at' p",
+  other: "P"
+};
+const formatRelative = (token, _date, _baseDate, _options) => formatRelativeLocale[token];
+function buildLocalizeFn(args) {
+  return (value, options) => {
+    const context = (options == null ? void 0 : options.context) ? String(options.context) : "standalone";
+    let valuesArray;
+    if (context === "formatting" && args.formattingValues) {
+      const defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+      const width = (options == null ? void 0 : options.width) ? String(options.width) : defaultWidth;
+      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
+    } else {
+      const defaultWidth = args.defaultWidth;
+      const width = (options == null ? void 0 : options.width) ? String(options.width) : args.defaultWidth;
+      valuesArray = args.values[width] || args.values[defaultWidth];
+    }
+    const index = args.argumentCallback ? args.argumentCallback(value) : value;
+    return valuesArray[index];
+  };
+}
+const eraValues = {
+  narrow: ["B", "A"],
+  abbreviated: ["BC", "AD"],
+  wide: ["Before Christ", "Anno Domini"]
+};
+const quarterValues = {
+  narrow: ["1", "2", "3", "4"],
+  abbreviated: ["Q1", "Q2", "Q3", "Q4"],
+  wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"]
+};
+const monthValues = {
+  narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
+  abbreviated: [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ],
+  wide: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ]
+};
+const dayValues = {
+  narrow: ["S", "M", "T", "W", "T", "F", "S"],
+  short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+  abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  wide: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ]
+};
+const dayPeriodValues = {
+  narrow: {
+    am: "a",
+    pm: "p",
+    midnight: "mi",
+    noon: "n",
+    morning: "morning",
+    afternoon: "afternoon",
+    evening: "evening",
+    night: "night"
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "morning",
+    afternoon: "afternoon",
+    evening: "evening",
+    night: "night"
+  },
+  wide: {
+    am: "a.m.",
+    pm: "p.m.",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "morning",
+    afternoon: "afternoon",
+    evening: "evening",
+    night: "night"
+  }
+};
+const formattingDayPeriodValues = {
+  narrow: {
+    am: "a",
+    pm: "p",
+    midnight: "mi",
+    noon: "n",
+    morning: "in the morning",
+    afternoon: "in the afternoon",
+    evening: "in the evening",
+    night: "at night"
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "in the morning",
+    afternoon: "in the afternoon",
+    evening: "in the evening",
+    night: "at night"
+  },
+  wide: {
+    am: "a.m.",
+    pm: "p.m.",
+    midnight: "midnight",
+    noon: "noon",
+    morning: "in the morning",
+    afternoon: "in the afternoon",
+    evening: "in the evening",
+    night: "at night"
+  }
+};
+const ordinalNumber = (dirtyNumber, _options) => {
+  const number = Number(dirtyNumber);
+  const rem100 = number % 100;
+  if (rem100 > 20 || rem100 < 10) {
+    switch (rem100 % 10) {
+      case 1:
+        return number + "st";
+      case 2:
+        return number + "nd";
+      case 3:
+        return number + "rd";
+    }
+  }
+  return number + "th";
+};
+const localize = {
+  ordinalNumber,
+  era: buildLocalizeFn({
+    values: eraValues,
+    defaultWidth: "wide"
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues,
+    defaultWidth: "wide",
+    argumentCallback: (quarter) => quarter - 1
+  }),
+  month: buildLocalizeFn({
+    values: monthValues,
+    defaultWidth: "wide"
+  }),
+  day: buildLocalizeFn({
+    values: dayValues,
+    defaultWidth: "wide"
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues,
+    defaultWidth: "wide",
+    formattingValues: formattingDayPeriodValues,
+    defaultFormattingWidth: "wide"
+  })
+};
+function buildMatchFn(args) {
+  return (string, options = {}) => {
+    const width = options.width;
+    const matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
+    const matchResult = string.match(matchPattern);
+    if (!matchResult) {
+      return null;
+    }
+    const matchedString = matchResult[0];
+    const parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
+    const key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) : (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type
+      findKey(parsePatterns, (pattern) => pattern.test(matchedString))
+    );
+    let value;
+    value = args.valueCallback ? args.valueCallback(key) : key;
+    value = options.valueCallback ? (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type
+      options.valueCallback(value)
+    ) : value;
+    const rest = string.slice(matchedString.length);
+    return { value, rest };
+  };
+}
+function findKey(object, predicate) {
+  for (const key in object) {
+    if (Object.prototype.hasOwnProperty.call(object, key) && predicate(object[key])) {
+      return key;
+    }
+  }
+  return void 0;
+}
+function findIndex(array, predicate) {
+  for (let key = 0; key < array.length; key++) {
+    if (predicate(array[key])) {
+      return key;
+    }
+  }
+  return void 0;
+}
+function buildMatchPatternFn(args) {
+  return (string, options = {}) => {
+    const matchResult = string.match(args.matchPattern);
+    if (!matchResult) return null;
+    const matchedString = matchResult[0];
+    const parseResult = string.match(args.parsePattern);
+    if (!parseResult) return null;
+    let value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    const rest = string.slice(matchedString.length);
+    return { value, rest };
+  };
+}
+const matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i;
+const parseOrdinalNumberPattern = /\d+/i;
+const matchEraPatterns = {
+  narrow: /^(b|a)/i,
+  abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
+  wide: /^(before christ|before common era|anno domini|common era)/i
+};
+const parseEraPatterns = {
+  any: [/^b/i, /^(a|c)/i]
+};
+const matchQuarterPatterns = {
+  narrow: /^[1234]/i,
+  abbreviated: /^q[1234]/i,
+  wide: /^[1234](th|st|nd|rd)? quarter/i
+};
+const parseQuarterPatterns = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+const matchMonthPatterns = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i,
+  wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i
+};
+const parseMonthPatterns = {
+  narrow: [
+    /^j/i,
+    /^f/i,
+    /^m/i,
+    /^a/i,
+    /^m/i,
+    /^j/i,
+    /^j/i,
+    /^a/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ],
+  any: [
+    /^ja/i,
+    /^f/i,
+    /^mar/i,
+    /^ap/i,
+    /^may/i,
+    /^jun/i,
+    /^jul/i,
+    /^au/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ]
+};
+const matchDayPatterns = {
+  narrow: /^[smtwf]/i,
+  short: /^(su|mo|tu|we|th|fr|sa)/i,
+  abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i,
+  wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i
+};
+const parseDayPatterns = {
+  narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i],
+  any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i]
+};
+const matchDayPeriodPatterns = {
+  narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i,
+  any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i
+};
+const parseDayPeriodPatterns = {
+  any: {
+    am: /^a/i,
+    pm: /^p/i,
+    midnight: /^mi/i,
+    noon: /^no/i,
+    morning: /morning/i,
+    afternoon: /afternoon/i,
+    evening: /evening/i,
+    night: /night/i
+  }
+};
+const match = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern,
+    parsePattern: parseOrdinalNumberPattern,
+    valueCallback: (value) => parseInt(value, 10)
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseEraPatterns,
+    defaultParseWidth: "any"
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseQuarterPatterns,
+    defaultParseWidth: "any",
+    valueCallback: (index) => index + 1
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseMonthPatterns,
+    defaultParseWidth: "any"
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseDayPatterns,
+    defaultParseWidth: "any"
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns,
+    defaultMatchWidth: "any",
+    parsePatterns: parseDayPeriodPatterns,
+    defaultParseWidth: "any"
+  })
+};
+const enUS = {
+  code: "en-US",
+  formatDistance,
+  formatLong,
+  formatRelative,
+  localize,
+  match,
+  options: {
+    weekStartsOn: 0,
+    firstWeekContainsDate: 1
+  }
+};
+function getDayOfYear(date) {
+  const _date = toDate(date);
+  const diff = differenceInCalendarDays(_date, startOfYear(_date));
+  const dayOfYear = diff + 1;
+  return dayOfYear;
+}
+function getISOWeek(date) {
+  const _date = toDate(date);
+  const diff = +startOfISOWeek(_date) - +startOfISOWeekYear(_date);
+  return Math.round(diff / millisecondsInWeek) + 1;
+}
+function getWeekYear(date, options) {
+  var _a, _b, _c, _d;
+  const _date = toDate(date);
+  const year = _date.getFullYear();
+  const defaultOptions2 = getDefaultOptions();
+  const firstWeekContainsDate = (options == null ? void 0 : options.firstWeekContainsDate) ?? ((_b = (_a = options == null ? void 0 : options.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.firstWeekContainsDate) ?? defaultOptions2.firstWeekContainsDate ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.firstWeekContainsDate) ?? 1;
+  const firstWeekOfNextYear = constructFrom(date, 0);
+  firstWeekOfNextYear.setFullYear(year + 1, 0, firstWeekContainsDate);
+  firstWeekOfNextYear.setHours(0, 0, 0, 0);
+  const startOfNextYear = startOfWeek(firstWeekOfNextYear, options);
+  const firstWeekOfThisYear = constructFrom(date, 0);
+  firstWeekOfThisYear.setFullYear(year, 0, firstWeekContainsDate);
+  firstWeekOfThisYear.setHours(0, 0, 0, 0);
+  const startOfThisYear = startOfWeek(firstWeekOfThisYear, options);
+  if (_date.getTime() >= startOfNextYear.getTime()) {
+    return year + 1;
+  } else if (_date.getTime() >= startOfThisYear.getTime()) {
+    return year;
+  } else {
+    return year - 1;
+  }
+}
+function startOfWeekYear(date, options) {
+  var _a, _b, _c, _d;
+  const defaultOptions2 = getDefaultOptions();
+  const firstWeekContainsDate = (options == null ? void 0 : options.firstWeekContainsDate) ?? ((_b = (_a = options == null ? void 0 : options.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.firstWeekContainsDate) ?? defaultOptions2.firstWeekContainsDate ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.firstWeekContainsDate) ?? 1;
+  const year = getWeekYear(date, options);
+  const firstWeek = constructFrom(date, 0);
+  firstWeek.setFullYear(year, 0, firstWeekContainsDate);
+  firstWeek.setHours(0, 0, 0, 0);
+  const _date = startOfWeek(firstWeek, options);
+  return _date;
+}
+function getWeek(date, options) {
+  const _date = toDate(date);
+  const diff = +startOfWeek(_date, options) - +startOfWeekYear(_date, options);
+  return Math.round(diff / millisecondsInWeek) + 1;
+}
+function addLeadingZeros(number, targetLength) {
+  const sign = number < 0 ? "-" : "";
+  const output = Math.abs(number).toString().padStart(targetLength, "0");
+  return sign + output;
+}
+const lightFormatters = {
+  // Year
+  y(date, token) {
+    const signedYear = date.getFullYear();
+    const year = signedYear > 0 ? signedYear : 1 - signedYear;
+    return addLeadingZeros(token === "yy" ? year % 100 : year, token.length);
+  },
+  // Month
+  M(date, token) {
+    const month = date.getMonth();
+    return token === "M" ? String(month + 1) : addLeadingZeros(month + 1, 2);
+  },
+  // Day of the month
+  d(date, token) {
+    return addLeadingZeros(date.getDate(), token.length);
+  },
+  // AM or PM
+  a(date, token) {
+    const dayPeriodEnumValue = date.getHours() / 12 >= 1 ? "pm" : "am";
+    switch (token) {
+      case "a":
+      case "aa":
+        return dayPeriodEnumValue.toUpperCase();
+      case "aaa":
+        return dayPeriodEnumValue;
+      case "aaaaa":
+        return dayPeriodEnumValue[0];
+      case "aaaa":
+      default:
+        return dayPeriodEnumValue === "am" ? "a.m." : "p.m.";
+    }
+  },
+  // Hour [1-12]
+  h(date, token) {
+    return addLeadingZeros(date.getHours() % 12 || 12, token.length);
+  },
+  // Hour [0-23]
+  H(date, token) {
+    return addLeadingZeros(date.getHours(), token.length);
+  },
+  // Minute
+  m(date, token) {
+    return addLeadingZeros(date.getMinutes(), token.length);
+  },
+  // Second
+  s(date, token) {
+    return addLeadingZeros(date.getSeconds(), token.length);
+  },
+  // Fraction of second
+  S(date, token) {
+    const numberOfDigits = token.length;
+    const milliseconds = date.getMilliseconds();
+    const fractionalSeconds = Math.trunc(
+      milliseconds * Math.pow(10, numberOfDigits - 3)
+    );
+    return addLeadingZeros(fractionalSeconds, token.length);
+  }
+};
+const dayPeriodEnum = {
+  midnight: "midnight",
+  noon: "noon",
+  morning: "morning",
+  afternoon: "afternoon",
+  evening: "evening",
+  night: "night"
+};
+const formatters = {
+  // Era
+  G: function(date, token, localize2) {
+    const era = date.getFullYear() > 0 ? 1 : 0;
+    switch (token) {
+      // AD, BC
+      case "G":
+      case "GG":
+      case "GGG":
+        return localize2.era(era, { width: "abbreviated" });
+      // A, B
+      case "GGGGG":
+        return localize2.era(era, { width: "narrow" });
+      // Anno Domini, Before Christ
+      case "GGGG":
+      default:
+        return localize2.era(era, { width: "wide" });
+    }
+  },
+  // Year
+  y: function(date, token, localize2) {
+    if (token === "yo") {
+      const signedYear = date.getFullYear();
+      const year = signedYear > 0 ? signedYear : 1 - signedYear;
+      return localize2.ordinalNumber(year, { unit: "year" });
+    }
+    return lightFormatters.y(date, token);
+  },
+  // Local week-numbering year
+  Y: function(date, token, localize2, options) {
+    const signedWeekYear = getWeekYear(date, options);
+    const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear;
+    if (token === "YY") {
+      const twoDigitYear = weekYear % 100;
+      return addLeadingZeros(twoDigitYear, 2);
+    }
+    if (token === "Yo") {
+      return localize2.ordinalNumber(weekYear, { unit: "year" });
+    }
+    return addLeadingZeros(weekYear, token.length);
+  },
+  // ISO week-numbering year
+  R: function(date, token) {
+    const isoWeekYear = getISOWeekYear(date);
+    return addLeadingZeros(isoWeekYear, token.length);
+  },
+  // Extended year. This is a single number designating the year of this calendar system.
+  // The main difference between `y` and `u` localizers are B.C. years:
+  // | Year | `y` | `u` |
+  // |------|-----|-----|
+  // | AC 1 |   1 |   1 |
+  // | BC 1 |   1 |   0 |
+  // | BC 2 |   2 |  -1 |
+  // Also `yy` always returns the last two digits of a year,
+  // while `uu` pads single digit years to 2 characters and returns other years unchanged.
+  u: function(date, token) {
+    const year = date.getFullYear();
+    return addLeadingZeros(year, token.length);
+  },
+  // Quarter
+  Q: function(date, token, localize2) {
+    const quarter = Math.ceil((date.getMonth() + 1) / 3);
+    switch (token) {
+      // 1, 2, 3, 4
+      case "Q":
+        return String(quarter);
+      // 01, 02, 03, 04
+      case "QQ":
+        return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
+      case "Qo":
+        return localize2.ordinalNumber(quarter, { unit: "quarter" });
+      // Q1, Q2, Q3, Q4
+      case "QQQ":
+        return localize2.quarter(quarter, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
+      case "QQQQQ":
+        return localize2.quarter(quarter, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // 1st quarter, 2nd quarter, ...
+      case "QQQQ":
+      default:
+        return localize2.quarter(quarter, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // Stand-alone quarter
+  q: function(date, token, localize2) {
+    const quarter = Math.ceil((date.getMonth() + 1) / 3);
+    switch (token) {
+      // 1, 2, 3, 4
+      case "q":
+        return String(quarter);
+      // 01, 02, 03, 04
+      case "qq":
+        return addLeadingZeros(quarter, 2);
+      // 1st, 2nd, 3rd, 4th
+      case "qo":
+        return localize2.ordinalNumber(quarter, { unit: "quarter" });
+      // Q1, Q2, Q3, Q4
+      case "qqq":
+        return localize2.quarter(quarter, {
+          width: "abbreviated",
+          context: "standalone"
+        });
+      // 1, 2, 3, 4 (narrow quarter; could be not numerical)
+      case "qqqqq":
+        return localize2.quarter(quarter, {
+          width: "narrow",
+          context: "standalone"
+        });
+      // 1st quarter, 2nd quarter, ...
+      case "qqqq":
+      default:
+        return localize2.quarter(quarter, {
+          width: "wide",
+          context: "standalone"
+        });
+    }
+  },
+  // Month
+  M: function(date, token, localize2) {
+    const month = date.getMonth();
+    switch (token) {
+      case "M":
+      case "MM":
+        return lightFormatters.M(date, token);
+      // 1st, 2nd, ..., 12th
+      case "Mo":
+        return localize2.ordinalNumber(month + 1, { unit: "month" });
+      // Jan, Feb, ..., Dec
+      case "MMM":
+        return localize2.month(month, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // J, F, ..., D
+      case "MMMMM":
+        return localize2.month(month, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // January, February, ..., December
+      case "MMMM":
+      default:
+        return localize2.month(month, { width: "wide", context: "formatting" });
+    }
+  },
+  // Stand-alone month
+  L: function(date, token, localize2) {
+    const month = date.getMonth();
+    switch (token) {
+      // 1, 2, ..., 12
+      case "L":
+        return String(month + 1);
+      // 01, 02, ..., 12
+      case "LL":
+        return addLeadingZeros(month + 1, 2);
+      // 1st, 2nd, ..., 12th
+      case "Lo":
+        return localize2.ordinalNumber(month + 1, { unit: "month" });
+      // Jan, Feb, ..., Dec
+      case "LLL":
+        return localize2.month(month, {
+          width: "abbreviated",
+          context: "standalone"
+        });
+      // J, F, ..., D
+      case "LLLLL":
+        return localize2.month(month, {
+          width: "narrow",
+          context: "standalone"
+        });
+      // January, February, ..., December
+      case "LLLL":
+      default:
+        return localize2.month(month, { width: "wide", context: "standalone" });
+    }
+  },
+  // Local week of year
+  w: function(date, token, localize2, options) {
+    const week = getWeek(date, options);
+    if (token === "wo") {
+      return localize2.ordinalNumber(week, { unit: "week" });
+    }
+    return addLeadingZeros(week, token.length);
+  },
+  // ISO week of year
+  I: function(date, token, localize2) {
+    const isoWeek = getISOWeek(date);
+    if (token === "Io") {
+      return localize2.ordinalNumber(isoWeek, { unit: "week" });
+    }
+    return addLeadingZeros(isoWeek, token.length);
+  },
+  // Day of the month
+  d: function(date, token, localize2) {
+    if (token === "do") {
+      return localize2.ordinalNumber(date.getDate(), { unit: "date" });
+    }
+    return lightFormatters.d(date, token);
+  },
+  // Day of year
+  D: function(date, token, localize2) {
+    const dayOfYear = getDayOfYear(date);
+    if (token === "Do") {
+      return localize2.ordinalNumber(dayOfYear, { unit: "dayOfYear" });
+    }
+    return addLeadingZeros(dayOfYear, token.length);
+  },
+  // Day of week
+  E: function(date, token, localize2) {
+    const dayOfWeek = date.getDay();
+    switch (token) {
+      // Tue
+      case "E":
+      case "EE":
+      case "EEE":
+        return localize2.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // T
+      case "EEEEE":
+        return localize2.day(dayOfWeek, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // Tu
+      case "EEEEEE":
+        return localize2.day(dayOfWeek, {
+          width: "short",
+          context: "formatting"
+        });
+      // Tuesday
+      case "EEEE":
+      default:
+        return localize2.day(dayOfWeek, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // Local day of week
+  e: function(date, token, localize2, options) {
+    const dayOfWeek = date.getDay();
+    const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
+    switch (token) {
+      // Numerical value (Nth day of week with current locale or weekStartsOn)
+      case "e":
+        return String(localDayOfWeek);
+      // Padded numerical value
+      case "ee":
+        return addLeadingZeros(localDayOfWeek, 2);
+      // 1st, 2nd, ..., 7th
+      case "eo":
+        return localize2.ordinalNumber(localDayOfWeek, { unit: "day" });
+      case "eee":
+        return localize2.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // T
+      case "eeeee":
+        return localize2.day(dayOfWeek, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // Tu
+      case "eeeeee":
+        return localize2.day(dayOfWeek, {
+          width: "short",
+          context: "formatting"
+        });
+      // Tuesday
+      case "eeee":
+      default:
+        return localize2.day(dayOfWeek, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // Stand-alone local day of week
+  c: function(date, token, localize2, options) {
+    const dayOfWeek = date.getDay();
+    const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7;
+    switch (token) {
+      // Numerical value (same as in `e`)
+      case "c":
+        return String(localDayOfWeek);
+      // Padded numerical value
+      case "cc":
+        return addLeadingZeros(localDayOfWeek, token.length);
+      // 1st, 2nd, ..., 7th
+      case "co":
+        return localize2.ordinalNumber(localDayOfWeek, { unit: "day" });
+      case "ccc":
+        return localize2.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "standalone"
+        });
+      // T
+      case "ccccc":
+        return localize2.day(dayOfWeek, {
+          width: "narrow",
+          context: "standalone"
+        });
+      // Tu
+      case "cccccc":
+        return localize2.day(dayOfWeek, {
+          width: "short",
+          context: "standalone"
+        });
+      // Tuesday
+      case "cccc":
+      default:
+        return localize2.day(dayOfWeek, {
+          width: "wide",
+          context: "standalone"
+        });
+    }
+  },
+  // ISO day of week
+  i: function(date, token, localize2) {
+    const dayOfWeek = date.getDay();
+    const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek;
+    switch (token) {
+      // 2
+      case "i":
+        return String(isoDayOfWeek);
+      // 02
+      case "ii":
+        return addLeadingZeros(isoDayOfWeek, token.length);
+      // 2nd
+      case "io":
+        return localize2.ordinalNumber(isoDayOfWeek, { unit: "day" });
+      // Tue
+      case "iii":
+        return localize2.day(dayOfWeek, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      // T
+      case "iiiii":
+        return localize2.day(dayOfWeek, {
+          width: "narrow",
+          context: "formatting"
+        });
+      // Tu
+      case "iiiiii":
+        return localize2.day(dayOfWeek, {
+          width: "short",
+          context: "formatting"
+        });
+      // Tuesday
+      case "iiii":
+      default:
+        return localize2.day(dayOfWeek, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // AM or PM
+  a: function(date, token, localize2) {
+    const hours = date.getHours();
+    const dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am";
+    switch (token) {
+      case "a":
+      case "aa":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      case "aaa":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        }).toLowerCase();
+      case "aaaaa":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "narrow",
+          context: "formatting"
+        });
+      case "aaaa":
+      default:
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // AM, PM, midnight, noon
+  b: function(date, token, localize2) {
+    const hours = date.getHours();
+    let dayPeriodEnumValue;
+    if (hours === 12) {
+      dayPeriodEnumValue = dayPeriodEnum.noon;
+    } else if (hours === 0) {
+      dayPeriodEnumValue = dayPeriodEnum.midnight;
+    } else {
+      dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am";
+    }
+    switch (token) {
+      case "b":
+      case "bb":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      case "bbb":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        }).toLowerCase();
+      case "bbbbb":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "narrow",
+          context: "formatting"
+        });
+      case "bbbb":
+      default:
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // in the morning, in the afternoon, in the evening, at night
+  B: function(date, token, localize2) {
+    const hours = date.getHours();
+    let dayPeriodEnumValue;
+    if (hours >= 17) {
+      dayPeriodEnumValue = dayPeriodEnum.evening;
+    } else if (hours >= 12) {
+      dayPeriodEnumValue = dayPeriodEnum.afternoon;
+    } else if (hours >= 4) {
+      dayPeriodEnumValue = dayPeriodEnum.morning;
+    } else {
+      dayPeriodEnumValue = dayPeriodEnum.night;
+    }
+    switch (token) {
+      case "B":
+      case "BB":
+      case "BBB":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "abbreviated",
+          context: "formatting"
+        });
+      case "BBBBB":
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "narrow",
+          context: "formatting"
+        });
+      case "BBBB":
+      default:
+        return localize2.dayPeriod(dayPeriodEnumValue, {
+          width: "wide",
+          context: "formatting"
+        });
+    }
+  },
+  // Hour [1-12]
+  h: function(date, token, localize2) {
+    if (token === "ho") {
+      let hours = date.getHours() % 12;
+      if (hours === 0) hours = 12;
+      return localize2.ordinalNumber(hours, { unit: "hour" });
+    }
+    return lightFormatters.h(date, token);
+  },
+  // Hour [0-23]
+  H: function(date, token, localize2) {
+    if (token === "Ho") {
+      return localize2.ordinalNumber(date.getHours(), { unit: "hour" });
+    }
+    return lightFormatters.H(date, token);
+  },
+  // Hour [0-11]
+  K: function(date, token, localize2) {
+    const hours = date.getHours() % 12;
+    if (token === "Ko") {
+      return localize2.ordinalNumber(hours, { unit: "hour" });
+    }
+    return addLeadingZeros(hours, token.length);
+  },
+  // Hour [1-24]
+  k: function(date, token, localize2) {
+    let hours = date.getHours();
+    if (hours === 0) hours = 24;
+    if (token === "ko") {
+      return localize2.ordinalNumber(hours, { unit: "hour" });
+    }
+    return addLeadingZeros(hours, token.length);
+  },
+  // Minute
+  m: function(date, token, localize2) {
+    if (token === "mo") {
+      return localize2.ordinalNumber(date.getMinutes(), { unit: "minute" });
+    }
+    return lightFormatters.m(date, token);
+  },
+  // Second
+  s: function(date, token, localize2) {
+    if (token === "so") {
+      return localize2.ordinalNumber(date.getSeconds(), { unit: "second" });
+    }
+    return lightFormatters.s(date, token);
+  },
+  // Fraction of second
+  S: function(date, token) {
+    return lightFormatters.S(date, token);
+  },
+  // Timezone (ISO-8601. If offset is 0, output is always `'Z'`)
+  X: function(date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+    if (timezoneOffset === 0) {
+      return "Z";
+    }
+    switch (token) {
+      // Hours and optional minutes
+      case "X":
+        return formatTimezoneWithOptionalMinutes(timezoneOffset);
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XX`
+      case "XXXX":
+      case "XX":
+        return formatTimezone(timezoneOffset);
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `XXX`
+      case "XXXXX":
+      case "XXX":
+      // Hours and minutes with `:` delimiter
+      default:
+        return formatTimezone(timezoneOffset, ":");
+    }
+  },
+  // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent)
+  x: function(date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+    switch (token) {
+      // Hours and optional minutes
+      case "x":
+        return formatTimezoneWithOptionalMinutes(timezoneOffset);
+      // Hours, minutes and optional seconds without `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xx`
+      case "xxxx":
+      case "xx":
+        return formatTimezone(timezoneOffset);
+      // Hours, minutes and optional seconds with `:` delimiter
+      // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets
+      // so this token always has the same output as `xxx`
+      case "xxxxx":
+      case "xxx":
+      // Hours and minutes with `:` delimiter
+      default:
+        return formatTimezone(timezoneOffset, ":");
+    }
+  },
+  // Timezone (GMT)
+  O: function(date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+    switch (token) {
+      // Short
+      case "O":
+      case "OO":
+      case "OOO":
+        return "GMT" + formatTimezoneShort(timezoneOffset, ":");
+      // Long
+      case "OOOO":
+      default:
+        return "GMT" + formatTimezone(timezoneOffset, ":");
+    }
+  },
+  // Timezone (specific non-location)
+  z: function(date, token, _localize) {
+    const timezoneOffset = date.getTimezoneOffset();
+    switch (token) {
+      // Short
+      case "z":
+      case "zz":
+      case "zzz":
+        return "GMT" + formatTimezoneShort(timezoneOffset, ":");
+      // Long
+      case "zzzz":
+      default:
+        return "GMT" + formatTimezone(timezoneOffset, ":");
+    }
+  },
+  // Seconds timestamp
+  t: function(date, token, _localize) {
+    const timestamp = Math.trunc(date.getTime() / 1e3);
+    return addLeadingZeros(timestamp, token.length);
+  },
+  // Milliseconds timestamp
+  T: function(date, token, _localize) {
+    const timestamp = date.getTime();
+    return addLeadingZeros(timestamp, token.length);
+  }
+};
+function formatTimezoneShort(offset, delimiter = "") {
+  const sign = offset > 0 ? "-" : "+";
+  const absOffset = Math.abs(offset);
+  const hours = Math.trunc(absOffset / 60);
+  const minutes = absOffset % 60;
+  if (minutes === 0) {
+    return sign + String(hours);
+  }
+  return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2);
+}
+function formatTimezoneWithOptionalMinutes(offset, delimiter) {
+  if (offset % 60 === 0) {
+    const sign = offset > 0 ? "-" : "+";
+    return sign + addLeadingZeros(Math.abs(offset) / 60, 2);
+  }
+  return formatTimezone(offset, delimiter);
+}
+function formatTimezone(offset, delimiter = "") {
+  const sign = offset > 0 ? "-" : "+";
+  const absOffset = Math.abs(offset);
+  const hours = addLeadingZeros(Math.trunc(absOffset / 60), 2);
+  const minutes = addLeadingZeros(absOffset % 60, 2);
+  return sign + hours + delimiter + minutes;
+}
+const dateLongFormatter = (pattern, formatLong2) => {
+  switch (pattern) {
+    case "P":
+      return formatLong2.date({ width: "short" });
+    case "PP":
+      return formatLong2.date({ width: "medium" });
+    case "PPP":
+      return formatLong2.date({ width: "long" });
+    case "PPPP":
+    default:
+      return formatLong2.date({ width: "full" });
+  }
+};
+const timeLongFormatter = (pattern, formatLong2) => {
+  switch (pattern) {
+    case "p":
+      return formatLong2.time({ width: "short" });
+    case "pp":
+      return formatLong2.time({ width: "medium" });
+    case "ppp":
+      return formatLong2.time({ width: "long" });
+    case "pppp":
+    default:
+      return formatLong2.time({ width: "full" });
+  }
+};
+const dateTimeLongFormatter = (pattern, formatLong2) => {
+  const matchResult = pattern.match(/(P+)(p+)?/) || [];
+  const datePattern = matchResult[1];
+  const timePattern = matchResult[2];
+  if (!timePattern) {
+    return dateLongFormatter(pattern, formatLong2);
+  }
+  let dateTimeFormat;
+  switch (datePattern) {
+    case "P":
+      dateTimeFormat = formatLong2.dateTime({ width: "short" });
+      break;
+    case "PP":
+      dateTimeFormat = formatLong2.dateTime({ width: "medium" });
+      break;
+    case "PPP":
+      dateTimeFormat = formatLong2.dateTime({ width: "long" });
+      break;
+    case "PPPP":
+    default:
+      dateTimeFormat = formatLong2.dateTime({ width: "full" });
+      break;
+  }
+  return dateTimeFormat.replace("{{date}}", dateLongFormatter(datePattern, formatLong2)).replace("{{time}}", timeLongFormatter(timePattern, formatLong2));
+};
+const longFormatters = {
+  p: timeLongFormatter,
+  P: dateTimeLongFormatter
+};
+const dayOfYearTokenRE = /^D+$/;
+const weekYearTokenRE = /^Y+$/;
+const throwTokens = ["D", "DD", "YY", "YYYY"];
+function isProtectedDayOfYearToken(token) {
+  return dayOfYearTokenRE.test(token);
+}
+function isProtectedWeekYearToken(token) {
+  return weekYearTokenRE.test(token);
+}
+function warnOrThrowProtectedError(token, format2, input) {
+  const _message = message(token, format2, input);
+  console.warn(_message);
+  if (throwTokens.includes(token)) throw new RangeError(_message);
+}
+function message(token, format2, input) {
+  const subject = token[0] === "Y" ? "years" : "days of the month";
+  return `Use \`${token.toLowerCase()}\` instead of \`${token}\` (in \`${format2}\`) for formatting ${subject} to the input \`${input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`;
+}
+const formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g;
+const longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g;
+const escapedStringRegExp = /^'([^]*?)'?$/;
+const doubleQuoteRegExp = /''/g;
+const unescapedLatinCharacterRegExp = /[a-zA-Z]/;
+function format(date, formatStr, options) {
+  var _a, _b, _c, _d;
+  const defaultOptions2 = getDefaultOptions();
+  const locale = defaultOptions2.locale ?? enUS;
+  const firstWeekContainsDate = defaultOptions2.firstWeekContainsDate ?? ((_b = (_a = defaultOptions2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.firstWeekContainsDate) ?? 1;
+  const weekStartsOn = defaultOptions2.weekStartsOn ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.weekStartsOn) ?? 0;
+  const originalDate = toDate(date);
+  if (!isValid(originalDate)) {
+    throw new RangeError("Invalid time value");
+  }
+  let parts = formatStr.match(longFormattingTokensRegExp).map((substring) => {
+    const firstCharacter = substring[0];
+    if (firstCharacter === "p" || firstCharacter === "P") {
+      const longFormatter = longFormatters[firstCharacter];
+      return longFormatter(substring, locale.formatLong);
+    }
+    return substring;
+  }).join("").match(formattingTokensRegExp).map((substring) => {
+    if (substring === "''") {
+      return { isToken: false, value: "'" };
+    }
+    const firstCharacter = substring[0];
+    if (firstCharacter === "'") {
+      return { isToken: false, value: cleanEscapedString(substring) };
+    }
+    if (formatters[firstCharacter]) {
+      return { isToken: true, value: substring };
+    }
+    if (firstCharacter.match(unescapedLatinCharacterRegExp)) {
+      throw new RangeError(
+        "Format string contains an unescaped latin alphabet character `" + firstCharacter + "`"
+      );
+    }
+    return { isToken: false, value: substring };
+  });
+  if (locale.localize.preprocessor) {
+    parts = locale.localize.preprocessor(originalDate, parts);
+  }
+  const formatterOptions = {
+    firstWeekContainsDate,
+    weekStartsOn,
+    locale
+  };
+  return parts.map((part) => {
+    if (!part.isToken) return part.value;
+    const token = part.value;
+    if (isProtectedWeekYearToken(token) || isProtectedDayOfYearToken(token)) {
+      warnOrThrowProtectedError(token, formatStr, String(date));
+    }
+    const formatter = formatters[token[0]];
+    return formatter(originalDate, token, locale.localize, formatterOptions);
+  }).join("");
+}
+function cleanEscapedString(input) {
+  const matched = input.match(escapedStringRegExp);
+  if (!matched) {
+    return input;
+  }
+  return matched[1].replace(doubleQuoteRegExp, "'");
+}
+function getDaysInMonth(date) {
+  const _date = toDate(date);
+  const year = _date.getFullYear();
+  const monthIndex = _date.getMonth();
+  const lastDayOfMonth2 = constructFrom(date, 0);
+  lastDayOfMonth2.setFullYear(year, monthIndex + 1, 0);
+  lastDayOfMonth2.setHours(0, 0, 0, 0);
+  return lastDayOfMonth2.getDate();
+}
+function lastDayOfMonth(date) {
+  const _date = toDate(date);
+  const month = _date.getMonth();
+  _date.setFullYear(_date.getFullYear(), month + 1, 0);
+  _date.setHours(0, 0, 0, 0);
+  return _date;
+}
+function isAfter(date, dateToCompare) {
+  const _date = toDate(date);
+  const _dateToCompare = toDate(dateToCompare);
+  return _date.getTime() > _dateToCompare.getTime();
+}
+function isBefore(date, dateToCompare) {
+  const _date = toDate(date);
+  const _dateToCompare = toDate(dateToCompare);
+  return +_date < +_dateToCompare;
+}
+function isSameMonth(dateLeft, dateRight) {
+  const _dateLeft = toDate(dateLeft);
+  const _dateRight = toDate(dateRight);
+  return _dateLeft.getFullYear() === _dateRight.getFullYear() && _dateLeft.getMonth() === _dateRight.getMonth();
+}
+function parseISO(argument, options) {
+  const additionalDigits = 2;
+  const dateStrings = splitDateString(argument);
+  let date;
+  if (dateStrings.date) {
+    const parseYearResult = parseYear(dateStrings.date, additionalDigits);
+    date = parseDate(parseYearResult.restDateString, parseYearResult.year);
+  }
+  if (!date || isNaN(date.getTime())) {
+    return /* @__PURE__ */ new Date(NaN);
+  }
+  const timestamp = date.getTime();
+  let time = 0;
+  let offset;
+  if (dateStrings.time) {
+    time = parseTime(dateStrings.time);
+    if (isNaN(time)) {
+      return /* @__PURE__ */ new Date(NaN);
+    }
+  }
+  if (dateStrings.timezone) {
+    offset = parseTimezone(dateStrings.timezone);
+    if (isNaN(offset)) {
+      return /* @__PURE__ */ new Date(NaN);
+    }
+  } else {
+    const dirtyDate = new Date(timestamp + time);
+    const result = /* @__PURE__ */ new Date(0);
+    result.setFullYear(
+      dirtyDate.getUTCFullYear(),
+      dirtyDate.getUTCMonth(),
+      dirtyDate.getUTCDate()
+    );
+    result.setHours(
+      dirtyDate.getUTCHours(),
+      dirtyDate.getUTCMinutes(),
+      dirtyDate.getUTCSeconds(),
+      dirtyDate.getUTCMilliseconds()
+    );
+    return result;
+  }
+  return new Date(timestamp + time + offset);
+}
+const patterns = {
+  dateTimeDelimiter: /[T ]/,
+  timeZoneDelimiter: /[Z ]/i,
+  timezone: /([Z+-].*)$/
+};
+const dateRegex = /^-?(?:(\d{3})|(\d{2})(?:-?(\d{2}))?|W(\d{2})(?:-?(\d{1}))?|)$/;
+const timeRegex = /^(\d{2}(?:[.,]\d*)?)(?::?(\d{2}(?:[.,]\d*)?))?(?::?(\d{2}(?:[.,]\d*)?))?$/;
+const timezoneRegex = /^([+-])(\d{2})(?::?(\d{2}))?$/;
+function splitDateString(dateString) {
+  const dateStrings = {};
+  const array = dateString.split(patterns.dateTimeDelimiter);
+  let timeString;
+  if (array.length > 2) {
+    return dateStrings;
+  }
+  if (/:/.test(array[0])) {
+    timeString = array[0];
+  } else {
+    dateStrings.date = array[0];
+    timeString = array[1];
+    if (patterns.timeZoneDelimiter.test(dateStrings.date)) {
+      dateStrings.date = dateString.split(patterns.timeZoneDelimiter)[0];
+      timeString = dateString.substr(
+        dateStrings.date.length,
+        dateString.length
+      );
+    }
+  }
+  if (timeString) {
+    const token = patterns.timezone.exec(timeString);
+    if (token) {
+      dateStrings.time = timeString.replace(token[1], "");
+      dateStrings.timezone = token[1];
+    } else {
+      dateStrings.time = timeString;
+    }
+  }
+  return dateStrings;
+}
+function parseYear(dateString, additionalDigits) {
+  const regex = new RegExp(
+    "^(?:(\\d{4}|[+-]\\d{" + (4 + additionalDigits) + "})|(\\d{2}|[+-]\\d{" + (2 + additionalDigits) + "})$)"
+  );
+  const captures = dateString.match(regex);
+  if (!captures) return { year: NaN, restDateString: "" };
+  const year = captures[1] ? parseInt(captures[1]) : null;
+  const century = captures[2] ? parseInt(captures[2]) : null;
+  return {
+    year: century === null ? year : century * 100,
+    restDateString: dateString.slice((captures[1] || captures[2]).length)
+  };
+}
+function parseDate(dateString, year) {
+  if (year === null) return /* @__PURE__ */ new Date(NaN);
+  const captures = dateString.match(dateRegex);
+  if (!captures) return /* @__PURE__ */ new Date(NaN);
+  const isWeekDate = !!captures[4];
+  const dayOfYear = parseDateUnit(captures[1]);
+  const month = parseDateUnit(captures[2]) - 1;
+  const day = parseDateUnit(captures[3]);
+  const week = parseDateUnit(captures[4]);
+  const dayOfWeek = parseDateUnit(captures[5]) - 1;
+  if (isWeekDate) {
+    if (!validateWeekDate(year, week, dayOfWeek)) {
+      return /* @__PURE__ */ new Date(NaN);
+    }
+    return dayOfISOWeekYear(year, week, dayOfWeek);
+  } else {
+    const date = /* @__PURE__ */ new Date(0);
+    if (!validateDate(year, month, day) || !validateDayOfYearDate(year, dayOfYear)) {
+      return /* @__PURE__ */ new Date(NaN);
+    }
+    date.setUTCFullYear(year, month, Math.max(dayOfYear, day));
+    return date;
+  }
+}
+function parseDateUnit(value) {
+  return value ? parseInt(value) : 1;
+}
+function parseTime(timeString) {
+  const captures = timeString.match(timeRegex);
+  if (!captures) return NaN;
+  const hours = parseTimeUnit(captures[1]);
+  const minutes = parseTimeUnit(captures[2]);
+  const seconds = parseTimeUnit(captures[3]);
+  if (!validateTime(hours, minutes, seconds)) {
+    return NaN;
+  }
+  return hours * millisecondsInHour + minutes * millisecondsInMinute + seconds * 1e3;
+}
+function parseTimeUnit(value) {
+  return value && parseFloat(value.replace(",", ".")) || 0;
+}
+function parseTimezone(timezoneString) {
+  if (timezoneString === "Z") return 0;
+  const captures = timezoneString.match(timezoneRegex);
+  if (!captures) return 0;
+  const sign = captures[1] === "+" ? -1 : 1;
+  const hours = parseInt(captures[2]);
+  const minutes = captures[3] && parseInt(captures[3]) || 0;
+  if (!validateTimezone(hours, minutes)) {
+    return NaN;
+  }
+  return sign * (hours * millisecondsInHour + minutes * millisecondsInMinute);
+}
+function dayOfISOWeekYear(isoWeekYear, week, day) {
+  const date = /* @__PURE__ */ new Date(0);
+  date.setUTCFullYear(isoWeekYear, 0, 4);
+  const fourthOfJanuaryDay = date.getUTCDay() || 7;
+  const diff = (week - 1) * 7 + day + 1 - fourthOfJanuaryDay;
+  date.setUTCDate(date.getUTCDate() + diff);
+  return date;
+}
+const daysInMonths = [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+function isLeapYearIndex(year) {
+  return year % 400 === 0 || year % 4 === 0 && year % 100 !== 0;
+}
+function validateDate(year, month, date) {
+  return month >= 0 && month <= 11 && date >= 1 && date <= (daysInMonths[month] || (isLeapYearIndex(year) ? 29 : 28));
+}
+function validateDayOfYearDate(year, dayOfYear) {
+  return dayOfYear >= 1 && dayOfYear <= (isLeapYearIndex(year) ? 366 : 365);
+}
+function validateWeekDate(_year, week, day) {
+  return week >= 1 && week <= 53 && day >= 0 && day <= 6;
+}
+function validateTime(hours, minutes, seconds) {
+  if (hours === 24) {
+    return minutes === 0 && seconds === 0;
+  }
+  return seconds >= 0 && seconds < 60 && minutes >= 0 && minutes < 60 && hours >= 0 && hours < 25;
+}
+function validateTimezone(_hours, minutes) {
+  return minutes >= 0 && minutes <= 59;
+}
+class CalendarDate {
+  constructor(value) {
+    __publicField(this, "_dateNums");
+    if (value || value === 0) {
+      this._dateNums = CalendarDate.parse(value);
+    } else {
+      this._dateNums = CalendarDate.parse(/* @__PURE__ */ new Date());
+    }
+  }
+  static parse(value) {
+    if (typeof value === "string") {
+      value = value.split("T")[0];
+      return value.split("-").map((v) => +v);
+    } else if (value instanceof Date) {
+      return [value.getFullYear(), value.getMonth() + 1, value.getDate()];
+    } else if (value === 0) {
+      return [0, 0, 0];
+    } else {
+      return [value.year, value.month, value.day];
+    }
+  }
+  static init() {
+    return new CalendarDate(0);
+  }
+  // Used internally to get the date value for the date_fns
+  get date() {
+    return new Date(
+      this._dateNums[0],
+      this._dateNums[1] - 1,
+      this._dateNums[2]
+    );
+  }
+  get year() {
+    return this._dateNums[0];
+  }
+  get month() {
+    return this._dateNums[1];
+  }
+  get day() {
+    return this._dateNums[2];
+  }
+  get dayOfWeek() {
+    return this.date.getDay();
+  }
+  get daysInMonth() {
+    return getDaysInMonth(this.date);
+  }
+  get firstDayOfMonth() {
+    return new CalendarDate({ year: this.year, month: this.month, day: 1 });
+  }
+  get lastDayOfMonth() {
+    return new CalendarDate(lastDayOfMonth(this.date));
+  }
+  get previousDay() {
+    return this.clone().addDays(-1);
+  }
+  get nextDay() {
+    return this.clone().addDays(1);
+  }
+  get previousWeek() {
+    return this.clone().addDays(-7);
+  }
+  get nextWeek() {
+    return this.clone().addDays(7);
+  }
+  get previousMonth() {
+    return this.clone().addMonths(-1);
+  }
+  get nextMonth() {
+    return this.clone().addMonths(1);
+  }
+  clone() {
+    return new CalendarDate(this.toString());
+  }
+  setYear(val) {
+    this._dateNums[0] = val;
+  }
+  setMonth(val) {
+    this._dateNums[1] = val;
+  }
+  setDay(val) {
+    this._dateNums[2] = val;
+    return this;
+  }
+  addYears(count) {
+    this._dateNums[0] += count;
+    return this;
+  }
+  addMonths(count) {
+    this._dateNums = CalendarDate.parse(addMonths(this.date, count));
+    return this;
+  }
+  addDays(count) {
+    this._dateNums = CalendarDate.parse(addDays(this.date, count));
+    return this;
+  }
+  isSameDay(cmp) {
+    return isSameDay(this.date, cmp.date);
+  }
+  isSameMonth(value) {
+    return isSameMonth(this.date, value.date);
+  }
+  isBefore(cmp) {
+    return isBefore(this.date, cmp.date);
+  }
+  isAfter(cmp) {
+    return isAfter(this.date, cmp.date);
+  }
+  isZero() {
+    return this._dateNums[0] === 0 && this._dateNums[1] === 0 && this._dateNums[2] === 0;
+  }
+  isValid() {
+    const comparisonDate = new Date(this.toString());
+    if (isNaN(comparisonDate.getTime()) || this.toString() !== comparisonDate.toISOString().split("T")[0]) {
+      return false;
+    }
+    return true;
+  }
+  format(tmpl) {
+    if (this.isZero()) {
+      return "";
+    }
+    return format(this.date, tmpl);
+  }
+  toString() {
+    if (this.isZero()) {
+      return "";
+    }
+    return this._dateNums.map((num) => `${num}`.length < 2 ? `0${num}` : `${num}`).join("-");
+  }
+}
+function GoabDatePicker({
+  value,
+  error,
+  min,
+  max,
+  disabled,
+  relative,
+  onChange,
+  ...rest
+}) {
+  const ref = react.useRef(null);
+  const _props = transformProps(rest, lowercase);
+  react.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`"
+      );
+    }
+  }, []);
+  react.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 new CalendarDate(val).toString();
+    }
+    return val;
+  };
+  return /* @__PURE__ */ jsxRuntime.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,
+      version: "2",
+      ..._props
+    }
+  );
+}
+function GoabDetails({
+  open,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-details",
+    {
+      open: open ? "true" : void 0,
+      ..._props,
+      children
+    }
+  );
+}
+function GoabDivider(props) {
+  return /* @__PURE__ */ jsxRuntime.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 el = react.useRef(null);
+  react.useEffect(() => {
+    var _a;
+    if (!(el == null ? void 0 : el.current) || !onClose) {
+      return;
+    }
+    (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
+    return () => {
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
+    };
+  }, [el, onClose]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-drawer",
+    {
+      ref: el,
+      position,
+      open: open ? true : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      maxsize: maxSize,
+      testid: testId,
+      version: "2",
+      children: [
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
+        children
+      ]
+    }
+  );
+}
+function stringify(value) {
+  if (typeof value === "undefined") {
+    return "";
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return JSON.stringify(value);
+}
+function GoabDropdown({
+  value,
+  onChange,
   disabled,
   error,
   filterable,
@@ -639,10 +2756,11 @@ function GoabDropdown({
   native,
   relative,
   children,
+  size = "default",
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps({ size, ...rest }, lowercase);
   react.useEffect(() => {
     if (!el.current) {
       return;
@@ -673,6 +2791,7 @@ function GoabDropdown({
       native: native ? "true" : void 0,
       relative: relative ? "true" : void 0,
       ..._props,
+      version: "2",
       children
     }
   );
@@ -708,7 +2827,7 @@ function GoabFileUploadCard({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps({ filename, ...rest }, parseISO.lowercase);
+  const _props = transformProps({ filename, ...rest }, lowercase);
   react.useEffect(() => {
     if (!el.current) return;
     const current = el.current;
@@ -721,14 +2840,11 @@ function GoabFileUploadCard({
       current.removeEventListener("_cancel", cancelHandler);
     };
   }, [el, onDelete, onCancel, filename]);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-file-upload-card", { ref: el, ..._props });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-file-upload-card", { ref: el, ..._props, version: "2" });
 }
-function GoabFileUploadInput({
-  onSelectFile,
-  ...rest
-}) {
+function GoabFileUploadInput({ onSelectFile, ...rest }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   react.useEffect(() => {
     if (!el.current) return;
     const current = el.current;
@@ -741,27 +2857,24 @@ function GoabFileUploadInput({
       current.removeEventListener("_selectFile", handler);
     };
   }, [el, onSelectFile]);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-file-upload-input", { ref: el, ..._props });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-file-upload-input", { ref: el, ..._props, version: "2" });
 }
-function GoabAppFooter({
-  children,
-  ...rest
-}) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer", { ..._props, children });
+function GoabAppFooter({ children, ...rest }) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer", { ..._props, version: "2", children });
 }
 function GoabAppFooterMetaSection({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer-meta-section", { slot: "meta", ..._props, children });
 }
 function GoabAppFooterNavSection({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer-nav-section", { slot: "nav", ..._props, children });
 }
 function GoabFieldset({
@@ -770,7 +2883,7 @@ function GoabFieldset({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.kebab);
+  const _props = transformProps(rest, kebab);
   react.useEffect(() => {
     if (!ref.current) return;
     const current = ref.current;
@@ -795,7 +2908,7 @@ function GoabPublicFormPage({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.kebab);
+  const _props = transformProps(rest, kebab);
   react.useEffect(() => {
     if (!ref.current) return;
     const current = ref.current;
@@ -817,9 +2930,9 @@ function GoabPublicFormSummary({
   heading = "",
   ...rest
 }) {
-  const _props = parseISO.transformProps(
+  const _props = transformProps(
     { heading, ...rest },
-    parseISO.lowercase
+    lowercase
   );
   return /* @__PURE__ */ jsxRuntime.jsx("goa-public-form-summary", { ..._props });
 }
@@ -832,7 +2945,7 @@ function GoabPublicForm({
 }) {
   const ref = react.useRef(null);
   const initialized = react.useRef(false);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   react.useLayoutEffect(() => {
     if (!ref.current) return;
     const current = ref.current;
@@ -880,9 +2993,9 @@ function GoabPublicSubform({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps(
+  const _props = transformProps(
     { id, name, "continue-msg": continueMsg, ...rest },
-    parseISO.kebab
+    kebab
   );
   react.useEffect(() => {
     if (!ref.current) return;
@@ -918,9 +3031,9 @@ function GoabPublicSubformIndex({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(
+  const _props = transformProps(
     { heading, "section-title": sectionTitle, "action-button-text": actionButtonText, "button-visibility": buttonVisibility, ...rest },
-    parseISO.kebab
+    kebab
   );
   return /* @__PURE__ */ jsxRuntime.jsx("goa-public-subform-index", { slot: "subform-index", ..._props, children });
 }
@@ -929,9 +3042,9 @@ function GoabPublicFormTask({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(
+  const _props = transformProps(
     { status, ...rest },
-    parseISO.lowercase
+    lowercase
   );
   return /* @__PURE__ */ jsxRuntime.jsx("goa-public-form-task", { ..._props, children });
 }
@@ -939,7 +3052,7 @@ function GoabPublicFormTaskList({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-public-form-task-list", { ..._props, children });
 }
 function GoabFormItem({
@@ -947,9 +3060,10 @@ function GoabFormItem({
   helpText,
   publicFormSummaryOrder,
   children,
+  type = "",
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps({ type, ...rest }, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-form-item",
     {
@@ -957,6 +3071,7 @@ function GoabFormItem({
       helptext: typeof helpText === "string" ? helpText : void 0,
       "public-form-summary-order": publicFormSummaryOrder,
       ..._props,
+      version: "2",
       children: [
         error && typeof error !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "error", children: error }),
         helpText && typeof helpText !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "helptext", children: helpText }),
@@ -1071,9 +3186,9 @@ function GoabIconButton({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps(
+  const _props = transformProps(
     { variant, size, ...rest },
-    parseISO.lowercase
+    lowercase
   );
   react.useEffect(() => {
     if (!ref.current) {
@@ -1107,7 +3222,7 @@ function GoabIcon({
   inverted,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-icon",
     {
@@ -1119,6 +3234,7 @@ function GoabIcon({
 function GoabInput({
   variant = "goa",
   textAlign = "left",
+  size = "default",
   focused,
   disabled,
   readonly,
@@ -1133,7 +3249,10 @@ function GoabInput({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps({ variant, textalign: textAlign, ...rest }, parseISO.lowercase);
+  const _props = transformProps(
+    { variant, textalign: textAlign, size, ...rest },
+    lowercase
+  );
   react.useEffect(() => {
     if (!ref.current) {
       return;
@@ -1181,6 +3300,7 @@ function GoabInput({
       readonly: readonly ? "true" : void 0,
       error: error ? "true" : void 0,
       handletrailingiconclick: onTrailingIconClick ? "true" : "false",
+      version: "2",
       children: [
         leadingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "leadingContent", children: leadingContent }),
         trailingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "trailingContent", children: trailingContent })
@@ -1194,11 +3314,11 @@ const onDateChangeHandler = (onChange) => {
       onChange == null ? void 0 : onChange({ name, value: "", event });
       return;
     }
-    if (typeof value === "string" && parseISO.isValid(new Date(value))) {
-      onChange == null ? void 0 : onChange({ name, value: parseISO.parseISO(value), event });
+    if (typeof value === "string" && isValid(new Date(value))) {
+      onChange == null ? void 0 : onChange({ name, value: parseISO(value), event });
       return;
     }
-    if (parseISO.isValid(value)) {
+    if (isValid(value)) {
       onChange == null ? void 0 : onChange({ name, value, event });
       return;
     }
@@ -1218,12 +3338,12 @@ function toString(value, tmpl = "yyyy-MM-dd") {
     return "";
   }
   if (typeof value === "string") {
-    return parseISO.format(parseISO.parseISO(value), tmpl);
+    return format(parseISO(value), tmpl);
   }
   if (value.toISOString() === (/* @__PURE__ */ new Date(0)).toISOString()) {
     return "";
   }
-  return parseISO.format(value, tmpl);
+  return format(value, tmpl);
 }
 function GoabInputText(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(GoabInput, { ...props, type: "text" });
@@ -1378,10 +3498,12 @@ const GoabLinearProgress = ({
 function GoabLink({
   actionArgs,
   actionArg,
+  color = "interactive",
+  size = "medium",
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = transformProps({ color, size, ...rest }, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-link",
     {
@@ -1397,9 +3519,9 @@ function GoALinkButton({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(
+  const _props = transformProps(
     { type, ...rest },
-    parseISO.lowercase
+    lowercase
   );
   return /* @__PURE__ */ jsxRuntime.jsx("goa-link-button", { ..._props, children });
 }
@@ -1411,9 +3533,9 @@ function GoabMenuButton({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(
+  const _props = transformProps(
     { type, testid: testId, ...rest },
-    parseISO.kebab
+    kebab
   );
   react.useEffect(() => {
     if (!el.current) {
@@ -1432,10 +3554,13 @@ function GoabMenuButton({
       current.removeEventListener("_action", listener);
     };
   }, [el, onAction]);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-menu-button", { ..._props, ref: el, children });
+  return (
+    // @ts-expect-error - stable WCProps requires text, but experimental supports icon-only mode
+    /* @__PURE__ */ jsxRuntime.jsx("goa-menu-button", { ..._props, version: "2", ref: el, children })
+  );
 }
 function GoabMenuAction(props) {
-  const _props = parseISO.transformProps(props, parseISO.lowercase);
+  const _props = transformProps(props, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-menu-action", { ..._props });
 }
 function GoabMicrositeHeader({
@@ -1517,877 +3642,601 @@ function GoabModal({
       transition,
       calloutvariant: calloutVariant,
       testid: testId,
+      version: "2",
       children: [
         heading && typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
         actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
         children
       ]
     }
-  );
-}
-const GoabNotification = ({
-  type = "information",
-  ariaLive,
-  maxContentWidth,
-  children,
-  testId,
-  onDismiss
-}) => {
-  const el = react.useRef(null);
-  react.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__ */ jsxRuntime.jsx(
-    "goa-notification",
-    {
-      ref: el,
-      type,
-      testid: testId,
-      maxcontentwidth: maxContentWidth,
-      arialive: ariaLive,
-      children
-    }
-  );
-};
-function GoabOneColumnLayout(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-one-column-layout", { children: props.children });
-}
-function GoabPageBlock(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-page-block", { width: props.width, testid: props.testId, children: props.children });
-}
-function GoabPages(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-pages",
-    {
-      current: props.current,
-      ml: props.ml,
-      mr: props.mr,
-      mt: props.mt,
-      mb: props.mb,
-      children: props.children
-    }
-  );
-}
-function GoabPagination({ onChange, ...props }) {
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    const current = ref.current;
-    const changeListener = (e) => {
-      const detail = e.detail;
-      onChange(detail);
-    };
-    current.addEventListener("_change", changeListener);
-    return () => {
-      current.removeEventListener("_change", changeListener);
-    };
-  }, [ref, onChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-pagination",
-    {
-      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 GoabPopover({
-  target,
-  padded,
-  relative,
-  children,
-  ...rest
-}) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "goa-popover",
-    {
-      padded: typeof padded === "undefined" ? void 0 : padded ? "true" : "false",
-      relative: relative ? "true" : void 0,
-      ..._props,
-      children: [
-        children,
-        target && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "target", children: target })
-      ]
-    }
-  );
-}
-function GoabPushDrawer({
-  testid,
-  open,
-  heading,
-  width,
-  actions,
-  children,
-  onClose
-}) {
-  const el = react.useRef(null);
-  react.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__ */ jsxRuntime.jsxs(
-    "goa-push-drawer",
-    {
-      ref: el,
-      testid,
-      open: open ?? false,
-      heading: typeof heading === "string" ? heading : void 0,
-      width,
-      children: [
-        heading && typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
-        children
-      ]
-    }
-  );
-}
-function GoabRadioItem({
-  name,
-  label,
-  value,
-  description,
-  reveal,
-  revealAriaLabel,
-  maxWidth,
-  disabled,
-  checked,
-  error,
-  ariaLabel,
-  children,
-  mt,
-  mr,
-  mb,
-  ml
-}) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { slot: "description", children: description }),
-        reveal && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "reveal", children: reveal }),
-        children
-      ]
-    }
-  );
-}
-function GoabRadioGroup({
-  disabled,
-  error,
-  onChange,
-  name,
-  children,
-  ...rest
-}) {
-  const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
-  react.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]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-radio-group",
-    {
-      ref: el,
-      ..._props,
-      name,
-      disabled: disabled ? "true" : void 0,
-      error: error ? "true" : void 0,
-      children
-    }
-  );
-}
-function GoabSideMenuGroup(props) {
-  return /* @__PURE__ */ jsxRuntime.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
-    }
-  );
-}
-function GoabSideMenuHeading(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("goa-side-menu-heading", { icon: props.icon, testid: props.testId, children: [
-    props.children,
-    props.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "meta", children: props.meta })
-  ] });
-}
-function GoabSideMenu(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-side-menu", { testid: props.testId, children: props.children });
+  );
 }
-const GoabSkeleton = ({
-  maxWidth,
-  size,
-  lineCount,
-  type,
+const GoabNotification = ({
+  type = "information",
+  emphasis = "high",
+  compact,
+  ariaLive,
+  maxContentWidth,
+  children,
   testId,
-  mt,
-  mr,
-  mb,
-  ml
+  onDismiss
 }) => {
+  const el = react.useRef(null);
+  react.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__ */ jsxRuntime.jsx(
-    "goa-skeleton",
+    "goa-notification",
     {
-      maxwidth: maxWidth,
-      linecount: lineCount,
+      ref: el,
       type,
-      size,
-      mt,
-      mr,
-      mb,
-      ml,
-      testid: testId
+      testid: testId,
+      maxcontentwidth: maxContentWidth,
+      arialive: ariaLive,
+      emphasis,
+      compact: compact ? "true" : void 0,
+      version: "2",
+      children
     }
   );
 };
-function GoabSpacer(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-spacer",
-    {
-      hspacing: props.hSpacing,
-      vspacing: props.vSpacing,
-      testid: props.testId
-    }
-  );
+function GoabOneColumnLayout(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-one-column-layout", { children: props.children });
 }
-function GoabSpinner({
-  type,
-  size,
-  progress,
-  invert,
-  testId
-}) {
+function GoabPageBlock(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-page-block", { width: props.width, testid: props.testId, children: props.children });
+}
+function GoabPages(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-spinner",
+    "goa-pages",
     {
-      type,
-      size,
-      progress,
-      invert: invert ? "true" : void 0,
-      testid: testId
+      current: props.current,
+      ml: props.ml,
+      mr: props.mr,
+      mt: props.mt,
+      mb: props.mb,
+      children: props.children
     }
   );
 }
-function GoabTable({ onSort, ...props }) {
+function GoabPagination({ onChange, ...props }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
     if (!ref.current) {
       return;
     }
     const current = ref.current;
-    const sortListener = (e) => {
+    const changeListener = (e) => {
       const detail = e.detail;
-      onSort == null ? void 0 : onSort(detail);
+      onChange(detail);
     };
-    current.addEventListener("_sort", sortListener);
+    current.addEventListener("_change", changeListener);
     return () => {
-      current.removeEventListener("_sort", sortListener);
+      current.removeEventListener("_change", changeListener);
     };
-  }, [ref, onSort]);
+  }, [ref, onChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-table",
+    "goa-pagination",
     {
       ref,
-      width: props.width,
+      itemcount: props.itemCount,
+      perpagecount: props.perPageCount,
+      pagenumber: props.pageNumber,
       variant: props.variant,
-      testid: props.testId,
       mt: props.mt,
       mb: props.mb,
       ml: props.ml,
       mr: props.mr,
-      children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%" }, children: props.children })
+      testid: props.testId,
+      version: "2"
     }
   );
 }
-function GoabTableSortHeader({
+function GoabPopover({
+  target,
+  padded,
+  relative,
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-table-sort-header", { ..._props, children });
-}
-function GoabTabs({
-  initialTab,
-  children,
-  testId,
-  variant,
-  onChange
-}) {
-  const ref = react.useRef(null);
-  react.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__ */ jsxRuntime.jsx("goa-tabs", { ref, initialtab: initialTab, testid: testId, variant, children });
-}
-function GoabTab({ heading, disabled, slug, children }) {
+  const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "goa-tab",
+    "goa-popover",
     {
-      slug,
-      disabled: disabled ? "true" : void 0,
-      heading: typeof heading === "string" ? heading : void 0,
+      padded: typeof padded === "undefined" ? void 0 : padded ? "true" : "false",
+      relative: relative ? "true" : void 0,
+      ..._props,
       children: [
-        typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "heading", children: heading }),
-        children
+        children,
+        target && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "target", children: target })
       ]
     }
   );
 }
-const GoabTemporaryNotificationCtrl = ({
-  verticalPosition = "bottom",
-  horizontalPosition = "center",
+function GoabPushDrawer({
+  open,
+  heading,
+  width,
   testId,
-  ...rest
-}) => {
-  const el = react.useRef(null);
-  const _props = parseISO.transformProps(
-    { "vertical-position": verticalPosition, "horizontal-position": horizontalPosition, ...rest },
-    parseISO.kebab
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-temp-notification-ctrl",
-    {
-      ref: el,
-      ..._props,
-      testid: testId
-    }
-  );
-};
-function GoabText({
-  as,
-  tag,
+  actions,
   children,
-  ...rest
-}) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-text",
-    {
-      as: tag || as,
-      ..._props,
-      children
-    }
-  );
-}
-function GoabTextArea({
-  readOnly,
-  disabled,
-  error,
-  onChange,
-  onKeyPress,
-  onBlur,
-  ...rest
+  onClose
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
   react.useEffect(() => {
-    if (!el.current) {
+    var _a;
+    if (!(el == null ? void 0 : el.current) || !onClose) {
       return;
     }
-    const current = el.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 });
-    };
-    current.addEventListener("_change", changeListener);
-    current.addEventListener("_keyPress", keypressListener);
-    current.addEventListener("_blur", blurListener);
+    (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
     return () => {
-      current.removeEventListener("_change", changeListener);
-      current.removeEventListener("_keyPress", keypressListener);
-      current.removeEventListener("_blur", blurListener);
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
     };
-  }, [el, onChange, onKeyPress, onBlur]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-textarea",
-    {
-      ref: el,
-      readOnly: readOnly ? "true" : void 0,
-      disabled: disabled ? "true" : void 0,
-      error: error ? "true" : void 0,
-      ..._props
-    }
-  );
-}
-function GoabThreeColumnLayout(props) {
+  }, [el, onClose]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "goa-three-column-layout",
+    "goa-push-drawer",
     {
-      leftcolumnwidth: props.leftColumnWidth,
-      rightcolumnwidth: props.rightColumnWidth,
-      maxcontentwidth: props.maxContentWidth,
+      ref: el,
+      open: open ? true : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      width,
+      testid: testId,
+      version: "2",
       children: [
-        props.header && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "header", children: props.header }),
-        props.nav && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "nav", children: props.nav }),
-        props.sidebar && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "side-menu", children: props.sidebar }),
-        props.sideMenu && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "side-menu", children: props.sideMenu }),
-        props.children,
-        props.footer && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "footer", children: props.footer })
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
+        children
       ]
     }
   );
 }
-function GoabTooltip({
-  content,
+function GoabRadioItem({
+  name,
+  label,
+  value,
+  description,
+  reveal,
+  revealAriaLabel,
+  maxWidth,
+  disabled,
+  checked,
+  error,
+  compact,
+  ariaLabel,
   children,
-  ...rest
+  mt,
+  mr,
+  mb,
+  ml
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
-  const isStringContent = typeof content === "string";
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "goa-tooltip",
+    "goa-radio-item",
     {
-      content: isStringContent ? content : void 0,
-      ..._props,
+      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,
+      compact: compact ? "true" : void 0,
+      arialabel: ariaLabel,
+      revealarialabel: revealAriaLabel,
+      mt,
+      mr,
+      mb,
+      ml,
+      version: "2",
       children: [
-        !isStringContent && content && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "content", children: content }),
+        description && typeof description !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "reveal", children: reveal }),
         children
       ]
     }
   );
 }
-function GoabTwoColumnLayout(props) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "goa-two-column-layout",
-    {
-      navcolumnwidth: props.navColumnWidth,
-      maxcontentwidth: props.maxContentWidth,
-      children: [
-        props.header && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "header", children: props.header }),
-        props.nav && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "nav", children: props.nav }),
-        props.children,
-        props.footer && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "footer", children: props.footer })
-      ]
-    }
-  );
-}
-const GoabFilterChip = ({
-  iconTheme = "outline",
+function GoabRadioGroup({
+  disabled,
   error,
-  onClick,
+  onChange,
+  name,
+  children,
+  size = "default",
   ...rest
-}) => {
+}) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(
-    { icontheme: iconTheme, ...rest },
-    parseISO.lowercase
-  );
+  const _props = transformProps({ size, ...rest }, lowercase);
   react.useEffect(() => {
     if (!el.current) return;
-    if (!onClick) return;
-    const current = el.current;
-    current.addEventListener("_click", onClick);
+    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 () => {
-      current.removeEventListener("_click", onClick);
+      if (onChange) {
+        currentEl.removeEventListener("_change", listener);
+      }
     };
-  }, [el, onClick]);
+  }, [name, onChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-filter-chip",
+    "goa-radio-group",
     {
       ref: el,
+      ..._props,
+      name,
+      disabled: disabled ? "true" : void 0,
       error: error ? "true" : void 0,
-      ..._props
+      version: "2",
+      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
-      }
-    })
+function GoabSideMenuGroup({
+  heading,
+  icon,
+  testId,
+  children,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-side-menu-group",
+    {
+      heading,
+      icon,
+      testid: testId,
+      mt,
+      mr,
+      mb,
+      ml,
+      version: "2",
+      children
+    }
   );
 }
-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 GoabSideMenuHeading({ meta, testId, icon, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("goa-side-menu-heading", { icon, testid: testId, version: "2", children: [
+    children,
+    meta && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "meta", children: meta })
+  ] });
+}
+function GoabSideMenu({ testId, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-side-menu", { testid: testId, version: "2", children });
+}
+const GoabSkeleton = ({
+  maxWidth,
+  size,
+  lineCount,
+  type,
+  testId,
+  mt,
+  mr,
+  mb,
+  ml
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-skeleton",
+    {
+      maxwidth: maxWidth,
+      linecount: lineCount,
+      type,
+      size,
+      mt,
+      mr,
+      mb,
+      ml,
+      testid: testId
     }
-    if (!this.state) {
-      console.error("getStateValue: state has not yet been set");
-      return "";
+  );
+};
+function GoabSpacer(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-spacer",
+    {
+      hspacing: props.hSpacing,
+      vspacing: props.vSpacing,
+      testid: props.testId
     }
-    const data = this.state.form[group].data;
-    if (data.type !== "details") {
-      return "";
+  );
+}
+function GoabSpinner({
+  type,
+  size,
+  progress,
+  invert,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-spinner",
+    {
+      type,
+      size,
+      progress,
+      invert: invert ? "true" : void 0,
+      testid: testId
     }
-    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");
+  );
+}
+function GoabTable({ onSort, onMultiSort, sortMode, ...props }) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (!ref.current) {
       return;
     }
-    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];
+    const current = ref.current;
+    const sortListener = (e) => {
+      const detail = e.detail;
+      onSort == null ? void 0 : onSort(detail);
+    };
+    const multiSortListener = (e) => {
+      const detail = e.detail;
+      onMultiSort == null ? void 0 : onMultiSort(detail);
+    };
+    current.addEventListener("_sort", sortListener);
+    current.addEventListener("_multisort", multiSortListener);
+    return () => {
+      current.removeEventListener("_sort", sortListener);
+      current.removeEventListener("_multisort", multiSortListener);
+    };
+  }, [ref, onSort, onMultiSort]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-table",
+    {
+      ref,
+      width: props.width,
+      variant: props.variant,
+      "sort-mode": sortMode,
+      striped: props.striped ? "true" : void 0,
+      testid: props.testId,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      version: "2",
+      children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%" }, children: props.children })
     }
-    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 GoabTableSortHeader({
+  name,
+  direction = "none",
+  sortOrder,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-table-sort-header", { name, direction, "sort-order": sortOrder, ...rest, children });
+}
+function GoabTabs({
+  initialTab,
+  children,
+  testId,
+  onChange,
+  variant,
+  orientation,
+  navigation
+}) {
+  const ref = react.useRef(null);
+  react.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);
+      };
     }
-    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++;
-      }
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-tabs",
+    {
+      ref,
+      initialtab: initialTab,
+      testid: testId,
+      variant,
+      version: "2",
+      orientation,
+      navigation,
+      children
     }
-    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;
+  );
+}
+function GoabTab({ heading, disabled, slug, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-tab",
+    {
+      slug,
+      disabled: disabled ? "true" : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      children: [
+        typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "heading", children: heading }),
+        children
+      ]
     }
-    if (this._isCompleting) {
-      console.warn("complete: completion already in progress");
-      return;
+  );
+}
+const GoabTemporaryNotificationCtrl = ({
+  verticalPosition = "bottom",
+  horizontalPosition = "center",
+  testId,
+  ...rest
+}) => {
+  const el = react.useRef(null);
+  const _props = transformProps(
+    { "vertical-position": verticalPosition, "horizontal-position": horizontalPosition, ...rest },
+    kebab
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-temp-notification-ctrl",
+    {
+      ref: el,
+      ..._props,
+      testid: testId
     }
-    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;
+  );
+};
+function GoabText({
+  as,
+  tag,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-text",
+    {
+      as: tag || as,
+      ..._props,
+      children
     }
-    if (this._isCompleting) {
-      console.warn("completeSubform: completion already in progress");
+  );
+}
+function GoabTextArea({
+  readOnly,
+  disabled,
+  error,
+  onChange,
+  onKeyPress,
+  onBlur,
+  ...rest
+}) {
+  const el = react.useRef(null);
+  const _props = transformProps(rest, lowercase);
+  react.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__ */ jsxRuntime.jsx(
+    "goa-textarea",
+    {
+      ref: el,
+      readOnly: readOnly ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      version: "2",
+      ..._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__ */ jsxRuntime.jsxs(
+    "goa-three-column-layout",
+    {
+      leftcolumnwidth: props.leftColumnWidth,
+      rightcolumnwidth: props.rightColumnWidth,
+      maxcontentwidth: props.maxContentWidth,
+      children: [
+        props.header && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "header", children: props.header }),
+        props.nav && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "nav", children: props.nav }),
+        props.sidebar && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "side-menu", children: props.sidebar }),
+        props.sideMenu && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "side-menu", children: props.sideMenu }),
+        props.children,
+        props.footer && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "footer", children: props.footer })
+      ]
+    }
+  );
+}
+function GoabTooltip({
+  content,
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  const isStringContent = typeof content === "string";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-tooltip",
+    {
+      content: isStringContent ? content : void 0,
+      ..._props,
+      children: [
+        !isStringContent && content && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "content", children: content }),
+        children
+      ]
+    }
+  );
+}
+function GoabTwoColumnLayout(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-two-column-layout",
+    {
+      navcolumnwidth: props.navColumnWidth,
+      maxcontentwidth: props.maxContentWidth,
+      children: [
+        props.header && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "header", children: props.header }),
+        props.nav && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "nav", children: props.nav }),
+        props.children,
+        props.footer && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "footer", children: props.footer })
+      ]
+    }
+  );
+}
+const GoabFilterChip = ({
+  iconTheme = "outline",
+  error,
+  onClick,
+  ...rest
+}) => {
+  const el = react.useRef(null);
+  const _props = transformProps({ icontheme: iconTheme, ...rest }, lowercase);
+  react.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__ */ jsxRuntime.jsx(
+    "goa-filter-chip",
+    {
+      ref: el,
+      error: error ? "true" : void 0,
+      version: "2",
+      ..._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") {
@@ -2472,6 +4321,166 @@ function usePublicFormController(type = "details") {
     controller: controllerRef.current
   };
 }
+function GoabWorkSideMenu({
+  heading,
+  url,
+  userName,
+  userSecondaryText,
+  testId,
+  primaryContent,
+  secondaryContent,
+  accountContent,
+  open,
+  onToggle,
+  onNavigate
+}) {
+  const el = react.useRef(null);
+  react.useEffect(() => {
+    var _a;
+    if (!(el == null ? void 0 : el.current) || !onToggle) {
+      return;
+    }
+    (_a = el.current) == null ? void 0 : _a.addEventListener("_toggle", onToggle);
+    return () => {
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_toggle", onToggle);
+    };
+  }, [el, onToggle]);
+  react.useEffect(() => {
+    var _a;
+    if (!(el == null ? void 0 : el.current) || !onNavigate) {
+      return;
+    }
+    const handler = (e) => {
+      onNavigate(e.detail.url);
+    };
+    (_a = el.current) == null ? void 0 : _a.addEventListener("_navigate", handler);
+    return () => {
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_navigate", handler);
+    };
+  }, [el, onNavigate]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-work-side-menu",
+    {
+      ref: el,
+      heading,
+      url,
+      "user-name": userName,
+      "user-secondary-text": userSecondaryText,
+      open: open ? true : false,
+      testid: testId,
+      children: [
+        primaryContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "primary", children: primaryContent }),
+        secondaryContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "secondary", children: secondaryContent }),
+        accountContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "account", children: accountContent })
+      ]
+    }
+  );
+}
+function GoabWorkSideMenuGroup(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-work-side-menu-group",
+    {
+      heading: props.heading,
+      icon: props.icon,
+      open: props.open ? true : void 0,
+      testid: props.testId,
+      children: props.children
+    }
+  );
+}
+function GoabWorkSideMenuItem(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-work-side-menu-item",
+    {
+      label: props.label,
+      url: props.url,
+      badge: props.badge,
+      current: props.current ? "true" : void 0,
+      divider: props.divider ? "true" : void 0,
+      icon: props.icon,
+      testid: props.testId,
+      type: props.type,
+      children: [
+        props.popoverContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "popoverContent", children: props.popoverContent }),
+        props.children
+      ]
+    }
+  );
+}
+function GoabWorkSideNotificationItem({
+  type,
+  timestamp,
+  title,
+  description,
+  readStatus,
+  priority,
+  testId,
+  onClick
+}) {
+  const el = react.useRef(null);
+  react.useEffect(() => {
+    if (!el.current) return;
+    const handleClick = () => {
+      onClick == null ? void 0 : onClick();
+    };
+    el.current.addEventListener("_click", handleClick);
+    return () => {
+      var _a;
+      (_a = el.current) == null ? void 0 : _a.removeEventListener("_click", handleClick);
+    };
+  }, [el, onClick]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-work-side-notification-item",
+    {
+      ref: el,
+      type,
+      timestamp,
+      title,
+      description,
+      "read-status": readStatus,
+      priority,
+      testid: testId
+    }
+  );
+}
+function GoabWorkSideNotificationPanel({
+  heading,
+  activeTab,
+  testId,
+  children,
+  onMarkAllRead,
+  onViewAll
+}) {
+  const el = react.useRef(null);
+  react.useEffect(() => {
+    if (!el.current) return;
+    const handleMarkAllRead = () => {
+      onMarkAllRead == null ? void 0 : onMarkAllRead();
+    };
+    const handleViewAll = () => {
+      onViewAll == null ? void 0 : onViewAll();
+    };
+    el.current.addEventListener("_markAllRead", handleMarkAllRead);
+    el.current.addEventListener("_viewAll", handleViewAll);
+    return () => {
+      var _a, _b;
+      (_a = el.current) == null ? void 0 : _a.removeEventListener("_markAllRead", handleMarkAllRead);
+      (_b = el.current) == null ? void 0 : _b.removeEventListener("_viewAll", handleViewAll);
+    };
+  }, [el, onMarkAllRead, onViewAll]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-work-side-notification-panel",
+    {
+      ref: el,
+      heading,
+      "active-tab": activeTab,
+      testid: testId,
+      children
+    }
+  );
+}
 exports.GoALinkButton = GoALinkButton;
 exports.GoabAccordion = GoabAccordion;
 exports.GoabAppFooter = GoabAppFooter;
@@ -2498,7 +4507,6 @@ exports.GoabDrawer = GoabDrawer;
 exports.GoabDropdown = GoabDropdown;
 exports.GoabDropdownItem = GoabDropdownItem;
 exports.GoabDropdownOption = GoabDropdownOption;
-exports.GoabEmergencyBadge = GoabEmergencyBadge;
 exports.GoabFieldset = GoabFieldset;
 exports.GoabFileUploadCard = GoabFileUploadCard;
 exports.GoabFileUploadInput = GoabFileUploadInput;
@@ -2511,8 +4519,6 @@ exports.GoabHeroBanner = GoabHeroBanner;
 exports.GoabHeroBannerActions = GoabHeroBannerActions;
 exports.GoabIcon = GoabIcon;
 exports.GoabIconButton = GoabIconButton;
-exports.GoabImportantBadge = GoabImportantBadge;
-exports.GoabInfoBadge = GoabInfoBadge;
 exports.GoabInput = GoabInput;
 exports.GoabInputDate = GoabInputDate;
 exports.GoabInputDateTime = GoabInputDateTime;
@@ -2555,7 +4561,6 @@ exports.GoabSideMenuHeading = GoabSideMenuHeading;
 exports.GoabSkeleton = GoabSkeleton;
 exports.GoabSpacer = GoabSpacer;
 exports.GoabSpinner = GoabSpinner;
-exports.GoabSuccessBadge = GoabSuccessBadge;
 exports.GoabTab = GoabTab;
 exports.GoabTable = GoabTable;
 exports.GoabTableSortHeader = GoabTableSortHeader;
@@ -2567,5 +4572,10 @@ exports.GoabTextarea = GoabTextArea;
 exports.GoabThreeColumnLayout = GoabThreeColumnLayout;
 exports.GoabTooltip = GoabTooltip;
 exports.GoabTwoColumnLayout = GoabTwoColumnLayout;
+exports.GoabWorkSideMenu = GoabWorkSideMenu;
+exports.GoabWorkSideMenuGroup = GoabWorkSideMenuGroup;
+exports.GoabWorkSideMenuItem = GoabWorkSideMenuItem;
+exports.GoabWorkSideNotificationItem = GoabWorkSideNotificationItem;
+exports.GoabWorkSideNotificationPanel = GoabWorkSideNotificationPanel;
 exports.usePublicFormController = usePublicFormController;
 //# sourceMappingURL=index.js.map