@porsche-design-system/components-react 3.19.0-rc.1 → 3.19.0-rc.2

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

@@ -3953,7 +3953,7 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
-const getComponentCss$18 = (size, compact, open, theme, sticky) => {
+const getComponentCss$19 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4123,7 +4123,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$17 = (isOpen) => {
+const getComponentCss$18 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4195,7 +4195,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$16 = (direction) => {
+const getComponentCss$17 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4348,7 +4348,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$15 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$16 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4386,7 +4386,7 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$14 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$15 = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4653,7 +4653,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$13 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$14 = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4714,7 +4714,7 @@ const gridProductiveGap = gridGap.replace('36px', '24px');
 const mediaQueryDesktopView = getMediaQueryMin('m');
 const sidebarWidth = '320px';
 const headerHeight = 'calc(1.5rem + 28px)';
-const getComponentCss$12 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$13 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -4955,7 +4955,7 @@ const getGradient$1 = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$11 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
+const getComponentCss$12 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5401,26 +5401,17 @@ const getFunctionalComponentStateMessageStyles = (theme, state, additionalDefaul
     };
 };
 
-const getCheckedSVGBackgroundImage$1 = (fill) => {
+const getCheckedSVGBackgroundImage$2 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
 };
-const getIndeterminateSVGBackgroundImage = (fill) => {
+const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
-    const { canvasColor } = getHighContrastColors();
-    const checkedIconColor = isHighContrastMode
-        ? canvasColor
-        : escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
-    const checkedIconColorDark = isHighContrastMode
-        ? canvasColor
-        : escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
-    const indeterminateIconColor = isHighContrastMode
-        ? canvasColor
-        : escapeHashCharacter(getThemedColors(theme).primaryColor);
-    const indeterminateIconColorDark = isHighContrastMode
-        ? canvasColor
-        : escapeHashCharacter(getThemedColors('dark').primaryColor);
+const getComponentCss$11 = (hideLabel, state, isDisabled, isLoading, theme) => {
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
+    const indeterminateIconColorDark = escapeHashCharacter(getThemedColors('dark').primaryColor);
     return getCss({
         '@global': {
             ':host': {
@@ -5441,16 +5432,30 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
                     // TODO: is it somehow useful possible to make following styles configurable by parameter?
                     ...(!isLoading && {
                         '&(input:checked)': {
-                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+                            backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColor),
                             ...prefersColorSchemeDarkMediaQuery(theme, {
-                                backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+                                backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColorDark),
                             }),
+                            // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+                            ...(isHighContrastMode &&
+                                getSchemedHighContrastMediaQuery({
+                                    backgroundImage: getCheckedSVGBackgroundImage$2('white'),
+                                }, {
+                                    backgroundImage: getCheckedSVGBackgroundImage$2('black'),
+                                })),
                         },
                         '&(input:indeterminate)': {
-                            backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColor),
+                            backgroundImage: getIndeterminateSVGBackgroundImage$1(indeterminateIconColor),
                             ...prefersColorSchemeDarkMediaQuery(theme, {
-                                backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColorDark),
+                                backgroundImage: getIndeterminateSVGBackgroundImage$1(indeterminateIconColorDark),
                             }),
+                            // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+                            ...(isHighContrastMode &&
+                                getSchemedHighContrastMediaQuery({
+                                    backgroundImage: getIndeterminateSVGBackgroundImage$1('black'),
+                                }, {
+                                    backgroundImage: getIndeterminateSVGBackgroundImage$1('white'),
+                                })),
                         },
                     }),
                 },
@@ -5498,6 +5503,216 @@ const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
     });
 };
 
+const getCheckedSVGBackgroundImage$1 = (fill) => {
+    return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`);
+};
+const getIndeterminateSVGBackgroundImage = (fill) => {
+    return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
+};
+const getComponentCss$10 = (hideLabel, state, isDisabled, isLoading, theme) => {
+    const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    const { canvasTextColor } = getHighContrastColors();
+    const disabledOrLoading = isDisabledOrLoading(isDisabled, isLoading);
+    // TODO: needs to be extracted into a color function
+    const uncheckedColor = disabledOrLoading ? disabledColor : formStateColor || contrastMediumColor;
+    const uncheckedColorDark = disabledOrLoading ? disabledColorDark : formStateColorDark || contrastMediumColorDark;
+    const uncheckedHoverColor = formStateHoverColor || primaryColor;
+    const uncheckedHoverColorDark = formStateHoverColorDark || primaryColorDark;
+    const checkedColor = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColor
+            : formStateColor || primaryColor;
+    const checkedColorDark = isHighContrastMode
+        ? canvasTextColor
+        : disabledOrLoading
+            ? disabledColorDark
+            : formStateColorDark || primaryColorDark;
+    const checkedHoverColor = formStateHoverColor || contrastHighColor;
+    const checkedHoverColorDark = formStateHoverColorDark || contrastHighColorDark;
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    const indeterminateIconColor = escapeHashCharacter(disabledOrLoading ? disabledColorDark : formStateColor || primaryColor);
+    const indeterminateIconColorDark = escapeHashCharacter(formStateColorDark || primaryColorDark);
+    const indeterminateIconHoverColor = escapeHashCharacter(formStateHoverColor || primaryColor);
+    const indeterminateIconHoverColorDark = escapeHashCharacter(formStateHoverColorDark || primaryColorDark);
+    const background = `transparent 0% 0% / ${fontLineHeight}`;
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            input: {
+                width: fontLineHeight,
+                height: fontLineHeight,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                display: 'block',
+                margin: 0,
+                padding: 0,
+                WebkitAppearance: 'none', // iOS safari
+                appearance: 'none',
+                boxSizing: 'content-box',
+                background,
+                transition: `${getTransition('background-color')}, ${getTransition('border-color')}`,
+                border: `${borderWidthBase} solid ${uncheckedColor}`,
+                outline: 0, // TODO: only relevant for VRT testing with forced states - prevents :focus style (in case getFocusJssStyle() condition is not matching)
+                ...(disabledOrLoading
+                    ? {
+                        pointerEvents: 'none', // to prevent form element becomes clickable/toggleable
+                    }
+                    : {
+                        cursor: 'pointer',
+                    }),
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: uncheckedColorDark,
+                }),
+                gridArea: '1/1',
+                borderRadius: borderRadiusSmall,
+            },
+            ...(!isLoading
+                ? {
+                    'input:checked': {
+                        borderColor: checkedColor,
+                        backgroundColor: checkedColor,
+                        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+                            borderColor: checkedColorDark,
+                            backgroundColor: checkedColorDark,
+                        }),
+                        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+                        ...(isHighContrastMode &&
+                            getSchemedHighContrastMediaQuery({
+                                backgroundImage: getCheckedSVGBackgroundImage$1('white'),
+                            }, {
+                                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
+                            })),
+                    },
+                    'input:indeterminate': {
+                        background, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                        borderColor: uncheckedColor, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                        backgroundImage: getIndeterminateSVGBackgroundImage(indeterminateIconColor),
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundImage: getIndeterminateSVGBackgroundImage(disabledOrLoading ? indeterminateIconColor : indeterminateIconColorDark),
+                            borderColor: uncheckedColorDark, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                            backgroundColor: 'transparent', // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                        }),
+                        // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+                        ...(isHighContrastMode &&
+                            getSchemedHighContrastMediaQuery({
+                                backgroundImage: getIndeterminateSVGBackgroundImage('black'),
+                            }, {
+                                backgroundImage: getIndeterminateSVGBackgroundImage('white'),
+                            })),
+                    },
+                }
+                : {
+                    'input:checked': {
+                        // background-image is merged in later
+                        borderColor: checkedColor,
+                        backgroundColor: checkedColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: checkedColorDark,
+                            backgroundColor: checkedColorDark,
+                        }),
+                    },
+                }),
+            ...(!disabledOrLoading &&
+                !isHighContrastMode &&
+                hoverMediaQuery({
+                    'input:hover,label:hover~.wrapper input': {
+                        borderColor: uncheckedHoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: uncheckedHoverColorDark,
+                        }),
+                    },
+                    'input:checked:hover,label:hover~.wrapper input:checked': {
+                        borderColor: checkedHoverColor,
+                        backgroundColor: checkedHoverColor,
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            borderColor: checkedHoverColorDark,
+                            backgroundColor: checkedHoverColorDark,
+                        }),
+                    },
+                    'input:indeterminate:hover,label:hover~.wrapper input:indeterminate': {
+                        background, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                        borderColor: uncheckedHoverColor, // Safari fix: ensures proper rendering of 'indeterminate' mode with 'checked' state.
+                        backgroundImage: getIndeterminateSVGBackgroundImage(escapeHashCharacter(indeterminateIconHoverColor)),
+                        ...prefersColorSchemeDarkMediaQuery(theme, {
+                            backgroundImage: getIndeterminateSVGBackgroundImage(escapeHashCharacter(indeterminateIconHoverColorDark)),
+                            borderColor: uncheckedHoverColorDark, // Safari fix: ensures proper rendering of 'indeterminate' mode
+                            backgroundColor: 'transparent',
+                        }),
+                    },
+                    'label:hover~.wrapper input': supportsChromiumMediaQuery({
+                        transition: 'unset', // Fixes chrome bug where transition properties are stuck on hover
+                    }),
+                })),
+            ...(!isDisabled && {
+                'input::-moz-focus-inner': {
+                    border: 0, // reset ua-style (for FF)
+                },
+                'input:focus': {
+                    outline: 0, // reset ua-style (for older browsers)
+                },
+                'input:focus-visible': {
+                    outline: `${borderWidthBase} solid ${focusColor}`,
+                    outlineOffset: '2px',
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        outlineColor: focusColorDark,
+                    }),
+                },
+            }),
+        },
+        root: {
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+            rowGap: spacingStaticXSmall,
+            ...(disabledOrLoading && {
+                cursor: 'not-allowed',
+            }),
+        },
+        wrapper: {
+            display: 'grid',
+            gridArea: '1/1',
+            alignSelf: 'flex-start', // in case label becomes multiline
+        },
+        ...(isLoading && {
+            spinner: {
+                position: 'relative', // ensure correct stacking, can be removed as soon as focus for input is handled with outline
+                gridArea: '1/1',
+                placeSelf: 'center',
+                width: fontLineHeight,
+                height: fontLineHeight,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                pointerEvents: 'none',
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled || isLoading, hideLabel, theme, {
+            gridArea: '1/2',
+            ...(isLoading && { pointerEvents: 'none' }), // prevent default htmlFor behavior. TODO: Remove as soon as label component for custom form components exists.
+        }, {
+            paddingTop: '2px', // compensate vertical alignment
+            paddingInlineStart: spacingStaticSmall, // asymmetric padding used instead of gap to prevent not clickable area between label and input
+        }),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state, {
+            gridColumn: '1/3',
+        }),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
+    });
+};
+
 const widthMap = {
     narrow: gridNarrowOffset,
     basic: gridBasicOffset,
@@ -8502,12 +8717,8 @@ const getCheckedSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
 const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, theme) => {
-    const checkedIconColor = isHighContrastMode
-        ? getHighContrastColors().canvasColor
-        : escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
-    const checkedIconColorDark = isHighContrastMode
-        ? getHighContrastColors().canvasColor
-        : escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     return getCss({
         '@global': {
             ':host': {
@@ -8532,6 +8743,13 @@ const getComponentCss$v = (hideLabel, state, isDisabled, isLoading, theme) => {
                             ...prefersColorSchemeDarkMediaQuery(theme, {
                                 backgroundImage: getCheckedSVGBackgroundImage(checkedIconColorDark),
                             }),
+                            // This is a workaround for Blink based browsers, which do not reflect the high contrast system colors (e.g.: "Canvas" and "CanvasText") when added to background SVG's.
+                            ...(isHighContrastMode &&
+                                getSchemedHighContrastMediaQuery({
+                                    backgroundImage: getCheckedSVGBackgroundImage('white'),
+                                }, {
+                                    backgroundImage: getCheckedSVGBackgroundImage('black'),
+                                })),
                         },
                     }),
                 },
@@ -10830,15 +11048,16 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$18;
-exports.getBannerCss = getComponentCss$17;
-exports.getButtonCss = getComponentCss$13;
-exports.getButtonGroupCss = getComponentCss$16;
-exports.getButtonPureCss = getComponentCss$15;
-exports.getButtonTileCss = getComponentCss$14;
-exports.getCanvasCss = getComponentCss$12;
-exports.getCarouselCss = getComponentCss$11;
-exports.getCheckboxWrapperCss = getComponentCss$10;
+exports.getAccordionCss = getComponentCss$19;
+exports.getBannerCss = getComponentCss$18;
+exports.getButtonCss = getComponentCss$14;
+exports.getButtonGroupCss = getComponentCss$17;
+exports.getButtonPureCss = getComponentCss$16;
+exports.getButtonTileCss = getComponentCss$15;
+exports.getCanvasCss = getComponentCss$13;
+exports.getCarouselCss = getComponentCss$12;
+exports.getCheckboxCss = getComponentCss$10;
+exports.getCheckboxWrapperCss = getComponentCss$11;
 exports.getContentWrapperCss = getComponentCss$$;
 exports.getCrestCss = getComponentCss$_;
 exports.getDisplayCss = getComponentCss$Z;

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

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

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

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

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

@@ -7,7 +7,7 @@ var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 var textarea = require('../dsr-components/textarea.cjs');
 
-const PTextarea = react.forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, ...rest }, ref) => {
+const PTextarea = react.forwardRef(({ autoComplete = '', description = '', disabled = false, form, hideLabel = false, label = '', maxLength, message = '', minLength, name, onBlur, onChange, onInput, placeholder = '', readOnly = false, required = false, resize = 'vertical', rows = 7, showCounter = true, spellCheck, state = 'none', theme, value = '', wrap = 'soft', className, children, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'blur', onBlur);
     hooks.useEventCallback(elementRef, 'change', onChange);
@@ -23,9 +23,10 @@ const PTextarea = react.forwardRef(({ autoComplete = '', description = '', disab
         // @ts-ignore
         ...(!process.browser
             ? {
-                children: (jsxRuntime.jsx(textarea.DSRTextarea, { autoComplete, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, showCounter, spellCheck, state, theme: theme || hooks.useTheme(), value, wrap })),
+                children: (jsxRuntime.jsx(textarea.DSRTextarea, { autoComplete, description, disabled, form, hideLabel, label, maxLength, message, minLength, name, placeholder, readOnly, required, resize, rows, showCounter, spellCheck, state, theme: theme || hooks.useTheme(), value, wrap, children })),
             }
             : {
+                children,
                 suppressHydrationWarning: true,
             }),
         'data-ssr': '',

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -10,6 +10,7 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 var crest_wrapper = require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');

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

@@ -9,6 +9,7 @@ require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
 require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
+require('../components/checkbox.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
 require('../components/crest.wrapper.cjs');