@reykjavik/hanna-react 0.10.56 → 0.10.57

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.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;

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

@@ -32,10 +32,13 @@ const renderTab = (tabProps, index, listProps) => {
         }
         : { href };
     return [
-        <Tag key={index} className="Tabs__tab" data-active={isActive} {...tagProps} onClick={handleClick} onFocus={handleFocus} aria-label={longLabel} title={longLabel} // make custom aria-labels visible
-        >
-      {label} {badge != null && <small className="Tabs__tab__badge">({badge})</small>}
-    </Tag>,
+        React.createElement(Tag, Object.assign({ key: index, className: "Tabs__tab", "data-active": isActive }, tagProps, { onClick: handleClick, onFocus: handleFocus, "aria-label": longLabel, title: longLabel }),
+            label,
+            " ",
+            badge != null && React.createElement("small", { className: "Tabs__tab__badge" },
+                "(",
+                badge,
+                ")")),
         ' ',
     ];
 };
@@ -82,13 +85,10 @@ const Tabs = (props) => {
         listAriaControls,
         isBrowser,
     };
-    return (<div className={getBemClass('Tabs', vertical && 'vertical')} role={tabRole && role} id={id} 
-    // aria-owns={tabIdList.join(' ')}
-    aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} onKeyDown={handleKeydown} data-sprinkled={isBrowser} ref={ref}>
-      {tabs.map((tabProps, index) => renderTab(tabProps, index, listProps))}
-      {subTabs && (<Tabs {...subTabs} role={'role' in subTabs ? subTabs.role : role} activateOnFocus={(_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus} ssr={(_b = subTabs.ssr) !== null && _b !== void 0 ? _b : ssr} startSeen 
-        // just to be sure
-        vertical={undefined} subTabs={undefined}/>)}
-    </div>);
+    return (React.createElement("div", { className: getBemClass('Tabs', vertical && 'vertical'), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser, ref: ref },
+        tabs.map((tabProps, index) => renderTab(tabProps, index, listProps)),
+        subTabs && (React.createElement(Tabs, Object.assign({}, subTabs, { role: 'role' in subTabs ? subTabs.role : role, activateOnFocus: (_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus, ssr: (_b = subTabs.ssr) !== null && _b !== void 0 ? _b : ssr, startSeen: true, 
+            // just to be sure
+            vertical: undefined, subTabs: undefined })))));
 };
 export default Tabs;

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

@@ -28,21 +28,16 @@ const TagPill = (props) => {
         !onRemove &&
         console.warn('static (non-button) `TagPill`s must not be removable');
     const modifiers = [modifier, large && 'large', colors[color]];
-    const removeBtn = removable && (<button className="TagPill__remove" onClick={onRemove && (() => onRemove())} aria-label={removeLabelLong} type="button">
-      {removeLabel}
-    </button>);
-    return isStatic ? (<span className={getBemClass('TagPill', modifiers)}>
-      {label} {removeBtn}
-    </span>) : onRemove ? (<span className={getBemClass('TagPill', modifiers)}>
-      <Button bem="TagPill__button" {...buttonProps}>
-        {label}
-      </Button>{' '}
-      {removeBtn}
-    </span>) : (<Button bem="TagPill" {...buttonProps} modifier={modifiers}>
-      {label}{' '}
-      {removable && (<span className="TagPill__remove" aria-label={removeLabelLong}>
-          {removeLabel}
-        </span>)}
-    </Button>);
+    const removeBtn = removable && (React.createElement("button", { className: "TagPill__remove", onClick: onRemove && (() => onRemove()), "aria-label": removeLabelLong, type: "button" }, removeLabel));
+    return isStatic ? (React.createElement("span", { className: getBemClass('TagPill', modifiers) },
+        label,
+        " ",
+        removeBtn)) : onRemove ? (React.createElement("span", { className: getBemClass('TagPill', modifiers) },
+        React.createElement(Button, Object.assign({ bem: "TagPill__button" }, buttonProps), label),
+        ' ',
+        removeBtn)) : (React.createElement(Button, Object.assign({ bem: "TagPill" }, buttonProps, { modifier: modifiers }),
+        label,
+        ' ',
+        removable && (React.createElement("span", { className: "TagPill__remove", "aria-label": removeLabelLong }, removeLabel))));
 };
 export default TagPill;

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

@@ -5,13 +5,11 @@ const TextBlock = (props) => {
     const { children, align, labelled, wide, small, startSeen } = props;
     const rightAligned = align === 'right' || labelled;
     const [ref] = useSeenEffect(startSeen);
-    return (<div className={getBemClass('TextBlock', [
+    return (React.createElement("div", { className: getBemClass('TextBlock', [
             labelled && 'labelled',
             rightAligned && 'align--right',
             wide && !rightAligned && 'wide',
             small && !labelled && 'small',
-        ])} ref={ref}>
-      {children}
-    </div>);
+        ]), ref: ref }, children));
 };
 export default TextBlock;

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

@@ -4,6 +4,6 @@ const TextButton = (props) => {
     if ('disabled' in props) {
         props = Object.assign(Object.assign({}, props), { disabled: undefined });
     }
-    return <Button bem="TextButton" {...props}/>;
+    return React.createElement(Button, Object.assign({ bem: "TextButton" }, props));
 };
 export default TextButton;

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

@@ -30,6 +30,6 @@ const TextInput = (props) => {
                 // TypeScript is silly sometimes.
                 e);
         };
-    return (<FormField className={getBemClass('TextInput', modifiers, 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) => multiline ? (<textarea className={className.input} onChange={_onChange} {...inputProps} {...addFocusProps(inputElementProps)} ref={inputRef}/>) : (<input className={className.input} onChange={_onChange} type={type} {...inputProps} {...addFocusProps(inputElementProps)} ref={inputRef}/>)}/>);
+    return (React.createElement(FormField, { className: getBemClass('TextInput', modifiers, 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) => multiline ? (React.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (React.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
 };
 export default TextInput;

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

@@ -36,6 +36,6 @@ const VSpacer = (props) => {
         topVal && 'top--' + topVal,
         bottomVal && 'bottom--' + bottomVal,
     ]);
-    return isWrapper ? (<div className={className}>{children}</div>) : (<hr className={className}/>);
+    return isWrapper ? (React.createElement("div", { className: className }, children)) : (React.createElement("hr", { className: className }));
 };
 export default VSpacer;

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

@@ -58,11 +58,11 @@ const VerticalTabsTOC = (props) => {
         window.addEventListener('hashchange', handleHash);
         return () => window.removeEventListener('hashchange', handleHash);
     }, [itemsById, onItemSelect]);
-    return (<Tabs id={domid} vertical aria-label={props['aria-label']} onSetActive={(_, item) => {
+    return (React.createElement(Tabs, { id: domid, vertical: true, "aria-label": props['aria-label'], onSetActive: (_, item) => {
             var _a;
             const itemId = getItemId(item);
             const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) === null || _a === void 0 ? void 0 : _a.tabs[0]);
             setFrag(newId);
-        }} tabs={updatedItems} role="tablist" activeIdx={state.activeIdx} subTabs={state.subTabs}/>);
+        }, tabs: updatedItems, role: "tablist", activeIdx: state.activeIdx, subTabs: state.subTabs }));
 };
 export default VerticalTabsTOC;

package/esm/WizardLayout.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useIsBrowserSide } from '@hugsmidjan/react/hooks';
+import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
+import Image from './_abstract/Image';
+import { Link } from './_abstract/Link';
+import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar';
+const WizardLayout = (props) => {
+    useScrollbarWidthCSSVar();
+    const { 
+    // ssr,
+    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = 'Reykjavík', globalAlerts, } = props;
+    const isBrowser = useIsBrowserSide( /* ssr */);
+    return (React.createElement("div", { className: "WizardLayout", "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
+        globalAlerts && (React.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
+        React.createElement("div", { className: "WizardLayout__content" },
+            React.createElement("div", { className: "WizardLayout__header", role: "banner" },
+                React.createElement(Link, { className: "WizardLayout__header__logo", href: logoLink },
+                    ' ',
+                    React.createElement(Image, { inline: true, src: getAssetUrl('reykjavik-logo.svg') }),
+                    " ",
+                    siteName,
+                    ' '),
+                ' '),
+            React.createElement("div", { className: "WizardLayout__wrap" },
+                wizardStepper && (React.createElement("div", { className: "WizardLayout__stepper", role: "navigation" }, wizardStepper)),
+                React.createElement("div", { className: "WizardLayout__main", role: "main" }, children),
+                React.createElement("div", { className: "WizardLayout__deco WizardLayout__deco--geometry" })),
+            React.createElement("div", { className: "WizardLayout__footer", role: "complementary" }, wizardFooter))));
+};
+export default WizardLayout;

package/esm/WizardLayoutClose.js

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

package/esm/WizardStepper.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const WizardStepper = (props) => {
+    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
+    return (React.createElement("div", { className: getBemClass('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
+        const { label, clickable, done, neutral } = step;
+        const stepClass = getBemClass('WizardStepper__step', [
+            (done || (done == null && i < activeStep)) && 'done',
+            neutral && 'neutral',
+        ]);
+        const isClickable = clickable === 'always' ||
+            (clickable &&
+                (activeStep === i ||
+                    (i > activeStep && allowForwardSkip) ||
+                    (i < activeStep && !disableBacktrack)));
+        const ariaCurrent = activeStep === i ? 'step' : undefined;
+        return (React.createElement(React.Fragment, { key: i },
+            isClickable ? (React.createElement("button", { type: "button", className: stepClass, onClick: () => onClick(i), "aria-current": ariaCurrent }, label)) : (React.createElement("span", { className: stepClass, "aria-current": ariaCurrent },
+                ' ',
+                label,
+                ' ')),
+            ' '));
+    })));
+};
+export default WizardStepper;

package/esm/_abstract/{Button.jsx → Button.js}

@@ -38,14 +38,10 @@ const Button = (props) => {
         getBemClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
     if (buttonProps.href != null) {
-        return (<Link className={className} {...buttonProps} style={undefined} {...iconProp}>
-        {label}
-      </Link>);
+        return (React.createElement(Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));
     }
     else {
-        return (<button className={className} type="button" {...buttonProps} style={undefined} {...iconProp}>
-        {label}
-      </button>);
+        return (React.createElement("button", Object.assign({ className: className, type: "button" }, buttonProps, { style: undefined }, iconProp), label));
     }
 };
 export default Button;

package/esm/_abstract/CardList.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import Button from './Button';
+import Image from './Image';
+const Card = (props) => {
+    const { bem, href, title, imgPlaceholder } = props;
+    const cardClass = `${bem}__card`;
+    const image = 'image' in props && props.image;
+    const meta = 'meta' in props && props.meta;
+    const summary = 'summary' in props && props.summary;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { bem: cardClass, href: href },
+            ' ',
+            React.createElement(Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
+            React.createElement("span", { className: `${cardClass}__title` }, title),
+            ' ',
+            meta && React.createElement("span", { className: `${cardClass}__meta` }, meta),
+            ' ',
+            summary && React.createElement("span", { className: `${cardClass}__summary` }, summary),
+            ' '),
+        ' '));
+};
+export const CardList = (props) => {
+    const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
+    const TitleTag = titleTag;
+    const fallbackImage = (imgPlaceholder !== true && imgPlaceholder) || undefined;
+    const fallbackImageStyle = fallbackImage
+        ? { '--ImageCards--fallback': `url("${fallbackImage}")` }
+        : undefined;
+    return (React.createElement(React.Fragment, null,
+        summaryElement ? (React.createElement("div", { className: bemPrefix + '__summary' },
+            title && React.createElement(TitleTag, { className: bemPrefix + '__title' }, title),
+            summaryElement)) : (title && React.createElement(TitleTag, { className: bemPrefix + '__title' }, title)),
+        React.createElement("ul", { className: bemPrefix + '__list', style: fallbackImageStyle }, cards.map((card, i) => (React.createElement("li", { key: i, className: bemPrefix + '__item' },
+            React.createElement(Card, Object.assign({}, card, { bem: bemPrefix, imgPlaceholder: !!imgPlaceholder })))))),
+        children));
+};

package/esm/_abstract/{Image.jsx → Image.js}

@@ -9,21 +9,19 @@ const Image = (props) => {
     const imgLoading = preloadSrc ? 'eager' : 'lazy';
     const inlineSvg = useGetSVGtext(inline ? imageSrc : undefined);
     if (!imageSrc) {
-        return placeholder ? (<span className={className && getBemClass(className, 'missing')}>
-        {placeholder !== true && placeholder()}
-      </span>) : null;
+        return placeholder ? (React.createElement("span", { className: className && getBemClass(className, 'missing') }, placeholder !== true && placeholder())) : null;
     }
     if (inline && inlineSvg) {
         const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
-        return <span className={className} dangerouslySetInnerHTML={{ __html }}/>;
+        return React.createElement("span", { className: className, dangerouslySetInnerHTML: { __html } });
     }
-    return (<picture className={className}>
-      {' '}
-      {sources.map((source, i) => (<>
-          <source key={i} srcSet={source.srcset} media={source.media}/>{' '}
-        </>))}{' '}
-      <img src={imageSrc} alt={altText} loading={imgLoading}/>
-      {'  '}
-    </picture>);
+    return (React.createElement("picture", { className: className },
+        ' ',
+        sources.map((source, i) => (React.createElement(React.Fragment, null,
+            React.createElement("source", { key: i, srcSet: source.srcset, media: source.media }),
+            ' '))),
+        ' ',
+        React.createElement("img", { src: imageSrc, alt: altText, loading: imgLoading }),
+        '  '));
 };
 export default Image;

package/esm/_abstract/TogglerGroup.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const TogglerGroup = (props) => {
+    const { 
+    // id,
+    className, bem, name, disabled, Toggler, onSelected, options, inputProps = {}, } = props;
+    const values = props.value || [];
+    return (React.createElement("ul", { className: getBemClass(bem, null, className), role: "group", "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props.required }, options.map((option, i) => {
+        const isDisabled = option.disabled != null
+            ? option.disabled
+            : disabled && typeof disabled !== 'boolean'
+                ? disabled.includes(i)
+                : disabled;
+        const isChecked = values.includes(option.value);
+        return (React.createElement(Toggler, Object.assign({ key: i }, inputProps, { className: bem + '__item', name: name, Wrapper: "li" }, option, { label: option.label || option.value, onChange: onSelected
+                ? (e) => {
+                    const { value } = option;
+                    const checked = e.currentTarget.checked;
+                    inputProps.onChange && inputProps.onChange(e);
+                    const selectedValues = values.filter((val) => val !== value);
+                    if (checked) {
+                        selectedValues.push(value);
+                    }
+                    onSelected({ value, checked, option, selectedValues });
+                }
+                : inputProps.onChange, disabled: isDisabled, "aria-invalid": props['aria-invalid'], checked: isChecked })));
+    })));
+};
+export default TogglerGroup;

package/esm/_abstract/{TogglerGroupField.jsx → TogglerGroupField.js}

@@ -15,8 +15,8 @@ import FormField from '../FormField';
 import TogglerGroup from './TogglerGroup';
 const TogglerGroupField = (props) => {
     const { bem, Toggler, className, modifier, label, LabelTag, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, value } = props, togglerGroupProps = __rest(props, ["bem", "Toggler", "className", "modifier", "label", "LabelTag", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "value"]);
-    return (<FormField className={getBemClass(bem, modifier, className)} group label={label} LabelTag={LabelTag} assistText={assistText} hideLabel={hideLabel} disabled={disabled} readOnly={readOnly} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} id={id} renderInput={(className, inputProps) => {
-            return (<TogglerGroup bem={className.options} {...inputProps} {...togglerGroupProps} value={Array.isArray(value) ? value : value != null ? [value] : undefined} Toggler={Toggler}/>);
-        }}/>);
+    return (React.createElement(FormField, { className: getBemClass(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
+            return (React.createElement(TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { value: Array.isArray(value) ? value : value != null ? [value] : undefined, Toggler: Toggler })));
+        } }));
 };
 export default TogglerGroupField;

package/esm/_abstract/{TogglerInput.jsx → TogglerInput.js}

@@ -16,20 +16,18 @@ const TogglerInput = (props) => {
     const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id } = props, inputProps = __rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id"]);
     const domid = useDomid(id);
     const errorId = errorMessage && 'error' + domid;
-    const reqStar = required && reqText !== false && (<abbr className={bem + '__label__reqstar'} 
-    // TODO: add mo-better i18n thinking
-    title={(reqText || 'Þarf að haka í') + ': '}>
-      *
-    </abbr>);
-    return (<Wrapper className={getBemClass(bem, modifier, className)}>
-      <input className={bem + '__input'} type={type} id={domid} aria-invalid={invalid || !!errorMessage || undefined} aria-describedby={errorId} {...inputProps}/>{' '}
-      <label className={bem + '__label'} htmlFor={domid}>
-        {' '}
-        {reqStar} {label}{' '}
-      </label>
-      {errorMessage && (<div className={bem + '__error'} id={errorId}>
-          {errorMessage}
-        </div>)}
-    </Wrapper>);
+    const reqStar = required && reqText !== false && (React.createElement("abbr", { className: bem + '__label__reqstar', 
+        // TODO: add mo-better i18n thinking
+        title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
+    return (React.createElement(Wrapper, { className: getBemClass(bem, modifier, className) },
+        React.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, inputProps)),
+        ' ',
+        React.createElement("label", { className: bem + '__label', htmlFor: domid },
+            ' ',
+            reqStar,
+            " ",
+            label,
+            ' '),
+        errorMessage && (React.createElement("div", { className: bem + '__error', id: errorId }, errorMessage))));
 };
 export default TogglerInput;

package/esm/_abstract/{_AbstractCarousel.jsx → _AbstractCarousel.js}

@@ -117,17 +117,14 @@ const AbstractCarousel = (props) => {
     if (!itemCount) {
         return null;
     }
-    return (<div className={getBemClass(bem, modifier, props.className)} ref={outerRef} data-sprinkled={isBrowser}>
-      {title && <h2 className={bem + '__title'}>{title}</h2>}
-      <div className={bem + '__itemlist'} style={leftOffset
-            ? { '--Carousel--leftOffset': `${leftOffset}px` }
-            : undefined} data-scroll-snapping={leftOffset ? 'true' : undefined} onMouseLeave={handleMouseLeave} ref={listRef}>
-        {children ||
+    return (React.createElement("div", { className: getBemClass(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
+        title && React.createElement("h2", { className: bem + '__title' }, title),
+        React.createElement("div", { className: bem + '__itemlist', style: leftOffset
+                ? { '--Carousel--leftOffset': `${leftOffset}px` }
+                : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, onMouseLeave: handleMouseLeave, ref: listRef }, children ||
             items.map((item, i) => (
             // @ts-expect-error  (Can't be arsed...)
-            <Component key={i} {...ComponentProps} {...item}/>))}
-      </div>
-      {isBrowser && (<CarouselStepper itemCount={itemCount} setCurrent={scrollToItem} current={activeItem}/>)}
-    </div>);
+            React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))),
+        isBrowser && (React.createElement(CarouselStepper, { itemCount: itemCount, setCurrent: scrollToItem, current: activeItem }))));
 };
 export default AbstractCarousel;

package/esm/_abstract/_Blings.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Bling from '../Bling';
+const inverseAlignments = {
+    left: 'right',
+    'left-ish': 'right-ish',
+    'left-center': 'right-center',
+    'right-center': 'left-center',
+    'right-ish': 'left-ish',
+    right: 'left',
+};
+const Blings = (props) => (React.createElement(React.Fragment, null, props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (React.createElement(Bling, { key: type + '-' + i, type: type, align: props.mirror ? inverseAlignments[align || 'left'] : align, vertical: vertical, color: color, overlay: overlay, parent: parent })))));
+export default Blings;

package/esm/_abstract/_Block.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from '../utils/seenEffect';
+import Button from './Button';
+import Image from './Image';
+const Block = (props) => {
+    const { image, modifier, bem, content, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const contentItems = Array.isArray(content) ? content : [content];
+    return (React.createElement("div", { className: getBemClass(bem, modifier), ref: ref },
+        contentItems.map(({ title, summary, buttons = [] }, i) => {
+            const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
+            return (React.createElement("div", { key: i, className: `${bem}__content` },
+                React.createElement("h2", { className: `${bem}__title` }, title),
+                hasSummary && React.createElement("div", { className: `${bem}__summary` }, summary),
+                buttons.length > 0 && (React.createElement("div", { className: `${bem}__buttons` },
+                    ' ',
+                    buttons.map((buttonProps, i) => (React.createElement(React.Fragment, null,
+                        React.createElement(Button, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
+                        ' ')))))));
+        }),
+        image && React.createElement(Image, Object.assign({ className: `${bem}__image` }, image))));
+};
+export default Block;

package/esm/_abstract/_Quote.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Link } from './Link';
+export const _Quote = (props) => {
+    const { bem, children, by, byHref } = props;
+    return (React.createElement("figure", { className: bem },
+        React.createElement("blockquote", { className: bem + '__quote' }, children),
+        by && (React.createElement("figcaption", { className: bem + '__by' }, byHref ? (React.createElement(Link, { href: byHref }, by)) : typeof by === 'string' ? (React.createElement("span", null, by)) : (by)))));
+};

package/esm/_abstract/{breakOnNL.jsx → breakOnNL.js}

@@ -4,5 +4,5 @@ const breakOnNL = (text) => text &&
         .trim()
         .replace(/(?:\n\s*)+/g, '\n\n')
         .split(/\n/)
-        .map((bit) => bit || <br />);
+        .map((bit) => bit || React.createElement("br", null));
 export default breakOnNL;