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

package/CHANGELOG.md

@@ -9,6 +9,423 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.0.0-alpha.1] - 2023-02-16
+
+#### Added
+
+- Porsche Next font supports Vietnamese charset
+- Prop `color` of `Icon` supports `disabled`
+- React: `patchRemixRunProcessBrowserGlobalIdentifier` binary to support SSR components with Remix
+
+#### Changed
+
+- `Stepper Horizontal` matches new design language.
+- Styles: Optimize design tokens "spacing", "typography" and "theme" provided by styles sub-package
+  `@porsche-design-system/components-{js|angular|react|vue}/styles`
+- Styles: Use calc() instead of max() to calculate padding for `gridStyle` (JS) and `pds-grid` (SCSS)
+- Styles: `gridStyle` (JS) and `pds-grid` (SCSS) uses optimized grid gap
+
+### [3.0.0-alpha.0] - 2023-02-08
+
+#### Note to the new `v3` major release of the Porsche Design System
+
+With the new **Porsche Design Language** comes a lot of changes regarding layout and design principles. To keep
+refactoring efforts as low as possible when upgrading from `v2` to `v3`, **breaking changes** were avoided as far as
+possible. Nevertheless, there are a few breaking changes and some more deprecations which should receive attention.
+
+#### 👹 Breaking Changes 👹
+
+##### Button:
+
+- Removed deprecated prop `tabbable`.
+
+```diff
+- <p-button tabbable="false">Some label</p-button>
++ <p-button tabindex="-1">Some label</p-button>
+```
+
+- Default value of prop `icon` has changed from `arrow-head-right` to `none`. Therefore, the `icon` property **must** be
+  set if the component has the `hide-label` property.
+
+```diff
+- <p-button hide-label="true">Some label</p-button>
++ <p-button hide-label="true" icon="arrow-right">Some label</p-button>
+
+- <p-button hide-label="{ base: true, m: false }">Some label</p-button>
++ <p-button hide-label="{ base: true, m: false }" icon="arrow-right">Some label</p-button>
+```
+
+##### Button Pure:
+
+- Removed `subline` slot (visually not intended anymore).
+
+```diff
+<p-button-pure>
+  Some label
+-   <p slot="subline">Some Subline</p>
+</p-button-pure>
+```
+
+- Removed deprecated prop `tabbable`.
+
+```diff
+- <p-button-pure tabbable="false">Some label</p-button-pure>
++ <p-button-pure tabindex="-1">Some label</p-button-pure>
+```
+
+##### Icon:
+
+- Value `inherit` for prop `color` works slightly different to the previous major version. A CSS filter is required to
+  apply custom coloring to take advantage of using an SVG embedded in an `<img/>` for better SSR support and loading
+  performance in general.
+
+```diff
+- <p-icon color="inherit" style="color: white;"></p-icon>
++ <p-icon color="inherit" style="filter: invert(100%);"></p-icon>
+```
+
+- Camel case syntax for `name` prop isn't supported, please use param case syntax instead (TypeScript typings have been
+  updated too).
+
+```diff
+- <p-icon name="arrowRight"></p-icon>
++ <p-icon name="arrow-right"></p-icon>
+```
+
+##### Link:
+
+- Default value of prop `icon` has changed from `arrow-head-right` to `none`. Therefore, the `icon` property **must** be
+  set if the component has the `hide-label` property.
+
+```diff
+- <p-link href="#" hide-label="true">Some label</p-link>
++ <p-link href="#" hide-label="true" icon="arrow-right">Some label</p-link>
+
+- <p-link href="#" hide-label="{ base: true, m: false }">Some label</p-link>
++ <p-link href="#" hide-label="{ base: true, m: false }" icon="arrow-right">Some label</p-link>
+```
+
+##### Link Pure:
+
+- Removed `subline` slot (visually not intended anymore).
+
+```diff
+<p-link-pure href="#">
+  Some label
+-   <p slot="subline">Some Subline</p>
+</p-link-pure>
+```
+
+##### Switch:
+
+- Removed deprecated prop `tabbable`.
+
+```diff
+- <p-switch tabbable="false">Some label</p-switch>
++ <p-switch tabindex="-1">Some label</p-switch>
+```
+
+##### Partials:
+
+- `getIconLinks()` partial accepts only param-cased icon names.
+
+```diff
+- require('@porsche-design-system/components-js/partials').getIconLinks({ icons: ['arrowRight'] })
+
++ require('@porsche-design-system/components-js/partials').getIconLinks({ icons: ['arrow-right'] })
+```
+
+##### CSS global scope:
+
+- Changed naming of CSS global variables names.
+
+```diff
+- --p-animation-duration__spinner
+- --p-animation-duration__banner
++ --p-animation-duration
+```
+
+#### 🤡 Component deprecations 🤡
+
+All deprecated components are refactored to match the new design language, therefor it's technically not breaking, but
+we highly recommend to migrate to the mentioned alternative, since those deprecated components will be removed with next
+major version.
+
+##### Content Wrapper:
+
+- Component is deprecated and will be removed with the next major release. Please use **[Porsche Grid](styles/grid)**
+  instead, which is based on [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) covering the specific
+  layout needs for a harmonic appearance across all digital Porsche touch-points.
+
+##### Flex:
+
+- Component is deprecated and will be removed with the next major release. In general, please use native
+  [CSS Flex](https://css-tricks.com/snippets/css/a-guide-to-flexbox) instead for better performance and more
+  standardized layout technique.
+
+##### Grid:
+
+- Component is deprecated and will be removed with the next major release. In general, please use native
+  [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) in combination with
+  **[Porsche Grid](styles/grid)** instead for better performance and more standardized layout technique.
+
+##### Headline:
+
+```diff
+- <p-headline>The quick brown fox jumps over the lazy dog</p-headline>
++ <p-heading>The quick brown fox jumps over the lazy dog</p-heading>
+```
+
+##### Link Social:
+
+- Component is deprecated and will be removed with the next major release. Please use the **[Link](components/link)**
+  component instead.
+
+#### 🤖 Property deprecations 🤖
+
+All deprecated properties are still present without any effect, therefor it's technically not breaking, but we highly
+recommend to migrate and remove the deprecated props since those ones will be removed with next major version.
+
+##### Button Pure:
+
+- Prop `weight` is deprecated, only regular font weight will be applied.
+
+```diff
+- <p-button-pure weight="thin">Some label</p-button-pure>
+- <p-button-pure weight="regular">Some label</p-button-pure>
+- <p-button-pure weight="semibold">Some label</p-button-pure>
+- <p-button-pure weight="bold">Some label</p-button-pure>
++ <p-button-pure>Some label</p-button-pure>
+```
+
+##### Content Wrapper (deprecated):
+
+- Prop `theme` and `background-color` are deprecated.
+
+```diff
+- <p-content-wrapper theme="dark" background-color="default">Some content</p-content-wrapper>
++ <p-content-wrapper>Some content</p-content-wrapper>
+```
+
+##### Grid (deprecated):
+
+- The `gutter` property is deprecated and has no effect anymore. Instead, a fluid gutter depending on the viewport width
+  is used.
+
+```diff
+- <p-grid gutter="16">Some content</p-grid>
+- <p-grid gutter="24">Some content</p-grid>
+- <p-grid gutter="36">Some content</p-grid>
++ <p-grid>Some content</p-grid>
+```
+
+##### Icon:
+
+- Prop `lazy` is deprecated.
+
+```diff
+- <p-icon lazy="true"></p-icon>
++ <p-icon></p-icon>
+```
+
+##### Link Pure:
+
+- Prop `weight` is deprecated, only regular font weight will be applied.
+
+```diff
+- <p-link-pure href="#" weight="thin">Some label</p-link-pure>
+- <p-link-pure href="#" weight="regular">Some label</p-link-pure>
+- <p-link-pure href="#" weight="semibold">Some label</p-link-pure>
+- <p-link-pure href="#" weight="bold">Some label</p-link-pure>
++ <p-link-pure href="#">Some label</p-link-pure>
+```
+
+##### Segmented Control:
+
+- Prop `background-color` is deprecated.
+
+```diff
+- <p-segmented-control background-color="background-surface">
+   <p-segmented-control-item value="xs">XS</p-segmented-control-item>
+   <p-segmented-control-item value="s">S</p-segmented-control-item>
+ </p-segmented-control>
++ <p-segmented-control>
+   <p-segmented-control-item value="xs">XS</p-segmented-control-item>
+   <p-segmented-control-item value="s">S</p-segmented-control-item>
+ </p-segmented-control>
+```
+
+#### 👾 Property value deprecations 👾
+
+All deprecated values are mapped to new ones, therefor it's technically not breaking, but we highly recommend to migrate
+to the new values since those ones will be removed with next major version.
+
+##### Banner:
+
+- Prop value `fluid` of `width` prop is deprecated.
+
+```diff
+- <p-banner width="fluid"></p-banner>
++ <p-banner></p-banner>
+```
+
+- Prop value `neutral` of `state` prop is deprecated.
+
+```diff
+- <p-banner state="neutral">
+  <span slot="title">Some banner title</span>
+  <span slot="description">Some banner description. You can also add inline <a href="https://porsche.com">links</a> to route to another page.</span>
+ </p-banner>
++ <p-banner state="info">
+  <span slot="title">Some banner title</span>
+  <span slot="description">Some banner description. You can also add inline <a href="https://porsche.com">links</a> to route to another page.</span>
+ </p-banner>
+```
+
+##### Content Wrapper:
+
+- Prop value `fluid` of `width` prop is deprecated.
+
+```diff
+- <p-content-wrapper width="fluid">Some content</p-content-wrapper>
++ <p-content-wrapper>Some content</p-content-wrapper>
+```
+
+##### Icon:
+
+- Prop values
+  `brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral` of
+  `color` prop are deprecated.
+
+```diff
+- <p-icon color="brand"></p-icon>
++ <p-icon color="primary"></p-icon>
+
+- <p-icon color="default"></p-icon>
++ <p-icon color="primary"></p-icon>
+
+- <p-icon color="neutral-contrast-low"></p-icon>
++ <p-icon color="contrast-low"></p-icon>
+
+- <p-icon color="neutral-contrast-medium"></p-icon>
++ <p-icon color="contrast-medium"></p-icon>
+
+- <p-icon color="neutral-contrast-high"></p-icon>
++ <p-icon color="contrast-high"></p-icon>
+
+- <p-icon color="neutral-contrast-neutral"></p-icon>
++ <p-icon color="contrast-info"></p-icon>
+```
+
+##### Inline Notification:
+
+- Prop value `neutral` of `state` prop is deprecated.
+
+```diff
+- <p-inline-notification state="neutral"></p-inline-notification>
++ <p-inline-notification state="info"></p-inline-notification>
+```
+
+##### Tag:
+
+- Prop value `notification-neutral | neutral-contrast-high | background-default` of `color` prop is deprecated.
+
+```diff
+- <p-tag color="notification-neutral">Color label</p-tag>
++ <p-tag color="notification-info">Color label</p-tag>
+
+- <p-tag color="neutral-contrast-high">Color label</p-tag>
++ <p-tag color="primary">Color label</p-tag>
+
+- <p-tag color="background-default">Color label</p-tag>
++ <p-tag color="background-base">Color label</p-tag>
+```
+
+##### Tag Dismissible:
+
+- Prop value `background-default` of `color` prop is deprecated.
+
+```diff
+- <p-tag-dismissible color="background-default">Color label</p-tag-dismissible>
++ <p-tag-dismissible color="background-base">Color label</p-tag-dismissible>
+```
+
+##### Text:
+
+- Prop value `thin | semibold` of `weight` prop is deprecated.
+
+```diff
+- <p-text weight="thin">Some text</p-text>
++ <p-text>Some text</p-text>
+
+- <p-text weight="semibold">Some text</p-text>
++ <p-text weight="semi-bold">Some text</p-text>
+```
+
+- Prop value
+  `brand | default | neutral-contrast-low | neutral-contrast-medium | neutral-contrast-high | notification-neutral` of
+  `color` prop is deprecated.
+
+```diff
+- <p-text color="brand">Some text</p-text>
++ <p-text>Some text</p-text>
+
+- <p-text color="default">Some text</p-text>
++ <p-text>Some text</p-text>
+
+- <p-text color="neutral-contrast-low">Some text</p-text>
++ <p-text color="contrast-low">Some text</p-text>
+
+- <p-text color="neutral-contrast-medium">Some text</p-text>
++ <p-text color="contrast-medium">Some text</p-text>
+
+- <p-text color="neutral-contrast-high">Some text</p-text>
++ <p-text color="contrast-high">Some text</p-text>
+
+- <p-text color="notification-neutral">Some text</p-text>
++ <p-text color="notification-info">Some text</p-text>
+```
+
+##### ToastManager:
+
+- Prop value `neutral` of `state` parameter is deprecated.
+
+```diff
+- …addMessage({ text: `Some message`, state: 'neutral' })
++ …addMessage({ text: `Some message`, state: 'info' })
+```
+
+#### Added
+
+- `Display` component
+- `Heading` component
+- Prop `underline` for `Link Pure`
+- Prop `theme` for `Checkbox Wrapper`, `Radio Button Wrapper`, `Popover`, `Tag Dismissible`, `Textarea Wrapper`,
+  `Text Field Wrapper` and `Fieldset Wrapper`
+- Prop `size` for `Icon` supports `x-small` and `x-large`
+- Prop `size` for `Accordion` `compact="true"` supports `medium`
+
+#### Changed
+
+- `Spinner`, `Icon`, `Link Pure`, `Button Pure`, `Link`, `Link Social`, `Button`, `Checkbox Wrapper`,
+  `Radio Button Wrapper`, `Popover`, `Modal`, `Select Wrapper`, `Tag`, `Tag Dismissible`, `Textarea Wrapper`,
+  `Inline Notification`, `Banner`, `Toast`, `Grid`, `Flex`, `Pagination`, `Scroller`, `Accordion`, `Text`,
+  `Text Field Wrapper`, `Content Wrapper`, `Segmented Control`, `Tabs`, `Tabs Bar`, `Headline` and `Fieldset Wrapper`
+  matches new design language.
+- `Icon` supports
+  `primary | contrast-low | contrast-medium | contrast-high | notification-success | notification-warning | notification-error | notification-info | inherit`
+  for `color` prop.
+- Default value of prop `width` of `Banner` has changed from `basic` to `extended`
+- Default value of prop `action-icon` of `Inline Notification` has changed from `arrow-head-right` to `arrow-right`
+- Default value of prop `name` of `Icon` has changed from `arrow-head-right` to `arrow-right`
+- Default value of prop `variant` of `Link` and `Button` has changed from `secondary` to `primary`
+
+#### Removed
+
+- Custom slotted CSS for mostly all components. Equivalent styles are now provided by `getInitialStyles()` partial
+  instead.
+- `applyNormalizeStyles` option from `getInitialStyles()` partial which is applied by default now.
+
 ### [2.20.0] - 2023-02-06
 
 ### [2.20.0-rc.1] - 2023-02-06
@@ -925,9 +1342,7 @@ supporting `:focus-visible` otherwise it will fallback to `:focus` CSS implement
 
 Color and outline of general focus styling has changed to `currentColor` for light/dark theme with an outline of 1px
 width/offset. If you have custom components build with the usage of our `@porsche-design-system/utilities` package then
-update it to the latest version (we also provide a focus
-[SCSS mixin](https://designsystem.porsche.com/latest/utilities/scss/functions) and
-[JS function](https://designsystem.porsche.com/latest/utilities/js/functions)).
+update it to the latest version.
 
 #### Improved geometry of Porsche Next font
 

package/bin/patchRemixRunProcessBrowserGlobalIdentifier.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+'use strict';
+
+var path = require('path');
+var fs = require('fs');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
+var fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
+
+const patchRemixRunProcessBrowserGlobalIdentifier = () => {
+    const packageEntry = require.resolve('@remix-run/dev');
+    const compilerDirPath = path__namespace.resolve(packageEntry, '../compiler');
+    const [fileName] = fs__namespace
+        .readdirSync(compilerDirPath)
+        // file is currently called compileBrowser.js, but the other part is compilerServer.js
+        // that's why we also consider compilerBrowser.js to be on the safe side
+        .filter((fileName) => fileName.match(/^compiler?Browser\.js$/));
+    const filePath = path__namespace.resolve(compilerDirPath, fileName);
+    const filePathBackup = filePath.replace(/\.js$/, '-original$&');
+    if (!fs__namespace.existsSync(filePathBackup)) {
+        fs__namespace.copyFileSync(filePath, filePathBackup);
+    }
+    else {
+        fs__namespace.copyFileSync(filePathBackup, filePath);
+    }
+    const fileContent = fs__namespace.readFileSync(filePath, 'utf8');
+    // prepending should be safer than appending because JSON.stringify() might be multiline like in source
+    // https://github.com/remix-run/remix/blob/05ffb6e2db8f2a0e09caffad6e9b3c897c34cb7d/packages/remix-dev/compiler/compileBrowser.ts#L159-L163
+    const newFileContent = fileContent.replace(/"process\.env\.REMIX_DEV_SERVER_WS_PORT": JSON\.stringify\(.*/, '"process.browser": "true",\n      $&');
+    const prettyFilePath = filePath.replace(packageEntry.substring(0, packageEntry.indexOf('/node_modules')), '.');
+    if (newFileContent.includes('"process.browser": "true"')) {
+        console.log(`Successfully patched ${prettyFilePath}`);
+    }
+    else {
+        console.error(`Patching ${prettyFilePath} failed`);
+    }
+    fs__namespace.writeFileSync(filePath, newFileContent);
+};
+patchRemixRunProcessBrowserGlobalIdentifier();
+
+exports.patchRemixRunProcessBrowserGlobalIdentifier = patchRemixRunProcessBrowserGlobalIdentifier;

package/esm/lib/components/accordion.wrapper.js

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PAccordion = /*#__PURE__*/ forwardRef(({ compact, heading, onAccordionChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
+const PAccordion = forwardRef(({ compact, heading, onAccordionChange, open, size = 'small', tag = 'h2', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'accordionChange', onAccordionChange);
     const WebComponentTag = usePrefix('p-accordion');

package/esm/lib/components/banner.wrapper.js

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PBanner = /*#__PURE__*/ forwardRef(({ onDismiss, persistent = false, state = 'neutral', theme = 'light', width = 'basic', className, ...rest }, ref) => {
+const PBanner = forwardRef(({ onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-banner');

package/esm/lib/components/button-group.wrapper.js

@@ -3,7 +3,7 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PButtonGroup = /*#__PURE__*/ forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
+const PButtonGroup = forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-button-group');
     useBrowserLayoutEffect(() => {

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

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PButtonPure = /*#__PURE__*/ 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 = 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 = useRef();
     const WebComponentTag = 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];
     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/esm/lib/components/button.wrapper.js

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PButton = /*#__PURE__*/ 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 = forwardRef(({ aria, disabled = false, hideLabel = false, icon = 'none', iconSource, loading = false, theme = 'light', type = 'submit', variant = 'primary', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = 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];
     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/esm/lib/components/carousel.wrapper.js

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

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

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PCheckboxWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
+const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, message, state];
+    const propsToSync = [hideLabel, label, message, state, theme];
     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/esm/lib/components/content-wrapper.wrapper.js

@@ -3,7 +3,8 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PContentWrapper = /*#__PURE__*/ 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 = forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-content-wrapper');
     const propsToSync = [backgroundColor, theme, width];

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

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

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

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

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

@@ -3,13 +3,13 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PFieldsetWrapper = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', className, ...rest }, ref) => {
+const PFieldsetWrapper = forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-fieldset-wrapper');
-    const propsToSync = [label, labelSize, message, required, state];
+    const propsToSync = [label, labelSize, message, required, state, theme];
     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/esm/lib/components/flex-item.wrapper.js

@@ -3,7 +3,8 @@ import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
 import { syncRef } from '../../utils.js';
 
-const PFlexItem = /*#__PURE__*/ 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 = forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-flex-item');
     const propsToSync = [alignSelf, flex, grow, offset, shrink, width];