@reykjavik/hanna-react 0.10.56 → 0.10.59

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

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

package/esm/TagPill.d.ts

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

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

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

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

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

package/esm/TextButton.d.ts

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

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import Button from './_abstract/Button';
+import Button from './_abstract/_Button';
 const TextButton = (props) => {
     if ('disabled' in props) {
         props = Object.assign(Object.assign({}, props), { disabled: undefined });
     }
-    return <Button bem="TextButton" {...props}/>;
+    return React.createElement(Button, Object.assign({ bem: "TextButton" }, props));
 };
 export default TextButton;

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

@@ -30,6 +30,6 @@ const TextInput = (props) => {
                 // TypeScript is silly sometimes.
                 e);
         };
-    return (<FormField className={getBemClass('TextInput', modifiers, className)} ssr={ssr} small={small} label={label} empty={empty} filled={filled} assistText={assistText} hideLabel={hideLabel} disabled={disabled} readOnly={readOnly} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} id={id} renderInput={(className, inputProps, addFocusProps) => multiline ? (<textarea className={className.input} onChange={_onChange} {...inputProps} {...addFocusProps(inputElementProps)} ref={inputRef}/>) : (<input className={className.input} onChange={_onChange} type={type} {...inputProps} {...addFocusProps(inputElementProps)} ref={inputRef}/>)}/>);
+    return (React.createElement(FormField, { className: getBemClass('TextInput', modifiers, className), ssr: ssr, small: small, label: label, empty: empty, filled: filled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => multiline ? (React.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (React.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
 };
 export default TextInput;

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

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

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

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

package/esm/WizardLayout.js

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

package/esm/WizardLayoutClose.d.ts

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

package/esm/WizardLayoutClose.js

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

package/esm/WizardStepper.js

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

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

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

package/esm/_abstract/_Blings.js

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

package/esm/_abstract/_Block.d.ts

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

package/esm/_abstract/_Block.js

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

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { Link } from './Link';
+import { Link } from './_Link';
 // ---------------------------------------------------------------------------
 const sizes = {
     normal: '',
@@ -38,14 +38,10 @@ const Button = (props) => {
         getBemClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
     if (buttonProps.href != null) {
-        return (<Link className={className} {...buttonProps} style={undefined} {...iconProp}>
-        {label}
-      </Link>);
+        return (React.createElement(Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));
     }
     else {
-        return (<button className={className} type="button" {...buttonProps} style={undefined} {...iconProp}>
-        {label}
-      </button>);
+        return (React.createElement("button", Object.assign({ className: className, type: "button" }, buttonProps, { style: undefined }, iconProp), label));
     }
 };
 export default Button;

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

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

package/esm/_abstract/_CardList.js

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

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

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

package/esm/_abstract/_Image.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useGetSVGtext } from '../utils/useGetSVGtext';
+// eslint-disable-next-line complexity
+const Image = (props) => {
+    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, focalPoint, } = 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 = useGetSVGtext(inline ? imageSrc : undefined);
+    if (!imageSrc) {
+        return placeholder ? (React.createElement("span", { className: className && getBemClass(className, 'missing') }, placeholder !== true && placeholder())) : null;
+    }
+    if (inline && inlineSvg) {
+        const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
+        return React.createElement("span", { className: className, dangerouslySetInnerHTML: { __html } });
+    }
+    return (React.createElement("picture", { className: className, style: focalPoint ? { '--focalPoint': focalPoint } : undefined },
+        ' ',
+        sources.map((source, i) => (React.createElement(React.Fragment, null,
+            React.createElement("source", { key: i, srcSet: source.srcset, media: source.media }),
+            ' '))),
+        ' ',
+        React.createElement("img", { src: imageSrc, alt: altText, loading: imgLoading }),
+        '  '));
+};
+export default Image;

package/esm/_abstract/_Quote.js

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

package/{_abstract/TogglerGroup.d.ts → esm/_abstract/_TogglerGroup.d.ts}

@@ -1,5 +1,5 @@
 import { FormFieldInputProps } from '../FormField';
-import { TogglerInputProps } from './TogglerInput';
+import { TogglerInputProps } from './_TogglerInput';
 export declare type TogglerGroupOption = {
     value: string;
     label?: string | JSX.Element;

package/esm/_abstract/_TogglerGroup.js

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

package/esm/_abstract/{TogglerGroupField.d.ts → _TogglerGroupField.d.ts}

@@ -1,8 +1,8 @@
 import { ReactElement } from 'react';
 import { BemPropsModifier } from '@hugsmidjan/react/types';
 import { FormFieldGroupWrappingProps } from '../FormField';
-import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './TogglerGroup';
-import { TogglerInputProps } from './TogglerInput';
+import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './_TogglerGroup';
+import { TogglerInputProps } from './_TogglerInput';
 export declare type TogglerGroupFieldProps = {
     className?: string;
 } & FormFieldGroupWrappingProps & TogglerGroupProps;

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

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

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

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

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

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

package/esm/utils/seenEffect.d.ts

@@ -13,12 +13,12 @@ declare const effects: {
 export declare type SeenEffectType = keyof typeof effects;
 export declare type EffectProp = {
     /** Should the component appear instantly, and not transition-in once seen */
-    effectType?: SeenEffectType;
+    effectType?: SeenEffectType | 'none';
 };
 /** Asserts that a prop value is a SeenEffectType and returns undefined otherwise */
 export declare const assertEffectType: (maybeType?: string | undefined) => SeenEffectType | undefined;
 export declare const getEffectAttr: (maybeType?: string | undefined) => {
-    'data-seen-effect': string;
+    'data-seen-effect': string | undefined;
 };
 export declare type SeenProp = {
     /** Should the component appear instantly, and not transition-in once seen */