@inera/ids-react 8.0.0 → 8.1.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,7 +47,7 @@ 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", {
+                        }), children: [jsx("label", { htmlFor: fieldId, className: clsx("ids-checkbox__label", {
                                     "ids-label--clickable": disabled,
                                     "ids-label--no-label": noLabel
                                 }), children: !noLabel && children }), tooltip] })] }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, compact: true, children: errorMsg }))] }));

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;

package/components/grid/column.js

@@ -1,13 +1,12 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import '@inera/ids-design/components/grid/column/column.css';
 import clsx from 'clsx';
 
-const IDSColumn = ({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }) => {
+function IDSColumn({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }) {
     const colRef = useRef(null);
     const classNames = clsx("ids-col", cols && `ids-col--${cols}`, s && `ids-col--s-${s}`, m && `ids-col--m-${m}`, offset && `ids-col--offset-${offset}`, sOffset && `ids-col--s-offset-${sOffset}`, mOffset && `ids-col--m-offset-${mOffset}`, alignSelf && `ids-col--align-${alignSelf}`, className);
     return (jsx("div", { ref: colRef, className: classNames, style: { ...style }, ...props, children: children }));
-};
+}
 
 export { IDSColumn };

package/components/grid/container.d.ts

@@ -1,8 +1,9 @@
-import React, { ReactNode } from "react";
+import { ReactNode, HTMLAttributes } from "react";
 import "@inera/ids-design/components/grid/container/container.css";
-export interface IDSContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSContainerProps extends HTMLAttributes<HTMLDivElement> {
     width?: string;
+    maxWidth?: string;
     gutterless?: boolean;
     children?: ReactNode;
 }
-export declare const IDSContainer: React.FC<IDSContainerProps>;
+export declare const IDSContainer: import("react").ForwardRefExoticComponent<IDSContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/grid/container.js

@@ -1,24 +1,13 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 import '@inera/ids-design/components/grid/container/container.css';
 import clsx from 'clsx';
 
-const IDSContainer = ({ width = "", gutterless = false, children, className, style, ...props }) => {
-    const containerRef = useRef(null);
+const IDSContainer = forwardRef(({ gutterless = false, width, maxWidth, children, className, style, ...props }, ref) => {
+    const mergedStyle = { ...style, width: width ?? style?.width, maxWidth: maxWidth ?? style?.maxWidth };
     const classNames = clsx("ids-container", gutterless && `ids-container--gutterless-${gutterless}`, className);
-    useEffect(() => {
-        const el = containerRef.current;
-        if (el) {
-            if (width) {
-                el.style.maxWidth = `${width}px`;
-            }
-            else {
-                el.style.maxWidth = "";
-            }
-        }
-    }, [width]);
-    return (jsx("div", { ref: containerRef, className: classNames, style: { ...style }, ...props, children: children }));
-};
+    return (jsx("div", { ref: ref, className: classNames, style: mergedStyle, ...props, children: children }));
+});
+IDSContainer.displayName = "IDSContainer";
 
 export { IDSContainer };

package/components/grid/row.d.ts

@@ -1,9 +1,9 @@
-import React, { ReactNode } from "react";
+import { ReactNode, HTMLAttributes } from "react";
 import "@inera/ids-design/components/grid/row/row.css";
-export interface IDSRowProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSRowProps extends HTMLAttributes<HTMLDivElement> {
+    gap?: string;
     align?: "start" | "center" | "end" | "baseline" | "stretch";
     justify?: "start" | "center" | "end" | "space-between" | "space-around";
-    gap?: string;
     children?: ReactNode;
 }
-export declare const IDSRow: React.FC<IDSRowProps>;
+export declare const IDSRow: import("react").ForwardRefExoticComponent<IDSRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/grid/row.js

@@ -1,18 +1,13 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 import '@inera/ids-design/components/grid/row/row.css';
 import clsx from 'clsx';
 
-const IDSRow = ({ align, justify, gap, className, children, style, ...props }) => {
-    const rowRef = useRef(null);
+const IDSRow = forwardRef(({ gap, align, justify, children, className, style, ...props }, ref) => {
     const classNames = clsx("ids-row", align && `ids-row--align-${align}`, justify && `ids-row--justify-${justify}`, className);
-    useEffect(() => {
-        if (rowRef.current) {
-            rowRef.current.style.gap = gap ?? "";
-        }
-    }, [gap]);
-    return (jsx("div", { ref: rowRef, className: classNames, style: { ...style }, ...props, children: children }));
-};
+    const mergedStyle = { ...style, gap: gap ?? style?.gap };
+    return (jsx("div", { ref: ref, className: classNames, style: mergedStyle, ...props, children: children }));
+});
+IDSRow.displayName = "IDSRow";
 
 export { IDSRow };

package/components/header-1177/header-1177-item.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, PropsWithChildren, HTMLAttributes } from "react";
+import { ReactNode, HTMLAttributes, PropsWithChildren } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-item.css";
 interface IDSHeader1177ItemProps extends HTMLAttributes<HTMLElement> {
     mobile?: boolean;
@@ -9,5 +9,5 @@ interface IDSHeader1177ItemProps extends HTMLAttributes<HTMLElement> {
     link?: ReactNode;
     onClick?: () => void;
 }
-export declare const IDSHeader1177Item: React.FC<PropsWithChildren<IDSHeader1177ItemProps>>;
+export declare function IDSHeader1177Item({ mobile, keepTextOnMobile, text, href, icon, link, onClick, ...props }: PropsWithChildren<IDSHeader1177ItemProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177/header-1177-item.js

@@ -1,29 +1,34 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
-import '@inera/ids-design/components/header-1177/header-1177-item.css';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-1177/header-1177-item.css';
 
-const IDSHeader1177Item = ({ mobile = false, keepTextOnMobile = false, text = "", href = "", icon, link, onClick, ...props }) => {
-    const headerContext = useHeaderContext();
+function IDSHeader1177Item({ mobile = false, keepTextOnMobile = false, text = "", href = "", icon, link, onClick, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
     const classNames = clsx("ids-header-1177-item", {
-        "ids-header-1177-item--unresponsive": headerContext?.unresponsive,
+        "ids-header-1177-item--unresponsive": headerContext.unresponsive,
         "ids-header-1177-item--mobile": mobile,
         "ids-header-1177-item--keep-text": keepTextOnMobile
     });
-    const renderContent = () => (jsxs(Fragment, { children: [icon && (jsx("div", { className: "ids-header-1177-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-header-1177-item-text", children: text })] }));
+    const renderContent = () => (jsx("div", { className: "ids-header-1177-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     if (link && isValidElement(link)) {
-        return cloneElement(link, {
+        const linkProps = link.props;
+        const hasChildren = !!linkProps.children &&
+            (typeof linkProps.children === "string"
+                ? linkProps.children.trim().length > 0
+                : React.Children.count(linkProps.children) > 0);
+        const newLink = cloneElement(link, {
             ...props,
-            className: clsx(link.props.className, classNames),
-            children: renderContent()
+            className: clsx(linkProps.className),
+            children: hasChildren ? linkProps.children : text
         });
+        return (jsxs("div", { className: classNames, children: [renderContent(), " ", newLink] }));
     }
     if (onClick) {
-        return (jsx("button", { className: classNames, onClick: onClick, style: { cursor: "pointer" }, ...props, children: renderContent() }));
+        return (jsxs("div", { className: classNames, children: [renderContent(), jsx("button", { onClick: onClick, ...props, children: text })] }));
     }
-    return (jsx("a", { className: classNames, href: href, ...props, children: renderContent() }));
-};
+    return (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
+}
 
 export { IDSHeader1177Item };

package/components/header-1177/header-1177-nav-item-mobile.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
 import '@inera/ids-design/components/header-1177/header-1177-nav-item-mobile.css';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import clsx from 'clsx';
@@ -11,17 +11,12 @@ const IDSHeader1177NavItemMobile = ({ text = "", href = "", icon = "", link, chi
         "ids-header-1177-nav-item-mobile--unresponsive": headerContext?.unresponsive
     });
     const renderContent = () => {
-        return (jsxs(Fragment, { children: [icon && (jsx("span", { className: "ids-header-1177-nav-item-mobile__icon", children: jsx("span", { className: `ids-icon-${icon}` }) })), text] }));
+        return (jsx("span", { className: "ids-header-1177-nav-item-mobile__icon", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     };
     if (link && isValidElement(link)) {
-        return cloneElement(link, {
-            ...props,
-            style: { textDecoration: "none" },
-            className: clsx(link.props.className, classNames),
-            children: renderContent()
-        });
+        return (jsxs("div", { className: classNames, children: [renderContent(), link] }));
     }
-    return (jsx("a", { className: classNames, href: href, style: { textDecoration: "none" }, ...props, children: renderContent() }));
+    return (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
 };
 
 export { IDSHeader1177NavItemMobile };

package/components/header-1177/header-1177-nav-item.d.ts

@@ -1,15 +1,15 @@
 import React, { ReactNode, ReactElement } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-nav-item.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSHeader1177NavItemProps {
+export interface IDSHeader1177NavItemProps {
+    label?: string;
     active?: boolean;
     expanded?: boolean;
-    label?: string;
+    notification?: ReactNode;
+    children?: ReactNode;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
     col4?: ReactNode;
-    children?: ReactNode;
 }
 export declare const IDSHeader1177NavItem: React.FC<IDSHeader1177NavItemProps>;
-export {};