@inera/ids-react 6.1.0 → 7.0.0

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

@@ -1,3 +1,21 @@
-import '@inera/ids-core/components/footer-1177-admin/register.js';
-import { IDSFooter1177Admin as Footer } from '@inera/ids-core/components/footer-1177-admin/footer-1177-admin-element.js';
-export declare const IDSFooter1177Admin: import("@lit-labs/react").ReactWebComponent<Footer, {}>;
+import React, { ReactElement, ReactNode } from "react";
+import "@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css";
+import { IDSLinkProps } from "../link/link";
+interface IDSFooter1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
+    serviceName?: string;
+    cols?: 1 | 2 | 3;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    col1Size?: string;
+    col2Size?: string;
+    col3Size?: string;
+    subFooterLeft?: ReactNode;
+    subFooterRight?: ReactNode;
+    subFooterMobile?: ReactNode;
+    mobileMenu?: ReactNode;
+    mobileLinks?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSFooter1177Admin: React.FC<IDSFooter1177AdminProps>;
+export {};

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

@@ -1,12 +1,66 @@
-import * as React from 'react';
-import '@inera/ids-core/components/footer-1177-admin/register.js';
-import { IDSFooter1177Admin as IDSFooter1177Admin$1 } from '@inera/ids-core/components/footer-1177-admin/footer-1177-admin-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css';
 
-const IDSFooter1177Admin = createComponent({
-    tagName: 'ids-footer-1177-admin',
-    elementClass: IDSFooter1177Admin$1,
-    react: React,
-});
+const IDSFooter1177Admin = ({ serviceName = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Size = "2", col2Size = "2", col3Size = "2", subFooterLeft, subFooterRight, subFooterMobile, mobileMenu, mobileLinks, children, className, ...props }) => {
+    const ref = useRef(null);
+    useEffect(() => {
+    }, [cols, col1Size, col2Size, col3Size]);
+    const getColumnWidth = (col) => {
+        const map = { 1: col1Size, 2: col2Size, 3: col3Size };
+        if (cols === 1)
+            return "ids-footer-1177-admin__col-size-6";
+        if (cols === 2)
+            return "ids-footer-1177-admin__col-size-3";
+        return `ids-footer-1177-admin__col-size-${map[col]}`;
+    };
+    const renderCol = (column) => {
+        return column?.map((link, idx) => {
+            if (React__default.isValidElement(link)) {
+                return React__default.cloneElement(link, {
+                    key: `footer-link-${idx}`,
+                    colorPreset: 1,
+                    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--1", getColumnWidth(1)), children: renderCol(col1) }));
+        }
+        if (cols === 2) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--2", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--2", getColumnWidth(2)), children: renderCol(col2) })] }));
+        }
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", getColumnWidth(2)), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", getColumnWidth(3)), children: renderCol(col3) })] }));
+    };
+    const renderLogo = () => (jsxs(Fragment, { children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-icon", children: jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-service-name", children: serviceName }) }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-text", children: subFooterMobile })] }));
+    const renderCookieLinks = (content, colorPreset) => {
+        const applyProps = (node, keyPrefix = "") => {
+            if (!node)
+                return null;
+            if (Array.isArray(node)) {
+                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
+            }
+            if (React__default.isValidElement(node)) {
+                if (node.type === React__default.Fragment) {
+                    return (jsx(React__default.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
+                }
+                return React__default.cloneElement(node, {
+                    key: `footer-sub-footer-right-link-${keyPrefix}`,
+                    colorPreset,
+                    small: true,
+                    ...node.props
+                });
+            }
+            return node;
+        };
+        return applyProps(content, "root");
+    };
+    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-row", children: jsx("h1", { className: "ids-footer-1177-admin__headline", children: serviceName }) }), jsxs("div", { className: "ids-footer-1177-admin__content", children: [jsx("div", { className: "ids-footer-1177-admin__text", children: children }), renderCols()] })] }) }), 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-row", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-right", children: renderCookieLinks(subFooterRight, 4) }), jsx("div", { className: "ids-footer-1177-admin__mobile-menu", children: mobileMenu }), jsx("div", { className: "ids-footer-1177-admin__mobile-links", children: renderCookieLinks(mobileLinks, 1) })] }) }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile", children: renderLogo() })] })] }));
+};
 
 export { IDSFooter1177Admin };

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

@@ -1,3 +1,17 @@
-import '@inera/ids-core/components/footer-1177-pro/register.js';
-import { IDSFooter1177Pro as Footer } from '@inera/ids-core/components/footer-1177-pro/footer-1177-pro-element.js';
-export declare const IDSFooter1177Pro: import("@lit-labs/react").ReactWebComponent<Footer, {}>;
+import React, { ReactElement, ReactNode } from "react";
+import "@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css";
+import { IDSLinkProps } from "../link/link";
+interface IDSFooter1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
+    cols?: 1 | 2 | 3;
+    desktopCol1Headline?: ReactNode;
+    desktopCol2Headline?: ReactNode;
+    desktopCol3Headline?: ReactNode;
+    desktopCol1?: ReactElement<IDSLinkProps>[];
+    desktopCol2?: ReactElement<IDSLinkProps>[];
+    desktopCol3?: ReactElement<IDSLinkProps>[];
+    mobileMenu?: ReactNode;
+    bottomFooterHeadline?: string;
+    bottomFooterText?: ReactNode;
+}
+export declare const IDSFooter1177Pro: React.FC<IDSFooter1177ProProps>;
+export {};

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

@@ -1,12 +1,42 @@
-import * as React from 'react';
-import '@inera/ids-core/components/footer-1177-pro/register.js';
-import { IDSFooter1177Pro as IDSFooter1177Pro$1 } from '@inera/ids-core/components/footer-1177-pro/footer-1177-pro-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css';
 
-const IDSFooter1177Pro = createComponent({
-    tagName: 'ids-footer-1177-pro',
-    elementClass: IDSFooter1177Pro$1,
-    react: React,
-});
+const IDSFooter1177Pro = ({ cols = 3, desktopCol1Headline = "", desktopCol2Headline = "", desktopCol3Headline = "", desktopCol1 = [], desktopCol2 = [], desktopCol3 = [], mobileMenu, bottomFooterHeadline = "", bottomFooterText, className, ...props }) => {
+    const renderCol = (column) => {
+        return column?.map((link, idx) => {
+            if (React__default.isValidElement(link)) {
+                return React__default.cloneElement(link, {
+                    key: `footer-link-${idx}`,
+                    colorPreset: 1,
+                    block: true
+                });
+            }
+            return link;
+        });
+    };
+    const renderCols = () => {
+        const colClasses = {
+            1: "ids-footer-1177-pro__desktop-col--1",
+            2: "ids-footer-1177-pro__desktop-col--2",
+            3: "ids-footer-1177-pro__desktop-col--3"
+        };
+        const baseClass = "ids-footer-1177-pro__desktop-col";
+        const columns = [];
+        if (cols >= 1) {
+            columns.push(jsxs("div", { className: clsx(baseClass, colClasses[cols]), children: [jsx("div", { className: "ids-footer-1177-pro__footer-headline", children: jsx("h2", { children: desktopCol1Headline }) }), renderCol(desktopCol1)] }, "col1"));
+        }
+        if (cols >= 2) {
+            columns.push(jsxs("div", { className: clsx(baseClass, colClasses[cols]), children: [jsx("div", { className: "ids-footer-1177-pro__footer-headline", children: jsx("h2", { children: desktopCol2Headline }) }), renderCol(desktopCol2)] }, "col2"));
+        }
+        if (cols === 3) {
+            columns.push(jsxs("div", { className: clsx(baseClass, colClasses[cols]), children: [jsx("div", { className: "ids-footer-1177-pro__footer-headline", children: jsx("h2", { children: desktopCol3Headline }) }), renderCol(desktopCol3)] }, "col3"));
+        }
+        return columns;
+    };
+    return (jsxs("footer", { className: clsx("ids-footer-1177-pro", className), ...props, children: [jsxs("div", { className: "ids-footer-1177-pro__top-footer", children: [jsx("div", { className: "ids-footer-1177-pro__desktop-content", children: renderCols() }), jsx("div", { className: "ids-footer-1177-pro__mobile-content", children: mobileMenu })] }), jsx("div", { className: "ids-footer-1177-pro__bottom-footer", children: jsxs("div", { className: "ids-footer-1177-pro__bottom-footer-inner", children: [jsx("div", { className: "ids-footer-1177-pro__bottom-footer-logo" }), jsx("div", { className: "ids-footer-1177-pro__bottom-footer-headline", children: jsx("h2", { children: bottomFooterHeadline }) }), jsx("div", { className: "ids-footer-1177-pro__bottom-footer-text", children: bottomFooterText })] }) })] }));
+};
 
 export { IDSFooter1177Pro };

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

@@ -1,3 +1,23 @@
-import "@inera/ids-core/components/footer-inera/register.js";
-import { IDSFooterInera as Footer } from "@inera/ids-core/components/footer-inera/footer-inera-element.js";
-export declare const IDSFooterInera: import("@lit-labs/react").ReactWebComponent<Footer, {}>;
+import React, { ReactElement, ReactNode } from "react";
+import "@inera/ids-design/components/footer-inera/footer-inera.css";
+import { IDSLinkProps } from "../link/link";
+interface IDSFooterIneraProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+    subHeadline?: string;
+    cols?: 1 | 2 | 3;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    col1Size?: string;
+    col2Size?: string;
+    col3Size?: string;
+    subFooterLeft?: ReactNode;
+    subFooterRight?: ReactNode;
+    mobileMenu?: ReactNode;
+    mobileLinks?: ReactNode;
+    subFooterMobile?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSFooterInera: React.FC<IDSFooterIneraProps>;
+export {};

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

@@ -1,12 +1,67 @@
-import * as React from 'react';
-import '@inera/ids-core/components/footer-inera/register.js';
-import { IDSFooterInera as IDSFooterInera$1 } from '@inera/ids-core/components/footer-inera/footer-inera-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/footer-inera/footer-inera.css';
 
-const IDSFooterInera = createComponent({
-    tagName: "ids-footer-inera",
-    elementClass: IDSFooterInera$1,
-    react: React,
-});
+const IDSFooterInera = ({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Size, col2Size, col3Size, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+    const defaultCols = {
+        1: { col1Size: "6", col2Size: "6", col3Size: "6" },
+        2: { col1Size: "3", col2Size: "3", col3Size: "3" },
+        3: { col1Size: "2", col2Size: "2", col3Size: "2" }
+    };
+    const resolvedCol1 = col1Size ?? defaultCols[cols].col1Size;
+    const resolvedCol2 = col2Size ?? defaultCols[cols].col2Size;
+    const resolvedCol3 = col3Size ?? defaultCols[cols].col3Size;
+    const getColumnWidth = (col) => {
+        const val = col === 1 ? resolvedCol1 : col === 2 ? resolvedCol2 : resolvedCol3;
+        return `ids-footer-inera__col-size-${val}`;
+    };
+    const renderHeadlineElements = () => srHeadline ? (jsxs(Fragment, { children: [jsxs("h1", { className: "ids-footer-inera__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-inera__headline--sub", children: subHeadline })] }), jsxs("h1", { "aria-hidden": "true", className: "ids-footer-inera__headline", children: [headline, jsx("span", { className: "ids-footer-inera__headline--sub", children: subHeadline })] })] })) : (jsxs("h1", { className: "ids-footer-inera__headline", children: [headline, jsx("span", { className: "ids-footer-inera__headline--sub", children: subHeadline })] }));
+    const renderCol = (column) => {
+        return column?.map((link, idx) => {
+            if (React__default.isValidElement(link)) {
+                return React__default.cloneElement(link, {
+                    key: `footer-link-${idx}`,
+                    light: 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--1", getColumnWidth(1)), children: renderCol(col1) }));
+        }
+        else if (cols === 2) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col ids-footer-inera__link-col--1", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera__link-col ids-footer-inera__link-col--2", getColumnWidth(2)), children: renderCol(col2) })] }));
+        }
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera__link-col", getColumnWidth(2)), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-inera__link-col", getColumnWidth(3)), children: renderCol(col3) })] }));
+    };
+    const renderCookieLinks = (content) => {
+        const applyProps = (node, keyPrefix = "") => {
+            if (!node)
+                return null;
+            if (Array.isArray(node)) {
+                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
+            }
+            if (React__default.isValidElement(node)) {
+                if (node.type === React__default.Fragment) {
+                    return (jsx(React__default.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
+                }
+                return React__default.cloneElement(node, {
+                    key: `footer-sub-footer-right-link-${keyPrefix}`,
+                    colorPreset: 4,
+                    small: true,
+                    ...node.props
+                });
+            }
+            return node;
+        };
+        return applyProps(content, "root");
+    };
+    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-row", children: renderHeadlineElements() }), jsxs("div", { className: "ids-footer-inera__content", children: [jsx("div", { className: "ids-footer-inera__text", children: children }), renderCols()] })] }) }), 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-row", children: [jsx("div", { className: "ids-footer-inera__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera__sub-footer-right", children: renderCookieLinks(subFooterRight) }), jsx("div", { className: "ids-footer-inera__mobile-menu", children: mobileMenu }), jsx("div", { className: "ids-footer-inera__mobile-links", children: renderCookieLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-inera__sub-footer-mobile", children: subFooterMobile })] })] }));
+};
 
 export { IDSFooterInera };

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

@@ -1,3 +1,23 @@
-import "@inera/ids-core/components/footer-inera-admin/register.js";
-import { IDSFooterIneraAdmin as Footer } from "@inera/ids-core/components/footer-inera-admin/footer-inera-admin-element.js";
-export declare const IDSFooterIneraAdmin: import("@lit-labs/react").ReactWebComponent<Footer, {}>;
+import React, { ReactElement, ReactNode } from "react";
+import "@inera/ids-design/components/footer-inera-admin/footer-inera-admin.css";
+import { IDSLinkProps } from "../link/link";
+interface IDSFooterIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
+    subHeadline?: string;
+    cols?: 1 | 2 | 3;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    col1Size?: string;
+    col2Size?: string;
+    col3Size?: string;
+    subFooterLeft?: ReactNode;
+    subFooterRight?: ReactNode;
+    mobileMenu?: ReactNode;
+    mobileLinks?: ReactNode;
+    subFooterMobile?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSFooterIneraAdmin: React.FC<IDSFooterIneraAdminProps>;
+export {};

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

@@ -1,12 +1,64 @@
-import * as React from 'react';
-import '@inera/ids-core/components/footer-inera-admin/register.js';
-import { IDSFooterIneraAdmin as IDSFooterIneraAdmin$1 } from '@inera/ids-core/components/footer-inera-admin/footer-inera-admin-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/footer-inera-admin/footer-inera-admin.css';
 
-const IDSFooterIneraAdmin = createComponent({
-    tagName: "ids-footer-inera-admin",
-    elementClass: IDSFooterIneraAdmin$1,
-    react: React,
-});
+const IDSFooterIneraAdmin = ({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Size, col2Size, col3Size, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+    const defaultSizes = {
+        1: { col1Size: "6", col2Size: "6", col3Size: "6" },
+        2: { col1Size: "3", col2Size: "3", col3Size: "3" },
+        3: { col1Size: "2", col2Size: "2", col3Size: "2" }
+    };
+    const resolvedCol1 = col1Size ?? defaultSizes[cols].col1Size;
+    const resolvedCol2 = col2Size ?? defaultSizes[cols].col2Size;
+    const resolvedCol3 = col3Size ?? defaultSizes[cols].col3Size;
+    const getColClass = (size) => `ids-footer-inera-admin__col-size-${size}`;
+    const renderHeadline = () => srHeadline ? (jsxs(Fragment, { children: [jsxs("h1", { className: "ids-footer-inera-admin__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-inera-admin__headline--sub", children: subHeadline })] }), jsxs("h1", { "aria-hidden": "true", className: "ids-footer-inera-admin__headline", children: [headline, jsx("span", { className: "ids-footer-inera-admin__headline--sub", children: subHeadline })] })] })) : (jsxs("h1", { className: "ids-footer-inera-admin__headline", children: [headline, jsx("span", { className: "ids-footer-inera-admin__headline--sub", children: subHeadline })] }));
+    const renderCol = (column) => {
+        return column?.map((link, idx) => {
+            if (React__default.isValidElement(link)) {
+                return React__default.cloneElement(link, {
+                    key: `footer-link-${idx}`,
+                    colorPreset: 3,
+                    block: true
+                });
+            }
+            return link;
+        });
+    };
+    const renderColumns = () => {
+        if (cols === 1) {
+            return (jsx("div", { className: clsx("ids-footer-inera-admin__link-col ids-footer-inera-admin__link-col--1", getColClass(resolvedCol1)), children: renderCol(col1) }));
+        }
+        if (cols === 2) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col ids-footer-inera-admin__link-col--1", getColClass(resolvedCol1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col ids-footer-inera-admin__link-col--2", getColClass(resolvedCol2)), children: renderCol(col2) })] }));
+        }
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera-admin__link-col", getColClass(resolvedCol1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", getColClass(resolvedCol2)), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-inera-admin__link-col", getColClass(resolvedCol3)), children: renderCol(col3) })] }));
+    };
+    const renderCookieLinks = (content) => {
+        const applyProps = (node, keyPrefix = "") => {
+            if (!node)
+                return null;
+            if (Array.isArray(node)) {
+                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
+            }
+            if (React__default.isValidElement(node)) {
+                if (node.type === React__default.Fragment) {
+                    return (jsx(React__default.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
+                }
+                return React__default.cloneElement(node, {
+                    key: `footer-sub-footer-right-link-${keyPrefix}`,
+                    colorPreset: 4,
+                    small: true,
+                    ...node.props
+                });
+            }
+            return node;
+        };
+        return applyProps(content, "root");
+    };
+    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-row", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera-admin__content", children: [jsx("div", { className: "ids-footer-inera-admin__text", children: children }), renderColumns()] })] }) }), 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-row", children: [jsx("div", { className: "ids-footer-inera-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-right", children: renderCookieLinks(subFooterRight) }), jsx("div", { className: "ids-footer-inera-admin__mobile-menu", children: mobileMenu }), jsx("div", { className: "ids-footer-inera-admin__mobile-links", children: renderCookieLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-inera-admin__sub-footer-mobile", children: subFooterMobile })] })] }));
+};
 
 export { IDSFooterIneraAdmin };

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

@@ -1,3 +1,7 @@
-import '@inera/ids-core/components/form/check-button/register.js';
-import { IDSCheckButton as IDSComponent } from '@inera/ids-core/components/form/check-button/check-button-element.js';
-export declare const IDSCheckButton: import("@lit-labs/react").ReactWebComponent<IDSComponent, {}>;
+import React, { ReactNode, InputHTMLAttributes } from "react";
+interface IDSCheckButtonProps extends InputHTMLAttributes<HTMLInputElement> {
+    disabled?: boolean;
+    children?: ReactNode;
+}
+export declare const IDSCheckButton: React.FC<IDSCheckButtonProps>;
+export {};

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

@@ -1,8 +1,11 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/check-button/register.js';
-import { IDSCheckButton as IDSCheckButton$1 } from '@inera/ids-core/components/form/check-button/check-button-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import clsx from 'clsx';
 
-const IDSCheckButton = createComponent(React, 'ids-check-button', IDSCheckButton$1);
+const IDSCheckButton = ({ disabled = false, id, children, className, ...props }) => {
+    const fieldId = useElementId(id);
+    return (jsxs("div", { className: clsx("ids-check-button", { "ids-check-button--disabled": disabled }, className), children: [jsx("input", { id: fieldId, className: "ids-check-button__input", type: "checkbox", disabled: disabled, ...props }), jsx("label", { htmlFor: fieldId, className: "ids-check-button__label", children: children })] }));
+};
 
 export { IDSCheckButton };

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

@@ -1,3 +1,13 @@
-import "@inera/ids-core/components/form/checkbox/register.js";
-import { IDSCheckboxGroup as CheckboxGroup } from "@inera/ids-core/components/form/checkbox/checkbox-group-element.js";
-export declare const IDSCheckboxGroup: import("@lit-labs/react").ReactWebComponent<CheckboxGroup, {}>;
+import React, { ReactNode, InputHTMLAttributes, SetStateAction, Dispatch } from "react";
+interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLInputElement> {
+    legend?: string;
+    errorMsg?: string | ReactNode;
+    compact?: boolean;
+    tooltip?: ReactNode;
+    block?: boolean;
+    children?: ReactNode;
+    onValidityChange?: (isValid: boolean) => void;
+    setCheckedBoxesCount?: Dispatch<SetStateAction<number>>;
+}
+export declare const IDSCheckboxGroup: React.FC<IDSCheckboxGroupProps>;
+export {};

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

@@ -1,12 +1,54 @@
-import React__default from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/checkbox/register.js';
-import { IDSCheckboxGroup as IDSCheckboxGroup$1 } from '@inera/ids-core/components/form/checkbox/checkbox-group-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useEffect } from 'react';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
+import clsx from 'clsx';
 
-const IDSCheckboxGroup = createComponent({
-    tagName: "ids-checkbox-group",
-    elementClass: IDSCheckboxGroup$1,
-    react: React__default
-});
+const IDSCheckboxGroup = ({ legend = "", errorMsg = "", compact = false, block = false, tooltip, children, className, onValidityChange, setCheckedBoxesCount }) => {
+    const groupRef = useRef(null);
+    const isValid = useGroupValidity(groupRef, "checkbox");
+    const errorMsgId = useElementId();
+    useEffect(() => {
+        if (onValidityChange) {
+            onValidityChange(isValid);
+        }
+    }, [isValid, onValidityChange]);
+    useEffect(() => {
+        const checkboxes = groupRef.current?.querySelectorAll(`input[type="checkbox"]`);
+        if (!checkboxes.length)
+            return;
+        const count = () => {
+            const checkedCount = groupRef.current?.querySelectorAll('input[type="checkbox"]:checked')?.length ?? 0;
+            if (setCheckedBoxesCount) {
+                setCheckedBoxesCount(checkedCount);
+            }
+        };
+        count();
+        checkboxes.forEach(cb => {
+            cb.addEventListener("change", count);
+        });
+        return () => {
+            checkboxes.forEach(cb => {
+                cb.removeEventListener("change", count);
+            });
+        };
+    }, [groupRef]);
+    const clonedChildren = React__default.Children.map(children, child => {
+        if (React__default.isValidElement(child) &&
+            child.type.displayName === "IDSCheckbox") {
+            return React__default.cloneElement(child, {
+                key: child.props.id,
+                groupErrorMsgId: errorMsg && errorMsgId,
+                block: block
+            });
+        }
+        return child;
+    });
+    return (jsxs("fieldset", { ref: groupRef, className: clsx("ids-form-group__fieldset", {
+            "ids-form-group__fieldset--compact": compact
+        }, className), children: [jsxs("legend", { children: [legend, tooltip] }), clonedChildren, !isValid && !!errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, compact: true, children: errorMsg }))] }));
+};
 
 export { IDSCheckboxGroup };

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

@@ -1,3 +1,17 @@
-import '@inera/ids-core/components/form/checkbox/register.js';
-import { IDSCheckbox as IDSComponent } from '@inera/ids-core/components/form/checkbox/checkbox-element.js';
-export declare const IDSCheckbox: import("@lit-labs/react").ReactWebComponent<IDSComponent, {}>;
+import React, { ReactNode, InputHTMLAttributes } from "react";
+export interface IDSCheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    invalid?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    indeterminate?: boolean;
+    noLabel?: boolean;
+    noValidation?: boolean;
+    light?: boolean;
+    block?: boolean;
+    compact?: boolean;
+    errorMsg?: string | ReactNode;
+    groupErrorMsgId?: string;
+    tooltip?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSCheckbox: React.FC<IDSCheckboxProps>;

package/components/form/checkbox/checkbox.js

@@ -1,8 +1,53 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/checkbox/register.js';
-import { IDSCheckbox as IDSCheckbox$1 } from '@inera/ids-core/components/form/checkbox/checkbox-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
+import { useInputValidity } from '../form-hooks/useInputValidity.js';
+import clsx from 'clsx';
 
-const IDSCheckbox = createComponent(React, 'ids-checkbox', IDSCheckbox$1);
+const IDSCheckbox = ({ invalid = false, disabled = false, required = false, indeterminate = false, noValidation = false, noLabel = false, light = false, block = false, compact = false, errorMsg = "", groupErrorMsgId = "", tooltip, id, children, className, ...props }) => {
+    const fieldId = useElementId(id);
+    const errorMsgId = useElementId();
+    const checkboxRef = useRef(null);
+    const hasValidValue = useInputValidity(checkboxRef);
+    const isInvalid = (invalid || !hasValidValue) && !noValidation;
+    if (groupErrorMsgId) {
+        useAriaDescribedBy(checkboxRef, groupErrorMsgId, isInvalid, true);
+    }
+    else {
+        useAriaDescribedBy(checkboxRef, errorMsgId, isInvalid, !!errorMsg);
+    }
+    useEffect(() => {
+        if (indeterminate) {
+            checkboxRef.current.indeterminate = indeterminate;
+        }
+    }, [checkboxRef, indeterminate]);
+    useEffect(() => {
+        if (checkboxRef.current) {
+            const checkboxEl = checkboxRef.current;
+            const updateAriaChecked = () => {
+                checkboxEl.setAttribute("aria-checked", checkboxEl.indeterminate ? "mixed" : `${checkboxEl.checked}`);
+            };
+            updateAriaChecked();
+            checkboxEl.addEventListener("change", updateAriaChecked);
+            return () => {
+                checkboxEl.removeEventListener("change", updateAriaChecked);
+            };
+        }
+    }, [checkboxRef]);
+    return (jsxs("div", { className: clsx("ids-checkbox-component", className), style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [jsxs("div", { className: clsx("ids-checkbox", {
+                    "ids-checkbox--light": light,
+                    "ids-checkbox--block": block,
+                    "ids-checkbox--compact": compact
+                }), children: [jsx("input", { id: fieldId, ref: checkboxRef, type: "checkbox", className: "ids-checkbox__input", "aria-invalid": isInvalid, disabled: disabled, "aria-disabled": disabled, required: required, "aria-required": 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,
+                                    "ids-label--no-label": noLabel
+                                }), children: !noLabel && children }), tooltip] })] }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, compact: true, children: errorMsg }))] }));
+};
 
 export { IDSCheckbox };

package/components/form/error-message/error-message.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/form/error-message/error-message.css";
+interface IDSErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    id?: string;
+    show?: boolean;
+    compact?: boolean;
+    children?: ReactNode;
+}
+export declare const IDSErrorMessage: React.FC<IDSErrorMessageProps>;
+export {};

package/components/form/error-message/error-message.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '@inera/ids-design/components/form/error-message/error-message.css';
+import clsx from 'clsx';
+
+const IDSErrorMessage = ({ show = false, compact = false, id, children, className, ...props }) => {
+    return (jsx("div", { id: id, style: { marginTop: compact && "0" }, className: clsx("ids-error-message", {
+            "ids-error-message--show": show
+        }, className), ...props, children: jsxs("span", { className: "ids-error-message__text", children: [" ", children, " "] }) }));
+};
+
+export { IDSErrorMessage };

package/components/form/form-hooks/useAriaDescribedBy.d.ts

@@ -0,0 +1 @@
+export declare function useAriaDescribedBy(ref: React.RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>, errorMsgId: string, invalid?: boolean, hasErrorMsg?: boolean, hasHint?: boolean, hintId?: string): void;