@reykjavik/hanna-react 0.10.93 → 0.10.95

package/TagPill.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagPill = 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 _Button_js_1 = require("./_abstract/_Button.js");
 const colors = {
     normal: '',
@@ -23,10 +23,10 @@ const TagPill = (props) => {
             'must have an `onRemove` handler defined');
     const modifiers = [modifier, large && 'large', colors[color]];
     const removeBtn = removable && (react_1.default.createElement("button", { className: "TagPill__remove", onClick: onRemove && (() => onRemove()), "aria-label": removeLabelLong, type: "button" }, removeLabel));
-    return isStatic ? (react_1.default.createElement("span", Object.assign({ className: (0, getBemClass_1.default)('TagPill', modifiers) }, buttonProps),
+    return isStatic ? (react_1.default.createElement("span", Object.assign({ className: (0, classUtils_1.modifiedClass)('TagPill', modifiers) }, buttonProps),
         label,
         " ",
-        removeBtn)) : onRemove ? (react_1.default.createElement("span", { className: (0, getBemClass_1.default)('TagPill', modifiers) },
+        removeBtn)) : onRemove ? (react_1.default.createElement("span", { className: (0, classUtils_1.modifiedClass)('TagPill', modifiers) },
         react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "TagPill__button" }, buttonProps), label),
         ' ',
         removeBtn)) : (react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "TagPill" }, buttonProps, { modifier: modifiers }),

package/TextBlock.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextBlock = 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 TextBlock = (props) => {
     const { children, align, labelled, wide, small, startSeen } = props;
     const rightAligned = align === 'right' || labelled;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('TextBlock', [
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('TextBlock', [
             labelled && 'labelled',
             rightAligned && 'align--right',
             wide && !rightAligned && 'wide',

package/TextInput.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = 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 FormField_js_1 = tslib_1.__importDefault(require("./FormField.js"));
 const TextInput = (props) => {
     var _a;
@@ -30,7 +30,7 @@ const TextInput = (props) => {
             setHasValue(true);
         }
     }, []);
-    return (react_1.default.createElement(FormField_js_1.default, { className: (0, getBemClass_1.default)('TextInput', modifiers, className), ssr: ssr, small: small, label: label, empty: empty, filled: filled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => multiline ? (react_1.default.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (react_1.default.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
+    return (react_1.default.createElement(FormField_js_1.default, { className: (0, classUtils_1.modifiedClass)('TextInput', modifiers, className), ssr: ssr, small: small, label: label, empty: empty, filled: filled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => multiline ? (react_1.default.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (react_1.default.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
 };
 exports.TextInput = TextInput;
 exports.default = exports.TextInput;

package/Tooltip.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("@floating-ui/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 getSide = (placement) => placement.split('-')[0];
 const Tooltip = (props) => {
     const { text, label, iconOnly } = props;
@@ -54,7 +54,7 @@ const Tooltip = (props) => {
                 '--tooltip-arrow-pos-x': `${arrowX}px`,
                 '--tooltip-arrow-pos-y': `${arrowY}px`,
             } },
-        react_1.default.createElement("summary", { className: (0, getBemClass_1.default)('Tooltip__trigger', iconOnly && 'icononly'), ref: reference }, label),
+        react_1.default.createElement("summary", { className: (0, classUtils_1.modifiedClass)('Tooltip__trigger', iconOnly && 'icononly'), ref: reference }, label),
         react_1.default.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: floating },
             x !== null && (react_1.default.createElement("div", { "data-floating-ui-hack-plz-ignore": "", style: { position: 'absolute', display: 'none' }, ref: arrowRef })),
             text)));

package/VSpacer.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VSpacer = 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 = {
     none: 'none',
     small: 'small',
@@ -35,7 +35,7 @@ const VSpacer = (props) => {
             bottomVal = undefined;
         }
     }
-    const className = (0, getBemClass_1.default)('VSpacer', [
+    const className = (0, classUtils_1.modifiedClass)('VSpacer', [
         sizeVal,
         topVal && 'top--' + topVal,
         bottomVal && 'bottom--' + bottomVal,

package/WizardLayout.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import type { HannaColorTheme } from '@reykjavik/hanna-css';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 type WizardLayoutProps = {
     wizardStepper?: ReactNode | false;
     wizardFooter?: ReactNode | false;
@@ -8,8 +8,7 @@ type WizardLayoutProps = {
     siteName?: string;
     logoLink?: string;
     globalAlerts?: ReactNode;
-    ssr?: SSRSupport;
     children?: ReactNode;
-};
+} & SSRSupportProps;
 export declare const WizardLayout: (props: WizardLayoutProps) => JSX.Element;
 export default WizardLayout;

package/WizardLayout.js

@@ -12,7 +12,7 @@ const WizardLayout = (props) => {
     (0, useScrollbarWidthCSSVar_js_1.useScrollbarWidthCSSVar)();
     const { 
     // ssr,
-    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = 'Reykjavík', globalAlerts, } = props;
+    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = '', globalAlerts, } = props;
     const isBrowser = (0, utils_js_1.useIsBrowserSide)( /* ssr */);
     return (react_1.default.createElement("div", { className: "WizardLayout", "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
         globalAlerts && (react_1.default.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
@@ -20,7 +20,7 @@ const WizardLayout = (props) => {
             react_1.default.createElement("div", { className: "WizardLayout__header", role: "banner" },
                 react_1.default.createElement(_Link_js_1.Link, { className: "WizardLayout__header__logo", href: logoLink },
                     ' ',
-                    react_1.default.createElement(_Image_js_1.Image, { className: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg') }),
+                    react_1.default.createElement(_Image_js_1.Image, { className: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
                     ' ',
                     siteName,
                     ' '),

package/WizardStepper.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WizardStepper = 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 WizardStepper = (props) => {
     const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
         const { clickable, done, neutral } = step;
         const label = step.label || '…';
-        const stepClass = (0, getBemClass_1.default)('WizardStepper__step', [
+        const stepClass = (0, classUtils_1.modifiedClass)('WizardStepper__step', [
             (done || (done == null && i < activeStep)) && 'done',
             neutral && 'neutral',
         ]);

package/_abstract/_AbstractCarousel.d.ts

@@ -1,14 +1,13 @@
 import { ReactElement, ReactNode } from 'react';
-import { BemProps } from '@hugsmidjan/react/types';
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { SSRSupport } from '../utils.js';
+import { SSRSupportProps } from '../utils.js';
 import { SeenProp } from '../utils/seenEffect.js';
+import { BemProps } from '../utils/types.js';
 export type CarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = {
     className?: string;
-    ssr?: SSRSupport;
     /** @deprecated Ingored because never used (Will be removed in v0.11) */
     scrollRight?: boolean;
-} & EitherObj<{
+} & SSRSupportProps & EitherObj<{
     items: Array<I>;
     Component: (props: P extends undefined ? I : I & P) => ReactElement | null;
     ComponentProps?: P;

package/_abstract/_AbstractCarousel.js

@@ -4,10 +4,10 @@ exports.AbstractCarousel = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const A_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/A"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const debounce_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/debounce"));
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
 const throttle_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/throttle"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const CarouselStepper_js_1 = tslib_1.__importDefault(require("../CarouselStepper.js"));
 const utils_js_1 = require("../utils.js");
@@ -96,7 +96,7 @@ const AbstractCarousel = (props) => {
         items.map((item, i) => (
         // @ts-expect-error  (Can't be arsed...)
         react_1.default.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
         title && react_1.default.createElement("h2", { className: bem + '__title' }, title),
         isBrowser ? (react_1.default.createElement("div", { className: bem + '__itemlist-wrapper' },
             itemList,

package/_abstract/_Block.d.ts

@@ -1,5 +1,5 @@
-import { BemPropsModifier } from '@hugsmidjan/react/types';
 import { SeenProp } from '../utils/seenEffect.js';
+import { BemModifierProps } from '../utils/types.js';
 import { ButtonProps } from './_Button.js';
 import { ImageProps } from './_Image.js';
 export type BlockItem = {
@@ -15,7 +15,7 @@ export type ContentBlock = {
     content: Array<BlockItem>;
     image?: undefined;
 } & SeenProp;
-export type BlockProps = BemPropsModifier & (ContentBlock | ContentImageBlock);
+export type BlockProps = BemModifierProps & (ContentBlock | ContentImageBlock);
 export declare const Block: (props: BlockProps & {
     bem: string;
 }) => JSX.Element;

package/_abstract/_Block.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Block = 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 _Button_js_1 = require("./_Button.js");
 const _Image_js_1 = require("./_Image.js");
@@ -11,7 +11,7 @@ const Block = (props) => {
     const { image, modifier, bem, content, startSeen } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     const contentItems = Array.isArray(content) ? content : [content];
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)(bem, modifier), ref: ref },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier), ref: ref },
         contentItems.map(({ title, summary, buttons = [] }, i) => {
             const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
             return (react_1.default.createElement("div", { key: i, className: `${bem}__content` },

package/_abstract/_Button.d.ts

@@ -1,14 +1,14 @@
 import { ReactNode } from 'react';
-import { BemProps, BemPropsModifier } from '@hugsmidjan/react/types';
+import { BemModifierProps, BemProps } from '../utils/types.js';
 type ButtonElmProps = {
     href?: never;
-} & BemPropsModifier & Omit<JSX.IntrinsicElements['button'], 'className' | 'style'>;
+} & BemModifierProps & Omit<JSX.IntrinsicElements['button'], 'className' | 'style'>;
 type AnchorElmProps = {
     href: string;
     type?: never;
     name?: never;
     value?: never;
-} & BemPropsModifier & Omit<JSX.IntrinsicElements['a'], 'className' | 'style'>;
+} & BemModifierProps & Omit<JSX.IntrinsicElements['a'], 'className' | 'style'>;
 export type ButtonProps = {
     /** Label takes preference over `children` */
     label?: string | JSX.Element;

package/_abstract/_Button.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = 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 _Link_js_1 = require("./_Link.js");
 // ---------------------------------------------------------------------------
 const sizes = {
@@ -28,7 +28,7 @@ const icons = {
 const Button = (props) => {
     const { bem, small, size = 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = tslib_1.__rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
-        (0, getBemClass_1.default)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
+        (0, classUtils_1.modifiedClass)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
     if (buttonProps.href != null) {
         return (react_1.default.createElement(_Link_js_1.Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));

package/_abstract/_Image.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = 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 useGetSVGtext_js_1 = require("../utils/useGetSVGtext.js");
 // eslint-disable-next-line complexity
 const Image = (props) => {
@@ -11,9 +11,9 @@ const Image = (props) => {
     const _src = (sources.length && preloadSrc) || src;
     const imageSrc = _src || (sources[0] != null ? sources[0].srcset.split(' ')[0] : undefined);
     const imgLoading = preloadSrc ? 'eager' : 'lazy';
-    const inlineSvg = (0, useGetSVGtext_js_1.useGetSVGtext)(inline ? imageSrc : undefined);
+    const inlineSvg = (0, useGetSVGtext_js_1.useGetSVGtext)(inline ? imageSrc : undefined, altText);
     if (!imageSrc) {
-        return placeholder ? (react_1.default.createElement("span", { className: className && (0, getBemClass_1.default)(className, 'missing') }, placeholder !== true && placeholder())) : null;
+        return placeholder ? (react_1.default.createElement("span", { className: className && (0, classUtils_1.modifiedClass)(className, 'missing') }, placeholder !== true && placeholder())) : null;
     }
     if (inline && inlineSvg) {
         const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';

package/_abstract/_TogglerGroup.js

@@ -4,7 +4,7 @@ exports.TogglerGroup = 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 utils_js_1 = require("../utils.js");
 const TogglerGroup = (props) => {
     const { 
@@ -18,7 +18,7 @@ const TogglerGroup = (props) => {
             ? _options.map((option) => ({ value: option }))
             : _options;
     }, [props.options]);
-    return (react_1.default.createElement("ul", { className: (0, getBemClass_1.default)(bem, null, className), role: "group", "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props.required }, options.map((option, i) => {
+    return (react_1.default.createElement("ul", { className: (0, classUtils_1.modifiedClass)(bem, null, className), role: "group", "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props.required }, options.map((option, i) => {
         const isDisabled = option.disabled != null
             ? option.disabled
             : disabled && typeof disabled !== 'boolean'

package/_abstract/_TogglerGroupField.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-import { BemPropsModifier } from '@hugsmidjan/react/types';
 import { FormFieldGroupWrappingProps } from '../FormField.js';
+import { BemModifierProps } from '../utils/types.js';
 import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './_TogglerGroup.js';
 import { TogglerInputProps } from './_TogglerInput.js';
 export type TogglerGroupFieldProps<T = 'default'> = {
@@ -12,7 +12,7 @@ type _TogglerGroupFieldProps = {
     value?: string | ReadonlyArray<string>;
     defaultValue?: string | ReadonlyArray<string>;
     bem: string;
-} & BemPropsModifier;
+} & BemModifierProps;
 export type TogglerGroupFieldOption<T = 'default'> = TogglerGroupOption<T>;
 export type TogglerGroupFieldOptions<T = 'default'> = TogglerGroupOptions<T>;
 export declare const TogglerGroupField: (props: TogglerGroupFieldProps & _TogglerGroupFieldProps) => JSX.Element;

package/_abstract/_TogglerGroupField.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TogglerGroupField = 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 FormField_js_1 = tslib_1.__importDefault(require("../FormField.js"));
 const _TogglerGroup_js_1 = require("./_TogglerGroup.js");
 const TogglerGroupField = (props) => {
@@ -14,7 +14,7 @@ const TogglerGroupField = (props) => {
         : typeof defaultValue === 'string'
             ? [defaultValue]
             : defaultValue, [defaultValue]);
-    return (react_1.default.createElement(FormField_js_1.default, { className: (0, getBemClass_1.default)(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: !!disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
+    return (react_1.default.createElement(FormField_js_1.default, { className: (0, classUtils_1.modifiedClass)(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: !!disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
             return (react_1.default.createElement(_TogglerGroup_js_1.TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { disabled: disabled, value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
         } }));
 };

package/_abstract/_TogglerInput.d.ts

@@ -1,4 +1,4 @@
-import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { BemModifierProps } from '../utils/types.js';
 export type TogglerInputProps = {
     label: string | JSX.Element;
     children?: never;
@@ -15,7 +15,7 @@ export type TogglerInputProps = {
     Wrapper?: 'div' | 'li';
     wrapperProps?: JSX.IntrinsicElements['div'];
     inputProps?: JSX.IntrinsicElements['input'];
-} & BemPropsModifier & Omit<JSX.IntrinsicElements['input'], 'type'>;
+} & BemModifierProps & Omit<JSX.IntrinsicElements['input'], 'type'>;
 type _TogglerInputProps = {
     bem: string;
     type: 'radio' | 'checkbox';

package/_abstract/_TogglerInput.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TogglerInput = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(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 TogglerInput = (props) => {
     const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
     const domid = (0, hooks_1.useDomid)(id);
@@ -19,7 +19,7 @@ const TogglerInput = (props) => {
         " ",
         label,
         ' '));
-    return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, getBemClass_1.default)(bem, modifier, className) }),
+    return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, className) }),
         react_1.default.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, restInputProps, inputProps, (readOnly && { disabled: true }))),
         ' ',
         react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid },

package/_mixed_export_resolution_/ReactDropzone.d.ts

@@ -1,3 +1,3 @@
-import * as reactDropzonePkg from 'react-dropzone';
-export declare const ReactDropzone: typeof reactDropzonePkg.default;
-export declare const useDropzone: typeof reactDropzonePkg.useDropzone;
+import * as _pkg from 'react-dropzone';
+export declare const ReactDropzone: typeof _pkg.default;
+export declare const useDropzone: typeof _pkg.useDropzone;

package/_mixed_export_resolution_/ReactDropzone.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDropzone = exports.ReactDropzone = void 0;
 const tslib_1 = require("tslib");
-const reactDropzonePkg = tslib_1.__importStar(require("react-dropzone"));
-const _default = reactDropzonePkg.default;
+const _pkg = tslib_1.__importStar(require("react-dropzone"));
 // This defensive code is required to get around the fact that react-dropzone
 // mixes default and named exports.
 // Depending whether this module is run as ESM or CJS, then `_default` may be
 // either the actual default export or an object with a default property.
 // Rejoice in the woeful borderlands of modern ESM and legacy CJS interop.
-exports.ReactDropzone = 'default' in _default ? _default.default : _default;
+const reactDropzonePkg = 'default' in _pkg.default ? _pkg.default : _pkg;
+exports.ReactDropzone = reactDropzonePkg.default;
 exports.useDropzone = reactDropzonePkg.useDropzone;

package/esm/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/esm/AccordionList.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useDomid } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { useSeenEffect } from './utils/seenEffect.js';
 import { useIsBrowserSide, useMixedControlState } from './utils.js';
 const AccordionListItem = (props) => {
@@ -9,7 +9,7 @@ const AccordionListItem = (props) => {
     const domid = useDomid();
     const isBrowser = useIsBrowserSide(ssr);
     const itemDisabled = (isBrowser && disabled) || !content;
-    return (React.createElement("div", { className: getBemClass('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen.current, "data-sprinkled": isBrowser },
+    return (React.createElement("div", { className: modifiedClass('AccordionList__item', [itemDisabled && 'disabled']), id: id, "data-start-open": defaultOpen.current, "data-sprinkled": isBrowser },
         React.createElement("h3", { className: "AccordionList__title" }, isBrowser ? (React.createElement("button", { type: "button", className: "AccordionList__button", "aria-controls": domid, "aria-expanded": open || undefined, onClick: onToggle, disabled: itemDisabled }, title)) : (title)),
         React.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
 };
@@ -27,6 +27,6 @@ export const AccordionList = (props) => {
             return newOpen;
         });
     };
-    return (React.createElement("div", { className: getBemClass('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (React.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
+    return (React.createElement("div", { className: modifiedClass('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (React.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
 };
 export default AccordionList;

package/esm/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/esm/Alert.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState, } from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Button } from './_abstract/_Button.js';
 import { isPreact } from './utils/env.js';
@@ -77,7 +77,7 @@ export const Alert = (props) => {
             };
         }
     }, [closeAlert, autoClosing, autoClose]);
-    return (React.createElement("div", Object.assign({ className: getBemClass('Alert', [
+    return (React.createElement("div", Object.assign({ className: modifiedClass('Alert', [
             !!alertTypes[type] && type,
             closable && 'closable',
         ]), role: "alert", hidden: !open || undefined }, autoClosingProps),

package/esm/ArticleCarousel/_ArticleCarouselCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
 import { Image } from '../_abstract/_Image.js';
 import { Link } from '../_abstract/_Link.js';
@@ -11,7 +11,7 @@ export const ArticleCarouselCard = (props) => {
     return (React.createElement("div", { className: "ArticleCarouselCard", "data-color": color && colorFamilies[color], "data-color-theme": !color ? theme && themeOptions[theme] : undefined },
         React.createElement(Link, { className: "ArticleCarouselCard__link", href: href, target: target },
             ' ',
-            React.createElement(Image, Object.assign({ placeholder: true, className: getBemClass('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
+            React.createElement(Image, Object.assign({ placeholder: true, className: modifiedClass('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
             React.createElement("h3", { className: "ArticleCarouselCard__title" }, title),
             ' '),
         ' ',

package/esm/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/esm/ArticleMeta.js

@@ -1,12 +1,12 @@
 import React, { Fragment } from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Link } from './_abstract/_Link.js';
 export const ArticleMeta = (props) => {
     const { items, small } = props;
     if (items.length === 0) {
         return null;
     }
-    return (React.createElement("div", { className: getBemClass('ArticleMeta', small && 'small') }, items.map(({ label, href }, i) => (React.createElement(Fragment, { key: i },
+    return (React.createElement("div", { className: modifiedClass('ArticleMeta', small && 'small') }, items.map(({ label, href }, i) => (React.createElement(Fragment, { key: i },
         href == null ? (React.createElement("span", { className: "ArticleMeta__item" },
             " ",
             label,

package/esm/Attention.js

@@ -1,4 +1,4 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-export const Attention = (props) => (React.createElement("div", { className: getBemClass('Attention', props.small && 'small') }, props.children));
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+export const Attention = (props) => (React.createElement("div", { className: modifiedClass('Attention', props.small && 'small') }, props.children));
 export default Attention;

package/esm/BasicTable.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import Table from '@hugsmidjan/react/Table';
 import TableWrapper from '@hugsmidjan/react/TableWrapper';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { useSeenEffect } from './utils/seenEffect.js';
 export const BasicTable = (props) => {
     const { cols, caption, thead, tfoot, align, fullWidth, startSeen } = props;
@@ -16,7 +16,7 @@ export const BasicTable = (props) => {
             fullWidth && 'BasicTable--fullwidth',
             align === 'right' && !fullWidth && 'BasicTable--align--' + align,
         ], wrapperRef: ref },
-        React.createElement(Table, Object.assign({ className: getBemClass('BasicTable', [
+        React.createElement(Table, Object.assign({ className: modifiedClass('BasicTable', [
                 props.compact && 'compact',
                 modifier && modifier,
             ]) }, {

package/esm/BgBox.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getEffectAttr, useSeenEffect, } from './utils/seenEffect.js';
 export const BgBox = (props) => {
     const { className, children, effectType, startSeen } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", Object.assign({ className: getBemClass('BgBox', undefined, className), ref: ref }, getEffectAttr(effectType)), children));
+    return (React.createElement("div", Object.assign({ className: modifiedClass('BgBox', undefined, className), ref: ref }, getEffectAttr(effectType)), children));
 };
 export default BgBox;

package/esm/Bling.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getBlingUrl } from '@reykjavik/hanna-utils/assets';
 import { useGetSVGtext } from './utils/useGetSVGtext.js';
 const colors = {
@@ -33,7 +33,7 @@ export const Bling = (props) => {
     const { align, vertical, color, overlay, type, blingUrl, parent, className } = props;
     const imageUrl = type ? getBlingUrl(type) : blingUrl;
     const inlineSvg = useGetSVGtext(imageUrl);
-    return (React.createElement("div", { className: getBemClass('Bling', [
+    return (React.createElement("div", { className: modifiedClass('Bling', [
             'align--' + (align && align in aligns ? align : 'left'),
             vertical && vertical in valigns && 'vertical--' + vertical,
             color && color in colors && 'color--' + color,

package/esm/ButtonBar.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const ButtonBar = (props) => {
     const { align, children } = props;
-    return (React.createElement("div", { className: getBemClass('ButtonBar', align === 'right' && 'align--right') }, children));
+    return (React.createElement("div", { className: modifiedClass('ButtonBar', align === 'right' && 'align--right') }, children));
 };
 /** A Splitter token to use directly inside <ButtonBar/> wrappers */
 ButtonBar.Split = () => React.createElement("span", { className: "ButtonBar__split" });