@inera/ids-react 6.2.0 → 7.0.0

package/components/accordion/accordion.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/accordion/accordion.css";
-interface IDSAccordionProps {
+interface IDSAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     headline: ReactNode;
     headlineSize?: "m" | "s" | "xs";
     level?: 1 | 2;

package/components/accordion/accordion.js

@@ -3,17 +3,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/accordion/accordion.css';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-// TODO common function
-const generateId = () => {
-    return `ids-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`;
-};
-const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "s" : "m", expanded = false, lean = false, onCollapsed, onExpanded, children }) => {
+const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "s" : "m", expanded = false, lean = false, onCollapsed, onExpanded, children, className, ...props }) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const [isLean, setIsLean] = useState(lean);
     const [insideIDSCard, setInsideIDSCard] = useState(false);
     const [hasChildren, setHasChildren] = useState(false);
-    const contentId = useRef(generateId());
+    const contentId = useElementId();
     const accordionRef = useRef(null);
     useEffect(() => {
         handleChildren();
@@ -69,7 +66,9 @@ const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "
             "ids-accordion--lean": lean || isLean,
             "ids-accordion--has-children": hasChildren,
             "ids-accordion--is-child": level === 2
-        }), children: [jsx("div", { className: `ids-accordion__button ids-accordion__button--${headlineSize}`, role: "button", tabIndex: 0, onClick: toggleExpansion, onKeyDown: onKeyPress, "aria-expanded": isExpanded, "aria-controls": contentId.current, children: jsx("div", { className: `ids-accordion__headline ids-accordion__headline-${level} ids-accordion__headline--${headlineSize} ${isExpanded ? "ids-accordion__headline--expanded" : ""} `, children: headline }) }), jsx("div", { "aria-hidden": !isExpanded, id: contentId.current, className: "ids-accordion__content", children: React__default.Children.map(children, child => {
+        }, className), ...props, children: [jsx("div", { className: `ids-accordion__button ids-accordion__button--${headlineSize}`, role: "button", tabIndex: 0, onClick: toggleExpansion, onKeyDown: onKeyPress, "aria-expanded": isExpanded, "aria-controls": contentId, children: jsx("div", { className: clsx("ids-accordion__headline", `ids-accordion__headline-${level}`, `ids-accordion__headline--${headlineSize}`, {
+                        "ids-accordion__headline--expanded": isExpanded
+                    }), children: headline }) }), jsx("div", { "aria-hidden": !isExpanded, id: contentId, className: "ids-accordion__content", children: React__default.Children.map(children, child => {
                     if (React__default.isValidElement(child)) {
                         return React__default.cloneElement(child, {
                             level: 2,

package/components/agent/agent.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-interface IDSAgentProps {
+interface IDSAgentProps extends React.HTMLAttributes<HTMLDivElement> {
     showText?: string;
     hideText?: string;
     collapsed?: boolean;

package/components/agent/agent.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { IDSAlertGlobal } from '../alert-global/alert-global.js';
 
-const IDSAgent = ({ showText = "Visa mer", hideText = "Visa mindre", collapsed = false, onCollapsedChange, children, actions, headline }) => {
+const IDSAgent = ({ showText = "Visa mer", hideText = "Visa mindre", collapsed = false, onCollapsedChange, actions, headline, children, className, ...props }) => {
     const [isCollapsed, setIsCollapsed] = useState(collapsed);
     useEffect(() => {
         setIsCollapsed(collapsed);
@@ -12,7 +12,7 @@ const IDSAgent = ({ showText = "Visa mer", hideText = "Visa mindre", collapsed =
         setIsCollapsed(!isCollapsed);
         onCollapsedChange?.(!isCollapsed);
     };
-    return (jsx(IDSAlertGlobal, { showText: showText, hideText: hideText, collapsed: isCollapsed, agent: true, actions: actions, headline: headline, noRole: true, onCollapsedChange: handleToggleCollapse, children: children }));
+    return (jsx(IDSAlertGlobal, { showText: showText, hideText: hideText, collapsed: isCollapsed, agent: true, actions: actions, headline: headline, noRole: true, onCollapsedChange: handleToggleCollapse, className: className, ...props, children: children }));
 };
 
 export { IDSAgent };

package/components/alert/alert.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/alert/alert.css";
-interface IDSAlertProps {
+interface IDSAlertProps extends React.HTMLAttributes<HTMLDivElement> {
     collapsable?: boolean;
     ribbon?: boolean;
     collapsed?: boolean;

package/components/alert/alert.js

@@ -2,8 +2,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import '@inera/ids-design/components/alert/alert.css';
+import clsx from 'clsx';
 
-const IDSAlert = ({ collapsable = false, ribbon = false, collapsed = false, dismissible = false, headline, compact = false, type = "info", srCloseText = "Stäng alert", srCollapseText = "Minimera alertmeddelande", srExpandText = "Expandera alertmeddelande", noRole = false, srIconTitle = "", onClose, onCollapsedChange, children }) => {
+const IDSAlert = ({ collapsable = false, ribbon = false, collapsed = false, dismissible = false, headline, compact = false, type = "info", srCloseText = "Stäng alert", srCollapseText = "Minimera alertmeddelande", srExpandText = "Expandera alertmeddelande", noRole = false, srIconTitle = "", onClose, onCollapsedChange, className, children, ...props }) => {
     const [isCollapsed, setIsCollapsed] = useState(collapsed);
     useEffect(() => {
         setIsCollapsed(collapsed);
@@ -16,7 +17,13 @@ const IDSAlert = ({ collapsable = false, ribbon = false, collapsed = false, dism
     const handleClose = () => {
         onClose?.();
     };
-    return (jsx("div", { className: `ids-alert ids-alert--${type} ${compact ? "ids-alert--compact" : ""} ${ribbon ? "ids-alert--ribbon" : ""} ${isCollapsed ? "ids-alert--collapsed" : ""}`, role: !noRole ? "alert" : undefined, children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", title: srIconTitle }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", title: srIconTitle }), jsx("div", { className: "ids-alert__headline", children: headline })] }), dismissible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText })), collapsable && !compact && !ribbon && (jsx("button", { className: `ids-alert__expand ${!isCollapsed ? "ids-alert__expand--expanded" : ""}`, onClick: handleToggleCollapse, "aria-expanded": !isCollapsed, "aria-label": isCollapsed ? srExpandText : srCollapseText }))] }), !isCollapsed && jsx("div", { className: "ids-alert__content", children: children })] })) }));
+    return (jsx("div", { className: clsx("ids-alert", `ids-alert--${type}`, {
+            "ids-alert--collapsed": isCollapsed,
+            "ids-alert--ribbon": ribbon,
+            "ids-alert--compact": compact
+        }, className), role: !noRole ? "alert" : undefined, ...props, children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", title: srIconTitle }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", title: srIconTitle }), jsx("div", { className: "ids-alert__headline", children: headline })] }), dismissible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText })), collapsable && !compact && !ribbon && (jsx("button", { className: clsx("ids-alert__expand", {
+                                "ids-alert__expand--expanded": !isCollapsed
+                            }), onClick: handleToggleCollapse, "aria-expanded": !isCollapsed, "aria-label": isCollapsed ? srExpandText : srCollapseText }))] }), !isCollapsed && jsx("div", { className: "ids-alert__content", children: children })] })) }));
 };
 
 export { IDSAlert };

package/components/alert-global/alert-global.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/alert-global/alert-global.css";
-interface IDSAlertGlobalProps {
+interface IDSAlertGlobalProps extends React.HTMLAttributes<HTMLDivElement> {
     agent?: boolean;
     showText?: string;
     hideText?: string;
     collapsed?: boolean;
     noRole?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
-    icon?: ReactNode;
+    icon?: string;
     children?: ReactNode;
     actions?: ReactNode;
     headline?: ReactNode;

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

@@ -3,12 +3,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import '@inera/ids-design/components/alert-global/alert-global.css';
 import clsx from 'clsx';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-// TODO common function
-const generateId = () => {
-    return `ids-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`;
-};
-const IDSAlertGlobal = ({ agent = false, showText = "Visa meddelande", hideText = "Dölj meddelande", collapsed = false, noRole = false, onCollapsedChange, icon, children, actions, headline }) => {
+const IDSAlertGlobal = ({ agent = false, showText = "Visa meddelande", hideText = "Dölj meddelande", collapsed = false, noRole = false, onCollapsedChange, icon = "", actions, headline, children, className, ...props }) => {
     const [isCollapsed, setIsCollapsed] = useState(collapsed);
     useEffect(() => {
         setIsCollapsed(collapsed);
@@ -17,11 +14,13 @@ const IDSAlertGlobal = ({ agent = false, showText = "Visa meddelande", hideText
         setIsCollapsed(!isCollapsed);
         onCollapsedChange?.(!isCollapsed);
     };
-    const contentId = generateId();
+    const contentId = useElementId();
     return (jsx("div", { role: noRole ? null : "alert", className: clsx("ids-alert-global", {
             "ids-alert-global--collapsed": isCollapsed,
             "ids-alert-global--agent": agent
-        }), children: jsxs("div", { className: "ids-alert-global__inner", children: [jsxs("div", { className: "ids-alert-global__header", children: [jsxs("div", { className: `ids-alert-global__icon-headline ${agent ? "ids-alert-global__icon-headline--agent" : ""}`, children: [icon && jsx("div", { className: "ids-alert-global__icon", children: icon }), jsx("div", { className: "ids-alert-global__headline", children: headline })] }), jsx("button", { className: clsx("ids-alert-global__button", {
+        }, className), ...props, children: jsxs("div", { className: "ids-alert-global__inner", children: [jsxs("div", { className: "ids-alert-global__header", children: [jsxs("div", { className: clsx("ids-alert-global__icon-headline", {
+                                "ids-alert-global__icon-headline--agent": agent
+                            }), children: [icon && (jsx("div", { className: "ids-alert-global__icon", children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-alert-global__headline", children: headline })] }), jsx("button", { className: clsx("ids-alert-global__button", {
                                 "ids-alert-global__button--expanded": !isCollapsed
                             }), "aria-controls": contentId, "aria-label": isCollapsed ? showText : hideText, "aria-expanded": !isCollapsed, onClick: handleToggleCollapse, children: jsx("span", { className: "ids-alert-global__button-text", children: !isCollapsed ? hideText : showText }) })] }), jsx("div", { id: contentId, className: "ids-alert-global__content", children: children }), jsx("div", { className: "ids-alert-global__sub-content", children: actions })] }) }));
 };

package/components/badge/badge.d.ts

@@ -1,8 +1,9 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/badge/badge.css";
-interface IDSBadgeProps {
-    type?: "primary" | "neutral" | "info" | "attention" | "success" | "error" | "secondary";
-    icon?: ReactNode;
+interface IDSBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    type?: "primary" | "secondary" | "neutral" | "info" | "attention" | "success" | "error";
+    icon?: string;
+    oldIcon?: ReactNode;
     children?: ReactNode;
 }
 export declare const IDSBadge: React.FC<IDSBadgeProps>;

package/components/badge/badge.js

@@ -1,8 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import '@inera/ids-design/components/badge/badge.css';
+import clsx from 'clsx';
 
-const IDSBadge = ({ type = "primary", icon, children }) => {
-    return (jsxs("div", { className: `ids-badge ids-badge--${type}`, children: [icon && jsx("div", { className: "ids-badge__icon", children: icon }), children] }));
+const IDSBadge = ({ type = "primary", icon, oldIcon, children, className, ...props }) => {
+    return (jsx("div", { className: clsx(`ids-badge ids-badge--${type}`, className), ...props, children: jsxs("div", { className: "ids-badge__inner", children: [oldIcon, icon && jsx("span", { className: `ids-icon-${icon}` }), (icon || oldIcon) && children && jsx("span", { className: "ids-badge__icon" }), children] }) }));
 };
 
 export { IDSBadge };

package/components/box-link/box-link.d.ts

@@ -1,3 +1,11 @@
-import '@inera/ids-core/components/box-link/register.js';
-import { IDSBoxLink as BoxLink } from '@inera/ids-core/components/box-link/box-link-element.js';
-export declare const IDSBoxLink: import("@lit-labs/react").ReactWebComponent<BoxLink, {}>;
+import React, { ButtonHTMLAttributes, ReactNode } from "react";
+import "@inera/ids-design/components/box-link/box-link.css";
+interface IDSBoxLinkProps extends React.HTMLAttributes<HTMLDivElement> {
+    srButton?: string;
+    buttonIcon?: string;
+    onButtonClick?: () => void;
+    buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    children: ReactNode;
+}
+export declare const IDSBoxLink: React.FC<IDSBoxLinkProps>;
+export {};

package/components/box-link/box-link.js

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import '@inera/ids-core/components/box-link/register.js';
-import { IDSBoxLink as IDSBoxLink$1 } from '@inera/ids-core/components/box-link/box-link-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import '@inera/ids-design/components/box-link/box-link.css';
+import clsx from 'clsx';
 
-const IDSBoxLink = createComponent({
-    tagName: 'ids-box-link',
-    elementClass: IDSBoxLink$1,
-    react: React,
-});
+const IDSBoxLink = ({ srButton = "", buttonIcon = "", onButtonClick, children, className, buttonProps = {} }) => {
+    const boxLinkRef = useRef(null);
+    return (jsx("div", { className: clsx("ids-box-link", className), ref: boxLinkRef, children: jsxs("div", { className: "ids-box-link__inner", children: [jsx("span", { className: "ids-box-link__link", children: children }), !!onButtonClick && (jsx("div", { className: "ids-box-link__button", children: jsx("button", { className: `ids-icon-${buttonIcon}`, onClick: onButtonClick, "aria-label": srButton, ...buttonProps }) }))] }) }));
+};
 
 export { IDSBoxLink };

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/breadcrumbs/breadcrumbs.css";
-interface IDSBreadcrumbsProps {
+interface IDSBreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
     lead?: string;
     children?: ReactNode;
     mobileLink?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.LinkHTMLAttributes<HTMLLinkElement>>;

package/components/breadcrumbs/breadcrumbs.js

@@ -1,8 +1,10 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import '@inera/ids-design/components/breadcrumbs/breadcrumbs.css';
+import clsx from 'clsx';
 
-const IDSBreadcrumbs = ({ lead = "Du är här", mobileLink, children }) => {
+const IDSBreadcrumbs = ({ lead = "Du är här", mobileLink, children, className, ...props }) => {
     const getMobileLink = () => {
         if (mobileLink) {
             return React__default.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
@@ -23,7 +25,7 @@ const IDSBreadcrumbs = ({ lead = "Du är här", mobileLink, children }) => {
             }
         });
     };
-    return (jsxs("nav", { className: "ids-breadcrumbs", "aria-label": lead, children: [jsxs("ol", { className: "ids-breadcrumbs__desktop", children: [jsx("li", { className: "ids-breadcrumbs__lead", children: lead }), getLinks()] }), jsx("ol", { className: "ids-breadcrumbs__mobile", children: jsxs("li", { className: "ids-breadcrumbs__mobile-links", children: [jsx("span", { className: "ids-breadcrumbs__icon" }), getMobileLink()] }) })] }));
+    return (jsxs("nav", { className: clsx("ids-breadcrumbs", className), "aria-label": lead, ...props, children: [jsxs("ol", { className: "ids-breadcrumbs__desktop", children: [jsx("li", { className: "ids-breadcrumbs__lead", children: lead }), getLinks()] }), jsx("ol", { className: "ids-breadcrumbs__mobile", children: jsxs("li", { className: "ids-breadcrumbs__mobile-links", children: [jsx("span", { className: "ids-breadcrumbs__icon" }), getMobileLink()] }) })] }));
 };
 
 export { IDSBreadcrumbs };

package/components/button/button.d.ts

@@ -1,5 +1,23 @@
-import '@inera/ids-core/components/button/register.js';
-import { IDSButton as IDSComponent } from '@inera/ids-core/components/button/button-element.js';
-export declare const IDSButton: import("@lit-labs/react").ReactWebComponent<IDSComponent, {
-    onClicked: string;
-}>;
+import React, { ReactNode, ButtonHTMLAttributes } from "react";
+type ButtonSize = "s" | "m" | "l";
+export interface IDSButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    active?: boolean;
+    block?: boolean;
+    disabled?: boolean;
+    fab?: boolean;
+    iconButton?: boolean;
+    oldIcon?: ReactNode;
+    icon?: string;
+    mBlock?: boolean;
+    sBlock?: boolean;
+    loading?: boolean;
+    tertiary?: boolean;
+    secondary?: boolean;
+    size?: ButtonSize;
+    submit?: boolean;
+    toggle?: boolean;
+    focusAnchor?: boolean;
+    children?: ReactNode;
+}
+export declare const IDSButton: React.ForwardRefExoticComponent<IDSButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/components/button/button.js

@@ -1,15 +1,98 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/button/register.js';
-import { IDSButton as IDSButton$1 } from '@inera/ids-core/components/button/button-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
 
-const IDSButton = createComponent({
-    tagName: 'ids-button',
-    elementClass: IDSButton$1,
-    react: React,
-    events: {
-        onClicked: 'clicked'
-    }
+const IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", oldIcon = false, mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const oldIconRef = useRef(null);
+    const handleMouseEnter = () => {
+        if (!disabled && oldIconRef.current) {
+            setIconHoveredAttributes(oldIconRef.current);
+        }
+    };
+    const handleMouseLeave = () => {
+        if (oldIconRef.current) {
+            setOldIconAttributes(oldIconRef.current);
+        }
+    };
+    const handleFocus = () => {
+        setIsFocused(true);
+        if (!disabled && oldIconRef.current) {
+            setIconHoveredAttributes(oldIconRef.current);
+        }
+    };
+    const handleBlur = () => {
+        setIsFocused(false);
+    };
+    useEffect(() => {
+        if (oldIconRef.current) {
+            oldIconRef.current.setAttribute("size", "s");
+            if (!fab) {
+                setOldIconAttributes(oldIconRef.current);
+            }
+        }
+    }, []);
+    const classNames = clsx("ids-button", size && `ids-button--${size}`, {
+        "ids-button--m-block": mBlock,
+        "ids-button--s-block": sBlock,
+        "ids-button--active": active || isFocused,
+        "ids-button--fab": fab,
+        "ids-button--icon": ((icon || oldIcon) && !children) || iconButton,
+        "ids-button--secondary": secondary,
+        "ids-button--tertiary": tertiary,
+        "ids-button--disabled": disabled,
+        "ids-button--block": block,
+        "ids-button--submit": submit,
+        "ids-button--loading": loading,
+        "ids-focus-anchor": focusAnchor
+    }, className);
+    const setOldIconAttributes = (iconComponent) => {
+        if (iconComponent && !fab) {
+            let color = "var(--IDS-BUTTON__ICON-COLOR)";
+            let color2 = "var(--IDS-BUTTON__ICON-COLOR-2)";
+            if (secondary) {
+                color = active
+                    ? "var(--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR)"
+                    : "var(--IDS-BUTTON--SECONDARY__ICON-COLOR)";
+                color2 = active
+                    ? "var(--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR-2)"
+                    : "var(--IDS-BUTTON--SECONDARY__ICON-COLOR-2)";
+            }
+            else if (tertiary) {
+                color = "var(--IDS-BUTTON--TERTIARY__ICON-COLOR)";
+                color2 = "var(--IDS-BUTTON--TERTIARY__ICON-COLOR-2)";
+            }
+            if (disabled) {
+                color = "var(--IDS-BUTTON--DISABLED__COLOR)";
+                color2 = "var(--IDS-BUTTON--DISABLED__COLOR)";
+            }
+            setOldIconColors(iconComponent, color, color2);
+        }
+    };
+    const setIconHoveredAttributes = (iconComponent) => {
+        if (oldIcon && !fab) {
+            let color = "var(--IDS-BUTTON--ACTIVE__ICON-COLOR)";
+            let color2 = "var(--IDS-BUTTON--ACTIVE__ICON-COLOR-2)";
+            if (secondary) {
+                color = "var(--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR)";
+                color2 = "var(--IDS-BUTTON--SECONDARY-ACTIVE__ICON-COLOR-2)";
+            }
+            else if (tertiary) {
+                color = "var(--IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR)";
+                color2 = "var(--IDS-BUTTON--TERTIARY-ACTIVE__ICON-COLOR-2)";
+            }
+            setOldIconColors(iconComponent, color, color2);
+        }
+    };
+    const setOldIconColors = (iconComponent, color, color2) => {
+        iconComponent.setAttribute("color", color);
+        iconComponent.setAttribute("color2", color2);
+    };
+    const renderOldIcon = oldIcon && React__default.isValidElement(oldIcon)
+        ? React__default.cloneElement(oldIcon, { ref: oldIconRef })
+        : oldIcon;
+    return (jsxs("button", { ref: ref, className: classNames, "aria-disabled": disabled || loading, "aria-pressed": toggle, tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), oldIcon && renderOldIcon, children] }));
 });
 
 export { IDSButton };

package/components/button-group/button-group.d.ts

@@ -1,3 +1,13 @@
-import '@inera/ids-core/components/button-group/register.js';
-import { IDSButtonGroup as Group } from '@inera/ids-core/components/button-group/button-group-element.js';
-export declare const IDSButtonGroup: import("@lit-labs/react").ReactWebComponent<Group, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/button-group/button-group.css";
+type Justify = "start" | "center" | "end";
+type Break = "s" | "m";
+interface IDSButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    rtl?: boolean;
+    justify?: Justify;
+    unresponsive?: boolean;
+    break?: Break;
+    children?: ReactNode;
+}
+export declare const IDSButtonGroup: React.FC<IDSButtonGroupProps>;
+export {};

package/components/button-group/button-group.js

@@ -1,12 +1,13 @@
-import * as React from 'react';
-import '@inera/ids-core/components/button-group/register.js';
-import { IDSButtonGroup as IDSButtonGroup$1 } from '@inera/ids-core/components/button-group/button-group-element.js';
-import { createComponent } from '@lit-labs/react';
+import { jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/button-group/button-group.css';
+import clsx from 'clsx';
 
-const IDSButtonGroup = createComponent({
-    tagName: 'ids-button-group',
-    elementClass: IDSButtonGroup$1,
-    react: React,
-});
+const IDSButtonGroup = ({ rtl = false, justify = "start", unresponsive = false, break: breakpoint = "m", children, className, ...props }) => {
+    const classNames = clsx("ids-button-group", `ids-button-group--break-${breakpoint}`, `ids-button-group--${justify}`, {
+        "ids-button-group--rtl": rtl,
+        "ids-button-group--unresponsive": unresponsive
+    }, className);
+    return (jsx("div", { className: classNames, ...props, children: children }));
+};
 
 export { IDSButtonGroup };

package/components/card/card.d.ts

@@ -1,12 +1,13 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/card/card.css";
-interface IDSCardProps {
-    fill?: number;
+interface IDSCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    focusCard?: boolean;
+    fill?: boolean;
     borderTop?: number;
     lean?: boolean;
     hideOnM?: boolean;
     hideOnS?: boolean;
-    interactive?: boolean;
+    cardLink?: ReactNode;
     children?: ReactNode;
 }
 export declare const IDSCard: React.FC<IDSCardProps>;

package/components/card/card.js

@@ -1,14 +1,22 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/card/card.css';
+import clsx from 'clsx';
 
-const IDSCard = ({ fill = 0, borderTop = 0, lean = false, hideOnM = false, hideOnS = false, interactive = false, children }) => {
-    return (jsxs("div", { className: `ids-card
-        ${hideOnM ? "ids-card--hide-on-m" : ""}
-        ${hideOnS ? "ids-card--hide-on-s" : ""}
-        ${fill > 0 && !borderTop ? `ids-card--fill-${fill}` : ""}
-        ${borderTop ? `ids-card--border-top-${borderTop}` : ""}
-        ${lean ? "ids-card--lean" : ""}
-        ${interactive ? "ids-card--interactive" : ""}`.trim(), children: [borderTop > 0 && fill === 0 && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children })] }));
+const IDSCard = ({ focusCard = false, fill = false, borderTop = 0, lean = false, hideOnM = false, hideOnS = false, cardLink, children, className, ...props }) => {
+    const enhancedCardLink = isValidElement(cardLink)
+        ? cloneElement(cardLink, {
+            className: clsx(cardLink.props.className, "ids-card--interactive-link")
+        })
+        : cardLink;
+    return (jsxs("div", { className: clsx("ids-card", !focusCard && borderTop && `ids-card--border-top-${borderTop}`, {
+            "ids-card--fill": fill,
+            "ids-card--focus-card": focusCard && !borderTop,
+            "ids-card--hide-on-m": hideOnM,
+            "ids-card--hide-on-s": hideOnS,
+            "ids-card--lean": lean,
+            "ids-card--interactive": !!cardLink
+        }, className), ...props, children: [borderTop > 0 && !focusCard && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children }), enhancedCardLink] }));
 };
 
 export { IDSCard };

package/components/carousel/carousel-item.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import "@inera/ids-design/components/carousel/carousel-item.css";
+interface IDSCarouselItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    step?: string;
+    description?: string;
+    children: React.ReactNode;
+}
+export declare const IDSCarouselItem: React.FC<IDSCarouselItemProps>;
+export {};

package/components/carousel/carousel-item.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import '@inera/ids-design/components/carousel/carousel-item.css';
+import clsx from 'clsx';
+
+const IDSCarouselItem = ({ headline, step, description, children, className }) => {
+    const isImageElement = (child) => {
+        return React__default.isValidElement(child) && child.type === "img";
+    };
+    const findCarouselImage = (children) => {
+        return children.find(isImageElement);
+    };
+    const getNonImageContent = (children) => {
+        return children.filter(child => !isImageElement(child));
+    };
+    const childrenArray = React__default.Children.toArray(children);
+    const image = findCarouselImage(childrenArray);
+    const otherContent = getNonImageContent(childrenArray);
+    const hasFooterContent = description || step;
+    return (jsxs("div", { className: clsx("ids-carousel-item", className), children: [jsx("div", { className: "ids-carousel-item__image", children: image }), jsxs("div", { className: "ids-carousel-item__content", children: [headline && jsx("h2", { className: "ids-carousel-item__headline", children: headline }), otherContent, hasFooterContent && (jsxs("div", { className: "ids-carousel-item__footer", children: [description && jsx("div", { className: "ids-carousel-item__description", children: description }), step && (jsx("div", { className: "ids-carousel-item__step", children: jsx("div", { className: "ids-tag", children: step }) }))] }))] })] }));
+};
+
+export { IDSCarouselItem };

package/components/carousel/carousel.d.ts

@@ -1,5 +1,11 @@
-import '@inera/ids-core/components/carousel/register.js';
-import { IDSCarousel as Carousel } from '@inera/ids-core/components/carousel/carousel-element.js';
-import { IDSCarouselItem as Carouseltem } from '@inera/ids-core/components/carousel/carousel-item/carousel-item-element.js';
-export declare const IDSCarousel: import("@lit-labs/react").ReactWebComponent<Carousel, {}>;
-export declare const IDSCarouselItem: import("@lit-labs/react").ReactWebComponent<Carouseltem, {}>;
+import React from "react";
+import "@inera/ids-design/components/carousel/carousel.css";
+interface IDSCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    autoplay?: boolean;
+    autoplayDelay?: number;
+    srNextLabel?: string;
+    srPrevLabel?: string;
+    children: React.ReactNode;
+}
+export declare const IDSCarousel: React.FC<IDSCarouselProps>;
+export {};