@reykjavik/hanna-react 0.10.56 → 0.10.57

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

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

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

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

package/_abstract/_Block.js

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

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

@@ -8,11 +8,8 @@ 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>);
+    return (react_1.default.createElement("figure", { className: bem },
+        react_1.default.createElement("blockquote", { className: bem + '__quote' }, children),
+        by && (react_1.default.createElement("figcaption", { className: bem + '__by' }, byHref ? (react_1.default.createElement(Link_1.Link, { href: byHref }, by)) : typeof by === 'string' ? (react_1.default.createElement("span", null, by)) : (by)))));
 };
 exports._Quote = _Quote;

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

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

package/esm/AccordionList.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { useDomid, useIsBrowserSide } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { useSeenEffect } from './utils/seenEffect';
+const AccordionListItem = (props) => {
+    const { title, content, id, disabled = false, defaultOpen, ssr } = props;
+    const [open, setOpen] = useState(defaultOpen);
+    useEffect(() => setOpen(defaultOpen), [defaultOpen]);
+    const domid = useDomid();
+    const isBrowser = useIsBrowserSide(ssr);
+    const itemDisabled = (isBrowser && disabled) || !content;
+    return (React.createElement("div", { className: getBemClass('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen || undefined, "data-sprinkled": isBrowser },
+        React.createElement("h3", { className: "AccordionList__title" }, isBrowser ? (React.createElement("button", { type: "button", className: "AccordionList__button", "aria-controls": domid, "aria-expanded": open || undefined, onClick: () => {
+                setOpen(!open);
+            }, disabled: itemDisabled }, title)) : (title)),
+        React.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
+};
+// ---------------------------------------------------------------------------
+const AccordionList = (props) => {
+    const { items, ssr, wide, defaultOpen, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    return (React.createElement("div", { className: getBemClass('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (React.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
+};
+export default AccordionList;

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

@@ -3,8 +3,7 @@ import { CardList } from './_abstract/CardList';
 import { useSeenEffect } from './utils/seenEffect';
 const ActionCards = (props) => {
     const [ref] = useSeenEffect(props.startSeen);
-    return (<div className="ActionCards" ref={ref}>
-      <CardList {...props} bemPrefix="ActionCards"/>
-    </div>);
+    return (React.createElement("div", { className: "ActionCards", ref: ref },
+        React.createElement(CardList, Object.assign({}, props, { bemPrefix: "ActionCards" }))));
 };
 export default ActionCards;

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

@@ -79,16 +79,14 @@ const Alert = (props) => {
             };
         }
     }, [closeAlert, autoClosing, autoClose]);
-    return (<div className={getBemClass('Alert', [
+    return (React.createElement("div", Object.assign({ className: getBemClass('Alert', [
             !!alertTypes[type] && type,
             closable && 'closable',
-        ])} role="alert" hidden={!open || undefined} {...autoClosingProps}>
-      {childrenHTML ? (<div dangerouslySetInnerHTML={{ __html: childrenHTML }}/>) : (children)}{' '}
-      {showCloseButton && (<Button bem="Alert__close" {...(closeUrl != null ? { href: closeUrl } : { type: 'button' })} onClick={(e) => {
+        ]), role: "alert", hidden: !open || undefined }, autoClosingProps),
+        childrenHTML ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
+        ' ',
+        showCloseButton && (React.createElement(Button, Object.assign({ bem: "Alert__close" }, (closeUrl != null ? { href: closeUrl } : { type: 'button' }), { onClick: (e) => {
                 closeAlert(e);
-            }} aria-label={closeLabelLong} title={closeLabelLong || closeLabel}>
-          {closeLabel}
-        </Button>)}
-    </div>);
+            }, "aria-label": closeLabelLong, title: closeLabelLong || closeLabel }), closeLabel))));
 };
 export default Alert;

package/esm/ArticleCarousel/_ArticleCarouselCard.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import Image from '../_abstract/Image';
+import { Link } from '../_abstract/Link';
+import { colorFamilies, themeOptions } from '../constants';
+export const ArticleCarouselCard = (props) => {
+    const { date, title, summary, href, moreLabel, color, theme, illustration, image } = props;
+    const photo = image === null || image === void 0 ? void 0 : image.photo;
+    const imageProps = illustration ? { src: getIllustrationUrl(illustration) } : image;
+    return (React.createElement("div", { className: "ArticleCarouselCard", "data-color": color && colorFamilies[color], "data-color-theme": !color ? theme && themeOptions[theme] : undefined },
+        React.createElement(Link, { className: "ArticleCarouselCard__link", href: href },
+            ' ',
+            React.createElement(Image, Object.assign({ placeholder: true, className: getBemClass('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
+            React.createElement("h3", { className: "ArticleCarouselCard__title" }, title),
+            ' '),
+        ' ',
+        date && React.createElement("span", { className: "ArticleCarouselCard__date" }, date),
+        React.createElement("div", { className: "ArticleCarouselCard__summary" }, summary),
+        moreLabel && (React.createElement(Link, { className: "ArticleCarouselCard__morelink", href: href, "aria-label": title },
+            ' ',
+            moreLabel,
+            ' '))));
+};

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

@@ -3,6 +3,6 @@ import AbstractCarousel from './_abstract/_AbstractCarousel';
 import { ArticleCarouselCard, } from './ArticleCarousel/_ArticleCarouselCard';
 const ArticleCarousel = (props) => {
     const { title, items, moreLabel, ssr, startSeen } = props;
-    return (<AbstractCarousel bem="ArticleCarousel" title={title} items={items} Component={ArticleCarouselCard} ComponentProps={{ moreLabel }} ssr={ssr} startSeen={startSeen}/>);
+    return (React.createElement(AbstractCarousel, { bem: "ArticleCarousel", title: title, items: items, Component: ArticleCarouselCard, ComponentProps: { moreLabel }, ssr: ssr, startSeen: startSeen }));
 };
 export default ArticleCarousel;

package/esm/ArticleMeta.js

@@ -0,0 +1,18 @@
+import React, { Fragment } from 'react';
+import { Link } from './_abstract/Link';
+const ArticleMeta = (props) => {
+    const { items } = props;
+    if (items.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: "ArticleMeta" }, items.map(({ label, href }, i) => (React.createElement(Fragment, { key: i },
+        href == null ? (React.createElement("span", { className: "ArticleMeta__item" },
+            " ",
+            label,
+            " ")) : (React.createElement(Link, { className: "ArticleMeta__item", href: href },
+            ' ',
+            label,
+            ' ')),
+        ' ')))));
+};
+export default ArticleMeta;

package/esm/Attention.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const Attention = (props) => (React.createElement("div", { className: getBemClass('Attention', props.small && 'small') }, props.children));
+export default Attention;

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

@@ -10,21 +10,20 @@ const BasicTable = (props) => {
         : { tbody: props.tbody || [] };
     const modifier = props.modifier;
     const [ref] = useSeenEffect(startSeen);
-    return (<TableWrapper modifier={[
+    return (React.createElement(TableWrapper, { modifier: [
             'BasicTable',
             modifier && 'BasicTable--' + modifier,
             fullWidth && 'BasicTable--fullwidth',
             align === 'right' && !fullWidth && 'BasicTable--align--' + align,
-        ]} wrapperRef={ref}>
-      <Table className={getBemClass('BasicTable', [
-            props.compact && 'compact',
-            modifier && modifier,
-        ])} {...{
-        cols,
-        caption,
-        thead,
-        tfoot,
-    }} {...tbodyProps}/>
-    </TableWrapper>);
+        ], wrapperRef: ref },
+        React.createElement(Table, Object.assign({ className: getBemClass('BasicTable', [
+                props.compact && 'compact',
+                modifier && modifier,
+            ]) }, {
+            cols,
+            caption,
+            thead,
+            tfoot,
+        }, tbodyProps))));
 };
 export default BasicTable;

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

@@ -33,12 +33,12 @@ const Bling = (props) => {
     const { align, vertical, color, overlay, type, blingUrl, parent, className } = props;
     const imageUrl = type ? getBlingUrl(type) : blingUrl;
     const inlineSvg = useGetSVGtext(imageUrl);
-    return (<div className={getBemClass('Bling', [
+    return (React.createElement("div", { className: getBemClass('Bling', [
             'align--' + (align && align in aligns ? align : 'left'),
             vertical && vertical in valigns && 'vertical--' + vertical,
             color && color in colors && 'color--' + color,
             parent && parent in parentOffset && 'parent--' + parent,
             overlay && 'overlay',
-        ], className)} data-bling-type={type} data-bling-image={!type ? blingUrl : undefined} dangerouslySetInnerHTML={inlineSvg && { __html: inlineSvg.code }}/>);
+        ], className), "data-bling-type": type, "data-bling-image": !type ? blingUrl : undefined, dangerouslySetInnerHTML: inlineSvg && { __html: inlineSvg.code } }));
 };
 export default Bling;

package/esm/BlockBreak.js

@@ -0,0 +1,6 @@
+import React from 'react';
+/*
+  TODO: Add story
+*/
+const BlockBreak = () => React.createElement("div", { className: "BlockBreak" });
+export default BlockBreak;

package/esm/BlockQuote.js

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

package/esm/BreadCrumbs.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from './_abstract/Link';
+const BreadCrumbs__item = (props) => {
+    const { link, current } = props;
+    return link.href != null ? (React.createElement(Link, { className: "BreadCrumbs__item", href: link.href, "aria-current": current || undefined }, link.label)) : (React.createElement("span", { className: "BreadCrumbs__item", "aria-current": current || undefined }, link.label));
+};
+const BreadCrumbs = (props) => {
+    const { title, trail } = props;
+    if (trail.length === 0) {
+        return null;
+    }
+    const ancestors = trail.slice(0, -1);
+    const current = trail[trail.length - 1];
+    return (React.createElement("nav", { className: "BreadCrumbs", "aria-label": title },
+        React.createElement("span", { className: "BreadCrumbs__title" },
+            title,
+            ":"),
+        ' ',
+        ancestors.map((link, i) => {
+            return (React.createElement(React.Fragment, { key: i },
+                React.createElement(BreadCrumbs__item, { link: link }),
+                ' ',
+                React.createElement("span", { className: "BreadCrumbs__separator", "aria-label": "" }, ">"),
+                ' '));
+        }),
+        React.createElement(BreadCrumbs__item, { link: current, current: true })));
+};
+export default BreadCrumbs;

package/esm/ButtonBack.js

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

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

@@ -2,11 +2,9 @@ import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 export const ButtonBar = (props) => {
     const { align, children } = props;
-    return (<div className={getBemClass('ButtonBar', align === 'right' && 'align--right')}>
-      {children}
-    </div>);
+    return (React.createElement("div", { className: getBemClass('ButtonBar', align === 'right' && 'align--right') }, children));
 };
-ButtonBar.Split = () => <span className="ButtonBar__split"/>;
+ButtonBar.Split = () => React.createElement("span", { className: "ButtonBar__split" });
 /**
  * @deprecated Prefer using `ButtonBar.Split` instead.
  *

package/esm/ButtonPrimary.js

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

package/esm/ButtonSecondary.js

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

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

@@ -10,6 +10,6 @@ const icons = {
 };
 const ButtonTertiary = (props) => {
     const { size = 'normal', icon = 'none' } = props;
-    return <Button bem="ButtonTertiary" {...props} size={sizes[size]} icon={icons[icon]}/>;
+    return React.createElement(Button, Object.assign({ bem: "ButtonTertiary" }, props, { size: sizes[size], icon: icons[icon] }));
 };
 export default ButtonTertiary;

package/esm/Carousel.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import AbstractCarousel from './_abstract/_AbstractCarousel';
+const Carousel = (props) => (React.createElement(AbstractCarousel, Object.assign({}, props, { bem: undefined, modifier: undefined, title: undefined })));
+export default Carousel;

package/esm/CarouselStepper.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import _CarouselStepper from '@hugsmidjan/react/CarouselStepper';
+const CarouselStepper = (props) => (React.createElement(_CarouselStepper, Object.assign({}, props, { bem: undefined, modifier: undefined })));
+export default CarouselStepper;

package/esm/CenterColumn.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import SeenEffect from './SeenEffect';
+const CenterColumn = (props) => {
+    const { children, startSeen, effectType } = props;
+    return startSeen == null ? (React.createElement("div", { className: "CenterColumn" }, children)) : (React.createElement(SeenEffect, { className: "CenterColumn", startSeen: startSeen, effectType: effectType }, children));
+};
+export default CenterColumn;

package/esm/Checkbox.js

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import TogglerGroupField from './_abstract/TogglerGroupField';
 import TogglerInput from './_abstract/TogglerInput';
-const CheckboxButton = (props) => (<TogglerInput bem="CheckboxButton" {...props} type="checkbox"/>);
+const CheckboxButton = (props) => (React.createElement(TogglerInput, Object.assign({ bem: "CheckboxButton" }, props, { type: "checkbox" })));
 const CheckboxButtonsGroup = (props) => {
     if (props.layout) {
         console.warn('`CheckboxButtonsGroupProps.layout` is deprecated.');
@@ -9,6 +9,6 @@ const CheckboxButtonsGroup = (props) => {
     if (props.columns) {
         console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
     }
-    return (<TogglerGroupField {...props} bem="CheckboxButtonsGroup" Toggler={CheckboxButton}/>);
+    return (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton })));
 };
 export default CheckboxButtonsGroup;

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

@@ -2,6 +2,6 @@ import React from 'react';
 import TogglerGroupField from './_abstract/TogglerGroupField';
 import Checkbox from './Checkbox';
 const CheckboxGroup = (props) => {
-    return (<TogglerGroupField {...props} bem="CheckboxGroup" modifier={props.layout} Toggler={Checkbox}/>);
+    return (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "CheckboxGroup", modifier: props.layout, Toggler: Checkbox })));
 };
 export default CheckboxGroup;

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

@@ -13,6 +13,6 @@ const CityBlock = (props) => {
     const imageProps = props.illustration != null
         ? { src: getIllustrationUrl(props.illustration) }
         : props.image;
-    return (<Block bem="CityBlock" modifier={modifier} content={props.content} image={imageProps} startSeen={props.startSeen}/>);
+    return (React.createElement(Block, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, startSeen: props.startSeen }));
 };
 export default CityBlock;

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

@@ -116,10 +116,9 @@ const ContactBubble = (props) => {
     if (links.length === 0) {
         return null;
     }
-    const menu = (<div className="ContactBubble" id={isBrowser && domid} hidden={isBrowser && !open} data-always-show={alwaysShow || undefined} data-sprinkled={isBrowser}>
-      <h2 className="ContactBubble__title">{title || txt.openBtn}</h2>
-      <ul className="ContactBubble__list">
-        {links.map((linkInfo, i) => {
+    const menu = (React.createElement("div", { className: "ContactBubble", id: isBrowser && domid, hidden: isBrowser && !open, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser },
+        React.createElement("h2", { className: "ContactBubble__title" }, title || txt.openBtn),
+        React.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;
             const icon = ensureIcon(linkInfo.icon);
             const itemClass = getBemClass('ContactBubble__item', icon && 'type--' + icon);
@@ -134,29 +133,16 @@ const ContactBubble = (props) => {
                 ' ',
                 label,
                 '\n',
-                extraLabel && <small key="🤡">{extraLabel}</small>,
+                extraLabel && React.createElement("small", { key: "\uD83E\uDD21" }, extraLabel),
                 '\n',
             ];
-            return (<li key={i} className={itemClass}>
-              {href && href !== '#' ? (<Link className="ContactBubble__link" href={href} onClick={onClickHandler} target={target}>
-                  {content}
-                </Link>) : (<button className="ContactBubble__link" onClick={onClickHandler} type="button">
-                  {content}
-                </button>)}
-            </li>);
-        })}
-      </ul>
-      {'\n\n'}
-      {isBrowser && (<button className="ContactBubble__closebtn" aria-controls={domid} aria-label={txt.closeBtnLong} onClick={() => closeBubble()} type="button">
-          {txt.closeBtn}
-        </button>)}
-    </div>);
-    return isBrowser ? (<div className="ContactBubble__wrapper" ref={wrapperRef}>
-      <button className="ContactBubble__openbtn" aria-controls={domid} aria-expanded={open} aria-label={txt.openBtnLong} onClick={open ? () => closeBubble() : openBubble} type="button">
-        {txt.openBtn}
-      </button>
-      {'\n\n'}
-      {menu}
-    </div>) : (menu);
+            return (React.createElement("li", { key: i, className: itemClass }, href && href !== '#' ? (React.createElement(Link, { className: "ContactBubble__link", href: href, onClick: onClickHandler, target: target }, content)) : (React.createElement("button", { className: "ContactBubble__link", onClick: onClickHandler, type: "button" }, content))));
+        })),
+        '\n\n',
+        isBrowser && (React.createElement("button", { className: "ContactBubble__closebtn", "aria-controls": domid, "aria-label": txt.closeBtnLong, onClick: () => closeBubble(), type: "button" }, txt.closeBtn))));
+    return isBrowser ? (React.createElement("div", { className: "ContactBubble__wrapper", ref: wrapperRef },
+        React.createElement("button", { className: "ContactBubble__openbtn", "aria-controls": domid, "aria-expanded": open, "aria-label": txt.openBtnLong, onClick: open ? () => closeBubble() : openBubble, type: "button" }, txt.openBtn),
+        '\n\n',
+        menu)) : (menu);
 };
 export default ContactBubble;

package/esm/ContentArticle.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useSeenEffect } from './utils/seenEffect';
+import ArticleMeta from './ArticleMeta';
+import ContentImage from './ContentImage';
+import Heading from './Heading';
+import RelatedLinks from './RelatedLinks';
+import TextBlock from './TextBlock';
+import VSpacer from './VSpacer';
+const ContentArticle = (props) => {
+    const [ref] = useSeenEffect(props.startSeen);
+    return (React.createElement("div", { className: "ContentArticle", ref: ref },
+        React.createElement(ArticleMeta, { items: props.meta }),
+        React.createElement(Heading, null, props.headline),
+        React.createElement(TextBlock, { startSeen: true },
+            props.topImage && React.createElement(ContentImage, Object.assign({}, props.topImage)),
+            props.body),
+        React.createElement(VSpacer, { size: "small" },
+            React.createElement("hr", null)),
+        props.relatedLinks && React.createElement(RelatedLinks, Object.assign({}, props.relatedLinks))));
+};
+export default ContentArticle;

package/esm/ContentImage.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Image from './_abstract/Image';
+const ContentImage = (props) => {
+    const { image, caption, credit } = props;
+    return (React.createElement("figure", { className: "ContentImage" },
+        (caption || credit) && (React.createElement("figcaption", { className: "ContentImage__caption" },
+            caption && React.createElement("span", { className: "ContentImage__text" },
+                " ",
+                caption,
+                " "),
+            ' ',
+            credit && React.createElement("small", { className: "ContentImage__credit" },
+                " ",
+                credit,
+                " "))),
+        React.createElement(Image, Object.assign({ className: "ContentImage__image" }, image))));
+};
+export default ContentImage;

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

@@ -38,27 +38,26 @@ const Datepicker = (props) => {
     const txts = (localeCode && i18n[localeCode]) || {};
     const filled = !!value;
     const empty = !filled && !placeholder;
-    return (<FormField className={getBemClass('Datepicker', [], className)} ssr={ssr} label={label} small={small} assistText={assistText} hideLabel={hideLabel} invalid={invalid} required={required} reqText={reqText} disabled={disabled} readOnly={readOnly} filled={filled} empty={empty} errorMessage={errorMessage} renderInput={(className, inputProps, addFocusProps) => {
-            return (<div className={className.input} ref={inputRef &&
+    return (React.createElement(FormField, { className: getBemClass('Datepicker', [], className), ssr: ssr, label: label, small: small, assistText: assistText, hideLabel: hideLabel, invalid: invalid, required: required, reqText: reqText, disabled: disabled, readOnly: readOnly, filled: filled, empty: empty, errorMessage: errorMessage, renderInput: (className, inputProps, addFocusProps) => {
+            return (React.createElement("div", { className: className.input, ref: inputRef &&
                     ((elm) => {
                         inputRef.current =
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
                         return elm;
-                    })}>
-            <ReactDatePicker id={domid} required={inputProps.required} disabled={inputProps.disabled} readOnly={inputProps.readOnly} selected={value} locale={localeCode} dateFormat={dateFormat} onChange={(date) => {
-                    onChange(date || undefined);
-                    const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
-                    if (inputElm) {
-                        inputElm.dispatchEvent(new Event('change', { bubbles: true }));
-                    }
-                }} placeholderText={placeholder} 
-            // TODO: Implement this
-            // selectsRange
-            minDate={minDate} maxDate={maxDate} startDate={startDate} endDate={endDate} selectsStart={isStartDate} selectsEnd={isEndDate} formatWeekDay={(weekday) => {
-                    // TODO: if we use costom locale we don't need this
-                    return weekday.charAt(0).toUpperCase();
-                }} showYearDropdown scrollableYearDropdown yearDropdownItemNumber={15} showMonthDropdown {...inputProps} {...txts} {...addFocusProps(datepickerExtraProps)}/>
-          </div>);
-        }}/>);
+                    }) },
+                React.createElement(ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, locale: localeCode, dateFormat: dateFormat, onChange: (date) => {
+                        onChange(date || undefined);
+                        const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+                        if (inputElm) {
+                            inputElm.dispatchEvent(new Event('change', { bubbles: true }));
+                        }
+                    }, placeholderText: placeholder, 
+                    // TODO: Implement this
+                    // selectsRange
+                    minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => {
+                        // TODO: if we use costom locale we don't need this
+                        return weekday.charAt(0).toUpperCase();
+                    }, showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, addFocusProps(datepickerExtraProps)))));
+        } }));
 };
 export default Datepicker;

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

@@ -16,27 +16,19 @@ import { Link } from './_abstract/Link';
 import { useSeenEffect } from './utils/seenEffect';
 const ExtraLinks__related = (props) => {
     const { relatedTitle, relatedLinks } = props;
-    return (<div className="ExtraLinks__related">
-      {relatedTitle && <h3 className="ExtraLinks__related__title">{relatedTitle}</h3>}
-      <ul className="ExtraLinks__related__list">
-        {relatedLinks &&
-            relatedLinks.map(({ href, label, blank = false, type }, i) => (<li className="ExtraLinks__related__item" key={i}>
-              <Link className={getBemClass('ExtraLinks__related__link', type)} href={href} target={blank ? '_blank' : ''} rel={blank ? 'noreferrer noopener' : ''}>
-                {label}
-              </Link>
-            </li>))}
-      </ul>
-    </div>);
+    return (React.createElement("div", { className: "ExtraLinks__related" },
+        relatedTitle && React.createElement("h3", { className: "ExtraLinks__related__title" }, relatedTitle),
+        React.createElement("ul", { className: "ExtraLinks__related__list" }, relatedLinks &&
+            relatedLinks.map(({ href, label, blank = false, type }, i) => (React.createElement("li", { className: "ExtraLinks__related__item", key: i },
+                React.createElement(Link, { className: getBemClass('ExtraLinks__related__link', type), href: href, target: blank ? '_blank' : '', rel: blank ? 'noreferrer noopener' : '' }, label)))))));
 };
 const ExtraLinks = (props) => {
     const { relatedTitle, relatedLinks, className, startSeen } = props, cardListProps = __rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen"]);
     const hasRelated = !!(relatedLinks && relatedLinks.length);
     const [ref] = useSeenEffect(startSeen);
-    return (<div className={getBemClass('ExtraLinks', hasRelated && 'related', className)} ref={ref}>
-      <div className="ExtraLinks__main">
-        <CardList {...cardListProps} bemPrefix="ExtraLinks"/>
-      </div>
-      {hasRelated && (<ExtraLinks__related relatedTitle={relatedTitle} relatedLinks={relatedLinks}/>)}
-    </div>);
+    return (React.createElement("div", { className: getBemClass('ExtraLinks', hasRelated && 'related', className), ref: ref },
+        React.createElement("div", { className: "ExtraLinks__main" },
+            React.createElement(CardList, Object.assign({}, cardListProps, { bemPrefix: "ExtraLinks" }))),
+        hasRelated && (React.createElement(ExtraLinks__related, { relatedTitle: relatedTitle, relatedLinks: relatedLinks }))));
 };
 export default ExtraLinks;