"use client";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { Collapsible } from "@base-ui-components/react/collapsible";
import { Popover } from "@base-ui-components/react/popover";
import { inertValue } from "@react-aria/utils";
import { MotionConfig, motion, AnimatePresence, useIsPresent } from "motion/react";
import { forwardRef, useState, useRef, useEffect, createContext, useContext, useId } from "react";
import flattenChildren from "react-keyed-flatten-children";
import { ExperimentalButton } from "./Button.js";
import { ExperimentalNavLink } from "./NavLink.js";
import { ExperimentalMegaMenuTriggerContext } from "./shared.js";
import { ExperimentalTag } from "./Tag.js";
import { useCSSProp } from "./tailwind/useCSSProp.js";
import { useHover } from "./hooks/useHover.js";
import { CaretRight } from "../icons/CaretRight.js";
import { CaretLeft } from "../icons/CaretLeft.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { easings } from "./tailwind/theme.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { useI18n } from "../i18n/useI18n.js";
import { ButtonOrLink } from "../atoms/ButtonOrLink/ButtonOrLink.js";
import { ArrowUpRightInteractive } from "../icons/ArrowUpRightInteractive.js";
const DURATION_IN_MS = 300;
const DURATION = DURATION_IN_MS / 1e3;
const ExperimentalMegaMenuContext = createContext({
  depth: 0,
  index: 0,
  selectedIndexInFull: 0,
  setSelectedIndexInFull: () => {
  },
  selectedIndexInCompact: null,
  setSelectedIndexInCompact: () => {
  }
});
const ExperimentalMegaMenuRoot = forwardRef(
  ({
    title,
    trigger,
    triggerMode,
    defaultOpen,
    layout,
    hideTitles = !title,
    className,
    style,
    children,
    ...props
  }, forwardedRef) => {
    const [propsPolyfillForwardedRef, propsPolyfillAttributes] = useCSSPropsPolyfill(
      "mega-menu",
      { layout },
      { ref: forwardedRef }
    );
    const [selectedIndexInFull, setSelectedIndexInFull] = useState(0);
    const [selectedIndexInCompact, setSelectedIndexInCompact] = useState(null);
    const childrenArray = children ? flattenChildren(children) : [];
    const motionRef = useRef(null);
    const motionRefBorderRadius = useRef();
    useEffect(() => {
      if (!motionRef.current) return;
      motionRefBorderRadius.current = getComputedStyle(motionRef.current).borderRadius;
    }, []);
    return /* @__PURE__ */ jsx(MaybePopoverOrCollapsible, { trigger, triggerMode, defaultOpen, children: /* @__PURE__ */ jsx(MotionConfig, { transition: { duration: DURATION, ease: easings.out }, children: /* @__PURE__ */ jsx(
      "div",
      {
        ref: propsPolyfillForwardedRef,
        "data-selected-index-in-compact": selectedIndexInCompact ?? void 0,
        "data-hide-titles": hideTitles || void 0,
        className: classNames([
          `group/mega-menu gds-mega-menu z-10 flex
              -:[--gds-mega-menu-border-width:theme(spacing.px)]
              -:[--gds-mega-menu-border:theme(colors.space-1400)]
              -:[--gds-mega-menu-column-max-width:theme(spacing.74)]
              -:[--gds-mega-menu-column-min-width:theme(spacing.60)]
              -:[--gds-mega-menu-radius:theme(borderRadius.8)]`,
          className
        ]),
        ...getCSSPropsAttributes("mega-menu", { layout }, style),
        ...propsPolyfillAttributes,
        ...props,
        children: /* @__PURE__ */ jsxs(
          motion.div,
          {
            ref: motionRef,
            layout: true,
            className: `
                flex grow overflow-clip rounded-[var(--gds-mega-menu-radius)] border-[var(--gds-mega-menu-border)] [border-width:var(--gds-mega-menu-border-width)]
                @prop-layout-compact/mega-menu:max-h-[var(--available-height)]
                @prop-layout-compact/mega-menu:w-[var(--gds-mega-menu-column-max-width)]
                @prop-layout-compact/mega-menu:overflow-y-auto
                @prop-layout-compact/mega-menu:bg-space-1600
                @prop-layout-full/mega-menu:bg-space-1800
              `,
            style: { borderRadius: motionRefBorderRadius.current },
            children: [
              /* @__PURE__ */ jsxs(
                motion.div,
                {
                  layout: true,
                  className: `
                  transition-[visibility] duration-300
                  @prop-layout-compact/mega-menu:w-full
                  @prop-layout-compact/mega-menu:group-data-[selected-index-in-compact]/mega-menu:invisible
                  @prop-layout-compact/mega-menu:group-data-[selected-index-in-compact]/mega-menu:absolute
                  @prop-layout-compact/mega-menu:group-data-[selected-index-in-compact]/mega-menu:end-full
                  @prop-layout-compact/mega-menu:group-data-[selected-index-in-compact]/mega-menu:top-0
                  @prop-layout-full/mega-menu:max-h-[var(--available-height)]
                  @prop-layout-full/mega-menu:min-w-[var(--gds-mega-menu-column-min-width)]
                  @prop-layout-full/mega-menu:max-w-[var(--gds-mega-menu-column-max-width)]
                  @prop-layout-full/mega-menu:overflow-y-auto
                  @prop-layout-full/mega-menu:overflow-x-clip
                  @prop-layout-full/mega-menu:bg-space-1600
                  @prop-layout-full/mega-menu:scrollbar-thin
                `,
                  children: [
                    /* @__PURE__ */ jsx(
                      motion.div,
                      {
                        layout: true,
                        className: "text-c10 px-6 pb-2 pt-4 text-space-500 group-data-[hide-titles]/mega-menu:sr-only",
                        children: title
                      }
                    ),
                    /* @__PURE__ */ jsx(motion.div, { layout: true, className: "group/mega-menu-items flex flex-col", children: childrenArray.map((child, childIndex) => /* @__PURE__ */ jsx(
                      ExperimentalMegaMenuContext.Provider,
                      {
                        value: {
                          depth: 0,
                          index: childIndex,
                          selectedIndexInFull,
                          setSelectedIndexInFull,
                          selectedIndexInCompact,
                          setSelectedIndexInCompact
                        },
                        children: child
                      },
                      childIndex
                    )) })
                  ]
                }
              ),
              /* @__PURE__ */ jsx(motion.div, { layout: true, className: "-ms-1 flex grow flex-col *:flex-1", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(MaybeInert, { children: /* @__PURE__ */ jsx(
                motion.div,
                {
                  layout: true,
                  initial: { opacity: 0, x: -4 },
                  animate: {
                    opacity: 1,
                    x: 0,
                    transition: { delay: DURATION / 2, duration: DURATION, ease: easings.out }
                  },
                  exit: {
                    opacity: 0,
                    x: 4,
                    transition: { duration: DURATION / 2, ease: easings.out }
                  },
                  className: "flex flex-col ps-1 *:flex-1",
                  children: childrenArray.map((child, childIndex) => /* @__PURE__ */ jsx(
                    ExperimentalMegaMenuContext.Provider,
                    {
                      value: {
                        depth: 1,
                        index: childIndex,
                        selectedIndexInFull,
                        setSelectedIndexInFull,
                        selectedIndexInCompact,
                        setSelectedIndexInCompact
                      },
                      children: child
                    },
                    childIndex
                  ))
                }
              ) }, `${selectedIndexInFull}-${selectedIndexInCompact}`) }) })
            ]
          }
        )
      }
    ) }) });
  }
);
ExperimentalMegaMenuRoot.displayName = "ExperimentalMegaMenu";
const defaultGroupConfig = {
  openMultiple: true,
  triggerMode: "popoverOnHover"
};
const ExperimentalMegaMenuGroupContext = createContext({
  config: {},
  lastTriggeredId: null,
  setLastTriggeredId: () => {
  }
});
const ExperimentalMegaMenuGroup = ({ children, ...config }) => {
  const [lastTriggeredId, setLastTriggeredId] = useState(null);
  return /* @__PURE__ */ jsx(ExperimentalMegaMenuGroupContext.Provider, { value: { config, lastTriggeredId, setLastTriggeredId }, children });
};
ExperimentalMegaMenuGroup.displayName = "ExperimentalMegaMenu.Group";
const MaybePopoverOrCollapsible = ({
  trigger,
  triggerMode: passedTriggerMode,
  defaultOpen = false,
  children
}) => {
  const groupContext = useContext(ExperimentalMegaMenuGroupContext);
  const config = { ...defaultGroupConfig, ...groupContext.config };
  const triggerMode = passedTriggerMode ?? config.triggerMode;
  const uniqueId = useId();
  const [innerOpen, setInnerOpen] = useState(triggerMode === "expandOnClick" ? defaultOpen : false);
  const onOpenChange = (open2) => {
    setInnerOpen(open2);
    if (open2) {
      groupContext.setLastTriggeredId(uniqueId);
    }
  };
  const open = innerOpen && (config.openMultiple || groupContext.lastTriggeredId === null || groupContext.lastTriggeredId === uniqueId);
  if (!trigger) {
    return children;
  }
  switch (triggerMode) {
    case "popoverOnHover":
    case "popoverOnClick":
      return /* @__PURE__ */ jsx(Popover.Root, { open, onOpenChange, delay: 20, openOnHover: triggerMode === "popoverOnHover", children: /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx(ExperimentalMegaMenuTriggerContext.Provider, { value: {}, children: /* @__PURE__ */ jsx(Popover.Trigger, { render: trigger }) }),
        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
          Popover.Positioner,
          {
            align: "start",
            alignOffset: -24,
            sideOffset: 16,
            collisionPadding: 8,
            collisionAvoidance: { align: "shift", fallbackAxisSide: "none" },
            children: /* @__PURE__ */ jsx(
              Popover.Popup,
              {
                className: `
                    max-w-[var(--available-width)] origin-[var(--transform-origin)] transition outline-none
                    data-[ending-style]:scale-95
                    data-[starting-style]:scale-95
                    data-[ending-style]:opacity-0
                    data-[starting-style]:opacity-0
                  `,
                children
              }
            )
          }
        ) })
      ] }) });
    case "expandOnClick":
      return /* @__PURE__ */ jsxs(Collapsible.Root, { open, onOpenChange, children: [
        /* @__PURE__ */ jsx(ExperimentalMegaMenuTriggerContext.Provider, { value: {}, children: /* @__PURE__ */ jsx(Collapsible.Trigger, { render: trigger }) }),
        /* @__PURE__ */ jsx(
          Collapsible.Panel,
          {
            className: `
              transition-all duration-300
              data-[ending-style]:h-0
              data-[starting-style]:h-0
              data-[ending-style]:opacity-0
              data-[starting-style]:opacity-0
            `,
            children
          }
        )
      ] });
  }
};
const MaybeInert = forwardRef(
  ({ className, children, ...props }, forwardedRef) => {
    const isPresent = useIsPresent();
    return /* @__PURE__ */ jsx(
      motion.div,
      {
        layout: true,
        ref: forwardedRef,
        inert: inertValue(!isPresent),
        className: classNames([
          `flex flex-col *:flex-1 @prop-layout-full/mega-menu:!w-max
          +:rtl:!left-auto
          +:rtl:!right-0`,
          className
        ]),
        ...props,
        children
      }
    );
  }
);
MaybeInert.displayName = "ExperimentalMegaMenu._MaybeInert";
const ExperimentalMegaMenuItemContext = createContext(null);
const ExperimentalMegaMenuItem = forwardRef(
  ({ title, description, icon: passedIcon, tag, className, children, ...props }, forwardedRef) => {
    const { t } = useI18n();
    const [getLayoutForwardedRef, getLayout] = useCSSProp("mega-menu", "layout", { ref: forwardedRef });
    const hasChildren = Boolean(children);
    const megaMenuContext = useContext(ExperimentalMegaMenuContext);
    const megaMenuItemContext = useContext(ExperimentalMegaMenuItemContext);
    const selectedInFull = megaMenuContext.index === megaMenuContext.selectedIndexInFull;
    const selectedInCompact = megaMenuContext.index === megaMenuContext.selectedIndexInCompact;
    const setSelected = () => {
      if (getLayout() === "full") {
        megaMenuContext.setSelectedIndexInFull(megaMenuContext.index);
      } else if (hasChildren) {
        megaMenuContext.setSelectedIndexInCompact(megaMenuContext.index);
      }
    };
    const { props: hoverProps } = useHover({
      delay: 200,
      earlyTriggerOnStill: true,
      onHoverChange: (isHovered) => {
        if (getLayout() === "full" && isHovered) {
          setSelected();
        }
      }
    });
    const icon = passedIcon && typeof passedIcon === "object" && "icon" in passedIcon ? passedIcon : {
      icon: passedIcon
    };
    if (megaMenuContext.depth === 0 || (megaMenuItemContext == null ? void 0 : megaMenuItemContext.section) === "subitems") {
      return /* @__PURE__ */ jsx(
        "div",
        {
          "data-depth": megaMenuContext.depth,
          "data-index": megaMenuContext.index,
          "data-has-children": hasChildren || void 0,
          className: classNames(["gds-mega-menu-item group/mega-menu-item", className]),
          children: /* @__PURE__ */ jsx(
            ButtonOrLink,
            {
              ref: getLayoutForwardedRef,
              role: !props.href && hasChildren ? "tab" : void 0,
              disabled: !props.href && !hasChildren,
              selected: getLayout() !== "compact" && selectedInFull && hasChildren,
              className: `
              group/mega-menu-item-ref flex w-full items-center gap-2 px-6 py-5 outline-none
              group-data-[depth=0]/mega-menu-item:group-has-data-[has-children]/mega-menu-items:gap-3
              group-not-has-data-[has-children]/mega-menu-items:group-not-first/mega-menu-item:pt-4
              group-not-has-data-[has-children]/mega-menu-items:group-not-last/mega-menu-item:pb-4
              @prop-layout-full/mega-menu:is-[button]:cursor-default
            `,
              ...props,
              onMouseEnter: (event) => {
                var _a;
                (_a = props.onMouseEnter) == null ? void 0 : _a.call(props, event);
                if (getLayout() === "full") {
                  hoverProps.onMouseEnter(event);
                }
              },
              onMouseMove: (event) => {
                var _a;
                (_a = props.onMouseMove) == null ? void 0 : _a.call(props, event);
                if (getLayout() === "full") {
                  hoverProps.onMouseMove(event);
                }
              },
              onMouseLeave: (event) => {
                var _a;
                (_a = props.onMouseLeave) == null ? void 0 : _a.call(props, event);
                if (getLayout() === "full") {
                  hoverProps.onMouseLeave(event);
                }
              },
              onFocus: (event) => {
                var _a;
                (_a = props.onFocus) == null ? void 0 : _a.call(props, event);
                if (getLayout() === "full") {
                  setSelected();
                }
              },
              onKeyDown: (event) => {
                var _a, _b, _c;
                (_a = props.onKeyDown) == null ? void 0 : _a.call(props, event);
                if (getLayout() === "full") {
                  const getItems = (targetDepth, getButtonOrLinkElement = false) => {
                    var _a2;
                    return Array.from(
                      ((_a2 = event.currentTarget.closest(".gds-mega-menu")) == null ? void 0 : _a2.querySelectorAll(
                        `.gds-mega-menu-item[data-depth="${targetDepth}"]${targetDepth === 1 ? `[data-index="${megaMenuContext.index}"]` : ""}:not([inert] *)${getButtonOrLinkElement ? " :is(button, a)" : ""}`
                      )) ?? []
                    );
                  };
                  if (event.key === "ArrowUp" || event.key === "ArrowDown") {
                    event.preventDefault();
                    const items = getItems(megaMenuContext.depth);
                    if (!items.length) return;
                    const currentItem = event.currentTarget.closest(".gds-mega-menu-item");
                    const currentIndex = items.indexOf(currentItem);
                    const nextIndex = currentIndex + (event.key === "ArrowUp" ? -1 : 1);
                    if (nextIndex >= 0 && nextIndex < items.length) {
                      const nextButtonOrLink = (_b = items[nextIndex]) == null ? void 0 : _b.querySelector("button, a");
                      nextButtonOrLink == null ? void 0 : nextButtonOrLink.focus();
                    }
                  }
                  if (event.key === "ArrowLeft" && megaMenuContext.depth === 1 || event.key === "ArrowRight" && megaMenuContext.depth === 0 || event.key === "Tab" && (megaMenuContext.depth === 0 && !event.shiftKey || megaMenuContext.depth === 1 && event.shiftKey)) {
                    if (event.key !== "Tab") event.preventDefault();
                    const targetDepth = megaMenuContext.depth === 0 ? 1 : 0;
                    const items = getItems(targetDepth);
                    if (!items.length) return;
                    if (event.key === "Tab") event.preventDefault();
                    const buttonOrLink = (_c = targetDepth === 1 ? items[0] : items[megaMenuContext.selectedIndexInFull]) == null ? void 0 : _c.querySelector("button, a");
                    buttonOrLink == null ? void 0 : buttonOrLink.focus();
                  }
                  if (event.key === "Tab" && (megaMenuContext.depth === 0 && event.shiftKey || megaMenuContext.depth === 1 && !event.shiftKey)) {
                    const buttonsOrLinks = getItems(megaMenuContext.depth, true);
                    if (!buttonsOrLinks.length) return;
                    const originalTabIndices = buttonsOrLinks.map((buttonOrLink) => ({
                      buttonOrLink,
                      tabIndex: buttonOrLink.getAttribute("tabindex")
                    }));
                    originalTabIndices.forEach(({ buttonOrLink }) => buttonOrLink.setAttribute("tabindex", "-1"));
                    setTimeout(() => {
                      originalTabIndices.forEach(({ buttonOrLink, tabIndex }) => {
                        if (tabIndex === null) {
                          buttonOrLink.removeAttribute("tabindex");
                        } else {
                          buttonOrLink.setAttribute("tabindex", tabIndex);
                        }
                      });
                    }, 0);
                  }
                }
              },
              onClick: (event) => {
                var _a;
                (_a = props.onClick) == null ? void 0 : _a.call(props, event);
                if (getLayout() === "compact") {
                  setSelected();
                }
              },
              children: ({ target }) => /* @__PURE__ */ jsxs(Fragment, { children: [
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: `
                    absolute inset-2 rounded-6 -outline-offset-1 transition
                    group-hocus-visible/mega-menu-item-ref:bg-space-1500
                    group-focus-visible/mega-menu-item-ref:outline-focus
                    group-not-has-data-[has-children]/mega-menu-items:group-not-first/mega-menu-item:top-1
                    group-not-has-data-[has-children]/mega-menu-items:group-not-last/mega-menu-item:bottom-1
                    @prop-layout-full/mega-menu:group-data-[depth=0]/mega-menu-item:group-data-[has-children]/mega-menu-item:inset-0
                    @prop-layout-full/mega-menu:group-data-[depth=0]/mega-menu-item:group-data-[has-children]/mega-menu-item:rounded-none
                    @prop-layout-full/mega-menu:group-data-[hide-titles]/mega-menu:group-data-[depth=0]/mega-menu-item:group-data-[has-children]/mega-menu-item:group-first/mega-menu-item:rounded-ss-[calc(var(--gds-mega-menu-radius)-1px)]
                    @prop-layout-full/mega-menu:group-data-[depth=0]/mega-menu-item:group-hocus-visible/mega-menu-item-ref:bg-space-1800
                    @prop-layout-full/mega-menu:group-data-[depth=0]/mega-menu-item:group-checked/mega-menu-item-ref:group-not-hover/mega-menu-items:bg-space-1800
                    @prop-layout-full/mega-menu:group-data-[depth=1]/mega-menu-item:group-checked/mega-menu-item-ref:group-not-hover/mega-menu-items:bg-space-1500
                  `
                  }
                ),
                icon.icon ? /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: `
                      flex shrink-0 items-center justify-center
                      -:group-data-[depth=0]/mega-menu-item:group-has-data-[has-children]/mega-menu-items:size-8
                      -:group-data-[depth=0]/mega-menu-item:group-has-data-[has-children]/mega-menu-items:rounded-4
                      -:group-data-[depth=0]/mega-menu-item:group-has-data-[has-children]/mega-menu-items:bg-space-1300
                      nested-icon:default-size-4
                      ${icon.containerClassName ?? ""}
                    `,
                    children: icon.icon
                  }
                ) : null,
                /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
                  /* @__PURE__ */ jsxs(
                    "span",
                    {
                      className: `
                      flex items-center gap-2
                      nested-tag:shrink-0
                      nested-tag:default-size-small
                      nested-tag:default-variant-space
                    `,
                      children: [
                        /* @__PURE__ */ jsx("span", { className: "text-p14 leading-5 text-white", children: title }),
                        tag ? typeof tag === "string" ? /* @__PURE__ */ jsx(ExperimentalTag, { children: tag }) : tag : null,
                        target === "_blank" ? /* @__PURE__ */ jsx(ArrowUpRightInteractive, { size: 4, hiddenByDefault: true, className: "ms-auto" }) : null
                      ]
                    }
                  ),
                  description ? /* @__PURE__ */ jsx("span", { className: "text-p12 block text-space-700", children: description }) : null
                ] }),
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: `
                    hidden shrink-0
                    @prop-layout-compact/mega-menu:group-data-[depth=0]/mega-menu-item:group-data-[has-children]/mega-menu-item:block
                  `,
                    children: /* @__PURE__ */ jsx(CaretRight, { alt: "", size: 4 })
                  }
                )
              ] })
            }
          )
        }
      );
    }
    if (hasChildren) {
      return /* @__PURE__ */ jsx(
        "div",
        {
          "data-selected-in-full": selectedInFull || void 0,
          "data-selected-in-compact": selectedInCompact || void 0,
          className: `
            @prop-layout-compact/mega-menu:not-data-[selected-in-compact]:hidden
            @prop-layout-full/mega-menu:max-h-[var(--available-height)]
            @prop-layout-full/mega-menu:overflow-y-auto
            @prop-layout-full/mega-menu:overflow-x-clip
            @prop-layout-full/mega-menu:scrollbar-thin
            @prop-layout-full/mega-menu:not-data-[selected-in-full]:hidden
          `,
          children: /* @__PURE__ */ jsxs("div", { className: "flex min-h-full @prop-layout-compact/mega-menu:flex-col", children: [
            /* @__PURE__ */ jsxs(
              "div",
              {
                className: `
                @prop-layout-full/mega-menu:min-w-[var(--gds-mega-menu-column-min-width)]
                @prop-layout-full/mega-menu:max-w-[var(--gds-mega-menu-column-max-width)]
              `,
                children: [
                  /* @__PURE__ */ jsx(
                    "div",
                    {
                      className: `
                  text-c10 px-6 pb-2 pt-4 text-space-500
                  @prop-layout-full/mega-menu:group-data-[hide-titles]/mega-menu:sr-only
                `,
                      children: title
                    }
                  ),
                  /* @__PURE__ */ jsx("div", { className: "group/mega-menu-items flex flex-col", children: /* @__PURE__ */ jsx(ExperimentalMegaMenuItemContext.Provider, { value: { section: "subitems" }, children }) })
                ]
              }
            ),
            /* @__PURE__ */ jsx(ExperimentalMegaMenuItemContext.Provider, { value: { section: "asides" }, children }),
            /* @__PURE__ */ jsx("div", { className: "absolute start-1 top-3.5 @prop-layout-full/mega-menu:hidden", children: /* @__PURE__ */ jsx(ExperimentalButton, { variant: "naked", onClick: () => megaMenuContext.setSelectedIndexInCompact(null), children: /* @__PURE__ */ jsx(CaretLeft, { alt: t("components.megaMenu.goBack") }) }) })
          ] })
        }
      );
    }
    return null;
  }
);
ExperimentalMegaMenuItem.displayName = "ExperimentalMegaMenu.Item";
const ExperimentalMegaMenuAside = forwardRef(
  ({ title, children, className, ...props }, forwardedRef) => {
    const megaMenuItemContext = useContext(ExperimentalMegaMenuItemContext);
    if ((megaMenuItemContext == null ? void 0 : megaMenuItemContext.section) !== "asides") return null;
    return /* @__PURE__ */ jsxs(
      "aside",
      {
        ref: forwardedRef,
        className: classNames([
          `gds-mega-menu-aside flex flex-col px-6 py-5
          -:@prop-layout-full/mega-menu:min-w-[var(--gds-mega-menu-column-min-width)]
          -:@prop-layout-full/mega-menu:max-w-[var(--gds-mega-menu-column-max-width)]`,
          className
        ]),
        ...props,
        children: [
          /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 start-0 w-px bg-[var(--gds-mega-menu-border)] @prop-layout-compact/mega-menu:hidden" }),
          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-px bg-[var(--gds-mega-menu-border)] @prop-layout-full/mega-menu:hidden" }),
          title ? /* @__PURE__ */ jsx("div", { className: "text-c10 mb-4 text-space-500 group-data-[hide-titles]/mega-menu:sr-only", children: title }) : null,
          /* @__PURE__ */ jsx(ExperimentalNavLink.Group, { className: "flex flex-col gap-4 nested-nav-link:default-variant-secondary", children })
        ]
      }
    );
  }
);
ExperimentalMegaMenuAside.displayName = "ExperimentalMegaMenu.Aside";
export {
  ExperimentalMegaMenuAside,
  ExperimentalMegaMenuGroup,
  ExperimentalMegaMenuItem,
  ExperimentalMegaMenuRoot
};
