@entur/menu 5.2.1-beta.9 → 5.2.1

package/dist/menu.cjs.js

@@ -0,0 +1,820 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@entur/utils");
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const classNames = require("classnames");
+const icons = require("@entur/icons");
+const react = require("@floating-ui/react");
+const button = require("@entur/button");
+const tooltip = require("@entur/tooltip");
+const tokens = require("@entur/tokens");
+const a11y = require("@entur/a11y");
+const typography = require("@entur/typography");
+const expand = require("@entur/expand");
+const BreadcrumbNavigation = ({
+  "aria-label": ariaLabel = "Brødsmulesti",
+  children
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "eds-breadcrumbs", children: React.Children.map(children, (child, index) => {
+    return React.cloneElement(child, {
+      isCurrent: index + 1 === React.Children.count(children)
+    });
+  }) }) });
+};
+const defaultElement$1 = "a";
+const BreadcrumbItem = ({
+  className,
+  isCurrent,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement$1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("li", { className: classNames("eds-breadcrumb__item", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      Element,
+      {
+        "aria-current": isCurrent ? "page" : void 0,
+        className: classNames("eds-breadcrumb__link", {
+          "eds-breadcrumb__link--current": isCurrent
+        }),
+        ...rest
+      }
+    ) }),
+    !isCurrent && /* @__PURE__ */ jsxRuntime.jsx(
+      icons.RightArrowIcon,
+      {
+        className: "eds-breadcrumb__separator",
+        inline: true,
+        role: "presentation"
+      }
+    )
+  ] });
+};
+function useControllableProp({
+  prop,
+  updater = () => void 0,
+  defaultValue
+}) {
+  const [internalState, setInternalState] = React.useState(defaultValue);
+  React.useEffect(() => {
+    if (prop !== void 0) {
+      setInternalState(prop);
+    }
+  }, [prop]);
+  return prop === void 0 ? [internalState, setInternalState] : [prop, updater];
+}
+const CollapsibleSideNavigation = ({
+  className,
+  children,
+  size,
+  collapsed: collapsible,
+  onCollapseToggle,
+  collapsibleButtonPosition = "50%",
+  openSideMenuAriaLabel = "Åpne sidemeny",
+  closeSideMenuAriaLabel = "Lukk sidemeny",
+  ...rest
+}) => {
+  const [collapsedMenu, setCollapsedMenu] = useControllableProp({
+    prop: collapsible,
+    defaultValue: false,
+    updater: onCollapseToggle
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SideNavigationContext.Provider,
+    {
+      value: {
+        isCollapsed: collapsedMenu
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "ul",
+        {
+          className: classNames(
+            "eds-side-navigation",
+            { "eds-side-navigation--small": size === "small" },
+            { "eds-side-navigation--collapsed": collapsedMenu },
+            className
+          ),
+          ...rest,
+          children: [
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "eds-side-navigation__collapse-button",
+                onClick: () => setCollapsedMenu(!collapsedMenu),
+                style: { top: `${collapsibleButtonPosition}` },
+                children: collapsedMenu ? /* @__PURE__ */ jsxRuntime.jsx(icons.MenuIcon, { "aria-label": openSideMenuAriaLabel }) : /* @__PURE__ */ jsxRuntime.jsx(icons.LeftArrowIcon, { "aria-label": closeSideMenuAriaLabel })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const SideNavigationContext = React.createContext({
+  isCollapsed: false
+});
+const useSideNavigationContext = () => {
+  const context = React.useContext(SideNavigationContext);
+  if (!context) {
+    console.error(
+      "Error reading SideNavigationContext. Please contact maintainer of @entur/menu"
+    );
+  }
+  return context;
+};
+const SelectContext = React.createContext(
+  {}
+);
+const OverflowMenu = ({
+  children,
+  className,
+  button: button$1,
+  buttonIcon,
+  placement = "bottom-start",
+  "aria-label": ariaLabel = "åpne valgmeny",
+  ...rest
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [activeIndex, setActiveIndex] = React.useState(null);
+  const listRef = React.useRef([]);
+  const labelsRef = React.useRef([]);
+  const { refs, floatingStyles, context, elements, update } = react.useFloating({
+    placement: tooltip.standardisePlacement(
+      // check for left is added for backwards compatibility
+      rest.position === "left" ? "bottom-end" : placement
+    ),
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [
+      react.offset(tokens.space.extraSmall2),
+      react.flip(),
+      react.shift({ padding: tokens.space.extraSmall })
+    ]
+  });
+  React.useEffect(() => {
+    if (isOpen && elements.reference && elements.floating) {
+      const cleanup = react.autoUpdate(elements.reference, elements.floating, update);
+      return cleanup;
+    }
+  }, [isOpen, elements, update]);
+  const listNav = react.useListNavigation(context, {
+    listRef,
+    activeIndex,
+    onNavigate: setActiveIndex
+  });
+  const typeahead = react.useTypeahead(context, {
+    listRef: labelsRef,
+    activeIndex,
+    onMatch: (index) => isOpen && setActiveIndex(index)
+  });
+  const role = react.useRole(context, { role: "menu" });
+  const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions(
+    [listNav, typeahead, role]
+  );
+  const closeMenuAndReturnFocus = () => {
+    setIsOpen(false);
+    refs.reference.current?.focus?.();
+  };
+  utils.useOnClickOutside([refs.floating, refs.reference], () => setIsOpen(false));
+  utils.useOnEscape(refs.floating, closeMenuAndReturnFocus);
+  utils.useOnEscape(refs.reference, closeMenuAndReturnFocus);
+  const selectContext = React.useMemo(
+    () => ({
+      activeIndex,
+      getItemProps,
+      closeMenuAndReturnFocus
+    }),
+    [activeIndex, getItemProps, closeMenuAndReturnFocus]
+  );
+  const _buttonIcon = buttonIcon ?? /* @__PURE__ */ jsxRuntime.jsx(icons.VerticalDotsIcon, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    !button$1 ? /* @__PURE__ */ jsxRuntime.jsx(
+      button.IconButton,
+      {
+        ref: refs.setReference,
+        ...getReferenceProps({
+          onClick: () => setIsOpen(!isOpen),
+          className,
+          "aria-label": ariaLabel,
+          type: "button"
+        }),
+        ...rest,
+        children: _buttonIcon
+      }
+    ) : React.cloneElement(button$1, {
+      ref: refs.setReference,
+      ...getReferenceProps({
+        onClick: () => setIsOpen(!isOpen),
+        className,
+        "aria-label": ariaLabel,
+        type: "button"
+      }),
+      ...rest
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: selectContext, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: refs.setFloating,
+        style: { ...floatingStyles, display: isOpen ? "initial" : "none" },
+        ...getFloatingProps({
+          className: "eds-overflow-menu__menu-list"
+        }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef: listRef, labelsRef, children })
+      }
+    ) })
+  ] });
+};
+const OverflowMenuItem = ({
+  children,
+  className,
+  onSelect = () => void 0,
+  href,
+  disabled,
+  as,
+  ...rest
+}) => {
+  const { activeIndex, getItemProps, closeMenuAndReturnFocus } = React.useContext(SelectContext);
+  const { ref: listItemRef, index } = react.useListItem({
+    label: !disabled ? utils.getNodeText(children) : null
+  });
+  const isHighlighted = activeIndex === index;
+  const isLink = href !== void 0;
+  const Element = as ?? (isLink ? "a" : "button");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Element,
+    {
+      ref: listItemRef,
+      className: classNames(
+        "eds-overflow-menu__item",
+        {
+          "eds-overflow-menu__item--disabled": disabled,
+          "eds-overflow-menu__item--highlighted": isHighlighted
+        },
+        className
+      ),
+      role: "menuitem",
+      type: Element === "button" ? "button" : void 0,
+      "aria-disabled": disabled,
+      "aria-selected": isHighlighted,
+      ...getItemProps({
+        onClick: isLink || disabled ? void 0 : () => {
+          onSelect();
+          closeMenuAndReturnFocus();
+        },
+        href: disabled ? void 0 : href,
+        tabIndex: isHighlighted ? 0 : -1
+      }),
+      ...rest,
+      children
+    }
+  );
+};
+const OverflowMenuLink = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(OverflowMenuItem, { ...props });
+};
+const PaginationPage = ({
+  children,
+  className,
+  selected,
+  disabled,
+  onClick,
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    className: classNames(
+      "eds-pagination__controls__page",
+      { "eds-pagination__controls__page--selected": selected },
+      { "eds-pagination__controls__page--disabled": disabled },
+      className
+    ),
+    disabled: selected || disabled,
+    type: "button",
+    onClick,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    "aria-current": selected ? "page" : false,
+    children
+  }
+);
+const PaginationInput = ({
+  currentPage,
+  pageCount,
+  label = "Gå til side",
+  onPageChange
+}) => {
+  const [input, setInput] = React.useState(String(currentPage));
+  React.useEffect(() => {
+    setInput(String(currentPage));
+  }, [currentPage]);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    let pageNumber = Number(input);
+    if (pageNumber === currentPage) {
+      return;
+    }
+    if (Number.isNaN(pageNumber)) {
+      pageNumber = currentPage;
+      setInput(String(currentPage));
+      return;
+    }
+    if (pageNumber > pageCount) {
+      pageNumber = pageCount;
+      setInput(String(pageCount));
+    } else if (pageNumber < 1) {
+      pageNumber = 1;
+      setInput(String(1));
+    }
+    onPageChange(pageNumber);
+  };
+  const handleChange = (e) => {
+    setInput(e.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit, noValidate: true, "aria-label": "form", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "eds-pagination__controls__input__wrapper", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eds-pagination__controls__input__label", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        max: pageCount,
+        className: "eds-pagination__controls__input__field",
+        value: input,
+        onChange: handleChange
+      }
+    )
+  ] }) });
+};
+const Pagination = ({
+  className,
+  currentPage,
+  inputLabel,
+  onPageChange,
+  pageCount,
+  pageLabel = (pageNumber) => `Gå til side ${pageNumber}`,
+  previousPageLabel = "Gå til forrige side",
+  currentPageLabelForScreenreader = "Nåværende side:",
+  lastPageLabelForScreenreader = ", siste side",
+  showInput,
+  numberOfResults,
+  resultsPerPage,
+  resultsPerPageOptions = [10, 25, 50],
+  onResultsPerPageChange,
+  showNumberOfResultsLabel = "Vis",
+  nextPageLabel = "Gå til neste side",
+  showingResultsLabel = (minPage, maxPage, pageCount2) => `Viser resultat ${minPage}–${maxPage} av ${pageCount2}`,
+  changeNumberOfResultsLabelForScreenreader = `Viser ${resultsPerPage} resultater. Trykk for å endre antall. Åpner en flervalgsmeny.`,
+  hideNextButton = false,
+  hidePrevButton = false,
+  ...rest
+}) => {
+  const [listedEntries, setListedEntries] = React.useState([]);
+  const paginationId = utils.useRandomId("eds-pagination");
+  const isFirstPostSelected = currentPage === 1;
+  const isLastPostSelected = currentPage === pageCount;
+  const noEllipsis = pageCount <= 7;
+  const onlyLeadingEllipsis = !noEllipsis && currentPage < 5;
+  const onlyTrailingEllipsis = !noEllipsis && pageCount - currentPage <= 3;
+  React.useEffect(() => {
+    if (pageCount < 1) return;
+    if (noEllipsis) {
+      setListedEntries(
+        Array(pageCount).fill(null).map((_, i) => i + 1)
+      );
+    } else if (onlyLeadingEllipsis) {
+      setListedEntries([1, 2, 3, 4, 5, "…", pageCount]);
+    } else if (onlyTrailingEllipsis) {
+      setListedEntries([
+        1,
+        "…",
+        pageCount - 4,
+        pageCount - 3,
+        pageCount - 2,
+        pageCount - 1,
+        pageCount
+      ]);
+    } else {
+      setListedEntries([
+        1,
+        "…",
+        currentPage - 1,
+        currentPage,
+        currentPage + 1,
+        "…",
+        pageCount
+      ]);
+    }
+  }, [
+    noEllipsis,
+    onlyLeadingEllipsis,
+    onlyTrailingEllipsis,
+    currentPage,
+    pageCount
+  ]);
+  if (pageCount < 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      className: classNames("eds-pagination", className),
+      "aria-label": "Paginering",
+      ...rest,
+      children: [
+        resultsPerPage && numberOfResults && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-pagination__results", children: [
+          onResultsPerPageChange && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(typography.Label, { as: "p", "aria-hidden": "true", children: showNumberOfResultsLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              OverflowMenu,
+              {
+                className: "eds-pagination__results__change-number-of-results",
+                buttonIcon: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  resultsPerPage,
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    icons.DownArrowIcon,
+                    {
+                      className: "eds-pagination__results__change-number-of-results__arrow",
+                      "aria-hidden": "true"
+                    }
+                  )
+                ] }),
+                "aria-label": changeNumberOfResultsLabelForScreenreader,
+                placement: "bottom-end",
+                children: resultsPerPageOptions.map((option, key) => /* @__PURE__ */ jsxRuntime.jsx(
+                  OverflowMenuItem,
+                  {
+                    onSelect: () => onResultsPerPageChange(option),
+                    children: option
+                  },
+                  key
+                ))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(typography.Label, { as: "p", children: showingResultsLabel(
+            (currentPage - 1) * resultsPerPage + 1,
+            currentPage * resultsPerPage > numberOfResults ? numberOfResults : currentPage * resultsPerPage,
+            numberOfResults
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-pagination__controls", children: [
+          !hidePrevButton && /* @__PURE__ */ jsxRuntime.jsx(
+            PaginationPage,
+            {
+              onClick: () => onPageChange(currentPage - 1),
+              "aria-label": previousPageLabel,
+              "aria-describedby": paginationId,
+              disabled: isFirstPostSelected,
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.LeftArrowIcon, { "aria-hidden": "true" })
+            }
+          ),
+          listedEntries.map(
+            (entry, index) => entry === "…" ? /* @__PURE__ */ jsxRuntime.jsx(Ellipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ jsxRuntime.jsx(
+              PaginationPage,
+              {
+                selected: entry === currentPage,
+                onClick: () => onPageChange(entry),
+                "aria-label": `${pageLabel(entry)}${entry === pageCount ? lastPageLabelForScreenreader : ""}`,
+                "aria-describedby": entry !== currentPage ? paginationId : void 0,
+                children: entry
+              },
+              entry
+            )
+          ),
+          !hideNextButton && /* @__PURE__ */ jsxRuntime.jsx(
+            PaginationPage,
+            {
+              onClick: () => onPageChange(currentPage + 1),
+              "aria-label": nextPageLabel,
+              "aria-describedby": paginationId,
+              disabled: isLastPostSelected,
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.RightArrowIcon, { "aria-hidden": "true" })
+            }
+          ),
+          showInput && /* @__PURE__ */ jsxRuntime.jsx(
+            PaginationInput,
+            {
+              pageCount,
+              currentPage,
+              onPageChange,
+              label: inputLabel
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(a11y.VisuallyHidden, { id: paginationId, children: [
+          currentPageLabelForScreenreader,
+          " ",
+          currentPage
+        ] })
+      ]
+    }
+  );
+};
+const Ellipsis = () => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eds-pagination__controls__page__ellipsis", "aria-hidden": "true", children: "…" });
+const SideNavigation = ({
+  className,
+  children,
+  size = "medium",
+  ...rest
+}) => {
+  if (!children || !React.Children.count(children)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      className: classNames(
+        "eds-side-navigation",
+        { "eds-side-navigation--small": size === "small" },
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+};
+SideNavigation.__IS_ENTUR_MENU__ = true;
+const useShowDelayedLabel = (isCollapsed) => {
+  const [showLabel, setShowLabel] = React.useState(true);
+  const hideDelay = 50;
+  const showDelay = 200;
+  React.useEffect(() => {
+    if (isCollapsed) {
+      setTimeout(() => {
+        setShowLabel(false);
+      }, hideDelay);
+    }
+    if (!isCollapsed) {
+      setTimeout(() => {
+        setShowLabel(true);
+      }, showDelay);
+    }
+    return () => void 0;
+  }, [isCollapsed]);
+  return [showLabel];
+};
+function isActiveRecursively(child) {
+  if (!child.props) {
+    return false;
+  }
+  if (child.props.active) {
+    return true;
+  }
+  if (!child.props.children) {
+    return false;
+  }
+  return React.Children.toArray(child.props.children).some(
+    (child2) => isActiveRecursively(child2)
+  );
+}
+const defaultElementBaseItem = "a";
+const BaseSideNavigationItem = React.forwardRef(
+  ({
+    className,
+    active = false,
+    subMenu,
+    icon,
+    children,
+    as,
+    ...rest
+  }, ref) => {
+    const Element = as || defaultElementBaseItem;
+    const { isCollapsed } = useSideNavigationContext();
+    const [showLabel] = useShowDelayedLabel(isCollapsed);
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: classNames("eds-side-navigation__item", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Element,
+        {
+          className: classNames("eds-side-navigation__click-target", {
+            "eds-side-navigation__click-target--active": active
+          }),
+          "aria-label": isCollapsed ? children : void 0,
+          "aria-current": active ? "page" : void 0,
+          ref,
+          ...rest,
+          children: [
+            icon,
+            showLabel && children
+          ]
+        }
+      ),
+      subMenu
+    ] });
+  }
+);
+const DisabledSideNavigationItem = React.forwardRef(({ children, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  BaseSideNavigationItem,
+  {
+    as: "button",
+    disabled: true,
+    "aria-disabled": true,
+    ref,
+    type: "button",
+    ...rest,
+    children
+  }
+));
+const defaultElementItem = "a";
+const SideNavigationItem = React.forwardRef(
+  ({
+    active,
+    disabled,
+    children,
+    forceExpandSubMenus,
+    as,
+    ...rest
+  }, ref) => {
+    const Element = as || defaultElementItem;
+    const childrenArray = React.Children.toArray(children);
+    const subMenu = childrenArray.find(
+      (child) => child && child.type && child.type.__IS_ENTUR_MENU__
+    );
+    const label = subMenu ? childrenArray.filter((child) => child !== subMenu) : children;
+    if (disabled) {
+      return /* @__PURE__ */ jsxRuntime.jsx(DisabledSideNavigationItem, { ref, ...rest, children: label });
+    }
+    if (!subMenu) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        BaseSideNavigationItem,
+        {
+          as: Element,
+          active,
+          ref,
+          ...rest,
+          children: label
+        }
+      );
+    }
+    const isExpanded = forceExpandSubMenus || isActiveRecursively({ props: { children, active } });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      BaseSideNavigationItem,
+      {
+        active,
+        subMenu: isExpanded && subMenu,
+        "aria-expanded": isExpanded,
+        as: Element,
+        ref,
+        ...rest,
+        children: label
+      }
+    );
+  }
+);
+const SideNavigationGroup = ({
+  defaultOpen = false,
+  open,
+  onToggle,
+  className,
+  children,
+  title,
+  icon,
+  ...rest
+}) => {
+  const [isOpen, setOpen] = useControllableProp({
+    prop: open,
+    updater: onToggle,
+    defaultValue: defaultOpen
+  });
+  const { isCollapsed } = useSideNavigationContext();
+  const [showLabel] = useShowDelayedLabel(isCollapsed);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames("eds-side-navigation-group", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => setOpen(!isOpen),
+            type: "button",
+            className: "eds-side-navigation-group__trigger",
+            "aria-label": `${title}, utvidbar meny, ${isOpen ? "åpen" : "lukket"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eds-side-navigation-group__trigger-icon", children: icon }),
+                showLabel && title
+              ] }),
+              showLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                expand.ExpandArrow,
+                {
+                  open: isOpen,
+                  className: "eds-side-navigation-group__expand-icon"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          expand.BaseExpand,
+          {
+            className: "eds-side-navigation-group__expand-content",
+            open: isOpen,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+const Stepper = ({
+  activeIndex,
+  className,
+  interactive = false,
+  onStepClick,
+  showStepperIndex = true,
+  steps,
+  ariaLabelStep = "Steg",
+  ariaLabelOf = "av",
+  ariaLabelCompleted = "fullført",
+  ariaLabelSummary = `Stegindikator med ${steps.length} steg, du er på steg ${activeIndex + 1} ${steps[activeIndex]},`,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ol",
+    {
+      className: classNames("eds-stepper", className),
+      "aria-label": ariaLabelSummary,
+      ...rest,
+      children: steps.map((step, i) => {
+        const isCurrent = i === activeIndex;
+        const isInteractive = interactive && activeIndex > i;
+        const Element = isInteractive ? "button" : "div";
+        const isCompleted = activeIndex > i;
+        const currentStepSummary = `${ariaLabelStep} ${i + 1} ${ariaLabelOf} ${steps.length}, ${step} ${isCompleted ? `, ${ariaLabelCompleted}` : ""}`;
+        const props = isInteractive ? { onClick: () => onStepClick?.(i) } : {};
+        return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "eds-stepper__step__wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Element,
+          {
+            className: classNames(
+              "eds-stepper__step",
+              { "eds-stepper__step--active": isCurrent },
+              { "eds-stepper__step--completed": isCompleted },
+              { "eds-stepper__step--interactive": isInteractive }
+            ),
+            "aria-current": isCurrent ? "step" : void 0,
+            type: Element === "button" ? "button" : void 0,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-stepper__step__line", "aria-hidden": true }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "eds-stepper__step__label", "aria-hidden": true, children: [
+                showStepperIndex && i + 1 + ".",
+                " ",
+                step
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(a11y.VisuallyHidden, { children: currentStepSummary })
+            ]
+          }
+        ) }, step);
+      })
+    }
+  );
+};
+const defaultElement = "a";
+const TopNavigationItem = ({
+  active = false,
+  className,
+  as,
+  ...rest
+}) => {
+  const Element = as || defaultElement;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Element,
+    {
+      className: classNames([
+        "eds-top-navigation-item",
+        className,
+        { "eds-top-navigation-item--active": active }
+      ]),
+      ...rest
+    }
+  );
+};
+utils.warnAboutMissingStyles(
+  "menu",
+  "expand",
+  "icons",
+  "typography",
+  "button",
+  "layout",
+  "a11y"
+);
+exports.BreadcrumbItem = BreadcrumbItem;
+exports.BreadcrumbNavigation = BreadcrumbNavigation;
+exports.CollapsibleSideNavigation = CollapsibleSideNavigation;
+exports.OverflowMenu = OverflowMenu;
+exports.OverflowMenuItem = OverflowMenuItem;
+exports.OverflowMenuLink = OverflowMenuLink;
+exports.Pagination = Pagination;
+exports.SideNavigation = SideNavigation;
+exports.SideNavigationGroup = SideNavigationGroup;
+exports.SideNavigationItem = SideNavigationItem;
+exports.Stepper = Stepper;
+exports.TopNavigationItem = TopNavigationItem;
+exports.useSideNavigationContext = useSideNavigationContext;
+//# sourceMappingURL=menu.cjs.js.map