@porsche-design-system/components-react 3.31.0 → 4.0.0-alpha.0

package/esm/lib/components/select-wrapper.wrapper.d.ts

@@ -1,81 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { SelectWrapperDropdownDirection, BreakpointCustomizable, SelectWrapperState, Theme } from '../types';
-export type PSelectWrapperProps = BaseProps & {
-    /**
-     * The description text.
-     */
-    description?: string;
-    /**
-     * Changes the direction to which the dropdown list appears.
-     */
-    dropdownDirection?: SelectWrapperDropdownDirection;
-    /**
-     * Filters select options by typing a character
-     */
-    filter?: boolean;
-    /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /**
-     * The label text.
-     */
-    label?: string;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * Forces rendering of native browser select dropdown
-     */
-    native?: boolean;
-    /**
-     * The validation state.
-     */
-    state?: SelectWrapperState;
-    /**
-     * Adapts the select color depending on the theme.
-     */
-    theme?: Theme;
-};
-/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-select` instead. */
-export declare const PSelectWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
-    /**
-     * The description text.
-     */
-    description?: string;
-    /**
-     * Changes the direction to which the dropdown list appears.
-     */
-    dropdownDirection?: SelectWrapperDropdownDirection;
-    /**
-     * Filters select options by typing a character
-     */
-    filter?: boolean;
-    /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /**
-     * The label text.
-     */
-    label?: string;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * Forces rendering of native browser select dropdown
-     */
-    native?: boolean;
-    /**
-     * The validation state.
-     */
-    state?: SelectWrapperState;
-    /**
-     * Adapts the select color depending on the theme.
-     */
-    theme?: Theme;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/select-wrapper.wrapper.mjs

@@ -1,25 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
-import { syncRef } from '../../utils.mjs';
-
-/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-select` instead. */
-const PSelectWrapper = /*#__PURE__*/ forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = useRef(undefined);
-    const WebComponentTag = usePrefix('p-select-wrapper');
-    const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme || useTheme()];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['description', 'dropdownDirection', 'filter', 'hideLabel', 'label', 'message', 'native', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsx(WebComponentTag, { ...props });
-});
-
-export { PSelectWrapper };

package/esm/lib/components/text-field-wrapper.wrapper.d.ts

@@ -1,129 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { TextFieldWrapperActionIcon, BreakpointCustomizable, TextFieldWrapperState, Theme, TextFieldWrapperUnitPosition } from '../types';
-export type PTextFieldWrapperProps = BaseProps & {
-    /**
-     * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
-     */
-    actionIcon?: TextFieldWrapperActionIcon;
-    /**
-     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
-     */
-    actionLoading?: boolean;
-    /**
-     * The description text.
-     */
-    description?: string;
-    /**
-     * Show or hide label and description text. For better accessibility it is recommended to show the label.
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /**
-     * The label text.
-     */
-    label?: string;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * Emitted when the action button is clicked.
-     */
-    onAction?: (event: CustomEvent<void>) => void;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
-     */
-    showCharacterCount?: boolean;
-    /**
-     * Show or hide max character count.
-     */
-    showCounter?: boolean;
-    /**
-     * @experimental Show or hide password toggle for `input type="password"`.
-     */
-    showPasswordToggle?: boolean;
-    /**
-     * The validation state.
-     */
-    state?: TextFieldWrapperState;
-    /**
-     * Show search button if wrapped inside a form.
-     */
-    submitButton?: boolean;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
-    /**
-     * The unit text.
-     */
-    unit?: string;
-    /**
-     * The unit position.
-     */
-    unitPosition?: TextFieldWrapperUnitPosition;
-};
-/** @deprecated since v3.29.0, will be removed with next major release. Please use one of the specific input components instead: `p-input-date`, `p-input-email`, `p-input-number`, `p-input-password`, `p-input-search`, `p-input-tel`, `p-input-text`, `p-input-time` or `p-input-url`. */
-export declare const PTextFieldWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
-    /**
-     * Action icon can be set to `locate` for `input type="search"` in order to display an action button.
-     */
-    actionIcon?: TextFieldWrapperActionIcon;
-    /**
-     * Disables the action button and shows a loading indicator. No events will be triggered while loading state is active.
-     */
-    actionLoading?: boolean;
-    /**
-     * The description text.
-     */
-    description?: string;
-    /**
-     * Show or hide label and description text. For better accessibility it is recommended to show the label.
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /**
-     * The label text.
-     */
-    label?: string;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * Emitted when the action button is clicked.
-     */
-    onAction?: (event: CustomEvent<void>) => void;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
-     */
-    showCharacterCount?: boolean;
-    /**
-     * Show or hide max character count.
-     */
-    showCounter?: boolean;
-    /**
-     * @experimental Show or hide password toggle for `input type="password"`.
-     */
-    showPasswordToggle?: boolean;
-    /**
-     * The validation state.
-     */
-    state?: TextFieldWrapperState;
-    /**
-     * Show search button if wrapped inside a form.
-     */
-    submitButton?: boolean;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
-    /**
-     * The unit text.
-     */
-    unit?: string;
-    /**
-     * The unit position.
-     */
-    unitPosition?: TextFieldWrapperUnitPosition;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/text-field-wrapper.wrapper.mjs

@@ -1,26 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
-import { syncRef } from '../../utils.mjs';
-
-/** @deprecated since v3.29.0, will be removed with next major release. Please use one of the specific input components instead: `p-input-date`, `p-input-email`, `p-input-number`, `p-input-password`, `p-input-search`, `p-input-tel`, `p-input-text`, `p-input-time` or `p-input-url`. */
-const PTextFieldWrapper = /*#__PURE__*/ forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', submitButton = true, theme, unit = '', unitPosition = 'prefix', className, ...rest }, ref) => {
-    const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'action', onAction);
-    const WebComponentTag = usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, submitButton, theme || useTheme(), unit, unitPosition];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'submitButton', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsx(WebComponentTag, { ...props });
-});
-
-export { PTextFieldWrapper };

package/esm/lib/components/textarea-wrapper.wrapper.d.ts

@@ -1,73 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, TextareaWrapperState, Theme } from '../types';
-export type PTextareaWrapperProps = BaseProps & {
-    /**
-     * The description text.
-     */
-    description?: string;
-    /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /**
-     * The label text.
-     */
-    label?: string;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
-     */
-    showCharacterCount?: boolean;
-    /**
-     * Show or hide max character count.
-     */
-    showCounter?: boolean;
-    /**
-     * The validation state.
-     */
-    state?: TextareaWrapperState;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
-};
-/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-textarea` instead. */
-export declare const PTextareaWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
-    /**
-     * The description text.
-     */
-    description?: string;
-    /**
-     * Show or hide label. For better accessibility it is recommended to show the label.
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /**
-     * The label text.
-     */
-    label?: string;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `showCounter` instead. Show or hide max character count.
-     */
-    showCharacterCount?: boolean;
-    /**
-     * Show or hide max character count.
-     */
-    showCounter?: boolean;
-    /**
-     * The validation state.
-     */
-    state?: TextareaWrapperState;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/textarea-wrapper.wrapper.mjs

@@ -1,25 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
-import { syncRef } from '../../utils.mjs';
-
-/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-textarea` instead. */
-const PTextareaWrapper = /*#__PURE__*/ forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = useRef(undefined);
-    const WebComponentTag = usePrefix('p-textarea-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme || useTheme()];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsx(WebComponentTag, { ...props });
-});
-
-export { PTextareaWrapper };

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/button-group.wrapper.cjs

@@ -1,35 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-var buttonGroup = require('../dsr-components/button-group.cjs');
-
-const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-button-group');
-    hooks.useBrowserLayoutEffect(() => {
-        elementRef.current.direction = direction;
-    }, [direction]);
-    const props = {
-        ...rest,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsxRuntime.jsx(buttonGroup.DSRButtonGroup, { direction, children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PButtonGroup = PButtonGroup;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox-wrapper.wrapper.cjs

@@ -1,38 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-var checkboxWrapper = require('../dsr-components/checkbox-wrapper.cjs');
-
-/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-checkbox` instead. */
-const PCheckboxWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, loading, message, state, theme || hooks.useTheme()];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsxRuntime.jsx(checkboxWrapper.DSRCheckboxWrapper, { hideLabel, label, loading, message, state, theme: theme || hooks.useTheme(), children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PCheckboxWrapper = PCheckboxWrapper;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/content-wrapper.wrapper.cjs

@@ -1,38 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-var contentWrapper = require('../dsr-components/content-wrapper.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PContentWrapper = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, children, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-content-wrapper');
-    const propsToSync = [backgroundColor, theme || hooks.useTheme(), width];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['backgroundColor', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsxRuntime.jsx(contentWrapper.DSRContentWrapper, { backgroundColor, theme: theme || hooks.useTheme(), width, children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PContentWrapper = PContentWrapper;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/fieldset-wrapper.wrapper.cjs

@@ -1,38 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-var fieldsetWrapper = require('../dsr-components/fieldset-wrapper.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Please use `p-fieldset` instead. */
-const PFieldsetWrapper = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-fieldset-wrapper');
-    const propsToSync = [label, labelSize, message, required, state, theme || hooks.useTheme()];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsxRuntime.jsx(fieldsetWrapper.DSRFieldsetWrapper, { label, labelSize, message, required, state, theme: theme || hooks.useTheme(), children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PFieldsetWrapper = PFieldsetWrapper;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/flex-item.wrapper.cjs

@@ -1,38 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-var flexItem = require('../dsr-components/flex-item.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-const PFlexItem = /*#__PURE__*/ react.forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, children, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-flex-item');
-    const propsToSync = [alignSelf, flex, grow, offset, shrink, width];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['alignSelf', 'flex', 'grow', 'offset', 'shrink', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsxRuntime.jsx(flexItem.DSRFlexItem, { alignSelf, flex, grow, offset, shrink, width, children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PFlexItem = PFlexItem;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/flex.wrapper.cjs

@@ -1,38 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-var flex = require('../dsr-components/flex.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-const PFlex = /*#__PURE__*/ react.forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, children, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-flex');
-    const propsToSync = [alignContent, alignItems, direction, inline, justifyContent, wrap];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['alignContent', 'alignItems', 'direction', 'inline', 'justifyContent', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsxRuntime.jsx(flex.DSRFlex, { alignContent, alignItems, direction, inline, justifyContent, wrap, children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PFlex = PFlex;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/grid-item.wrapper.cjs

@@ -1,38 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-var gridItem = require('../dsr-components/grid-item.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PGridItem = /*#__PURE__*/ react.forwardRef(({ offset = 0, size = 1, className, children, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-grid-item');
-    const propsToSync = [offset, size];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['offset', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsxRuntime.jsx(gridItem.DSRGridItem, { offset, size, children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PGridItem = PGridItem;