@inera/ids-react 6.2.0 → 7.0.0

package/components/form/spinner/spinner.js

@@ -1,12 +1,12 @@
-import * as React from 'react';
-import '@inera/ids-core/components/form/spinner/register.js';
-import { IDSSpinner as IDSSpinner$1 } from '@inera/ids-core/components/form/spinner/spinner-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/form/spinner/spinner.css';
+import clsx from 'clsx';
 
-const IDSSpinner = createComponent({
-    tagName: 'ids-spinner',
-    elementClass: IDSSpinner$1,
-    react: React,
-});
+const IDSSpinner = ({ light = false, live = "polite", srText = "", className, ...props }) => {
+    return (jsxs("div", { role: "alert", className: clsx("ids-spinner", {
+            "ids-spinner--light": light
+        }, className), "aria-live": live, ...props, children: [jsx("p", { className: "ids-spinner-sr", children: srText }), jsx("div", { className: "ids-bounce-1" }), jsx("div", { className: "ids-bounce-2" }), jsx("div", { className: "ids-bounce-3" })] }));
+};
 
 export { IDSSpinner };

package/components/form/textarea/textarea.d.ts

@@ -1,3 +1,18 @@
-import '@inera/ids-core/components/form/textarea/register.js';
-import { IDSTextarea as Textarea } from '@inera/ids-core/components/form/textarea/textarea-element.js';
-export declare const IDSTextarea: import("@lit-labs/react").ReactWebComponent<Textarea, {}>;
+import React, { ReactNode, TextareaHTMLAttributes } from "react";
+interface IDSTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    hint?: string | ReactNode;
+    errorMsg?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    noValidation?: boolean;
+    autoSize?: boolean;
+    noResize?: boolean;
+    block?: boolean;
+    light?: boolean;
+    readOnly?: boolean;
+    tooltip?: ReactNode;
+}
+export declare const IDSTextarea: React.FC<IDSTextareaProps>;
+export {};

package/components/form/textarea/textarea.js

@@ -1,12 +1,29 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/textarea/register.js';
-import { IDSTextarea as IDSTextarea$1 } from '@inera/ids-core/components/form/textarea/textarea-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+import { useInputValidity } from '../form-hooks/useInputValidity.js';
+import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
+import clsx from 'clsx';
 
-const IDSTextarea = createComponent({
-    tagName: 'ids-textarea',
-    elementClass: IDSTextarea$1,
-    react: React,
-});
+const IDSTextarea = ({ label = "", hint, errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, autoSize = false, noResize = false, block = false, light = false, readOnly = false, id, tooltip, className, ...props }) => {
+    const fieldId = useElementId(id);
+    const errorMsgId = useElementId();
+    const hintId = useElementId();
+    const textareaRef = useRef(null);
+    const hasValidValue = useInputValidity(textareaRef);
+    const isInvalid = (invalid || !hasValidValue) && !noValidation;
+    useAriaDescribedBy(textareaRef, errorMsgId, isInvalid, !!errorMsg, !!hint, hintId);
+    return (jsxs("div", { className: clsx("ids-textarea", {
+            "ids-textarea--block": block,
+            "ids-textarea--autosize": autoSize,
+            "ids-textarea--no-resize": noResize
+        }, className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
+                            "ids-label--disabled": disabled || readOnly
+                        }), htmlFor: fieldId, children: label }), tooltip && tooltip] }), jsx("textarea", { ref: textareaRef, id: fieldId, className: clsx("ids-textarea__textarea", {
+                    "ids-input--light": light
+                }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, readOnly: readOnly, ...props }), hint && (jsx("div", { id: hintId, className: "ids-input__hint", children: hint })), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+};
 
 export { IDSTextarea };

package/components/form/time/time.d.ts

@@ -1,3 +1,13 @@
-import '@inera/ids-core/components/form/time/register.js';
-import { IDSTime as Time } from '@inera/ids-core/components/form/time/time-element.js';
-export declare const IDSTime: import("@lit-labs/react").ReactWebComponent<Time, {}>;
+import React, { ReactNode, InputHTMLAttributes } from "react";
+interface IDSTimeProps extends InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    errorMsg?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    noValidation?: boolean;
+    light?: boolean;
+    tooltip?: ReactNode;
+}
+export declare const IDSTime: React.FC<IDSTimeProps>;
+export {};

package/components/form/time/time.js

@@ -1,12 +1,24 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/time/register.js';
-import { IDSTime as IDSTime$1 } from '@inera/ids-core/components/form/time/time-element.js';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import { IDSErrorMessage } from '../error-message/error-message.js';
+import { useInputValidity } from '../form-hooks/useInputValidity.js';
+import { useAriaDescribedBy } from '../form-hooks/useAriaDescribedBy.js';
+import clsx from 'clsx';
 
-const IDSTime = createComponent({
-    tagName: 'ids-time',
-    elementClass: IDSTime$1,
-    react: React,
-});
+const IDSTime = ({ label = "", errorMsg = "", disabled = false, invalid = false, required = false, noValidation = false, light = false, id, tooltip, className, ...props }) => {
+    const fieldId = useElementId(id);
+    const errorMsgId = useElementId();
+    const timeRef = useRef(null);
+    const hasValidValue = useInputValidity(timeRef); // can this happen? i cannot enter an invalid value when i try
+    const isInvalid = (invalid || !hasValidValue) && !noValidation;
+    useAriaDescribedBy(timeRef, errorMsgId, isInvalid, !!errorMsg);
+    return (jsxs("div", { className: clsx("ids-time-component", className), children: [jsxs("div", { className: "ids-label-tooltip-wrapper", children: [jsx("label", { className: clsx("ids-label", {
+                            "ids-label--disabled": disabled
+                        }), htmlFor: fieldId, children: label }), tooltip] }), jsx("div", { className: "ids-time", children: jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: timeRef, id: fieldId, type: "time", className: clsx("ids-time__input", {
+                            "ids-input--light": light
+                        }), "aria-invalid": isInvalid, required: required, "aria-required": required, disabled: disabled, "aria-disabled": disabled, ...props }) }) }), isInvalid && errorMsg && (jsx(IDSErrorMessage, { id: errorMsgId, show: true, children: errorMsg }))] }));
+};
 
 export { IDSTime };

package/components/form/toggle/toggle.d.ts

@@ -1,3 +1,8 @@
-import '@inera/ids-core/components/form/toggle/register.js';
-import { IDSToggle as Toggle } from '@inera/ids-core/components/form/toggle/toggle-element.js';
-export declare const IDSToggle: import("@lit-labs/react").ReactWebComponent<Toggle, {}>;
+import React, { ReactNode, InputHTMLAttributes } from "react";
+interface IDSToggleProps extends InputHTMLAttributes<HTMLInputElement> {
+    disabled?: boolean;
+    tooltip?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSToggle: React.FC<IDSToggleProps>;
+export {};

package/components/form/toggle/toggle.js

@@ -1,12 +1,13 @@
-import * as React from 'react';
-import { createComponent } from '@lit-labs/react';
-import '@inera/ids-core/components/form/toggle/register.js';
-import { IDSToggle as IDSToggle$1 } from '@inera/ids-core/components/form/toggle/toggle-element.js';
+"use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { useElementId } from '../../utils/hooks/useElementId.js';
+import clsx from 'clsx';
 
-const IDSToggle = createComponent({
-    tagName: 'ids-toggle',
-    elementClass: IDSToggle$1,
-    react: React,
-});
+const IDSToggle = ({ disabled = false, tooltip, id, children, className, ...props }) => {
+    const fieldId = useElementId(id);
+    const toggleRef = useRef(null);
+    return (jsx(Fragment, { children: jsxs("div", { className: clsx("ids-toggle", className), children: [jsx("input", { id: fieldId, ref: toggleRef, className: "ids-toggle__input", type: "checkbox", disabled: disabled, ...props }), jsxs("div", { className: "ids-label-tooltip-wrapper ids-label-tooltip-wrapper--inline", children: [jsx("label", { htmlFor: fieldId, className: "ids-toggle__label ids-label ids-label--clickable", children: children }), tooltip] })] }) }));
+};
 
 export { IDSToggle };

package/components/grid/column.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/grid/column/column.css";
+export interface IDSColumnProps extends React.HTMLAttributes<HTMLDivElement> {
+    cols?: ColSize;
+    s?: ColSize;
+    m?: ColSize;
+    offset?: OffsetSize;
+    sOffset?: OffsetSize | "none";
+    mOffset?: OffsetSize | "none";
+    alignSelf?: "start" | "center" | "end" | "auto" | "baseline" | "stretch";
+    children?: ReactNode;
+}
+type ColSize = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "auto";
+type OffsetSize = Exclude<ColSize, "auto">;
+export declare const IDSColumn: React.FC<IDSColumnProps>;
+export {};

package/components/grid/column.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import '@inera/ids-design/components/grid/column/column.css';
+import clsx from 'clsx';
+
+const IDSColumn = ({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }) => {
+    const colRef = useRef(null);
+    const classNames = clsx("ids-col", cols && `ids-col--${cols}`, s && `ids-col--s-${s}`, m && `ids-col--m-${m}`, offset && `ids-col--offset-${offset}`, sOffset && `ids-col--s-offset-${sOffset}`, mOffset && `ids-col--m-offset-${mOffset}`, alignSelf && `ids-col--align-${alignSelf}`, className);
+    return (jsx("div", { ref: colRef, className: classNames, style: { ...style }, ...props, children: children }));
+};
+
+export { IDSColumn };

package/components/grid/container.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/grid/container/container.css";
+export interface IDSContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    fluid?: boolean;
+    width?: string;
+    gutterless?: boolean;
+    children?: ReactNode;
+}
+export declare const IDSContainer: React.FC<IDSContainerProps>;

package/components/grid/container.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import '@inera/ids-design/components/grid/container/container.css';
+import clsx from 'clsx';
+
+const IDSContainer = ({ fluid = false, width = "", gutterless = false, children, className, style, ...props }) => {
+    const containerRef = useRef(null);
+    const classNames = clsx("ids-container", fluid && `ids-container--align-${fluid}`, gutterless && `ids-container--gutterless-${gutterless}`, className);
+    useEffect(() => {
+        const el = containerRef.current;
+        if (el) {
+            if (width && !fluid) {
+                el.style.maxWidth = `${width}px`;
+            }
+            else {
+                el.style.maxWidth = "";
+            }
+        }
+    }, [width, fluid]);
+    return (jsx("div", { ref: containerRef, className: classNames, style: { ...style }, ...props, children: children }));
+};
+
+export { IDSContainer };

package/components/grid/row.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/grid/row/row.css";
+export interface IDSRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    justify?: "start" | "center" | "end" | "space-between" | "space-around";
+    gap?: string;
+    children?: ReactNode;
+}
+export declare const IDSRow: React.FC<IDSRowProps>;

package/components/grid/row.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import '@inera/ids-design/components/grid/row/row.css';
+import clsx from 'clsx';
+
+const IDSRow = ({ align, justify, gap, className, children, style, ...props }) => {
+    const rowRef = useRef(null);
+    const classNames = clsx("ids-row", align && `ids-row--align-${align}`, justify && `ids-row--justify-${justify}`, className);
+    useEffect(() => {
+        if (rowRef.current) {
+            rowRef.current.style.gap = gap ?? "";
+        }
+    }, [gap]);
+    return (jsx("div", { ref: rowRef, className: classNames, style: { ...style }, ...props, children: children }));
+};
+
+export { IDSRow };

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

@@ -1,2 +1,10 @@
-import { IDSHeader1177Avatar as HeaderAvatar } from '@inera/ids-core/components/header-1177/header-1177-avatar-element.js';
-export declare const IDSHeader1177Avatar: import("@lit-labs/react").ReactWebComponent<HeaderAvatar, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177/header-1177-avatar.css";
+interface IDSHeader1177AvatarProps {
+    username: string;
+    agent?: ReactNode;
+    links?: ReactNode;
+    persistent?: boolean;
+}
+export declare const IDSHeader1177Avatar: React.FC<IDSHeader1177AvatarProps>;
+export {};

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

@@ -1,11 +1,33 @@
-import * as React from 'react';
-import { IDSHeader1177Avatar as IDSHeader1177Avatar$1 } from '@inera/ids-core/components/header-1177/header-1177-avatar-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/header-1177/header-1177-avatar.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Avatar = createComponent({
-    tagName: 'ids-header-1177-avatar',
-    elementClass: IDSHeader1177Avatar$1,
-    react: React
-});
+const IDSHeader1177Avatar = ({ username, agent, links, persistent = false }) => {
+    const [expanded, setExpanded] = useState(false);
+    const headerContext = useHeaderContext();
+    const avatarRef = useRef(null);
+    const toggleExpanded = () => setExpanded(prev => !prev);
+    const handleClickOutside = (event) => {
+        if (!persistent && avatarRef.current && !avatarRef.current.contains(event.target)) {
+            setExpanded(false);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [persistent]);
+    return (jsx("div", { ref: avatarRef, className: clsx("ids-header-1177-avatar", {
+            "ids-header-1177-avatar--unresponsive": headerContext?.unresponsive
+        }), children: jsxs("div", { className: "ids-header-1177-avatar__dropdown-wrapper", children: [jsx("button", { className: clsx("ids-header-1177-avatar__button", {
+                        "ids-header-1177-avatar__button--expanded": expanded
+                    }), onClick: toggleExpanded, "aria-controls": "ids-header-1177-avatar__dropdown", "aria-expanded": expanded, children: jsx("div", { className: "ids-header-1177-avatar-content__name", title: username, children: username }) }), jsxs("div", { id: "ids-header-1177-avatar__dropdown", className: clsx("ids-header-1177-avatar__dropdown", {
+                        "ids-header-1177-avatar__dropdown--expanded": expanded
+                    }), children: [agent && jsx("div", { className: "ids-header-1177-avatar__agent", children: agent }), agent && links && jsx("div", { className: "ids-header-1177-avatar__menu-separator" }), links && jsx("div", { className: "ids-header-1177-avatar__menu-links", children: links })] })] }) }));
+};
 
 export { IDSHeader1177Avatar };

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

@@ -1,2 +1,12 @@
-import { IDSHeader1177Item as HeaderItem } from '@inera/ids-core/components/header-1177/header-1177-item-element.js';
-export declare const IDSHeader1177Item: import("@lit-labs/react").ReactWebComponent<HeaderItem, {}>;
+import React, { ReactNode, PropsWithChildren, HTMLAttributes } from "react";
+import "@inera/ids-design/components/header-1177/header-1177-item.css";
+interface IDSHeader1177ItemProps extends HTMLAttributes<HTMLElement> {
+    mobile?: boolean;
+    icon?: string;
+    href?: string;
+    text?: string;
+    link?: ReactNode;
+    onClick?: () => void;
+}
+export declare const IDSHeader1177Item: React.FC<PropsWithChildren<IDSHeader1177ItemProps>>;
+export {};

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

@@ -1,11 +1,28 @@
-import * as React from 'react';
-import { IDSHeader1177Item as IDSHeader1177Item$1 } from '@inera/ids-core/components/header-1177/header-1177-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/header-1177/header-1177-item.css';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Item = createComponent({
-    tagName: 'ids-header-1177-item',
-    elementClass: IDSHeader1177Item$1,
-    react: React,
-});
+const IDSHeader1177Item = ({ mobile = false, text = "", href = "", icon, link, onClick, ...props }) => {
+    const headerContext = useHeaderContext();
+    const classNames = clsx("ids-header-1177__items__item", {
+        "ids-header-1177__items__item--unresponsive": headerContext?.unresponsive,
+        "ids-header-1177__items__item--mobile": mobile
+    });
+    const renderContent = () => (jsxs(Fragment, { children: [icon && (jsx("div", { className: "ids-header-1177__items__item-icon", "aria-label": text, children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-header-1177__items__item-text", children: text })] }));
+    if (link && isValidElement(link)) {
+        return cloneElement(link, {
+            ...props,
+            className: clsx(link.props.className, classNames),
+            children: renderContent()
+        });
+    }
+    if (onClick) {
+        return (jsx("button", { className: classNames, onClick: onClick, style: { cursor: "pointer" }, ...props, children: renderContent() }));
+    }
+    return (jsx("a", { className: classNames, href: href, ...props, children: renderContent() }));
+};
 
 export { IDSHeader1177Item };

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177/header-1177-menu-mobile.css";
+interface IDSHeader1177MenuMobileProps {
+    label?: string;
+    persistent?: boolean;
+    children?: ReactNode;
+    onExpanded?: () => void;
+    onClosed?: () => void;
+}
+export declare const IDSHeader1177MenuMobile: React.FC<IDSHeader1177MenuMobileProps>;
+export {};

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/header-1177/header-1177-menu-mobile.css';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import clsx from 'clsx';
+
+const IDSHeader1177MenuMobile = ({ label = "", persistent = false, children, onExpanded, onClosed }) => {
+    const [expanded, setExpanded] = useState(false);
+    const headerContext = useHeaderContext();
+    const menuRef = useRef(null);
+    const handleLinkClick = () => {
+        setExpanded(false);
+        onClosed?.();
+    };
+    useEffect(() => {
+        if (!persistent && expanded) {
+            const links = menuRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => link.addEventListener("click", handleLinkClick));
+            return () => {
+                links.forEach(link => link.removeEventListener("click", handleLinkClick));
+            };
+        }
+    }, [expanded, persistent]);
+    const toggleExpansion = () => {
+        setExpanded(prev => {
+            const next = !prev;
+            if (next) {
+                onExpanded?.();
+            }
+            else {
+                onClosed?.();
+            }
+            return next;
+        });
+    };
+    return (jsxs("div", { className: "ids-header-1177-menu-mobile-component", children: [jsxs("button", { onClick: toggleExpansion, "aria-expanded": expanded, "aria-label": "Meny", className: clsx("ids-header-1177-menu-mobile", {
+                    "ids-header-1177-menu-mobile--unresponsive": headerContext?.unresponsive
+                }), children: [label, jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) }), jsx("slot", {})] }), expanded && (jsx("div", { className: "ids-header-1177-menu-mobile__items", ref: menuRef, children: children }))] }));
+};
+
+export { IDSHeader1177MenuMobile };

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

@@ -1,2 +1,11 @@
-import { IDSHeader1177NavItemMobile as HeaderNavItemMobile } from '@inera/ids-core/components/header-1177/header-1177-nav-item-mobile-element.js';
-export declare const IDSHeader1177NavItemMobile: import("@lit-labs/react").ReactWebComponent<HeaderNavItemMobile, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177/header-1177-nav-item-mobile.css";
+interface IDSHeader1177NavItemMobileProps {
+    text?: string;
+    href?: string;
+    icon?: string;
+    link?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177NavItemMobile: React.FC<IDSHeader1177NavItemMobileProps>;
+export {};

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

@@ -1,11 +1,27 @@
-import * as React from 'react';
-import { IDSHeader1177NavItemMobile as IDSHeader1177NavItemMobile$1 } from '@inera/ids-core/components/header-1177/header-1177-nav-item-mobile-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/header-1177/header-1177-nav-item-mobile.css';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import clsx from 'clsx';
 
-const IDSHeader1177NavItemMobile = createComponent({
-    tagName: 'ids-header-1177-nav-item-mobile',
-    elementClass: IDSHeader1177NavItemMobile$1,
-    react: React,
-});
+const IDSHeader1177NavItemMobile = ({ text = "", href = "", icon = "", link, children, ...props }) => {
+    const headerContext = useHeaderContext();
+    const classNames = clsx("ids-header-1177__nav-mobile__item", {
+        "ids-header-1177__nav-mobile__item--unresponsive": headerContext?.unresponsive
+    });
+    const renderContent = () => {
+        return (jsxs(Fragment, { children: [icon && (jsx("span", { className: "ids-header-1177-nav-item-mobile__icon", children: jsx("span", { className: `ids-icon-${icon}` }) })), text] }));
+    };
+    if (link && isValidElement(link)) {
+        return cloneElement(link, {
+            ...props,
+            style: { flexGrow: 1, textDecoration: "none" },
+            className: clsx(link.props.className, classNames),
+            children: renderContent()
+        });
+    }
+    return (jsx("a", { className: classNames, href: href, style: { flexGrow: 1, textDecoration: "none" }, ...props, children: renderContent() }));
+};
 
 export { IDSHeader1177NavItemMobile };

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

@@ -1,2 +1,15 @@
-import { IDSHeader1177NavItem as HeaderNavItem } from '@inera/ids-core/components/header-1177/header-1177-nav-item-element.js';
-export declare const IDSHeader1177NavItem: import("@lit-labs/react").ReactWebComponent<HeaderNavItem, {}>;
+import React, { ReactNode, ReactElement } from "react";
+import "@inera/ids-design/components/header-1177/header-1177-nav-item.css";
+import { IDSLinkProps } from "../link/link";
+interface IDSHeader1177NavItemProps {
+    active?: boolean;
+    expanded?: boolean;
+    label?: string;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    col4?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177NavItem: React.FC<IDSHeader1177NavItemProps>;
+export {};

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

@@ -1,11 +1,25 @@
-import * as React from 'react';
-import { IDSHeader1177NavItem as IDSHeader1177NavItem$1 } from '@inera/ids-core/components/header-1177/header-1177-nav-item-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useState } from 'react';
+import '@inera/ids-design/components/header-1177/header-1177-nav-item.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177NavItem = createComponent({
-    tagName: 'ids-header-1177-nav-item',
-    elementClass: IDSHeader1177NavItem$1,
-    react: React,
-});
+const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const headerContext = useHeaderContext();
+    const toggleExpanded = () => setIsExpanded(prev => !prev);
+    const renderLink = (link) => {
+        return React__default.isValidElement(link)
+            ? React__default.cloneElement(link, { activeIcon: true, block: true, colorPreset: 2 })
+            : link;
+    };
+    const renderDropdown = () => isExpanded && (jsx("div", { id: "ids-header-1177-nav-dropdown", className: "ids-header-1177__items__item-dropdown", children: jsxs("div", { className: "ids-header-1177__items__item-dropdown__content", children: [jsx("div", { className: "ids-header-1177__items__item-dropdown__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177__items__item-dropdown__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177__items__item-dropdown__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177__items-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177__items__item-dropdown__content-col-4", children: col4 })] }) }));
+    return (jsxs("div", { className: clsx("ids-header-1177__nav-item", {
+            "ids-header-1177__nav-item--unresponsive": headerContext?.unresponsive,
+            "ids-header-1177__nav-item--fluid": headerContext?.fluid,
+            "ids-header-1177__nav-item--active": active || isExpanded
+        }), children: [label ? (jsx("button", { onClick: toggleExpanded, "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-nav-dropdown", children: label })) : (children), renderDropdown()] }));
+};
 
 export { IDSHeader1177NavItem };

package/components/header-1177/header-1177-nav.d.ts

@@ -1,2 +1,8 @@
-import { IDSHeader1177Nav as HeaderNav } from '@inera/ids-core/components/header-1177/header-1177-nav-element.js';
-export declare const IDSHeader1177Nav: import("@lit-labs/react").ReactWebComponent<HeaderNav, {}>;
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177/header-1177-nav.css";
+interface IDSHeader1177NavProps {
+    hideOnTablet?: boolean;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177Nav: React.FC<IDSHeader1177NavProps>;
+export {};

package/components/header-1177/header-1177-nav.js

@@ -1,11 +1,17 @@
-import * as React from 'react';
-import { IDSHeader1177Nav as IDSHeader1177Nav$1 } from '@inera/ids-core/components/header-1177/header-1177-nav-element.js';
-import { createComponent } from '@lit-labs/react';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/header-1177/header-1177-nav.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Nav = createComponent({
-    tagName: 'ids-header-1177-nav',
-    elementClass: IDSHeader1177Nav$1,
-    react: React,
-});
+const IDSHeader1177Nav = ({ hideOnTablet = false, children }) => {
+    const headerContext = useHeaderContext();
+    const navClass = clsx("ids-header-1177__nav", {
+        "ids-header-1177__nav--unresponsive": headerContext?.unresponsive,
+        "ids-header-1177__nav--fluid": headerContext?.fluid,
+        "ids-header-1177__nav--hide-on-tablet": hideOnTablet
+    });
+    return (jsx("nav", { className: navClass, slot: "nav", children: jsx("div", { className: "ids-header-1177__nav-inner", children: children }) }));
+};
 
 export { IDSHeader1177Nav };

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

@@ -1,5 +1,22 @@
-import '@inera/ids-core/components/header-1177/register.js';
-import { IDSHeader1177 as Header } from '@inera/ids-core/components/header-1177/header-1177-element.js';
-export declare const IDSHeader1177: import("@lit-labs/react").ReactWebComponent<Header, {
-    onDidToggleRegion: string;
-}>;
+import React, { ReactNode, AnchorHTMLAttributes } from "react";
+import "@inera/ids-design/components/header-1177/header-1177.css";
+interface IDSHeader1177Props extends React.HTMLAttributes<HTMLDivElement> {
+    regionPickerText?: string;
+    hideRegionPicker?: boolean;
+    regionPickerExpanded?: boolean;
+    fluid?: boolean;
+    unresponsive?: boolean;
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    logo?: ReactNode;
+    srLogoLabel?: string;
+    regionIcon?: ReactNode;
+    skipToContentLink?: ReactNode;
+    onToggleRegion?: (isExpanded: boolean) => void;
+    items?: ReactNode;
+    avatar?: ReactNode;
+    mobileMenu?: ReactNode;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177: React.FC<IDSHeader1177Props>;
+export {};