@porsche-design-system/components-react 3.32.0 → 4.0.0-beta.0

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

@@ -1,27 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRInputText } from '../dsr-components/input-text.mjs';
 
-const PInputText = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, spellCheck, state = 'none', theme, value = '', className, children, ...rest }, ref) => {
+const PInputText = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, counter = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, spellCheck, state = 'none', value = '', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-text');
-    const propsToSync = [autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'spellCheck', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'counter', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'spellCheck', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRInputText, { autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRInputText, { autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, value, children })),
             }
             : {
                 children,

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

@@ -1,27 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRInputTime } from '../dsr-components/input-time.mjs';
 
-const PInputTime = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 60, theme, value = '', className, children, ...rest }, ref) => {
+const PInputTime = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 60, value = '', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-time');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRInputTime, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRInputTime, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value, children })),
             }
             : {
                 children,

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

@@ -1,27 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRInputUrl } from '../dsr-components/input-url.mjs';
 
-const PInputUrl = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, children, ...rest }, ref) => {
+const PInputUrl = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-url');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRInputUrl, { autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRInputUrl, { autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, value, children })),
             }
             : {
                 children,

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

@@ -1,27 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRInputWeek } from '../dsr-components/input-week.mjs';
 
-const PInputWeek = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, children, ...rest }, ref) => {
+const PInputWeek = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, readOnly = false, required = false, state = 'none', step = 1, value = '', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = usePrefix('p-input-week');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme || useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'readOnly', 'required', 'state', 'step', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRInputWeek, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRInputWeek, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value, children })),
             }
             : {
                 children,

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkPure } from '../dsr-components/link-pure.mjs';
 
-const PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme, underline = false, weight = 'regular', className, children, ...rest }, ref) => {
+const PLinkPure = /*#__PURE__*/ forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', underline = false, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-pure');
-    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme || useTheme(), underline, weight];
+    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, underline];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'underline', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'underline'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLinkPure, { active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme: theme || useTheme(), underline, weight, children })),
+                children: (jsx(DSRLinkPure, { active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, underline, children })),
             }
             : {
                 children,

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-product.wrapper.mjs

@@ -1,25 +1,25 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkTileProduct } from '../dsr-components/link-tile-product.mjs';
 
-const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', theme, className, children, ...rest }, ref) => {
+const PLinkTileProduct = /*#__PURE__*/ forwardRef(({ aspectRatio = '3/4', description, heading, href, likeButton = true, liked = false, onLike, price, priceOriginal, rel, target = '_self', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'like', onLike);
     const WebComponentTag = usePrefix('p-link-tile-product');
-    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme || useTheme()];
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'priceOriginal', 'rel', 'target'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLinkTileProduct, { aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, theme: theme || useTheme(), children })),
+                children: (jsx(DSRLinkTileProduct, { aspectRatio, description, heading, href, likeButton, liked, price, priceOriginal, rel, target, children })),
             }
             : {
                 children,

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

@@ -5,20 +5,20 @@ import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.m
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkTile } from '../dsr-components/link-tile.mjs';
 
-const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', background = 'dark', compact = false, description, download, gradient = true, href, label, rel, size = 'medium', target = '_self', weight = 'semi-bold', className, children, ...rest }, ref) => {
+const PLinkTile = /*#__PURE__*/ forwardRef(({ align = 'bottom', aria, aspectRatio = '4/3', compact = false, description, download, gradient = false, href, label, rel, size = 'medium', target = '_self', weight = 'semi-bold', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link-tile');
-    const propsToSync = [align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight];
+    const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'aria', 'aspectRatio', 'background', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'aria', 'aspectRatio', 'compact', 'description', 'download', 'gradient', 'href', 'label', 'rel', 'size', 'target', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLinkTile, { align, aria, aspectRatio, background, compact, description, download, gradient, href, label, rel, size, target, weight, children })),
+                children: (jsx(DSRLinkTile, { align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight, children })),
             }
             : {
                 children,

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRLink } from '../dsr-components/link.mjs';
 
-const PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, children, ...rest }, ref) => {
+const PLink = /*#__PURE__*/ forwardRef(({ aria, compact = false, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', variant = 'primary', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-link');
-    const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme || useTheme(), variant];
+    const propsToSync = [aria, compact, download, hideLabel, href, icon, iconSource, rel, target, variant];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'compact', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLink, { aria, compact, download, hideLabel, href, icon, iconSource, rel, target, theme: theme || useTheme(), variant, children })),
+                children: (jsx(DSRLink, { aria, compact, download, hideLabel, href, icon, iconSource, rel, target, variant, children })),
             }
             : {
                 children,

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

@@ -1,28 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRModal } from '../dsr-components/modal.mjs';
 
-const PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, theme, className, children, ...rest }, ref) => {
+const PModal = /*#__PURE__*/ forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, dismissButton = true, fullscreen = false, onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'close', onClose);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = usePrefix('p-modal');
-    const propsToSync = [aria, backdrop, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || useTheme()];
+    const propsToSync = [aria, backdrop, background, disableBackdropClick, dismissButton, fullscreen, open];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'backdrop', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'dismissButton', 'fullscreen', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRModal, { aria, backdrop, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme: theme || useTheme(), children })),
+                children: (jsx(DSRModal, { aria, backdrop, background, disableBackdropClick, dismissButton, fullscreen, open, children })),
             }
             : {
                 children,

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRModelSignature } from '../dsr-components/model-signature.mjs';
 
-const PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', theme, className, children, ...rest }, ref) => {
+const PModelSignature = /*#__PURE__*/ forwardRef(({ color = 'primary', fetchPriority = 'auto', lazy = false, model = '911', safeZone = true, size = 'small', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-model-signature');
-    const propsToSync = [color, fetchPriority, lazy, model, safeZone, size, theme || useTheme()];
+    const propsToSync = [color, fetchPriority, lazy, model, safeZone, size];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'fetchPriority', 'lazy', 'model', 'safeZone', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'fetchPriority', 'lazy', 'model', 'safeZone', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRModelSignature, { color, fetchPriority, lazy, model, safeZone, size, theme: theme || useTheme(), children })),
+                children: (jsx(DSRModelSignature, { color, fetchPriority, lazy, model, safeZone, size, children })),
             }
             : {
                 children,

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

@@ -1,28 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRMultiSelect } from '../dsr-components/multi-select.mjs';
 
-const PMultiSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onToggle, onUpdate, required = false, state = 'none', theme, value = [], className, children, ...rest }, ref) => {
+const PMultiSelect = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, dropdownDirection = 'auto', form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onToggle, required = false, state = 'none', value = [], className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     useEventCallback(elementRef, 'toggle', onToggle);
-    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-multi-select');
-    const propsToSync = [compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'dropdownDirection', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRMultiSelect, { compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRMultiSelect, { compact, description, disabled, dropdownDirection, form, hideLabel, label, message, name, required, state, value, children })),
             }
             : {
                 children,

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

@@ -1,26 +1,25 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRPagination } from '../dsr-components/pagination.mjs';
 
-const PPagination = /*#__PURE__*/ forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = /*#__PURE__*/ forwardRef(({ activePage = 1, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, onUpdate, showLastPage = true, totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
-    useEventCallback(elementRef, 'pageChange', onPageChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-pagination');
-    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme || useTheme(), totalItemsCount];
+    const propsToSync = [activePage, intl, itemsPerPage, showLastPage, totalItemsCount];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activePage', 'intl', 'itemsPerPage', 'showLastPage', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRPagination, { activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme: theme || useTheme(), totalItemsCount })),
+                children: (jsx(DSRPagination, { activePage, intl, itemsPerPage, showLastPage, totalItemsCount })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -1,27 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRPinCode } from '../dsr-components/pin-code.mjs';
 
-const PPinCode = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onBlur, onChange, onUpdate, required = false, state = 'none', theme, type = 'number', value = '', className, children, ...rest }, ref) => {
+const PPinCode = /*#__PURE__*/ forwardRef(({ compact = false, description = '', disabled = false, form, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onBlur, onChange, required = false, state = 'none', type = 'number', value = '', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
-    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-pin-code');
-    const propsToSync = [compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme || useTheme(), type, value];
+    const propsToSync = [compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, type, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRPinCode, { compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, theme: theme || useTheme(), type, value, children })),
+                children: (jsx(DSRPinCode, { compact, description, disabled, form, hideLabel, label, length, loading, message, name, required, state, type, value, children })),
             }
             : {
                 children,

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRPopover } from '../dsr-components/popover.mjs';
 
-const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bottom', theme, className, children, ...rest }, ref) => {
+const PPopover = /*#__PURE__*/ forwardRef(({ aria, description, direction = 'bottom', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-popover');
-    const propsToSync = [aria, description, direction, theme || useTheme()];
+    const propsToSync = [aria, description, direction];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'description', 'direction', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'description', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRPopover, { aria, description, direction, theme: theme || useTheme(), children })),
+                children: (jsx(DSRPopover, { aria, description, direction, children })),
             }
             : {
                 children,

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

@@ -1,26 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRRadioGroup } from '../dsr-components/radio-group.mjs';
 
-const PRadioGroup = /*#__PURE__*/ forwardRef(({ compact = false, description = '', direction = 'column', disabled = false, form, hideLabel = false, label = '', loading = false, message = '', name, onBlur, onChange, required = false, state = 'none', theme, value = '', className, children, ...rest }, ref) => {
+const PRadioGroup = /*#__PURE__*/ forwardRef(({ compact = false, description = '', direction = 'column', disabled = false, form, hideLabel = false, label = '', loading = false, message = '', name, onBlur, onChange, required = false, state = 'none', value = '', className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
     const WebComponentTag = usePrefix('p-radio-group');
-    const propsToSync = [compact, description, direction, disabled, form, hideLabel, label, loading, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [compact, description, direction, disabled, form, hideLabel, label, loading, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['compact', 'description', 'direction', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['compact', 'description', 'direction', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRRadioGroup, { compact, description, direction, disabled, form, hideLabel, label, loading, message, name, required, state, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRRadioGroup, { compact, description, direction, disabled, form, hideLabel, label, loading, message, name, required, state, value, children })),
             }
             : {
                 children,

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

@@ -1,24 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRScroller } from '../dsr-components/scroller.mjs';
 
-const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, children, ...rest }, ref) => {
+const PScroller = /*#__PURE__*/ forwardRef(({ alignScrollIndicator = 'center', aria, scrollToPosition, scrollbar = false, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || useTheme()];
+    const propsToSync = [alignScrollIndicator, aria, scrollToPosition, scrollbar];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['alignScrollIndicator', 'aria', 'scrollToPosition', 'scrollbar'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRScroller, { alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme: theme || useTheme(), children })),
+                children: (jsx(DSRScroller, { alignScrollIndicator, aria, scrollToPosition, scrollbar, children })),
             }
             : {
                 children,

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

@@ -7,7 +7,7 @@ import { DSRSegmentedControlItem } from '../dsr-components/segmented-control-ite
 
 const PSegmentedControlItem = /*#__PURE__*/ forwardRef((
 // @ts-ignore
-{ aria, disabled = false, icon, iconSource, label, value, className, children, compact, selected, state, theme = 'light', ...rest }, ref) => {
+{ aria, disabled = false, icon, iconSource, label, value, className, children, compact, selected, state, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     const WebComponentTag = usePrefix('p-segmented-control-item');
     const propsToSync = [aria, disabled, icon, iconSource, label, value];
@@ -20,7 +20,7 @@ const PSegmentedControlItem = /*#__PURE__*/ forwardRef((
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSegmentedControlItem, { aria, disabled, icon, iconSource, label, value, compact, selected, state, theme, children })),
+                children: (jsx(DSRSegmentedControlItem, { aria, disabled, icon, iconSource, label, value, compact, selected, state, children })),
             }
             : {
                 children,

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

@@ -1,28 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSegmentedControl } from '../dsr-components/segmented-control.mjs';
 
-const PSegmentedControl = /*#__PURE__*/ forwardRef(({ backgroundColor, columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, onSegmentedControlChange, onUpdate, required = false, state = 'none', theme, value, className, children, ...rest }, ref) => {
+const PSegmentedControl = /*#__PURE__*/ forwardRef(({ columns = 'auto', compact = false, description = '', disabled = false, form, hideLabel = false, label = '', message = '', name, onBlur, onChange, required = false, state = 'none', value, className, children, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'blur', onBlur);
     useEventCallback(elementRef, 'change', onChange);
-    useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
-    useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    const propsToSync = [columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['backgroundColor', 'columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['columns', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSegmentedControl, { backgroundColor, columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, theme: theme || useTheme(), value, children })),
+                children: (jsx(DSRSegmentedControl, { columns, compact, description, disabled, form, hideLabel, label, message, name, required, state, value, children })),
             }
             : {
                 children,