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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { BaseProps } from '../../BaseProps';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileBackground, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
 export type PButtonTileProps = BaseProps & {
@@ -67,23 +66,23 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<impo
     /**
      * Alignment of button and description.
      */
-    align?: "top" | "bottom" | undefined;
+    align?: ButtonTileAlign;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<"aria-expanded" | "aria-haspopup" | "aria-label" | "aria-pressed"> | undefined;
+    aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
      * Aspect ratio of the button-tile.
      */
-    aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
+    aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
     /**
      * Adapts the description and button theme when used on light background image.
      */
-    background?: "light" | "dark" | "auto" | undefined;
+    background?: ButtonTileBackground;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */
-    compact?: BreakpointCustomizable<boolean> | undefined;
+    compact?: BreakpointCustomizable<boolean>;
     /**
      * Description text.
      */
@@ -91,19 +90,19 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<impo
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Show gradient.
      */
-    gradient?: boolean | undefined;
+    gradient?: boolean;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: import("../types").LinkButtonIconName | undefined;
+    icon?: ButtonTileIcon;
     /**
      * A URL path to a custom icon.
      */
-    iconSource?: string | undefined;
+    iconSource?: string;
     /**
      * Label of the button.
      */
@@ -111,19 +110,19 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<impo
     /**
      * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
      */
-    loading?: boolean | undefined;
+    loading?: boolean;
     /**
      * Font size of the description.
      */
-    size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
+    size?: BreakpointCustomizable<ButtonTileSize>;
     /**
      * Specifies the type of the button.
      */
-    type?: "button" | "reset" | "submit" | undefined;
+    type?: ButtonTileType;
     /**
      * Font weight of the description.
      */
-    weight?: BreakpointCustomizable<"regular" | "semi-bold"> | undefined;
+    weight?: BreakpointCustomizable<ButtonTileWeight>;
 } & {
-    children?: import("react").ReactNode;
+    children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/button-tile.wrapper.mjs

@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'default', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
+const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, disabled = false, gradient = true, icon = 'none', iconSource, label, loading = false, size = 'medium', type = 'submit', weight = 'semi-bold', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button-tile');
     const propsToSync = [align, aria, aspectRatio, background, compact, description, disabled, gradient, icon, iconSource, label, loading, size, type, weight];

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 & {
@@ -6,6 +5,10 @@ export type PButtonProps = BaseProps & {
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -51,47 +54,51 @@ 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>;
+    /**
+     * Displays as compact version.
+     */
+    compact?: boolean;
     /**
      * 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/button.wrapper.mjs

@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PButton = forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
+const PButton = forwardRef(({ aria, compact = false, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, hideLabel, icon, iconSource, loading, name, theme || useTheme(), type, value, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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