@porsche-design-system/components-react 2.17.0 → 2.18.0-rc.1

package/CHANGELOG.md

@@ -9,6 +9,36 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [2.18.0-rc.1] - 2022-11-24
+
+#### Added
+
+- `Carousel` now has a `rewind` property, better prev/next icons, a `max-width` for `heading` and `description` and
+  support for slotted `description`
+
+#### Fixed
+
+- `Select Wrapper` height if text is zoomed up to 200%
+
+### [2.18.0-rc.0] - 2022-11-17
+
+#### Added
+
+- SSR/SSG ready components using Declarative Shadow DOM for Next JS are shipped via
+  `@porsche-design-system/components-react/ssr`. To use it simply change your imports:
+
+```diff
+- import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react';
++ import { PorscheDesignSystemProvider, PButton, ... } from '@porsche-design-system/components-react/ssr';
+```
+
+#### Changed
+
+- Improve height calculation for `Accordion`
+- Slotted anchor support for `Link Pure` is stricter (In case slotted `<a>` is used it must be a direct child of
+  `Link Pure`)
+- `getFontLinks()` partial now has `{ weights: ['regular', 'semi-bold'] }` for a default
+
 ### [2.17.0] - 2022-10-31
 
 ### [2.17.0-rc.0] - 2022-10-31
@@ -241,9 +271,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - **[EXPERIMENTAL]** `getInitialStyles` partial now accepts a `skeletonTagNames` array of component names that will
   initially have skeleton styles while the Porsche Design System is loading
-- **[EXPERIMENTAL]** `Button`, `Button Pure`, `Checkbox Wrapper`, `Fieldset Wrapper`, `Link`, `Link Pure`, `Link Social`
-  , `Radio Button Wrapper`, `Select Wrapper`, `Text Field Wrapper`, `Textarea Wrapper` can now have initial skeleton
-  styles when passed as `skeletonTagNames` to the `getInitialStyles` partial
+- **[EXPERIMENTAL]** `Button`, `Button Pure`, `Checkbox Wrapper`, `Fieldset Wrapper`, `Link`, `Link Pure`,
+  `Link Social`, `Radio Button Wrapper`, `Select Wrapper`, `Text Field Wrapper`, `Textarea Wrapper` can now have initial
+  skeleton styles when passed as `skeletonTagNames` to the `getInitialStyles` partial
 
 ### [2.9.2] - 2022-03-24
 
@@ -296,12 +326,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 #### Added
 
 - `getFontFaceStylesheet` returns additional `<link>` tags with `rel="preconnect"` and `rel="dns-prefetch"`
-- Option `format` to partials `getFontFaceStylesheet`, `getComponentChunkLinks()`, `getFontLinks()`, `getIconLinks()` ,
+- Option `format` to partials `getFontFaceStylesheet`, `getComponentChunkLinks()`, `getFontLinks()`, `getIconLinks()`,
   `getInitialStyles()`, `getLoaderScript()` and `getMetaTagsAndIconLinks()`
 
 #### Deprecated
 
-- The option `withoutTags` of partials `getFontFaceStylesheet`, `getComponentChunkLinks()`, `getFontLinks()` ,
+- The option `withoutTags` of partials `getFontFaceStylesheet`, `getComponentChunkLinks()`, `getFontLinks()`,
   `getIconLinks()`, `getInitialStyles()`, `getLoaderScript()` and `getMetaTagsAndIconLinks()` is deprecated and will be
   removed in `v3.0.0`. Please use `format: 'jsx'` instead.
 
@@ -462,8 +492,8 @@ color contrast and might even be removed in an upcoming major release again.
 
 #### Added
 
-- New `aria` property for `ARIA` attribute handling for: `Button`, `Button Pure`, `Icon`, `Link`, `Link Pure`, `Marque`
-  , `Spinner`
+- New `aria` property for `ARIA` attribute handling for: `Button`, `Button Pure`, `Icon`, `Link`, `Link Pure`, `Marque`,
+  `Spinner`
 
 #### Fixed
 
@@ -745,7 +775,7 @@ intranet applications).
 In case of a micro-frontend architecture, multiple instances and versions of the Porsche Design System can be combined
 in a final application by configurable prefixing technique of the Porsche Design System components during runtime.
 Please refer to our framework specific guidelines
-[Vanilla JS](https://designsystem.porsche.com/latest/start-coding/vanilla-js) ,
+[Vanilla JS](https://designsystem.porsche.com/latest/start-coding/vanilla-js),
 [Angular](https://designsystem.porsche.com/latest/start-coding/angular) and
 [React](https://designsystem.porsche.com/latest/start-coding/react).
 
@@ -981,8 +1011,8 @@ For advanced usage please [read further](https://designsystem.porsche.com/latest
 #### Added
 
 - `Grid` now has a `wrap` and `gutter` property
-- Components (`Grid Item`, `Flex Item`, `Tabs Item` and `Text List Item`) that require a specific parent (`Grid`, `Flex`
-  , `Tabs` and `Text List`) will now throw an error if used without that parent
+- Components (`Grid Item`, `Flex Item`, `Tabs Item` and `Text List Item`) that require a specific parent (`Grid`,
+  `Flex`, `Tabs` and `Text List`) will now throw an error if used without that parent
 
 #### Fixed
 
@@ -1372,7 +1402,7 @@ For advanced usage please [read further](https://designsystem.porsche.com/latest
 #### Added
 
 - `Fieldset Wrapper` component
-- Improved SEO of `p-headline` and `p-text`: Added possibility to write semantic HTML tags (e.g. `<h1>-<h6>` or `<p>` ,
+- Improved SEO of `p-headline` and `p-text`: Added possibility to write semantic HTML tags (e.g. `<h1>-<h6>` or `<p>`,
   `<blockquote>`, etc.) directly as slotted content.
 - Possibility to include anchor tags directly as slots of `Link`, `Link Pure` and `Link Social`
 - `Text` new `weight` property `semibold`

package/esm/hooks.js

@@ -0,0 +1,62 @@
+import { useContext, useEffect, useRef, useMemo, useLayoutEffect } from 'react';
+import { PorscheDesignSystemContext } from './provider.js';
+import { getMergedClassName } from './utils.js';
+
+let skipCheck = false;
+/**
+ * sets a flag that skips the need for `PorscheDesignSystemProvider` during testing
+ * when `process.env.NODE_ENV === 'test'`
+ */
+const skipCheckForPorscheDesignSystemProviderDuringTests = () => {
+    skipCheck = true;
+};
+const usePrefix =  (tagName) => {
+    if (process.env.NODE_ENV === 'test' && skipCheck) {
+        return tagName;
+    }
+    else {
+        const { prefix } = useContext(PorscheDesignSystemContext); // eslint-disable-line react-hooks/rules-of-hooks
+        if (prefix === undefined) {
+            throw new Error('It appears the <PorscheDesignSystemProvider /> is missing. Make sure to wrap your App in it.');
+        }
+        return prefix ? prefix + '-' + tagName : tagName;
+    }
+};
+const useEventCallback =  (ref, eventName, eventHandler) => {
+    useEffect(() => {
+        const { current } = ref;
+        if (current && eventHandler) {
+            current.addEventListener(eventName, eventHandler);
+            return () => current === null || current === void 0 ? void 0 : current.removeEventListener(eventName, eventHandler);
+        }
+    }, [eventHandler]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+const useMergedClass =  (ref, className) => {
+    const prevComponentClassName = useRef();
+    return useMemo(() => {
+        if (!className) {
+            return undefined;
+        }
+        const { current } = ref;
+        let newClassName = className;
+        if (current) {
+            newClassName = getMergedClassName(current.className, prevComponentClassName.current, className);
+            // the jsx does not override className when the attribute changes
+            current.className = newClassName;
+        }
+        prevComponentClassName.current = className;
+        return newClassName;
+    }, [className]); // eslint-disable-line react-hooks/exhaustive-deps
+};
+const useBrowserLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const useToastManager = () => {
+    const tagName = usePrefix('p-toast');
+    return {
+        addMessage: (message) => {
+            const toast = document.querySelector(tagName);
+            customElements.whenDefined(tagName).then(() => toast.addMessage(message));
+        },
+    };
+};
+
+export { skipCheckForPorscheDesignSystemProviderDuringTests, useBrowserLayoutEffect, useEventCallback, useMergedClass, usePrefix, useToastManager };

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

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+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 elementRef = useRef();
+    useEventCallback(elementRef, 'accordionChange', onAccordionChange);
+    const WebComponentTag = usePrefix('p-accordion');
+    const propsToSync = [compact, heading, open, size, tag, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['compact', 'heading', 'open', '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 { PAccordion };

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

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+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 elementRef = useRef();
+    useEventCallback(elementRef, 'dismiss', onDismiss);
+    const WebComponentTag = usePrefix('p-banner');
+    const propsToSync = [persistent, state, theme, width];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PBanner };

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

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+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 elementRef = useRef();
+    const WebComponentTag = usePrefix('p-button-group');
+    useBrowserLayoutEffect(() => {
+        elementRef.current.direction = direction;
+    }, [direction]);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PButtonGroup };

package/esm/lib/components/button-pure.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 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 elementRef = useRef();
+    const WebComponentTag = usePrefix('p-button-pure');
+    const propsToSync = [active, alignLabel, aria, disabled, hideLabel, icon, iconSource, loading, size, stretch, tabbable, 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]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PButtonPure };

package/esm/lib/components/button.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 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 elementRef = useRef();
+    const WebComponentTag = usePrefix('p-button');
+    const propsToSync = [aria, disabled, hideLabel, icon, iconSource, loading, tabbable, theme, type, variant];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'disabled', 'hideLabel', 'icon', 'iconSource', 'loading', 'tabbable', 'theme', 'type', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PButton };

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

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+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 elementRef = useRef();
+    useEventCallback(elementRef, 'carouselChange', onCarouselChange);
+    const WebComponentTag = usePrefix('p-carousel');
+    const propsToSync = [description, disablePagination, heading, intl, rewind, slidesPerPage, theme, wrapContent];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disablePagination', 'heading', 'intl', 'rewind', 'slidesPerPage', 'theme', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PCarousel };

package/esm/lib/components/checkbox-wrapper.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 PCheckboxWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-checkbox-wrapper');
+    const propsToSync = [hideLabel, label, message, state];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['hideLabel', 'label', 'message', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PCheckboxWrapper };

package/esm/lib/components/content-wrapper.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 PContentWrapper = /*#__PURE__*/ forwardRef(({ backgroundColor = 'transparent', theme = 'light', width = 'basic', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-content-wrapper');
+    const propsToSync = [backgroundColor, theme, width];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['backgroundColor', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PContentWrapper };

package/esm/lib/components/divider.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 PDivider = /*#__PURE__*/ 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];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['color', 'orientation', '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 { PDivider };

package/esm/lib/components/fieldset-wrapper.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 PFieldsetWrapper = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-fieldset-wrapper');
+    const propsToSync = [label, labelSize, message, required, state];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['label', 'labelSize', 'message', 'required', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PFieldsetWrapper };

package/esm/lib/components/flex-item.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 PFlexItem = /*#__PURE__*/ 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];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['alignSelf', 'flex', 'grow', 'offset', 'shrink', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PFlexItem };

package/esm/lib/components/flex.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 PFlex = /*#__PURE__*/ forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-flex');
+    const propsToSync = [alignContent, alignItems, direction, inline, justifyContent, wrap];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['alignContent', 'alignItems', 'direction', 'inline', 'justifyContent', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PFlex };

package/esm/lib/components/grid-item.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 PGridItem = /*#__PURE__*/ forwardRef(({ offset = 0, size = 1, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-grid-item');
+    const propsToSync = [offset, size];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['offset', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PGridItem };

package/esm/lib/components/grid.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 PGrid = /*#__PURE__*/ forwardRef(({ direction = 'row', gutter = { base: 16, s: 24, m: 36 }, wrap = 'wrap', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-grid');
+    const propsToSync = [direction, gutter, wrap];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['direction', 'gutter', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PGrid };

package/esm/lib/components/headline.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 PHeadline = /*#__PURE__*/ forwardRef(({ align = 'left', color = 'default', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-headline');
+    const propsToSync = [align, color, ellipsis, tag, theme, variant];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'color', 'ellipsis', 'tag', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PHeadline };

package/esm/lib/components/icon.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 PIcon = /*#__PURE__*/ forwardRef(({ aria, color = 'default', lazy = false, name = 'arrow-head-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-icon');
+    const propsToSync = [aria, color, lazy, name, size, source, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'color', 'lazy', 'name', 'size', 'source', '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 { PIcon };

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

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+
+const PInlineNotification = /*#__PURE__*/ forwardRef(({ actionIcon = 'arrow-head-right', actionLabel, actionLoading = false, description = '', heading = '', onAction, onDismiss, persistent = false, state = 'neutral', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'action', onAction);
+    useEventCallback(elementRef, 'dismiss', onDismiss);
+    const WebComponentTag = usePrefix('p-inline-notification');
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, heading, persistent, state, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'heading', 'persistent', 'state', '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 { PInlineNotification };

package/esm/lib/components/link-pure.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 PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'right', aria, download, hideLabel = false, href, icon = 'arrow-head-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-link-pure');
+    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, weight];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLinkPure };

package/esm/lib/components/link-social.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 PLinkSocial = /*#__PURE__*/ forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-link-social');
+    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', '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 { PLinkSocial };

package/esm/lib/components/link-tile.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 PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semibold', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-link-tile');
+    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PLinkTile };