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

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var button = require('../dsr-components/button.cjs');
 
-const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, theme, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
+const PButton = /*#__PURE__*/ react.forwardRef(({ aria, compact = false, disabled = false, form, hideLabel = false, icon = 'none', iconSource, loading = false, name, type = 'submit', value, variant = 'primary', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-button');
-    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme || hooks.useTheme(), type, value, variant];
+    const propsToSync = [aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, type, value, variant];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'theme', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'compact', 'disabled', 'form', 'hideLabel', 'icon', 'iconSource', 'loading', 'name', 'type', 'value', 'variant'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(button.DSRButton, { aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, theme: theme || hooks.useTheme(), type, value, variant, children })),
+                children: (jsxRuntime.jsx(button.DSRButton, { aria, compact, disabled, form, hideLabel, icon, iconSource, loading, name, type, value, variant, children })),
             }
             : {
                 children,

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

@@ -7,22 +7,22 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var canvas = require('../dsr-components/canvas.cjs');
 
-const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, theme, className, children, ...rest }, ref) => {
+const PCanvas = /*#__PURE__*/ react.forwardRef(({ onSidebarEndDismiss, onSidebarStartUpdate, sidebarEndOpen = false, sidebarStartOpen = false, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'sidebarEndDismiss', onSidebarEndDismiss);
     hooks.useEventCallback(elementRef, 'sidebarStartUpdate', onSidebarStartUpdate);
     const WebComponentTag = hooks.usePrefix('p-canvas');
-    const propsToSync = [sidebarEndOpen, sidebarStartOpen, theme || hooks.useTheme()];
+    const propsToSync = [sidebarEndOpen, sidebarStartOpen];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['sidebarEndOpen', 'sidebarStartOpen', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['sidebarEndOpen', 'sidebarStartOpen'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(canvas.DSRCanvas, { sidebarEndOpen, sidebarStartOpen, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(canvas.DSRCanvas, { sidebarEndOpen, sidebarStartOpen, children })),
             }
             : {
                 children,

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

@@ -7,22 +7,21 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var carousel = require('../dsr-components/carousel.cjs');
 
-const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, disablePagination, focusOnCenterSlide = false, gradientColor = 'none', heading, headingSize = 'x-large', intl, onCarouselChange, onUpdate, pagination = true, rewind = true, skipLinkTarget, slidesPerPage = 1, theme, trimSpace = true, width = 'basic', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = /*#__PURE__*/ react.forwardRef(({ activeSlideIndex = 0, alignControls = 'auto', alignHeader = 'start', aria, description, focusOnCenterSlide = false, gradient = false, heading, headingSize = 'x-large', intl, onUpdate, pagination = false, rewind = false, skipLinkTarget, slidesPerPage = 1, trimSpace = false, width = 'basic', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
-    hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
-    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme || hooks.useTheme(), trimSpace, width, wrapContent];
+    const propsToSync = [activeSlideIndex, alignControls, alignHeader, aria, description, focusOnCenterSlide, gradient, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, trimSpace, width];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'disablePagination', 'focusOnCenterSlide', 'gradientColor', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'theme', 'trimSpace', 'width', 'wrapContent'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeSlideIndex', 'alignControls', 'alignHeader', 'aria', 'description', 'focusOnCenterSlide', 'gradient', 'heading', 'headingSize', 'intl', 'pagination', 'rewind', 'skipLinkTarget', 'slidesPerPage', 'trimSpace', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(carousel.DSRCarousel, { activeSlideIndex, alignControls, alignHeader, aria, description, disablePagination, focusOnCenterSlide, gradientColor, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, theme: theme || hooks.useTheme(), trimSpace, width, wrapContent, children })),
+                children: (jsxRuntime.jsx(carousel.DSRCarousel, { activeSlideIndex, alignControls, alignHeader, aria, description, focusOnCenterSlide, gradient, heading, headingSize, intl, pagination, rewind, skipLinkTarget, slidesPerPage, trimSpace, width, children })),
             }
             : {
                 children,

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

@@ -7,23 +7,22 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var checkbox = require('../dsr-components/checkbox.cjs');
 
-const PCheckbox = /*#__PURE__*/ react.forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, onUpdate, required = false, state = 'none', theme, value = 'on', className, children, ...rest }, ref) => {
+const PCheckbox = /*#__PURE__*/ react.forwardRef(({ checked = false, compact = false, disabled = false, form, hideLabel = false, indeterminate = false, label = '', loading = false, message = '', name = '', onBlur, onChange, required = false, state = 'none', value = 'on', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
-    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-checkbox');
-    const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['checked', 'compact', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['checked', 'compact', 'disabled', 'form', 'hideLabel', 'indeterminate', 'label', 'loading', 'message', 'name', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(checkbox.DSRCheckbox, { checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(checkbox.DSRCheckbox, { checked, compact, disabled, form, hideLabel, indeterminate, label, loading, message, name, required, state, value, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var display = require('../dsr-components/display.cjs');
 
-const PDisplay = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, theme, className, children, ...rest }, ref) => {
+const PDisplay = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'large', tag, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-display');
-    const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme()];
+    const propsToSync = [align, color, ellipsis, size, tag];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'color', 'ellipsis', 'size', 'tag'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(display.DSRDisplay, { align, color, ellipsis, size, tag, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(display.DSRDisplay, { align, color, ellipsis, size, tag, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var divider = require('../dsr-components/divider.cjs');
 
-const PDivider = /*#__PURE__*/ react.forwardRef(({ color = 'contrast-low', direction = 'horizontal', orientation, theme, className, ...rest }, ref) => {
+const PDivider = /*#__PURE__*/ react.forwardRef(({ color = 'contrast-lower', direction = 'horizontal', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-divider');
-    const propsToSync = [color, direction, orientation, theme || hooks.useTheme()];
+    const propsToSync = [color, direction];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['color', 'direction', 'orientation', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['color', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(divider.DSRDivider, { color, direction, orientation, theme: theme || hooks.useTheme() })),
+                children: (jsxRuntime.jsx(divider.DSRDivider, { color, direction })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -7,22 +7,22 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var drilldown = require('../dsr-components/drilldown.cjs');
 
-const PDrilldown = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, theme, className, children, ...rest }, ref) => {
+const PDrilldown = /*#__PURE__*/ react.forwardRef(({ activeIdentifier, aria, onDismiss, onUpdate, open = false, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-drilldown');
-    const propsToSync = [activeIdentifier, aria, open, theme || hooks.useTheme()];
+    const propsToSync = [activeIdentifier, aria, open];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['activeIdentifier', 'aria', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['activeIdentifier', 'aria', 'open'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(drilldown.DSRDrilldown, { activeIdentifier, aria, open, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(drilldown.DSRDrilldown, { activeIdentifier, aria, open, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var fieldset = require('../dsr-components/fieldset.cjs');
 
-const PFieldset = /*#__PURE__*/ react.forwardRef(({ aria, label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, children, ...rest }, ref) => {
+const PFieldset = /*#__PURE__*/ react.forwardRef(({ aria, label = '', labelSize = 'medium', message = '', required = false, state = 'none', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-fieldset');
-    const propsToSync = [aria, label, labelSize, message, required, state, theme || hooks.useTheme()];
+    const propsToSync = [aria, label, labelSize, message, required, state];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'label', 'labelSize', 'message', 'required', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(fieldset.DSRFieldset, { aria, label, labelSize, message, required, state, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(fieldset.DSRFieldset, { aria, label, labelSize, message, required, state, children })),
             }
             : {
                 children,

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var flyout = require('../dsr-components/flyout.cjs');
 
-const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', theme, className, children, ...rest }, ref) => {
+const PFlyout = /*#__PURE__*/ react.forwardRef(({ aria, backdrop = 'blur', background = 'canvas', disableBackdropClick = false, footerBehavior = 'sticky', onDismiss, onMotionHiddenEnd, onMotionVisibleEnd, open = false, position = 'end', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     hooks.useEventCallback(elementRef, 'motionHiddenEnd', onMotionHiddenEnd);
     hooks.useEventCallback(elementRef, 'motionVisibleEnd', onMotionVisibleEnd);
     const WebComponentTag = hooks.usePrefix('p-flyout');
-    const propsToSync = [aria, backdrop, disableBackdropClick, footerBehavior, open, position, theme || hooks.useTheme()];
+    const propsToSync = [aria, backdrop, background, disableBackdropClick, footerBehavior, open, position];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'backdrop', 'disableBackdropClick', 'footerBehavior', 'open', 'position', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'background', 'disableBackdropClick', 'footerBehavior', 'open', 'position'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(flyout.DSRFlyout, { aria, backdrop, disableBackdropClick, footerBehavior, open, position, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(flyout.DSRFlyout, { aria, backdrop, background, disableBackdropClick, footerBehavior, open, position, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var heading = require('../dsr-components/heading.cjs');
 
-const PHeading = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, theme, className, children, ...rest }, ref) => {
+const PHeading = /*#__PURE__*/ react.forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'xx-large', tag, className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-heading');
-    const propsToSync = [align, color, ellipsis, size, tag, theme || hooks.useTheme()];
+    const propsToSync = [align, color, ellipsis, size, tag];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['align', 'color', 'ellipsis', 'size', 'tag', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['align', 'color', 'ellipsis', 'size', 'tag'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(heading.DSRHeading, { align, color, ellipsis, size, tag, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(heading.DSRHeading, { align, color, ellipsis, size, tag, children })),
             }
             : {
                 children,

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

@@ -7,20 +7,20 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var icon = require('../dsr-components/icon.cjs');
 
-const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', lazy, name = 'arrow-right', size = 'small', source, theme, className, ...rest }, ref) => {
+const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'primary', name = 'arrow-right', size = 'small', source, className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     const WebComponentTag = hooks.usePrefix('p-icon');
-    const propsToSync = [aria, color, lazy, name, size, source, theme || hooks.useTheme()];
+    const propsToSync = [aria, color, name, size, source];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'color', 'lazy', 'name', 'size', 'source', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'color', 'name', 'size', 'source'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(icon.DSRIcon, { aria, color, lazy, name, size, source, theme: theme || hooks.useTheme() })),
+                children: (jsxRuntime.jsx(icon.DSRIcon, { aria, color, name, size, source })),
             }
             : {
                 suppressHydrationWarning: true,

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

@@ -7,22 +7,22 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inlineNotification = require('../dsr-components/inline-notification.cjs');
 
-const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, persistent, state = 'info', theme, className, children, ...rest }, ref) => {
+const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', dismissButton = true, heading = '', headingTag = 'h5', onAction, onDismiss, state = 'info', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'action', onAction);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-inline-notification');
-    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, persistent, state, theme || hooks.useTheme()];
+    const propsToSync = [actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, state];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'headingTag', 'persistent', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['actionIcon', 'actionLabel', 'actionLoading', 'description', 'dismissButton', 'heading', 'headingTag', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(inlineNotification.DSRInlineNotification, { actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, persistent, state, theme: theme || hooks.useTheme(), children })),
+                children: (jsxRuntime.jsx(inlineNotification.DSRInlineNotification, { actionIcon, actionLabel, actionLoading, description, dismissButton, heading, headingTag, state, children })),
             }
             : {
                 children,

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inputDate = require('../dsr-components/input-date.cjs');
 
-const PInputDate = /*#__PURE__*/ react.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 PInputDate = /*#__PURE__*/ react.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 = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = hooks.usePrefix('p-input-date');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme || hooks.useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value];
     hooks.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: (jsxRuntime.jsx(inputDate.DSRInputDate, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(inputDate.DSRInputDate, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value, children })),
             }
             : {
                 children,

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inputEmail = require('../dsr-components/input-email.cjs');
 
-const PInputEmail = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, multiple = false, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, children, ...rest }, ref) => {
+const PInputEmail = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, multiple = false, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = hooks.usePrefix('p-input-email');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'multiple', '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', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(inputEmail.DSRInputEmail, { autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(inputEmail.DSRInputEmail, { autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, value, children })),
             }
             : {
                 children,

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

@@ -0,0 +1,40 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var inputMonth = require('../dsr-components/input-month.cjs');
+
+const PInputMonth = /*#__PURE__*/ react.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 = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = hooks.usePrefix('p-input-month');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['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: (jsxRuntime.jsx(inputMonth.DSRInputMonth, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, max, message, min, name, readOnly, required, state, step, value, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PInputMonth = PInputMonth;

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inputNumber = require('../dsr-components/input-number.cjs');
 
-const PInputNumber = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, controls = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', step = 1, theme, value = '', className, children, ...rest }, ref) => {
+const PInputNumber = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, controls = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, max, message = '', min, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', step = 1, value = '', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = hooks.usePrefix('p-input-number');
-    const propsToSync = [autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, theme || hooks.useTheme(), value];
+    const propsToSync = [autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'controls', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'placeholder', 'readOnly', 'required', 'state', 'step', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'controls', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'max', 'message', 'min', 'name', 'placeholder', 'readOnly', 'required', 'state', 'step', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(inputNumber.DSRInputNumber, { autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(inputNumber.DSRInputNumber, { autoComplete, compact, controls, description, disabled, form, hideLabel, label, loading, max, message, min, name, placeholder, readOnly, required, state, step, value, children })),
             }
             : {
                 children,

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inputPassword = require('../dsr-components/input-password.cjs');
 
-const PInputPassword = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, toggle = false, value = '', className, children, ...rest }, ref) => {
+const PInputPassword = /*#__PURE__*/ react.forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', toggle = false, value = '', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = hooks.usePrefix('p-input-password');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme || hooks.useTheme(), toggle, value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, toggle, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'toggle', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(inputPassword.DSRInputPassword, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, theme: theme || hooks.useTheme(), toggle, value, children })),
+                children: (jsxRuntime.jsx(inputPassword.DSRInputPassword, { autoComplete, compact, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, toggle, value, children })),
             }
             : {
                 children,

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inputSearch = require('../dsr-components/input-search.cjs');
 
-const PInputSearch = /*#__PURE__*/ react.forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, message = '', name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, children, ...rest }, ref) => {
+const PInputSearch = /*#__PURE__*/ react.forwardRef(({ autoComplete, clear = false, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, state = 'none', value = '', className, children, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = hooks.usePrefix('p-input-search');
-    const propsToSync = [autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, message, name, placeholder, readOnly, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'message', 'name', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['autoComplete', 'clear', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'name', 'placeholder', 'readOnly', 'required', 'state', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(inputSearch.DSRInputSearch, { autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, message, name, placeholder, readOnly, required, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(inputSearch.DSRInputSearch, { autoComplete, clear, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, state, value, children })),
             }
             : {
                 children,

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inputTel = require('../dsr-components/input-tel.cjs');
 
-const PInputTel = /*#__PURE__*/ react.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 PInputTel = /*#__PURE__*/ react.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 = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = hooks.usePrefix('p-input-tel');
-    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, theme || hooks.useTheme(), value];
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, value];
     hooks.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: (jsxRuntime.jsx(inputTel.DSRInputTel, { autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(inputTel.DSRInputTel, { autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, name, pattern, placeholder, readOnly, required, state, value, children })),
             }
             : {
                 children,

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

@@ -7,23 +7,23 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var inputText = require('../dsr-components/input-text.cjs');
 
-const PInputText = /*#__PURE__*/ react.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__*/ react.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 = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'input', onInput);
     const WebComponentTag = hooks.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 || hooks.useTheme(), value];
+    const propsToSync = [autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, value];
     hooks.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: (jsxRuntime.jsx(inputText.DSRInputText, { autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, theme: theme || hooks.useTheme(), value, children })),
+                children: (jsxRuntime.jsx(inputText.DSRInputText, { autoComplete, compact, counter, description, disabled, form, hideLabel, label, loading, maxLength, message, minLength, name, placeholder, readOnly, required, spellCheck, state, value, children })),
             }
             : {
                 children,