@inera/ids-react 7.2.0 → 8.1.0

package/components/accordion/accordion.d.ts

@@ -9,6 +9,7 @@ interface IDSAccordionProps extends React.HTMLAttributes<HTMLDivElement> {
     noBorder?: boolean;
     onCollapsed?: () => void;
     onExpanded?: () => void;
+    accordions?: ReactNode;
     children?: ReactNode;
 }
 export declare const IDSAccordion: React.FC<IDSAccordionProps>;

package/components/accordion/accordion.js

@@ -1,47 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/accordion/accordion.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "s" : "m", expanded = false, lean = false, noBorder = false, onCollapsed, onExpanded, children, className, ...props }) => {
+const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "s" : "m", expanded = false, lean = false, noBorder = false, onCollapsed, onExpanded, accordions, 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 = useElementId();
     const accordionRef = useRef(null);
-    useEffect(() => {
-        handleChildren();
-        checkIfInsideIDSCard();
-    }, []);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    useEffect(() => {
-        setIsLean(insideIDSCard);
-    }, [insideIDSCard]);
-    const checkIfInsideIDSCard = () => {
-        if (accordionRef.current?.closest(".ids-card")) {
-            setInsideIDSCard(true);
-        }
-    };
-    const handleChildren = () => {
-        const nestedAccordions = accordionRef.current?.querySelectorAll(".ids-accordion");
-        if (nestedAccordions && nestedAccordions.length > 0) {
-            setHasChildren(true);
-            nestedAccordions.forEach(acc => {
-                acc.setAttribute("level", "2");
-                if (headlineSize === "m") {
-                    acc.setAttribute("headlineSize", "s");
-                }
-                else if (headlineSize === "s") {
-                    acc.setAttribute("headlineSize", "xs");
-                }
-            });
-        }
-    };
     const toggleExpansion = () => {
         setIsExpanded(prev => !prev);
         if (isExpanded) {
@@ -64,20 +34,12 @@ const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "
     return (jsxs("div", { ref: accordionRef, className: clsx("ids-accordion", {
             "ids-accordion--expanded": isExpanded,
             "ids-accordion--no-border": noBorder,
-            "ids-accordion--lean": lean || isLean,
-            "ids-accordion--has-children": hasChildren,
+            "ids-accordion--lean": lean,
+            "ids-accordion--has-children": !!accordions,
             "ids-accordion--is-child": level === 2
         }, 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,
-                            headlineSize: headlineSize === "m" ? "s" : headlineSize === "s" ? "xs" : "xs"
-                        });
-                    }
-                    return child;
-                }) })] }));
+                    }), children: headline }) }), jsxs("div", { "aria-hidden": !isExpanded, id: contentId, className: "ids-accordion__content", children: [children, accordions && accordions] })] }));
 };
 
 export { IDSAccordion };

package/components/alert/alert.d.ts

@@ -1,21 +1,21 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/alert/alert.css";
 interface IDSAlertProps extends React.HTMLAttributes<HTMLDivElement> {
-    collapsable?: boolean;
+    collapsible?: boolean;
     ribbon?: boolean;
     collapsed?: boolean;
     dismissible?: boolean;
     headline?: ReactNode;
+    collapsableHeadline?: string;
     compact?: boolean;
     type?: "info" | "attention" | "success" | "error";
     srCloseText?: string;
     srCollapseText?: string;
     srExpandText?: string;
-    srIconTitle?: string;
     noRole?: boolean;
     children?: ReactNode;
     onClose?: () => void;
-    onCollapsedChange?: (collapsed: boolean) => void;
+    onCollapsedChange?: (isCollapsed: boolean) => void;
 }
 export declare const IDSAlert: React.FC<IDSAlertProps>;
 export {};

package/components/alert/alert.js

@@ -3,8 +3,10 @@ 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';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-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 IDSAlert = ({ collapsible = false, ribbon = false, collapsed = false, dismissible = false, headline, collapsableHeadline = "", compact = false, type = "info", srCloseText = "Stäng alert", srCollapseText = "Minimera alertmeddelande", srExpandText = "Expandera alertmeddelande", noRole = false, onClose, onCollapsedChange, className, children, ...props }) => {
+    const contentId = useElementId();
     const [isCollapsed, setIsCollapsed] = useState(collapsed);
     useEffect(() => {
         setIsCollapsed(collapsed);
@@ -17,13 +19,14 @@ const IDSAlert = ({ collapsable = false, ribbon = false, collapsed = false, dism
     const handleClose = () => {
         onClose?.();
     };
-    return (jsx("div", { className: clsx("ids-alert", `ids-alert--${type}`, {
+    return (jsx("div", { role: !noRole ? "alert" : undefined, className: clsx("ids-alert", `ids-alert--${type}`, {
+            "ids-alert--collapsible": collapsible,
             "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 })] })) }));
+        }, className), ...props, children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", "aria-hidden": "true" }), 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: [collapsible && !compact && !ribbon && (jsx(Fragment, { children: jsx("button", { className: clsx("ids-alert__expand-button", {
+                                    "ids-alert__expand-button--expanded": !isCollapsed
+                                }), onClick: handleToggleCollapse, "aria-controls": contentId, "aria-expanded": !isCollapsed, children: jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: collapsableHeadline }), jsx("span", { className: "ids-alert__sr-only", children: isCollapsed ? srExpandText : srCollapseText })] }) }) })), !collapsible && (jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: headline })] })), dismissible && !collapsible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText }))] }), jsx("div", { id: contentId, children: !isCollapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
 };
 
 export { IDSAlert };

package/components/badge/badge.d.ts

@@ -1,10 +1,7 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/badge/badge.css";
-interface IDSBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+export 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>;
-export {};
+export declare function IDSBadge({ type, icon, children, className, ...props }: IDSBadgeProps): import("react/jsx-runtime").JSX.Element;

package/components/badge/badge.js

@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import '@inera/ids-design/components/badge/badge.css';
 import clsx from 'clsx';
 
-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] }) }));
-};
+function IDSBadge({ type = "primary", icon, children, className, ...props }) {
+    return (jsx("div", { className: clsx(`ids-badge ids-badge--${type}`, className), ...props, children: jsxs("div", { className: "ids-badge__inner", children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), icon && children && jsx("span", { className: "ids-badge__icon" }), children] }) }));
+}
 
 export { IDSBadge };

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

@@ -1,11 +1,9 @@
-import React, { ButtonHTMLAttributes, ReactNode } from "react";
+import React, { ButtonHTMLAttributes } from "react";
 import "@inera/ids-design/components/box-link/box-link.css";
-interface IDSBoxLinkProps extends React.HTMLAttributes<HTMLDivElement> {
+export 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 {};
+export declare function IDSBoxLink({ srButton, buttonIcon, onButtonClick, buttonProps, children, className, ...props }: IDSBoxLinkProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,12 +1,11 @@
-"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 = ({ srButton = "", buttonIcon = "", onButtonClick, children, className, buttonProps = {} }) => {
+function IDSBoxLink({ srButton = "", buttonIcon = "", onButtonClick, buttonProps = {}, children, className, ...props }) {
     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 }) }))] }) }));
-};
+    return (jsx("div", { className: clsx("ids-box-link", { "ids-box-link--has-button": !!onButtonClick }, className), ref: boxLinkRef, ...props, 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: buttonIcon ? `ids-icon-${buttonIcon}` : undefined, onClick: onButtonClick, "aria-label": srButton, ...buttonProps }) }))] }) }));
+}
 
 export { IDSBoxLink };

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,9 +1,8 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/breadcrumbs/breadcrumbs.css";
 interface IDSBreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
     lead?: string;
-    children?: ReactNode;
     mobileLink?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.LinkHTMLAttributes<HTMLLinkElement>>;
 }
-export declare const IDSBreadcrumbs: React.FC<IDSBreadcrumbsProps>;
+export declare function IDSBreadcrumbs({ lead, mobileLink, children, className, ...props }: IDSBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/breadcrumbs/breadcrumbs.js

@@ -1,20 +1,19 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 import '@inera/ids-design/components/breadcrumbs/breadcrumbs.css';
 import clsx from 'clsx';
 
-const IDSBreadcrumbs = ({ lead = "Du är här", mobileLink, children, className, ...props }) => {
+function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className, ...props }) {
     const getMobileLink = () => {
         if (mobileLink) {
-            return React__default.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
+            return React.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
         }
         else {
             return null;
         }
     };
     const getLinks = () => {
-        const links = React__default.Children.toArray(children);
+        const links = React.Children.toArray(children);
         return links.flatMap((child, index) => {
             const isLast = index === links.length - 1;
             if (isLast) {
@@ -26,6 +25,6 @@ const IDSBreadcrumbs = ({ lead = "Du är här", mobileLink, children, className,
         });
     };
     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,23 +1,21 @@
-import React, { ReactNode, ButtonHTMLAttributes } from "react";
+import { 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;
+    focusAnchor?: boolean;
     icon?: string;
+    iconButton?: boolean;
+    loading?: boolean;
     mBlock?: boolean;
     sBlock?: boolean;
-    loading?: boolean;
-    tertiary?: boolean;
     secondary?: boolean;
     size?: ButtonSize;
     submit?: boolean;
+    tertiary?: boolean;
     toggle?: boolean;
-    focusAnchor?: boolean;
-    children?: ReactNode;
 }
-export declare const IDSButton: React.ForwardRefExoticComponent<IDSButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const IDSButton: import("react").ForwardRefExoticComponent<IDSButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/components/button/button.js

@@ -1,44 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 
-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 IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
     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--active": active,
         "ids-button--fab": fab,
-        "ids-button--icon": ((icon || oldIcon) && !children) || iconButton,
+        "ids-button--icon": (icon && !children) || iconButton,
         "ids-button--secondary": secondary,
         "ids-button--tertiary": tertiary,
         "ids-button--disabled": disabled,
@@ -47,52 +18,7 @@ const IDSButton = forwardRef(({ active = false, block = false, disabled = false,
         "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] }));
+    return (jsxs("button", { ref: ref, className: classNames, "aria-disabled": disabled || loading, "aria-pressed": toggle, tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), children] }));
 });
 IDSButton.displayName = "IDSButton";
 

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/button-group/button-group.css";
 type Justify = "start" | "center" | "end";
 type Break = "s" | "m";
@@ -7,7 +7,6 @@ interface IDSButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     justify?: Justify;
     unresponsive?: boolean;
     break?: Break;
-    children?: ReactNode;
 }
-export declare const IDSButtonGroup: React.FC<IDSButtonGroupProps>;
+export declare function IDSButtonGroup({ rtl, justify, unresponsive, break: breakpoint, children, className, ...props }: IDSButtonGroupProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,12 +2,12 @@ import { jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/button-group/button-group.css';
 import clsx from 'clsx';
 
-const IDSButtonGroup = ({ rtl = false, justify = "start", unresponsive = false, break: breakpoint = "m", children, className, ...props }) => {
+function 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,14 +1,13 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/card/card.css";
 interface IDSCardProps extends React.HTMLAttributes<HTMLDivElement> {
-    focusCard?: boolean;
+    borderTop?: boolean;
+    cardLink?: React.ReactElement | React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ReactNode;
     fill?: boolean;
-    borderTop?: number;
-    lean?: boolean;
+    focusCard?: boolean;
     hideOnM?: boolean;
     hideOnS?: boolean;
-    cardLink?: ReactNode;
-    children?: ReactNode;
+    lean?: boolean;
 }
-export declare const IDSCard: React.FC<IDSCardProps>;
+export declare function IDSCard({ focusCard, fill, borderTop, lean, hideOnM, hideOnS, cardLink, children, className, ...props }: IDSCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/card/card.js

@@ -1,22 +1,28 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/card/card.css';
 import clsx from 'clsx';
 
-const IDSCard = ({ focusCard = false, fill = false, borderTop = 0, lean = false, hideOnM = false, hideOnS = false, cardLink, children, className, ...props }) => {
-    const enhancedCardLink = isValidElement(cardLink)
-        ? cloneElement(cardLink, {
+function IDSCard({ focusCard = false, fill = false, borderTop = false, lean = false, hideOnM = false, hideOnS = false, cardLink, children, className, ...props }) {
+    let enhancedCardLink = null;
+    if (isValidElement(cardLink)) {
+        enhancedCardLink = 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}`, {
+        });
+    }
+    else if (cardLink) {
+        const anchorProps = cardLink;
+        enhancedCardLink = jsx("a", { ...anchorProps, className: clsx(anchorProps.className, "ids-card--interactive-link") });
+    }
+    return (jsxs("div", { className: clsx("ids-card", {
             "ids-card--fill": fill,
-            "ids-card--focus-card": focusCard && !borderTop,
+            "ids-card--border-top": !!borderTop && !focusCard,
+            "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] }));
-};
+        }, className), ...props, children: [!!borderTop && !focusCard && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children }), enhancedCardLink] }));
+}
 
 export { IDSCard };

package/components/carousel/carousel-item.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 import '@inera/ids-design/components/carousel/carousel-item.css';
 import clsx from 'clsx';
 
-const IDSCarouselItem = ({ headline, step, description, children, className }) => {
+const IDSCarouselItem = ({ headline, step, description, children, className, ...props }) => {
     const isImageElement = (child) => {
-        return React__default.isValidElement(child) && child.type === "img";
+        return React.isValidElement(child) && child.type === "img";
     };
     const findCarouselImage = (children) => {
         return children.find(isImageElement);
@@ -14,11 +14,11 @@ const IDSCarouselItem = ({ headline, step, description, children, className }) =
     const getNonImageContent = (children) => {
         return children.filter(child => !isImageElement(child));
     };
-    const childrenArray = React__default.Children.toArray(children);
+    const childrenArray = React.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 }) }))] }))] })] }));
+    return (jsxs("div", { className: clsx("ids-carousel-item", className), ...props, 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,8 +1,6 @@
 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;