@porsche-design-system/components-react 3.0.0-alpha.5 → 3.0.0-alpha.6

package/ssr/components/dist/styles/esm/styles-entry.js

@@ -17,8 +17,6 @@ hasWindow &&
             .forEach((mutation) => { var _a; return (_a = attributeMutationMap.get(mutation.target)) === null || _a === void 0 ? void 0 : _a(); });
     });
 
-// TODO: resolve overlap with Breakpoint type from utilities package
-const BREAKPOINTS = ['base', 'xs', 's', 'm', 'l', 'xl'];
 const parseJSON = (prop) => {
     if (typeof prop === 'string') {
         try {
@@ -235,14 +233,12 @@ const gridNarrowOffset = {
     xxl: gridNarrowOffsetXXL,
 };
 
+const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+
 function getMediaQueryMax(max) {
     return `@media(max-width:${breakpoint[max] - 1}px)`;
 }
 
-function getMediaQueryMinMax(min, max) {
-    return `@media(min-width:${breakpoint[min]}px) and (max-width:${breakpoint[max] - 1}px)`;
-}
-
 const spacingStaticXSmall = '4px';
 
 const spacingStaticSmall = '8px';
@@ -311,10 +307,7 @@ const textLargeStyle = {
     ...fontHyphenationStyle,
 };
 
-// TODO: we shouldn't exclude xxl breakpoint
-const mediaQueries = Object.entries(breakpoint)
-    .filter(([key]) => key !== 'xxl')
-    .map(([, val]) => `(min-width:${val}px)`);
+const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
 hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
 Object.entries(breakpoint).reduce((result, [key, val]) => (Object.assign(Object.assign({}, result), { [`${val}px`]: key })), {});
@@ -3956,7 +3949,7 @@ const formatObjectOutput = (value) => {
         .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
 };
 'value, ' +
-    formatObjectOutput(BREAKPOINTS.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
+    formatObjectOutput(breakpoints.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
@@ -4029,35 +4022,6 @@ const getComponentCss$Y = (size, compact, open, theme) => {
         } }));
 };
 
-const easeInQuad = 'cubic-bezier(0.45,0,0.55,1)';
-const easeOutQuad = 'cubic-bezier(0.5,1,0.89,1)';
-const ANIMATION_DURATION = 600;
-const getAnimationIn = (keyframesName, durationVar) => {
-    const duration = durationVar ? `var(${durationVar},${ANIMATION_DURATION}ms)` : `${ANIMATION_DURATION}ms`;
-    return {
-        animation: `${duration} $${keyframesName} ${easeInQuad} forwards`,
-    };
-};
-const getAnimationOut = (keyframesName) => ({
-    animation: addImportantToRule(`${ANIMATION_DURATION}ms $${keyframesName} ${easeOutQuad} forwards`),
-});
-const getKeyframes = (direction, outsideStyle) => {
-    const insideStyle = { opacity: 1, transform: 'translate3d(0,0,0)' };
-    return direction === 'in'
-        ? {
-            from: outsideStyle,
-            to: insideStyle,
-        }
-        : {
-            from: insideStyle,
-            to: outsideStyle,
-        };
-};
-const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
-    opacity: 0,
-    transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
-});
-
 const TOAST_Z_INDEX = 999999;
 const MODAL_Z_INDEX = 99999;
 const POPOVER_Z_INDEX = 9999;
@@ -4067,35 +4031,31 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableAnimationDuration = '--p-animation-duration';
 const cssVariableZIndex = '--p-internal-banner-z-index';
-const mediaQueryBaseToS = getMediaQueryMinMax('base', 's');
-const mediaQueryS$1 = getMediaQueryMin('s');
-const mediaQueryXXL$1 = getMediaQueryMin('xxl');
-const getKeyframesDesktop = (direction, topVar) => getKeyframes(direction, {
-    opacity: 0,
-    transform: `translate3d(0,calc(-100% - var(${topVar})),0)`, // space before and after "-" is crucial
-});
-const getComponentCss$X = () => {
+const ANIMATION_DURATION$1 = 600;
+const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}ms)`;
+const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
+const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
+const getComponentCss$X = (isOpen) => {
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({ opacity: 0 }, addImportantToEachRule(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`, willChange: 'opacity,transform' }, dropShadowHighStyle), { [mediaQueryS$1]: {
-                    top: `var(${cssVariableTop})`,
-                    bottom: 'auto',
-                    left: gridExtendedOffsetS,
-                    right: gridExtendedOffsetS,
-                }, [mediaQueryXXL$1]: {
+            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), (isOpen
+                ? {
+                    opacity: 1,
+                    visibility: 'inherit',
+                    transform: 'translate3d(0,0,0)',
+                    transition: `opacity ${duration$1} ${easeInQuad$1}, transform ${duration$1} ${easeInQuad$1}`,
+                }
+                : {
+                    opacity: 0,
+                    visibility: 'hidden',
+                    transform: `translate3d(0,calc(var(${cssVariableBottom}) + 100%),0)`,
+                    '&(.hydrated),&(.ssr)': {
+                        transition: `visibility 0s linear ${duration$1}, opacity ${duration$1} ${easeOutQuad$1}, transform ${duration$1} ${easeOutQuad$1}`,
+                    },
+                })), { [getMediaQueryMin('s')]: Object.assign({ top: `var(${cssVariableTop})`, bottom: 'auto', left: gridExtendedOffsetS, right: gridExtendedOffsetS }, (!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop})),0)` })), [getMediaQueryMin('xxl')]: {
                     left: gridExtendedOffsetXXL,
                     right: gridExtendedOffsetXXL,
-                } }), hostHiddenStyles))), { '&(.hydrated),&(.ssr)': {
-                    [mediaQueryBaseToS]: getAnimationIn('mobileIn', cssVariableAnimationDuration),
-                    [mediaQueryS$1]: getAnimationIn('desktopIn', cssVariableAnimationDuration),
-                }, '&(.banner--close)': {
-                    [mediaQueryBaseToS]: getAnimationOut('mobileOut'),
-                    [mediaQueryS$1]: getAnimationOut('desktopOut'),
-                } }),
-            '@keyframes mobileIn': getKeyframesMobile('in', cssVariableBottom),
-            '@keyframes mobileOut': getKeyframesMobile('out', cssVariableBottom),
-            '@keyframes desktopIn': getKeyframesDesktop('in', cssVariableTop),
-            '@keyframes desktopOut': getKeyframesDesktop('out', cssVariableTop),
+                } }), hostHiddenStyles)),
         },
     });
 };
@@ -4392,7 +4352,7 @@ const getComponentCss$T = (icon, iconSource, variant, hideLabel, disabled, loadi
             backgroundColor,
             borderColor,
             color: textColor,
-        })), ((loading && !isPrimary) && frostedGlassStyle)) }, (loading && {
+        })), (loading && !isPrimary && frostedGlassStyle)) }, (loading && {
         spinner: {
             width: fontLineHeight,
             height: fontLineHeight,
@@ -4890,6 +4850,9 @@ const filterDarkContrastLow = toFilter([20, 7, 421, 202, 97, 82]);
 const filterDarkContrastMedium = toFilter([66, 3, 333, 187, 82, 86]);
 const filterDarkContrastHigh = toFilter([68, 6, 108, 187, 104, 88]);
 
+const filterLightDisabled = toFilter([63, 8, 108, 188, 94, 86]);
+const filterDarkDisabled = toFilter([52, 6, 135, 187, 94, 89]);
+
 const filterLightNotificationSuccess = toFilter([28, 89, 572, 71, 111, 98]);
 const filterLightNotificationWarning = toFilter([58, 53, 820, 12, 112, 103]);
 const filterLightNotificationError = toFilter([14, 75, 4140, 347, 100, 97]);
@@ -4913,7 +4876,7 @@ const sizeMap$2 = {
 const filter = {
     light: {
         primary: filterLightPrimary,
-        'state-disabled': filterLightContrastMedium,
+        'state-disabled': filterLightDisabled,
         'contrast-low': filterLightContrastLow,
         'contrast-medium': filterLightContrastMedium,
         'contrast-high': filterLightContrastHigh,
@@ -4924,7 +4887,7 @@ const filter = {
     },
     dark: {
         primary: filterDarkPrimary,
-        'state-disabled': filterDarkContrastMedium,
+        'state-disabled': filterDarkDisabled,
         'contrast-low': filterDarkContrastLow,
         'contrast-medium': filterDarkContrastMedium,
         'contrast-high': filterDarkContrastHigh,
@@ -5161,38 +5124,42 @@ const isFullscreenForXl = (fullscreen) => {
         const entries = Object.entries(fullscreenParsed);
         const [lastTrueBreakpoint] = entries.filter(([, val]) => val).pop() || [];
         const [lastFalseBreakpoint] = entries.filter(([, val]) => !val).pop() || [];
-        return BREAKPOINTS.indexOf(lastTrueBreakpoint) > BREAKPOINTS.indexOf(lastFalseBreakpoint);
+        return breakpoints.indexOf(lastTrueBreakpoint) > breakpoints.indexOf(lastFalseBreakpoint);
     }
 };
 const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
     const marginPx = `${-marginValue}px`;
-    const marginRem = pxToRemWithUnit(-marginValue);
     return Object.assign(Object.assign({ [`&(.${stretchToFullModalWidthClassName})`]: {
             width: `calc(100% + ${marginValue * 2}px)`,
             margin: `0 ${marginPx}`,
         } }, (!hasHeader && {
         [`&(.${stretchToFullModalWidthClassName}:first-child)`]: {
-            marginTop: hasDismissButton ? marginRem : marginPx,
+            marginTop: hasDismissButton ? pxToRemWithUnit(-marginValue) : marginPx,
         },
     })), { [`&(.${stretchToFullModalWidthClassName}:last-child)`]: {
             marginBottom: marginPx,
         } });
 };
-const getComponentCss$x = (open, fullscreen, hasDismissButton, hasHeader) => {
-    const isFullscreenForXlAndXxl = isFullscreenForXl(fullscreen);
+const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) => {
+    const isFullscreenForXlAndXxl = isFullscreenForXl(isFullscreen);
+    const duration = isOpen ? '.6s' : '.2s';
     return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle()), { zIndex: MODAL_Z_INDEX, display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }), (open
+            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle()), { zIndex: MODAL_Z_INDEX, display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }), (isOpen
                 ? {
-                    opacity: 1,
                     visibility: 'inherit',
                 }
                 : {
-                    opacity: 0,
                     visibility: 'hidden',
+                    transition: 'visibility 0s linear .2s',
                 })), hostHiddenStyles), { 
                 // workaround via pseudo element to fix stacking (black) background in safari
-                '&::before': Object.assign(Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading }), frostedGlassStyle), { pointerEvents: 'none' }) }))), { overflowY: 'auto' }),
-            '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(fullscreen, (fullscreenValue) => ({
+                '&::before': Object.assign(Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading, pointerEvents: 'none' }), (isOpen
+                    ? Object.assign({ opacity: 1 }, frostedGlassStyle) : {
+                    opacity: 0,
+                    backdropFilter: 'blur(0px)',
+                    WebkitBackdropFilter: 'blur(0px)',
+                })), { transition: `opacity ${duration} ${transitionTimingFunction}, backdrop-filter ${duration} ${transitionTimingFunction},--webkit-backdrop-filter ${duration} ${transitionTimingFunction}` }) }))), { overflowY: 'auto' }),
+            '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
                 [`&(.${stretchToFullModalWidthClassName}`]: {
                     '&:first-child)': {
                         borderRadius: fullscreenValue ? 0 : '8px 8px 0 0',
@@ -5206,19 +5173,20 @@ const getComponentCss$x = (open, fullscreen, hasDismissButton, hasHeader) => {
         }, root: mergeDeep({
             position: 'relative',
             boxSizing: 'border-box',
-            transition: `transform .6s ${transitionTimingFunction}`,
-            transform: open ? 'scale3d(1,1,1)' : 'scale3d(.9,.9,1)',
+            transform: isOpen ? 'scale3d(1,1,1)' : 'scale3d(.9,.9,1)',
+            opacity: isOpen ? 1 : 0,
+            transition: `opacity ${duration} ${transitionTimingFunction},transform ${duration} ${transitionTimingFunction}`,
             padding: hasDismissButton ? `${pxToRemWithUnit(32)} 32px 32px 32px` : '32px',
             background: backgroundColor,
             outline: 0,
-            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid`, pointerEvents: 'none' }, buildResponsiveStyles(fullscreen, (fullscreenValue) => (Object.assign({ borderRadius: fullscreenValue ? 0 : '12px', borderColor: fullscreenValue ? lightThemePrimaryColor : darkThemePrimaryColor }, getInsetJssStyle(fullscreenValue ? 0 : -4))))),
+            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid`, pointerEvents: 'none' }, buildResponsiveStyles(isFullscreen, (fullscreenValue) => (Object.assign({ borderRadius: fullscreenValue ? 0 : '12px', borderColor: fullscreenValue ? lightThemePrimaryColor : darkThemePrimaryColor }, getInsetJssStyle(fullscreenValue ? 0 : -4))))),
             '&:not(:focus-visible)::before': {
                 border: 0,
             },
             [mediaQueryXl]: {
                 margin: isFullscreenForXlAndXxl ? 0 : `min(192px, 10vh) ${gridExtendedOffsetBase}`,
             },
-        }, buildResponsiveStyles(fullscreen, getFullscreenJssStyles)) }, (hasHeader && {
+        }, buildResponsiveStyles(isFullscreen, getFullscreenJssStyles)) }, (hasHeader && {
         header: {
             padding: '0 0 8px',
         },
@@ -6338,6 +6306,26 @@ const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
 
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
 const cssVariablePositionBottomInternal = '--p-internal-toast-position-bottom';
+const easeInQuad = 'cubic-bezier(0.45,0,0.55,1)';
+const easeOutQuad = 'cubic-bezier(0.5,1,0.89,1)';
+const ANIMATION_DURATION = 600;
+const duration = `${ANIMATION_DURATION}ms`;
+const getKeyframes = (direction, outsideStyle) => {
+    const insideStyle = { opacity: 1, transform: 'translate3d(0,0,0)' };
+    return direction === 'in'
+        ? {
+            from: outsideStyle,
+            to: insideStyle,
+        }
+        : {
+            from: insideStyle,
+            to: outsideStyle,
+        };
+};
+const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
+    opacity: 0,
+    transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
+});
 const toastCloseClassName = 'close';
 const getComponentCss$1 = () => {
     return getCss({
@@ -6354,8 +6342,12 @@ const getComponentCss$1 = () => {
             '@keyframes in': getKeyframesMobile('in', cssVariablePositionBottomInternal),
             '@keyframes out': getKeyframesMobile('out', cssVariablePositionBottomInternal),
         },
-        hydrated: getAnimationIn('in', "production" !== 'production'  ),
-        [toastCloseClassName]: getAnimationOut('out'),
+        hydrated: {
+            animation: `${duration} $in ${easeInQuad} forwards`,
+        },
+        [toastCloseClassName]: {
+            animation: addImportantToRule(`${ANIMATION_DURATION}ms $out ${easeOutQuad} forwards`),
+        },
     });
 };
 

package/ssr/components/dist/utils/esm/utils-entry.js

@@ -81,9 +81,6 @@ hasWindow &&
             .forEach((mutation) => { var _a; return (_a = attributeMutationMap.get(mutation.target)) === null || _a === void 0 ? void 0 : _a(); });
     });
 
-// TODO: resolve overlap with Breakpoint type from utilities package
-const BREAKPOINTS = ['base', 'xs', 's', 'm', 'l', 'xl'];
-
 const borderWidthBase = '2px';
 
 const themeLightStateFocus = '#1A44EA';
@@ -135,6 +132,8 @@ function getMediaQueryMin(min) {
     return `@media(min-width:${breakpoint[min]}px)`;
 }
 
+const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+
 const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
@@ -148,10 +147,7 @@ const textSmallStyle = {
     ...fontHyphenationStyle,
 };
 
-// TODO: we shouldn't exclude xxl breakpoint
-const mediaQueries = Object.entries(breakpoint)
-    .filter(([key]) => key !== 'xxl')
-    .map(([, val]) => `(min-width:${val}px)`);
+const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
 hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
 Object.entries(breakpoint).reduce((result, [key, val]) => (Object.assign(Object.assign({}, result), { [`${val}px`]: key })), {});
@@ -3692,7 +3688,7 @@ const formatObjectOutput = (value) => {
         .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
 };
 'value, ' +
-    formatObjectOutput(BREAKPOINTS.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
+    formatObjectOutput(breakpoints.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const resizeMap = new Map();
@@ -4094,7 +4090,6 @@ const getTextTagType = (host, tag) => {
     }
 };
 
-exports.BREAKPOINTS = BREAKPOINTS;
 exports.DISPLAY_TAGS = DISPLAY_TAGS;
 exports.HEADING_TAGS = HEADING_TAGS;
 exports.HEADLINE_TAGS = HEADLINE_TAGS;

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/accordion.wrapper.js

@@ -6,10 +6,10 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var accordion = require('../dsr-components/accordion.js');
 
-const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onChange, open, size = 'small', tag = 'h2', theme = 'light', className, children, ...rest }, ref) => {
+const PAccordion = react.forwardRef(({ compact, heading, onAccordionChange, onUpdate, open, size = 'small', tag = 'h2', theme = 'light', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'accordionChange', onAccordionChange);
-    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-accordion');
     const propsToSync = [compact, heading, open, size, tag, theme];
     hooks.useBrowserLayoutEffect(() => {

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/components/banner.wrapper.js

@@ -6,14 +6,14 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var banner = require('../dsr-components/banner.js');
 
-const PBanner = react.forwardRef(({ description = '', heading = '', onDismiss, persistent = false, state = 'info', theme = 'light', width = 'extended', className, children, ...rest }, ref) => {
+const PBanner = react.forwardRef(({ description = '', dismissButton = true, heading = '', onDismiss, open = false, persistent, state = 'info', theme = 'light', width, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
-    const propsToSync = [description, heading, persistent, state, theme, width];
+    const propsToSync = [description, dismissButton, heading, open, persistent, state, theme, width];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'heading', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'open', 'persistent', 'state', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     // @ts-ignore
     if (!process.browser) {
@@ -24,7 +24,7 @@ const PBanner = react.forwardRef(({ description = '', heading = '', onDismiss, p
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(banner.DSRBanner, { ...{ description, heading, persistent, state, theme, width, children } })),
+                children: (jsxRuntime.jsx(banner.DSRBanner, { ...{ description, dismissButton, heading, open, persistent, state, theme, width, children } })),
             }
             : {
                 children,

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

@@ -6,10 +6,10 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var carousel = require('../dsr-components/carousel.js');
 
-const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onChange, pagination = true, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, children, ...rest }, ref) => {
+const PCarousel = react.forwardRef(({ activeSlideIndex = 0, alignHeader = 'left', description, disablePagination, heading, intl, onCarouselChange, onUpdate, pagination = true, rewind = true, slidesPerPage = 1, theme = 'light', width = 'basic', wrapContent, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'carouselChange', onCarouselChange);
-    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-carousel');
     const propsToSync = [activeSlideIndex, alignHeader, description, disablePagination, heading, intl, pagination, rewind, slidesPerPage, theme, width, wrapContent];
     hooks.useBrowserLayoutEffect(() => {

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

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

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

@@ -6,10 +6,10 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var pagination = require('../dsr-components/pagination.js');
 
-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, }, onChange, onPageChange, 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, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     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, theme, totalItemsCount];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -6,10 +6,10 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var segmentedControl = require('../dsr-components/segmented-control.js');
 
-const PSegmentedControl = react.forwardRef(({ backgroundColor, onChange, onSegmentedControlChange, theme = 'light', value, className, children, ...rest }, ref) => {
+const PSegmentedControl = react.forwardRef(({ backgroundColor, onSegmentedControlChange, onUpdate, theme = 'light', value, className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');
     const propsToSync = [backgroundColor, theme, value];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -6,10 +6,10 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var stepperHorizontal = require('../dsr-components/stepper-horizontal.js');
 
-const PStepperHorizontal = react.forwardRef(({ onChange, onStepChange, size = 'small', theme = 'light', className, children, ...rest }, ref) => {
+const PStepperHorizontal = react.forwardRef(({ onStepChange, onUpdate, size = 'small', theme = 'light', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'stepChange', onStepChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal');
     const propsToSync = [size, theme];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -6,10 +6,10 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var _switch = require('../dsr-components/switch.js');
 
-const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onChange, onSwitchChange, stretch = false, theme = 'light', className, children, ...rest }, ref) => {
+const PSwitch = react.forwardRef(({ alignLabel = 'right', checked = false, disabled = false, hideLabel = false, loading = false, onSwitchChange, onUpdate, stretch = false, theme = 'light', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     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];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -6,10 +6,10 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var table = require('../dsr-components/table.js');
 
-const PTable = react.forwardRef(({ caption, onChange, onSortingChange, theme = 'light', className, children, ...rest }, ref) => {
+const PTable = react.forwardRef(({ caption, onSortingChange, onUpdate, theme = 'light', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'sortingChange', onSortingChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-table');
     const propsToSync = [caption, theme];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -6,10 +6,10 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var tabsBar = require('../dsr-components/tabs-bar.js');
 
-const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onChange, onTabChange, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
+const PTabsBar = react.forwardRef(({ activeTabIndex, gradientColor = 'background-base', gradientColorScheme, onTabChange, onUpdate, size = 'small', theme = 'light', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     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];
     hooks.useBrowserLayoutEffect(() => {

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

@@ -6,10 +6,10 @@ var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 var tabs = require('../dsr-components/tabs.js');
 
-const PTabs = react.forwardRef(({ activeTabIndex = 0, gradientColor = 'background-base', gradientColorScheme, onChange, onTabChange, 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 = 'light', weight = 'regular', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
-    hooks.useEventCallback(elementRef, 'change', onChange);
     hooks.useEventCallback(elementRef, 'tabChange', onTabChange);
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
     const WebComponentTag = hooks.usePrefix('p-tabs');
     const propsToSync = [activeTabIndex, gradientColor, gradientColorScheme, size, theme, weight];
     hooks.useBrowserLayoutEffect(() => {

package/ssr/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.js

@@ -68,11 +68,14 @@ var stripFocusAndHoverStyles = require('../../stripFocusAndHoverStyles.js');
 var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-entry.js');
 
 class DSRBanner extends react.Component {
+    get hasDismissButton() {
+        return this.props.persistent ? false : this.props.dismissButton;
+    }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const hasTitleSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getBannerCss()));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(inlineNotification_wrapper.PInlineNotification, { heading: this.props.heading, description: this.props.description, state: this.props.state, persistent: this.props.persistent, theme: this.props.theme, children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsxRuntime.jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsxRuntime.jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsxRuntime.jsx("slot", { name: "description" })] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getBannerCss(this.props.open)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(inlineNotification_wrapper.PInlineNotification, { heading: this.props.heading, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": !this.props.open ? 'true' : 'false', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsxRuntime.jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsxRuntime.jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsxRuntime.jsx("slot", { name: "description" })] })] }), this.props.children] }));
     }
 }
 

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

@@ -72,7 +72,7 @@ class DSRButton extends react.Component {
     render() {
         splitChildren.splitChildren(this.props.children);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getButtonCss(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: utilsEntry.getLinkButtonThemeForIcon(this.props.variant, this.props.theme), aria: { 'aria-label': 'Loading state:' } })), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: utilsEntry.isDisabledOrLoading(this.props.disabled, this.props.loading) ? 'state-disabled' : 'primary', theme: utilsEntry.getLinkButtonThemeForIcon(this.props.variant, this.props.theme), "aria-hidden": "true" })), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { ...utilsEntry.getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, children: [this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: utilsEntry.getLinkButtonThemeForIcon(this.props.variant, this.props.theme), aria: { 'aria-label': 'Loading state:' } })), utilsEntry.hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: this.props.disabled ? (this.props.variant === 'primary' ? 'contrast-high' : 'state-disabled') : 'primary', theme: !this.props.disabled ? utilsEntry.getLinkButtonThemeForIcon(this.props.variant, this.props.theme) : this.props.theme, "aria-hidden": "true" })), jsxRuntime.jsx("span", { className: "label", children: jsxRuntime.jsx("slot", {}) })] })] }), this.props.children] }));
     }
 }
 

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

@@ -69,13 +69,16 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 var utilsEntry = require('../../../../../../components/dist/utils/esm/utils-entry.js');
 
 class DSRInlineNotification extends react.Component {
+    get hasDismissButton() {
+        return this.props.persistent ? false : this.props.dismissButton;
+    }
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const bannerId = 'banner';
         const labelId = 'label';
         const descriptionId = 'description';
-        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getInlineNotificationCss(this.props.state, !!this.props.actionLabel, !this.props.persistent, this.props.theme)));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getInlineNotificationIconName(this.props.state), color: `notification-${this.props.state}`, theme: this.props.theme, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { id: bannerId, className: "content", ...utilsEntry.getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) && jsxRuntime.jsx("h5", { id: labelId, children: this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }) }), jsxRuntime.jsx("p", { id: descriptionId, children: this.props.description || jsxRuntime.jsx("slot", {}) })] }), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", theme: this.props.theme, icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), !this.props.persistent && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", type: "button", icon: "close", theme: this.props.theme, hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
+        const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getInlineNotificationCss(this.props.state, !!this.props.actionLabel, this.hasDismissButton, this.props.theme)));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", name: utilsEntry.getInlineNotificationIconName(this.props.state), color: `notification-${this.props.state}`, theme: this.props.theme, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { id: bannerId, className: "content", ...utilsEntry.getContentAriaAttributes(this.props.state, labelId, descriptionId), children: [(this.props.heading || namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0) && jsxRuntime.jsx("h5", { id: labelId, children: this.props.heading || jsxRuntime.jsx("slot", { name: "heading" }) }), jsxRuntime.jsx("p", { id: descriptionId, children: this.props.description || jsxRuntime.jsx("slot", {}) })] }), this.props.actionLabel && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "action", theme: this.props.theme, icon: this.props.actionIcon, loading: this.props.actionLoading, children: this.props.actionLabel })), this.hasDismissButton && (jsxRuntime.jsx(buttonPure_wrapper.PButtonPure, { className: "close", type: "button", icon: "close", theme: this.props.theme, hideLabel: true, "aria-controls": bannerId, children: "Close notification" }))] })] }), this.props.children] }));
     }
 }
 

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

@@ -78,7 +78,7 @@ class DSRTabs extends react.Component {
             ? { ...child, props: { ...child.props, theme: this.props.theme, hidden: this.props.activeTabIndex !== i ? true : null } }
             : child);
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getTabsCss()));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(tabsBar_wrapper.PTabsBar, { className: "root", size: this.props.size, weight: this.props.weight, theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, gradientColor: this.props.gradientColor, activeTabIndex: this.props.activeTabIndex, children: otherChildren.map((tab, index) => (jsxRuntime.jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsxRuntime.jsx("slot", {})] })] }), manipulatedChildren] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(tabsBar_wrapper.PTabsBar, { className: "root", size: this.props.size, weight: this.props.weight, theme: this.props.theme, gradientColorScheme: this.props.gradientColorScheme, gradientColor: this.props.gradientColor, activeTabIndex: this.props.activeTabIndex, onUpdate: this.props.onTabsBarUpdate, children: otherChildren.map((tab, index) => (jsxRuntime.jsx("button", { type: "button", children: typeof tab === 'object' && 'props' in tab && tab.props.label }, index))) }), jsxRuntime.jsx("slot", {})] })] }), manipulatedChildren] }));
     }
 }