@reykjavik/hanna-react 0.10.136 → 0.10.138

package/SubHeading.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubHeading = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const SubHeading = (props) => {
     const { small, Tag = 'h2', children, align, wide, wrapperProps } = props;
-    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('SubHeading', [
+    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('SubHeading', [
             small && 'small',
             align === 'right' && `align--${align}`,
             !align && wide && 'wide',

package/Tabs.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const frag_1 = require("@hugsmidjan/qj/frag");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const utils_js_1 = require("./utils.js");
 const navKeyEffects = {
     ArrowUp: -1,
@@ -87,7 +87,7 @@ const Tabs = (props) => {
         listAriaControls,
         isBrowser,
     };
-    return (react_1.default.createElement("div", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('Tabs', vertical && 'vertical', wrapperProps.className), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser }),
+    return (react_1.default.createElement("div", Object.assign({}, props.wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('Tabs', vertical && 'vertical', wrapperProps.className), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser }),
         tabs.map((tabProps, index) => renderTab(tabProps, index, listProps)),
         subTabs && (react_1.default.createElement(exports.Tabs, Object.assign({}, subTabs, { role: 'role' in subTabs ? subTabs.role : role, activateOnFocus: (_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus, ssr: ssr, 
             // just to be sure

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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Button_js_1 = require("./_abstract/_Button.js");
 const colors = {
     normal: '',
@@ -25,10 +25,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, classUtils_1.modifiedClass)('TagPill', modifiers) }, buttonProps),
+    return isStatic ? (react_1.default.createElement("span", Object.assign({ className: (0, hanna_utils_1.modifiedClass)('TagPill', modifiers) }, buttonProps),
         label,
         " ",
-        removeBtn)) : onRemove ? (react_1.default.createElement("span", { className: (0, classUtils_1.modifiedClass)('TagPill', modifiers) },
+        removeBtn)) : onRemove ? (react_1.default.createElement("span", { className: (0, hanna_utils_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,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const TextBlock = (props) => {
     const { children, align, labelled, wide, small, wrapperProps } = props;
     const rightAligned = align === 'right' || labelled;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('TextBlock', [
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 const TextInput = (props) => {
     var _a;
@@ -30,7 +30,7 @@ const TextInput = (props) => {
         }
     }, [] // eslint-disable-line react-hooks/exhaustive-deps
     );
-    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, classUtils_1.modifiedClass)('TextInput', [multiline && 'multiline']), empty: empty, filled: filled }, fieldWrapperProps, { 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, Object.assign({ extraClassName: (0, hanna_utils_1.modifiedClass)('TextInput', [multiline && 'multiline']), empty: empty, filled: filled }, fieldWrapperProps, { 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

@@ -4,7 +4,7 @@ exports.Tooltip = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("@floating-ui/react");
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const useCallbackOnEsc_js_1 = require("./utils/useCallbackOnEsc.js");
 const useLaggedState_js_1 = require("./utils/useLaggedState.js");
 const getSide = (placement) => placement.split('-')[0];
@@ -22,7 +22,7 @@ const Tooltip = (props) => {
     (0, useCallbackOnEsc_js_1.useCallbackOnEsc)(() => {
         setIsOpen(false);
     });
-    return (react_1.default.createElement("details", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('Tooltip', getSide(placement), wrapperProps.className), open: isOpen, onMouseEnter: (e) => {
+    return (react_1.default.createElement("details", Object.assign({}, props.wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('Tooltip', getSide(placement), wrapperProps.className), open: isOpen, onMouseEnter: (e) => {
             var _a;
             setIsOpen(true, 100);
             (_a = wrapperProps.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
@@ -67,7 +67,7 @@ const Tooltip = (props) => {
         }, style: x == null
             ? wrapperProps.style
             : Object.assign(Object.assign({}, wrapperProps.style), { '--tooltip-content-pos-y': `${y}px`, '--tooltip-content-pos-x': `${x}px`, '--tooltip-arrow-pos-x': `${arrowX}px` }) }),
-        react_1.default.createElement("summary", { className: (0, classUtils_1.modifiedClass)('Tooltip__trigger', iconOnly && 'icononly'), ref: refs.setReference }, label),
+        react_1.default.createElement("summary", { className: (0, hanna_utils_1.modifiedClass)('Tooltip__trigger', iconOnly && 'icononly'), ref: refs.setReference }, label),
         react_1.default.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: refs.setFloating },
             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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const sizes = {
     none: 'none',
     small: 'small',
@@ -35,7 +35,7 @@ const VSpacer = (props) => {
             bottomVal = undefined;
         }
     }
-    const className = (0, classUtils_1.modifiedClass)('VSpacer', [sizeVal, topVal && `top--${topVal}`, bottomVal && `bottom--${bottomVal}`], (wrapperProps || {}).className);
+    const className = (0, hanna_utils_1.modifiedClass)('VSpacer', [sizeVal, topVal && `top--${topVal}`, bottomVal && `bottom--${bottomVal}`], (wrapperProps || {}).className);
     return isWrapper ? (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: className }), children)) : (react_1.default.createElement("hr", Object.assign({}, wrapperProps, { className: className })));
 };
 exports.VSpacer = VSpacer;

package/WizardLayout.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WizardLayout = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Layouts_js_1 = require("./_abstract/_Layouts.js");
 const useScrollbarWidthCSSVar_js_1 = require("./utils/useScrollbarWidthCSSVar.js");
 const utils_js_1 = require("./utils.js");
@@ -13,7 +13,7 @@ const WizardLayout = (props) => {
     // ssr,
     wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName, globalAlerts, wrapperProps, } = props;
     const isBrowser = (0, utils_js_1.useIsBrowserSide)( /* ssr */);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('WizardLayout', null, (wrapperProps || {}).className), "data-sprinkled": isBrowser, "data-color-theme": colorTheme }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('WizardLayout', null, (wrapperProps || {}).className), "data-sprinkled": isBrowser, "data-color-theme": colorTheme }),
         globalAlerts && (react_1.default.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
         react_1.default.createElement("div", { className: "WizardLayout__content" },
             react_1.default.createElement("div", { className: "WizardLayout__header", role: "banner" },

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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const WizardStepper = (props) => {
     const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick, wrapperProps, } = props;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('WizardStepper', activeStep === -1 && 'preview', (wrapperProps || {}).className) }), steps.map((step, i) => {
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('WizardStepper', activeStep === -1 && 'preview', (wrapperProps || {}).className) }), steps.map((step, i) => {
         const { clickable, done, neutral } = step;
         const label = step.label || '…';
-        const stepClass = (0, classUtils_1.modifiedClass)('WizardStepper__step', [
+        const stepClass = (0, hanna_utils_1.modifiedClass)('WizardStepper__step', [
             (done || (done == null && i < activeStep)) && 'done',
             neutral && 'neutral',
         ]);

package/_abstract/_AbstractCarousel.js

@@ -4,7 +4,6 @@ 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"));
@@ -115,7 +114,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", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, 
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(bem, modifier, 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).className), "data-sprinkled": isBrowser }),
         title && react_1.default.createElement("h2", { className: `${bem}__title` }, title),

package/_abstract/_AbstractModal.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractModal = exports.defaultAbstractModalTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const FocusTrap_js_1 = require("../FocusTrap.js");
 const utils_js_1 = require("../utils.js");
@@ -117,14 +117,14 @@ const AbstractModal = (props) => {
     const closeButtonLabel = txt.closeButtonLabel || txt.closeButton;
     const { onClick, className } = wrapperProps;
     return (react_1.default.createElement(PortalOrFragment, null,
-        react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(`${bem}wrapper`, [modifier, className]), hidden: !open, role: "dialog", onClick: closeOnCurtainClick && onClick
+        react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(`${bem}wrapper`, [modifier, className]), hidden: !open, role: "dialog", onClick: closeOnCurtainClick && onClick
                 ? (e) => {
                     closeOnCurtainClick(e);
                     onClick(e);
                 }
                 : closeOnCurtainClick || onClick, id: domid }),
             isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }),
-            react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier), ref: modalElmRef },
+            react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)(bem, modifier), ref: modalElmRef },
                 children,
                 isBrowser && !props.noCloseButton && (react_1.default.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
             isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, null))));

package/_abstract/_Block.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Block = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Button_js_1 = require("./_Button.js");
 const _Image_js_1 = require("./_Image.js");
 const Block = (props) => {
     const { image, modifier, bem, content, wrapperProps } = props;
     const contentItems = Array.isArray(content) ? content : [content];
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(bem, modifier, (wrapperProps || {}).className) }),
         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.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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Link_js_1 = require("./_Link.js");
 // ---------------------------------------------------------------------------
 const sizes = {
@@ -31,7 +31,7 @@ const Button = (props) => {
     const { bem, small, // eslint-disable-line deprecation/deprecation
     size = small ? 'small' : '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, classUtils_1.modifiedClass)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]], props.className);
+        (0, hanna_utils_1.modifiedClass)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]], props.className);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
     if (buttonProps.href != null) {
         return (react_1.default.createElement(_Link_js_1.Link, Object.assign({}, buttonProps, { className: className }, iconProp), label));

package/_abstract/_CardList.d.ts

@@ -1,14 +1,15 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { MouseEventHandler, ReactElement, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { WrapperElmProps } from '../utils.js';
 import { BemModifierProps } from '../utils/types.js';
 import { ImageProps } from './_Image.js';
 export type TextCardProps = {
     title: string;
-    href: string;
+    href?: string;
     meta?: string | JSX.Element;
     summary?: string | JSX.Element;
     target?: React.HTMLAttributeAnchorTarget;
+    onClick?: MouseEventHandler;
 };
 export type ImageCardProps = TextCardProps & {
     image?: ImageProps;

package/_abstract/_CardList.js

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardList = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Button_js_1 = require("./_Button.js");
 const _Image_js_1 = require("./_Image.js");
 const Card = (props) => {
-    const { bem, href, title, imgPlaceholder, image, meta, summary, target } = props;
+    const { bem, href, title, imgPlaceholder, image, meta, summary, target, onClick } = props;
     const cardClass = `${bem}__card`;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(_Button_js_1.Button, { bem: cardClass, href: href, target: target },
+        react_1.default.createElement(_Button_js_1.Button, { bem: cardClass, href: href, target: target, onClick: onClick },
             ' ',
             !!(image || imgPlaceholder) && (react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: `${bem}__image` }, image, { placeholder: imgPlaceholder }))),
             react_1.default.createElement("span", { className: `${cardClass}__title` }, title),
@@ -35,7 +35,7 @@ const CardList = (props) => {
             title && react_1.default.createElement(TitleTag, { className: `${bemPrefix}__title` }, title),
             summaryElement)) : (title && react_1.default.createElement(TitleTag, { className: `${bemPrefix}__title` }, title)),
         react_1.default.createElement("ul", Object.assign({}, wrapperProps, { className: props.standalone
-                ? (0, classUtils_1.modifiedClass)(bemPrefix, modifier, (wrapperProps || {}).className)
+                ? (0, hanna_utils_1.modifiedClass)(bemPrefix, modifier, (wrapperProps || {}).className)
                 : `${bemPrefix}__list`, style: fallbackImageStyle }), cards.map((card, i) => (react_1.default.createElement("li", { key: i, className: `${bemPrefix}__item` },
             react_1.default.createElement(Card
             /* Assert as `ImageCardProps` to silence the imgPlaceholder false-positive */

package/_abstract/_CarouselPaging.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const CarouselPaging = (props) => {
     const { bem = 'CarouselPaging', modifier, current, itemCount, setCurrent } = props;
     const { next, prev, unit = '' } = props.texts;
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier) },
+    return (react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)(bem, modifier) },
         react_1.default.createElement("button", { className: `${bem}__button ${bem}__button--next`, type: "button", disabled: current >= itemCount - 1, onClick: () => setCurrent(current + 1), "aria-controls": props['aria-controls'], "aria-label": `${next} ${unit}`, title: `${next} ${unit}` }, next),
         ' ',
         react_1.default.createElement("button", { className: `${bem}__button ${bem}__button--prev`, type: "button", disabled: current === 0, onClick: () => setCurrent(current - 1), "aria-controls": props['aria-controls'], "aria-label": `${prev} ${unit}`, title: `${prev} ${unit}` }, prev)));

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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const useGetSVGtext_js_1 = require("../utils/useGetSVGtext.js");
 // eslint-disable-next-line complexity
 const Image = (props) => {
@@ -12,9 +12,9 @@ const Image = (props) => {
     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, altText);
-    const extraClasses = (0, classUtils_1.classes)(className, wrapperProps.className) || undefined;
+    const extraClasses = (0, hanna_utils_1.classes)(className, wrapperProps.className) || undefined;
     const classNames = bem
-        ? (0, classUtils_1.modifiedClass)(bem, [modifier, !imageSrc && 'missing'], extraClasses)
+        ? (0, hanna_utils_1.modifiedClass)(bem, [modifier, !imageSrc && 'missing'], extraClasses)
         : extraClasses;
     if (!imageSrc) {
         return placeholder ? (react_1.default.createElement("span", Object.assign({}, props.wrapperProps, { className: classNames }), placeholder !== true && placeholder())) : null;

package/_abstract/_Quote.js

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports._Quote = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Link_js_1 = require("./_Link.js");
 const _Quote = (props) => {
     const { bem, children, by, byHref, wrapperProps } = props;
-    return (react_1.default.createElement("figure", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, null, (wrapperProps || {}).className) }),
+    return (react_1.default.createElement("figure", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(bem, null, (wrapperProps || {}).className) }),
         react_1.default.createElement("blockquote", { className: `${bem}__quote` }, children),
         by && (react_1.default.createElement("figcaption", { className: `${bem}__by` }, byHref ? (react_1.default.createElement(_Link_js_1.Link, { href: byHref }, by)) : typeof by === 'string' ? (react_1.default.createElement("span", null, by)) : (by)))));
 };

package/_abstract/_ScrollWrapper.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollWrapper = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const utils_js_1 = require("../utils.js");
 const useScrollEdgeDetect_js_1 = require("../utils/useScrollEdgeDetect.js");
 const scrollOptions = {
@@ -16,6 +16,6 @@ const ScrollWrapper = (props) => {
     const modifiers = isBrowser
         ? [modifier, 'at', scrollAt.start && 'at--start', scrollAt.end && 'at--end']
         : modifier;
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifiers, wrapperProps.className), ref: !innerWrap ? scrollerRef : undefined }), isBrowser && innerWrap ? (react_1.default.createElement("div", { className: `${bem}__scroller`, ref: scrollerRef }, children)) : (children)));
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(bem, modifiers, wrapperProps.className), ref: !innerWrap ? scrollerRef : undefined }), isBrowser && innerWrap ? (react_1.default.createElement("div", { className: `${bem}__scroller`, ref: scrollerRef }, children)) : (children)));
 };
 exports.ScrollWrapper = ScrollWrapper;

package/_abstract/_Table.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const TableCell = (props) => {
     const { data, meta = {}, rowIdx, rowScope } = props;
@@ -20,7 +19,7 @@ const TableCell = (props) => {
             ? 'Cell--text'
             : `Cell--text Cell--text--${text}`;
     const telClass = tel ? 'Cell--tel' : '';
-    return (react_1.default.createElement(Tag, { className: (0, classUtils_1.classes)(numberClass || telClass || textClass, className), colSpan: colSpan && colSpan > 1 ? colSpan : undefined, scope: rowScope ? 'row' : undefined }, typeof value === 'function' ? value(rowIdx) : value));
+    return (react_1.default.createElement(Tag, { className: (0, hanna_utils_1.classes)(numberClass || telClass || textClass, className), colSpan: colSpan && colSpan > 1 ? colSpan : undefined, scope: rowScope ? 'row' : undefined }, typeof value === 'function' ? value(rowIdx) : value));
 };
 const TableSection = ({ section, cols = [], Tag, getRowProps }) => section.length ? (react_1.default.createElement(Tag, null, section.map(({ key, cells }, rowIdx) => {
     let colIdx = 0;
@@ -47,7 +46,7 @@ exports.Table = (0, react_1.memo)((props) => {
     const thead = (0, react_1.useMemo)(() => normalizeTableSectData(props.thead), [props.thead]);
     const tfoot = (0, react_1.useMemo)(() => props.tfoot && normalizeTableSectData(props.tfoot), [props.tfoot]);
     const tbodies = (0, react_1.useMemo)(() => (props.tbodies || [props.tbody]).map(normalizeTableSectData).filter(hanna_utils_1.notNully), [props.tbody, props.tbodies]);
-    return (react_1.default.createElement("table", Object.assign({}, wrapperProps, { className: (0, classUtils_1.classes)(className, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className) }),
+    return (react_1.default.createElement("table", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.classes)(className, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className) }),
         caption && react_1.default.createElement("caption", null, caption),
         thead && (react_1.default.createElement(TableSection, { section: thead, cols: cols, Tag: "thead", getRowProps: getRowProps })),
         tfoot && (react_1.default.createElement(TableSection, { section: tfoot, cols: cols, Tag: "tfoot", getRowProps: getRowProps })),

package/_abstract/_TogglerGroup.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TogglerGroup = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const utils_js_1 = require("../utils.js");
 const useDomid_js_1 = require("../utils/useDomid.js");
 const TogglerGroup = (props) => {
@@ -18,7 +18,7 @@ const TogglerGroup = (props) => {
             ? _options.map((option) => ({ value: option }))
             : _options;
     }, [props.options]);
-    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) => {
+    return (react_1.default.createElement("ul", { className: (0, hanna_utils_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.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 classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const FormField_js_1 = tslib_1.__importStar(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, Object.assign({ extraClassName: (0, classUtils_1.modifiedClass)(bem, modifier), group: true }, fieldWrapperProps, { renderInput: (className, inputProps) => {
+    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, hanna_utils_1.modifiedClass)(bem, modifier), group: true }, fieldWrapperProps, { renderInput: (className, inputProps) => {
             return (react_1.default.createElement(_TogglerGroup_js_1.TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { disabled: props.disabled, value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
         } })));
 };

package/_abstract/_TogglerInput.js

@@ -3,7 +3,7 @@ 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 hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const useDomid_js_1 = require("../utils/useDomid.js");
 const defaultReqText = {
@@ -26,7 +26,7 @@ const TogglerInput = (props) => {
         " ",
         label,
         ' '));
-    return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, [modifier, hideLabel && 'nolabel'], 
+    return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(bem, [modifier, hideLabel && 'nolabel'], 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).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 }))),

package/esm/AccordionList.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { useDomid } from './utils/useDomid.js';
 import { useIsBrowserSide, useMixedControlState, } from './utils.js';
 const AccordionListItem = (props) => {

package/esm/ActionCards.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { CardList, } from './_abstract/_CardList.js';
 export const ActionCards = (props) => {
     const { wrapperProps } = props;

package/esm/Alert.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState, } from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Button } from './_abstract/_Button.js';
 import { isPreact } from './utils/env.js';

package/esm/ArticleMeta.js

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { Link } from './_abstract/_Link.js';
 export const ArticleMeta = (props) => {
     const { items, small, wrapperProps } = props;

package/esm/Attention.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 export const Attention = (props) => {
     const { small, children, wrapperProps } = props;
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Attention', small && 'small', (wrapperProps || {}).className) }), children));

package/esm/AutosuggestSearch.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useRef } from 'react';
 import Autosuggest from 'react-autosuggest';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import SearchInput from './SearchInput.js';
 import { useMixedControlState } from './utils.js';

package/esm/BasicTable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { ScrollWrapper } from './_abstract/_ScrollWrapper.js';
 import { Table } from './_abstract/_Table.js';
 const tableTypes = {

package/esm/BgBox.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 export const BgBox = (props) => {
     const { className, children, wrapperProps } = props;
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('BgBox', undefined, 

package/esm/Bling.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { getBlingUrl } from '@reykjavik/hanna-utils/assets';
 import { useGetSVGtext } from './utils/useGetSVGtext.js';
 const colors = {

package/esm/BreadCrumbs.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Link } from './_abstract/_Link.js';
 export const defaultBreadCrumbsTexts = {

package/esm/ButtonBar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 export const ButtonBar = (props) => {
     const { align, children, wrapperProps } = props;
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ButtonBar', align === 'right' && 'align--right', (wrapperProps || {}).className) }), children));

package/esm/CarouselStepper.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 const defaultTexts = {
     prefix: '',
 };

package/esm/CenterColumn.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import SeenEffect from './SeenEffect.js';
 export const CenterColumn = (props) => (React.createElement(SeenEffect, Object.assign({}, props.wrapperProps, props, { 
     // @ts-expect-error  (overriding `props.wrapperProps` exactly bcause it should NOT be forwarded)

package/esm/ContactBubble.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Link } from './_abstract/_Link.js';
 import { breakOnNL } from './_abstract/breakOnNL.js';

package/esm/ContentArticle.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import ArticleMeta from './ArticleMeta.js';
 import ContentImage from './ContentImage.js';
 import Heading from './Heading.js';

package/esm/ContentImage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { modifiedClass } from '@reykjavik/hanna-utils';
 import { Image } from './_abstract/_Image.js';
 export const ContentImage = (props) => {
     const { image, caption, credit, wrapperProps } = props;