@reykjavik/hanna-react 0.10.56 → 0.10.59

package/{SiteSearchCurtain.jsx → SiteSearchCurtain.js}

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

package/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/{SiteSearchInput.jsx → SiteSearchInput.js}

@@ -53,18 +53,16 @@ const SiteSearchInput = react_1.default.forwardRef((props, ref) => {
             setHasValue(!!e.target.value);
             onChange && onChange(e);
         };
-    return (<FormField_1.default 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_1.default.createElement(FormField_1.default, { className: "SiteSearchInput", ssr: ssr, label: label, empty: empty, filled: filled, id: id, renderInput: (className, inputProps, addFocusProps) => (react_1.default.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
+            react_1.default.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_1.default.createElement("button", { className: "SiteSearchInput__button", type: "submit", onClick: onButtonClick && ((e) => !onButtonClick() && e.preventDefault()), title: buttonText }, buttonText))) }));
 });
 exports.default = SiteSearchInput;

package/{Skeleton.jsx → Skeleton.js}

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const range_1 = __importDefault(require("@hugsmidjan/qj/range"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const makeRenderSkeleton = (props) => (key) => (<span key={key} className={(0, getBemClass_1.default)('Skeleton', [
+const makeRenderSkeleton = (props) => (key) => (react_1.default.createElement("span", { key: key, className: (0, getBemClass_1.default)('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;
@@ -24,12 +24,12 @@ const Skeleton = (props) => {
     });
     const items = minmax(props.items, 20) || 1;
     if (items > 1) {
-        return <>{(0, range_1.default)(1, items).map(renderSkeleton)}</>;
+        return react_1.default.createElement(react_1.default.Fragment, null, (0, range_1.default)(1, items).map(renderSkeleton));
     }
     return renderSkeleton();
 };
 exports.default = Skeleton;
 /** Returns a single `<Skeleton height={X}/>` element of branded type `SkeletonBlock` */
-Skeleton.block = (height) => (<Skeleton height={height}/>);
+Skeleton.block = (height) => (react_1.default.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_1.default.createElement(Skeleton, { text: true, height: height }));

package/{SubHeading.jsx → SubHeading.js}

@@ -9,12 +9,10 @@ const seenEffect_1 = require("./utils/seenEffect");
 const SubHeading = (props) => {
     const { small, Tag = 'h2', children, align, wide, startSeen } = props;
     const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
-    return (<Tag className={(0, getBemClass_1.default)('SubHeading', [
+    return (react_1.default.createElement(Tag, { className: (0, getBemClass_1.default)('SubHeading', [
             small && 'small',
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
-        ])} ref={ref}>
-      {children}
-    </Tag>);
+        ]), ref: ref }, children));
 };
 exports.default = SubHeading;

package/{Tabs.jsx → Tabs.js}

@@ -60,10 +60,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_1.default.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_1.default.createElement("small", { className: "Tabs__tab__badge" },
+                "(",
+                badge,
+                ")")),
         ' ',
     ];
 };
@@ -110,13 +113,10 @@ const Tabs = (props) => {
         listAriaControls,
         isBrowser,
     };
-    return (<div className={(0, getBemClass_1.default)('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_1.default.createElement("div", { className: (0, getBemClass_1.default)('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_1.default.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 })))));
 };
 exports.default = Tabs;

package/TagPill.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps } from './_abstract/Button';
+import { ButtonProps } from './_abstract/_Button';
 declare const colors: {
     readonly normal: "";
     readonly green: "color--green";

package/{TagPill.jsx → TagPill.js}

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const Button_1 = __importDefault(require("./_abstract/Button"));
+const _Button_1 = __importDefault(require("./_abstract/_Button"));
 const colors = {
     normal: '',
     green: 'color--green',
@@ -33,21 +33,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={(0, getBemClass_1.default)('TagPill', modifiers)}>
-      {label} {removeBtn}
-    </span>) : onRemove ? (<span className={(0, getBemClass_1.default)('TagPill', modifiers)}>
-      <Button_1.default bem="TagPill__button" {...buttonProps}>
-        {label}
-      </Button_1.default>{' '}
-      {removeBtn}
-    </span>) : (<Button_1.default bem="TagPill" {...buttonProps} modifier={modifiers}>
-      {label}{' '}
-      {removable && (<span className="TagPill__remove" aria-label={removeLabelLong}>
-          {removeLabel}
-        </span>)}
-    </Button_1.default>);
+    const removeBtn = removable && (react_1.default.createElement("button", { className: "TagPill__remove", onClick: onRemove && (() => onRemove()), "aria-label": removeLabelLong, type: "button" }, removeLabel));
+    return isStatic ? (react_1.default.createElement("span", { className: (0, getBemClass_1.default)('TagPill', modifiers) },
+        label,
+        " ",
+        removeBtn)) : onRemove ? (react_1.default.createElement("span", { className: (0, getBemClass_1.default)('TagPill', modifiers) },
+        react_1.default.createElement(_Button_1.default, Object.assign({ bem: "TagPill__button" }, buttonProps), label),
+        ' ',
+        removeBtn)) : (react_1.default.createElement(_Button_1.default, Object.assign({ bem: "TagPill" }, buttonProps, { modifier: modifiers }),
+        label,
+        ' ',
+        removable && (react_1.default.createElement("span", { className: "TagPill__remove", "aria-label": removeLabelLong }, removeLabel))));
 };
 exports.default = TagPill;

package/{TextBlock.jsx → TextBlock.js}

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

package/TextButton.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ButtonProps } from './_abstract/Button';
+import { ButtonProps } from './_abstract/_Button';
 export declare type TextButtonProps = ButtonProps & {
     disabled?: never;
 };

package/{TextButton.jsx → TextButton.js}

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("./_abstract/Button"));
+const _Button_1 = __importDefault(require("./_abstract/_Button"));
 const TextButton = (props) => {
     if ('disabled' in props) {
         props = Object.assign(Object.assign({}, props), { disabled: undefined });
     }
-    return <Button_1.default bem="TextButton" {...props}/>;
+    return react_1.default.createElement(_Button_1.default, Object.assign({ bem: "TextButton" }, props));
 };
 exports.default = TextButton;

package/{TextInput.jsx → TextInput.js}

@@ -58,6 +58,6 @@ const TextInput = (props) => {
                 // TypeScript is silly sometimes.
                 e);
         };
-    return (<FormField_1.default className={(0, getBemClass_1.default)('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_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('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_1.default.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (react_1.default.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
 };
 exports.default = TextInput;

package/{VSpacer.jsx → VSpacer.js}

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

package/{VerticalTabsTOC.jsx → VerticalTabsTOC.js}

@@ -86,11 +86,11 @@ const VerticalTabsTOC = (props) => {
         window.addEventListener('hashchange', handleHash);
         return () => window.removeEventListener('hashchange', handleHash);
     }, [itemsById, onItemSelect]);
-    return (<Tabs_1.default id={domid} vertical aria-label={props['aria-label']} onSetActive={(_, item) => {
+    return (react_1.default.createElement(Tabs_1.default, { 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]);
             (0, frag_1.setFrag)(newId);
-        }} tabs={updatedItems} role="tablist" activeIdx={state.activeIdx} subTabs={state.subTabs}/>);
+        }, tabs: updatedItems, role: "tablist", activeIdx: state.activeIdx, subTabs: state.subTabs }));
 };
 exports.default = VerticalTabsTOC;

package/WizardLayout.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const _Image_1 = __importDefault(require("./_abstract/_Image"));
+const _Link_1 = require("./_abstract/_Link");
+const useScrollbarWidthCSSVar_1 = require("./utils/useScrollbarWidthCSSVar");
+const WizardLayout = (props) => {
+    (0, useScrollbarWidthCSSVar_1.useScrollbarWidthCSSVar)();
+    const { 
+    // ssr,
+    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = 'Reykjavík', globalAlerts, } = props;
+    const isBrowser = (0, hooks_1.useIsBrowserSide)( /* ssr */);
+    return (react_1.default.createElement("div", { className: "WizardLayout", "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
+        globalAlerts && (react_1.default.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
+        react_1.default.createElement("div", { className: "WizardLayout__content" },
+            react_1.default.createElement("div", { className: "WizardLayout__header", role: "banner" },
+                react_1.default.createElement(_Link_1.Link, { className: "WizardLayout__header__logo", href: logoLink },
+                    ' ',
+                    react_1.default.createElement(_Image_1.default, { className: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg') }),
+                    ' ',
+                    siteName,
+                    ' '),
+                ' '),
+            react_1.default.createElement("div", { className: "WizardLayout__wrap" },
+                wizardStepper && (react_1.default.createElement("div", { className: "WizardLayout__stepper", role: "navigation" }, wizardStepper)),
+                react_1.default.createElement("div", { className: "WizardLayout__main", role: "main" }, children),
+                react_1.default.createElement("div", { className: "WizardLayout__deco WizardLayout__deco--geometry" })),
+            react_1.default.createElement("div", { className: "WizardLayout__footer", role: "complementary" }, wizardFooter))));
+};
+exports.default = WizardLayout;

package/WizardLayoutClose.d.ts

@@ -1,3 +1,3 @@
-import { ButtonProps } from './_abstract/Button';
+import { ButtonProps } from './_abstract/_Button';
 declare const WizardLayoutClose: (props: ButtonProps) => JSX.Element;
 export default WizardLayoutClose;

package/{WizardLayoutClose.jsx → WizardLayoutClose.js}

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Button_1 = __importDefault(require("./_abstract/Button"));
-const WizardLayoutClose = (props) => (<Button_1.default bem="WizardLayoutClose" {...props}/>);
+const _Button_1 = __importDefault(require("./_abstract/_Button"));
+const WizardLayoutClose = (props) => (react_1.default.createElement(_Button_1.default, Object.assign({ bem: "WizardLayoutClose" }, props)));
 exports.default = WizardLayoutClose;

package/WizardStepper.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const WizardStepper = (props) => {
+    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
+        const { label, clickable, done, neutral } = step;
+        const stepClass = (0, getBemClass_1.default)('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_1.default.createElement(react_1.default.Fragment, { key: i },
+            isClickable ? (react_1.default.createElement("button", { type: "button", className: stepClass, onClick: () => onClick(i), "aria-current": ariaCurrent }, label)) : (react_1.default.createElement("span", { className: stepClass, "aria-current": ariaCurrent },
+                ' ',
+                label,
+                ' ')),
+            ' '));
+    })));
+};
+exports.default = WizardStepper;

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

@@ -145,17 +145,14 @@ const AbstractCarousel = (props) => {
     if (!itemCount) {
         return null;
     }
-    return (<div className={(0, getBemClass_1.default)(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_1.default.createElement("div", { className: (0, getBemClass_1.default)(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
+        title && react_1.default.createElement("h2", { className: bem + '__title' }, title),
+        react_1.default.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_1.default itemCount={itemCount} setCurrent={scrollToItem} current={activeItem}/>)}
-    </div>);
+            react_1.default.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))),
+        isBrowser && (react_1.default.createElement(CarouselStepper_1.default, { itemCount: itemCount, setCurrent: scrollToItem, current: activeItem }))));
 };
 exports.default = AbstractCarousel;

package/_abstract/{_Blings.jsx → _Blings.js}

@@ -13,7 +13,5 @@ const inverseAlignments = {
     'right-ish': 'left-ish',
     right: 'left',
 };
-const Blings = (props) => (<>
-    {props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (<Bling_1.default key={type + '-' + i} type={type} align={props.mirror ? inverseAlignments[align || 'left'] : align} vertical={vertical} color={color} overlay={overlay} parent={parent}/>))}
-  </>);
+const Blings = (props) => (react_1.default.createElement(react_1.default.Fragment, null, props.blings.map(({ type, align, vertical, color, overlay, parent }, i) => (react_1.default.createElement(Bling_1.default, { key: type + '-' + i, type: type, align: props.mirror ? inverseAlignments[align || 'left'] : align, vertical: vertical, color: color, overlay: overlay, parent: parent })))));
 exports.default = Blings;

package/_abstract/_Block.d.ts

@@ -1,7 +1,7 @@
 import { BemPropsModifier } from '@hugsmidjan/react/types';
 import { SeenProp } from '../utils/seenEffect';
-import { ButtonProps } from './Button';
-import { ImageProps } from './Image';
+import { ButtonProps } from './_Button';
+import { ImageProps } from './_Image';
 export declare type BlockItem = {
     title: string;
     summary?: string | JSX.Element;

package/_abstract/_Block.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const seenEffect_1 = require("../utils/seenEffect");
+const _Button_1 = __importDefault(require("./_Button"));
+const _Image_1 = __importDefault(require("./_Image"));
+const Block = (props) => {
+    const { image, modifier, bem, content, startSeen } = props;
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    const contentItems = Array.isArray(content) ? content : [content];
+    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)(bem, modifier), ref: ref },
+        contentItems.map(({ title, summary, buttons = [] }, i) => {
+            const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
+            return (react_1.default.createElement("div", { key: i, className: `${bem}__content` },
+                react_1.default.createElement("h2", { className: `${bem}__title` }, title),
+                hasSummary && react_1.default.createElement("div", { className: `${bem}__summary` }, summary),
+                buttons.length > 0 && (react_1.default.createElement("div", { className: `${bem}__buttons` },
+                    ' ',
+                    buttons.map((buttonProps, i) => (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(_Button_1.default, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
+                        ' ')))))));
+        }),
+        image && react_1.default.createElement(_Image_1.default, Object.assign({ className: `${bem}__image` }, image))));
+};
+exports.default = Block;

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

@@ -16,7 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const Link_1 = require("./Link");
+const _Link_1 = require("./_Link");
 // ---------------------------------------------------------------------------
 const sizes = {
     normal: '',
@@ -43,14 +43,10 @@ const Button = (props) => {
         (0, getBemClass_1.default)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
     if (buttonProps.href != null) {
-        return (<Link_1.Link className={className} {...buttonProps} style={undefined} {...iconProp}>
-        {label}
-      </Link_1.Link>);
+        return (react_1.default.createElement(_Link_1.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_1.default.createElement("button", Object.assign({ className: className, type: "button" }, buttonProps, { style: undefined }, iconProp), label));
     }
 };
 exports.default = Button;

package/_abstract/{CardList.d.ts → _CardList.d.ts}

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { ImageProps } from './Image';
+import { ImageProps } from './_Image';
 declare type BaseCardProps = {
     title: string;
     href: string;
@@ -24,6 +24,7 @@ export declare type TextCardListProps = CardListProps<TextCardProps>;
 declare type _CardListProps = CardListProps<BaseCardProps> & {
     bemPrefix: string;
     children?: ReactNode;
+    standalone?: boolean;
 };
 export declare const CardList: (props: _CardListProps) => JSX.Element;
 export {};

package/_abstract/_CardList.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardList = void 0;
+const react_1 = __importDefault(require("react"));
+const _Button_1 = __importDefault(require("./_Button"));
+const _Image_1 = __importDefault(require("./_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_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(_Button_1.default, { bem: cardClass, href: href },
+            ' ',
+            react_1.default.createElement(_Image_1.default, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
+            react_1.default.createElement("span", { className: `${cardClass}__title` }, title),
+            ' ',
+            meta && react_1.default.createElement("span", { className: `${cardClass}__meta` }, meta),
+            ' ',
+            summary && react_1.default.createElement("span", { className: `${cardClass}__summary` }, summary),
+            ' '),
+        ' '));
+};
+const CardList = (props) => {
+    const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
+    const TitleTag = titleTag;
+    const fallbackImageUrl = (imgPlaceholder !== true && imgPlaceholder) || undefined;
+    const fallbackImageStyle = fallbackImageUrl
+        ? {
+            ['--' + bemPrefix + '--fallback']: `url("${fallbackImageUrl}")`,
+        }
+        : undefined;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        summaryElement ? (react_1.default.createElement("div", { className: bemPrefix + '__summary' },
+            title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title),
+            summaryElement)) : (title && react_1.default.createElement(TitleTag, { className: bemPrefix + '__title' }, title)),
+        react_1.default.createElement("ul", { className: bemPrefix + (props.standalone ? '' : '__list'), style: fallbackImageStyle }, cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: bemPrefix + '__item' },
+            react_1.default.createElement(Card, Object.assign({}, card, { bem: bemPrefix, imgPlaceholder: !!imgPlaceholder })))))),
+        children));
+};
+exports.CardList = CardList;

package/{esm/_abstract/Image.d.ts → _abstract/_Image.d.ts}

@@ -2,25 +2,29 @@ export declare type Source = {
     srcset: string;
     media: string;
 };
-export declare type ImageProps = {
+export declare type ImagePropsLinked = {
     altText?: string;
-} & ({
     sources?: Array<Source>;
     /** The default image source to (lazy) load */
     src?: string;
     /** Eagerly-loaded placeholder/thunbnail to use until a `sources` item has been picked.  */
     preloadSrc?: string;
     inline?: false;
-} | {
+    focalPoint?: string;
+};
+export declare type ImagePropsInlinedSvg = {
+    altText?: string;
     /** Should the image be fetched and inlined as <svg/> */
     inline: true;
     src: string;
     sources?: undefined;
     preloadSrc?: undefined;
-});
+    focalPoint?: undefined;
+};
+export declare type ImageProps = ImagePropsLinked | ImagePropsInlinedSvg;
 declare type _ImageProps = {
     /** container className */
-    className?: string;
+    className: string | undefined;
     /** Controls if the container is rendered when image is missing/undefined.
      * (With a `--missing` className modifier added.)
      *