@reykjavik/hanna-react 0.10.55 → 0.10.56

package/FileInput.jsx

@@ -0,0 +1,185 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_dropzone_1 = require("react-dropzone"); // https://react-dropzone.js.org/#!/Dropzone
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const FormField_1 = __importDefault(require("./FormField"));
+/**
+ * Attaches a `preview` prop to file objects that don't already have a `preview` key defined
+ *
+ * The preview's value is either a data URI (for image-type files) or `undefined`
+ */
+const addPreview = (file) => {
+    if (!('preview' in file)) {
+        file.preview = file.type.includes('image/') ? URL.createObjectURL(file) : undefined;
+    }
+};
+/**
+ * Revokes `preview` data URIs to avoid memory leaks
+ *
+ * (See: https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL)
+ */
+const releasePreview = (file) => {
+    file.preview && URL.revokeObjectURL(file.preview);
+    delete file.preview;
+};
+const arrayToFileList = (arr) => {
+    const fileList = new DataTransfer();
+    arr.forEach((item) => {
+        fileList.items.add(item);
+    });
+    return fileList.files;
+};
+const dedupeFilesArray = (files) => {
+    const newArray = [];
+    const found = {};
+    files.forEach((file) => {
+        if (!(file.name in found)) {
+            newArray.push(file);
+            found[file.name] = true;
+        }
+        else {
+            releasePreview(file);
+        }
+    });
+    return newArray;
+};
+const formatBytes = (bytes, decimals = 2) => {
+    if (bytes === 0) {
+        return '0 Bytes';
+    }
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
+};
+const FileInput = (props) => {
+    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, dropzoneText, removeFileText, assistText, disabled, invalid, errorMessage, required, reqText, onFilesUpdated = () => undefined, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = __rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "dropzoneText", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "onFilesUpdated", "showFileSize", "showImagePreviews", "value"]);
+    const domid = (0, hooks_1.useDomid)(id);
+    const fileInputWrapper = (0, react_1.useRef)(null);
+    const fileInput = (0, react_1.useRef)(null);
+    const files = value;
+    const [isHover, setIsHover] = (0, react_1.useState)(false);
+    const { getRootProps, getInputProps, isDragReject, inputRef } = (0, react_dropzone_1.useDropzone)(Object.assign({ onDrop: (acceptedFiles) => {
+            acceptedFiles = acceptedFiles.map((file) => {
+                addPreview(file);
+                return file;
+            });
+            addFiles(acceptedFiles); // eslint-disable-line
+            setIsHover(false);
+        }, onDropRejected: (rejectedFiles) => {
+            window.alert('Error:\n' +
+                rejectedFiles
+                    .map((elm) => {
+                    return elm.name;
+                })
+                    .join(', '));
+        }, onDragEnter: () => {
+            // 'dragLeave' always fires right after 'dragEnter', use 'dragOver' instead
+            // console.log('enter');
+            // setIsHover(true);
+        }, onDragLeave: () => {
+            // console.log('leave');
+            setIsHover(false);
+        }, onDragOver: () => {
+            // TODO: add error icon? 'isDragReject' gives unstable results
+            // console.log(isDragReject);
+            setIsHover(true);
+        } }, dropzoneProps));
+    // Add previews on incoming files
+    // (NOTE: `addPreview` ignores files that already have preview.)
+    files.forEach(addPreview);
+    (0, react_1.useEffect)(() => () => {
+        // Make sure to revoke the data uris on unmount to avoid memory leaks
+        files.forEach(releasePreview);
+    }, [files]);
+    const removeFile = (name) => {
+        if (fileInput.current) {
+            const newFileList = files.filter((file) => {
+                if (file.name !== name) {
+                    return true;
+                }
+                releasePreview(file);
+            });
+            fileInput.current.files = arrayToFileList(newFileList);
+            onFilesUpdated(newFileList);
+        }
+    };
+    const addFiles = (filelist) => {
+        if (fileInput.current) {
+            const newFileList = dropzoneProps.multiple
+                ? dedupeFilesArray(files.concat(filelist))
+                : filelist;
+            fileInput.current.files = arrayToFileList(newFileList);
+            onFilesUpdated(newFileList);
+        }
+        if (inputRef.current) {
+            // Empty on every add
+            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_1.default className={(0, getBemClass_1.default)('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={(0, getBemClass_1.default)('FileInput__dropzone', [isHover && 'highlight'])} {...getRootProps({ isDragReject })} tabIndex={undefined}>
+              <p className="FileInput__droptext">{dropzoneText}</p>
+            </div>
+            {filesList.length ? <ul className="FileInput__filelist">{filesList}</ul> : ''}
+          </div>);
+        }}/>);
+};
+exports.default = FileInput;

package/Foonote.jsx

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Footnote_1 = __importDefault(require("./Footnote"));
+/** @deprecated  (Will be removed in v0.11)
+ *
+ * This module file is a typo. import from `Footnote` instead
+ */
+const Footnote = Footnote_1.default;
+exports.default = Footnote;

package/FooterBadges.jsx

@@ -0,0 +1,21 @@
+"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 Link_1 = require("./_abstract/Link");
+const FooterBadges = (props) => {
+    if (!props.badges.length) {
+        return null;
+    }
+    return (<ul className="FooterBadges">
+      {props.badges.map(({ altText, src, href }, i) => (<li key={i} className="FooterBadges__badge">
+          {href ? (<Link_1.Link href={href}>
+              {' '}
+              <img src={src} alt={altText}/>{' '}
+            </Link_1.Link>) : (<img src={src} alt={altText}/>)}
+        </li>))}
+    </ul>);
+};
+exports.default = FooterBadges;

package/FooterInfo.jsx

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const FooterInfo = (props) => {
+    const { boxes } = props;
+    return (<div className="FooterInfo">
+      {boxes.map((group, i) => (<div className={(0, getBemClass_1.default)('FooterInfo__group', group.modifier)} role={group.role} key={i}>
+          <h3 className="FooterInfo__grouptitle">{group.title}</h3>
+          {group.content ? (<div className={(0, getBemClass_1.default)('FooterInfo__groupcontent', group.modifier)}>
+              {group.content}
+            </div>) : (<div className={(0, getBemClass_1.default)('FooterInfo__groupcontent', group.modifier)} dangerouslySetInnerHTML={{ __html: group.html }}/>)}
+        </div>))}
+    </div>);
+};
+exports.default = FooterInfo;

package/Footnote.jsx

@@ -0,0 +1,8 @@
+"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 Footnote = (props) => (<div className="Footnote">{props.children}</div>);
+exports.default = Footnote;

package/Form.jsx

@@ -0,0 +1,17 @@
+"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 Form = (props) => {
+    const { children, align, wide } = props;
+    return (<form {...props} className={(0, getBemClass_1.default)('Form', [
+            align === 'right' && 'align--' + align,
+            !align && wide && 'wide',
+        ])}>
+      {children}
+    </form>);
+};
+exports.default = Form;

package/FormField.jsx

@@ -0,0 +1,121 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = __importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const env_1 = require("./utils/env");
+const inputClassNames = {
+    bem: 'FormField',
+    input: 'FormField__input',
+    options: 'FormField__options',
+    control: 'FormField__control',
+};
+// ---------------------------------------------------------------------------
+// eslint-disable-next-line complexity
+const FormField = (props) => {
+    const { className, small, group, LabelTag = group ? 'h4' : undefined, label, assistText, hideLabel, empty, filled, readOnly, disabled, invalid, errorMessage, required, reqText, // i18n
+    renderInput, id, ssr, } = props;
+    const isBrowser = (0, hooks_1.useIsBrowserSide)(ssr);
+    const isInvalid = invalid || !!errorMessage || undefined;
+    const domid = (0, hooks_1.useDomid)(id);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    // @ts-expect-error  (Duck knows why this errors?!)
+    const addFocusProps = (0, react_1.useCallback)((ownProps) => {
+        const { onFocus, onBlur } = ownProps || {};
+        const focusHandler = (e) => {
+            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+                setFocused(true);
+            }
+            onFocus && onFocus(e);
+        };
+        const blurHandler = (e) => {
+            if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {
+                setFocused(false);
+            }
+            onBlur && onBlur(e);
+        };
+        const focusProps = Object.assign(Object.assign({}, ownProps), { onFocus: focusHandler, onBlur: blurHandler });
+        if (env_1.isPreact) {
+            const focusinHandler = (e) => {
+                e.currentTarget !== e.target && focusHandler(e);
+            };
+            const focusoutHandler = (e) => {
+                e.currentTarget !== e.target && blurHandler(e);
+            };
+            // @ts-expect-error  (Sneak this in as Preact does not bubble `FocusEvent`s)
+            focusProps.onfocusin = focusinHandler;
+            // @ts-expect-error  (Sneak this in as Preact does not bubble `FocusEvent`s)
+            focusProps.onfocusout = focusoutHandler;
+        }
+        return focusProps;
+    }, []);
+    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 inputProps = {
+        id: domid,
+        disabled: disabled,
+        required: required,
+        readOnly: readOnly,
+        'aria-invalid': isInvalid,
+        'aria-describedby': assistTextId && errorId ? assistTextId + ' ' + errorId : assistTextId || errorId,
+        'aria-labelledby': labelId, // undefined if normalLabel
+    };
+    return (<div className={(0, getBemClass_1.default)('FormField', [
+            small && 'small',
+            hideLabel && 'nolabel',
+            isInvalid && 'invalid',
+            disabled && 'disabled',
+            readOnly && 'readonly',
+            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>);
+};
+exports.default = FormField;

package/Gallery/_GalleryItem.jsx

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Button_1 = __importDefault(require("../_abstract/Button"));
+const Image_1 = __importDefault(require("../_abstract/Image"));
+const _GalleryModalContext_1 = __importDefault(require("./_GalleryModalContext"));
+const GalleryItem = (props) => {
+    const { caption, description, largeImageSrc } = props, image = __rest(props, ["caption", "description", "largeImageSrc"]);
+    const { setCurrentImage } = (0, react_1.useContext)(_GalleryModalContext_1.default);
+    return (<figure className="GalleryItem">
+      <figcaption className="GalleryItem__caption">{caption}</figcaption>
+      {largeImageSrc ? (<Button_1.default bem="GalleryItem__button" href={largeImageSrc} onClick={(e) => {
+                e.preventDefault();
+                setCurrentImage(Object.assign(Object.assign({}, image), { caption, description, largeImageSrc }));
+            }}>
+          {' '}
+          <Image_1.default className="GalleryItem__image" {...image}/>{' '}
+        </Button_1.default>) : (<Image_1.default className="GalleryItem__image" {...image}/>)}
+      {description && <div className="GalleryItem__description">{description}</div>}
+    </figure>);
+};
+exports.default = GalleryItem;

package/Gallery/_GalleryModal.jsx

@@ -0,0 +1,86 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_transition_group_1 = require("react-transition-group");
+const object_1 = require("@hugsmidjan/qj/object");
+const CarouselPaging_1 = __importDefault(require("@hugsmidjan/react/CarouselPaging"));
+const Modal_1 = __importDefault(require("@hugsmidjan/react/Modal"));
+const _GalleryModalContext_1 = __importDefault(require("./_GalleryModalContext"));
+const _GalleryModalItem_1 = __importDefault(require("./_GalleryModalItem"));
+const GalleryModal = (props) => {
+    const { texts } = props;
+    const { currentImage, items, setCurrentImage } = (0, react_1.useContext)(_GalleryModalContext_1.default);
+    const [image, setImage] = (0, react_1.useState)(currentImage);
+    const [animated, setAnimated] = (0, react_1.useState)(false);
+    const updateImage = (index) => {
+        setAnimated(!animated);
+        setTimeout(() => {
+            setCurrentImage(items[index]);
+        }, 200);
+    };
+    (0, react_1.useEffect)(() => {
+        if (image !== currentImage) {
+            const imgSource = (currentImage === null || currentImage === void 0 ? void 0 : currentImage.largeImageSrc) || (currentImage === null || currentImage === void 0 ? void 0 : currentImage.src);
+            if (imgSource) {
+                const imageToLoad = new window.Image();
+                imageToLoad.src = imgSource;
+                imageToLoad.onload = () => {
+                    setImage(currentImage);
+                };
+            }
+            else {
+                setImage(undefined);
+            }
+        }
+    }, [image, currentImage]);
+    if (!image) {
+        return null;
+    }
+    const imageIndex = items.findIndex((item) => 
+    // FIXME: This if weirdly inefficient. Either memoize,
+    // or do a simpler single-property comparison.
+    (0, object_1.objectIsSame)((0, object_1.objectClean)(image), (0, object_1.objectClean)(item)));
+    return (<Modal_1.default open={true} onClosed={() => {
+            setCurrentImage(undefined);
+        }} startOpen={false} bem="GalleryModal" texts={{ closeButton: texts.modalCloseLabel }}>
+      <>
+        <react_transition_group_1.CSSTransition in={animated} timeout={200} onEntered={() => {
+            setAnimated(!animated);
+        }} classNames="GalleryModalItem--">
+          <_GalleryModalItem_1.default {...image}/>
+        </react_transition_group_1.CSSTransition>
+
+        <CarouselPaging_1.default bem="GalleryModalPager" itemCount={items.length} current={imageIndex} setCurrent={updateImage} texts={{
+            next: texts.modalNextLabel,
+            prev: texts.modalPrevLabel,
+        }}/>
+      </>
+    </Modal_1.default>);
+};
+exports.default = GalleryModal;

package/Gallery/_GalleryModalContext.js

@@ -0,0 +1,8 @@
+"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 GalleryModalContext = react_1.default.createContext({});
+exports.default = GalleryModalContext;

package/Gallery/_GalleryModalItem.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Image_1 = __importDefault(require("../_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_1.default className="GalleryModalItem__image" src={image.largeImageSrc || image.src}/>
+    </div>);
+};
+exports.default = GalleryModalItem;

package/Gallery.jsx

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const _AbstractCarousel_1 = __importDefault(require("./_abstract/_AbstractCarousel"));
+const _GalleryItem_1 = __importDefault(require("./Gallery/_GalleryItem"));
+const _GalleryModal_1 = __importDefault(require("./Gallery/_GalleryModal"));
+const _GalleryModalContext_1 = __importDefault(require("./Gallery/_GalleryModalContext"));
+const defaultTexts = {
+    en: {
+        modalNextLabel: 'Next image',
+        modalPrevLabel: 'Previous image',
+        modalCloseLabel: 'Back to article',
+    },
+    is: {
+        modalNextLabel: 'Næsta mynd',
+        modalPrevLabel: 'Fyrri mynd',
+        modalCloseLabel: 'Til baka í grein',
+    },
+};
+const Gallery = (props) => {
+    const { items, ssr, startSeen } = props;
+    const texts = (0, i18n_1.getTexts)(props, defaultTexts);
+    const [modalImage, setModalImage] = (0, react_1.useState)(undefined);
+    return (<_GalleryModalContext_1.default.Provider value={{ items, setCurrentImage: setModalImage, currentImage: modalImage }}>
+      <_AbstractCarousel_1.default bem="Gallery" items={items} Component={_GalleryItem_1.default} ssr={ssr} startSeen={startSeen}/>
+      <_GalleryModal_1.default {...modalImage} texts={texts}/>
+    </_GalleryModalContext_1.default.Provider>);
+};
+exports.default = Gallery;