@porsche-design-system/components-react 2.20.0 → 3.0.0-alpha.0

package/lib/components/button-pure.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, ButtonAriaAttributes, LinkButtonPureIconName, TextSize, ThemeExtendedElectricDark, ButtonType, TextWeight } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, ButtonAriaAttribute, LinkButtonIconName, TextSize, Theme, ButtonType, TextWeight } from '../types';
 export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Display button in active state.
@@ -12,7 +12,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonAriaAttributes>;
+    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -24,7 +24,7 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown.
      */
-    icon?: LinkButtonPureIconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -41,21 +41,17 @@ export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Stretches the area between icon and label to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
     /**
      * Specifies the type of the button.
      */
     type?: ButtonType;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     weight?: TextWeight;
 };
@@ -71,7 +67,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonAriaAttributes>;
+    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -83,7 +79,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * The icon shown.
      */
-    icon?: LinkButtonPureIconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -100,21 +96,17 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
      * Stretches the area between icon and label to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
     /**
      * Specifies the type of the button.
      */
     type?: ButtonType;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     weight?: TextWeight;
 } & {

package/lib/components/button-pure.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PButtonPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'right', aria, disabled = false, hideLabel = false, icon = 'arrow-head-right', iconSource, loading = false, size = 'small', stretch = false, tabbable = true, theme = 'light', type = 'submit', weight = 'regular', className, ...rest }, ref) => {
+const PButtonPure = react.forwardRef(({ active = false, alignLabel = 'right', aria, disabled = false, hideLabel = false, icon = 'arrow-right', iconSource, loading = false, size = 'small', stretch = false, theme = 'light', type = 'submit', weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button-pure');
-    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, size, stretch, tabbable, theme, type, weight];
+    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, size, stretch, theme, type, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'size', 'stretch', 'tabbable', 'theme', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'size', 'stretch', 'theme', 'type', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

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

@@ -1,10 +1,10 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, ButtonAriaAttributes, BreakpointCustomizable, IconName, ThemeExtendedElectric, ButtonType, ButtonVariant } from '../types';
+import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, LinkButtonIconName, Theme, ButtonType, ButtonVariant } from '../types';
 export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonAriaAttributes>;
+    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -14,9 +14,9 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -25,15 +25,10 @@ export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * Specifies the type of the button.
      */
@@ -47,7 +42,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonAriaAttributes>;
+    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
@@ -57,9 +52,9 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -68,15 +63,10 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
     loading?: boolean;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * Specifies the type of the button.
      */

package/lib/components/button.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PButton = /*#__PURE__*/ react.forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'arrow-head-right', iconSource, loading = false, tabbable = true, theme = 'light', type = 'submit', variant = 'secondary', className, ...rest }, ref) => {
+const PButton = react.forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, theme = 'light', type = 'submit', variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-button');
-    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, tabbable, theme, type, variant];
+    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, theme, type, variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'tabbable', 'theme', 'type', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'theme', 'type', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/carousel.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCarousel = /*#__PURE__*/ react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ description, disablePagination = false, heading, intl = {}, onCarouselChange, rewind = true, slidesPerPage = 1, theme = 'light', wrapContent, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     const WebComponentTag = hooks.usePrefix('p-carousel');

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, FormState } from '../types';
+import type { BreakpointCustomizable, FormState, Theme } from '../types';
 export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
@@ -17,6 +17,10 @@ export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
 };
 export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -35,6 +39,10 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/checkbox-wrapper.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PCheckboxWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
+const PCheckboxWrapper = react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, message, state];
+    const propsToSync = [hideLabel, label, message, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['hideLabel', 'label', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/content-wrapper.wrapper.d.ts

@@ -2,11 +2,13 @@ import { HTMLAttributes } from 'react';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
 export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
-     * Defines the background color.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     backgroundColor?: ContentWrapperBackgroundColor;
     /**
-     * Adapts the color when used on dark background.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     theme?: Theme;
     /**
@@ -14,13 +16,16 @@ export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     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<Omit<HTMLAttributes<{}>, "color"> & {
     /**
-     * Defines the background color.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     backgroundColor?: ContentWrapperBackgroundColor;
     /**
-     * Adapts the color when used on dark background.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     theme?: Theme;
     /**

package/lib/components/content-wrapper.wrapper.js

@@ -5,7 +5,8 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PContentWrapper = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
+const PContentWrapper = react.forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-content-wrapper');
     const propsToSync = [backgroundColor, theme, width];

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

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { DisplayAlign, DisplayColor, BreakpointCustomizable, DisplaySize, DisplayTag, Theme } from '../types';
+export type PDisplayProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: DisplayAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: DisplayColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    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<DisplaySize>;
+    /**
+     * Sets a custom HTML tag depending on the usage of the display component.
+     */
+    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<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: DisplayAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: DisplayColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    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<DisplaySize>;
+    /**
+     * Sets a custom HTML tag depending on the usage of the display component.
+     */
+    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;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/display.wrapper.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PDisplay = react.forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'large', tag, theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-display');
+    const propsToSync = [align, color, ellipsis, size, tag, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PDisplay = PDisplay;

package/lib/components/divider.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PDivider = /*#__PURE__*/ react.forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
+const PDivider = react.forwardRef(({ color = 'neutral-contrast-low', orientation = 'horizontal', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-divider');
     const propsToSync = [color, orientation, theme];

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { FieldsetWrapperLabelSize, FormState } from '../types';
+import type { FieldsetWrapperLabelSize, FormState, Theme } from '../types';
 export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The label text.
@@ -21,6 +21,10 @@ export type PFieldsetWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
 };
 export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -43,6 +47,10 @@ export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts color depending on theme.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/fieldset-wrapper.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PFieldsetWrapper = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', className, ...rest }, ref) => {
+const PFieldsetWrapper = react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-fieldset-wrapper');
-    const propsToSync = [label, labelSize, message, required, state];
+    const propsToSync = [label, labelSize, message, required, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['label', 'labelSize', 'message', 'required', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/flex-item.wrapper.d.ts

@@ -26,6 +26,7 @@ export type PFlexItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     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<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * 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.

package/lib/components/flex-item.wrapper.js

@@ -5,7 +5,8 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PFlexItem = /*#__PURE__*/ react.forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, ...rest }, ref) => {
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
+const PFlexItem = react.forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-flex-item');
     const propsToSync = [alignSelf, flex, grow, offset, shrink, width];

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

@@ -26,6 +26,7 @@ export type PFlexProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     wrap?: BreakpointCustomizable<FlexWrap>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
 export declare const PFlex: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.

package/lib/components/flex.wrapper.js

@@ -5,7 +5,8 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PFlex = /*#__PURE__*/ react.forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, ...rest }, ref) => {
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
+const PFlex = react.forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-flex');
     const propsToSync = [alignContent, alignItems, direction, inline, justifyContent, wrap];

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

@@ -10,6 +10,7 @@ export type PGridItemProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     size?: BreakpointCustomizable<GridItemSize>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PGridItem: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * The offset of the column. Can be between 0 and 11. Also defines the offset of the column for specific breakpoints, like {base: 6, l: 3}. You always need to provide a base value when doing this.

package/lib/components/grid-item.wrapper.js

@@ -5,7 +5,8 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PGridItem = /*#__PURE__*/ react.forwardRef(({ offset = 0, size = 1, className, ...rest }, ref) => {
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
+const PGridItem = react.forwardRef(({ offset = 0, size = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-grid-item');
     const propsToSync = [offset, size];

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

@@ -6,7 +6,8 @@ export type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     direction?: BreakpointCustomizable<GridDirection>;
     /**
-     * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     gutter?: BreakpointCustomizable<GridGutter>;
     /**
@@ -14,13 +15,15 @@ export type PGridProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     wrap?: BreakpointCustomizable<GridWrap>;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
 export declare const PGrid: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right. Also defines the direction for specific breakpoints, like {base: "column", l: "row"}. You always need to provide a base value when doing this.
      */
     direction?: BreakpointCustomizable<GridDirection>;
     /**
-     * Defines the gutter size for specific breakpoints. You always need to provide a base value when doing this.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     gutter?: BreakpointCustomizable<GridGutter>;
     /**

package/lib/components/grid.wrapper.js

@@ -5,7 +5,8 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PGrid = /*#__PURE__*/ react.forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, ...rest }, ref) => {
+/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
+const PGrid = react.forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-grid');
     const propsToSync = [direction, gutter, wrap];

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

@@ -0,0 +1,56 @@
+import { HTMLAttributes } from 'react';
+import type { HeadingAlign, HeadingColor, BreakpointCustomizable, HeadingSize, HeadingTag, Theme } from '../types';
+export type PHeadingProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: HeadingAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: HeadingColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<HeadingSize>;
+    /**
+     * Sets a custom HTML tag depending on the usage of the heading component.
+     */
+    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<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Text alignment of the component.
+     */
+    align?: HeadingAlign;
+    /**
+     * Basic text color variations depending on theme property.
+     */
+    color?: HeadingColor;
+    /**
+     * Adds an ellipsis to a single line of text if it overflows.
+     */
+    ellipsis?: boolean;
+    /**
+     * Size of the component. Also defines the size for specific breakpoints, like {base: "small", l: "medium"}. You always need to provide a base value when doing this.
+     */
+    size?: BreakpointCustomizable<HeadingSize>;
+    /**
+     * Sets a custom HTML tag depending on the usage of the heading component.
+     */
+    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;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/heading.wrapper.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.js');
+var utils = require('../../utils.js');
+
+const PHeading = react.forwardRef(({ align = 'left', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme = 'light', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    const WebComponentTag = hooks.usePrefix('p-heading');
+    const propsToSync = [align, color, ellipsis, size, tag, theme];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PHeading = PHeading;