@reykjavik/hanna-react 0.10.94 → 0.10.95

package/AccordionList.d.ts

@@ -1,5 +1,5 @@
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 export type AccordionListItemProps = {
     title: string | JSX.Element;
     content: string | JSX.Element | undefined;
@@ -19,7 +19,6 @@ export type AccordionListProps = {
     /** Index of those items that should start open (uncontrolled use) */
     defaultOpen?: Array<number>;
     wide?: boolean;
-    ssr?: SSRSupport;
-} & SeenProp;
+} & SSRSupportProps & SeenProp;
 export declare const AccordionList: (props: AccordionListProps) => JSX.Element;
 export default AccordionList;

package/AccordionList.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AccordionList = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const utils_js_1 = require("./utils.js");
 const AccordionListItem = (props) => {
@@ -13,7 +13,7 @@ const AccordionListItem = (props) => {
     const domid = (0, hooks_1.useDomid)();
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     const itemDisabled = (isBrowser && disabled) || !content;
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen.current, "data-sprinkled": isBrowser },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen.current, "data-sprinkled": isBrowser },
         react_1.default.createElement("h3", { className: "AccordionList__title" }, isBrowser ? (react_1.default.createElement("button", { type: "button", className: "AccordionList__button", "aria-controls": domid, "aria-expanded": open || undefined, onClick: onToggle, disabled: itemDisabled }, title)) : (title)),
         react_1.default.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
 };
@@ -31,7 +31,7 @@ const AccordionList = (props) => {
             return newOpen;
         });
     };
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (react_1.default.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (react_1.default.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
 };
 exports.AccordionList = AccordionList;
 exports.default = exports.AccordionList;

package/Alert.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 export type AlertI18n = {
     closeLabel: string;
     closeLabelLong?: string;
@@ -24,8 +24,7 @@ export type AlertProps = {
     closeUrl?: string;
     texts?: AlertI18n;
     lang?: string;
-    ssr?: SSRSupport;
-} & EitherObj<{
+} & SSRSupportProps & EitherObj<{
     /** Seconds until the Alert auto-closes.
      *
      * Mosueover and keyboard focus resets the timer.

package/Alert.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = exports.alertTypes = exports.defaultAlertTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Button_js_1 = require("./_abstract/_Button.js");
 const env_js_1 = require("./utils/env.js");
@@ -81,7 +81,7 @@ const Alert = (props) => {
             };
         }
     }, [closeAlert, autoClosing, autoClose]);
-    return (react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('Alert', [
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('Alert', [
             !!exports.alertTypes[type] && type,
             closable && 'closable',
         ]), role: "alert", hidden: !open || undefined }, autoClosingProps),

package/ArticleCarousel/_ArticleCarouselCard.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArticleCarouselCard = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const assets_1 = require("@reykjavik/hanna-utils/assets");
 const _Image_js_1 = require("../_abstract/_Image.js");
 const _Link_js_1 = require("../_abstract/_Link.js");
@@ -15,7 +15,7 @@ const ArticleCarouselCard = (props) => {
     return (react_1.default.createElement("div", { className: "ArticleCarouselCard", "data-color": color && constants_js_1.colorFamilies[color], "data-color-theme": !color ? theme && constants_js_1.themeOptions[theme] : undefined },
         react_1.default.createElement(_Link_js_1.Link, { className: "ArticleCarouselCard__link", href: href, target: target },
             ' ',
-            react_1.default.createElement(_Image_js_1.Image, Object.assign({ placeholder: true, className: (0, getBemClass_1.default)('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
+            react_1.default.createElement(_Image_js_1.Image, Object.assign({ placeholder: true, className: (0, classUtils_1.modifiedClass)('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
             react_1.default.createElement("h3", { className: "ArticleCarouselCard__title" }, title),
             ' '),
         ' ',

package/ArticleCarousel.d.ts

@@ -1,12 +1,11 @@
 import { ArticleCarouselCardProps, ArticleCarouselImageProps } from './ArticleCarousel/_ArticleCarouselCard.js';
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 export type ArticleCarouselProps = {
     items: Array<ArticleCarouselCardProps>;
     title?: string;
     moreLabel?: string;
-    ssr?: SSRSupport;
-} & SeenProp;
+} & SSRSupportProps & SeenProp;
 export type { ArticleCarouselCardProps, ArticleCarouselImageProps };
 export declare const ArticleCarousel: (props: ArticleCarouselProps) => JSX.Element;
 export default ArticleCarousel;

package/ArticleMeta.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArticleMeta = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const ArticleMeta = (props) => {
     const { items, small } = props;
     if (items.length === 0) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('ArticleMeta', small && 'small') }, items.map(({ label, href }, i) => (react_1.default.createElement(react_1.Fragment, { key: i },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ArticleMeta', small && 'small') }, items.map(({ label, href }, i) => (react_1.default.createElement(react_1.Fragment, { key: i },
         href == null ? (react_1.default.createElement("span", { className: "ArticleMeta__item" },
             " ",
             label,

package/Attention.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Attention = 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 Attention = (props) => (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('Attention', props.small && 'small') }, props.children));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const Attention = (props) => (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('Attention', props.small && 'small') }, props.children));
 exports.Attention = Attention;
 exports.default = exports.Attention;

package/BasicTable.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BasicTable = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const Table_1 = tslib_1.__importDefault(require("@hugsmidjan/react/Table"));
 const TableWrapper_1 = tslib_1.__importDefault(require("@hugsmidjan/react/TableWrapper"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const BasicTable = (props) => {
     const { cols, caption, thead, tfoot, align, fullWidth, startSeen } = props;
@@ -20,7 +20,7 @@ const BasicTable = (props) => {
             fullWidth && 'BasicTable--fullwidth',
             align === 'right' && !fullWidth && 'BasicTable--align--' + align,
         ], wrapperRef: ref },
-        react_1.default.createElement(Table_1.default, Object.assign({ className: (0, getBemClass_1.default)('BasicTable', [
+        react_1.default.createElement(Table_1.default, Object.assign({ className: (0, classUtils_1.modifiedClass)('BasicTable', [
                 props.compact && 'compact',
                 modifier && modifier,
             ]) }, {

package/BgBox.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BgBox = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const BgBox = (props) => {
     const { className, children, effectType, startSeen } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('BgBox', undefined, className), ref: ref }, (0, seenEffect_js_1.getEffectAttr)(effectType)), children));
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('BgBox', undefined, className), ref: ref }, (0, seenEffect_js_1.getEffectAttr)(effectType)), children));
 };
 exports.BgBox = BgBox;
 exports.default = exports.BgBox;

package/Bling.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Bling = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const assets_1 = require("@reykjavik/hanna-utils/assets");
 const useGetSVGtext_js_1 = require("./utils/useGetSVGtext.js");
 const colors = {
@@ -37,7 +37,7 @@ const Bling = (props) => {
     const { align, vertical, color, overlay, type, blingUrl, parent, className } = props;
     const imageUrl = type ? (0, assets_1.getBlingUrl)(type) : blingUrl;
     const inlineSvg = (0, useGetSVGtext_js_1.useGetSVGtext)(imageUrl);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('Bling', [
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('Bling', [
             'align--' + (align && align in aligns ? align : 'left'),
             vertical && vertical in valigns && 'vertical--' + vertical,
             color && color in colors && 'color--' + color,

package/ButtonBar.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonBar__split = exports.ButtonBar = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const ButtonBar = (props) => {
     const { align, children } = props;
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('ButtonBar', align === 'right' && 'align--right') }, children));
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ButtonBar', align === 'right' && 'align--right') }, children));
 };
 exports.ButtonBar = ButtonBar;
 /** A Splitter token to use directly inside <ButtonBar/> wrappers */

package/CHANGELOG.md

@@ -4,6 +4,18 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.95
+
+_2023-07-25_
+
+- feat: Add optional `altText` parameter to `useGetSVGtext()`
+- feat: Export `useMenuToggling` from 'utils' module
+- feat: Export `SSRSupportProps` type
+- perf: Reduce render thrashing of `Layout`'s navChildren
+- fix: `Layout` components set `alt="Reykjavík"` text on their header logo
+- fix: Raise `Multiselect`'s internal `summaryLimit` to `20`
+- fix: List `tslib` as dependency
+
 ## 0.10.93 – 0.10.94
 
 _2023-07-06_

package/ContactBubble.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 export type ContactBubbleI18n = {
     lang?: string;
     openBtn: string;
@@ -47,8 +47,7 @@ export type ContactBubbleProps = {
     alwaysShow?: boolean;
     texts?: ContactBubbleI18n;
     lang?: string;
-    ssr?: SSRSupport;
-} & ({
+} & SSRSupportProps & ({
     open?: boolean;
     onToggle: (isOpen: boolean) => void;
 } | {

package/ContactBubble.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const breakOnNL_js_1 = require("./_abstract/breakOnNL.js");
@@ -126,7 +126,7 @@ const ContactBubble = (props) => {
         react_1.default.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;
             const icon = (0, exports.ensureIcon)(linkInfo.icon);
-            const itemClass = (0, getBemClass_1.default)('ContactBubble__item', icon && 'type--' + icon);
+            const itemClass = (0, classUtils_1.modifiedClass)('ContactBubble__item', icon && 'type--' + icon);
             const onClickHandler = (e) => {
                 if (onClick) {
                     const doPreventDefault = onClick() !== true;

package/Datepicker.js

@@ -4,7 +4,7 @@ exports.Datepicker = exports.getDateDiff = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 const index_js_1 = tslib_1.__importDefault(require("date-fns/locale/is/index.js"));
 const index_js_2 = tslib_1.__importDefault(require("date-fns/locale/pl/index.js"));
@@ -74,7 +74,7 @@ const Datepicker = (props) => {
     const txts = i18n[localeCode] || {};
     const filled = !!value;
     const empty = !filled && !placeholder;
-    return (react_1.default.createElement(FormField_js_1.FormField, { 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(FormField_js_1.FormField, { className: (0, classUtils_1.modifiedClass)('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", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
                     ((elm) => {
                         inputRef.current =

package/ExtraLinks.js

@@ -3,7 +3,7 @@ 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"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _CardList_js_1 = require("./_abstract/_CardList.js");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
@@ -13,13 +13,13 @@ const ExtraLinks__related = (props) => {
         relatedTitle && react_1.default.createElement("h3", { className: "ExtraLinks__related__title" }, relatedTitle),
         react_1.default.createElement("ul", { className: "ExtraLinks__related__list" }, relatedLinks &&
             relatedLinks.map(({ href, label, blank = false, type }, i) => (react_1.default.createElement("li", { className: "ExtraLinks__related__item", key: i },
-                react_1.default.createElement(_Link_js_1.Link, { className: (0, getBemClass_1.default)('ExtraLinks__related__link', type), href: href, target: blank ? '_blank' : '', rel: blank ? 'noreferrer noopener' : '' }, label)))))));
+                react_1.default.createElement(_Link_js_1.Link, { className: (0, classUtils_1.modifiedClass)('ExtraLinks__related__link', type), href: href, target: blank ? '_blank' : '', rel: blank ? 'noreferrer noopener' : '' }, label)))))));
 };
 const ExtraLinks = (props) => {
     const { relatedTitle, relatedLinks, className, startSeen } = props, cardListProps = tslib_1.__rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen"]);
     const hasRelated = !!(relatedLinks && relatedLinks.length);
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('ExtraLinks', hasRelated && 'related', className), ref: ref },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ExtraLinks', hasRelated && 'related', className), ref: ref },
         react_1.default.createElement("div", { className: "ExtraLinks__main" },
             react_1.default.createElement(_CardList_js_1.CardList, Object.assign({}, cardListProps, { bemPrefix: "ExtraLinks" }))),
         hasRelated && (react_1.default.createElement(ExtraLinks__related, { relatedTitle: relatedTitle, relatedLinks: relatedLinks }))));

package/FieldGroup.js

@@ -3,10 +3,10 @@ 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"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const FieldGroup = (props) => {
     const { legend, children, className, disabled, small } = props;
-    return (react_1.default.createElement("fieldset", { className: (0, getBemClass_1.default)('FieldGroup', small && 'small', className), disabled: disabled },
+    return (react_1.default.createElement("fieldset", { className: (0, classUtils_1.modifiedClass)('FieldGroup', small && 'small', className), disabled: disabled },
         react_1.default.createElement("legend", { className: "FieldGroup__legend" }, legend),
         children));
 };

package/FileInput.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileInput = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 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 ReactDropzone_js_1 = require("./_mixed_export_resolution_/ReactDropzone.js");
 const _FileInput_utils_js_1 = require("./FileInput/_FileInput.utils.js");
@@ -104,7 +104,7 @@ const FileInput = (props) => {
         }
         onFilesUpdated(fileList, diff);
     };
-    return (react_1.default.createElement(FormField_js_1.default, { className: (0, getBemClass_1.default)('FileInput', [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_1.default.createElement(FormField_js_1.default, { className: (0, classUtils_1.modifiedClass)('FileInput', [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_1.default.createElement("div", { className: className.control, ref: fileInputWrapper },
                 // Explicitly skip rendering of input element if no
                 // name prop is provided. This is implicitly what the
@@ -118,7 +118,7 @@ const FileInput = (props) => {
                     // it's contents are wiped on every "add" action.
                     className: "FileInput__input--fake" }, getInputProps(), { tabIndex: undefined, style: undefined, multiple: multiple || undefined }, inputProps, { required: undefined })),
                 ' ',
-                react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('FileInput__dropzone', [isHover && 'highlight']) }, getRootProps({ isDragReject }), { tabIndex: undefined }),
+                react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('FileInput__dropzone', [isHover && 'highlight']) }, getRootProps({ isDragReject }), { tabIndex: undefined }),
                     react_1.default.createElement("p", { className: "FileInput__droptext" }, dropzoneText)),
                 FileList && (react_1.default.createElement(FileList, Object.assign({}, {
                     files,

package/FooterInfo.d.ts

@@ -1,11 +1,11 @@
-import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { BemModifierProps } from './utils/types.js';
 export type FooterInfoGroup = {
     title: string;
     modifier?: string;
     main?: boolean;
     /** @deprecated (Will be removed in v0.11) */
     role?: JSX.IntrinsicElements['div']['role'];
-} & BemPropsModifier & ({
+} & BemModifierProps & ({
     content: JSX.Element;
     html?: undefined;
 } | {

package/FooterInfo.js

@@ -3,15 +3,15 @@ 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 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', [
+    return (react_1.default.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('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 } })))))));
+        group.content ? (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('FooterInfo__groupcontent', group.modifier) }, group.content)) : (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('FooterInfo__groupcontent', group.modifier), dangerouslySetInnerHTML: { __html: group.html } })))))));
 };
 exports.FooterInfo = FooterInfo;
 exports.default = exports.FooterInfo;

package/Form.js

@@ -3,10 +3,10 @@ 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"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const Form = (props) => {
     const { children, align, wide } = props;
-    return (react_1.default.createElement("form", Object.assign({}, props, { className: (0, getBemClass_1.default)('Form', [
+    return (react_1.default.createElement("form", Object.assign({}, props, { className: (0, classUtils_1.modifiedClass)('Form', [
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
         ]) }), children));

package/FormField.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 type InputClassNames = {
     /** Basic/raw FormField BEM name */
     bem: string;
@@ -51,8 +51,7 @@ export type FormFieldWrappingProps = {
     id?: string;
     /** Ref object pointing to the outermost `.FormField` element */
     wrapperRef?: RefObject<HTMLElement>;
-    ssr?: SSRSupport;
-};
+} & SSRSupportProps;
 /**
  * Mixin base props type for components using `FormField` to contain
  * more complex multi-element, grouped choices, that require a Heading

package/FormField.js

@@ -4,7 +4,7 @@ exports.FormField = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const env_js_1 = require("./utils/env.js");
 const utils_js_1 = require("./utils.js");
 const inputClassNames = {
@@ -67,7 +67,7 @@ const FormField = (props) => {
         'aria-describedby': assistTextId && errorId ? assistTextId + ' ' + errorId : assistTextId || errorId,
         'aria-labelledby': labelId, // undefined if normalLabel
     };
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('FormField', [
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('FormField', [
             small && 'small',
             hideLabel && 'nolabel',
             isInvalid && 'invalid',

package/Gallery.d.ts

@@ -1,6 +1,6 @@
 import { GalleryItemProps } from './Gallery/_GalleryItem.js';
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 export type { GalleryItemProps } from './Gallery/_GalleryItem.js';
 export type GalleryI18n = {
     modalNextLabel: string;
@@ -11,7 +11,6 @@ export type GalleryProps = {
     items: Array<GalleryItemProps>;
     texts?: GalleryI18n;
     lang?: string;
-    ssr?: SSRSupport;
-} & SeenProp;
+} & SSRSupportProps & SeenProp;
 export declare const Gallery: (props: GalleryProps) => JSX.Element;
 export default Gallery;

package/GridBlocks.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridBlocks = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const assets_1 = require("@reykjavik/hanna-utils/assets");
 const _Image_js_1 = require("./_abstract/_Image.js");
 const _Link_js_1 = require("./_abstract/_Link.js");
@@ -12,7 +12,7 @@ const ButtonTertiary_js_1 = tslib_1.__importDefault(require("./ButtonTertiary.js
 const GridBlocks = (props) => {
     const { blocks, twocol, startSeen } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('GridBlocks', [twocol && 'twocol']), ref: ref }, blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('GridBlocks', [twocol && 'twocol']), ref: ref }, blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
         const imageProps = icon ? { src: (0, assets_1.getEfnistaknUrl)(icon) } : image;
         return (react_1.default.createElement("div", { key: i, className: "GridBlocks__item" },
             imageProps && react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: "GridBlocks__illustration" }, imageProps)),

package/Heading.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const sizes = {
     small: 'small',
     /** Default value */
@@ -14,7 +14,7 @@ const Heading = (props) => {
     const { size = 'normal', align, wide, children } = props;
     const Tag = props.Tag || (props.forceH1 ? 'h1' : 'h2');
     const suppressWarning = process.env.NODE_ENV !== 'production' && Tag === 'h1' ? true : undefined;
-    return (react_1.default.createElement(Tag, { "data-dev-forcedh1": suppressWarning, className: (0, getBemClass_1.default)('Heading', [
+    return (react_1.default.createElement(Tag, { "data-dev-forcedh1": suppressWarning, className: (0, classUtils_1.modifiedClass)('Heading', [
             sizes[size],
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',

package/IframeBlock.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.IframeBlock = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const iframe_resizer_react_1 = tslib_1.__importDefault(require("iframe-resizer-react"));
 /**
  * When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:
@@ -15,7 +15,7 @@ const iframe_resizer_react_1 = tslib_1.__importDefault(require("iframe-resizer-r
  */
 const IframeBlock = (props) => {
     const { title, src, framed, compact, scrolling, height = 'auto', align, checkOrigin = false, } = props;
-    const className = (0, getBemClass_1.default)('IframeBlock', [
+    const className = (0, classUtils_1.modifiedClass)('IframeBlock', [
         framed && 'framed',
         compact && 'compact',
         align === 'right' && 'align--' + align,

package/ImageCards.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageCards = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _CardList_js_1 = require("./_abstract/_CardList.js");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ImageCards = (props) => {
     const { background, startSeen } = props, cardListProps = tslib_1.__rest(props, ["background", "startSeen"]);
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('ImageCards', background && 'background'), ref: ref },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ImageCards', background && 'background'), ref: ref },
         react_1.default.createElement(_CardList_js_1.CardList, Object.assign({}, cardListProps, { bemPrefix: "ImageCards", imgPlaceholder: props.imgPlaceholder || true }))));
 };
 exports.ImageCards = ImageCards;

package/InfoHero.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoHero = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _Blings_js_1 = require("./_abstract/_Blings.js");
 const _Image_js_1 = require("./_abstract/_Image.js");
 const breakOnNL_js_1 = require("./_abstract/breakOnNL.js");
@@ -73,7 +73,7 @@ const InfoHero = (props) => {
     const alignment = align && constants_js_1.aligns[align] ? align : 'right';
     const blings = (blingType && blingOptions[blingType]) ||
         blingOptions.waves; // default to `waves`
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('InfoHero', 'align--' + alignment) },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('InfoHero', 'align--' + alignment) },
         react_1.default.createElement("div", { className: "InfoHero__content" },
             react_1.default.createElement("h1", { className: "InfoHero__title" }, title),
             titleBlurb && react_1.default.createElement("div", { className: "InfoHero__titleblurb" }, titleBlurb),

package/LabeledTextBlock.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LabeledTextBlock = 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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ButtonTertiary_js_1 = tslib_1.__importDefault(require("./ButtonTertiary.js"));
 const LabeledTextBlock = (props) => {
     const { label, summary, wide, buttons = [], startSeen } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('LabeledTextBlock', wide && 'wide'), ref: ref },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('LabeledTextBlock', wide && 'wide'), ref: ref },
         react_1.default.createElement("h2", { className: "LabeledTextBlock__label" }, label),
         react_1.default.createElement("div", { className: "LabeledTextBlock__summary" },
             summary,