@inera/ids-react 8.0.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, { 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.Children.map(children, child => {
-                    if (React.isValidElement(child)) {
-                        return React.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/badge/badge.d.ts

@@ -1,9 +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;
-    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, children, className, ...props }) => {
+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 = {}, ...props }) => {
+function IDSBoxLink({ srButton = "", buttonIcon = "", onButtonClick, buttonProps = {}, children, className, ...props }) {
     const boxLinkRef = useRef(null);
-    return (jsx("div", { className: clsx("ids-box-link", 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: `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,10 +1,9 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 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.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
@@ -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,4 +1,4 @@
-import { ReactNode, ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes } from "react";
 type ButtonSize = "s" | "m" | "l";
 export interface IDSButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     active?: boolean;
@@ -16,7 +16,6 @@ export interface IDSButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
     submit?: boolean;
     tertiary?: boolean;
     toggle?: boolean;
-    children?: ReactNode;
 }
 export declare const IDSButton: import("react").ForwardRefExoticComponent<IDSButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

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> {
     borderTop?: boolean;
-    cardLink?: ReactNode;
+    cardLink?: React.ReactElement | React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ReactNode;
     fill?: boolean;
     focusCard?: boolean;
     hideOnM?: boolean;
     hideOnS?: boolean;
     lean?: boolean;
-    children?: ReactNode;
 }
-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,14 +1,19 @@
-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 = false, 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;
+        });
+    }
+    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--border-top": !!borderTop && !focusCard,
@@ -18,6 +23,6 @@ const IDSCard = ({ focusCard = false, fill = false, borderTop = false, lean = fa
             "ids-card--lean": lean,
             "ids-card--interactive": !!cardLink
         }, 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/date-label/date-label.d.ts

@@ -1,4 +1,4 @@
-import React, { DetailedHTMLProps, TimeHTMLAttributes } from "react";
+import { DetailedHTMLProps, TimeHTMLAttributes } from "react";
 import "@inera/ids-design/components/date-label/date-label.css";
 interface IDSDateLabelProps extends DetailedHTMLProps<TimeHTMLAttributes<HTMLTimeElement>, HTMLTimeElement> {
     date?: Date | null;
@@ -13,5 +13,5 @@ interface IDSDateLabelProps extends DetailedHTMLProps<TimeHTMLAttributes<HTMLTim
     dayTo?: number;
     srText?: string;
 }
-export declare const IDSDateLabel: React.FC<IDSDateLabelProps>;
+export declare function IDSDateLabel({ date, year, month, day, monthLabel, dateTo, yearTo, monthTo, monthToLabel, srText, dayTo, children, className, ...props }: IDSDateLabelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/date-label/date-label.js

@@ -1,40 +1,18 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
 import '@inera/ids-design/components/date-label/date-label.css';
 import { getDayAsText, getMonthAsSweText } from '../utils/utils.js';
 import clsx from 'clsx';
 
-const IDSDateLabel = ({ date = null, year = 0, month = 0, day = 0, monthLabel = "", dateTo = null, yearTo = 0, monthTo = 0, monthToLabel = "", srText = "", dayTo = 0, className, ...props }) => {
-    const [presentedDate, setPresentedDate] = useState(date ? new Date(date) : null);
-    const [presentedToDate, setPresentedToDate] = useState(dateTo ? new Date(dateTo) : null);
-    useEffect(() => {
-        if (date) {
-            setPresentedDate(new Date(date));
-        }
-    }, [date]);
-    useEffect(() => {
-        if (dateTo) {
-            setPresentedToDate(new Date(dateTo));
-        }
-    }, [dateTo]);
-    const getYear = () => (presentedDate ? presentedDate.getFullYear() : year);
-    const getYearTo = () => (presentedToDate ? presentedToDate.getFullYear() : yearTo);
-    const getMonth = () => (presentedDate ? presentedDate.getMonth() + 1 : month);
-    const getMonthTo = () => (presentedToDate ? presentedToDate.getMonth() + 1 : monthTo);
-    const getDay = () => {
-        const dayNumber = presentedDate ? presentedDate.getDate() : day;
-        return getDayAsText(dayNumber);
-    };
-    const getDayTo = () => {
-        const dayNumber = presentedToDate ? presentedToDate.getDate() : dayTo;
-        return getDayAsText(dayNumber);
-    };
+function IDSDateLabel({ date = null, year = 0, month = 0, day = 0, monthLabel = "", dateTo = null, yearTo = 0, monthTo = 0, monthToLabel = "", srText = "", dayTo = 0, children, className, ...props }) {
+    const getYear = () => (date ? date.getFullYear() : year);
+    const getYearTo = () => (dateTo ? dateTo.getFullYear() : yearTo);
+    const getMonth = () => (date ? date.getMonth() + 1 : month);
+    const getMonthTo = () => (dateTo ? dateTo.getMonth() + 1 : monthTo);
+    const getDay = () => (date ? getDayAsText(date.getDate()) : getDayAsText(day));
+    const getDayTo = () => (dateTo ? getDayAsText(dateTo.getDate()) : getDayAsText(dayTo));
     const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
     const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
-    // dateTime={`${getDay()}-${getMonth().toString().padStart(2, "0")}-${getYear()}`}
-    // dateTime={`${getDayTo()}-${getMonthTo().toString().padStart(2, "0")}-${getYearTo()}`}
-    return (jsxs("span", { className: "ids-date-label", "aria-label": srText, ...props, role: "text", children: [jsxs("time", { className: clsx("ids-date-label__time", className), "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }), !!(!!dateTo || (dayTo && monthTo && yearTo)) && (jsxs("time", { className: clsx("ids-date-label__time ids-date-label__time--separator", className), "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDayTo() }), jsx("span", { className: "ids-date-label__month", children: getMonthToText() }), jsx("span", { className: "ids-date-label__year", children: getYearTo() })] }))] }));
-};
+    return (jsxs("span", { className: clsx("ids-date-label", className), "aria-label": srText, ...props, role: "text", children: [jsxs("time", { className: "ids-date-label__time", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDay() }), jsx("span", { className: "ids-date-label__month", children: getMonthText() }), jsx("span", { className: "ids-date-label__year", children: getYear() })] }), !!(dateTo || (dayTo && monthTo && yearTo)) && (jsxs("time", { className: "ids-date-label__time ids-date-label__time--separator", "aria-hidden": "true", children: [jsx("span", { className: "ids-date-label__day", children: getDayTo() }), jsx("span", { className: "ids-date-label__month", children: getMonthToText() }), jsx("span", { className: "ids-date-label__year", children: getYearTo() })] }))] }));
+}
 
 export { IDSDateLabel };

package/components/dialog/dialog.d.ts

@@ -19,5 +19,5 @@ interface IDSDialogProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     onVisibilityChange?: (isVisible: boolean) => void;
 }
-export declare const IDSDialog: React.FC<IDSDialogProps>;
+export declare function IDSDialog({ show, srClose, dismissible, autoFocus, noOverlay, noFocusTrap, keepScrollbar, persistent, noScrollAreaFocus, width, maxWidth, height, trigger, headline, actions, children, className, onVisibilityChange, ...props }: IDSDialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/dialog/dialog.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/dialog/dialog.css';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import clsx from 'clsx';
 
-const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, autoFocus = true, noOverlay = false, noFocusTrap = false, keepScrollbar = false, persistent = false, noScrollAreaFocus = false, width = "", maxWidth = "", height = "", trigger, headline, actions, children, className, onVisibilityChange, ...props }) => {
+function IDSDialog({ show = false, srClose = "Stäng", dismissible = false, autoFocus = true, noOverlay = false, noFocusTrap = false, keepScrollbar = false, persistent = false, noScrollAreaFocus = false, width = "", maxWidth = "", height = "", trigger, headline, actions, children, className, onVisibilityChange, ...props }) {
     const [isVisible, setIsVisible] = useState(show);
     const dialogRef = useRef(null);
     const bodyRef = useRef(null);
@@ -49,7 +49,6 @@ const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, auto
                 const focusable = bodyRef.current?.querySelector(".ids-focus-anchor") ||
                     bodyRef.current?.querySelector("h1, h2, h3, [tabindex]:not([tabindex='-1']), button:not([disabled]), a, input:not([disabled]), textarea:not([disabled])") ||
                     dialogRef.current?.querySelector("button.ids-dialog__close-button");
-                console.log("focusable", focusable);
                 focusable?.focus();
             });
         }
@@ -59,9 +58,9 @@ const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, auto
             setIsVisible(false);
         }
     };
-    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", children: trigger }), jsx("div", { className: clsx("ids-dialog-overlay", {
-                    "ids-dialog-overlay--hidden": !isVisible || noOverlay
-                }), onClick: overlayClick }), jsxs("div", { ref: dialogRef, className: clsx("ids-dialog", {
+    return (jsxs(Fragment, { children: [jsx("div", { className: "ids-dialog__trigger", children: trigger }), !noOverlay && (jsx("div", { className: clsx("ids-dialog-overlay", {
+                    "ids-dialog-overlay--hidden": !isVisible
+                }), onClick: overlayClick })), jsxs("div", { ref: dialogRef, className: clsx("ids-dialog", {
                     "ids-dialog--hidden": !isVisible
                 }, className), role: "dialog", "aria-modal": "true", style: {
                     width,
@@ -72,6 +71,6 @@ const IDSDialog = ({ show = false, srClose = "Stäng", dismissible = false, auto
                             "ids-dialog__body--has-scrollbar": hasScrollbar,
                             "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
                         }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
-};
+}
 
 export { IDSDialog };

package/components/dropdown/dropdown-content-link.d.ts

@@ -3,4 +3,4 @@ import "@inera/ids-design/components/dropdown/dropdown.css";
 export interface IDSDropdownContentLinkProps extends Omit<HTMLAttributes<HTMLAnchorElement>, "children"> {
     children: ReactElement;
 }
-export declare const IDSDropdownContentLink: React.FC<IDSDropdownContentLinkProps>;
+export declare function IDSDropdownContentLink({ children, className, ...props }: IDSDropdownContentLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/components/dropdown/dropdown-content-link.js

@@ -3,7 +3,7 @@ import { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/dropdown/dropdown.css';
 import clsx from 'clsx';
 
-const IDSDropdownContentLink = ({ children, className, ...props }) => {
+function IDSDropdownContentLink({ children, className, ...props }) {
     if (!isValidElement(children) || children.type !== "a") {
         console.error("IDSDropdownContentLink expects a single <a> element as its child.");
         return null;
@@ -16,6 +16,6 @@ const IDSDropdownContentLink = ({ children, className, ...props }) => {
         role: "menuitem",
         children: content
     });
-};
+}
 
 export { IDSDropdownContentLink };

package/components/dropdown/dropdown.d.ts

@@ -13,5 +13,5 @@ interface IDSDropdownProps extends React.HTMLAttributes<HTMLSpanElement> {
     maxHeight?: string;
     children: ReactNode;
 }
-export declare const IDSDropdown: React.FC<IDSDropdownProps>;
+export declare function IDSDropdown({ expanded, persistent, position, sBlock, mBlock, maxHeight, onOpened, onClosed, children, className, button, ...props }: IDSDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/dropdown/dropdown.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/dropdown/dropdown.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSDropdown = ({ expanded = false, persistent = false, position = "right", sBlock = false, mBlock = false, maxHeight = "", onOpened, onClosed, children, className, button, ...props }) => {
+function IDSDropdown({ expanded = false, persistent = false, position = "right", sBlock = false, mBlock = false, maxHeight = "", onOpened, onClosed, children, className, button, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
@@ -70,6 +70,6 @@ const IDSDropdown = ({ expanded = false, persistent = false, position = "right",
             "ids-dropdown--mblock": mBlock,
             "ids-dropdown--sblock": sBlock
         }), children: [renderTrigger(), isExpanded && renderDropdownContent()] }));
-};
+}
 
 export { IDSDropdown };

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

@@ -1,7 +1,7 @@
 import React, { ReactElement, ReactNode } from "react";
-import "@inera/ids-design/components/footer-1177/footer-1177.css";
 import { IDSLinkProps } from "../link/link";
-interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
+import "@inera/ids-design/components/footer-1177/footer-1177.css";
+export interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;
     subHeadline?: string;
@@ -16,5 +16,4 @@ interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooter1177: React.FC<Footer1177Props>;
-export {};
+export declare function IDSFooter1177({ headline, srHeadline, subHeadline, cols, col1, col2, col3, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }: Footer1177Props): import("react/jsx-runtime").JSX.Element;

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

@@ -1,61 +1,24 @@
-"use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177/footer-1177.css';
 
-const IDSFooter1177 = ({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
-    const ref = useRef(null);
+function IDSFooter1177({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) {
     const renderHeadline = () => {
         if (srHeadline) {
             return (jsxs(Fragment, { children: [jsxs("h2", { className: "ids-footer-1177__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }), jsxs("h2", { "aria-hidden": "true", className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] })] }));
         }
         return (jsxs("h2", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
     };
-    const renderCol = (column) => {
-        return column?.map((link, idx) => {
-            if (React.isValidElement(link)) {
-                return React.cloneElement(link, {
-                    key: `footer-link-${idx}`,
-                    footer: true,
-                    block: true
-                });
-            }
-            return link;
-        });
-    };
     const renderCols = () => {
         if (cols === 1) {
-            return jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--100"), children: renderCol(col1) });
+            return jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--100"), children: col1 });
         }
-        else if (cols === 2) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: renderCol(col2) })] }));
+        if (cols === 2) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: col2 })] }));
         }
-        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: renderCol(col3) })] }));
-    };
-    const renderLinks = (content) => {
-        const applyProps = (node, keyPrefix = "") => {
-            if (!node)
-                return null;
-            if (Array.isArray(node)) {
-                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
-            }
-            if (React.isValidElement(node)) {
-                if (node.type === React.Fragment) {
-                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
-                }
-                return React.cloneElement(node, {
-                    key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset: 3,
-                    small: true,
-                    ...node.props
-                });
-            }
-            return node;
-        };
-        return applyProps(content, "root");
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col1 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col2 }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: col3 })] }));
     };
-    return (jsxs("footer", { className: clsx("ids-footer-1177", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177__content", children: [jsx("div", { className: "ids-footer-1177__text", children: children }), jsx("div", { className: "ids-footer-1177__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177__mobile-links", children: renderLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
-};
+    return (jsxs("footer", { className: clsx("ids-footer-1177", className), ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177__content", children: [jsx("div", { className: "ids-footer-1177__text", children: children }), jsx("div", { className: "ids-footer-1177__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177__mobile-links", children: mobileLinks })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
+}
 
 export { IDSFooter1177 };

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

@@ -1,6 +1,6 @@
 import React, { ReactElement, ReactNode } from "react";
-import "@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css";
 import { IDSLinkProps } from "../link/link";
+import "@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css";
 interface Footer1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;