@reykjavik/hanna-react 0.10.56 → 0.10.59

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';
+import { Link } from './_abstract/_Link';
+import { useSeenEffect } from './utils/seenEffect';
+import ButtonTertiary from './ButtonTertiary';
+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

@@ -3,7 +3,7 @@ import { ComponentLayoutProps } from './constants';
 declare const sizes: {
     readonly small: "small";
     /** Default value */
-    readonly normal: "normal";
+    readonly normal: "";
     readonly large: "large";
 };
 declare type HeadingSize = keyof typeof sizes;

package/esm/{Heading.jsx → Heading.js}

@@ -3,17 +3,15 @@ import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 const sizes = {
     small: 'small',
     /** Default value */
-    normal: 'normal',
+    normal: '',
     large: 'large',
 };
 const Heading = (props) => {
     const { size = 'normal', Tag = 'h2', align, wide, children } = props;
-    return (<Tag className={getBemClass('Heading', [
+    return (React.createElement(Tag, { className: getBemClass('Heading', [
             sizes[size],
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
-        ])}>
-      {children}
-    </Tag>);
+        ]) }, children));
 };
 export default Heading;

package/esm/HeroBlock.d.ts

@@ -1,6 +1,6 @@
 import { Illustration } from '@reykjavik/hanna-utils/assets';
-import { ButtonProps } from './_abstract/Button';
-import { ImageProps } from './_abstract/Image';
+import { ButtonProps } from './_abstract/_Button';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 declare type HeroBlockImageProps = {
     illustration: Illustration;

package/esm/HeroBlock.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import Image from './_abstract/_Image';
+import { useSeenEffect } from './utils/seenEffect';
+import ButtonPrimary from './ButtonPrimary';
+import ButtonTertiary from './ButtonTertiary';
+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.jsx → IframeBlock.js}

@@ -16,11 +16,11 @@ const IframeBlock = (props) => {
         compact && 'compact',
         align === 'right' && 'align--' + align,
     ]);
-    return height === 'auto' ? (<IframeResizer className={className} src={src}/>) : (<iframe className={className} 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}/>);
+    return height === 'auto' ? (React.createElement(IframeResizer, { className: className, src: src })) : (React.createElement("iframe", { className: className, 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

@@ -1,5 +1,5 @@
 import { Illustration as IllustrationName } from '@reykjavik/hanna-utils/assets';
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 declare type IllustrationProps = {
     children?: undefined;
 } & ({

package/esm/{Illustration.jsx → Illustration.js}

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

package/esm/ImageCards.d.ts

@@ -1,4 +1,4 @@
-import { ImageCardListProps, ImageCardProps as ICP } from './_abstract/CardList';
+import { ImageCardListProps, ImageCardProps as ICP } from './_abstract/_CardList';
 import { SeenProp } from './utils/seenEffect';
 export declare type ImageCardProps = ICP;
 declare type _ImageCardProps = ImageCardListProps & {

package/esm/{ImageCards.jsx → ImageCards.js}

@@ -11,13 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { CardList, } from './_abstract/CardList';
+import { CardList, } from './_abstract/_CardList';
 import { useSeenEffect } from './utils/seenEffect';
 const ImageCards = (props) => {
     const { background, startSeen } = props, cardListProps = __rest(props, ["background", "startSeen"]);
     const [ref] = useSeenEffect(startSeen);
-    return (<div className={getBemClass('ImageCards', background && 'background')} ref={ref}>
-      <CardList {...cardListProps} bemPrefix="ImageCards" imgPlaceholder={props.imgPlaceholder || true}/>
-    </div>);
+    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.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useSeenEffect } from './utils/seenEffect';
+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),
+        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

@@ -1,5 +1,5 @@
-import { ButtonProps } from './_abstract/Button';
-import { ImageProps } from './_abstract/Image';
+import { ButtonProps } from './_abstract/_Button';
+import { ImageProps } from './_abstract/_Image';
 import { Alignment } from './constants';
 declare type BlingOptions = 'waves' | 'sunny-waves' | 'triangles' | 'circles';
 export declare type InfoHeroProps = {

package/esm/{InfoHero.jsx → InfoHero.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import Blings from './_abstract/_Blings';
+import Image from './_abstract/_Image';
 import breakOnNL from './_abstract/breakOnNL';
-import Image from './_abstract/Image';
 import ButtonTertiary from './ButtonTertiary';
 import { aligns } from './constants';
 const blingOptions = {
@@ -69,20 +69,14 @@ const InfoHero = (props) => {
     const alignment = align && aligns[align] ? align : 'right';
     const blings = (blingType && blingOptions[blingType]) ||
         blingOptions.waves; // default to `waves`
-    return (<div className={getBemClass('InfoHero', 'align--' + alignment)}>
-      <div className="InfoHero__content">
-        <h1 className="InfoHero__title">{title}</h1>
-        {titleBlurb && <div className="InfoHero__titleblurb">{titleBlurb}</div>}
-
-        {subTitle && <div className="InfoHero__subtitle">{breakOnNL(subTitle)}</div>}
-        {blurb && <div className="InfoHero__blurb">{blurb}</div>}
-
-        {showButtons && (<div className="InfoHero__buttons">
-            {buttons.map((buttonProps, i) => (<ButtonTertiary key={i} {...buttonProps}/>))}
-          </div>)}
-      </div>
-      <Image className="InfoHero__image" altText={title} {...image} placeholder/>
-      <Blings blings={blings} mirror={alignment === 'right'}/>
-    </div>);
+    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))))))),
+        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

@@ -1,6 +1,6 @@
 import { Formheimur } from '@reykjavik/hanna-utils/assets';
 import { BlockItem } from './_abstract/_Block';
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 import { Alignment } from './constants';
 declare type IslandBaseBlockProps = {

package/esm/{IslandBlock.jsx → IslandBlock.js}

@@ -11,6 +11,6 @@ const IslandBlock = (props) => {
             content,
             image: shapes ? { src: getFormheimurUrl(shapes), inline: true } : image || {},
         };
-    return (<Block bem="IslandBlock" modifier={'align--' + alignment} {...blockProps} startSeen={startSeen}/>);
+    return (React.createElement(Block, Object.assign({ bem: "IslandBlock", modifier: 'align--' + alignment }, blockProps, { startSeen: startSeen })));
 };
 export default IslandBlock;

package/esm/IslandPageBlock.d.ts

@@ -1,6 +1,6 @@
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { BlockItem } from './_abstract/_Block';
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 import { Alignment } from './constants';
 declare const backgrounds: {

package/esm/{IslandPageBlock.jsx → IslandPageBlock.js}

@@ -11,6 +11,6 @@ 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 (<Block bem="IslandPageBlock" modifier={['align--' + alignment, bg && 'background--' + bg]} content={{ title, summary, buttons }} image={illustration ? { src: getIllustrationUrl(illustration) } : image || {}} startSeen={startSeen}/>);
+    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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { ButtonProps } from './_abstract/Button';
+import { ButtonProps } from './_abstract/_Button';
 import { SeenProp } from './utils/seenEffect';
 export declare type LabeledTextBlockProps = {
     label: string;

package/esm/LabeledTextBlock.js

@@ -0,0 +1,14 @@
+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 (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.js

@@ -0,0 +1,52 @@
+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';
+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',
+    },
+};
+const Layout = (props) => {
+    useScrollbarWidthCSSVar();
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
+    const { isMenuActive, 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" },
+                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.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import { Link } from '../_abstract/_Link';
+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.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { Link } from '../_abstract/_Link';
+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))));
+};

package/esm/{MainMenu.jsx → MainMenu.js}

@@ -5,7 +5,7 @@ import useShortState from '@hugsmidjan/react/hooks/useShortState';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { getPageScrollElm } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
-import { Link } from './_abstract/Link';
+import { Link } from './_abstract/_Link';
 import { AuxiliaryPanel, } from './MainMenu/_Auxiliary';
 import { PrimaryPanel } from './MainMenu/_PrimaryPanel';
 import { useFormatMonitor } from './utils/useFormatMonitor';
@@ -101,49 +101,36 @@ const MainMenu = (props) => {
     if (menuItems.length === 0) {
         return null;
     }
-    return (<nav className="MainMenu" aria-label={title} data-sprinkled={isBrowser} ref={menuElmRef}>
-      <h2 className="MainMenu__title">{title}</h2>
-      <ul className="MainMenu__items">
-        {menuItems.map((item, i) => {
+    return (React.createElement("nav", { className: "MainMenu", "aria-label": title, "data-sprinkled": isBrowser, ref: menuElmRef },
+        React.createElement("h2", { className: "MainMenu__title" }, title),
+        React.createElement("ul", { className: "MainMenu__items" }, menuItems.map((item, i) => {
             if (item === '---') {
-                return <li key={i} className="MainMenu__separator" aria-hidden="true"/>;
+                return React.createElement("li", { key: i, className: "MainMenu__separator", "aria-hidden": "true" });
             }
             const { label, labelLong, lang, controlsId, onClick } = item;
             const pressed = (activePanel && controlsId === activePanel.id) || undefined;
-            return (<li key={i} className={getBemClass('MainMenu__item', item.modifier)} aria-current={item.current || undefined}>
-              {onClick || (!!item.megaPanel && (isBrowser || item.href != null)) ? (
-                // only print script-driven buttons in the browser
-                <button className="MainMenu__link" onClick={() => {
-                        item.megaPanel && setActivePanel(item.megaPanel);
-                        onClick && onClick(i, item);
-                        onItemClick && onItemClick(i, item);
-                    }} ref={pressed && pressedLinkRef} aria-pressed={pressed} aria-controls={controlsId} aria-label={labelLong} title={labelLong} // For auto-tooltips on desktop
-                 lang={lang} type="button">
-                    {label}
-                  </button>) : item.href != null ? (
-                // always render links server-side
-                <Link className="MainMenu__link" href={item.href} aria-label={labelLong} title={labelLong} // For auto-tooltips on desktop
-                 onClick={onItemClick && (() => onItemClick(i, item))} lang={lang}>
-                    {label}
-                  </Link>) : undefined // skip rendering non-link menu items server side
-                }
-            </li>);
-        })}
-      </ul>
-      {'\n\n'}
-      {megaPanels.length > 0 && (<div className={getBemClass('MainMenu__panelsWrap', [activePanel && 'active'])}>
-          <ul className="MainMenu__panels">
-            {megaPanels.map((panel, i) => {
-                if (!panel.items.length) {
-                    return;
-                }
-                const isActive = activePanel === panel || laggyActivePanel === panel || undefined;
-                const isParent = !!panel.items.find((item) => item.current);
-                return (<PrimaryPanel key={i} isParent={isParent} isActive={isActive} panel={panel} isBrowser={isBrowser} setActivePanel={setActivePanel} texts={getTexts(props, defaultMainMenuTexts)} activeRef={activePanelRef}/>);
-            })}
-            {auxiliaryPanel && <AuxiliaryPanel {...auxiliaryPanel}/>}
-          </ul>
-        </div>)}
-    </nav>);
+            return (React.createElement("li", { key: i, className: getBemClass('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, onClick || (!!item.megaPanel && (isBrowser || item.href != null)) ? (
+            // only print script-driven buttons in the browser
+            React.createElement("button", { className: "MainMenu__link", onClick: () => {
+                    item.megaPanel && setActivePanel(item.megaPanel);
+                    onClick && onClick(i, item);
+                    onItemClick && onItemClick(i, item);
+                }, ref: pressed && pressedLinkRef, "aria-pressed": pressed, "aria-controls": controlsId, "aria-label": labelLong, title: labelLong, lang: lang, type: "button" }, label)) : item.href != null ? (
+            // always render links server-side
+            React.createElement(Link, { className: "MainMenu__link", href: item.href, "aria-label": labelLong, title: labelLong, onClick: onItemClick && (() => onItemClick(i, item)), lang: lang }, label)) : undefined // skip rendering non-link menu items server side
+            ));
+        })),
+        '\n\n',
+        megaPanels.length > 0 && (React.createElement("div", { className: getBemClass('MainMenu__panelsWrap', [activePanel && 'active']) },
+            React.createElement("ul", { className: "MainMenu__panels" },
+                megaPanels.map((panel, i) => {
+                    if (!panel.items.length) {
+                        return;
+                    }
+                    const isActive = activePanel === panel || laggyActivePanel === panel || undefined;
+                    const isParent = !!panel.items.find((item) => item.current);
+                    return (React.createElement(PrimaryPanel, { key: i, isParent: isParent, isActive: isActive, panel: panel, isBrowser: isBrowser, setActivePanel: setActivePanel, texts: getTexts(props, defaultMainMenuTexts), activeRef: activePanelRef }));
+                }),
+                auxiliaryPanel && React.createElement(AuxiliaryPanel, Object.assign({}, auxiliaryPanel)))))));
 };
 export default MainMenu;

package/esm/MiniMetrics.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from './_abstract/Button';
+import { ButtonProps } from './_abstract/_Button';
 import { SeenProp } from './utils/seenEffect';
 export declare type MiniMetricsProps = {
     text: string;

package/esm/MiniMetrics.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Button from './_abstract/_Button';
+import SeenEffect from './SeenEffect';
+const MiniMetrics = (props) => {
+    const { text, moreButton, startSeen } = props;
+    return (React.createElement(SeenEffect, { className: "MiniMetrics", startSeen: startSeen },
+        React.createElement("strong", { className: "MiniMetrics__text" }, text),
+        " ",
+        '\n',
+        React.createElement(Button, Object.assign({ bem: "MiniMetrics__more" }, moreButton))));
+};
+export default MiniMetrics;

package/esm/Modal.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import _Modal from '@hugsmidjan/react/Modal';
+const Modal = (props) => {
+    const { closeDelay = 500, texts = {
+        closeButton: 'Loka ',
+    }, bling, children, render = () => children, } = props;
+    return (React.createElement(_Modal, Object.assign({}, props, { bodyWrap: false, bem: "Modal", closeDelay: closeDelay, texts: texts, render: (args) => bling ? (React.createElement(React.Fragment, null,
+            render(args),
+            React.createElement("div", { className: "Modal__blings" },
+                React.createElement("div", { className: "Modal__blings__inner" }, bling)))) : (render(args)), 
+        // eslint-disable-next-line react/no-children-prop
+        children: undefined })));
+};
+export default Modal;

package/esm/{NameCard.jsx → NameCard.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import Button from './_abstract/_Button';
 import breakOnNL from './_abstract/breakOnNL';
-import Button from './_abstract/Button';
 const formatDate = (date) => {
     return typeof date === 'string'
         ? date
@@ -43,16 +43,16 @@ const NameCard = (props) => {
         }
         const texts = getTexts(props, defaultTexts);
         const { updatedLabel, availableLabel, unavailableLabel } = texts;
-        return (<div className="NameCard__meta">
-        {available != null && (<span className={getBemClass('NameCard__availability', available && 'available')}>
-            {available
+        return (React.createElement("div", { className: "NameCard__meta" },
+            available != null && (React.createElement("span", { className: getBemClass('NameCard__availability', available && 'available') },
+                available
                     ? availableLabel || texts.vacancyLabel
-                    : unavailableLabel || texts.noVacancyLabel}{' '}
-          </span>)}
-        {updated != null && (<span className="NameCard__updated">
-            {updatedLabel} {formatDate(updated)}
-          </span>)}
-      </div>);
+                    : unavailableLabel || texts.noVacancyLabel,
+                ' ')),
+            updated != null && (React.createElement("span", { className: "NameCard__updated" },
+                updatedLabel,
+                " ",
+                formatDate(updated)))));
     };
     let contactInfo = props.contactInfo;
     if (!contactInfo) {
@@ -69,19 +69,14 @@ const NameCard = (props) => {
         }
         return item;
     });
-    return (<div className="NameCard">
-      <div className="NameCard__name">{name}</div>
-      {contactInfo.length > 0 && (<p className="NameCard__contactinfo">
-          {cleanContactInfo.map((item, i) => (<>
-              {typeof item === 'string' ? (<span className="NameCard__contactinfo__item">{item}</span>) : (<Button key={i} bem="NameCard__contactinfo__item" href={item.href} aria-label={item.longLabel} title={item.longLabel}>
-                  {item.label}
-                </Button>)}{' '}
-            </>))}
-        </p>)}
-      {location && <p className="NameCard__location">{renderContent(location)}</p>}
-      {hours && <p className="NameCard__hours">{renderContent(hours)}</p>}
-      {aboutText && <p className="NameCard__abouttext">{renderContent(aboutText)}</p>}
-      {renderMeta()}
-    </div>);
+    return (React.createElement("div", { className: "NameCard" },
+        React.createElement("div", { className: "NameCard__name" }, name),
+        contactInfo.length > 0 && (React.createElement("p", { className: "NameCard__contactinfo" }, cleanContactInfo.map((item, i) => (React.createElement(React.Fragment, null,
+            typeof item === 'string' ? (React.createElement("span", { className: "NameCard__contactinfo__item" }, item)) : (React.createElement(Button, { key: i, bem: "NameCard__contactinfo__item", href: item.href, "aria-label": item.longLabel, title: item.longLabel }, item.label)),
+            ' '))))),
+        location && React.createElement("p", { className: "NameCard__location" }, renderContent(location)),
+        hours && React.createElement("p", { className: "NameCard__hours" }, renderContent(hours)),
+        aboutText && React.createElement("p", { className: "NameCard__abouttext" }, renderContent(aboutText)),
+        renderMeta()));
 };
 export default NameCard;

package/esm/NameCards.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import NameCard from './NameCard';
+const NameCards = (props) => {
+    const { items } = props;
+    return (React.createElement("div", { className: "NameCards" }, items.map((item, i) => (React.createElement(NameCard, Object.assign({ key: i }, item))))));
+};
+export default NameCards;

package/esm/NewsHero.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 declare type BlingOptions = 'interesting' | 'snake' | 'pentagon' | 'dome' | 'balls-small' | 'balls-large';
 export declare type NewsHeroProps = {