@reykjavik/hanna-react 0.10.70 → 0.10.72

package/CheckboxButtonsGroup.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxButtonsGroup = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const _TogglerGroupField_1 = tslib_1.__importDefault(require("./_abstract/_TogglerGroupField"));
-const _TogglerInput_1 = tslib_1.__importDefault(require("./_abstract/_TogglerInput"));
-const CheckboxButton = (props) => (react_1.default.createElement(_TogglerInput_1.default, Object.assign({ bem: "CheckboxButton" }, props, { type: "checkbox" })));
+const _TogglerGroupField_1 = require("./_abstract/_TogglerGroupField");
+const _TogglerInput_1 = require("./_abstract/_TogglerInput");
+const CheckboxButton = (props) => (react_1.default.createElement(_TogglerInput_1.TogglerInput, Object.assign({ bem: "CheckboxButton" }, props, { type: "checkbox" })));
 const CheckboxButtonsGroup = (props) => {
     if (props.layout) {
         console.warn('`CheckboxButtonsGroupProps.layout` is deprecated.');
@@ -12,6 +13,7 @@ const CheckboxButtonsGroup = (props) => {
     if (props.columns) {
         console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
     }
-    return (react_1.default.createElement(_TogglerGroupField_1.default, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton })));
+    return (react_1.default.createElement(_TogglerGroupField_1.TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton })));
 };
-exports.default = CheckboxButtonsGroup;
+exports.CheckboxButtonsGroup = CheckboxButtonsGroup;
+exports.default = exports.CheckboxButtonsGroup;

package/CheckboxGroup.d.ts

@@ -5,5 +5,5 @@ export declare type CheckboxGroupProps = TogglerGroupFieldProps & {
 };
 export declare type CheckboxGroupOption = TogglerGroupFieldOption;
 export declare type CheckboxGroupOptions = TogglerGroupFieldOptions;
-declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;
+export declare const CheckboxGroup: (props: CheckboxGroupProps) => JSX.Element;
 export default CheckboxGroup;

package/CheckboxGroup.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroup = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const _TogglerGroupField_1 = tslib_1.__importDefault(require("./_abstract/_TogglerGroupField"));
+const _TogglerGroupField_1 = require("./_abstract/_TogglerGroupField");
 const Checkbox_1 = tslib_1.__importDefault(require("./Checkbox"));
 const CheckboxGroup = (props) => {
-    return (react_1.default.createElement(_TogglerGroupField_1.default, Object.assign({}, props, { bem: "CheckboxGroup", modifier: props.layout, Toggler: Checkbox_1.default })));
+    return (react_1.default.createElement(_TogglerGroupField_1.TogglerGroupField, Object.assign({}, props, { bem: "CheckboxGroup", modifier: props.layout, Toggler: Checkbox_1.default })));
 };
-exports.default = CheckboxGroup;
+exports.CheckboxGroup = CheckboxGroup;
+exports.default = exports.CheckboxGroup;

package/CityBlock.d.ts

@@ -17,5 +17,5 @@ export declare type CityBlockProps = {
 }, {
     image: ImageProps;
 }> & SeenProp;
-declare const CityBlock: (props: CityBlockProps) => JSX.Element;
+export declare const CityBlock: (props: CityBlockProps) => JSX.Element;
 export default CityBlock;

package/CityBlock.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CityBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const assets_1 = require("@reykjavik/hanna-utils/assets");
-const _Block_1 = tslib_1.__importDefault(require("./_abstract/_Block"));
+const _Block_1 = require("./_abstract/_Block");
 const constants_1 = require("./constants");
 const types = {
     largebox: true,
@@ -16,6 +17,7 @@ const CityBlock = (props) => {
     const imageProps = props.illustration != null
         ? { src: (0, assets_1.getIllustrationUrl)(props.illustration) }
         : props.image;
-    return (react_1.default.createElement(_Block_1.default, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, startSeen: props.startSeen }));
+    return (react_1.default.createElement(_Block_1.Block, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, startSeen: props.startSeen }));
 };
-exports.default = CityBlock;
+exports.CityBlock = CityBlock;
+exports.default = exports.CityBlock;

package/ContactBubble.d.ts

@@ -54,5 +54,5 @@ export declare type ContactBubbleProps = {
     open?: undefined;
     onToggle?: (isOpen: boolean) => void;
 });
-declare const ContactBubble: (props: ContactBubbleProps) => JSX.Element | null;
+export declare const ContactBubble: (props: ContactBubbleProps) => JSX.Element | null;
 export default ContactBubble;

package/ContactBubble.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ensureIcon = exports.defaultTexts = void 0;
+exports.ContactBubble = exports.ensureIcon = exports.defaultTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const focusElm_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/focusElm"));
@@ -150,4 +150,5 @@ const ContactBubble = (props) => {
         '\n\n',
         menu)) : (menu);
 };
-exports.default = ContactBubble;
+exports.ContactBubble = ContactBubble;
+exports.default = exports.ContactBubble;

package/ContentArticle.d.ts

@@ -5,12 +5,12 @@ import { ContentImageProps } from './ContentImage';
 import { RelatedLinksProps } from './RelatedLinks';
 export declare type ContentArticleProps = {
     /** Date, author, etc. */
-    meta: ArticleMetaProps['items'];
+    meta?: ArticleMetaProps['items'];
     headline: string;
     headlineTag?: 'h1' | 'h2';
     topImage?: ContentImageProps;
     body: ReactNode;
     relatedLinks?: RelatedLinksProps;
 } & SeenProp;
-declare const ContentArticle: (props: ContentArticleProps) => JSX.Element;
+export declare const ContentArticle: (props: ContentArticleProps) => JSX.Element;
 export default ContentArticle;

package/ContentArticle.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentArticle = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const seenEffect_1 = require("./utils/seenEffect");
@@ -10,15 +11,17 @@ const RelatedLinks_1 = tslib_1.__importDefault(require("./RelatedLinks"));
 const TextBlock_1 = tslib_1.__importDefault(require("./TextBlock"));
 const VSpacer_1 = tslib_1.__importDefault(require("./VSpacer"));
 const ContentArticle = (props) => {
+    const { relatedLinks } = props;
     const [ref] = (0, seenEffect_1.useSeenEffect)(props.startSeen);
     return (react_1.default.createElement("div", { className: "ContentArticle", ref: ref },
-        react_1.default.createElement(ArticleMeta_1.default, { items: props.meta }),
+        props.meta && react_1.default.createElement(ArticleMeta_1.default, { items: props.meta }),
         react_1.default.createElement(Heading_1.default, { forceH1: props.headlineTag === 'h1' }, props.headline),
         react_1.default.createElement(TextBlock_1.default, { startSeen: true },
             props.topImage && react_1.default.createElement(ContentImage_1.default, Object.assign({}, props.topImage)),
             props.body),
-        react_1.default.createElement(VSpacer_1.default, { size: "small" },
-            react_1.default.createElement("hr", null)),
-        props.relatedLinks && react_1.default.createElement(RelatedLinks_1.default, Object.assign({}, props.relatedLinks))));
+        relatedLinks && relatedLinks.links.length > 0 && (react_1.default.createElement(VSpacer_1.default, { size: "small" },
+            react_1.default.createElement("hr", null))),
+        relatedLinks && react_1.default.createElement(RelatedLinks_1.default, Object.assign({}, relatedLinks))));
 };
-exports.default = ContentArticle;
+exports.ContentArticle = ContentArticle;
+exports.default = exports.ContentArticle;

package/ContentImage.d.ts

@@ -4,5 +4,5 @@ export declare type ContentImageProps = {
     caption?: string | JSX.Element;
     credit?: string | JSX.Element;
 };
-declare const ContentImage: (props: ContentImageProps) => JSX.Element;
+export declare const ContentImage: (props: ContentImageProps) => JSX.Element;
 export default ContentImage;

package/ContentImage.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentImage = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const _Image_1 = tslib_1.__importDefault(require("./_abstract/_Image"));
+const _Image_1 = require("./_abstract/_Image");
 const ContentImage = (props) => {
     const { image, caption, credit } = props;
     return (react_1.default.createElement("figure", { className: "ContentImage" },
@@ -16,6 +17,7 @@ const ContentImage = (props) => {
                 " ",
                 credit,
                 " "))),
-        react_1.default.createElement(_Image_1.default, Object.assign({ className: "ContentImage__image" }, image))));
+        react_1.default.createElement(_Image_1.Image, Object.assign({ className: "ContentImage__image" }, image))));
 };
-exports.default = ContentImage;
+exports.ContentImage = ContentImage;
+exports.default = exports.ContentImage;

package/Datepicker.d.ts

@@ -4,6 +4,7 @@ export declare type DatepickerProps = {
     small?: boolean;
     placeholder?: string;
     value?: Date;
+    name?: string;
     startDate?: Date;
     endDate?: Date;
     minDate?: Date;
@@ -35,5 +36,5 @@ export declare type DatepickerLocaleProps = {
     chooseDayAriaLabelPrefix: string;
     disabledDayAriaLabelPrefix: string;
 };
-declare const Datepicker: (props: DatepickerProps) => JSX.Element;
+export declare const Datepicker: (props: DatepickerProps) => JSX.Element;
 export default Datepicker;

package/Datepicker.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getDateDiff = void 0;
+exports.Datepicker = exports.getDateDiff = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 // Documentation: https://reactdatepicker.com/
@@ -36,19 +36,19 @@ const i18n = {
     },
 };
 const Datepicker = (props) => {
-    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode, dateFormat = 'd.M.yyy', initialDate, value = initialDate, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
+    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode, dateFormat = 'd.M.yyy', initialDate, value = initialDate, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
     const domid = (0, hooks_1.useDomid)(id);
     const txts = (localeCode && i18n[localeCode]) || {};
     const filled = !!value;
     const empty = !filled && !placeholder;
     return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('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_1.default.createElement("div", { className: className.input, ref: inputRef &&
+            return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: (e) => e.currentTarget.querySelector('input').focus(), ref: inputRef &&
                     ((elm) => {
                         inputRef.current =
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
                         return elm;
-                    }) },
-                react_1.default.createElement(react_datepicker_1.default, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, locale: localeCode, dateFormat: dateFormat, onChange: (date) => {
+                    }) }, addFocusProps()),
+                react_1.default.createElement(react_datepicker_1.default, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat: dateFormat, onChange: (date) => {
                         onChange(date || undefined);
                         const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
                         if (inputElm) {
@@ -60,7 +60,8 @@ const Datepicker = (props) => {
                     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)))));
+                    }, showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
         } }));
 };
-exports.default = Datepicker;
+exports.Datepicker = Datepicker;
+exports.default = exports.Datepicker;

package/ExtraLinks.d.ts

@@ -14,5 +14,5 @@ export declare type ExtraLinksCardProps = TextCardListProps['cards'][number];
 export declare type ExtraLinksProps = TextCardListProps & RelatedProps & {
     className?: string;
 } & SeenProp;
-declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
+export declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
 export default ExtraLinks;

package/ExtraLinks.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExtraLinks = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
@@ -23,4 +24,5 @@ const ExtraLinks = (props) => {
             react_1.default.createElement(_CardList_1.CardList, Object.assign({}, cardListProps, { bemPrefix: "ExtraLinks" }))),
         hasRelated && (react_1.default.createElement(ExtraLinks__related, { relatedTitle: relatedTitle, relatedLinks: relatedLinks }))));
 };
-exports.default = ExtraLinks;
+exports.ExtraLinks = ExtraLinks;
+exports.default = exports.ExtraLinks;

package/FeatureList.d.ts

@@ -8,5 +8,5 @@ export declare type FeatureListProps = {
         name: string;
     }>;
 } & SeenProp;
-declare const FeatureList: (props: FeatureListProps) => JSX.Element;
+export declare const FeatureList: (props: FeatureListProps) => JSX.Element;
 export default FeatureList;

package/FeatureList.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureList = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const seenEffect_1 = require("./utils/seenEffect");
@@ -16,4 +17,5 @@ const FeatureList = (props) => {
                     ? { '--efnistakn': `url("${iconUrl}")` }
                     : undefined, "data-efnistakn": !iconUrl ? icon : undefined }, name)))))));
 };
-exports.default = FeatureList;
+exports.FeatureList = FeatureList;
+exports.default = exports.FeatureList;

package/FieldGroup.d.ts

@@ -5,5 +5,5 @@ export declare type FieldGroupProps = {
     className?: string;
     children: ReactNode;
 };
-declare const FieldGroup: (props: FieldGroupProps) => JSX.Element;
+export declare const FieldGroup: (props: FieldGroupProps) => JSX.Element;
 export default FieldGroup;

package/FieldGroup.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldGroup = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
@@ -9,4 +10,5 @@ const FieldGroup = (props) => {
         react_1.default.createElement("legend", { className: "FieldGroup__legend" }, legend),
         children));
 };
-exports.default = FieldGroup;
+exports.FieldGroup = FieldGroup;
+exports.default = exports.FieldGroup;

package/FileInput/_FileInput.utils.d.ts

@@ -16,7 +16,7 @@ export declare const releasePreview: (file: CustomFile) => void;
 /**
  * Small+stupid file size pretty-printer.
  */
-export declare const formatBytes: (bytes: number, decimals?: number) => string;
+export declare const formatBytes: (bytes: number, lang?: string, decimals?: number) => string;
 /**
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and

package/FileInput/_FileInput.utils.js

@@ -22,17 +22,24 @@ const releasePreview = (file) => {
     delete file.preview;
 };
 exports.releasePreview = releasePreview;
+// ---------------------------------------------------------------------------
+const k = 1024;
+const kThreshold = 970 / k; // Snap up a unit level at this point
+const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB' /*, 'EB', 'ZB', 'YB' */];
+const decimalSymbols = { is: ',', en: '.', pl: ',' };
 /**
  * Small+stupid file size pretty-printer.
  */
-const formatBytes = (bytes, decimals = 2) => {
+const formatBytes = (bytes, lang = 'is', 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 i = Math.min(Math.floor(Math.log(Math.abs(bytes) / kThreshold) / Math.log(k)), units.length - 1);
+    const scaled = bytes / Math.pow(k, i);
+    const formatted = (parseFloat(scaled.toFixed(decimals)) + '').replace('.', 
+    // NOTE: As of 2022-11 Chrome still doesn't support Icelandic
+    decimalSymbols[lang] || (1.1).toLocaleString(lang)[1]);
+    return `${formatted} ${units[i]}`;
 };
 exports.formatBytes = formatBytes;
 /**

package/FileInput/_FileInputFileList.js

@@ -9,11 +9,11 @@ const DefaultFileList = (props) => {
         return null;
     }
     return (react_1.default.createElement("ul", { className: "FileInput__filelist" }, files.map((file) => (react_1.default.createElement("li", { key: file.name, className: "FileInput__file" },
-        react_1.default.createElement("button", { className: "FileInput__file-remove", type: "button", onClick: () => removeFile(file), "aria-label": removeFileText }, removeFileText),
+        react_1.default.createElement("button", { className: "FileInput__file-remove", type: "button", onClick: () => removeFile(file), "aria-label": `${removeFileText} ${file.name}` }, removeFileText),
         react_1.default.createElement("span", { className: "FileInput__fileinfo" },
             showImagePreviews && file.preview && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { className: "FileInput__preview" },
-                    react_1.default.createElement("img", { src: file.preview })),
+                    react_1.default.createElement("img", { src: file.preview, alt: "" })),
                 ' ')),
             react_1.default.createElement("span", { className: "FileInput__filename" }, file.name),
             showFileSize && (react_1.default.createElement("small", { className: "FileInput__filesize" },

package/FileInput.d.ts

@@ -14,7 +14,8 @@ export declare type FileInputProps = {
      */
     accept?: string | Array<string>;
     dropzoneText: string | JSX.Element;
-    removeFileText: string;
+    removeFileText?: string;
+    lang?: string;
     showFileSize?: boolean;
     showImagePreviews?: boolean;
     FileList?: false | ((props: FileListProps) => JSX.Element | null);
@@ -34,15 +35,14 @@ export declare type FileInputProps = {
         deleted?: Array<File>;
         added?: Array<File>;
     }) => void;
+    onFilesRejected?: (rejectedFiles: Array<File>) => void;
     name?: string;
     value?: ReadonlyArray<File>;
-    /**
-     * @deprecated Use props `multiple`, `accept` instead  (Will be removed in v0.11)
-     */
+    /** @deprecated Use props `multiple`, `accept` instead  (Will be removed in v0.11) */
     dropzoneProps?: {
         accept?: string;
         multiple?: boolean;
     };
 } & FormFieldWrappingProps;
-declare const FileInput: (props: FileInputProps) => JSX.Element;
+export declare const FileInput: (props: FileInputProps) => JSX.Element;
 export default FileInput;

package/FileInput.js

@@ -1,13 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileInput = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_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 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _FileInput_utils_1 = require("./FileInput/_FileInput.utils");
 const _FileInputFileList_1 = require("./FileInput/_FileInputFileList");
 const FormField_1 = tslib_1.__importDefault(require("./FormField"));
+const defaultRemoveFileText = {
+    is: 'Fjarlægja',
+    en: 'Remove',
+    pl: 'Usuń',
+};
+const defaultOnFilesRejected = (rejectedFiles) => {
+    window.alert('Error:\n' +
+        rejectedFiles
+            .map((elm) => {
+            return elm.name;
+        })
+            .join(', '));
+};
 const arrayToFileList = (arr) => {
     const fileList = new DataTransfer();
     arr.forEach((item) => {
@@ -16,7 +31,7 @@ const arrayToFileList = (arr) => {
     return fileList.files;
 };
 const FileInput = (props) => {
-    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, multiple = dropzoneProps.multiple, accept, dropzoneText, removeFileText, assistText, disabled, invalid, errorMessage, required, reqText, FileList = _FileInputFileList_1.DefaultFileList, onFilesUpdated = () => undefined, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = tslib_1.__rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "FileList", "onFilesUpdated", "showFileSize", "showImagePreviews", "value"]);
+    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, multiple = dropzoneProps.multiple, accept, dropzoneText, lang = i18n_1.DEFAULT_LANG, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[i18n_1.DEFAULT_LANG], assistText, disabled, invalid, errorMessage, required, reqText, FileList = _FileInputFileList_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = tslib_1.__rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "multiple", "accept", "dropzoneText", "lang", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value"]);
     const domid = (0, hooks_1.useDomid)(id);
     const fileInputWrapper = (0, react_1.useRef)(null);
     const fileInput = (0, react_1.useRef)(null);
@@ -32,14 +47,7 @@ const FileInput = (props) => {
             addFiles(acceptedFiles);
             setIsHover(false);
         },
-        onDropRejected: (rejectedFiles) => {
-            window.alert('Error:\n' +
-                rejectedFiles
-                    .map((elm) => {
-                    return elm.name;
-                })
-                    .join(', '));
-        },
+        onDropRejected: onFilesRejected || defaultOnFilesRejected,
         onDragEnter: () => {
             // 'dragLeave' always fires right after 'dragEnter', use 'dragOver' instead
             // console.log('enter');
@@ -122,4 +130,5 @@ const FileInput = (props) => {
                 })))));
         } }));
 };
-exports.default = FileInput;
+exports.FileInput = FileInput;
+exports.default = exports.FileInput;

package/Foonote.d.ts

@@ -8,5 +8,5 @@ export declare type FootnoteProps = _FootnoteProps;
  *
  * This module file is a typo. import from `Footnote` instead
  */
-declare const Footnote: (props: _FootnoteProps) => JSX.Element;
+export declare const Footnote: (props: _FootnoteProps) => JSX.Element;
 export default Footnote;

package/Foonote.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footnote = void 0;
 const tslib_1 = require("tslib");
 const Footnote_1 = tslib_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;
+exports.Footnote = Footnote_1.default;
+exports.default = exports.Footnote;

package/FooterBadges.d.ts

@@ -5,5 +5,5 @@ export declare type FooterBadgesProps = {
         href?: string;
     }>;
 };
-declare const FooterBadges: (props: FooterBadgesProps) => JSX.Element | null;
+export declare const FooterBadges: (props: FooterBadgesProps) => JSX.Element | null;
 export default FooterBadges;

package/FooterBadges.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterBadges = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const _Link_1 = require("./_abstract/_Link");
@@ -12,4 +13,5 @@ const FooterBadges = (props) => {
         react_1.default.createElement("img", { src: src, alt: altText }),
         ' ')) : (react_1.default.createElement("img", { src: src, alt: altText })))))));
 };
-exports.default = FooterBadges;
+exports.FooterBadges = FooterBadges;
+exports.default = exports.FooterBadges;

package/FooterInfo.d.ts

@@ -1,8 +1,10 @@
 import { BemPropsModifier } from '@hugsmidjan/react/types';
 export declare type FooterInfoGroup = {
     title: string;
-    role?: JSX.IntrinsicElements['div']['role'];
     modifier?: string;
+    main?: boolean;
+    /** @deprecated (Will be removed in v0.11) */
+    role?: JSX.IntrinsicElements['div']['role'];
 } & BemPropsModifier & ({
     content: JSX.Element;
     html?: undefined;
@@ -14,5 +16,5 @@ export declare type FooterInfoBoxes = Array<FooterInfoGroup>;
 export declare type FooterInfoProps = {
     boxes: FooterInfoBoxes;
 };
-declare const FooterInfo: (props: FooterInfoProps) => JSX.Element;
+export declare const FooterInfo: (props: FooterInfoProps) => JSX.Element;
 export default FooterInfo;

package/FooterInfo.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FooterInfo = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const FooterInfo = (props) => {
     const { boxes } = props;
-    return (react_1.default.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__group', group.modifier), role: group.role, key: i },
+    return (react_1.default.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__group', [
+            group.main && 'main',
+            group.modifier,
+        ]), key: i },
         react_1.default.createElement("h3", { className: "FooterInfo__grouptitle" }, group.title),
         group.content ? (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__groupcontent', group.modifier) }, group.content)) : (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FooterInfo__groupcontent', group.modifier), dangerouslySetInnerHTML: { __html: group.html } })))))));
 };
-exports.default = FooterInfo;
+exports.FooterInfo = FooterInfo;
+exports.default = exports.FooterInfo;

package/Footnote.d.ts

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

package/Footnote.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Footnote = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Footnote = (props) => (react_1.default.createElement("div", { className: "Footnote" }, props.children));
-exports.default = Footnote;
+exports.Footnote = Footnote;
+exports.default = exports.Footnote;

package/Form.d.ts

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

package/Form.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
@@ -10,4 +11,5 @@ const Form = (props) => {
             !align && wide && 'wide',
         ]) }), children));
 };
-exports.default = Form;
+exports.Form = Form;
+exports.default = exports.Form;

package/FormField.d.ts

@@ -61,5 +61,5 @@ export declare type FormFieldProps = FormFieldGroupWrappingProps & {
     filled?: boolean;
     renderInput(className: InputClassNames, inputProps: FormFieldInputProps, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;
 };
-declare const FormField: (props: FormFieldProps) => JSX.Element;
+export declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;

package/FormField.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormField = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
@@ -91,4 +92,5 @@ const FormField = (props) => {
         assistText && (react_1.default.createElement("div", { id: assistTextId, className: 'FormField__assist' }, assistText)),
         errorMessage && (react_1.default.createElement("div", { id: errorId, className: 'FormField__error' }, errorMessage))));
 };
-exports.default = FormField;
+exports.FormField = FormField;
+exports.default = exports.FormField;

package/Gallery/_GalleryItem.d.ts

@@ -4,5 +4,4 @@ export declare type GalleryItemProps = {
     description?: string;
     largeImageSrc?: string;
 } & ImageProps;
-declare const GalleryItem: (props: GalleryItemProps) => JSX.Element;
-export default GalleryItem;
+export declare const GalleryItem: (props: GalleryItemProps) => JSX.Element;