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

package/CHANGELOG.md

@@ -9,6 +9,27 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [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
 
 #### Added

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, 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, slidesPerPage, theme, wrapContent];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disablePagination', 'heading', 'intl', '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 };

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

package/esm/lib/components/marque.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 PMarque = /*#__PURE__*/ forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-marque');
+    const propsToSync = [aria, href, size, target, trademark];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'href', 'size', 'target', 'trademark'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PMarque };

package/esm/lib/components/modal.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 PModal = /*#__PURE__*/ forwardRef(({ aria, disableBackdropClick = false, disableCloseButton = false, fullscreen = false, heading, onClose, open = false, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'close', onClose);
+    const WebComponentTag = usePrefix('p-modal');
+    const propsToSync = [aria, disableBackdropClick, disableCloseButton, fullscreen, heading, open];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'disableBackdropClick', 'disableCloseButton', 'fullscreen', 'heading', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PModal };