@porsche-design-system/components-react 3.31.0 → 4.0.0-alpha.0

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

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PDisplay = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, theme, className, ...rest }, ref) => {
+const PDisplay = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-display');
-    const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme()];
+    const propsToSync = [align, color, ellipsis, size, tag];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'color', 'ellipsis', 'size', 'tag'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { DividerColor, BreakpointCustomizable, DividerDirection, DividerOrientation, Theme } from '../types';
+import type { DividerColor, BreakpointCustomizable, DividerDirection } from '../types';
 export type PDividerProps = BaseProps & {
     /**
      * Defines color depending on theme.
@@ -9,16 +9,8 @@ export type PDividerProps = BaseProps & {
      * Defines direction.
      */
     direction?: BreakpointCustomizable<DividerDirection>;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `direction` instead. Defines orientation.
-     */
-    orientation?: BreakpointCustomizable<DividerOrientation>;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
 };
-export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines color depending on theme.
      */
@@ -27,12 +19,4 @@ export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<im
      * Defines direction.
      */
     direction?: BreakpointCustomizable<DividerDirection>;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `direction` instead. Defines orientation.
-     */
-    orientation?: BreakpointCustomizable<DividerOrientation>;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PDivider = /*#__PURE__*/ forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme, className, ...rest }, ref) => {
+const PDivider = /*#__PURE__*/ forwardRef(({ color = 'contrast-lower', direction = 'horizontal', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-divider');
-    const propsToSync = [color, direction, orientation, theme || useTheme()];
+    const propsToSync = [color, direction];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'direction', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -21,7 +21,7 @@ export type PDrilldownItemProps = BaseProps & {
      */
     secondary?: boolean;
 };
-export declare const PDrilldownItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldownItem: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Private property set by the component itself.
      */

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

@@ -26,7 +26,7 @@ export type PDrilldownLinkProps = BaseProps & {
      */
     target?: DrilldownLinkTarget;
 };
-export declare const PDrilldownLink: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldownLink: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Display link in active state.
      */

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, DrilldownAriaAttribute, DrilldownUpdateEventDetail, Theme } from '../types';
+import type { SelectedAriaAttributes, DrilldownAriaAttribute, DrilldownUpdateEventDetail } from '../types';
 export type PDrilldownProps = BaseProps & {
     /**
      * Defines which drilldown-item to be visualized as opened.
@@ -21,12 +21,8 @@ export type PDrilldownProps = BaseProps & {
      * If true, the drilldown is visualized as opened.
      */
     open?: boolean;
-    /**
-     * Adapts the drilldown color depending on the theme.
-     */
-    theme?: Theme;
 };
-export declare const PDrilldown: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PDrilldown: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Defines which drilldown-item to be visualized as opened.
      */
@@ -47,10 +43,6 @@ export declare const PDrilldown: import("react").ForwardRefExoticComponent<Omit<
      * If true, the drilldown is visualized as opened.
      */
     open?: boolean;
-    /**
-     * Adapts the drilldown color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,18 +1,18 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PDrilldown = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, ...rest }, ref) => {
+const PDrilldown = /*#__PURE__*/ forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-drilldown');
-    const propsToSync = [activeIdentifier, aria, open, theme || useTheme()];
+    const propsToSync = [activeIdentifier, aria, open];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeIdentifier', 'aria', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeIdentifier', 'aria', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaRole, FieldsetLabelSize, FieldsetState, Theme } from '../types';
+import type { SelectedAriaRole, FieldsetLabelSize, FieldsetState } from '../types';
 export type PFieldsetProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -25,12 +25,8 @@ export type PFieldsetProps = BaseProps & {
      * The validation state.
      */
     state?: FieldsetState;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
 };
-export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */
@@ -55,10 +51,6 @@ export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<i
      * The validation state.
      */
     state?: FieldsetState;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFieldset = /*#__PURE__*/ forwardRef(({ aria, label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
+const PFieldset = /*#__PURE__*/ forwardRef(({ aria, label = '', labelSize = 'medium', message = '', required = false, state = 'none', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-fieldset');
-    const propsToSync = [aria, label, labelSize, message, required, state, theme || useTheme()];
+    const propsToSync = [aria, label, labelSize, message, required, state];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'label', 'labelSize', 'message', 'required', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -14,7 +14,7 @@ export type PFlagProps = BaseProps & {
      */
     size?: FlagSize;
 };
-export declare const PFlag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * A map of ARIA attributes to enhance the flag's accessibility. For example, use `{ 'aria-label': 'German flag' }` to provide a descriptive label for screen readers.
      */

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition, Theme } from '../types';
+import type { SelectedAriaAttributes, FlyoutAriaAttribute, FlyoutBackdrop, FlyoutBackground, FlyoutFooterBehavior, FlyoutMotionHiddenEndEventDetail, FlyoutMotionVisibleEndEventDetail, FlyoutPosition } from '../types';
 export type PFlyoutProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -9,6 +9,10 @@ export type PFlyoutProps = BaseProps & {
      * Defines the backdrop, 'blur' (should be used when the underlying content is not relevant for users) and 'shading' (should be used when the user still needs a visual connection to the underlying content).
      */
     backdrop?: FlyoutBackdrop;
+    /**
+     * Defines the background color
+     */
+    background?: FlyoutBackground;
     /**
      * If true, the flyout will not be closable via backdrop click.
      */
@@ -37,12 +41,8 @@ export type PFlyoutProps = BaseProps & {
      * The position of the flyout
      */
     position?: FlyoutPosition;
-    /**
-     * Adapts the flyout color depending on the theme.
-     */
-    theme?: Theme;
 };
-export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */
@@ -51,6 +51,10 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<imp
      * Defines the backdrop, 'blur' (should be used when the underlying content is not relevant for users) and 'shading' (should be used when the user still needs a visual connection to the underlying content).
      */
     backdrop?: FlyoutBackdrop;
+    /**
+     * Defines the background color
+     */
+    background?: FlyoutBackground;
     /**
      * If true, the flyout will not be closable via backdrop click.
      */
@@ -79,10 +83,6 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<imp
      * The position of the flyout
      */
     position?: FlyoutPosition;
-    /**
-     * Adapts the flyout color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PFlyout = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-flyout');
-    const propsToSync = [aria, backdrop, disableBackdropClick, footerBehavior, open, position, theme || useTheme()];
+    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, open, position];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'backdrop', 'disableBackdropClick', 'footerBehavior', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, HeadingTag, Theme } from '../types';
+import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, HeadingTag } from '../types';
 export type PHeadingProps = BaseProps & {
     /**
      * Text alignment of the component.
@@ -21,12 +21,8 @@ export type PHeadingProps = BaseProps & {
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: HeadingTag;
-    /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
-     */
-    theme?: Theme;
 };
-export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Text alignment of the component.
      */
@@ -47,10 +43,6 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<im
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: HeadingTag;
-    /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PHeading = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme, className, ...rest }, ref) => {
+const PHeading = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-heading');
-    const propsToSync = [align, color, ellipsis, size, tag, theme || useTheme()];
+    const propsToSync = [align, color, ellipsis, size, tag];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'color', 'ellipsis', 'size', 'tag'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize, Theme } from '../types';
+import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize } from '../types';
 export type PIconProps = BaseProps & {
     /**
      * Add ARIA attributes.
@@ -9,11 +9,6 @@ export type PIconProps = BaseProps & {
      * Basic color variations depending on theme property.
      */
     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;
     /**
      * Specifies which icon to use.
      */
@@ -26,12 +21,8 @@ export type PIconProps = BaseProps & {
      * Specifies a whole icon path which can be used for custom icons.
      */
     source?: string;
-    /**
-     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
-     */
-    theme?: Theme;
 };
-export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Add ARIA attributes.
      */
@@ -40,11 +31,6 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<impor
      * Basic color variations depending on theme property.
      */
     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;
     /**
      * Specifies which icon to use.
      */
@@ -57,8 +43,4 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<impor
      * Specifies a whole icon path which can be used for custom icons.
      */
     source?: string;
-    /**
-     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
-     */
-    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,16 +1,16 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PIcon = /*#__PURE__*/ forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme, className, ...rest }, ref) => {
+const PIcon = /*#__PURE__*/ forwardRef(({ aria, color = 'primary', name = 'arrow-right', size = 'small', source, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-icon');
-    const propsToSync = [aria, color, lazy, name, size, source, theme || useTheme()];
+    const propsToSync = [aria, color, name, size, source];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'color', 'name', 'size', 'source'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,14 +1,11 @@
 export * from './accordion.wrapper';
 export * from './banner.wrapper';
 export * from './button.wrapper';
-export * from './button-group.wrapper';
 export * from './button-pure.wrapper';
 export * from './button-tile.wrapper';
 export * from './canvas.wrapper';
 export * from './carousel.wrapper';
 export * from './checkbox.wrapper';
-export * from './checkbox-wrapper.wrapper';
-export * from './content-wrapper.wrapper';
 export * from './crest.wrapper';
 export * from './display.wrapper';
 export * from './divider.wrapper';
@@ -16,19 +13,14 @@ export * from './drilldown.wrapper';
 export * from './drilldown-item.wrapper';
 export * from './drilldown-link.wrapper';
 export * from './fieldset.wrapper';
-export * from './fieldset-wrapper.wrapper';
 export * from './flag.wrapper';
-export * from './flex.wrapper';
-export * from './flex-item.wrapper';
 export * from './flyout.wrapper';
-export * from './grid.wrapper';
-export * from './grid-item.wrapper';
 export * from './heading.wrapper';
-export * from './headline.wrapper';
 export * from './icon.wrapper';
 export * from './inline-notification.wrapper';
 export * from './input-date.wrapper';
 export * from './input-email.wrapper';
+export * from './input-month.wrapper';
 export * from './input-number.wrapper';
 export * from './input-password.wrapper';
 export * from './input-search.wrapper';
@@ -36,13 +28,11 @@ export * from './input-tel.wrapper';
 export * from './input-text.wrapper';
 export * from './input-time.wrapper';
 export * from './input-url.wrapper';
+export * from './input-week.wrapper';
 export * from './link.wrapper';
 export * from './link-pure.wrapper';
-export * from './link-social.wrapper';
 export * from './link-tile.wrapper';
-export * from './link-tile-model-signature.wrapper';
 export * from './link-tile-product.wrapper';
-export * from './marque.wrapper';
 export * from './modal.wrapper';
 export * from './model-signature.wrapper';
 export * from './multi-select.wrapper';
@@ -51,7 +41,6 @@ export * from './optgroup.wrapper';
 export * from './pagination.wrapper';
 export * from './pin-code.wrapper';
 export * from './popover.wrapper';
-export * from './radio-button-wrapper.wrapper';
 export * from './radio-group.wrapper';
 export * from './radio-group-option.wrapper';
 export * from './scroller.wrapper';
@@ -59,7 +48,6 @@ export * from './segmented-control.wrapper';
 export * from './segmented-control-item.wrapper';
 export * from './select.wrapper';
 export * from './select-option.wrapper';
-export * from './select-wrapper.wrapper';
 export * from './sheet.wrapper';
 export * from './spinner.wrapper';
 export * from './stepper-horizontal.wrapper';
@@ -78,10 +66,8 @@ export * from './tabs-item.wrapper';
 export * from './tag.wrapper';
 export * from './tag-dismissible.wrapper';
 export * from './text.wrapper';
-export * from './text-field-wrapper.wrapper';
 export * from './text-list.wrapper';
 export * from './text-list-item.wrapper';
 export * from './textarea.wrapper';
-export * from './textarea-wrapper.wrapper';
 export * from './toast.wrapper';
 export * from './wordmark.wrapper';

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState, Theme } from '../types';
+import type { InlineNotificationActionIcon, InlineNotificationHeadingTag, InlineNotificationState } from '../types';
 export type PInlineNotificationProps = BaseProps & {
     /**
      * Action icon of the inline-notification.
@@ -37,20 +37,12 @@ export type PInlineNotificationProps = BaseProps & {
      * Emitted when the close button is clicked.
      */
     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;
     /**
      * State of the inline-notification.
      */
     state?: InlineNotificationState;
-    /**
-     * Adapts the inline-notification color depending on the theme.
-     */
-    theme?: Theme;
 };
-export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInlineNotification: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Action icon of the inline-notification.
      */
@@ -87,18 +79,10 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
      * Emitted when the close button is clicked.
      */
     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;
     /**
      * State of the inline-notification.
      */
     state?: InlineNotificationState;
-    /**
-     * Adapts the inline-notification color depending on the theme.
-     */
-    theme?: Theme;
 } & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/inline-notification.wrapper.mjs

@@ -1,18 +1,18 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PInlineNotification = /*#__PURE__*/ forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, ...rest }, ref) => {
+const PInlineNotification = /*#__PURE__*/ forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, state = 'info', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'action', onAction);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, persistent, state, theme || useTheme()];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, state];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'headingTag', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'headingTag', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/input-date.wrapper.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, InputDateBlurEventDetail, InputDateChangeEventDetail, InputDateInputEventDetail, InputDateState, Theme } from '../types';
+import type { BreakpointCustomizable, InputDateBlurEventDetail, InputDateChangeEventDetail, InputDateInputEventDetail, InputDateState } from '../types';
 export type PInputDateProps = BaseProps & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., auto-complete='bday' for a birthday).
@@ -77,16 +77,12 @@ export type PInputDateProps = BaseProps & {
      * Defines the granularity of the date input. This value is given in days. The default is 1 (one day).
      */
     step?: number;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
      */
     value?: string;
 };
-export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
+export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., auto-complete='bday' for a birthday).
      */
@@ -163,10 +159,6 @@ export declare const PInputDate: import("react").ForwardRefExoticComponent<Omit<
      * Defines the granularity of the date input. This value is given in days. The default is 1 (one day).
      */
     step?: number;
-    /**
-     * Controls the visual appearance of the component.
-     */
-    theme?: Theme;
     /**
      * The default date value for the input, in YYYY-MM-DD format (e.g., value='2025-07-02').
      */