@porsche-design-system/components-react 3.10.0-rc.0 → 3.10.0-rc.1

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

@@ -3212,6 +3212,27 @@ const dropShadowHighStyle = {
 
 const themeLightStateFocus = '#1A44EA';
 
+const getFocusStyle = (opts) => {
+    const { borderRadius = 'small', offset = '2px' } = opts || {};
+    const outlineOffset = offset === 'small' ? '2px' : offset === 'none' ? 0 : offset || '2px';
+    const borderRadiusValue = borderRadius === 'small'
+        ? borderRadiusSmall
+        : borderRadius === 'medium'
+            ? borderRadiusMedium
+            : borderRadius || borderRadiusSmall;
+    return {
+        borderRadius: borderRadiusValue,
+        '&:focus': {
+            outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
+            outlineOffset,
+        },
+        // why? have a look at this article https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+        '&:focus:not(:focus-visible)': {
+            outlineColor: 'transparent',
+        },
+    };
+};
+
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 const fontHyphenationStyle = {
@@ -3459,6 +3480,11 @@ const headingXXLargeStyle = {
 const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
 const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
+const textXXSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextXXSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
+
 const textXSmallStyle = {
     font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
     ...fontHyphenationStyle,
@@ -3835,10 +3861,13 @@ const getResetInitialStylesForSlottedAnchor = {
 };
 const focusPseudoJssStyle = {
     outline: 0,
-    '&:focus::before': {
+    '&::before': {
+        // needs to be defined always to have correct custom click area
         content: '""',
         position: 'absolute',
         ...getInsetJssStyle(),
+    },
+    '&:focus::before': {
         borderRadius: '1px',
         outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
         outlineOffset: '2px',
@@ -4046,6 +4075,9 @@ const isThemeDark = (theme) => {
     return theme === 'dark';
 };
 
+const headerSlot = 'header';
+const anchorSlot = 'anchor';
+
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
         .replace(/"([a-zA-Z?]+)":/g, '$1:') // remove double quotes from keys
@@ -4058,7 +4090,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$12 = (size, compact, open, theme) => {
+const getComponentCss$13 = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, focusColor: focusColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -4201,7 +4233,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$11 = (isOpen) => {
+const getComponentCss$12 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -4264,7 +4296,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$10 = (direction) => {
+const getComponentCss$11 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4418,7 +4450,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     };
 };
 
-const getComponentCss$$ = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$10 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, false, theme), {
         root: {
@@ -4595,7 +4627,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$_ = (isDisabledOrLoading, ...args) => {
+const getComponentCss$$ = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4731,7 +4763,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$Z = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$_ = (icon, iconSource, variant, hideLabel, disabled, loading, 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');
@@ -4803,7 +4835,7 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$Y = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
+const getComponentCss$Z = (width, hasPagination, isInfinitePagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5211,7 +5243,7 @@ const getCheckedSVGBackgroundImage$1 = (fill) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$X = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$Y = (hideLabel, state, isDisabled, isLoading, theme) => {
     const { canvasColor } = getHighContrastColors();
     const checkedIconColor = isHighContrastMode
         ? canvasColor
@@ -5309,7 +5341,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$W = (width) => {
+const getComponentCss$X = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5351,7 +5383,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$V = () => {
+const getComponentCss$W = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -5439,7 +5471,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$U = (size, align, color, ellipsis, theme) => {
+const getComponentCss$V = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5459,7 +5491,7 @@ const getComponentCss$U = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$T = (color, orientation, theme) => {
+const getComponentCss$U = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -5502,7 +5534,7 @@ const getComponentCss$T = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$S = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$T = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5538,7 +5570,7 @@ const getComponentCss$S = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$R = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$S = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5584,7 +5616,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$Q = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$R = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -5606,7 +5638,7 @@ const getComponentCss$Q = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$P = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$Q = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -5634,7 +5666,7 @@ const frostedGlassBackgroundColorLight$1 = 'rgba(255, 255, 255, 0.79)';
 const frostedGlassBackgroundColorDark$1 = 'rgba(14, 14, 18, 0.79)';
 const scrollerWidthEnhancedView = 'clamp(338px, 10.52vw + 258px, 460px)';
 const mediaQueryEnhancedView = getMediaQueryMin('s');
-const getComponentCss$O = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$P = (isPrimaryScrollerVisible, isSecondaryScrollerVisible, theme) => {
     const { backgroundColor } = getThemedColors(theme);
     const { backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -5816,7 +5848,7 @@ const getContentJssStyle = () => {
 
 const frostedGlassBackgroundColorLight = 'rgba(238, 239, 242, 0.79)';
 const frostedGlassBackgroundColorDark = 'rgba(33, 34, 37, 0.79)';
-const getComponentCss$N = (isSecondaryScrollerVisible, theme) => {
+const getComponentCss$O = (isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, focusColor: focusColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     const frostedGlassBackgroundColor = isThemeDark(theme)
@@ -5996,7 +6028,7 @@ const getComponentCss$N = (isSecondaryScrollerVisible, theme) => {
 
 const headerShadowClass = 'header--shadow';
 const footerShadowClass$1 = 'footer--shadow';
-const getComponentCss$M = (isOpen, position, hasFooter, hasSubFooter, theme) => {
+const getComponentCss$N = (isOpen, position, hasFooter, hasSubFooter, theme) => {
     const { primaryColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark } = getThemedColors('dark');
     const isPositionStart = position === 'start';
@@ -6141,7 +6173,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$L = (size, offset) => {
+const getComponentCss$M = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -6161,7 +6193,7 @@ const getComponentCss$L = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$K = (direction, wrap) => {
+const getComponentCss$L = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6187,7 +6219,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$J = (size, align, color, ellipsis, theme) => {
+const getComponentCss$K = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6249,7 +6281,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$I = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$J = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6339,7 +6371,7 @@ const forceRerenderAnimationStyle = {
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
 const cssVariableFilter = '--p-internal-icon-filter';
-const getComponentCss$H = (color, size, theme) => {
+const getComponentCss$I = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -6439,7 +6471,7 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS$1 = getMediaQueryMax('s');
-const getComponentCss$G = (state, hasAction, hasClose, theme) => {
+const getComponentCss$H = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6472,7 +6504,7 @@ const getComponentCss$G = (state, hasAction, hasClose, theme) => {
     });
 };
 
-const getComponentCss$F = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$G = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { focusColor: focusColorDark } = getThemedColors('dark');
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), {
@@ -6516,7 +6548,7 @@ const getComponentCss$F = (icon, iconSource, active, stretch, size, hideLabel, a
     }));
 };
 
-const getComponentCss$E = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$F = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { focusColor: focusColorDark } = getThemedColors('dark');
     const { linkColor } = getHighContrastColors();
@@ -6576,7 +6608,7 @@ const getComponentCss$E = (icon, iconSource, variant, hideLabel, hasSlottedAncho
 // because it is created via Object.keys(MODEL_SIGNATURES_MANIFEST) would bundle the entire manifest into both chunks
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$D = (aspectRatio, weight, direction, hasDescription) => {
+const getComponentCss$E = (aspectRatio, weight, direction, hasDescription) => {
     const tileBaseStyles = getTileBaseStyles(aspectRatio);
     return getCss({
         ...tileBaseStyles,
@@ -6627,6 +6659,145 @@ const getComponentCss$D = (aspectRatio, weight, direction, hasDescription) => {
     });
 };
 
+const slottedAnchorSelector = `a[slot='${anchorSlot}']`;
+const getComponentCss$D = (hasLikeButton, hasSlottedAnchor, aspectRatio, theme) => {
+    const { primaryColor, contrastHighColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                position: 'relative',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ...addImportantToEachRule({
+                '::slotted': {
+                    '&(img), &(picture)': {
+                        display: 'block',
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        overflow: 'hidden',
+                        borderRadius: borderRadiusLarge,
+                    },
+                    ...(hasSlottedAnchor && {
+                        [`&(${slottedAnchorSelector})`]: {
+                            position: 'absolute',
+                            borderRadius: borderRadiusMedium,
+                            ...getInsetJssStyle(),
+                            zIndex: 1,
+                            textIndent: '-999999px', // Hide anchor label visually but still usable for a11y
+                        },
+                        // TODO: Refactor getFocusStyles to support slotted selector
+                        [`&(${slottedAnchorSelector}:focus)`]: {
+                            outline: `${borderWidthBase} solid ${themeLightStateFocus}`,
+                            outlineOffset: '2px',
+                        },
+                        [`&(${slottedAnchorSelector}:focus:not(:focus-visible))`]: {
+                            outlineColor: 'transparent',
+                        },
+                    }),
+                },
+            }),
+        },
+        ...(!hasSlottedAnchor && {
+            'link-overlay': {
+                position: 'absolute',
+                ...getInsetJssStyle(),
+                ...getFocusStyle({ borderRadius: 'medium' }),
+            },
+        }),
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            aspectRatio: '3 / 4',
+            ...buildResponsiveStyles(aspectRatio, (ratio) => ({
+                aspectRatio: ratio.replace(':', ' / '),
+            })),
+            overflow: 'hidden',
+            boxSizing: 'border-box',
+            borderRadius: borderRadiusMedium,
+            padding: spacingFluidSmall,
+            color: primaryColor,
+            backgroundColor: backgroundSurfaceColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: primaryColorDark,
+                backgroundColor: backgroundSurfaceColorDark,
+            }),
+            ...hoverMediaQuery({
+                '&:hover .image-container': {
+                    transform: 'scale3d(1.05,1.05,1.05)',
+                },
+            }),
+        },
+        header: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            fontSize: fontSizeTextXSmall,
+            [`& slot[name="${headerSlot}"]`]: {
+                display: 'block', // To ensure button positioning when slot is unused
+            },
+        },
+        ...(hasLikeButton && {
+            'like-button': {
+                height: 'fit-content',
+                position: 'relative',
+                zIndex: 2,
+                ...hoverMediaQuery({
+                    '&:hover': {
+                        cursor: 'pointer',
+                    },
+                }),
+            },
+        }),
+        'text-container': {
+            display: 'flex',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            margin: 'auto',
+        },
+        text: {
+            textAlign: 'center',
+            margin: 0,
+            '&__heading': {
+                ...headingSmallStyle,
+                paddingBottom: '2px',
+                minHeight: `calc(${fontLineHeight} * 2)`,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'flex-end',
+            },
+            '&__price, &__description': {
+                fontWeight: fontWeightRegular,
+            },
+            '&__price': {
+                ...textXSmallStyle,
+            },
+            '&__description': {
+                ...textXXSmallStyle,
+                color: contrastHighColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    color: contrastHighColorDark,
+                }),
+            },
+        },
+        'image-container': {
+            margin: `${spacingFluidSmall} auto ${spacingFluidXSmall} auto`,
+            padding: 0,
+            [getMediaQueryMin('s')]: {
+                padding: `0 ${spacingFluidMedium}`,
+            },
+            overflow: 'hidden',
+            aspectRatio: '8 / 9',
+            transition: getTransition('transform', 'moderate'),
+            maxHeight: '100%',
+        },
+    });
+};
+
 const getComponentCss$C = (...args) => {
     return getCss({
         ...getButtonLinkTileStyles(...args),
@@ -9899,39 +10070,40 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$12;
-exports.getBannerCss = getComponentCss$11;
-exports.getButtonCss = getComponentCss$Z;
-exports.getButtonGroupCss = getComponentCss$10;
-exports.getButtonPureCss = getComponentCss$$;
-exports.getButtonTileCss = getComponentCss$_;
-exports.getCarouselCss = getComponentCss$Y;
-exports.getCheckboxWrapperCss = getComponentCss$X;
-exports.getContentWrapperCss = getComponentCss$W;
-exports.getCrestCss = getComponentCss$V;
-exports.getDisplayCss = getComponentCss$U;
-exports.getDividerCss = getComponentCss$T;
-exports.getFieldsetCss = getComponentCss$R;
-exports.getFieldsetWrapperCss = getComponentCss$S;
-exports.getFlexCss = getComponentCss$P;
-exports.getFlexItemCss = getComponentCss$Q;
-exports.getFlyoutCss = getComponentCss$M;
-exports.getFlyoutNavigationCss = getComponentCss$O;
-exports.getFlyoutNavigationItemCss = getComponentCss$N;
+exports.getAccordionCss = getComponentCss$13;
+exports.getBannerCss = getComponentCss$12;
+exports.getButtonCss = getComponentCss$_;
+exports.getButtonGroupCss = getComponentCss$11;
+exports.getButtonPureCss = getComponentCss$10;
+exports.getButtonTileCss = getComponentCss$$;
+exports.getCarouselCss = getComponentCss$Z;
+exports.getCheckboxWrapperCss = getComponentCss$Y;
+exports.getContentWrapperCss = getComponentCss$X;
+exports.getCrestCss = getComponentCss$W;
+exports.getDisplayCss = getComponentCss$V;
+exports.getDividerCss = getComponentCss$U;
+exports.getFieldsetCss = getComponentCss$S;
+exports.getFieldsetWrapperCss = getComponentCss$T;
+exports.getFlexCss = getComponentCss$Q;
+exports.getFlexItemCss = getComponentCss$R;
+exports.getFlyoutCss = getComponentCss$N;
+exports.getFlyoutNavigationCss = getComponentCss$P;
+exports.getFlyoutNavigationItemCss = getComponentCss$O;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$K;
-exports.getGridItemCss = getComponentCss$L;
-exports.getHeadingCss = getComponentCss$J;
-exports.getHeadlineCss = getComponentCss$I;
-exports.getIconCss = getComponentCss$H;
-exports.getInlineNotificationCss = getComponentCss$G;
-exports.getLinkCss = getComponentCss$E;
-exports.getLinkPureCss = getComponentCss$F;
-exports.getLinkSocialCss = getComponentCss$E;
+exports.getGridCss = getComponentCss$L;
+exports.getGridItemCss = getComponentCss$M;
+exports.getHeadingCss = getComponentCss$K;
+exports.getHeadlineCss = getComponentCss$J;
+exports.getIconCss = getComponentCss$I;
+exports.getInlineNotificationCss = getComponentCss$H;
+exports.getLinkCss = getComponentCss$F;
+exports.getLinkPureCss = getComponentCss$G;
+exports.getLinkSocialCss = getComponentCss$F;
 exports.getLinkTileCss = getComponentCss$C;
-exports.getLinkTileModelSignatureCss = getComponentCss$D;
+exports.getLinkTileModelSignatureCss = getComponentCss$E;
+exports.getLinkTileProductCss = getComponentCss$D;
 exports.getMarqueCss = getComponentCss$B;
 exports.getModalCss = getComponentCss$A;
 exports.getModelSignatureCss = getComponentCss$z;

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

@@ -3566,6 +3566,8 @@ const hasDocument = typeof document !== 'undefined';
 const isThemeDark = (theme) => {
     return theme === 'dark';
 };
+const headerSlot = 'header';
+const anchorSlot = 'anchor';
 
 const formatObjectOutput = (value) => {
     return JSON.stringify(value)
@@ -3918,6 +3920,7 @@ exports.HEADING_TAGS = HEADING_TAGS;
 exports.HEADLINE_TAGS = HEADLINE_TAGS;
 exports.TEXT_TAGS = TEXT_TAGS;
 exports._hasShowPickerSupport = _hasShowPickerSupport;
+exports.anchorSlot = anchorSlot;
 exports.attributeMutationMap = attributeMutationMap;
 exports.buildCrestImgSrc = buildCrestImgSrc;
 exports.buildCrestSrcSet = buildCrestSrcSet;
@@ -3959,6 +3962,7 @@ exports.hasLocateAction = hasLocateAction;
 exports.hasSpecificSlottedTag = hasSpecificSlottedTag;
 exports.hasVisibleIcon = hasVisibleIcon;
 exports.hasWindow = hasWindow;
+exports.headerSlot = headerSlot;
 exports.isCustomDropdown = isCustomDropdown;
 exports.isDisabledOrLoading = isDisabledOrLoading;
 exports.isInfinitePagination = isInfinitePagination;

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link-tile-product.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 linkTileProduct = require('../dsr-components/link-tile-product.cjs');
+
+const PLinkTileProduct = react.forwardRef(({ aspectRatio = '3:4', description, heading, href, likeButton = true, liked = false, onLike, price, rel, target = '_self', theme, className, children, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'like', onLike);
+    const WebComponentTag = hooks.usePrefix('p-link-tile-product');
+    const propsToSync = [aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme || hooks.useTheme()];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['aspectRatio', 'description', 'heading', 'href', 'likeButton', 'liked', 'price', 'rel', 'target', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsxRuntime.jsx(linkTileProduct.DSRLinkTileProduct, { aspectRatio, description, heading, href, likeButton, liked, price, rel, target, theme: theme || hooks.useTheme(), children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PLinkTileProduct = PLinkTileProduct;

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

@@ -31,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -31,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -31,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -32,6 +32,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -31,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -31,6 +31,7 @@ var linkPure_wrapper = require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -31,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');

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

@@ -31,6 +31,7 @@ require('../components/link-pure.wrapper.cjs');
 require('../components/link-social.wrapper.cjs');
 require('../components/link-tile.wrapper.cjs');
 require('../components/link-tile-model-signature.wrapper.cjs');
+require('../components/link-tile-product.wrapper.cjs');
 require('../components/marque.wrapper.cjs');
 require('../components/modal.wrapper.cjs');
 require('../components/model-signature.wrapper.cjs');