@reykjavik/hanna-react 0.10.99 → 0.10.101

package/esm/Attention.js

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

package/esm/BasicTable.d.ts

@@ -1,6 +1,7 @@
 import { TableProps } from '@hugsmidjan/react/Table';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { SeenProp } from './utils/seenEffect.js';
+import { MissingWrapperElmProps } from './utils.js';
 export type BasicTableProps = {
     compact?: boolean;
     type?: 'text' | 'number';
@@ -9,6 +10,6 @@ export type BasicTableProps = {
     fullWidth?: boolean;
 }, {
     align?: 'right';
-}> & SeenProp & Omit<TableProps, 'className' | 'children'>;
+}> & MissingWrapperElmProps & SeenProp & Omit<TableProps, 'className' | 'children'>;
 export declare const BasicTable: (props: BasicTableProps) => JSX.Element;
 export default BasicTable;

package/esm/BgBox.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { EffectProp, SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type BgBoxProps = {
     className?: string;
     children: ReactNode;
-} & SeenProp & EffectProp;
+} & WrapperElmProps & SeenProp & EffectProp;
 export declare const BgBox: (props: BgBoxProps) => JSX.Element;
 export default BgBox;

package/esm/BgBox.js

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

package/esm/Bling.d.ts

@@ -1,4 +1,5 @@
 import { BlingType } from '@reykjavik/hanna-utils/assets';
+import { WrapperElmProps } from './utils.js';
 declare const colors: {
     tertiary: boolean;
     secondary: boolean;
@@ -76,6 +77,6 @@ export type BlingProps = {
     type?: undefined;
     /** Custom SVG URL to load (use sparingly) */
     blingUrl: string;
-});
+}) & WrapperElmProps<null, 'data-bling-type' | 'data-bling-image'>;
 export declare const Bling: (props: BlingProps) => JSX.Element;
 export default Bling;

package/esm/Bling.js

@@ -30,15 +30,17 @@ const parentOffset = {
     bottom: true,
 };
 export const Bling = (props) => {
-    const { align, vertical, color, overlay, type, blingUrl, parent, className } = props;
+    const { align, vertical, color, overlay, type, blingUrl, parent, className, wrapperProps, } = props;
     const imageUrl = type ? getBlingUrl(type) : blingUrl;
     const inlineSvg = useGetSVGtext(imageUrl);
-    return (React.createElement("div", { className: modifiedClass('Bling', [
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Bling', [
             'align--' + (align && align in aligns ? align : 'left'),
             vertical && vertical in valigns && 'vertical--' + vertical,
             color && color in colors && 'color--' + color,
             parent && parent in parentOffset && 'parent--' + parent,
             overlay && 'overlay',
-        ], className), "data-bling-type": type, "data-bling-image": !type ? blingUrl : undefined, dangerouslySetInnerHTML: inlineSvg && { __html: inlineSvg.code } }));
+        ], 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className), "data-bling-type": type, "data-bling-image": !type ? blingUrl : undefined, dangerouslySetInnerHTML: inlineSvg && { __html: inlineSvg.code } })));
 };
 export default Bling;

package/esm/BlockBreak.js

@@ -2,5 +2,6 @@ import React from 'react';
 /*
   TODO: Add story
 */
+// NOTE: This component is too low-level to justify `wrapperProps`
 export const BlockBreak = () => React.createElement("div", { className: "BlockBreak" });
 export default BlockBreak;

package/esm/BreadCrumbs.d.ts

@@ -1,4 +1,5 @@
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { WrapperElmProps } from './utils.js';
 export type BreadCrumb = {
     href?: string;
     label: string;
@@ -11,6 +12,6 @@ export type BreadCrumbsProps = {
     title?: string;
     lang?: string;
     trail: BreadCrumbTrail;
-};
+} & WrapperElmProps<null, 'aria-label'>;
 export declare const BreadCrumbs: (props: BreadCrumbsProps) => JSX.Element | null;
 export default BreadCrumbs;

package/esm/BreadCrumbs.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Link } from './_abstract/_Link.js';
 export const defaultBreadCrumbsTexts = {
@@ -11,14 +12,14 @@ const BreadCrumbs__item = (props) => {
     return link.href != null ? (React.createElement(Link, { className: "BreadCrumbs__item", href: link.href, "aria-current": current || undefined }, link.label)) : (React.createElement("span", { className: "BreadCrumbs__item", "aria-current": current || undefined }, link.label));
 };
 export const BreadCrumbs = (props) => {
-    const { trail, title, lang } = props;
+    const { trail, title, lang, wrapperProps } = props;
     const texts = getTexts({ texts: title ? { title } : undefined, lang }, defaultBreadCrumbsTexts);
     if (trail.length === 0) {
         return null;
     }
     const ancestors = trail.slice(0, -1);
     const current = trail[trail.length - 1];
-    return (React.createElement("nav", { className: "BreadCrumbs", "aria-label": texts.title },
+    return (React.createElement("nav", Object.assign({}, wrapperProps, { className: modifiedClass('BreadCrumbs', null, (wrapperProps || {}).className), "aria-label": texts.title }),
         React.createElement("span", { className: "BreadCrumbs__title" },
             texts.title,
             ":"),

package/esm/ButtonBack.js

@@ -1,4 +1,6 @@
 import React from 'react';
 import { Button } from './_abstract/_Button.js';
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 export const ButtonBack = (props) => (React.createElement(Button, Object.assign({ bem: "ButtonBack" }, props)));
 export default ButtonBack;

package/esm/ButtonBar.d.ts

@@ -1,17 +1,18 @@
 import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
 export type ButtonBarProps = {
     align?: 'right';
     children: ReactNode;
-};
+} & WrapperElmProps;
 export declare const ButtonBar: {
     (props: ButtonBarProps): JSX.Element;
     /** A Splitter token to use directly inside <ButtonBar/> wrappers */
-    Split(): JSX.Element;
+    Split({ wrapperProps }: WrapperElmProps): JSX.Element;
 };
 /**
  * @deprecated Prefer using `ButtonBar.Split` instead.
  *
  * (This export token is only to aid discovery.)
  */
-export declare const ButtonBar__split: () => JSX.Element;
+export declare const ButtonBar__split: ({ wrapperProps }: WrapperElmProps) => JSX.Element;
 export default ButtonBar;

package/esm/ButtonBar.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const ButtonBar = (props) => {
-    const { align, children } = props;
-    return (React.createElement("div", { className: modifiedClass('ButtonBar', align === 'right' && 'align--right') }, children));
+    const { align, children, wrapperProps } = props;
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ButtonBar', align === 'right' && 'align--right', (wrapperProps || {}).className) }), children));
 };
 /** A Splitter token to use directly inside <ButtonBar/> wrappers */
-ButtonBar.Split = () => React.createElement("span", { className: "ButtonBar__split" });
+ButtonBar.Split = ({ wrapperProps }) => (React.createElement("span", Object.assign({}, wrapperProps, { className: modifiedClass('ButtonBar__split', null, (wrapperProps || {}).className) })));
 /**
  * @deprecated Prefer using `ButtonBar.Split` instead.
  *

package/esm/ButtonPrimary.js

@@ -1,4 +1,6 @@
 import React from 'react';
 import { Button } from './_abstract/_Button.js';
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 export const ButtonPrimary = (props) => (React.createElement(Button, Object.assign({ bem: "ButtonPrimary" }, props)));
 export default ButtonPrimary;

package/esm/ButtonSecondary.js

@@ -1,4 +1,6 @@
 import React from 'react';
 import { Button } from './_abstract/_Button.js';
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 export const ButtonSecondary = (props) => React.createElement(Button, Object.assign({ bem: "ButtonSecondary" }, props));
 export default ButtonSecondary;

package/esm/ButtonTertiary.js

@@ -8,6 +8,8 @@ const icons = {
     none: 'none',
     'go-back': 'go-back',
 };
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 export const ButtonTertiary = (props) => {
     const { size = 'normal', icon = 'none' } = props;
     return React.createElement(Button, Object.assign({ bem: "ButtonTertiary" }, props, { size: sizes[size], icon: icons[icon] }));

package/esm/CarouselStepper.d.ts

@@ -1,4 +1,5 @@
 import { Props } from '@hugsmidjan/react/CarouselStepper';
-type CarouselStepperProps = Omit<Props, 'bem' | 'modifier'>;
+import { MissingWrapperElmProps } from './utils.js';
+type CarouselStepperProps = Omit<Props, 'bem' | 'modifier'> & MissingWrapperElmProps;
 export declare const CarouselStepper: (props: CarouselStepperProps) => JSX.Element;
 export default CarouselStepper;

package/esm/CenterColumn.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { EffectProp, SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type CenterColumnProps = {
     children: ReactNode;
-} & SeenProp & EffectProp;
+} & SeenProp & WrapperElmProps & EffectProp;
 export declare const CenterColumn: (props: CenterColumnProps) => JSX.Element;
 export default CenterColumn;

package/esm/CenterColumn.js

@@ -1,7 +1,9 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import SeenEffect from './SeenEffect.js';
 export const CenterColumn = (props) => {
-    const { children, startSeen, effectType } = props;
-    return startSeen == null ? (React.createElement("div", { className: "CenterColumn" }, children)) : (React.createElement(SeenEffect, { className: "CenterColumn", startSeen: startSeen, effectType: effectType }, children));
+    const { children, startSeen, effectType, wrapperProps } = props;
+    const className = modifiedClass('CenterColumn', null, (wrapperProps || {}).className);
+    return startSeen == null ? (React.createElement("div", Object.assign({}, wrapperProps, { className: className }), children)) : (React.createElement(SeenEffect, Object.assign({}, wrapperProps, { className: className, startSeen: startSeen, effectType: effectType }), children));
 };
 export default CenterColumn;

package/esm/CheckboxButton.d.ts

@@ -1,4 +1,6 @@
 import { TogglerInputProps } from './_abstract/_TogglerInput.js';
-export type CheckboxProps = TogglerInputProps;
-export declare const CheckboxButton: (props: CheckboxProps) => JSX.Element;
+/** @deprecated Use `CheckboxButtonProps` instead  (Will be removed in v0.11) */
+export type CheckboxProps = CheckboxButtonProps;
+export type CheckboxButtonProps = TogglerInputProps;
+export declare const CheckboxButton: (props: CheckboxButtonProps) => JSX.Element;
 export default CheckboxButton;

package/esm/CheckboxButtonsGroup.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { TogglerGroupField, } from './_abstract/_TogglerGroupField.js';
 import CheckboxButton from './CheckboxButton.js';
 export const CheckboxButtonsGroup = (props) => {
-    if (props.layout) {
+    if (props.layout /* eslint-disable-line deprecation/deprecation */) {
         console.warn('`CheckboxButtonsGroupProps.layout` is deprecated.');
     }
-    if (props.columns) {
+    if (props.columns /* eslint-disable-line deprecation/deprecation */) {
         console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
     }
     return (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton })));

package/esm/CityBlock.d.ts

@@ -4,6 +4,7 @@ import { BlockItem } from './_abstract/_Block.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { SeenProp } from './utils/seenEffect.js';
 import { Alignment } from './constants.js';
+import { WrapperElmProps } from './utils.js';
 declare const types: {
     largebox: boolean;
     largeimage: boolean;
@@ -16,6 +17,6 @@ export type CityBlockProps = {
     illustration: Illustration;
 }, {
     image: ImageProps;
-}> & SeenProp;
+}> & WrapperElmProps & SeenProp;
 export declare const CityBlock: (props: CityBlockProps) => JSX.Element;
 export default CityBlock;

package/esm/CityBlock.js

@@ -13,6 +13,6 @@ export const CityBlock = (props) => {
     const imageProps = props.illustration != null
         ? { src: getIllustrationUrl(props.illustration) }
         : props.image;
-    return (React.createElement(Block, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, startSeen: props.startSeen }));
+    return (React.createElement(Block, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, wrapperProps: props.wrapperProps, startSeen: props.startSeen }));
 };
 export default CityBlock;

package/esm/ContactBubble.d.ts

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

package/esm/ContactBubble.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
 import { useDomid } from '@hugsmidjan/react/hooks';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Link } from './_abstract/_Link.js';
 import { breakOnNL } from './_abstract/breakOnNL.js';
@@ -32,14 +32,15 @@ export const ensureIcon = (maybeIcon) => maybeIcon && icons[maybeIcon]
     ? maybeIcon
     : undefined;
 export const ContactBubble = (props) => {
-    const { title, links, onToggle, alwaysShow } = props;
+    const { title, links, onToggle, alwaysShow, wrapperProps = {} } = props;
     const txt = getTexts(props, defaultTexts);
     const useLocalState = props.open == null;
     const [localOpen, setLocalOpen] = useState(false);
     const open = useLocalState ? localOpen : props.open;
     const isBrowser = useIsBrowserSide(props.ssr);
     const domid = useDomid();
-    const wrapperRef = useRef(null);
+    const _wrapperRef = useRef(null);
+    const wrapperRef = wrapperProps.ref || _wrapperRef;
     const { openBubble, closeBubble } = useMemo(() => ({
         openBubble: () => {
             useLocalState && setLocalOpen(true);
@@ -116,7 +117,7 @@ export const ContactBubble = (props) => {
     if (links.length === 0) {
         return null;
     }
-    const menu = (React.createElement("div", { className: "ContactBubble", id: isBrowser && domid, hidden: isBrowser && !open, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser },
+    const menu = (React.createElement("div", Object.assign({}, props.wrapperProps, { className: modifiedClass('ContactBubble', null, wrapperProps.className), id: isBrowser && domid, hidden: isBrowser && !open, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser }),
         React.createElement("h2", { className: "ContactBubble__title" }, title || txt.openBtn),
         React.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;

package/esm/ContentArticle.d.ts

@@ -3,6 +3,7 @@ import { SeenProp } from './utils/seenEffect.js';
 import { ArticleMetaProps } from './ArticleMeta.js';
 import { ContentImageProps } from './ContentImage.js';
 import { RelatedLinksProps } from './RelatedLinks.js';
+import { WrapperElmProps } from './utils.js';
 export type ContentArticleProps = {
     /** Date, author, etc. */
     meta?: ArticleMetaProps['items'];
@@ -11,6 +12,6 @@ export type ContentArticleProps = {
     topImage?: ContentImageProps;
     body: ReactNode;
     relatedLinks?: RelatedLinksProps;
-} & SeenProp;
+} & SeenProp & WrapperElmProps;
 export declare const ContentArticle: (props: ContentArticleProps) => JSX.Element;
 export default ContentArticle;

package/esm/ContentArticle.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 import ArticleMeta from './ArticleMeta.js';
 import ContentImage from './ContentImage.js';
@@ -7,10 +8,10 @@ import RelatedLinks from './RelatedLinks.js';
 import TextBlock from './TextBlock.js';
 import VSpacer from './VSpacer.js';
 export const ContentArticle = (props) => {
-    const { relatedLinks } = props;
+    const { relatedLinks, wrapperProps } = props;
     const [ref] = useSeenEffect(props.startSeen);
     const headingElm = (React.createElement(Heading, { forceH1: props.headlineTag === 'h1' }, props.headline));
-    return (React.createElement("div", { className: "ContentArticle", ref: ref },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ContentArticle', null, (wrapperProps || {}).className), ref: ref }),
         props.meta ? (React.createElement("div", { className: "ContentArticle__header" },
             headingElm,
             React.createElement(ArticleMeta, { items: props.meta }))) : (headingElm),

package/esm/ContentImage.d.ts

@@ -1,8 +1,9 @@
 import { ImageProps } from './_abstract/_Image.js';
+import { WrapperElmProps } from './utils.js';
 export type ContentImageProps = {
     image?: ImageProps;
     caption?: string | JSX.Element;
     credit?: string | JSX.Element;
-};
+} & WrapperElmProps;
 export declare const ContentImage: (props: ContentImageProps) => JSX.Element;
 export default ContentImage;

package/esm/ContentImage.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Image } from './_abstract/_Image.js';
 export const ContentImage = (props) => {
-    const { image, caption, credit } = props;
-    return (React.createElement("figure", { className: "ContentImage" },
+    const { image, caption, credit, wrapperProps } = props;
+    return (React.createElement("figure", Object.assign({}, wrapperProps, { className: modifiedClass('ContentImage', null, (wrapperProps || {}).className) }),
         (caption || credit) && (React.createElement("figcaption", { className: "ContentImage__caption" },
             caption && React.createElement("span", { className: "ContentImage__text" },
                 " ",
@@ -13,6 +14,6 @@ export const ContentImage = (props) => {
                 " ",
                 credit,
                 " "))),
-        React.createElement(Image, Object.assign({ className: "ContentImage__image" }, image))));
+        React.createElement(Image, Object.assign({ bem: "ContentImage__image" }, image))));
 };
 export default ContentImage;

package/esm/Datepicker.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import { useDomid } from '@hugsmidjan/react/hooks';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 import is from 'date-fns/locale/is/index.js';
 import pl from 'date-fns/locale/pl/index.js';
 import { ReactDatePicker, registerLocale, } from './_mixed_export_resolution_/ReactDatepicker.js'; // Docs: https://reactdatepicker.com/
-import { FormField } from './FormField.js';
+import { FormField, groupFormFieldWrapperProps, } from './FormField.js';
 import { useMixedControlState } from './utils.js';
 registerLocale('is', is);
 registerLocale('pl', pl);
@@ -58,18 +57,19 @@ const i18n = {
  * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
  */
 export const Datepicker = (props) => {
-    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode = 'is', dateFormat = 'd.M.yyyy', name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, isoMode, } = props;
-    const [value, setValue] = useMixedControlState.raw(props.value || props.initialDate, props.defaultValue, 'value');
+    const { placeholder, localeCode = 'is', dateFormat = 'd.M.yyyy', name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, fieldWrapperProps, } = groupFormFieldWrapperProps(props);
+    const [value, setValue] = useMixedControlState.raw(props.value || props.initialDate, // eslint-disable-line deprecation/deprecation
+    props.defaultValue, 'value');
     /*
       TODO: Revert to this simpler pattern once we hit v0.11
       and `props.initialDate` is removed:
     */
     // const [value, setValue] = useMixedControlState(props, 'value');
-    const domid = useDomid(id);
+    const domid = useDomid(props.id);
     const txts = i18n[localeCode] || {};
     const filled = !!value;
     const empty = !filled && !placeholder;
-    return (React.createElement(FormField, { className: modifiedClass('Datepicker', [], className), ssr: ssr, label: label, small: small, assistText: assistText, hideLabel: hideLabel, invalid: invalid, required: required, reqText: reqText, disabled: disabled, readOnly: readOnly, filled: filled, empty: empty, errorMessage: errorMessage, renderInput: (className, inputProps, addFocusProps) => {
+    return (React.createElement(FormField, Object.assign({ extraClassName: "Datepicker", filled: filled, empty: empty }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => {
             return (React.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
                     ((elm) => {
                         inputRef.current =
@@ -99,6 +99,6 @@ export const Datepicker = (props) => {
                     // TODO: Implement this
                     // selectsRange
                     minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
-        } }));
+        } })));
 };
 export default Datepicker;

package/esm/ExtraLinks.d.ts

@@ -1,5 +1,6 @@
 import { CardListProps, TextCardProps } from './_abstract/_CardList.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type RelatedLink = {
     href: string;
     label: string;
@@ -13,6 +14,6 @@ type RelatedProps = {
 export type ExtraLinksCardProps = Omit<TextCardProps, 'meta'>;
 export type ExtraLinksProps = CardListProps<ExtraLinksCardProps> & RelatedProps & {
     className?: string;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
 export default ExtraLinks;

package/esm/ExtraLinks.js

@@ -13,10 +13,12 @@ const ExtraLinks__related = (props) => {
                 React.createElement(Link, { className: modifiedClass('ExtraLinks__related__link', type), href: href, target: blank ? '_blank' : '', rel: blank ? 'noreferrer noopener' : '' }, label)))))));
 };
 export const ExtraLinks = (props) => {
-    const { relatedTitle, relatedLinks, className, startSeen } = props, cardListProps = __rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen"]);
+    const { relatedTitle, relatedLinks, className, startSeen, wrapperProps } = props, cardListProps = __rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen", "wrapperProps"]);
     const hasRelated = !!(relatedLinks && relatedLinks.length);
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: modifiedClass('ExtraLinks', hasRelated && 'related', className), ref: ref },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ExtraLinks', hasRelated && 'related', 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className), ref: ref }),
         React.createElement("div", { className: "ExtraLinks__main" },
             React.createElement(CardList, Object.assign({}, cardListProps, { bemPrefix: "ExtraLinks" }))),
         hasRelated && (React.createElement(ExtraLinks__related, { relatedTitle: relatedTitle, relatedLinks: relatedLinks }))));

package/esm/FeatureList.d.ts

@@ -1,5 +1,6 @@
 import { Efnistakn } from '@reykjavik/hanna-utils/assets';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type FeatureListProps = {
     title: string;
     features: Array<{
@@ -7,6 +8,6 @@ export type FeatureListProps = {
         iconUrl?: string;
         name: string;
     }>;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const FeatureList: (props: FeatureListProps) => JSX.Element;
 export default FeatureList;

package/esm/FeatureList.js

@@ -1,13 +1,14 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 import Bling from './Bling.js';
 export const FeatureList = (props) => {
-    const { title, features, startSeen } = props;
+    const { title, features, startSeen, wrapperProps } = props;
     const [ref] = useSeenEffect(startSeen);
     const _features = features.length ? features : [{ name: '...' }];
     return (React.createElement(React.Fragment, null,
         React.createElement(Bling, { type: "snake-large", align: "left", vertical: "down-ish" }),
-        React.createElement("div", { className: "FeatureList", ref: ref },
+        React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('FeatureList', null, (wrapperProps || {}).className), ref: ref }),
             React.createElement("h2", { className: "FeatureList__title" }, title),
             React.createElement("ul", { className: "FeatureList__list" }, _features.map(({ name, icon, iconUrl }, i) => (React.createElement("li", { key: i, className: "FeatureList__feature", style: iconUrl
                     ? { '--efnistakn': `url("${iconUrl}")` }

package/esm/FieldGroup.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
 export type FieldGroupProps = {
     legend: string;
     disabled?: boolean;
     small?: boolean;
     className?: string;
     children: ReactNode;
-};
+} & WrapperElmProps<'fieldset'>;
 export declare const FieldGroup: (props: FieldGroupProps) => JSX.Element;
 export default FieldGroup;

package/esm/FieldGroup.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const FieldGroup = (props) => {
-    const { legend, children, className, disabled, small } = props;
-    return (React.createElement("fieldset", { className: modifiedClass('FieldGroup', small && 'small', className), disabled: disabled },
+    const { legend, children, className, disabled, small, wrapperProps } = props;
+    return (React.createElement("fieldset", Object.assign({}, wrapperProps, { className: modifiedClass('FieldGroup', small && 'small', 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className), disabled: disabled }),
         React.createElement("legend", { className: "FieldGroup__legend" }, legend),
         children));
 };

package/esm/FileInput.d.ts

@@ -1,6 +1,6 @@
 import { FileListProps } from './FileInput/_FileInputFileList.js';
 import { FormFieldWrappingProps } from './FormField.js';
-export type FileInputProps = {
+export type FileInputProps = FormFieldWrappingProps & {
     /**
      * Flags if the input should accept multiple, or just a single file at a time.
      *
@@ -43,6 +43,6 @@ export type FileInputProps = {
         accept?: string;
         multiple?: boolean;
     };
-} & FormFieldWrappingProps;
+};
 export declare const FileInput: (props: FileInputProps) => JSX.Element;
 export default FileInput;

package/esm/FileInput.js

@@ -6,7 +6,7 @@ import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
 import { useDropzone } from './_mixed_export_resolution_/ReactDropzone.js';
 import { addPreview, formatBytes, getFileListUpdate, releasePreview, } from './FileInput/_FileInput.utils.js';
 import { DefaultFileList } from './FileInput/_FileInputFileList.js';
-import FormField from './FormField.js';
+import FormField, { groupFormFieldWrapperProps, } from './FormField.js';
 const defaultRemoveFileText = {
     is: 'Fjarlægja',
     en: 'Remove',
@@ -28,8 +28,13 @@ const arrayToFileList = (arr) => {
     return fileList.files;
 };
 export const FileInput = (props) => {
-    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, multiple = dropzoneProps.multiple, accept, dropzoneText, lang = DEFAULT_LANG, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[DEFAULT_LANG], assistText, disabled, invalid, errorMessage, required, reqText, FileList = DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = __rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "multiple", "accept", "dropzoneText", "lang", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value"]);
-    const domid = useDomid(id);
+    var _a, _b, _c;
+    const lang = props.lang || DEFAULT_LANG;
+    const _d = groupFormFieldWrapperProps(props), { dropzoneProps, // eslint-disable-line deprecation/deprecation
+    multiple = (_b = (_a = props.dropzoneProps) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : true, // eslint-disable-line deprecation/deprecation
+    accept = (_c = props.dropzoneProps) === null || _c === void 0 ? void 0 : _c.accept, // eslint-disable-line deprecation/deprecation
+    dropzoneText, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[DEFAULT_LANG], FileList = DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = __rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
+    const domid = useDomid(props.id);
     const fileInputWrapper = useRef(null);
     const fileInput = useRef(null);
     const files = value;
@@ -101,7 +106,7 @@ export const FileInput = (props) => {
         }
         onFilesUpdated(fileList, diff);
     };
-    return (React.createElement(FormField, { className: modifiedClass('FileInput', [multiple && 'multi'], className), label: label, id: domid + '-fake', LabelTag: "h4", assistText: assistText, hideLabel: hideLabel, disabled: disabled, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, renderInput: (className, inputProps /* , addFocusProps */) => {
+    return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: domid + '-fake', LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
             return (React.createElement("div", { className: className.control, ref: fileInputWrapper },
                 // Explicitly skip rendering of input element if no
                 // name prop is provided. This is implicitly what the
@@ -125,6 +130,6 @@ export const FileInput = (props) => {
                     removeFile,
                     formatBytes,
                 })))));
-        } }));
+        } })));
 };
 export default FileInput;