@porsche-design-system/components-react 3.8.0-rc.0 → 3.9.0-rc.0

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var link = require('../dsr-components/link.cjs');
 
-const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme = 'light', variant = 'primary', className, children, ...rest }, ref) => {
+const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme, variant = 'primary', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.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 || hooks.useTheme(), variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'target', 'theme', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(link.DSRLink, { aria, download, hideLabel, href, icon, iconSource, rel, target, theme, variant, children })),
+                children: (jsxRuntime.jsx(link.DSRLink, { aria, download, hideLabel, href, icon, iconSource, rel, target, theme: theme || hooks.useTheme(), variant, children })),
             }
             : {
                 children,

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

@@ -7,12 +7,12 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var modal = require('../dsr-components/modal.cjs');
 
-const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme = 'light', className, children, ...rest }, ref) => {
+const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'close', onClose);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme];
+    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -26,7 +26,7 @@ const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCl
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(modal.DSRModal, { aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme, children })),
+                children: (jsxRuntime.jsx(modal.DSRModal, { aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var modelSignature = require('../dsr-components/model-signature.cjs');
 
-const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', size = 'small', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-model-signature');
-    const propsToSync = [color, model, size, theme];
+    const propsToSync = [color, model, size, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['color', 'model', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PModelSignature = react.forwardRef(({ color = 'primary', model = '911', si
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(modelSignature.DSRModelSignature, { color, model, size, theme })),
+                children: (jsxRuntime.jsx(modelSignature.DSRModelSignature, { color, model, size, theme: theme || hooks.useTheme() })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -7,11 +7,11 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var multiSelect = require('../dsr-components/multi-select.cjs');
 
-const PMultiSelect = react.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 = react.forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value = [], className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.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 || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -25,7 +25,7 @@ const PMultiSelect = react.forwardRef(({ description = '', disabled = false, dro
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(multiSelect.DSRMultiSelect, { description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme, value, children })),
+                children: (jsxRuntime.jsx(multiSelect.DSRMultiSelect, { description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
             }
             : {
                 children,

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

@@ -7,12 +7,12 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var pagination = require('../dsr-components/pagination.cjs');
 
-const PPagination = react.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 = react.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 = react.useRef();
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.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 || hooks.useTheme(), totalItemsCount];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activePage', 'allyLabel', 'allyLabelNext', 'allyLabelPage', 'allyLabelPrev', 'intl', 'itemsPerPage', 'maxNumberOfPageLinks', 'showLastPage', 'theme', 'totalItemsCount'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -26,7 +26,7 @@ const PPagination = react.forwardRef(({ activePage = 1, allyLabel, allyLabelNext
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(pagination.DSRPagination, { activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme, totalItemsCount })),
+                children: (jsxRuntime.jsx(pagination.DSRPagination, { activePage, allyLabel, allyLabelNext, allyLabelPage, allyLabelPrev, intl, itemsPerPage, maxNumberOfPageLinks, showLastPage, theme: theme || hooks.useTheme(), totalItemsCount })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -7,11 +7,11 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var pinCode = require('../dsr-components/pin-code.cjs');
 
-const PPinCode = react.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 = react.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 = react.useRef();
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.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 || hooks.useTheme(), type, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -25,7 +25,7 @@ const PPinCode = react.forwardRef(({ description = '', disabled = false, hideLab
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(pinCode.DSRPinCode, { description, disabled, hideLabel, label, length, loading, message, name, required, state, theme, type, value, children })),
+                children: (jsxRuntime.jsx(pinCode.DSRPinCode, { description, disabled, hideLabel, label, length, loading, message, name, required, state, theme: theme || hooks.useTheme(), type, value, children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var popover = require('../dsr-components/popover.cjs');
 
-const PPopover = react.forwardRef(({ aria, description, direction = 'bottom', theme = 'light', className, children, ...rest }, ref) => {
+const PPopover = react.forwardRef(({ aria, description, direction = 'bottom', theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-popover');
-    const propsToSync = [aria, description, direction, theme];
+    const propsToSync = [aria, description, direction, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'description', 'direction', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PPopover = react.forwardRef(({ aria, description, direction = 'bottom', th
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(popover.DSRPopover, { aria, description, direction, theme, children })),
+                children: (jsxRuntime.jsx(popover.DSRPopover, { aria, description, direction, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var radioButtonWrapper = require('../dsr-components/radio-button-wrapper.cjs');
 
-const PRadioButtonWrapper = react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme = 'light', className, children, ...rest }, ref) => {
+const PRadioButtonWrapper = react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-radio-button-wrapper');
-    const propsToSync = [hideLabel, label, loading, message, state, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PRadioButtonWrapper = react.forwardRef(({ hideLabel = false, label = '', l
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(radioButtonWrapper.DSRRadioButtonWrapper, { hideLabel, label, loading, message, state, theme, children })),
+                children: (jsxRuntime.jsx(radioButtonWrapper.DSRRadioButtonWrapper, { hideLabel, label, loading, message, state, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var scroller = require('../dsr-components/scroller.cjs');
 
-const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme = 'light', className, children, ...rest }, ref) => {
+const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gradientColor = 'background-base', gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar = false, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-scroller');
-    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme];
+    const propsToSync = [alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['alignScrollIndicator', 'aria', 'gradientColor', 'gradientColorScheme', 'scrollIndicatorPosition', 'scrollToPosition', 'scrollbar', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PScroller = react.forwardRef(({ alignScrollIndicator = 'center', aria, gra
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(scroller.DSRScroller, { alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme, children })),
+                children: (jsxRuntime.jsx(scroller.DSRScroller, { alignScrollIndicator, aria, gradientColor, gradientColorScheme, scrollIndicatorPosition, scrollToPosition, scrollbar, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,12 +7,12 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var segmentedControl = require('../dsr-components/segmented-control.cjs');
 
-const PSegmentedControl = react.forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme = 'light', value, className, children, ...rest }, ref) => {
+const PSegmentedControl = react.forwardRef(({ backgroundColor, columns = 'auto', onSegmentedControlChange, onUpdate, theme, value, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
-    const propsToSync = [backgroundColor, columns, theme, value];
+    const propsToSync = [backgroundColor, columns, theme || hooks.useTheme(), value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['backgroundColor', 'columns', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -27,7 +27,7 @@ const PSegmentedControl = react.forwardRef(({ backgroundColor, columns = 'auto',
         ...(!process.browser
             ? {
                 ...{ "role": "group" },
-                children: (jsxRuntime.jsx(segmentedControl.DSRSegmentedControl, { backgroundColor, columns, theme, value, children })),
+                children: (jsxRuntime.jsx(segmentedControl.DSRSegmentedControl, { backgroundColor, columns, theme: theme || hooks.useTheme(), value, children })),
             }
             : {
                 children,

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

@@ -7,11 +7,11 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var selectWrapperDropdown = require('../dsr-components/select-wrapper-dropdown.cjs');
 
-const PSelectWrapperDropdown = react.forwardRef(({ description, direction = 'auto', disabled = false, filter = false, isOpenOverride = false, label, message, onOpenChange, required = false, selectRef, state, theme = 'light', className, ...rest }, ref) => {
+const PSelectWrapperDropdown = react.forwardRef(({ description, direction = 'auto', disabled = false, filter = false, isOpenOverride = false, label, message, onOpenChange, required = false, selectRef, state, theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'openChange', onOpenChange);
     const WebComponentTag = hooks.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 || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'direction', 'disabled', 'filter', 'isOpenOverride', 'label', 'message', 'required', 'selectRef', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -25,7 +25,7 @@ const PSelectWrapperDropdown = react.forwardRef(({ description, direction = 'aut
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(selectWrapperDropdown.DSRSelectWrapperDropdown, { description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme })),
+                children: (jsxRuntime.jsx(selectWrapperDropdown.DSRSelectWrapperDropdown, { description, direction, disabled, filter, isOpenOverride, label, message, required, selectRef, state, theme: theme || hooks.useTheme() })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var selectWrapper = require('../dsr-components/select-wrapper.cjs');
 
-const PSelectWrapper = react.forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme = 'light', className, children, ...rest }, ref) => {
+const PSelectWrapper = react.forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.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 || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'dropdownDirection', 'filter', 'hideLabel', 'label', 'message', 'native', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PSelectWrapper = react.forwardRef(({ description = '', dropdownDirection =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(selectWrapper.DSRSelectWrapper, { description, dropdownDirection, filter, hideLabel, label, message, native, state, theme, children })),
+                children: (jsxRuntime.jsx(selectWrapper.DSRSelectWrapper, { description, dropdownDirection, filter, hideLabel, label, message, native, state, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var spinner = require('../dsr-components/spinner.cjs');
 
-const PSpinner = react.forwardRef(({ aria, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PSpinner = react.forwardRef(({ aria, size = 'small', theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-spinner');
-    const propsToSync = [aria, size, theme];
+    const propsToSync = [aria, size, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PSpinner = react.forwardRef(({ aria, size = 'small', theme = 'light', clas
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(spinner.DSRSpinner, { aria, size, theme })),
+                children: (jsxRuntime.jsx(spinner.DSRSpinner, { aria, size, theme: theme || hooks.useTheme() })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -7,12 +7,12 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var stepperHorizontal = require('../dsr-components/stepper-horizontal.cjs');
 
-const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme = 'light', className, children, ...rest }, ref) => {
+const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'stepChange', onStepChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal');
-    const propsToSync = [size, theme];
+    const propsToSync = [size, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['size', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -26,7 +26,7 @@ const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 's
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(stepperHorizontal.DSRStepperHorizontal, { size, theme, children })),
+                children: (jsxRuntime.jsx(stepperHorizontal.DSRStepperHorizontal, { size, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,12 +7,12 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var _switch = require('../dsr-components/switch.cjs');
 
-const PSwitch = react.forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, children, ...rest }, ref) => {
+const PSwitch = react.forwardRef(({ alignLabel = 'end', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'switchChange', onSwitchChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-switch');
-    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme];
+    const propsToSync = [alignLabel, checked, disabled, hideLabel, loading, stretch, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['alignLabel', 'checked', 'disabled', 'hideLabel', 'loading', 'stretch', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -26,7 +26,7 @@ const PSwitch = react.forwardRef(({ alignLabel = 'end', checked = false, disable
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(_switch.DSRSwitch, { alignLabel, checked, disabled, hideLabel, loading, stretch, theme, children })),
+                children: (jsxRuntime.jsx(_switch.DSRSwitch, { alignLabel, checked, disabled, hideLabel, loading, stretch, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,12 +7,12 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var table = require('../dsr-components/table.cjs');
 
-const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme = 'light', className, children, ...rest }, ref) => {
+const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
-    const propsToSync = [caption, theme];
+    const propsToSync = [caption, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['caption', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -26,7 +26,7 @@ const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme = '
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(table.DSRTable, { caption, theme, children })),
+                children: (jsxRuntime.jsx(table.DSRTable, { caption, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,12 +7,12 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tabsBar = require('../dsr-components/tabs-bar.cjs');
 
-const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs-bar');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || hooks.useTheme(), weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -26,7 +26,7 @@ const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight, children })),
+                children: (jsxRuntime.jsx(tabsBar.DSRTabsBar, { activeTabIndex, gradientColor, gradientColorScheme, size, theme: theme || hooks.useTheme(), weight, children })),
             }
             : {
                 children,

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

@@ -7,12 +7,12 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tabs = require('../dsr-components/tabs.cjs');
 
-const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme, weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
-    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
+    const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme || hooks.useTheme(), weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['activeTabIndex', 'gradientColor', 'gradientColorScheme', 'size', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -26,7 +26,7 @@ const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'backgroun
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight, children })),
+                children: (jsxRuntime.jsx(tabs.DSRTabs, { activeTabIndex, gradientColor, gradientColorScheme, size, theme: theme || hooks.useTheme(), weight, children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tagDismissible = require('../dsr-components/tag-dismissible.cjs');
 
-const PTagDismissible = react.forwardRef(({ aria, color = 'background-surface', label, theme = 'light', className, children, ...rest }, ref) => {
+const PTagDismissible = react.forwardRef(({ aria, color = 'background-surface', label, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-tag-dismissible');
-    const propsToSync = [aria, color, label, theme];
+    const propsToSync = [aria, color, label, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['aria', 'color', 'label', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PTagDismissible = react.forwardRef(({ aria, color = 'background-surface',
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tagDismissible.DSRTagDismissible, { aria, color, label, theme, children })),
+                children: (jsxRuntime.jsx(tagDismissible.DSRTagDismissible, { aria, color, label, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var tag = require('../dsr-components/tag.cjs');
 
-const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource, theme = 'light', className, children, ...rest }, ref) => {
+const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource, theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-tag');
-    const propsToSync = [color, icon, iconSource, theme];
+    const propsToSync = [color, icon, iconSource, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['color', 'icon', 'iconSource', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PTag = react.forwardRef(({ color = 'background-surface', icon, iconSource,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(tag.DSRTag, { color, icon, iconSource, theme, children })),
+                children: (jsxRuntime.jsx(tag.DSRTag, { color, icon, iconSource, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,11 +7,11 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var textFieldWrapper = require('../dsr-components/text-field-wrapper.cjs');
 
-const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme = 'light', unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
+const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false, description = '', hideLabel = false, label = '', message = '', onAction, showCharacterCount, showCounter = true, showPasswordToggle = true, state = 'none', theme, unit = '', unitPosition = 'prefix', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     const WebComponentTag = hooks.usePrefix('p-text-field-wrapper');
-    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition];
+    const propsToSync = [actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme || hooks.useTheme(), unit, unitPosition];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['actionIcon', 'actionLoading', 'description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'showPasswordToggle', 'state', 'theme', 'unit', 'unitPosition'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -25,7 +25,7 @@ const PTextFieldWrapper = react.forwardRef(({ actionIcon, actionLoading = false,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textFieldWrapper.DSRTextFieldWrapper, { actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme, unit, unitPosition, children })),
+                children: (jsxRuntime.jsx(textFieldWrapper.DSRTextFieldWrapper, { actionIcon, actionLoading, description, hideLabel, label, message, showCharacterCount, showCounter, showPasswordToggle, state, theme: theme || hooks.useTheme(), unit, unitPosition, children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var textList = require('../dsr-components/text-list.cjs');
 
-const PTextList = react.forwardRef(({ listType, orderType, theme = 'light', type = 'unordered', className, children, ...rest }, ref) => {
+const PTextList = react.forwardRef(({ listType, orderType, theme, type = 'unordered', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text-list');
-    const propsToSync = [listType, orderType, theme, type];
+    const propsToSync = [listType, orderType, theme || hooks.useTheme(), type];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['listType', 'orderType', 'theme', 'type'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PTextList = react.forwardRef(({ listType, orderType, theme = 'light', type
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textList.DSRTextList, { listType, orderType, theme, type, children })),
+                children: (jsxRuntime.jsx(textList.DSRTextList, { listType, orderType, theme: theme || hooks.useTheme(), type, children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var text = require('../dsr-components/text.cjs');
 
-const PText = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PText = react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'small', tag = 'p', theme, weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-text');
-    const propsToSync = [align, color, ellipsis, size, tag, theme, weight];
+    const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme(), weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['align', 'color', 'ellipsis', 'size', 'tag', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PText = react.forwardRef(({ align = 'start', color = 'primary', ellipsis =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(text.DSRText, { align, color, ellipsis, size, tag, theme, weight, children })),
+                children: (jsxRuntime.jsx(text.DSRText, { align, color, ellipsis, size, tag, theme: theme || hooks.useTheme(), weight, children })),
             }
             : {
                 children,

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

@@ -7,10 +7,10 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var textareaWrapper = require('../dsr-components/textarea-wrapper.cjs');
 
-const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme = 'light', className, children, ...rest }, ref) => {
+const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false, label = '', message = '', showCharacterCount, showCounter = true, state = 'none', theme, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-textarea-wrapper');
-    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme];
+    const propsToSync = [description, hideLabel, label, message, showCharacterCount, showCounter, state, theme || hooks.useTheme()];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
         ['description', 'hideLabel', 'label', 'message', 'showCharacterCount', 'showCounter', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
@@ -24,7 +24,7 @@ const PTextareaWrapper = react.forwardRef(({ description = '', hideLabel = false
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textareaWrapper.DSRTextareaWrapper, { description, hideLabel, label, message, showCharacterCount, showCounter, state, theme, children })),
+                children: (jsxRuntime.jsx(textareaWrapper.DSRTextareaWrapper, { description, hideLabel, label, message, showCharacterCount, showCounter, state, theme: theme || hooks.useTheme(), children })),
             }
             : {
                 children,

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

@@ -7,12 +7,13 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var toast = require('../dsr-components/toast.cjs');
 
-const PToast = react.forwardRef(({ theme = 'light', className, ...rest }, ref) => {
+const PToast = react.forwardRef(({ theme, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-toast');
+    const themeValue = hooks.useTheme();
     hooks.useBrowserLayoutEffect(() => {
-        elementRef.current.theme = theme;
-    }, [theme]);
+        elementRef.current.theme = theme || themeValue;
+    }, [theme, themeValue]);
     // @ts-ignore
     if (!process.browser) {
         className = className ? `${className} ssr` : 'ssr';
@@ -22,7 +23,7 @@ const PToast = react.forwardRef(({ theme = 'light', className, ...rest }, ref) =
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(toast.DSRToast, { theme })),
+                children: (jsxRuntime.jsx(toast.DSRToast, { theme: theme || hooks.useTheme() })),
             }
             : {
                 suppressHydrationWarning: true,