@inera/ids-react 8.0.0 → 8.2.0

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

@@ -1,11 +1,10 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/header-inera-admin/header-inera-admin.css';
 import clsx from 'clsx';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin.css';
 
-const IDSHeaderIneraAdmin = ({ brandText = "", unresponsive = false, showLogo = false, items, avatar, skipToContent, brandLink, srLogoText = "Logotyp inera", serviceName = "EN TJÄNST FRÅN INERA", mobileMenu, className, children, ...props }) => {
+function IDSHeaderIneraAdmin({ brandText = "", unresponsive = false, showLogo = false, items, avatar, skipToContent, brandLink, srLogoText = "Logotyp inera", serviceName = "EN TJÄNST FRÅN INERA", mobileMenu, className, children, ...props }) {
     const renderBrandText = () => {
         if (brandLink && isValidElement(brandLink)) {
             return (jsx("span", { className: "ids-header-inera-admin__brand-link", children: cloneElement(brandLink, {
@@ -17,6 +16,6 @@ const IDSHeaderIneraAdmin = ({ brandText = "", unresponsive = false, showLogo =
     return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker: true }, children: jsxs("header", { className: clsx("ids-header-inera-admin", {
                 "ids-header-inera-admin--unresponsive": unresponsive
             }, className), ...props, children: [skipToContent && jsx("div", { className: "ids-header-inera-admin__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera-admin__inner", children: [jsxs("div", { className: "ids-header-inera-admin__main", children: [jsx("div", { className: "ids-header-inera-admin__service-wrapper", children: jsxs("div", { className: "ids-header-inera-admin__brand", children: [showLogo && jsx("div", { className: "ids-header-inera-admin__logo", role: "img", "aria-label": srLogoText }), jsxs("div", { className: "ids-header-inera-admin__brand-inner", children: [renderBrandText(), jsx("h1", { className: "ids-header-inera-admin__brand-text", children: brandText }), jsx("h2", { className: "ids-header-inera-admin__service-name", children: serviceName })] })] }) }), jsxs("div", { className: "ids-header-inera-admin__items", children: [items, " ", avatar, " ", mobileMenu && jsx("div", { className: "ids-header-inera-admin__mobile-menu", children: mobileMenu })] })] }), children] })] }) }));
-};
+}
 
 export { IDSHeaderIneraAdmin };

package/components/link/link.d.ts

@@ -14,4 +14,4 @@ export interface IDSLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElemen
     endItem?: ReactNode;
     children?: ReactElement;
 }
-export declare const IDSLink: React.FC<IDSLinkProps>;
+export declare function IDSLink({ colorPreset, menu, footer, active, activeIcon, block, underlined, noUnderline, small, focusAnchor, endItem, children, ...props }: IDSLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/components/link/link.js

@@ -1,6 +1,5 @@
-"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, isValidElement, cloneElement } from 'react';
+import { isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
 
 const containsIcon = (node) => {
@@ -14,14 +13,17 @@ const containsIcon = (node) => {
     }
     return false;
 };
-const IDSLink = ({ colorPreset = 0, menu = false, footer = false, active = false, activeIcon = false, block = false, underlined = false, noUnderline = false, small = false, focusAnchor = false, endItem, children, className, ...props }) => {
-    const ref = useRef(null);
+function IDSLink({ colorPreset = 0, menu = false, footer = false, active = false, activeIcon = false, block = false, underlined = false, noUnderline = false, small = false, focusAnchor = false, endItem, children, ...props }) {
+    // Ensure valid child
     if (!isValidElement(children)) {
-        console.error("IDSLink requires a single valid React element (e.g., <a> or <Link>) as a child.");
+        if (process.env.NODE_ENV !== "production") {
+            console.error("IDSLink requires a single valid React element (e.g., <a> or <Link>) as a child.");
+        }
         return null;
     }
-    const hasIcon = containsIcon(children.props.children);
-    const classNames = clsx("ids-link", colorPreset > 0 && `ids-link--color-${colorPreset}`, {
+    const innerChildren = children.props.children;
+    const hasIcon = containsIcon(innerChildren);
+    const mergedClasses = clsx("ids-link", colorPreset > 0 && `ids-link--color-${colorPreset}`, {
         "ids-link--icon": hasIcon,
         "ids-link--active-icon": activeIcon,
         "ids-link--block": block,
@@ -32,14 +34,14 @@ const IDSLink = ({ colorPreset = 0, menu = false, footer = false, active = false
         "ids-link--underlined": underlined,
         "ids-link--no-underline": noUnderline,
         "ids-focus-anchor": focusAnchor
-    }, children.props.className, className);
-    const linkContent = (jsxs(Fragment, { children: [children.props.children, endItem && jsx("span", { style: { marginLeft: "0.5rem" }, children: endItem })] }));
+    }, children.props.className, props.className);
+    const wrappedContent = (jsxs(Fragment, { children: [innerChildren, endItem && jsx("span", { style: { marginLeft: "0.5rem" }, children: endItem })] }));
     return cloneElement(children, {
+        ...children.props,
         ...props,
-        className: classNames,
-        ref,
-        children: linkContent
+        className: mergedClasses,
+        children: wrappedContent
     });
-};
+}
 
 export { IDSLink };

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

@@ -1,8 +1,7 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/navigation/content/navigation-content.css";
 export interface IDSNavigationContentProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     maxHeight?: string;
-    children?: ReactNode;
 }
-export declare const IDSNavigationContent: React.FC<IDSNavigationContentProps>;
+export declare function IDSNavigationContent({ headline, maxHeight, className, children, ...props }: IDSNavigationContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,22 +1,15 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import '@inera/ids-design/components/navigation/content/navigation-content.css';
 import clsx from 'clsx';
 
-const IDSNavigationContent = ({ headline = "", maxHeight = "", children, className, ...props }) => {
-    const enhancedLinks = React.Children.map(children, (link, i) => {
+function IDSNavigationContent({ headline = "", maxHeight = "", className, children, ...props }) {
+    const linkWrappers = React.Children.map(children, (link, i) => {
         if (!React.isValidElement(link))
             return link;
-        const cloned = React.cloneElement(link, {
-            key: `navigation-content-link-${i}`,
-            block: true,
-            activeIcon: true,
-            noUnderline: true
-        });
-        return (jsx("div", { className: "ids-navigation-content__link-wrapper", children: cloned }, `link-wrapper-${i}`));
+        return (jsx("div", { className: "ids-navigation-content__link-wrapper", children: link }, i));
     });
-    return (jsxs("div", { className: clsx("ids-navigation-content", { "ids-navigation-content--scrollable": maxHeight }, className), ...props, children: [jsx("div", { className: "ids-navigation-content__border-top", children: jsx("div", { className: "ids-navigation-content__border-top-content" }) }), jsxs("nav", { className: "ids-navigation-content__inner", "aria-labelledby": "content-navigation-headline", id: "content-navigation-inner", children: [jsx("h2", { className: "ids-navigation-content__inner__headline", id: "content-navigation-headline", children: headline }), jsx("div", { className: "ids-navigation-content__links", style: { maxHeight: maxHeight }, children: enhancedLinks })] })] }));
-};
+    return (jsxs("div", { className: clsx("ids-navigation-content", { "ids-navigation-content--scrollable": maxHeight }, className), ...props, children: [jsx("div", { className: "ids-navigation-content__border-top", children: jsx("div", { className: "ids-navigation-content__border-top-content" }) }), jsxs("nav", { className: "ids-navigation-content__inner", "aria-labelledby": "content-navigation-headline", id: "content-navigation-inner", children: [headline && (jsx("h2", { className: "ids-navigation-content__inner__headline", id: "content-navigation-headline", children: headline })), jsx("div", { className: "ids-navigation-content__links", style: { maxHeight: maxHeight || "none" }, children: linkWrappers })] })] }));
+}
 
 export { IDSNavigationContent };

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

@@ -1,7 +1,6 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/navigation/local/navigation-local.css";
 export interface IDSNavigationLocalProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
-    children?: ReactNode;
 }
-export declare const IDSNavigationLocal: React.FC<IDSNavigationLocalProps>;
+export declare function IDSNavigationLocal({ headline, className, children, ...props }: IDSNavigationLocalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/navigation/local/navigation-local.css';
 import clsx from 'clsx';
 
-const IDSNavigationLocal = ({ headline = "", children, className, ...props }) => {
+function IDSNavigationLocal({ headline = "", className, children, ...props }) {
     return (jsxs("div", { className: clsx("ids-navigation-local", className), ...props, children: [jsx("h2", { className: "ids-navigation-local__headline", children: headline }), jsx("div", { className: "ids-navigation-local__links", children: children })] }));
-};
+}
 
 export { IDSNavigationLocal };

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

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

package/components/notification/badge/notification-badge.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/notification-badge/notification-badge.css';
 import clsx from 'clsx';
 
-const IDSNotificationBadge = ({ type = "primary", icon = "", onClick, children, className, ...props }) => {
-    return (jsxs("div", { className: clsx("ids-notification-badge", `ids-notification-badge--${type}`, className), onClick: onClick, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), children] }));
-};
+function IDSNotificationBadge({ type = "primary", icon = "", onClick, className, children, ...props }) {
+    return (jsxs("div", { className: clsx("ids-notification-badge", `ids-notification-badge--${type}`, className), onClick: onClick, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), children] }));
+}
 
 export { IDSNotificationBadge };

package/components/pagination/data-pagination/data-pagination.d.ts

@@ -5,7 +5,7 @@ export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElem
     from: number;
     to: number;
     of?: string;
-    total: number;
+    total: number | string;
     defaultValue?: string;
     selectId?: string;
     light?: boolean;
@@ -15,6 +15,5 @@ export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElem
     nextButton?: ReactNode;
     lastPageButton?: ReactNode;
     onSelectChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
-    children?: ReactNode;
 }
 export declare const IDSDataPagination: React.ForwardRefExoticComponent<IDSDataPaginationProps & React.RefAttributes<HTMLSelectElement>>;

package/components/pagination/data-pagination/data-pagination.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 import '@inera/ids-design/components/pagination/data-pagination/data-pagination.css';

package/components/pagination/list-pagination/list-pagination.d.ts

@@ -16,4 +16,4 @@ export interface IDSListPaginationProps extends React.HTMLAttributes<HTMLDivElem
     onPrevPage?: (page: number) => void;
     onNextPage?: (page: number) => void;
 }
-export declare const IDSListPagination: React.FC<IDSListPaginationProps>;
+export declare function IDSListPagination({ showing, from, to, of, total, current, pages, srCurrentPage, srGoToPage, srPrevious, srNext, onChangePage, onPrevPage, onNextPage, className, ...props }: IDSListPaginationProps): import("react/jsx-runtime").JSX.Element;

package/components/pagination/list-pagination/list-pagination.js

@@ -1,9 +1,8 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/pagination/list-pagination/list-pagination.css';
 import clsx from 'clsx';
 
-const IDSListPagination = ({ showing = "Visar", from = 0, to = 0, of = "av", total = 0, current = 1, pages = 1, srCurrentPage = "Aktuell sida", srGoToPage = "Gå till sida", srPrevious = "Föregående sida", srNext = "Nästa sida", className, onChangePage, onPrevPage, onNextPage, ...props }) => {
+function IDSListPagination({ showing = "Visar", from = 0, to = 0, of = "av", total = 0, current = 1, pages = 1, srCurrentPage = "Aktuell sida", srGoToPage = "Gå till sida", srPrevious = "Föregående sida", srNext = "Nästa sida", onChangePage, onPrevPage, onNextPage, className, ...props }) {
     const renderSummary = () => {
         if (from && to && total) {
             return jsx("div", { className: "ids-list-pagination__summary", children: `${showing} ${from} - ${to} ${of} ${total}` });
@@ -44,6 +43,6 @@ const IDSListPagination = ({ showing = "Visar", from = 0, to = 0, of = "av", tot
         return (jsx("nav", { children: jsx("ul", { className: "ids-list-pagination__list", children: buttonArray }) }));
     };
     return (jsxs("div", { className: clsx("ids-list-pagination", className), ...props, children: [renderSummary(), jsxs("div", { className: "ids-list-pagination__content", children: [jsx("div", { className: "ids-list-pagination__prev-button", children: renderPrevButton() }), jsx("div", { className: "ids-list-pagination__nav-buttons", children: renderButtons() }), jsx("div", { className: "ids-list-pagination__next-button", children: renderNextButton() })] })] }));
-};
+}
 
 export { IDSListPagination };

package/components/popover/popover.js

@@ -188,7 +188,7 @@ const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 26
     const renderCaret = (pos) => {
         return (jsxs("div", { className: `ids-popover-content__caret ids-popover-content__caret--${pos}`, children: [jsx("span", { className: `ids-popover-content__caret-body ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-border ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-shadow ids-popover-content__caret--${pos}` })] }));
     };
-    return (jsxs("span", { className: clsx("ids-popover", className), ref: popoverRef, "data-popover-category": category, ...(isVisible ? { "data-show": "true" } : {}), ...props, children: [jsx("span", { className: "ids-popover-trigger", "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, ref: triggerRef, children: trigger }), isVisible && (jsxs("div", { className: `ids-popover-content ${!noFocusTrap && "ids-focus-trap"}`, role: "tooltip", id: contentId, ref: popoverContentRef, style: popoverContentStyle, "data-position": position, children: [renderCaret(position), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", onClick: closePopover }) }), jsx("div", { className: "ids-popover-content__content-wrapper", tabIndex: 0, ref: contentWrapperRef, style: popoverContentWrapperStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }))] }));
+    return (jsxs("span", { className: clsx("ids-popover", className), ref: popoverRef, "data-popover-category": category, ...(isVisible && { "data-show": "true" }), ...props, children: [jsx("span", { className: "ids-popover-trigger", "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, ref: triggerRef, children: trigger }), isVisible && (jsxs("div", { className: `ids-popover-content ${!noFocusTrap && "ids-focus-trap"}`, role: "tooltip", id: contentId, ref: popoverContentRef, style: popoverContentStyle, "data-position": position, children: [renderCaret(position), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", onClick: closePopover }) }), jsx("div", { className: "ids-popover-content__content-wrapper", tabIndex: 0, ref: contentWrapperRef, style: popoverContentWrapperStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }))] }));
 };
 
 export { IDSPopover };

package/components/progressbar/progressbar.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 import "@inera/ids-design/components/progressbar/progressbar.css";
-interface IDSProgressbarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSProgressbarProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     hideLabel?: boolean;
     value?: number;
     srLabel: string;
 }
-export declare const IDSProgressbar: React.FC<IDSProgressbarProps>;
-export {};
+export declare function IDSProgressbar({ label, hideLabel, value, srLabel, className, ...props }: IDSProgressbarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSProgressbar {
+    var displayName: string;
+}

package/components/progressbar/progressbar.js

@@ -1,10 +1,10 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/progressbar/progressbar.css';
 import clsx from 'clsx';
 
-const IDSProgressbar = ({ label = "", hideLabel = false, value = 0, srLabel = "", className, ...props }) => {
-    return (jsxs("div", { className: clsx("ids-progressbar", className), ...props, children: [hideLabel ? null : (jsxs("div", { className: "ids-progressbar__label", children: [label, " ", value, "%"] })), jsx("div", { className: "ids-progressbar__bar", role: "progressbar", "aria-label": srLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, children: value > 0 ? (jsx("div", { className: "ids-progressbar__progress", style: { width: `calc(${value}% + 0.125rem)` } })) : null })] }));
-};
+function IDSProgressbar({ label = "", hideLabel = false, value = 0, srLabel = "", className, ...props }) {
+    return (jsxs("div", { className: clsx("ids-progressbar", className), ...props, children: [!hideLabel && (jsxs("div", { className: "ids-progressbar__label", children: [label, " ", value, "%"] })), jsx("div", { className: "ids-progressbar__bar", role: "progressbar", "aria-label": srLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, children: value > 0 && jsx("div", { className: "ids-progressbar__progress", style: { width: `calc(${value}% + 0.125rem)` } }) })] }));
+}
+IDSProgressbar.displayName = "IDSProgressbar";
 
 export { IDSProgressbar };

package/components/puff-list/puff-list-item/puff-list-item-date.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import "@inera/ids-design/components/puff-list/puff-list.css";
+interface IDSPuffListItemDateProps extends React.HTMLAttributes<HTMLDivElement> {
+    date?: Date | null;
+    showTime?: boolean;
+    day?: number;
+    year?: number;
+    month?: number;
+    monthLabel?: string;
+    time?: string;
+}
+export declare function IDSPuffListItemDate({ date, showTime, day, year, month, monthLabel, time, ...props }: IDSPuffListItemDateProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/puff-list/puff-list-item/puff-list-item-date.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/puff-list/puff-list.css';
+import { getDayAsText, getMonthAsSweText } from '../../utils/utils.js';
+
+function IDSPuffListItemDate({ date, showTime = false, day = 0, year = 0, month = 0, monthLabel = "", time = "", ...props }) {
+    const getDay = () => getDayAsText(date ? date.getDate() : day);
+    const getMonth = () => (date ? date.getMonth() + 1 : month);
+    const getYear = () => (date ? date.getFullYear() : year);
+    const getMonthText = () => monthLabel || getMonthAsSweText(getMonth() - 1, 3);
+    const getTime = () => {
+        if (time)
+            return time;
+        if (showTime && date) {
+            const h = date.getHours();
+            const m = date.getMinutes();
+            return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
+        }
+        return "";
+    };
+    return (jsxs("span", { className: "ids-puff-list-item__date", ...props, children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] }));
+}
+
+export { IDSPuffListItemDate };

package/components/puff-list/puff-list-item/puff-list-item-header.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface IDSPuffListItemHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    headlineLevel?: 2 | 3 | 4 | 5;
+    headlineExtra?: ReactNode;
+    noMargin?: boolean;
+}
+export declare function IDSPuffListItemHeader({ headlineLevel, headlineExtra, noMargin, className, children, ...props }: IDSPuffListItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPuffListItemHeader {
+    var displayName: string;
+}

package/components/puff-list/puff-list-item/puff-list-item-header.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSPuffListItemHeader({ headlineLevel = 2, headlineExtra, noMargin = false, className, children, ...props }) {
+    const Tag = `h${headlineLevel}`;
+    const headerClass = clsx("ids-puff-list-item-header__headline", { "ids-puff-list-item-header__headline--no-margin": noMargin }, className);
+    return (jsxs(Tag, { className: headerClass, ...props, children: [children, headlineExtra && jsx("span", { className: "ids-puff-list-item-header__extra-content", children: headlineExtra })] }));
+}
+IDSPuffListItemHeader.displayName = "IDSPuffListItemHeader";
+
+export { IDSPuffListItemHeader };

package/components/puff-list/puff-list-item/puff-list-item-info.d.ts

@@ -1,8 +1,6 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/puff-list/puff-list.css";
-interface IDSPuffListItemInfoProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSPuffListItemInfoProps extends React.HTMLAttributes<HTMLDivElement> {
     bottom?: boolean;
-    children?: ReactNode;
 }
-export declare const IDSPuffListItemInfo: React.FC<IDSPuffListItemInfoProps>;
-export {};
+export declare function IDSPuffListItemInfo({ bottom, children, className, ...props }: IDSPuffListItemInfoProps): import("react/jsx-runtime").JSX.Element;

package/components/puff-list/puff-list-item/puff-list-item-info.js

@@ -2,10 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/puff-list/puff-list.css';
 import clsx from 'clsx';
 
-const IDSPuffListItemInfo = ({ bottom, children, ...props }) => {
-    return (jsx("div", { className: clsx("ids-puff-list-item__info", {
-            "ids-puff-list-item__info--bottom": bottom
-        }), ...props, children: children }));
-};
+function IDSPuffListItemInfo({ bottom = false, children, className, ...props }) {
+    const classes = clsx("ids-puff-list-item__info", { "ids-puff-list-item__info--bottom": bottom }, className);
+    return (jsx("div", { className: classes, ...props, children: children }));
+}
 
 export { IDSPuffListItemInfo };

package/components/puff-list/puff-list-item/puff-list-item.d.ts

@@ -1,28 +1,17 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/puff-list/puff-list.css";
-interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    headline?: ReactNode;
-    headlineLevel?: 2 | 3 | 4 | 5;
-    headlineLink?: React.ReactElement;
+export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: ReactNode;
     itemLink?: React.ReactElement;
-    date?: Date | null;
-    year?: string;
-    month?: number;
-    monthLabel?: string;
-    day?: number;
-    time?: string;
-    dateTo?: Date | null;
-    yearTo?: string;
-    monthTo?: number;
-    monthToLabel?: string;
-    dayTo?: number;
-    timeTo?: string;
+    date?: React.ReactElement;
+    dateTo?: React.ReactElement;
     noContent?: boolean;
     lean?: boolean;
-    noMargin?: boolean;
-    noListItem?: boolean;
     dateLabel?: ReactNode;
+    extra?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSPuffListItem: React.FC<IDSPuffListItemProps>;
-export {};
+export declare function IDSPuffListItem({ header, itemLink, date, dateTo, noContent, lean, dateLabel, extra, className, children, ...props }: IDSPuffListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPuffListItem {
+    var displayName: string;
+}

package/components/puff-list/puff-list-item/puff-list-item.js

@@ -1,82 +1,11 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, isValidElement, cloneElement } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/puff-list/puff-list.css';
-import { getDayAsText, getMonthAsSweText } from '../../utils/utils.js';
 import clsx from 'clsx';
 
-const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", dateTo = null, yearTo = "", monthTo = -1, monthToLabel = "", dayTo = -1, timeTo = "", noContent = false, noMargin = false, noListItem = false, lean = false, dateLabel, className, children, ...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 hasDate = () => date !== null ||
-        (year !== "" && year !== undefined) ||
-        (month !== null && month !== undefined && month > 0) ||
-        (day !== null && day !== undefined && day > 0);
-    const hasToDate = () => dateTo !== null ||
-        (yearTo !== "" && yearTo !== undefined) ||
-        (monthTo !== null && monthTo !== undefined && monthTo > 0) ||
-        (dayTo !== null && dayTo !== undefined && dayTo > 0);
-    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);
-    };
-    const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
-    const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
-    const getTime = () => {
-        if (time)
-            return time;
-        if (presentedDate) {
-            const hour = presentedDate.getHours();
-            const min = presentedDate.getMinutes();
-            return `${hour.toString().padStart(2, "0")}:${min.toString().padStart(2, "0")}`;
-        }
-        return "";
-    };
-    const getTimeTo = () => {
-        if (timeTo)
-            return timeTo;
-        if (presentedToDate) {
-            const hour = presentedToDate.getHours();
-            const min = presentedToDate.getMinutes();
-            return `${hour.toString().padStart(2, "0")}:${min.toString().padStart(2, "0")}`;
-        }
-        return "";
-    };
-    const getHeaderClass = (noMargin) => clsx("ids-puff-list-item__header", {
-        "ids-puff-list-item__header--no-margin": noMargin
-    });
-    const renderHeadline = () => {
-        const level = [2, 3, 4, 5].includes(headlineLevel) ? headlineLevel : 2;
-        const Tag = `h${level}`;
-        const headlineContent = jsx(Fragment, { children: headline });
-        if (headlineLink && isValidElement(headlineLink)) {
-            return React.createElement(Tag, { className: getHeaderClass(noMargin) }, cloneElement(headlineLink, {
-                ...headlineLink.props,
-                children: headlineContent
-            }));
-        }
-        return React.createElement(Tag, { className: getHeaderClass(noMargin) }, headline);
-    };
+function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, lean = false, dateLabel, extra, className, children, ...props }) {
     const renderBody = () => {
-        const content = (jsxs(Fragment, { children: [renderHeadline(), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
+        const content = (jsxs(Fragment, { children: [jsx("div", { className: "ids-puff-list-item-header", children: header }), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
         if (itemLink && isValidElement(itemLink)) {
             return cloneElement(itemLink, {
                 ...itemLink.props,
@@ -86,10 +15,11 @@ const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemL
         }
         return content;
     };
-    return (jsx("div", { className: clsx("ids-puff-list-item", {
+    return (jsxs("div", { className: clsx("ids-puff-list-item", {
             "ids-puff-list-item--interactive": !!itemLink,
             "ids-puff-list-item--lean": !!lean
-        }, className), ...props, children: jsxs("div", { className: "ids-puff-list-item__inner", children: [dateLabel && jsx("div", { className: "ids-puff-list-item__date-label", children: dateLabel }), jsxs("div", { className: "ids-puff-list-item__content", children: [hasDate() && (jsxs("span", { className: "ids-puff-list-item__date", children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] })), hasDate() && hasToDate() && (jsxs("span", { className: "ids-puff-list-item__date", children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), `${getDayTo()} ${getMonthToText()} ${getYearTo()}`, !!getTimeTo() && jsx("span", { className: "ids-puff-list-item__time", children: getTimeTo() })] })), renderBody()] })] }) }));
-};
+        }, className), ...props, children: [jsxs("div", { className: "ids-puff-list-item__inner", children: [dateLabel && jsx("div", { className: "ids-puff-list-item__date-label", children: dateLabel }), jsxs("div", { className: "ids-puff-list-item__content", children: [!!date && date, !!date && !!dateTo && (jsxs(Fragment, { children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), dateTo] })), renderBody()] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] }), jsx("div", { className: "ids-puff-list-item-separator" })] }));
+}
+IDSPuffListItem.displayName = "IDSPuffListItem";
 
 export { IDSPuffListItem };

package/components/puff-list/puff-list.d.ts

@@ -3,5 +3,5 @@ import "@inera/ids-design/components/puff-list/puff-list.css";
 interface IDSPuffListProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-export declare const IDSPuffList: React.FC<IDSPuffListProps>;
+export declare function IDSPuffList({ children, className, ...props }: IDSPuffListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/puff-list/puff-list.js

@@ -2,8 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/puff-list/puff-list.css';
 import clsx from 'clsx';
 
-const IDSPuffList = ({ children, className, ...props }) => {
-    return (jsx("div", { className: clsx("ids-puff-list", className), ...props, children: children }));
-};
+function IDSPuffList({ children, className, ...props }) {
+    const classes = clsx("ids-puff-list", className);
+    return (jsx("div", { className: classes, ...props, children: children }));
+}
 
 export { IDSPuffList };

package/components/region-icon/region-icon.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import "@inera/ids-design/components/region-icon/region-icon.css";
 type Size = "xs" | "s" | "m" | "l" | "ml";
-interface IDSRegionIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface IDSRegionIconProps extends React.HTMLAttributes<HTMLSpanElement> {
     name: string;
     size?: Size;
     colorPreset?: number;
     light?: boolean;
     inline?: boolean;
 }
-export declare const IDSRegionIcon: React.FC<IDSRegionIconProps>;
+export declare function IDSRegionIcon({ name, size, colorPreset, light, inline, className, ...props }: IDSRegionIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/region-icon/region-icon.js

@@ -1,17 +1,18 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/region-icon/region-icon.css';
 import clsx from 'clsx';
 
-const IDSRegionIcon = ({ name, size = "m", colorPreset = 1, light = false, inline = false, className, ...props }) => {
+function IDSRegionIcon({ name, size = "m", colorPreset = 1, light = false, inline = false, className, ...props }) {
     const getSize = () => {
         switch (size) {
             case "l":
                 return "3rem";
+            case "ml":
+                return "2.75rem";
             case "m":
                 return "2.5rem";
             case "s":
-                return "2.0rem";
+                return "2rem";
             case "xs":
                 return "1.5rem";
             default:
@@ -19,6 +20,6 @@ const IDSRegionIcon = ({ name, size = "m", colorPreset = 1, light = false, inlin
         }
     };
     return (jsx("span", { className: clsx("ids-region-icon", `ids-region-icon--${name}`, `ids-region-icon--color-preset-${light ? 3 : colorPreset}`, { "ids-region-icon--inline": inline }, className), style: { fontSize: getSize() }, ...props }));
-};
+}
 
 export { IDSRegionIcon };

package/components/side-menu/side-menu.js

@@ -44,7 +44,7 @@ const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, a
         if (label) {
             return renderLabel();
         }
-        return (jsxs(Fragment, { children: [renderExpandButton(), jsx("div", { className: "ids-side-menu__link", onClick: e => e.stopPropagation(), onKeyDown: e => e.code !== "Escape" && e.stopPropagation(), children: link })] }));
+        return (jsxs(Fragment, { children: [renderExpandButton(), jsx("div", { className: "ids-side-menu__link", children: link })] }));
     };
     return (jsxs("div", { className: clsx("ids-side-menu", className), ...props, children: [jsx("div", { className: clsx("ids-side-menu__header", `ids-side-menu--level-${level}`, {
                     "ids-side-menu--active": active,

package/components/stepper/step.js

@@ -29,7 +29,7 @@ const IDSStep = ({ state = "", headline, label = "", stepNumber = "", srIndicato
             return null;
         return stepNumber;
     };
-    return (jsxs("div", { className: clsx("ids-step", className), ...(last ? { last } : {}), ...props, children: [jsx("div", { role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
+    return (jsxs("div", { className: clsx("ids-step", className), ...(last && { last }), ...props, children: [jsx("div", { role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
                     "ids-step__button--disabled": disabled
                 }), "aria-expanded": expanded, onClick: toggleExpansion, onKeyDown: handleKeyPress, children: jsxs("div", { className: "ids-step__button-inner", children: [jsx("div", { className: "ids-step__indicator-wrapper", children: jsx("div", { "aria-label": srIndicatorText || stepNumber, role: "img", className: `ids-step__indicator ids-step__indicator--${state}`, children: renderStepIndicator() }) }), jsxs("div", { className: "ids-step__button-text", children: [jsxs("div", { className: "ids-step__headline-label", children: [label && jsx("div", { className: "ids-step__label", children: label }), headline && jsx("div", { className: "ids-step__headline", children: headline })] }), jsx("div", { className: clsx("ids-step__chevron", {
                                         "ids-step__chevron--expanded": expanded