@reykjavik/hanna-react 0.10.56 → 0.10.59

package/esm/CheckboxButtonsGroup.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import TogglerGroupField from './_abstract/_TogglerGroupField';
+import TogglerInput from './_abstract/_TogglerInput';
+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.');
+    }
+    if (props.columns) {
+        console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
+    }
+    return (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton })));
+};
+export default CheckboxButtonsGroup;

package/esm/CheckboxGroup.d.ts

@@ -1,4 +1,4 @@
-import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/TogglerGroupField';
+import { TogglerGroupFieldOption, TogglerGroupFieldOptions, TogglerGroupFieldProps } from './_abstract/_TogglerGroupField';
 export declare type CheckboxGroupProps = TogglerGroupFieldProps & {
     layout?: 'inline';
     value?: Array<string>;

package/esm/CheckboxGroup.js

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

package/esm/CityBlock.d.ts

@@ -1,6 +1,6 @@
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { BlockItem } from './_abstract/_Block';
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 import { Alignment } from './constants';
 declare const types: {

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}

@@ -4,7 +4,7 @@ import { useDomid, useIsBrowserSide } from '@hugsmidjan/react/hooks';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { getPageScrollElm } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
-import { Link } from './_abstract/Link';
+import { Link } from './_abstract/_Link';
 export const defaultTexts = {
     is: {
         lang: 'is',
@@ -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.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from './_abstract/Image';
+import { ImageProps } from './_abstract/_Image';
 export declare type ContentImageProps = {
     image?: ImageProps;
     caption?: string | JSX.Element;

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.d.ts

@@ -1,4 +1,4 @@
-import { TextCardListProps } from './_abstract/CardList';
+import { TextCardListProps } from './_abstract/_CardList';
 import { SeenProp } from './utils/seenEffect';
 export declare type RelatedLink = {
     href: string;

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

@@ -11,32 +11,24 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { CardList } from './_abstract/CardList';
-import { Link } from './_abstract/Link';
+import { CardList } from './_abstract/_CardList';
+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;

package/esm/FeatureList.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSeenEffect } from './utils/seenEffect';
+import Bling from './Bling';
+const FeatureList = (props) => {
+    const { title, features, startSeen } = props;
+    const [ref] = useSeenEffect(startSeen);
+    const _features = features.length ? features : [{ name: '...' }];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Bling, { type: "snake-large", align: "left", vertical: "down-ish" }),
+        React.createElement("div", { className: "FeatureList", ref: ref },
+            React.createElement("h2", { className: "FeatureList__title" }, title),
+            React.createElement("ul", { className: "FeatureList__list" }, _features.map(({ name, icon, iconUrl }, i) => (React.createElement("li", { key: i, className: "FeatureList__feature", style: iconUrl
+                    ? { '--efnistakn': `url("${iconUrl}")` }
+                    : undefined, "data-efnistakn": !iconUrl ? icon : undefined }, name)))))));
+};
+export default FeatureList;

package/esm/FieldGroup.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const FieldGroup = (props) => {
+    const { legend, children, className, disabled } = props;
+    return (React.createElement("fieldset", { className: getBemClass('FieldGroup', null, className), role: "group", disabled: disabled },
+        React.createElement("legend", { className: "FieldGroup__legend" }, legend),
+        children));
+};
+export default FieldGroup;

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

@@ -128,30 +128,27 @@ const FileInput = (props) => {
             inputRef.current.files = arrayToFileList([]);
         }
     };
-    const filesList = files.map((file) => (<li key={file.name} className="FileInput__file">
-      <button className="FileInput__file-remove" type="button" onClick={() => removeFile(file.name)} aria-label={removeFileText}>
-        {removeFileText}
-      </button>
-      <span className="FileInput__fileinfo">
-        {showImagePreviews && file.preview && (<>
-            <span className="FileInput__preview">
-              <img src={file.preview}/>
-            </span>{' '}
-          </>)}
-        <span className="FileInput__filename">{file.name}</span>
-        {showFileSize && (<small className="FileInput__filesize"> - ({formatBytes(file.size)})</small>)}
-      </span>
-    </li>));
-    return (<FormField className={getBemClass('FileInput', [dropzoneProps.multiple && 'multi'], className)} label={label} id={domid + '-fake'} LabelTag="h4" assistText={assistText} hideLabel={hideLabel} disabled={disabled} invalid={invalid} errorMessage={errorMessage} required={required} reqText={reqText} renderInput={(className, inputProps /* , addFocusProps */) => {
-            return (<div className={className.control} ref={fileInputWrapper}>
-            <input className="FileInput__input" name={inputElementProps.name} id={domid} ref={fileInput} type="file" style={{ display: 'none' }} multiple={dropzoneProps.multiple || undefined} required={inputProps.required} // ??? Bad idea ?? Scream test!!
-            />{' '}
-            <input className="FileInput__input--fake" {...getInputProps()} tabIndex={undefined} style={undefined} multiple={dropzoneProps.multiple || undefined} {...inputProps} required={undefined}/>{' '}
-            <div className={getBemClass('FileInput__dropzone', [isHover && 'highlight'])} {...getRootProps({ isDragReject })} tabIndex={undefined}>
-              <p className="FileInput__droptext">{dropzoneText}</p>
-            </div>
-            {filesList.length ? <ul className="FileInput__filelist">{filesList}</ul> : ''}
-          </div>);
-        }}/>);
+    const filesList = files.map((file) => (React.createElement("li", { key: file.name, className: "FileInput__file" },
+        React.createElement("button", { className: "FileInput__file-remove", type: "button", onClick: () => removeFile(file.name), "aria-label": removeFileText }, removeFileText),
+        React.createElement("span", { className: "FileInput__fileinfo" },
+            showImagePreviews && file.preview && (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "FileInput__preview" },
+                    React.createElement("img", { src: file.preview })),
+                ' ')),
+            React.createElement("span", { className: "FileInput__filename" }, file.name),
+            showFileSize && (React.createElement("small", { className: "FileInput__filesize" },
+                " - (",
+                formatBytes(file.size),
+                ")"))))));
+    return (React.createElement(FormField, { className: getBemClass('FileInput', [dropzoneProps.multiple && 'multi'], className), label: label, id: domid + '-fake', LabelTag: "h4", assistText: assistText, hideLabel: hideLabel, disabled: disabled, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, renderInput: (className, inputProps /* , addFocusProps */) => {
+            return (React.createElement("div", { className: className.control, ref: fileInputWrapper },
+                React.createElement("input", { className: "FileInput__input", name: inputElementProps.name, id: domid, ref: fileInput, type: "file", style: { display: 'none' }, multiple: dropzoneProps.multiple || undefined, required: inputProps.required }),
+                ' ',
+                React.createElement("input", Object.assign({ className: "FileInput__input--fake" }, getInputProps(), { tabIndex: undefined, style: undefined, multiple: dropzoneProps.multiple || undefined }, inputProps, { required: undefined })),
+                ' ',
+                React.createElement("div", Object.assign({ className: getBemClass('FileInput__dropzone', [isHover && 'highlight']) }, getRootProps({ isDragReject }), { tabIndex: undefined }),
+                    React.createElement("p", { className: "FileInput__droptext" }, dropzoneText)),
+                filesList.length ? React.createElement("ul", { className: "FileInput__filelist" }, filesList) : ''));
+        } }));
 };
 export default FileInput;

package/esm/FooterBadges.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from './_abstract/_Link';
+const FooterBadges = (props) => {
+    if (!props.badges.length) {
+        return null;
+    }
+    return (React.createElement("ul", { className: "FooterBadges" }, props.badges.map(({ altText, src, href }, i) => (React.createElement("li", { key: i, className: "FooterBadges__badge" }, href ? (React.createElement(Link, { href: href },
+        ' ',
+        React.createElement("img", { src: src, alt: altText }),
+        ' ')) : (React.createElement("img", { src: src, alt: altText })))))));
+};
+export default FooterBadges;

package/esm/FooterInfo.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+const FooterInfo = (props) => {
+    const { boxes } = props;
+    return (React.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (React.createElement("div", { className: getBemClass('FooterInfo__group', group.modifier), role: group.role, key: i },
+        React.createElement("h3", { className: "FooterInfo__grouptitle" }, group.title),
+        group.content ? (React.createElement("div", { className: getBemClass('FooterInfo__groupcontent', group.modifier) }, group.content)) : (React.createElement("div", { className: getBemClass('FooterInfo__groupcontent', group.modifier), dangerouslySetInnerHTML: { __html: group.html } })))))));
+};
+export default FooterInfo;

package/esm/Footnote.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const Footnote = (props) => (React.createElement("div", { className: "Footnote" }, props.children));
+export default Footnote;

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

@@ -2,11 +2,9 @@ import React from 'react';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 const Form = (props) => {
     const { children, align, wide } = props;
-    return (<form {...props} className={getBemClass('Form', [
+    return (React.createElement("form", Object.assign({}, props, { className: getBemClass('Form', [
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
-        ])}>
-      {children}
-    </form>);
+        ]) }), children));
 };
 export default Form;

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

@@ -50,11 +50,9 @@ const FormField = (props) => {
     const errorId = errorMessage ? 'error:' + domid : undefined;
     const assistTextId = assistText ? 'assist:' + domid : undefined;
     const labelId = LabelTag ? 'label:' + domid : undefined;
-    const reqStar = required && reqText !== false && (<abbr className={'FormField__label__reqstar'} 
-    // TODO: add mo-better i18n thinking
-    title={(reqText || 'Þarf að fylla út') + ': '}>
-      *
-    </abbr>);
+    const reqStar = required && reqText !== false && (React.createElement("abbr", { className: 'FormField__label__reqstar', 
+        // TODO: add mo-better i18n thinking
+        title: (reqText || 'Þarf að fylla út') + ': ' }, "*"));
     const inputProps = {
         id: domid,
         disabled: disabled,
@@ -64,7 +62,7 @@ const FormField = (props) => {
         'aria-describedby': assistTextId && errorId ? assistTextId + ' ' + errorId : assistTextId || errorId,
         'aria-labelledby': labelId, // undefined if normalLabel
     };
-    return (<div className={getBemClass('FormField', [
+    return (React.createElement("div", { className: getBemClass('FormField', [
             small && 'small',
             hideLabel && 'nolabel',
             isInvalid && 'invalid',
@@ -73,21 +71,21 @@ const FormField = (props) => {
             isBrowser && empty && 'empty',
             isBrowser && filled && 'filled',
             isBrowser && focused && 'focused',
-        ], className)} role={group ? 'group' : undefined} ref={props.wrapperRef}>
-      {LabelTag ? (<LabelTag className={'FormField__label'} id={labelId}>
-          {' '}
-          {reqStar} {label}{' '}
-        </LabelTag>) : (<label className={'FormField__label'} htmlFor={domid}>
-          {' '}
-          {reqStar} {label}{' '}
-        </label>)}{' '}
-      {renderInput(inputClassNames, inputProps, addFocusProps, isBrowser)}
-      {assistText && (<div id={assistTextId} className={'FormField__assist'}>
-          {assistText}
-        </div>)}
-      {errorMessage && (<div id={errorId} className={'FormField__error'}>
-          {errorMessage}
-        </div>)}
-    </div>);
+        ], className), role: group ? 'group' : undefined, ref: props.wrapperRef },
+        LabelTag ? (React.createElement(LabelTag, { className: 'FormField__label', id: labelId },
+            ' ',
+            reqStar,
+            " ",
+            label,
+            ' ')) : (React.createElement("label", { className: 'FormField__label', htmlFor: domid },
+            ' ',
+            reqStar,
+            " ",
+            label,
+            ' ')),
+        ' ',
+        renderInput(inputClassNames, inputProps, addFocusProps, isBrowser),
+        assistText && (React.createElement("div", { id: assistTextId, className: 'FormField__assist' }, assistText)),
+        errorMessage && (React.createElement("div", { id: errorId, className: 'FormField__error' }, errorMessage))));
 };
 export default FormField;

package/esm/Gallery/_GalleryItem.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from '../_abstract/Image';
+import { ImageProps } from '../_abstract/_Image';
 export declare type GalleryItemProps = {
     caption?: string;
     description?: string;

package/esm/Gallery/{_GalleryItem.jsx → _GalleryItem.js}

@@ -10,22 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useContext } from 'react';
-import Button from '../_abstract/Button';
-import Image from '../_abstract/Image';
+import Button from '../_abstract/_Button';
+import Image from '../_abstract/_Image';
 import GalleryModalContext from './_GalleryModalContext';
 const GalleryItem = (props) => {
     const { caption, description, largeImageSrc } = props, image = __rest(props, ["caption", "description", "largeImageSrc"]);
     const { setCurrentImage } = useContext(GalleryModalContext);
-    return (<figure className="GalleryItem">
-      <figcaption className="GalleryItem__caption">{caption}</figcaption>
-      {largeImageSrc ? (<Button bem="GalleryItem__button" href={largeImageSrc} onClick={(e) => {
+    return (React.createElement("figure", { className: "GalleryItem" },
+        React.createElement("figcaption", { className: "GalleryItem__caption" }, caption),
+        largeImageSrc ? (React.createElement(Button, { bem: "GalleryItem__button", href: largeImageSrc, onClick: (e) => {
                 e.preventDefault();
                 setCurrentImage(Object.assign(Object.assign({}, image), { caption, description, largeImageSrc }));
-            }}>
-          {' '}
-          <Image className="GalleryItem__image" {...image}/>{' '}
-        </Button>) : (<Image className="GalleryItem__image" {...image}/>)}
-      {description && <div className="GalleryItem__description">{description}</div>}
-    </figure>);
+            } },
+            ' ',
+            React.createElement(Image, Object.assign({ className: "GalleryItem__image" }, image)),
+            ' ')) : (React.createElement(Image, Object.assign({ className: "GalleryItem__image" }, image))),
+        description && React.createElement("div", { className: "GalleryItem__description" }, description)));
 };
 export default GalleryItem;

package/esm/Gallery/{_GalleryModal.jsx → _GalleryModal.js}

@@ -38,21 +38,17 @@ const GalleryModal = (props) => {
     // FIXME: This if weirdly inefficient. Either memoize,
     // or do a simpler single-property comparison.
     objectIsSame(objectClean(image), objectClean(item)));
-    return (<Modal open={true} onClosed={() => {
+    return (React.createElement(Modal, { open: true, onClosed: () => {
             setCurrentImage(undefined);
-        }} startOpen={false} bem="GalleryModal" texts={{ closeButton: texts.modalCloseLabel }}>
-      <>
-        <CSSTransition in={animated} timeout={200} onEntered={() => {
-            setAnimated(!animated);
-        }} classNames="GalleryModalItem--">
-          <GalleryModalItem {...image}/>
-        </CSSTransition>
-
-        <CarouselPaging bem="GalleryModalPager" itemCount={items.length} current={imageIndex} setCurrent={updateImage} texts={{
-            next: texts.modalNextLabel,
-            prev: texts.modalPrevLabel,
-        }}/>
-      </>
-    </Modal>);
+        }, startOpen: false, bem: "GalleryModal", texts: { closeButton: texts.modalCloseLabel } },
+        React.createElement(React.Fragment, null,
+            React.createElement(CSSTransition, { in: animated, timeout: 200, onEntered: () => {
+                    setAnimated(!animated);
+                }, classNames: "GalleryModalItem--" },
+                React.createElement(GalleryModalItem, Object.assign({}, image))),
+            React.createElement(CarouselPaging, { bem: "GalleryModalPager", itemCount: items.length, current: imageIndex, setCurrent: updateImage, texts: {
+                    next: texts.modalNextLabel,
+                    prev: texts.modalPrevLabel,
+                } }))));
 };
 export default GalleryModal;

package/esm/Gallery/{_GalleryModalItem.jsx → _GalleryModalItem.js}

@@ -10,15 +10,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import Image from '../_abstract/Image';
+import Image from '../_abstract/_Image';
 const GalleryModalItem = (props) => {
     const { caption, description } = props, image = __rest(props, ["caption", "description"]);
-    return (<div className="GalleryModalItem">
-      {(caption || description) && (<div className="GalleryModalItem__text">
-          <div className="GalleryModalItem__caption">{caption}</div>
-          <div className="GalleryModalItem__description">{description}</div>
-        </div>)}
-      <Image className="GalleryModalItem__image" src={image.largeImageSrc || image.src}/>
-    </div>);
+    return (React.createElement("div", { className: "GalleryModalItem" },
+        (caption || description) && (React.createElement("div", { className: "GalleryModalItem__text" },
+            React.createElement("div", { className: "GalleryModalItem__caption" }, caption),
+            React.createElement("div", { className: "GalleryModalItem__description" }, description))),
+        React.createElement(Image, { className: "GalleryModalItem__image", src: image.largeImageSrc || image.src })));
 };
 export default GalleryModalItem;

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

@@ -20,9 +20,8 @@ const Gallery = (props) => {
     const { items, ssr, startSeen } = props;
     const texts = getTexts(props, defaultTexts);
     const [modalImage, setModalImage] = useState(undefined);
-    return (<GalleryModalContext.Provider value={{ items, setCurrentImage: setModalImage, currentImage: modalImage }}>
-      <AbstractCarousel bem="Gallery" items={items} Component={GalleryItem} ssr={ssr} startSeen={startSeen}/>
-      <GalleryModal {...modalImage} texts={texts}/>
-    </GalleryModalContext.Provider>);
+    return (React.createElement(GalleryModalContext.Provider, { value: { items, setCurrentImage: setModalImage, currentImage: modalImage } },
+        React.createElement(AbstractCarousel, { bem: "Gallery", items: items, Component: GalleryItem, ssr: ssr, startSeen: startSeen }),
+        React.createElement(GalleryModal, Object.assign({}, modalImage, { texts: texts }))));
 };
 export default Gallery;

package/esm/GridBlocks.d.ts

@@ -1,6 +1,6 @@
 import { Efnistakn } from '@reykjavik/hanna-utils/assets';
-import { ButtonProps } from './_abstract/Button';
-import { ImageProps } from './_abstract/Image';
+import { ButtonProps } from './_abstract/_Button';
+import { ImageProps } from './_abstract/_Image';
 import { SeenProp } from './utils/seenEffect';
 export declare type GridBlockItem = {
     title: string;