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

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/legacy-label.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-
-const LegacyLabel = ({ hasLabel, hasDescription, 
-// host,
-label, description, isLoading, isDisabled,
-// formElement,
- }) => {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("label", { className: "label", id: utilsEntry.labelId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: hasLabel && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: label || jsxRuntime.jsx("slot", { name: "label" }) })) }), hasDescription && (jsxRuntime.jsx("span", { className: "label", id: utilsEntry.descriptionId, "aria-disabled": isLoading || isDisabled ? 'true' : null, children: description || jsxRuntime.jsx("slot", { name: "description" }) }))] }));
-};
-
-exports.LegacyLabel = LegacyLabel;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-social.cjs

@@ -1,30 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
-var splitChildren = require('../../splitChildren.cjs');
-var minifyCss = require('../../minifyCss.cjs');
-var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var icon_wrapper = require('../components/icon.wrapper.cjs');
-
-/**
- * @slot {"name": "", "description": "Default slot to render the link label." }
- *
- * @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead.
- */
-class DSRLinkSocial extends react.Component {
-    host;
-    render() {
-        splitChildren.splitChildren(this.props.children);
-        const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss.minifyCss(stylesEntry.getLinkCss(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(TagType, { className: "root", ...(TagType === 'a' && {
-                                href: this.props.href,
-                                target: this.props.target,
-                                rel: this.props.rel,
-                            }), children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, theme: this.props.theme, "aria-hidden": "true" }), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] })] }), this.props.children] }));
-    }
-}
-
-exports.DSRLinkSocial = DSRLinkSocial;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-tile-model-signature.cjs

@@ -1,44 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
-var splitChildren = require('../../splitChildren.cjs');
-var minifyCss = require('../../minifyCss.cjs');
-var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var modelSignature_wrapper = require('../components/model-signature.wrapper.cjs');
-
-/**
- * @slot {"name": "header", "description": "Renders a header section above the content area." }
- * @slot {"name": "", "description": "Default slot for the img or picture tag." }
- * @slot {"name": "primary", "description": "Renders the primary link. Has to be a p-link tag.", "isRequired": true, "allowedTagNames": ["p-link"] }
- * @slot {"name": "secondary", "description": "Renders the secondary link. Has to be a p-link tag.", "isRequired": true, "allowedTagNames": ["p-link"] }
- */
-class DSRLinkTileModelSignature extends react.Component {
-    host;
-    render() {
-        const { children, namedSlotChildren} = splitChildren.splitChildren(this.props.children);
-        // If we do this earlier than render, there are cases where primaryLink.href is undefined
-        // TODO: Here and in other components, validation happens only on initial render. We could extend this to watch props of the required slots.
-        const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && namedSlotChildren.includes(child)
-            ? { ...child, props: { ...child.props, theme: 'dark', variant: child.props.slot } }
-            : child);
-        const primaryLink = manipulatedChildren.find((child) => typeof child === 'object' && 'props' in child && child.props.variant === 'primary');
-        const linkEl = primaryLink.props.href
-            ? primaryLink.props
-            : (Array.isArray(primaryLink.props.children) ? primaryLink.props.children : [primaryLink.props.children]).find((child) => child.type === 'a' || child.props.href || child.props.to // href and to check is for framework links
-            ).props; // support for slotted a tag within p-link
-        const overlayLinkProps = {
-            href: linkEl.href || linkEl.to,
-            target: linkEl.target || '_self',
-            download: linkEl.download || null,
-            rel: linkEl.rel || null,
-            tabIndex: -1,
-            'aria-hidden': 'true',
-        };
-        const style = minifyCss.minifyCss(stylesEntry.getLinkTileModelSignatureCss(this.props.aspectRatio, this.props.weight, this.props.linkDirection, !!this.props.description));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx("a", { ...overlayLinkProps }), jsxRuntime.jsxs("div", { className: "header", children: [jsxRuntime.jsx(modelSignature_wrapper.PModelSignature, { theme: "dark", model: this.props.model }), jsxRuntime.jsx("slot", { name: "header" })] }), jsxRuntime.jsx("div", { className: "media", children: jsxRuntime.jsx("slot", {}) }), jsxRuntime.jsxs("div", { className: "footer", children: [jsxRuntime.jsx(this.props.headingTag, { children: this.props.heading }), this.props.description && jsxRuntime.jsx("p", { children: this.props.description }), jsxRuntime.jsxs("div", { className: "link-group", role: "group", children: [jsxRuntime.jsx("slot", { name: "primary" }), jsxRuntime.jsx("slot", { name: "secondary" })] })] })] })] }), manipulatedChildren] }));
-    }
-}
-
-exports.DSRLinkTileModelSignature = DSRLinkTileModelSignature;

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

@@ -1,31 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var minifyCss = require('../../minifyCss.cjs');
-var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-wordmark" instead. */
-class DSRMarque extends react.Component {
-    host;
-    render() {
-        const innerManifest = utilsEntry.getInnerManifest(this.props.variant, this.props.trademark);
-        const mediumMedia = `(min-width: ${'1300'}px)`;
-        const picture = (jsxRuntime.jsxs("picture", { children: [this.props.size === 'responsive'
-                    ? [
-                        jsxRuntime.jsx("source", { srcSet: utilsEntry.buildSrcSet(innerManifest, 'medium', 'webp'), media: mediumMedia, type: "image/webp" }, "medium-webp"),
-                        jsxRuntime.jsx("source", { srcSet: utilsEntry.buildSrcSet(innerManifest, 'medium', 'png'), media: mediumMedia, type: "image/png" }, "medium-png"),
-                        jsxRuntime.jsx("source", { srcSet: utilsEntry.buildSrcSet(innerManifest, 'small', 'webp'), type: "image/webp" }, "small-webp"),
-                        jsxRuntime.jsx("source", { srcSet: utilsEntry.buildSrcSet(innerManifest, 'small', 'png'), type: "image/png" }, "small-png"),
-                    ]
-                    : [
-                        jsxRuntime.jsx("source", { srcSet: utilsEntry.buildSrcSet(innerManifest, this.props.size, 'webp'), type: "image/webp" }, "webp"),
-                        jsxRuntime.jsx("source", { srcSet: utilsEntry.buildSrcSet(innerManifest, this.props.size, 'png'), type: "image/png" }, "png"),
-                    ], jsxRuntime.jsx("img", { src: utilsEntry.buildImgSrc(innerManifest), alt: "Porsche" })] }));
-        const style = minifyCss.minifyCss(stylesEntry.getMarqueCss(this.props.size));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.href === undefined ? (picture) : (jsxRuntime.jsx("a", { href: this.props.href, target: this.props.target, ...utilsEntry.parseAndGetAriaAttributes(this.props.aria), children: picture })) })] }) }));
-    }
-}
-
-exports.DSRMarque = DSRMarque;

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

@@ -1,34 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
-var splitChildren = require('../../splitChildren.cjs');
-var minifyCss = require('../../minifyCss.cjs');
-var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var loadingMessage = require('./loading-message.cjs');
-var stateMessage = require('./state-message.cjs');
-var legacyLabel = require('./legacy-label.cjs');
-var spinner_wrapper = require('../components/spinner.wrapper.cjs');
-
-/**
- * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- * @slot {"name": "", "description": "Default slot for the input." }
- * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- *
- * @deprecated since v3.30.0, will be removed with next major release. Please use `p-radio-group` instead.
- */
-class DSRRadioButtonWrapper extends react.Component {
-    host;
-    initialLoading = false;
-    input;
-    render() {
-        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const isLoading = this.props.loading && !(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && (otherChildren[0]?.props.checked || otherChildren[0]?.props.defaultChecked)); // spinner is only displayed when radio is not checked already
-        const style = minifyCss.minifyCss(stylesEntry.getRadioButtonWrapperCss(this.props.hideLabel, this.props.state, disabled, isLoading, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(legacyLabel.LegacyLabel, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, isLoading: isLoading, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), isLoading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: isLoading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
-    }
-}
-
-exports.DSRRadioButtonWrapper = DSRRadioButtonWrapper;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper-dropdown.cjs

@@ -1,41 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
-var minifyCss = require('../../minifyCss.cjs');
-var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-
-class DSRSelectWrapperDropdown extends react.Component {
-    host;
-    isOpen = this.props.isOpenOverride;
-    optionMaps = [];
-    searchString = '';
-    inputOrButtonElement;
-    popoverElement;
-    hasNativePopoverSupport = utilsEntry.getHasNativePopoverSupport();
-    cleanUpAutoUpdate;
-    get selectedIndex() {
-        return 0;
-    }
-    render() {
-        // TODO: part won't be needed as soon as button/input of select-wrapper-dropdown is part of shadow dom of select-wrapper itself
-        const part = 'select-wrapper-dropdown';
-        const inputId = 'filter';
-        this.props.description && 'description';
-        const buttonId = 'value';
-        const style = minifyCss.minifyCss(stylesEntry.getSelectWrapperDropdownCss(this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.theme));
-        return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: this.props.filter ? ([
-                            jsxRuntime.jsx("input", { id: inputId, type: "text", role: "combobox", disabled: this.props.disabled, placeholder: utilsEntry.getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
-                            /* biome-ignore lint/a11y/noStaticElementInteractions: ok */
-                            jsxRuntime.jsx("span", { 
-                                /* @ts-ignore */
-                                part: part }, "span"),
-                        ]) : (jsxRuntime.jsx("button", { 
-                            /* @ts-ignore */
-                            part: part, type: "button", role: "combobox", id: buttonId, disabled: this.props.disabled })) })] }) }));
-    }
-}
-
-exports.DSRSelectWrapperDropdown = DSRSelectWrapperDropdown;

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

@@ -1,36 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-require('../../provider.cjs');
-var splitChildren = require('../../splitChildren.cjs');
-var minifyCss = require('../../minifyCss.cjs');
-var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var stateMessage = require('./state-message.cjs');
-var legacyLabel = require('./legacy-label.cjs');
-var icon_wrapper = require('../components/icon.wrapper.cjs');
-var selectWrapperDropdown_wrapper = require('../components/select-wrapper-dropdown.wrapper.cjs');
-
-/**
- * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- * @slot {"name": "", "description": "Default slot for the `select` tag." }
- * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- *
- * @deprecated since v3.29.0, will be removed with next major release. Please use `p-select` instead.
- */
-class DSRSelectWrapper extends react.Component {
-    host;
-    select;
-    iconElement;
-    render() {
-        const hasCustomDropdown = utilsEntry.isCustomDropdown(this.props.filter, this.props.native);
-        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss.minifyCss(stylesEntry.getSelectWrapperCss(disabled, hasCustomDropdown, this.props.hideLabel, this.props.state, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(legacyLabel.LegacyLabel, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), hasCustomDropdown && !disabled && (jsxRuntime.jsx(selectWrapperDropdown_wrapper.PSelectWrapperDropdown, { className: "dropdown", selectRef: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, label: this.props.label || namedSlotChildren.find(({ props: { slot } }) => slot === 'label')?.props.children, message: this.props.message || namedSlotChildren.find(({ props: { slot } }) => slot === 'message')?.props.children, description: this.props.description || namedSlotChildren.find(({ props: { slot } }) => slot === 'description')?.props.children, state: this.props.state, direction: this.props.dropdownDirection, filter: this.props.filter, theme: this.props.theme, required: false, disabled: disabled, onOpenChange: (isOpen) => this.props.iconElement.classList.toggle('icon--open', isOpen) }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
-    }
-}
-
-exports.DSRSelectWrapper = DSRSelectWrapper;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.cjs

@@ -1,67 +0,0 @@
-'use strict';
-
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-require('../../provider.cjs');
-var splitChildren = require('../../splitChildren.cjs');
-var minifyCss = require('../../minifyCss.cjs');
-var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.cjs');
-var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
-var stateMessage = require('./state-message.cjs');
-var legacyLabel = require('./legacy-label.cjs');
-var icon_wrapper = require('../components/icon.wrapper.cjs');
-
-/**
- * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- * @slot {"name": "", "description": "Default slot for the input." }
- * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- *
- * @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`.
- */
-class DSRTextFieldWrapper extends react.Component {
-    host;
-    showPassword = false;
-    isClearable = false;
-    input;
-    unitOrCounterElement;
-    ariaElement;
-    isSearch;
-    isPassword;
-    isCalendar;
-    isTime;
-    isWithinForm;
-    hasAction;
-    hasCounter;
-    isCounterVisible;
-    hasUnit;
-    eventListener;
-    render() {
-        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const { readOnly, disabled, type } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const disabledOrReadOnly = disabled || readOnly;
-        const buttonProps = {
-            hideLabel: true,
-            theme: this.props.theme,
-            className: 'button',
-        };
-        const isSearch = utilsEntry.isType(type, 'search');
-        const isPassword = utilsEntry.isType(type, 'password');
-        const isCalendar = utilsEntry.isType(type, 'date') || utilsEntry.isType(type, 'week') || utilsEntry.isType(type, 'month');
-        const isTime = utilsEntry.isType(type, 'time');
-        utilsEntry.isWithinForm(this.props.host);
-        const hasAction = utilsEntry.hasLocateAction(this.props.actionIcon);
-        const isClearable = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && !!otherChildren[0]?.props.value;
-        const hasCounter = false; // hasCounterAndIsTypeText(otherChildren[0]?.props);
-        const style = minifyCss.minifyCss(stylesEntry.getTextFieldWrapperCss(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.isCounterVisible, this.props.isCounterVisible ? 'suffix' : this.props.unitPosition, isPassword ? 'password' : type, this.props.showPasswordToggle, this.props.isWithinForm, this.props.submitButton, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(legacyLabel.LegacyLabel, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), hasCounter, (this.props.isCounterVisible) && (jsxRuntime.jsx("span", { className: "unit-counter", "aria-hidden": "true", children: this.props.unit })), isPassword && this.props.showPasswordToggle ? (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { ...buttonProps, type: "button", icon: this.props.showPassword ? 'view-off' : 'view', disabled: disabled, aria: { 'aria-pressed': this.props.showPassword ? 'true' : 'false' }, children: "Toggle password visibility" })) : utilsEntry.showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsxRuntime.jsxs(buttonPure_wrapper.PButtonPure, { ...buttonProps, type: "button", icon: isCalendar ? 'calendar' : 'clock', disabled: disabled, children: ["Show $", isCalendar ? 'date' : 'time', " picker"] })) : (isSearch && [
-                                            // TODO: create an own component, which would fix SSR support too
-                                            this.props.isWithinForm && this.props.submitButton ? (react.createElement(buttonPure_wrapper.PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
-                                            react.createElement(buttonPure_wrapper.PButtonPure, { ...buttonProps, key: "btn-clear", type: "button", icon: "close", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly }, "Clear field"),
-                                            hasAction && (react.createElement(buttonPure_wrapper.PButtonPure, { ...buttonProps, key: "btn-action", type: "button", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, loading: this.props.actionLoading }, "Locate me")),
-                                        ])] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
-    }
-}
-
-exports.DSRTextFieldWrapper = DSRTextFieldWrapper;

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

@@ -1,34 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var splitChildren = require('../../splitChildren.cjs');
-var react = require('react');
-var minifyCss = require('../../minifyCss.cjs');
-var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.cjs');
-var legacyLabel = require('./legacy-label.cjs');
-var stateMessage = require('./state-message.cjs');
-
-/**
- * @slot {"name": "label", "description": "Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- * @slot {"name": "description", "description": "Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- * @slot {"name": "", "description": "Default slot for the textarea." }
- * @slot {"name": "message", "description": "Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed." }
- *
- * @deprecated since v3.29.0, will be removed with next major release. Please use `p-textarea` instead.
- */
-class DSRTextareaWrapper extends react.Component {
-    host;
-    textarea;
-    counterElement;
-    ariaElement;
-    hasCounter;
-    eventListener;
-    render() {
-        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
-        const { disabled, readOnly } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss.minifyCss(stylesEntry.getTextareaWrapperCss(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(legacyLabel.LegacyLabel, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, description: this.props.description, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), this.props.hasCounter && jsxRuntime.jsx("span", { className: "counter", "aria-hidden": "true" }), this.props.hasCounter && jsxRuntime.jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));
-    }
-}
-
-exports.DSRTextareaWrapper = DSRTextareaWrapper;

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

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

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

@@ -1,36 +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';
-import { DSRCheckboxWrapper } from '../dsr-components/checkbox-wrapper.mjs';
-
-/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-checkbox` instead. */
-const PCheckboxWrapper = /*#__PURE__*/ forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef(undefined);
-    const WebComponentTag = usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, loading, message, state, theme || useTheme()];
-    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: (jsx(DSRCheckboxWrapper, { hideLabel, label, loading, message, state, theme: theme || useTheme(), children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsx(WebComponentTag, { ...props });
-});
-
-export { PCheckboxWrapper };

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

@@ -1,36 +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';
-import { DSRContentWrapper } from '../dsr-components/content-wrapper.mjs';
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PContentWrapper = /*#__PURE__*/ forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, children, ...rest }, ref) => {
-    const elementRef = useRef(undefined);
-    const WebComponentTag = usePrefix('p-content-wrapper');
-    const propsToSync = [backgroundColor, theme || useTheme(), width];
-    useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['backgroundColor', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsx(DSRContentWrapper, { backgroundColor, theme: theme || useTheme(), width, children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsx(WebComponentTag, { ...props });
-});
-
-export { PContentWrapper };

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

@@ -1,36 +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';
-import { DSRFieldsetWrapper } from '../dsr-components/fieldset-wrapper.mjs';
-
-/** @deprecated since v3.0.0, will be removed with next major release. Please use `p-fieldset` instead. */
-const PFieldsetWrapper = /*#__PURE__*/ forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, children, ...rest }, ref) => {
-    const elementRef = useRef(undefined);
-    const WebComponentTag = usePrefix('p-fieldset-wrapper');
-    const propsToSync = [label, labelSize, message, required, state, theme || useTheme()];
-    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: (jsx(DSRFieldsetWrapper, { label, labelSize, message, required, state, theme: theme || useTheme(), children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsx(WebComponentTag, { ...props });
-});
-
-export { PFieldsetWrapper };

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

@@ -1,36 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
-import { syncRef } from '../../utils.mjs';
-import { DSRFlexItem } from '../dsr-components/flex-item.mjs';
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-const PFlexItem = /*#__PURE__*/ forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, children, ...rest }, ref) => {
-    const elementRef = useRef(undefined);
-    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,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsx(DSRFlexItem, { alignSelf, flex, grow, offset, shrink, width, children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsx(WebComponentTag, { ...props });
-});
-
-export { PFlexItem };

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

@@ -1,36 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
-import { syncRef } from '../../utils.mjs';
-import { DSRFlex } from '../dsr-components/flex.mjs';
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-const PFlex = /*#__PURE__*/ forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, children, ...rest }, ref) => {
-    const elementRef = useRef(undefined);
-    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,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsx(DSRFlex, { alignContent, alignItems, direction, inline, justifyContent, wrap, children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsx(WebComponentTag, { ...props });
-});
-
-export { PFlex };

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

@@ -1,36 +0,0 @@
-"use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
-import { syncRef } from '../../utils.mjs';
-import { DSRGridItem } from '../dsr-components/grid-item.mjs';
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PGridItem = /*#__PURE__*/ forwardRef(({ offset = 0, size = 1, className, children, ...rest }, ref) => {
-    const elementRef = useRef(undefined);
-    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,
-        // @ts-ignore
-        ...(!process.browser
-            ? {
-                children: (jsx(DSRGridItem, { offset, size, children })),
-            }
-            : {
-                children,
-                suppressHydrationWarning: true,
-            }),
-        'data-ssr': '',
-        class: useMergedClass(elementRef, className),
-        ref: syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsx(WebComponentTag, { ...props });
-});
-
-export { PGridItem };