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

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

@@ -53,6 +53,8 @@ const dropShadowHighStyle = {
     filter: `drop-shadow(0px 8px 40px ${_dropShadowBackgroundColor})`,
 };
 
+const themeLightStateFocus = '#1A44EA';
+
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
 const fontHyphenationStyle = {
@@ -3711,7 +3713,7 @@ const themeLight = {
     backgroundSurfaceColorDarken: '#CBCED7',
     backgroundSurfaceColorLighten: '#FFFFFF',
     contrastLowColor: '#D8D8DB',
-    contrastMediumColor: '#949598',
+    contrastMediumColor: '#6B6D70',
     contrastHighColor: '#535457',
     contrastHighColorDarken: '#353638',
     contrastHighColorLighten: '#717276',
@@ -3720,24 +3722,24 @@ const themeLight = {
     activeColor: 'rgba(148, 149, 152, 0.20)',
     focusColor: '#1A44EA',
     disabledColor: '#949598',
-    errorColor: '#E7323B',
-    errorColorDarken: '#C51720',
-    errorSoftColor: '#FCE8E9',
-    errorSoftColorDarken: '#EED7D9',
+    errorColor: '#CC1922',
+    errorColorDarken: '#951219',
+    errorSoftColor: '#FFE2E4',
+    errorSoftColorDarken: '#F4CED1',
     errorSoftColorLighten: '#FFFFFF',
-    successColor: '#32B85B',
-    successColorDarken: '#258843',
-    successSoftColor: '#EBFAF0',
-    successSoftColorDarken: '#DDEAE1',
+    successColor: '#197E10',
+    successColorDarken: '#0E4809',
+    successSoftColor: '#E4FFEC',
+    successSoftColorDarken: '#D0F4DB',
     successSoftColorLighten: '#FFFFFF',
-    warningColor: '#FECC1B',
-    warningSoftColor: '#FFF9E6',
-    warningSoftColorDarken: '#F5ECD2',
-    warningSoftColorLighten: '#FFFFFF',
-    infoColor: '#1E5BEB',
-    infoSoftColor: '#E8EEFD',
-    infoSoftColorDarken: '#D6DEF0',
-    infoSoftColorLighten: '#FFFFFF'
+    warningColor: '#F3BE00',
+    warningSoftColor: '#FFF4D2',
+    warningSoftColorDarken: '#F1E5C1',
+    warningSoftColorLighten: '#FCFAF3',
+    infoColor: '#2762EC',
+    infoSoftColor: '#D3E1FF',
+    infoSoftColorDarken: '#C2D1F1',
+    infoSoftColorLighten: '#F4F7FD'
 };
 const themeDark = {
     primaryColor: '#FBFCFF',
@@ -3749,7 +3751,7 @@ const themeDark = {
     backgroundSurfaceColorDarken: '#040405',
     backgroundSurfaceColorLighten: '#3E4045',
     contrastLowColor: '#404044',
-    contrastMediumColor: '#7E7F82',
+    contrastMediumColor: '#88898C',
     contrastHighColor: '#AFB0B3',
     contrastHighColorDarken: '#909195',
     contrastHighColorLighten: '#CECFD1',
@@ -3758,24 +3760,24 @@ const themeDark = {
     activeColor: 'rgba(126, 127, 130, 0.20)',
     focusColor: '#1A44EA',
     disabledColor: '#7E7F82',
-    errorColor: '#CB3333',
-    errorColorDarken: '#9A2727',
-    errorSoftColor: '#290A0A',
-    errorSoftColorDarken: '#0D0808',
-    errorSoftColorLighten: '#331F1F',
-    successColor: '#00C77E',
-    successColorDarken: '#008A57',
+    errorColor: '#FC4040',
+    errorColorDarken: '#FB0404',
+    errorSoftColor: '#3A0F0F',
+    errorSoftColorDarken: '#1A1111',
+    errorSoftColorLighten: '#3F2828',
+    successColor: '#09D087',
+    successColorDarken: '#069561',
     successSoftColor: '#003320',
     successSoftColorDarken: '#04110C',
     successSoftColorLighten: '#0F432F',
-    warningColor: '#DDB84B',
-    warningSoftColor: '#2B2208',
-    warningSoftColorDarken: '#0D0C07',
-    warningSoftColorLighten: '#362F1C',
-    infoColor: '#027FFC',
-    infoSoftColor: '#001A33',
-    infoSoftColorDarken: '#040A11',
-    infoSoftColorLighten: '#0F2943'
+    warningColor: '#F7CB47',
+    warningSoftColor: '#362B0A',
+    warningSoftColorDarken: '#16130B',
+    warningSoftColorLighten: '#3E3720',
+    infoColor: '#178BFF',
+    infoSoftColor: '#04294E',
+    infoSoftColorDarken: '#0C1A27',
+    infoSoftColorLighten: '#1A3856'
 };
 const themes = {
     'light': themeLight,
@@ -3823,35 +3825,12 @@ const getResetInitialStylesForSlottedAnchor = {
     borderRadius: 0,
     background: 'transparent',
 };
-const getFocusJssStyle = (opts) => {
-    const { pseudo, offset: outlineOffset, color: outlineColor, } = Object.assign({ color: 'currentColor', offset: 2 }, opts);
-    return pseudo
-        ? {
-            outline: 0,
-            '&::-moz-focus-inner': {
-                border: 0,
-            },
-            [`&${pseudo}`]: Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle()), { outline: '1px solid transparent', outlineOffset: `${outlineOffset}px` }),
-            [`&:focus${pseudo}`]: {
-                outlineColor,
-            },
-            [`&:focus:not(:focus-visible)${pseudo}`]: {
-                outlineColor: 'transparent',
-            },
-        }
-        : {
-            outline: '1px solid transparent',
-            outlineOffset: `${outlineOffset}px`,
-            '&::-moz-focus-inner': {
-                border: 0,
-            },
-            '&:focus': {
-                outlineColor,
-            },
-            '&:focus:not(:focus-visible)': {
-                outlineColor: 'transparent',
-            },
-        };
+const focusPseudoJssStyle = {
+    outline: 0,
+    '&:focus::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle()), { borderRadius: '1px', outline: `${borderWidthBase} solid ${themeLightStateFocus}`, outlineOffset: '2px' }),
+    '&:focus:not(:focus-visible)::before': {
+        outline: 0,
+    },
 };
 const getTextHiddenJssStyle = (isHidden) => isHidden
     ? getScreenReaderOnlyJssStyle()
@@ -3979,7 +3958,7 @@ const formatObjectOutput = (value) => {
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$W = (size, compact, open, theme) => {
+const getComponentCss$Y = (size, compact, open, theme) => {
     const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     const border = `1px solid ${contrastLowColor}`;
     return getCss(Object.assign(Object.assign({ '@global': {
@@ -4093,7 +4072,7 @@ const getKeyframesDesktop = (direction, topVar) => getKeyframes(direction, {
     opacity: 0,
     transform: `translate3d(0,calc(-100% - var(${topVar})),0)`, // space before and after "-" is crucial
 });
-const getComponentCss$V = () => {
+const getComponentCss$X = () => {
     return getCss({
         '@global': {
             ':host': Object.assign(Object.assign({ opacity: 0 }, addImportantToEachRule(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`, willChange: 'opacity,transform' }, dropShadowHighStyle), { [mediaQueryS$1]: {
@@ -4133,7 +4112,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$U = (direction) => {
+const getComponentCss$W = (direction) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4200,7 +4179,7 @@ const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading,
     }));
 };
 
-const getComponentCss$T = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, theme) => {
+const getComponentCss$V = (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), Object.assign({ root: {
             appearance: 'none',
@@ -4323,7 +4302,7 @@ align, compact, hasGradient, isDisabled) => {
     }));
 };
 
-const getComponentCss$S = (isDisabledOrLoading, ...args) => {
+const getComponentCss$U = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss(Object.assign(Object.assign({}, buttonLinkTileStyles), { root: Object.assign(Object.assign({}, buttonLinkTileStyles.root), { cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer' }) }));
 };
@@ -4403,7 +4382,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$R = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$T = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const isPrimary = variant === 'primary';
@@ -4442,7 +4421,7 @@ const spacingMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$Q = (width, hasPagination, alignHeader, theme) => {
+const getComponentCss$S = (width, hasPagination, alignHeader, theme) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const isHeaderAlignCenter = alignHeader === 'center';
     return getCss(Object.assign({ '@global': {
@@ -4596,7 +4575,7 @@ const getInlineSVGBackgroundImage = (path) => {
     return `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">${path}</svg>')`;
 };
 
-const getComponentCss$P = (hideLabel, state, isDisabled, theme) => {
+const getComponentCss$R = (hideLabel, state, isDisabled, theme) => {
     const checkedIconColor = getThemedColors(theme === 'light' ? 'dark' : 'light').primaryColor.replace(/#/g, '%23');
     const indeterminateIconColor = getThemedColors(theme).primaryColor.replace(/#/g, '%23');
     return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, theme), {
@@ -4621,7 +4600,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$O = (width) => {
+const getComponentCss$Q = (width) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4642,6 +4621,25 @@ const getComponentCss$O = (width) => {
     });
 };
 
+const getComponentCss$P = () => {
+    return getCss({
+        '@global': {
+            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign({ outline: 0 }, hostHiddenStyles))),
+            a: Object.assign({ display: 'block', textDecoration: 'none' }, focusPseudoJssStyle),
+            picture: {
+                display: 'block',
+                width: '30px',
+                height: '40px',
+            },
+            img: {
+                display: 'block',
+                width: '100%',
+                height: 'auto',
+            },
+        },
+    });
+};
+
 const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
 const getTypographyRootJssStyle = (baseTextStyle, responsiveStyle, align, color, ellipsis, theme) => {
@@ -4677,7 +4675,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$N = (size, align, color, ellipsis, theme) => {
+const getComponentCss$O = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4691,7 +4689,7 @@ const getComponentCss$N = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$M = (color, orientation, theme) => {
+const getComponentCss$N = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const colorMap = {
         'contrast-low': contrastLowColor,
@@ -4706,7 +4704,7 @@ const getComponentCss$M = (color, orientation, theme) => {
     });
 };
 
-const getComponentCss$L = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$M = (state, labelSize, hasLabel, theme) => {
     return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
                 margin: 0,
                 padding: 0,
@@ -4720,7 +4718,7 @@ const getComponentCss$L = (state, labelSize, hasLabel, theme) => {
     })));
 };
 
-const getComponentCss$K = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$L = (state, labelSize, hasLabel, theme) => {
     return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)), fieldset: {
                 margin: 0,
                 padding: 0,
@@ -4744,7 +4742,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$J = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$K = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
@@ -4762,7 +4760,7 @@ const getComponentCss$J = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$I = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$J = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
@@ -4784,7 +4782,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$H = (size, offset) => {
+const getComponentCss$I = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ paddingLeft: gutter$1, paddingRight: gutter$1, boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(size, (sizeResponsive) => ({
@@ -4798,7 +4796,7 @@ const getComponentCss$H = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$G = (direction, wrap) => {
+const getComponentCss$H = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'flex', flex: 'auto', width: 'auto', marginLeft: gutter, marginRight: gutter }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(direction, (flexDirection) => ({ flexDirection })), buildResponsiveStyles(wrap, (flexWrap) => ({ flexWrap }))))),
@@ -4813,7 +4811,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$F = (size, align, color, ellipsis, theme) => {
+const getComponentCss$G = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4867,7 +4865,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$E = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$F = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -4884,23 +4882,23 @@ const getComponentCss$E = (variant, align, color, ellipsis, theme) => {
 const toFilter = (values) => `invert(${values[0]}%) sepia(${values[1]}%) saturate(${values[2]}%) hue-rotate(${values[3]}deg) brightness(${values[4]}%) contrast(${values[5]}%)`;
 
 const filterLightContrastLow = toFilter([93, 11, 36, 201, 89, 102]);
-const filterLightContrastMedium = toFilter([65, 6, 119, 187, 90, 92]);
+const filterLightContrastMedium = toFilter([45, 6, 235, 177, 91, 85]);
 const filterLightContrastHigh = toFilter([40, 2, 686, 187, 80, 94]);
 const filterDarkContrastLow = toFilter([20, 7, 421, 202, 97, 82]);
-const filterDarkContrastMedium = toFilter([54, 4, 229, 187, 91, 84]);
+const filterDarkContrastMedium = toFilter([66, 3, 333, 187, 82, 86]);
 const filterDarkContrastHigh = toFilter([68, 6, 108, 187, 104, 88]);
 
-const filterLightNotificationSuccess = toFilter([62, 61, 551, 86, 86, 80]);
-const filterLightNotificationWarning = toFilter([74, 91, 343, 348, 92, 86]);
-const filterLightNotificationError = toFilter([25, 62, 2003, 335, 100, 97]);
+const filterLightNotificationSuccess = toFilter([28, 89, 572, 71, 111, 98]);
+const filterLightNotificationWarning = toFilter([58, 53, 820, 12, 112, 103]);
+const filterLightNotificationError = toFilter([14, 75, 4140, 347, 100, 97]);
 const filterLightNotificationInfo = toFilter([44, 100, 492, 195, 86, 221]);
-const filterDarkNotificationSuccess = toFilter([59, 22, 1342, 86, 96, 88]);
-const filterDarkNotificationWarning = toFilter([72, 94, 303, 354, 89, 94]);
-const filterDarkNotificationError = toFilter([28, 34, 3133, 333, 95, 100]);
+const filterDarkNotificationSuccess = toFilter([60, 71, 512, 106, 91, 97]);
+const filterDarkNotificationWarning = toFilter([75, 39, 759, 350, 109, 94]);
+const filterDarkNotificationError = toFilter([64, 91, 5857, 336, 98, 102]);
 const filterDarkNotificationInfo = toFilter([56, 77, 4175, 198, 104, 98]);
 
 const filterLightPrimary = toFilter([3, 7, 2930, 188, 91, 103]);
-const filterDarkPrimary = toFilter([97, 55, 2840, 180, 114, 103]);
+const filterDarkPrimary = toFilter([100, 91, 38, 254, 110, 110]);
 
 const sizeMap$2 = {
     'xx-small': fontSizeTextXXSmall,
@@ -4944,7 +4942,7 @@ const forceRerenderAnimationStyle = {
 };
 const keyFramesLight = 'rerender-light';
 const keyFramesDark = 'rerender-dark';
-const getComponentCss$D = (color, size, theme) => {
+const getComponentCss$E = (color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -5011,7 +5009,7 @@ const getNotificationContentJssStyle = () => ({
 });
 
 const mediaQueryMaxS = getMediaQueryMax('s');
-const getComponentCss$C = (state, hasAction, hasClose, theme) => {
+const getComponentCss$D = (state, hasAction, hasClose, theme) => {
     return getCss(Object.assign({ '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({}, getNotificationRootJssStyle(state, hasAction, hasClose, theme)), hostHiddenStyles)),
             h5: headingSmallStyle,
@@ -5029,7 +5027,7 @@ const getComponentCss$C = (state, hasAction, hasClose, theme) => {
     })));
 };
 
-const getComponentCss$B = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
+const getComponentCss$C = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme), Object.assign(Object.assign({}, (hasSlottedAnchor && {
@@ -5056,7 +5054,7 @@ const getComponentCss$B = (icon, iconSource, active, stretch, size, hideLabel, a
         } })));
 };
 
-const getComponentCss$A = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
+const getComponentCss$B = (icon, iconSource, variant, hideLabel, hasSlottedAnchor, theme) => {
     const { focusColor } = getThemedColors(theme);
     return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, false, hasSlottedAnchor, theme), Object.assign({}, (hasSlottedAnchor && {
         '@global': addImportantToEachRule({
@@ -5083,7 +5081,7 @@ const getComponentCss$A = (icon, iconSource, variant, hideLabel, hasSlottedAncho
 
 const LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$z = (aspectRatio, weight, direction, hasDescription) => {
+const getComponentCss$A = (aspectRatio, weight, direction, hasDescription) => {
     const tileBaseStyles = getTileBaseStyles(aspectRatio);
     return getCss(Object.assign(Object.assign(Object.assign(Object.assign({}, tileBaseStyles), { '@global': Object.assign(Object.assign({}, tileBaseStyles['@global']), { [LINK_TILE_MODEL_SIGNATURE_HEADING_TAGS.join(',')]: {
                 margin: addImportantToRule(0),
@@ -5098,7 +5096,7 @@ const getComponentCss$z = (aspectRatio, weight, direction, hasDescription) => {
             position: 'fixed' }, getInsetJssStyle()) }));
 };
 
-const getComponentCss$y = (...args) => {
+const getComponentCss$z = (...args) => {
     return getCss(Object.assign(Object.assign({}, getButtonLinkTileStyles(...args)), { 'link-overlay': Object.assign({ 
             // covers entire tile, used for expanded click-area only
             position: 'fixed' }, getInsetJssStyle()) }));
@@ -5114,15 +5112,11 @@ const baseSizes = {
         height: '72px',
     },
 };
-const getComponentCss$x = (size) => {
+const getComponentCss$y = (size) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ position: 'relative', display: 'inline-flex', verticalAlign: 'top' }, addImportantToEachRule(Object.assign({ outline: 0 }, hostHiddenStyles))),
-            a: Object.assign({ display: 'block', textDecoration: 'none' }, getFocusJssStyle({
-                color: getThemedColors('light').primaryColor,
-                offset: 0,
-                pseudo: '::before',
-            })),
+            a: Object.assign({ display: 'block', textDecoration: 'none' }, focusPseudoJssStyle),
             picture: Object.assign({ display: 'block' }, (size === 'responsive'
                 ? Object.assign(Object.assign({}, baseSizes.small), { [getMediaQueryMin('l')]: baseSizes.medium }) : baseSizes[size])),
             img: {
@@ -5182,7 +5176,7 @@ const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
             marginBottom: marginPx,
         } });
 };
-const getComponentCss$w = (open, fullscreen, hasDismissButton, hasHeader) => {
+const getComponentCss$x = (open, fullscreen, hasDismissButton, hasHeader) => {
     const isFullscreenForXlAndXxl = isFullscreenForXl(fullscreen);
     return getCss(Object.assign(Object.assign({ '@global': {
             ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle()), { zIndex: MODAL_Z_INDEX, display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }), (open
@@ -5250,7 +5244,7 @@ const colorToFilterMap = {
         'contrast-high': filterDarkContrastHigh,
     },
 };
-const getComponentCss$v = (size, color, theme) => {
+const getComponentCss$w = (size, color, theme) => {
     const isSizeInherit = size === 'inherit';
     const isColorInherit = color === 'inherit';
     return getCss({
@@ -5269,7 +5263,7 @@ const disabledCursorStyle = {
     cursor: 'default',
     pointerEvents: 'none', // prevents :hover (has no effect when forced), maybe we can remove it since CSS selectors already cover desired behavior
 };
-const getComponentCss$u = (maxNumberOfPageLinks, theme) => {
+const getComponentCss$v = (maxNumberOfPageLinks, theme) => {
     const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -5386,7 +5380,7 @@ const directionArrowMap = {
         },
     },
 };
-const getComponentCss$t = (direction, theme) => {
+const getComponentCss$u = (direction, theme) => {
     const spacerBox = '-16px';
     const { hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
@@ -5435,7 +5429,7 @@ const getComponentCss$t = (direction, theme) => {
     });
 };
 
-const getComponentCss$s = (hideLabel, state, isDisabled, theme) => {
+const getComponentCss$t = (hideLabel, state, isDisabled, theme) => {
     const checkedIconColor = getThemedColors(theme === 'light' ? 'dark' : 'light').primaryColor.replace(/#/g, '%23');
     return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, theme), {
         '@global': {
@@ -5469,7 +5463,7 @@ const getGradient = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$r = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
+const getComponentCss$s = (gradientColor, isNextHidden, isPrevHidden, scrollIndicatorPosition, hasScrollbar, theme) => {
     const { backgroundColor, backgroundSurfaceColor, focusColor, hoverColor } = getThemedColors(theme);
     const isDarkTheme = isThemeDark(theme);
     const backgroundColorMap = {
@@ -5562,7 +5556,7 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
         hoverBorderColor: primaryColor,
     };
 };
-const getComponentCss$q = (isDisabled, isSelected, hasIcon, theme) => {
+const getComponentCss$r = (isDisabled, isSelected, hasIcon, theme) => {
     const { focusColor } = getThemedColors(theme);
     const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
     return getCss({
@@ -5596,7 +5590,7 @@ const getComponentCss$q = (isDisabled, isSelected, hasIcon, theme) => {
 
 const MIN_ITEM_WIDTH = 46;
 const MAX_ITEM_WIDTH = 220;
-const getComponentCss$p = (maxWidth) => {
+const getComponentCss$q = (maxWidth) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
@@ -5655,7 +5649,7 @@ const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUni
     }));
 };
 const ICON_SPACE = `${24 + 13 * 2 + 2}px`; // 24px = icon width, 13px * 2 = padding, 2px = border
-const getComponentCss$o = (isDisabled, hideLabel, state, theme) => {
+const getComponentCss$p = (isDisabled, hideLabel, state, theme) => {
     return getCss(Object.assign(Object.assign(Object.assign({ '@global': addImportantToEachRule(Object.assign({ ':host': Object.assign({ display: 'block' }, hostHiddenStyles) }, getBaseChildStyles('select', state, theme, {
             position: 'static',
             zIndex: 0,
@@ -5687,7 +5681,7 @@ const sizeMap$1 = {
     large: { height: sizeLarge, width: sizeLarge },
     inherit: { height: 'inherit', width: 'inherit' },
 };
-const getComponentCss$m = (size, theme) => {
+const getComponentCss$n = (size, theme) => {
     const strokeDasharray = '57'; // C = 2πR
     const animationDuration = 'var(--p-animation-duration, 2s)';
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
@@ -5765,7 +5759,7 @@ const getSVGPath = (stepCount, numberedCircleColors, isStateCurrent) => {
     ];
     return svgNumberedCirclePaths[stepCount];
 };
-const getComponentCss$l = (state, disabled, theme) => {
+const getComponentCss$m = (state, disabled, theme) => {
     const { primaryColor, hoverColor, disabledColor, focusColor } = getThemedColors(theme);
     const isStateCurrent = state === 'current';
     const isStateCurrentOrUndefined = !state || isStateCurrent;
@@ -5805,7 +5799,7 @@ const getComponentCss$l = (state, disabled, theme) => {
     })), { 'sr-only': getScreenReaderOnlyJssStyle() }));
 };
 
-const getComponentCss$k = (size) => {
+const getComponentCss$l = (size) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -5831,7 +5825,7 @@ const getColors$1 = (checked, disabled, loading, theme) => {
         textColor: disabledOrLoadingColor || primaryColor,
     };
 };
-const getComponentCss$j = (alignLabel, hideLabel, stretch, checked, disabled, loading, theme) => {
+const getComponentCss$k = (alignLabel, hideLabel, stretch, checked, disabled, loading, theme) => {
     const { buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, buttonBackgroundColorHover, toggleBackgroundColor, toggleBackgroundColorHover, textColor, } = getColors$1(checked, disabled, loading, theme);
     const { focusColor } = getThemedColors(theme);
     return getCss(Object.assign(Object.assign({ '@global': {
@@ -5884,7 +5878,7 @@ const getComponentCss$j = (alignLabel, hideLabel, stretch, checked, disabled, lo
         })), buildResponsiveStyles(hideLabel, getTextHiddenJssStyle))) }));
 };
 
-const getComponentCss$i = () => {
+const getComponentCss$j = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'table-row-group' }, hostHiddenStyles)),
@@ -5892,7 +5886,7 @@ const getComponentCss$i = () => {
     });
 };
 
-const getComponentCss$h = (multiline) => {
+const getComponentCss$i = (multiline) => {
     return getCss({
         '@global': {
             ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ display: 'table-cell', padding: spacingFluidSmall, margin: 0, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles))), { verticalAlign: 'middle' }),
@@ -5908,7 +5902,7 @@ const isSortable = (active, direction) => {
 const cssVariableTableHoverColor = '--p-internal-table-hover-color';
 const cssVariableTableBorderColor = '--p-internal-table-border-color';
 const cssVariableTableHeadCellIconFilter = '--p-internal-table-head-cell-icon-filter';
-const getComponentCss$g = (theme) => {
+const getComponentCss$h = (theme) => {
     const { primaryColor, hoverColor, contrastLowColor } = doGetThemedColors(theme);
     return getCss({
         '@global': {
@@ -5934,7 +5928,7 @@ const getComponentCss$g = (theme) => {
 const { hoverColor, focusColor } = getThemedColors('light'); // hover color and focus color are the same for light and dark
 const buttonBeforeOffsetVertical = '-2px';
 const buttonBeforeOffsetHorizontal = '-4px';
-const getComponentCss$f = (active, direction, hideLabel, multiline) => {
+const getComponentCss$g = (active, direction, hideLabel, multiline) => {
     const sortable = isSortable(active, direction);
     return getCss(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'table-cell', padding: `2px ${spacingFluidSmall} ${spacingFluidSmall}`, verticalAlign: 'bottom', whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles)) }, (sortable
             ? {
@@ -5974,7 +5968,7 @@ const getComponentCss$f = (active, direction, hideLabel, multiline) => {
     })));
 };
 
-const getComponentCss$e = () => {
+const getComponentCss$f = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'table-row' }, hostHiddenStyles)),
@@ -5982,7 +5976,7 @@ const getComponentCss$e = () => {
     });
 };
 
-const getComponentCss$d = () => {
+const getComponentCss$e = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ display: 'table-header-group', fontSize: fontSizeTextXSmall, lineHeight: fontLineHeight, fontWeight: fontWeightSemiBold }, hostHiddenStyles)),
@@ -5990,7 +5984,7 @@ const getComponentCss$d = () => {
     });
 };
 
-const getComponentCss$c = () => {
+const getComponentCss$d = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'table-row', borderTop: `1px solid var(${cssVariableTableBorderColor})`, borderBottom: `1px solid var(${cssVariableTableBorderColor})`, transition: getTransition('background') }, hostHiddenStyles), hoverMediaQuery({
@@ -6005,7 +5999,7 @@ const getComponentCss$c = () => {
 
 const tabsTransitionDuration = '.4s';
 const transformSelector = (selector) => ['a', 'button'].map((tag) => selector.replace(/\[role]/g, tag)).join();
-const getComponentCss$b = (size, weight, theme) => {
+const getComponentCss$c = (size, weight, theme) => {
     const { primaryColor, hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ position: 'relative', 
@@ -6044,7 +6038,7 @@ const getComponentCss$b = (size, weight, theme) => {
     });
 };
 
-const getComponentCss$a = (theme) => {
+const getComponentCss$b = (theme) => {
     const { primaryColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -6058,7 +6052,7 @@ const getComponentCss$a = (theme) => {
     });
 };
 
-const getComponentCss$9 = () => {
+const getComponentCss$a = () => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6090,7 +6084,7 @@ const getThemedBackgroundColor = (tagColor, themedColors) => {
     return colorMap[tagColor];
 };
 
-const getComponentCss$8 = (color, hasLabel, theme) => {
+const getComponentCss$9 = (color, hasLabel, theme) => {
     const themedColors = getThemedColors(theme);
     const { primaryColor, hoverColor, contrastHighColor } = themedColors;
     const backgroundColor = getThemedBackgroundColor(color, themedColors);
@@ -6140,7 +6134,7 @@ const getColors = (themedColors, tagColor, theme) => {
         backgroundHoverColor: getThemedBackgroundHoverColor(tagColor, themedColors, theme),
     };
 };
-const getComponentCss$7 = (tagColor, isFocusable, theme) => {
+const getComponentCss$8 = (tagColor, isFocusable, theme) => {
     const themedColors = getThemedColors(theme);
     const { primaryColor, backgroundColor, backgroundHoverColor } = getColors(themedColors, tagColor, theme);
     return getCss({
@@ -6197,7 +6191,7 @@ const getButtonOrIconOffsetHorizontal = (buttonOrIconAmount) => {
     const multiplier = buttonOrIconAmount > 1 ? ` + ${buttonOrIconSize} * ${buttonOrIconAmount - 1}` : '';
     return `calc(${buttonOrIconOffset} + ${borderWidthBase}${multiplier})`;
 };
-const getComponentCss$6 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, isWithinForm, theme) => {
+const getComponentCss$7 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, isWithinForm, theme) => {
     const { contrastMediumColor } = getThemedColors(theme);
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
@@ -6253,7 +6247,7 @@ const cssVariableUnorderedPaddingLeft = '--p-internal-text-list-unordered-paddin
 const cssVariableOrderedPaddingLeft = '--p-internal-text-list-ordered-padding-left';
 const cssVariableListStyleType = '--p-internal-text-list-list-style-type';
 const counter = 'p-text-list-counter';
-const getComponentCss$5 = (type, theme) => {
+const getComponentCss$6 = (type, theme) => {
     const isOrderedList = isListTypeOrdered(type);
     return getCss({
         '@global': {
@@ -6279,7 +6273,7 @@ const getComponentCss$5 = (type, theme) => {
     });
 };
 
-const getComponentCss$4 = () => {
+const getComponentCss$5 = () => {
     return getCss({
         '@global': addImportantToEachRule({
             ':host': Object.assign({ display: 'list-item', position: 'relative', font: 'inherit', color: 'inherit', listStyleType: 'inherit', paddingLeft: spacingStaticMedium }, hostHiddenStyles),
@@ -6300,7 +6294,7 @@ const sizeMap = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-const getComponentCss$3 = (size, weight, align, color, ellipsis, theme) => {
+const getComponentCss$4 = (size, weight, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6315,7 +6309,7 @@ const getComponentCss$3 = (size, weight, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$2 = (isDisabled, hideLabel, state, hasCounter, theme) => {
+const getComponentCss$3 = (isDisabled, hideLabel, state, hasCounter, theme) => {
     const { contrastMediumColor } = getThemedColors(theme);
     return getCss(Object.assign(Object.assign(Object.assign(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)) }, mergeDeep(addImportantToEachRule(getBaseChildStyles('textarea', state, theme, {
             font: textSmallStyle.font,
@@ -6343,7 +6337,7 @@ const getComponentCss$2 = (isDisabled, hideLabel, state, hasCounter, theme) => {
 const cssVariablePositionBottom = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
 const cssVariablePositionBottomInternal = '--p-internal-toast-position-bottom';
 const toastCloseClassName = 'close';
-const getComponentCss = () => {
+const getComponentCss$1 = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ position: 'fixed', left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, 
@@ -6363,4 +6357,18 @@ const getComponentCss = () => {
     });
 };
 
-export { getComponentCss$W as getAccordionCss, getComponentCss$V as getBannerCss, getComponentCss$R as getButtonCss, getComponentCss$U as getButtonGroupCss, getComponentCss$T as getButtonPureCss, getComponentCss$S as getButtonTileCss, getComponentCss$Q as getCarouselCss, getComponentCss$P as getCheckboxWrapperCss, getComponentCss$O as getContentWrapperCss, getComponentCss$N as getDisplayCss, getComponentCss$M as getDividerCss, getComponentCss$K as getFieldsetCss, getComponentCss$L as getFieldsetWrapperCss, getComponentCss$I as getFlexCss, getComponentCss$J as getFlexItemCss, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$G as getGridCss, getComponentCss$H as getGridItemCss, getComponentCss$F as getHeadingCss, getComponentCss$E as getHeadlineCss, getComponentCss$D as getIconCss, getComponentCss$C as getInlineNotificationCss, getComponentCss$A as getLinkCss, getComponentCss$B as getLinkPureCss, getComponentCss$A as getLinkSocialCss, getComponentCss$y as getLinkTileCss, getComponentCss$z as getLinkTileModelSignatureCss, getComponentCss$x as getMarqueCss, getComponentCss$w as getModalCss, getComponentCss$v as getModelSignatureCss, getComponentCss$u as getPaginationCss, getComponentCss$t as getPopoverCss, getComponentCss$s as getRadioButtonWrapperCss, getComponentCss$r as getScrollerCss, getComponentCss$p as getSegmentedControlCss, getComponentCss$q as getSegmentedControlItemCss, getComponentCss$o as getSelectWrapperCss, getComponentCss$m as getSpinnerCss, getComponentCss$k as getStepperHorizontalCss, getComponentCss$l as getStepperHorizontalItemCss, getComponentCss$j as getSwitchCss, getComponentCss$i as getTableBodyCss, getComponentCss$h as getTableCellCss, getComponentCss$g as getTableCss, getComponentCss$f as getTableHeadCellCss, getComponentCss$d as getTableHeadCss, getComponentCss$e as getTableHeadRowCss, getComponentCss$c as getTableRowCss, getComponentCss$b as getTabsBarCss, getComponentCss$9 as getTabsCss, getComponentCss$a as getTabsItemCss, getComponentCss$7 as getTagCss, getComponentCss$8 as getTagDismissibleCss, getComponentCss$3 as getTextCss, getComponentCss$6 as getTextFieldWrapperCss, getComponentCss$5 as getTextListCss, getComponentCss$4 as getTextListItemCss, getComponentCss$2 as getTextareaWrapperCss, getComponentCss as getToastCss };
+const getComponentCss = (size, theme) => {
+    return getCss({
+        '@global': {
+            ':host': Object.assign({ position: 'relative', display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(Object.assign(Object.assign({ outline: 0, boxSizing: 'content-box' }, (!(size === 'inherit') && { height: 'clamp(0.63rem, 0.42vw + 0.5rem, 1rem)' })), hostHiddenStyles))),
+            a: Object.assign({ display: 'block', textDecoration: 'none', height: 'inherit' }, focusPseudoJssStyle),
+            svg: {
+                display: 'block',
+                height: 'inherit',
+                fill: getThemedColors(theme).primaryColor,
+            },
+        },
+    });
+};
+
+export { getComponentCss$Y as getAccordionCss, getComponentCss$X as getBannerCss, getComponentCss$T as getButtonCss, getComponentCss$W as getButtonGroupCss, getComponentCss$V as getButtonPureCss, getComponentCss$U as getButtonTileCss, getComponentCss$S as getCarouselCss, getComponentCss$R as getCheckboxWrapperCss, getComponentCss$Q as getContentWrapperCss, getComponentCss$P as getCrestCss, getComponentCss$O as getDisplayCss, getComponentCss$N as getDividerCss, getComponentCss$L as getFieldsetCss, getComponentCss$M as getFieldsetWrapperCss, getComponentCss$J as getFlexCss, getComponentCss$K as getFlexItemCss, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$H as getGridCss, getComponentCss$I as getGridItemCss, getComponentCss$G as getHeadingCss, getComponentCss$F as getHeadlineCss, getComponentCss$E as getIconCss, getComponentCss$D as getInlineNotificationCss, getComponentCss$B as getLinkCss, getComponentCss$C as getLinkPureCss, getComponentCss$B as getLinkSocialCss, getComponentCss$z as getLinkTileCss, getComponentCss$A as getLinkTileModelSignatureCss, getComponentCss$y as getMarqueCss, getComponentCss$x as getModalCss, getComponentCss$w as getModelSignatureCss, getComponentCss$v as getPaginationCss, getComponentCss$u as getPopoverCss, getComponentCss$t as getRadioButtonWrapperCss, getComponentCss$s as getScrollerCss, getComponentCss$q as getSegmentedControlCss, getComponentCss$r as getSegmentedControlItemCss, getComponentCss$p as getSelectWrapperCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };