@inera/ids-react 6.2.0 → 7.0.1

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

@@ -1,8 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/notification-badge/notification-badge.css';
+import clsx from 'clsx';
 
-const IDSNotificationBadge = ({ outlined = false, children }) => {
-    return (jsx("div", { className: "ids-notification-badge" + (outlined ? " ids-notification-badge--outlined" : ""), children: children }));
+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] }));
 };
 
 export { IDSNotificationBadge };

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

@@ -1,3 +1,24 @@
-import "@inera/ids-core/components/pagination/data-pagination/register.js";
-import { IDSDataPagination as DataPagination } from "@inera/ids-core/components/pagination/data-pagination/data-pagination-element.js";
-export declare const IDSDataPagination: import("@lit-labs/react").ReactWebComponent<DataPagination, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/pagination/data-pagination/data-pagination.css";
+export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    from: number;
+    to: number;
+    of?: string;
+    total: number;
+    defaultValue?: string;
+    selectId?: string;
+    prevId?: string;
+    nextId?: string;
+    light?: boolean;
+    noSelect?: boolean;
+    prevDisabled?: boolean;
+    nextDisabled?: boolean;
+    srPrevious?: string;
+    srNext?: string;
+    onNext?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onPrevious?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onSelectChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    children?: ReactNode;
+}
+export declare const IDSDataPagination: React.FC<IDSDataPaginationProps>;

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

@@ -1,12 +1,17 @@
-import * as React from 'react';
-import '@inera/ids-core/components/pagination/data-pagination/register.js';
-import { IDSDataPagination as IDSDataPagination$1 } from '@inera/ids-core/components/pagination/data-pagination/data-pagination-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import '@inera/ids-design/components/pagination/data-pagination/data-pagination.css';
+import clsx from 'clsx';
+import { useElementId } from '../../utils/hooks/useElementId.js';
 
-const IDSDataPagination = createComponent({
-    tagName: "ids-data-pagination",
-    elementClass: IDSDataPagination$1,
-    react: React,
-});
+const IDSDataPagination = ({ label = "Rader per sida", from, to, of = "av", total, defaultValue = "", selectId = "", prevId = "", nextId = "", light = false, noSelect = false, prevDisabled = false, nextDisabled = false, srPrevious = "Föregående sida", srNext = "Nästa sida", onNext, onPrevious, onSelectChange, className, children }) => {
+    const summaryText = `${from} - ${to} ${of} ${total}`;
+    const selectElementId = useElementId(selectId);
+    const prevRef = useRef(null);
+    const nextRef = useRef(null);
+    const selectRef = useRef(null);
+    return (jsxs("div", { className: clsx("ids-data-pagination", { "ids-data-pagination--light": light }, className), children: [!noSelect && (jsxs("div", { className: "ids-data-pagination__select", children: [jsx("label", { slot: "pagination-select", htmlFor: selectElementId, children: label }), jsx("select", { id: selectElementId, ref: selectRef, name: "data-pagination-select-options", defaultValue: defaultValue, onChange: onSelectChange, children: children })] })), jsx("div", { className: "ids-data-pagination__summary", children: summaryText }), jsxs("div", { className: "ids-data-pagination__buttons", children: [jsx("div", { className: "ids-data-pagination__prev-button", children: jsx("button", { ref: prevRef, "aria-label": srPrevious, disabled: prevDisabled, id: prevId, onClick: onPrevious }) }), jsx("div", { className: "ids-data-pagination__next-button", children: jsx("button", { ref: nextRef, "aria-label": srNext, disabled: nextDisabled, id: nextId, onClick: onNext }) })] })] }));
+};
 
 export { IDSDataPagination };

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

@@ -1,7 +1,19 @@
-import "@inera/ids-core/components/pagination/list-pagination/register.js";
-import { IDSListPagination as ListPagination } from "@inera/ids-core/components/pagination/list-pagination/list-pagination-element.js";
-export declare const IDSListPagination: import("@lit-labs/react").ReactWebComponent<ListPagination, {
-    onChangePage: string;
-    onPrevPage: string;
-    onNextPage: string;
-}>;
+import React from "react";
+import "@inera/ids-design/components/pagination/list-pagination/list-pagination.css";
+export interface IDSListPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    showing?: string;
+    from?: number;
+    to?: number;
+    of?: string;
+    total?: number;
+    current?: number;
+    pages?: number;
+    srCurrentPage?: string;
+    srGoToPage?: string;
+    srPrevious?: string;
+    srNext?: string;
+    onChangePage?: (page: number) => void;
+    onPrevPage?: (page: number) => void;
+    onNextPage?: (page: number) => void;
+}
+export declare const IDSListPagination: React.FC<IDSListPaginationProps>;

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

@@ -1,17 +1,54 @@
-import * as React from 'react';
-import '@inera/ids-core/components/pagination/list-pagination/register.js';
-import { IDSListPagination as IDSListPagination$1 } from '@inera/ids-core/components/pagination/list-pagination/list-pagination-element.js';
-import { createComponent } from '@lit-labs/react';
+"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 = createComponent({
-    tagName: "ids-list-pagination",
-    elementClass: IDSListPagination$1,
-    react: React,
-    events: {
-        onChangePage: 'changepage',
-        onPrevPage: 'prevpage',
-        onNextPage: 'nextpage'
-    }
-});
+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 }) => {
+    const renderSummary = () => {
+        if (from && to && total) {
+            return (jsx("div", { className: "ids-list-pagination__summary", children: `${showing} ${from} - ${to} ${of} ${total}` }));
+        }
+        return null;
+    };
+    const renderPrevButton = () => {
+        if (current > 1) {
+            return (jsx("button", { "aria-label": srPrevious, onClick: () => onPrevPage?.(current - 1), id: "prev-button" }));
+        }
+        return null;
+    };
+    const renderNextButton = () => {
+        if (current < pages) {
+            return (jsx("button", { "aria-label": srNext, onClick: () => onNextPage?.(current + 1), id: "next-button" }));
+        }
+        return null;
+    };
+    const renderButtons = () => {
+        const buttonArray = [];
+        for (let i = 1; i <= pages; i++) {
+            const isCurrent = i === current;
+            buttonArray.push(jsx("li", { className: clsx("ids-list-pagination__list-item", {
+                    "ids-list-pagination__list-item--current": isCurrent
+                }), hidden: pages > 7 &&
+                    ![
+                        1,
+                        pages,
+                        current - 1,
+                        current,
+                        current + 1,
+                        ...(current < 4 ? [2, 3, 4] : []),
+                        ...(current > pages - 3 ? [pages - 1, pages - 2, pages - 3] : [])
+                    ].includes(i), "data-hidden-before": pages > 7 &&
+                    i > 1 &&
+                    buttonArray[i - 2]?.props.hidden &&
+                    !buttonArray[i - 1]?.props.hidden
+                    ? true
+                    : undefined, children: jsx("button", { className: clsx("ids-list-pagination__button", {
+                        "ids-list-pagination__button--current": isCurrent
+                    }), "aria-label": isCurrent ? srCurrentPage : `${srGoToPage} ${i}`, onClick: () => !isCurrent && onChangePage?.(i), disabled: isCurrent, children: i }) }, i));
+        }
+        return (jsx("nav", { children: jsx("ul", { className: "ids-list-pagination__list", children: buttonArray }) }));
+    };
+    return (jsxs("div", { className: clsx("ids-list-pagination", className), 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.d.ts

@@ -1,5 +1,20 @@
-import '@inera/ids-core/components/popover/register.js';
-import { IDSPopover as Popover } from '@inera/ids-core/components/popover/popover-element.js';
-import { IDSPopoverContent as PopoverContent } from '@inera/ids-core/components/popover/content/popover-content-element.js';
-export declare const IDSPopover: import("@lit-labs/react").ReactWebComponent<Popover, {}>;
-export declare const IDSPopoverContent: import("@lit-labs/react").ReactWebComponent<PopoverContent, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/popover/popover.css";
+import "@inera/ids-design/components/popover/popover-content.css";
+export type PopoverPosition = "top" | "top-left" | "top-right" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-top" | "left-bottom";
+interface IDSPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+    position?: PopoverPosition;
+    category?: string;
+    trigger: ReactNode;
+    maxWidth?: number;
+    maxHeight?: number;
+    show?: boolean;
+    noFocusTrap?: boolean;
+    autoFocus?: boolean;
+    srCloseText?: string;
+    onVisibilityChange?: (isVisible: boolean) => void;
+    headline?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSPopover: React.FC<IDSPopoverProps>;
+export {};

package/components/popover/popover.js

@@ -1,18 +1,194 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/popover/register.js';
-import { IDSPopover as IDSPopover$1 } from '@inera/ids-core/components/popover/popover-element.js';
-import { IDSPopoverContent as IDSPopoverContent$1 } from '@inera/ids-core/components/popover/content/popover-content-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
+import '@inera/ids-design/components/popover/popover.css';
+import '@inera/ids-design/components/popover/popover-content.css';
+import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
+import clsx from 'clsx';
 
-const IDSPopover = createComponent({
-    tagName: 'ids-popover',
-    elementClass: IDSPopover$1,
-    react: React
-});
-const IDSPopoverContent = createComponent({
-    tagName: 'ids-popover-content',
-    elementClass: IDSPopoverContent$1,
-    react: React
-});
+const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, srCloseText = "Stäng", headline, children, className, onVisibilityChange }) => {
+    const [isVisible, setIsVisible] = useState(show);
+    const [popoverContentStyle, setPopoverContentStyle] = useState({
+        position: "absolute",
+        maxWidth: `${maxWidth}px`,
+        maxHeight: `${maxHeight}px`,
+        boxSizing: "initial"
+    });
+    const [popoverContentWrapperStyle, setPopoverContentWrapperStyle] = useState({
+        height: "100%"
+    });
+    const popoverRef = useRef(null);
+    const triggerRef = useRef(null);
+    const topBarRef = useRef(null);
+    const contentWrapperRef = useRef(null);
+    const popoverContentRef = useRef(null);
+    useFocusTrap(popoverContentRef.current, isVisible && !noFocusTrap);
+    const handleVisibilityChange = (isVisible) => {
+        setIsVisible(isVisible);
+        onVisibilityChange?.(isVisible);
+    };
+    const closePopover = useCallback(() => {
+        handleVisibilityChange(false);
+        triggerRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        const wrapper = popoverRef.current;
+        if (!wrapper)
+            return;
+        const observer = new MutationObserver(mutations => {
+            for (const mutation of mutations) {
+                if (mutation.type === "attributes" &&
+                    mutation.attributeName === "data-show" &&
+                    !wrapper.hasAttribute("data-show")) {
+                    closePopover();
+                }
+            }
+        });
+        observer.observe(wrapper, {
+            attributes: true,
+            attributeFilter: ["data-show"]
+        });
+        return () => observer.disconnect();
+    }, [closePopover]);
+    const showPopover = useCallback(() => {
+        if (category) {
+            const others = document.querySelectorAll(`[data-popover-category="${category}"]`);
+            others.forEach(el => {
+                if (el !== popoverRef.current) {
+                    el.removeAttribute("data-show");
+                }
+            });
+        }
+        handleVisibilityChange(true);
+    }, [category]);
+    const togglePopover = (e) => {
+        e.preventDefault();
+        isVisible ? closePopover() : showPopover();
+    };
+    const handleEsc = (e) => {
+        if (e.key === "Escape" && isVisible) {
+            closePopover();
+        }
+    };
+    const handleTriggerKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (!isVisible) {
+                showPopover();
+            }
+        }
+    };
+    useEffect(() => {
+        if (isVisible && autoFocus) {
+            const wrapper = contentWrapperRef.current;
+            const focusAnchor = wrapper.querySelector(".ids-focus-anchor");
+            if (focusAnchor) {
+                focusAnchor.focus();
+                setTimeout(() => {
+                    focusAnchor?.scrollIntoView({
+                        behavior: "smooth",
+                        block: "nearest"
+                    });
+                }, 2);
+            }
+            else {
+                wrapper.focus();
+            }
+        }
+    }, [isVisible, autoFocus]);
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        document.addEventListener("keydown", handleEsc);
+        return () => document.removeEventListener("keydown", handleEsc);
+    }, [isVisible]);
+    useEffect(() => {
+        if (topBarRef.current && contentWrapperRef.current) {
+            const topBarHeight = topBarRef.current.getBoundingClientRect().height;
+            const contentWrapperHeight = contentWrapperRef.current.getBoundingClientRect().height;
+            if (contentWrapperHeight >= maxHeight - topBarHeight) {
+                setPopoverContentWrapperStyle({
+                    height: `${maxHeight - topBarHeight}px`,
+                    paddingRight: "1rem"
+                });
+            }
+            else {
+                setPopoverContentWrapperStyle({
+                    height: "100%",
+                    paddingRight: "0.25rem"
+                });
+            }
+        }
+    }, [topBarRef, contentWrapperRef, isVisible]);
+    useEffect(() => {
+        const content = popoverContentRef?.current;
+        if (!content)
+            return;
+        const width = content.offsetWidth;
+        const height = content.offsetHeight;
+        const triggerWidth = triggerRef.current.offsetWidth;
+        const triggerHeight = triggerRef.current.offsetHeight;
+        let top, left, right, bottom;
+        if (position === "top") {
+            left = `-${width / 2 - triggerWidth / 2}px`;
+            bottom = `calc(100% + 0.875rem)`;
+        }
+        if (position === "top-right") {
+            right = "0";
+            bottom = `calc(100% + 0.875rem)`;
+        }
+        if (position === "top-left") {
+            left = "0";
+            bottom = `calc(100% + 0.875rem)`;
+        }
+        if (position === "right") {
+            left = `calc(100% + 0.875rem)`;
+            top = `-${height / 2 - triggerHeight / 2}px`;
+        }
+        if (position === "right-top") {
+            left = `calc(100% + 0.875rem)`;
+            bottom = "0";
+        }
+        if (position === "right-bottom") {
+            left = `calc(100% + 0.875rem)`;
+            top = "0";
+        }
+        if (position === "bottom") {
+            left = `-${width / 2 - triggerWidth / 2}px`;
+            top = `calc(100% + 0.875rem)`;
+        }
+        if (position === "bottom-right") {
+            right = "0";
+            top = `calc(100% + 0.875rem)`;
+        }
+        if (position === "bottom-left") {
+            left = `-8px`;
+            top = `calc(100% + 0.875rem)`;
+        }
+        if (position === "left") {
+            right = `calc(100% + 0.875rem)`;
+            top = `-${height / 2 - triggerHeight / 2}px`;
+        }
+        if (position === "left-top") {
+            right = `calc(100% + 0.875rem)`;
+            bottom = "0";
+        }
+        if (position === "left-bottom") {
+            right = `calc(100% + 0.875rem)`;
+            top = "0";
+        }
+        setPopoverContentStyle(prev => ({
+            ...prev,
+            top: top ?? undefined,
+            left: left ?? undefined,
+            right: right ?? undefined,
+            bottom: bottom ?? undefined
+        }));
+    }, [position, isVisible]);
+    const renderCaret = (pos) => {
+        return (jsxs("div", { className: `ids-popover-content__caret ids-popover-content--${pos}`, children: [jsx("span", { className: `ids-popover-content__caret-body ids-popover-content--${pos}` }), jsx("span", { className: `ids-popover-content__caret-border ids-popover-content--${pos}` }), jsx("span", { className: `ids-popover-content__caret-shadow ids-popover-content--${pos}` })] }));
+    };
+    return (jsxs("span", { className: clsx("ids-popover", className), ref: popoverRef, "data-popover-category": category, ...(isVisible ? { "data-show": "true" } : {}), children: [jsx("span", { className: "ids-popover-trigger", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, ref: triggerRef, children: trigger }), isVisible && (jsxs("div", { className: `ids-popover-content ${!noFocusTrap && "ids-focus-trap"}`, ref: popoverContentRef, style: popoverContentStyle, "data-position": position, children: [renderCaret(position), jsxs("div", { className: "ids-popover-content__top-bar", ref: topBarRef, children: [jsx("div", { className: "ids-popover-content__headline", children: headline }), 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: jsx("div", { className: "ids-popover-content__content-wrapper-inner", children: children }) })] }))] }));
+};
 
-export { IDSPopover, IDSPopoverContent };
+export { IDSPopover };

package/components/progressbar/progressbar.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import "@inera/ids-design/components/progressbar/progressbar.css";
-interface IDSProgressbarProps {
+interface IDSProgressbarProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     hideLabel?: boolean;
     value?: number;

package/components/progressbar/progressbar.js

@@ -1,8 +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 = "" }) => {
-    return (jsxs("div", { className: "ids-progressbar", children: [hideLabel ? null : (jsxs("div", { className: "ids-progressbar__label", children: [label && 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 })] }));
+const IDSProgressbar = ({ label = "", hideLabel = false, value = 0, srLabel = "", className }) => {
+    return (jsxs("div", { className: clsx("ids-progressbar", className), 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 })] }));
 };
 
 export { IDSProgressbar };

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

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/puff-list/puff-list.css";
+interface IDSPuffListItemInfoProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+export declare const IDSPuffListItemInfo: React.FC<IDSPuffListItemInfoProps>;
+export {};

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

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/puff-list/puff-list.css';
+
+const IDSPuffListItemInfo = ({ children }) => {
+    return jsx("div", { className: "ids-puff-list-item__info", children: children });
+};
+
+export { IDSPuffListItemInfo };

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

@@ -1,3 +1,19 @@
-import '@inera/ids-core/components/puff-list/register.js';
-import { IDSPuffListItem as PuffListItem } from '@inera/ids-core/components/puff-list/puff-list-item/puff-list-item-element.js';
-export declare const IDSPuffListItem: import("@lit-labs/react").ReactWebComponent<PuffListItem, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/puff-list/puff-list.css";
+interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: ReactNode;
+    headlineLink?: React.ReactElement;
+    itemLink?: React.ReactElement;
+    date?: Date | null;
+    year?: string;
+    month?: number;
+    monthLabel?: string;
+    day?: number;
+    time?: string;
+    noContent?: boolean;
+    noMargin?: boolean;
+    dateLabel?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSPuffListItem: React.FC<IDSPuffListItemProps>;
+export {};

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

@@ -1,12 +1,59 @@
-import * as React from 'react';
-import '@inera/ids-core/components/puff-list/register.js';
-import { IDSPuffListItem as IDSPuffListItem$1 } from '@inera/ids-core/components/puff-list/puff-list-item/puff-list-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/puff-list/puff-list.css';
+import { getMonthAsSweText, getDayAsText } from '../../utils/utils.js';
+import clsx from 'clsx';
 
-const IDSPuffListItem = createComponent({
-    tagName: 'ids-puff-list-item',
-    elementClass: IDSPuffListItem$1,
-    react: React,
-});
+const IDSPuffListItem = ({ headline = "", headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", noContent = false, noMargin = false, dateLabel, className, children }) => {
+    const [presentedDate, setPresentedDate] = useState(date);
+    useEffect(() => {
+        if (date) {
+            setPresentedDate(new Date(date));
+        }
+    }, [date]);
+    const hasDate = () => date || year || month !== -1 || day !== -1;
+    const getYear = () => presentedDate?.getFullYear() || year;
+    const getMonth = () => (presentedDate ? presentedDate.getMonth() + 1 : month);
+    const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
+    const getDay = () => getDayAsText(presentedDate?.getDate() || day);
+    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 getHeaderClass = (noMargin) => clsx("ids-puff-list-item__header", {
+        "ids-puff-list-item--no-margin": noMargin
+    });
+    const renderHeadline = () => {
+        const headlineContent = jsx(Fragment, { children: headline });
+        if (headlineLink && isValidElement(headlineLink)) {
+            return (jsx("h2", { className: getHeaderClass(noMargin), children: cloneElement(headlineLink, {
+                    ...headlineLink.props,
+                    children: headlineContent
+                }) }));
+        }
+        return jsx("h2", { className: getHeaderClass(noMargin), children: headline });
+    };
+    const renderBody = () => {
+        const content = (jsxs(Fragment, { children: [renderHeadline(), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
+        if (itemLink && isValidElement(itemLink)) {
+            return cloneElement(itemLink, {
+                ...itemLink.props,
+                className: clsx("ids-puff-list-item__item-link", itemLink.props.className),
+                children: content
+            });
+        }
+        return content;
+    };
+    return (jsx("li", { className: clsx("ids-puff-list-item", {
+            "ids-puff-list-item--interactive": !!itemLink
+        }, className), 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("div", { className: "ids-puff-list-item__date", children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] })), renderBody()] })] }) }));
+};
 
 export { IDSPuffListItem };

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

@@ -1,3 +1,7 @@
-import '@inera/ids-core/components/puff-list/register.js';
-import { IDSPuffList as PuffList } from '@inera/ids-core/components/puff-list/puff-list-element.js';
-export declare const IDSPuffList: import("@lit-labs/react").ReactWebComponent<PuffList, {}>;
+import React, { ReactNode } from "react";
+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 {};

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

@@ -1,12 +1,9 @@
-import * as React from 'react';
-import '@inera/ids-core/components/puff-list/register.js';
-import { IDSPuffList as IDSPuffList$1 } from '@inera/ids-core/components/puff-list/puff-list-element.js';
-import { createComponent } from '@lit-labs/react';
+import { jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/puff-list/puff-list.css';
+import clsx from 'clsx';
 
-const IDSPuffList = createComponent({
-    tagName: 'ids-puff-list',
-    elementClass: IDSPuffList$1,
-    react: React,
-});
+const IDSPuffList = ({ children, className }) => {
+    return jsx("ul", { className: clsx("ids-puff-list", className), children: children });
+};
 
 export { IDSPuffList };

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

@@ -0,0 +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> {
+    name: string;
+    size?: Size;
+    colorPreset?: number;
+    light?: boolean;
+    inline?: boolean;
+}
+export declare const IDSRegionIcon: React.FC<IDSRegionIconProps>;
+export {};

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

@@ -0,0 +1,25 @@
+"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 }) => {
+    const getSize = () => {
+        switch (size) {
+            case "l":
+                return "3rem";
+            case "m":
+                return "2.5rem";
+            case "s":
+                return "2.0rem";
+            case "xs":
+                return "1.5rem";
+            default:
+                return "2.5rem";
+        }
+    };
+    const classNames = clsx("ids-region-icon", `ids-region-icon--${name}`, `ids-region-icon--color-preset-${light ? 4 : colorPreset}`, { "ids-region-icon--inline": inline }, className);
+    return jsx("span", { className: classNames, style: { fontSize: getSize() }, ...props });
+};
+
+export { IDSRegionIcon };

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

@@ -1,6 +1,16 @@
-import '@inera/ids-core/components/side-menu/register.js';
-import { IDSSideMenu as SideMenu } from '@inera/ids-core/components/side-menu/side-menu-element.js';
-export declare const IDSSideMenu: import("@lit-labs/react").ReactWebComponent<SideMenu, {
-    onClosed: string;
-    onOpened: string;
-}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/side-menu/side-menu.css";
+interface IDSSideMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    srToggleText?: string;
+    expanded?: boolean;
+    active?: boolean;
+    level?: number;
+    icon?: string;
+    labelNotification?: ReactNode;
+    link?: ReactNode;
+    children?: ReactNode;
+    onExpandedChange?: (expanded: boolean) => void;
+}
+export declare const IDSSideMenu: React.FC<IDSSideMenuProps>;
+export {};