@reykjavik/hanna-react 0.10.84 → 0.10.85

package/esm/GridBlocks.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getEfnistaknUrl } from '@reykjavik/hanna-utils/assets';
+import { Image } from './_abstract/_Image.js';
+import { Link } from './_abstract/_Link.js';
+import { useSeenEffect } from './utils/seenEffect.js';
+import ButtonTertiary from './ButtonTertiary.js';
+export const GridBlocks = (props) => {
+    const { blocks, twocol, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", { className: getBemClass('GridBlocks', [twocol && 'twocol']), ref: ref }, blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
+        const imageProps = icon ? { src: getEfnistaknUrl(icon) } : image;
+        return (React.createElement("div", { key: i, className: "GridBlocks__item" },
+            imageProps && React.createElement(Image, Object.assign({ className: "GridBlocks__illustration" }, imageProps)),
+            React.createElement("div", { className: "GridBlocks__textwrap" },
+                React.createElement("h3", { className: "GridBlocks__item__title" }, href != null ? (React.createElement(Link, { className: "GridBlocks__item__titlelink", href: href }, title)) : (title)),
+                React.createElement("div", { className: "GridBlocks__item__summary" }, summary),
+                React.createElement("ul", { className: "GridBlocks__links" }, links.map((link, i) => {
+                    return (React.createElement("li", { key: i, className: "GridBlocks__link" },
+                        React.createElement(ButtonTertiary, Object.assign({}, link))));
+                })))));
+    })));
+};
+export default GridBlocks;

package/esm/Heading.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { ComponentLayoutProps } from './constants.js';
+declare const sizes: {
+    readonly small: "small";
+    /** Default value */
+    readonly normal: "";
+    readonly large: "large";
+};
+type HeadingSize = keyof typeof sizes;
+export type HeadingProps = {
+    Tag?: 'h2' | 'h3';
+    size?: HeadingSize;
+    children: ReactNode;
+    /**
+     * Make an exception and render a `<h1/>` element.
+     *
+     * This prop is ignore if the `Tag` prop is defined.
+     */
+    forceH1?: boolean;
+} & ComponentLayoutProps;
+export declare const Heading: (props: HeadingProps) => JSX.Element;
+export default Heading;

package/esm/Heading.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const sizes = {
+    small: 'small',
+    /** Default value */
+    normal: '',
+    large: 'large',
+};
+export const Heading = (props) => {
+    const { size = 'normal', align, wide, children } = props;
+    const Tag = props.Tag || (props.forceH1 ? 'h1' : 'h2');
+    const suppressWarning = process.env.NODE_ENV !== 'production' && Tag === 'h1' ? true : undefined;
+    return (React.createElement(Tag, { "data-dev-forcedh1": suppressWarning, className: getBemClass('Heading', [
+            sizes[size],
+            align === 'right' && 'align--' + align,
+            !align && wide && 'wide',
+        ]) }, children));
+};
+export default Heading;

package/esm/HeroBlock.d.ts

@@ -0,0 +1,19 @@
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { ButtonProps } from './_abstract/_Button.js';
+import { ImageProps } from './_abstract/_Image.js';
+import { SeenProp } from './utils/seenEffect.js';
+type HeroBlockImageProps = {
+    illustration: Illustration;
+    image?: undefined;
+} | {
+    image: ImageProps;
+    illustration?: undefined;
+};
+export type HeroBlockProps = {
+    title: string;
+    summary: string | JSX.Element;
+    primaryButton?: ButtonProps;
+    secondaryButton?: ButtonProps;
+} & HeroBlockImageProps & SeenProp;
+export declare const HeroBlock: (props: HeroBlockProps) => JSX.Element;
+export default HeroBlock;

package/esm/HeroBlock.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import { Image } from './_abstract/_Image.js';
+import { useSeenEffect } from './utils/seenEffect.js';
+import ButtonPrimary from './ButtonPrimary.js';
+import ButtonTertiary from './ButtonTertiary.js';
+export const HeroBlock = (props) => {
+    const { title, summary, illustration, image, primaryButton, secondaryButton, startSeen, } = props;
+    const hasButtons = Boolean(primaryButton || secondaryButton);
+    const imgProps = illustration ? { src: getIllustrationUrl(illustration) } : image;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", { className: "HeroBlock", ref: ref },
+        React.createElement("h1", { className: "HeroBlock__title" }, title),
+        React.createElement(Image, Object.assign({ className: "HeroBlock__image" }, imgProps)),
+        React.createElement("div", { className: "HeroBlock__summary" }, summary),
+        hasButtons && (React.createElement("div", { className: "HeroBlock__buttons" },
+            primaryButton && React.createElement(ButtonPrimary, Object.assign({}, primaryButton)),
+            ' ',
+            secondaryButton && React.createElement(ButtonTertiary, Object.assign({}, secondaryButton))))));
+};
+export default HeroBlock;

package/esm/IframeBlock.d.ts

@@ -0,0 +1,28 @@
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { ResizerOptions } from 'iframe-resizer-react';
+export type IframeBlockProps = {
+    src: string;
+    /** Accessible title attribute for the iframe (similar to alt="" on images) */
+    title: string;
+    framed?: boolean;
+    compact?: boolean;
+    align?: 'right';
+} & EitherObj<{
+    /** Default: `'auto'` ... which initializes "iframe-resizer" script */
+    height?: 'auto';
+    /** Default: `false` ... Set to `true` for same-site only, or provide array of allowed domain-names */
+    checkOrigin?: ResizerOptions['checkOrigin'];
+}, {
+    height: number;
+    scrolling?: boolean | 'no' | 'yes';
+}>;
+/**
+ * When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:
+ *
+ * ```js
+ * <script> window.iFrameResizer = { targetOrigin: '*' }; </script>
+ * <script src="https://styles.reykjavik.is/assets/scripts/iframeResizer.contentWindow@4.js"></script>
+ * ```
+ */
+export declare const IframeBlock: (props: IframeBlockProps) => JSX.Element;
+export default IframeBlock;

package/esm/IframeBlock.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import IframeResizer from 'iframe-resizer-react';
+/**
+ * When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:
+ *
+ * ```js
+ * <script> window.iFrameResizer = { targetOrigin: '*' }; </script>
+ * <script src="https://styles.reykjavik.is/assets/scripts/iframeResizer.contentWindow@4.js"></script>
+ * ```
+ */
+export const IframeBlock = (props) => {
+    const { title, src, framed, compact, scrolling, height = 'auto', align, checkOrigin = false, } = props;
+    const className = getBemClass('IframeBlock', [
+        framed && 'framed',
+        compact && 'compact',
+        align === 'right' && 'align--' + align,
+    ]);
+    return height === 'auto' ? (React.createElement(IframeResizer, { className: className, title: title, src: src, checkOrigin: checkOrigin })) : (React.createElement("iframe", { className: className, title: title, src: src, 
+        // hidden tiger: pass negative height to disable iframe-resizer but not set height explicitly
+        // (Silly hack, don't rely on this)
+        height: height < 0 ? undefined : height, 
+        // allow undefined to suppress scrolling attribute
+        scrolling: scrolling === true ? 'yes' : scrolling === false ? 'no' : scrolling }));
+};
+export default IframeBlock;

package/esm/Illustration.d.ts

@@ -0,0 +1,10 @@
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { Illustration as IllustrationName } from '@reykjavik/hanna-utils/assets';
+import { ImageProps } from './_abstract/_Image.js';
+type IllustrationProps = EitherObj<{
+    type: IllustrationName;
+}, {
+    image: ImageProps;
+}>;
+export declare const Illustration: (props: IllustrationProps) => JSX.Element;
+export default Illustration;

package/esm/Illustration.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { getIllustrationUrl, } from '@reykjavik/hanna-utils/assets';
+import { Image } from './_abstract/_Image.js';
+export const Illustration = (props) => {
+    const imgProps = props.type ? { src: getIllustrationUrl(props.type) } : props.image;
+    return React.createElement(Image, Object.assign({ className: "Illustration" }, imgProps));
+};
+export default Illustration;

package/esm/ImageCards.d.ts

@@ -0,0 +1,10 @@
+import { CardListSummaryProps, ImageCardListProps, ImageCardProps as _ImageCardProps } from './_abstract/_CardList.js';
+import { SeenProp } from './utils/seenEffect.js';
+export type ImageCardsItemProps = _ImageCardProps;
+/** @deprecated Use `ImageCardsItemProps` instead.  (Will be removed in v0.11) */
+export type ImageCardProps = ImageCardsItemProps;
+export type ImageCardsProps = ImageCardListProps & CardListSummaryProps & {
+    background?: boolean;
+} & SeenProp;
+export declare const ImageCards: (props: ImageCardsProps) => JSX.Element;
+export default ImageCards;

package/esm/ImageCards.js

@@ -0,0 +1,12 @@
+import { __rest } from "tslib";
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { CardList, } from './_abstract/_CardList.js';
+import { useSeenEffect } from './utils/seenEffect.js';
+export const ImageCards = (props) => {
+    const { background, startSeen } = props, cardListProps = __rest(props, ["background", "startSeen"]);
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", { className: getBemClass('ImageCards', background && 'background'), ref: ref },
+        React.createElement(CardList, Object.assign({}, cardListProps, { bemPrefix: "ImageCards", imgPlaceholder: props.imgPlaceholder || true }))));
+};
+export default ImageCards;

package/esm/InfoBlock.d.ts

@@ -0,0 +1,13 @@
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { SeenProp } from './utils/seenEffect.js';
+export type InfoBlockProps = {
+    title: string;
+    subtitle?: string | JSX.Element;
+    items: Array<string | JSX.Element>;
+} & EitherObj<{
+    attention?: string | JSX.Element;
+}, {
+    extraInfo?: string | JSX.Element;
+}> & SeenProp;
+export declare const InfoBlock: (props: InfoBlockProps) => JSX.Element;
+export default InfoBlock;

package/esm/InfoBlock.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useSeenEffect } from './utils/seenEffect.js';
+export const InfoBlock = (props) => {
+    const { title, subtitle, items, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", { className: "InfoBlock", ref: ref },
+        React.createElement("h2", { className: "InfoBlock__title" }, title),
+        subtitle && React.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
+        React.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (React.createElement("li", { key: i, className: "InfoBlock__item" }, item)))),
+        'extraInfo' in props && (React.createElement("div", { className: "InfoBlock__extrainfo" }, props.extraInfo)),
+        'attention' in props && (React.createElement("div", { className: "InfoBlock__attention" }, props.attention))));
+};
+export default InfoBlock;

package/esm/InfoHero.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps } from './_abstract/_Button.js';
+import { ImageProps } from './_abstract/_Image.js';
+import { Alignment } from './constants.js';
+type BlingOptions = 'waves' | 'sunny-waves' | 'triangles' | 'circles';
+export type InfoHeroProps = {
+    title: string;
+    titleBlurb?: string | JSX.Element;
+    /** Inserts `<br/>`s on `\n`. Collapses multiple `\n`s. */
+    subTitle?: string;
+    blurb?: string | JSX.Element;
+    buttons?: Array<ButtonProps>;
+    footer?: string | JSX.Element;
+    align?: Alignment;
+    image?: ImageProps;
+    blingType?: BlingOptions;
+};
+export declare const InfoHero: (props: InfoHeroProps) => JSX.Element;
+export default InfoHero;

package/esm/InfoHero.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { Blings } from './_abstract/_Blings.js';
+import { Image } from './_abstract/_Image.js';
+import { breakOnNL } from './_abstract/breakOnNL.js';
+import ButtonTertiary from './ButtonTertiary.js';
+import { aligns } from './constants.js';
+const blingOptions = {
+    waves: [
+        {
+            type: 'waves-medium',
+            color: 'primary',
+            align: 'left',
+            vertical: 'up',
+            parent: 'bottom',
+        },
+    ],
+    'sunny-waves': [
+        {
+            type: 'waves-medium',
+            align: 'left',
+            parent: 'bottom',
+            vertical: 'up',
+        },
+        {
+            type: 'circle-medium',
+            color: 'secondary',
+            align: 'right-center',
+            parent: 'top',
+            vertical: 'down-ish',
+        },
+    ],
+    triangles: [
+        {
+            type: 'triangle-large',
+            align: 'left-center',
+            parent: 'bottom',
+            vertical: 'up',
+        },
+        {
+            type: 'triangle-small',
+            color: 'secondary',
+            align: 'right',
+            parent: 'top-ish',
+            vertical: 'down-ish',
+            overlay: true,
+        },
+    ],
+    circles: [
+        {
+            type: 'circle-large',
+            align: 'left',
+            parent: 'top',
+            vertical: 'down',
+        },
+        {
+            type: 'circle-small',
+            color: 'secondary',
+            align: 'right',
+            parent: 'bottom-ish',
+            vertical: 'up-ish',
+            overlay: true,
+        },
+    ],
+};
+export const InfoHero = (props) => {
+    const { title, titleBlurb, subTitle, blurb, image, buttons = [], footer, align, blingType, } = props;
+    const showButtons = Boolean(buttons.length);
+    const alignment = align && aligns[align] ? align : 'right';
+    const blings = (blingType && blingOptions[blingType]) ||
+        blingOptions.waves; // default to `waves`
+    return (React.createElement("div", { className: getBemClass('InfoHero', 'align--' + alignment) },
+        React.createElement("div", { className: "InfoHero__content" },
+            React.createElement("h1", { className: "InfoHero__title" }, title),
+            titleBlurb && React.createElement("div", { className: "InfoHero__titleblurb" }, titleBlurb),
+            subTitle && React.createElement("div", { className: "InfoHero__subtitle" }, breakOnNL(subTitle)),
+            blurb && React.createElement("div", { className: "InfoHero__blurb" }, blurb),
+            showButtons && (React.createElement("div", { className: "InfoHero__buttons" }, buttons.map((buttonProps, i) => (React.createElement(ButtonTertiary, Object.assign({ key: i }, buttonProps)))))),
+            footer && React.createElement("div", { className: "InfoHero__footer" }, footer)),
+        React.createElement(Image, Object.assign({ className: "InfoHero__image", altText: title }, image, { placeholder: true })),
+        React.createElement(Blings, { blings: blings, mirror: alignment === 'right' })));
+};
+export default InfoHero;

package/esm/IslandBlock.d.ts

@@ -0,0 +1,25 @@
+import { Formheimur } from '@reykjavik/hanna-utils/assets';
+import { BlockItem } from './_abstract/_Block.js';
+import { ImageProps } from './_abstract/_Image.js';
+import { SeenProp } from './utils/seenEffect.js';
+import { Alignment } from './constants.js';
+type IslandBaseBlockProps = {
+    align?: Alignment;
+};
+type IslandImageBlock = {
+    content: BlockItem;
+} & ({
+    shapes: Formheimur;
+    image?: undefined;
+} | {
+    image: ImageProps;
+    shapes?: undefined;
+});
+type IslandContentBlocks = {
+    content: Array<BlockItem>;
+    shapes?: undefined;
+    image?: undefined;
+};
+export type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & SeenProp;
+export declare const IslandBlock: (props: IslandBlockProps) => JSX.Element;
+export default IslandBlock;

package/esm/IslandBlock.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { getFormheimurUrl } from '@reykjavik/hanna-utils/assets';
+import { Block } from './_abstract/_Block.js';
+import { aligns } from './constants.js';
+export const IslandBlock = (props) => {
+    const { align, content, shapes, image, startSeen } = props;
+    const alignment = align && aligns[align] ? align : 'right';
+    const blockProps = Array.isArray(content)
+        ? { content }
+        : {
+            content,
+            image: shapes ? { src: getFormheimurUrl(shapes), inline: true } : image || {},
+        };
+    return (React.createElement(Block, Object.assign({ bem: "IslandBlock", modifier: 'align--' + alignment }, blockProps, { startSeen: startSeen })));
+};
+export default IslandBlock;

package/esm/IslandPageBlock.d.ts

@@ -0,0 +1,24 @@
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { BlockItem } from './_abstract/_Block.js';
+import { ImageProps } from './_abstract/_Image.js';
+import { SeenProp } from './utils/seenEffect.js';
+import { Alignment } from './constants.js';
+declare const backgrounds: {
+    none: undefined;
+    gray: string;
+    secondary: string;
+};
+type Background = keyof typeof backgrounds;
+type IslandPageImageProps = {
+    illustration: Illustration;
+    image?: undefined;
+} | {
+    illustration?: undefined;
+    image: ImageProps;
+};
+export type IslandPageBlockProps = BlockItem & IslandPageImageProps & {
+    align?: Alignment;
+    background?: Background;
+} & SeenProp;
+export declare const IslandPageBlock: (props: IslandPageBlockProps) => JSX.Element;
+export default IslandPageBlock;

package/esm/IslandPageBlock.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import { Block } from './_abstract/_Block.js';
+import { aligns } from './constants.js';
+const backgrounds = {
+    none: undefined,
+    gray: 'gray',
+    secondary: 'secondary',
+};
+export 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 (React.createElement(Block, { bem: "IslandPageBlock", modifier: ['align--' + alignment, bg && 'background--' + bg], content: { title, summary, buttons }, image: illustration ? { src: getIllustrationUrl(illustration) } : image || {}, startSeen: startSeen }));
+};
+export default IslandPageBlock;

package/esm/LabeledTextBlock.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ButtonProps } from './_abstract/_Button.js';
+import { SeenProp } from './utils/seenEffect.js';
+export type LabeledTextBlockProps = {
+    label: string;
+    summary: string | ReactElement;
+    wide?: boolean;
+    buttons?: Array<ButtonProps>;
+} & SeenProp;
+export declare const LabeledTextBlock: (props: LabeledTextBlockProps) => JSX.Element;
+export default LabeledTextBlock;

package/esm/LabeledTextBlock.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect.js';
+import ButtonTertiary from './ButtonTertiary.js';
+export const LabeledTextBlock = (props) => {
+    const { label, summary, wide, buttons = [], startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", { className: getBemClass('LabeledTextBlock', wide && 'wide'), ref: ref },
+        React.createElement("h2", { className: "LabeledTextBlock__label" }, label),
+        React.createElement("div", { className: "LabeledTextBlock__summary" },
+            summary,
+            buttons.map((button, i) => (React.createElement(ButtonTertiary, Object.assign({ key: i }, button)))))));
+};
+export default LabeledTextBlock;

package/esm/Layout.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+import type { HannaColorTheme } from '@reykjavik/hanna-css';
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { SSRSupport } from './utils.js';
+export type LayoutI18n = {
+    lang?: string;
+    skipLinkLabel: string;
+    closeMenuLabel: string;
+    closeMenuLabelLong?: string;
+};
+export declare const defaultLayoutTexts: DefaultTexts<LayoutI18n>;
+type LayoutProps = {
+    globalAlerts?: ReactNode;
+    mainChildren?: ReactNode;
+    navChildren?: ReactNode;
+    footerChildren?: ReactNode;
+    colorTheme?: HannaColorTheme;
+    logoLink?: string;
+    siteName?: string;
+    modifier?: BemPropsModifier['modifier'];
+    ssr?: SSRSupport;
+    texts?: LayoutI18n;
+    lang?: string;
+} & EitherObj<{
+    mainChildren: ReactNode;
+}, {
+    children: ReactNode;
+}>;
+export declare const Layout: (props: LayoutProps) => JSX.Element;
+export default Layout;

package/esm/Layout.js

@@ -0,0 +1,56 @@
+import React from 'react';
+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.js';
+import { Link } from './_abstract/_Link.js';
+import { HannaUIState } from './utils/HannaUIState.js';
+import { useMenuToggling } from './utils/useMenuToggling.js';
+import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar.js';
+import { useIsBrowserSide } from './utils.js';
+export const defaultLayoutTexts = {
+    is: {
+        lang: 'is',
+        skipLinkLabel: 'Valmynd',
+        closeMenuLabel: 'Loka',
+        closeMenuLabelLong: 'Loka valmynd',
+    },
+    en: {
+        lang: 'en',
+        skipLinkLabel: 'Skip to navigation',
+        closeMenuLabel: 'Close',
+        closeMenuLabelLong: 'Close menu',
+    },
+};
+export const Layout = (props) => {
+    useScrollbarWidthCSSVar();
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
+    const { isMenuActive, isMenuOpen, closeMenu, toggleMenu } = useMenuToggling(ssr !== 'ssr-only');
+    const isBrowser = useIsBrowserSide( /* ssr */);
+    const txt = getTexts(props, defaultLayoutTexts);
+    return (React.createElement("div", { className: getBemClass('Layout', props.modifier), "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
+        globalAlerts && (React.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
+        React.createElement("div", { className: "Layout__content" },
+            React.createElement("div", { className: "Layout__header", role: "banner" },
+                React.createElement(Link, { className: "Layout__header__logo", href: logoLink },
+                    ' ',
+                    React.createElement(Image, { className: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg') }),
+                    ' ',
+                    siteName,
+                    ' '),
+                ' ',
+                navChildren && (React.createElement(Link, { className: "Layout__header__skiplink", href: "#pagenav", onClick: isMenuActive &&
+                        ((e) => {
+                            e.preventDefault();
+                            toggleMenu();
+                        }), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
+            React.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
+            navChildren && (React.createElement("div", { className: "Layout__nav", id: "pagenav", role: "navigation" },
+                React.createElement(HannaUIState, { value: {
+                        closeHamburgerMenu: closeMenu,
+                        isHamburgerMenuOpen: isMenuOpen,
+                    } }, navChildren),
+                isMenuActive && (React.createElement("button", { className: "Layout__nav__closebutton", onClick: closeMenu, "aria-label": txt.closeMenuLabelLong, type: "button" }, txt.closeMenuLabel)))),
+            React.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));
+};
+export default Layout;

package/esm/MainMenu/_Auxiliary.d.ts

@@ -0,0 +1,6 @@
+import { MegaMenuPanel } from './_PrimaryPanel.js';
+export type AuxilaryPanelIllustration = 'hanna-veitiggi' | 'hanna-vandro' | 'hanna-hugsi' | 'hanna-hissa' | 'hanna-hahaha' | 'hanna-hae' | 'hanna-god_spurning' | 'hanna-gjuggiborg' | 'hanna-benda';
+export type AuxiliaryPanelProps = MegaMenuPanel & {
+    image?: AuxilaryPanelIllustration;
+};
+export declare const AuxiliaryPanel: (props: AuxiliaryPanelProps) => JSX.Element;

package/esm/MainMenu/_Auxiliary.js

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

package/esm/MainMenu/_PrimaryPanel.d.ts

@@ -0,0 +1,29 @@
+import { RefObject } from 'react';
+export type PrimaryPanelI18n = {
+    backToMenu: string;
+    backToMenuLong?: string;
+};
+export type MegaMenuItem = {
+    label: string;
+    summary?: string;
+    href: string;
+    lang?: string;
+    current?: boolean;
+    target?: string;
+};
+export type MegaMenuPanel = {
+    title: string;
+    items: Array<MegaMenuItem>;
+    id: string;
+};
+type PrimaryPanelProps = {
+    setActivePanel: (panel: MegaMenuPanel | undefined, setFocus?: boolean) => void;
+    isParent?: boolean;
+    isActive?: boolean;
+    panel: MegaMenuPanel;
+    texts: PrimaryPanelI18n;
+    activeRef: RefObject<HTMLLIElement>;
+    isBrowser: true | undefined;
+};
+export declare const PrimaryPanel: (props: PrimaryPanelProps) => JSX.Element;
+export {};

package/esm/MainMenu/_PrimaryPanel.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { Link } from '../_abstract/_Link.js';
+export const PrimaryPanel = (props) => {
+    const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
+    const { items } = panel;
+    return (React.createElement("li", { ref: isActive ? props.activeRef : undefined, className: getBemClass('PrimaryPanel', [
+            isParent && 'parent',
+            isActive && 'active',
+            items.length > 5 && 'twocol', // TODO: allow setting twocol manually?
+        ]), id: panel.id },
+        React.createElement("h3", { className: "PrimaryPanel__title" },
+            ' ',
+            isBrowser && !isActive ? (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)),
+        React.createElement("ul", { className: "PrimaryPanel__items" }, items.map((item, i) => (React.createElement("li", { key: i, className: "PrimaryPanel__item", "aria-current": item.current || undefined },
+            React.createElement(Link, { className: "PrimaryPanel__link", href: item.href, target: item.target, lang: item.lang },
+                React.createElement("span", { className: "PrimaryPanel__linkTitle" }, item.label),
+                ' ',
+                React.createElement("small", { className: "PrimaryPanel__summary" }, item.summary),
+                ' '))))),
+        isBrowser && isActive && (React.createElement("button", { className: "MainMenu__megapanel__backtomenu", "aria-controls": panel.id, "aria-label": texts.backToMenuLong, onClick: () => setActivePanel(undefined), type: "button" }, texts.backToMenu))));
+};