@reykjavik/hanna-react 0.10.53 → 0.10.56

package/esm/ExtraLinks.d.ts

@@ -0,0 +1,18 @@
+import { TextCardListProps } from './_abstract/CardList';
+import { SeenProp } from './utils/seenEffect';
+export declare type RelatedLink = {
+    href: string;
+    label: string;
+    blank?: boolean;
+    type?: 'link' | 'pdf' | 'text';
+};
+declare type RelatedProps = {
+    relatedTitle?: string;
+    relatedLinks?: Array<RelatedLink>;
+};
+export declare type ExtraLinksCardProps = TextCardListProps['cards'][number];
+export declare type ExtraLinksProps = TextCardListProps & RelatedProps & {
+    className?: string;
+} & SeenProp;
+declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
+export default ExtraLinks;

package/esm/ExtraLinks.jsx

@@ -0,0 +1,42 @@
+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;
+};
+import React from 'react';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+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>);
+};
+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>);
+};
+export default ExtraLinks;

package/esm/FeatureList.d.ts

@@ -0,0 +1,12 @@
+import { Efnistakn } from '@reykjavik/hanna-utils/assets';
+import { SeenProp } from './utils/seenEffect';
+export declare type FeatureListProps = {
+    title: string;
+    features: Array<{
+        icon?: Efnistakn;
+        iconUrl?: string;
+        name: string;
+    }>;
+} & SeenProp;
+declare const FeatureList: (props: FeatureListProps) => JSX.Element;
+export default FeatureList;

package/esm/FeatureList.jsx

@@ -0,0 +1,23 @@
+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 (<>
+      <Bling type="snake-large" align="left" vertical="down-ish"/>
+
+      <div className="FeatureList" ref={ref}>
+        <h2 className="FeatureList__title">{title}</h2>
+        <ul className="FeatureList__list">
+          {_features.map(({ name, icon, iconUrl }, i) => (<li key={i} className="FeatureList__feature" style={iconUrl
+                ? { '--efnistakn': `url("${iconUrl}")` }
+                : undefined} data-efnistakn={!iconUrl ? icon : undefined}>
+              {name}
+            </li>))}
+        </ul>
+      </div>
+    </>);
+};
+export default FeatureList;

package/esm/FieldGroup.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare type FieldGroupProps = {
+    legend: string;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+};
+declare const FieldGroup: (props: FieldGroupProps) => JSX.Element;
+export default FieldGroup;

package/esm/FieldGroup.jsx

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

package/esm/FileInput.d.ts

@@ -0,0 +1,17 @@
+import { FormFieldWrappingProps } from './FormField';
+declare type dropzonePropsProps = {
+    accept?: string;
+    multiple?: boolean;
+};
+export declare type FileInputProps = {
+    dropzoneProps: dropzonePropsProps;
+    dropzoneText: string | JSX.Element;
+    showFileSize?: boolean;
+    showImagePreviews?: boolean;
+    removeFileText: string;
+    onFilesUpdated?: (files: Array<File>) => void;
+    name?: string;
+    value?: ReadonlyArray<File>;
+} & FormFieldWrappingProps;
+declare const FileInput: (props: FileInputProps) => JSX.Element;
+export default FileInput;

package/esm/FileInput.jsx

@@ -0,0 +1,157 @@
+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;
+};
+import React, { useEffect, useRef, useState } from 'react';
+import { useDropzone } from 'react-dropzone'; // https://react-dropzone.js.org/#!/Dropzone
+import { useDomid } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import FormField from './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 = useDomid(id);
+    const fileInputWrapper = useRef(null);
+    const fileInput = useRef(null);
+    const files = value;
+    const [isHover, setIsHover] = useState(false);
+    const { getRootProps, getInputProps, isDragReject, inputRef } = 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);
+    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 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>);
+        }}/>);
+};
+export default FileInput;

package/esm/Foonote.d.ts

@@ -0,0 +1,12 @@
+import { FootnoteProps as _FootnoteProps } from './Footnote';
+/** @deprecated  (Will be removed in v0.11)
+ *
+ * This module file is a typo. import from `Footnote` instead
+ */
+export declare type FootnoteProps = _FootnoteProps;
+/** @deprecated  (Will be removed in v0.11)
+ *
+ * This module file is a typo. import from `Footnote` instead
+ */
+declare const Footnote: (props: _FootnoteProps) => JSX.Element;
+export default Footnote;

package/esm/Foonote.jsx

@@ -0,0 +1,7 @@
+import _Footnote from './Footnote';
+/** @deprecated  (Will be removed in v0.11)
+ *
+ * This module file is a typo. import from `Footnote` instead
+ */
+const Footnote = _Footnote;
+export default Footnote;

package/esm/FooterBadges.d.ts

@@ -0,0 +1,9 @@
+export declare type FooterBadgesProps = {
+    badges: Array<{
+        altText: string;
+        src: string;
+        href?: string;
+    }>;
+};
+declare const FooterBadges: (props: FooterBadgesProps) => JSX.Element | null;
+export default FooterBadges;

package/esm/FooterBadges.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Link } from './_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 href={href}>
+              {' '}
+              <img src={src} alt={altText}/>{' '}
+            </Link>) : (<img src={src} alt={altText}/>)}
+        </li>))}
+    </ul>);
+};
+export default FooterBadges;

package/esm/FooterInfo.d.ts

@@ -0,0 +1,18 @@
+import { BemPropsModifier } from '@hugsmidjan/react/types';
+export declare type FooterInfoGroup = {
+    title: string;
+    role?: JSX.IntrinsicElements['div']['role'];
+    modifier?: string;
+} & BemPropsModifier & ({
+    content: JSX.Element;
+    html?: undefined;
+} | {
+    html: string;
+    content?: undefined;
+});
+export declare type FooterInfoBoxes = Array<FooterInfoGroup>;
+export declare type FooterInfoProps = {
+    boxes: FooterInfoBoxes;
+};
+declare const FooterInfo: (props: FooterInfoProps) => JSX.Element;
+export default FooterInfo;

package/esm/FooterInfo.jsx

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

package/esm/Footnote.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export declare type FootnoteProps = {
+    children: ReactNode;
+};
+declare const Footnote: (props: FootnoteProps) => JSX.Element;
+export default Footnote;

package/esm/Footnote.jsx

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

package/esm/Form.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react';
+import { ComponentLayoutProps } from './constants';
+export declare type FormProps = ComponentLayoutProps & React.FormHTMLAttributes<HTMLFormElement> & {
+    children: ReactNode;
+};
+declare const Form: (props: FormProps) => JSX.Element;
+export default Form;

package/esm/Form.jsx

@@ -0,0 +1,12 @@
+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', [
+            align === 'right' && 'align--' + align,
+            !align && wide && 'wide',
+        ])}>
+      {children}
+    </form>);
+};
+export default Form;

package/esm/FormField.d.ts

@@ -0,0 +1,65 @@
+import { RefObject } from 'react';
+import { SSRSupport } from '@hugsmidjan/react/hooks';
+declare type InputClassNames = {
+    /** Basic/raw FormField BEM name */
+    bem: string;
+    /** Standard name for "<input/>"-styled controls */
+    input: string;
+    /** Standard name for radio/checkbox group conotrols */
+    options: string;
+    /** Generic name for unstyled/free-form controls. */
+    control: string;
+};
+export declare type FormFieldInputProps = {
+    id?: string;
+    required?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    'aria-invalid'?: boolean | 'true' | 'false';
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+declare type FocusEvents = {
+    onFocus?: (e: any) => void;
+    onBlur?: (e: any) => void;
+};
+declare type FocusPropMaker = <P extends FocusEvents>(ownProps?: P) => P & Required<FocusEvents>;
+export declare type FormFieldWrappingProps = {
+    /** Container className - alongside "FormField" */
+    className?: string;
+    label: string | JSX.Element;
+    assistText?: string | JSX.Element;
+    hideLabel?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    errorMessage?: string | JSX.Element;
+    required?: boolean;
+    /** Hidden label prefix text to indicate that the field is required.
+     *
+     * If your field is required but should not say so in its label
+     * then set this prop to `false`
+     *
+     * Default: `"Þarf að fylla út"`
+     * */
+    reqText?: string | false;
+    /** Optional pre-determinted id="" for the __input */
+    id?: string;
+    /** Ref object pointing to the outermost `.FormField` element */
+    wrapperRef?: RefObject<HTMLElement>;
+    ssr?: SSRSupport;
+};
+export declare type FormFieldGroupWrappingProps = FormFieldWrappingProps & {
+    LabelTag?: 'h3' | 'h4' | 'h5';
+};
+export declare type FormFieldProps = FormFieldGroupWrappingProps & {
+    /** Container className - alongside "FormField" */
+    className: string;
+    small?: boolean;
+    group?: boolean;
+    empty?: boolean;
+    filled?: boolean;
+    renderInput(className: InputClassNames, inputProps: FormFieldInputProps, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;
+};
+declare const FormField: (props: FormFieldProps) => JSX.Element;
+export default FormField;

package/esm/FormField.jsx

@@ -0,0 +1,93 @@
+import React, { useCallback, useState } from 'react';
+import { useDomid, useIsBrowserSide } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { isPreact } from './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 = useIsBrowserSide(ssr);
+    const isInvalid = invalid || !!errorMessage || undefined;
+    const domid = useDomid(id);
+    const [focused, setFocused] = useState(false);
+    // @ts-expect-error  (Duck knows why this errors?!)
+    const addFocusProps = 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 (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={getBemClass('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>);
+};
+export default FormField;

package/esm/Gallery/_GalleryItem.d.ts

@@ -0,0 +1,8 @@
+import { ImageProps } from '../_abstract/Image';
+export declare type GalleryItemProps = {
+    caption?: string;
+    description?: string;
+    largeImageSrc?: string;
+} & ImageProps;
+declare const GalleryItem: (props: GalleryItemProps) => JSX.Element;
+export default GalleryItem;

package/esm/Gallery/_GalleryItem.jsx

@@ -0,0 +1,31 @@
+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;
+};
+import React, { useContext } from 'react';
+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) => {
+                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>);
+};
+export default GalleryItem;

package/esm/Gallery/_GalleryModal.d.ts

@@ -0,0 +1,6 @@
+import { GalleryI18n } from '../Gallery';
+declare type GalleryModalProps = {
+    texts: Readonly<GalleryI18n>;
+};
+declare const GalleryModal: (props: GalleryModalProps) => JSX.Element | null;
+export default GalleryModal;