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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
 export type PButtonProps = BaseProps & {
@@ -51,47 +50,47 @@ export declare const PButton: import("react").ForwardRefExoticComponent<import("
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-expanded" | "aria-haspopup" | "aria-label" | "aria-pressed"> | undefined;
+    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
-    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: import("../types").LinkButtonIconName | undefined;
+    icon?: ButtonIcon;
     /**
      * A URL path to a custom icon.
      */
-    iconSource?: string | undefined;
+    iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
-    loading?: boolean | undefined;
+    loading?: boolean;
     /**
      * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
      */
-    name?: string | undefined;
+    name?: string;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * Specifies the type of the button.
      */
-    type?: "button" | "reset" | "submit" | undefined;
+    type?: ButtonType;
     /**
      * Defines the value associated with the button's name when it's submitted with the form data. This value is passed to the server in params when the form is submitted using this button.
      */
-    value?: string | undefined;
+    value?: string;
     /**
      * The style variant of the button.
      */
-    variant?: "primary" | "secondary" | "tertiary" | undefined;
+    variant?: ButtonVariant;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { CanvasSidebarEndWidth, CanvasSidebarStartWidth } from '../types';
 export type PCanvasProps = BaseProps & {
@@ -31,27 +30,27 @@ export declare const PCanvas: import("react").ForwardRefExoticComponent<import("
     /**
      * Emitted when the component requests to close the sidebar on the end side.
      */
-    onDismissSidebarEnd?: ((event: CustomEvent<void>) => void) | undefined;
+    onDismissSidebarEnd?: (event: CustomEvent<void>) => void;
     /**
      * Emitted when the component requests to close the sidebar on the start side.
      */
-    onDismissSidebarStart?: ((event: CustomEvent<void>) => void) | undefined;
+    onDismissSidebarStart?: (event: CustomEvent<void>) => void;
     /**
      * Open Sidebar on the end side
      */
-    sidebarEndOpen?: boolean | undefined;
+    sidebarEndOpen?: boolean;
     /**
      * Defines the width of the sidebar on the end side
      */
-    sidebarEndWidth?: "medium" | "large" | undefined;
+    sidebarEndWidth?: CanvasSidebarEndWidth;
     /**
      * Open Sidebar on the start side
      */
-    sidebarStartOpen?: boolean | undefined;
+    sidebarStartOpen?: boolean;
     /**
      * Defines the width of the sidebar on the start side
      */
-    sidebarStartWidth?: "medium" | "large" | undefined;
+    sidebarStartWidth?: CanvasSidebarStartWidth;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { CarouselAlignHeader, SelectedAriaAttributes, CarouselAriaAttribute, BreakpointCustomizable, CarouselHeadingSize, CarouselInternationalization, CarouselUpdateEventDetail, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = BaseProps & {
@@ -76,72 +75,72 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<import
     /**
      * Defines which slide to be active (zero-based numbering).
      */
-    activeSlideIndex?: number | undefined;
+    activeSlideIndex?: number;
     /**
      * Alignment of heading and description
      */
-    alignHeader?: "center" | "start" | "left" | undefined;
+    alignHeader?: CarouselAlignHeader;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<CarouselAriaAttribute>;
     /**
      * Defines the description used in the carousel.
      */
-    description?: string | undefined;
+    description?: string;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
-    disablePagination?: BreakpointCustomizable<boolean> | undefined;
+    disablePagination?: BreakpointCustomizable<boolean>;
     /**
      * Defines the heading used in the carousel.
      */
-    heading?: string | undefined;
+    heading?: string;
     /**
      * Defines the heading size used in the carousel.
      */
-    headingSize?: CarouselHeadingSize | undefined;
+    headingSize?: CarouselHeadingSize;
     /**
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
-    intl?: Partial<Record<"prev" | "next" | "first" | "last" | "slideLabel" | "slide", string>> | undefined;
+    intl?: CarouselInternationalization;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when carousel's content slides.
      */
-    onCarouselChange?: ((event: CustomEvent<CarouselUpdateEventDetail>) => void) | undefined;
+    onCarouselChange?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
      * Emitted when carousel's content slides.
      */
-    onUpdate?: ((event: CustomEvent<CarouselUpdateEventDetail>) => void) | undefined;
+    onUpdate?: (event: CustomEvent<CarouselUpdateEventDetail>) => void;
     /**
      * If false, the carousel will not show pagination bullets at the bottom.
      */
-    pagination?: BreakpointCustomizable<boolean> | undefined;
+    pagination?: BreakpointCustomizable<boolean>;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
      */
-    rewind?: boolean | undefined;
+    rewind?: boolean;
     /**
      * Defines target of skip link (to skip carousel entries).
      */
-    skipLinkTarget?: string | undefined;
+    skipLinkTarget?: string;
     /**
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: "auto" | BreakpointCustomizable<number> | undefined;
+    slidesPerPage?: BreakpointCustomizable<number> | "auto";
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * Defines the outer spacings between the carousel and the left and right screen sides.
      */
-    width?: "extended" | "basic" | undefined;
+    width?: CarouselWidth;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    wrapContent?: boolean | undefined;
+    wrapContent?: boolean;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
 export type PCheckboxWrapperProps = BaseProps & {
@@ -31,27 +30,27 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
-    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The label text.
      */
-    label?: string | undefined;
+    label?: string;
     /**
      * @experimental Disables the checkbox and shows a loading indicator.
      */
-    loading?: boolean | undefined;
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */
-    message?: string | undefined;
+    message?: string;
     /**
      * The validation state.
      */
-    state?: "none" | "success" | "error" | undefined;
+    state?: CheckboxWrapperState;
     /**
      * Adapts the 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/content-wrapper.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
 export type PContentWrapperProps = BaseProps & {
@@ -17,22 +16,21 @@ export type PContentWrapperProps = BaseProps & {
      */
     width?: ContentWrapperWidth;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PContentWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    backgroundColor?: "default" | "transparent" | undefined;
+    backgroundColor?: ContentWrapperBackgroundColor;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
     /**
      * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
      */
-    width?: "extended" | "basic" | "fluid" | "narrow" | "full" | undefined;
+    width?: ContentWrapperWidth;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/content-wrapper.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. Use native CSS Grid instead. */
 const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-content-wrapper');

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
 export type PCrestProps = BaseProps & {
@@ -19,13 +18,13 @@ export declare const PCrest: import("react").ForwardRefExoticComponent<import("r
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-current" | "aria-label"> | undefined;
+    aria?: SelectedAriaAttributes<CrestAriaAttribute>;
     /**
      * When providing an url then the component will be rendered as `<a>`.
      */
-    href?: string | undefined;
+    href?: string;
     /**
      * Target attribute where the link should be opened.
      */
-    target?: string | undefined;
+    target?: CrestTarget;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
 export type PDisplayProps = BaseProps & {
@@ -31,27 +30,27 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<import(
     /**
      * Text alignment of the component.
      */
-    align?: "center" | "start" | "end" | "left" | "right" | undefined;
+    align?: DisplayAlign;
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: "inherit" | "primary" | undefined;
+    color?: DisplayColor;
     /**
      * 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: "medium", l: "large"}. You always need to provide a base value when doing this.
      */
-    size?: BreakpointCustomizable<"inherit" | "small" | "medium" | "large"> | undefined;
+    size?: BreakpointCustomizable<DisplaySize>;
     /**
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+    tag?: DisplayTag;
     /**
      * 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/divider.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { DividerColor, BreakpointCustomizable, DividerDirection, DividerOrientation, Theme } from '../types';
 export type PDividerProps = BaseProps & {
@@ -23,17 +22,17 @@ export declare const PDivider: import("react").ForwardRefExoticComponent<import(
     /**
      * Defines color depending on theme.
      */
-    color?: "contrast-low" | "contrast-medium" | "contrast-high" | "neutral-contrast-low" | "neutral-contrast-medium" | "neutral-contrast-high" | undefined;
+    color?: DividerColor;
     /**
      * Defines direction.
      */
-    direction?: BreakpointCustomizable<"horizontal" | "vertical"> | undefined;
+    direction?: BreakpointCustomizable<DividerDirection>;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `direction` instead. Defines orientation.
      */
-    orientation?: BreakpointCustomizable<"horizontal" | "vertical"> | undefined;
+    orientation?: BreakpointCustomizable<DividerOrientation>;
     /**
      * Adapts color depending on theme.
      */
-    theme?: "light" | "dark" | "auto" | undefined;
+    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { FieldsetWrapperLabelSize, FieldsetWrapperState, Theme } from '../types';
 export type PFieldsetWrapperProps = BaseProps & {
@@ -27,32 +26,31 @@ export type PFieldsetWrapperProps = BaseProps & {
      */
     theme?: Theme;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-fieldset" instead. */
 export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * The label text.
      */
-    label?: string | undefined;
+    label?: string;
     /**
      * The size of the label text.
      */
-    labelSize?: "small" | "medium" | undefined;
+    labelSize?: FieldsetWrapperLabelSize;
     /**
      * The message styled depending on validation state.
      */
-    message?: string | undefined;
+    message?: string;
     /**
      * Marks the Fieldset as required.
      */
-    required?: boolean | undefined;
+    required?: boolean;
     /**
      * The validation state.
      */
-    state?: "none" | "success" | "error" | undefined;
+    state?: FieldsetWrapperState;
     /**
      * Adapts color depending on 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/fieldset-wrapper.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-fieldset" instead. */
 const PFieldsetWrapper = forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-fieldset-wrapper');

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { FieldsetLabelSize, FieldsetState, Theme } from '../types';
 export type PFieldsetProps = BaseProps & {
@@ -31,27 +30,27 @@ export declare const PFieldset: import("react").ForwardRefExoticComponent<import
     /**
      * The label text.
      */
-    label?: string | undefined;
+    label?: string;
     /**
      * The size of the label text.
      */
-    labelSize?: "small" | "medium" | undefined;
+    labelSize?: FieldsetLabelSize;
     /**
      * The message styled depending on validation state.
      */
-    message?: string | undefined;
+    message?: string;
     /**
      * Marks the Fieldset as required.
      */
-    required?: boolean | undefined;
+    required?: boolean;
     /**
      * The validation state.
      */
-    state?: "none" | "success" | "error" | undefined;
+    state?: FieldsetState;
     /**
      * Adapts color depending on 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/flex-item.wrapper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
 export type PFlexItemProps = BaseProps & {
@@ -27,32 +26,31 @@ export type PFlexItemProps = BaseProps & {
      */
     width?: BreakpointCustomizable<FlexItemWidth>;
 };
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 export declare const PFlexItem: import("react").ForwardRefExoticComponent<import("react").DOMAttributes<{}> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
      */
-    alignSelf?: BreakpointCustomizable<"auto" | "center" | "flex-start" | "flex-end" | "stretch" | "baseline"> | undefined;
+    alignSelf?: BreakpointCustomizable<FlexItemAlignSelf>;
     /**
      * The shorthand property for the combined definition of "shrink", "grow" and "basis"
      */
-    flex?: BreakpointCustomizable<"none" | "auto" | "initial" | "equal"> | undefined;
+    flex?: BreakpointCustomizable<FlexItemFlex>;
     /**
      * The ability to allow/disallow the flex child to grow.
      */
-    grow?: BreakpointCustomizable<0 | 1> | undefined;
+    grow?: BreakpointCustomizable<FlexItemGrow>;
     /**
      * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    offset?: BreakpointCustomizable<"none" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters"> | undefined;
+    offset?: BreakpointCustomizable<FlexItemOffset>;
     /**
      * The ability to allow/disallow the flex child to shrink.
      */
-    shrink?: BreakpointCustomizable<0 | 1> | undefined;
+    shrink?: BreakpointCustomizable<FlexItemShrink>;
     /**
      * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
      */
-    width?: BreakpointCustomizable<"auto" | "full" | "one-quarter" | "one-third" | "half" | "two-thirds" | "three-quarters"> | undefined;
+    width?: BreakpointCustomizable<FlexItemWidth>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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>>;