@porsche-design-system/components-react 3.16.0 → 3.17.0-rc.1

package/esm/lib/components/flex-item.wrapper.mjs

@@ -4,7 +4,6 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlexItem = forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-flex-item');

package/esm/lib/components/flex.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
 export type PFlexProps = BaseProps & {
@@ -27,32 +26,31 @@ export type PFlexProps = BaseProps & {
      */
     wrap?: BreakpointCustomizable<FlexWrap>;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 export declare const PFlex: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
      */
-    alignContent?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "stretch"> | undefined;
+    alignContent?: BreakpointCustomizable<FlexAlignContent>;
     /**
      * Defines how the flex items are aligned along the cross axis.
      */
-    alignItems?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "stretch" | "baseline"> | undefined;
+    alignItems?: BreakpointCustomizable<FlexAlignItems>;
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
      */
-    direction?: BreakpointCustomizable<"row" | "column" | "row-reverse" | "column-reverse"> | undefined;
+    direction?: BreakpointCustomizable<FlexDirection>;
     /**
      * Defines the flex containers content flow if 2 or more containers are siblings of each other.
      */
-    inline?: BreakpointCustomizable<boolean> | undefined;
+    inline?: BreakpointCustomizable<FlexInline>;
     /**
      * Defines how the flex items are aligned along the main axis.
      */
-    justifyContent?: BreakpointCustomizable<"center" | "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly"> | undefined;
+    justifyContent?: BreakpointCustomizable<FlexJustifyContent>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: BreakpointCustomizable<"nowrap" | "wrap" | "wrap-reverse"> | undefined;
+    wrap?: BreakpointCustomizable<FlexWrap>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/flex.wrapper.mjs

@@ -4,7 +4,6 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 const PFlex = forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-flex');

package/esm/lib/components/flyout-multilevel-item.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 export type PFlyoutMultilevelItemProps = BaseProps & {
     /**
@@ -18,7 +17,7 @@ export declare const PFlyoutMultilevelItem: import("react").ForwardRefExoticComp
     /**
      * Label of the item.
      */
-    label?: string | undefined;
+    label?: string;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/flyout-multilevel.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, FlyoutMultilevelAriaAttribute, FlyoutMultilevelUpdateEventDetail, Theme } from '../types';
 export type PFlyoutMultilevelProps = BaseProps & {
@@ -35,23 +34,23 @@ export declare const PFlyoutMultilevel: import("react").ForwardRefExoticComponen
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<FlyoutMultilevelAriaAttribute>;
     /**
      * Emitted when the component requests to be dismissed.
      */
-    onDismiss?: ((event: CustomEvent<void>) => void) | undefined;
+    onDismiss?: (event: CustomEvent<void>) => void;
     /**
      * Emitted when activeIdentifier is changed.
      */
-    onUpdate?: ((event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void) | undefined;
+    onUpdate?: (event: CustomEvent<FlyoutMultilevelUpdateEventDetail>) => void;
     /**
      * If true, the flyout-multilevel is visualized as opened.
      */
-    open?: boolean | undefined;
+    open?: boolean;
     /**
      * Adapts the flyout-multilevel color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/flyout.wrapper.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutPosition, Theme } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, Theme } from '../types';
 export type PFlyoutProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -14,6 +13,14 @@ export type PFlyoutProps = BaseProps & {
      * Emitted when the component requests to be dismissed.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the flyout is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<FlyoutMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the flyout is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<FlyoutMotionVisibleEndEventDetail>) => void;
     /**
      * If true, the flyout is open.
      */
@@ -31,15 +38,23 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<import("
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<FlyoutAriaAttribute>;
     /**
      * If true, the flyout will not be closable via backdrop click.
      */
-    disableBackdropClick?: boolean | undefined;
+    disableBackdropClick?: boolean;
     /**
      * Emitted when the component requests to be dismissed.
      */
-    onDismiss?: ((event: CustomEvent<void>) => void) | undefined;
+    onDismiss?: (event: CustomEvent<void>) => void;
+    /**
+     * Emitted when the flyout is closed and the transition is finished.
+     */
+    onMotionHiddenEnd?: (event: CustomEvent<FlyoutMotionHiddenEndEventDetail>) => void;
+    /**
+     * Emitted when the flyout is opened and the transition is finished.
+     */
+    onMotionVisibleEnd?: (event: CustomEvent<FlyoutMotionVisibleEndEventDetail>) => void;
     /**
      * If true, the flyout is open.
      */
@@ -47,11 +62,11 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<import("
     /**
      * The position of the flyout
      */
-    position?: "start" | "end" | "left" | "right" | undefined;
+    position?: FlyoutPosition;
     /**
      * Adapts the flyout color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/flyout.wrapper.mjs

@@ -4,9 +4,11 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyout = forwardRef(({ aria, disableBackdropClick = false, onDismiss, open = false, position = 'end', theme, className, ...rest }, ref) => {
+const PFlyout = forwardRef(({ aria, disableBackdropClick = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
+    useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
+    useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-flyout');
     const propsToSync = [aria, disableBackdropClick, open, position, theme || useTheme()];
     useBrowserLayoutEffect(() => {

package/esm/lib/components/grid-item.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, GridItemOffset, GridItemSize } from '../types';
 export type PGridItemProps = BaseProps & {
@@ -11,16 +10,15 @@ export type PGridItemProps = BaseProps & {
      */
     size?: BreakpointCustomizable<GridItemSize>;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PGridItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    offset?: BreakpointCustomizable<0 | 3 | 4 | 2 | 7 | 5 | 1 | 6 | 8 | 9 | 10 | 11> | undefined;
+    offset?: BreakpointCustomizable<GridItemOffset>;
     /**
      * The size of the column. Can be between 1 and 12. Also defines the size of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<3 | 4 | 2 | 7 | 5 | 1 | 6 | 12 | 8 | 9 | 10 | 11> | undefined;
+    size?: BreakpointCustomizable<GridItemSize>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/grid-item.wrapper.mjs

@@ -4,7 +4,6 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGridItem = forwardRef(({ offset = 0, size = 1, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-grid-item');

package/esm/lib/components/grid.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, GridDirection, GridGutter, GridWrap } from '../types';
 export type PGridProps = BaseProps & {
@@ -16,21 +15,20 @@ export type PGridProps = BaseProps & {
      */
     wrap?: BreakpointCustomizable<GridWrap>;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PGrid: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */
-    direction?: BreakpointCustomizable<"row" | "column" | "row-reverse" | "column-reverse"> | undefined;
+    direction?: BreakpointCustomizable<GridDirection>;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    gutter?: BreakpointCustomizable<16 | 24 | 36> | undefined;
+    gutter?: BreakpointCustomizable<GridGutter>;
     /**
      * Handles wrapping behaviour of elements.
      */
-    wrap?: BreakpointCustomizable<"nowrap" | "wrap"> | undefined;
+    wrap?: BreakpointCustomizable<GridWrap>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/grid.wrapper.mjs

@@ -4,7 +4,6 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 const PGrid = forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-grid');

package/esm/lib/components/heading.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, HeadingTag, Theme } from '../types';
 export type PHeadingProps = BaseProps & {
@@ -31,27 +30,27 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<import(
     /**
      * Text alignment of the component.
      */
-    align?: "center" | "start" | "end" | "left" | "right" | undefined;
+    align?: HeadingAlign;
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "inherit" | "primary" | undefined;
+    color?: HeadingColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
-    ellipsis?: boolean | undefined;
+    ellipsis?: boolean;
     /**
      * Size of the component. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-large"> | undefined;
+    size?: BreakpointCustomizable<HeadingSize>;
     /**
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    tag?: HeadingTag;
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/headline.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { HeadlineAlign, HeadlineColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
 export type PHeadlineProps = BaseProps & {
@@ -27,32 +26,31 @@ export type PHeadlineProps = BaseProps & {
      */
     variant?: HeadlineVariant;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 export declare const PHeadline: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */
-    align?: "center" | "start" | "end" | "left" | "right" | undefined;
+    align?: HeadlineAlign;
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "default" | "inherit" | "primary" | undefined;
+    color?: HeadlineColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
-    ellipsis?: boolean | undefined;
+    ellipsis?: boolean;
     /**
      * Sets a custom HTML tag depending on the usage of the headline component.
      */
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    tag?: HeadlineTag;
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * Predefined style of the headline.
      */
-    variant?: HeadlineVariant | undefined;
+    variant?: HeadlineVariant;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/headline.wrapper.mjs

@@ -4,7 +4,6 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 const PHeadline = forwardRef(({ align = 'start', color = 'primary', ellipsis = false, tag, theme, variant = 'headline-1', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-headline');

package/esm/lib/components/icon.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize, Theme } from '../types';
 export type PIconProps = BaseProps & {
@@ -36,30 +35,30 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<import("re
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
      * Basic color variations depending on theme property.
      */
-    color?: "default" | "inherit" | "primary" | "contrast-low" | "contrast-medium" | "contrast-high" | "notification-success" | "notification-warning" | "notification-error" | "notification-info" | "brand" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | "notification-neutral" | "state-disabled" | undefined;
+    color?: IconColor;
     /**
      * Has no effect anymore (the component is now using the native `loading="lazy"` attribute by default)
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    lazy?: boolean | undefined;
+    lazy?: boolean;
     /**
      * Specifies which icon to use.
      */
-    name?: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-empty-co2" | "battery-empty-fuel" | "battery-full" | "bell" | "bookmark" | "bookmark-filled" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-class" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-x" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "star-filled" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
+    name?: IconName;
     /**
      * The size of the icon.
      */
-    size?: "inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small" | undefined;
+    size?: IconSize;
     /**
      * Specifies a whole icon path which can be used for custom icons.
      */
-    source?: string | undefined;
+    source?: string;
     /**
      * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/index.d.ts

@@ -35,6 +35,7 @@ export * from './modal.wrapper';
 export * from './model-signature.wrapper';
 export * from './multi-select.wrapper';
 export * from './multi-select-option.wrapper';
+export * from './optgroup.wrapper';
 export * from './pagination.wrapper';
 export * from './pin-code.wrapper';
 export * from './popover.wrapper';

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState, Theme } from '../types';
 export type PInlineNotificationProps = BaseProps & {
@@ -55,51 +54,51 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
     /**
      * Action icon of the inline-notification.
      */
-    actionIcon?: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-empty-co2" | "battery-empty-fuel" | "battery-full" | "bell" | "bookmark" | "bookmark-filled" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-class" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-x" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "star-filled" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
+    actionIcon?: InlineNotificationActionIcon;
     /**
      * Action label of the inline-notification.
      */
-    actionLabel?: string | undefined;
+    actionLabel?: string;
     /**
      * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
      */
-    actionLoading?: boolean | undefined;
+    actionLoading?: boolean;
     /**
      * Description of the inline-notification.
      */
-    description?: string | undefined;
+    description?: string;
     /**
      * If false, the inline-notification will not have a dismiss button.
      */
-    dismissButton?: boolean | undefined;
+    dismissButton?: boolean;
     /**
      * Heading of the inline-notification.
      */
-    heading?: string | undefined;
+    heading?: string;
     /**
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
-    headingTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    headingTag?: InlineNotificationHeadingTag;
     /**
      * Emitted when the action button is clicked.
      */
-    onAction?: ((event: CustomEvent<void>) => void) | undefined;
+    onAction?: (event: CustomEvent<void>) => void;
     /**
      * Emitted when the close button is clicked.
      */
-    onDismiss?: ((event: CustomEvent<void>) => void) | undefined;
+    onDismiss?: (event: CustomEvent<void>) => void;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the inline-notification can be closed/removed by the user.
      */
-    persistent?: boolean | undefined;
+    persistent?: boolean;
     /**
      * State of the inline-notification.
      */
-    state?: "success" | "warning" | "error" | "info" | "neutral" | undefined;
+    state?: InlineNotificationState;
     /**
      * Adapts the inline-notification color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/link-pure.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, LinkPureAlignLabel, SelectedAriaAttributes, LinkPureAriaAttribute, LinkPureIcon, LinkPureSize, LinkPureTarget, Theme, LinkPureWeight } from '../types';
 export type PLinkPureProps = BaseProps & {
@@ -68,64 +67,64 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<import
     /**
      * Display link in active state.
      */
-    active?: boolean | undefined;
+    active?: boolean;
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<"start" | "end" | "left" | "right"> | undefined;
+    alignLabel?: BreakpointCustomizable<LinkPureAlignLabel>;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-current" | "aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<LinkPureAriaAttribute>;
     /**
      * Special download attribute to open native browser download dialog if target url points to a downloadable file.
      */
-    download?: string | undefined;
+    download?: string;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
-    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * When providing an url then the component will be rendered as `<a>`.
      */
-    href?: string | undefined;
+    href?: string;
     /**
      * The icon shown. By choosing 'none', no icon is displayed
      */
-    icon?: import("../types").LinkButtonIconName | undefined;
+    icon?: LinkPureIcon;
     /**
      * A URL path to a custom icon.
      */
-    iconSource?: string | undefined;
+    iconSource?: string;
     /**
      * Specifies the relationship of the target object to the link object.
      */
-    rel?: string | undefined;
+    rel?: string;
     /**
      * Size of the link.
      */
-    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large" | "x-large" | "xx-small" | "x-small"> | undefined;
+    size?: BreakpointCustomizable<LinkPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
      */
-    stretch?: BreakpointCustomizable<boolean> | undefined;
+    stretch?: BreakpointCustomizable<boolean>;
     /**
      * Target attribute where the link should be opened.
      */
-    target?: string | undefined;
+    target?: LinkPureTarget;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * Shows an underline under the label.
      */
-    underline?: boolean | undefined;
+    underline?: boolean;
     /**
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: "regular" | "semi-bold" | "bold" | "thin" | "semibold" | undefined;
+    weight?: LinkPureWeight;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;