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

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

@@ -1,28 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
-import { splitChildren } from '../../splitChildren.mjs';
-import { minifyCss } from '../../minifyCss.mjs';
-import { getLinkCss as getComponentCss$M } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { PIcon } from '../components/icon.wrapper.mjs';
-
-/**
- * @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 Component {
-    host;
-    render() {
-        splitChildren(this.props.children);
-        const TagType = this.props.href === undefined ? 'span' : 'a';
-        const style = minifyCss(getComponentCss$M(this.props.icon, this.props.iconSource, 'primary', this.props.hideLabel, !this.props.href, this.props.compact, this.props.theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(TagType, { className: "root", ...(TagType === 'a' && {
-                                href: this.props.href,
-                                target: this.props.target,
-                                rel: this.props.rel,
-                            }), children: [jsx(PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, theme: this.props.theme, "aria-hidden": "true" }), jsx("span", { className: "label", children: jsx("slot", {}) })] })] }), this.props.children] }));
-    }
-}
-
-export { DSRLinkSocial };

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

@@ -1,42 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
-import { splitChildren } from '../../splitChildren.mjs';
-import { minifyCss } from '../../minifyCss.mjs';
-import { getLinkTileModelSignatureCss as getComponentCss$L } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { PModelSignature } from '../components/model-signature.wrapper.mjs';
-
-/**
- * @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 Component {
-    host;
-    render() {
-        const { children, namedSlotChildren} = 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(getComponentCss$L(this.props.aspectRatio, this.props.weight, this.props.linkDirection, !!this.props.description));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("a", { ...overlayLinkProps }), jsxs("div", { className: "header", children: [jsx(PModelSignature, { theme: "dark", model: this.props.model }), jsx("slot", { name: "header" })] }), jsx("div", { className: "media", children: jsx("slot", {}) }), jsxs("div", { className: "footer", children: [jsx(this.props.headingTag, { children: this.props.heading }), this.props.description && jsx("p", { children: this.props.description }), jsxs("div", { className: "link-group", role: "group", children: [jsx("slot", { name: "primary" }), jsx("slot", { name: "secondary" })] })] })] })] }), manipulatedChildren] }));
-    }
-}
-
-export { DSRLinkTileModelSignature };

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

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

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

@@ -1,32 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
-import { splitChildren } from '../../splitChildren.mjs';
-import { minifyCss } from '../../minifyCss.mjs';
-import { getRadioButtonWrapperCss as getComponentCss$z } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { LoadingMessage } from './loading-message.mjs';
-import { StateMessage } from './state-message.mjs';
-import { LegacyLabel } from './legacy-label.mjs';
-import { PSpinner } from '../components/spinner.wrapper.mjs';
-
-/**
- * @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 Component {
-    host;
-    initialLoading = false;
-    input;
-    render() {
-        const { namedSlotChildren, otherChildren } = 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(getComponentCss$z(this.props.hideLabel, this.props.state, disabled, isLoading, this.props.theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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 }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), isLoading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsx(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 }), jsx(LoadingMessage, { loading: isLoading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
-    }
-}
-
-export { DSRRadioButtonWrapper };

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

@@ -1,39 +0,0 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
-import { minifyCss } from '../../minifyCss.mjs';
-import { getSelectWrapperDropdownCss as getComponentCss$t } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getHasNativePopoverSupport, getSelectedOptionMap } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-
-class DSRSelectWrapperDropdown extends Component {
-    host;
-    isOpen = this.props.isOpenOverride;
-    optionMaps = [];
-    searchString = '';
-    inputOrButtonElement;
-    popoverElement;
-    hasNativePopoverSupport = 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(getComponentCss$t(this.isOpen, this.props.state, this.props.disabled, this.props.filter, this.props.theme));
-        return (jsx(Fragment, { children: jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: this.props.filter ? ([
-                            jsx("input", { id: inputId, type: "text", role: "combobox", disabled: this.props.disabled, placeholder: getSelectedOptionMap(this.optionMaps)?.value || null, autoComplete: "off", defaultValue: this.searchString }, "input"),
-                            /* biome-ignore lint/a11y/noStaticElementInteractions: ok */
-                            jsx("span", { 
-                                /* @ts-ignore */
-                                part: part }, "span"),
-                        ]) : (jsx("button", { 
-                            /* @ts-ignore */
-                            part: part, type: "button", role: "combobox", id: buttonId, disabled: this.props.disabled })) })] }) }));
-    }
-}
-
-export { DSRSelectWrapperDropdown };

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

@@ -1,34 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Component } from 'react';
-import '../../provider.mjs';
-import { splitChildren } from '../../splitChildren.mjs';
-import { minifyCss } from '../../minifyCss.mjs';
-import { getSelectWrapperCss as getComponentCss$s } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { isCustomDropdown } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { StateMessage } from './state-message.mjs';
-import { LegacyLabel } from './legacy-label.mjs';
-import { PIcon } from '../components/icon.wrapper.mjs';
-import { PSelectWrapperDropdown } from '../components/select-wrapper-dropdown.wrapper.mjs';
-
-/**
- * @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 Component {
-    host;
-    select;
-    iconElement;
-    render() {
-        const hasCustomDropdown = isCustomDropdown(this.props.filter, this.props.native);
-        const { namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss(getComponentCss$s(disabled, hasCustomDropdown, this.props.hideLabel, this.props.state, this.props.theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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 }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), jsx(PIcon, { className: "icon", name: "arrow-head-down", theme: this.props.theme, color: disabled ? 'state-disabled' : 'primary', "aria-hidden": "true" }), hasCustomDropdown && !disabled && (jsx(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) }))] }), jsx(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] }));
-    }
-}
-
-export { DSRSelectWrapper };

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

@@ -1,65 +0,0 @@
-import { Component, createElement } from 'react';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import '../../provider.mjs';
-import { splitChildren } from '../../splitChildren.mjs';
-import { minifyCss } from '../../minifyCss.mjs';
-import { getTextFieldWrapperCss as getComponentCss$8 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { isWithinForm, hasLocateAction, isType, showCustomCalendarOrTimeIndicator } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
-import { PButtonPure } from '../components/button-pure.wrapper.mjs';
-import { StateMessage } from './state-message.mjs';
-import { LegacyLabel } from './legacy-label.mjs';
-import { PIcon } from '../components/icon.wrapper.mjs';
-
-/**
- * @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 Component {
-    host;
-    showPassword = false;
-    isClearable = false;
-    input;
-    unitOrCounterElement;
-    ariaElement;
-    isSearch;
-    isPassword;
-    isCalendar;
-    isTime;
-    isWithinForm;
-    hasAction;
-    hasCounter;
-    isCounterVisible;
-    hasUnit;
-    eventListener;
-    render() {
-        const { namedSlotChildren, otherChildren } = 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 = isType(type, 'search');
-        const isPassword = isType(type, 'password');
-        const isCalendar = isType(type, 'date') || isType(type, 'week') || isType(type, 'month');
-        const isTime = isType(type, 'time');
-        isWithinForm(this.props.host);
-        const hasAction = 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(getComponentCss$8(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 (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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 }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), hasCounter, (this.props.isCounterVisible) && (jsx("span", { className: "unit-counter", "aria-hidden": "true", children: this.props.unit })), isPassword && this.props.showPasswordToggle ? (jsx(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" })) : showCustomCalendarOrTimeIndicator(isCalendar, isTime) ? (jsxs(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 ? (createElement(PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsx(PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
-                                            createElement(PButtonPure, { ...buttonProps, key: "btn-clear", type: "button", icon: "close", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly }, "Clear field"),
-                                            hasAction && (createElement(PButtonPure, { ...buttonProps, key: "btn-action", type: "button", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, loading: this.props.actionLoading }, "Locate me")),
-                                        ])] }), jsx(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] }));
-    }
-}
-
-export { DSRTextFieldWrapper };

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

@@ -1,32 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { splitChildren } from '../../splitChildren.mjs';
-import { Component } from 'react';
-import { minifyCss } from '../../minifyCss.mjs';
-import { getTextareaWrapperCss as getComponentCss$4 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { LegacyLabel } from './legacy-label.mjs';
-import { StateMessage } from './state-message.mjs';
-
-/**
- * @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 Component {
-    host;
-    textarea;
-    counterElement;
-    ariaElement;
-    hasCounter;
-    eventListener;
-    render() {
-        const { namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const { disabled, readOnly } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
-        const style = minifyCss(getComponentCss$4(disabled, readOnly, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx(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 }), jsxs("div", { className: "wrapper", children: [jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), jsx(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] }));
-    }
-}
-
-export { DSRTextareaWrapper };

package/ssr/esm/lib/components/button-group.wrapper.d.ts

@@ -1,16 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
-export type PButtonGroupProps = BaseProps & {
-    /**
-     * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
-     */
-    direction?: BreakpointCustomizable<ButtonGroupDirection>;
-};
-export declare const PButtonGroup: 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"> & {
-    /**
-     * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
-     */
-    direction?: BreakpointCustomizable<ButtonGroupDirection>;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -1,57 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
-export type PCheckboxWrapperProps = BaseProps & {
-    /**
-     * Show or hide label. For better accessibility it's recommended to show the label.
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /**
-     * The label text.
-     */
-    label?: string;
-    /**
-     * @experimental Disables the checkbox and shows a loading indicator.
-     */
-    loading?: boolean;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * The validation state.
-     */
-    state?: CheckboxWrapperState;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
-};
-/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-checkbox` instead. */
-export declare const PCheckboxWrapper: 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"> & {
-    /**
-     * Show or hide label. For better accessibility it's recommended to show the label.
-     */
-    hideLabel?: BreakpointCustomizable<boolean>;
-    /**
-     * The label text.
-     */
-    label?: string;
-    /**
-     * @experimental Disables the checkbox and shows a loading indicator.
-     */
-    loading?: boolean;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * The validation state.
-     */
-    state?: CheckboxWrapperState;
-    /**
-     * Adapts the color depending on the theme.
-     */
-    theme?: Theme;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/content-wrapper.wrapper.d.ts

@@ -1,37 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
-export type PContentWrapperProps = BaseProps & {
-    /**
-     * Has no effect anymore
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    backgroundColor?: ContentWrapperBackgroundColor;
-    /**
-     * Has no effect anymore
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    theme?: Theme;
-    /**
-     * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
-     */
-    width?: ContentWrapperWidth;
-};
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-export declare const PContentWrapper: 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"> & {
-    /**
-     * Has no effect anymore
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    backgroundColor?: ContentWrapperBackgroundColor;
-    /**
-     * Has no effect anymore
-     * @deprecated since v3.0.0, will be removed with next major release
-     */
-    theme?: Theme;
-    /**
-     * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
-     */
-    width?: ContentWrapperWidth;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -1,57 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { FieldsetWrapperLabelSize, FieldsetWrapperState, Theme } from '../types';
-export type PFieldsetWrapperProps = BaseProps & {
-    /**
-     * The label text.
-     */
-    label?: string;
-    /**
-     * The size of the label text.
-     */
-    labelSize?: FieldsetWrapperLabelSize;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * Marks the Fieldset as required.
-     */
-    required?: boolean;
-    /**
-     * The validation state.
-     */
-    state?: FieldsetWrapperState;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
-};
-/** @deprecated since v3.0.0, will be removed with next major release. Please use `p-fieldset` instead. */
-export declare const PFieldsetWrapper: 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 label text.
-     */
-    label?: string;
-    /**
-     * The size of the label text.
-     */
-    labelSize?: FieldsetWrapperLabelSize;
-    /**
-     * The message styled depending on validation state.
-     */
-    message?: string;
-    /**
-     * Marks the Fieldset as required.
-     */
-    required?: boolean;
-    /**
-     * The validation state.
-     */
-    state?: FieldsetWrapperState;
-    /**
-     * Adapts color depending on theme.
-     */
-    theme?: Theme;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/flex-item.wrapper.d.ts

@@ -1,57 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, FlexItemAlignSelf, FlexItemFlex, FlexItemGrow, FlexItemOffset, FlexItemShrink, FlexItemWidth } from '../types';
-export type PFlexItemProps = BaseProps & {
-    /**
-     * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
-     */
-    alignSelf?: BreakpointCustomizable<FlexItemAlignSelf>;
-    /**
-     * The shorthand property for the combined definition of "shrink", "grow" and "basis"
-     */
-    flex?: BreakpointCustomizable<FlexItemFlex>;
-    /**
-     * The ability to allow/disallow the flex child to grow.
-     */
-    grow?: BreakpointCustomizable<FlexItemGrow>;
-    /**
-     * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
-     */
-    offset?: BreakpointCustomizable<FlexItemOffset>;
-    /**
-     * The ability to allow/disallow the flex child to shrink.
-     */
-    shrink?: BreakpointCustomizable<FlexItemShrink>;
-    /**
-     * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
-     */
-    width?: BreakpointCustomizable<FlexItemWidth>;
-};
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare const PFlexItem: 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"> & {
-    /**
-     * Defines how this flex item is aligned along the cross axis. This overwrites the cross axis alignment set by the container. Corresponds to the "alignSelf" css property.
-     */
-    alignSelf?: BreakpointCustomizable<FlexItemAlignSelf>;
-    /**
-     * The shorthand property for the combined definition of "shrink", "grow" and "basis"
-     */
-    flex?: BreakpointCustomizable<FlexItemFlex>;
-    /**
-     * The ability to allow/disallow the flex child to grow.
-     */
-    grow?: BreakpointCustomizable<FlexItemGrow>;
-    /**
-     * The offset of the column. You can also supply values for specific breakpoints, like {base: "none", l: "one-quarter"}. You always need to provide a base value when doing this.
-     */
-    offset?: BreakpointCustomizable<FlexItemOffset>;
-    /**
-     * The ability to allow/disallow the flex child to shrink.
-     */
-    shrink?: BreakpointCustomizable<FlexItemShrink>;
-    /**
-     * The width of the flex item. You can also supply values for specific breakpoints, like {base: "full", l: "one-quarter"}. You always need to provide a base value when doing this.
-     */
-    width?: BreakpointCustomizable<FlexItemWidth>;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;

package/ssr/esm/lib/components/flex.wrapper.d.ts

@@ -1,57 +0,0 @@
-import type { BaseProps } from '../../BaseProps';
-import type { BreakpointCustomizable, FlexAlignContent, FlexAlignItems, FlexDirection, FlexInline, FlexJustifyContent, FlexWrap } from '../types';
-export type PFlexProps = BaseProps & {
-    /**
-     * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
-     */
-    alignContent?: BreakpointCustomizable<FlexAlignContent>;
-    /**
-     * Defines how the flex items are aligned along the cross axis.
-     */
-    alignItems?: BreakpointCustomizable<FlexAlignItems>;
-    /**
-     * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
-     */
-    direction?: BreakpointCustomizable<FlexDirection>;
-    /**
-     * Defines the flex containers content flow if 2 or more containers are siblings of each other.
-     */
-    inline?: BreakpointCustomizable<FlexInline>;
-    /**
-     * Defines how the flex items are aligned along the main axis.
-     */
-    justifyContent?: BreakpointCustomizable<FlexJustifyContent>;
-    /**
-     * Handles wrapping behaviour of elements.
-     */
-    wrap?: BreakpointCustomizable<FlexWrap>;
-};
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-export declare const PFlex: 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"> & {
-    /**
-     * This aligns a flex container's individual lines when there is extra space in the cross-axis, similar to how "justifyContent" aligns individual items along the main axis.
-     */
-    alignContent?: BreakpointCustomizable<FlexAlignContent>;
-    /**
-     * Defines how the flex items are aligned along the cross axis.
-     */
-    alignItems?: BreakpointCustomizable<FlexAlignItems>;
-    /**
-     * Defines the direction of the main and cross axis. The default "row" defines the main axis as horizontal left to right.
-     */
-    direction?: BreakpointCustomizable<FlexDirection>;
-    /**
-     * Defines the flex containers content flow if 2 or more containers are siblings of each other.
-     */
-    inline?: BreakpointCustomizable<FlexInline>;
-    /**
-     * Defines how the flex items are aligned along the main axis.
-     */
-    justifyContent?: BreakpointCustomizable<FlexJustifyContent>;
-    /**
-     * Handles wrapping behaviour of elements.
-     */
-    wrap?: BreakpointCustomizable<FlexWrap>;
-} & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLElement>>;