@inera/ids-react 9.2.1 → 9.3.0

package/components/accordion/accordion-base.d.ts

@@ -9,12 +9,13 @@ interface IDSAccordionBaseProps extends HTMLAttributes<HTMLDivElement> {
     headlineSize?: "m" | "s" | "xs";
     lean?: boolean;
     noBorder?: boolean;
+    hasChildren?: boolean;
     children?: ReactNode;
     onToggleAccordion?: () => void;
     client?: boolean;
     accordionRef?: React.Ref<HTMLDivElement>;
 }
-export declare function IDSAccordionBase({ headline, subtitle, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, children, className, accordionRef, ...props }: IDSAccordionBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSAccordionBase({ headline, subtitle, expanded, level, headlineSize, lean, noBorder, onToggleAccordion, client, hasChildren, children, className, accordionRef, ...props }: IDSAccordionBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSAccordionBase {
     var displayName: string;
 }

package/components/accordion/accordion-base.js

@@ -1,13 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import React, { useId } from 'react';
+import { useId } from 'react';
 import '@inera/ids-design/components/accordion/accordion.css';
 
-function IDSAccordionBase({ headline, subtitle, expanded = false, level = 1, headlineSize = "m", lean = false, noBorder, onToggleAccordion, client = false, children, className, accordionRef, ...props }) {
+function IDSAccordionBase({ headline, subtitle, expanded = false, level = 1, headlineSize = "m", lean = false, noBorder, onToggleAccordion, client = false, hasChildren = false, children, className, accordionRef, ...props }) {
     const reactId = useId();
     const headerId = `accordion-header-${reactId}`;
     const contentId = `accordion-content-${reactId}`;
-    const hasChildren = !!React.Children.toArray(children).length;
     const handleKeyDown = (e) => {
         if (!onToggleAccordion)
             return;
@@ -52,7 +51,7 @@ function IDSAccordionBase({ headline, subtitle, expanded = false, level = 1, hea
             "ids-accordion--lean": lean,
             "ids-accordion--has-children": !!hasChildren,
             "ids-accordion--is-child": level === 2
-        }, className), children: [jsx("div", { className: clsx("ids-accordion__button", `ids-accordion__button--${headlineSize}`), role: "button", tabIndex: 0, "data-accordion-header": true, "aria-expanded": expanded, "aria-controls": contentId, ...toggleHandlers, children: jsxs("div", { id: headerId, className: clsx("ids-accordion__headline", `ids-accordion__headline-${level}`, `ids-accordion__headline--${headlineSize}`, expanded && "ids-accordion__headline--expanded"), children: [headline, !!subtitle && jsx("div", { className: "ids-accordion__subtitle", children: subtitle })] }) }), jsx("div", { "aria-hidden": !expanded, id: contentId, "aria-labelledby": headerId, role: "region", className: "ids-accordion__content", children: jsx("div", { "data-accordion-root": true, children: children }) })] }));
+        }, className), children: [jsx("button", { className: clsx("ids-accordion__button", `ids-accordion__button--${headlineSize}`), type: "button", "data-accordion-header": true, "aria-expanded": expanded, "aria-controls": contentId, ...toggleHandlers, children: jsxs("div", { id: headerId, className: clsx("ids-accordion__headline", `ids-accordion__headline-${level}`, `ids-accordion__headline--${headlineSize}`, expanded && "ids-accordion__headline--expanded"), children: [headline, !!subtitle && jsx("div", { className: "ids-accordion__subtitle", children: subtitle })] }) }), jsx("div", { "aria-hidden": !expanded, id: contentId, "aria-labelledby": headerId, role: "region", className: "ids-accordion__content", children: jsx("div", { "data-accordion-root": true, children: children }) })] }));
 }
 IDSAccordionBase.displayName = "IDSAccordionBase";
 

package/components/accordion/accordion.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { IDSAccordionBase } from './accordion-base.js';
 
 function IDSAccordion({ headline, subtitle, accordions, level = 1, headlineSize = level === 2 ? "s" : "m", expanded, defaultExpanded = false, lean = false, noBorder = false, onCollapsed, onExpanded, onExpandedChange, children, ...props }) {
@@ -9,6 +9,9 @@ function IDSAccordion({ headline, subtitle, accordions, level = 1, headlineSize
     const [isLean, setIsLean] = useState(lean);
     const accordionRef = useRef(null);
     const isExpanded = isControlled ? expanded : internalExpanded;
+    const hasChildren = React.Children.toArray(children).some((child) => {
+        return React.isValidElement(child) && child.type === IDSAccordion;
+    });
     useEffect(() => {
         if (level === 1 && accordionRef.current?.closest(".ids-card") && !accordions) {
             setIsLean(true);
@@ -25,7 +28,7 @@ function IDSAccordion({ headline, subtitle, accordions, level = 1, headlineSize
         else
             onCollapsed?.();
     };
-    return (jsx(IDSAccordionBase, { ...props, client: true, accordionRef: accordionRef, headline: headline, subtitle: subtitle, level: level, headlineSize: headlineSize, expanded: isExpanded, lean: isLean, noBorder: noBorder, onToggleAccordion: toggleExpanded, children: children }));
+    return (jsx(IDSAccordionBase, { ...props, client: true, accordionRef: accordionRef, headline: headline, subtitle: subtitle, level: level, headlineSize: headlineSize, hasChildren: hasChildren, expanded: isExpanded, lean: isLean, noBorder: noBorder, onToggleAccordion: toggleExpanded, children: children }));
 }
 IDSAccordion.displayName = "IDSAccordion";
 

package/components/alert/alert-base.js

@@ -21,9 +21,9 @@ function IDSAlertBase({ collapsible = false, ribbon = false, collapsed = false,
             "ids-alert--ribbon": ribbon,
             "ids-alert--compact": compact,
             "ids-alert--dismissible": dismissible
-        }, className), children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", "aria-hidden": "true" }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("button", { type: "button", className: "ids-alert__close", ...closeHandler, "aria-label": srCloseText }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [collapsible && !compact && !ribbon && (jsx("button", { type: "button", className: clsx("ids-alert__expand-button", {
+        }, className), children: compact || ribbon ? (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__content", children: [jsx("span", { className: "ids-alert__content-icon", "aria-hidden": "true" }), jsx("span", { className: "ids-alert__content-text", children: children })] }), dismissible && (jsx("div", { className: "ids-alert__button", children: jsx("button", { className: "ids-alert__close", "aria-label": srCloseText, ...closeHandler }) }))] })) : (jsxs(Fragment, { children: [jsxs("div", { className: "ids-alert__header", children: [collapsible && !compact && !ribbon && (jsx("button", { type: "button", className: clsx("ids-alert__expand-button", {
                                 "ids-alert__expand-button--expanded": !collapsed
-                            }), ...toggleHandler, "aria-controls": contentId, "aria-expanded": !collapsed, children: jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: collapsableHeadline }), jsx("span", { className: "ids-alert__sr-only", children: collapsed ? srExpandText : srCollapseText })] }) })), !collapsible && (jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: headline })] })), dismissible && !collapsible && (jsx("button", { type: "button", className: "ids-alert__close", ...closeHandler, "aria-label": srCloseText }))] }), jsx("div", { id: contentId, children: !collapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
+                            }), ...toggleHandler, "aria-controls": contentId, "aria-expanded": !collapsed, children: jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: collapsableHeadline }), jsx("span", { className: "ids-alert__sr-only", children: collapsed ? srExpandText : srCollapseText })] }) })), !collapsible && (jsxs("div", { className: "ids-alert__icon_and_text", children: [jsx("span", { className: "ids-alert__state-icon", "aria-hidden": "true" }), jsx("div", { className: "ids-alert__headline", children: headline })] })), dismissible && !collapsible && (jsx("div", { className: "ids-alert__button", children: jsx("button", { className: "ids-alert__close", "aria-label": srCloseText, ...closeHandler }) }))] }), jsx("div", { id: contentId, children: !collapsed && jsx("div", { className: "ids-alert__content", children: children }) })] })) }));
 }
 IDSAlertBase.displayName = "IDSAlertBase";
 

package/components/breadcrumbs/breadcrumbs.js

@@ -37,7 +37,12 @@ function IDSBreadcrumbs({ lead = "Du är här", mobileLink, children, className,
         return links.flatMap((child, index) => {
             const isLast = index === links.length - 1;
             if (isLast) {
-                return (jsx("li", { className: "ids-breadcrumbs__crumb ids-breadcrumbs__crumb--current", "data-crumb": true, children: child }, index));
+                const currentChild = React.isValidElement(child)
+                    ? React.cloneElement(child, {
+                        "aria-current": "page"
+                    })
+                    : child;
+                return (jsx("li", { className: "ids-breadcrumbs__crumb ids-breadcrumbs__crumb--current", "data-crumb": true, children: currentChild }, index));
             }
             else {
                 return (jsxs("li", { className: "ids-breadcrumbs__crumb", "data-crumb": true, children: [child, jsx("span", { className: "ids-breadcrumbs__crumb__separator", "aria-hidden": "true", children: "/" })] }, index));

package/components/button/button.d.ts

@@ -7,6 +7,7 @@ export interface IDSButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
     fab?: boolean;
     focusAnchor?: boolean;
     icon?: string;
+    endIcon?: string;
     iconButton?: boolean;
     loading?: boolean;
     mBlock?: boolean;

package/components/button/button.js

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { IDSSpinner } from '../form/spinner/spinner.js';
 
-const IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
+const IDSButton = forwardRef(({ active = false, block = false, disabled = false, fab = false, iconButton = false, icon = "", endIcon = "", mBlock = false, sBlock = false, loading = false, tertiary = false, secondary = false, size = "m", submit = false, toggle = false, focusAnchor = false, children, className, ...props }, ref) => {
     let classNames;
     if (fab) {
         classNames = clsx("ids-button", {
@@ -26,7 +26,7 @@ const IDSButton = forwardRef(({ active = false, block = false, disabled = false,
             "ids-focus-anchor": focusAnchor
         }, className);
     }
-    return (jsxs("button", { ...props, ref: ref, className: classNames, "aria-disabled": disabled || loading, ...(toggle ? { "aria-pressed": active } : {}), tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), loading && jsx(IDSSpinner, { variant: !secondary && !tertiary ? "3" : "2" }), !loading && children] }));
+    return (jsxs("button", { ...props, ref: ref, className: classNames, "aria-disabled": disabled || loading, ...(toggle ? { "aria-pressed": active } : {}), tabIndex: !disabled && !loading ? 0 : -1, disabled: disabled, children: [icon && jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }), loading && jsx(IDSSpinner, { variant: !secondary && !tertiary ? "3" : "2" }), !loading && children, endIcon && jsx("span", { className: `ids-icon-${endIcon}` })] }));
 });
 IDSButton.displayName = "IDSButton";
 

package/components/button/control-button.d.ts

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from "react";
+export interface IDSControlButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: string;
+    disabled?: boolean;
+}
+export declare const IDSControlButton: import("react").ForwardRefExoticComponent<IDSControlButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/button/control-button.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+
+const IDSControlButton = forwardRef(({ disabled = false, icon, className, ...props }, ref) => {
+    return (jsx("button", { className: "ids-control-button", ...props, ref: ref, "aria-disabled": disabled, disabled: disabled, children: jsx("span", { className: `ids-icon-${icon}`, "aria-hidden": "true" }) }));
+});
+IDSControlButton.displayName = "IDSControlButton";
+
+export { IDSControlButton };

package/components/carousel/carousel.js

@@ -23,7 +23,7 @@ function IDSCarousel({ srNextLabel = "Nästa", srPrevLabel = "Föregående", cla
     // Validate slide count
     useEffect(() => {
         if (slideCount < 3) {
-            console.warn("Carousel requires at least 3 carousel-items");
+            console.warn("Carousel requires at least 4 carousel-items");
         }
     }, [slideCount]);
     // Initial setup

package/components/dialog/dialog-base.js

@@ -20,7 +20,7 @@ const IDSDialogBase = forwardRef(({ show = false, width, maxWidth, height, headl
                     "ids-dialog--hidden": !show,
                     "ids-focus-trap": !noFocusTrap,
                     "ids-dialog--dismissible": !!dismissible
-                }, className), ref: ref, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { "aria-label": srClose, ...closeHandler, className: "ids-dialog__close-button" }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
+                }, className), ref: ref, role: "dialog", "aria-modal": "true", "aria-labelledby": headline ? headlineId : undefined, style: { width, maxWidth, height, maxHeight: height || undefined }, children: [dismissible && (jsx("div", { className: "ids-dialog__dismissible", children: jsx("button", { className: "ids-dialog__close-button", "aria-label": srClose, ...closeHandler }) })), jsxs("div", { ref: scrollAreaRef, className: clsx("ids-dialog__body", {
                             "ids-dialog__body--scroll-area-focus": !noScrollAreaFocus
                         }), tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsx("div", { className: "ids-dialog__body-headline", id: headlineId, children: headline }), jsx("div", { className: "ids-dialog__body-content", children: children }), actions && jsx("div", { className: "ids-dialog__footer", children: actions })] })] })] }));
 });

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

@@ -16,13 +16,12 @@ function IDSCheckboxBase({ invalid, disabled, required, indeterminate, light, bl
     return (jsxs("div", { className: clsx("ids-checkbox-component", className), style: { display: "inline-flex", flexDirection: "column", gap: showErrorMsg ? "0.5rem" : "" }, "data-testid": dataTestId, children: [jsxs("div", { className: clsx("ids-checkbox", {
                     "ids-checkbox--light": light,
                     "ids-checkbox--block": block
-                }), "data-testid": dataTestId, children: [jsx("input", { id: inputId, ref: inputRef, type: "checkbox", className: clsx("ids-checkbox__input", {
+                }), children: [jsx("input", { id: inputId, ref: inputRef, type: "checkbox", className: clsx("ids-checkbox__input", {
                             "ids-focus-anchor": focusAnchor
                         }), "aria-invalid": invalid, disabled: disabled, required: required, ...ariaErrorHandler, ...ariaCheckedHandler, ...props }), !!children && (jsxs("div", { className: clsx("ids-label-wrapper", {
                             "ids-label-wrapper--block": block
                         }), children: [jsx("label", { htmlFor: inputId, className: clsx("ids-checkbox__label ids-label", {
-                                    "ids-label--clickable": !disabled,
-                                    "ids-label--disabled": disabled
+                                    "ids-label--clickable": !disabled
                                 }), children: children }), tooltip && jsx("span", { className: "ids-label__tooltip", children: tooltip })] }))] }), showErrorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, children: errorMsg }))] }));
 }
 IDSCheckboxBase.displayName = "IDSCheckboxBase";

package/components/form/checkbox/checkbox-group-base.d.ts

@@ -9,8 +9,9 @@ export interface IDSCheckboxGroupBaseProps extends InputHTMLAttributes<HTMLField
     invalid?: boolean;
     errorMsgId?: string;
     groupRef?: React.Ref<HTMLFieldSetElement>;
+    subtitle?: string | ReactNode;
 }
-export declare function IDSCheckboxGroupBase({ legend, errorMsg, compact, hideLegend, tooltip, children, className, invalid, errorMsgId, groupRef, ...props }: IDSCheckboxGroupBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCheckboxGroupBase({ legend, errorMsg, subtitle, compact, hideLegend, tooltip, children, className, invalid, errorMsgId, groupRef, ...props }: IDSCheckboxGroupBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSCheckboxGroupBase {
     var displayName: string;
 }

package/components/form/checkbox/checkbox-group-base.js

@@ -3,13 +3,13 @@ import { useId } from 'react';
 import clsx from 'clsx';
 import { IDSErrorMessage } from '../error-message/error-message.js';
 
-function IDSCheckboxGroupBase({ legend, errorMsg = "", compact = false, hideLegend, tooltip, children, className, invalid = false, errorMsgId, groupRef, ...props }) {
+function IDSCheckboxGroupBase({ legend, errorMsg = "", subtitle, compact = false, hideLegend, tooltip, children, className, invalid = false, errorMsgId, groupRef, ...props }) {
     const baseErrorMsgId = errorMsgId ?? `checkbox-group-base-error-${useId()}`;
     return (jsxs("fieldset", { ref: groupRef, "aria-describedby": invalid && errorMsg ? baseErrorMsgId : undefined, className: clsx("ids-form-group__fieldset", {
             "ids-form-group__fieldset--compact": compact
-        }, className), ...props, children: [legend && (jsx("div", { className: clsx("ids-label-wrapper", {
+        }, className), ...props, children: [legend && (jsxs("div", { className: clsx("ids-label-wrapper", {
                     "ids-label-wrapper--sr-only": hideLegend
-                }, className), children: jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }) })), children, invalid && !!errorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
+                }, className), children: [jsxs("legend", { children: [legend, tooltip && jsx("span", { className: "ids-legend__tooltip", children: tooltip })] }), subtitle && jsx("div", { className: "ids-subtitle ids-subtitle--group", children: subtitle })] })), children, invalid && !!errorMsg && (jsx(IDSErrorMessage, { id: baseErrorMsgId, show: true, compact: true, style: { marginTop: compact ? "0.75rem" : "auto" }, children: errorMsg }))] }));
 }
 IDSCheckboxGroupBase.displayName = "IDSCheckboxGroupBase";
 

package/components/form/checkbox/checkbox-group.d.ts

@@ -8,10 +8,11 @@ export interface IDSCheckboxGroupProps extends InputHTMLAttributes<HTMLFieldSetE
     tooltip?: ReactNode;
     block?: boolean;
     noValidation?: boolean;
+    subtitle?: string | ReactNode;
     children?: ReactNode;
     onValidityChange?: (isValid: boolean) => void;
 }
-export declare function IDSCheckboxGroup({ errorMsg, block, invalid, noValidation, onValidityChange, children, ...props }: IDSCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSCheckboxGroup({ errorMsg, block, invalid, subtitle, noValidation, onValidityChange, children, ...props }: IDSCheckboxGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSCheckboxGroup {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ import { IDSCheckboxGroupBase } from './checkbox-group-base.js';
 import { IDSCheckbox } from './checkbox.js';
 import { useGroupValidity } from '../form-hooks/useGroupValidity.js';
 
-function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false, onValidityChange, children, ...props }) {
+function IDSCheckboxGroup({ errorMsg = "", block, invalid, subtitle, noValidation = false, onValidityChange, children, ...props }) {
     const groupRef = useRef(null);
     const errorMsgId = useId();
     const { isValid, hasInteracted } = useGroupValidity(groupRef, "checkbox", () => {
@@ -34,7 +34,7 @@ function IDSCheckboxGroup({ errorMsg = "", block, invalid, noValidation = false,
         }
         return child;
     });
-    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: groupInvalid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, children: clonedChildren }));
+    return (jsx(IDSCheckboxGroupBase, { ...props, groupRef: groupRef, invalid: groupInvalid || invalid, errorMsgId: errorMsgId, errorMsg: !noValidation && errorMsg, subtitle: subtitle, children: clonedChildren }));
 }
 IDSCheckboxGroup.displayName = "IDSCheckboxGroup";
 

package/components/form/checkbox/checkbox.js

@@ -4,10 +4,9 @@ import { forwardRef, useRef, useEffect } from 'react';
 import { IDSCheckboxBase } from './checkbox-base.js';
 import { useInputValidity } from '../form-hooks/useInputValidity.js';
 
-const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeterminate = false, children, ...props }, ref) => {
-    const internalRef = useRef(null);
-    const checkboxRef = ref ?? internalRef;
-    const hasValidValue = useInputValidity(checkboxRef);
+const IDSCheckbox = forwardRef(({ invalid = false, noValidation = false, indeterminate = false, validationOnBlur = false, children, ...props }, ref) => {
+    const checkboxRef = useRef(null);
+    const hasValidValue = useInputValidity(checkboxRef, validationOnBlur, noValidation);
     const computedInvalid = (invalid || !hasValidValue) && !noValidation;
     // Merge forwarded + local ref
     const mergedRef = (node) => {

package/components/form/datepicker/datepicker.d.ts

@@ -21,13 +21,15 @@ export interface IDSDatePickerProps extends Omit<React.InputHTMLAttributes<HTMLI
     invalidDateErrorMsg?: string;
     disableNavigation?: boolean;
     noValidation?: boolean;
+    readOnly?: boolean;
+    dataTestId?: string;
     modifiers?: Record<string, Matcher | Matcher[]>;
     onChange?: (event: IDSDatePickerChangeEvent) => void;
     onOpen?: () => void;
     onClose?: () => void;
     onDayClick?: (date: Date, modifiers: Modifiers, e: React.MouseEvent) => void;
 }
-export declare function IDSDatePicker({ label, id, value, light, placeholder, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, validationOnBlur, defaultMonth, startMonth, endMonth, noValidation, disabled, required, invalid, tooltip, disableNavigation, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }: IDSDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSDatePicker({ label, id, value, light, placeholder, subtitle, dataTestId, errorMsg, missingDateErrorMsg, invalidDateErrorMsg, calendarHeader, srOpenText, srCloseText, validationOnBlur, defaultMonth, startMonth, endMonth, noValidation, disabled, required, invalid, readOnly, tooltip, disableNavigation, modifiers, focusedDay, onChange, onFocus, onBlur, onOpen, onClose, onDayClick, className, ...props }: IDSDatePickerProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSDatePicker {
     var displayName: string;
 }