@reykjavik/hanna-react 0.10.55 → 0.10.56

package/SiteSearchInput.jsx

@@ -0,0 +1,70 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const FormField_1 = __importDefault(require("./FormField"));
+// ---------------------------------------------------------------------------
+const SiteSearchInput = react_1.default.forwardRef((props, ref) => {
+    var _a;
+    const { label, id, onChange, placeholder = typeof label === 'string' ? label : undefined, buttonText = 'Leita', onSubmit, onButtonClick = onSubmit, onKeyDown, ssr } = props, inputElementProps = __rest(props, ["label", "id", "onChange", "placeholder", "buttonText", "onSubmit", "onButtonClick", "onKeyDown", "ssr"]);
+    const { value, defaultValue } = inputElementProps;
+    const [hasValue, setHasValue] = (0, react_1.useState)(undefined);
+    const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
+    const empty = !filled && !placeholder;
+    const _onChange = value != null
+        ? onChange
+        : (e) => {
+            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();
+                    }
+                    onKeyDown && onKeyDown(e);
+                }
+                : onKeyDown} {...inputElementProps} ref={ref}/>{' '}
+            <button className="SiteSearchInput__button" type="submit" onClick={onButtonClick && ((e) => !onButtonClick() && e.preventDefault())} title={buttonText}>
+              {buttonText}
+            </button>
+          </div>)}/>);
+});
+exports.default = SiteSearchInput;

package/Skeleton.jsx

@@ -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 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', [
+        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;
+};
+const Skeleton = (props) => {
+    const height = minmax(props.height, 40);
+    const renderSkeleton = makeRenderSkeleton({
+        height,
+        text: props.text,
+        gap: minmax(props.gap, 5, 0),
+    });
+    const items = minmax(props.items, 20) || 1;
+    if (items > 1) {
+        return <>{(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}/>);
+/** Returns a single `<Skeleton text height={X}/>` element of branded type `SkeletonText` */
+Skeleton.text = (height) => (<Skeleton text height={height}/>);

package/SubHeading.jsx

@@ -0,0 +1,20 @@
+"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 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', [
+            small && 'small',
+            align === 'right' && 'align--' + align,
+            !align && wide && 'wide',
+        ])} ref={ref}>
+      {children}
+    </Tag>);
+};
+exports.default = SubHeading;

package/Tabs.jsx

@@ -0,0 +1,122 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const frag_1 = require("@hugsmidjan/qj/frag");
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const seenEffect_1 = require("./utils/seenEffect");
+const navKeyEffects = {
+    ArrowUp: -1,
+    ArrowLeft: -1,
+    ArrowDown: 1,
+    ArrowRight: 1,
+};
+// eslint-disable-next-line complexity
+const renderTab = (tabProps, index, listProps) => {
+    const { label, badge, href, type, longLabel } = tabProps;
+    const { activeIdx, activateTab, focusedIdx, setFocusedIdx, tabRole, listAriaControls, isBrowser, } = listProps;
+    const handleClick = isBrowser &&
+        ((e) => {
+            e.preventDefault();
+            activateTab(index);
+            e.currentTarget.focus();
+        });
+    const handleFocus = isBrowser && (() => setFocusedIdx(index));
+    const isActive = activeIdx === index || undefined;
+    const Tag = href && !tabRole ? 'a' : 'button';
+    const tagProps = Tag === 'button'
+        ? {
+            role: tabRole,
+            type: type || 'button',
+            // 'aria-selected': tabRole && isActive,
+            tabIndex: tabRole ? (focusedIdx === index ? 0 : -1) : undefined,
+            'aria-controls': tabProps['aria-controls'] || (tabRole && (0, frag_1.getFrag)(href)) || listAriaControls,
+        }
+        : { 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>,
+        ' ',
+    ];
+};
+// NOTE: This isBrowser tablist behavior is based on
+// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
+const Tabs = (props) => {
+    var _a, _b;
+    const { tabs, role, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-controls': listAriaControls, id, activeIdx, onSetActive, activateOnFocus, ssr, startSeen, vertical, subTabs, } = props;
+    const isBrowser = (0, hooks_1.useIsBrowserSide)(ssr);
+    const [focusedIdx, setFocusedIdx] = (0, react_1.useState)(activeIdx || 0);
+    const tabRole = isBrowser && role === 'tablist' ? 'tab' : undefined;
+    const activateTab = (index) => {
+        const tab = tabs[index];
+        if (index === activeIdx || !tab) {
+            return;
+        }
+        const ret = tab.onActivated && tab.onActivated.call(null);
+        if (onSetActive && ret !== false) {
+            onSetActive(index, tab);
+        }
+    };
+    const handleKeydown = tabRole &&
+        ((e) => {
+            var _a;
+            const delta = navKeyEffects[e.key];
+            if (delta) {
+                // prevent scolling +
+                // prevent bubbling to parent Tabs container
+                e.stopPropagation();
+                let nextIdx = (focusedIdx || 0) + delta;
+                const maxIdx = tabs.length - 1;
+                nextIdx = nextIdx < 0 ? maxIdx : nextIdx > maxIdx ? 0 : nextIdx;
+                (_a = e.currentTarget.querySelectorAll('.Tabs__tab')[nextIdx]) === null || _a === void 0 ? void 0 : _a.focus();
+                activateOnFocus && activateTab(nextIdx);
+            }
+        });
+    const [ref] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    const listProps = {
+        activeIdx,
+        activateTab,
+        focusedIdx,
+        setFocusedIdx,
+        tabRole,
+        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>);
+};
+exports.default = Tabs;

package/TagPill.jsx

@@ -0,0 +1,53 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 Button_1 = __importDefault(require("./_abstract/Button"));
+const colors = {
+    normal: '',
+    green: 'color--green',
+    yellow: 'color--yellow',
+    orange: 'color--orange',
+    red: 'color--red',
+};
+const TagPill = (props) => {
+    const { modifier, large, removable, onRemove, children, color = 'normal', label = children, removeLabel = 'x', removeLabelLong = removeLabel } = props, buttonProps = __rest(props, ["modifier", "large", "removable", "onRemove", "children", "color", "label", "removeLabel", "removeLabelLong"]);
+    const isStatic = !('href' in props || 'type' in props || props.onClick);
+    process.env.NODE_ENV !== 'production' &&
+        removable &&
+        isStatic &&
+        !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>);
+};
+exports.default = TagPill;

package/TextBlock.jsx

@@ -0,0 +1,22 @@
+"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 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', [
+            labelled && 'labelled',
+            rightAligned && 'align--right',
+            wide && !rightAligned && 'wide',
+            small && !labelled && 'small',
+        ])} ref={ref}>
+      {children}
+    </div>);
+};
+exports.default = TextBlock;

package/TextButton.jsx

@@ -0,0 +1,14 @@
+"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 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}/>;
+};
+exports.default = TextButton;

package/TextInput.jsx

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const FormField_1 = __importDefault(require("./FormField"));
+const TextInput = (props) => {
+    var _a;
+    const { className, label, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, onChange, small, type, ssr, inputRef } = props, inputElementProps = __rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "onChange", "small", "type", "ssr", "inputRef"]);
+    const { value, defaultValue, placeholder } = inputElementProps;
+    const [hasValue, setHasValue] = (0, react_1.useState)(undefined);
+    const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
+    const empty = !filled && !placeholder;
+    const multiline = type === 'textarea';
+    const modifiers = [multiline && 'multiline'];
+    const _onChange = value != null
+        ? onChange
+        : (e) => {
+            setHasValue(!!e.target.value);
+            onChange &&
+                onChange(
+                // 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}/>)}/>);
+};
+exports.default = TextInput;

package/VSpacer.jsx

@@ -0,0 +1,46 @@
+"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 sizes = {
+    none: 'none',
+    small: 'small',
+    default: '',
+    medium: '',
+    large: 'large',
+    xlarge: 'xlarge',
+};
+const hasChildren = (children) => (children && !(Array.isArray(children) && !children.length)) || undefined;
+const normalizeProp = (value, exclude) => value && value !== exclude ? sizes[value] : undefined;
+const VSpacer = (props) => {
+    const { size, top, bottom, children } = props;
+    const isWrapper = hasChildren(children);
+    let topVal = normalizeProp(isWrapper && top);
+    let bottomVal = normalizeProp(isWrapper && bottom);
+    let sizeVal = !(topVal && bottomVal) && normalizeProp(size, 'none');
+    // collapse effectively-duplicate class modifiers
+    if (!sizeVal && topVal === bottomVal && topVal !== 'none') {
+        sizeVal = topVal;
+        topVal = bottomVal = undefined;
+    }
+    else if (sizeVal) {
+        if (sizeVal === topVal) {
+            sizeVal = topVal;
+            topVal = undefined;
+        }
+        if (sizeVal === bottomVal) {
+            sizeVal = bottomVal;
+            bottomVal = undefined;
+        }
+    }
+    const className = (0, getBemClass_1.default)('VSpacer', [
+        sizeVal,
+        topVal && 'top--' + topVal,
+        bottomVal && 'bottom--' + bottomVal,
+    ]);
+    return isWrapper ? (<div className={className}>{children}</div>) : (<hr className={className}/>);
+};
+exports.default = VSpacer;

package/VerticalTabsTOC.jsx

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const frag_1 = require("@hugsmidjan/qj/frag");
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const Tabs_1 = __importDefault(require("./Tabs"));
+const getId = (url) => (url && decodeURIComponent(url.split('#')[1] || '')) || '';
+const getItemId = (item) => getId(item && item.href);
+const mapToItemsById = (items, domid) => {
+    const updatedItems = items.map((item) => {
+        return Object.assign(Object.assign({}, item), { 'aria-controls': item['aria-controls'] || domid });
+    });
+    const itemsById = {};
+    updatedItems.forEach((topItem, activeIdx) => {
+        const subItems = topItem.items;
+        if (!subItems) {
+            const itemId = getItemId(topItem);
+            itemsById[itemId] = { activeIdx };
+            return;
+        }
+        subItems.forEach((subItem, idx) => {
+            itemsById[getItemId(subItem)] = {
+                activeIdx,
+                subTabs: {
+                    activeIdx: idx,
+                    'aria-label': topItem.longLabel || topItem.label,
+                    id: topItem['aria-controls'],
+                    tabs: subItems,
+                    onSetActive: (_, item) => {
+                        const newId = getItemId(item);
+                        (0, frag_1.setFrag)(newId);
+                    },
+                },
+            };
+            if (idx === 0) {
+                topItem.href = topItem.href || '#' + getItemId(subItem);
+            }
+        });
+    });
+    return { itemsById, updatedItems };
+};
+const VerticalTabsTOC = (props) => {
+    const { onItemSelect, items } = props;
+    const _domid = (0, hooks_1.useDomid)();
+    const domid = props.id || _domid;
+    const { itemsById, updatedItems } = (0, react_1.useMemo)(() => mapToItemsById(items, domid), [items, domid]);
+    const [state, setState] = (0, react_1.useState)(() => {
+        const initialId = typeof location !== 'undefined' ? getId(location.hash) : '';
+        return itemsById[initialId] || itemsById[getItemId(updatedItems[0])] || {};
+    });
+    (0, react_1.useEffect)(() => {
+        const handleHash = () => {
+            const newId = getId(location.href);
+            const newState = itemsById[newId];
+            if (newState) {
+                setState(newState);
+                onItemSelect(newId);
+            }
+        };
+        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) => {
+            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}/>);
+};
+exports.default = VerticalTabsTOC;

package/WizardLayout.jsx

@@ -0,0 +1,44 @@
+"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 (<div className="WizardLayout" data-sprinkled={isBrowser} data-color-theme={colorTheme}>
+      {globalAlerts && (<div className="WizardLayout__alerts" role="alert">
+          {globalAlerts}
+        </div>)}
+      <div className="WizardLayout__content">
+        <div className="WizardLayout__header" role="banner">
+          <Link_1.Link className="WizardLayout__header__logo" href={logoLink}>
+            {' '}
+            <Image_1.default inline={true} src={(0, assets_1.getAssetUrl)('reykjavik-logo.svg')}/> {siteName}{' '}
+          </Link_1.Link>{' '}
+        </div>
+        <div className="WizardLayout__wrap">
+          {wizardStepper && (<div className="WizardLayout__stepper" role="navigation">
+              {wizardStepper}
+            </div>)}
+          <div className="WizardLayout__main" role="main">
+            {children}
+          </div>
+          <div className="WizardLayout__deco WizardLayout__deco--geometry"/>
+        </div>
+        <div className="WizardLayout__footer" role="complementary">
+          {wizardFooter}
+        </div>
+      </div>
+    </div>);
+};
+exports.default = WizardLayout;

package/WizardLayoutClose.jsx

@@ -0,0 +1,9 @@
+"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 Button_1 = __importDefault(require("./_abstract/Button"));
+const WizardLayoutClose = (props) => (<Button_1.default bem="WizardLayoutClose" {...props}/>);
+exports.default = WizardLayoutClose;

package/WizardStepper.jsx

@@ -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 WizardStepper = (props) => {
+    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
+    return (<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.Fragment key={i}>
+            {isClickable ? (<button type="button" className={stepClass} onClick={() => onClick(i)} aria-current={ariaCurrent}>
+                {label}
+              </button>) : (<span className={stepClass} aria-current={ariaCurrent}>
+                {' '}
+                {label}{' '}
+              </span>)}{' '}
+          </react_1.default.Fragment>);
+        })}
+    </div>);
+};
+exports.default = WizardStepper;