@reykjavik/hanna-react 0.10.53 → 0.10.56

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;

package/_abstract/Button.jsx

@@ -0,0 +1,56 @@
+"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 Link_1 = require("./Link");
+// ---------------------------------------------------------------------------
+const sizes = {
+    normal: '',
+    small: 'small',
+    wide: 'wide',
+};
+// ---------------------------------------------------------------------------
+const variants = {
+    normal: '',
+    destructive: 'destructive',
+};
+const navigationFlags = {
+    none: '',
+    'go-back': 'go--back',
+    'go-forward': 'go--forward',
+};
+const icons = {
+    // TODO: insert icons
+    edit: 'edit',
+};
+const Button = (props) => {
+    const { bem, small, size = 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
+    const className = bem &&
+        (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>);
+    }
+    else {
+        return (<button className={className} type="button" {...buttonProps} style={undefined} {...iconProp}>
+        {label}
+      </button>);
+    }
+};
+exports.default = Button;

package/_abstract/CardList.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 });
+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 (<>
+      <Button_1.default bem={cardClass} href={href}>
+        {' '}
+        <Image_1.default className={`${bem}__image`} {...image} placeholder={imgPlaceholder}/>
+        <span className={`${cardClass}__title`}>{title}</span>{' '}
+        {meta && <span className={`${cardClass}__meta`}>{meta}</span>}{' '}
+        {summary && <span className={`${cardClass}__summary`}>{summary}</span>}{' '}
+      </Button_1.default>{' '}
+    </>);
+};
+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 (<>
+      {summaryElement ? (<div className={bemPrefix + '__summary'}>
+          {title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>}
+          {summaryElement}
+        </div>) : (title && <TitleTag className={bemPrefix + '__title'}>{title}</TitleTag>)}
+      <ul className={bemPrefix + '__list'} style={fallbackImageStyle}>
+        {cards.map((card, i) => (<li key={i} className={bemPrefix + '__item'}>
+            <Card {...card} bem={bemPrefix} imgPlaceholder={!!imgPlaceholder}/>
+          </li>))}
+      </ul>
+      {children}
+    </>);
+};
+exports.CardList = CardList;

package/_abstract/Image.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 useGetSVGtext_1 = require("../utils/useGetSVGtext");
+// eslint-disable-next-line complexity
+const Image = (props) => {
+    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, } = props;
+    const _src = (sources.length && preloadSrc) || src;
+    const imageSrc = _src || (sources[0] != null ? sources[0].srcset.split(' ')[0] : undefined);
+    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;
+    }
+    if (inline && inlineSvg) {
+        const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
+        return <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>);
+};
+exports.default = Image;

package/_abstract/Link.jsx

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setLinkRenderer = exports.Link = void 0;
+const react_1 = __importDefault(require("react"));
+const DefaultLinkRenderer = (props) => react_1.default.createElement('a', props);
+exports.Link = DefaultLinkRenderer;
+/**
+ * Allows you to set a callback function to wrapp <a href=""/> links with
+ * a custom routing component.
+ *
+ * Example use:
+ *
+ * ```js
+ *   import { Link } from 'remix'; // or whatever :-)
+ *
+ *   setLinkRenderer((linkProps) =>
+ *     <Link to={linkProps.href}><a {...linkProps} /></Link>);
+ * ```
+ *
+ * The Default linkrenderer defined as:
+ * ```js
+ * 	(linkProps) => React.createElement('a', linkProps);
+ * ```
+ */
+const setLinkRenderer = (linkRenderer) => {
+    exports.Link = linkRenderer || DefaultLinkRenderer;
+};
+exports.setLinkRenderer = setLinkRenderer;

package/_abstract/TogglerGroup.jsx

@@ -0,0 +1,36 @@
+"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 (<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 (<Toggler 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}/>);
+        })}
+    </ul>);
+};
+exports.default = TogglerGroup;

package/_abstract/TogglerGroupField.jsx

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

package/_abstract/TogglerInput.jsx

@@ -0,0 +1,40 @@
+"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 hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+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>);
+};
+exports.default = TogglerInput;

package/_abstract/_AbstractCarousel.jsx

@@ -0,0 +1,161 @@
+"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 A_1 = __importDefault(require("@hugsmidjan/qj/A"));
+const focusElm_1 = __importDefault(require("@hugsmidjan/qj/focusElm"));
+const throttle_1 = __importDefault(require("@hugsmidjan/qj/throttle"));
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const CarouselStepper_1 = __importDefault(require("../CarouselStepper"));
+const seenEffect_1 = require("../utils/seenEffect");
+const WHEEL_AMPLIFIER = 3;
+const WHEEL_HIJACK_TIMEOUT_MS = 667;
+const scrollXBy = (elm, deltaX) => {
+    const left = elm.scrollLeft + deltaX;
+    elm.scrollTo(left, elm.scrollTop);
+    // NOTE 1: using elm.scrollTo({ left, behavior: 'smooth' }); seems to be too much
+    // as `behavior: 'smooth'` starts some weird interactions with the browser's
+    // `scroll-snap-type` behavior.
+    //
+    // NOTE 2: Both Chrome and Safari tend to snap hard to the nearest list item
+    // while Firefox is more smooth. Haven't found a way around that.
+};
+const exitWheelHijack = (elm) => () => {
+    elm.style.scrollSnapType = '';
+    const lastElmOffset = elm.lastElementChild
+        ? elm.lastElementChild.offsetLeft
+        : 0;
+    // trigger one last scroll event, to make sure the element's
+    // `style.scrollSnapType`'s behavior kicks in.
+    // Otherwise the list may stay stuck in an over-scrolled state —
+    // off to the right.
+    scrollXBy(elm, Math.min(0, lastElmOffset - elm.scrollLeft));
+};
+const handleMouseWheel = (e) => {
+    const elm = e.currentTarget;
+    if (e.deltaX || elm.$hasXDeltaed) {
+        elm.$hasXDeltaed = true;
+        exitWheelHijack(elm);
+        return;
+    }
+    if (e.deltaY && !e.deltaX) {
+        if (e.deltaY < 0) {
+            // Stop scroll-capture when list is at left-edge
+            if (elm.scrollLeft < 50) {
+                return;
+            }
+        }
+        else {
+            // Stop scroll-capture when list is beyond left edge of last list item
+            if (elm.scrollLeft >
+                (elm.lastElementChild ? elm.lastElementChild.offsetLeft : 0)) {
+                exitWheelHijack(elm);
+                return;
+            }
+        }
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        // Disable `scroll-snap-style` because otherwise
+        // small-scale elm.scrollTo() calls have no effect
+        elm.style.scrollSnapType = 'initial';
+        scrollXBy(elm, e.deltaY * WHEEL_AMPLIFIER);
+        clearTimeout(elm.$timeout);
+        elm.$timeout = setTimeout(exitWheelHijack(elm), WHEEL_HIJACK_TIMEOUT_MS);
+    }
+};
+const handleMouseLeave = (e) => {
+    const elm = e.currentTarget;
+    exitWheelHijack(elm);
+    elm.$hasXDeltaed = undefined;
+};
+const AbstractCarousel = (props) => {
+    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, } = props;
+    const children = props.children && props.children.filter(hanna_utils_1.notNully);
+    const [leftOffset, setLeftOffset] = (0, react_1.useState)();
+    const itemCount = (children || items).length;
+    const listRef = (0, react_1.useRef)(null);
+    const [activeItem, setActiveItem] = (0, react_1.useState)(0);
+    const isBrowser = (0, hooks_1.useIsBrowserSide)(ssr);
+    // update on activeItem state change
+    (0, react_1.useEffect)(() => {
+        const listElm = listRef.current;
+        if (!listElm) {
+            return;
+        }
+        const calcLeftOffset = () => {
+            var _a;
+            setLeftOffset((_a = listElm.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left);
+            scrollXBy(listElm, 0);
+        };
+        const calcActiveItem = (0, throttle_1.default)(() => {
+            const { scrollLeft, children } = listElm;
+            // using Array#find as forEachUntil
+            (0, A_1.default)(children).find((item, i) => {
+                if (scrollLeft <= item.offsetLeft + item.offsetWidth / 2) {
+                    setActiveItem(i);
+                    return true;
+                }
+            });
+        }, 300, true);
+        calcLeftOffset();
+        listElm.addEventListener('wheel', handleMouseWheel);
+        listElm.addEventListener('scroll', calcActiveItem, { passive: true });
+        window.addEventListener('resize', calcLeftOffset, { passive: true });
+        return () => {
+            listElm.removeEventListener('wheel', handleMouseWheel);
+            listElm.removeEventListener('scroll', calcActiveItem);
+            window.removeEventListener('resize', calcLeftOffset);
+        };
+    }, []);
+    const scrollToItem = (newActive) => {
+        setActiveItem(newActive);
+        const listElm = listRef.current;
+        const newItem = listElm.children[newActive];
+        listElm.scrollTo(newItem ? newItem.offsetLeft : 0, 0);
+        setTimeout(() => (0, focusElm_1.default)(newItem), 500);
+    };
+    const [outerRef] = (0, seenEffect_1.useSeenEffect)(startSeen);
+    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 ||
+            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>);
+};
+exports.default = AbstractCarousel;

package/_abstract/_Blings.jsx

@@ -0,0 +1,19 @@
+"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 Bling_1 = __importDefault(require("../Bling"));
+const inverseAlignments = {
+    left: 'right',
+    'left-ish': 'right-ish',
+    'left-center': 'right-center',
+    'right-center': 'left-center',
+    'right-ish': 'left-ish',
+    right: 'left',
+};
+const Blings = (props) => (<>
+    {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}/>))}
+  </>);
+exports.default = Blings;

package/_abstract/_Block.jsx

@@ -0,0 +1,32 @@
+"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 (<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 (<div key={i} className={`${bem}__content`}>
+            <h2 className={`${bem}__title`}>{title}</h2>
+            {hasSummary && <div className={`${bem}__summary`}>{summary}</div>}
+            {buttons.length > 0 && (<div className={`${bem}__buttons`}>
+                {' '}
+                {buttons.map((buttonProps, i) => (<>
+                    <Button_1.default bem={`${bem}__button`} key={i} {...buttonProps}/>{' '}
+                  </>))}
+              </div>)}
+          </div>);
+        })}
+      {image && <Image_1.default className={`${bem}__image`} {...image}/>}
+    </div>);
+};
+exports.default = Block;

package/_abstract/_Quote.jsx

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._Quote = void 0;
+const react_1 = __importDefault(require("react"));
+const Link_1 = require("./Link");
+const _Quote = (props) => {
+    const { bem, children, by, byHref } = props;
+    return (<figure className={bem}>
+      <blockquote className={bem + '__quote'}>{children}</blockquote>
+      {by && (<figcaption className={bem + '__by'}>
+          {byHref ? (<Link_1.Link href={byHref}>{by}</Link_1.Link>) : typeof by === 'string' ? (<span>{by}</span>) : (by)}
+        </figcaption>)}
+    </figure>);
+};
+exports._Quote = _Quote;

package/_abstract/breakOnNL.jsx

@@ -0,0 +1,13 @@
+"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 breakOnNL = (text) => text &&
+    text
+        .trim()
+        .replace(/(?:\n\s*)+/g, '\n\n')
+        .split(/\n/)
+        .map((bit) => bit || <br />);
+exports.default = breakOnNL;