@reykjavik/hanna-react 0.10.83 → 0.10.85

package/esm/MainMenu.d.ts

@@ -0,0 +1,62 @@
+import { Cleanup } from '@reykjavik/hanna-utils';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary.js';
+import { MegaMenuItem, MegaMenuPanel, PrimaryPanelI18n } from './MainMenu/_PrimaryPanel.js';
+import { SSRSupport } from './utils.js';
+export type MainMenuI18n = Cleanup<{
+    lang?: string;
+    homeLabel?: string;
+} & PrimaryPanelI18n>;
+export declare const defaultMainMenuTexts: DefaultTexts<Required<MainMenuI18n>>;
+export type { AuxilaryPanelIllustration, AuxiliaryPanelProps, MegaMenuItem, MegaMenuPanel, };
+export type MainMenuItem = {
+    label: string;
+    labelLong?: string;
+    lang?: string;
+    /**
+     * Puts a modifier className on the menu item element.
+     *
+     * Example:
+     *
+     * ```html
+     * <li class="MainMenu__item MainMenu__item--${modifier}">
+     * ```
+     * */
+    modifier?: string;
+    current?: boolean;
+    href?: string;
+    /**
+     * Adding `onClick` automatically results in a <button/> element being rendered.
+     *
+     * NOTE: Clicking a MainMenu item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onClick` function explicitly returns `false`.
+     */
+    onClick?: (index: number, item: MainMenuItem) => void | boolean;
+    controlsId?: string;
+};
+export type MainMenuSeparator = '---';
+export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator>;
+export type MainMenuProps = {
+    title: string;
+    items: MainMenuItemList;
+    /**
+     * Link for the homepage - defaults to `"/"` adding a
+     * generic sounding "Home"/"Forsíða" label
+     */
+    homeLink?: string | Omit<MainMenuItem, 'modifier'>;
+    megaPanels?: Array<MegaMenuPanel>;
+    auxiliaryPanel?: AuxiliaryPanelProps;
+    /**
+     * NOTE: Clicking a MainMenu item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onItemClick` function explicitly returns `false`.
+     */
+    onItemClick?: (index: number, item: MainMenuItem) => void | boolean;
+    activePanelId?: string;
+    texts?: MainMenuI18n;
+    lang?: string;
+    ssr?: SSRSupport;
+};
+export declare const MainMenu: (props: MainMenuProps) => JSX.Element | null;
+export default MainMenu;

package/esm/MainMenu.js

@@ -0,0 +1,221 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import focusElm from '@hugsmidjan/qj/focusElm';
+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.js';
+import { AuxiliaryPanel, } from './MainMenu/_Auxiliary.js';
+import { PrimaryPanel, } from './MainMenu/_PrimaryPanel.js';
+import { useHannaUIState } from './utils/HannaUIState.js';
+import { useFormatMonitor } from './utils/useFormatMonitor.js';
+import { useIsBrowserSide } from './utils.js';
+const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((panel) => activeId === panel.id) : undefined;
+export const defaultMainMenuTexts = {
+    is: {
+        lang: 'is',
+        homeLabel: 'Forsíða',
+        backToMenu: 'Loka',
+        backToMenuLong: 'Til baka í valmynd',
+    },
+    en: {
+        lang: 'en',
+        homeLabel: 'Home page',
+        backToMenu: 'Close',
+        backToMenuLong: 'Close and return to menu',
+    },
+    pl: {
+        lang: 'pl',
+        homeLabel: 'Strona główna',
+        backToMenu: 'Zamknij',
+        backToMenuLong: 'Zamknij i wróć do menu',
+    },
+};
+// ---------------------------------------------------------------------------
+const _issueHomeLinkWarnings = (hasHomeItem, hasHomeLinkProp) => {
+    const bothDefined = hasHomeItem && hasHomeLinkProp;
+    const neitherDefined = !hasHomeItem && !hasHomeLinkProp;
+    if (bothDefined) {
+        console.warn('Ignoring a redundant `MainMenuProps.homeLink` value. ' +
+            '(As `MainMenuProps.items` already starts with a "Home" item.)');
+    }
+    else if (neitherDefined) {
+        console.warn('`MainMenuProps.homeLink` is missing. Auto-inserting a generic "home link" with `href="/"`.');
+    }
+};
+const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
+    const items = itemsProp.map((item) => {
+        if (item === '---') {
+            return item;
+        }
+        const href = item.href;
+        const controlsId = item.controlsId || (href && /^#/.test(href) && href.slice(1)) || undefined;
+        const megaPanel = controlsId
+            ? megaPanels.find((panel) => panel.id === controlsId)
+            : undefined;
+        return Object.assign(Object.assign({}, item), { controlsId, megaPanel });
+    });
+    const firstItem = items[0];
+    if (firstItem) {
+        // Prepend menu item list with a "home link", unless it's already there
+        const hasHomeItem = typeof firstItem === 'object' && firstItem.modifier === 'home';
+        if (process.env.NODE_ENV !== 'production') {
+            _issueHomeLinkWarnings(hasHomeItem, !!homeLink);
+        }
+        if (!hasHomeItem) {
+            if (!homeLink || typeof homeLink === 'string') {
+                let label = texts.homeLabel;
+                let lang;
+                if (label == null) {
+                    const def = defaultMainMenuTexts[texts.lang || 'en'] ||
+                        defaultMainMenuTexts.en ||
+                        defaultMainMenuTexts.is;
+                    label = def.homeLabel;
+                    lang = def.lang;
+                }
+                homeLink = { href: homeLink || '/', label, lang };
+            }
+            items.unshift(Object.assign(Object.assign({}, homeLink), { modifier: 'home' }));
+        }
+    }
+    return items;
+};
+// ---------------------------------------------------------------------------
+const emptyPanelList = [];
+export const MainMenu = (props) => {
+    const { title, megaPanels = emptyPanelList, onItemClick, ssr, auxiliaryPanel } = props;
+    const texts = getTexts(props, defaultMainMenuTexts);
+    const { closeHamburgerMenu } = useHannaUIState();
+    const isBrowser = useIsBrowserSide(ssr);
+    const menuElmRef = useRef(null);
+    const pressedLinkRef = useRef(null);
+    const activePanelRef = useRef(null);
+    const [activePanel, _setActivePanel] = useState(() => isBrowser && findActivePanel(megaPanels, props.activePanelId));
+    const [laggyActivePanel, setLaggyActivePanel] = useShortState();
+    const setActivePanel = useMemo(() => isBrowser
+        ? (newActive, setFocus = true) => {
+            const htmlElmDataset = document.documentElement.dataset;
+            // const menuElm = menuElmRef.current as HTMLElement;
+            _setActivePanel((activePanel) => {
+                const scrollElm = getPageScrollElm();
+                if (!newActive) {
+                    activePanel && setLaggyActivePanel(activePanel, 1000);
+                    scrollElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
+                    delete htmlElmDataset.scrollTop;
+                    delete htmlElmDataset.megaPanelActive;
+                }
+                else {
+                    setLaggyActivePanel(undefined, 0);
+                    htmlElmDataset.scrollTop = String(scrollElm.scrollTop);
+                    scrollElm.scrollTop = 0;
+                    htmlElmDataset.megaPanelActive = '';
+                }
+                if (setFocus) {
+                    const pressedLinkElm = pressedLinkRef.current; // pressedLinkElm will be undefined when setTimeout fires
+                    setTimeout(() => {
+                        if (!newActive) {
+                            // const buttonElm = menuElm.querySelector<HTMLButtonElement>(
+                            // 	'button.MainMenu__link[aria-pressed="true"]'
+                            // );
+                            focusElm(pressedLinkElm);
+                        }
+                        else if (newActive !== activePanel) {
+                            // const panelElm = menuElm.querySelector<HTMLButtonElement>(
+                            // 	'.PrimaryPanel--active'
+                            // );
+                            focusElm(activePanelRef.current);
+                        }
+                    }, 100);
+                }
+                return newActive;
+            });
+        }
+        : () => undefined, [setLaggyActivePanel, isBrowser]);
+    useFormatMonitor((media) => {
+        if (media.leftTopmenu) {
+            setActivePanel(undefined);
+        }
+    });
+    const hasActivePanel = !!activePanel;
+    const menuItems = useMemo(() => normalizeMenuItems(props.items, megaPanels, props.homeLink, texts), [props.items, props.homeLink, megaPanels, texts]);
+    useEffect(() => {
+        setActivePanel(findActivePanel(megaPanels, props.activePanelId));
+    }, [props.activePanelId, megaPanels, setActivePanel]);
+    useEffect(() => {
+        const menuElm = menuElmRef.current;
+        if (!isBrowser || !hasActivePanel || !menuElm) {
+            return;
+        }
+        const escHandler = (e) => {
+            if (e.key === 'Escape') {
+                setActivePanel(undefined);
+            }
+        };
+        const clickHandler = (e) => {
+            if (!menuElm.contains(e.target)) {
+                setActivePanel(undefined);
+            }
+        };
+        document.addEventListener('keydown', escHandler);
+        document.addEventListener('click', clickHandler, true);
+        return () => {
+            document.removeEventListener('keydown', escHandler);
+            document.removeEventListener('click', clickHandler, true);
+        };
+    }, [hasActivePanel, setActivePanel, isBrowser]);
+    if (menuItems.length === 0) {
+        return null;
+    }
+    /** Close mega panels on clicks their links. */
+    const handleMegaPanelClicks = (e) => {
+        if (
+        // NOTE: We can NOT check for `e.defaultPrevented` because if the current
+        // LinkRenderer is something like Next.js or Remix's <Link/> compponent
+        // then default is ALWAYS prevented
+        e.target.closest('a[href]')) {
+            setActivePanel(undefined);
+            closeHamburgerMenu();
+        }
+    };
+    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 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 (React.createElement("li", { key: i, className: getBemClass('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, onClick || (!!item.megaPanel && (isBrowser || !item.href)) ? (
+            // only print script-driven buttons in the browser
+            React.createElement("button", { className: "MainMenu__link", onClick: () => {
+                    const keepOpen1 = onClick && onClick(i, item) === false;
+                    const keepOpen2 = onItemClick && onItemClick(i, item) === false;
+                    const { megaPanel } = item;
+                    if (megaPanel) {
+                        setActivePanel(megaPanel !== activePanel ? megaPanel : undefined);
+                    }
+                    else {
+                        !(keepOpen1 || keepOpen2) && closeHamburgerMenu();
+                    }
+                }, 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: () => {
+                    const keepOpen = onItemClick && onItemClick(i, item) === false;
+                    !keepOpen && closeHamburgerMenu();
+                }, 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", onClick: handleMegaPanelClicks },
+                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: texts, activeRef: activePanelRef }));
+                }),
+                auxiliaryPanel && React.createElement(AuxiliaryPanel, Object.assign({}, auxiliaryPanel)))))));
+};
+export default MainMenu;

package/esm/MiniMetrics.d.ts

@@ -0,0 +1,8 @@
+import { ButtonProps } from './_abstract/_Button.js';
+import { SeenProp } from './utils/seenEffect.js';
+export type MiniMetricsProps = {
+    text: string;
+    moreButton: ButtonProps;
+} & SeenProp;
+export declare const MiniMetrics: (props: MiniMetricsProps) => JSX.Element;
+export default MiniMetrics;

package/esm/MiniMetrics.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from './_abstract/_Button.js';
+import SeenEffect from './SeenEffect.js';
+export 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.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { ModalProps as _ModalProps } from '@hugsmidjan/react/Modal';
+export type ModalProps = Omit<_ModalProps, 'bem' | 'bodyWrap' | 'modifier'> & {
+    modifier?: 'w6' | 'w8' | 'w10';
+    bling?: ReactElement;
+};
+export declare const Modal: (props: ModalProps) => JSX.Element;
+export default Modal;

package/esm/Modal.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import _Modal from '@hugsmidjan/react/Modal';
+export 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.d.ts

@@ -0,0 +1,64 @@
+export type NameCardI18n = {
+    updatedLabel: string;
+    availableLabel: string;
+    unavailableLabel: string;
+    /** @deprecated Use availableLabel instead  (will be removed in v0.11) */
+    vacancyLabel?: string;
+    /** @deprecated Use unavailableLabel instead  (will be removed in v0.11) */
+    noVacancyLabel?: string;
+    /** @deprecated Not used anymore  (will be rmoved in v0.11) */
+    telLabel?: string;
+};
+type ContactInfo = {
+    href: string;
+    label: string;
+    longLabel?: string;
+};
+/** @deprecated use label and longLabel props instead  (Will be removed in v0.11) */
+type DeprecatedContactInfo = {
+    href: string;
+    value: string;
+    label?: string;
+};
+export type NameCardProps = {
+    name: string;
+    /** Phone numbers, e-mail addresses, etc. */
+    contactInfo?: Array<string | ContactInfo | DeprecatedContactInfo>;
+    /** Address/location info
+     *
+     * Special handling of string:
+     * Inserts `<br/>`s on `\n`. Collapses multiple `\n`s.
+     *
+     * Only simple, inline element HTML allowed
+     */
+    location?: string | JSX.Element;
+    /** Misc info such as opening-hours, etc.
+     *
+     * Special handling of string:
+     * Inserts `<br/>`s on `\n`. Collapses multiple `\n`s.
+     *
+     * Only simple, inline element HTML allowed
+     */
+    aboutText?: string | JSX.Element;
+    /**
+     * Designated for info about working/opening hours
+     *
+     * Special handling of string:
+     * Inserts `<br/>`s on `\n`. Collapses multiple `\n`s.
+     *
+     * Only simple, inline element HTML allowed
+     */
+    hours?: string | JSX.Element;
+    /** Displays "active" indicator. Use for vacancies, inline-status, etc. */
+    available?: boolean;
+    /** Meta data about freshness status, etc. */
+    updated?: string | Date;
+    lang?: string;
+    texts?: NameCardI18n;
+    /** @deprecated Use `available` instead  (will be removed in v0.11) */
+    vacancy?: boolean;
+    /** @deprecated Use `contactInfo` instead  (will be removed in v0.11) */
+    tel?: string | Array<string>;
+};
+export declare const NameCard: (props: NameCardProps) => JSX.Element;
+export default NameCard;

package/esm/NameCard.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { Button } from './_abstract/_Button.js';
+import { breakOnNL } from './_abstract/breakOnNL.js';
+const formatDate = (date) => {
+    return typeof date === 'string'
+        ? date
+        : date.toISOString().slice(0, 10).replace(/-/g, '.');
+};
+const _telToContactInfo = (tel) => {
+    if (!tel) {
+        return;
+    }
+    tel = typeof tel === 'string' ? [tel] : tel;
+    return tel.map((tel) => ({
+        href: 'tel:' + tel,
+        value: tel,
+    }));
+};
+const renderContent = (content) => typeof content === 'string' ? breakOnNL(content) : content;
+const defaultTexts = {
+    en: {
+        updatedLabel: 'Updated on',
+        availableLabel: '',
+        unavailableLabel: '',
+        vacancyLabel: 'Vacancy',
+        noVacancyLabel: 'No vacancy',
+    },
+    is: {
+        updatedLabel: 'Uppfært síðast',
+        availableLabel: '',
+        unavailableLabel: '',
+        vacancyLabel: 'Laus pláss',
+        noVacancyLabel: 'Ekki laus pláss',
+    },
+};
+export const NameCard = (props) => {
+    const { name, location, hours, aboutText, available = props.vacancy, updated } = props;
+    const renderMeta = () => {
+        if (available == null && !updated) {
+            return;
+        }
+        const texts = getTexts(props, defaultTexts);
+        const { updatedLabel, availableLabel, unavailableLabel } = texts;
+        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,
+                ' ')),
+            updated != null && (React.createElement("span", { className: "NameCard__updated" },
+                updatedLabel,
+                " ",
+                formatDate(updated)))));
+    };
+    let contactInfo = props.contactInfo;
+    if (!contactInfo) {
+        contactInfo = _telToContactInfo(props.tel) || [];
+    }
+    // Remove/map @deprecated contactinfo items
+    const cleanContactInfo = contactInfo.map((item) => {
+        if (typeof item !== 'string' && 'value' in item) {
+            return {
+                href: item.href,
+                label: item.value,
+                longLabel: item.label,
+            };
+        }
+        return item;
+    });
+    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.d.ts

@@ -0,0 +1,6 @@
+import { NameCardProps } from './NameCard.js';
+type NameCardsProps = {
+    items: Array<NameCardProps>;
+};
+export declare const NameCards: (props: NameCardsProps) => JSX.Element;
+export default NameCards;

package/esm/NameCards.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import NameCard from './NameCard.js';
+export 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

@@ -0,0 +1,14 @@
+import { ImageProps } from './_abstract/_Image.js';
+import { SeenProp } from './utils/seenEffect.js';
+type BlingOptions = 'interesting' | 'snake' | 'pentagon' | 'dome' | 'balls-small' | 'balls-large';
+export type NewsHeroProps = {
+    title: string;
+    meta?: string;
+    summary?: string | JSX.Element;
+    /** For custom sharing component  */
+    sharing?: boolean | (() => JSX.Element);
+    image?: ImageProps;
+    blingType?: BlingOptions;
+} & SeenProp;
+export declare const NewsHero: (props: NewsHeroProps) => JSX.Element;
+export default NewsHero;

package/esm/NewsHero.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getStableRandomItem } from '@reykjavik/hanna-utils';
+import { Blings } from './_abstract/_Blings.js';
+import { Image } from './_abstract/_Image.js';
+import { useSeenEffect } from './utils/seenEffect.js';
+import ShareButtons from './ShareButtons.js';
+const blingOptions = {
+    interesting: [
+        {
+            type: 'circle-xlarge',
+            parent: 'center',
+        },
+        {
+            type: 'loops-small',
+            color: 'secondary',
+            align: 'left-ish',
+            vertical: 'down-ish',
+            parent: 'center',
+        },
+    ],
+    snake: [
+        {
+            type: 'snake-large',
+            align: 'left',
+            parent: 'top',
+            vertical: 'down',
+        },
+    ],
+    pentagon: [
+        {
+            type: 'pentagon-large',
+            align: 'left',
+            parent: 'center',
+        },
+    ],
+    dome: [
+        {
+            type: 'dome-large',
+            align: 'left-ish',
+            parent: 'top',
+            vertical: 'down',
+        },
+    ],
+    'balls-small': [
+        {
+            type: 'circle-large',
+            align: 'left',
+            parent: 'center',
+        },
+        {
+            type: 'circle-small',
+            color: 'secondary',
+            align: 'right',
+            parent: 'bottom',
+            vertical: 'down',
+        },
+    ],
+    'balls-large': [
+        {
+            type: 'halfcircle-down-large',
+            align: 'left',
+            parent: 'bottom',
+            vertical: 'up',
+        },
+        {
+            type: 'circle-medium',
+            color: 'secondary',
+            align: 'left-center',
+            parent: 'bottom',
+        },
+    ],
+};
+export const NewsHero = (props) => {
+    const { title, sharing = true, meta, summary, image, blingType, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const blings = (blingType && blingOptions[blingType]) || getStableRandomItem(blingOptions, title);
+    return (React.createElement("div", { className: getBemClass('NewsHero', [!image && 'align--right']), ref: ref },
+        React.createElement("div", { className: "NewsHero__content" },
+            React.createElement("h1", { className: "NewsHero__title" }, title),
+            meta && React.createElement("span", { className: "NewsHero__meta" }, meta),
+            React.createElement("div", { className: "NewsHero__summary" }, summary),
+            sharing === true ? React.createElement(ShareButtons, null) : sharing && sharing()),
+        image ? (React.createElement(Image, Object.assign({ className: "NewsHero__image" }, image))) : (React.createElement(Blings, { blings: blings }))));
+};
+export default NewsHero;

package/esm/PageFilter.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { EitherObj } from '@reykjavik/hanna-utils';
+import { SeenProp } from './utils/seenEffect.js';
+export type PageFilterProps = {
+    title: string;
+    summary?: React.ReactNode;
+    footnote?: React.ReactNode;
+    buttonRow?: React.ReactNode;
+    underlap?: boolean;
+} & EitherObj<{
+    filters: React.ReactNode;
+}, {
+    children: React.ReactNode;
+}> & SeenProp;
+export declare const PageFilter: (props: PageFilterProps) => JSX.Element;
+export default PageFilter;

package/esm/PageFilter.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect.js';
+import Footnote from './Footnote.js';
+export const PageFilter = (props) => {
+    const { title, summary, footnote, filters, children, buttonRow, underlap, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", { className: getBemClass('PageFilter', underlap && 'underlap'), ref: ref },
+        React.createElement("h2", { className: "PageFilter__title" }, title),
+        summary && React.createElement("div", { className: "PageFilter__summary" }, summary),
+        React.createElement("div", { className: "PageFilter__filters" }, filters || children),
+        React.createElement("div", { className: "PageFilter__buttons" }, buttonRow),
+        footnote && React.createElement(Footnote, null, footnote)));
+};
+export default PageFilter;

package/esm/PageHeading.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SeenProp } from './utils/seenEffect.js';
+export type PageHeadingProps = {
+    Tag?: 'h1' | 'h2';
+    align?: 'right';
+    small?: boolean;
+    children: ReactNode;
+} & SeenProp;
+export declare const PageHeading: (props: PageHeadingProps) => JSX.Element;
+export default PageHeading;

package/esm/PageHeading.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect.js';
+export const PageHeading = (props) => {
+    const { Tag = 'h1', align, small, children, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement(Tag, { className: getBemClass('PageHeading', [
+            small && 'small',
+            align === 'right' && 'align--' + align,
+        ]), ref: ref }, children));
+};
+export default PageHeading;

package/esm/Picture.d.ts

@@ -0,0 +1,7 @@
+import { ImagePropsLinked } from './_abstract/_Image.js';
+export type PictureProps = ImagePropsLinked & {
+    contain?: boolean;
+    className?: string;
+};
+export declare const Picture: (props: PictureProps) => JSX.Element;
+export default Picture;