@inera/ids-react 9.0.4 → 9.1.0

package/components/alert/alert.js

@@ -16,7 +16,7 @@ function IDSAlert({ collapsed = false, onCollapsedChange, onClose, children, cla
     const handleClose = () => {
         onClose?.();
     };
-    return (jsx(IDSAlertBase, { ...props, client: true, collapsed: isCollapsed, onToggleCollapse: handleToggleCollapse, onClose: handleClose, children: children }));
+    return (jsx(IDSAlertBase, { ...props, client: true, collapsed: isCollapsed, className: className, onToggleCollapse: handleToggleCollapse, onClose: handleClose, children: children }));
 }
 
 export { IDSAlert };

package/components/breadcrumbs/breadcrumbs.js

@@ -24,7 +24,7 @@ function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className,
             }
         });
     };
-    return (jsxs("nav", { ...props, className: clsx("ids-breadcrumbs", className), "aria-label": lead, children: [jsxs("ol", { className: "ids-breadcrumbs__desktop", children: [jsx("li", { className: "ids-breadcrumbs__lead", children: lead }), getLinks()] }), jsx("ol", { className: "ids-breadcrumbs__mobile", children: jsxs("li", { className: "ids-breadcrumbs__mobile-links", children: [jsx("span", { className: "ids-breadcrumbs__icon" }), getMobileLink()] }) })] }));
+    return (jsxs("nav", { ...props, className: clsx("ids-breadcrumbs", className), "aria-label": lead, children: [jsxs("ol", { className: "ids-breadcrumbs__desktop", children: [jsx("li", { className: "ids-breadcrumbs__lead", children: lead }), getLinks()] }), mobileLink && (jsx("ol", { className: "ids-breadcrumbs__mobile", children: jsxs("li", { className: "ids-breadcrumbs__mobile-links", children: [jsx("span", { className: "ids-breadcrumbs__icon" }), getMobileLink()] }) }))] }));
 }
 
 export { IDSBreadcrumbs };

package/components/card/card.d.ts

@@ -2,12 +2,12 @@ import React from "react";
 import "@inera/ids-design/components/card/card.css";
 interface IDSCardProps extends React.HTMLAttributes<HTMLDivElement> {
     borderTop?: boolean;
-    cardLink?: React.ReactElement | React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ReactNode;
     fill?: boolean;
     focusCard?: boolean;
     hideOnM?: boolean;
     hideOnS?: boolean;
     lean?: boolean;
+    interactive?: boolean;
 }
-export declare function IDSCard({ focusCard, fill, borderTop, lean, hideOnM, hideOnS, cardLink, children, className, ...props }: IDSCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCard({ focusCard, fill, borderTop, lean, hideOnM, hideOnS, interactive, children, className, ...props }: IDSCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/card/card.js

@@ -1,19 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/card/card.css';
 
-function IDSCard({ focusCard = false, fill = false, borderTop = false, lean = false, hideOnM = false, hideOnS = false, cardLink, children, className, ...props }) {
-    let enhancedCardLink = null;
-    if (isValidElement(cardLink)) {
-        enhancedCardLink = cloneElement(cardLink, {
-            className: clsx(cardLink.props.className, "ids-card--interactive-link")
-        });
-    }
-    else if (cardLink) {
-        const anchorProps = cardLink;
-        enhancedCardLink = jsx("a", { ...anchorProps, className: clsx(anchorProps.className, "ids-card--interactive-link") });
-    }
+function IDSCard({ focusCard = false, fill = false, borderTop = false, lean = false, hideOnM = false, hideOnS = false, interactive = false, children, className, ...props }) {
     return (jsxs("div", { ...props, className: clsx("ids-card", {
             "ids-card--fill": fill,
             "ids-card--border-top": !!borderTop && !focusCard,
@@ -21,8 +10,8 @@ function IDSCard({ focusCard = false, fill = false, borderTop = false, lean = fa
             "ids-card--hide-on-m": hideOnM,
             "ids-card--hide-on-s": hideOnS,
             "ids-card--lean": lean,
-            "ids-card--interactive": !!cardLink
-        }, className), children: [!!borderTop && !focusCard && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children }), enhancedCardLink] }));
+            "ids-card--interactive": !!interactive && !hideOnM && !hideOnS && !borderTop
+        }, className), children: [!!borderTop && !focusCard && !interactive && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children })] }));
 }
 
 export { IDSCard };

package/components/data-pagination/data-pagination.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/data-pagination/data-pagination.css";
 export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     from: number;
@@ -7,9 +7,9 @@ export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElem
     total: number | string;
     defaultValue?: string;
     light?: boolean;
-    firstPageButton?: ReactNode;
-    previousButton?: ReactNode;
-    nextButton?: ReactNode;
-    lastPageButton?: ReactNode;
+    firstPageButton?: React.ReactElement;
+    previousButton?: React.ReactElement;
+    nextButton?: React.ReactElement;
+    lastPageButton?: React.ReactElement;
 }
-export declare const IDSDataPagination: React.ForwardRefExoticComponent<IDSDataPaginationProps & React.RefAttributes<HTMLSelectElement>>;
+export declare const IDSDataPagination: React.ForwardRefExoticComponent<IDSDataPaginationProps & React.RefAttributes<HTMLDivElement>>;

package/components/data-pagination/data-pagination.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/data-pagination/data-pagination.css';
 
 const IDSDataPagination = forwardRef(({ from, to, of = "av", total, defaultValue = "", firstPageButton, previousButton, nextButton, lastPageButton, light = false, className, children, ...props }, ref) => {
     const summaryText = `${from} - ${to} ${of} ${total}`;
-    return (jsxs("div", { className: clsx("ids-data-pagination", { "ids-data-pagination--light": light }, className), ...props, children: [!!children && jsx("div", { className: "ids-data-pagination__select", children: children }), jsx("div", { className: "ids-data-pagination__summary", children: summaryText }), jsxs("div", { className: "ids-data-pagination__buttons", children: [firstPageButton && jsx("div", { className: "ids-data-pagination__first-page-button", children: firstPageButton }), previousButton && jsx("div", { className: "ids-data-pagination__prev-button", children: previousButton }), nextButton && jsx("div", { className: "ids-data-pagination__next-button", children: nextButton }), lastPageButton && jsx("div", { className: "ids-data-pagination__last-page-button", children: lastPageButton })] })] }));
+    return (jsxs("div", { className: clsx("ids-data-pagination", { "ids-data-pagination--light": light }, className), ...props, ref: ref, children: [!!children && jsx("div", { className: "ids-data-pagination__select", children: children }), jsx("div", { className: "ids-data-pagination__summary", children: summaryText }), jsxs("div", { className: "ids-data-pagination__buttons", children: [firstPageButton && jsx("div", { className: "ids-data-pagination__first-page-button", children: firstPageButton }), previousButton && jsx("div", { className: "ids-data-pagination__prev-button", children: previousButton }), nextButton && jsx("div", { className: "ids-data-pagination__next-button", children: nextButton }), lastPageButton && jsx("div", { className: "ids-data-pagination__last-page-button", children: lastPageButton })] })] }));
 });
 IDSDataPagination.displayName = "IDSDataPagination";
 

package/components/dialog/dialog-base.js

@@ -20,7 +20,7 @@ const IDSDialogBase = forwardRef(({ show = false, width, maxWidth, height, headl
                     "ids-dialog--hidden": !show,
                     "ids-focus-trap": !noFocusTrap,
                     "ids-dialog--dismissible": !!dismissible
-                }), ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, ...closeHandler, className: "ids-dialog__close-button" }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
+                }, className), ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, ...closeHandler, className: "ids-dialog__close-button" }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
                             "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
                         }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", id: headlineId, children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
 });

package/components/dialog/dialog.js

@@ -3,6 +3,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { IDSDialogBase } from './dialog-base.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
 
 function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth, height, trigger, actions, noOverlay = false, dismissible = false, autoFocus = true, noFocusTrap = false, persistent = false, keepScrollbar = false, noScrollAreaFocus = false, onVisibilityChange, children, className, ...props }) {
     const [isVisible, setIsVisible] = useState(show);
@@ -10,6 +11,7 @@ function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth
     const dialogRef = useRef(null);
     const scrollAreaRef = useRef(null);
     useFocusTrap(dialogRef.current, isVisible && !noFocusTrap);
+    useEsc(() => setIsVisible(false), triggerRef, isVisible && !persistent);
     // Sync prop show
     useEffect(() => {
         setIsVisible(show);
@@ -30,16 +32,6 @@ function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth
             document.body.classList.remove("ids-hide-overflow");
         };
     }, [isVisible, keepScrollbar]);
-    // Escape key
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.key === "Escape" && isVisible && !persistent) {
-                setIsVisible(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isVisible, persistent]);
     // Auto focus
     useEffect(() => {
         if (isVisible && autoFocus) {
@@ -61,16 +53,23 @@ function IDSDialog({ show = false, srClose = "Stäng", headline, width, maxWidth
             }
         }
     }, [isVisible, autoFocus]);
+    const focusTrigger = () => {
+        const container = triggerRef.current;
+        if (!container)
+            return;
+        const focusable = container.querySelector('button, [href], input, [tabindex]:not([tabindex="-1"])');
+        focusable?.focus();
+    };
     const overlayClick = useCallback(() => {
         if (!persistent)
             setIsVisible(false);
-        triggerRef.current?.focus();
+        focusTrigger();
     }, []);
     const closeDialog = useCallback(() => {
         setIsVisible(false);
-        triggerRef.current?.focus();
+        focusTrigger();
     }, []);
-    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", "aria-haspopup": "dialog", ref: triggerRef, children: trigger }), jsx(IDSDialogBase, { ...props, client: true, show: isVisible, noOverlay: noOverlay, headline: headline, dismissible: dismissible, width: width, maxWidth: maxWidth, height: height, dialogRef: dialogRef, scrollAreaRef: scrollAreaRef, actions: actions, noFocusTrap: noFocusTrap, noScrollAreaFocus: noScrollAreaFocus, onCloseDialog: closeDialog, onOverlayClick: overlayClick, children: children })] }));
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", "aria-haspopup": "dialog", ref: triggerRef, children: trigger }), jsx(IDSDialogBase, { ...props, client: true, className: className, show: isVisible, noOverlay: noOverlay, headline: headline, dismissible: dismissible, width: width, maxWidth: maxWidth, height: height, dialogRef: dialogRef, scrollAreaRef: scrollAreaRef, actions: actions, noFocusTrap: noFocusTrap, noScrollAreaFocus: noScrollAreaFocus, onCloseDialog: closeDialog, onOverlayClick: overlayClick, children: children })] }));
 }
 
 export { IDSDialog };

package/components/dropdown/dropdown-base.js

@@ -27,11 +27,11 @@ function IDSDropdownBase({ expanded, trigger, triggerRef, onTriggerClick, positi
             ...trigger.props
         })
         : trigger;
-    return (jsxs("span", { ...props, className: clsx(`ids-dropdown`, className, {
+    return (jsxs("span", { ...props, className: clsx(`ids-dropdown`, {
             "ids-dropdown--m-block": mBlock,
             "ids-dropdown--s-block": sBlock,
             "ids-dropdown--expanded": expanded
-        }), children: [enhancedTrigger, jsx("div", { ...props, ref: contentRef, "aria-labelledby": triggerId, "aria-hidden": !expanded, className: clsx(`ids-dropdown-content ids-dropdown-content--position-${position}`, {
+        }, className), children: [enhancedTrigger, jsx("div", { ...props, ref: contentRef, "aria-labelledby": triggerId, "aria-hidden": !expanded, className: clsx(`ids-dropdown-content ids-dropdown-content--position-${position}`, {
                     "ids-dropdown-content--show": expanded,
                     "ids-dropdown-content--mblock": mBlock,
                     "ids-dropdown-content--sblock": sBlock,

package/components/dropdown/dropdown.js

@@ -35,6 +35,7 @@ function IDSDropdown({ button, position, maxHeight, minWidth, sBlock, mBlock, ex
                 event.preventDefault();
                 setIsExpanded(false);
                 onClosed?.();
+                triggerRef.current?.focus();
             }
         };
         document.addEventListener("keydown", handleKeyDown);

package/components/footer-1177-pro/footer-1177-pro.d.ts

@@ -3,6 +3,7 @@ import "@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css";
 interface Footer1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;
+    mobileHeadline?: string;
     toggle?: ReactNode;
     col1Headline?: ReactNode;
     col2Headline?: ReactNode;
@@ -17,5 +18,5 @@ interface Footer1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooter1177Pro({ headline, srHeadline, col1, col2, col3, toggle, col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177ProProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSFooter1177Pro({ headline, srHeadline, mobileHeadline, col1, col2, col3, toggle, col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177ProProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/footer-1177-pro/footer-1177-pro.js

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css';
 
-function IDSFooter1177Pro({ headline = "", srHeadline = "", col1, col2, col3, toggle, col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
+function IDSFooter1177Pro({ headline = "", srHeadline = "", mobileHeadline = "", col1, col2, col3, toggle, col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
     const renderHeadline = () => {
         if (srHeadline) {
             return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-1177-pro__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-1177-pro__headline", children: headline })] }));
@@ -21,7 +21,7 @@ function IDSFooter1177Pro({ headline = "", srHeadline = "", col1, col2, col3, to
         }
         return null;
     };
-    return (jsxs("footer", { className: clsx("ids-footer-1177-pro", className), ...props, children: [jsx("div", { className: "ids-footer-1177-pro__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-pro__inner", children: [jsx("div", { className: "ids-footer-1177-pro__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177-pro__content", children: [jsxs("div", { className: "ids-footer-1177-pro__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177-pro__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177-pro__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177-pro__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-pro__sub-footer", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-pro__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-pro__mobile-links", children: mobileLinks })] }) }), jsxs("div", { className: "ids-footer-1177-pro__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-pro__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-1177-pro", className), ...props, children: [jsx("div", { className: "ids-footer-1177-pro__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-pro__inner", children: [jsx("div", { className: "ids-footer-1177-pro__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177-pro__content", children: [jsxs("div", { className: "ids-footer-1177-pro__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177-pro__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177-pro__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177-pro__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-pro__sub-footer", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-pro__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-pro__mobile-links", children: mobileLinks })] }) }), jsxs("div", { className: "ids-footer-1177-pro__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-pro__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-headline", children: mobileHeadline })] }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
 }
 
 export { IDSFooter1177Pro };

package/components/form/checkbox/checkbox-group-base.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode, InputHTMLAttributes } from "react";
 export interface IDSCheckboxGroupBaseProps extends InputHTMLAttributes<HTMLFieldSetElement> {
     legend?: string;
+    hideLegend?: boolean;
     errorMsg?: string | ReactNode;
     compact?: boolean;
     tooltip?: ReactNode;
@@ -9,4 +10,4 @@ export interface IDSCheckboxGroupBaseProps extends InputHTMLAttributes<HTMLField
     errorMsgId?: string;
     groupRef?: React.Ref<HTMLFieldSetElement>;
 }
-export declare function IDSCheckboxGroupBase({ legend, errorMsg, compact, tooltip, children, className, invalid, errorMsgId, groupRef, ...props }: IDSCheckboxGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCheckboxGroupBase({ legend, errorMsg, compact, hideLegend, tooltip, children, className, invalid, errorMsgId, groupRef, ...props }: IDSCheckboxGroupBaseProps): import("react/jsx-runtime").JSX.Element;

package/components/form/checkbox/checkbox-group-base.js

@@ -3,11 +3,13 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSCheckboxGroupBase({ legend = "", errorMsg = "", compact = false, tooltip, children, className, invalid = false, errorMsgId, groupRef, ...props }) {
+function IDSCheckboxGroupBase({ legend, errorMsg = "", compact = false, hideLegend, tooltip, children, className, invalid = false, errorMsgId, groupRef, ...props }) {
     const baseErrorMsgId = !!errorMsgId ? errorMsgId : `checkbox-group-base-error-${useId()}`;
     return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", {
             "ids-form-group__fieldset--compact": compact
-        }, className), ...props, children: [legend && (jsx("div", { className: "ids-label-wrapper", children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, invalid && !!errorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
+        }, className), ...props, children: [legend && (jsx("div", { className: clsx("ids-label-wrapper", {
+                    "ids-label-wrapper--sr-only": hideLegend
+                }, className), children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, invalid && !!errorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
 }
 
 export { IDSCheckboxGroupBase };

package/components/form/checkbox/checkbox-group.d.ts

@@ -3,6 +3,7 @@ export interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLFieldSetE
     legend?: string;
     errorMsg?: string | ReactNode;
     compact?: boolean;
+    hideLegend?: boolean;
     invalid?: boolean;
     tooltip?: ReactNode;
     block?: boolean;

package/components/form/checkbox/checkbox-group.js

@@ -13,6 +13,7 @@ function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false,
             onValidityChange?.(false);
         }
     });
+    const groupInvalid = !noValidation && hasInteracted && !isValid;
     useEffect(() => {
         if (hasInteracted) {
             onValidityChange?.(isValid);
@@ -23,9 +24,9 @@ function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false,
             return child;
         if (child.type === IDSCheckbox) {
             const cloneProps = {
-                key: child.props.id,
+                key: child.key,
                 id: child.props.id,
-                groupErrorMsgId: !!errorMsg && !noValidation ? errorMsgId : undefined,
+                groupErrorMsgId: groupInvalid && !!errorMsg ? errorMsgId : undefined,
                 block,
                 noValidation
             };
@@ -33,7 +34,7 @@ function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false,
         }
         return child;
     });
-    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: !isValid && hasInteracted || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, children: clonedChildren }));
+    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: groupInvalid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, children: clonedChildren }));
 }
 
 export { IDSCheckboxGroup };

package/components/form/datepicker/datepicker.d.ts

@@ -24,6 +24,7 @@ export interface IDSDatePickerProps extends Omit<React.HTMLAttributes<HTMLElemen
     errorMsg?: string;
     missingDateErrorMsg?: string;
     invalidDateErrorMsg?: string;
+    validationOnBlur?: boolean;
     invalid?: boolean;
     disableNavigation?: boolean;
     tooltip?: ReactNode;
@@ -33,4 +34,4 @@ export interface IDSDatePickerProps extends Omit<React.HTMLAttributes<HTMLElemen
     onClose?: () => void;
     onDayClick?: (date: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
 }
-export declare function IDSDatePicker({ label, value, light, placeholder, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, defaultMonth, startMonth, endMonth, noValidation, disabled, required, invalid, tooltip, disableNavigation, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }: IDSDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSDatePicker({ label, value, light, placeholder, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, validationOnBlur, defaultMonth, startMonth, endMonth, noValidation, disabled, required, invalid, tooltip, disableNavigation, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }: IDSDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/components/form/datepicker/datepicker.js

@@ -24,7 +24,7 @@ const getPrevMonthYear = (date) => {
 const getNextMonthYear = (date) => {
     return `${getSweMonth(addMonths(date, 1))} ${getSweYear(addMonths(date, 1))}`;
 };
-function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm/dd", errorMsg = "", missingDateErrorMsg = "Datum saknas", invalidDateErrorMsg = "Ogiltigt datum", calendarHeader = "Välj datum", srOpenText = "Öppna kalendern", srCloseText = "Stäng kalendern", defaultMonth, startMonth = new Date(1900, 0, 1), endMonth = new Date(2050, 0, 1), noValidation = false, disabled = false, required = false, invalid = false, tooltip, disableNavigation = false, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }) {
+function IDSDatePicker({ label, value, light = false, placeholder = "åååå-mm-dd", errorMsg = "", missingDateErrorMsg = "Datum saknas", invalidDateErrorMsg = "Ogiltigt datum", calendarHeader = "Välj datum", srOpenText = "Öppna kalendern", srCloseText = "Stäng kalendern", validationOnBlur = false, defaultMonth, startMonth = new Date(1900, 0, 1), endMonth = new Date(2050, 0, 1), noValidation = false, disabled = false, required = false, invalid = false, tooltip, disableNavigation = false, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }) {
     const shortWeek = "v.";
     const inputRef = useRef(null);
     const triggerRef = useRef(null);
@@ -34,7 +34,7 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm
     const nextMonthButtonRef = useRef(null);
     const dialogId = `datepicker-dialog-${useId()}`;
     const headerId = `datepicker-header-${useId()}`;
-    const inputId = `datepicker-input-${useId()}`;
+    const inputId = props.id || `datepicker-input-${useId()}`;
     const errorMsgId = `datepicker-error-${useId()}`;
     const [isDialogOpen, setIsDialogOpen] = useState(false);
     const [inputValue, setInputValue] = useState(value);
@@ -43,11 +43,12 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm
     const [month, setMonth] = useState(initialSelectedDate || defaultMonth || new Date());
     const [hasDateError, setHasDateError] = useState(false);
     const [hasMissingError, setHasMissingError] = useState(false);
-    const [isInvalid, setIsInvalid] = useState(invalid);
+    const [hasOtherError, setHasOtherError] = useState(false);
+    const hasError = hasMissingError || hasDateError || hasOtherError || invalid;
     const showInvalidError = !!hasDateError && !!invalidDateErrorMsg;
     const showMissingError = !!hasMissingError && !!missingDateErrorMsg;
     const showError = !!invalid && !!errorMsg && !isDialogOpen;
-    useAriaDescribedBy(inputRef, errorMsgId, isInvalid, (showError || showMissingError || showInvalidError) && !noValidation);
+    useAriaDescribedBy(inputRef, errorMsgId, invalid, (showError || showMissingError || showInvalidError) && !noValidation);
     useFocusTrap(dialogRef.current, isDialogOpen);
     const handleOpenDialog = (e) => {
         e.preventDefault();
@@ -75,6 +76,7 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm
             if (event.key === "Escape") {
                 event.preventDefault();
                 setIsDialogOpen(false);
+                triggerRef.current?.focus();
             }
         };
         document.addEventListener("keydown", handleKeyDown);
@@ -82,9 +84,7 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm
     }, [isDialogOpen]);
     const handleDayPickerSelect = (date) => {
         const dateString = format(date, "yyyy-MM-dd");
-        setHasMissingError(false);
-        setIsInvalid(false);
-        setHasDateError(false);
+        resetErrors();
         if (!date) {
             setInputValue("");
             setSelectedDate(undefined);
@@ -98,25 +98,46 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm
                 inputRef.current.checkValidity();
                 inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
                 inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
-                setHasMissingError(!noValidation && required && inputRef.current.validity.valueMissing);
-                setIsInvalid(!inputRef.current.validity.valid || invalid);
             }
         });
         emitValue(dateString, date);
         closeDialog();
     };
-    const handleInvalid = (e) => {
-        setHasMissingError(!noValidation && required && e.currentTarget.validity.valueMissing);
-        setIsInvalid(!e.currentTarget.validity.valid || invalid);
-        emitValue(e.currentTarget.value, undefined);
+    const updateErrors = (validity, isNotADate) => {
+        if (!noValidation) {
+            setHasMissingError(validity.valueMissing);
+            setHasOtherError(!validity.valid);
+            if (validity.valueMissing) {
+                setHasDateError(false);
+            }
+            else {
+                setHasDateError(!!isNotADate || validity.patternMismatch);
+            }
+        }
+    };
+    const resetErrors = () => {
+        setHasMissingError(false);
+        setHasDateError(false);
+        setHasOtherError(false);
+    };
+    const handleInputChange = (e) => {
+        resetErrors();
+        setInputValue(e.currentTarget.value);
+        const parsedDate = createNewDate(e.currentTarget.value);
+        if (isValid(parsedDate)) {
+            setSelectedDate(parsedDate);
+            setMonth(parsedDate);
+        }
+        else {
+            setSelectedDate(undefined);
+        }
+        emitValue(e.currentTarget.value, parsedDate);
     };
     // if the input value is changed programmatically
     useEffect(() => {
         if (value !== inputValue && inputRef.current) {
-            setIsInvalid(false);
-            setHasDateError(false);
+            resetErrors();
             setInputValue(value);
-            setHasMissingError(!noValidation && required && !value);
             if (value) {
                 const parsedDate = createNewDate(value);
                 if (isValid(parsedDate)) {
@@ -125,28 +146,10 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm
                 }
                 else {
                     setSelectedDate(undefined);
-                    setIsInvalid(true);
-                    setHasDateError(true);
                 }
             }
         }
     }, [value, inputRef]);
-    const handleInputChange = (e) => {
-        setHasMissingError(false);
-        setIsInvalid(false);
-        setHasDateError(false);
-        setInputValue(e.currentTarget.value);
-        const parsedDate = createNewDate(e.currentTarget.value);
-        if (isValid(parsedDate)) {
-            setSelectedDate(parsedDate);
-            setMonth(parsedDate);
-        }
-        else {
-            setSelectedDate(undefined);
-            setIsInvalid(!e.currentTarget.validity.valid || invalid);
-        }
-        emitValue(e.currentTarget.value, parsedDate);
-    };
     const emitValue = (val, parsedDate) => {
         const isMissing = required && !val;
         const isValidDate = parsedDate && parsedDate instanceof Date && isValid(parsedDate);
@@ -157,9 +160,29 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm
             missingDate: isMissing
         });
     };
-    const handleBlur = () => {
-        setHasDateError(!noValidation && value.trim().length && !isValid(selectedDate));
+    const handleInvalid = (e) => {
+        updateErrors(e.currentTarget.validity);
+    };
+    const handleBlur = (e) => {
+        if (validationOnBlur) {
+            updateErrors(e.currentTarget.validity, !!e.currentTarget.value.trim().length && !isValid(selectedDate));
+        }
+        onBlur?.(e);
     };
+    useEffect(() => {
+        const form = inputRef.current?.form;
+        if (!form)
+            return;
+        const handleSubmit = (e) => {
+            if (!noValidation) {
+                requestAnimationFrame(() => {
+                    updateErrors(inputRef.current.validity, !isValid(createNewDate(inputRef.current.value)));
+                });
+            }
+        };
+        form.addEventListener("submit", handleSubmit);
+        return () => form.removeEventListener("submit", handleSubmit);
+    }, []);
     function CustomNav(props) {
         // Add the nav buttons after the dropdowns for correct tab order
         const { children } = props;
@@ -190,7 +213,7 @@ function IDSDatePicker({ label, value, light = false, placeholder = "åååå/mm
             return;
         header?.focus();
     }, [isDialogOpen]);
-    return (jsxs("div", { className: clsx("ids-datepicker", { "ids-datepicker--invalid": !noValidation && (isInvalid || hasDateError) }, className), ...props, children: [isDialogOpen && jsx("div", { className: "ids-datepicker__overlay" }), label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsxs("div", { className: "ids-datepicker__input-wrapper", children: [jsx("input", { className: clsx("ids-datepicker__input", { "ids-input--light": light }), ref: inputRef, style: { fontSize: "inherit" }, id: inputId, type: "text", value: inputValue, required: required, disabled: disabled, "aria-invalid": !noValidation && (isInvalid || hasDateError), placeholder: placeholder, onChange: handleInputChange, onInvalid: handleInvalid, onBlur: handleBlur }), jsx("button", { ref: triggerRef, type: "button", className: "ids-datepicker__trigger", style: { fontSize: "inherit" }, disabled: disabled, onClick: handleOpenDialog, "aria-controls": "dialog", "aria-haspopup": "dialog", "aria-expanded": isDialogOpen, "aria-label": srOpenText }), jsxs("div", { className: clsx("ids-datepicker__dialog", { "ids-datepicker__dialog--show": isDialogOpen }), role: "dialog", ref: dialogRef, id: dialogId, "aria-modal": true, "aria-labelledby": headerId, children: [jsxs("div", { className: "ids-datepicker__dialog-bar", children: [jsx("div", { className: "ids-datepicker__dialog-header", id: headerId, ref: headerRef, tabIndex: -1, children: calendarHeader }), jsx("button", { className: "ids-datepicker__dialog-close-button", onClick: closeDialog, "aria-label": srCloseText })] }), jsx(DayPicker, { mode: "single", locale: sv, labels: {
+    return (jsxs("div", { className: clsx("ids-datepicker", { "ids-datepicker--invalid": !noValidation && hasError }, className), ...props, children: [isDialogOpen && jsx("div", { className: "ids-datepicker__overlay" }), label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsxs("div", { className: "ids-datepicker__input-wrapper", children: [jsx("input", { className: clsx("ids-datepicker__input", { "ids-input--light": light }), ref: inputRef, style: { fontSize: "inherit" }, id: inputId, type: "text", value: inputValue, required: required, disabled: disabled, "aria-invalid": !noValidation && hasError, placeholder: placeholder, onChange: handleInputChange, onInvalid: handleInvalid, onBlur: handleBlur, pattern: "^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$" }), jsx("button", { ref: triggerRef, type: "button", className: "ids-datepicker__trigger", style: { fontSize: "inherit" }, disabled: disabled, onClick: handleOpenDialog, "aria-controls": "dialog", "aria-haspopup": "dialog", "aria-expanded": isDialogOpen, "aria-label": srOpenText }), jsxs("div", { className: clsx("ids-datepicker__dialog", { "ids-datepicker__dialog--show": isDialogOpen }), role: "dialog", ref: dialogRef, id: dialogId, "aria-modal": true, "aria-labelledby": headerId, children: [jsxs("div", { className: "ids-datepicker__dialog-bar", children: [jsx("div", { className: "ids-datepicker__dialog-header", id: headerId, ref: headerRef, tabIndex: -1, children: calendarHeader }), jsx("button", { className: "ids-datepicker__dialog-close-button", onClick: closeDialog, "aria-label": srCloseText })] }), jsx(DayPicker, { mode: "single", locale: sv, labels: {
                                     labelWeekNumberHeader: () => "Veckonumer",
                                     labelWeekNumber: (weekNumber) => `vecka`,
                                     labelDayButton(date, modifiers, options, dateLib) {

package/components/form/input/input-base.d.ts

@@ -4,6 +4,7 @@ export interface IDSInputBaseProps extends InputHTMLAttributes<HTMLInputElement>
     type?: string;
     icon?: string;
     hint?: string | ReactNode;
+    unit?: string;
     showSearchLabel?: boolean;
     errorMsg?: string;
     disabled?: boolean;
@@ -21,4 +22,4 @@ export interface IDSInputBaseProps extends InputHTMLAttributes<HTMLInputElement>
     inputRef?: React.Ref<HTMLInputElement>;
     style?: CSSProperties;
 }
-export declare function IDSInputBase({ label, type, icon, hint, showSearchLabel, errorMsg, dataTestId, disabled, invalid, required, focusAnchor, light, readOnly, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, style, ...props }: IDSInputBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSInputBase({ label, type, icon, hint, unit, showSearchLabel, errorMsg, dataTestId, disabled, invalid, required, focusAnchor, light, readOnly, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, style, ...props }: IDSInputBaseProps): import("react/jsx-runtime").JSX.Element;

package/components/form/input/input-base.js

@@ -1,9 +1,9 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSInputBase({ label, type = "text", icon, hint, showSearchLabel = false, errorMsg, dataTestId, disabled = false, invalid = false, required = false, focusAnchor = false, light = false, readOnly = false, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, style, ...props }) {
+function IDSInputBase({ label, type = "text", icon, hint, unit, showSearchLabel = false, errorMsg, dataTestId, disabled = false, invalid = false, required = false, focusAnchor = false, light = false, readOnly = false, tooltip, submitButton, className, id, hintId, errorMsgId, inputRef, style, ...props }) {
     const reactId = useId();
     const inputId = !!id ? id : `input-base-${reactId}`;
     const baseHintId = !!hintId ? hintId : `input-base-hint-${reactId}`;
@@ -19,14 +19,14 @@ function IDSInputBase({ label, type = "text", icon, hint, showSearchLabel = fals
             }
             : {};
     ariaHandler["aria-label"] = type === "search" && !showSearchLabel ? label : "";
-    return (jsx("div", { className: clsx("ids-input", { "ids-input--search": type === "search", "ids-inout--icon": !!icon }, className), "data-testid": dataTestId, style: style, children: jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: clsx("ids-label", {
-                                "ids-label--disabled": disabled || readOnly,
-                                "ids-hidden": type === "search" && !showSearchLabel
-                            }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsxs("div", { className: "ids-input__input-wrapper", children: [type === "search" && jsx("span", { className: "ids-input__search-icon" }), jsx("input", { ref: inputRef, id: inputId, type: type, readOnly: readOnly, className: clsx("ids-input__input", {
-                                "ids-input--light": light,
-                                "ids-input--invalid": invalid,
-                                "ids-focus-anchor": focusAnchor
-                            }), "aria-invalid": invalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...ariaHandler, ...props }), icon && type !== "search" && jsx("span", { className: `ids-input__icon ids-icon-${icon}` })] }), hint && (jsx("div", { id: baseHintId, className: "ids-input__hint", children: hint })), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }) }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search", "ids-inout--icon": !!icon }, className), "data-testid": dataTestId, style: style, children: [jsxs("div", { className: "ids-input__wrapper", children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: clsx("ids-label", {
+                                            "ids-label--disabled": disabled || readOnly,
+                                            "ids-hidden": type === "search" && !showSearchLabel
+                                        }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsxs("div", { className: "ids-input__unit-wrapper", children: [jsxs("div", { className: "ids-input__input-wrapper", children: [type === "search" && jsx("span", { className: "ids-input__search-icon" }), jsx("input", { ref: inputRef, id: inputId, type: type, readOnly: readOnly, className: clsx("ids-input__input", {
+                                                    "ids-input--light": light,
+                                                    "ids-input--invalid": invalid,
+                                                    "ids-focus-anchor": focusAnchor
+                                                }), "aria-invalid": invalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...ariaHandler, ...props }), icon && type !== "search" && jsx("span", { className: `ids-input__icon ids-icon-${icon}` })] }), jsx("div", { className: "ids-input__unit", "aria-hidden": "true", children: unit })] }), hint && (jsx("div", { className: "ids-input__hint", id: baseHintId, children: hint }))] }), !!submitButton && submitButton] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 
 export { IDSInputBase };

package/components/form/input/input.d.ts

@@ -4,6 +4,7 @@ interface IDSInputProps extends InputHTMLAttributes<HTMLInputElement> {
     type?: string;
     icon?: string;
     hint?: string | ReactNode;
+    unit?: string;
     showSearchLabel?: boolean;
     errorMsg?: string;
     disabled?: boolean;

package/components/form/radio/radio-group-base.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode, FieldsetHTMLAttributes } from "react";
 interface IDSRadioGroupBaseProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
     legend?: string;
+    hideLegend?: boolean;
     errorMsg?: string | ReactNode;
     compact?: boolean;
     required?: boolean;
@@ -9,5 +10,5 @@ interface IDSRadioGroupBaseProps extends FieldsetHTMLAttributes<HTMLFieldSetElem
     errorMsgId?: string;
     groupRef?: React.Ref<HTMLFieldSetElement>;
 }
-export declare function IDSRadioGroupBase({ legend, errorMsg, errorMsgId, compact, required, tooltip, className, children, invalid, groupRef, ...props }: IDSRadioGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact, required, tooltip, className, children, invalid, groupRef, ...props }: IDSRadioGroupBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/form/radio/radio-group-base.js

@@ -2,9 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import clsx from 'clsx';
 
-function IDSRadioGroupBase({ legend, errorMsg, errorMsgId, compact = false, required = false, tooltip, className, children, invalid, groupRef, ...props }) {
+function IDSRadioGroupBase({ legend, hideLegend, errorMsg, errorMsgId, compact = false, required = false, tooltip, className, children, invalid, groupRef, ...props }) {
     const showErrorMsg = invalid && !!errorMsg && !!errorMsgId;
-    return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", { "ids-form-group__fieldset--compact": compact }, className), ...props, children: [legend && (jsx("div", { className: "ids-label-wrapper", children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, showErrorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
+    return (jsxs("fieldset", { ref: groupRef, "aria-required": required, className: clsx("ids-form-group__fieldset", { "ids-form-group__fieldset--compact": compact }, className), ...props, children: [legend && (jsx("div", { className: clsx("ids-label-wrapper", {
+                    "ids-label-wrapper--sr-only": hideLegend
+                }, className), children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, showErrorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
 }
 
 export { IDSRadioGroupBase };