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

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

@@ -17,8 +17,6 @@ hasWindow &&
             .forEach((mutation) => { var _a; return (_a = attributeMutationMap.get(mutation.target)) === null || _a === void 0 ? void 0 : _a(); });
     });
 
-// TODO: resolve overlap with Breakpoint type from utilities package
-const BREAKPOINTS = ['base', 'xs', 's', 'm', 'l', 'xl'];
 const parseJSON = (prop) => {
     if (typeof prop === 'string') {
         try {
@@ -55,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 = {
@@ -233,14 +233,12 @@ const gridNarrowOffset = {
     xxl: gridNarrowOffsetXXL,
 };
 
+const breakpoints = ['base', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+
 function getMediaQueryMax(max) {
     return `@media(max-width:${breakpoint[max] - 1}px)`;
 }
 
-function getMediaQueryMinMax(min, max) {
-    return `@media(min-width:${breakpoint[min]}px) and (max-width:${breakpoint[max] - 1}px)`;
-}
-
 const spacingStaticXSmall = '4px';
 
 const spacingStaticSmall = '8px';
@@ -309,10 +307,7 @@ const textLargeStyle = {
     ...fontHyphenationStyle,
 };
 
-// TODO: we shouldn't exclude xxl breakpoint
-const mediaQueries = Object.entries(breakpoint)
-    .filter(([key]) => key !== 'xxl')
-    .map(([, val]) => `(min-width:${val}px)`);
+const mediaQueries = Object.values(breakpoint).map((v) => `(min-width:${v}px)`);
 hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
 Object.entries(breakpoint).reduce((result, [key, val]) => (Object.assign(Object.assign({}, result), { [`${val}px`]: key })), {});
@@ -3713,7 +3708,7 @@ const themeLight = {
     backgroundSurfaceColorDarken: '#CBCED7',
     backgroundSurfaceColorLighten: '#FFFFFF',
     contrastLowColor: '#D8D8DB',
-    contrastMediumColor: '#949598',
+    contrastMediumColor: '#6B6D70',
     contrastHighColor: '#535457',
     contrastHighColorDarken: '#353638',
     contrastHighColorLighten: '#717276',
@@ -3722,24 +3717,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',
@@ -3751,7 +3746,7 @@ const themeDark = {
     backgroundSurfaceColorDarken: '#040405',
     backgroundSurfaceColorLighten: '#3E4045',
     contrastLowColor: '#404044',
-    contrastMediumColor: '#7E7F82',
+    contrastMediumColor: '#88898C',
     contrastHighColor: '#AFB0B3',
     contrastHighColorDarken: '#909195',
     contrastHighColorLighten: '#CECFD1',
@@ -3760,24 +3755,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,
@@ -3825,35 +3820,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()
@@ -3977,11 +3949,11 @@ const formatObjectOutput = (value) => {
         .replace(/^"(.+)"$/, '$1'); // remove wrapping double quotes
 };
 'value, ' +
-    formatObjectOutput(BREAKPOINTS.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
+    formatObjectOutput(breakpoints.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
 
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const 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': {
@@ -4050,35 +4022,6 @@ const getComponentCss$W = (size, compact, open, theme) => {
         } }));
 };
 
-const easeInQuad = 'cubic-bezier(0.45,0,0.55,1)';
-const easeOutQuad = 'cubic-bezier(0.5,1,0.89,1)';
-const ANIMATION_DURATION = 600;
-const getAnimationIn = (keyframesName, durationVar) => {
-    const duration = durationVar ? `var(${durationVar},${ANIMATION_DURATION}ms)` : `${ANIMATION_DURATION}ms`;
-    return {
-        animation: `${duration} $${keyframesName} ${easeInQuad} forwards`,
-    };
-};
-const getAnimationOut = (keyframesName) => ({
-    animation: addImportantToRule(`${ANIMATION_DURATION}ms $${keyframesName} ${easeOutQuad} forwards`),
-});
-const getKeyframes = (direction, outsideStyle) => {
-    const insideStyle = { opacity: 1, transform: 'translate3d(0,0,0)' };
-    return direction === 'in'
-        ? {
-            from: outsideStyle,
-            to: insideStyle,
-        }
-        : {
-            from: insideStyle,
-            to: outsideStyle,
-        };
-};
-const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
-    opacity: 0,
-    transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
-});
-
 const TOAST_Z_INDEX = 999999;
 const MODAL_Z_INDEX = 99999;
 const POPOVER_Z_INDEX = 9999;
@@ -4088,35 +4031,31 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableAnimationDuration = '--p-animation-duration';
 const cssVariableZIndex = '--p-internal-banner-z-index';
-const mediaQueryBaseToS = getMediaQueryMinMax('base', 's');
-const mediaQueryS$1 = getMediaQueryMin('s');
-const mediaQueryXXL$1 = getMediaQueryMin('xxl');
-const getKeyframesDesktop = (direction, topVar) => getKeyframes(direction, {
-    opacity: 0,
-    transform: `translate3d(0,calc(-100% - var(${topVar})),0)`, // space before and after "-" is crucial
-});
-const getComponentCss$V = () => {
+const ANIMATION_DURATION$1 = 600;
+const duration$1 = `var(${cssVariableAnimationDuration},${ANIMATION_DURATION$1}ms)`;
+const easeInQuad$1 = 'cubic-bezier(0.45,0,0.55,1)';
+const easeOutQuad$1 = 'cubic-bezier(0.5,1,0.89,1)';
+const getComponentCss$X = (isOpen) => {
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({ opacity: 0 }, addImportantToEachRule(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})`, willChange: 'opacity,transform' }, dropShadowHighStyle), { [mediaQueryS$1]: {
-                    top: `var(${cssVariableTop})`,
-                    bottom: 'auto',
-                    left: gridExtendedOffsetS,
-                    right: gridExtendedOffsetS,
-                }, [mediaQueryXXL$1]: {
+            ':host': addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign({ [cssVariableTop]: '56px', [cssVariableBottom]: '56px', position: 'fixed', top: 'auto', bottom: `var(${cssVariableBottom})`, left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, margin: 0, padding: 0, width: 'auto', maxWidth: '100%', zIndex: `var(${cssVariableZIndex},${BANNER_Z_INDEX})` }, dropShadowHighStyle), (isOpen
+                ? {
+                    opacity: 1,
+                    visibility: 'inherit',
+                    transform: 'translate3d(0,0,0)',
+                    transition: `opacity ${duration$1} ${easeInQuad$1}, transform ${duration$1} ${easeInQuad$1}`,
+                }
+                : {
+                    opacity: 0,
+                    visibility: 'hidden',
+                    transform: `translate3d(0,calc(var(${cssVariableBottom}) + 100%),0)`,
+                    '&(.hydrated),&(.ssr)': {
+                        transition: `visibility 0s linear ${duration$1}, opacity ${duration$1} ${easeOutQuad$1}, transform ${duration$1} ${easeOutQuad$1}`,
+                    },
+                })), { [getMediaQueryMin('s')]: Object.assign({ top: `var(${cssVariableTop})`, bottom: 'auto', left: gridExtendedOffsetS, right: gridExtendedOffsetS }, (!isOpen && { transform: `translate3d(0,calc(-100% - var(${cssVariableTop})),0)` })), [getMediaQueryMin('xxl')]: {
                     left: gridExtendedOffsetXXL,
                     right: gridExtendedOffsetXXL,
-                } }), hostHiddenStyles))), { '&(.hydrated),&(.ssr)': {
-                    [mediaQueryBaseToS]: getAnimationIn('mobileIn', cssVariableAnimationDuration),
-                    [mediaQueryS$1]: getAnimationIn('desktopIn', cssVariableAnimationDuration),
-                }, '&(.banner--close)': {
-                    [mediaQueryBaseToS]: getAnimationOut('mobileOut'),
-                    [mediaQueryS$1]: getAnimationOut('desktopOut'),
-                } }),
-            '@keyframes mobileIn': getKeyframesMobile('in', cssVariableBottom),
-            '@keyframes mobileOut': getKeyframesMobile('out', cssVariableBottom),
-            '@keyframes desktopIn': getKeyframesDesktop('in', cssVariableTop),
-            '@keyframes desktopOut': getKeyframesDesktop('out', cssVariableTop),
+                } }), hostHiddenStyles)),
         },
     });
 };
@@ -4135,7 +4074,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)),
@@ -4202,7 +4141,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',
@@ -4325,7 +4264,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' }) }));
 };
@@ -4405,7 +4344,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';
@@ -4413,7 +4352,7 @@ const getComponentCss$R = (icon, iconSource, variant, hideLabel, disabled, loadi
             backgroundColor,
             borderColor,
             color: textColor,
-        })), ((loading && !isPrimary) && frostedGlassStyle)) }, (loading && {
+        })), (loading && !isPrimary && frostedGlassStyle)) }, (loading && {
         spinner: {
             width: fontLineHeight,
             height: fontLineHeight,
@@ -4444,7 +4383,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': {
@@ -4598,7 +4537,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), {
@@ -4623,7 +4562,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)),
@@ -4644,6 +4583,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) => {
@@ -4679,7 +4637,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)),
@@ -4693,7 +4651,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,
@@ -4708,7 +4666,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,
@@ -4722,7 +4680,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,
@@ -4746,7 +4704,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) => ({
@@ -4764,7 +4722,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) => ({
@@ -4786,7 +4744,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) => ({
@@ -4800,7 +4758,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 }))))),
@@ -4815,7 +4773,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)),
@@ -4869,7 +4827,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)),
@@ -4886,23 +4844,26 @@ 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 filterLightDisabled = toFilter([63, 8, 108, 188, 94, 86]);
+const filterDarkDisabled = toFilter([52, 6, 135, 187, 94, 89]);
+
+const filterLightNotificationSuccess = toFilter([28, 89, 572, 71, 111, 98]);
+const filterLightNotificationWarning = toFilter([58, 53, 820, 12, 112, 103]);
+const filterLightNotificationError = toFilter([14, 75, 4140, 347, 100, 97]);
 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,
@@ -4915,7 +4876,7 @@ const sizeMap$2 = {
 const filter = {
     light: {
         primary: filterLightPrimary,
-        'state-disabled': filterLightContrastMedium,
+        'state-disabled': filterLightDisabled,
         'contrast-low': filterLightContrastLow,
         'contrast-medium': filterLightContrastMedium,
         'contrast-high': filterLightContrastHigh,
@@ -4926,7 +4887,7 @@ const filter = {
     },
     dark: {
         primary: filterDarkPrimary,
-        'state-disabled': filterDarkContrastMedium,
+        'state-disabled': filterDarkDisabled,
         'contrast-low': filterDarkContrastLow,
         'contrast-medium': filterDarkContrastMedium,
         'contrast-high': filterDarkContrastHigh,
@@ -4946,7 +4907,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);
@@ -5013,7 +4974,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,
@@ -5031,7 +4992,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 && {
@@ -5058,7 +5019,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({
@@ -5085,7 +5046,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),
@@ -5100,7 +5061,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()) }));
@@ -5116,15 +5077,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: {
@@ -5167,38 +5124,42 @@ const isFullscreenForXl = (fullscreen) => {
         const entries = Object.entries(fullscreenParsed);
         const [lastTrueBreakpoint] = entries.filter(([, val]) => val).pop() || [];
         const [lastFalseBreakpoint] = entries.filter(([, val]) => !val).pop() || [];
-        return BREAKPOINTS.indexOf(lastTrueBreakpoint) > BREAKPOINTS.indexOf(lastFalseBreakpoint);
+        return breakpoints.indexOf(lastTrueBreakpoint) > breakpoints.indexOf(lastFalseBreakpoint);
     }
 };
 const getSlottedJssStyle = (marginValue, hasHeader, hasDismissButton) => {
     const marginPx = `${-marginValue}px`;
-    const marginRem = pxToRemWithUnit(-marginValue);
     return Object.assign(Object.assign({ [`&(.${stretchToFullModalWidthClassName})`]: {
             width: `calc(100% + ${marginValue * 2}px)`,
             margin: `0 ${marginPx}`,
         } }, (!hasHeader && {
         [`&(.${stretchToFullModalWidthClassName}:first-child)`]: {
-            marginTop: hasDismissButton ? marginRem : marginPx,
+            marginTop: hasDismissButton ? pxToRemWithUnit(-marginValue) : marginPx,
         },
     })), { [`&(.${stretchToFullModalWidthClassName}:last-child)`]: {
             marginBottom: marginPx,
         } });
 };
-const getComponentCss$w = (open, fullscreen, hasDismissButton, hasHeader) => {
-    const isFullscreenForXlAndXxl = isFullscreenForXl(fullscreen);
+const getComponentCss$x = (isOpen, isFullscreen, hasDismissButton, hasHeader) => {
+    const isFullscreenForXlAndXxl = isFullscreenForXl(isFullscreen);
+    const duration = isOpen ? '.6s' : '.2s';
     return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle()), { zIndex: MODAL_Z_INDEX, display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }), (open
+            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ position: 'fixed' }, getInsetJssStyle()), { zIndex: MODAL_Z_INDEX, display: 'flex', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }), (isOpen
                 ? {
-                    opacity: 1,
                     visibility: 'inherit',
                 }
                 : {
-                    opacity: 0,
                     visibility: 'hidden',
+                    transition: 'visibility 0s linear .2s',
                 })), hostHiddenStyles), { 
                 // workaround via pseudo element to fix stacking (black) background in safari
-                '&::before': Object.assign(Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading }), frostedGlassStyle), { pointerEvents: 'none' }) }))), { overflowY: 'auto' }),
-            '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(fullscreen, (fullscreenValue) => ({
+                '&::before': Object.assign(Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading, pointerEvents: 'none' }), (isOpen
+                    ? Object.assign({ opacity: 1 }, frostedGlassStyle) : {
+                    opacity: 0,
+                    backdropFilter: 'blur(0px)',
+                    WebkitBackdropFilter: 'blur(0px)',
+                })), { transition: `opacity ${duration} ${transitionTimingFunction}, backdrop-filter ${duration} ${transitionTimingFunction},--webkit-backdrop-filter ${duration} ${transitionTimingFunction}` }) }))), { overflowY: 'auto' }),
+            '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, hasDismissButton), buildResponsiveStyles(isFullscreen, (fullscreenValue) => ({
                 [`&(.${stretchToFullModalWidthClassName}`]: {
                     '&:first-child)': {
                         borderRadius: fullscreenValue ? 0 : '8px 8px 0 0',
@@ -5212,19 +5173,20 @@ const getComponentCss$w = (open, fullscreen, hasDismissButton, hasHeader) => {
         }, root: mergeDeep({
             position: 'relative',
             boxSizing: 'border-box',
-            transition: `transform .6s ${transitionTimingFunction}`,
-            transform: open ? 'scale3d(1,1,1)' : 'scale3d(.9,.9,1)',
+            transform: isOpen ? 'scale3d(1,1,1)' : 'scale3d(.9,.9,1)',
+            opacity: isOpen ? 1 : 0,
+            transition: `opacity ${duration} ${transitionTimingFunction},transform ${duration} ${transitionTimingFunction}`,
             padding: hasDismissButton ? `${pxToRemWithUnit(32)} 32px 32px 32px` : '32px',
             background: backgroundColor,
             outline: 0,
-            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid`, pointerEvents: 'none' }, buildResponsiveStyles(fullscreen, (fullscreenValue) => (Object.assign({ borderRadius: fullscreenValue ? 0 : '12px', borderColor: fullscreenValue ? lightThemePrimaryColor : darkThemePrimaryColor }, getInsetJssStyle(fullscreenValue ? 0 : -4))))),
+            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid`, pointerEvents: 'none' }, buildResponsiveStyles(isFullscreen, (fullscreenValue) => (Object.assign({ borderRadius: fullscreenValue ? 0 : '12px', borderColor: fullscreenValue ? lightThemePrimaryColor : darkThemePrimaryColor }, getInsetJssStyle(fullscreenValue ? 0 : -4))))),
             '&:not(:focus-visible)::before': {
                 border: 0,
             },
             [mediaQueryXl]: {
                 margin: isFullscreenForXlAndXxl ? 0 : `min(192px, 10vh) ${gridExtendedOffsetBase}`,
             },
-        }, buildResponsiveStyles(fullscreen, getFullscreenJssStyles)) }, (hasHeader && {
+        }, buildResponsiveStyles(isFullscreen, getFullscreenJssStyles)) }, (hasHeader && {
         header: {
             padding: '0 0 8px',
         },
@@ -5252,7 +5214,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({
@@ -5271,7 +5233,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': {
@@ -5388,7 +5350,7 @@ const directionArrowMap = {
         },
     },
 };
-const getComponentCss$t = (direction, theme) => {
+const getComponentCss$u = (direction, theme) => {
     const spacerBox = '-16px';
     const { hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
@@ -5437,7 +5399,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': {
@@ -5471,7 +5433,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 = {
@@ -5564,7 +5526,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({
@@ -5598,7 +5560,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': {
@@ -5657,7 +5619,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,
@@ -5689,7 +5651,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);
@@ -5767,7 +5729,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;
@@ -5807,7 +5769,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)),
@@ -5833,7 +5795,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': {
@@ -5886,7 +5848,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)),
@@ -5894,7 +5856,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' }),
@@ -5910,7 +5872,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': {
@@ -5936,7 +5898,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
             ? {
@@ -5976,7 +5938,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)),
@@ -5984,7 +5946,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)),
@@ -5992,7 +5954,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({
@@ -6007,7 +5969,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', 
@@ -6046,7 +6008,7 @@ const getComponentCss$b = (size, weight, theme) => {
     });
 };
 
-const getComponentCss$a = (theme) => {
+const getComponentCss$b = (theme) => {
     const { primaryColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
@@ -6060,7 +6022,7 @@ const getComponentCss$a = (theme) => {
     });
 };
 
-const getComponentCss$9 = () => {
+const getComponentCss$a = () => {
     return getCss({
         '@global': {
             ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
@@ -6092,7 +6054,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);
@@ -6142,7 +6104,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({
@@ -6199,7 +6161,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');
@@ -6255,7 +6217,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': {
@@ -6281,7 +6243,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),
@@ -6302,7 +6264,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)),
@@ -6317,7 +6279,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,
@@ -6344,8 +6306,28 @@ 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 easeInQuad = 'cubic-bezier(0.45,0,0.55,1)';
+const easeOutQuad = 'cubic-bezier(0.5,1,0.89,1)';
+const ANIMATION_DURATION = 600;
+const duration = `${ANIMATION_DURATION}ms`;
+const getKeyframes = (direction, outsideStyle) => {
+    const insideStyle = { opacity: 1, transform: 'translate3d(0,0,0)' };
+    return direction === 'in'
+        ? {
+            from: outsideStyle,
+            to: insideStyle,
+        }
+        : {
+            from: insideStyle,
+            to: outsideStyle,
+        };
+};
+const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
+    opacity: 0,
+    transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
+});
 const toastCloseClassName = 'close';
-const getComponentCss = () => {
+const getComponentCss$1 = () => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule(Object.assign({ position: 'fixed', left: gridExtendedOffsetBase, right: gridExtendedOffsetBase, 
@@ -6360,68 +6342,88 @@ const getComponentCss = () => {
             '@keyframes in': getKeyframesMobile('in', cssVariablePositionBottomInternal),
             '@keyframes out': getKeyframesMobile('out', cssVariablePositionBottomInternal),
         },
-        hydrated: getAnimationIn('in', "production" !== 'production'  ),
-        [toastCloseClassName]: getAnimationOut('out'),
+        hydrated: {
+            animation: `${duration} $in ${easeInQuad} forwards`,
+        },
+        [toastCloseClassName]: {
+            animation: addImportantToRule(`${ANIMATION_DURATION}ms $out ${easeOutQuad} forwards`),
+        },
+    });
+};
+
+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,
+            },
+        },
     });
 };
 
-exports.getAccordionCss = getComponentCss$W;
-exports.getBannerCss = getComponentCss$V;
-exports.getButtonCss = getComponentCss$R;
-exports.getButtonGroupCss = getComponentCss$U;
-exports.getButtonPureCss = getComponentCss$T;
-exports.getButtonTileCss = getComponentCss$S;
-exports.getCarouselCss = getComponentCss$Q;
-exports.getCheckboxWrapperCss = getComponentCss$P;
-exports.getContentWrapperCss = getComponentCss$O;
-exports.getDisplayCss = getComponentCss$N;
-exports.getDividerCss = getComponentCss$M;
-exports.getFieldsetCss = getComponentCss$K;
-exports.getFieldsetWrapperCss = getComponentCss$L;
-exports.getFlexCss = getComponentCss$I;
-exports.getFlexItemCss = getComponentCss$J;
+exports.getAccordionCss = getComponentCss$Y;
+exports.getBannerCss = getComponentCss$X;
+exports.getButtonCss = getComponentCss$T;
+exports.getButtonGroupCss = getComponentCss$W;
+exports.getButtonPureCss = getComponentCss$V;
+exports.getButtonTileCss = getComponentCss$U;
+exports.getCarouselCss = getComponentCss$S;
+exports.getCheckboxWrapperCss = getComponentCss$R;
+exports.getContentWrapperCss = getComponentCss$Q;
+exports.getCrestCss = getComponentCss$P;
+exports.getDisplayCss = getComponentCss$O;
+exports.getDividerCss = getComponentCss$N;
+exports.getFieldsetCss = getComponentCss$L;
+exports.getFieldsetWrapperCss = getComponentCss$M;
+exports.getFlexCss = getComponentCss$J;
+exports.getFlexItemCss = getComponentCss$K;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$G;
-exports.getGridItemCss = getComponentCss$H;
-exports.getHeadingCss = getComponentCss$F;
-exports.getHeadlineCss = getComponentCss$E;
-exports.getIconCss = getComponentCss$D;
-exports.getInlineNotificationCss = getComponentCss$C;
-exports.getLinkCss = getComponentCss$A;
-exports.getLinkPureCss = getComponentCss$B;
-exports.getLinkSocialCss = getComponentCss$A;
-exports.getLinkTileCss = getComponentCss$y;
-exports.getLinkTileModelSignatureCss = getComponentCss$z;
-exports.getMarqueCss = getComponentCss$x;
-exports.getModalCss = getComponentCss$w;
-exports.getModelSignatureCss = getComponentCss$v;
-exports.getPaginationCss = getComponentCss$u;
-exports.getPopoverCss = getComponentCss$t;
-exports.getRadioButtonWrapperCss = getComponentCss$s;
-exports.getScrollerCss = getComponentCss$r;
-exports.getSegmentedControlCss = getComponentCss$p;
-exports.getSegmentedControlItemCss = getComponentCss$q;
-exports.getSelectWrapperCss = getComponentCss$o;
-exports.getSpinnerCss = getComponentCss$m;
-exports.getStepperHorizontalCss = getComponentCss$k;
-exports.getStepperHorizontalItemCss = getComponentCss$l;
-exports.getSwitchCss = getComponentCss$j;
-exports.getTableBodyCss = getComponentCss$i;
-exports.getTableCellCss = getComponentCss$h;
-exports.getTableCss = getComponentCss$g;
-exports.getTableHeadCellCss = getComponentCss$f;
-exports.getTableHeadCss = getComponentCss$d;
-exports.getTableHeadRowCss = getComponentCss$e;
-exports.getTableRowCss = getComponentCss$c;
-exports.getTabsBarCss = getComponentCss$b;
-exports.getTabsCss = getComponentCss$9;
-exports.getTabsItemCss = getComponentCss$a;
-exports.getTagCss = getComponentCss$7;
-exports.getTagDismissibleCss = getComponentCss$8;
-exports.getTextCss = getComponentCss$3;
-exports.getTextFieldWrapperCss = getComponentCss$6;
-exports.getTextListCss = getComponentCss$5;
-exports.getTextListItemCss = getComponentCss$4;
-exports.getTextareaWrapperCss = getComponentCss$2;
-exports.getToastCss = getComponentCss;
+exports.getGridCss = getComponentCss$H;
+exports.getGridItemCss = getComponentCss$I;
+exports.getHeadingCss = getComponentCss$G;
+exports.getHeadlineCss = getComponentCss$F;
+exports.getIconCss = getComponentCss$E;
+exports.getInlineNotificationCss = getComponentCss$D;
+exports.getLinkCss = getComponentCss$B;
+exports.getLinkPureCss = getComponentCss$C;
+exports.getLinkSocialCss = getComponentCss$B;
+exports.getLinkTileCss = getComponentCss$z;
+exports.getLinkTileModelSignatureCss = getComponentCss$A;
+exports.getMarqueCss = getComponentCss$y;
+exports.getModalCss = getComponentCss$x;
+exports.getModelSignatureCss = getComponentCss$w;
+exports.getPaginationCss = getComponentCss$v;
+exports.getPopoverCss = getComponentCss$u;
+exports.getRadioButtonWrapperCss = getComponentCss$t;
+exports.getScrollerCss = getComponentCss$s;
+exports.getSegmentedControlCss = getComponentCss$q;
+exports.getSegmentedControlItemCss = getComponentCss$r;
+exports.getSelectWrapperCss = getComponentCss$p;
+exports.getSpinnerCss = getComponentCss$n;
+exports.getStepperHorizontalCss = getComponentCss$l;
+exports.getStepperHorizontalItemCss = getComponentCss$m;
+exports.getSwitchCss = getComponentCss$k;
+exports.getTableBodyCss = getComponentCss$j;
+exports.getTableCellCss = getComponentCss$i;
+exports.getTableCss = getComponentCss$h;
+exports.getTableHeadCellCss = getComponentCss$g;
+exports.getTableHeadCss = getComponentCss$e;
+exports.getTableHeadRowCss = getComponentCss$f;
+exports.getTableRowCss = getComponentCss$d;
+exports.getTabsBarCss = getComponentCss$c;
+exports.getTabsCss = getComponentCss$a;
+exports.getTabsItemCss = getComponentCss$b;
+exports.getTagCss = getComponentCss$8;
+exports.getTagDismissibleCss = getComponentCss$9;
+exports.getTextCss = getComponentCss$4;
+exports.getTextFieldWrapperCss = getComponentCss$7;
+exports.getTextListCss = getComponentCss$6;
+exports.getTextListItemCss = getComponentCss$5;
+exports.getTextareaWrapperCss = getComponentCss$3;
+exports.getToastCss = getComponentCss$1;
+exports.getWordmarkCss = getComponentCss;