@inera/ids-react 8.2.0 → 9.0.0

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css';
 
-const IDSFooter1177Admin = ({ headline = "", srHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+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 })] }));
@@ -10,15 +10,18 @@ const IDSFooter1177Admin = ({ headline = "", srHeadline = "", cols = 3, col1 = [
         return jsx("h2", { className: "ids-footer-1177-admin__headline", children: headline });
     };
     const renderCols = () => {
-        if (cols === 1) {
+        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 (cols === 2) {
+        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 })] }));
         }
-        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 })] }));
+        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: [jsx("div", { className: "ids-footer-1177-admin__text", children: children }), 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: 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 })] })] })] }));
+}
 
 export { IDSFooter1177Admin };

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

@@ -1,16 +1,15 @@
-import React, { ReactElement, ReactNode } from "react";
-import { IDSLinkProps } from "../link/link";
+import React, { ReactNode } from "react";
 import "@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css";
 interface Footer1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;
-    cols?: 1 | 2 | 3;
+    toggle?: ReactNode;
     col1Headline?: ReactNode;
     col2Headline?: ReactNode;
     col3Headline?: ReactNode;
-    col1?: ReactElement<IDSLinkProps>[];
-    col2?: ReactElement<IDSLinkProps>[];
-    col3?: ReactElement<IDSLinkProps>[];
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;
@@ -18,5 +17,5 @@ interface Footer1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooter1177Pro: React.FC<Footer1177ProProps>;
+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 {};

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';
 
-const IDSFooter1177Pro = ({ headline = "", srHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+function IDSFooter1177Pro({ headline = "", srHeadline = "", 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 })] }));
@@ -10,15 +10,18 @@ const IDSFooter1177Pro = ({ headline = "", srHeadline = "", cols = 3, col1 = [],
         return jsx("h2", { className: "ids-footer-1177-pro__headline", children: headline });
     };
     const renderCols = () => {
-        if (cols === 1) {
+        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 (cols === 2) {
+        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] })] }));
         }
-        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] })] }));
+        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: [jsx("div", { className: "ids-footer-1177-pro__text", children: children }), 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: headline })] }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
+}
 
 export { IDSFooter1177Pro };

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

@@ -1,13 +1,12 @@
-import React, { ReactElement, ReactNode } from "react";
-import { IDSLinkProps } from "../link/link";
+import React, { ReactNode } from "react";
 import "@inera/ids-design/components/footer-inera/footer-inera.css";
 interface FooterIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;
-    cols?: 1 | 2 | 3;
-    col1?: ReactElement<IDSLinkProps>[];
-    col2?: ReactElement<IDSLinkProps>[];
-    col3?: ReactElement<IDSLinkProps>[];
+    toggle?: ReactNode;
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;
@@ -15,5 +14,5 @@ interface FooterIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooterInera: React.FC<FooterIneraProps>;
+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 {};

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-inera/footer-inera.css';
 
-const IDSFooterInera = ({ headline = "", srHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+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 })] }));
@@ -10,15 +10,18 @@ const IDSFooterInera = ({ headline = "", srHeadline = "", cols = 3, col1 = [], c
         return jsx("h2", { className: "ids-footer-inera__headline", children: headline });
     };
     const renderCols = () => {
-        if (cols === 1) {
+        if (!!col1 && !col2 && !col3) {
             return jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--100"), children: col1 });
         }
-        else if (cols === 2) {
+        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 })] }));
         }
-        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 })] }));
+        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: [jsx("div", { className: "ids-footer-inera__text", children: children }), 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: 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 }) })] })] }));
+}
 
 export { IDSFooterInera };

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

@@ -1,13 +1,12 @@
-import React, { ReactElement, ReactNode } from "react";
-import { IDSLinkProps } from "../link/link";
+import React, { ReactNode } from "react";
 import "@inera/ids-design/components/footer-inera-admin/footer-inera-admin.css";
 interface FooterIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;
-    cols?: 1 | 2 | 3;
-    col1?: ReactElement<IDSLinkProps>[];
-    col2?: ReactElement<IDSLinkProps>[];
-    col3?: ReactElement<IDSLinkProps>[];
+    toggle?: ReactNode;
+    col1?: ReactNode;
+    col2?: ReactNode;
+    col3?: ReactNode;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;
@@ -15,5 +14,5 @@ interface FooterIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooterIneraAdmin: React.FC<FooterIneraAdminProps>;
+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 {};

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-inera-admin/footer-inera-admin.css';
 
-const IDSFooterIneraAdmin = ({ headline = "", srHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+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 })] }));
@@ -10,15 +10,18 @@ const IDSFooterIneraAdmin = ({ headline = "", srHeadline = "", cols = 3, col1 =
         return jsx("h2", { className: "ids-footer-inera-admin__headline", children: headline });
     };
     const renderCols = () => {
-        if (cols === 1) {
+        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 (cols === 2) {
+        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 })] }));
         }
-        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 })] }));
+        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: [jsx("div", { className: "ids-footer-inera-admin__text", children: children }), 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 })] }) }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-inera-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-headline", children: headline })] }), 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: 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 })] }) }), jsxs("div", { className: "ids-footer-inera-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-inera-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
+}
 
 export { IDSFooterIneraAdmin };

package/components/form/check-button/check-button.d.ts

@@ -1,9 +1,8 @@
-import { ReactNode, InputHTMLAttributes } from "react";
-interface IDSCheckButtonProps extends InputHTMLAttributes<HTMLInputElement> {
-    disabled?: boolean;
-    focusAnchor?: boolean;
-    children?: ReactNode;
+import { InputHTMLAttributes } from "react";
+export interface IDSCheckButtonProps extends InputHTMLAttributes<HTMLInputElement> {
+    id?: string;
     dataTestId?: string;
+    focusAnchor?: boolean;
+    disabled?: boolean;
 }
 export declare const IDSCheckButton: import("react").ForwardRefExoticComponent<IDSCheckButtonProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/components/form/check-button/check-button.js

@@ -1,17 +1,12 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useImperativeHandle } from 'react';
-import { useElementId } from '../../utils/hooks/useElementId.js';
+import { forwardRef, useId } from 'react';
 import clsx from 'clsx';
 
-const IDSCheckButton = forwardRef(({ disabled = false, focusAnchor = false, id, children, dataTestId = "", className, ...props }, ref) => {
-    const fieldId = useElementId(id);
-    const checkButtonRef = useRef(null);
-    useImperativeHandle(ref, () => checkButtonRef.current);
-    return (jsxs("div", { className: clsx("ids-check-button", { "ids-check-button--disabled": disabled }, className), "data-testid": dataTestId, children: [jsx("input", { id: fieldId, ref: checkButtonRef, className: clsx("ids-check-button__input", {
+const IDSCheckButton = forwardRef(function IDSCheckButton({ id, dataTestId, disabled, focusAnchor, className, children, ...props }, ref) {
+    const inputId = !!id ? id : useId();
+    return (jsxs("div", { className: clsx("ids-check-button", { "ids-check-button--disabled": disabled }, className), "data-testid": dataTestId, children: [jsx("input", { id: inputId, ref: ref, className: clsx("ids-check-button__input", {
                     "ids-focus-anchor": focusAnchor
-                }), type: "checkbox", disabled: disabled, ...props }), jsx("label", { htmlFor: fieldId, className: "ids-check-button__label", children: children })] }));
+                }), type: "checkbox", disabled: disabled, ...props }), jsx("label", { htmlFor: inputId, className: "ids-check-button__label", children: children })] }));
 });
-IDSCheckButton.displayName = "IDSCheckButton";
 
 export { IDSCheckButton };

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

@@ -0,0 +1,19 @@
+import React, { ReactNode, ReactElement, InputHTMLAttributes } from "react";
+export interface IDSCheckboxBaseProps extends InputHTMLAttributes<HTMLInputElement> {
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    indeterminate?: boolean;
+    light?: boolean;
+    block?: boolean;
+    compact?: boolean;
+    focusAnchor?: boolean;
+    errorMsg?: string | ReactNode;
+    tooltip?: ReactNode;
+    dataTestId?: string;
+    id?: string;
+    groupErrorMsgId?: string;
+    errorMsgId?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+export declare function IDSCheckboxBase({ invalid, disabled, required, light, block, compact, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }: IDSCheckboxBaseProps): ReactElement;

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

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+
+function IDSCheckboxBase({ invalid, disabled, required, light, block, compact, focusAnchor, errorMsg, tooltip, children, dataTestId, id, groupErrorMsgId, errorMsgId, inputRef, className, ...props }) {
+    const reactId = useId();
+    const inputId = !!id ? id : `checkbox-base-${reactId}`;
+    const baseErrorMsgId = !!errorMsgId ? errorMsgId : `checkbox-base-error-${reactId}`;
+    const showErrorMsg = invalid && !!errorMsg;
+    const ariaHandler = showErrorMsg || !!groupErrorMsgId
+        ? {
+            "aria-describedby": groupErrorMsgId || baseErrorMsgId
+        }
+        : {};
+    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", {
+                            "ids-focus-anchor": focusAnchor
+                        }), "aria-invalid": invalid, disabled: disabled, "aria-disabled": disabled, required: required, "aria-required": required, ...ariaHandler, ...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
+                                }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: true, children: errorMsg }))] }));
+}
+
+export { IDSCheckboxBase };

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

@@ -0,0 +1,12 @@
+import React, { ReactNode, InputHTMLAttributes } from "react";
+export interface IDSCheckboxGroupBaseProps extends InputHTMLAttributes<HTMLFieldSetElement> {
+    legend?: string;
+    errorMsg?: string | ReactNode;
+    compact?: boolean;
+    tooltip?: ReactNode;
+    children?: ReactNode;
+    invalid?: boolean;
+    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;

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

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 }) {
+    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, children: errorMsg }))] }));
+}
+
+export { IDSCheckboxGroupBase };

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

@@ -1,14 +1,13 @@
-import React, { ReactNode, InputHTMLAttributes, SetStateAction, Dispatch } from "react";
-interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLFieldSetElement> {
+import { InputHTMLAttributes, ReactNode } from "react";
+export interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLFieldSetElement> {
     legend?: string;
     errorMsg?: string | ReactNode;
     compact?: boolean;
+    invalid?: boolean;
     tooltip?: ReactNode;
     block?: boolean;
     noValidation?: boolean;
     children?: ReactNode;
     onValidityChange?: (isValid: boolean) => void;
-    setCheckedBoxesCount?: Dispatch<SetStateAction<number>>;
 }
-export declare const IDSCheckboxGroup: React.FC<IDSCheckboxGroupProps>;
-export {};
+export declare function IDSCheckboxGroup({ errorMsg, block, invalid, noValidation, onValidityChange, children, ...props }: IDSCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,43 +1,39 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef, useEffect } from 'react';
-import { IDSErrorMessage } from '../error-message/error-message.js';
-import { useElementId } from '../../utils/hooks/useElementId.js';
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useId, useEffect } from 'react';
+import { IDSCheckboxGroupBase } from './checkbox-group-base.js';
+import { IDSCheckbox } from './checkbox.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
-import clsx from 'clsx';
 
-const IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block = false, noValidation = false, tooltip, children, className, onValidityChange, setCheckedBoxesCount, ...props }) => {
+function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false, onValidityChange, children, ...props }) {
     const groupRef = useRef(null);
-    const isValid = useGroupValidity(groupRef, "checkbox", () => {
-        onValidityChange?.(false);
+    const errorMsgId = useId();
+    const { isValid, hasInteracted } = useGroupValidity(groupRef, "checkbox", () => {
+        if (!noValidation) {
+            onValidityChange?.(false);
+        }
     });
-    const errorMsgId = useElementId();
-    useEffect(() => {
-        const checkedCount = groupRef.current?.querySelectorAll('input[type="checkbox"]:checked')?.length ?? 0;
-        setCheckedBoxesCount?.(checkedCount);
-    }, [groupRef]);
     useEffect(() => {
-        onValidityChange?.(isValid);
-    }, [isValid, onValidityChange]);
+        if (hasInteracted) {
+            onValidityChange?.(isValid);
+        }
+    }, [hasInteracted, isValid, onValidityChange]);
     const clonedChildren = React.Children.map(children, child => {
-        if (React.isValidElement(child) && child.type.displayName === "IDSCheckbox") {
-            return React.cloneElement(child, {
+        if (!React.isValidElement(child))
+            return child;
+        if (child.type === IDSCheckbox) {
+            const cloneProps = {
                 key: child.props.id,
-                groupErrorMsgId: errorMsg && errorMsgId,
-                block: block,
-                noValidation: noValidation,
-                onChange: (e) => {
-                    child.props.onChange?.(e);
-                    const checkedCount = groupRef.current?.querySelectorAll('input[type="checkbox"]:checked')?.length ?? 0;
-                    setCheckedBoxesCount?.(checkedCount);
-                }
-            });
+                id: child.props.id,
+                groupErrorMsgId: !!errorMsg && !noValidation ? errorMsgId : undefined,
+                block,
+                noValidation
+            };
+            return React.cloneElement(child, cloneProps);
         }
         return child;
     });
-    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", {
-            "ids-form-group__fieldset--compact": compact
-        }, className), ...props, children: [jsxs("legend", { children: [legend, tooltip] }), clonedChildren, !isValid && !!errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, compact: true, children: errorMsg }))] }));
-};
+    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: !isValid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, children: clonedChildren }));
+}
 
 export { IDSCheckboxGroup };

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

@@ -1,19 +1,19 @@
 import React, { ReactNode, InputHTMLAttributes } from "react";
 export interface IDSCheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    id?: string;
+    key?: string;
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
     indeterminate?: boolean;
-    noLabel?: boolean;
     noValidation?: boolean;
     light?: boolean;
     block?: boolean;
     compact?: boolean;
     focusAnchor?: boolean;
     errorMsg?: string | ReactNode;
-    groupErrorMsgId?: string;
     tooltip?: ReactNode;
-    children?: ReactNode;
     dataTestId?: string;
+    groupErrorMsgId?: string;
 }
 export declare const IDSCheckbox: React.ForwardRefExoticComponent<IDSCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/components/form/checkbox/checkbox.js

@@ -1,57 +1,33 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useEffect } from 'react';
-import { useElementId } from '../../utils/hooks/useElementId.js';
-import { IDSErrorMessage } from '../error-message/error-message.js';
-import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
+import { IDSCheckboxBase } from './checkbox-base.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
-import clsx from 'clsx';
 
-const IDSCheckbox = forwardRef(({ invalid = false, disabled = false, required = false, indeterminate = false, noValidation = false, noLabel = false, light = false, block = false, compact = false, focusAnchor = false, errorMsg = "", groupErrorMsgId = "", dataTestId = "", tooltip, id, children, className, ...props }, ref) => {
+const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeterminate = false, children, ...props }, ref) => {
     const internalRef = useRef(null);
     const checkboxRef = ref ?? internalRef;
-    const fieldId = useElementId(id);
-    const errorMsgId = useElementId();
     const hasValidValue = useInputValidity(checkboxRef);
     const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    if (groupErrorMsgId) {
-        useAriaDescribedBy(checkboxRef, groupErrorMsgId, isInvalid, true);
-    }
-    else {
-        useAriaDescribedBy(checkboxRef, errorMsgId, isInvalid, !!errorMsg);
-    }
+    // indeterminate support
     useEffect(() => {
         if (checkboxRef.current) {
             checkboxRef.current.indeterminate = indeterminate;
         }
-    }, [checkboxRef, indeterminate]);
+    }, [indeterminate]);
+    // aria-checked update for indeterminate
     useEffect(() => {
-        const checkboxEl = checkboxRef.current;
-        if (checkboxEl) {
-            const updateAriaChecked = () => {
-                checkboxEl.setAttribute("aria-checked", checkboxEl.indeterminate ? "mixed" : `${checkboxEl.checked}`);
-            };
-            updateAriaChecked();
-            checkboxEl.addEventListener("change", updateAriaChecked);
-            return () => {
-                checkboxEl.removeEventListener("change", updateAriaChecked);
-            };
-        }
-    }, [checkboxRef]);
-    return (jsxs("div", { className: clsx("ids-checkbox-component", className), style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, "data-testid": dataTestId, children: [jsxs("div", { className: clsx("ids-checkbox", {
-                    "ids-checkbox--light": light,
-                    "ids-checkbox--block": block,
-                    "ids-checkbox--compact": compact
-                }), children: [jsx("input", { id: fieldId, ref: checkboxRef, type: "checkbox", className: clsx("ids-checkbox__input", {
-                            "ids-focus-anchor": focusAnchor
-                        }), "aria-invalid": isInvalid, disabled: disabled, "aria-disabled": disabled, required: !noValidation && required, "aria-required": !noValidation && required, ...props }), jsxs("div", { className: clsx("ids-label-tooltip-wrapper", {
-                            "ids-label-tooltip-wrapper--block": block,
-                            "ids-label-tooltip-wrapper--inline": tooltip
-                        }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-checkbox__label ids-label", {
-                                    "ids-label--clickable": !disabled,
-                                    "ids-label--disabled": disabled,
-                                    "ids-label--no-label": noLabel
-                                }), children: !noLabel && children }), tooltip] })] }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, compact: true, children: errorMsg }))] }));
+        const el = checkboxRef.current;
+        if (!el)
+            return;
+        const updateAriaChecked = () => {
+            el.setAttribute("aria-checked", el.indeterminate ? "mixed" : `${el.checked}`);
+        };
+        updateAriaChecked();
+        el.addEventListener("change", updateAriaChecked);
+        return () => el.removeEventListener("change", updateAriaChecked);
+    }, []);
+    return (jsx(IDSCheckboxBase, { ...props, inputRef: checkboxRef, invalid: isInvalid, children: children }));
 });
 IDSCheckbox.displayName = "IDSCheckbox";
 

package/components/form/darkmode-toggle/darkmode-toggle.d.ts

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+interface IDSDarkmodeToggleProps extends InputHTMLAttributes<HTMLInputElement> {
+    tooltip?: ReactNode;
+    focusAnchor?: boolean;
+    children?: ReactNode;
+    dataTestId?: string;
+    disabled?: boolean;
+    srText?: string;
+}
+export declare const IDSDarkmodeToggle: import("react").ForwardRefExoticComponent<IDSDarkmodeToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/form/darkmode-toggle/darkmode-toggle.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId } from 'react';
+import clsx from 'clsx';
+
+const IDSDarkmodeToggle = forwardRef(({ id, dataTestId, focusAnchor, disabled, className, tooltip, srText = "Växla tema", children, ...props }, ref) => {
+    const inputId = !!id ? id : useId();
+    return (jsxs("div", { className: clsx("ids-darkmode-toggle", className), "data-testid": dataTestId, children: [jsx("input", { id: inputId, ref: ref, className: clsx("ids-darkmode-toggle__input", {
+                    "ids-focus-anchor": focusAnchor
+                }), "aria-label": srText, disabled: disabled, type: "checkbox", role: "switch", "aria-checked": props.defaultChecked || props.checked, ...props }), jsxs("div", { className: "ids-label-wrapper", children: [jsx("label", { htmlFor: inputId, className: "ids-darkmode-toggle__label ids-label ids-label--clickable", children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })] }));
+});
+IDSDarkmodeToggle.displayName = "IDSDarkmodeToggle";
+
+export { IDSDarkmodeToggle };