@reykjavik/hanna-react 0.10.56 → 0.10.57

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

@@ -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.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}

@@ -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.jsx → NewsHero.js}

@@ -75,14 +75,12 @@ 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 (<div className={getBemClass('NewsHero', [!image && 'align--right'])} ref={ref}>
-      <div className="NewsHero__content">
-        <h1 className="NewsHero__title">{title}</h1>
-        {meta && <span className="NewsHero__meta">{meta}</span>}
-        <div className="NewsHero__summary">{summary}</div>
-        {sharing === true ? <ShareButtons /> : sharing && sharing()}
-      </div>
-      {image ? (<Image className="NewsHero__image" {...image}/>) : (<Blings blings={blings}/>)}
-    </div>);
+    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.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+import Footnote from './Footnote';
+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.jsx → PageHeading.js}

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

package/esm/ProcessOverview.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const ProcessOverview = (props) => {
+    const { title, items, attention, transparent, narrow } = props;
+    return (React.createElement("div", { className: getBemClass('ProcessOverview', [
+            transparent && 'transparent',
+            narrow && 'narrow',
+        ]) },
+        React.createElement("h2", { className: "ProcessOverview__title" }, title),
+        items.map(({ title, content }, i) => {
+            return (React.createElement("div", { key: i, className: "ProcessOverview__item" },
+                React.createElement("h3", { className: "ProcessOverview__item__title" }, title),
+                React.createElement("div", { className: "ProcessOverview__item__content" }, content)));
+        }),
+        attention && React.createElement("div", { className: "ProcessOverview__attention" }, attention)));
+};
+export default ProcessOverview;

package/esm/PullQuote.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { _Quote } from './_abstract/_Quote';
+const PullQuote = (props) => React.createElement(_Quote, Object.assign({ bem: "PullQuote" }, props));
+export default PullQuote;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import TogglerGroupField from './_abstract/TogglerGroupField';
 import TogglerInput from './_abstract/TogglerInput';
-const RadioButton = (props) => (<TogglerInput {...props} bem="RadioButton" type="radio"/>);
+const RadioButton = (props) => (React.createElement(TogglerInput, Object.assign({}, props, { bem: "RadioButton", type: "radio" })));
 const RadioButtonsGroup = (props) => {
     if (props.layout) {
         console.warn('`RadioButtonsGroupProps.layout` is deprecated.');
@@ -9,6 +9,6 @@ const RadioButtonsGroup = (props) => {
     if (props.columns) {
         console.warn('`RadioButtonsGroupProps.columns` is deprecated.');
     }
-    return <TogglerGroupField {...props} bem="RadioButtonsGroup" Toggler={RadioButton}/>;
+    return React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "RadioButtonsGroup", Toggler: RadioButton }));
 };
 export default RadioButtonsGroup;

package/esm/RadioGroup.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import TogglerGroupField from './_abstract/TogglerGroupField';
+import TogglerInput from './_abstract/TogglerInput';
+const Radio = (props) => (React.createElement(TogglerInput, Object.assign({}, props, { bem: "Radio", type: "radio" })));
+const RadioGroup = (props) => (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "RadioGroup", modifier: props.layout, Toggler: Radio })));
+RadioGroup.__Radio = Radio;
+export default RadioGroup;

package/esm/RelatedLinks.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from './_abstract/Link';
+const types = {
+    external: 1,
+    document: 1,
+    pdf: 1,
+    link: 0,
+};
+const RelatedLinks = (props) => {
+    const { title, links } = props;
+    if (links.length === 0) {
+        return null;
+    }
+    const TitleTag = props.titleTag || 'h3';
+    return (React.createElement("div", { className: "RelatedLinks" },
+        title && React.createElement(TitleTag, { className: "RelatedLinks__title" }, title),
+        React.createElement("ul", { className: "RelatedLinks__list" }, links.map(({ href, label, type, target }, i) => {
+            type = type && types[type] ? type : undefined;
+            return (React.createElement("li", { key: i, className: "RelatedLinks__item" },
+                React.createElement(Link, { className: "RelatedLinks__link", href: href, "data-type": type, target: target },
+                    ' ',
+                    label,
+                    ' ')));
+        }))));
+};
+export default RelatedLinks;

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

@@ -4,8 +4,6 @@ import { useSeenEffect } from './utils/seenEffect';
 const RowBlock = (props) => {
     const { right, modifier, className, children, startSeen } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (<div className={getBemClass('RowBlock', [modifier, right && 'align--right'], className)} ref={ref}>
-      {children}
-    </div>);
+    return (React.createElement("div", { className: getBemClass('RowBlock', [modifier, right && 'align--right'], className), ref: ref }, children));
 };
 export default RowBlock;

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

@@ -2,12 +2,10 @@ import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 const RowBlockColumn = (props) => {
     const { background, narrow, children } = props;
-    return (<div className={getBemClass('RowBlockColumn', [
+    return (React.createElement("div", { className: getBemClass('RowBlockColumn', [
             narrow && 'narrow',
             background && 'background',
             background === 'primary' && 'background--primary',
-        ])}>
-      {children}
-    </div>);
+        ]) }, children));
 };
 export default RowBlockColumn;

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

@@ -25,11 +25,9 @@ const SearchInput = (props) => {
             setHasValue(!!e.target.value);
             onChange && onChange(e);
         };
-    return (<FormField className={getBemClass('SearchInput', [], className)} ssr={ssr} small={small} label={label} empty={empty} filled={filled} assistText={assistText} hideLabel={hideLabel} disabled={disabled} readOnly={readOnly} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} id={id} renderInput={(className, inputProps, addFocusProps) => (<div className={className.input} {...addFocusProps()}>
-          <input className="SearchInput__input" onChange={_onChange} {...inputProps} {...inputElementProps} ref={props.inputRef}/>{' '}
-          {onButtonClick && (<button className="SearchInput__button" type="button" onClick={onButtonClick} title={buttonText} ref={props.buttonRef}>
-              {buttonText}
-            </button>)}
-        </div>)}/>);
+    return (React.createElement(FormField, { className: getBemClass('SearchInput', [], className), ssr: ssr, small: small, label: label, empty: empty, filled: filled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => (React.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
+            React.createElement("input", Object.assign({ className: "SearchInput__input", onChange: _onChange }, inputProps, inputElementProps, { ref: props.inputRef })),
+            ' ',
+            onButtonClick && (React.createElement("button", { className: "SearchInput__button", type: "button", onClick: onButtonClick, title: buttonText, ref: props.buttonRef }, buttonText)))) }));
 };
 export default SearchInput;

package/esm/SearchResults/_SearchResultsItem.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Image from '../_abstract/Image';
+import { Link } from '../_abstract/Link';
+const SearchResultsItem = (props) => {
+    const { highlight, title, summary, href, meta, image } = props;
+    const bem = highlight ? 'SearchResultsHighlightItem' : 'SearchResultsItem';
+    const metaArr = (Array.isArray(meta) ? meta : [meta]);
+    return (React.createElement("li", { className: bem },
+        React.createElement(Link, { className: bem + '__link', href: href },
+            React.createElement("h3", { className: bem + '__title' }, title),
+            metaArr.length > 0 && (React.createElement("span", { className: bem + '__meta' }, metaArr.map((item, i) => typeof item === 'function' ? item() : item && React.createElement("span", { key: i }, item)))),
+            highlight && image && React.createElement(Image, { className: bem + '__image', src: image }),
+            React.createElement("div", { className: bem + '__summary', dangerouslySetInnerHTML: { __html: summary } }))));
+};
+export default SearchResultsItem;

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

@@ -8,11 +8,10 @@ import { DEFAULT_LANG, getTexts } from '@reykjavik/hanna-utils/i18n';
 import SearchResultsItem from './SearchResults/_SearchResultsItem';
 import Alert from './Alert';
 import Tabs from './Tabs';
-const renderDefaultErrorText = () => (<>
-    Úps, það hefur komið upp villa. Má bjóða þér að prófa aftur að leita?
-    <br />
-    Ef ekkert lát er á villunni þá kunnum við að meta að þú látir okkur vita.
-  </>);
+const renderDefaultErrorText = () => (React.createElement(React.Fragment, null,
+    "\u00DAps, \u00FEa\u00F0 hefur komi\u00F0 upp villa. M\u00E1 bj\u00F3\u00F0a \u00FE\u00E9r a\u00F0 pr\u00F3fa aftur a\u00F0 leita?",
+    React.createElement("br", null),
+    "Ef ekkert l\u00E1t er \u00E1 villunni \u00FE\u00E1 kunnum vi\u00F0 a\u00F0 meta a\u00F0 \u00FE\u00FA l\u00E1tir okkur vita."));
 const defaultTexts = {
     en: {
         lang: 'en',
@@ -37,11 +36,9 @@ const SearchResults_Tabs = (props) => {
         label,
         badge: prettyNum(count, { lang }),
     })), [filters, lang]);
-    return tabs.length ? (<Tabs role="tablist" aria-controls={domid} tabs={tabs} activeIdx={activeIdx || 0} onSetActive={(i) => setFilter && setFilter(i)}/>) : null;
+    return tabs.length ? (React.createElement(Tabs, { role: "tablist", "aria-controls": domid, tabs: tabs, activeIdx: activeIdx || 0, onSetActive: (i) => setFilter && setFilter(i) })) : null;
 };
-const LoadingScaffold = (props) => props.count ? (<ol className="SearchResults__list SearchResults__list--loading">
-      {range(1, props.count).map((item, i) => (<SearchResultsItem key={i} title="..." summary="" href=""/>))}
-    </ol>) : null;
+const LoadingScaffold = (props) => props.count ? (React.createElement("ol", { className: "SearchResults__list SearchResults__list--loading" }, range(1, props.count).map((item, i) => (React.createElement(SearchResultsItem, { key: i, title: "...", summary: "", href: "" }))))) : null;
 // ===========================================================================
 const NUM_AUTOLOADS = 2;
 const SearchResults__loadmore = (props) => {
@@ -61,58 +58,52 @@ const SearchResults__loadmore = (props) => {
         }
     }, [theEndIsNigh, loadMore]);
     const moreAvailable = status === 'results' && moreCount && loadMore;
-    return status === 'loadingmore' ? (<LoadingScaffold count={Math.min(pageSize, moreCount)}/>) : moreAvailable ? (<button ref={refFn} className="SearchResults__loadmore" type="button" onClick={loadMore}>
-      {texts.loadMore}{' '}
-      <span className="SearchResults__loadmore__count">
-        ({prettyNum(moreCount, { lang })})
-      </span>
-    </button>) : null;
+    return status === 'loadingmore' ? (React.createElement(LoadingScaffold, { count: Math.min(pageSize, moreCount) })) : moreAvailable ? (React.createElement("button", { ref: refFn, className: "SearchResults__loadmore", type: "button", onClick: loadMore },
+        texts.loadMore,
+        ' ',
+        React.createElement("span", { className: "SearchResults__loadmore__count" },
+            "(",
+            prettyNum(moreCount, { lang }),
+            ")"))) : null;
 };
 // ===========================================================================
 const renderTitle = (props, texts) => {
     const { status, totalHits, query } = props;
     const lang = texts.lang || props.lang || DEFAULT_LANG;
-    return (<h2 className="SearchResults__title">
-      {status === 'loadingquery'
+    return (React.createElement("h2", { className: "SearchResults__title" },
+        status === 'loadingquery'
             ? texts.loadQueryTitle
             : totalHits
                 ? prettyNum(totalHits, { lang: lang }) +
                     ' ' +
                     texts.resultsTitle
-                : texts.noResultsTitle}
-      <span className="SearchResults__query">{query}</span>
-    </h2>);
+                : texts.noResultsTitle,
+        React.createElement("span", { className: "SearchResults__query" }, query)));
 };
 // ---------------------------------------------------------------------------
 const renderResults = (props) => {
     const { status, pageSize, items, hits } = props;
     if (status === 'loadingquery' || status === 'loadingfilter') {
-        return <LoadingScaffold count={Math.min(pageSize, hits || 999)}/>;
+        return React.createElement(LoadingScaffold, { count: Math.min(pageSize, hits || 999) });
     }
-    return items && items.length ? (<ol className="SearchResults__list">
-      {items.map((item, i) => (<SearchResultsItem key={i} {...item}/>))}
-    </ol>) : null;
+    return items && items.length ? (React.createElement("ol", { className: "SearchResults__list" }, items.map((item, i) => (React.createElement(SearchResultsItem, Object.assign({ key: i }, item)))))) : null;
 };
 // ---------------------------------------------------------------------------
 const renderLoadMore = (props, texts) => {
     const { hits, items, status, pageSize, loadMore } = props;
-    return (<SearchResults__loadmore hits={hits} numItems={items && items.length} status={status} pageSize={pageSize} loadMore={loadMore} texts={texts}/>);
+    return (React.createElement(SearchResults__loadmore, { hits: hits, numItems: items && items.length, status: status, pageSize: pageSize, loadMore: loadMore, texts: texts }));
 };
 // TODO: add plural translation thingy for result string
 const SearchResults = (props) => {
     const { filters, activeFilterIdx, setFilter, status, errorText } = props;
     const texts = getTexts(props, defaultTexts);
     const domid = useDomid();
-    return (<div className={getBemClass('SearchResults', status !== 'results' && status)}>
-      {renderTitle(props, texts)}
-
-      <SearchResults_Tabs domid={domid} filters={filters} activeIdx={activeFilterIdx} setFilter={setFilter} lang={texts.lang}/>
-
-      <div className="SearchResults__results" id={domid}>
-        {renderResults(props)}
-        {status === 'error' && (<Alert type="error">{errorText || renderDefaultErrorText()}</Alert>)}
-        {renderLoadMore(props, texts)}
-      </div>
-    </div>);
+    return (React.createElement("div", { className: getBemClass('SearchResults', status !== 'results' && status) },
+        renderTitle(props, texts),
+        React.createElement(SearchResults_Tabs, { domid: domid, filters: filters, activeIdx: activeFilterIdx, setFilter: setFilter, lang: texts.lang }),
+        React.createElement("div", { className: "SearchResults__results", id: domid },
+            renderResults(props),
+            status === 'error' && (React.createElement(Alert, { type: "error" }, errorText || renderDefaultErrorText())),
+            renderLoadMore(props, texts))));
 };
 export default SearchResults;

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

@@ -14,6 +14,6 @@ import { getEffectAttr, useSeenEffect } from './utils/seenEffect';
 const SeenEffect = (props) => {
     const { effectType, startSeen } = props, divProps = __rest(props, ["effectType", "startSeen"]);
     const [ref] = useSeenEffect(startSeen);
-    return <div {...divProps} ref={ref} {...getEffectAttr(effectType)}/>;
+    return React.createElement("div", Object.assign({}, divProps, { ref: ref }, getEffectAttr(effectType)));
 };
 export default SeenEffect;

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

@@ -41,6 +41,6 @@ const Selectbox = (props) => {
         setIsEmpty(!((_a = selectElm.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.text));
         onChange && onChange(e);
     };
-    return (<FormField className={getBemClass('Selectbox', null, className)} ssr={ssr} small={small} label={label} empty={isEmpty} filled={isFilled} assistText={assistText} hideLabel={hideLabel} disabled={disabled} readOnly={readOnly} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} id={id} renderInput={(className, inputProps, addFocusProps) => (<_Selectbox bem={className.input} ssr={ssr} onChange={_onChange} {...inputProps} {...addFocusProps(selectProps)} selectRef={selectRef}/>)}/>);
+    return (React.createElement(FormField, { className: getBemClass('Selectbox', null, className), ssr: ssr, small: small, label: label, empty: isEmpty, filled: isFilled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => (React.createElement(_Selectbox, Object.assign({ bem: className.input, ssr: ssr, onChange: _onChange }, inputProps, addFocusProps(selectProps), { selectRef: selectRef }))) }));
 };
 export default Selectbox;

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

@@ -15,11 +15,8 @@ const ShareButtons__item = (props) => {
     const { label, type, href } = props;
     const buttonText = getShareButtonLabel(type, label);
     const popup = type !== 'email';
-    return (<li className="ShareButtons__item">
-      <Link className={'ShareButtons__link ShareButtons__link--' + type} href={href} title={buttonText} rel="noopener noreferrer" target={popup ? '_blank' : undefined} onClick={popup ? openInPopup : undefined}>
-        {buttonText}
-      </Link>
-    </li>);
+    return (React.createElement("li", { className: "ShareButtons__item" },
+        React.createElement(Link, { className: 'ShareButtons__link ShareButtons__link--' + type, href: href, title: buttonText, rel: "noopener noreferrer", target: popup ? '_blank' : undefined, onClick: popup ? openInPopup : undefined }, buttonText)));
 };
 const ShareButtons = (props) => {
     const { texts, ssr, facebook = true, twitter = true, linkedin, email, } = props;
@@ -39,7 +36,7 @@ const ShareButtons = (props) => {
     const { label, buttonLabel } = txt;
     if (!docMeta || ssr === 'ssr-only') {
         // Generate SSR markup for hanna-sprinkles to pick up on.
-        return (<div className="ShareButtons" data-button-types={generateTypeList(facebook, twitter, linkedin, email)} data-label={label} data-buttonlabel={buttonLabel} data-emailsubject={txt.emailSubject || undefined}/>);
+        return (React.createElement("div", { className: "ShareButtons", "data-button-types": generateTypeList(facebook, twitter, linkedin, email), "data-label": label, "data-buttonlabel": buttonLabel, "data-emailsubject": txt.emailSubject || undefined }));
     }
     const showTypes = {
         facebook,
@@ -47,11 +44,8 @@ const ShareButtons = (props) => {
         linkedin,
         email,
     };
-    return (<div className="ShareButtons" aria-label={label} data-sprinkled="true">
-      {label && <strong className="ShareButtons__label">{label}</strong>}
-      <ul className="ShareButtons__list">
-        {shareButtonTypes.map((type) => showTypes[type] && (<ShareButtons__item key={type} type={type} label={buttonLabel || ''} href={docMeta.hrefs[type]}/>))}
-      </ul>
-    </div>);
+    return (React.createElement("div", { className: "ShareButtons", "aria-label": label, "data-sprinkled": "true" },
+        label && React.createElement("strong", { className: "ShareButtons__label" }, label),
+        React.createElement("ul", { className: "ShareButtons__list" }, shareButtonTypes.map((type) => showTypes[type] && (React.createElement(ShareButtons__item, { key: type, type: type, label: buttonLabel || '', href: docMeta.hrefs[type] }))))));
 };
 export default ShareButtons;

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

@@ -17,6 +17,6 @@ const Sharpie = (props) => {
     const { color, tag, children } = props;
     const colorModifier = colors[color] ? color : 'green';
     const Tag = tag && tags[tag] ? tag : 'span';
-    return <Tag className={getBemClass('Sharpie', colorModifier)}>{children}</Tag>;
+    return React.createElement(Tag, { className: getBemClass('Sharpie', colorModifier) }, children);
 };
 export default Sharpie;

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

@@ -34,7 +34,7 @@ const SiteSearchAutocomplete = (props) => {
     const [value, setValue] = useState('');
     const inputRef = createRef();
     const txt = getTexts(props, defaultSiteSearchACTexts);
-    return (<Autosuggest theme={{
+    return (React.createElement(Autosuggest, { theme: {
             container: bem,
             containerOpen: bem + '--open',
             suggestionsContainer: bem + '__container',
@@ -42,19 +42,17 @@ const SiteSearchAutocomplete = (props) => {
             suggestionsList: bem + '__list',
             suggestion: bem + '__item',
             suggestionHighlighted: bem + '__item--highlighted',
-        }} focusInputOnSuggestionClick={true} suggestions={suggestions} onSuggestionsClearRequested={() => setSuggestions([])} onSuggestionsFetchRequested={onSuggestionsFetchRequested} getSuggestionValue={getSuggestionValue} onSuggestionSelected={onSuggestionSelected} onSuggestionHighlighted={onSuggestionHighlighted} renderSuggestion={renderSuggestion} containerProps={{ 'aria-label': txt.label }} renderSuggestionsContainer={({ containerProps, children }) => (<div {...containerProps} aria-label={txt.suggestionsLabel}>
-          {children}
-        </div>)} inputProps={{
+        }, focusInputOnSuggestionClick: true, suggestions: suggestions, onSuggestionsClearRequested: () => setSuggestions([]), onSuggestionsFetchRequested: onSuggestionsFetchRequested, getSuggestionValue: getSuggestionValue, onSuggestionSelected: onSuggestionSelected, onSuggestionHighlighted: onSuggestionHighlighted, renderSuggestion: renderSuggestion, containerProps: { 'aria-label': txt.label }, renderSuggestionsContainer: ({ containerProps, children }) => (React.createElement("div", Object.assign({}, containerProps, { "aria-label": txt.suggestionsLabel }), children)), inputProps: {
             ref: inputRef,
             value: value,
             onChange: (_, { newValue }) => {
                 setValue(newValue);
             },
-        }} renderInputComponent={(inputProps) => {
+        }, renderInputComponent: (inputProps) => {
             /* prettier-ignore */
             const { className, type, disabled, readOnly, required, children } = inputProps, //eslint-disable-line @typescript-eslint/no-unused-vars
             siteSearchProps = __rest(inputProps, ["className", "type", "disabled", "readOnly", "required", "children"]);
-            return (<SiteSearchInput {...siteSearchProps} label={props.label || txt.inputLabel} placeholder={txt.placeholder} onSubmit={onSubmit && (() => onSubmit(value))} onButtonClick={onButtonClick && (() => onButtonClick(value))}/>);
-        }}/>);
+            return (React.createElement(SiteSearchInput, Object.assign({}, siteSearchProps, { label: props.label || txt.inputLabel, placeholder: txt.placeholder, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
+        } }));
 };
 export default SiteSearchAutocomplete;