@abgov/react-components 6.10.0 → 6.11.0-dev.10

package/experimental.mjs

@@ -1,88 +1,1230 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import { a as GoabIcon } from "./icon-CCNDGfBO.mjs";
-import { G } from "./icon-CCNDGfBO.mjs";
-const panel = "_panel_m3z4m_1";
-const panelBackground = "_panelBackground_m3z4m_8";
-const children = "_children_m3z4m_12";
-const handle = "_handle_m3z4m_17";
-const width = "_width_m3z4m_42";
-const Css = {
-  panel,
-  panelBackground,
-  children,
-  handle,
-  width
+import { jsx, jsxs } from "react/jsx-runtime";
+import { t as transformProps, l as lowercase, f as format, p as parseISO, i as isValid, k as kebab } from "./parseISO-BHUUf1QW.mjs";
+import { useRef, useEffect } from "react";
+function getIconValue(icon, iconType) {
+  if (icon !== void 0) {
+    return icon ? "true" : "false";
+  }
+  return iconType ? "true" : "false";
+}
+function GoabxBadge({
+  icon,
+  iconType,
+  size = "medium",
+  emphasis = "strong",
+  version = "2",
+  ...rest
+}) {
+  const _props = transformProps({ size, emphasis, ...rest }, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-badge",
+    {
+      icon: getIconValue(icon, iconType),
+      icontype: iconType,
+      ..._props,
+      version,
+      size,
+      emphasis
+    }
+  );
+}
+function GoabxButton({
+  disabled,
+  onClick,
+  actionArgs,
+  actionArg,
+  children,
+  version = "2",
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onClick == null ? void 0 : onClick();
+    };
+    current.addEventListener("_click", listener);
+    return () => {
+      current.removeEventListener("_click", listener);
+    };
+  }, [el, onClick]);
+  return /* @__PURE__ */ jsx(
+    "goa-button",
+    {
+      ref: el,
+      disabled: disabled ? "true" : void 0,
+      "action-arg": actionArg,
+      "action-args": JSON.stringify(actionArgs),
+      ..._props,
+      version,
+      children
+    }
+  );
+}
+function GoabxCalendar({
+  min,
+  max,
+  onChange,
+  name,
+  version = "2",
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const listener = (e) => {
+      onChange({
+        name: name || "",
+        value: e.detail.value
+      });
+    };
+    current.addEventListener("_change", listener);
+    return () => {
+      current.removeEventListener("_change", listener);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "goa-calendar",
+    {
+      ref,
+      name,
+      min: min || void 0,
+      max: max || void 0,
+      version,
+      ..._props
+    }
+  );
+}
+const GoabxCallout = ({
+  type = "information",
+  iconTheme = "outline",
+  size = "large",
+  ariaLive = "off",
+  emphasis = "medium",
+  children,
+  version = "2",
+  ...rest
+}) => {
+  const _props = transformProps(
+    { type, icontheme: iconTheme, size, arialive: ariaLive, emphasis, ...rest },
+    lowercase
+  );
+  return /* @__PURE__ */ jsx("goa-callout", { ..._props, version, children });
 };
-function ResizablePanel(props) {
-  const bgRef = useRef(null);
-  const sectionRef = useRef(null);
-  const widthRef = useRef(null);
-  const handleRef = useRef(null);
-  const maxWidth = useRef(0);
-  const resizeBarState = useRef("static");
-  const [width2, setWidth] = useState();
+function GoabxCheckbox({
+  error,
+  checked,
+  indeterminate,
+  disabled,
+  value,
+  description,
+  reveal,
+  onChange,
+  name,
+  children,
+  size = "default",
+  version = "2",
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps({ size, ...rest }, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const listener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    current.addEventListener("_change", listener);
+    return () => {
+      current.removeEventListener("_change", listener);
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsxs(
+    "goa-checkbox",
+    {
+      ref: el,
+      ..._props,
+      name,
+      error: error ? "true" : void 0,
+      checked: checked ? "true" : void 0,
+      indeterminate: indeterminate ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      value: typeof value === "boolean" ? value ? "true" : void 0 : value,
+      description: typeof description === "string" ? description : void 0,
+      version,
+      children: [
+        children,
+        typeof description !== "string" && description && /* @__PURE__ */ jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsx("div", { slot: "reveal", children: reveal })
+      ]
+    }
+  );
+}
+function GoabxCheckboxList({
+  name,
+  value = [],
+  disabled,
+  error,
+  testId,
+  maxWidth,
+  size = "default",
+  children,
+  onChange,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+    const listener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    current.addEventListener("_change", listener);
+    return () => {
+      current.removeEventListener("_change", listener);
+    };
+  }, [onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-checkbox-list",
+    {
+      ref: el,
+      name,
+      value,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      testid: testId,
+      maxwidth: maxWidth,
+      version: "2",
+      size,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
+    }
+  );
+}
+function GoabxDatePicker({
+  value,
+  error,
+  min,
+  max,
+  disabled,
+  relative,
+  version = "2",
+  onChange,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (value && typeof value !== "string") {
+      console.warn(
+        "Using a `Date` type for value is deprecated. Instead use a string of the format `yyyy-mm-dd`"
+      );
+    }
+  }, []);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const handleChange = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    if (onChange) {
+      current.addEventListener("_change", handleChange);
+    }
+    return () => {
+      if (onChange) {
+        current.removeEventListener("_change", handleChange);
+      }
+    };
+  }, [onChange]);
+  const formatValue = (val) => {
+    if (!val) return "";
+    if (val instanceof Date) {
+      return val.toISOString();
+    }
+    return val;
+  };
+  return /* @__PURE__ */ jsx(
+    "goa-date-picker",
+    {
+      ref,
+      value: formatValue(value) || void 0,
+      error: error ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      min: formatValue(min) || void 0,
+      max: formatValue(max) || void 0,
+      relative: relative ? "true" : void 0,
+      version,
+      ..._props
+    }
+  );
+}
+function GoabxDrawer({
+  position,
+  open,
+  heading,
+  maxSize,
+  testId,
+  actions,
+  children,
+  onClose,
+  version = "2"
+}) {
+  const el = useRef(null);
   useEffect(() => {
     var _a;
-    maxWidth.current = ((_a = bgRef.current) == null ? void 0 : _a.getBoundingClientRect().width) ?? 0;
+    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__ */ jsxs(
+    "goa-drawer",
+    {
+      ref: el,
+      position,
+      open: open ? true : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      maxsize: maxSize,
+      testid: testId,
+      version,
+      children: [
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ 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 GoabxDropdown({
+  value,
+  onChange,
+  disabled,
+  error,
+  filterable,
+  multiselect,
+  native,
+  relative,
+  children,
+  size = "default",
+  version = "2",
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps({ size, ...rest }, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const handler = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    if (onChange) {
+      current.addEventListener("_change", handler);
+    }
+    return () => {
+      if (onChange) {
+        current.removeEventListener("_change", handler);
+      }
+    };
+  }, [el, onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-dropdown",
+    {
+      ref: el,
+      value: stringify(value),
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      filterable: filterable ? "true" : void 0,
+      multiselect: multiselect ? "true" : void 0,
+      native: native ? "true" : void 0,
+      relative: relative ? "true" : void 0,
+      ..._props,
+      version,
+      children
+    }
+  );
+}
+function GoabxDropdownOption(props) {
+  useEffect(() => {
+    console.warn("GoabxDropdownOption is deprecated. Please use GoabxDropdownItem");
   }, []);
-  function resetMouseState() {
-    resizeBarState.current = "static";
+  return /* @__PURE__ */ jsx(GoabxDropdownItem, { ...props });
+}
+function GoabxDropdownItem({
+  value,
+  label,
+  filter,
+  name,
+  mountType = "append"
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-dropdown-item",
+    {
+      value,
+      label,
+      filter,
+      name,
+      mount: mountType
+    }
+  );
+}
+function GoabxFileUploadCard({
+  onDelete,
+  onCancel,
+  filename,
+  version = "2",
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps({ filename, ...rest }, lowercase);
+  useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+    const deleteHandler = (event) => onDelete == null ? void 0 : onDelete({ filename, event });
+    const cancelHandler = (event) => onCancel == null ? void 0 : onCancel({ filename, event });
+    current.addEventListener("_delete", deleteHandler);
+    current.addEventListener("_cancel", cancelHandler);
+    return () => {
+      current.removeEventListener("_delete", deleteHandler);
+      current.removeEventListener("_cancel", cancelHandler);
+    };
+  }, [el, onDelete, onCancel, filename]);
+  return /* @__PURE__ */ jsx("goa-file-upload-card", { ref: el, ..._props, version });
+}
+function GoabxFileUploadInput({
+  onSelectFile,
+  version = "2",
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+    const handler = (e) => {
+      const detail = e.detail;
+      onSelectFile({ ...detail, event: e });
+    };
+    current.addEventListener("_selectFile", handler);
+    return () => {
+      current.removeEventListener("_selectFile", handler);
+    };
+  }, [el, onSelectFile]);
+  return /* @__PURE__ */ jsx("goa-file-upload-input", { ref: el, ..._props, version });
+}
+const GoabxFilterChip = ({
+  iconTheme = "outline",
+  error,
+  onClick,
+  version = "2",
+  ...rest
+}) => {
+  const el = useRef(null);
+  const _props = transformProps(
+    { icontheme: iconTheme, ...rest },
+    lowercase
+  );
+  useEffect(() => {
+    if (!el.current) return;
+    if (!onClick) return;
+    const current = el.current;
+    current.addEventListener("_click", onClick);
+    return () => {
+      current.removeEventListener("_click", onClick);
+    };
+  }, [el, onClick]);
+  return /* @__PURE__ */ jsx(
+    "goa-filter-chip",
+    {
+      ref: el,
+      error: error ? "true" : void 0,
+      version,
+      ..._props
+    }
+  );
+};
+function GoabxFormItem({
+  error,
+  helpText,
+  publicFormSummaryOrder,
+  children,
+  type = "",
+  version = "2",
+  ...rest
+}) {
+  const _props = transformProps({ type, ...rest }, lowercase);
+  return /* @__PURE__ */ jsxs(
+    "goa-form-item",
+    {
+      error: typeof error === "string" ? error : void 0,
+      helptext: typeof helpText === "string" ? helpText : void 0,
+      "public-form-summary-order": publicFormSummaryOrder,
+      ..._props,
+      version,
+      children: [
+        error && typeof error !== "string" && /* @__PURE__ */ jsx("div", { slot: "error", children: error }),
+        helpText && typeof helpText !== "string" && /* @__PURE__ */ jsx("div", { slot: "helptext", children: helpText }),
+        children
+      ]
+    }
+  );
+}
+function GoabxAppFooter({ children, ...rest }) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-footer", { ..._props, version: "2", children });
+}
+function GoabxAppFooterMetaSection({
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-footer-meta-section", { slot: "meta", ..._props, children });
+}
+function GoabxAppFooterNavSection({
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-footer-nav-section", { slot: "nav", ..._props, children });
+}
+function GoabxInput({
+  variant = "goa",
+  textAlign = "left",
+  size = "default",
+  focused,
+  disabled,
+  readonly,
+  error,
+  leadingContent,
+  trailingContent,
+  onTrailingIconClick,
+  onChange,
+  onFocus,
+  onBlur,
+  onKeyPress,
+  version = "2",
+  ...rest
+}) {
+  const ref = useRef(null);
+  const _props = transformProps(
+    { variant, textalign: textAlign, size, ...rest },
+    lowercase
+  );
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    const clickListener = () => {
+      onTrailingIconClick == null ? void 0 : onTrailingIconClick();
+    };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
+    const keypressListener = (e) => {
+      const detail = e.detail;
+      onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
+    };
+    current.addEventListener("_change", changeListener);
+    current.addEventListener("_trailingIconClick", clickListener);
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
+    current.addEventListener("_keyPress", keypressListener);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+      current.removeEventListener("_trailingIconClick", clickListener);
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
+      current.removeEventListener("_keyPress", keypressListener);
+    };
+  }, [ref, onChange, onTrailingIconClick, onFocus, onBlur, onKeyPress]);
+  return /* @__PURE__ */ jsxs(
+    "goa-input",
+    {
+      ref,
+      ..._props,
+      focused: focused ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      readonly: readonly ? "true" : void 0,
+      error: error ? "true" : void 0,
+      handletrailingiconclick: onTrailingIconClick ? "true" : "false",
+      version,
+      children: [
+        leadingContent && /* @__PURE__ */ jsx("div", { slot: "leadingContent", children: leadingContent }),
+        trailingContent && /* @__PURE__ */ jsx("div", { slot: "trailingContent", children: trailingContent })
+      ]
+    }
+  );
+}
+const onDateChangeHandler = (onChange) => {
+  return ({ name, value, event }) => {
+    if (!value) {
+      onChange == null ? void 0 : onChange({ name, value: "", event });
+      return;
+    }
+    if (typeof value === "string" && isValid(new Date(value))) {
+      onChange == null ? void 0 : onChange({ name, value: parseISO(value), event });
+      return;
+    }
+    if (isValid(value)) {
+      onChange == null ? void 0 : onChange({ name, value, event });
+      return;
+    }
+  };
+};
+const onTimeChangeHandler = (onChange) => {
+  return ({ name, value, event }) => {
+    if (!value) {
+      onChange == null ? void 0 : onChange({ name, value: "", event });
+      return;
+    }
+    onChange == null ? void 0 : onChange({ name, value, event });
+  };
+};
+function toString(value, tmpl = "yyyy-MM-dd") {
+  if (!value) {
+    return "";
   }
-  function onMouseDown(_) {
-    resizeBarState.current = "active";
-    window.addEventListener("mouseup", resetMouseState);
+  if (typeof value === "string") {
+    return format(parseISO(value), tmpl);
   }
-  function onMouseUp(_) {
-    resizeBarState.current = "static";
-    window.removeEventListener("mouseup", resetMouseState);
+  if (value.toISOString() === (/* @__PURE__ */ new Date(0)).toISOString()) {
+    return "";
   }
-  function onMouseMove(e) {
-    var _a, _b;
-    if (resizeBarState.current === "static") {
+  return format(value, tmpl);
+}
+function GoabxInputText(props) {
+  return /* @__PURE__ */ jsx(GoabxInput, { ...props, type: "text" });
+}
+function GoabxInputPassword(props) {
+  return /* @__PURE__ */ jsx(GoabxInput, { ...props, type: "password" });
+}
+function GoabxInputDate({
+  value,
+  min = "",
+  max = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    GoabxInput,
+    {
+      ...props,
+      type: "date",
+      onChange: onDateChangeHandler(props.onChange),
+      min: toString(min),
+      max: toString(max),
+      value: toString(value)
+    }
+  );
+}
+function GoabxInputTime({
+  value,
+  min = "",
+  max = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    GoabxInput,
+    {
+      ...props,
+      onChange: onTimeChangeHandler(props.onChange),
+      value,
+      type: "time"
+    }
+  );
+}
+function GoabxInputDateTime({
+  value,
+  min = "",
+  max = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    GoabxInput,
+    {
+      ...props,
+      onChange: onDateChangeHandler(props.onChange),
+      value: toString(value, "yyyy-MM-dd'T'HH:mm"),
+      type: "datetime-local"
+    }
+  );
+}
+function GoabxInputEmail(props) {
+  return /* @__PURE__ */ jsx(GoabxInput, { ...props, type: "email" });
+}
+function GoabxInputSearch(props) {
+  return /* @__PURE__ */ jsx(GoabxInput, { ...props, type: "search", trailingIcon: "search" });
+}
+function GoabxInputUrl(props) {
+  return /* @__PURE__ */ jsx(GoabxInput, { ...props, type: "url" });
+}
+function GoabxInputTel(props) {
+  return /* @__PURE__ */ jsx(GoabxInput, { ...props, type: "tel" });
+}
+function GoabxInputFile(props) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: props.id,
+      name: props.name,
+      type: "file",
+      onChange: (e) => {
+        var _a;
+        return (_a = props.onChange) == null ? void 0 : _a.call(props, {
+          name: e.target.name,
+          value: e.target.value,
+          event: e.nativeEvent
+        });
+      },
+      style: { backgroundColor: "revert" }
+    }
+  );
+}
+function GoabxInputMonth(props) {
+  return /* @__PURE__ */ jsx(GoabxInput, { ...props, type: "month" });
+}
+function GoabxInputNumber({
+  min = Number.MIN_VALUE,
+  max = Number.MAX_VALUE,
+  value,
+  textAlign = "right",
+  ...props
+}) {
+  const onNumberChange = ({ name, value: value2, event }) => {
+    var _a;
+    (_a = props.onChange) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
+  };
+  const onFocus = ({ name, value: value2, event }) => {
+    var _a;
+    (_a = props.onFocus) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
+  };
+  const onBlur = ({ name, value: value2, event }) => {
+    var _a;
+    (_a = props.onBlur) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), event });
+  };
+  const onKeyPress = ({ name, value: value2, key, event }) => {
+    var _a;
+    (_a = props.onKeyPress) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2), key: parseInt(key), event });
+  };
+  return /* @__PURE__ */ jsx(
+    GoabxInput,
+    {
+      ...props,
+      onChange: onNumberChange,
+      min: min == null ? void 0 : min.toString(),
+      max: max == null ? void 0 : max.toString(),
+      value: value == null ? void 0 : value.toString(),
+      onFocus,
+      onBlur,
+      type: "number",
+      onKeyPress,
+      textAlign
+    }
+  );
+}
+function GoabxInputRange(props) {
+  return /* @__PURE__ */ jsx(GoabxInput, { ...props, type: "range" });
+}
+function GoabxLink({
+  actionArgs,
+  actionArg,
+  color = "interactive",
+  size = "medium",
+  children,
+  ...rest
+}) {
+  const _props = transformProps({ color, size, ...rest }, lowercase);
+  return /* @__PURE__ */ jsx(
+    "goa-link",
+    {
+      "action-arg": actionArg,
+      "action-args": JSON.stringify(actionArgs),
+      ..._props,
+      children
+    }
+  );
+}
+function GoabxMenuAction(props) {
+  const _props = transformProps(props, lowercase);
+  return /* @__PURE__ */ jsx("goa-menu-action", { ..._props });
+}
+function GoabxMenuButton({
+  type = "primary",
+  testId,
+  onAction,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(
+    { type, testid: testId, ...rest },
+    kebab
+  );
+  useEffect(() => {
+    if (!el.current) {
       return;
     }
-    const sectionEl = sectionRef.current;
-    const xOffset = (sectionEl == null ? void 0 : sectionEl.getBoundingClientRect().x) || 0;
-    const mouseX = e.clientX;
-    const minWidth = props.minWidth || 0;
-    if (mouseX <= 0) {
+    if (!onAction) {
       return;
     }
-    const newXPos = ((_a = handleRef.current) == null ? void 0 : _a.getBoundingClientRect().x) ?? 0;
-    const calcWidth = Math.max(
-      newXPos - xOffset,
-      Math.min(mouseX - xOffset, maxWidth.current)
-    );
-    const elementWidth = Math.max(minWidth, calcWidth - 64);
-    if (elementWidth <= minWidth) {
+    const current = el.current;
+    const listener = (e) => {
+      const detail = e.detail;
+      onAction == null ? void 0 : onAction(detail);
+    };
+    current.addEventListener("_action", listener);
+    return () => {
+      current.removeEventListener("_action", listener);
+    };
+  }, [el, onAction]);
+  return (
+    // @ts-expect-error - stable WCProps requires text, but experimental supports icon-only mode
+    /* @__PURE__ */ jsx("goa-menu-button", { ..._props, version: "2", ref: el, children })
+  );
+}
+function GoabxModal({
+  heading,
+  children,
+  maxWidth,
+  open,
+  actions,
+  transition,
+  calloutVariant,
+  onClose,
+  testId,
+  version = "2"
+}) {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
       return;
     }
-    sectionEl == null ? void 0 : sectionEl.setAttribute("style", `width: ${calcWidth}px;`);
-    (_b = widthRef.current) == null ? void 0 : _b.setAttribute(
-      "style",
-      `right: ${maxWidth.current - calcWidth + 32}px`
-    );
-    setWidth(`${Math.round(elementWidth)}px`);
-  }
+    const current = el.current;
+    const listener = () => {
+      onClose == null ? void 0 : onClose();
+    };
+    current.addEventListener("_close", listener);
+    return () => {
+      current.removeEventListener("_close", listener);
+    };
+  }, [el, onClose]);
   return /* @__PURE__ */ jsxs(
-    "div",
+    "goa-modal",
     {
-      ref: bgRef,
-      className: Css.panelBackground,
-      onMouseDown,
-      onMouseMove,
-      onMouseUp,
+      ref: el,
+      open: open ? "true" : void 0,
+      closable: onClose ? "true" : "false",
+      heading: typeof heading === "string" ? heading : void 0,
+      maxwidth: maxWidth,
+      transition,
+      calloutvariant: calloutVariant,
+      testid: testId,
+      version,
       children: [
-        /* @__PURE__ */ jsxs("section", { ref: sectionRef, className: Css.panel, children: [
-          /* @__PURE__ */ jsx("div", { className: Css.children, children: props.children }),
-          /* @__PURE__ */ jsx("div", { ref: handleRef, className: Css.handle, children: /* @__PURE__ */ jsx(GoabIcon, { type: "reorder-two" }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { ref: widthRef, className: Css.width, children: width2 })
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
+        children
       ]
     }
   );
 }
+const GoabxNotification = ({
+  type = "information",
+  emphasis = "high",
+  compact,
+  ariaLive,
+  maxContentWidth,
+  children,
+  testId,
+  onDismiss,
+  version = "2"
+}) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onDismiss == null ? void 0 : onDismiss();
+    };
+    current.addEventListener("_dismiss", listener);
+    return () => {
+      current.removeEventListener("_dismiss", listener);
+    };
+  }, [el, onDismiss]);
+  return /* @__PURE__ */ jsx(
+    "goa-notification",
+    {
+      ref: el,
+      type,
+      testid: testId,
+      maxcontentwidth: maxContentWidth,
+      arialive: ariaLive,
+      emphasis,
+      compact: compact ? "true" : void 0,
+      version,
+      children
+    }
+  );
+};
+function GoabxPagination({
+  onChange,
+  version = "2",
+  ...props
+}) {
+  const ref = useRef(null);
+  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__ */ 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,
+      version
+    }
+  );
+}
+function GoabxRadioItem({
+  name,
+  label,
+  value,
+  description,
+  reveal,
+  revealAriaLabel,
+  maxWidth,
+  disabled,
+  checked,
+  error,
+  compact,
+  ariaLabel,
+  children,
+  version = "2",
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  return /* @__PURE__ */ jsxs(
+    "goa-radio-item",
+    {
+      name,
+      label,
+      value,
+      description: typeof description === "string" ? description : void 0,
+      maxwidth: maxWidth,
+      error: error ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      checked: checked ? "true" : void 0,
+      compact: compact ? "true" : void 0,
+      arialabel: ariaLabel,
+      revealarialabel: revealAriaLabel,
+      mt,
+      mr,
+      mb,
+      ml,
+      version,
+      children: [
+        description && typeof description !== "string" && /* @__PURE__ */ jsx("div", { slot: "description", children: description }),
+        reveal && /* @__PURE__ */ jsx("div", { slot: "reveal", children: reveal }),
+        children
+      ]
+    }
+  );
+}
+function GoabxRadioGroup({
+  disabled,
+  error,
+  onChange,
+  name,
+  children,
+  size = "default",
+  version = "2",
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps({ size, ...rest }, lowercase);
+  useEffect(() => {
+    if (!el.current) return;
+    const listener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    const currentEl = el.current;
+    if (onChange) {
+      currentEl.addEventListener("_change", listener);
+    }
+    return () => {
+      if (onChange) {
+        currentEl.removeEventListener("_change", listener);
+      }
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-radio-group",
+    {
+      ref: el,
+      ..._props,
+      name,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      version,
+      children
+    }
+  );
+}
+function GoabxSideMenu({
+  testId,
+  children,
+  version = "2"
+}) {
+  return /* @__PURE__ */ jsx("goa-side-menu", { testid: testId, version, children });
+}
+function GoabxSideMenuGroup({
+  heading,
+  icon,
+  testId,
+  children,
+  mt,
+  mr,
+  mb,
+  ml,
+  version = "2"
+}) {
+  return /* @__PURE__ */ jsx(
+    "goa-side-menu-group",
+    {
+      heading,
+      icon,
+      testid: testId,
+      mt,
+      mr,
+      mb,
+      ml,
+      version,
+      children
+    }
+  );
+}
+function GoabxSideMenuHeading({
+  meta,
+  testId,
+  icon,
+  children,
+  version = "2"
+}) {
+  return /* @__PURE__ */ jsxs("goa-side-menu-heading", { icon, testid: testId, version, children: [
+    children,
+    meta && /* @__PURE__ */ jsx("span", { slot: "meta", children: meta })
+  ] });
+}
+function GoabxTable({ onSort, version = "2", ...props }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const current = ref.current;
+    const sortListener = (e) => {
+      const detail = e.detail;
+      onSort == null ? void 0 : onSort(detail);
+    };
+    current.addEventListener("_sort", sortListener);
+    return () => {
+      current.removeEventListener("_sort", sortListener);
+    };
+  }, [ref, onSort]);
+  return /* @__PURE__ */ jsx(
+    "goa-table",
+    {
+      ref,
+      width: props.width,
+      variant: props.variant,
+      striped: props.striped ? "true" : void 0,
+      testid: props.testId,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      version,
+      children: /* @__PURE__ */ jsx("table", { style: { width: "100%" }, children: props.children })
+    }
+  );
+}
+function GoabxTableSortHeader({
+  children,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-table-sort-header", { ..._props, children });
+}
+function GoabxTab({ heading, disabled, slug, children }) {
+  return /* @__PURE__ */ jsxs(
+    "goa-tab",
+    {
+      slug,
+      disabled: disabled ? "true" : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      children: [
+        typeof heading !== "string" && /* @__PURE__ */ jsx("span", { slot: "heading", children: heading }),
+        children
+      ]
+    }
+  );
+}
+function GoabxTabs({
+  initialTab,
+  children,
+  testId,
+  onChange,
+  variant,
+  orientation
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    const element = ref.current;
+    if (element && onChange) {
+      const handler = (event) => {
+        const detail = event.detail;
+        onChange(detail);
+      };
+      element.addEventListener("_change", handler);
+      return () => {
+        element.removeEventListener("_change", handler);
+      };
+    }
+  }, [onChange]);
+  return /* @__PURE__ */ jsx(
+    "goa-tabs",
+    {
+      ref,
+      initialtab: initialTab,
+      testid: testId,
+      variant,
+      version: "2",
+      orientation,
+      children
+    }
+  );
+}
+function GoabxTextArea({
+  readOnly,
+  disabled,
+  error,
+  onChange,
+  onKeyPress,
+  onBlur,
+  version = "2",
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      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);
+    return () => {
+      current.removeEventListener("_change", changeListener);
+      current.removeEventListener("_keyPress", keypressListener);
+      current.removeEventListener("_blur", blurListener);
+    };
+  }, [el, onChange, onKeyPress, onBlur]);
+  return /* @__PURE__ */ jsx(
+    "goa-textarea",
+    {
+      ref: el,
+      readOnly: readOnly ? "true" : void 0,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      version,
+      ..._props
+    }
+  );
+}
 function GoabxWorkSideMenu({
   heading,
   url,
@@ -141,10 +1283,69 @@ function GoabxWorkSideMenuItem(props) {
     }
   );
 }
+function GoabxWorkSideMenuGroup(props) {
+  return /* @__PURE__ */ jsx(
+    "goa-work-side-menu-group",
+    {
+      heading: props.heading,
+      icon: props.icon,
+      open: props.open ? true : void 0,
+      testid: props.testId,
+      children: props.children
+    }
+  );
+}
 export {
-  G as GoabDrawer,
+  GoabxAppFooter,
+  GoabxAppFooterMetaSection,
+  GoabxAppFooterNavSection,
+  GoabxBadge,
+  GoabxButton,
+  GoabxCalendar,
+  GoabxCallout,
+  GoabxCheckbox,
+  GoabxCheckboxList,
+  GoabxDatePicker,
+  GoabxDrawer,
+  GoabxDropdown,
+  GoabxDropdownItem,
+  GoabxDropdownOption,
+  GoabxFileUploadCard,
+  GoabxFileUploadInput,
+  GoabxFilterChip,
+  GoabxFormItem,
+  GoabxInput,
+  GoabxInputDate,
+  GoabxInputDateTime,
+  GoabxInputEmail,
+  GoabxInputFile,
+  GoabxInputMonth,
+  GoabxInputNumber,
+  GoabxInputPassword,
+  GoabxInputRange,
+  GoabxInputSearch,
+  GoabxInputTel,
+  GoabxInputText,
+  GoabxInputTime,
+  GoabxInputUrl,
+  GoabxLink,
+  GoabxMenuAction,
+  GoabxMenuButton,
+  GoabxModal,
+  GoabxNotification,
+  GoabxPagination,
+  GoabxRadioGroup,
+  GoabxRadioItem,
+  GoabxSideMenu,
+  GoabxSideMenuGroup,
+  GoabxSideMenuHeading,
+  GoabxTab,
+  GoabxTable,
+  GoabxTableSortHeader,
+  GoabxTabs,
+  GoabxTextArea,
   GoabxWorkSideMenu,
-  GoabxWorkSideMenuItem,
-  ResizablePanel
+  GoabxWorkSideMenuGroup,
+  GoabxWorkSideMenuItem
 };
 //# sourceMappingURL=experimental.mjs.map