@inera/ids-react 5.5.0 → 6.0.1

package/components/accordion/accordion.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/accordion/accordion.css";
+interface IDSAccordionProps {
+    headline: ReactNode;
+    headlineSize?: "m" | "s" | "xs";
+    level?: 1 | 2;
+    expanded?: boolean;
+    lean?: boolean;
+    onCollapsed?: () => void;
+    onExpanded?: () => void;
+    children?: ReactNode;
+}
+export declare const IDSAccordion: React.FC<IDSAccordionProps>;
+export {};

package/components/accordion/accordion.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/accordion/accordion.css';
+
+// TODO common function
+const generateId = () => {
+    return `ids-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`;
+};
+const IDSAccordion = ({ headline = "", level = 1, headlineSize = level === 2 ? "s" : "m", expanded = false, lean = false, onCollapsed, onExpanded, children }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const [isLean, setIsLean] = useState(lean);
+    const [insideIDSCard, setInsideIDSCard] = useState(false);
+    const [hasChildren, setHasChildren] = useState(false);
+    const contentId = useRef(generateId());
+    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) {
+            if (onCollapsed) {
+                onCollapsed();
+            }
+        }
+        else {
+            if (onExpanded) {
+                onExpanded();
+            }
+        }
+    };
+    const onKeyPress = (e) => {
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            toggleExpansion();
+        }
+    };
+    return (jsxs("div", { ref: accordionRef, className: clsx("ids-accordion", {
+            "ids-accordion--expanded": isExpanded,
+            "ids-accordion--lean": lean || isLean,
+            "ids-accordion--has-children": hasChildren,
+            "ids-accordion--is-child": level === 2
+        }), children: [jsx("div", { className: `ids-accordion__button ids-accordion__button--${headlineSize}`, role: "button", tabIndex: 0, onClick: toggleExpansion, onKeyDown: onKeyPress, "aria-expanded": isExpanded, "aria-controls": contentId.current, children: jsx("div", { className: `ids-accordion__headline ids-accordion__headline-${level} ids-accordion__headline--${headlineSize} ${isExpanded ? "ids-accordion__headline--expanded" : ""} `, children: headline }) }), jsx("div", { "aria-hidden": !isExpanded, id: contentId.current, className: "ids-accordion__content", children: React__default.Children.map(children, child => {
+                    if (React__default.isValidElement(child)) {
+                        return React__default.cloneElement(child, {
+                            level: 2,
+                            headlineSize: headlineSize === "m" ? "s" : headlineSize === "s" ? "xs" : "xs"
+                        });
+                    }
+                    return child;
+                }) })] }));
+};
+
+export { IDSAccordion };

package/components/agent/agent.d.ts

@@ -1,5 +1,12 @@
-import '@inera/ids-core/components/agent/register.js';
-import { IDSAgent as Agent } from '@inera/ids-core/components/agent/agent-element.js';
-export declare const IDSAgent: import("@lit-labs/react").ReactWebComponent<Agent, {
-    onDidToggleExpansion: string;
-}>;
+import React, { ReactNode } from "react";
+interface IDSAgentProps {
+    showText?: string;
+    hideText?: string;
+    collapsed?: boolean;
+    children?: ReactNode;
+    actions?: ReactNode;
+    headline?: ReactNode;
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+export declare const IDSAgent: React.FC<IDSAgentProps>;
+export {};

package/components/agent/agent.js

@@ -1,15 +1,18 @@
-import React__default from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/agent/register.js';
-import { IDSAgent as IDSAgent$1 } from '@inera/ids-core/components/agent/agent-element.js';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { IDSAlertGlobal } from '../alert-global/alert-global.js';
 
-const IDSAgent = createComponent({
-    tagName: 'ids-agent',
-    elementClass: IDSAgent$1,
-    react: React__default,
-    events: {
-        onDidToggleExpansion: 'didToggleExpansion'
-    }
-});
+const IDSAgent = ({ showText = "Visa mer", hideText = "Visa mindre", collapsed = false, onCollapsedChange, children, actions, headline }) => {
+    const [isCollapsed, setIsCollapsed] = useState(collapsed);
+    useEffect(() => {
+        setIsCollapsed(collapsed);
+    }, [collapsed]);
+    const handleToggleCollapse = () => {
+        setIsCollapsed(!isCollapsed);
+        onCollapsedChange?.(!isCollapsed);
+    };
+    return (jsx(IDSAlertGlobal, { showText: showText, hideText: hideText, collapsed: isCollapsed, agent: true, actions: actions, headline: headline, noRole: true, onCollapsedChange: handleToggleCollapse, children: children }));
+};
 
 export { IDSAgent };

package/components/alert/alert.d.ts

@@ -1,6 +1,21 @@
-import '@inera/ids-core/components/alert/register.js';
-import { IDSAlert as Alert } from '@inera/ids-core/components/alert/alert-element.js';
-export declare const IDSAlert: import("@lit-labs/react").ReactWebComponent<Alert, {
-    onClosed: string;
-    onCollapsed: string;
-}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/alert/alert.css";
+interface IDSAlertProps {
+    collapsable?: boolean;
+    ribbon?: boolean;
+    collapsed?: boolean;
+    dismissible?: boolean;
+    headline?: ReactNode;
+    compact?: boolean;
+    type?: "info" | "attention" | "success" | "error";
+    srCloseText?: string;
+    srCollapseText?: string;
+    srExpandText?: string;
+    srIconTitle?: string;
+    noRole?: boolean;
+    children?: ReactNode;
+    onClose?: () => void;
+    onCollapsedChange?: (collapsed: boolean) => void;
+}
+export declare const IDSAlert: React.FC<IDSAlertProps>;
+export {};

package/components/alert/alert.js

@@ -1,17 +1,22 @@
-import React__default from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/alert/register.js';
-import { IDSAlert as IDSAlert$1 } from '@inera/ids-core/components/alert/alert-element.js';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '@inera/ids-design/components/alert/alert.css';
 
-const IDSAlert = createComponent({
-    displayName: 'IDSAlert',
-    tagName: 'ids-alert',
-    elementClass: IDSAlert$1,
-    react: React__default,
-    events: {
-        onClosed: 'closed',
-        onCollapsed: 'collapsed'
-    }
-});
+const IDSAlert = ({ collapsable = false, ribbon = false, collapsed = false, dismissible = false, headline, compact = false, type = "info", srCloseText = "Stäng alert", srCollapseText = "Minimera alertmeddelande", srExpandText = "Expandera alertmeddelande", noRole = false, srIconTitle = "", onClose, onCollapsedChange, children }) => {
+    const [isCollapsed, setIsCollapsed] = useState(collapsed);
+    useEffect(() => {
+        setIsCollapsed(collapsed);
+    }, [collapsed]);
+    const handleToggleCollapse = () => {
+        const newCollapsedState = !isCollapsed;
+        setIsCollapsed(newCollapsedState);
+        onCollapsedChange?.(newCollapsedState);
+    };
+    const handleClose = () => {
+        onClose?.();
+    };
+    return (jsx("div", { className: `ids-alert ids-alert--${type} ${compact ? "ids-alert--compact" : ""} ${ribbon ? "ids-alert--ribbon" : ""} ${isCollapsed ? "ids-alert--collapsed" : ""}`, role: !noRole ? "alert" : undefined, children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", title: srIconTitle }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", title: srIconTitle }), jsx("div", { className: "ids-alert__headline", children: headline })] }), dismissible && (jsx("button", { className: "ids-alert__close", onClick: handleClose, "aria-label": srCloseText })), collapsable && !compact && !ribbon && (jsx("button", { className: `ids-alert__expand ${!isCollapsed ? "ids-alert__expand--expanded" : ""}`, onClick: handleToggleCollapse, "aria-expanded": !isCollapsed, "aria-label": isCollapsed ? srExpandText : srCollapseText }))] }), !isCollapsed && jsx("div", { className: "ids-alert__content", children: children })] })) }));
+};
 
 export { IDSAlert };

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

@@ -1,5 +1,16 @@
-import '@inera/ids-core/components/alert-global/register.js';
-import { IDSAlertGlobal as AlertGlobal } from '@inera/ids-core/components/alert-global/alert-global-element.js';
-export declare const IDSAlertGlobal: import("@lit-labs/react").ReactWebComponent<AlertGlobal, {
-    onDidToggleExpansion: string;
-}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/alert-global/alert-global.css";
+interface IDSAlertGlobalProps {
+    agent?: boolean;
+    showText?: string;
+    hideText?: string;
+    collapsed?: boolean;
+    noRole?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    icon?: ReactNode;
+    children?: ReactNode;
+    actions?: ReactNode;
+    headline?: ReactNode;
+}
+export declare const IDSAlertGlobal: React.FC<IDSAlertGlobalProps>;
+export {};

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

@@ -1,16 +1,29 @@
-import React__default from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/alert-global/register.js';
-import { IDSAlertGlobal as IDSAlertGlobal$1 } from '@inera/ids-core/components/alert-global/alert-global-element.js';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '@inera/ids-design/components/alert-global/alert-global.css';
+import clsx from 'clsx';
 
-const IDSAlertGlobal = createComponent({
-    displayName: 'IDSAlertGlobal',
-    tagName: 'ids-alert-global',
-    elementClass: IDSAlertGlobal$1,
-    react: React__default,
-    events: {
-        onDidToggleExpansion: 'didToggleExpansion'
-    }
-});
+// TODO common function
+const generateId = () => {
+    return `ids-${Math.random().toString(36).slice(2)}-${Math.random().toString(36).slice(2)}`;
+};
+const IDSAlertGlobal = ({ agent = false, showText = "Visa meddelande", hideText = "Dölj meddelande", collapsed = false, noRole = false, onCollapsedChange, icon, children, actions, headline }) => {
+    const [isCollapsed, setIsCollapsed] = useState(collapsed);
+    useEffect(() => {
+        setIsCollapsed(collapsed);
+    }, [collapsed]);
+    const handleToggleCollapse = () => {
+        setIsCollapsed(!isCollapsed);
+        onCollapsedChange?.(!isCollapsed);
+    };
+    const contentId = generateId();
+    return (jsx("div", { role: noRole ? null : "alert", className: clsx("ids-alert-global", {
+            "ids-alert-global--collapsed": isCollapsed,
+            "ids-alert-global--agent": agent
+        }), children: jsxs("div", { className: "ids-alert-global__inner", children: [jsxs("div", { className: "ids-alert-global__header", children: [jsxs("div", { className: `ids-alert-global__icon-headline ${agent ? "ids-alert-global__icon-headline--agent" : ""}`, children: [icon && jsx("div", { className: "ids-alert-global__icon", children: icon }), jsx("div", { className: "ids-alert-global__headline", children: headline })] }), jsx("button", { className: clsx("ids-alert-global__button", {
+                                "ids-alert-global__button--expanded": !isCollapsed
+                            }), "aria-controls": contentId, "aria-label": isCollapsed ? showText : hideText, "aria-expanded": !isCollapsed, onClick: handleToggleCollapse, children: jsx("span", { className: "ids-alert-global__button-text", children: !isCollapsed ? hideText : showText }) })] }), jsx("div", { id: contentId, className: "ids-alert-global__content", children: children }), jsx("div", { className: "ids-alert-global__sub-content", children: actions })] }) }));
+};
 
 export { IDSAlertGlobal };

package/components/badge/badge.d.ts

@@ -1,3 +1,9 @@
-import '@inera/ids-core/components/badge/register.js';
-import { IDSBadge as Badge } from '@inera/ids-core/components/badge/badge-element.js';
-export declare const IDSBadge: import("@lit-labs/react").ReactWebComponent<Badge, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/badge/badge.css";
+interface IDSBadgeProps {
+    type?: "primary" | "neutral" | "info" | "attention" | "success" | "error" | "secondary";
+    icon?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSBadge: React.FC<IDSBadgeProps>;
+export {};

package/components/badge/badge.js

@@ -1,12 +1,8 @@
-import * as React from 'react';
-import '@inera/ids-core/components/badge/register.js';
-import { IDSBadge as IDSBadge$1 } from '@inera/ids-core/components/badge/badge-element.js';
-import { createComponent } from '@lit-labs/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/badge/badge.css';
 
-const IDSBadge = createComponent({
-    tagName: 'ids-badge',
-    elementClass: IDSBadge$1,
-    react: React,
-});
+const IDSBadge = ({ type = "primary", icon, children }) => {
+    return (jsxs("div", { className: `ids-badge ids-badge--${type}`, children: [icon && jsx("div", { className: "ids-badge__icon", children: icon }), children] }));
+};
 
 export { IDSBadge };

package/components/breadcrumbs/breadcrumbs.d.ts

@@ -1,5 +1,9 @@
-import '@inera/ids-core/components/breadcrumbs/register.js';
-import { IDSBreadcrumbs as Breadcrumbs } from '@inera/ids-core/components/breadcrumbs/breadcrumbs-element.js';
-import { IDSCrumb as Crumbs } from '@inera/ids-core/components/breadcrumbs/crumb/crumb-element.js';
-export declare const IDSBreadcrumbs: import("@lit-labs/react").ReactWebComponent<Breadcrumbs, {}>;
-export declare const IDSCrumb: import("@lit-labs/react").ReactWebComponent<Crumbs, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/breadcrumbs/breadcrumbs.css";
+interface IDSBreadcrumbsProps {
+    lead?: string;
+    children?: ReactNode;
+    mobileLink?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> | React.LinkHTMLAttributes<HTMLLinkElement>>;
+}
+export declare const IDSBreadcrumbs: React.FC<IDSBreadcrumbsProps>;
+export {};

package/components/breadcrumbs/breadcrumbs.js

@@ -1,18 +1,29 @@
-import * as React from 'react';
-import '@inera/ids-core/components/breadcrumbs/register.js';
-import { IDSBreadcrumbs as IDSBreadcrumbs$1 } from '@inera/ids-core/components/breadcrumbs/breadcrumbs-element.js';
-import { IDSCrumb as IDSCrumb$1 } from '@inera/ids-core/components/breadcrumbs/crumb/crumb-element.js';
-import { createComponent } from '@lit-labs/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import '@inera/ids-design/components/breadcrumbs/breadcrumbs.css';
 
-const IDSBreadcrumbs = createComponent({
-    tagName: 'ids-breadcrumbs',
-    elementClass: IDSBreadcrumbs$1,
-    react: React,
-});
-const IDSCrumb = createComponent({
-    tagName: 'ids-crumb',
-    elementClass: IDSCrumb$1,
-    react: React,
-});
+const IDSBreadcrumbs = ({ lead = "Du är här", mobileLink, children }) => {
+    const getMobileLink = () => {
+        if (mobileLink) {
+            return React__default.cloneElement(mobileLink, { className: "ids-breadcrumbs__mobile-link" });
+        }
+        else {
+            return null;
+        }
+    };
+    const getLinks = () => {
+        const links = React__default.Children.toArray(children);
+        return links.flatMap((child, index) => {
+            const isLast = index === links.length - 1;
+            if (isLast) {
+                return (jsx("li", { className: "ids-breadcrumbs__crumb ids-breadcrumbs__crumb--current", children: child }, index));
+            }
+            else {
+                return (jsxs("li", { className: "ids-breadcrumbs__crumb", children: [child, jsx("span", { className: "ids-breadcrumbs__crumb__separator", "aria-hidden": "true", children: "/" })] }, index));
+            }
+        });
+    };
+    return (jsxs("nav", { className: "ids-breadcrumbs", "aria-label": lead, children: [jsxs("ol", { className: "ids-breadcrumbs__desktop", children: [jsx("li", { className: "ids-breadcrumbs__lead", children: lead }), getLinks()] }), jsx("ol", { className: "ids-breadcrumbs__mobile", children: jsxs("li", { className: "ids-breadcrumbs__mobile-links", children: [jsx("span", { className: "ids-breadcrumbs__icon" }), getMobileLink()] }) })] }));
+};
 
-export { IDSBreadcrumbs, IDSCrumb };
+export { IDSBreadcrumbs };

package/components/card/card.d.ts

@@ -1,3 +1,13 @@
-import '@inera/ids-core/components/card/register.js';
-import { IDSCard as Card } from '@inera/ids-core/components/card/card-element.js';
-export declare const IDSCard: import("@lit-labs/react").ReactWebComponent<Card, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/card/card.css";
+interface IDSCardProps {
+    fill?: number;
+    borderTop?: number;
+    lean?: boolean;
+    hideOnM?: boolean;
+    hideOnS?: boolean;
+    interactive?: boolean;
+    children?: ReactNode;
+}
+export declare const IDSCard: React.FC<IDSCardProps>;
+export {};

package/components/card/card.js

@@ -1,12 +1,14 @@
-import * as React from 'react';
-import '@inera/ids-core/components/card/register.js';
-import { IDSCard as IDSCard$1 } from '@inera/ids-core/components/card/card-element.js';
-import { createComponent } from '@lit-labs/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/card/card.css';
 
-const IDSCard = createComponent({
-    tagName: 'ids-card',
-    elementClass: IDSCard$1,
-    react: React,
-});
+const IDSCard = ({ fill = 0, borderTop = 0, lean = false, hideOnM = false, hideOnS = false, interactive = false, children }) => {
+    return (jsxs("div", { className: `ids-card
+        ${hideOnM ? "ids-card--hide-on-m" : ""}
+        ${hideOnS ? "ids-card--hide-on-s" : ""}
+        ${fill > 0 && !borderTop ? `ids-card--fill-${fill}` : ""}
+        ${borderTop ? `ids-card--border-top-${borderTop}` : ""}
+        ${lean ? "ids-card--lean" : ""}
+        ${interactive ? "ids-card--interactive" : ""}`.trim(), children: [borderTop > 0 && fill === 0 && jsx("div", { className: "ids-card__border-top" }), jsx("div", { className: "ids-card__content", children: children })] }));
+};
 
 export { IDSCard };

package/components/date-label/date-label.d.ts

@@ -1,3 +1,11 @@
-import '@inera/ids-core/components/date-label/register.js';
-import { IDSDateLabel as DateLabel } from '@inera/ids-core/components/date-label/date-label-element.js';
-export declare const IDSDateLabel: import("@lit-labs/react").ReactWebComponent<DateLabel, {}>;
+import React from "react";
+import "@inera/ids-design/components/date-label/date-label.css";
+interface IDSDateLabelProps {
+    date?: Date | null;
+    year?: number;
+    month?: number;
+    monthLabel?: string;
+    day?: number;
+}
+export declare const IDSDateLabel: React.FC<IDSDateLabelProps>;
+export {};

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

@@ -1,12 +1,61 @@
-import * as React from 'react';
-import '@inera/ids-core/components/date-label/register.js';
-import { IDSDateLabel as IDSDateLabel$1 } from '@inera/ids-core/components/date-label/date-label-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import '@inera/ids-design/components/date-label/date-label.css';
 
-const IDSDateLabel = createComponent({
-    tagName: 'ids-date-label',
-    elementClass: IDSDateLabel$1,
-    react: React,
-});
+const IDSDateLabel = ({ date = null, year = 0, month = 0, monthLabel = "", day = 0 }) => {
+    const [presentedDate, setPresentedDate] = useState(null);
+    useEffect(() => {
+        if (date) {
+            setPresentedDate(new Date(date));
+        }
+    }, [date]);
+    const getYear = () => (presentedDate ? presentedDate.getFullYear() : year);
+    const getMonth = () => (presentedDate ? presentedDate.getMonth() + 1 : month);
+    const getDay = () => {
+        const dayNumber = presentedDate ? presentedDate.getDate() : day;
+        return getDayAsText(dayNumber);
+    };
+    const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
+    const getDayAsText = (day) => {
+        if (day > 0) {
+            return day < 10 ? "0" + day : "" + day;
+        }
+        else {
+            return "";
+        }
+    };
+    const getMonthAsSweText = (date, letters) => {
+        switch (date) {
+            case 0:
+                return "Januari".substring(0, letters);
+            case 1:
+                return "Februari".substring(0, letters);
+            case 2:
+                return "Mars".substring(0, letters);
+            case 3:
+                return "April".substring(0, letters);
+            case 4:
+                return "Maj".substring(0, letters);
+            case 5:
+                return "Juni".substring(0, letters);
+            case 6:
+                return "Juli".substring(0, letters);
+            case 7:
+                return "Augusti".substring(0, letters);
+            case 8:
+                return "September".substring(0, letters);
+            case 9:
+                return "Oktober".substring(0, letters);
+            case 10:
+                return "November".substring(0, letters);
+            case 11:
+                return "December".substring(0, letters);
+            default:
+                return "";
+        }
+    };
+    return (jsxs("time", { className: "ids-date-label", dateTime: `${getDay()}-${getMonth().toString().padStart(2, "0")}-${getYear()}`, 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() })] }));
+};
 
 export { IDSDateLabel };

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

@@ -1,3 +1,8 @@
-import '@inera/ids-core/components/notification/badge/register.js';
-import { IDSNotificationBadge as Badge } from '@inera/ids-core/components/notification/badge/notification-badge-element.js';
-export declare const IDSNotificationBadge: import("@lit-labs/react").ReactWebComponent<Badge, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/notification-badge/notification-badge.css";
+interface IDSNotificationBadgeProps {
+    outlined?: boolean;
+    children?: ReactNode;
+}
+export declare const IDSNotificationBadge: React.FC<IDSNotificationBadgeProps>;
+export {};

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

@@ -1,12 +1,8 @@
-import * as React from 'react';
-import '@inera/ids-core/components/notification/badge/register.js';
-import { IDSNotificationBadge as IDSNotificationBadge$1 } from '@inera/ids-core/components/notification/badge/notification-badge-element.js';
-import { createComponent } from '@lit-labs/react';
+import { jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/notification-badge/notification-badge.css';
 
-const IDSNotificationBadge = createComponent({
-    tagName: 'ids-notification-badge',
-    elementClass: IDSNotificationBadge$1,
-    react: React
-});
+const IDSNotificationBadge = ({ outlined = false, children }) => {
+    return (jsx("div", { className: "ids-notification-badge" + (outlined ? " ids-notification-badge--outlined" : ""), children: children }));
+};
 
 export { IDSNotificationBadge };

package/components/progressbar/progressbar.d.ts

@@ -1,3 +1,9 @@
-import '@inera/ids-core/components/progressbar/register.js';
-import { IDSProgressbar as Progressbar } from '@inera/ids-core/components/progressbar/progressbar-element.js';
-export declare const IDSProgressbar: import("@lit-labs/react").ReactWebComponent<Progressbar, {}>;
+import React from "react";
+import "@inera/ids-design/components/progressbar/progressbar.css";
+interface IDSProgressbarProps {
+    hideLabel?: boolean;
+    value?: number;
+    srLabel: string;
+}
+export declare const IDSProgressbar: React.FC<IDSProgressbarProps>;
+export {};

package/components/progressbar/progressbar.js

@@ -1,12 +1,8 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/progressbar/register.js';
-import { IDSProgressbar as IDSProgressbar$1 } from '@inera/ids-core/components/progressbar/progressbar-element.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/progressbar/progressbar.css';
 
-const IDSProgressbar = createComponent({
-    tagName: 'ids-progressbar',
-    elementClass: IDSProgressbar$1,
-    react: React
-});
+const IDSProgressbar = ({ hideLabel = false, value = 0, srLabel = "" }) => {
+    return (jsxs("div", { className: "ids-progressbar", 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}% + 2px)` } })) : null, hideLabel ? null : jsxs("div", { className: "ids-progressbar__label", children: [value, "%"] })] }));
+};
 
 export { IDSProgressbar };

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

@@ -0,0 +1,3 @@
+import '@inera/ids-core/components/puff-list/register.js';
+import { IDSPuffListItemInfo as PuffListItemInfo } from '@inera/ids-core/components/puff-list/puff-list-item/puff-list-info/puff-list-item-info-element.js';
+export declare const IDSPuffListItemInfo: import("@lit-labs/react").ReactWebComponent<PuffListItemInfo, {}>;

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import '@inera/ids-core/components/puff-list/register.js';
+import { IDSPuffListItemInfo as IDSPuffListItemInfo$1 } from '@inera/ids-core/components/puff-list/puff-list-item/puff-list-info/puff-list-item-info-element.js';
+import { createComponent } from '@lit-labs/react';
+
+const IDSPuffListItemInfo = createComponent({
+    tagName: 'ids-puff-list-item-info',
+    elementClass: IDSPuffListItemInfo$1,
+    react: React,
+});
+
+export { IDSPuffListItemInfo };

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

@@ -0,0 +1,3 @@
+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, {}>;

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

@@ -0,0 +1,12 @@
+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';
+
+const IDSPuffListItem = createComponent({
+    tagName: 'ids-puff-list-item',
+    elementClass: IDSPuffListItem$1,
+    react: React,
+});
+
+export { IDSPuffListItem };

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

@@ -0,0 +1,3 @@
+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, {}>;

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

@@ -0,0 +1,12 @@
+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';
+
+const IDSPuffList = createComponent({
+    tagName: 'ids-puff-list',
+    elementClass: IDSPuffList$1,
+    react: React,
+});
+
+export { IDSPuffList };

package/components/tag/tag.d.ts

@@ -1,6 +1,11 @@
-import '@inera/ids-core/components/tag/register.js';
-import { IDSTag as Tag } from '@inera/ids-core/components/tag/tag-element.js';
-export declare const IDSTag: import("@lit-labs/react").ReactWebComponent<Tag, {
-    onClosed: string;
-    onClicked: string;
-}>;
+import React from "react";
+import "@inera/ids-design/components/tag/tag.css";
+type IDSTagProps = {
+    closeable?: boolean;
+    srCloseLabel?: string;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    clickable?: React.ReactElement<any>;
+};
+export declare const IDSTag: React.FC<IDSTagProps>;
+export {};

package/components/tag/tag.js

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import '@inera/ids-core/components/tag/register.js';
-import { IDSTag as IDSTag$1 } from '@inera/ids-core/components/tag/tag-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import '@inera/ids-design/components/tag/tag.css';
 
-const IDSTag = createComponent({
-    tagName: 'ids-tag',
-    elementClass: IDSTag$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onClicked: 'clicked',
-    },
-});
+const IDSTag = ({ closeable = false, srCloseLabel = "", onClose, children, clickable }) => {
+    return (jsx(Fragment, { children: clickable ? (React__default.cloneElement(clickable, {
+            className: `${clickable.props.className || ""} ids-tag ids-tag--clickable`
+        })) : (jsxs("span", { className: `${clickable ? "" : "ids-tag"}`, children: [jsx("div", { className: "ids-tag__content", children: children }), closeable && !clickable && (jsx("button", { className: "ids-tag__close-btn", "aria-label": srCloseLabel, onClick: e => {
+                        e.stopPropagation();
+                        if (onClose)
+                            onClose();
+                    } }))] })) }));
+};
 
 export { IDSTag };

package/index.d.ts

@@ -7,39 +7,30 @@ export * from "./components/form/radio/radio-group";
 export * from "./components/form/textarea/textarea";
 export * from "./components/form/range/range";
 export * from "./components/form/select/select";
-export * from "./components/form/selectmultiple/select-multiple";
+export * from "./components/form/select-multiple/select-multiple";
 export * from "./components/form/errormessage/error-message";
 export * from "./components/form/time/time";
 export * from "./components/form/spinner/spinner";
 export * from "./components/button/button";
 export * from "./components/button-group/button-group";
 export * from "./components/grid/grid";
+export * from "./components/accordion/accordion";
 export * from "./components/alert/alert";
 export * from "./components/alert-global/alert-global";
-export * from "./components/header/header";
-export * from "./components/header/item/header-item";
-export * from "./components/header/avatar/header-avatar";
-export * from "./components/header/navigation/navigation";
-export * from "./components/header/navigation/item/nav-item";
-export * from "./components/header/navigation/mobile-item/nav-mobile-item";
-export * from "./components/header/mobile-menu/header-mobile-menu";
-export * from "./components/mobile/menu/avatar/mobile-avatar";
 export * from "./components/mobile/menu/item/mobile-item";
 export * from "./components/mobile/menu/mobile-menu";
 export * from "./components/link/link";
-export * from "./components/footer/footer";
 export * from "./components/notification/badge/notification-badge";
 export * from "./components/tabs/tabs";
-export * from "./components/list/list";
-export * from "./components/list/item/list-item";
-export * from "./components/list/item/info/list-item-info";
+export * from "./components/puff-list/puff-list";
+export * from "./components/puff-list/puff-list-item/puff-list-item";
+export * from "./components/puff-list/puff-list-item/puff-list-info/puff-list-item-info";
 export * from "./components/date-label/date-label";
 export * from "./components/breadcrumbs/breadcrumbs";
 export * from "./components/dialog/dialog";
 export * from "./components/dropdown/dropdown";
 export * from "./components/card/card";
 export * from "./components/agent/agent";
-export * from "./components/expandable/expandable";
 export * from "./components/popover/popover";
 export * from "./components/progressbar/progressbar";
 export * from "./components/badge/badge";

package/index.js

@@ -7,39 +7,30 @@ export { IDSRadioGroup } from './components/form/radio/radio-group.js';
 export { IDSTextarea } from './components/form/textarea/textarea.js';
 export { IDSRange } from './components/form/range/range.js';
 export { IDSSelect } from './components/form/select/select.js';
-export { IDSSelectMultiple } from './components/form/selectmultiple/select-multiple.js';
+export { IDSSelectMultiple } from './components/form/select-multiple/select-multiple.js';
 export { IDSErrorMessage } from './components/form/errormessage/error-message.js';
 export { IDSTime } from './components/form/time/time.js';
 export { IDSSpinner } from './components/form/spinner/spinner.js';
 export { IDSButton } from './components/button/button.js';
 export { IDSButtonGroup } from './components/button-group/button-group.js';
 export { IDSCol, IDSContainer, IDSRow } from './components/grid/grid.js';
+export { IDSAccordion } from './components/accordion/accordion.js';
 export { IDSAlert } from './components/alert/alert.js';
 export { IDSAlertGlobal } from './components/alert-global/alert-global.js';
-export { IDSHeader } from './components/header/header.js';
-export { IDSHeaderItem } from './components/header/item/header-item.js';
-export { IDSHeaderAvatar } from './components/header/avatar/header-avatar.js';
-export { IDSHeaderNav } from './components/header/navigation/navigation.js';
-export { IDSHeaderNavItem } from './components/header/navigation/item/nav-item.js';
-export { IDSHeaderMobileItem } from './components/header/navigation/mobile-item/nav-mobile-item.js';
-export { IDSHeaderMobileMenu } from './components/header/mobile-menu/header-mobile-menu.js';
-export { IDSMobileMenuAvatar } from './components/mobile/menu/avatar/mobile-avatar.js';
 export { IDSMobileMenuItem } from './components/mobile/menu/item/mobile-item.js';
 export { IDSMobileMenu } from './components/mobile/menu/mobile-menu.js';
 export { IDSLink } from './components/link/link.js';
-export { IDSFooter } from './components/footer/footer.js';
 export { IDSNotificationBadge } from './components/notification/badge/notification-badge.js';
 export { IDSTab, IDSTabPanel, IDSTabs } from './components/tabs/tabs.js';
-export { IDSList } from './components/list/list.js';
-export { IDSListItem } from './components/list/item/list-item.js';
-export { IDSListItemInfo } from './components/list/item/info/list-item-info.js';
+export { IDSPuffList } from './components/puff-list/puff-list.js';
+export { IDSPuffListItem } from './components/puff-list/puff-list-item/puff-list-item.js';
+export { IDSPuffListItemInfo } from './components/puff-list/puff-list-item/puff-list-info/puff-list-item-info.js';
 export { IDSDateLabel } from './components/date-label/date-label.js';
-export { IDSBreadcrumbs, IDSCrumb } from './components/breadcrumbs/breadcrumbs.js';
+export { IDSBreadcrumbs } from './components/breadcrumbs/breadcrumbs.js';
 export { IDSDialog } from './components/dialog/dialog.js';
 export { IDSDropdown, IDSDropdownContent } from './components/dropdown/dropdown.js';
 export { IDSCard } from './components/card/card.js';
 export { IDSAgent } from './components/agent/agent.js';
-export { IDSExpandable } from './components/expandable/expandable.js';
 export { IDSPopover, IDSPopoverContent } from './components/popover/popover.js';
 export { IDSProgressbar } from './components/progressbar/progressbar.js';
 export { IDSBadge } from './components/badge/badge.js';

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@inera/ids-react",
-  "version": "5.5.0",
+  "version": "6.0.1",
   "type": "module",
   "peerDependencies": {
     "react": "*"
   },
   "dependencies": {
-    "@inera/ids-core": "5.5.x",
-    "@lit-labs/react": "^1.1.0"
+    "@inera/ids-core": "6.0.x",
+    "@lit-labs/react": "^1.1.0",
+    "clsx": "*"
   },
   "types": "index.d.ts",
   "license": "SEE LICENSE IN LICENSE.md",

package/components/expandable/expandable.d.ts

@@ -1,6 +0,0 @@
-import '@inera/ids-core/components/expandable/register.js';
-import { IDSExpandable as Expandable } from '@inera/ids-core/components/expandable/expandable-element.js';
-export declare const IDSExpandable: import("@lit-labs/react").ReactWebComponent<Expandable, {
-    onClosed: string;
-    onExpanded: string;
-}>;

package/components/expandable/expandable.js

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/expandable/register.js';
-import { IDSExpandable as IDSExpandable$1 } from '@inera/ids-core/components/expandable/expandable-element.js';
-
-const IDSExpandable = createComponent({
-    tagName: 'ids-expandable',
-    elementClass: IDSExpandable$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onExpanded: 'expanded'
-    }
-});
-
-export { IDSExpandable };

package/components/footer/footer.d.ts

@@ -1,3 +0,0 @@
-import '@inera/ids-core/components/footer/register.js';
-import { IDSFooter as Footer } from '@inera/ids-core/components/footer/footer-element.js';
-export declare const IDSFooter: import("@lit-labs/react").ReactWebComponent<Footer, {}>;

package/components/footer/footer.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/footer/register.js';
-import { IDSFooter as IDSFooter$1 } from '@inera/ids-core/components/footer/footer-element.js';
-
-const IDSFooter = createComponent({
-    tagName: 'ids-footer',
-    elementClass: IDSFooter$1,
-    react: React,
-});
-
-export { IDSFooter };

package/components/header/avatar/header-avatar.d.ts

@@ -1,5 +0,0 @@
-import { IDSHeaderAvatar as HeaderAvatar } from '@inera/ids-core/components/header/avatar/header-avatar-element.js';
-export declare const IDSHeaderAvatar: import("@lit-labs/react").ReactWebComponent<HeaderAvatar, {
-    onClosed: string;
-    onExpanded: string;
-}>;

package/components/header/avatar/header-avatar.js

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { IDSHeaderAvatar as IDSHeaderAvatar$1 } from '@inera/ids-core/components/header/avatar/header-avatar-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSHeaderAvatar = createComponent({
-    tagName: 'ids-header-avatar',
-    elementClass: IDSHeaderAvatar$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onExpanded: 'expanded'
-    }
-});
-
-export { IDSHeaderAvatar };

package/components/header/header.d.ts

@@ -1,5 +0,0 @@
-import '@inera/ids-core/components/header/register.js';
-import { IDSHeader as Header } from '@inera/ids-core/components/header/header-element.js';
-export declare const IDSHeader: import("@lit-labs/react").ReactWebComponent<Header, {
-    onDidToggleRegion: string;
-}>;

package/components/header/header.js

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import '@inera/ids-core/components/header/register.js';
-import { IDSHeader as IDSHeader$1 } from '@inera/ids-core/components/header/header-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSHeader = createComponent({
-    tagName: 'ids-header',
-    elementClass: IDSHeader$1,
-    react: React,
-    events: {
-        onDidToggleRegion: 'didToggleRegion'
-    }
-});
-
-export { IDSHeader };

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

@@ -1,2 +0,0 @@
-import { IDSHeaderItem as HeaderItem } from '@inera/ids-core/components/header/item/header-item-element.js';
-export declare const IDSHeaderItem: import("@lit-labs/react").ReactWebComponent<HeaderItem, {}>;

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

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { IDSHeaderItem as IDSHeaderItem$1 } from '@inera/ids-core/components/header/item/header-item-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSHeaderItem = createComponent({
-    tagName: 'ids-header-item',
-    elementClass: IDSHeaderItem$1,
-    react: React,
-});
-
-export { IDSHeaderItem };

package/components/header/mobile-menu/header-mobile-menu.d.ts

@@ -1,5 +0,0 @@
-import { IDSHeaderMobileMenu as HeaderMobileMenu } from '@inera/ids-core/components/header/mobile-menu/header-mobile-menu-element.js';
-export declare const IDSHeaderMobileMenu: import("@lit-labs/react").ReactWebComponent<HeaderMobileMenu, {
-    onClosed: string;
-    onExpanded: string;
-}>;

package/components/header/mobile-menu/header-mobile-menu.js

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { IDSHeaderMobileMenu as IDSHeaderMobileMenu$1 } from '@inera/ids-core/components/header/mobile-menu/header-mobile-menu-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSHeaderMobileMenu = createComponent({
-    tagName: 'ids-header-mobile-menu',
-    elementClass: IDSHeaderMobileMenu$1,
-    react: React,
-    events: {
-        onClosed: 'closed',
-        onExpanded: 'expanded'
-    },
-});
-
-export { IDSHeaderMobileMenu };

package/components/header/navigation/item/nav-item.d.ts

@@ -1,2 +0,0 @@
-import { IDSHeaderNavItem as HeaderNavItem } from '@inera/ids-core/components/header/navigation/item/navigation-item-element.js';
-export declare const IDSHeaderNavItem: import("@lit-labs/react").ReactWebComponent<HeaderNavItem, {}>;

package/components/header/navigation/item/nav-item.js

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { IDSHeaderNavItem as IDSHeaderNavItem$1 } from '@inera/ids-core/components/header/navigation/item/navigation-item-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSHeaderNavItem = createComponent({
-    tagName: 'ids-header-nav-item',
-    elementClass: IDSHeaderNavItem$1,
-    react: React,
-});
-
-export { IDSHeaderNavItem };

package/components/header/navigation/mobile-item/nav-mobile-item.d.ts

@@ -1,2 +0,0 @@
-import { IDSHeaderMobileItem as HeaderMobileItem } from '@inera/ids-core/components/header/navigation/mobile-item/mobile-item-element.js';
-export declare const IDSHeaderMobileItem: import("@lit-labs/react").ReactWebComponent<HeaderMobileItem, {}>;

package/components/header/navigation/mobile-item/nav-mobile-item.js

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { IDSHeaderMobileItem as IDSHeaderMobileItem$1 } from '@inera/ids-core/components/header/navigation/mobile-item/mobile-item-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSHeaderMobileItem = createComponent({
-    tagName: 'ids-header-mobile-item',
-    elementClass: IDSHeaderMobileItem$1,
-    react: React,
-});
-
-export { IDSHeaderMobileItem };

package/components/header/navigation/navigation.d.ts

@@ -1,2 +0,0 @@
-import { IDSHeaderNav as HeaderNav } from '@inera/ids-core/components/header/navigation/navigation-element.js';
-export declare const IDSHeaderNav: import("@lit-labs/react").ReactWebComponent<HeaderNav, {}>;

package/components/header/navigation/navigation.js

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { IDSHeaderNav as IDSHeaderNav$1 } from '@inera/ids-core/components/header/navigation/navigation-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSHeaderNav = createComponent({
-    tagName: 'ids-header-nav',
-    elementClass: IDSHeaderNav$1,
-    react: React,
-});
-
-export { IDSHeaderNav };

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

@@ -1,3 +0,0 @@
-import '@inera/ids-core/components/list/register.js';
-import { IDSListItemInfo as ListItemInfo } from '@inera/ids-core/components/list/item/info/list-item-info-element.js';
-export declare const IDSListItemInfo: import("@lit-labs/react").ReactWebComponent<ListItemInfo, {}>;

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

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import '@inera/ids-core/components/list/register.js';
-import { IDSListItemInfo as IDSListItemInfo$1 } from '@inera/ids-core/components/list/item/info/list-item-info-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSListItemInfo = createComponent({
-    tagName: 'ids-list-item-info',
-    elementClass: IDSListItemInfo$1,
-    react: React,
-});
-
-export { IDSListItemInfo };

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

@@ -1,3 +0,0 @@
-import '@inera/ids-core/components/list/register.js';
-import { IDSListItem as ListItem } from '@inera/ids-core/components/list/item/list-item-element.js';
-export declare const IDSListItem: import("@lit-labs/react").ReactWebComponent<ListItem, {}>;

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

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import '@inera/ids-core/components/list/register.js';
-import { IDSListItem as IDSListItem$1 } from '@inera/ids-core/components/list/item/list-item-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSListItem = createComponent({
-    tagName: 'ids-list-item',
-    elementClass: IDSListItem$1,
-    react: React,
-});
-
-export { IDSListItem };

package/components/list/list.d.ts

@@ -1,3 +0,0 @@
-import '@inera/ids-core/components/list/register.js';
-import { IDSList as List } from '@inera/ids-core/components/list/list-element.js';
-export declare const IDSList: import("@lit-labs/react").ReactWebComponent<List, {}>;

package/components/list/list.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import '@inera/ids-core/components/list/register.js';
-import { IDSList as IDSList$1 } from '@inera/ids-core/components/list/list-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSList = createComponent({
-    tagName: 'ids-list',
-    elementClass: IDSList$1,
-    react: React,
-});
-
-export { IDSList };

package/components/mobile/menu/avatar/mobile-avatar.d.ts

@@ -1,2 +0,0 @@
-import { IDSMobileMenuAvatar as MobileMenuAvatar } from '@inera/ids-core/components/mobile/menu/avatar/mobile-menu-avatar-element.js';
-export declare const IDSMobileMenuAvatar: import("@lit-labs/react").ReactWebComponent<MobileMenuAvatar, {}>;

package/components/mobile/menu/avatar/mobile-avatar.js

@@ -1,11 +0,0 @@
-import * as React from 'react';
-import { IDSMobileMenuAvatar as IDSMobileMenuAvatar$1 } from '@inera/ids-core/components/mobile/menu/avatar/mobile-menu-avatar-element.js';
-import { createComponent } from '@lit-labs/react';
-
-const IDSMobileMenuAvatar = createComponent({
-    tagName: 'ids-mobile-menu-avatar',
-    elementClass: IDSMobileMenuAvatar$1,
-    react: React,
-});
-
-export { IDSMobileMenuAvatar };