@reykjavik/hanna-react 0.10.56 → 0.10.59

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

@@ -2,7 +2,7 @@ import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { getStableRandomItem } from '@reykjavik/hanna-utils';
 import Blings from './_abstract/_Blings';
-import Image from './_abstract/Image';
+import Image from './_abstract/_Image';
 import { useSeenEffect } from './utils/seenEffect';
 import ShareButtons from './ShareButtons';
 const blingOptions = {
@@ -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/Picture.d.ts

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

package/esm/Picture.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import Image from './_abstract/_Image';
+const Picture = (props) => {
+    const { contain, className } = props;
+    return (React.createElement(Image, Object.assign({}, props, { className: getBemClass('Picture', contain && 'contain', className) })));
+};
+export default Picture;

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.d.ts

@@ -1,4 +1,4 @@
-import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+import { TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField';
 export declare type RadioButtonsGroupProps = TogglerGroupFieldProps & {
     value?: string;
     /** @deprecated (Will be removed in v0.9) */

package/esm/RadioButtonsGroup.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import TogglerGroupField from './_abstract/_TogglerGroupField';
+import TogglerInput from './_abstract/_TogglerInput';
+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.');
+    }
+    if (props.columns) {
+        console.warn('`RadioButtonsGroupProps.columns` is deprecated.');
+    }
+    return React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "RadioButtonsGroup", Toggler: RadioButton }));
+};
+export default RadioButtonsGroup;

package/esm/RadioGroup.d.ts

@@ -1,5 +1,5 @@
-import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
-import { TogglerInputProps } from './_abstract/TogglerInput';
+import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField';
+import { TogglerInputProps } from './_abstract/_TogglerInput';
 export declare type RadioGroupProps = TogglerGroupFieldProps & {
     layout?: 'inline';
     value?: string;

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}

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { getDocMeta, getShareButtonLabel, i18n, openInPopup, shareButtonTypes, } from '@reykjavik/hanna-utils/shareButtonsUtils';
-import { Link } from './_abstract/Link';
+import { Link } from './_abstract/_Link';
 const generateTypeList = (facebook, twitter, linkedin, email) => {
     const listStr = ((facebook ? 'facebook,' : '') +
         (twitter ? 'twitter,' : '') +
@@ -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;

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

@@ -28,10 +28,6 @@ const SiteSearchCurtain = (props) => {
             }, 100);
         }
     };
-    return (<div className={getBemClass('SiteSearchCurtain', [focused && 'focused'])} onFocus={focusHandler} onBlur={blurHandler} 
-    // (Sneak this in as Preact does not bubble `FocusEvent`s)
-    {...(isPreact && { onfocusin: focusHandler, onfocusout: blurHandler })}>
-      {props.children}
-    </div>);
+    return (React.createElement("div", Object.assign({ className: getBemClass('SiteSearchCurtain', [focused && 'focused']), onFocus: focusHandler, onBlur: blurHandler }, (isPreact && { onfocusin: focusHandler, onfocusout: blurHandler })), props.children));
 };
 export default SiteSearchCurtain;

package/esm/SiteSearchInput.d.ts

@@ -20,5 +20,5 @@ export declare type SiteSearchInputProps = {
     children?: undefined;
     ssr?: SSRSupport;
 } & WrappingProps & InputElmProps;
-declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "title" | "id" | "ssr" | "form" | "label" | "slot" | "style" | "pattern" | "children" | "hidden" | "onClick" | "dir" | "is" | "key" | "list" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "step" | "src" | "alt" | "multiple" | "width" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
+declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "title" | "id" | "ssr" | "form" | "label" | "slot" | "style" | "pattern" | "children" | "hidden" | "onClick" | "dir" | "is" | "key" | "list" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "step" | "src" | "multiple" | "alt" | "width" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
 export default SiteSearchInput;

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

@@ -25,18 +25,16 @@ const SiteSearchInput = React.forwardRef((props, ref) => {
             setHasValue(!!e.target.value);
             onChange && onChange(e);
         };
-    return (<FormField className="SiteSearchInput" ssr={ssr} label={label} empty={empty} filled={filled} id={id} renderInput={(className, inputProps, addFocusProps) => (<div className={className.input} {...addFocusProps()}>
-            <input className="SiteSearchInput__input" onChange={_onChange} {...inputProps} placeholder={placeholder} onKeyDown={onSubmit
-                ? (e) => {
-                    if (e.key === 'Enter' && onSubmit() !== true) {
-                        e.preventDefault();
+    return (React.createElement(FormField, { className: "SiteSearchInput", ssr: ssr, label: label, empty: empty, filled: filled, id: id, renderInput: (className, inputProps, addFocusProps) => (React.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
+            React.createElement("input", Object.assign({ className: "SiteSearchInput__input", onChange: _onChange }, inputProps, { placeholder: placeholder, onKeyDown: onSubmit
+                    ? (e) => {
+                        if (e.key === 'Enter' && onSubmit() !== true) {
+                            e.preventDefault();
+                        }
+                        onKeyDown && onKeyDown(e);
                     }
-                    onKeyDown && onKeyDown(e);
-                }
-                : onKeyDown} {...inputElementProps} ref={ref}/>{' '}
-            <button className="SiteSearchInput__button" type="submit" onClick={onButtonClick && ((e) => !onButtonClick() && e.preventDefault())} title={buttonText}>
-              {buttonText}
-            </button>
-          </div>)}/>);
+                    : onKeyDown }, inputElementProps, { ref: ref })),
+            ' ',
+            React.createElement("button", { className: "SiteSearchInput__button", type: "submit", onClick: onButtonClick && ((e) => !onButtonClick() && e.preventDefault()), title: buttonText }, buttonText))) }));
 });
 export default SiteSearchInput;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import range from '@hugsmidjan/qj/range';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-const makeRenderSkeleton = (props) => (key) => (<span key={key} className={getBemClass('Skeleton', [
+const makeRenderSkeleton = (props) => (key) => (React.createElement("span", { key: key, className: getBemClass('Skeleton', [
         props.text && 'text',
         props.height && 'height--' + props.height,
         props.gap && 'gap--' + props.gap,
-    ])}/>);
+    ]) }));
 const minmax = (num = 0, max = 100, min = 1) => {
     num = Math.min(Math.max(Math.round(num), min), max);
     return num > min ? num : undefined;
@@ -19,12 +19,12 @@ const Skeleton = (props) => {
     });
     const items = minmax(props.items, 20) || 1;
     if (items > 1) {
-        return <>{range(1, items).map(renderSkeleton)}</>;
+        return React.createElement(React.Fragment, null, range(1, items).map(renderSkeleton));
     }
     return renderSkeleton();
 };
 export default Skeleton;
 /** Returns a single `<Skeleton height={X}/>` element of branded type `SkeletonBlock` */
-Skeleton.block = (height) => (<Skeleton height={height}/>);
+Skeleton.block = (height) => (React.createElement(Skeleton, { height: height }));
 /** Returns a single `<Skeleton text height={X}/>` element of branded type `SkeletonText` */
-Skeleton.text = (height) => (<Skeleton text height={height}/>);
+Skeleton.text = (height) => (React.createElement(Skeleton, { text: true, height: height }));

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

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