@porsche-design-system/components-react 3.29.0 → 3.30.0-rc.1

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

@@ -3882,7 +3882,7 @@ hasWindow &&
 const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-design-system";
 
 // index.ts
-var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
+var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "gt3-rs": { "src": "gt3-rs.03ac3ee.svg", "width": 238, "height": 25 }, "gt3": { "src": "gt3.bd3186c.svg", "width": 151, "height": 25 }, "gts": { "src": "gts.99bd35e.svg", "width": 121, "height": 25 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
 
 const hasDocument = typeof document !== 'undefined';
 
@@ -3925,7 +3925,7 @@ const formatObjectOutput = (value) => {
 
 const OPTION_LIST_SAFE_ZONE = 6;
 
-const getComponentCss$1l = (size, compact, open, theme, sticky) => {
+const getComponentCss$1n = (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';
@@ -4097,7 +4097,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$1k = (isOpen) => {
+const getComponentCss$1m = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4169,7 +4169,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1j = (direction) => {
+const getComponentCss$1l = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4322,7 +4322,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$1i = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$1k = (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: {
@@ -4360,12 +4360,17 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$1j = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
             ':host': {
-                display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
+                display: 'flex',
+                alignItems: 'stretch',
+                // Safari workaround to scale the tile properly
+                '@supports (-webkit-hyphens: auto)': {
+                    alignItems: 'baseline',
+                },
                 hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
@@ -4384,6 +4389,10 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
                     gridArea: `${isTopAligned ? 4 : 2}/2`,
                     zIndex: 3,
                 },
+                '&[name="footer"]': {
+                    gridRow: 2,
+                    zIndex: 3,
+                },
             },
             '::slotted(:is(img,picture,video))': addImportantToEachRule({
                 display: 'block',
@@ -4419,7 +4428,10 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
             })),
             cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
             width: '100%', // necessary in case tile content overflows in grid or flex context
-            height: '100%', // necessary in case tile content overflows in grid or flex context
+            // Safari workaround to scale the tile properly
+            '@supports (-webkit-hyphens: auto)': {
+                height: '100%',
+            },
             display: 'grid',
             gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
             ...(hasGradient &&
@@ -4463,21 +4475,23 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
         },
         footer: {
             gridArea: `${isTopAligned ? 2 : 4}/2`,
-            display: 'flex',
-            gap: spacingStaticMedium,
-            justifyContent: 'space-between',
             ...buildResponsiveStyles(compact, (compactValue) => compactValue
                 ? {
-                    alignItems: 'center',
-                    flexDirection: 'row',
+                    display: 'grid',
+                    gridTemplateColumns: '1fr auto',
+                    columnGap: spacingStaticMedium,
                 }
                 : {
-                    alignItems: 'flex-start',
+                    display: 'flex',
                     flexDirection: 'column',
+                    alignItems: 'start',
                 }),
         },
         'link-or-button-pure': {
             zIndex: 5,
+            gridColumn: 2,
+            gridRow: hasFooterSlot && !isTopAligned ? 2 : 1,
+            alignSelf: 'center',
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'inline-block' : 'none',
             })),
@@ -4485,6 +4499,7 @@ const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, back
         'link-or-button': {
             minHeight: '54px', // prevent content shift
             zIndex: 5,
+            marginTop: spacingStaticMedium,
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'none' : 'inline-block',
             })),
@@ -4529,7 +4544,8 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
     const scalingVar = `var(${cssVariableInternalScaling}, var(--p-internal-scaling-factor))`;
-    const borderCompensation = variant === 'ghost' ? `+ ${borderWidthBase}` : ''; // Compensate for missing border in ghost variant (Fixes border backdrop-filter blur rendering issue in safari)
+    const borderCompensation = variant === 'ghost' && !isHighContrastMode ? `+ ${borderWidthBase}` : ''; // Compensate for missing border in ghost variant (Fixes border backdrop-filter blur rendering issue in safari)
+    const borderStyle = `${borderWidthBase} solid ${borderColor}`;
     const paddingBlock = `calc(${scalingVar} * 0.8125 * ${SCALING_BASE_VALUE} ${borderCompensation})`; // 0.8125 * SCALING_BASE_VALUE corresponds to 13px
     const paddingInline = `max(calc(${scalingVar} * 1.625 * ${SCALING_BASE_VALUE} ${borderCompensation}), ${variant === 'ghost' ? '6px' : '4px'})`; // 1.625 * SCALING_BASE_VALUE corresponds to 26px
     const gap = `clamp(2px, calc(${scalingVar} * 0.5 * ${SCALING_BASE_VALUE}), 16px)`; // 0.5 * SCALING_BASE_VALUE corresponds to 8px
@@ -4561,8 +4577,11 @@ const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrL
             textDecoration: 'none',
             ...textSmallStyle,
             ...(variant === 'ghost'
-                ? { ...frostedGlassStyle, border: 'none' } // We can't use a border in the ghost variant due to rendering issues with backdrop-filter in safari
-                : { border: `${borderWidthBase} solid ${borderColor}` }),
+                ? {
+                    ...frostedGlassStyle,
+                    border: isHighContrastMode ? borderStyle : 'none',
+                } // We can't use a border in the ghost variant due to rendering issues with backdrop-filter in safari
+                : { border: borderStyle }),
             borderRadius: borderRadiusSmall,
             transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
             backgroundColor,
@@ -4630,7 +4649,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$1g = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$1i = (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');
@@ -4706,7 +4725,7 @@ const mediaQueryS$1 = getMediaQueryMin('s');
 const mediaQueryM = getMediaQueryMin('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const getComponentCss$1f = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$1h = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -5085,7 +5104,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$1e = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
+const getComponentCss$1g = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5537,13 +5556,13 @@ const getFunctionalComponentStateMessageStyles = (theme, state, additionalDefaul
     };
 };
 
-const getCheckedSVGBackgroundImage$2 = (fill) => {
+const getCheckedSVGBackgroundImage$3 = (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$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$1d = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$1f = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
@@ -5568,16 +5587,16 @@ const getComponentCss$1d = (hideLabel, state, isDisabled, isLoading, theme) => {
                     // TODO: is it somehow useful possible to make following styles configurable by parameter?
                     ...(!isLoading && {
                         '&(input:checked)': {
-                            backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColor),
+                            backgroundImage: getCheckedSVGBackgroundImage$3(checkedIconColor),
                             ...prefersColorSchemeDarkMediaQuery(theme, {
-                                backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColorDark),
+                                backgroundImage: getCheckedSVGBackgroundImage$3(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$3('white'),
                                 }, {
-                                    backgroundImage: getCheckedSVGBackgroundImage$2('black'),
+                                    backgroundImage: getCheckedSVGBackgroundImage$3('black'),
                                 })),
                         },
                         '&(input:indeterminate)': {
@@ -5700,7 +5719,7 @@ const getCheckboxBaseStyles = (theme, isDisabled, isLoading, state, compact) =>
     };
 };
 
-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 getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
@@ -5726,18 +5745,18 @@ const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
     return {
         borderColor: checkedColor,
         backgroundColor: checkedColor,
-        backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
+        backgroundImage: getCheckedSVGBackgroundImage$2(checkedIconColor),
         ...prefersColorSchemeDarkMediaQuery(theme, {
-            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColorDark),
+            backgroundImage: getCheckedSVGBackgroundImage$2(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$2('white'),
             }, {
-                backgroundImage: getCheckedSVGBackgroundImage$1('black'),
+                backgroundImage: getCheckedSVGBackgroundImage$2('black'),
             })),
     };
 };
@@ -5745,7 +5764,7 @@ const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$1c = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$1e = (hideLabel, state, isDisabled, isLoading, compact, 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);
@@ -6037,7 +6056,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
 const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
 // Determines the scaling factor for the input-number size. In "compact" mode, it uses 0.5 to achieve a 36px input-number (compact size).
 // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalInputBaseScaling`.
-const getScalingVar = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
+const getScalingVar$1 = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
 /**
  * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
  */
@@ -6047,7 +6066,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
  */
 const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
 const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, state, compact, readOnly, theme, additionalInputJssStyle) => {
-    const scalingVar = getScalingVar(compact);
+    const scalingVar = getScalingVar$1(compact);
     const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
     const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
     const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
@@ -6384,7 +6403,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$1b = (width) => {
+const getComponentCss$1d = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6426,7 +6445,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$1a = () => {
+const getComponentCss$1c = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6525,7 +6544,7 @@ const sizeMap$5 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$19 = (size, align, color, ellipsis, theme) => {
+const getComponentCss$1b = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6543,7 +6562,7 @@ const getComponentCss$19 = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$18 = (color, orientation, theme) => {
+const getComponentCss$1a = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6604,7 +6623,7 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-const getComponentCss$17 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$19 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6851,7 +6870,7 @@ const getComponentCss$17 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme
     });
 };
 
-const getComponentCss$16 = (isPrimary, isSecondary, isCascade) => {
+const getComponentCss$18 = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -7082,7 +7101,7 @@ const getComponentCss$16 = (isPrimary, isSecondary, isCascade) => {
     });
 };
 
-const getComponentCss$15 = (hasSlottedAnchor, isActive) => {
+const getComponentCss$17 = (hasSlottedAnchor, isActive) => {
     const anchorJssStyle = {
         all: 'unset',
         padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
@@ -7134,7 +7153,7 @@ const getComponentCss$15 = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$14 = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$16 = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7171,7 +7190,7 @@ const getComponentCss$14 = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$13 = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$15 = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7216,7 +7235,7 @@ const sizeMap$4 = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-const getComponentCss$12 = (size) => {
+const getComponentCss$14 = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7258,7 +7277,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$11 = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$13 = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7280,7 +7299,7 @@ const getComponentCss$11 = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$10 = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$12 = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7477,7 +7496,7 @@ const cssVarRefPaddingTop = '--ref-p-flyout-pt';
 const cssVarRefPaddingInline = '--ref-p-flyout-px';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$$ = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$11 = (isOpen, backdrop, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -7537,7 +7556,7 @@ const getComponentCss$$ = (isOpen, position, hasHeader, hasFooter, hasSubFooter,
                     },
                 }),
             },
-            dialog: getDialogJssStyle(isOpen, theme),
+            dialog: getDialogJssStyle(isOpen, theme, backdrop),
         },
         scroller: {
             ...getScrollerJssStyle(isPositionStart ? 'start' : 'end', theme),
@@ -7589,7 +7608,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$_ = (size, offset) => {
+const getComponentCss$10 = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7609,7 +7628,7 @@ const getComponentCss$_ = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$Z = (direction, wrap) => {
+const getComponentCss$$ = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7635,7 +7654,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$Y = (size, align, color, ellipsis, theme) => {
+const getComponentCss$_ = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7695,7 +7714,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$X = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$Z = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7806,7 +7825,7 @@ const isFlippableIcon = (name, source) => {
             name === 'return' ||
             name === 'send'));
 };
-const getComponentCss$W = (name, source, color, size, theme) => {
+const getComponentCss$Y = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -7925,7 +7944,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$V = (state, hasAction, hasClose, theme) => {
+const getComponentCss$X = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7972,7 +7991,7 @@ const getComponentCss$V = (state, hasAction, hasClose, theme) => {
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$W = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -7995,7 +8014,7 @@ const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$T = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$V = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8015,7 +8034,7 @@ const getComponentCss$T = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
+const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8040,7 +8059,7 @@ const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$R = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
+const getComponentCss$T = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             '&[type="text"]': {
@@ -8063,7 +8082,7 @@ const getComponentCss$R = (disabled, loading, hideLabel, state, toggle, compact,
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
+const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8087,7 +8106,7 @@ const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$R = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8107,7 +8126,7 @@ const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
+const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8133,7 +8152,7 @@ const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$N = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8156,7 +8175,7 @@ const getComponentCss$N = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8169,7 +8188,7 @@ const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnl
     });
 };
 
-const getComponentCss$L = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$N = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
             '::slotted': {
@@ -8198,7 +8217,7 @@ const getComponentCss$L = (icon, iconSource, active, stretch, size, hideLabel, a
 };
 
 const cssVariableInternalLinkScaling = '--p-internal-link-scaling';
-const getComponentCss$K = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
+const getComponentCss$M = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, compact, theme) => {
     const { linkColor } = getHighContrastColors();
     const isPrimary = variant === 'primary';
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, compact, cssVariableInternalLinkScaling, theme), {
@@ -8240,12 +8259,17 @@ const getComponentCss$K = (icon, iconSource, variant, hideLabel, hasSlottedAncho
     }));
 };
 
-const getComponentCss$J = (aspectRatio, weight, // to get deprecated semibold typed
+const getComponentCss$L = (aspectRatio, weight, // to get deprecated semibold typed
 direction, hasDescription) => {
     return getCss({
         '@global': {
             ':host': {
-                display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
+                display: 'flex',
+                alignItems: 'stretch',
+                // Safari workaround to scale the tile properly
+                '@supports (-webkit-hyphens: auto)': {
+                    alignItems: 'baseline',
+                },
                 hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
@@ -8305,7 +8329,10 @@ direction, hasDescription) => {
                 aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
             })),
             width: '100%', // necessary in case tile content overflows in grid or flex context
-            height: '100%', // necessary in case tile content overflows in grid or flex context
+            // Safari workaround to scale the tile properly
+            '@supports (-webkit-hyphens: auto)': {
+                height: '100%',
+            },
             display: 'grid',
             gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
             '&::after': {
@@ -8374,7 +8401,7 @@ const getMultilineEllipsis = (lineClamp) => {
         overflow: 'hidden',
     };
 };
-const getComponentCss$I = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
+const getComponentCss$K = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, hasDescription, aspectRatio, theme) => {
     const { primaryColor, contrastHighColor, contrastMediumColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     return getCss({
@@ -8513,13 +8540,18 @@ const getComponentCss$I = (hasLikeButton, hasSlottedAnchor, hasPriceOriginal, ha
     });
 };
 
-const getComponentCss$H = (aspectRatio, size, weight, // to get deprecated semibold typed
-background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$J = (aspectRatio, size, weight, // to get deprecated semibold typed
+background, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
             ':host': {
-                display: 'block', // `display: flex` would be more ideal, but doesn't work in Safari in all cases
+                display: 'flex',
+                alignItems: 'stretch',
+                // Safari workaround to scale the tile properly
+                '@supports (-webkit-hyphens: auto)': {
+                    alignItems: 'baseline',
+                },
                 hyphens: 'auto', // TODO: shouldn't we expose a CSS variable instead?
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
@@ -8538,6 +8570,10 @@ background, align, compact, hasGradient, isDisabled) => {
                     gridArea: `${isTopAligned ? 4 : 2}/2`,
                     zIndex: 3,
                 },
+                '&[name="footer"]': {
+                    gridRow: 2,
+                    zIndex: 3,
+                },
             },
             '::slotted(:is(img,picture,video))': addImportantToEachRule({
                 display: 'block',
@@ -8572,7 +8608,10 @@ background, align, compact, hasGradient, isDisabled) => {
                 aspectRatio: aspectRatioValue.replace(':', '/'), // mapping of the deprecated aspect-ratio with ':'
             })),
             width: '100%', // necessary in case tile content overflows in grid or flex context
-            height: '100%', // necessary in case tile content overflows in grid or flex context
+            // Safari workaround to scale the tile properly
+            '@supports (-webkit-hyphens: auto)': {
+                height: '100%',
+            },
             display: 'grid',
             gridTemplate: `${spacingFluidMedium} auto minmax(0px, 1fr) auto ${spacingFluidMedium}/${spacingFluidMedium} minmax(0px, 1fr) ${spacingFluidMedium}`,
             ...(hasGradient &&
@@ -8615,21 +8654,23 @@ background, align, compact, hasGradient, isDisabled) => {
         },
         footer: {
             gridArea: `${isTopAligned ? 2 : 4}/2`,
-            display: 'flex',
-            gap: spacingStaticMedium,
-            justifyContent: 'space-between',
             ...buildResponsiveStyles(compact, (compactValue) => compactValue
                 ? {
-                    alignItems: 'center',
-                    flexDirection: 'row',
+                    display: 'grid',
+                    gridTemplateColumns: '1fr auto',
+                    columnGap: spacingStaticMedium,
                 }
                 : {
-                    alignItems: 'flex-start',
+                    display: 'flex',
                     flexDirection: 'column',
+                    alignItems: 'start',
                 }),
         },
         'link-or-button-pure': {
             zIndex: 5,
+            gridColumn: 2,
+            gridRow: hasFooterSlot && !isTopAligned ? 2 : 1,
+            alignSelf: 'center',
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'inline-block' : 'none',
             })),
@@ -8637,6 +8678,7 @@ background, align, compact, hasGradient, isDisabled) => {
         'link-or-button': {
             minHeight: '54px', // prevent content shift
             zIndex: 5,
+            marginTop: spacingStaticMedium,
             ...buildResponsiveStyles(compact, (compactValue) => ({
                 display: compactValue ? 'none' : 'inline-block',
             })),
@@ -8654,7 +8696,7 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$G = (size) => {
+const getComponentCss$I = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8709,7 +8751,7 @@ const cssVariableSpacingBottom = '--p-modal-spacing-bottom'; // TODO: maybe --p-
 const safeZoneVertical = `calc(${spacingFluidSmall} + ${spacingFluidMedium})`;
 const safeZoneHorizontal = `${spacingFluidLarge}`;
 const cssClassNameStretchToFullModalWidth = 'stretch-to-full-modal-width';
-const getComponentCss$F = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
+const getComponentCss$H = (isOpen, backdrop, fullscreen, hasDismissButton, hasHeader, hasFooter, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8847,7 +8889,7 @@ const getThemedColor = (color, themedColors) => {
     };
     return colorMap[color];
 };
-const getComponentCss$E = (model, safeZone, size, color, theme) => {
+const getComponentCss$G = (model, safeZone, size, color, theme) => {
     const { width, height } = MODEL_SIGNATURES_MANIFEST[model];
     const isSizeInherit = size === 'inherit';
     return getCss({
@@ -8892,7 +8934,7 @@ const getComponentCss$E = (model, safeZone, size, color, theme) => {
 };
 
 const cssVarInternalMultiSelectOptionScaling = '--p-internal-multi-select-option-scaling';
-const getComponentCss$D = (theme, isDisabled, selected) => {
+const getComponentCss$F = (theme, isDisabled, selected) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8926,7 +8968,7 @@ const getComponentCss$D = (theme, isDisabled, selected) => {
 
 const cssVarInternalOptgroupScaling = '--p-internal-optgroup-scaling';
 const scalingVar = `var(${cssVarInternalOptgroupScaling}, 1)`;
-const getComponentCss$C = (isDisabled, theme) => {
+const getComponentCss$E = (isDisabled, theme) => {
     const { primaryColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
     const padding = `max(2px, ${scalingVar} * ${spacingStaticSmall}) max(4px, ${scalingVar} * 12px)`;
@@ -8965,7 +9007,7 @@ const getComponentCss$C = (isDisabled, theme) => {
 };
 
 const cssVarInternalMultiSelectScaling = '--p-internal-multi-select-scaling';
-const getComponentCss$B = (isOpen, isDisabled, hideLabel, state, compact, theme) => {
+const getComponentCss$D = (isOpen, isDisabled, hideLabel, state, compact, theme) => {
     const scalingVar = `var(${cssVarInternalMultiSelectScaling}, ${compact ? 0.5 : 1})`;
     return getCss({
         '@global': {
@@ -9015,7 +9057,7 @@ const disabledCursorStyle = {
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
 };
 const hiddenStyle = { display: 'none' };
-const getComponentCss$A = (activePage, pageTotal, showLastPage, theme) => {
+const getComponentCss$C = (activePage, pageTotal, showLastPage, theme) => {
     const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
     return getCss({
@@ -9151,41 +9193,29 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
     return [key, value];
 }));
 
-const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, theme) => {
-    const inputSize = `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`; // equivalent to calculation of input height within form-styles
+const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
+const getScalingVar = (compact) => `var(${cssVarInternalPinCodeScaling}, ${compact ? 0.5 : 1})`;
+const getComponentCss$B = (hideLabel, state, isDisabled, isLoading, length, compact, theme) => {
+    const scalingVar = getScalingVar(compact);
+    const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
+    const gap = `max(${spacingStaticXSmall}, ${scalingVar} * ${spacingStaticSmall})`;
+    const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
+    // Min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least.
+    const minWidth = `max(1rem, calc(${dimension} - ${borderWidthBase}*2 - ${paddingBlock}*2))`;
     const inputStyles = removeStyles('input[readonly]', removeSlottedSelector(getSlottedTextFieldTextareaSelectStyles('input', state, isLoading, theme, {
-        // TODO: move into getSlottedTextFieldTextareaSelectStyles()
-        padding: `${formElementPaddingVertical} ${spacingStaticXSmall}`,
         // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. textAlign=center|start
         textAlign: 'center',
-        // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. size=max|min
-        maxWidth: inputSize,
-        // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least.
-        minWidth: `calc(1rem + ${borderWidthBase}*2 + ${spacingStaticSmall}*2)`,
-        ...(length > 4 && {
-            [getMediaQueryMax('xs')]: {
-                // TODO: instead of having dedicated css rules depending on length we should try to implement a fluid one fits all solution
-                maxWidth: 'auto',
-                width: `calc((276px - (${spacingStaticSmall} * ${length - 1})) / ${length})`, // calculate the max with of the inputs that fit into grid in viewport base (276px)
-            },
-        }),
         // TODO: move into getSlottedTextFieldTextareaSelectStyles() via parameter, e.g. isLoading
         ...(isLoading && {
             opacity: 0.2, // TODO: not in sync with e.g. checkbox/radio-button loading style
             cursor: 'not-allowed',
         }),
-        // since @playwright/test@1.40.1 this does not work anymore in Webkit browser engine for unknown reasons
-        /* ...Object.fromEntries(
-          Array.from(Array(length)).map((_, i) => {
-            return [`&:nth-of-type(${i + 1})`, { gridArea: `1/${i + 1}` }];
-          })
-        ),*/
-        '&:nth-of-type(1)': { gridArea: '1/1' },
-        '&:nth-of-type(2)': { gridArea: '1/2' },
-        '&:nth-of-type(3)': { gridArea: '1/3' },
-        '&:nth-of-type(4)': { gridArea: '1/4' },
-        '&:nth-of-type(5)': { gridArea: '1/5' },
-        '&:nth-of-type(6)': { gridArea: '1/6' },
+        height: dimension,
+        minWidth,
+        maxWidth: dimension,
+        width: 'auto',
+        padding: paddingBlock,
+        boxSizing: 'content-box',
     })));
     return getCss({
         '@global': {
@@ -9205,17 +9235,20 @@ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, them
             gap: spacingStaticXSmall,
         },
         wrapper: {
+            position: 'relative',
             display: 'grid',
-            gridTemplateColumns: `repeat(${length}, minmax(auto, 1fr))`,
+            gridTemplateColumns: `repeat(${length}, 1fr)`,
             justifySelf: 'flex-start',
-            gap: spacingStaticSmall,
+            gap,
         },
         ...(isLoading && {
             spinner: {
-                gridArea: '1/1/1/-1',
-                placeSelf: 'center',
-                width: inputSize,
-                height: inputSize,
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: dimension,
+                height: dimension,
                 pointerEvents: 'none',
             },
         }),
@@ -9231,7 +9264,7 @@ const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, length, them
 const POPOVER_SAFE_ZONE = 8;
 
 const { canvasTextColor } = getHighContrastColors();
-const getComponentCss$y = (theme) => {
+const getComponentCss$A = (theme) => {
     const { hoverColor, backgroundColor, primaryColor, backgroundSurfaceColor } = getThemedColors(theme);
     const { hoverColor: hoverColorDark, primaryColor: primaryColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, } = getThemedColors('dark');
     const shadowColor = 'rgba(0,0,0,0.3)';
@@ -9335,10 +9368,10 @@ const getComponentCss$y = (theme) => {
     });
 };
 
-const getCheckedSVGBackgroundImage = (fill) => {
+const getCheckedSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
 };
-const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$z = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     return getCss({
@@ -9361,16 +9394,16 @@ const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, theme) => {
                     // TODO: is it somehow useful possible to make following styles configurable by paramter?
                     ...(!isLoading && {
                         '&(input:checked)': {
-                            backgroundImage: getCheckedSVGBackgroundImage(checkedIconColor),
+                            backgroundImage: getCheckedSVGBackgroundImage$1(checkedIconColor),
                             ...prefersColorSchemeDarkMediaQuery(theme, {
-                                backgroundImage: getCheckedSVGBackgroundImage(checkedIconColorDark),
+                                backgroundImage: getCheckedSVGBackgroundImage$1(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$1('white'),
                                 }, {
-                                    backgroundImage: getCheckedSVGBackgroundImage('black'),
+                                    backgroundImage: getCheckedSVGBackgroundImage$1('black'),
                                 })),
                         },
                     }),
@@ -9419,6 +9452,267 @@ const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, theme) => {
     });
 };
 
+const cssVarInternalRadioGroupOptionScaling = '--p-internal-radio-group-option-scaling';
+const getCheckedSVGBackgroundImage = (fill) => {
+    return getInlineSVGBackgroundImage(`<circle fill="${fill}" cx="12" cy="12" r="6"/>`);
+};
+const getComponentCss$y = (disabled, loading, state, 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(disabled, loading);
+    // 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 minDimension = `calc(${SCALING_BASE_VALUE} * 0.75)`;
+    const scalingVar = `var(${cssVarInternalRadioGroupOptionScaling}, 1)`;
+    const dimension = `max(${minDimension}, ${scalingVar} * (${fontLineHeight}))`;
+    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
+    const minimumTouchTargetSize = '24px'; // Minimum touch target size to comply with accessibility guidelines.
+    const touchTargetSizeDiff = `calc(${minimumTouchTargetSize} - ${dimensionFull})`; // Difference between the minimum touch target size and the radio button full size.
+    const inset = `calc(-${borderWidthBase} - max(0px, ${touchTargetSizeDiff} / 2))`; // Positions the radio button '::before' pseudo-element with a negative offset to align it with the touch target.
+    const paddingInlineStart = `calc(${spacingStaticSmall} - (max(0px, ${touchTargetSizeDiff})))`;
+    const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
+    const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
+    const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the radio button label relative to the radio button size.
+    const height = `calc(max(${fontLineHeight}, ${dimensionFull}))`; // Ensures the wrapper height matches either the font's line height or the full size of the radio-group, whichever is larger.
+    return getCss({
+        '@global': {
+            ':host': {
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+                display: 'block',
+            },
+            input: {
+                gridArea: '1/1',
+                borderRadius: '50%',
+                position: 'relative',
+                width: dimension,
+                height: dimension,
+                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: `transparent 0% 0% / ${fontLineHeight}`,
+                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,
+                }),
+                '&::before': {
+                    // Ensures the touch target is at least '24px', even if the radio button is smaller than the minimum touch target size.
+                    // This pseudo-element expands the clickable area without affecting the visual size of the radio button itself.
+                    content: '""',
+                    position: 'absolute',
+                    inset,
+                },
+            },
+            'input:checked': {
+                borderColor: checkedColor,
+                backgroundColor: checkedColor,
+                backgroundSize: dimension,
+                backgroundImage: getCheckedSVGBackgroundImage(checkedIconColor),
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    borderColor: checkedColorDark,
+                    backgroundColor: checkedColorDark,
+                    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'),
+                    })),
+            },
+            ...(!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,
+                        }),
+                    },
+                    'label:hover~.wrapper input': supportsChromiumMediaQuery({
+                        transition: 'unset', // Fixes a chrome bug where transition properties are stuck on hover
+                    }),
+                })),
+            ...(!disabled && {
+                '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,
+                    }),
+                },
+            }),
+            ...preventFoucOfNestedElementsStyles,
+        },
+        root: {
+            display: 'grid',
+            gridTemplateColumns: 'auto minmax(0, 1fr)',
+            rowGap: spacingStaticXSmall,
+        },
+        wrapper: {
+            ...textSmallStyle,
+            display: 'grid',
+            gridArea: '1/1',
+            minWidth: minimumTouchTargetSize,
+            minHeight: minimumTouchTargetSize,
+            justifyContent: 'center',
+            alignItems: 'center',
+            alignSelf: 'flex-start', // in case label becomes multiline
+            ...(isDisabledOrLoading(disabled, loading) && {
+                cursor: 'not-allowed',
+            }),
+            height,
+        },
+        ...(loading && {
+            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: dimension,
+                height: dimension,
+                font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct width and height definition based on ex-unit
+                pointerEvents: 'none',
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(disabled || loading, false, theme, {
+            gridArea: '1/2',
+        }, {
+            paddingTop,
+            paddingInlineStart,
+        }),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
+    });
+};
+
+const cssVarInternalRadioGroupScaling = '--p-internal-radio-group-scaling';
+const groupRadioGroupDirectionJssStyles = {
+    column: {
+        flexFlow: 'column nowrap',
+        alignItems: 'stretch',
+    },
+    row: {
+        flexFlow: 'row wrap',
+        alignItems: 'start',
+    },
+};
+const getRadioGroupDirectionJssStyles = (direction) => {
+    return groupRadioGroupDirectionJssStyles[direction];
+};
+const getComponentCss$x = (disabled, loading, hideLabel, state, compact, direction, theme) => {
+    const scalingVar = `var(${cssVarInternalRadioGroupScaling}, ${compact ? 0.5 : 1})`;
+    const { primaryColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark } = getThemedColors('dark');
+    const { formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    const hoverStyles = {
+        borderColor: formStateHoverColor || primaryColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            borderColor: formStateHoverColorDark || primaryColorDark,
+        }),
+    };
+    const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
+    const columnGap = `max(${spacingStaticSmall}, ${scalingVar} * ${spacingStaticMedium})`;
+    const rowGap = `max(${spacingStaticXSmall}, ${scalingVar} * ${spacingStaticSmall})`;
+    return getCss({
+        '@global': {
+            ':host': {
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+                [`${cssVarInternalRadioGroupOptionScaling}`]: scalingVar,
+            },
+            ...preventFoucOfNestedElementsStyles,
+        },
+        root: {
+            display: 'grid',
+            justifySelf: 'flex-start',
+            rowGap: spacingStaticXSmall,
+        },
+        wrapper: {
+            alignItems: 'start',
+            position: 'relative',
+            display: 'flex',
+            ...buildResponsiveStyles(direction, getRadioGroupDirectionJssStyles),
+            columnGap,
+            rowGap,
+        },
+        ...(loading && {
+            spinner: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: dimension,
+                height: dimension,
+                pointerEvents: 'none',
+            },
+        }),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled && {
+            ...hoverMediaQuery({
+                '&:hover~.wrapper': hoverStyles,
+            }),
+            cursor: 'inherit', // the label is not clickable
+        }),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+        // .loading
+        ...getFunctionalComponentLoadingMessageStyles(),
+        'sr-only': getHiddenTextJssStyle(),
+    });
+};
+
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
 const getComponentCss$w = (isNextHidden, isPrevHidden, alignScrollIndicator, hasScrollbar, theme) => {
     const actionPrevNextStyles = {
@@ -11522,4 +11816,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1l as getAccordionCss, getComponentCss$1k as getBannerCss, getComponentCss$1g as getButtonCss, getComponentCss$1j as getButtonGroupCss, getComponentCss$1i as getButtonPureCss, getComponentCss$1h as getButtonTileCss, getComponentCss$1f as getCanvasCss, getComponentCss$1e as getCarouselCss, getComponentCss$1c as getCheckboxCss, getComponentCss$1d as getCheckboxWrapperCss, getComponentCss$1b as getContentWrapperCss, getComponentCss$1a as getCrestCss, getComponentCss$19 as getDisplayCss, getComponentCss$18 as getDividerCss, getComponentCss$17 as getDrilldownCss, getComponentCss$16 as getDrilldownItemCss, getComponentCss$15 as getDrilldownLinkCss, getComponentCss$13 as getFieldsetCss, getComponentCss$14 as getFieldsetWrapperCss, getComponentCss$12 as getFlagCss, getComponentCss$10 as getFlexCss, getComponentCss$11 as getFlexItemCss, getComponentCss$$ as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$Z as getGridCss, getComponentCss$_ as getGridItemCss, getComponentCss$Y as getHeadingCss, getComponentCss$X as getHeadlineCss, getComponentCss$W as getIconCss, getComponentCss$V as getInlineNotificationCss, getComponentCss$U as getInputDateCss, getComponentCss$T as getInputEmailCss, getComponentCss$S as getInputNumberCss, getComponentCss$R as getInputPasswordCss, getComponentCss$Q as getInputSearchCss, getComponentCss$P as getInputTelCss, getComponentCss$O as getInputTextCss, getComponentCss$N as getInputTimeCss, getComponentCss$M as getInputUrlCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$B as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$C as getOptgroupCss, getComponentCss$A as getPaginationCss, getComponentCss$z as getPinCodeCss, getComponentCss$y as getPopoverCss, getComponentCss$x as getRadioButtonWrapperCss, getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1n as getAccordionCss, getComponentCss$1m as getBannerCss, getComponentCss$1i as getButtonCss, getComponentCss$1l as getButtonGroupCss, getComponentCss$1k as getButtonPureCss, getComponentCss$1j as getButtonTileCss, getComponentCss$1h as getCanvasCss, getComponentCss$1g as getCarouselCss, getComponentCss$1e as getCheckboxCss, getComponentCss$1f as getCheckboxWrapperCss, getComponentCss$1d as getContentWrapperCss, getComponentCss$1c as getCrestCss, getComponentCss$1b as getDisplayCss, getComponentCss$1a as getDividerCss, getComponentCss$19 as getDrilldownCss, getComponentCss$18 as getDrilldownItemCss, getComponentCss$17 as getDrilldownLinkCss, getComponentCss$15 as getFieldsetCss, getComponentCss$16 as getFieldsetWrapperCss, getComponentCss$14 as getFlagCss, getComponentCss$12 as getFlexCss, getComponentCss$13 as getFlexItemCss, getComponentCss$11 as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$$ as getGridCss, getComponentCss$10 as getGridItemCss, getComponentCss$_ as getHeadingCss, getComponentCss$Z as getHeadlineCss, getComponentCss$Y as getIconCss, getComponentCss$X as getInlineNotificationCss, getComponentCss$W as getInputDateCss, getComponentCss$V as getInputEmailCss, getComponentCss$U as getInputNumberCss, getComponentCss$T as getInputPasswordCss, getComponentCss$S as getInputSearchCss, getComponentCss$R as getInputTelCss, getComponentCss$Q as getInputTextCss, getComponentCss$P as getInputTimeCss, getComponentCss$O as getInputUrlCss, getComponentCss$M as getLinkCss, getComponentCss$N as getLinkPureCss, getComponentCss$M as getLinkSocialCss, getComponentCss$J as getLinkTileCss, getComponentCss$L as getLinkTileModelSignatureCss, getComponentCss$K as getLinkTileProductCss, getComponentCss$I as getMarqueCss, getComponentCss$H as getModalCss, getComponentCss$G as getModelSignatureCss, getComponentCss$D as getMultiSelectCss, getComponentCss$F as getMultiSelectOptionCss, getComponentCss$E as getOptgroupCss, getComponentCss$C as getPaginationCss, getComponentCss$B as getPinCodeCss, getComponentCss$A as getPopoverCss, getComponentCss$z as getRadioButtonWrapperCss, getComponentCss$x as getRadioGroupCss, getComponentCss$y as getRadioGroupOptionCss, getScalingVar$1 as getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };