@inera/ids-react 9.2.2 → 9.4.0

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

@@ -1,27 +1,11 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css';
+import { IDSFooter1177AdminColumns } from './footer-1177-admin-columns.js';
+import { IDSFooter1177AdminHeadline } from './footer-1177-admin-headline.js';
 
 function IDSFooter1177Admin({ headline = "", srHeadline = "", col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
-    const renderHeadline = () => {
-        if (srHeadline) {
-            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-1177-admin__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-1177-admin__headline", children: headline })] }));
-        }
-        return jsx("h2", { className: "ids-footer-1177-admin__headline", children: headline });
-    };
-    const renderCols = () => {
-        if (!!col1 && !col2 && !col3) {
-            return jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--100"), children: col1 });
-        }
-        else if (!!col1 && !!col2 && !col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: col2 })] }));
-        }
-        else if (!!col1 && !!col2 && !!col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: col3 })] }));
-        }
-        return null;
-    };
-    return (jsxs("footer", { className: clsx("ids-footer-1177-admin", className), ...props, children: [jsx("div", { className: "ids-footer-1177-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-admin__inner", children: [jsx("div", { className: "ids-footer-1177-admin__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177-admin__content", children: [jsxs("div", { className: "ids-footer-1177-admin__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177-admin__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177-admin__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-admin__mobile-links", children: mobileLinks })] }) }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-1177-admin", className), ...props, children: [jsx("div", { className: "ids-footer-1177-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-admin__inner", children: [jsx("div", { className: "ids-footer-1177-admin__headline-wrapper", children: jsx(IDSFooter1177AdminHeadline, { headline: headline, srHeadline: srHeadline }) }), jsxs("div", { className: "ids-footer-1177-admin__content", children: [jsxs("div", { className: "ids-footer-1177-admin__text", children: [children, toggle && jsx("div", { className: "ids-footer-1177-admin__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-1177-admin__cols", children: jsx(IDSFooter1177AdminColumns, { col1: col1, col2: col2, col3: col3 }) })] })] }) }), jsx("div", { className: "ids-footer-1177-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-admin__mobile-links", children: mobileLinks })] }) }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
 }
 IDSFooter1177Admin.displayName = "IDSFooter1177Admin";
 

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+export interface Footer1177ProColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    col1Headline?: ReactNode;
+    col2Headline?: ReactNode;
+    col3Headline?: ReactNode;
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+}
+export declare function IDSFooter1177ProColumns({ col1, col2, col3, col1Headline, col2Headline, col3Headline }: Footer1177ProColumnsProps): React.JSX.Element;
+export declare namespace IDSFooter1177ProColumns {
+    var displayName: string;
+}

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

@@ -0,0 +1,18 @@
+import { jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSFooter1177ProColumns({ col1, col2, col3, col1Headline, col2Headline, col3Headline }) {
+    if (!!col1 && !col2 && !col3) {
+        return (jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--100"), children: [col1Headline, col1] }));
+    }
+    else if (!!col1 && !!col2 && !col3) {
+        return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col1Headline, col1] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col2Headline, col2] })] }));
+    }
+    else if (!!col1 && !!col2 && !!col3) {
+        return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col1Headline, col1] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col2Headline, col2] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col3Headline, col3] })] }));
+    }
+    return null;
+}
+IDSFooter1177ProColumns.displayName = "IDSFooter1177ProColumns";
+
+export { IDSFooter1177ProColumns };

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface Footer1177ProHeadlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+}
+export declare function IDSFooter1177ProHeadline({ headline, srHeadline }: Footer1177ProHeadlineProps): React.JSX.Element;
+export declare namespace IDSFooter1177ProHeadline {
+    var displayName: string;
+}

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

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function IDSFooter1177ProHeadline({ headline = "", srHeadline = "" }) {
+    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 })] }));
+    }
+    return jsx("h2", { className: "ids-footer-1177-pro__headline", children: headline });
+}
+IDSFooter1177ProHeadline.displayName = "IDSFooter1177ProHeadline";
+
+export { IDSFooter1177ProHeadline };

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

@@ -18,7 +18,7 @@ interface Footer1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-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 declare function IDSFooter1177Pro({ headline, srHeadline, mobileHeadline, col1, col2, col3, toggle, col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177ProProps): React.JSX.Element;
 export declare namespace IDSFooter1177Pro {
     var displayName: string;
 }

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

@@ -1,27 +1,11 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css';
+import { IDSFooter1177ProColumns } from './footer-1177-pro-columns.js';
+import { IDSFooter1177ProHeadline } from './footer-1177-pro-headline.js';
 
 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 })] }));
-        }
-        return jsx("h2", { className: "ids-footer-1177-pro__headline", children: headline });
-    };
-    const renderCols = () => {
-        if (!!col1 && !col2 && !col3) {
-            return (jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--100"), children: [col1Headline, col1] }));
-        }
-        else if (!!col1 && !!col2 && !col3) {
-            return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col1Headline, col1] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col2Headline, col2] })] }));
-        }
-        else if (!!col1 && !!col2 && !!col3) {
-            return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col1Headline, col1] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col2Headline, col2] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col3Headline, col3] })] }));
-        }
-        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: mobileHeadline })] }), 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: jsx(IDSFooter1177ProHeadline, { headline: headline, srHeadline: srHeadline }) }), 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: jsx(IDSFooter1177ProColumns, { col1: col1, col2: col2, col3: col3, col1Headline: col1Headline, col2Headline: col2Headline, col3Headline: col3Headline }) })] })] }) }), 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 })] })] })] }));
 }
 IDSFooter1177Pro.displayName = "IDSFooter1177Pro";
 

package/components/footer-inera/footer-inera-columns.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface FooterIneraColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+}
+export declare function IDSFooterIneraColumns({ col1, col2, col3 }: FooterIneraColumnsProps): React.JSX.Element;
+export declare namespace IDSFooterIneraColumns {
+    var displayName: string;
+}

package/components/footer-inera/footer-inera-columns.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSFooterIneraColumns({ col1, col2, col3 }) {
+    if (!!col1 && !col2 && !col3) {
+        return jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--100"), children: col1 });
+    }
+    else if (!!col1 && !!col2 && !col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--50"), children: col2 })] }));
+    }
+    else if (!!col1 && !!col2 && !!col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: col3 })] }));
+    }
+    return null;
+}
+IDSFooterIneraColumns.displayName = "IDSFooterIneraColumns";
+
+export { IDSFooterIneraColumns };

package/components/footer-inera/footer-inera-headline.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface FooterIneraHeadlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+}
+export declare function IDSFooterIneraHeadline({ headline, srHeadline }: FooterIneraHeadlineProps): React.JSX.Element;
+export declare namespace IDSFooterIneraHeadline {
+    var displayName: string;
+}

package/components/footer-inera/footer-inera-headline.js

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function IDSFooterIneraHeadline({ headline = "", srHeadline = "" }) {
+    if (srHeadline) {
+        return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-inera__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-inera__headline", children: headline })] }));
+    }
+    return jsx("h2", { className: "ids-footer-inera__headline", children: headline });
+}
+IDSFooterIneraHeadline.displayName = "IDSFooterIneraHeadline";
+
+export { IDSFooterIneraHeadline };

package/components/footer-inera/footer-inera.d.ts

@@ -14,7 +14,7 @@ interface FooterIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooterInera({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: FooterIneraProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSFooterInera({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: FooterIneraProps): React.JSX.Element;
 export declare namespace IDSFooterInera {
     var displayName: string;
 }

package/components/footer-inera/footer-inera.js

@@ -1,27 +1,11 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-inera/footer-inera.css';
+import { IDSFooterIneraColumns } from './footer-inera-columns.js';
+import { IDSFooterIneraHeadline } from './footer-inera-headline.js';
 
 function IDSFooterInera({ headline = "", srHeadline = "", col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
-    const renderHeadline = () => {
-        if (srHeadline) {
-            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-inera__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-inera__headline", children: headline })] }));
-        }
-        return jsx("h2", { className: "ids-footer-inera__headline", children: headline });
-    };
-    const renderCols = () => {
-        if (!!col1 && !col2 && !col3) {
-            return jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--100"), children: col1 });
-        }
-        else if (!!col1 && !!col2 && !col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--50"), children: col2 })] }));
-        }
-        else if (!!col1 && !!col2 && !!col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: col3 })] }));
-        }
-        return null;
-    };
-    return (jsxs("footer", { className: clsx("ids-footer-inera", className), ...props, children: [jsx("div", { className: "ids-footer-inera__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera__inner", children: [jsx("div", { className: "ids-footer-inera__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera__content", children: [jsxs("div", { className: "ids-footer-inera__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-inera__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera__sub-footer", children: [jsx("div", { className: "ids-footer-inera__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-inera__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-inera", className), ...props, children: [jsx("div", { className: "ids-footer-inera__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera__inner", children: [jsx("div", { className: "ids-footer-inera__headline-wrapper", children: jsx(IDSFooterIneraHeadline, { headline: headline, srHeadline: srHeadline }) }), jsxs("div", { className: "ids-footer-inera__content", children: [jsxs("div", { className: "ids-footer-inera__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera__cols", children: jsx(IDSFooterIneraColumns, { col1: col1, col2: col2, col3: col3 }) })] })] }) }), jsx("div", { className: "ids-footer-inera__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera__sub-footer", children: [jsx("div", { className: "ids-footer-inera__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-inera__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
 }
 IDSFooterInera.displayName = "IDSFooterInera";
 

package/components/footer-inera-admin/footer-inera-admin-columns.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface IDSFooterIneraAdminColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+}
+export declare function IDSFooterIneraAdminColumns({ col1, col2, col3 }: IDSFooterIneraAdminColumnsProps): React.JSX.Element;
+export declare namespace IDSFooterIneraAdminColumns {
+    var displayName: string;
+}

package/components/footer-inera-admin/footer-inera-admin-columns.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSFooterIneraAdminColumns({ col1, col2, col3 }) {
+    if (!!col1 && !col2 && !col3) {
+        return jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--100"), children: col1 });
+    }
+    else if (!!col1 && !!col2 && !col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--50"), children: col2 })] }));
+    }
+    else if (!!col1 && !!col2 && !!col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: col3 })] }));
+    }
+    return null;
+}
+IDSFooterIneraAdminColumns.displayName = "IDSFooterIneraAdminColumns";
+
+export { IDSFooterIneraAdminColumns };

package/components/footer-inera-admin/footer-inera-admin-headline.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface FooterIneraAdminHeadlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+}
+export declare function IDSFooterIneraAdminHeadline({ headline, srHeadline }: FooterIneraAdminHeadlineProps): React.JSX.Element;
+export declare namespace IDSFooterIneraAdminHeadline {
+    var displayName: string;
+}

package/components/footer-inera-admin/footer-inera-admin-headline.js

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function IDSFooterIneraAdminHeadline({ headline = "", srHeadline = "" }) {
+    if (srHeadline) {
+        return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-inera-admin__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-inera-admin__headline", children: headline })] }));
+    }
+    return jsx("h2", { className: "ids-footer-inera-admin__headline", children: headline });
+}
+IDSFooterIneraAdminHeadline.displayName = "IDSFooterIneraAdminHeadline";
+
+export { IDSFooterIneraAdminHeadline };

package/components/footer-inera-admin/footer-inera-admin.d.ts

@@ -14,7 +14,7 @@ interface FooterIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooterIneraAdmin({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: FooterIneraAdminProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSFooterIneraAdmin({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: FooterIneraAdminProps): React.JSX.Element;
 export declare namespace IDSFooterIneraAdmin {
     var displayName: string;
 }

package/components/footer-inera-admin/footer-inera-admin.js

@@ -1,27 +1,11 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-inera-admin/footer-inera-admin.css';
+import { IDSFooterIneraAdminColumns } from './footer-inera-admin-columns.js';
+import { IDSFooterIneraAdminHeadline } from './footer-inera-admin-headline.js';
 
 function IDSFooterIneraAdmin({ headline = "", srHeadline = "", col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
-    const renderHeadline = () => {
-        if (srHeadline) {
-            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-inera-admin__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-inera-admin__headline", children: headline })] }));
-        }
-        return jsx("h2", { className: "ids-footer-inera-admin__headline", children: headline });
-    };
-    const renderCols = () => {
-        if (!!col1 && !col2 && !col3) {
-            return (jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--100"), children: col1 }));
-        }
-        else if (!!col1 && !!col2 && !col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--50"), children: col2 })] }));
-        }
-        else if (!!col1 && !!col2 && !!col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: col3 })] }));
-        }
-        return null;
-    };
-    return (jsxs("footer", { className: clsx("ids-footer-inera-admin", className), ...props, children: [jsx("div", { className: "ids-footer-inera-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera-admin__inner", children: [jsx("div", { className: "ids-footer-inera-admin__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera-admin__content", children: [jsxs("div", { className: "ids-footer-inera-admin__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera-admin__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera-admin__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-inera-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera-admin__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-inera-admin", className), ...props, children: [jsx("div", { className: "ids-footer-inera-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera-admin__inner", children: [jsx("div", { className: "ids-footer-inera-admin__headline-wrapper", children: jsx(IDSFooterIneraAdminHeadline, { headline: headline, srHeadline: srHeadline }) }), jsxs("div", { className: "ids-footer-inera-admin__content", children: [jsxs("div", { className: "ids-footer-inera-admin__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera-admin__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera-admin__cols", children: jsx(IDSFooterIneraAdminColumns, { col1: col1, col2: col2, col3: col3 }) })] })] }) }), jsx("div", { className: "ids-footer-inera-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera-admin__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
 }
 IDSFooterIneraAdmin.displayName = "IDSFooterIneraAdmin";
 

package/components/footer-inera-general/footer-inera-general-columns.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface IDSFooterIneraGeneralColumnsProps extends React.HTMLAttributes<HTMLDivElement> {
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
+}
+export declare function IDSFooterIneraGeneralColumns({ col1, col2, col3 }: IDSFooterIneraGeneralColumnsProps): React.JSX.Element;
+export declare namespace IDSFooterIneraGeneralColumns {
+    var displayName: string;
+}

package/components/footer-inera-general/footer-inera-general-columns.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSFooterIneraGeneralColumns({ col1, col2, col3 }) {
+    if (!!col1 && !col2 && !col3) {
+        return (jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--100"), children: col1 }));
+    }
+    else if (!!col1 && !!col2 && !col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--50"), children: col2 })] }));
+    }
+    else if (!!col1 && !!col2 && !!col3) {
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--33"), children: col3 })] }));
+    }
+    return null;
+}
+IDSFooterIneraGeneralColumns.displayName = "IDSFooterIneraGeneralColumns";
+
+export { IDSFooterIneraGeneralColumns };

package/components/footer-inera-general/footer-inera-general-headline.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface FooterIneraGeneralHeadlineProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+}
+export declare function IDSFooterIneraGeneralHeadline({ headline, srHeadline }: FooterIneraGeneralHeadlineProps): React.JSX.Element;
+export declare namespace IDSFooterIneraGeneralHeadline {
+    var displayName: string;
+}

package/components/footer-inera-general/footer-inera-general-headline.js

@@ -0,0 +1,11 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+function IDSFooterIneraGeneralHeadline({ headline = "", srHeadline = "" }) {
+    if (srHeadline) {
+        return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-inera-general__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-inera-general__headline", children: headline })] }));
+    }
+    return jsx("h2", { className: "ids-footer-inera-general__headline", children: headline });
+}
+IDSFooterIneraGeneralHeadline.displayName = "IDSFooterIneraGeneralHeadline";
+
+export { IDSFooterIneraGeneralHeadline };

package/components/footer-inera-general/footer-inera-general.d.ts

@@ -14,7 +14,7 @@ interface FooterIneraGeneralProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSFooterIneraGeneral({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: FooterIneraGeneralProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSFooterIneraGeneral({ headline, srHeadline, col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: FooterIneraGeneralProps): React.JSX.Element;
 export declare namespace IDSFooterIneraGeneral {
     var displayName: string;
 }

package/components/footer-inera-general/footer-inera-general.js

@@ -1,27 +1,11 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-inera-general/footer-inera-general.css';
+import { IDSFooterIneraGeneralColumns } from './footer-inera-general-columns.js';
+import { IDSFooterIneraGeneralHeadline } from './footer-inera-general-headline.js';
 
 function IDSFooterIneraGeneral({ headline = "", srHeadline = "", col1, col2, col3, toggle, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
-    const renderHeadline = () => {
-        if (srHeadline) {
-            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-inera-general__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-inera-general__headline", children: headline })] }));
-        }
-        return jsx("h2", { className: "ids-footer-inera-general__headline", children: headline });
-    };
-    const renderCols = () => {
-        if (!!col1 && !col2 && !col3) {
-            return jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--100"), children: col1 });
-        }
-        else if (!!col1 && !!col2 && !col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--50"), children: col2 })] }));
-        }
-        else if (!!col1 && !!col2 && !!col3) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-inera-general__link-col", "ids-footer-inera-general__link-col--33"), children: col3 })] }));
-        }
-        return null;
-    };
-    return (jsxs("footer", { className: clsx("ids-footer-inera-general", className), ...props, children: [jsx("div", { className: "ids-footer-inera-general__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera-general__inner", children: [jsx("div", { className: "ids-footer-inera-general__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera-general__content", children: [jsxs("div", { className: "ids-footer-inera-general__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera-general__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera-general__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-inera-general__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera-general__sub-footer", children: [jsx("div", { className: "ids-footer-inera-general__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera-general__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera-general__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera-general__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera-general__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-inera-general__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera-general__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-inera-general", className), ...props, children: [jsx("div", { className: "ids-footer-inera-general__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera-general__inner", children: [jsx("div", { className: "ids-footer-inera-general__headline-wrapper", children: jsx(IDSFooterIneraGeneralHeadline, { headline: headline, srHeadline: srHeadline }) }), jsxs("div", { className: "ids-footer-inera-general__content", children: [jsxs("div", { className: "ids-footer-inera-general__text", children: [children, toggle && jsx("div", { className: "ids-footer-inera-general__darkmode-toggle", children: toggle })] }), jsx("div", { className: "ids-footer-inera-general__cols", children: jsx(IDSFooterIneraGeneralColumns, { col1: col1, col2: col2, col3: col3 }) })] })] }) }), jsx("div", { className: "ids-footer-inera-general__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera-general__sub-footer", children: [jsx("div", { className: "ids-footer-inera-general__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera-general__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera-general__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera-general__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera-general__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-inera-general__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera-general__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
 }
 IDSFooterIneraGeneral.displayName = "IDSFooterIneraGeneral";
 

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

@@ -16,13 +16,12 @@ function IDSCheckboxBase({ invalid, disabled, required, indeterminate, light, bl
     return (jsxs("div", { className: clsx("ids-checkbox-component", className), style: { display: "inline-flex", flexDirection: "column", gap: showErrorMsg ? "0.5rem" : "" }, "data-testid": dataTestId, children: [jsxs("div", { className: clsx("ids-checkbox", {
                     "ids-checkbox--light": light,
                     "ids-checkbox--block": block
-                }), "data-testid": dataTestId, children: [jsx("input", { id: inputId, ref: inputRef, type: "checkbox", className: clsx("ids-checkbox__input", {
+                }), children: [jsx("input", { id: inputId, ref: inputRef, type: "checkbox", className: clsx("ids-checkbox__input", {
                             "ids-focus-anchor": focusAnchor
                         }), "aria-invalid": invalid, disabled: disabled, required: required, ...ariaErrorHandler, ...ariaCheckedHandler, ...props }), !!children && (jsxs("div", { className: clsx("ids-label-wrapper", {
                             "ids-label-wrapper--block": block
                         }), children: [jsx("label", { htmlFor: inputId, className: clsx("ids-checkbox__label ids-label", {
-                                    "ids-label--clickable": !disabled,
-                                    "ids-label--disabled": disabled
+                                    "ids-label--clickable": !disabled
                                 }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 IDSCheckboxBase.displayName = "IDSCheckboxBase";

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, ReactNode } from "react";
+import React, { InputHTMLAttributes, ReactNode } from "react";
 export interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLFieldSetElement> {
     legend?: string;
     errorMsg?: string | ReactNode;
@@ -8,10 +8,11 @@ export interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLFieldSetE
     tooltip?: ReactNode;
     block?: boolean;
     noValidation?: boolean;
+    subtitle?: string | ReactNode;
     children?: ReactNode;
     onValidityChange?: (isValid: boolean) => void;
 }
-export declare function IDSCheckboxGroup({ errorMsg, block, invalid, noValidation, onValidityChange, children, ...props }: IDSCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCheckboxGroup({ errorMsg, block, invalid, subtitle, noValidation, onValidityChange, children, ...props }: IDSCheckboxGroupProps): React.JSX.Element;
 export declare namespace IDSCheckboxGroup {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ import { IDSCheckboxGroupBase } from './checkbox-group-base.js';
 import { IDSCheckbox } from './checkbox.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
 
-function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false, onValidityChange, children, ...props }) {
+function IDSCheckboxGroup({ errorMsg = "", block, invalid, subtitle, noValidation = false, onValidityChange, children, ...props }) {
     const groupRef = useRef(null);
     const errorMsgId = useId();
     const { isValid, hasInteracted } = useGroupValidity(groupRef, "checkbox", () => {
@@ -34,7 +34,7 @@ function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false,
         }
         return child;
     });
-    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: groupInvalid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, children: clonedChildren }));
+    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: groupInvalid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, subtitle: subtitle, children: clonedChildren }));
 }
 IDSCheckboxGroup.displayName = "IDSCheckboxGroup";
 

package/components/form/checkbox/checkbox.js

@@ -4,10 +4,9 @@ import { forwardRef, useRef, useEffect } from 'react';
 import { IDSCheckboxBase } from './checkbox-base.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 
-const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeterminate = false, children, ...props }, ref) => {
-    const internalRef = useRef(null);
-    const checkboxRef = ref ?? internalRef;
-    const hasValidValue = useInputValidity(checkboxRef);
+const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeterminate = false, validationOnBlur = false, children, ...props }, ref) => {
+    const checkboxRef = useRef(null);
+    const hasValidValue = useInputValidity(checkboxRef, validationOnBlur, noValidation);
     const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {

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

@@ -21,13 +21,15 @@ export interface IDSDatePickerProps extends Omit<React.InputHTMLAttributes<HTMLI
     invalidDateErrorMsg?: string;
     disableNavigation?: boolean;
     noValidation?: boolean;
+    readOnly?: boolean;
+    dataTestId?: string;
     modifiers?: Record<string, Matcher | Matcher[]>;
     onChange?: (event: IDSDatePickerChangeEvent) => void;
     onOpen?: () => void;
     onClose?: () => void;
     onDayClick?: (date: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
 }
-export declare function IDSDatePicker({ label, id, 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;
+export declare function IDSDatePicker({ label, id, value, light, placeholder, subtitle, dataTestId, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, validationOnBlur, defaultMonth, startMonth, endMonth, noValidation, disabled, required, invalid, readOnly, tooltip, disableNavigation, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }: IDSDatePickerProps): React.JSX.Element;
 export declare namespace IDSDatePicker {
     var displayName: string;
 }