@reykjavik/hanna-react 0.10.56 → 0.10.57

package/{Selectbox.jsx → Selectbox.js}

@@ -69,6 +69,6 @@ const Selectbox = (props) => {
         setIsEmpty(!((_a = selectElm.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.text));
         onChange && onChange(e);
     };
-    return (<FormField_1.default className={(0, getBemClass_1.default)('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_1.default bem={className.input} ssr={ssr} onChange={_onChange} {...inputProps} {...addFocusProps(selectProps)} selectRef={selectRef}/>)}/>);
+    return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('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_1.default.createElement(Selectbox_1.default, Object.assign({ bem: className.input, ssr: ssr, onChange: _onChange }, inputProps, addFocusProps(selectProps), { selectRef: selectRef }))) }));
 };
 exports.default = Selectbox;

package/{ShareButtons.jsx → ShareButtons.js}

@@ -40,11 +40,8 @@ const ShareButtons__item = (props) => {
     const { label, type, href } = props;
     const buttonText = (0, shareButtonsUtils_1.getShareButtonLabel)(type, label);
     const popup = type !== 'email';
-    return (<li className="ShareButtons__item">
-      <Link_1.Link className={'ShareButtons__link ShareButtons__link--' + type} href={href} title={buttonText} rel="noopener noreferrer" target={popup ? '_blank' : undefined} onClick={popup ? shareButtonsUtils_1.openInPopup : undefined}>
-        {buttonText}
-      </Link_1.Link>
-    </li>);
+    return (react_1.default.createElement("li", { className: "ShareButtons__item" },
+        react_1.default.createElement(Link_1.Link, { className: 'ShareButtons__link ShareButtons__link--' + type, href: href, title: buttonText, rel: "noopener noreferrer", target: popup ? '_blank' : undefined, onClick: popup ? shareButtonsUtils_1.openInPopup : undefined }, buttonText)));
 };
 const ShareButtons = (props) => {
     const { texts, ssr, facebook = true, twitter = true, linkedin, email, } = props;
@@ -64,7 +61,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_1.default.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,
@@ -72,11 +69,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">
-        {shareButtonsUtils_1.shareButtonTypes.map((type) => showTypes[type] && (<ShareButtons__item key={type} type={type} label={buttonLabel || ''} href={docMeta.hrefs[type]}/>))}
-      </ul>
-    </div>);
+    return (react_1.default.createElement("div", { className: "ShareButtons", "aria-label": label, "data-sprinkled": "true" },
+        label && react_1.default.createElement("strong", { className: "ShareButtons__label" }, label),
+        react_1.default.createElement("ul", { className: "ShareButtons__list" }, shareButtonsUtils_1.shareButtonTypes.map((type) => showTypes[type] && (react_1.default.createElement(ShareButtons__item, { key: type, type: type, label: buttonLabel || '', href: docMeta.hrefs[type] }))))));
 };
 exports.default = ShareButtons;

package/{Sharpie.jsx → Sharpie.js}

@@ -22,6 +22,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={(0, getBemClass_1.default)('Sharpie', colorModifier)}>{children}</Tag>;
+    return react_1.default.createElement(Tag, { className: (0, getBemClass_1.default)('Sharpie', colorModifier) }, children);
 };
 exports.default = Sharpie;

package/{SiteSearchAutocomplete.jsx → SiteSearchAutocomplete.js}

@@ -63,7 +63,7 @@ const SiteSearchAutocomplete = (props) => {
     const [value, setValue] = (0, react_1.useState)('');
     const inputRef = (0, react_1.createRef)();
     const txt = (0, i18n_1.getTexts)(props, exports.defaultSiteSearchACTexts);
-    return (<react_autosuggest_1.default theme={{
+    return (react_1.default.createElement(react_autosuggest_1.default, { theme: {
             container: bem,
             containerOpen: bem + '--open',
             suggestionsContainer: bem + '__container',
@@ -71,19 +71,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_1.default.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_1.default {...siteSearchProps} label={props.label || txt.inputLabel} placeholder={txt.placeholder} onSubmit={onSubmit && (() => onSubmit(value))} onButtonClick={onButtonClick && (() => onButtonClick(value))}/>);
-        }}/>);
+            return (react_1.default.createElement(SiteSearchInput_1.default, Object.assign({}, siteSearchProps, { label: props.label || txt.inputLabel, placeholder: txt.placeholder, onSubmit: onSubmit && (() => onSubmit(value)), onButtonClick: onButtonClick && (() => onButtonClick(value)) })));
+        } }));
 };
 exports.default = SiteSearchAutocomplete;

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

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

@@ -9,6 +9,6 @@ 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, { 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.jsx → WizardLayoutClose.js}

@@ -5,5 +5,5 @@ 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 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/{Button.jsx → Button.js}

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

@@ -0,0 +1,43 @@
+"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 fallbackImage = (imgPlaceholder !== true && imgPlaceholder) || undefined;
+    const fallbackImageStyle = fallbackImage
+        ? { '--ImageCards--fallback': `url("${fallbackImage}")` }
+        : 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 + '__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/_abstract/{Image.jsx → Image.js}

@@ -14,21 +14,19 @@ const Image = (props) => {
     const imgLoading = preloadSrc ? 'eager' : 'lazy';
     const inlineSvg = (0, useGetSVGtext_1.useGetSVGtext)(inline ? imageSrc : undefined);
     if (!imageSrc) {
-        return placeholder ? (<span className={className && (0, getBemClass_1.default)(className, 'missing')}>
-        {placeholder !== true && placeholder()}
-      </span>) : null;
+        return placeholder ? (react_1.default.createElement("span", { className: className && (0, getBemClass_1.default)(className, 'missing') }, placeholder !== true && placeholder())) : null;
     }
     if (inline && inlineSvg) {
         const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
-        return <span className={className} dangerouslySetInnerHTML={{ __html }}/>;
+        return react_1.default.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_1.default.createElement("picture", { className: className },
+        ' ',
+        sources.map((source, i) => (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("source", { key: i, srcSet: source.srcset, media: source.media }),
+            ' '))),
+        ' ',
+        react_1.default.createElement("img", { src: imageSrc, alt: altText, loading: imgLoading }),
+        '  '));
 };
 exports.default = Image;

package/_abstract/TogglerGroup.js

@@ -0,0 +1,34 @@
+"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 TogglerGroup = (props) => {
+    const { 
+    // id,
+    className, bem, name, disabled, Toggler, onSelected, options, inputProps = {}, } = props;
+    const values = props.value || [];
+    return (react_1.default.createElement("ul", { className: (0, getBemClass_1.default)(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_1.default.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 })));
+    })));
+};
+exports.default = TogglerGroup;

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

@@ -20,8 +20,8 @@ const FormField_1 = __importDefault(require("../FormField"));
 const TogglerGroup_1 = __importDefault(require("./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_1.default className={(0, getBemClass_1.default)(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_1.default bem={className.options} {...inputProps} {...togglerGroupProps} value={Array.isArray(value) ? value : value != null ? [value] : undefined} Toggler={Toggler}/>);
-        }}/>);
+    return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)(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_1.default.createElement(TogglerGroup_1.default, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { value: Array.isArray(value) ? value : value != null ? [value] : undefined, Toggler: Toggler })));
+        } }));
 };
 exports.default = TogglerGroupField;

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

@@ -21,20 +21,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 = (0, hooks_1.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={(0, getBemClass_1.default)(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_1.default.createElement("abbr", { className: bem + '__label__reqstar', 
+        // TODO: add mo-better i18n thinking
+        title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
+    return (react_1.default.createElement(Wrapper, { className: (0, getBemClass_1.default)(bem, modifier, className) },
+        react_1.default.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, inputProps)),
+        ' ',
+        react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid },
+            ' ',
+            reqStar,
+            " ",
+            label,
+            ' '),
+        errorMessage && (react_1.default.createElement("div", { className: bem + '__error', id: errorId }, errorMessage))));
 };
 exports.default = TogglerInput;