@porsche-design-system/components-react 3.8.0 → 3.9.0

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRInlineNotification } from '../dsr-components/inline-notification.mjs';
 
-const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme = 'light', className, children, ...rest }, ref) => {
+const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', onAction, onDismiss, persistent, state = 'info', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'action', onAction);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PInlineNotification = forwardRef(({ actionIcon = 'arrow-right', actionLabe
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRInlineNotification, { actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme, children })),
+                children: (jsx(DSRInlineNotification, { actionIcon, actionLabel, actionLoading, description, dismissButton, heading, persistent, state, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkPure } from '../dsr-components/link-pure.mjs';
 
-const PLinkPure = forwardRef(({ active = false, alignLabel = 'end', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', underline = false, weight = 'regular', className, children, ...rest }, ref) => {
+const PLinkPure = 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 elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-pure');
-    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, underline, weight];
+    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme || useTheme(), underline, weight];
     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]));
@@ -22,7 +22,7 @@ const PLinkPure = forwardRef(({ active = false, alignLabel = 'end', aria, downlo
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLinkPure, { active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, underline, weight, children })),
+                children: (jsx(DSRLinkPure, { active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme: theme || useTheme(), underline, weight, children })),
             }
             : {
                 children,

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRLinkSocial } from '../dsr-components/link-social.mjs';
 
 /** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social icon instead. */
-const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, children, ...rest }, ref) => {
+const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-link-social');
-    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme];
+    const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -23,7 +23,7 @@ const PLinkSocial = forwardRef(({ hideLabel = false, href, icon, iconSource, rel
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRLinkSocial, { hideLabel, href, icon, iconSource, rel, target, theme, children })),
+                children: (jsx(DSRLinkSocial, { hideLabel, href, icon, iconSource, rel, target, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

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

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRModal } from '../dsr-components/modal.mjs';
 
-const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme = 'light', className, children, ...rest }, ref) => {
+const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'close', onClose);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme];
+    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseBut
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRModal, { aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme, children })),
+                children: (jsx(DSRModal, { aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

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

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRMultiSelect } from '../dsr-components/multi-select.mjs';
 
-const PMultiSelect = forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme = 'light', value = [], className, children, ...rest }, ref) => {
+const PMultiSelect = forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-multi-select');
-    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme, value];
+    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -23,7 +23,7 @@ const PMultiSelect = forwardRef(({ description = '', disabled = false, dropdownD
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRMultiSelect, { description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme, value, children })),
+                children: (jsx(DSRMultiSelect, { description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme: theme || useTheme(), value, children })),
             }
             : {
                 children,

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRPagination } from '../dsr-components/pagination.mjs';
 
-const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl = { root: 'Pagination', prev: 'Previous page', next: 'Next page', page: 'Page', }, itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, onUpdate, showLastPage = true, theme, totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = useRef();
     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, totalItemsCount];
+    const propsToSync = [activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme || useTheme(), totalItemsCount];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PPagination = forwardRef(({ activePage = 1, allyLabel, allyLabelNext, ally
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRPagination, { activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme, totalItemsCount })),
+                children: (jsx(DSRPagination, { activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme: theme || useTheme(), totalItemsCount })),
             }
             : {
                 suppressHydrationWarning: true,

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

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

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

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

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRRadioButtonWrapper } from '../dsr-components/radio-button-wrapper.mjs';
 
-const PRadioButtonWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, children, ...rest }, ref) => {
+const PRadioButtonWrapper = forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-radio-button-wrapper');
-    const propsToSync = [hideLabel, label, loading, message, state, theme];
+    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]));
@@ -22,7 +22,7 @@ const PRadioButtonWrapper = forwardRef(({ hideLabel = false, label = '', loading
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRRadioButtonWrapper, { hideLabel, label, loading, message, state, theme, children })),
+                children: (jsx(DSRRadioButtonWrapper, { hideLabel, label, loading, message, state, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

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

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSegmentedControl } from '../dsr-components/segmented-control.mjs';
 
-const PSegmentedControl = forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme = 'light', value, className, children, ...rest }, ref) => {
+const PSegmentedControl = forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme, value, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, theme, value];
+    const propsToSync = [backgroundColor, columns, theme || useTheme(), value];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -25,7 +25,7 @@ const PSegmentedControl = forwardRef(({ backgroundColor, columns = 'auto', onSeg
         ...(!process.browser
             ? {
                 ...{ "role": "group" },
-                children: (jsx(DSRSegmentedControl, { backgroundColor, columns, theme, value, children })),
+                children: (jsx(DSRSegmentedControl, { backgroundColor, columns, theme: theme || useTheme(), value, children })),
             }
             : {
                 children,

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

@@ -1,15 +1,15 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSelectWrapperDropdown } from '../dsr-components/select-wrapper-dropdown.mjs';
 
-const PSelectWrapperDropdown = forwardRef(({ description, direction = 'auto', disabled = false, filter = false, isOpenOverride = false, label, message, onOpenChange, required = false, selectRef, state, theme = 'light', className, ...rest }, ref) => {
+const PSelectWrapperDropdown = forwardRef(({ description, direction = 'auto', disabled = false, filter = false, isOpenOverride = false, label, message, onOpenChange, required = false, selectRef, state, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'openChange', onOpenChange);
     const WebComponentTag = usePrefix('p-select-wrapper-dropdown');
-    const propsToSync = [description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme];
+    const propsToSync = [description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'direction', 'disabled', 'filter', 'isOpenOverride', 'label', 'message', 'required', 'selectRef', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -23,7 +23,7 @@ const PSelectWrapperDropdown = forwardRef(({ description, direction = 'auto', di
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSelectWrapperDropdown, { description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme })),
+                children: (jsx(DSRSelectWrapperDropdown, { description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme: theme || useTheme() })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSelectWrapper } from '../dsr-components/select-wrapper.mjs';
 
-const PSelectWrapper = forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme = 'light', className, children, ...rest }, ref) => {
+const PSelectWrapper = forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-select-wrapper');
-    const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme];
+    const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'dropdownDirection', 'filter', 'hideLabel', 'label', 'message', 'native', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -22,7 +22,7 @@ const PSelectWrapper = forwardRef(({ description = '', dropdownDirection = 'auto
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSelectWrapper, { description, dropdownDirection, filter, hideLabel, label, message, native, state, theme, children })),
+                children: (jsx(DSRSelectWrapper, { description, dropdownDirection, filter, hideLabel, label, message, native, state, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -1,14 +1,14 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSpinner } from '../dsr-components/spinner.mjs';
 
-const PSpinner = forwardRef(({ aria, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PSpinner = forwardRef(({ aria, size = 'small', theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     const WebComponentTag = usePrefix('p-spinner');
-    const propsToSync = [aria, size, theme];
+    const propsToSync = [aria, size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -22,7 +22,7 @@ const PSpinner = forwardRef(({ aria, size = 'small', theme = 'light', className,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSpinner, { aria, size, theme })),
+                children: (jsx(DSRSpinner, { aria, size, theme: theme || useTheme() })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRStepperHorizontal } from '../dsr-components/stepper-horizontal.mjs';
 
-const PStepperHorizontal = forwardRef(({ onStepChange, onUpdate, size = 'small', theme = 'light', className, children, ...rest }, ref) => {
+const PStepperHorizontal = forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'stepChange', onStepChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-stepper-horizontal');
-    const propsToSync = [size, theme];
+    const propsToSync = [size, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PStepperHorizontal = forwardRef(({ onStepChange, onUpdate, size = 'small',
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRStepperHorizontal, { size, theme, children })),
+                children: (jsx(DSRStepperHorizontal, { size, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRSwitch } from '../dsr-components/switch.mjs';
 
-const PSwitch = forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, children, ...rest }, ref) => {
+const PSwitch = forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'switchChange', onSwitchChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];
+    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PSwitch = forwardRef(({ alignLabel = 'end', checked = false, disabled = fa
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRSwitch, { alignLabel, checked, disabled, hideLabel, loading, stretch, theme, children })),
+                children: (jsx(DSRSwitch, { alignLabel, checked, disabled, hideLabel, loading, stretch, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTable } from '../dsr-components/table.mjs';
 
-const PTable = forwardRef(({ caption, onSortingChange, onUpdate, theme = 'light', className, children, ...rest }, ref) => {
+const PTable = forwardRef(({ caption, onSortingChange, onUpdate, theme, className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'sortingChange', onSortingChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-table');
-    const propsToSync = [caption, theme];
+    const propsToSync = [caption, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['caption', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PTable = forwardRef(({ caption, onSortingChange, onUpdate, theme = 'light'
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTable, { caption, theme, children })),
+                children: (jsx(DSRTable, { caption, theme: theme || useTheme(), children })),
             }
             : {
                 children,

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTabsBar } from '../dsr-components/tabs-bar.mjs';
 
-const PTabsBar = forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || useTheme(), weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PTabsBar = forwardRef(({ activeTabIndex, gradientColor = 'background-base'
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTabsBar, { activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight, children })),
+                children: (jsx(DSRTabsBar, { activeTabIndex, gradientColor, gradientColorScheme, size, theme: theme || useTheme(), weight, children })),
             }
             : {
                 children,

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

@@ -1,16 +1,16 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 import { DSRTabs } from '../dsr-components/tabs.mjs';
 
-const PTabs = forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'tabChange', onTabChange);
     useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || useTheme(), weight];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PTabs = forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsx(DSRTabs, { activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight, children })),
+                children: (jsx(DSRTabs, { activeTabIndex, gradientColor, gradientColorScheme, size, theme: theme || useTheme(), weight, children })),
             }
             : {
                 children,