@inera/ids-react 9.2.2 → 9.4.0

package/components/form/radio/radio-group.js

@@ -5,7 +5,7 @@ import { IDSRadioGroupBase } from './radio-group-base.js';
 import { IDSRadio } from './radio.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
 
-function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, children, onRadioChange, ...props }) {
+function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, subtitle, children, onRadioChange, ...props }) {
     const groupRef = useRef(null);
     const { isValid, hasInteracted } = useGroupValidity(groupRef, "radio");
     const reactId = useId();
@@ -31,7 +31,7 @@ function IDSRadioGroup({ name, required, noValidation, invalid, errorMsg, childr
         }
         return child;
     });
-    return (jsx(IDSRadioGroupBase, { ...props, groupRef: groupRef, required: required, invalid: groupInvalid || invalid, errorMsg: !noValidation && errorMsg, errorMsgId: errorMsgId, children: clonedChildren }));
+    return (jsx(IDSRadioGroupBase, { ...props, groupRef: groupRef, required: required, subtitle: subtitle, invalid: groupInvalid || invalid, errorMsg: !noValidation && errorMsg, errorMsgId: errorMsgId, children: clonedChildren }));
 }
 IDSRadioGroup.displayName = "IDSRadioGroup";
 

package/components/form/radio-button/radio-button-group-base.d.ts

@@ -5,7 +5,7 @@ export interface IDSRadioButtonGroupBaseProps extends InputHTMLAttributes<HTMLFi
     tooltip?: ReactNode;
     groupRef?: React.Ref<HTMLFieldSetElement>;
 }
-export declare function IDSRadioButtonGroupBase({ legend, groupRef, tooltip, children, className, ...props }: IDSRadioButtonGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRadioButtonGroupBase({ legend, groupRef, tooltip, children, className, ...props }: IDSRadioButtonGroupBaseProps): import("react").JSX.Element;
 export declare namespace IDSRadioButtonGroupBase {
     var displayName: string;
 }

package/components/form/radio-button/radio-button-group.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode, ChangeEvent, InputHTMLAttributes } from "react";
+import React from "react";
 interface IDSRadioButtonGroupProps extends InputHTMLAttributes<HTMLFieldSetElement> {
     name: string;
     legend?: string;
@@ -6,7 +7,7 @@ interface IDSRadioButtonGroupProps extends InputHTMLAttributes<HTMLFieldSetEleme
     children?: ReactNode;
     onRadioChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare function IDSRadioButtonGroup({ name, legend, tooltip, children, onRadioChange, className, ...props }: IDSRadioButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRadioButtonGroup({ name, legend, tooltip, children, onRadioChange, className, ...props }: IDSRadioButtonGroupProps): React.JSX.Element;
 export declare namespace IDSRadioButtonGroup {
     var displayName: string;
 }

package/components/form/range/range-base.d.ts

@@ -10,7 +10,7 @@ export interface IDSRangeBaseProps extends React.InputHTMLAttributes<HTMLInputEl
     inputRef?: Ref<HTMLInputElement>;
     style?: CSSProperties;
 }
-export declare function IDSRangeBase({ id, label, showTicks, ticks, disabled, focusAnchor, dataTestId, tooltip, valueNow, min, max, step, inputRef, style, className, ...props }: IDSRangeBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSRangeBase({ id, label, showTicks, ticks, disabled, focusAnchor, dataTestId, tooltip, valueNow, min, max, step, inputRef, style, className, subtitle, ...props }: IDSRangeBaseProps): import("react").JSX.Element;
 export declare namespace IDSRangeBase {
     var displayName: string;
 }

package/components/form/range/range-base.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSRangeBase({ id, label, showTicks, ticks = [], disabled, focusAnchor, dataTestId, tooltip, valueNow, min = 0, max = 10, step = 1, inputRef, style, className, ...props }) {
+function IDSRangeBase({ id, label, showTicks, ticks = [], disabled, focusAnchor, dataTestId, tooltip, valueNow, min = 0, max = 10, step = 1, inputRef, style, className, subtitle, ...props }) {
     const inputId = !!id ? id : `range-${useId()}`;
-    return (jsxs("div", { className: clsx("ids-range", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-label", { "ids-label--disabled": disabled }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("input", { id: inputId, ref: inputRef, type: "range", className: clsx("ids-range__input", {
+    return (jsxs("div", { className: clsx("ids-range", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("input", { id: inputId, ref: inputRef, type: "range", className: clsx("ids-range__input", {
                     "ids-focus-anchor": focusAnchor
                 }), min: min, "aria-valuemin": min, max: max, "aria-valuemax": max, "aria-valuenow": valueNow, "aria-disabled": disabled, disabled: disabled, step: step, style: {
                     backgroundSize: ((valueNow - (min ?? 0)) * 100) / ((max ?? 100) - (min ?? 0)) + "% 100%"

package/components/form/select/select-base.d.ts

@@ -1,11 +1,11 @@
 import { CSSProperties } from "react";
-import { CommonFormProps } from "../form-props/form-props";
-export interface IDSSelectBaseProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormProps {
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSSelectBaseProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormPropsWithReadOnly {
     selectRef?: React.Ref<HTMLSelectElement>;
     errorMsgId?: string;
     style?: CSSProperties;
 }
-export declare function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, ...props }: IDSSelectBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, readOnly, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, subtitle, ...props }: IDSSelectBaseProps): import("react").JSX.Element;
 export declare namespace IDSSelectBase {
     var displayName: string;
 }

package/components/form/select/select-base.js

@@ -3,7 +3,7 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, ...props }) {
+function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, readOnly, disabled, required, light, focusAnchor, tooltip, children, className, selectRef, dataTestId, style, subtitle, ...props }) {
     const reactId = useId();
     const selectId = id ?? `select-base-${reactId}`;
     const baseErrorMsgId = errorMsgId ?? `select-base-error-${reactId}`;
@@ -12,12 +12,10 @@ function IDSSelectBase({ id, label, errorMsgId, errorMsg, invalid, disabled, req
     if (showErrorMsg) {
         ariaHandler["aria-describedby"] = baseErrorMsgId;
     }
-    return (jsxs("div", { className: clsx("ids-select", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: selectId, className: clsx("ids-label", {
-                            "ids-label--disabled": disabled
-                        }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select__wrapper", children: jsx("select", { id: selectId, ref: selectRef, className: clsx("ids-select__select", {
+    return (jsxs("div", { className: clsx("ids-select", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: selectId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("div", { className: "ids-select__wrapper", children: jsx("select", { id: selectId, ref: selectRef, className: clsx("ids-select__select", {
                         "ids-input--light": light,
                         "ids-focus-anchor": focusAnchor
-                    }), "aria-invalid": invalid, "aria-disabled": disabled, disabled: disabled, required: required, ...ariaHandler, ...props, children: children }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+                    }), "aria-invalid": invalid, "aria-disabled": readOnly, disabled: disabled, required: required, ...ariaHandler, ...props, children: children }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 IDSSelectBase.displayName = "IDSSelectBase";
 

package/components/form/select/select.d.ts

@@ -1,4 +1,4 @@
-import { CommonFormProps } from "../form-props/form-props";
-export interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormProps {
+import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
+export interface IDSSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, CommonFormPropsWithReadOnly {
 }
 export declare const IDSSelect: import("react").ForwardRefExoticComponent<IDSSelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/components/form/select/select.js

@@ -7,7 +7,7 @@ import { IDSSelectBase } from './select-base.js';
 const IDSSelect = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, children, ...props }, ref) => {
     const errorMsgId = `select-error-${useId()}`;
     const selectRef = useRef(null);
-    const hasValidValue = useInputValidity(selectRef, validationOnBlur);
+    const hasValidValue = useInputValidity(selectRef, validationOnBlur, noValidation);
     const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {

package/components/form/select-multiple/select-multiple-base.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from "react";
 import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
-export interface IDSSelectMultipleBaseProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
+export interface IDSSelectMultipleBaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonFormPropsWithReadOnly {
     expanded?: boolean;
     placeholder?: string;
     numbCheckedBoxes?: number;
@@ -14,7 +14,7 @@ export interface IDSSelectMultipleBaseProps extends React.InputHTMLAttributes<HT
     client?: boolean;
     style?: CSSProperties;
 }
-export declare function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel, selectedLabelPlural, expanded, maxHeight, tooltip, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client }: IDSSelectMultipleBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel, selectedLabelPlural, expanded, maxHeight, tooltip, subtitle, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client, ...props }: IDSSelectMultipleBaseProps): import("react").JSX.Element;
 export declare namespace IDSSelectMultipleBase {
     var displayName: string;
 }

package/components/form/select-multiple/select-multiple-base.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel = "vald", selectedLabelPlural = "valda", expanded, maxHeight = "", tooltip, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client = false }) {
+function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selectedLabel = "vald", selectedLabelPlural = "valda", expanded, maxHeight = "", tooltip, subtitle, componentRef, buttonRef, invalid, disabled, readOnly, ariaDisabled, light, focusAnchor, className, children, style, onClick, client = false, ...props }) {
     const reactId = useId();
     const labelId = `select-multiple-base-label-${reactId}`;
     const dropdownId = `select-multiple-base-dropdown-${reactId}`;
@@ -16,10 +16,10 @@ function IDSSelectMultipleBase({ id, label, placeholder, numbCheckedBoxes, selec
             onClick
         }
         : {};
-    return (jsxs("div", { className: clsx("ids-select-multiple", className), ref: componentRef, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { id: labelId, className: clsx("ids-label", { "ids-label--disabled": disabled || readOnly }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("button", { ref: buttonRef, id: id, "aria-labelledby": labelId, type: "button", "aria-haspopup": "dialog", "aria-controls": dropdownId, className: clsx("ids-select-multiple__select", {
+    return (jsxs("div", { className: clsx("ids-select-multiple", className), ref: componentRef, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { id: labelId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("div", { className: "ids-select-multiple__select-wrapper", children: jsx("button", { ref: buttonRef, id: id, "aria-labelledby": labelId, type: "button", "aria-haspopup": "dialog", "aria-controls": dropdownId, className: clsx("ids-select-multiple__select", {
                         "ids-input--light": light,
                         "ids-focus-anchor": focusAnchor
-                    }), disabled: disabled, "aria-disabled": ariaDisabled || readOnly || undefined, "aria-expanded": expanded, "aria-invalid": invalid, ...clickHandler, children: displayedValue }) }), jsx("div", { className: "ids-select-multiple__dropdown-wrapper", id: dropdownId, children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
+                    }), disabled: disabled, "aria-disabled": ariaDisabled || readOnly || undefined, "aria-expanded": expanded, "aria-invalid": invalid, ...clickHandler, ...props, children: displayedValue }) }), jsx("div", { className: "ids-select-multiple__dropdown-wrapper", id: dropdownId, children: jsx("div", { className: clsx("ids-select-multiple__dropdown", {
                         "ids-select-multiple__dropdown--expanded": expanded
                     }), children: jsx("div", { className: "ids-select-multiple__dropdown-scroll-area", style: { maxHeight }, children: children }) }) })] }));
 }

package/components/form/select-multiple/select-multiple.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { CommonFormPropsWithReadOnly } from "../form-props/form-props";
-export interface IDSSelectMultipleProps extends React.InputHTMLAttributes<HTMLInputElement>, CommonFormPropsWithReadOnly {
+export interface IDSSelectMultipleProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonFormPropsWithReadOnly {
     selectedLabel?: string;
     selectedLabelPlural?: string;
     placeholder?: string;
@@ -8,7 +8,7 @@ export interface IDSSelectMultipleProps extends React.InputHTMLAttributes<HTMLIn
     maxHeight?: string;
     expanded?: boolean;
 }
-export declare function IDSSelectMultiple({ label, invalid, noValidation, expanded, errorMsg, style, children, ...props }: IDSSelectMultipleProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSelectMultiple({ label, invalid, noValidation, expanded, errorMsg, children, ...props }: IDSSelectMultipleProps): React.JSX.Element;
 export declare namespace IDSSelectMultiple {
     var displayName: string;
 }

package/components/form/select-multiple/select-multiple.js

@@ -6,7 +6,7 @@ import { IDSCheckboxGroup } from '../checkbox/checkbox-group.js';
 import { useClickOutside } from '../../utils/hooks/useClickOutside.js';
 import { useEsc } from '../../utils/hooks/useEsc.js';
 
-function IDSSelectMultiple({ label, invalid = false, noValidation = false, expanded = false, errorMsg, style, children, ...props }) {
+function IDSSelectMultiple({ label, invalid = false, noValidation = false, expanded = false, errorMsg, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const [checkboxListInvalid, setCheckboxListInvalid] = useState(false);
     const buttonRef = useRef(null);

package/components/form/spinner/spinner.d.ts

@@ -4,7 +4,7 @@ interface IDSSpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
     live?: "polite" | "assertive" | "off";
     srText?: string;
 }
-export declare function IDSSpinner({ variant, live, srText, className, ...rest }: IDSSpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSSpinner({ variant, live, srText, className, ...rest }: IDSSpinnerProps): React.JSX.Element;
 export declare namespace IDSSpinner {
     var displayName: string;
 }

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

@@ -9,7 +9,7 @@ interface IDSTextareaBaseProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     errorMsgId?: string;
     style?: CSSProperties;
 }
-export declare function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }: IDSTextareaBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTextareaBase({ id, label, subtitle, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }: IDSTextareaBaseProps): import("react").JSX.Element;
 export declare namespace IDSTextareaBase {
     var displayName: string;
 }

package/components/form/textarea/textarea-base.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useId } from 'react';
 
-function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }) {
+function IDSTextareaBase({ id, label, subtitle, hint, hintId, errorMsg, errorMsgId, invalid, required, disabled, readOnly, light, block, autoSize, noResize, focusAnchor, tooltip, textareaRef, dataTestId, className, style, ...props }) {
     const reactId = useId();
     const inputId = !!id ? id : `textarea-base-${reactId}`;
     const baseHintId = !!hintId ? hintId : `textarea-base-hint-${reactId}`;
@@ -18,13 +18,11 @@ function IDSTextareaBase({ id, label, hint, hintId, errorMsg, errorMsgId, invali
             "ids-textarea--block": block,
             "ids-textarea--autosize": autoSize,
             "ids-textarea--no-resize": noResize
-        }, className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: clsx("ids-label", {
-                            "ids-label--disabled": disabled || readOnly
-                        }), children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("textarea", { ref: textareaRef, id: inputId, className: clsx("ids-textarea__textarea", {
+        }, className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { htmlFor: inputId, className: "ids-label", children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("textarea", { ref: textareaRef, id: inputId, className: clsx("ids-textarea__textarea", {
                     "ids-input--light": light,
                     "ids-input--invalid": invalid,
                     "ids-focus-anchor": focusAnchor
-                }), style: { minWidth: (!!hint || !!errorMsg && showErrorMsg) ? "100%" : "inherit" }, required: required, disabled: disabled, "aria-required": required, "aria-disabled": disabled, "aria-invalid": invalid, readOnly: readOnly, ...ariaHandler, ...props }), hint && (jsx("div", { id: baseHintId, className: "ids-input__hint", children: hint })), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
+                }), style: { minWidth: !!hint || (!!errorMsg && showErrorMsg) ? "100%" : "inherit" }, required: required, disabled: disabled, "aria-required": required, "aria-disabled": disabled, "aria-invalid": invalid, readOnly: readOnly, ...ariaHandler, ...props }), hint && (jsx("div", { id: baseHintId, className: "ids-input__hint", children: hint })), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 IDSTextareaBase.displayName = "IDSTextareaBase";
 

package/components/form/textarea/textarea.js

@@ -6,7 +6,7 @@ import { IDSTextareaBase } from './textarea-base.js';
 
 const IDSTextarea = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, ...props }, ref) => {
     const textareaRef = useRef(null);
-    const hasValidValue = useInputValidity(textareaRef, validationOnBlur);
+    const hasValidValue = useInputValidity(textareaRef, validationOnBlur, noValidation);
     const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {

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

@@ -5,7 +5,7 @@ export interface IDSTimeBaseProps extends React.InputHTMLAttributes<HTMLInputEle
     errorMsgId?: string;
     style?: CSSProperties;
 }
-export declare function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled, invalid, required, light, focusAnchor, dataTestId, className, inputRef, style, ...props }: IDSTimeBaseProps & React.InputHTMLAttributes<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled, invalid, required, light, focusAnchor, dataTestId, className, inputRef, style, subtitle, ...props }: IDSTimeBaseProps & React.InputHTMLAttributes<HTMLInputElement>): import("react").JSX.Element;
 export declare namespace IDSTimeBase {
     var displayName: string;
 }

package/components/form/time/time-base.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 import { useId } from 'react';
 
-function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled = false, invalid = false, required = false, light, focusAnchor, dataTestId, className, inputRef, style, ...props }) {
+function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled = false, invalid = false, required = false, light, focusAnchor, dataTestId, className, inputRef, style, subtitle, ...props }) {
     const reactId = useId();
     const inputId = id ?? `time-base-${reactId}`;
     const baseErrorMsgId = errorMsgId ?? `time-base-error-${reactId}`;
@@ -12,9 +12,7 @@ function IDSTimeBase({ id, label, tooltip, errorMsg, errorMsgId, disabled = fals
     if (showErrorMsg) {
         ariaHandler["aria-describedby"] = baseErrorMsgId;
     }
-    return (jsxs("div", { className: clsx("ids-time", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: clsx("ids-label", {
-                            "ids-label--disabled": disabled
-                        }), htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: inputId, type: "time", className: clsx("ids-time__input", {
+    return (jsxs("div", { className: clsx("ids-time", className), "data-testid": dataTestId, style: style, children: [label && (jsxs("div", { className: "ids-label-wrapper ids-label-wrapper--margin-bottom", children: [jsx("label", { className: "ids-label", htmlFor: inputId, children: label }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] })), subtitle && jsx("div", { className: "ids-subtitle", children: subtitle }), jsx("div", { className: "ids-time__input-wrapper", children: jsx("input", { ref: inputRef, id: inputId, type: "time", className: clsx("ids-time__input", {
                         "ids-input--light": light,
                         "ids-focus-anchor": focusAnchor
                     }), "aria-invalid": invalid, "aria-required": required, "aria-disabled": disabled, required: required, disabled: disabled, ...ariaHandler, ...props }) }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));

package/components/form/time/time.js

@@ -4,11 +4,10 @@ import { forwardRef, useRef } from 'react';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 import { IDSTimeBase } from './time-base.js';
 
-const IDSTime = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, ...props }, ref) => {
+const IDSTime = forwardRef(({ invalid = false, noValidation = false, validationOnBlur = false, required = false, ...props }, ref) => {
     const timeRef = useRef(null);
-    const hasValidValue = useInputValidity(timeRef, validationOnBlur);
-    const isInvalid = (invalid || !hasValidValue) && !noValidation;
-    // Merge forwarded + local ref
+    const hasValidValue = useInputValidity(timeRef, validationOnBlur, noValidation);
+    const isInvalid = !noValidation && (invalid || !hasValidValue);
     const mergedRef = (node) => {
         timeRef.current = node;
         if (typeof ref === "function")
@@ -16,7 +15,7 @@ const IDSTime = forwardRef(({ invalid = false, noValidation = false, validationO
         else if (ref)
             ref.current = node;
     };
-    return jsx(IDSTimeBase, { invalid: isInvalid, inputRef: mergedRef, ...props });
+    return jsx(IDSTimeBase, { invalid: isInvalid, inputRef: mergedRef, required: noValidation ? false : required, ...props });
 });
 IDSTime.displayName = "IDSTime";
 

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

@@ -12,7 +12,7 @@ export interface IDSGlobalAlertBaseProps extends React.HTMLAttributes<HTMLDivEle
     onToggle?: () => void;
     client?: boolean;
 }
-export declare function IDSGlobalAlertBase({ agent, srExpandText, srCollapseText, collapsed, noRole, headline, actions, children, className, onToggle, client, ...props }: IDSGlobalAlertBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSGlobalAlertBase({ agent, srExpandText, srCollapseText, collapsed, noRole, headline, actions, children, className, onToggle, client, ...props }: IDSGlobalAlertBaseProps): React.JSX.Element;
 export declare namespace IDSGlobalAlertBase {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ interface IDSGlobalAlertProps extends Omit<React.ComponentProps<typeof IDSGlobal
     defaultCollapsed?: boolean;
     onCollapsedChange?: (isCollapsed: boolean) => void;
 }
-export declare function IDSGlobalAlert({ collapsed, defaultCollapsed, onCollapsedChange, className, ...props }: IDSGlobalAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSGlobalAlert({ collapsed, defaultCollapsed, onCollapsedChange, className, ...props }: IDSGlobalAlertProps): React.JSX.Element;
 export declare namespace IDSGlobalAlert {
     var displayName: string;
 }

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

@@ -13,7 +13,7 @@ interface IDSHeader1177AvatarBaseProps extends HTMLAttributes<HTMLDivElement> {
     menuRef?: React.RefObject<HTMLDivElement>;
     buttonRef?: React.RefObject<HTMLButtonElement>;
 }
-export declare function IDSHeader1177AvatarBase({ username, agent, children, unresponsive, expanded, hide, noMobileMenu, client, onToggle, componentRef, menuRef, buttonRef, ...props }: IDSHeader1177AvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177AvatarBase({ username, agent, children, unresponsive, expanded, hide, noMobileMenu, client, onToggle, componentRef, menuRef, buttonRef, ...props }: IDSHeader1177AvatarBaseProps): React.JSX.Element;
 export declare namespace IDSHeader1177AvatarBase {
     var displayName: string;
 }

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

@@ -6,7 +6,7 @@ interface IDSHeader1177AvatarProps extends HTMLAttributes<HTMLDivElement> {
     persistent?: boolean;
     noMobileMenu?: boolean;
 }
-export declare function IDSHeader1177Avatar({ expanded, persistent, children, ...props }: IDSHeader1177AvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177Avatar({ expanded, persistent, children, ...props }: IDSHeader1177AvatarProps): React.JSX.Element;
 export declare namespace IDSHeader1177Avatar {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ interface IDSHeader1177BaseProps extends React.HTMLAttributes<HTMLDivElement> {
     unresponsive?: boolean;
     logoHref?: string;
     logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
-    logo?: ReactNode;
+    logoLink?: ReactNode;
     srLogoText?: string;
     regionPicker?: ReactNode;
     skipToContentLink?: ReactNode;
@@ -14,7 +14,7 @@ interface IDSHeader1177BaseProps extends React.HTMLAttributes<HTMLDivElement> {
     mobileMenu?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSHeader1177Base({ srLogoText, hideRegionPicker, unresponsive, logoHref, logoProps, logo, regionPicker, skipToContentLink, items, avatar, mobileMenu, className, children, ...props }: IDSHeader1177BaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177Base({ srLogoText, hideRegionPicker, unresponsive, logoHref, logoProps, logoLink, regionPicker, skipToContentLink, items, avatar, mobileMenu, className, children, ...props }: IDSHeader1177BaseProps): React.JSX.Element;
 export declare namespace IDSHeader1177Base {
     var displayName: string;
 }

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

@@ -1,14 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import '@inera/ids-design/components/header-1177/composite-header-1177.css';
+import { IDSHeader1177Logo } from './header-1177-logo.js';
 
-function IDSHeader1177Base({ srLogoText = "Logotyp", hideRegionPicker = false, unresponsive = false, logoHref = "", logoProps = {}, logo, regionPicker, skipToContentLink, items, avatar, mobileMenu, className, children, ...props }) {
-    const renderLogo = () => {
-        return (jsx("div", { className: "ids-header-1177__logo-wrapper", children: jsx("div", { className: "ids-header-1177__logo", children: logo ? (jsx("span", { className: "ids-header-1177__link", children: logo })) : (jsx("a", { className: "ids-header-1177__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps })) }) }));
-    };
+function IDSHeader1177Base({ srLogoText = "Logotyp", hideRegionPicker = false, unresponsive = false, logoHref = "", logoProps = {}, logoLink, regionPicker, skipToContentLink, items, avatar, mobileMenu, className, children, ...props }) {
     return (jsxs("header", { ...props, className: clsx("ids-header-1177", {
             "ids-header-1177--unresponsive": unresponsive
-        }, className), children: [skipToContentLink && jsx("div", { className: "ids-header-1177__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177__container", children: [jsx("div", { className: "ids-header-1177__left" }), jsxs("div", { className: "ids-header-1177__inner", children: [jsxs("div", { className: "ids-header-1177__inner-left", children: [renderLogo(), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177__region-picker", children: regionPicker })] }), jsxs("div", { className: "ids-header-1177__inner-right", children: [items, " ", avatar, " ", mobileMenu] })] }), jsx("div", { className: "ids-header-1177__right" })] }), children] }));
+        }, className), children: [skipToContentLink && jsx("div", { className: "ids-header-1177__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177__container", children: [jsx("div", { className: "ids-header-1177__left" }), jsxs("div", { className: "ids-header-1177__inner", children: [jsxs("div", { className: "ids-header-1177__inner-left", children: [jsx(IDSHeader1177Logo, { logoLink: logoLink, logoHref: logoHref, logoProps: logoProps, srLogoText: srLogoText }), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177__region-picker", children: regionPicker })] }), jsxs("div", { className: "ids-header-1177__inner-right", children: [items, " ", avatar, " ", mobileMenu] })] }), jsx("div", { className: "ids-header-1177__right" })] }), children] }));
 }
 IDSHeader1177Base.displayName = "IDSHeader1177Base";
 

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

@@ -5,7 +5,7 @@ interface IDSHeader1177ItemBaseProps extends HTMLAttributes<HTMLElement> {
     icon?: string;
     unresponsive?: boolean;
 }
-export declare function IDSHeader1177ItemBase({ mobile, keepTextOnMobile, icon, children, unresponsive, ...props }: IDSHeader1177ItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ItemBase({ mobile, keepTextOnMobile, icon, children, unresponsive, ...props }: IDSHeader1177ItemBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177ItemBase {
     var displayName: string;
 }

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

@@ -2,12 +2,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
 function IDSHeader1177ItemBase({ mobile = false, keepTextOnMobile = false, icon, children, unresponsive = false, ...props }) {
-    const renderContent = () => (jsx("div", { className: "ids-header-1177-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     return (jsxs("div", { className: clsx("ids-header-1177-item", {
             "ids-header-1177-item--unresponsive": unresponsive,
             "ids-header-1177-item--mobile": mobile,
             "ids-header-1177-item--keep-text": keepTextOnMobile
-        }), ...props, children: [renderContent(), children] }));
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-item__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }), children] }));
 }
 IDSHeader1177ItemBase.displayName = "IDSHeader1177ItemBase";
 

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

@@ -4,7 +4,7 @@ interface IDSHeader1177ItemProps extends HTMLAttributes<HTMLElement> {
     keepTextOnMobile?: boolean;
     icon?: string;
 }
-export declare function IDSHeader1177Item({ mobile, keepTextOnMobile, icon, children, ...props }: IDSHeader1177ItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177Item({ mobile, keepTextOnMobile, icon, children, ...props }: IDSHeader1177ItemProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177Item {
     var displayName: string;
 }

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

@@ -0,0 +1,12 @@
+import React, { ReactNode, AnchorHTMLAttributes } from "react";
+interface IDSHeader1177LogoProps extends React.HTMLAttributes<HTMLDivElement> {
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    logoLink?: ReactNode;
+    srLogoText?: string;
+}
+export declare function IDSHeader1177Logo({ srLogoText, logoHref, logoProps, logoLink }: IDSHeader1177LogoProps): React.JSX.Element;
+export declare namespace IDSHeader1177Logo {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+
+function IDSHeader1177Logo({ srLogoText = "Logotyp", logoHref = "", logoProps, logoLink }) {
+    return (jsx("div", { className: "ids-header-1177__logo-wrapper", children: jsx("div", { className: "ids-header-1177__logo", children: !!logoLink ? (jsx("span", { className: "ids-header-1177__link", children: logoLink })) : (jsx("a", { className: "ids-header-1177__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps })) }) }));
+}
+IDSHeader1177Logo.displayName = "IDSHeader1177Logo";
+
+export { IDSHeader1177Logo };

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

@@ -9,7 +9,7 @@ interface IDSHeader1177MenuMobileBaseProps extends HTMLAttributes<HTMLDivElement
     buttonRef?: React.Ref<HTMLButtonElement>;
     client?: boolean;
 }
-export declare function IDSHeader1177MenuMobileBase({ srLabel, expanded, unresponsive, children, onToggleMenu, client, componentRef, menuRef, buttonRef, ...props }: IDSHeader1177MenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177MenuMobileBase({ srLabel, expanded, unresponsive, children, onToggleMenu, client, componentRef, menuRef, buttonRef, ...props }: IDSHeader1177MenuMobileBaseProps): React.JSX.Element;
 export declare namespace IDSHeader1177MenuMobileBase {
     var displayName: string;
 }

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

@@ -6,7 +6,7 @@ interface IDSHeader1177MenuMobileProps extends HTMLAttributes<HTMLDivElement> {
     onExpanded?: () => void;
     onClosed?: () => void;
 }
-export declare function IDSHeader1177MenuMobile({ srLabel, persistent, expanded, children, onExpanded, onClosed, ...props }: IDSHeader1177MenuMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177MenuMobile({ srLabel, persistent, expanded, children, onExpanded, onClosed, ...props }: IDSHeader1177MenuMobileProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177MenuMobile {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ interface IDSHeader1177NavBaseProps extends HTMLAttributes<HTMLElement> {
     mobileRight?: ReactNode;
     unresponsive?: boolean;
 }
-export declare function IDSHeader1177NavBase({ hideOnTablet, mobileLeft, mobileRight, children, unresponsive, ...props }: IDSHeader1177NavBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177NavBase({ hideOnTablet, mobileLeft, mobileRight, children, unresponsive, ...props }: IDSHeader1177NavBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177NavBase {
     var displayName: string;
 }

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

@@ -6,7 +6,7 @@ function IDSHeader1177NavBase({ hideOnTablet = false, mobileLeft, mobileRight, c
         "ids-header-1177-nav--unresponsive": unresponsive,
         "ids-header-1177-nav--hide-on-tablet": hideOnTablet
     });
-    return (jsxs("nav", { className: navClass, "aria-label": "Huvudmeny", ...props, children: [jsx("div", { className: "ids-header-1177-nav__inner", children: jsx("div", { className: "ids-header-1177-nav__content", children: children }) }), jsxs("div", { className: "ids-header-1177-nav__inner-mobile", children: [jsx("div", { className: "ids-header-1177-nav__inner-mobile-left", children: mobileLeft }), jsx("div", { className: "ids-header-1177-nav__inner-mobile-right", children: mobileRight })] })] }));
+    return (jsxs("nav", { className: navClass, "aria-label": "Huvudmeny", ...props, children: [jsx("div", { className: "ids-header-1177-nav__inner", children: children }), jsxs("div", { className: "ids-header-1177-nav__inner-mobile", children: [jsx("div", { className: "ids-header-1177-nav__inner-mobile-left", children: mobileLeft }), jsx("div", { className: "ids-header-1177-nav__inner-mobile-right", children: mobileRight })] })] }));
 }
 IDSHeader1177NavBase.displayName = "IDSHeader1177NavBase";
 

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

@@ -16,7 +16,7 @@ export interface IDSHeader1177NavItemBaseProps extends HTMLAttributes<HTMLElemen
     unresponsive?: boolean;
     client?: boolean;
 }
-export declare function IDSHeader1177NavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, client, unresponsive, ...props }: IDSHeader1177NavItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177NavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, client, unresponsive, ...props }: IDSHeader1177NavItemBaseProps): React.JSX.Element;
 export declare namespace IDSHeader1177NavItemBase {
     var displayName: string;
 }

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useId } from 'react';
+import { useId } from 'react';
 import clsx from 'clsx';
+import { IDSHeader1177NavItemLink } from './header-1177-nav-item-link.js';
 
 function IDSHeader1177NavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, client = false, unresponsive, ...props }) {
     const itemId = `header-1177-item-${useId()}`;
@@ -13,17 +14,7 @@ function IDSHeader1177NavItemBase({ label, active, expanded, children, col1, col
             "ids-header-1177-nav-item--unresponsive": unresponsive,
             "ids-header-1177-nav-item--expanded": expanded,
             "ids-header-1177-nav-item--active": active
-        }), ...props, children: [!!label && (jsx("button", { "aria-controls": itemId, ref: buttonRef, "aria-expanded": expanded, className: "ids-header-1177-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-1177-nav-item__link", children: React.Children.map(children, child => {
-                    if (!React.isValidElement(child))
-                        return child;
-                    const element = child;
-                    if (active && !element.props["aria-current"]) {
-                        return React.cloneElement(element, {
-                            "aria-current": "page"
-                        });
-                    }
-                    return element;
-                }) })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-1177-nav-item__menu", {
+        }), ...props, children: [!label && jsx(IDSHeader1177NavItemLink, { active: active, children: children }), !!label && (jsx("button", { "aria-controls": itemId, ref: buttonRef, "aria-expanded": expanded, className: "ids-header-1177-nav-item__button", ...toggleHandler, children: label })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-1177-nav-item__menu", {
                     "ids-header-1177-nav-item__menu--expanded": expanded
                 }), children: jsxs("div", { className: "ids-header-1177-nav-item__menu-content", children: [jsx("div", { className: "ids-header-1177-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu-col-4", children: col4 })] }) })] }));
 }

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

@@ -0,0 +1,10 @@
+import React from "react";
+interface IDSHeader1177NavItemLinkProps {
+    active?: boolean;
+    children?: React.ReactNode;
+}
+export declare function IDSHeader1177NavItemLink({ active, children }: IDSHeader1177NavItemLinkProps): React.JSX.Element;
+export declare namespace IDSHeader1177NavItemLink {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+function IDSHeader1177NavItemLink({ active, children }) {
+    return (jsx("span", { className: "ids-header-1177-nav-item__link", children: React.Children.map(children, child => {
+            if (!React.isValidElement(child))
+                return child;
+            const element = child;
+            if (active && !element.props["aria-current"]) {
+                return React.cloneElement(element, {
+                    "aria-current": "page"
+                });
+            }
+            return element;
+        }) }));
+}
+IDSHeader1177NavItemLink.displayName = "IDSHeader1177NavItemLink";
+
+export { IDSHeader1177NavItemLink };

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

@@ -3,7 +3,7 @@ interface IDSHeader1177NavItemMobileBaseProps extends HTMLAttributes<HTMLElement
     icon?: string;
     unresponsive?: boolean;
 }
-export declare function IDSHeader1177NavItemMobileBase({ icon, unresponsive, children, ...props }: IDSHeader1177NavItemMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177NavItemMobileBase({ icon, unresponsive, children, ...props }: IDSHeader1177NavItemMobileBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeader1177NavItemMobileBase {
     var displayName: string;
 }