@reykjavik/hanna-react 0.10.160 → 0.10.161

package/ButtonTertiary.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ButtonProps, ButtonVariantProps } from './_abstract/_Button.js';
 type TertiarySize = Extract<ButtonVariantProps['size'], 'normal' | 'small'>;
-type TertiaryIcon = Extract<ButtonVariantProps['icon'], 'none' | 'go-back'>;
+type TertiaryIcon = Extract<ButtonVariantProps['icon'], 'go-back'>;
 export type ButtonTertiaryProps = ButtonProps & Omit<ButtonVariantProps, 'icon' | 'size'> & {
     size?: TertiarySize;
     icon?: TertiaryIcon;

package/ButtonTertiary.js

@@ -9,13 +9,12 @@ const sizes = {
     small: 'small',
 };
 const icons = {
-    none: 'none',
     'go-back': 'go-back',
 };
 // NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
 // `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 const ButtonTertiary = (props) => {
-    const { size = 'normal', icon = 'none' } = props;
+    const { size = 'normal', icon = '' } = props;
     return react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "ButtonTertiary" }, props, { size: sizes[size], icon: icons[icon] }));
 };
 exports.ButtonTertiary = ButtonTertiary;

package/CHANGELOG.md

@@ -4,6 +4,22 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.161
+
+_2026-01-15_
+
+- feat: Add component `Icon`
+- feat: Add component `ReykjavikWaves`
+- `DropdownButton`:
+  - feat: Add prop `Toggler` for custom toggler content
+  - feat: Add "customitem" object with `Content`, `modifier` and `current`
+- `MainMenu2`:
+  - feat: Add prop `redhot` to `MainMenu2Props.items.hot` items to always show
+    them on mobile
+  - feat: Add "customitem" object with `Content`, `modifier` and `current`
+  - docs: Minor JSDoc corrections for on-click handlers
+- fix: Clicking `.SearchInput__button` always passed empty string as value
+
 ## 0.10.160
 
 _2025-10-13_

package/DropdownButton.d.ts

@@ -1,29 +1,85 @@
-import React from 'react';
-import { IconName } from '@reykjavik/hanna-css';
+import { HTMLAttributeAnchorTarget, ReactElement } from 'react';
+import { IconToken } from '@reykjavik/hanna-css';
+import { ClassNameModifiers, EitherObj } from '@reykjavik/hanna-utils';
+import { IconName_old } from '../../hanna-css/src/lib/icons.js';
 import { ButtonVariantProps } from './_abstract/_Button.js';
 import { MainMenu2Item } from './MainMenu2.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 type Prefix<record extends Record<string, unknown>, prefix extends string> = {
     [K in keyof record as `${prefix}${Capitalize<string & K>}`]: record[K];
 };
-export type DropdownButtonItem = MainMenu2Item & {
-    icon?: IconName;
+export type DropdownButtonItem = {
+    /** Visible label text */
+    label: string | ReactElement;
+    /** Un-abbreviated label set as `aria-label=""` */
+    labelLong?: string;
+    /** Language of the link label */
+    lang?: string;
+    /** Languge of the linked resource */
+    hrefLang?: string;
+    /**
+     * Puts a modifier className for the menu __item <li/> element.
+     * */
+    modifier?: ClassNameModifiers;
+    /** Signifies if the menu item is part of the page's breadcrumb trail */
+    current?: boolean;
+    /**
+     * The URL the link points to.
+     *
+     * If neither `href` nor `onClick` is passed, then the item is not rendered
+     * at all.
+     */
+    href?: string;
+    /** Sets `target=""` on anchor tags with a `href` attribute. */
+    target?: HTMLAttributeAnchorTarget;
+    /**
+     * Adding `onClick` automatically results in a <button/> element being
+     * rendered. If `href` is also passed, then a <a href/> element is rendered
+     * during initial (server-side) render, which then gets replaced by a
+     * <button/> element during the first client-side
+     *
+     * NOTE: Clicking a menu item will automatically close tghe menu
+     * … unless the `onClick` function explicitly returns `false`.
+     */
+    onClick?: (item: MainMenu2Item) => void | boolean;
+    /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
+    controlsId?: string;
+    Content?: never;
+    /** Seldom used flag for buttons that do destruction */
+    destructive?: boolean;
+    icon?: IconToken | IconName_old;
 };
-export type DropdownButtonCustomItem = (props: {
+type DropdownButtonCustomItemFn = (props: {
     closeMenu: () => void;
-}) => React.ReactElement;
+}) => ReactElement;
+export type DropdownButtonCustomItem = Pick<DropdownButtonItem, 'modifier' | 'current'> & {
+    Content: DropdownButtonCustomItemFn;
+};
+/** Renders a divider line between `Dropdown*Item`s with an optional legend */
+export type DropdownButtonItemDivider = {
+    divider: true;
+    label?: string;
+};
 export type DropdownButtonProps = {
-    label: string | NonNullable<React.ReactElement>;
-    labelLong?: string;
-    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
+    /** The items to display inside the dropdown menu */
+    items: Array<DropdownButtonItem | DropdownButtonCustomItem | DropdownButtonItemDivider>;
     /**
-     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
-     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * NOTE: Clicking a DropdownButton item will automatically close the drropdown
      * … unless the `onItemClick` function explicitly returns `false`.
      */
     onItemClick?: (item: MainMenu2Item) => void | boolean;
-    /** Default: `"seconcary"` */
+} & EitherObj<{
+    /** Label for the toggler button */
+    label: string | ReactElement;
+    /** Longer accessible toggler label text */
+    labelLong?: string;
+    /** Default: `"secondary"` */
     buttonType?: 'primary' | 'secondary';
-} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'>, {
+    /** Custom toggler rendering function component */
+    Toggler: (props: {
+        isOpen: boolean;
+    }) => ReactElement;
+}> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
 export declare const DropdownButton: (props: DropdownButtonProps) => JSX.Element;
 export {};

package/DropdownButton.js

@@ -15,7 +15,7 @@ const DropdownButton = (props) => {
     const [isOpen, setIsOpen] = (0, useLaggedState_js_1.useLaggedState)(false, 10);
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(props.ssr);
     const [isHovering, setIsHovering] = (0, react_1.useState)(false);
-    const wrapperRef = react_1.default.useRef(null);
+    const wrapperRef = (0, react_1.useRef)(null);
     const closeMenuStat = () => setIsOpen(false, 0);
     (0, useOnClickOutside_js_1.useOnClickOutside)(wrapperRef, isOpen && closeMenuStat);
     (0, useCallbackOnEsc_js_1.useCallbackOnEsc)(isOpen && closeMenuStat);
@@ -25,6 +25,10 @@ const DropdownButton = (props) => {
         whileElementsMounted: react_2.autoUpdate,
     });
     const { onItemClick, wrapperProps = {} } = props;
+    const toggle = (e) => {
+        e.preventDefault();
+        setIsOpen(!isOpen, 0);
+    };
     return (react_1.default.createElement("details", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('DropdownButton', isOpen && 'open', wrapperProps.className), open: isOpen, onBlur: (e) => {
             var _a;
             if (!isHovering) {
@@ -39,10 +43,8 @@ const DropdownButton = (props) => {
             refs.setReference(elm.querySelector('.DropdownButton__toggler'));
             refs.setFloating(elm.querySelector('.DropdownButton__menu'));
         } }),
-        react_1.default.createElement(_Button_js_1.Button, { as: "summary", className: "DropdownButton__toggler", bem: props.buttonType === 'primary' ? 'ButtonPrimary' : 'ButtonSecondary', icon: props.buttonIcon, size: props.buttonSize, variant: props.buttonVariant, "aria-label": props.labelLong, onClick: (e) => {
-                e.preventDefault();
-                setIsOpen(!isOpen, 0);
-            } }, props.label),
+        props.Toggler ? (react_1.default.createElement("summary", { className: "DropdownButton__toggler", onClick: toggle },
+            react_1.default.createElement(props.Toggler, { isOpen: isOpen }))) : (react_1.default.createElement(_Button_js_1.Button, { as: "summary", className: "DropdownButton__toggler", bem: props.buttonType === 'primary' ? 'ButtonPrimary' : 'ButtonSecondary', icon: props.buttonIcon, size: props.buttonSize, variant: props.buttonVariant, "aria-label": props.labelLong, onClick: toggle }, props.label)),
         react_1.default.createElement("ul", { className: "DropdownButton__menu", onMouseEnter: () => {
                 setIsHovering(true);
             }, onMouseLeave: () => {
@@ -55,26 +57,44 @@ const DropdownButton = (props) => {
                     '--DropdownButton-pos-x': `${x}px`,
                 }
                 : undefined },
-            props.items.map((item, i) => {
+            props.items.map(
+            // eslint-disable-next-line complexity
+            (item, i) => {
+                if ('divider' in item) {
+                    if ((i === 0 && !item.label) || i === props.items.length - 1) {
+                        // Gracefully omit pointless dividers
+                        return null;
+                    }
+                    return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('DropdownButton__itemDivider', item.label && 'labelled') }, item.label || false));
+                }
                 if (typeof item === 'function') {
-                    const Item = item;
-                    return (react_1.default.createElement("li", { key: i, className: "DropdownButton__item" },
-                        react_1.default.createElement(Item, { closeMenu: closeMenuStat })));
+                    item = { Content: item };
+                }
+                const itemProps = {
+                    className: (0, hanna_utils_1.modifiedClass)('DropdownButton__item', item.modifier),
+                    'aria-current': item.current || undefined,
+                };
+                if ('Content' in item && item.Content) {
+                    return (react_1.default.createElement("li", Object.assign({ key: i, "data-customitem": "" }, itemProps),
+                        react_1.default.createElement(item.Content, { closeMenu: closeMenuStat })));
                 }
-                const { label, onClick, href } = item;
+                const { label, onClick, href, destructive } = item;
                 const commonProps = {
-                    className: 'DropdownButton__itembutton',
+                    className: (0, hanna_utils_1.modifiedClass)('DropdownButton__itembutton', destructive && 'destructive'),
                     lang: item.lang,
                     'data-icon': item.icon,
                     'arial-label': item.labelLong,
                 };
                 const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+                // TypeScript type-narrowing helper for the onClick callbacks below — because
+                // `item` is a variable and could hypothetically change before the click occurs
+                const _item = item;
                 return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('DropdownButton__item', item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (react_1.default.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: () => {
-                        const keepOpen1 = onClick && onClick(item) === false;
-                        const keepOpen2 = onItemClick && onItemClick(item) === false;
+                        const keepOpen1 = onClick && onClick(_item) === false;
+                        const keepOpen2 = onItemClick && onItemClick(_item) === false;
                         !(keepOpen1 || keepOpen2) && closeMenuStat();
                     } }), label)) : href != null ? (react_1.default.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target, onClick: () => {
-                        const keepOpen = onItemClick && onItemClick(item) === false;
+                        const keepOpen = onItemClick && onItemClick(_item) === false;
                         !keepOpen && closeMenuStat();
                     } }), label)) : null));
             }),

package/Icon.d.ts

@@ -0,0 +1,7 @@
+import { IconToken } from '../../hanna-css/src/iconfontTokens.js';
+import { HTMLProps } from './utils.js';
+export type IconProps = {
+    type: IconToken;
+    size?: 'small' | 'medium' | 'large';
+} & HTMLProps<'span'>;
+export declare const Icon: (props: IconProps) => JSX.Element;

package/Icon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const Icon = (props) => {
+    const { className, type, size = 'medium' } = props, rest = tslib_1.__rest(props, ["className", "type", "size"]);
+    return (react_1.default.createElement("span", Object.assign({}, rest, { className: (0, hanna_utils_1.classes)('Icon', props.className), "data-icon": type, "data-icon-size": size !== 'medium' ? size : undefined })));
+};
+exports.Icon = Icon;

package/MainMenu2.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { IconName, IconToken } from '@reykjavik/hanna-css';
 import { ClassNameModifiers, Cleanup, EitherObj } from '@reykjavik/hanna-utils';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
@@ -44,32 +45,35 @@ export type MainMenu2Item = {
      * during initial (server-side) render, which then gets replaced by a
      * <button/> element during the first client-side
      *
-     * NOTE: Clicking a menu item will automatically close HannaUIState's
-     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * NOTE: Clicking a menu item will automatically close tghe menu
      * … unless the `onClick` function explicitly returns `false`.
      */
     onClick?: (item: MainMenu2Item) => void | boolean;
     /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
     controlsId?: string;
+    Content?: never;
 };
 export type MainMenu2ButtonItem = MainMenu2Item & {
-    icon?: 'search' | 'user' | 'alert' | 'globe';
+    icon?: IconToken | IconName;
 };
-export type MainMenu2CustomItem = (props: {
+type MainMenu2CustomItemFn = (props: {
     closeMenu: () => void;
     openMenu: () => void;
 }) => ReactElement;
+export type MainMenu2CustomItem = Pick<MainMenu2Item, 'modifier' | 'current'> & {
+    Content: MainMenu2CustomItemFn;
+};
 export type MainMenu2SubMenuItem = MainMenu2Item & {
     descr?: string;
 };
 export type MainMenu2SubMenu = {
     title: string;
     current?: boolean;
-    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
+    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | MainMenu2CustomItemFn | Falseish>;
 };
-export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | Falseish>;
-export type MainMenu2ButtonItemList = Array<MainMenu2ButtonItem | MainMenu2CustomItem | Falseish>;
-export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
+export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | MainMenu2CustomItemFn | Falseish>;
+export type MainMenu2ButtonItemList<Extra = unknown> = Array<(MainMenu2ButtonItem & Extra) | (MainMenu2CustomItem & Extra) | MainMenu2CustomItemFn | Falseish>;
+export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | MainMenu2CustomItemFn | Falseish>;
 export type MainMenu2Props = {
     /**
      * URL for the mandatory (usually screen-reader-only) homepage Link.
@@ -96,7 +100,9 @@ export type MainMenu2Props = {
          * "Open Menu" button. Make sure to only use 2–3 items, and remember that
          * they may be hidden on smaller screens.
          */
-        hot?: MainMenu2ButtonItemList;
+        hot?: MainMenu2ButtonItemList<{
+            redhot?: true;
+        }>;
         extra?: MainMenu2ButtonItemList;
         relatedTitle?: string;
         related?: MainMenu2ButtonItemList;
@@ -104,8 +110,7 @@ export type MainMenu2Props = {
     /** Visual type */
     variant?: 'default' | 'light';
     /**
-     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
-     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * NOTE: Clicking a `MainMenu2` item will automatically close the menu
      * … unless the `onItemClick` function explicitly returns `false`.
      */
     onItemClick?: (item: MainMenu2Item) => void | boolean;

package/MainMenu2.js

@@ -47,15 +47,6 @@ exports.defaultMainMenu2Texts = {
     },
 };
 // ---------------------------------------------------------------------------
-const iconMap = {
-    alert: 'info',
-    globe: undefined,
-    search: 'search',
-    user: 'user',
-    // NOTE: We're temporarily coerceing `IconName` to `ButtonIcon`
-    // TODO: Remove this once Hanna icons (and `ButtonIcons` sperifically)
-    // have been expanded better standardised.
-};
 /**
  * Function that turns menu item props/objects into HTML
  * rendering <a/> or <button/> elements depending on the context,
@@ -63,18 +54,29 @@ const iconMap = {
  */
 const getRenderers = (props) => {
     const { onItemClick, closeMenu, openMenu, isBrowser } = props;
+    // eslint-disable-next-line complexity
     const renderItem = (classPrefix, item, opts = {}) => {
         if (!item) {
             return;
         }
         const { key, Tag = 'li', button } = opts;
         if (typeof item === 'function') {
-            const Item = item;
-            return (react_1.default.createElement("li", { key: key, className: `${classPrefix}item` },
-                react_1.default.createElement(Item, { closeMenu: closeMenu, openMenu: openMenu })));
+            item = { Content: item };
+        }
+        const itemProps = {
+            key,
+            className: (0, hanna_utils_1.modifiedClass)(`${classPrefix}item`, item.modifier),
+            'aria-current': item.current || undefined,
+        };
+        if ('Content' in item && item.Content) {
+            return (react_1.default.createElement(Tag, Object.assign({ "data-customitem": "" }, itemProps),
+                react_1.default.createElement(item.Content, { closeMenu: closeMenu, openMenu: openMenu })));
         }
         const linkClassName = `${classPrefix}link`;
         const { label, labelLong, href, target, lang, controlsId, onClick, descr, icon } = item;
+        // TypeScript type-narrowing helper for the onClick callbacks below — because
+        // `item` is a variable and could hypothetically change before the click occurs
+        const _item = item;
         const itemDescr = descr && (react_1.default.createElement(react_1.default.Fragment, null,
             ' ',
             react_1.default.createElement("small", { className: `${linkClassName}__descr` }, descr)));
@@ -82,26 +84,25 @@ const getRenderers = (props) => {
         const LinkTag = button ? ButtonSecondary_js_1.default : _Link_js_1.Link;
         const commonProps = {
             className: linkClassName,
-            'data-icon': icon ? iconMap[icon] : undefined,
+            'data-icon': icon,
             'arial-label': labelLong,
             title: labelLong,
             lang,
         };
-        const buttonCompProps = button
-            ? {
-                size: 'small',
-            }
-            : undefined;
+        if (button) {
+            console.log('Rendering button for menu item:', commonProps);
+        }
+        const buttonCompProps = button ? { size: 'small' } : undefined;
         const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
         return (react_1.default.createElement(Tag, { key: key, className: (0, hanna_utils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
-                const keepOpen1 = onClick && onClick(item) === false;
-                const keepOpen2 = onItemClick && onItemClick(item) === false;
+                const keepOpen1 = onClick && onClick(_item) === false;
+                const keepOpen2 = onItemClick && onItemClick(_item) === false;
                 !(keepOpen1 || keepOpen2) && closeMenu();
             } }, buttonCompProps),
             label,
             " ",
             itemDescr)) : href != null ? (react_1.default.createElement(LinkTag, Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: target, onClick: () => {
-                const keepOpen = onItemClick && onItemClick(item) === false;
+                const keepOpen = onItemClick && onItemClick(_item) === false;
                 !keepOpen && closeMenu();
             } }, buttonCompProps),
             label,
@@ -119,6 +120,7 @@ const getRenderers = (props) => {
 };
 // eslint-disable-next-line complexity
 const MainMenu2 = (props) => {
+    var _a;
     const { homeLink = '/', items, onItemClick, illustration, imageUrl, variant, wrapperProps = {}, } = props;
     const domid = (0, utils_js_1.useDomid)(wrapperProps.id);
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(props.ssr);
@@ -239,7 +241,12 @@ const MainMenu2 = (props) => {
                     }
                     return renderItem('MainMenu2__main__', mainItem, { key: i, Tag: 'div' });
                 }))),
-            renderList('MainMenu2__hot__', items.hot, { buttons: true }),
+            renderList('MainMenu2__hot__', (_a = items.hot) === null || _a === void 0 ? void 0 : _a.map((i) => {
+                if (i && 'redhot' in i) {
+                    return Object.assign(Object.assign({}, i), { modifier: i.modifier ? [i.modifier, 'redhot'] : 'redhot' });
+                }
+                return i;
+            }), { buttons: true }),
             renderList('MainMenu2__extra__', items.extra, { buttons: true }),
             items.related && items.related.length > 0 && (react_1.default.createElement("div", { className: "MainMenu2__related" },
                 items.relatedTitle && (react_1.default.createElement("h3", { className: "MainMenu2__related__title" }, items.relatedTitle)),

package/ReykjavikWaves.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
+export type ReykjavikWavesProps = {
+    small?: boolean;
+    className?: string;
+    children?: ReactNode;
+} & WrapperElmProps<'div', 'className'>;
+export declare const ReykjavikWaves: (props: ReykjavikWavesProps) => JSX.Element;

package/ReykjavikWaves.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReykjavikWaves = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const ReykjavikWaves = (props) => (react_1.default.createElement("div", Object.assign({}, props.wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('ReykjavikWaves', props.small && 'small', props.className) }), props.children));
+exports.ReykjavikWaves = ReykjavikWaves;

package/SearchInput.js

@@ -30,7 +30,7 @@ const SearchInput = (props) => {
                     : onKeyDown }, inputElementProps, { ref: inputRef })),
             ' ',
             showButton && (react_1.default.createElement("button", { className: "SearchInput__button", type: "submit", onClick: handleButtonClick &&
-                    ((e) => !handleButtonClick(e.currentTarget.value) && e.preventDefault()), title: buttonText, ref: buttonRef, disabled: props.disabled || props.readOnly }, buttonText)))) })));
+                    ((e) => !handleButtonClick(e.currentTarget.parentElement.querySelector('input.SearchInput__input').value) && e.preventDefault()), title: buttonText, ref: buttonRef, disabled: props.disabled || props.readOnly }, buttonText)))) })));
 };
 exports.SearchInput = SearchInput;
 exports.default = exports.SearchInput;

package/_abstract/_Button.d.ts

@@ -1,17 +1,18 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+import { IconToken } from '../../../hanna-css/src/iconfontTokens.js';
 import { BemModifierProps, BemProps } from '../utils/types.js';
 type ButtonElmProps = {
     href?: never;
-} & BemModifierProps & JSX.IntrinsicElements['button'];
+} & BemModifierProps & ComponentProps<'button'>;
 type AnchorElmProps = {
     href: string;
     type?: never;
     name?: never;
     value?: never;
-} & BemModifierProps & JSX.IntrinsicElements['a'];
+} & BemModifierProps & ComponentProps<'a'>;
 export type ButtonProps = {
     /** Label takes preference over `children` */
-    label?: string | JSX.Element;
+    label?: string | ReactElement;
 } & (ButtonElmProps | AnchorElmProps);
 declare const sizes: {
     readonly normal: "";
@@ -24,12 +25,13 @@ declare const variants: {
     readonly destructive: "destructive";
 };
 type ButtonVariant = keyof typeof variants;
-type NavigationFlag = 'none' | 'go-back' | 'go-forward';
+type NavigationFlag = 'go-back' | 'go-forward';
+/** @deprecated (Will be removed in v0.11) */
 export type ButtonIcon = 'edit';
 export type ButtonVariantProps = {
     size?: ButtonSize;
     variant?: ButtonVariant;
-    icon?: ButtonIcon | NavigationFlag;
+    icon?: NavigationFlag | IconToken;
     /** @deprecated Use `size="small"` instead  (Will be removed in v0.11) */
     small?: boolean;
 };

package/_abstract/_Button.js

@@ -17,30 +17,27 @@ const variants = {
     destructive: 'destructive',
 };
 const navigationFlags = {
-    none: '',
     'go-back': 'go--back',
     'go-forward': 'go--forward',
 };
-const icons = {
-    // TODO: insert icons
-    edit: 'edit',
-};
 // NOTE: As this component already accepts all `<button/>` and `<a/>` props
 // directly, it makes little sense to add support for `wrapperProps` on top.
 const Button = (props) => {
     const { as: CustomTag, bem, small, // eslint-disable-line deprecation/deprecation
-    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = tslib_1.__rest(props, ["as", "bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
+    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon, label = children } = props, buttonProps = tslib_1.__rest(props, ["as", "bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
-        (0, hanna_utils_1.modifiedClass)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]], props.className);
-    const iconProp = icons[icon] && { 'data-icon': icons[icon] };
+        (0, hanna_utils_1.modifiedClass)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon || '']], props.className);
+    const iconProp = icon && !(icon in navigationFlags)
+        ? icon
+        : props['data-icon'];
     if (CustomTag) {
-        return (react_1.default.createElement(CustomTag, Object.assign({}, buttonProps, { className: className }, iconProp), label));
+        return (react_1.default.createElement(CustomTag, Object.assign({}, buttonProps, { className: className, "data-icon": iconProp }), label));
     }
     if (buttonProps.href != null) {
-        return (react_1.default.createElement(_Link_js_1.Link, Object.assign({}, buttonProps, { className: className }, iconProp), label));
+        return (react_1.default.createElement(_Link_js_1.Link, Object.assign({}, buttonProps, { className: className, "data-icon": iconProp }), label));
     }
     else {
-        return (react_1.default.createElement("button", Object.assign({ type: "button" }, buttonProps, { className: className }, iconProp), label));
+        return (react_1.default.createElement("button", Object.assign({ type: "button" }, buttonProps, { className: className, "data-icon": iconProp }), label));
     }
 };
 exports.Button = Button;

package/esm/ButtonTertiary.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ButtonProps, ButtonVariantProps } from './_abstract/_Button.js';
 type TertiarySize = Extract<ButtonVariantProps['size'], 'normal' | 'small'>;
-type TertiaryIcon = Extract<ButtonVariantProps['icon'], 'none' | 'go-back'>;
+type TertiaryIcon = Extract<ButtonVariantProps['icon'], 'go-back'>;
 export type ButtonTertiaryProps = ButtonProps & Omit<ButtonVariantProps, 'icon' | 'size'> & {
     size?: TertiarySize;
     icon?: TertiaryIcon;

package/esm/ButtonTertiary.js

@@ -5,13 +5,12 @@ const sizes = {
     small: 'small',
 };
 const icons = {
-    none: 'none',
     'go-back': 'go-back',
 };
 // NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
 // `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 export const ButtonTertiary = (props) => {
-    const { size = 'normal', icon = 'none' } = props;
+    const { size = 'normal', icon = '' } = props;
     return React.createElement(Button, Object.assign({ bem: "ButtonTertiary" }, props, { size: sizes[size], icon: icons[icon] }));
 };
 export default ButtonTertiary;

package/esm/DropdownButton.d.ts

@@ -1,29 +1,85 @@
-import React from 'react';
-import { IconName } from '@reykjavik/hanna-css';
+import { HTMLAttributeAnchorTarget, ReactElement } from 'react';
+import { IconToken } from '@reykjavik/hanna-css';
+import { ClassNameModifiers, EitherObj } from '@reykjavik/hanna-utils';
+import { IconName_old } from '../../hanna-css/src/lib/icons.js';
 import { ButtonVariantProps } from './_abstract/_Button.js';
 import { MainMenu2Item } from './MainMenu2.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 type Prefix<record extends Record<string, unknown>, prefix extends string> = {
     [K in keyof record as `${prefix}${Capitalize<string & K>}`]: record[K];
 };
-export type DropdownButtonItem = MainMenu2Item & {
-    icon?: IconName;
+export type DropdownButtonItem = {
+    /** Visible label text */
+    label: string | ReactElement;
+    /** Un-abbreviated label set as `aria-label=""` */
+    labelLong?: string;
+    /** Language of the link label */
+    lang?: string;
+    /** Languge of the linked resource */
+    hrefLang?: string;
+    /**
+     * Puts a modifier className for the menu __item <li/> element.
+     * */
+    modifier?: ClassNameModifiers;
+    /** Signifies if the menu item is part of the page's breadcrumb trail */
+    current?: boolean;
+    /**
+     * The URL the link points to.
+     *
+     * If neither `href` nor `onClick` is passed, then the item is not rendered
+     * at all.
+     */
+    href?: string;
+    /** Sets `target=""` on anchor tags with a `href` attribute. */
+    target?: HTMLAttributeAnchorTarget;
+    /**
+     * Adding `onClick` automatically results in a <button/> element being
+     * rendered. If `href` is also passed, then a <a href/> element is rendered
+     * during initial (server-side) render, which then gets replaced by a
+     * <button/> element during the first client-side
+     *
+     * NOTE: Clicking a menu item will automatically close tghe menu
+     * … unless the `onClick` function explicitly returns `false`.
+     */
+    onClick?: (item: MainMenu2Item) => void | boolean;
+    /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
+    controlsId?: string;
+    Content?: never;
+    /** Seldom used flag for buttons that do destruction */
+    destructive?: boolean;
+    icon?: IconToken | IconName_old;
 };
-export type DropdownButtonCustomItem = (props: {
+type DropdownButtonCustomItemFn = (props: {
     closeMenu: () => void;
-}) => React.ReactElement;
+}) => ReactElement;
+export type DropdownButtonCustomItem = Pick<DropdownButtonItem, 'modifier' | 'current'> & {
+    Content: DropdownButtonCustomItemFn;
+};
+/** Renders a divider line between `Dropdown*Item`s with an optional legend */
+export type DropdownButtonItemDivider = {
+    divider: true;
+    label?: string;
+};
 export type DropdownButtonProps = {
-    label: string | NonNullable<React.ReactElement>;
-    labelLong?: string;
-    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
+    /** The items to display inside the dropdown menu */
+    items: Array<DropdownButtonItem | DropdownButtonCustomItem | DropdownButtonItemDivider>;
     /**
-     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
-     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * NOTE: Clicking a DropdownButton item will automatically close the drropdown
      * … unless the `onItemClick` function explicitly returns `false`.
      */
     onItemClick?: (item: MainMenu2Item) => void | boolean;
-    /** Default: `"seconcary"` */
+} & EitherObj<{
+    /** Label for the toggler button */
+    label: string | ReactElement;
+    /** Longer accessible toggler label text */
+    labelLong?: string;
+    /** Default: `"secondary"` */
     buttonType?: 'primary' | 'secondary';
-} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'>, {
+    /** Custom toggler rendering function component */
+    Toggler: (props: {
+        isOpen: boolean;
+    }) => ReactElement;
+}> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
 export declare const DropdownButton: (props: DropdownButtonProps) => JSX.Element;
 export {};

package/esm/DropdownButton.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState, } from 'react';
 import { autoUpdate, flip, shift, useFloating } from '@floating-ui/react';
 import { modifiedClass } from '@reykjavik/hanna-utils';
 import { Button } from './_abstract/_Button.js';
@@ -11,7 +11,7 @@ export const DropdownButton = (props) => {
     const [isOpen, setIsOpen] = useLaggedState(false, 10);
     const isBrowser = useIsBrowserSide(props.ssr);
     const [isHovering, setIsHovering] = useState(false);
-    const wrapperRef = React.useRef(null);
+    const wrapperRef = useRef(null);
     const closeMenuStat = () => setIsOpen(false, 0);
     useOnClickOutside(wrapperRef, isOpen && closeMenuStat);
     useCallbackOnEsc(isOpen && closeMenuStat);
@@ -21,6 +21,10 @@ export const DropdownButton = (props) => {
         whileElementsMounted: autoUpdate,
     });
     const { onItemClick, wrapperProps = {} } = props;
+    const toggle = (e) => {
+        e.preventDefault();
+        setIsOpen(!isOpen, 0);
+    };
     return (React.createElement("details", Object.assign({}, wrapperProps, { className: modifiedClass('DropdownButton', isOpen && 'open', wrapperProps.className), open: isOpen, onBlur: (e) => {
             var _a;
             if (!isHovering) {
@@ -35,10 +39,8 @@ export const DropdownButton = (props) => {
             refs.setReference(elm.querySelector('.DropdownButton__toggler'));
             refs.setFloating(elm.querySelector('.DropdownButton__menu'));
         } }),
-        React.createElement(Button, { as: "summary", className: "DropdownButton__toggler", bem: props.buttonType === 'primary' ? 'ButtonPrimary' : 'ButtonSecondary', icon: props.buttonIcon, size: props.buttonSize, variant: props.buttonVariant, "aria-label": props.labelLong, onClick: (e) => {
-                e.preventDefault();
-                setIsOpen(!isOpen, 0);
-            } }, props.label),
+        props.Toggler ? (React.createElement("summary", { className: "DropdownButton__toggler", onClick: toggle },
+            React.createElement(props.Toggler, { isOpen: isOpen }))) : (React.createElement(Button, { as: "summary", className: "DropdownButton__toggler", bem: props.buttonType === 'primary' ? 'ButtonPrimary' : 'ButtonSecondary', icon: props.buttonIcon, size: props.buttonSize, variant: props.buttonVariant, "aria-label": props.labelLong, onClick: toggle }, props.label)),
         React.createElement("ul", { className: "DropdownButton__menu", onMouseEnter: () => {
                 setIsHovering(true);
             }, onMouseLeave: () => {
@@ -51,26 +53,44 @@ export const DropdownButton = (props) => {
                     '--DropdownButton-pos-x': `${x}px`,
                 }
                 : undefined },
-            props.items.map((item, i) => {
+            props.items.map(
+            // eslint-disable-next-line complexity
+            (item, i) => {
+                if ('divider' in item) {
+                    if ((i === 0 && !item.label) || i === props.items.length - 1) {
+                        // Gracefully omit pointless dividers
+                        return null;
+                    }
+                    return (React.createElement("li", { key: i, className: modifiedClass('DropdownButton__itemDivider', item.label && 'labelled') }, item.label || false));
+                }
                 if (typeof item === 'function') {
-                    const Item = item;
-                    return (React.createElement("li", { key: i, className: "DropdownButton__item" },
-                        React.createElement(Item, { closeMenu: closeMenuStat })));
+                    item = { Content: item };
+                }
+                const itemProps = {
+                    className: modifiedClass('DropdownButton__item', item.modifier),
+                    'aria-current': item.current || undefined,
+                };
+                if ('Content' in item && item.Content) {
+                    return (React.createElement("li", Object.assign({ key: i, "data-customitem": "" }, itemProps),
+                        React.createElement(item.Content, { closeMenu: closeMenuStat })));
                 }
-                const { label, onClick, href } = item;
+                const { label, onClick, href, destructive } = item;
                 const commonProps = {
-                    className: 'DropdownButton__itembutton',
+                    className: modifiedClass('DropdownButton__itembutton', destructive && 'destructive'),
                     lang: item.lang,
                     'data-icon': item.icon,
                     'arial-label': item.labelLong,
                 };
                 const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+                // TypeScript type-narrowing helper for the onClick callbacks below — because
+                // `item` is a variable and could hypothetically change before the click occurs
+                const _item = item;
                 return (React.createElement("li", { key: i, className: modifiedClass('DropdownButton__item', item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (React.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: () => {
-                        const keepOpen1 = onClick && onClick(item) === false;
-                        const keepOpen2 = onItemClick && onItemClick(item) === false;
+                        const keepOpen1 = onClick && onClick(_item) === false;
+                        const keepOpen2 = onItemClick && onItemClick(_item) === false;
                         !(keepOpen1 || keepOpen2) && closeMenuStat();
                     } }), label)) : href != null ? (React.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target, onClick: () => {
-                        const keepOpen = onItemClick && onItemClick(item) === false;
+                        const keepOpen = onItemClick && onItemClick(_item) === false;
                         !keepOpen && closeMenuStat();
                     } }), label)) : null));
             }),

package/esm/Icon.d.ts

@@ -0,0 +1,7 @@
+import { IconToken } from '../../hanna-css/src/iconfontTokens.js';
+import { HTMLProps } from './utils.js';
+export type IconProps = {
+    type: IconToken;
+    size?: 'small' | 'medium' | 'large';
+} & HTMLProps<'span'>;
+export declare const Icon: (props: IconProps) => JSX.Element;

package/esm/Icon.js

@@ -0,0 +1,7 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { classes } from '@reykjavik/hanna-utils';
+export const Icon = (props) => {
+    const { className, type, size = 'medium' } = props, rest = __rest(props, ["className", "type", "size"]);
+    return (React.createElement("span", Object.assign({}, rest, { className: classes('Icon', props.className), "data-icon": type, "data-icon-size": size !== 'medium' ? size : undefined })));
+};

package/esm/MainMenu2.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { IconName, IconToken } from '@reykjavik/hanna-css';
 import { ClassNameModifiers, Cleanup, EitherObj } from '@reykjavik/hanna-utils';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
@@ -44,32 +45,35 @@ export type MainMenu2Item = {
      * during initial (server-side) render, which then gets replaced by a
      * <button/> element during the first client-side
      *
-     * NOTE: Clicking a menu item will automatically close HannaUIState's
-     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * NOTE: Clicking a menu item will automatically close tghe menu
      * … unless the `onClick` function explicitly returns `false`.
      */
     onClick?: (item: MainMenu2Item) => void | boolean;
     /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
     controlsId?: string;
+    Content?: never;
 };
 export type MainMenu2ButtonItem = MainMenu2Item & {
-    icon?: 'search' | 'user' | 'alert' | 'globe';
+    icon?: IconToken | IconName;
 };
-export type MainMenu2CustomItem = (props: {
+type MainMenu2CustomItemFn = (props: {
     closeMenu: () => void;
     openMenu: () => void;
 }) => ReactElement;
+export type MainMenu2CustomItem = Pick<MainMenu2Item, 'modifier' | 'current'> & {
+    Content: MainMenu2CustomItemFn;
+};
 export type MainMenu2SubMenuItem = MainMenu2Item & {
     descr?: string;
 };
 export type MainMenu2SubMenu = {
     title: string;
     current?: boolean;
-    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
+    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | MainMenu2CustomItemFn | Falseish>;
 };
-export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | Falseish>;
-export type MainMenu2ButtonItemList = Array<MainMenu2ButtonItem | MainMenu2CustomItem | Falseish>;
-export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
+export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | MainMenu2CustomItemFn | Falseish>;
+export type MainMenu2ButtonItemList<Extra = unknown> = Array<(MainMenu2ButtonItem & Extra) | (MainMenu2CustomItem & Extra) | MainMenu2CustomItemFn | Falseish>;
+export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | MainMenu2CustomItemFn | Falseish>;
 export type MainMenu2Props = {
     /**
      * URL for the mandatory (usually screen-reader-only) homepage Link.
@@ -96,7 +100,9 @@ export type MainMenu2Props = {
          * "Open Menu" button. Make sure to only use 2–3 items, and remember that
          * they may be hidden on smaller screens.
          */
-        hot?: MainMenu2ButtonItemList;
+        hot?: MainMenu2ButtonItemList<{
+            redhot?: true;
+        }>;
         extra?: MainMenu2ButtonItemList;
         relatedTitle?: string;
         related?: MainMenu2ButtonItemList;
@@ -104,8 +110,7 @@ export type MainMenu2Props = {
     /** Visual type */
     variant?: 'default' | 'light';
     /**
-     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
-     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * NOTE: Clicking a `MainMenu2` item will automatically close the menu
      * … unless the `onItemClick` function explicitly returns `false`.
      */
     onItemClick?: (item: MainMenu2Item) => void | boolean;

package/esm/MainMenu2.js

@@ -43,15 +43,6 @@ export const defaultMainMenu2Texts = {
     },
 };
 // ---------------------------------------------------------------------------
-const iconMap = {
-    alert: 'info',
-    globe: undefined,
-    search: 'search',
-    user: 'user',
-    // NOTE: We're temporarily coerceing `IconName` to `ButtonIcon`
-    // TODO: Remove this once Hanna icons (and `ButtonIcons` sperifically)
-    // have been expanded better standardised.
-};
 /**
  * Function that turns menu item props/objects into HTML
  * rendering <a/> or <button/> elements depending on the context,
@@ -59,18 +50,29 @@ const iconMap = {
  */
 const getRenderers = (props) => {
     const { onItemClick, closeMenu, openMenu, isBrowser } = props;
+    // eslint-disable-next-line complexity
     const renderItem = (classPrefix, item, opts = {}) => {
         if (!item) {
             return;
         }
         const { key, Tag = 'li', button } = opts;
         if (typeof item === 'function') {
-            const Item = item;
-            return (React.createElement("li", { key: key, className: `${classPrefix}item` },
-                React.createElement(Item, { closeMenu: closeMenu, openMenu: openMenu })));
+            item = { Content: item };
+        }
+        const itemProps = {
+            key,
+            className: modifiedClass(`${classPrefix}item`, item.modifier),
+            'aria-current': item.current || undefined,
+        };
+        if ('Content' in item && item.Content) {
+            return (React.createElement(Tag, Object.assign({ "data-customitem": "" }, itemProps),
+                React.createElement(item.Content, { closeMenu: closeMenu, openMenu: openMenu })));
         }
         const linkClassName = `${classPrefix}link`;
         const { label, labelLong, href, target, lang, controlsId, onClick, descr, icon } = item;
+        // TypeScript type-narrowing helper for the onClick callbacks below — because
+        // `item` is a variable and could hypothetically change before the click occurs
+        const _item = item;
         const itemDescr = descr && (React.createElement(React.Fragment, null,
             ' ',
             React.createElement("small", { className: `${linkClassName}__descr` }, descr)));
@@ -78,26 +80,25 @@ const getRenderers = (props) => {
         const LinkTag = button ? ButtonSecondary : Link;
         const commonProps = {
             className: linkClassName,
-            'data-icon': icon ? iconMap[icon] : undefined,
+            'data-icon': icon,
             'arial-label': labelLong,
             title: labelLong,
             lang,
         };
-        const buttonCompProps = button
-            ? {
-                size: 'small',
-            }
-            : undefined;
+        if (button) {
+            console.log('Rendering button for menu item:', commonProps);
+        }
+        const buttonCompProps = button ? { size: 'small' } : undefined;
         const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
         return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (React.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
-                const keepOpen1 = onClick && onClick(item) === false;
-                const keepOpen2 = onItemClick && onItemClick(item) === false;
+                const keepOpen1 = onClick && onClick(_item) === false;
+                const keepOpen2 = onItemClick && onItemClick(_item) === false;
                 !(keepOpen1 || keepOpen2) && closeMenu();
             } }, buttonCompProps),
             label,
             " ",
             itemDescr)) : href != null ? (React.createElement(LinkTag, Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: target, onClick: () => {
-                const keepOpen = onItemClick && onItemClick(item) === false;
+                const keepOpen = onItemClick && onItemClick(_item) === false;
                 !keepOpen && closeMenu();
             } }, buttonCompProps),
             label,
@@ -115,6 +116,7 @@ const getRenderers = (props) => {
 };
 // eslint-disable-next-line complexity
 export const MainMenu2 = (props) => {
+    var _a;
     const { homeLink = '/', items, onItemClick, illustration, imageUrl, variant, wrapperProps = {}, } = props;
     const domid = useDomid(wrapperProps.id);
     const isBrowser = useIsBrowserSide(props.ssr);
@@ -235,7 +237,12 @@ export const MainMenu2 = (props) => {
                     }
                     return renderItem('MainMenu2__main__', mainItem, { key: i, Tag: 'div' });
                 }))),
-            renderList('MainMenu2__hot__', items.hot, { buttons: true }),
+            renderList('MainMenu2__hot__', (_a = items.hot) === null || _a === void 0 ? void 0 : _a.map((i) => {
+                if (i && 'redhot' in i) {
+                    return Object.assign(Object.assign({}, i), { modifier: i.modifier ? [i.modifier, 'redhot'] : 'redhot' });
+                }
+                return i;
+            }), { buttons: true }),
             renderList('MainMenu2__extra__', items.extra, { buttons: true }),
             items.related && items.related.length > 0 && (React.createElement("div", { className: "MainMenu2__related" },
                 items.relatedTitle && (React.createElement("h3", { className: "MainMenu2__related__title" }, items.relatedTitle)),

package/esm/ReykjavikWaves.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
+export type ReykjavikWavesProps = {
+    small?: boolean;
+    className?: string;
+    children?: ReactNode;
+} & WrapperElmProps<'div', 'className'>;
+export declare const ReykjavikWaves: (props: ReykjavikWavesProps) => JSX.Element;

package/esm/ReykjavikWaves.js

@@ -0,0 +1,3 @@
+import React from 'react';
+import { modifiedClass } from '@reykjavik/hanna-utils';
+export const ReykjavikWaves = (props) => (React.createElement("div", Object.assign({}, props.wrapperProps, { className: modifiedClass('ReykjavikWaves', props.small && 'small', props.className) }), props.children));

package/esm/SearchInput.js

@@ -27,6 +27,6 @@ export const SearchInput = (props) => {
                     : onKeyDown }, inputElementProps, { ref: inputRef })),
             ' ',
             showButton && (React.createElement("button", { className: "SearchInput__button", type: "submit", onClick: handleButtonClick &&
-                    ((e) => !handleButtonClick(e.currentTarget.value) && e.preventDefault()), title: buttonText, ref: buttonRef, disabled: props.disabled || props.readOnly }, buttonText)))) })));
+                    ((e) => !handleButtonClick(e.currentTarget.parentElement.querySelector('input.SearchInput__input').value) && e.preventDefault()), title: buttonText, ref: buttonRef, disabled: props.disabled || props.readOnly }, buttonText)))) })));
 };
 export default SearchInput;

package/esm/_abstract/_Button.d.ts

@@ -1,17 +1,18 @@
-import { ReactNode } from 'react';
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+import { IconToken } from '../../../hanna-css/src/iconfontTokens.js';
 import { BemModifierProps, BemProps } from '../utils/types.js';
 type ButtonElmProps = {
     href?: never;
-} & BemModifierProps & JSX.IntrinsicElements['button'];
+} & BemModifierProps & ComponentProps<'button'>;
 type AnchorElmProps = {
     href: string;
     type?: never;
     name?: never;
     value?: never;
-} & BemModifierProps & JSX.IntrinsicElements['a'];
+} & BemModifierProps & ComponentProps<'a'>;
 export type ButtonProps = {
     /** Label takes preference over `children` */
-    label?: string | JSX.Element;
+    label?: string | ReactElement;
 } & (ButtonElmProps | AnchorElmProps);
 declare const sizes: {
     readonly normal: "";
@@ -24,12 +25,13 @@ declare const variants: {
     readonly destructive: "destructive";
 };
 type ButtonVariant = keyof typeof variants;
-type NavigationFlag = 'none' | 'go-back' | 'go-forward';
+type NavigationFlag = 'go-back' | 'go-forward';
+/** @deprecated (Will be removed in v0.11) */
 export type ButtonIcon = 'edit';
 export type ButtonVariantProps = {
     size?: ButtonSize;
     variant?: ButtonVariant;
-    icon?: ButtonIcon | NavigationFlag;
+    icon?: NavigationFlag | IconToken;
     /** @deprecated Use `size="small"` instead  (Will be removed in v0.11) */
     small?: boolean;
 };

package/esm/_abstract/_Button.js

@@ -14,29 +14,26 @@ const variants = {
     destructive: 'destructive',
 };
 const navigationFlags = {
-    none: '',
     'go-back': 'go--back',
     'go-forward': 'go--forward',
 };
-const icons = {
-    // TODO: insert icons
-    edit: 'edit',
-};
 // NOTE: As this component already accepts all `<button/>` and `<a/>` props
 // directly, it makes little sense to add support for `wrapperProps` on top.
 export const Button = (props) => {
     const { as: CustomTag, bem, small, // eslint-disable-line deprecation/deprecation
-    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["as", "bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
+    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon, label = children } = props, buttonProps = __rest(props, ["as", "bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
-        modifiedClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]], props.className);
-    const iconProp = icons[icon] && { 'data-icon': icons[icon] };
+        modifiedClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon || '']], props.className);
+    const iconProp = icon && !(icon in navigationFlags)
+        ? icon
+        : props['data-icon'];
     if (CustomTag) {
-        return (React.createElement(CustomTag, Object.assign({}, buttonProps, { className: className }, iconProp), label));
+        return (React.createElement(CustomTag, Object.assign({}, buttonProps, { className: className, "data-icon": iconProp }), label));
     }
     if (buttonProps.href != null) {
-        return (React.createElement(Link, Object.assign({}, buttonProps, { className: className }, iconProp), label));
+        return (React.createElement(Link, Object.assign({}, buttonProps, { className: className, "data-icon": iconProp }), label));
     }
     else {
-        return (React.createElement("button", Object.assign({ type: "button" }, buttonProps, { className: className }, iconProp), label));
+        return (React.createElement("button", Object.assign({ type: "button" }, buttonProps, { className: className, "data-icon": iconProp }), label));
     }
 };

package/esm/index.d.ts

@@ -26,6 +26,7 @@
 /// <reference path="./SearchInput.d.tsx" />
 /// <reference path="./RowBlockColumn.d.tsx" />
 /// <reference path="./RowBlock.d.tsx" />
+/// <reference path="./ReykjavikWaves.d.tsx" />
 /// <reference path="./RelatedLinks.d.tsx" />
 /// <reference path="./ReadSpeakerPlayer.d.tsx" />
 /// <reference path="./RadioGroup.d.tsx" />
@@ -57,6 +58,7 @@
 /// <reference path="./IframedLayout.d.tsx" />
 /// <reference path="./IframeBlockClientScript.d.tsx" />
 /// <reference path="./IframeBlock.d.tsx" />
+/// <reference path="./Icon.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />
 /// <reference path="./HannaCssLink.d.tsx" />

package/index.d.ts

@@ -26,6 +26,7 @@
 /// <reference path="./SearchInput.d.tsx" />
 /// <reference path="./RowBlockColumn.d.tsx" />
 /// <reference path="./RowBlock.d.tsx" />
+/// <reference path="./ReykjavikWaves.d.tsx" />
 /// <reference path="./RelatedLinks.d.tsx" />
 /// <reference path="./ReadSpeakerPlayer.d.tsx" />
 /// <reference path="./RadioGroup.d.tsx" />
@@ -57,6 +58,7 @@
 /// <reference path="./IframedLayout.d.tsx" />
 /// <reference path="./IframeBlockClientScript.d.tsx" />
 /// <reference path="./IframeBlock.d.tsx" />
+/// <reference path="./Icon.d.tsx" />
 /// <reference path="./HeroBlock.d.tsx" />
 /// <reference path="./Heading.d.tsx" />
 /// <reference path="./HannaCssLink.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.160",
+	"version": "0.10.161",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,7 +17,7 @@
 		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
-		"@reykjavik/hanna-css": "^0.4.19",
+		"@reykjavik/hanna-css": "^0.4.24",
 		"@reykjavik/hanna-utils": "^0.2.21",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
@@ -157,6 +157,10 @@
 			"import": "./esm/RowBlock.js",
 			"require": "./RowBlock.js"
 		},
+		"./ReykjavikWaves": {
+			"import": "./esm/ReykjavikWaves.js",
+			"require": "./ReykjavikWaves.js"
+		},
 		"./RelatedLinks": {
 			"import": "./esm/RelatedLinks.js",
 			"require": "./RelatedLinks.js"
@@ -281,6 +285,10 @@
 			"import": "./esm/IframeBlock.js",
 			"require": "./IframeBlock.js"
 		},
+		"./Icon": {
+			"import": "./esm/Icon.js",
+			"require": "./Icon.js"
+		},
 		"./HeroBlock": {
 			"import": "./esm/HeroBlock.js",
 			"require": "./HeroBlock.js"