@inera/ids-react 6.2.0 → 7.0.0

package/components/header-inera-admin/header-inera-admin-item.js

@@ -1,11 +1,27 @@
-import * as React from 'react';
-import { IDSHeaderIneraAdminItem as IDSHeaderIneraAdminItem$1 } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin-item.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraAdminItem = createComponent({
-    tagName: 'ids-header-inera-admin-item',
-    elementClass: IDSHeaderIneraAdminItem$1,
-    react: React,
-});
+const IDSHeaderIneraAdminItem = ({ mobile = false, separatorLeft = false, icon = "", text, href = "", link, onClick, ...props }) => {
+    const headerContext = useHeaderContext();
+    const classNames = clsx("ids-header-inera-admin-item", {
+        "ids-header-inera-admin-item--mobile": mobile,
+        "ids-header-inera-admin-item__separator": separatorLeft,
+        "ids-header-inera-admin-item--unresponsive": headerContext?.unresponsive
+    });
+    const renderContent = () => (jsxs(Fragment, { children: [icon && (jsx("div", { className: "ids-header-inera-admin-item__icon", "aria-label": text, children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-header-inera-admin-item__text", children: text })] }));
+    if (link && isValidElement(link)) {
+        return cloneElement(link, {
+            ...props,
+            style: { textDecoration: "none" },
+            className: clsx(link.props.className, classNames),
+            children: renderContent()
+        });
+    }
+    return onClick ? (jsx("button", { className: classNames, onClick: onClick, ...props, children: renderContent() })) : (jsx("a", { className: classNames, href: href, style: { textDecoration: "none" }, ...props, children: renderContent() }));
+};
 
 export { IDSHeaderIneraAdminItem };

package/components/header-inera-admin/header-inera-admin-nav-item.d.ts

@@ -1,2 +1,16 @@
-import { IDSHeaderIneraAdminNavItem as HeaderNavItem } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-nav-item-element.js';
-export declare const IDSHeaderIneraAdminNavItem: import("@lit-labs/react").ReactWebComponent<HeaderNavItem, {}>;
+import React, { ReactNode, ReactElement } from "react";
+import "@inera/ids-design/components/header-inera-admin/header-inera-admin-nav-item.css";
+import { IDSLinkProps } from "../link/link";
+interface IDSHeaderIneraAdminNavItemProps {
+    label?: string;
+    active?: boolean;
+    expanded?: boolean;
+    notification?: ReactNode;
+    children?: ReactNode;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    col4?: ReactNode;
+}
+export declare const IDSHeaderIneraAdminNavItem: React.FC<IDSHeaderIneraAdminNavItemProps>;
+export {};

package/components/header-inera-admin/header-inera-admin-nav-item.js

@@ -1,11 +1,57 @@
-import * as React from 'react';
-import { IDSHeaderIneraAdminNavItem as IDSHeaderIneraAdminNavItem$1 } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-nav-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin-nav-item.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSHeaderIneraAdminNavItem = createComponent({
-    tagName: 'ids-header-inera-admin-nav-item',
-    elementClass: IDSHeaderIneraAdminNavItem$1,
-    react: React,
-});
+const IDSHeaderIneraAdminNavItem = ({ label = "", active = false, expanded = false, notification, children, col1, col2, col3, col4 }) => {
+    const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const containerRef = useRef(null);
+    const contentId = useElementId();
+    const handleClickOutside = useCallback((event) => {
+        if (containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+        }
+    }, [containerRef]);
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
+    useEffect(() => {
+        document.addEventListener("click", handleClickOutside);
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [handleClickOutside]);
+    const renderNavItem = () => {
+        if (label) {
+            return (jsxs("button", { className: clsx("ids-header-inera-admin-nav-item__button", {
+                    "ids-header-inera-admin-nav-item__button--expanded": isExpanded,
+                    "ids-header-inera-admin-nav-item__button--active": active
+                }), "aria-controls": contentId, "aria-expanded": isExpanded, onClick: () => setIsExpanded(!isExpanded), children: [label, notification] }));
+        }
+        else {
+            return (jsxs("span", { className: clsx("ids-header-inera-admin-nav-item__link", {
+                    "ids-header-inera-admin-nav-item__link--active": active
+                }), children: [children, notification] }));
+        }
+    };
+    const renderLink = (link) => {
+        return React__default.isValidElement(link)
+            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 2 })
+            : link;
+    };
+    const renderContent = () => {
+        if (!isExpanded)
+            return null;
+        return (jsx("div", { id: contentId, className: "ids-header-inera-admin-nav-item__content", children: jsxs("div", { className: clsx("ids-header-inera-admin-nav-item__content-inner", {
+                    "ids-header-inera-admin-nav-item__content-inner--fluid": headerContext?.fluid
+                }), children: [jsx("div", { className: "ids-header-inera-admin-nav-item__content-col", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__content-col", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__content-col", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__content-col", children: col4 })] }) }));
+    };
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-admin-nav-item", {
+            "ids-header-inera-admin-nav-item--fluid": headerContext?.fluid,
+            "ids-header-inera-admin-nav-item--unresponsive": headerContext?.unresponsive
+        }), children: [renderNavItem(), renderContent()] }));
+};
 
 export { IDSHeaderIneraAdminNavItem };

package/components/header-inera-admin/header-inera-admin-nav-mobile.d.ts

@@ -1,5 +1,12 @@
-import { IDSHeaderIneraAdminNavMobile as HeaderNavMobile } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-nav-mobile-element.js';
-export declare const IDSHeaderIneraAdminNavMobile: import("@lit-labs/react").ReactWebComponent<HeaderNavMobile, {
-    onClosed: string;
-    onExpanded: string;
-}>;
+import React from "react";
+import "@inera/ids-design/components/header-inera-admin/header-inera-admin-nav-mobile.css";
+interface IDSHeaderIneraAdminNavMobileProps {
+    expanded?: boolean;
+    persistent?: boolean;
+    srLabel?: string;
+    onExpanded?: () => void;
+    onClosed?: () => void;
+    children?: React.ReactNode;
+}
+export declare const IDSHeaderIneraAdminNavMobile: React.FC<IDSHeaderIneraAdminNavMobileProps>;
+export {};

package/components/header-inera-admin/header-inera-admin-nav-mobile.js

@@ -1,15 +1,35 @@
-import * as React from 'react';
-import { IDSHeaderIneraAdminNavMobile as IDSHeaderIneraAdminNavMobile$1 } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-nav-mobile-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin-nav-mobile.css';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import clsx from 'clsx';
 
-const IDSHeaderIneraAdminNavMobile = createComponent({
-    tagName: 'ids-header-inera-admin-nav-mobile',
-    elementClass: IDSHeaderIneraAdminNavMobile$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onExpanded: 'expanded'
-    }
-});
+const IDSHeaderIneraAdminNavMobile = ({ expanded = false, persistent = false, srLabel = "Meny", onExpanded, onClosed, children }) => {
+    const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const containerRef = useRef(null);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        if (!persistent) {
+            const links = menuRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => link.addEventListener("click", closeMenu));
+            return () => links.forEach(link => link.removeEventListener("click", closeMenu));
+        }
+    }, [isExpanded, persistent]);
+    const toggleExpanded = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        newExpanded ? onExpanded?.() : onClosed?.();
+    };
+    const closeMenu = () => {
+        if (isExpanded)
+            toggleExpanded();
+    };
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-admin-nav-mobile", {
+            "ids-header-inera-admin-nav-mobile--expanded": isExpanded,
+            "ids-header-inera-admin-nav-mobile--unresponsive": headerContext?.unresponsive
+        }), children: [jsx("button", { "aria-label": srLabel, "aria-expanded": isExpanded, className: "ids-header-inera-admin-nav-mobile__button", onClick: toggleExpanded, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) }), isExpanded && (jsx("nav", { className: "ids-header-inera-admin-nav-mobile__menu-items", ref: menuRef, children: children }))] }));
+};
 
 export { IDSHeaderIneraAdminNavMobile };

package/components/header-inera-admin/header-inera-admin-nav.d.ts

@@ -1,2 +1,8 @@
-import { IDSHeaderIneraAdminNav as HeaderNav } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-nav-element.js';
-export declare const IDSHeaderIneraAdminNav: import("@lit-labs/react").ReactWebComponent<HeaderNav, {}>;
+import React from "react";
+import "@inera/ids-design/components/header-inera-admin/header-inera-admin-nav.css";
+interface IDSHeaderIneraAdminNavProps {
+    srText?: string;
+    children?: React.ReactNode;
+}
+export declare const IDSHeaderIneraAdminNav: React.FC<IDSHeaderIneraAdminNavProps>;
+export {};

package/components/header-inera-admin/header-inera-admin-nav.js

@@ -1,11 +1,16 @@
-import * as React from 'react';
-import { IDSHeaderIneraAdminNav as IDSHeaderIneraAdminNav$1 } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-nav-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin-nav.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraAdminNav = createComponent({
-    tagName: 'ids-header-inera-admin-nav',
-    elementClass: IDSHeaderIneraAdminNav$1,
-    react: React,
-});
+const IDSHeaderIneraAdminNav = ({ srText = "Huvudmeny", children }) => {
+    const headerContext = useHeaderContext();
+    const classNames = clsx("ids-header-inera-admin-nav", {
+        "ids-header-inera-admin-nav--fluid": headerContext?.fluid,
+        "ids-header-inera-admin-nav--unresponsive": headerContext?.unresponsive
+    });
+    return (jsx("nav", { className: classNames, "aria-label": srText, children: jsx("div", { className: "ids-header-inera-admin-nav__nav-items", children: children }) }));
+};
 
 export { IDSHeaderIneraAdminNav };

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

@@ -1,3 +1,15 @@
-import "@inera/ids-core/components/header-inera-admin/register.js";
-import { IDSHeaderIneraAdmin as Header } from "@inera/ids-core/components/header-inera-admin/header-inera-admin-element.js";
-export declare const IDSHeaderIneraAdmin: import("@lit-labs/react").ReactWebComponent<Header, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-inera-admin/header-inera-admin.css";
+export interface IDSHeaderIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
+    brandText?: string;
+    serviceName?: string;
+    fluid?: boolean;
+    unresponsive?: boolean;
+    items?: ReactNode;
+    avatar?: ReactNode;
+    skipToContent?: ReactNode;
+    brandLink?: ReactNode;
+    mobileMenu?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSHeaderIneraAdmin: React.FC<IDSHeaderIneraAdminProps>;

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

@@ -1,12 +1,27 @@
-import * as React from 'react';
-import '@inera/ids-core/components/header-inera-admin/register.js';
-import { IDSHeaderIneraAdmin as IDSHeaderIneraAdmin$1 } from '@inera/ids-core/components/header-inera-admin/header-inera-admin-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin.css';
+import clsx from 'clsx';
+import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraAdmin = createComponent({
-    tagName: "ids-header-inera-admin",
-    elementClass: IDSHeaderIneraAdmin$1,
-    react: React
-});
+const IDSHeaderIneraAdmin = ({ brandText = "", fluid = false, unresponsive = false, items, avatar, skipToContent, brandLink, serviceName = "EN TJÄNST FRÅN INERA", mobileMenu, className, children }) => {
+    const renderBrandText = () => {
+        if (brandLink && isValidElement(brandLink)) {
+            return (jsx("span", { className: "ids-header-inera-admin__brand-text-link", children: cloneElement(brandLink, {
+                    ...brandLink.props,
+                    children: brandText
+                }) }));
+        }
+        if (brandText) {
+            return jsx("h1", { className: "ids-header-inera-admin__brand-text", children: brandText });
+        }
+        return null;
+    };
+    return (jsx(HeaderProvider, { value: { unresponsive, fluid, hideRegionPicker: true, regionPickerText: "" }, children: jsxs("header", { className: clsx("ids-header-inera-admin", {
+                "ids-header-inera-admin--unresponsive": unresponsive,
+                "ids-header-inera-admin--fluid": fluid
+            }, className), children: [skipToContent && (jsx("div", { className: "ids-header-inera-admin__skip-to-content", children: skipToContent })), jsxs("div", { className: "ids-header-inera-admin__inner", children: [jsxs("div", { className: "ids-header-inera-admin__service-wrapper", children: [renderBrandText(), jsx("h2", { className: "ids-header-inera-admin__service-name", children: serviceName })] }), jsxs("div", { className: "ids-header-inera-admin__items", children: [items, " ", avatar, " ", mobileMenu] })] }), children] }) }));
+};
 
 export { IDSHeaderIneraAdmin };

package/components/header-patient/header-patient.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-patient/header-patient.css";
+interface IDSHeaderPatientProps extends React.HTMLAttributes<HTMLDivElement> {
+    srLabel?: string;
+    name?: string;
+    ssn?: string;
+    collapse?: boolean;
+    stack?: boolean;
+    buttons?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSHeaderPatient: React.FC<IDSHeaderPatientProps>;
+export {};

package/components/header-patient/header-patient.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import '@inera/ids-design/components/header-patient/header-patient.css';
+import { clsx } from 'clsx';
+
+const IDSHeaderPatient = ({ srLabel = "", name = "", ssn = "", collapse = false, stack = false, buttons, className, children }) => {
+    const isLong = useMemo(() => {
+        const trimmed = name.trim();
+        const whitespaceCount = (trimmed.match(/\s/g) || []).length;
+        return whitespaceCount > 2 && trimmed.length > 20;
+    }, [name]);
+    const classNames = clsx("ids-header-patient", {
+        "ids-header-patient--stack": stack,
+        "ids-header-patient--collapse": collapse,
+        "ids-header-patient--long-name": isLong
+    }, className);
+    return (jsx("section", { className: classNames, "aria-label": srLabel, children: jsxs("div", { className: "ids-patient-header__inner", children: [jsxs("div", { className: "ids-header-patient__content", children: [jsxs("div", { className: "ids-header-patient__id", children: [jsx("span", { className: "ids-header-patient__name", children: name }), jsx("span", { className: "ids-header-patient__ssn", children: ssn })] }), jsx("div", { className: "ids-header-patient__info", children: children })] }), buttons && jsx("div", { className: "ids-header-patient__buttons", children: buttons })] }) }));
+};
+
+export { IDSHeaderPatient };

package/components/link/link.d.ts

@@ -1,3 +1,17 @@
-import '@inera/ids-core/components/link/register.js';
-import { IDSLink as Link } from '@inera/ids-core/components/link/link-element.js';
-export declare const IDSLink: import("@lit-labs/react").ReactWebComponent<Link, {}>;
+import React, { ReactNode, HTMLAttributes, ReactElement } from "react";
+export type ColorPreset = 0 | 1 | 2 | 3 | 4;
+export interface IDSLinkProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    colorPreset?: ColorPreset;
+    light?: boolean;
+    active?: boolean;
+    activeIcon?: boolean;
+    block?: boolean;
+    underlined?: boolean;
+    noUnderline?: boolean;
+    small?: boolean;
+    large?: boolean;
+    focusAnchor?: boolean;
+    endItem?: ReactNode;
+    children: ReactElement;
+}
+export declare const IDSLink: React.FC<IDSLinkProps>;

package/components/link/link.js

@@ -1,12 +1,45 @@
-import * as React from 'react';
-import '@inera/ids-core/components/link/register.js';
-import { IDSLink as IDSLink$1 } from '@inera/ids-core/components/link/link-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, isValidElement, cloneElement } from 'react';
+import clsx from 'clsx';
 
-const IDSLink = createComponent({
-    tagName: 'ids-link',
-    elementClass: IDSLink$1,
-    react: React,
-});
+const containsIcon = (node) => {
+    if (Array.isArray(node)) {
+        return node.some(containsIcon);
+    }
+    if (isValidElement(node)) {
+        const className = node.props.className ?? "";
+        const hasIconClass = className.split(" ").some(cls => cls.startsWith("ids-icon-"));
+        return hasIconClass || containsIcon(node.props.children);
+    }
+    return false;
+};
+const IDSLink = ({ colorPreset = 0, light = false, active = false, activeIcon = false, block = false, underlined = false, noUnderline = false, small = false, large = false, focusAnchor = false, endItem, children, className, ...props }) => {
+    const ref = useRef(null);
+    if (!isValidElement(children)) {
+        console.error("IDSLink requires a single valid React element (e.g., <a> or <Link>) as a child.");
+        return null;
+    }
+    const hasIcon = containsIcon(children.props.children);
+    const classNames = clsx("ids-link", colorPreset > 0 && `ids-link--color-${colorPreset}`, {
+        "ids-link--icon": hasIcon,
+        "ids-link--active-icon": activeIcon,
+        "ids-link--light": light || colorPreset === 4,
+        "ids-link--block": block,
+        "ids-link--small": small,
+        "ids-link--large": large,
+        "ids-link--active": active,
+        "ids-link--underlined": underlined,
+        "ids-link--no-underline": noUnderline,
+        "ids-focus-anchor": focusAnchor
+    }, children.props.className, className);
+    const linkContent = (jsxs(Fragment, { children: [children.props.children, endItem && jsx("span", { style: { marginLeft: "0.5rem" }, children: endItem })] }));
+    return cloneElement(children, {
+        ...props,
+        className: classNames,
+        ref,
+        children: linkContent
+    });
+};
 
 export { IDSLink };

package/components/mobile/menu/item/mobile-item.d.ts

@@ -1,4 +1,15 @@
-import { IDSMobileMenuItem as MobileMenuitem } from '@inera/ids-core/components/mobile/menu/item/mobile-menu-item-element.js';
-export declare const IDSMobileMenuItem: import("@lit-labs/react").ReactWebComponent<MobileMenuitem, {
-    onDidToggleExpansion: string;
-}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/mobile-menu/mobile-menu.css";
+export interface IDSMobileMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    level?: number;
+    secondary?: boolean;
+    expanded?: boolean;
+    headline?: string;
+    link?: ReactNode;
+    active?: boolean;
+    showText?: string;
+    hideText?: string;
+    children?: ReactNode;
+    onToggleExpansion?: (isExpanded: boolean) => void;
+}
+export declare const IDSMobileMenuItem: React.FC<IDSMobileMenuItemProps>;

package/components/mobile/menu/item/mobile-item.js

@@ -1,14 +1,61 @@
-import * as React from 'react';
-import { IDSMobileMenuItem as IDSMobileMenuItem$1 } from '@inera/ids-core/components/mobile/menu/item/mobile-menu-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/mobile-menu/mobile-menu.css';
+import clsx from 'clsx';
+import { useElementId } from '../../../utils/hooks/useElementId.js';
 
-const IDSMobileMenuItem = createComponent({
-    tagName: 'ids-mobile-menu-item',
-    elementClass: IDSMobileMenuItem$1,
-    react: React,
-    events: {
-        onDidToggleExpansion: 'didToggleExpansion'
-    }
-});
+const IDSMobileMenuItem = ({ level = 1, secondary = false, expanded = false, headline = "", link, active = false, showText = "Visa meddelande", hideText = "Dölj meddelande", children, onToggleExpansion, ...props }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const subItemId = useRef(useElementId());
+    const contentRef = useRef(null);
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
+    const toggleExpanded = () => {
+        if (!!children || headline) {
+            const newExpanded = !isExpanded;
+            setIsExpanded(newExpanded);
+            onToggleExpansion?.(newExpanded);
+        }
+    };
+    const getItemLevelClass = () => {
+        switch (level) {
+            case 2:
+                return "ids-mobile-menu-item--2";
+            case 3:
+                return "ids-mobile-menu-item--3";
+            default:
+                return "ids-mobile-menu-item";
+        }
+    };
+    const renderItem = () => {
+        const commonProps = {
+            "aria-label": isExpanded ? hideText : showText,
+            onClick: toggleExpanded,
+            "aria-expanded": isExpanded,
+            "aria-controls": subItemId.current,
+            className: clsx("ids-mobile-menu-item__expand-btn", !!level && `ids-mobile-menu-item__expand-btn--level-${level}`, {
+                "ids-mobile-menu-item__expand-btn--headline": headline,
+                "ids-mobile-menu__chevron--expanded": isExpanded
+            })
+        };
+        if (headline) {
+            return jsx("button", { ...commonProps, children: headline });
+        }
+        else if (link && !!children) {
+            return (jsxs(Fragment, { children: [link, jsx("button", { ...commonProps })] }));
+        }
+        else {
+            return link;
+        }
+    };
+    return (jsxs("div", { ref: contentRef, className: clsx(getItemLevelClass(), isExpanded && "ids-mobile-menu-item--expanded", active && "ids-mobile-menu-item--active", secondary && "ids-mobile-menu-item--secondary"), ...props, children: [jsx("div", { className: `ids-mobile-menu-item__inner ${level && "ids-mobile-menu-item__inner--level-" + level}`, children: renderItem() }), jsx("div", { id: subItemId.current, className: "ids-mobile-menu-item__sub-items", children: React__default.Children.map(children, child => React__default.isValidElement(child)
+                    ? React__default.cloneElement(child, {
+                        "data-ids-sub-item": true,
+                        level: level + 1
+                    })
+                    : child) })] }));
+};
 
 export { IDSMobileMenuItem };

package/components/mobile/menu/mobile-menu.d.ts

@@ -1,3 +1,7 @@
-import '@inera/ids-core/components/mobile/menu/register.js';
-import { IDSMobileMenu as MobileMenu } from '@inera/ids-core/components/mobile/menu/mobile-menu-element.js';
-export declare const IDSMobileMenu: import("@lit-labs/react").ReactWebComponent<MobileMenu, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/mobile-menu/mobile-menu.css";
+export interface IDSMobileMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    variation?: number;
+    children: ReactNode;
+}
+export declare const IDSMobileMenu: React.FC<IDSMobileMenuProps>;

package/components/mobile/menu/mobile-menu.js

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import '@inera/ids-core/components/mobile/menu/register.js';
-import { IDSMobileMenu as IDSMobileMenu$1 } from '@inera/ids-core/components/mobile/menu/mobile-menu-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/mobile-menu/mobile-menu.css';
+import clsx from 'clsx';
 
-const IDSMobileMenu = createComponent({
-    tagName: 'ids-mobile-menu',
-    elementClass: IDSMobileMenu$1,
-    react: React
-});
+const IDSMobileMenu = ({ variation = 1, children, className, ...props }) => {
+    return (jsx("div", { className: clsx("ids-mobile-menu", {
+            "ids-mobile-menu--variation-2": variation === 2
+        }, className), ...props, children: children }));
+};
 
 export { IDSMobileMenu };

package/components/navigation/content/navigation-content.d.ts

@@ -1,3 +1,7 @@
-import '@inera/ids-core/components/navigation/content/register.js';
-import { IDSNavigationContent as NavigationContent } from '@inera/ids-core/components/navigation/content/navigation-content-element.js';
-export declare const IDSNavigationContent: import("@lit-labs/react").ReactWebComponent<NavigationContent, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/navigation/content/navigation-content.css";
+export interface IDSNavigationContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    children?: ReactNode;
+}
+export declare const IDSNavigationContent: React.FC<IDSNavigationContentProps>;

package/components/navigation/content/navigation-content.js

@@ -1,12 +1,21 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/navigation/content/register.js';
-import { IDSNavigationContent as IDSNavigationContent$1 } from '@inera/ids-core/components/navigation/content/navigation-content-element.js';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import '@inera/ids-design/components/navigation/content/navigation-content.css';
+import clsx from 'clsx';
 
-const IDSNavigationContent = createComponent({
-    tagName: 'ids-navigation-content',
-    elementClass: IDSNavigationContent$1,
-    react: React
-});
+const IDSNavigationContent = ({ headline = "", children, className, ...props }) => {
+    const enhancedLinks = React__default.Children.map(children, (link, i) => {
+        if (!React__default.isValidElement(link))
+            return link;
+        const cloned = React__default.cloneElement(link, {
+            key: `navigation-content-link-${i}`,
+            block: true,
+            noUnderline: true
+        });
+        return (jsx("div", { className: "ids-navigation-content__link-wrapper", children: cloned }, `link-wrapper-${i}`));
+    });
+    return (jsxs("div", { className: clsx("ids-navigation-content", className), ...props, children: [jsx("div", { className: "ids-navigation-content__border-top", children: jsx("div", { className: "ids-navigation-content__border-top-content" }) }), jsxs("nav", { className: "ids-navigation-content__inner", "aria-labelledby": "content-navigation-headline", id: "content-navigation-inner", children: [jsx("h2", { className: "ids-navigation-content__inner__headline", id: "content-navigation-headline", children: headline }), jsx("div", { className: "ids-navigation-content__links", children: enhancedLinks })] })] }));
+};
 
 export { IDSNavigationContent };

package/components/navigation/local/navigation-local.d.ts

@@ -1,3 +1,7 @@
-import '@inera/ids-core/components/navigation/local/register.js';
-import { IDSNavigationLocal as NavigationLocal } from '@inera/ids-core/components/navigation/local/navigation-local-element.js';
-export declare const IDSNavigationLocal: import("@lit-labs/react").ReactWebComponent<NavigationLocal, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/navigation/local/navigation-local.css";
+export interface IDSNavigationLocalProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    children?: ReactNode;
+}
+export declare const IDSNavigationLocal: React.FC<IDSNavigationLocalProps>;

package/components/navigation/local/navigation-local.js

@@ -1,12 +1,9 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/navigation/local/register.js';
-import { IDSNavigationLocal as IDSNavigationLocal$1 } from '@inera/ids-core/components/navigation/local/navigation-local-element.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/navigation/local/navigation-local.css';
+import clsx from 'clsx';
 
-const IDSNavigationLocal = createComponent({
-    tagName: 'ids-navigation-local',
-    elementClass: IDSNavigationLocal$1,
-    react: React
-});
+const IDSNavigationLocal = ({ headline = "", children, className, ...props }) => {
+    return (jsxs("div", { className: clsx("ids-navigation-local", className), ...props, children: [jsx("h2", { className: "ids-navigation-local__headline", children: headline }), jsx("div", { className: "ids-navigation-local__links", children: children })] }));
+};
 
 export { IDSNavigationLocal };

package/components/notification/badge/notification-badge.d.ts

@@ -1,7 +1,9 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/notification-badge/notification-badge.css";
-interface IDSNotificationBadgeProps {
-    outlined?: boolean;
+interface IDSNotificationBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    type?: "primary" | "secondary" | "neutral" | "info" | "attention" | "success" | "error";
+    icon?: string;
+    onClick?: () => void;
     children?: ReactNode;
 }
 export declare const IDSNotificationBadge: React.FC<IDSNotificationBadgeProps>;