@porsche-design-system/components-react 3.32.0 → 4.0.0-beta.0

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

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxUpdateEventDetail, CheckboxState, Theme } from '../types';
+import type { BreakpointCustomizable, CheckboxBlurEventDetail, CheckboxChangeEventDetail, CheckboxState } from '../types';
 export type PCheckboxProps = BaseProps & {
     /**
      * Reflects the checkbox current checked state and allows setting the initial checked state.
@@ -49,11 +49,6 @@ export type PCheckboxProps = BaseProps & {
      * Emitted when checkbox checked property is changed.
      */
     onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
-    /**
-     * Emitted when checkbox checked property is changed.
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
-     */
-    onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
     /**
      * Marks the checkbox as required.
      */
@@ -62,10 +57,6 @@ export type PCheckboxProps = BaseProps & {
      * The validation state.
      */
     state?: CheckboxState;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
      */
@@ -120,11 +111,6 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<i
      * Emitted when checkbox checked property is changed.
      */
     onChange?: (event: CustomEvent<CheckboxChangeEventDetail>) => void;
-    /**
-     * Emitted when checkbox checked property is changed.
-     * @deprecated since v3.30.0, will be removed with next major release, use `change` event instead.
-     */
-    onUpdate?: (event: CustomEvent<CheckboxUpdateEventDetail>) => void;
     /**
      * Marks the checkbox as required.
      */
@@ -133,10 +119,6 @@ export declare const PCheckbox: import("react").ForwardRefExoticComponent<Omit<i
      * The validation state.
      */
     state?: CheckboxState;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
     /**
      * The checkbox value. When a form is submitted, only a checkbox which is currently checked is included in the submission.
      */

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

@@ -1,19 +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 PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, onUpdate, required = false, state = 'none', theme, value = 'on', className, ...rest }, ref) => {
+const PCheckbox = /*#__PURE__*/ forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, required = false, state = 'none', value = 'on', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
-    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-checkbox');
-    const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['checked', 'compact', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['checked', 'compact', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,12 +1,12 @@
 import type { BaseProps } from '../../BaseProps';
-import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
+import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag } from '../types';
 export type PDisplayProps = BaseProps & {
     /**
      * Text alignment of the component.
      */
     align?: DisplayAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: DisplayColor;
     /**
@@ -21,10 +21,6 @@ export type PDisplayProps = BaseProps & {
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: DisplayTag;
-    /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
-     */
-    theme?: Theme;
 };
 export declare const PDisplay: 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"> & {
     /**
@@ -32,7 +28,7 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<im
      */
     align?: DisplayAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: DisplayColor;
     /**
@@ -47,10 +43,6 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<im
      * Sets a heading tag, so it fits correctly within the outline of the page.
      */
     tag?: DisplayTag;
-    /**
-     * 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/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,38 +1,22 @@
 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.
+     * Defines color.
      */
     color?: DividerColor;
     /**
      * 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Defines color depending on theme.
+     * Defines color.
      */
     color?: DividerColor;
     /**
      * 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.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,10 +21,6 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -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,10 +25,6 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -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/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,10 +41,6 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -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,12 +1,12 @@
 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.
      */
     align?: HeadingAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: HeadingColor;
     /**
@@ -21,10 +21,6 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -32,7 +28,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<im
      */
     align?: HeadingAlign;
     /**
-     * Basic text color variations depending on theme property.
+     * Basic text color variations.
      */
     color?: HeadingColor;
     /**
@@ -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,19 +1,14 @@
 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.
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
-     * Basic color variations depending on theme property.
+     * Basic color variations.
      */
     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,10 +21,6 @@ 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" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
@@ -37,14 +28,9 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<impor
      */
     aria?: SelectedAriaAttributes<IconAriaAttribute>;
     /**
-     * Basic color variations depending on theme property.
+     * Basic color variations.
      */
     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,15 +13,9 @@ 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';
@@ -40,11 +31,8 @@ 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';
@@ -53,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';
@@ -61,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';
@@ -80,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';