@reykjavik/hanna-react 0.10.53

package/lib/IslandPageBlock.cjs

@@ -0,0 +1,49 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var IslandPageBlock_exports = {};
+__export(IslandPageBlock_exports, {
+  default: () => IslandPageBlock_default
+});
+module.exports = __toCommonJS(IslandPageBlock_exports);
+var import_react = __toESM(require("react"));
+var import_assets = require("@reykjavik/hanna-utils/assets");
+var import_Block = __toESM(require("./_abstract/_Block"));
+var import_constants = require("./constants");
+const backgrounds = {
+  none: void 0,
+  gray: "gray",
+  secondary: "secondary"
+};
+const IslandPageBlock = (props) => {
+  const { title, summary, buttons, illustration, image, align, background, startSeen } = props;
+  const alignment = align && import_constants.aligns[align] ? align : "right";
+  const bg = backgrounds[background || "none"];
+  return /* @__PURE__ */ import_react.default.createElement(import_Block.default, {
+    bem: "IslandPageBlock",
+    modifier: ["align--" + alignment, bg && "background--" + bg],
+    content: { title, summary, buttons },
+    image: illustration ? { src: (0, import_assets.getIllustrationUrl)(illustration) } : image || {},
+    startSeen
+  });
+};
+var IslandPageBlock_default = IslandPageBlock;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/IslandPageBlock.mjs

@@ -0,0 +1,25 @@
+import React from "react";
+import { getIllustrationUrl } from "@reykjavik/hanna-utils/assets";
+import Block from "./_abstract/_Block";
+import { aligns } from "./constants";
+const backgrounds = {
+  none: void 0,
+  gray: "gray",
+  secondary: "secondary"
+};
+const IslandPageBlock = (props) => {
+  const { title, summary, buttons, illustration, image, align, background, startSeen } = props;
+  const alignment = align && aligns[align] ? align : "right";
+  const bg = backgrounds[background || "none"];
+  return /* @__PURE__ */ React.createElement(Block, {
+    bem: "IslandPageBlock",
+    modifier: ["align--" + alignment, bg && "background--" + bg],
+    content: { title, summary, buttons },
+    image: illustration ? { src: getIllustrationUrl(illustration) } : image || {},
+    startSeen
+  });
+};
+var IslandPageBlock_default = IslandPageBlock;
+export {
+  IslandPageBlock_default as default
+};

package/lib/LabeledTextBlock.cjs

@@ -0,0 +1,60 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var LabeledTextBlock_exports = {};
+__export(LabeledTextBlock_exports, {
+  default: () => LabeledTextBlock_default
+});
+module.exports = __toCommonJS(LabeledTextBlock_exports);
+var import_react = __toESM(require("react"));
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_seenEffect = require("./utils/seenEffect");
+var import_ButtonTertiary = __toESM(require("./ButtonTertiary"));
+const LabeledTextBlock = (props) => {
+  const { label, summary, wide, buttons = [], startSeen } = props;
+  const [ref] = (0, import_seenEffect.useSeenEffect)(startSeen);
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    className: (0, import_getBemClass.default)("LabeledTextBlock", wide && "wide"),
+    ref
+  }, /* @__PURE__ */ import_react.default.createElement("h2", {
+    className: "LabeledTextBlock__label"
+  }, label), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "LabeledTextBlock__summary"
+  }, summary, buttons.map((button, i) => /* @__PURE__ */ import_react.default.createElement(import_ButtonTertiary.default, __spreadValues({
+    key: i
+  }, button)))));
+};
+var LabeledTextBlock_default = LabeledTextBlock;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/LabeledTextBlock.mjs

@@ -0,0 +1,38 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import React from "react";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+import { useSeenEffect } from "./utils/seenEffect";
+import ButtonTertiary from "./ButtonTertiary";
+const LabeledTextBlock = (props) => {
+  const { label, summary, wide, buttons = [], startSeen } = props;
+  const [ref] = useSeenEffect(startSeen);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: getBemClass("LabeledTextBlock", wide && "wide"),
+    ref
+  }, /* @__PURE__ */ React.createElement("h2", {
+    className: "LabeledTextBlock__label"
+  }, label), /* @__PURE__ */ React.createElement("div", {
+    className: "LabeledTextBlock__summary"
+  }, summary, buttons.map((button, i) => /* @__PURE__ */ React.createElement(ButtonTertiary, __spreadValues({
+    key: i
+  }, button)))));
+};
+var LabeledTextBlock_default = LabeledTextBlock;
+export {
+  LabeledTextBlock_default as default
+};

package/lib/Layout.cjs

@@ -0,0 +1,113 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Layout_exports = {};
+__export(Layout_exports, {
+  default: () => Layout_default,
+  defaultLayoutTexts: () => defaultLayoutTexts
+});
+module.exports = __toCommonJS(Layout_exports);
+var import_react = __toESM(require("react"));
+var import_hooks = require("@hugsmidjan/react/hooks");
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_assets = require("@reykjavik/hanna-utils/assets");
+var import_i18n = require("@reykjavik/hanna-utils/i18n");
+var import_Image = __toESM(require("./_abstract/Image"));
+var import_Link = require("./_abstract/Link");
+var import_useMenuToggling = require("./utils/useMenuToggling");
+var import_useScrollbarWidthCSSVar = require("./utils/useScrollbarWidthCSSVar");
+const defaultLayoutTexts = {
+  is: {
+    lang: "is",
+    skipLinkLabel: "Valmynd",
+    closeMenuLabel: "Loka",
+    closeMenuLabelLong: "Loka valmynd"
+  },
+  en: {
+    lang: "en",
+    skipLinkLabel: "Skip to navigation",
+    closeMenuLabel: "Close",
+    closeMenuLabelLong: "Close menu"
+  }
+};
+const Layout = (props) => {
+  (0, import_useScrollbarWidthCSSVar.useScrollbarWidthCSSVar)();
+  const {
+    ssr,
+    globalAlerts,
+    mainChildren,
+    navChildren,
+    footerChildren,
+    colorTheme,
+    children,
+    siteName = "Reykjav\xEDk",
+    logoLink = "/"
+  } = props;
+  const { isMenuActive, closeMenu, toggleMenu } = (0, import_useMenuToggling.useMenuToggling)(ssr !== "ssr-only");
+  const isBrowser = (0, import_hooks.useIsBrowserSide)();
+  const txt = (0, import_i18n.getTexts)(props, defaultLayoutTexts);
+  return /* @__PURE__ */ import_react.default.createElement("div", {
+    className: (0, import_getBemClass.default)("Layout", props.modifier),
+    "data-sprinkled": isBrowser,
+    "data-color-theme": colorTheme
+  }, globalAlerts && /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "Layout__alerts",
+    role: "alert"
+  }, globalAlerts), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "Layout__content"
+  }, /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "Layout__header",
+    role: "banner"
+  }, /* @__PURE__ */ import_react.default.createElement(import_Link.Link, {
+    className: "Layout__header__logo",
+    href: logoLink
+  }, " ", /* @__PURE__ */ import_react.default.createElement(import_Image.default, {
+    inline: true,
+    src: (0, import_assets.getAssetUrl)("reykjavik-logo.svg")
+  }), " ", siteName, " "), " ", navChildren && /* @__PURE__ */ import_react.default.createElement(import_Link.Link, {
+    className: "Layout__header__skiplink",
+    href: "#pagenav",
+    onClick: isMenuActive && ((e) => {
+      e.preventDefault();
+      toggleMenu();
+    }),
+    "aria-label": txt.skipLinkLabel
+  }, txt.skipLinkLabel)), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "Layout__main",
+    role: "main"
+  }, mainChildren || children), navChildren && /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "Layout__nav",
+    id: "pagenav",
+    role: "navigation"
+  }, navChildren, isMenuActive && /* @__PURE__ */ import_react.default.createElement("button", {
+    className: "Layout__nav__closebutton",
+    onClick: closeMenu,
+    "aria-label": txt.closeMenuLabelLong,
+    type: "button"
+  }, txt.closeMenuLabel)), /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "Layout__footer",
+    role: "complementary"
+  }, footerChildren)));
+};
+var Layout_default = Layout;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defaultLayoutTexts
+});

package/lib/Layout.mjs

@@ -0,0 +1,87 @@
+import React from "react";
+import { useIsBrowserSide } from "@hugsmidjan/react/hooks";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+import { getAssetUrl } from "@reykjavik/hanna-utils/assets";
+import { getTexts } from "@reykjavik/hanna-utils/i18n";
+import Image from "./_abstract/Image";
+import { Link } from "./_abstract/Link";
+import { useMenuToggling } from "./utils/useMenuToggling";
+import { useScrollbarWidthCSSVar } from "./utils/useScrollbarWidthCSSVar";
+const defaultLayoutTexts = {
+  is: {
+    lang: "is",
+    skipLinkLabel: "Valmynd",
+    closeMenuLabel: "Loka",
+    closeMenuLabelLong: "Loka valmynd"
+  },
+  en: {
+    lang: "en",
+    skipLinkLabel: "Skip to navigation",
+    closeMenuLabel: "Close",
+    closeMenuLabelLong: "Close menu"
+  }
+};
+const Layout = (props) => {
+  useScrollbarWidthCSSVar();
+  const {
+    ssr,
+    globalAlerts,
+    mainChildren,
+    navChildren,
+    footerChildren,
+    colorTheme,
+    children,
+    siteName = "Reykjav\xEDk",
+    logoLink = "/"
+  } = props;
+  const { isMenuActive, closeMenu, toggleMenu } = useMenuToggling(ssr !== "ssr-only");
+  const isBrowser = useIsBrowserSide();
+  const txt = getTexts(props, defaultLayoutTexts);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: getBemClass("Layout", props.modifier),
+    "data-sprinkled": isBrowser,
+    "data-color-theme": colorTheme
+  }, globalAlerts && /* @__PURE__ */ React.createElement("div", {
+    className: "Layout__alerts",
+    role: "alert"
+  }, globalAlerts), /* @__PURE__ */ React.createElement("div", {
+    className: "Layout__content"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "Layout__header",
+    role: "banner"
+  }, /* @__PURE__ */ React.createElement(Link, {
+    className: "Layout__header__logo",
+    href: logoLink
+  }, " ", /* @__PURE__ */ React.createElement(Image, {
+    inline: true,
+    src: getAssetUrl("reykjavik-logo.svg")
+  }), " ", siteName, " "), " ", navChildren && /* @__PURE__ */ React.createElement(Link, {
+    className: "Layout__header__skiplink",
+    href: "#pagenav",
+    onClick: isMenuActive && ((e) => {
+      e.preventDefault();
+      toggleMenu();
+    }),
+    "aria-label": txt.skipLinkLabel
+  }, txt.skipLinkLabel)), /* @__PURE__ */ React.createElement("div", {
+    className: "Layout__main",
+    role: "main"
+  }, mainChildren || children), navChildren && /* @__PURE__ */ React.createElement("div", {
+    className: "Layout__nav",
+    id: "pagenav",
+    role: "navigation"
+  }, navChildren, isMenuActive && /* @__PURE__ */ React.createElement("button", {
+    className: "Layout__nav__closebutton",
+    onClick: closeMenu,
+    "aria-label": txt.closeMenuLabelLong,
+    type: "button"
+  }, txt.closeMenuLabel)), /* @__PURE__ */ React.createElement("div", {
+    className: "Layout__footer",
+    role: "complementary"
+  }, footerChildren)));
+};
+var Layout_default = Layout;
+export {
+  Layout_default as default,
+  defaultLayoutTexts
+};

package/lib/MainMenu/_Auxiliary.cjs

@@ -0,0 +1,54 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Auxiliary_exports = {};
+__export(Auxiliary_exports, {
+  AuxiliaryPanel: () => AuxiliaryPanel
+});
+module.exports = __toCommonJS(Auxiliary_exports);
+var import_react = __toESM(require("react"));
+var import_assets = require("@reykjavik/hanna-utils/assets");
+var import_Link = require("../_abstract/Link");
+const AuxiliaryPanel = (props) => {
+  const { title, id, items, image } = props;
+  const imageUrl = image ? (0, import_assets.getIllustrationUrl)(image) : image;
+  return /* @__PURE__ */ import_react.default.createElement("li", {
+    className: "AuxiliaryPanel",
+    id,
+    style: imageUrl ? { "--menu-auxiliary-image": `url(${imageUrl})` } : void 0
+  }, /* @__PURE__ */ import_react.default.createElement("h3", {
+    className: "AuxiliaryPanel__title"
+  }, title), /* @__PURE__ */ import_react.default.createElement("ul", {
+    className: "AuxiliaryPanel__items"
+  }, items.map((item, i) => /* @__PURE__ */ import_react.default.createElement("li", {
+    key: i,
+    className: "AuxiliaryPanel__item",
+    "aria-current": item.current || void 0
+  }, /* @__PURE__ */ import_react.default.createElement(import_Link.Link, {
+    className: "AuxiliaryPanel__link",
+    href: item.href,
+    target: item.target,
+    lang: item.lang
+  }, item.label)))));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuxiliaryPanel
+});

package/lib/MainMenu/_Auxiliary.mjs

@@ -0,0 +1,28 @@
+import React from "react";
+import { getIllustrationUrl } from "@reykjavik/hanna-utils/assets";
+import { Link } from "../_abstract/Link";
+const AuxiliaryPanel = (props) => {
+  const { title, id, items, image } = props;
+  const imageUrl = image ? getIllustrationUrl(image) : image;
+  return /* @__PURE__ */ React.createElement("li", {
+    className: "AuxiliaryPanel",
+    id,
+    style: imageUrl ? { "--menu-auxiliary-image": `url(${imageUrl})` } : void 0
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "AuxiliaryPanel__title"
+  }, title), /* @__PURE__ */ React.createElement("ul", {
+    className: "AuxiliaryPanel__items"
+  }, items.map((item, i) => /* @__PURE__ */ React.createElement("li", {
+    key: i,
+    className: "AuxiliaryPanel__item",
+    "aria-current": item.current || void 0
+  }, /* @__PURE__ */ React.createElement(Link, {
+    className: "AuxiliaryPanel__link",
+    href: item.href,
+    target: item.target,
+    lang: item.lang
+  }, item.label)))));
+};
+export {
+  AuxiliaryPanel
+};

package/lib/MainMenu/_PrimaryPanel.cjs

@@ -0,0 +1,74 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PrimaryPanel_exports = {};
+__export(PrimaryPanel_exports, {
+  PrimaryPanel: () => PrimaryPanel
+});
+module.exports = __toCommonJS(PrimaryPanel_exports);
+var import_react = __toESM(require("react"));
+var import_getBemClass = __toESM(require("@hugsmidjan/react/utils/getBemClass"));
+var import_Link = require("../_abstract/Link");
+const PrimaryPanel = (props) => {
+  const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
+  const { items } = panel;
+  return /* @__PURE__ */ import_react.default.createElement("li", {
+    ref: isActive ? props.activeRef : void 0,
+    className: (0, import_getBemClass.default)("PrimaryPanel", [
+      isParent && "parent",
+      isActive && "active",
+      items.length > 5 && "twocol"
+    ]),
+    id: panel.id
+  }, /* @__PURE__ */ import_react.default.createElement("h3", {
+    className: "PrimaryPanel__title"
+  }, " ", isBrowser && !isActive ? /* @__PURE__ */ import_react.default.createElement("button", {
+    className: "MainMenu__mega__title-toggler",
+    "aria-controls": panel.id,
+    onClick: () => setActivePanel(panel, false),
+    "aria-pressed": isActive,
+    type: "button"
+  }, panel.title) : panel.title), /* @__PURE__ */ import_react.default.createElement("ul", {
+    className: "PrimaryPanel__items"
+  }, items.map((item, i) => /* @__PURE__ */ import_react.default.createElement("li", {
+    key: i,
+    className: "PrimaryPanel__item",
+    "aria-current": item.current || void 0
+  }, /* @__PURE__ */ import_react.default.createElement(import_Link.Link, {
+    className: "PrimaryPanel__link",
+    href: item.href,
+    target: item.target,
+    lang: item.lang
+  }, /* @__PURE__ */ import_react.default.createElement("span", {
+    className: "PrimaryPanel__linkTitle"
+  }, item.label), " ", /* @__PURE__ */ import_react.default.createElement("small", {
+    className: "PrimaryPanel__summary"
+  }, item.summary), " ")))), isBrowser && isActive && /* @__PURE__ */ import_react.default.createElement("button", {
+    className: "MainMenu__megapanel__backtomenu",
+    "aria-controls": panel.id,
+    "aria-label": texts.backToMenuLong,
+    onClick: () => setActivePanel(void 0),
+    type: "button"
+  }, texts.backToMenu));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PrimaryPanel
+});

package/lib/MainMenu/_PrimaryPanel.mjs

@@ -0,0 +1,48 @@
+import React from "react";
+import getBemClass from "@hugsmidjan/react/utils/getBemClass";
+import { Link } from "../_abstract/Link";
+const PrimaryPanel = (props) => {
+  const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
+  const { items } = panel;
+  return /* @__PURE__ */ React.createElement("li", {
+    ref: isActive ? props.activeRef : void 0,
+    className: getBemClass("PrimaryPanel", [
+      isParent && "parent",
+      isActive && "active",
+      items.length > 5 && "twocol"
+    ]),
+    id: panel.id
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "PrimaryPanel__title"
+  }, " ", isBrowser && !isActive ? /* @__PURE__ */ React.createElement("button", {
+    className: "MainMenu__mega__title-toggler",
+    "aria-controls": panel.id,
+    onClick: () => setActivePanel(panel, false),
+    "aria-pressed": isActive,
+    type: "button"
+  }, panel.title) : panel.title), /* @__PURE__ */ React.createElement("ul", {
+    className: "PrimaryPanel__items"
+  }, items.map((item, i) => /* @__PURE__ */ React.createElement("li", {
+    key: i,
+    className: "PrimaryPanel__item",
+    "aria-current": item.current || void 0
+  }, /* @__PURE__ */ React.createElement(Link, {
+    className: "PrimaryPanel__link",
+    href: item.href,
+    target: item.target,
+    lang: item.lang
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "PrimaryPanel__linkTitle"
+  }, item.label), " ", /* @__PURE__ */ React.createElement("small", {
+    className: "PrimaryPanel__summary"
+  }, item.summary), " ")))), isBrowser && isActive && /* @__PURE__ */ React.createElement("button", {
+    className: "MainMenu__megapanel__backtomenu",
+    "aria-controls": panel.id,
+    "aria-label": texts.backToMenuLong,
+    onClick: () => setActivePanel(void 0),
+    type: "button"
+  }, texts.backToMenu));
+};
+export {
+  PrimaryPanel
+};