@inera/ids-react 8.0.0 → 8.2.0

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

@@ -1,61 +1,24 @@
-"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useRef } from 'react';
 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 }) => {
-    const ref = useRef(null);
     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 renderCol = (column) => {
-        return column?.map((link, idx) => {
-            if (React.isValidElement(link)) {
-                return React.cloneElement(link, {
-                    key: `footer-link-${idx}`,
-                    footer: true,
-                    block: true
-                });
-            }
-            return link;
-        });
-    };
     const renderCols = () => {
         if (cols === 1) {
-            return (jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--100"), children: renderCol(col1) }));
+            return jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--100"), children: col1 });
         }
         else if (cols === 2) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: renderCol(col2) })] }));
+            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: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: renderCol(col3) })] }));
-    };
-    const renderLinks = (content) => {
-        const applyProps = (node, keyPrefix = "") => {
-            if (!node)
-                return null;
-            if (Array.isArray(node)) {
-                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
-            }
-            if (React.isValidElement(node)) {
-                if (node.type === React.Fragment) {
-                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
-                }
-                return React.cloneElement(node, {
-                    key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset: 3,
-                    small: true,
-                    ...node.props
-                });
-            }
-            return node;
-        };
-        return applyProps(content, "root");
+        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 (jsxs("footer", { className: clsx("ids-footer-1177-admin", className), ref: ref, ...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: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-admin__mobile-links", children: renderLinks(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: [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 })] })] })] }));
 };
 
 export { IDSFooter1177Admin };

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

@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from "react";
-import "@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css";
 import { IDSLinkProps } from "../link/link";
+import "@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css";
 interface Footer1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;

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

@@ -1,61 +1,24 @@
-"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useRef } from 'react';
 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 }) => {
-    const ref = useRef(null);
     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 renderCol = (column) => {
-        return column?.map((link, idx) => {
-            if (React.isValidElement(link)) {
-                return React.cloneElement(link, {
-                    key: `footer-link-${idx}`,
-                    footer: true,
-                    block: true
-                });
-            }
-            return link;
-        });
-    };
     const renderCols = () => {
         if (cols === 1) {
-            return (jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--100"), children: [col1Headline, renderCol(col1)] }));
+            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) {
-            return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col1Headline, renderCol(col1)] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col2Headline, renderCol(col2)] })] }));
+            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, renderCol(col1)] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col2Headline, renderCol(col2)] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [" ", col3Headline, renderCol(col3)] })] }));
-    };
-    const renderLinks = (content) => {
-        const applyProps = (node, keyPrefix = "") => {
-            if (!node)
-                return null;
-            if (Array.isArray(node)) {
-                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
-            }
-            if (React.isValidElement(node)) {
-                if (node.type === React.Fragment) {
-                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
-                }
-                return React.cloneElement(node, {
-                    key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset: 3,
-                    small: true,
-                    ...node.props
-                });
-            }
-            return node;
-        };
-        return applyProps(content, "root");
+        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 (jsxs("footer", { className: clsx("ids-footer-1177-pro", className), ref: ref, ...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: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-pro__mobile-links", children: renderLinks(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: [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 })] })] })] }));
 };
 
 export { IDSFooter1177Pro };

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

@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from "react";
-import "@inera/ids-design/components/footer-inera/footer-inera.css";
 import { IDSLinkProps } from "../link/link";
+import "@inera/ids-design/components/footer-inera/footer-inera.css";
 interface FooterIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;

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

@@ -1,61 +1,24 @@
-"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useRef } from 'react';
 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 }) => {
-    const ref = useRef(null);
     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 renderCol = (column) => {
-        return column?.map((link, idx) => {
-            if (React.isValidElement(link)) {
-                return React.cloneElement(link, {
-                    key: `footer-link-${idx}`,
-                    footer: true,
-                    block: true
-                });
-            }
-            return link;
-        });
-    };
     const renderCols = () => {
         if (cols === 1) {
-            return jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--100"), children: renderCol(col1) });
+            return jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--100"), children: col1 });
         }
         else if (cols === 2) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--50"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--50"), children: renderCol(col2) })] }));
+            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: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: renderCol(col3) })] }));
-    };
-    const renderLinks = (content) => {
-        const applyProps = (node, keyPrefix = "") => {
-            if (!node)
-                return null;
-            if (Array.isArray(node)) {
-                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
-            }
-            if (React.isValidElement(node)) {
-                if (node.type === React.Fragment) {
-                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
-                }
-                return React.cloneElement(node, {
-                    key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset: 3,
-                    small: true,
-                    ...node.props
-                });
-            }
-            return node;
-        };
-        return applyProps(content, "root");
+        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 (jsxs("footer", { className: clsx("ids-footer-inera", className), ref: ref, ...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: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-inera__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera__mobile-links", children: renderLinks(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: [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 }) })] })] }));
 };
 
 export { IDSFooterInera };

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

@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from "react";
-import "@inera/ids-design/components/footer-inera-admin/footer-inera-admin.css";
 import { IDSLinkProps } from "../link/link";
+import "@inera/ids-design/components/footer-inera-admin/footer-inera-admin.css";
 interface FooterIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;

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

@@ -1,61 +1,24 @@
-"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useRef } from 'react';
 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 }) => {
-    const ref = useRef(null);
     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 renderCol = (column) => {
-        return column?.map((link, idx) => {
-            if (React.isValidElement(link)) {
-                return React.cloneElement(link, {
-                    key: `footer-link-${idx}`,
-                    footer: true,
-                    block: true
-                });
-            }
-            return link;
-        });
-    };
     const renderCols = () => {
         if (cols === 1) {
-            return (jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--100"), children: renderCol(col1) }));
+            return (jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--100"), children: col1 }));
         }
         else if (cols === 2) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--50"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--50"), children: renderCol(col2) })] }));
+            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: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", "ids-footer-inera-admin__link-col--33"), children: renderCol(col3) })] }));
-    };
-    const renderLinks = (content) => {
-        const applyProps = (node, keyPrefix = "") => {
-            if (!node)
-                return null;
-            if (Array.isArray(node)) {
-                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
-            }
-            if (React.isValidElement(node)) {
-                if (node.type === React.Fragment) {
-                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
-                }
-                return React.cloneElement(node, {
-                    key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset: 3,
-                    small: true,
-                    ...node.props
-                });
-            }
-            return node;
-        };
-        return applyProps(content, "root");
+        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 (jsxs("footer", { className: clsx("ids-footer-inera-admin", className), ref: ref, ...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: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera-admin__mobile-links", children: renderLinks(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: [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 })] })] })] }));
 };
 
 export { IDSFooterIneraAdmin };

package/components/form/checkbox/checkbox.js

@@ -47,8 +47,9 @@ const IDSCheckbox = forwardRef(({ invalid = false, disabled = false, required =
                         }), "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("ds-checkbox__label", {
-                                    "ids-label--clickable": disabled,
+                        }), 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 }))] }));
 });

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { Matcher, Modifiers } from "react-day-picker";
+import "@inera/ids-design/components/form/datepicker/datepicker.css";
+export interface IDSDatePickerProps extends React.HTMLAttributes<HTMLElement> {
+    label: string;
+    value?: string;
+    light?: boolean;
+    placeholder?: string;
+    calendarHeader?: string;
+    defaultMonth?: Date;
+    startMonth?: Date;
+    endMonth?: Date;
+    srOpenText?: string;
+    srCloseText?: string;
+    focusedDay?: Date;
+    disabled?: boolean;
+    required?: boolean;
+    noValidation?: boolean;
+    errorMsg?: string;
+    missingDateErrorMsg?: string;
+    invalidDateErrorMsg?: string;
+    invalid?: boolean;
+    disableNavigation?: boolean;
+    modifiers?: Record<string, Matcher | Matcher[]>;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onDayClick?: (date: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
+}
+export declare function IDSDatePicker({ label, value, light, placeholder, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, defaultMonth, startMonth, endMonth, noValidation, disabled, required, invalid, disableNavigation, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }: IDSDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/components/form/datepicker/datepicker.js

@@ -0,0 +1,179 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { getWeek, format, isValid, subMonths, addMonths } from 'date-fns';
+import { sv } from 'react-day-picker/locale';
+import clsx from 'clsx';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+import { DayPicker, WeekNumberHeader, MonthsDropdown, YearsDropdown, useDayPicker, DropdownNav } from 'react-day-picker';
+import { useFocusTrap } from '../../utils/hooks/useFocusTrap.js';
+import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
+import '@inera/ids-design/components/form/datepicker/datepicker.css';
+
+const locale = { locale: sv };
+const createNewDate = (dateString) => {
+    return new Date(dateString + "T00:00:00Z");
+};
+const getSweMonth = (date) => {
+    return `${format(date, "MMMM", locale)}`;
+};
+const getSweYear = (date) => {
+    return `${format(date, "yyyy", locale)}`;
+};
+const getPrevMonthYear = (date) => {
+    return `${getSweMonth(subMonths(date, 1))} ${getSweYear(subMonths(date, 1))}`;
+};
+const getNextMonthYear = (date) => {
+    return `${getSweMonth(addMonths(date, 1))} ${getSweYear(addMonths(date, 1))}`;
+};
+function IDSDatePicker({ label, value = "", light = false, placeholder = "åååå/mm/dd", errorMsg = "", missingDateErrorMsg = "Datum saknas", invalidDateErrorMsg = "Ogiltigt datum", calendarHeader = "Välj datum", srOpenText = "Öppna kalendern", srCloseText = "Stäng kalendern", defaultMonth, startMonth = new Date(1900, 0, 1), endMonth = new Date(2050, 0, 1), noValidation = false, disabled = false, required = false, invalid = false, disableNavigation = false, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }) {
+    const shortWeek = "v.";
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const dialogRef = useRef(null);
+    const headerRef = useRef(null);
+    const prevMonthButtonRef = useRef(null);
+    const nextMonthButtonRef = useRef(null);
+    const dialogId = useElementId();
+    const headerId = useElementId();
+    const inputId = useElementId();
+    const errorMsgId = useElementId();
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [inputValue, setInputValue] = useState(value);
+    const initialSelectedDate = !!value ? createNewDate(value) : undefined;
+    const [selectedDate, setSelectedDate] = useState(initialSelectedDate || defaultMonth);
+    const [month, setMonth] = useState(initialSelectedDate || defaultMonth || new Date());
+    const [hasDateError, setHasDateError] = useState(false);
+    const [hasMissingError, setHasMissingError] = useState(false);
+    const [isInvalid, setIsInvalid] = useState(invalid);
+    const showInvalidError = !!hasDateError && !!invalidDateErrorMsg;
+    const showMissingError = !!hasMissingError && !!missingDateErrorMsg;
+    const showError = !!invalid && !!errorMsg;
+    useAriaDescribedBy(inputRef, errorMsgId, isInvalid, (showError || showMissingError || showInvalidError) && !noValidation);
+    useFocusTrap(dialogRef.current, isDialogOpen);
+    const handleOpenDialog = (e) => {
+        e.preventDefault();
+        setIsDialogOpen(true);
+        onOpen?.();
+    };
+    const closeDialog = () => {
+        setIsDialogOpen(false);
+        triggerRef.current.focus();
+        onClose?.();
+    };
+    const handleDayPickerSelect = (date) => {
+        const dateString = format(date, "yyyy-MM-dd");
+        setHasMissingError(false);
+        setIsInvalid(false);
+        setHasDateError(false);
+        if (!date) {
+            setInputValue("");
+            setSelectedDate(undefined);
+        }
+        else {
+            setSelectedDate(date);
+            setInputValue(dateString);
+        }
+        requestAnimationFrame(() => {
+            if (inputRef.current) {
+                inputRef.current.reportValidity();
+                inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+                inputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
+                setHasMissingError(!noValidation && required && inputRef.current.validity.valueMissing);
+                setIsInvalid(!inputRef.current.validity.valid || invalid);
+            }
+        });
+        emitValue(dateString, date);
+        closeDialog();
+    };
+    const handleInvalid = (e) => {
+        setHasMissingError(!noValidation && required && e.target.validity.valueMissing);
+        setIsInvalid(!e.target.validity.valid || invalid);
+    };
+    const handleInputChange = (e) => {
+        setHasMissingError(false);
+        setIsInvalid(false);
+        setHasDateError(false);
+        setInputValue(e.target.value);
+        const parsedDate = createNewDate(e.target.value);
+        if (isValid(parsedDate)) {
+            setSelectedDate(parsedDate);
+            setMonth(parsedDate);
+        }
+        else {
+            setSelectedDate(undefined);
+        }
+        emitValue(e.target.value, parsedDate);
+    };
+    const emitValue = (val, parsedDate) => {
+        const isMissing = required && !val;
+        const isValidDate = parsedDate instanceof Date && isValid(parsedDate);
+        const customEvent = new CustomEvent("change", {
+            detail: {
+                value: val,
+                valueAsDate: isValidDate ? createNewDate(val) : undefined,
+                invalidDate: !isValid(parsedDate),
+                missingDate: isMissing
+            },
+            bubbles: true
+        });
+        onChange?.(customEvent);
+    };
+    const handleBlur = () => {
+        setHasDateError(!noValidation && value.trim().length && !isValid(selectedDate));
+    };
+    function CustomNav(props) {
+        // Add the nav buttons after the dropdowns for correct tab order
+        const { children } = props;
+        const { goToMonth, previousMonth, nextMonth } = useDayPicker();
+        const currentMonth = "aktuell månad";
+        const goTo = "gå till";
+        const goToPrevMonth = () => {
+            previousMonth && goToMonth(previousMonth);
+            requestAnimationFrame(() => {
+                if (prevMonthButtonRef.current) {
+                    prevMonthButtonRef.current.focus();
+                }
+            });
+        };
+        const goToNextMonth = () => {
+            nextMonth && goToMonth(nextMonth);
+            requestAnimationFrame(() => {
+                if (nextMonthButtonRef.current) {
+                    nextMonthButtonRef.current.focus();
+                }
+            });
+        };
+        return (jsxs(DropdownNav, { className: "ids-datepicker__nav", ...props, children: [jsx("div", { className: "ids-datepicker__nav-dropdowns", children: children }), jsxs("div", { className: "ids-datepicker__nav-buttons", children: [jsx("button", { type: "button", ref: prevMonthButtonRef, className: "ids-datepicker__nav-prev", onClick: goToPrevMonth, disabled: !previousMonth || disableNavigation, "aria-label": `${currentMonth} ${getSweMonth(month)}. ${goTo} ${getPrevMonthYear(month)}` }), jsx("button", { type: "button", ref: nextMonthButtonRef, className: "ids-datepicker__nav-next", onClick: goToNextMonth, disabled: !nextMonth || disableNavigation, "aria-label": `${currentMonth} ${getSweMonth(month)}. ${goTo} ${getNextMonthYear(month)}` })] })] }));
+    }
+    useEffect(() => {
+        const header = headerRef.current;
+        if (!header)
+            return;
+        header?.focus();
+    }, [isDialogOpen]);
+    return (jsxs("div", { className: clsx("ids-datepicker", { "ids-datepicker--invalid": !noValidation && (isInvalid || hasDateError) }, className), ...props, children: [isDialogOpen && jsx("div", { className: "ids-datepicker__overlay" }), jsx("label", { htmlFor: inputId, className: "ids-label", children: label }), jsxs("div", { className: "ids-datepicker__input-wrapper", children: [jsx("input", { className: clsx("ids-datepicker__input", { "ids-input--light": light }), ref: inputRef, style: { fontSize: "inherit" }, id: inputId, type: "text", value: inputValue, required: required, disabled: disabled, "aria-invalid": !noValidation && (isInvalid || hasDateError), placeholder: placeholder, onChange: handleInputChange, onInvalid: handleInvalid, onBlur: handleBlur }), jsx("button", { ref: triggerRef, className: "ids-datepicker__trigger", style: { fontSize: "inherit" }, disabled: disabled, onClick: handleOpenDialog, "aria-controls": "dialog", "aria-haspopup": "dialog", "aria-expanded": isDialogOpen, "aria-label": srOpenText }), jsxs("div", { className: clsx("ids-datepicker__dialog", { "ids-datepicker__dialog--show": isDialogOpen }), role: "dialog", ref: dialogRef, id: dialogId, "aria-modal": true, "aria-labelledby": headerId, children: [jsxs("div", { className: "ids-datepicker__dialog-bar", children: [jsx("div", { className: "ids-datepicker__dialog-header", id: headerId, ref: headerRef, tabIndex: -1, children: calendarHeader }), jsx("button", { className: "ids-datepicker__dialog-close-button", onClick: closeDialog, "aria-label": srCloseText })] }), jsx(DayPicker, { mode: "single", locale: sv, labels: {
+                                    labelWeekNumberHeader: () => "Veckonumer",
+                                    labelWeekNumber: (weekNumber) => `vecka`,
+                                    labelDayButton(date, modifiers, options, dateLib) {
+                                        const formattedDate = dateLib.format(date, "EEEE d MMMM yyyy", { locale: sv });
+                                        const weekNumber = getWeek(date, {
+                                            weekStartsOn: 1,
+                                            firstWeekContainsDate: 4
+                                        });
+                                        return `${formattedDate}, vecka ${weekNumber}`;
+                                    },
+                                    labelNext: () => "Nästa månad",
+                                    labelPrevious: () => "Föregående månad",
+                                    labelMonthDropdown: () => "Välj månad",
+                                    labelYearDropdown: () => "Välj år"
+                                }, modifiers: modifiers, captionLayout: "dropdown", showWeekNumber: true, autoFocus: true, components: {
+                                    Nav: () => null,
+                                    DropdownNav: CustomNav,
+                                    WeekNumberHeader: props => (jsx(WeekNumberHeader, { ...props, className: "ids-datepicker__week-number-header", children: shortWeek })),
+                                    MonthsDropdown: props => (jsx(MonthsDropdown, { ...props, disabled: disableNavigation, className: "ids-datepicker__month-select" })),
+                                    YearsDropdown: props => (jsx(YearsDropdown, { ...props, disabled: disableNavigation, className: "ids-datepicker__year-select" }))
+                                }, startMonth: startMonth, endMonth: endMonth, month: month, onMonthChange: setMonth, defaultMonth: defaultMonth, selected: selectedDate, onSelect: handleDayPickerSelect, onDayClick: onDayClick })] })] }), (showError || showInvalidError || showMissingError) && (jsxs(IDSErrorMessage, { id: errorMsgId, show: true, children: [showInvalidError && !showMissingError && invalidDateErrorMsg, showMissingError && missingDateErrorMsg, showError && errorMsg] }))] }));
+}
+
+export { IDSDatePicker };

package/components/form/input/input.js

@@ -33,7 +33,7 @@ const IDSInput = forwardRef(({ label = "", type = "text", icon = "", hint = "",
                     "ids-label--disabled": disabled || readOnly,
                     "ids-hidden": type === "search" && !showSearchLabel
                 }), htmlFor: fieldId, children: label }), tooltip] }));
-    return (jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search" }, className), children: [type === "search" ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-input__search-wrapper", children: [labelElement, inputElement] }), submitButton] })) : (jsxs(Fragment, { children: [labelElement, inputElement] })), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint })), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+    return (jsxs("div", { className: "ids-input-component", children: [jsxs("div", { className: clsx("ids-input", { "ids-input--search": type === "search" }, className), children: [type === "search" ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-input__search-wrapper", children: [labelElement, inputElement] }), submitButton] })) : (jsxs(Fragment, { children: [labelElement, inputElement] })), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint }))] }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
 });
 IDSInput.displayName = "IDSInput";
 

package/components/form/radio/radio.js

@@ -21,7 +21,8 @@ const IDSRadio = forwardRef(({ name = "", groupErrorMsgId = "", invalid = false,
                 }), disabled: disabled, "aria-disabled": disabled, "aria-invalid": isInvalid, name: name, onChange: onChange, ...props }), jsxs("div", { className: clsx("ids-label-tooltip-wrapper", {
                     "ids-label-tooltip-wrapper--inline": tooltip
                 }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-radio__label ids-label", {
-                            "ids-input--clickable": !disabled
+                            "ids-label--clickable": !disabled,
+                            "ids-label--disabled": disabled
                         }), children: children }), tooltip] })] }));
 });
 IDSRadio.displayName = "IDSRadio";

package/components/global-alert/global-alert.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/global-alert/global-alert.css';
 import clsx from 'clsx';
 import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSGlobalAlert = ({ agent = false, srExpandText = "Visa meddelande", srCollapseText = "Dölj meddelande", collapsed = false, noRole = false, onCollapsedChange, icon = "", actions, headline = "", children, className, ...props }) => {
+const IDSGlobalAlert = ({ agent = false, srExpandText = "Visa meddelande", srCollapseText = "Dölj meddelande", collapsed = false, noRole = false, onCollapsedChange, actions, headline = "", children, className, ...props }) => {
     const [isCollapsed, setIsCollapsed] = useState(collapsed);
     useEffect(() => {
         setIsCollapsed(collapsed);
@@ -20,7 +20,7 @@ const IDSGlobalAlert = ({ agent = false, srExpandText = "Visa meddelande", srCol
             "ids-global-alert--agent": agent
         }, className), ...props, children: jsxs("div", { className: "ids-global-alert__inner", children: [jsx("div", { className: "ids-global-alert__header", children: jsx("button", { className: clsx("ids-global-alert__button", {
                             "ids-global-alert__button--expanded": !isCollapsed
-                        }), "aria-controls": contentId, "aria-expanded": !isCollapsed, onClick: handleToggleCollapse, children: jsxs("div", { className: "ids-global-alert__icon-headline", children: [icon && (jsx("div", { className: "ids-global-alert__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-global-alert__headline", children: headline }), jsx("span", { className: "ids-global-alert__sr-only", children: isCollapsed ? srExpandText : srCollapseText })] }) }) }), jsxs("div", { id: contentId, className: "ids-global-alert__content", children: [children, actions && jsx("div", { className: "ids-global-alert__sub-content", children: actions })] })] }) }));
+                        }), "aria-controls": contentId, "aria-expanded": !isCollapsed, onClick: handleToggleCollapse, children: jsxs("div", { className: "ids-global-alert__icon-headline", children: [jsx("div", { className: "ids-global-alert__headline", children: headline }), jsx("span", { className: "ids-global-alert__sr-only", children: isCollapsed ? srExpandText : srCollapseText })] }) }) }), jsxs("div", { id: contentId, className: "ids-global-alert__content", children: [children, actions && jsx("div", { className: "ids-global-alert__sub-content", children: actions })] })] }) }));
 };
 
 export { IDSGlobalAlert };

package/components/grid/column.d.ts

@@ -1,5 +1,7 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/grid/column/column.css";
+export type ColSize = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "auto";
+export type OffsetSize = Exclude<ColSize, "auto">;
 export interface IDSColumnProps extends React.HTMLAttributes<HTMLDivElement> {
     cols?: ColSize;
     s?: ColSize;
@@ -10,7 +12,4 @@ export interface IDSColumnProps extends React.HTMLAttributes<HTMLDivElement> {
     alignSelf?: "start" | "center" | "end" | "auto" | "baseline" | "stretch";
     children?: ReactNode;
 }
-type ColSize = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "auto";
-type OffsetSize = Exclude<ColSize, "auto">;
-export declare const IDSColumn: React.FC<IDSColumnProps>;
-export {};
+export declare function IDSColumn({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }: IDSColumnProps): import("react/jsx-runtime").JSX.Element;