@reykjavik/hanna-react 0.10.93 → 0.10.95

package/esm/RowBlock.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
-import { BemPropsModifier } from '@hugsmidjan/react/types';
 import { SeenProp } from './utils/seenEffect.js';
+import { BemModifierProps } from './utils/types.js';
 export type RowBlockProps = {
     /** Float the first RowBlockColumn to the right on larger screens. */
     right?: boolean;
     /** Custom **additional** class-name */
     className?: string;
     children: ReactNode;
-} & BemPropsModifier & SeenProp;
+} & BemModifierProps & SeenProp;
 export declare const RowBlock: (props: RowBlockProps) => JSX.Element;
 export default RowBlock;

package/esm/RowBlock.js

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

package/esm/RowBlockColumn.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const RowBlockColumn = (props) => {
     const { background, narrow, children } = props;
-    return (React.createElement("div", { className: getBemClass('RowBlockColumn', [
+    return (React.createElement("div", { className: modifiedClass('RowBlockColumn', [
             narrow && 'narrow',
             background && 'background',
             background === 'primary' && 'background--primary',

package/esm/SearchInput.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import React, { useState } from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import FormField from './FormField.js';
 export const SearchInput = (props) => {
     var _a;
@@ -15,7 +15,7 @@ export const SearchInput = (props) => {
             setHasValue(!!e.target.value);
             onChange && onChange(e);
         };
-    return (React.createElement(FormField, { className: getBemClass('SearchInput', [], 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) => (React.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
+    return (React.createElement(FormField, { className: modifiedClass('SearchInput', [], 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) => (React.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
             React.createElement("input", Object.assign({ className: "SearchInput__input", onChange: _onChange }, inputProps, inputElementProps, { ref: props.inputRef })),
             ' ',
             onButtonClick && (React.createElement("button", { className: "SearchInput__button", type: "button", onClick: onButtonClick, title: buttonText, ref: props.buttonRef, disabled: disabled || readOnly }, buttonText)))) }));

package/esm/SearchResults.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useInView } from 'react-intersection-observer';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { prettyNum } from '@hugsmidjan/qj/prettyNum';
 import range from '@hugsmidjan/qj/range';
 import { useDomid } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { SearchResultsItem, } from './SearchResults/_SearchResultsItem.js';
 import Alert from './Alert.js';
@@ -97,7 +97,7 @@ export const SearchResults = (props) => {
     const { filters, activeFilterIdx, setFilter, status, errorText } = props;
     const texts = getTexts(props, defaultTexts);
     const domid = useDomid();
-    return (React.createElement("div", { className: getBemClass('SearchResults', status !== 'results' && status) },
+    return (React.createElement("div", { className: modifiedClass('SearchResults', status !== 'results' && status) },
         renderTitle(props, texts),
         React.createElement(SearchResults_Tabs, { domid: domid, filters: filters, activeIdx: activeFilterIdx, setFilter: setFilter, lang: texts.lang }),
         React.createElement("div", { className: "SearchResults__results", id: domid },

package/esm/Selectbox.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useEffect, useRef, useState } from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import _Selectbox from '@hugsmidjan/react/Selectbox';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import FormField from './FormField.js';
 const getValue = (opt) => {
     const val = typeof opt === 'object' ? opt.value : opt;
@@ -32,7 +32,7 @@ export const Selectbox = (props) => {
         setIsEmpty(!((_a = selectElm.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.text));
         onChange && onChange(e);
     };
-    return (React.createElement(FormField, { className: getBemClass('Selectbox', null, className), ssr: ssr, small: small, label: label, empty: isEmpty, filled: isFilled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => (React.createElement(_Selectbox, Object.assign({ bem: className.input, ssr: ssr, onChange: _onChange }, inputProps, addFocusProps(selectProps), { selectRef: selectRef }))) }));
+    return (React.createElement(FormField, { className: modifiedClass('Selectbox', null, className), ssr: ssr, small: small, label: label, empty: isEmpty, filled: isFilled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => (React.createElement(_Selectbox, Object.assign({ bem: className.input, ssr: ssr, onChange: _onChange }, inputProps, addFocusProps(selectProps), { selectRef: selectRef }))) }));
 };
 // /** @deprecated Use named export instead (The default export will be removed in v0.11+) */
 // const SelectboxDefault = Selectbox;

package/esm/ShareButtons.d.ts

@@ -1,9 +1,8 @@
 import { ShareButtonI18n, ShareButtonPlatforms } from '@reykjavik/hanna-utils/shareButtonsUtils';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 export type ShareButtonsProps = {
-    ssr?: SSRSupport;
     texts?: Readonly<ShareButtonI18n>;
     lang?: string;
-} & Partial<Record<ShareButtonPlatforms, boolean>>;
+} & SSRSupportProps & Partial<Record<ShareButtonPlatforms, boolean>>;
 export declare const ShareButtons: (props: ShareButtonsProps) => JSX.Element | null;
 export default ShareButtons;

package/esm/Sharpie.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 const colors = {
     green: 1,
     red: 1,
@@ -17,6 +17,6 @@ export const Sharpie = (props) => {
     const { color, tag, children } = props;
     const colorModifier = colors[color] ? color : 'green';
     const Tag = tag && tags[tag] ? tag : 'span';
-    return React.createElement(Tag, { className: getBemClass('Sharpie', colorModifier) }, children);
+    return React.createElement(Tag, { className: modifiedClass('Sharpie', colorModifier) }, children);
 };
 export default Sharpie;

package/esm/SiteSearchAutocomplete.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import Autosuggest, { RenderSuggestion } from 'react-autosuggest';
-import { BemProps } from '@hugsmidjan/react/types';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { BemProps } from './utils/types.js';
 export type SiteSearchACI18n = {
     lang?: string;
     /** Label for the autocomplete's combobox container div */

package/esm/SiteSearchCurtain.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useLaggedState } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { isPreact } from './utils/env.js';
 export const SiteSearchCurtain = (props) => {
     const [focused, setFocused] = useLaggedState(false);
@@ -23,6 +23,6 @@ export const SiteSearchCurtain = (props) => {
             setFocused(false, 100);
         }
     };
-    return (React.createElement("div", Object.assign({ className: getBemClass('SiteSearchCurtain', [focused && 'focused']), onFocus: focusHandler, onBlur: blurHandler }, (isPreact && { onfocusin: focusHandler, onfocusout: blurHandler })), props.children));
+    return (React.createElement("div", Object.assign({ className: modifiedClass('SiteSearchCurtain', [focused && 'focused']), onFocus: focusHandler, onBlur: blurHandler }, (isPreact && { onfocusin: focusHandler, onfocusout: blurHandler })), props.children));
 };
 export default SiteSearchCurtain;

package/esm/SiteSearchInput.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormFieldWrappingProps } from './FormField.js';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit'>;
 type WrappingProps = Pick<FormFieldWrappingProps, 'id' | 'label'>;
 export type SiteSearchInputProps = {
@@ -18,7 +18,6 @@ export type SiteSearchInputProps = {
     onButtonClick?: () => boolean | void;
     buttonText?: string;
     children?: never;
-    ssr?: SSRSupport;
-} & WrappingProps & InputElmProps;
+} & SSRSupportProps & WrappingProps & InputElmProps;
 export declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "form" | "label" | "slot" | "style" | "title" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "value" | "pattern" | "name" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "src" | "multiple" | "alt" | "ssr" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "maxLength" | "min" | "minLength" | "width" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
 export default SiteSearchInput;

package/esm/Skeleton.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import range from '@hugsmidjan/qj/range';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-const makeRenderSkeleton = (props) => (key) => (React.createElement("span", { key: key, className: getBemClass('Skeleton', [
+const makeRenderSkeleton = (props) => (key) => (React.createElement("span", { key: key, className: modifiedClass('Skeleton', [
         props.text && 'text',
         props.height && 'height--' + props.height,
         props.gap && 'gap--' + props.gap,

package/esm/SubHeading.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 export const SubHeading = (props) => {
     const { small, Tag = 'h2', children, align, wide, startSeen } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement(Tag, { className: getBemClass('SubHeading', [
+    return (React.createElement(Tag, { className: modifiedClass('SubHeading', [
             small && 'small',
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',

package/esm/Tabs.d.ts

@@ -1,5 +1,5 @@
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 export type TabItemProps = {
     label: string;
     badge?: string | number;
@@ -22,8 +22,7 @@ type BaseTabsProps<T extends TabItemProps = TabItemProps> = {
     role?: 'tablist' | 'toc';
     'aria-controls'?: string;
     activateOnFocus?: boolean;
-    ssr?: SSRSupport;
-};
+} & SSRSupportProps;
 export type TabsProps<T extends TabItemProps = TabItemProps> = BaseTabsProps<T> & {
     vertical?: boolean;
     /** Optional <Tabs/> block connected to the currently active tab */

package/esm/Tabs.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { getFrag } from '@hugsmidjan/qj/frag';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 import { useIsBrowserSide } from './utils.js';
 const navKeyEffects = {
@@ -85,7 +85,7 @@ export const Tabs = (props) => {
         listAriaControls,
         isBrowser,
     };
-    return (React.createElement("div", { className: getBemClass('Tabs', vertical && 'vertical'), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser, ref: ref },
+    return (React.createElement("div", { className: modifiedClass('Tabs', vertical && 'vertical'), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser, ref: ref },
         tabs.map((tabProps, index) => renderTab(tabProps, index, listProps)),
         subTabs && (React.createElement(Tabs, Object.assign({}, subTabs, { role: 'role' in subTabs ? subTabs.role : role, activateOnFocus: (_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus, ssr: (_b = subTabs.ssr) !== null && _b !== void 0 ? _b : ssr, startSeen: true, 
             // just to be sure

package/esm/TagPill.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Button } from './_abstract/_Button.js';
 const colors = {
     normal: '',
@@ -20,10 +20,10 @@ export const TagPill = (props) => {
             'must have an `onRemove` handler defined');
     const modifiers = [modifier, large && 'large', colors[color]];
     const removeBtn = removable && (React.createElement("button", { className: "TagPill__remove", onClick: onRemove && (() => onRemove()), "aria-label": removeLabelLong, type: "button" }, removeLabel));
-    return isStatic ? (React.createElement("span", Object.assign({ className: getBemClass('TagPill', modifiers) }, buttonProps),
+    return isStatic ? (React.createElement("span", Object.assign({ className: modifiedClass('TagPill', modifiers) }, buttonProps),
         label,
         " ",
-        removeBtn)) : onRemove ? (React.createElement("span", { className: getBemClass('TagPill', modifiers) },
+        removeBtn)) : onRemove ? (React.createElement("span", { className: modifiedClass('TagPill', modifiers) },
         React.createElement(Button, Object.assign({ bem: "TagPill__button" }, buttonProps), label),
         ' ',
         removeBtn)) : (React.createElement(Button, Object.assign({ bem: "TagPill" }, buttonProps, { modifier: modifiers }),

package/esm/TextBlock.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 export const TextBlock = (props) => {
     const { children, align, labelled, wide, small, startSeen } = props;
     const rightAligned = align === 'right' || labelled;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: getBemClass('TextBlock', [
+    return (React.createElement("div", { className: modifiedClass('TextBlock', [
             labelled && 'labelled',
             rightAligned && 'align--right',
             wide && !rightAligned && 'wide',

package/esm/TextInput.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import React, { useEffect, useRef, useState } from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import FormField from './FormField.js';
 export const TextInput = (props) => {
     var _a;
@@ -27,6 +27,6 @@ export const TextInput = (props) => {
             setHasValue(true);
         }
     }, []);
-    return (React.createElement(FormField, { className: getBemClass('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.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (React.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
+    return (React.createElement(FormField, { className: 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.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (React.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
 };
 export default TextInput;

package/esm/Tooltip.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { arrow as arrowPlugin, autoUpdate, flip, offset, shift, useFloating, } from '@floating-ui/react';
 import { useCallbackOnEsc, useLaggedState } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 const getSide = (placement) => placement.split('-')[0];
 export const Tooltip = (props) => {
     const { text, label, iconOnly } = props;
@@ -50,7 +50,7 @@ export const Tooltip = (props) => {
                 '--tooltip-arrow-pos-x': `${arrowX}px`,
                 '--tooltip-arrow-pos-y': `${arrowY}px`,
             } },
-        React.createElement("summary", { className: getBemClass('Tooltip__trigger', iconOnly && 'icononly'), ref: reference }, label),
+        React.createElement("summary", { className: modifiedClass('Tooltip__trigger', iconOnly && 'icononly'), ref: reference }, label),
         React.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: floating },
             x !== null && (React.createElement("div", { "data-floating-ui-hack-plz-ignore": "", style: { position: 'absolute', display: 'none' }, ref: arrowRef })),
             text)));

package/esm/VSpacer.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 const sizes = {
     none: 'none',
     small: 'small',
@@ -31,7 +31,7 @@ export const VSpacer = (props) => {
             bottomVal = undefined;
         }
     }
-    const className = getBemClass('VSpacer', [
+    const className = modifiedClass('VSpacer', [
         sizeVal,
         topVal && 'top--' + topVal,
         bottomVal && 'bottom--' + bottomVal,

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

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

package/esm/WizardStepper.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const WizardStepper = (props) => {
     const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
-    return (React.createElement("div", { className: getBemClass('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
+    return (React.createElement("div", { className: modifiedClass('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
         const { clickable, done, neutral } = step;
         const label = step.label || '…';
-        const stepClass = getBemClass('WizardStepper__step', [
+        const stepClass = modifiedClass('WizardStepper__step', [
             (done || (done == null && i < activeStep)) && 'done',
             neutral && 'neutral',
         ]);

package/esm/_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/esm/_abstract/_AbstractCarousel.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState, } from 'react';
 import A from '@hugsmidjan/qj/A';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import debounce from '@hugsmidjan/qj/debounce';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
 import throttle from '@hugsmidjan/qj/throttle';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { notNully } from '@reykjavik/hanna-utils';
 import CarouselStepper from '../CarouselStepper.js';
 import { useIsBrowserSide } from '../utils.js';
@@ -92,7 +92,7 @@ export const AbstractCarousel = (props) => {
         items.map((item, i) => (
         // @ts-expect-error  (Can't be arsed...)
         React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
-    return (React.createElement("div", { className: getBemClass(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
+    return (React.createElement("div", { className: modifiedClass(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
         title && React.createElement("h2", { className: bem + '__title' }, title),
         isBrowser ? (React.createElement("div", { className: bem + '__itemlist-wrapper' },
             itemList,

package/esm/_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/esm/_abstract/_Block.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from '../utils/seenEffect.js';
 import { Button } from './_Button.js';
 import { Image } from './_Image.js';
@@ -7,7 +7,7 @@ export const Block = (props) => {
     const { image, modifier, bem, content, startSeen } = props;
     const [ref] = useSeenEffect(startSeen);
     const contentItems = Array.isArray(content) ? content : [content];
-    return (React.createElement("div", { className: getBemClass(bem, modifier), ref: ref },
+    return (React.createElement("div", { className: modifiedClass(bem, modifier), ref: ref },
         contentItems.map(({ title, summary, buttons = [] }, i) => {
             const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
             return (React.createElement("div", { key: i, className: `${bem}__content` },

package/esm/_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/esm/_abstract/_Button.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Link } from './_Link.js';
 // ---------------------------------------------------------------------------
 const sizes = {
@@ -25,7 +25,7 @@ const icons = {
 export const Button = (props) => {
     const { bem, small, size = 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
-        getBemClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
+        modifiedClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
     if (buttonProps.href != null) {
         return (React.createElement(Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));

package/esm/_abstract/_Image.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useGetSVGtext } from '../utils/useGetSVGtext.js';
 // eslint-disable-next-line complexity
 export const Image = (props) => {
@@ -7,9 +7,9 @@ export 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 = useGetSVGtext(inline ? imageSrc : undefined);
+    const inlineSvg = useGetSVGtext(inline ? imageSrc : undefined, altText);
     if (!imageSrc) {
-        return placeholder ? (React.createElement("span", { className: className && getBemClass(className, 'missing') }, placeholder !== true && placeholder())) : null;
+        return placeholder ? (React.createElement("span", { className: className && modifiedClass(className, 'missing') }, placeholder !== true && placeholder())) : null;
     }
     if (inline && inlineSvg) {
         const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';

package/esm/_abstract/_TogglerGroup.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useDomid } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useMixedControlState } from '../utils.js';
 export const TogglerGroup = (props) => {
     const { 
@@ -14,7 +14,7 @@ export const TogglerGroup = (props) => {
             ? _options.map((option) => ({ value: option }))
             : _options;
     }, [props.options]);
-    return (React.createElement("ul", { className: getBemClass(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.createElement("ul", { className: 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/esm/_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/esm/_abstract/_TogglerGroupField.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import FormField from '../FormField.js';
 import { TogglerGroup, } from './_TogglerGroup.js';
 export const TogglerGroupField = (props) => {
@@ -11,7 +11,7 @@ export const TogglerGroupField = (props) => {
         : typeof defaultValue === 'string'
             ? [defaultValue]
             : defaultValue, [defaultValue]);
-    return (React.createElement(FormField, { className: getBemClass(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.createElement(FormField, { className: 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.createElement(TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { disabled: disabled, value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
         } }));
 };

package/esm/_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';