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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/switch.wrapper.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRSwitch } from '../dsr-components/switch.js';
+
+const PSwitch = /*#__PURE__*/ forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, stretch = false, tabbable = true, theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'switchChange', onSwitchChange);
+    const WebComponentTag = usePrefix('p-switch');
+    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, tabbable, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'tabbable', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRSwitch, { ...{ alignLabel, checked, disabled, hideLabel, loading, stretch, tabbable, theme, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PSwitch };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table-body.wrapper.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTableBody } from '../dsr-components/table-body.js';
+
+const PTableBody = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-table-body');
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                ...{ "role": "rowgroup" },
+                children: (jsx(DSRTableBody, { ...{ children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTableBody };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table-cell.wrapper.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTableCell } from '../dsr-components/table-cell.js';
+
+const PTableCell = /*#__PURE__*/ forwardRef(({ multiline = false, className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-table-cell');
+    useBrowserLayoutEffect(() => {
+        elementRef.current.multiline = multiline;
+    }, [multiline]);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                ...{ "role": "cell" },
+                children: (jsx(DSRTableCell, { ...{ multiline, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTableCell };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table-head-cell.wrapper.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTableHeadCell } from '../dsr-components/table-head-cell.js';
+
+const PTableHeadCell = /*#__PURE__*/ forwardRef(({ hideLabel = false, multiline = false, sort, className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-table-head-cell');
+    const propsToSync = [hideLabel, multiline, sort];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['hideLabel', 'multiline', 'sort'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                ...{ "scope": "col", "role": "columnheader" },
+                children: (jsx(DSRTableHeadCell, { ...{ hideLabel, multiline, sort, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTableHeadCell };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table-head-row.wrapper.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTableHeadRow } from '../dsr-components/table-head-row.js';
+
+const PTableHeadRow = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-table-head-row');
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                ...{ "role": "row" },
+                children: (jsx(DSRTableHeadRow, { ...{ children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTableHeadRow };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table-head.wrapper.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTableHead } from '../dsr-components/table-head.js';
+
+const PTableHead = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-table-head');
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                ...{ "role": "rowgroup" },
+                children: (jsx(DSRTableHead, { ...{ children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTableHead };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table-row.wrapper.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTableRow } from '../dsr-components/table-row.js';
+
+const PTableRow = /*#__PURE__*/ forwardRef(({ className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-table-row');
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                ...{ "role": "row" },
+                children: (jsx(DSRTableRow, { ...{ children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTableRow };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table.wrapper.js

@@ -0,0 +1,35 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTable } from '../dsr-components/table.js';
+
+const PTable = /*#__PURE__*/ forwardRef(({ caption, onSortingChange, className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'sortingChange', onSortingChange);
+    const WebComponentTag = usePrefix('p-table');
+    useBrowserLayoutEffect(() => {
+        elementRef.current.caption = caption;
+    }, [caption]);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRTable, { ...{ caption, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTable };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tabs-bar.wrapper.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTabsBar } from '../dsr-components/tabs-bar.js';
+
+const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'tabChange', onTabChange);
+    const WebComponentTag = usePrefix('p-tabs-bar');
+    const propsToSync = [activeTabIndex, gradientColorScheme, size, theme, weight];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['activeTabIndex', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRTabsBar, { ...{ activeTabIndex, gradientColorScheme, size, theme, weight, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTabsBar };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tabs-item.wrapper.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTabsItem } from '../dsr-components/tabs-item.js';
+
+const PTabsItem = /*#__PURE__*/ forwardRef((
+// @ts-ignore
+{ label, className, children, theme = 'light', ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-tabs-item');
+    useBrowserLayoutEffect(() => {
+        elementRef.current.label = label;
+    }, [label]);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRTabsItem, { ...{ label, theme, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTabsItem };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tabs.wrapper.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTabs } from '../dsr-components/tabs.js';
+
+const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, gradientColorScheme = 'default', onTabChange, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'tabChange', onTabChange);
+    const WebComponentTag = usePrefix('p-tabs');
+    const propsToSync = [activeTabIndex, gradientColorScheme, size, theme, weight];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['activeTabIndex', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRTabs, { ...{ activeTabIndex, gradientColorScheme, size, theme, weight, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTabs };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tag-dismissible.wrapper.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTagDismissible } from '../dsr-components/tag-dismissible.js';
+
+const PTagDismissible = /*#__PURE__*/ forwardRef(({ aria, color = 'background-surface', label, className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-tag-dismissible');
+    const propsToSync = [aria, color, label];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aria', 'color', 'label'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRTagDismissible, { ...{ aria, color, label, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTagDismissible };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tag.wrapper.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTag } from '../dsr-components/tag.js';
+
+const PTag = /*#__PURE__*/ forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-tag');
+    const propsToSync = [color, icon, iconSource, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['color', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRTag, { ...{ color, icon, iconSource, theme, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTag };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text-field-wrapper.wrapper.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTextFieldWrapper } from '../dsr-components/text-field-wrapper.js';
+
+const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount = true, state = 'none', unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'action', onAction);
+    const WebComponentTag = usePrefix('p-text-field-wrapper');
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, unit, unitPosition];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRTextFieldWrapper, { ...{ actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, state, unit, unitPosition, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTextFieldWrapper };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text-list-item.wrapper.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTextListItem } from '../dsr-components/text-list-item.js';
+
+const PTextListItem = /*#__PURE__*/ forwardRef((
+// @ts-ignore
+{ className, children, listType = 'unordered', orderType = 'numbered', ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-text-list-item');
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                ...{ "role": "listitem" },
+                children: (jsx(DSRTextListItem, { ...{ listType, orderType, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTextListItem };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text-list.wrapper.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTextList } from '../dsr-components/text-list.js';
+
+const PTextList = /*#__PURE__*/ forwardRef(({ listType = 'unordered', orderType = 'numbered', theme = 'light', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-text-list');
+    const propsToSync = [listType, orderType, theme];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['listType', 'orderType', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRTextList, { ...{ listType, orderType, theme, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTextList };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text.wrapper.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRText } from '../dsr-components/text.js';
+
+const PText = /*#__PURE__*/ forwardRef(({ align = 'left', color = 'default', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-text');
+    const propsToSync = [align, color, ellipsis, size, tag, theme, weight];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRText, { ...{ align, color, ellipsis, size, tag, theme, weight, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PText };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/textarea-wrapper.wrapper.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.js';
+import { syncRef } from '../../utils.js';
+import { DSRTextareaWrapper } from '../dsr-components/textarea-wrapper.js';
+
+const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount = true, state = 'none', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-textarea-wrapper');
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, state];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRTextareaWrapper, { ...{ description, hideLabel, label, message, showCharacterCount, state, children } })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PTextareaWrapper };