@porsche-design-system/components-react 2.20.0 → 3.0.0-alpha.0

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

@@ -1,5 +1,9 @@
 'use strict';
 
+const isDisabledOrLoading = (disabled, loading) => {
+    return disabled || loading;
+};
+
 const hasWindow = typeof window !== 'undefined';
 
 const attributeMutationMap = new Map();
@@ -35,344 +39,259 @@ const parseJSON = (prop) => {
     }
 };
 
-const breakpoint$1 = {
-    xxs: '0px',
-    xs: '480px',
-    s: '760px',
-    m: '1000px',
-    l: '1300px',
-    xl: '1760px',
-    xxl: '1920px', // TODO: xxl missing in breakpoint customizable
-};
+const borderRadiusSmall = '4px';
 
-const colorExternal = {
-    facebook: '#1877f2',
-    google: '#4285f4',
-    instagram: '#e1306c',
-    kakaotalk: '#fae300',
-    linkedin: '#0077b5',
-    naver: '#03cf5d',
-    pinterest: '#e60023',
-    reddit: '#ff4500',
-    tiktok: '#fe2c55',
-    twitter: '#1da1f2',
-    wechat: '#1aad19',
-    whatsapp: '#25d366',
-    xing: '#006567',
-    youtube: '#ff0000',
-};
+const borderRadiusMedium = '8px';
 
-const getFocus = (opts) => {
-    return {
-        outline: 'transparent solid 1px',
-        outlineOffset: opts?.offset || '2px',
-        '&::-moz-focus-inner': {
-            border: '0', // fix for Firefox, avoid dotted outline in button on focus
-        },
-        '&:focus': {
-            outlineColor: opts?.color || 'currentColor',
-            // why? have a look at this article https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
-            '&:not(:focus-visible)': {
-                outlineColor: 'transparent',
-            },
-        },
-    };
-};
+const borderWidthBase = '2px';
+
+const _dropShadowBackgroundColor = 'rgba(0, 0, 0, 0.16)';
 
-const fontBehavior = {
-    textSizeAdjust: 'none',
-    WebkitTextSizeAdjust: 'none', // stop iOS safari from adjusting font size when screen rotation is changing
+const dropShadowLowStyle = {
+    filter: `drop-shadow(0px 3px 8px ${_dropShadowBackgroundColor})`,
 };
 
 const fontFamily = "'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif";
 
-const fontHyphenation = {
+const fontHyphenationStyle = {
     overflowWrap: 'break-word',
     hyphens: 'auto',
 };
 
-const fontLineHeight = 'calc(6px + 2.125ex)'; // float px values may render differently on different browsers
+const fontLineHeight = 'calc(6px + 2.125ex)';
 
-const fontSize = {
-    xSmall: {
-        fontSize: '0.75rem',
-        lineHeight: fontLineHeight,
-    },
-    small: {
-        fontSize: '1rem',
-        lineHeight: fontLineHeight,
-    },
-    medium: {
-        fontSize: '1.5rem',
-        lineHeight: fontLineHeight,
-    },
-    large: {
-        fontSize: '2.25rem',
-        lineHeight: fontLineHeight,
-    },
-    xLarge: {
-        fontSize: '3.25rem',
-        lineHeight: fontLineHeight,
-    },
+const fontSizeTextXSmall = '.875rem';
+
+const fontSizeTextSmall = '1rem';
+
+const fontSizeTextMedium = 'clamp(1.2rem, .12vw + 1.18rem, 1.31rem)';
+
+const fontSizeTextLarge = 'clamp(1.44rem, .3vw + 1.38rem, 1.71rem)';
+
+const fontSizeTextXLarge = 'clamp(1.73rem, .57vw + 1.61rem, 2.24rem)';
+
+const fontSizeText = {
+    xSmall: fontSizeTextXSmall,
+    small: fontSizeTextSmall,
+    medium: fontSizeTextMedium,
+    large: fontSizeTextLarge,
+    xLarge: fontSizeTextXLarge,
 };
 
+const fontSizeHeadingSmall = fontSizeTextSmall;
+
+const fontSizeHeadingMedium = fontSizeTextMedium;
+
+const fontSizeHeadingLarge = fontSizeTextLarge;
+
+const fontSizeHeadingXLarge = fontSizeTextXLarge;
+
+const fontSizeHeadingXXLarge = 'clamp(2.07rem, .96vw + 1.88rem, 2.94rem)';
+
+const fontSizeHeadingXXXLarge = 'clamp(2.49rem, 1.51vw + 2.19rem, 3.84rem)';
+
+const fontSizeDisplayMedium = 'clamp(2.07rem, 3.32vw + 1.41rem, 5.06rem)';
+
+const fontSizeDisplayLarge = 'clamp(2.49rem, 5.67vw + 1.35rem, 7.59rem)';
+
+const fontWeightRegular = 400;
+
+const fontWeightSemiBold$1 = 600;
+
+const fontWeightBold = 700;
+
 const fontWeight = {
-    thin: 100,
-    regular: 400,
-    semiBold: 600,
-    bold: 700,
+    regular: fontWeightRegular,
+    semiBold: fontWeightSemiBold$1,
+    bold: fontWeightBold,
 };
 
-const fontStyle = 'normal';
+const fontStyleNormal = 'normal';
 
-const fontVariant = 'normal';
+const fontStyleItalic = 'italic';
 
-const gridMaxWidth = '120rem';
+const fontVariant = 'normal';
 
-// TODO: reduce to one const by using clamp() + pow() as soon as browser support is given
-// Read this article on how to apply and calculate poly fluid sizing: https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/
-const gridSafeZone = {
-    base: 'max(1rem, 7vw)',
-    xl: 'min(calc(43vw - 39.6rem), 12rem)',
+const backdropFilter = 'blur(32px)';
+const frostedGlassStyle = {
+    WebkitBackdropFilter: backdropFilter,
+    backdropFilter,
 };
 
-/* Auto Generated Start */
+const breakpointBase = '0px';
+
+const breakpointXS = '480px';
+
+const breakpointS = '760px';
+
+const breakpointM = '1000px';
+
+const breakpointL = '1300px';
+
+const breakpointXL = '1760px';
+
+const breakpointXXL = '1920px';
+
 const breakpoint = {
-    "xxs": 0,
-    "xs": 480,
-    "s": 760,
-    "m": 1000,
-    "l": 1300,
-    "xl": 1760,
-    "xxl": 1920
-};
-function mediaQueryMin(min) {
-    return `@media(min-width:${breakpoint[min]}px)`;
-}
-function mediaQueryMinMax(min, max) {
-    return `${mediaQueryMin(min)} and (max-width:${breakpoint[max] - 1}px)`;
+    base: breakpointBase,
+    xs: breakpointXS,
+    s: breakpointS,
+    m: breakpointM,
+    l: breakpointL,
+    xl: breakpointXL,
+    xxl: breakpointXXL,
+};
+
+function getMediaQueryMin(min) {
+    return `@media(min-width:${breakpoint[min]})`;
 }
 
-const spacing = {
-    xSmall: '0.25rem',
-    small: '0.5rem',
-    medium: '1rem',
-    large: '2rem',
-    xLarge: '3rem',
-    xxLarge: '5rem',
-};
+const gridGap = 'clamp(16px, 3.6vw, 36px)';
 
-const headingXXLarge = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.semiBold} 2rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    [mediaQueryMinMax('s', 'm')]: {
-        fontSize: '2.625rem',
-    },
-    [mediaQueryMinMax('m', 'l')]: {
-        fontSize: '3.25rem',
-    },
-    [mediaQueryMinMax('l', 'xl')]: {
-        fontSize: '3.875rem',
-    },
-    [mediaQueryMin('xl')]: {
-        fontSize: '4.5rem',
-    },
-};
+const gridWidthMin = '320px';
 
-const headingXLarge = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.semiBold} 1.75rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    [mediaQueryMinMax('s', 'm')]: {
-        fontSize: '2.25rem',
-    },
-    [mediaQueryMinMax('m', 'l')]: {
-        fontSize: '2.75rem',
-    },
-    [mediaQueryMinMax('l', 'xl')]: {
-        fontSize: '3.25rem',
-    },
-    [mediaQueryMin('xl')]: {
-        fontSize: '3.75rem',
-    },
-};
+const gridWidthMax = '2560px';
 
-const headingLarge = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.semiBold} 1.5rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    [mediaQueryMinMax('s', 'm')]: {
-        fontSize: '1.875rem',
-    },
-    [mediaQueryMinMax('m', 'l')]: {
-        fontSize: '2.25rem',
-    },
-    [mediaQueryMinMax('l', 'xl')]: {
-        fontSize: '2.625rem',
-    },
-    [mediaQueryMin('xl')]: {
-        fontSize: '3rem',
-    },
-};
+// fluid sizing calculated by https://fluidtypography.com/#app-get-started
+// gridSafeZoneBase: Viewport Width Range = 320 - 1920px / Size Range = 22 - 192px
+const gridSafeZoneBase = 'clamp(22px, 10.625vw - 12px, 192px)';
 
-const headingMedium = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.semiBold} 1.25rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    [mediaQueryMinMax('s', 'm')]: {
-        fontSize: '1.5rem',
-    },
-    [mediaQueryMinMax('m', 'l')]: {
-        fontSize: '1.75rem',
-    },
-    [mediaQueryMinMax('l', 'xl')]: {
-        fontSize: '2rem',
-    },
-    [mediaQueryMin('xl')]: {
-        fontSize: '2.25rem',
-    },
-};
+// fluid sizing calculated by https://fluidtypography.com/#app-get-started
+// gridSafeZoneXXL: Viewport Width Range = 1920 - 2560px / Size Range = 192 - 512px
+const gridSafeZoneXXL = 'clamp(192px, 50vw - 768px, 512px)';
 
-const headingSmall = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.semiBold} 1rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    [mediaQueryMinMax('s', 'm')]: {
-        fontSize: '1.125rem',
-    },
-    [mediaQueryMinMax('m', 'l')]: {
-        fontSize: '1.25rem',
-    },
-    [mediaQueryMinMax('l', 'xl')]: {
-        fontSize: '1.375rem',
+const gridFullColumnStart = 'full-start';
+
+const gridExtendedColumnStart = 'extended-start';
+
+const gridBasicColumnStart = 'basic-start';
+
+const gridNarrowColumnStart = 'narrow-start';
+
+const gridNarrowColumnEnd = 'narrow-end';
+
+const gridBasicColumnEnd = 'basic-end';
+
+const gridExtendedColumnEnd = 'extended-end';
+
+const gridFullColumnEnd = 'full-end';
+
+const _cssVariableGridExtendedSpanOneHalf = '--pds-grid-extended-span-one-half';
+const _cssVariableGridBasicSpanOneHalf = '--pds-grid-basic-span-one-half';
+const _cssVariableGridBasicSpanOneThird = '--pds-grid-basic-span-one-third';
+const _cssVariableGridBasicSpanTwoThirds = '--pds-grid-basic-span-two-thirds';
+const _cssVariableGridNarrowSpanOneHalf = '--pds-grid-narrow-span-one-half';
+
+const _gridColumnSpan = 'span';
+const _cssVariableInternalGridSafeZone = '--pds-internal-grid-safe-zone';
+const getColumns = (repeat) => `repeat(${repeat}, minmax(0, 1fr))`;
+const getOuterColumn = () => `minmax(0, calc(var(${_cssVariableInternalGridSafeZone}) - ${gridGap}))`;
+const getGridTemplateColumns = (layout) => layout === 'mobile'
+    ? `[${gridFullColumnStart}] ${getOuterColumn()} [${gridExtendedColumnStart} ${gridBasicColumnStart} ${gridNarrowColumnStart}] ${getColumns(6)} [${gridNarrowColumnEnd} ${gridBasicColumnEnd} ${gridExtendedColumnEnd}] ${getOuterColumn()} [${gridFullColumnEnd}]`
+    : `[${gridFullColumnStart}] ${getOuterColumn()} [${gridExtendedColumnStart}] ${getColumns(1)} [${gridBasicColumnStart}] ${getColumns(2)} [${gridNarrowColumnStart}] ${getColumns(8)} [${gridNarrowColumnEnd}] ${getColumns(2)} [${gridBasicColumnEnd}] ${getColumns(1)} [${gridExtendedColumnEnd}] ${getOuterColumn()} [${gridFullColumnEnd}]`;
+({
+    [_cssVariableInternalGridSafeZone]: gridSafeZoneBase,
+    [_cssVariableGridExtendedSpanOneHalf]: `${_gridColumnSpan} 3`,
+    [_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 3`,
+    [_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 2`,
+    [_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 4`,
+    [_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 3`,
+    display: 'grid',
+    gridGap,
+    gridTemplateColumns: getGridTemplateColumns('mobile'),
+    minWidth: gridWidthMin,
+    maxWidth: gridWidthMax,
+    margin: 0,
+    padding: `0 max(0px, (100% - ${gridWidthMax}) / 2)`,
+    boxSizing: 'content-box',
+    [getMediaQueryMin('s')]: {
+        // TODO: we should define those css variables in global scope by getInitialStyles() partial to reduce repetitive css declaration,
+        //  on the other hand, it's not necessary anymore as soon as CSS Subgrid is supported in all major browsers.
+        //  In addition, it wouldn't work in case only utilities are used without getInitialStyles() partials.
+        //  So maybe, keep it as is.
+        [_cssVariableGridExtendedSpanOneHalf]: `${_gridColumnSpan} 7`,
+        [_cssVariableGridBasicSpanOneHalf]: `${_gridColumnSpan} 6`,
+        [_cssVariableGridBasicSpanOneThird]: `${_gridColumnSpan} 4`,
+        [_cssVariableGridBasicSpanTwoThirds]: `${_gridColumnSpan} 8`,
+        [_cssVariableGridNarrowSpanOneHalf]: `${_gridColumnSpan} 4`,
+        gridTemplateColumns: getGridTemplateColumns('desktop'),
     },
-    [mediaQueryMin('xl')]: {
-        fontSize: '1.5rem',
+    [getMediaQueryMin('xxl')]: {
+        [_cssVariableInternalGridSafeZone]: gridSafeZoneXXL,
     },
-};
+});
 
-const headingXSmall = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.semiBold} 1rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-};
+function getMediaQueryMax(max) {
+    return `@media(max-width:${breakpoint[max].slice(0, -2) - 1}px)`;
+}
+
+function getMediaQueryMinMax(min, max) {
+    return `@media(min-width:${breakpoint[min]}) and (max-width:${breakpoint[max].slice(0, -2) - 1}px)`;
+}
 
-const textXSmall = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.regular} 0.75rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    ...fontHyphenation,
+const spacingStaticXSmall = '4px';
+
+const spacingStaticSmall = '8px';
+
+const spacingStaticMedium = '16px';
+
+const spacingStaticLarge = '32px';
+
+const themeDarkBackgroundShading = 'rgba(1, 2, 5, 0.67)';
+
+const _displayFontPartA = `${fontStyleItalic} ${fontVariant} ${fontWeightSemiBold$1} `;
+const _displayFontPartB = `/${fontLineHeight} ${fontFamily}`;
+
+const displayMediumStyle = {
+    font: `${_displayFontPartA}${fontSizeDisplayMedium}${_displayFontPartB}`,
 };
 
-const textSmall = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.regular} 1rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    ...fontHyphenation,
+const displayLargeStyle = {
+    font: `${_displayFontPartA}${fontSizeDisplayLarge}${_displayFontPartB}`,
 };
 
-const textMedium = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.regular} 1.5rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    ...fontHyphenation,
+const _headingFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightSemiBold$1} `;
+const _headingFontPartB = `/${fontLineHeight} ${fontFamily}`;
+
+const headingSmallStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingSmall}${_headingFontPartB}`,
 };
 
-const textLarge = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.regular} 2.25rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    ...fontHyphenation,
+const headingMediumStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingMedium}${_headingFontPartB}`,
 };
 
-const textXLarge = {
-    font: `${fontStyle} ${fontVariant} ${fontWeight.regular} 3.25rem/${fontLineHeight} ${fontFamily}`,
-    ...fontBehavior,
-    ...fontHyphenation,
+const headingLargeStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingLarge}${_headingFontPartB}`,
 };
 
-const themeLight$1 = {
-    brand: '#d5001c',
-    base: '#000',
-    background: {
-        base: '#fff',
-        surface: '#f2f2f2',
-        shading: 'rgba(14, 20, 24, 0.9)',
-    },
-    contrast: {
-        high: '#323639',
-        medium: '#626669',
-        low: '#e3e4e5',
-    },
-    notification: {
-        success: '#018a16',
-        successSoft: '#e5f3e7',
-        warning: '#ff9b00',
-        warningSoft: '#fff5e5',
-        error: '#e00000',
-        errorSoft: '#fae6e6',
-        neutral: '#0061bd',
-        neutralSoft: '#e5eff8',
-    },
-    state: {
-        hover: '#d5001c',
-        active: '#d5001c',
-        focus: 'currentColor',
-        disabled: '#96989a',
-    },
+const headingXXLargeStyle = {
+    font: `${_headingFontPartA}${fontSizeHeadingXXLarge}${_headingFontPartB}`,
 };
 
-({
-    ...themeLight$1,
-    brand: '#00b0f4',
-    state: {
-        ...themeLight$1.state,
-        hover: '#00b0f4',
-        active: '#00b0f4',
-    },
-});
+const _textFontPartA = `${fontStyleNormal} ${fontVariant} ${fontWeightRegular} `;
+const _textFontPartB = `/${fontLineHeight} ${fontFamily}`;
 
-const themeDark$1 = {
-    brand: '#d5001c',
-    base: '#fff',
-    background: {
-        base: '#0e1418',
-        surface: '#262b2e',
-        shading: 'rgba(14, 20, 24, 0.9)',
-    },
-    contrast: {
-        high: '#e3e4e5',
-        medium: '#b0b1b2',
-        low: '#4a4e51',
-    },
-    notification: {
-        success: '#01ba1d',
-        successSoft: '#bfeec6',
-        warning: '#ff9b00',
-        warningSoft: '#ffe6bf',
-        error: '#fc1717',
-        errorSoft: '#fec5c5',
-        neutral: '#2193ff',
-        neutralSoft: '#c7e4ff',
-    },
-    state: {
-        hover: '#ff0223',
-        active: '#ff0223',
-        focus: 'currentColor',
-        disabled: '#7c7f81',
-    },
+const textXSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextXSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
 };
 
-({
-    ...themeDark$1,
-    brand: '#00b0f4',
-    state: {
-        ...themeDark$1.state,
-        hover: '#00b0f4',
-        active: '#00b0f4',
-    },
-});
+const textSmallStyle = {
+    font: `${_textFontPartA}${fontSizeTextSmall}${_textFontPartB}`,
+    ...fontHyphenationStyle,
+};
 
-const mediaQueries = Object.entries(breakpoint$1)
+// TODO: we shouldn't exclude xxl breakpoint
+const mediaQueries = Object.entries(breakpoint)
     .filter(([key]) => key !== 'xxl')
     .map(([, val]) => `(min-width:${val})`);
 hasWindow && window.matchMedia ? mediaQueries.map(window.matchMedia) : [];
 
-Object.entries(breakpoint$1).reduce((result, [key, val]) => (Object.assign(Object.assign({}, result), { [val]: key })), {});
+Object.entries(breakpoint).reduce((result, [key, val]) => (Object.assign(Object.assign({}, result), { [val]: key })), {});
 
-const hasVisibleIcon = (iconName) => {
-    return iconName !== 'none';
+const hasVisibleIcon = (iconName, iconSource) => {
+    return iconName !== 'none' || !!iconSource;
 };
 
 const childrenMutationMap = new Map();
@@ -560,8 +479,6 @@ debounce(800, (el, ariaElement) => {
     ariaElement.innerText = `You have ${el.maxLength - el.value.length} out of ${el.maxLength} characters left`;
 });
 
-const isVisibleFormState = (state) => state === 'success' || state === 'error';
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -3768,64 +3685,84 @@ var dist = jssCombineAndSortMQ;
 
 /* Auto Generated Start */
 const themeLight = {
-    baseColor: '#000',
-    baseColorDarken: '#000000',
-    brandColor: '#d5001c',
-    backgroundColor: '#fff',
-    backgroundSurfaceColor: '#f2f2f2',
-    contrastLowColor: '#e3e4e5',
-    contrastMediumColor: '#626669',
-    contrastHighColor: '#323639',
-    contrastHighColorDarken: '#151718',
-    hoverColor: '#d5001c',
-    hoverColorDarken: '#980014',
-    activeColor: '#d5001c',
-    focusColor: 'currentColor',
-    disabledColor: '#96989a',
-    errorColor: '#e00000',
-    errorColorDarken: '#a30000',
-    errorSoftColor: '#fae6e6',
-    successColor: '#018a16',
-    successColorDarken: '#014d0c',
-    successSoftColor: '#e5f3e7',
-    warningColor: '#ff9b00',
-    warningSoftColor: '#fff5e5',
-    neutralColor: '#0061bd',
-    neutralSoftColor: '#e5eff8'
+    primaryColor: '#010205',
+    primaryColorDarken: '#000000',
+    backgroundColor: '#FFF',
+    backgroundColorDarken: '#E0E0E0',
+    backgroundColorLighten: '#FFFFFF',
+    backgroundSurfaceColor: '#EEEFF2',
+    backgroundSurfaceColorDarken: '#CBCED7',
+    backgroundSurfaceColorLighten: '#FFFFFF',
+    contrastLowColor: '#D8D8DB',
+    contrastMediumColor: '#949598',
+    contrastHighColor: '#535457',
+    contrastHighColorDarken: '#353638',
+    contrastHighColorLighten: '#717276',
+    hoverColor: 'rgba(148, 149, 152, 0.20)',
+    hoverColorDarken: '#75767A',
+    activeColor: 'rgba(148, 149, 152, 0.20)',
+    focusColor: '#0A0AFF',
+    disabledColor: '#949598',
+    errorColor: '#E7323B',
+    errorColorDarken: '#C51720',
+    errorSoftColor: '#FCE8E9',
+    errorSoftColorDarken: '#EED7D9',
+    errorSoftColorLighten: '#FFFFFF',
+    successColor: '#32B85B',
+    successColorDarken: '#258843',
+    successSoftColor: '#EBFAF0',
+    successSoftColorDarken: '#DDEAE1',
+    successSoftColorLighten: '#FFFFFF',
+    warningColor: '#FECC1B',
+    warningSoftColor: '#FFF9E6',
+    warningSoftColorDarken: '#F5ECD2',
+    warningSoftColorLighten: '#FFFFFF',
+    infoColor: '#1E5BEB',
+    infoSoftColor: '#E8EEFD',
+    infoSoftColorDarken: '#D6DEF0',
+    infoSoftColorLighten: '#FFFFFF'
 };
 const themeDark = {
-    baseColor: '#fff',
-    baseColorDarken: '#e0e0e0',
-    brandColor: '#d5001c',
-    backgroundColor: '#0e1418',
-    backgroundSurfaceColor: '#262b2e',
-    contrastLowColor: '#4a4e51',
-    contrastMediumColor: '#b0b1b2',
-    contrastHighColor: '#e3e4e5',
-    contrastHighColorDarken: '#c3c5c8',
-    hoverColor: '#ff0223',
-    hoverColorDarken: '#c4001a',
-    activeColor: '#ff0223',
-    focusColor: 'currentColor',
-    disabledColor: '#7c7f81',
-    errorColor: '#fc1717',
-    errorColorDarken: '#d30303',
-    errorSoftColor: '#fec5c5',
-    successColor: '#01ba1d',
-    successColorDarken: '#017d14',
-    successSoftColor: '#bfeec6',
-    warningColor: '#ff9b00',
-    warningSoftColor: '#ffe6bf',
-    neutralColor: '#2193ff',
-    neutralSoftColor: '#c7e4ff'
-};
-const themeLightElectric = Object.assign(Object.assign({}, themeLight), { brandColor: '#00b0f4', hoverColor: '#00b0f4', hoverColorDarken: '#0084b7', activeColor: '#00b0f4' });
-const themeDarkElectric = Object.assign(Object.assign({}, themeDark), { brandColor: '#00b0f4', hoverColor: '#00b0f4', hoverColorDarken: '#0084b7', activeColor: '#00b0f4' });
+    primaryColor: '#FBFCFF',
+    primaryColorDarken: '#BECEFF',
+    backgroundColor: '#0E0E12',
+    backgroundColorDarken: '#000000',
+    backgroundColorLighten: '#292934',
+    backgroundSurfaceColor: '#212225',
+    backgroundSurfaceColorDarken: '#040405',
+    backgroundSurfaceColorLighten: '#3E4045',
+    contrastLowColor: '#404044',
+    contrastMediumColor: '#7E7F82',
+    contrastHighColor: '#AFB0B3',
+    contrastHighColorDarken: '#909195',
+    contrastHighColorLighten: '#CECFD1',
+    hoverColor: 'rgba(126, 127, 130, 0.20)',
+    hoverColorDarken: '#606163',
+    activeColor: 'rgba(126, 127, 130, 0.20)',
+    focusColor: '#0A0AFF',
+    disabledColor: '#7E7F82',
+    errorColor: '#CB3333',
+    errorColorDarken: '#9A2727',
+    errorSoftColor: '#290A0A',
+    errorSoftColorDarken: '#0D0808',
+    errorSoftColorLighten: '#331F1F',
+    successColor: '#00C77E',
+    successColorDarken: '#008A57',
+    successSoftColor: '#003320',
+    successSoftColorDarken: '#04110C',
+    successSoftColorLighten: '#0F432F',
+    warningColor: '#DDB84B',
+    warningSoftColor: '#2B2208',
+    warningSoftColorDarken: '#0D0C07',
+    warningSoftColorLighten: '#362F1C',
+    infoColor: '#027FFC',
+    infoSoftColor: '#001A33',
+    infoSoftColorDarken: '#040A11',
+    infoSoftColorLighten: '#0F2943'
+};
 const themes = {
     'light': themeLight,
-    'dark': themeDark,
-    'light-electric': themeLightElectric,
-    'dark-electric': themeDarkElectric
+    'dark': themeDark
 };
 /* Auto Generated End */
 const getThemedColors = (theme) => {
@@ -3835,16 +3772,6 @@ const getInvertedThemedColors = (theme) => {
     return getThemedColors(isThemeDark(theme) ? 'light' : 'dark');
 };
 
-/**
- * utility to wrap jss styles parameter in `@media (hover: hover)`
- * which is used to not have hover styles on touch devices
- */
-const hoverMediaQuery = (style) => 
-// puppeteer/chromium does not support `@media (hover: hover)` in headless mode
-// see https://github.com/puppeteer/puppeteer/issues/5096 and https://github.com/puppeteer/puppeteer/issues/4820
-({ '@media(hover:hover)': style }) // used for prod build, yarn start and unit tests
-    ; // used for staging build in e2e and vrt tests
-
 const transitionDuration = 'var(--p-transition-duration, .24s)';
 const transitionTimingFunction$1 = 'ease';
 const getTransition = (cssProperty) => `${cssProperty} ${transitionDuration} ${transitionTimingFunction$1}`;
@@ -3916,8 +3843,8 @@ const getTextHiddenJssStyle = (isHidden) => isHidden
         clipPath: 'none',
         whiteSpace: 'normal',
     };
-const getFormTextHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'fit-content', padding: `0 0 ${pxToRemWithUnit(4)}` }));
-const getFormCheckboxRadioHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'auto', padding: `0 0 0 ${pxToRemWithUnit(8)}` }));
+const getFormTextHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'fit-content' }));
+const getFormCheckboxRadioHiddenJssStyle = (isHidden) => (Object.assign(Object.assign({}, getTextHiddenJssStyle(isHidden)), { width: 'auto', padding: `2px 0 0 ${spacingStaticSmall}` }));
 /**
  * Screen reader only styles to hide (text-)contents visually in the browser but grant access for screen readers
  */
@@ -3939,6 +3866,22 @@ const getBackfaceVisibilityJssStyle = () => ({
     WebkitBackfaceVisibility: 'hidden',
 });
 
+const hostHiddenStyles = {
+    '&([hidden])': {
+        display: 'none',
+    },
+};
+
+/**
+ * utility to wrap jss styles parameter in `@media (hover: hover)`
+ * which is used to not have hover styles on touch devices
+ */
+const hoverMediaQuery = (style) => 
+// puppeteer/chromium does not support `@media (hover: hover)` in headless mode
+// see https://github.com/puppeteer/puppeteer/issues/5096 and https://github.com/puppeteer/puppeteer/issues/4820
+({ '@media(hover:hover)': style }) // used for prod build, yarn start and unit tests
+    ; // used for staging build in e2e and vrt tests
+
 // NOTE: handpicked selection of plugins from jss-preset-default
 const jss = createJss({
     plugins: [
@@ -3973,7 +3916,7 @@ const buildResponsiveStyles = (rawValue, getJssStyle) => {
             .filter((key) => key !== 'base')
             .reduce((result, breakpointValue) => (Object.assign(Object.assign({}, result), { 
             // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            [mediaQueryMin(breakpointValue)]: getJssStyle(value[breakpointValue]) })), getJssStyle(value.base))
+            [getMediaQueryMin(breakpointValue)]: getJssStyle(value[breakpointValue]) })), getJssStyle(value.base))
         : getJssStyle(value);
 };
 const isObject$1 = (obj) => typeof obj === 'object' && !Array.isArray(obj);
@@ -3994,18 +3937,6 @@ const mergeDeep = (...objects) => {
     }, {});
 };
 
-const paramCaseToCamelCase = (str) => {
-    return str.replace(/-(\w)/g, (_, group) => group.toUpperCase());
-};
-
-const hasDocument = typeof document !== 'undefined';
-
-hasDocument && 'scrollBehavior' in document.documentElement.style;
-const win = typeof window !== 'undefined' ? window : {};
-win.document || { head: {} };
-(win.HTMLElement || class {
-});
-
 [
     { name: 'Model', id: 'model' },
     { name: 'Interest', id: 'interest' },
@@ -5832,28 +5763,16 @@ index.setup({
     plugins: [...create().plugins, dist({ combineMediaQueries: true })],
 });
 
-const isThemeDark = (theme) => {
-    return theme === 'dark';
-};
-
-const isThemeDarkElectric = (theme) => {
-    return theme === 'dark-electric';
-};
-
-const isThemeLightElectric = (theme) => {
-    return theme === 'light-electric';
-};
+const hasDocument = typeof document !== 'undefined';
 
-const isSizeInherit = (size) => {
-    return JSON.stringify(size).includes('inherit');
-};
+hasDocument && 'scrollBehavior' in document.documentElement.style;
+const win = typeof window !== 'undefined' ? window : {};
+win.document || { head: {} };
+(win.HTMLElement || class {
+});
 
-const textMap = {
-    'x-small': textXSmall,
-    small: textSmall,
-    medium: textMedium,
-    large: textLarge,
-    'x-large': textXLarge,
+const isThemeDark = (theme) => {
+    return theme === 'dark';
 };
 
 const formatObjectOutput = (value) => {
@@ -5866,34 +5785,40 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(BREAKPOINTS.reduce((prev, key) => (Object.assign(Object.assign({}, prev), { [key + (key !== 'base' ? '?' : '')]: 'value' })), {})).replace(/"/g, '');
 
-const HEADLINE_VARIANTS = [
-    'large-title',
-    'headline-1',
-    'headline-2',
-    'headline-3',
-    'headline-4',
-    'headline-5',
-];
-const isVariantType = (variant) => {
-    return HEADLINE_VARIANTS.includes(variant);
-};
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
-const getComponentCss$R = (size, compact, open, theme) => {
-    const { baseColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
+const getComponentCss$S = (size, compact, open, theme) => {
+    const { primaryColor, hoverColor, focusColor, contrastLowColor } = getThemedColors(theme);
     const border = `1px solid ${contrastLowColor}`;
     return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': Object.assign({ display: 'block' }, (!compact && {
-                '&(:first-of-type) .root': {
-                    borderTop: border,
+            ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)),
+            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', justifyContent: 'space-between', margin: '2px 0', width: '100%', textDecoration: 'none', border: 0, outline: 0, gap: '24px', background: 'transparent', cursor: 'pointer', textAlign: 'left', color: primaryColor }, textSmallStyle), { fontWeight: fontWeight.semiBold }), buildResponsiveStyles(size, (s) => ({
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                fontSize: fontSizeText[s],
+                padding: compact ? '4px 0' : `${s === 'medium' ? '20px' : '12px'} 0`,
+            }))), mergeDeep({
+                '&::before': Object.assign({ content: '""', position: 'absolute', borderRadius: borderRadiusSmall, left: '-4px', right: '-4px' }, (compact
+                    ? {
+                        top: '2px',
+                        bottom: '2px',
+                    }
+                    : {
+                        top: '6px',
+                        bottom: '6px',
+                    })),
+            }, hoverMediaQuery({
+                '&::before': {
+                    transition: getTransition('background-color'),
                 },
-            })),
-            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', justifyContent: 'space-between', margin: `${pxToRemWithUnit(4)} 0`, width: '100%', textDecoration: 'none', border: 0, background: 'transparent', cursor: 'pointer', transition: getTransition('color'), overflow: 'hidden', textAlign: 'left', color: baseColor }, textSmall), { fontWeight: fontWeight.semiBold }), (compact
-                ? { padding: `${pxToRemWithUnit(4)} 0` }
-                : buildResponsiveStyles(size, (s) => (Object.assign(Object.assign({}, fontSize[s]), { padding: `${pxToRemWithUnit(s === 'medium' ? 20 : 12)} 0` }))))), getFocusJssStyle({ color: focusColor })), hoverMediaQuery({
-                '&:hover': {
-                    color: hoverColor,
+                '&:hover::before': {
+                    background: hoverColor,
                 },
-            })),
+            }))), { '&:focus::before': {
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                }, '&:not(:focus-visible)::before': {
+                    border: 0,
+                } }),
         } }, (!compact && {
         root: {
             borderBottom: border,
@@ -5904,14 +5829,13 @@ const getComponentCss$R = (size, compact, open, theme) => {
         }, icon: {
             width: fontLineHeight,
             height: fontLineHeight,
-            marginLeft: '1.5rem',
             transformOrigin: '50% 50%',
-            transform: open ? 'rotate3d(0,0,1,180deg)' : 'rotate3d(0,0,1,0.0001deg)',
+            transform: open ? 'rotate3d(0)' : 'rotate3d(0,0,1,90deg)',
             transition: getTransition('transform'),
         }, collapsible: Object.assign({ padding: 0, overflow: 'hidden' }, (open
             ? {
                 height: 'auto',
-                paddingBottom: compact ? spacing.small : '2.5rem',
+                paddingBottom: compact ? spacingStaticSmall : '24px',
                 visibility: 'visible',
                 transition: getTransition('height') + `,visibility ${transitionDuration}`,
                 animation: `$open ${transitionDuration} ease forwards`,
@@ -5937,19 +5861,44 @@ const MODAL_Z_INDEX = 99999;
 const POPOVER_Z_INDEX = 9999;
 const BANNER_Z_INDEX = 99;
 
-const bannerPositionTypeVar = '--p-banner-position-type';
-const bannerPositionTopVar = '--p-banner-position-top';
-const bannerPositionBottomVar = '--p-banner-position-bottom';
-const bannerZIndexVar = '--p-banner-z-index';
-const bannerAnimationDurationVar = '--p-animation-duration__banner';
+const oneColumnWidthS = `calc((100% - ${gridSafeZoneBase} * 2 - ${gridGap} * 13) / 14)`;
+const oneColumnWidthXXL = `calc((min(100%, ${gridWidthMax}) - ${gridSafeZoneXXL} * 2 - ${gridGap} * 13) / 14)`;
+const offsetHorizontalXXL = `max(0px, (100% - ${gridWidthMax}) / 2)`;
+const widthMap$1 = {
+    narrow: {
+        padding: `0 ${gridSafeZoneBase}`,
+        [getMediaQueryMin('s')]: {
+            padding: `0 calc(${gridSafeZoneBase} + ${gridGap} * 3 + ${oneColumnWidthS} * 3)`,
+        },
+        [getMediaQueryMin('xxl')]: {
+            padding: `0 calc(${offsetHorizontalXXL} + ${gridSafeZoneXXL} + ${gridGap} * 3 + ${oneColumnWidthXXL} * 3)`,
+        },
+    },
+    basic: {
+        padding: `0 ${gridSafeZoneBase}`,
+        [getMediaQueryMin('s')]: {
+            padding: `0 calc(${gridSafeZoneBase} + ${gridGap} + ${oneColumnWidthS})`,
+        },
+        [getMediaQueryMin('xxl')]: {
+            padding: `0 calc(${offsetHorizontalXXL} + ${gridSafeZoneXXL} + ${gridGap} + ${oneColumnWidthXXL})`,
+        },
+    },
+    extended: {
+        padding: `0 ${gridSafeZoneBase}`,
+        [getMediaQueryMin('xxl')]: {
+            padding: `0 calc(${offsetHorizontalXXL} + ${gridSafeZoneXXL})`,
+        },
+    },
+};
+const getContentWrapperStyle = (width) => {
+    return Object.assign({ display: 'block', margin: 0, padding: `0 ${offsetHorizontalXXL}`, width: 'auto', minWidth: 0, maxWidth: gridWidthMax }, widthMap$1[width]);
+};
+
 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 mediaQueryS$2 = mediaQueryMin('s');
-const mediaQueryXxs = mediaQueryMinMax('xxs', 's');
 const getBoxShadow = () => ({
-    boxShadow: `0 ${pxToRemWithUnit(2)} ${pxToRemWithUnit(4)} 0 rgba(0,0,0,0.05),` +
-        `0 ${pxToRemWithUnit(15)} ${pxToRemWithUnit(20)} 0 rgba(0,0,0,0.2)`,
+    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.05),0 15px 20px 0 rgba(0,0,0,0.2)',
 });
 const getAnimationIn = (keyframesName, durationVar) => {
     const duration = durationVar ? `var(${durationVar},${ANIMATION_DURATION}ms)` : `${ANIMATION_DURATION}ms`;
@@ -5976,39 +5925,43 @@ const getKeyframesMobile = (direction, bottomVar) => getKeyframes(direction, {
     opacity: 0,
     transform: `translate3d(0,calc(var(${bottomVar}) + 100%),0)`, // space before and after "+" is crucial
 });
+
+const bannerPositionTypeVar = '--p-banner-position-type';
+const bannerPositionTopVar = '--p-banner-position-top';
+const bannerPositionBottomVar = '--p-banner-position-bottom';
+const bannerZIndexVar = '--p-internal-banner-z-index';
+const bannerAnimationDurationVar = '--p-animation-duration';
+const bannerOffset = '56px';
+const mediaQueryBase = getMediaQueryMinMax('base', 's');
+const mediaQueryS$1 = getMediaQueryMin('s');
 const getKeyframesDesktop = (direction, topVar) => getKeyframes(direction, {
     opacity: 0,
     transform: `translate3d(0,calc(-100% - var(${topVar})),0)`, // space before and after "-" is crucial
 });
-const getComponentCss$Q = () => {
+const widthMap = {
+    fluid: 'extended',
+    extended: 'extended',
+    basic: 'basic',
+};
+const getComponentCss$R = (width) => {
     return getCss({
         '@global': {
-            ':host': {
+            ':host': Object.assign(Object.assign({ 
                 // TODO: Why is nothing set as important here?
-                [bannerPositionTopVar]: pxToRemWithUnit(56),
-                [bannerPositionBottomVar]: pxToRemWithUnit(56),
-                display: 'block',
-                position: `var(${bannerPositionTypeVar},fixed)`,
-                zIndex: `var(${bannerZIndexVar},${BANNER_Z_INDEX})`,
-                opacity: 0,
-                left: 0,
-                right: 0,
-                willChange: 'opacity,transform',
-                [mediaQueryXxs]: {
+                [bannerPositionTopVar]: bannerOffset, [bannerPositionBottomVar]: bannerOffset, display: 'block', position: `var(${bannerPositionTypeVar},fixed)`, zIndex: `var(${bannerZIndexVar},${BANNER_Z_INDEX})`, opacity: 0, left: 0, right: 0, willChange: 'opacity,transform' }, mergeDeep(addImportantToEachRule(Object.assign(Object.assign({}, getContentWrapperStyle(widthMap[width])), hostHiddenStyles)), {
+                [mediaQueryBase]: {
                     bottom: `var(${bannerPositionBottomVar})`,
                 },
-                [mediaQueryS$2]: {
+                [mediaQueryS$1]: {
                     top: `var(${bannerPositionTopVar})`,
                 },
-                '&(.hydrated),&(.ssr)': {
-                    [mediaQueryXxs]: getAnimationIn('mobileIn', bannerAnimationDurationVar),
-                    [mediaQueryS$2]: getAnimationIn('desktopIn', bannerAnimationDurationVar),
-                },
-                '&(.banner--close)': {
-                    [mediaQueryXxs]: getAnimationOut('mobileOut'),
-                    [mediaQueryS$2]: getAnimationOut('desktopOut'),
-                },
-            },
+            })), { '&(.hydrated),&(.ssr)': {
+                    [mediaQueryBase]: getAnimationIn('mobileIn', bannerAnimationDurationVar),
+                    [mediaQueryS$1]: getAnimationIn('desktopIn', bannerAnimationDurationVar),
+                }, '&(.banner--close)': {
+                    [mediaQueryBase]: getAnimationOut('mobileOut'),
+                    [mediaQueryS$1]: getAnimationOut('desktopOut'),
+                } }),
             '@keyframes mobileIn': getKeyframesMobile('in', bannerPositionBottomVar),
             '@keyframes mobileOut': getKeyframesMobile('out', bannerPositionBottomVar),
             '@keyframes desktopIn': getKeyframesDesktop('in', bannerPositionTopVar),
@@ -6018,7 +5971,6 @@ const getComponentCss$Q = () => {
     });
 };
 
-const { medium: spacingMedium$2, small: spacingSmall$2 } = spacing;
 const getDirectionJssStyle = (direction) => {
     const style = {
         column: {
@@ -6030,8 +5982,8 @@ const getDirectionJssStyle = (direction) => {
         row: {
             flexFlow: 'row wrap',
             alignItems: 'center',
-            marginRight: `-${spacingSmall$2}`,
-            marginLeft: `-${spacingSmall$2}`,
+            marginRight: `-${spacingStaticSmall}`,
+            marginLeft: `-${spacingStaticSmall}`,
         },
     };
     return style[direction];
@@ -6043,301 +5995,222 @@ const getDirectionSlottedJssStyle = (direction) => {
             marginLeft: 0,
         },
         row: {
-            marginRight: spacingSmall$2,
-            marginLeft: spacingSmall$2,
+            marginRight: spacingStaticSmall,
+            marginLeft: spacingStaticSmall,
         },
     };
     return style[direction];
 };
-const getComponentCss$P = (direction) => {
+const getComponentCss$Q = (direction) => {
     return getCss({
         '@global': {
-            ':host': {
-                display: 'block',
-            },
-            div: Object.assign({ display: 'flex', marginTop: `-${spacingMedium$2}` }, buildResponsiveStyles(direction, getDirectionJssStyle)),
-            '::slotted(*)': addImportantToEachRule(Object.assign({ marginTop: spacingMedium$2 }, buildResponsiveStyles(direction, getDirectionSlottedJssStyle))),
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            div: Object.assign({ display: 'flex', marginTop: `-${spacingStaticMedium}` }, buildResponsiveStyles(direction, getDirectionJssStyle)),
+            '::slotted(*)': addImportantToEachRule(Object.assign({ marginTop: spacingStaticMedium }, buildResponsiveStyles(direction, getDirectionSlottedJssStyle))),
         },
     });
 };
 
-const getFontWeight = (weight) => {
-    return fontWeight[weight === 'semibold' ? 'semiBold' : weight];
+const fontSizeTextMap = {
+    'x-small': fontSizeTextXSmall,
+    small: fontSizeTextSmall,
+    medium: fontSizeTextMedium,
+    large: fontSizeTextLarge,
+    'x-large': fontSizeTextXLarge,
+    inherit: 'inherit',
 };
-
-const getSizeJssStyle$1 = (textSize) => {
-    if (isSizeInherit(textSize)) {
-        return {
-            fontSize: 'inherit',
-        };
-    }
-    else {
-        const { fontSize: size } = fontSize[paramCaseToCamelCase(textSize)];
-        const sublineSize = {
-            'x-small': fontSize.xSmall,
-            small: fontSize.small,
-            medium: { fontSize: '1.25rem', lineHeight: fontLineHeight },
-            large: { fontSize: '1.875rem', lineHeight: fontLineHeight },
-            'x-large': fontSize.large,
-        };
-        return {
-            fontSize: size,
-            '& ~ .subline': Object.assign(Object.assign({}, sublineSize[textSize]), { '&::before': {
-                    fontSize: size,
-                    marginLeft: fontLineHeight,
-                } }),
-        };
-    }
+const getFontSizeText = (size) => {
+    return fontSizeTextMap[size];
 };
+
+// Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden.
 const getVisibilityJssStyle = (hideLabel) => {
     return hideLabel
-        ? getScreenReaderOnlyJssStyle()
-        : {
-            position: 'static',
-            width: 'auto',
-            height: 'auto',
-            border: 'medium none color',
-            margin: 0,
-            whiteSpace: 'inherit',
-            overflow: 'visible',
-            clip: 'auto',
-            clipPath: 'none',
-        };
-};
-const getLabelAlignmentJssStyle = (alignLabel) => {
-    return alignLabel === 'left'
-        ? {
-            padding: `0 ${pxToRemWithUnit(4)} 0 0`,
-            order: -1,
-        }
-        : {
-            padding: `0 0 0 ${pxToRemWithUnit(4)}`,
-            order: 0,
-        };
-};
-/* Needed for slotted anchor and hidden label, which then enlarges the hidden label to equal host size and indents the text to be visually hidden. */
-const getSlottedAnchorVisibilityJssStyle = (hideLabel) => {
-    return hideLabel
-        ? Object.assign(Object.assign({ position: 'absolute' }, getInsetJssStyle()), { whiteSpace: 'nowrap', textIndent: '-999999px' }) : Object.assign(Object.assign({ position: 'static' }, getInsetJssStyle('auto')), { whiteSpace: 'inherit', textIndent: 0 });
-};
-const getLinkButtonPureStyles = (icon, active, isDisabledOrLoading, stretch, size, weight, hideLabel, alignLabel, hasSubline, hasSlottedAnchor, theme) => {
-    const { baseColor, hoverColor, activeColor, disabledColor } = getThemedColors(theme);
-    const hasIcon = hasVisibleIcon(icon);
-    return Object.assign(Object.assign({ '@global': {
-            ':host': Object.assign({ position: 'relative', outline: addImportantToRule(0) }, buildResponsiveStyles(hasSubline ? false : stretch, (responsiveStretch) => (Object.assign({ display: responsiveStretch ? 'block' : 'inline-block' }, (!responsiveStretch && { verticalAlign: 'top' }))))),
-        }, 
-        // TODO: reduce to only necessary styles (e.g. why boxSizing?)
-        // TODO: overhead in link styles when slotted anchor is used
-        // TODO: overhead due that link does not need same "reset" styles as button
-        root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', alignItems: 'flex-start', width: '100%', margin: 0, padding: 0, boxSizing: 'border-box', outline: 'transparent none', appearance: 'none', cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer', textDecoration: 'none', textAlign: 'left', border: 'none', background: 'transparent', color: isDisabledOrLoading ? disabledColor : active ? activeColor : baseColor, transition: getTransition('color') }, (!hasSlottedAnchor && getFocusJssStyle({ offset: 1, pseudo: '::before' }))), (!isDisabledOrLoading && Object.assign(Object.assign({}, hoverMediaQuery({
-            '&:hover': Object.assign({ color: hoverColor }, (hasSubline && {
-                '& + $subline': {
-                    color: hoverColor,
-                },
-            })),
-        })), { '&:active': Object.assign({ color: activeColor }, (hasSubline && {
-                '& + $subline': {
-                    color: activeColor,
-                },
-            })) }))), textSmall), { fontWeight: getFontWeight(weight) }), mergeDeep(!hasSubline &&
-            buildResponsiveStyles(stretch, (stretched) => ({
-                justifyContent: stretched ? 'space-between' : 'flex-start',
-            })), buildResponsiveStyles(size, getSizeJssStyle$1))) }, (hasIcon && {
+        ? Object.assign(Object.assign({ position: 'absolute' }, getInsetJssStyle(0)), { whiteSpace: 'nowrap', textIndent: '-999999px' }) : Object.assign(Object.assign({ position: 'relative' }, getInsetJssStyle('auto')), { whiteSpace: 'inherit', textIndent: 0 });
+};
+const offsetVertical = '-2px';
+const offsetHorizontal = '-4px';
+const getLinkButtonPureStyles = (icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, hasSlottedAnchor, theme) => {
+    const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
+    const hasIcon = hasVisibleIcon(icon, iconSource);
+    return Object.assign({ '@global': {
+            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ transform: 'translate3d(0,0,0)', outline: 0 }, hostHiddenStyles))), buildResponsiveStyles(stretch, (responsiveStretch) => (Object.assign({ display: responsiveStretch ? 'block' : 'inline-block' }, (!responsiveStretch && { verticalAlign: 'top' }))))),
+        }, root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', gap: spacingStaticXSmall, width: '100%', margin: 0, padding: 0, color: isDisabledOrLoading ? disabledColor : primaryColor, outline: 0 }, textSmallStyle), mergeDeep(buildResponsiveStyles(stretch, (stretchValue) => ({
+            justifyContent: stretchValue ? 'space-between' : 'flex-start',
+            alignItems: stretchValue ? 'center' : 'flex-start',
+        })), buildResponsiveStyles(size, (sizeValue) => ({
+            fontSize: getFontSizeText(sizeValue),
+        })))), { '&::before': Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed', top: offsetVertical, bottom: offsetVertical }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                right: hideLabelValue ? offsetVertical : offsetHorizontal,
+                left: hideLabelValue || hasIcon ? offsetVertical : offsetHorizontal,
+            }))), { borderRadius: borderRadiusSmall, transition: getTransition('background-color') }), (active && Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }))) }), (!isDisabledOrLoading &&
+            hoverMediaQuery({
+                '&:hover::before': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
+            }))), (!hasSlottedAnchor && {
+            '&:focus::before': {
+                border: `${borderWidthBase} solid ${focusColor}`,
+            },
+            '&:not(:focus-visible)::before': {
+                border: 0,
+            },
+        })), label: {
+            position: 'relative', // needed for hover state when icon="none" is set
+        } }, (hasIcon && {
         icon: {
+            position: 'relative',
             flexShrink: '0',
             width: fontLineHeight,
             height: fontLineHeight,
         },
-        label: mergeDeep(buildResponsiveStyles(hideLabel, !hasSlottedAnchor ? getVisibilityJssStyle : getSlottedAnchorVisibilityJssStyle), hasSubline ? { paddingLeft: pxToRemWithUnit(4) } : buildResponsiveStyles(alignLabel, getLabelAlignmentJssStyle)),
-    })), (hasSubline && {
-        subline: Object.assign(Object.assign(Object.assign({ display: 'flex', marginTop: addImportantToRule('4px') }, textSmall), { color: isDisabledOrLoading ? disabledColor : active ? activeColor : baseColor, transition: getTransition('color') }), (hasIcon && Object.assign(Object.assign({}, buildResponsiveStyles(hideLabel, getVisibilityJssStyle)), { paddingLeft: pxToRemWithUnit(4), '&::before': {
-                content: '""',
-            } }))),
+        label: mergeDeep(buildResponsiveStyles(hideLabel, getVisibilityJssStyle), buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
+            order: alignLabelValue === 'left' ? -1 : 0,
+        }))),
     }));
 };
 
-const getComponentCss$O = (icon, active, isDisabledOrLoading, stretch, size, weight, hideLabel, alignLabel, hasSubline, theme) => {
-    return getCss(mergeDeep(getLinkButtonPureStyles(icon, active, isDisabledOrLoading, stretch, size, weight, hideLabel, alignLabel, hasSubline, false, theme), {
-        '@global': {
-            '::slotted(p)': {
-                margin: 0,
-            },
+const getComponentCss$P = (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',
+            background: 'transparent',
+            textAlign: 'left',
+            border: 0,
+            cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer',
+        } }, (!hasIcon &&
+        isLoading && {
+        label: {
+            visibility: 'hidden',
         },
-    }));
-};
-
-const { baseColor: darkThemeBaseColor } = getThemedColors('dark');
-const { baseColor: lightThemeBaseColor } = getThemedColors('light');
-const getVariantColors = (variant, theme) => {
-    const { brandColor, baseColor, contrastHighColor, hoverColorDarken, contrastHighColorDarken, baseColorDarken } = getThemedColors(theme);
-    const colors = {
-        light: {
-            primary: {
-                primaryColor: brandColor,
-                primaryColorHover: hoverColorDarken,
-                baseColor: darkThemeBaseColor,
-            },
-            secondary: {
-                primaryColor: contrastHighColor,
-                primaryColorHover: contrastHighColorDarken,
-                baseColor: darkThemeBaseColor,
-            },
-            tertiary: {
-                primaryColor: contrastHighColor,
-                primaryColorHover: contrastHighColorDarken,
-                baseColor,
-            },
+        icon: {
+            position: 'absolute',
+            top: 0,
+            left: `calc(50% - ${fontLineHeight} / 2)`,
+            width: fontLineHeight,
+            height: fontLineHeight,
         },
-        dark: {
-            primary: {
-                primaryColor: brandColor,
-                primaryColorHover: hoverColorDarken,
-                baseColor: darkThemeBaseColor,
-            },
-            secondary: {
-                primaryColor: darkThemeBaseColor,
-                primaryColorHover: baseColorDarken,
-                baseColor: lightThemeBaseColor,
-            },
-            tertiary: {
-                primaryColor: darkThemeBaseColor,
-                primaryColorHover: darkThemeBaseColor,
-                baseColor,
-            },
+    }))));
+};
+
+const { primaryColor: darkThemePrimaryColor$1 } = getThemedColors('dark');
+const { primaryColor: lightThemePrimaryColor$1 } = getThemedColors('light');
+const getVariantColors = (variant, theme) => {
+    const { primaryColor, contrastHighColor, contrastMediumColor, hoverColor } = getThemedColors(theme);
+    const colors = {
+        primary: {
+            textColor: theme === 'dark' ? lightThemePrimaryColor$1 : darkThemePrimaryColor$1,
+            borderColor: primaryColor,
+            borderColorHover: contrastHighColor,
+            backgroundColor: primaryColor,
+            backgroundColorHover: contrastHighColor,
         },
-        'light-electric': {
-            primary: {
-                primaryColor: brandColor,
-                primaryColorHover: hoverColorDarken,
-                baseColor: darkThemeBaseColor,
-            },
-            secondary: {
-                primaryColor: contrastHighColor,
-                primaryColorHover: contrastHighColorDarken,
-                baseColor: darkThemeBaseColor,
-            },
-            tertiary: {
-                primaryColor: contrastHighColor,
-                primaryColorHover: contrastHighColorDarken,
-                baseColor,
-            },
+        secondary: {
+            textColor: primaryColor,
+            borderColor: primaryColor,
+            borderColorHover: contrastMediumColor,
+            backgroundColor: 'transparent',
+            backgroundColorHover: hoverColor,
         },
     };
-    return colors[theme][variant];
+    return colors[variant === 'tertiary' ? 'secondary' : variant];
+};
+const getLinkButtonStyles = (icon, iconSource, variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, theme) => {
+    const isPrimary = variant === 'primary';
+    const { textColor, borderColor, borderColorHover, backgroundColor, backgroundColorHover } = getVariantColors(variant, theme);
+    const { focusColor } = getThemedColors(theme);
+    const hasIcon = hasVisibleIcon(icon, iconSource) || hideLabel;
+    return Object.assign({ '@global': {
+            ':host': addImportantToEachRule(Object.assign({ display: 'inline-block', verticalAlign: 'top', outline: 0 }, hostHiddenStyles)),
+        }, root: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', alignItems: 'flex-start', justifyContent: 'center', width: '100%', minWidth: '54px', minHeight: '54px', boxSizing: 'border-box', outline: 0, textAlign: 'left', appearance: 'none', textDecoration: 'none', border: `2px solid ${borderColor}`, borderRadius: borderRadiusSmall, transform: 'translate3d(0,0,0)', // creates new stacking context (for slotted anchor + focus)
+            backgroundColor, color: textColor }, textSmallStyle), { transition: ['background-color', 'border-color', 'color'].map(getTransition).join() }), buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+            padding: hideLabelValue ? '13px' : hasIcon ? '13px 26px 13px 18px' : '13px 26px',
+            gap: hideLabelValue ? 0 : spacingStaticSmall,
+        }))), (!hasSlottedAnchor && {
+            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusMedium }, getInsetJssStyle(-6)),
+            '&:not(:focus-visible)::before': {
+                border: 0,
+            },
+        })), (!isDisabledOrLoading &&
+            hoverMediaQuery({
+                '&:hover': Object.assign({ backgroundColor: backgroundColorHover, borderColor: borderColorHover }, (!isPrimary && frostedGlassStyle)),
+            }))), label: Object.assign({}, buildResponsiveStyles(hideLabel, (hideLabelValue) => hideLabelValue
+            ? {
+                width: 0,
+                height: '1px',
+                textIndent: '-999999px',
+            }
+            : {
+                width: 'auto',
+                height: 'auto',
+                textIndent: 0,
+            })) }, (hasIcon && {
+        icon: {
+            width: fontLineHeight,
+            height: fontLineHeight,
+        },
+    }));
 };
-const linkButtonPadding = `${pxToRemWithUnit(11)} ${pxToRemWithUnit(15)} ${pxToRemWithUnit(11)} ${pxToRemWithUnit(39)}`;
-const getRootJssStyle = (hideLabel) => {
-    return {
-        padding: hideLabel ? 0 : linkButtonPadding,
+
+const getDisabledColors = (variant, loading, theme) => {
+    const { contrastMediumColor, contrastHighColor, disabledColor, hoverColor } = getThemedColors(theme);
+    const colors = {
+        primary: {
+            textColor: contrastHighColor,
+            borderColor: loading ? contrastHighColor : disabledColor,
+            backgroundColor: loading ? contrastHighColor : disabledColor,
+        },
+        secondary: {
+            textColor: disabledColor,
+            borderColor: loading ? contrastMediumColor : disabledColor,
+            backgroundColor: loading ? hoverColor : 'transparent',
+        },
     };
+    return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getIconJssStyle = (hideLabel) => {
-    return hideLabel
-        ? {
-            left: '50%',
+const getComponentCss$O = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+    const disabledOrLoading = isDisabledOrLoading(disabled, loading);
+    const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
+    const isPrimary = variant === 'primary';
+    return getCss(mergeDeep(getLinkButtonStyles(icon, iconSource, variant, hideLabel, disabledOrLoading, false, theme), Object.assign(Object.assign({ root: Object.assign(Object.assign({ cursor: disabledOrLoading ? 'not-allowed' : 'pointer' }, (disabledOrLoading && {
+            backgroundColor,
+            borderColor,
+            color: textColor,
+        })), ((loading && !isPrimary) && frostedGlassStyle)) }, (loading && {
+        spinner: {
+            width: fontLineHeight,
+            height: fontLineHeight,
+            pointerEvents: 'none',
+            position: 'absolute',
             top: '50%',
-            transform: 'translate3d(-50%, -50%, 0)',
-        }
-        : {
-            left: pxToRemWithUnit(11),
-            top: pxToRemWithUnit(11),
-            transform: 'translate3d(0,0,0)',
-        };
-};
-const getLabelJssStyle = (hideLabel) => {
-    return hideLabel
-        ? {
-            width: '1px',
-            height: '1px',
-            margin: '0 0 0 -1px',
-            overflow: 'hidden',
-            textIndent: '-1px',
-        }
-        : {
-            width: '100%',
-            height: 'auto',
-            margin: 0,
-            overflow: 'visible',
-            textIndent: 0,
-        };
-};
-const getSlottedLinkJssStyle = (hideLabel) => {
-    return hideLabel
-        ? Object.assign(Object.assign({ position: 'absolute' }, getInsetJssStyle()), { padding: 0, overflow: 'hidden', whiteSpace: 'nowrap', textIndent: '99999px' }) : Object.assign(Object.assign({ position: 'static' }, getInsetJssStyle('auto')), { padding: linkButtonPadding, overflow: 'visible', whiteSpace: 'normal', textIndent: 0 });
-};
-const getLinkButtonStyles = (variant, hideLabel, isDisabledOrLoading, hasSlottedAnchor, theme) => {
-    const isDarkTheme = isThemeDark(theme);
-    const isTertiary = variant === 'tertiary';
-    const { primaryColor, primaryColorHover, baseColor } = getVariantColors(variant, theme);
-    const { disabledColor } = getThemedColors(theme);
-    const iconLabelColor = isDisabledOrLoading ? (isTertiary ? disabledColor : 'rgba(255,255,255,0.55)') : baseColor;
-    return {
-        '@global': Object.assign(Object.assign({ ':host': {
-                display: 'inline-flex',
-                verticalAlign: 'top',
-                outline: addImportantToRule(0),
-            } }, (hasSlottedAnchor && {
-            '::slotted': addImportantToEachRule(Object.assign(Object.assign({ '&(a)': Object.assign({ display: 'block', textDecoration: 'none', color: 'inherit', lineHeight: 'inherit', outline: 'transparent solid 1px', outlineOffset: '3px' }, buildResponsiveStyles(hideLabel, getSlottedLinkJssStyle)), 
-                // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
-                '&(a::-moz-focus-inner)': {
-                    border: 0,
-                }, '&(a:focus)': {
-                    outlineColor: primaryColor,
-                } }, hoverMediaQuery({
-                '&(a:hover:focus)': {
-                    outlineColor: primaryColorHover,
-                },
-            })), { '&(a:focus:not(:focus-visible))': {
-                    outlineColor: 'transparent',
-                } })),
-        })), { span: Object.assign(Object.assign({ display: 'block', width: '100%', color: iconLabelColor }, textSmall), (!hasSlottedAnchor && buildResponsiveStyles(hideLabel, getLabelJssStyle))) }),
-        // TODO: reduce to only necessary styles (e.g. why boxSizing?)
-        // TODO: overhead in link styles when slotted anchor is used
-        // TODO: overhead due that link does not need same "reset" styles as button
-        root: Object.assign(Object.assign({ display: 'flex', width: '100%', minWidth: pxToRemWithUnit(48), minHeight: pxToRemWithUnit(48), position: 'relative', margin: 0, padding: 0, boxSizing: 'border-box', outline: 'transparent none', appearance: 'none', cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer', textDecoration: 'none', textAlign: 'left', border: '1px solid currentColor', backgroundColor: isTertiary ? 'transparent' : 'currentColor', color: isDisabledOrLoading ? disabledColor : primaryColor, transition: ['background-color', 'border-color', 'color'].map(getTransition).join() }, (!hasSlottedAnchor && Object.assign(Object.assign({}, buildResponsiveStyles(hideLabel, getRootJssStyle)), getFocusJssStyle()))), (!isDisabledOrLoading &&
-            hoverMediaQuery({
-                '&:hover, &:active': Object.assign({ color: primaryColorHover }, (isTertiary && {
-                    backgroundColor: 'currentColor',
-                    '& > span, & > $icon': {
-                        color: isDarkTheme ? lightThemeBaseColor : darkThemeBaseColor,
-                    },
-                })),
-            }))),
-        icon: Object.assign({ position: 'absolute', width: pxToRemWithUnit(24), height: pxToRemWithUnit(24), color: iconLabelColor, pointerEvents: 'none' }, buildResponsiveStyles(hideLabel, getIconJssStyle)),
-    };
-};
-
-const getComponentCss$N = (variant, hideLabel, isDisabledOrLoading, theme) => {
-    return getCss(getLinkButtonStyles(variant, hideLabel, isDisabledOrLoading, false, theme));
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+        },
+    })), { label: Object.assign({ transition: getTransition('opacity') }, (loading && {
+            opacity: 0, // use opacity for smooth transition between states
+        })), icon: Object.assign({ transition: getTransition('opacity') }, (loading && {
+            opacity: 0, // use opacity for smooth transition between states
+        })) })));
 };
 
 const bulletActiveClass = 'bullet--active';
-const mediaQueryS$1 = mediaQueryMin('s');
-const mediaQueryXl$1 = mediaQueryMin('xl');
-const getComponentCss$M = (wrapContent, disablePagination, theme) => {
-    const { baseColor, disabledColor } = getThemedColors(theme);
+const mediaQueryS = getMediaQueryMin('s');
+const mediaQueryXl$1 = getMediaQueryMin('xl');
+const getComponentCss$N = (wrapContent, disablePagination, theme) => {
+    const { primaryColor, disabledColor } = getThemedColors(theme);
     return getCss(Object.assign({ '@global': {
-            ':host': addImportantToEachRule({
-                display: 'grid',
-                maxWidth: gridMaxWidth,
-                marginLeft: 'auto',
-                marginRight: 'auto',
-                gap: pxToRemWithUnit(24),
-                gridAutoFlow: 'row',
-                [mediaQueryXl$1]: {
+            ':host': addImportantToEachRule(Object.assign({ display: 'grid', maxWidth: gridWidthMax, marginLeft: 'auto', marginRight: 'auto', gap: pxToRemWithUnit(24), gridAutoFlow: 'row', [mediaQueryXl$1]: {
                     gap: pxToRemWithUnit(32),
-                },
-            }),
-            'h2,::slotted([slot=heading])': addImportantToEachRule(Object.assign(Object.assign({}, headingMedium), { margin: 0, color: baseColor, maxWidth: pxToRemWithUnit(900) })),
-            'p,::slotted([slot=description])': addImportantToEachRule(Object.assign(Object.assign({}, textSmall), { margin: 0, color: baseColor, maxWidth: pxToRemWithUnit(550), gridColumn: 1 })),
+                } }, hostHiddenStyles)),
+            'h2,::slotted([slot=heading])': addImportantToEachRule(Object.assign(Object.assign({}, headingMediumStyle), { margin: 0, color: primaryColor, maxWidth: pxToRemWithUnit(900) })),
+            'p,::slotted([slot=description])': addImportantToEachRule(Object.assign(Object.assign({}, textSmallStyle), { margin: 0, color: primaryColor, maxWidth: pxToRemWithUnit(550), gridColumn: 1 })),
         }, splide: {
             overflow: 'hidden',
             // visibility: 'hidden',
             '&__track': Object.assign(Object.assign({ cursor: 'grab' }, (wrapContent &&
                 addImportantToEachRule({
-                    padding: `0 calc(${gridSafeZone.base} + 7%) 0 ${gridSafeZone.base}`,
+                    // TODO: 0 calc(${gridSafeZoneBase} + ${gridGap})
+                    padding: `0 calc(${gridSafeZoneBase} + 7%) 0 ${gridSafeZoneBase}`,
                     [mediaQueryXl$1]: {
-                        padding: `0 calc(${gridSafeZone.xl} + 7%) 0 ${gridSafeZone.xl}`,
+                        padding: `0 calc(${gridSafeZoneBase} + 7%) 0 ${gridSafeZoneBase}`,
                     },
                 }))), { '&--draggable': {
                     userSelect: 'none',
@@ -6357,28 +6230,23 @@ const getComponentCss$M = (wrapContent, disablePagination, theme) => {
         //   }
         header: {
             display: 'grid',
-            gap: pxToRemWithUnit(16),
-            padding: wrapContent ? `0 ${gridSafeZone.base}` : null,
-            [mediaQueryS$1]: {
+            gap: gridGap,
+            padding: wrapContent ? `0 ${gridSafeZoneBase}` : null,
+            [mediaQueryS]: {
                 gridTemplateColumns: `minmax(0px, 1fr) ${pxToRemWithUnit(80)}`,
                 position: 'relative',
                 minHeight: pxToRemWithUnit(40), // actual height of prev/next buttons
             },
-            [mediaQueryXl$1]: {
-                gap: pxToRemWithUnit(24),
-                padding: wrapContent ? `0 ${gridSafeZone.xl}` : null,
-            },
-        }, nav: Object.assign({ display: 'none', [mediaQueryS$1]: {
+        }, nav: {
+            display: 'none',
+            [mediaQueryS]: {
                 display: 'grid',
                 gridAutoFlow: 'column',
                 position: 'absolute',
-                right: wrapContent ? gridSafeZone.base : 0,
+                right: wrapContent ? gridSafeZoneBase : 0,
                 bottom: 0,
-            } }, (wrapContent && {
-            [mediaQueryXl$1]: {
-                right: gridSafeZone.xl,
             },
-        })), btn: {
+        }, btn: {
             padding: pxToRemWithUnit(8),
         } }, (disablePagination !== true && {
         pagination: Object.assign(Object.assign({}, buildResponsiveStyles(disablePagination, (value) => ({ display: value ? 'none' : 'grid' }))), { gridAutoColumns: pxToRemWithUnit(8), gridAutoFlow: 'column', justifyContent: 'center', gap: pxToRemWithUnit(8), height: pxToRemWithUnit(8) }),
@@ -6387,20 +6255,11 @@ const getComponentCss$M = (wrapContent, disablePagination, theme) => {
             background: disabledColor,
         },
         [bulletActiveClass]: {
-            background: baseColor,
+            background: primaryColor,
         },
     })));
 };
 
-const getFunctionalComponentRequiredStyles = (theme) => {
-    return {
-        required: {
-            userSelect: 'none',
-            color: getThemedColors(theme).errorColor,
-        },
-    };
-};
-
 const getThemedFormStateColors = (theme, state) => {
     const themedColors = getThemedColors(theme);
     return {
@@ -6409,101 +6268,170 @@ const getThemedFormStateColors = (theme, state) => {
     };
 };
 
-const { xSmall: spacingXSmall } = spacing;
-const getFunctionalComponentStateMessageStyles = (theme, state) => {
+const getFunctionalComponentRequiredStyles = () => {
     return {
-        message: Object.assign(Object.assign({ display: 'flex', marginTop: spacingXSmall }, textSmall), { color: getThemedFormStateColors(theme, state).formStateColor, transition: getTransition('color'), '&__icon': {
-                marginRight: spacingXSmall,
-            } }),
+        required: {
+            userSelect: 'none',
+        },
     };
 };
 
-const getCheckboxRadioLabelJssStyle = (isDisabled, hideLabel, theme) => {
-    const { baseColor, disabledColor } = getThemedColors(theme);
-    return Object.assign(Object.assign(Object.assign({ order: 1, display: 'inline-block', cursor: isDisabled ? 'default' : 'pointer' }, textSmall), { color: isDisabled ? disabledColor : baseColor, transition: getTransition('color') }), buildResponsiveStyles(hideLabel, getFormCheckboxRadioHiddenJssStyle));
+const getFunctionalComponentStateMessageStyles = (theme, state) => {
+    return {
+        message: Object.assign(Object.assign({ display: 'flex', gap: spacingStaticXSmall, marginTop: spacingStaticXSmall }, textSmallStyle), { color: getThemedFormStateColors(theme, state).formStateColor, transition: getTransition('color') }),
+    };
 };
 
-const getComponentCss$L = (hideLabel, state, isDisabled) => {
-    const theme = 'light';
-    const size = pxToRemWithUnit(24);
-    const hasVisibleState = isVisibleFormState(state);
-    const { baseColor, backgroundColor, contrastMediumColor, contrastHighColor, disabledColor } = getThemedColors(theme);
+const getCheckboxRadioJssStyle = (hideLabel, state, isDisabled, theme) => {
+    const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const iconColor = backgroundColor.replace(/#/g, '%23');
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': {
-                display: 'block',
-            },
-            '::slotted': addImportantToEachRule(Object.assign(Object.assign({ '&(input)': {
-                    position: 'static',
-                    width: size,
-                    height: size,
+    const uncheckedColor = isDisabled ? disabledColor : formStateColor || contrastMediumColor;
+    const uncheckedHoverColor = formStateHoverColor || primaryColor;
+    const checkedColor = isDisabled ? disabledColor : formStateColor || primaryColor;
+    const checkedHoverColor = formStateHoverColor || contrastHighColor;
+    return Object.assign(Object.assign({ '@global': {
+            ':host': addImportantToEachRule(Object.assign(Object.assign({}, hostHiddenStyles), { display: 'block' })),
+            '::slotted': addImportantToEachRule(Object.assign({ '&(input)': {
+                    position: 'relative',
+                    width: fontLineHeight,
+                    height: fontLineHeight,
+                    fontFamily,
+                    fontSize: '1rem',
                     flexShrink: 0,
                     display: 'block',
                     margin: 0,
                     padding: 0,
                     WebkitAppearance: 'none',
                     appearance: 'none',
-                    boxSizing: 'border-box',
-                    backgroundSize: size,
-                    backgroundPosition: hasVisibleState ? '-2px -2px' : '-1px -1px',
-                    backgroundColor,
+                    boxSizing: 'content-box',
+                    backgroundSize: fontLineHeight,
+                    backgroundColor: 'transparent',
                     transition: ['border-color', 'background-color'].map(getTransition).join(),
-                    opacity: 1,
-                    border: hasVisibleState ? `2px solid ${formStateColor}` : `1px solid ${contrastMediumColor}`,
-                    borderRadius: 0,
-                    outline: '1px solid transparent',
-                    outlineOffset: '2px',
-                    cursor: 'pointer',
+                    border: `2px solid ${uncheckedColor}`,
+                    outline: 0,
+                    cursor: isDisabled ? 'not-allowed' : 'pointer',
                 }, '&(input:checked)': {
-                    backgroundImage: `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="${iconColor}" d="M9 19l-6-7h1.5l4.49 5.36L19.5 5H21L9 19z"/></svg>')`,
-                }, '&(input:indeterminate)': {
-                    backgroundImage: `url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="${iconColor}" d="M3 11h18v1H3z"/></svg>')`,
-                }, '&(input:checked), &(input:indeterminate)': {
-                    borderColor: formStateColor || contrastHighColor,
-                    backgroundColor: formStateColor || contrastHighColor,
-                } }, hoverMediaQuery({
-                '&(input:not(:disabled):hover), .label:hover ~ &(input:not(:disabled))': {
-                    borderColor: formStateHoverColor || baseColor,
+                    borderColor: checkedColor,
+                    backgroundColor: checkedColor,
+                } }, (!isDisabled && Object.assign(Object.assign({}, hoverMediaQuery({
+                '&(input:hover), .text:hover ~ &(input)': {
+                    borderColor: uncheckedHoverColor,
                 },
-            })), { '&(input:indeterminate:disabled), &(input:checked:disabled)': {
-                    backgroundColor: disabledColor,
-                }, '&(input:disabled)': {
-                    borderColor: disabledColor,
-                    cursor: 'not-allowed',
-                }, '&(input:focus)': {
-                    outlineColor: formStateColor || contrastMediumColor,
-                }, '&(input:focus:not(:focus-visible))': {
-                    outlineColor: 'transparent',
-                } })),
+                '&(input:checked:hover), .text:hover ~ &(input:checked)': {
+                    borderColor: checkedHoverColor,
+                    backgroundColor: checkedHoverColor,
+                },
+            })), { '&(input:focus)::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-6)), { border: `${borderWidthBase} solid ${focusColor}` }), '&(input:focus:not(:focus-visible))::before': {
+                    borderColor: 'transparent',
+                } })))),
             label: {
                 position: 'relative',
                 display: 'flex',
+                alignItems: 'flex-start',
             },
-        }, label: getCheckboxRadioLabelJssStyle(isDisabled, hideLabel, theme) }, getFunctionalComponentRequiredStyles(theme)), getFunctionalComponentStateMessageStyles(theme, state)));
+        }, text: Object.assign(Object.assign(Object.assign({ order: 1, cursor: isDisabled ? 'default' : 'pointer' }, textSmallStyle), { color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color') }), buildResponsiveStyles(hideLabel, getFormCheckboxRadioHiddenJssStyle)) }, getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state));
 };
 
-const widthMap = {
-    basic: {
-        maxWidth: gridMaxWidth,
-        boxSizing: 'border-box',
-        padding: `0 ${gridSafeZone.base}`,
-        [mediaQueryMin('xl')]: {
-            padding: `0 ${gridSafeZone.xl}`,
+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$M = (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), {
+        '@global': {
+            '::slotted': addImportantToEachRule(Object.assign({ '&(input)': {
+                    borderRadius: borderRadiusSmall,
+                }, '&(input:checked)': {
+                    backgroundImage: getInlineSVGBackgroundImage(`<path fill="${checkedIconColor}" d="m20.22,7.47l-1.47-1.42-9.26,9.02-4.24-4.15-1.47,1.42,5.71,5.6,10.73-10.47Z"/>`),
+                }, '&(input:indeterminate)': {
+                    backgroundImage: getInlineSVGBackgroundImage(`<path fill="${indeterminateIconColor}" d="m20,11v2H4v-2h16Z"/>`),
+                } }, (!isDisabled && {
+                '&(input:focus)::before': {
+                    borderRadius: borderRadiusMedium,
+                },
+            }))),
         },
-    },
-    extended: {
-        maxWidth: gridMaxWidth,
-    },
+    }));
 };
-const getComponentCss$K = (width, backgroundColor, theme) => {
+
+const getComponentCss$L = (width) => {
     return getCss({
         '@global': {
-            ':host': {
-                display: 'flex',
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+        },
+        root: getContentWrapperStyle(width),
+    });
+};
+
+const DISPLAY_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+const getThemedTypographyColor = (theme, textColor) => {
+    const { primaryColor, contrastHighColor, contrastMediumColor, contrastLowColor, successColor, errorColor, warningColor, infoColor, } = getThemedColors(theme);
+    const colorMap = {
+        primary: primaryColor,
+        brand: primaryColor,
+        default: primaryColor,
+        'contrast-low': contrastLowColor,
+        'neutral-contrast-low': contrastLowColor,
+        'contrast-medium': contrastMediumColor,
+        'neutral-contrast-medium': contrastMediumColor,
+        'contrast-high': contrastHighColor,
+        'neutral-contrast-high': contrastHighColor,
+        'notification-success': successColor,
+        'notification-warning': warningColor,
+        'notification-error': errorColor,
+        'notification-info': infoColor,
+        'notification-neutral': infoColor,
+        inherit: 'currentColor',
+    };
+    return colorMap[textColor];
+};
+
+const getTypographyRootJssStyle = (baseTextStyle, responsiveStyle, align, color, ellipsis, theme) => {
+    return Object.assign(Object.assign(Object.assign(Object.assign({ margin: 0, padding: 0 }, baseTextStyle), { color: getThemedTypographyColor(theme, color), textAlign: align, letterSpacing: 'normal', listStyleType: 'none', whiteSpace: 'inherit' }), (ellipsis && {
+        maxWidth: '100%',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    })), responsiveStyle);
+};
+const getTypographySlottedJssStyle = () => {
+    return {
+        margin: 'inherit',
+        padding: 'inherit',
+        fontFamily: 'inherit',
+        fontWeight: 'inherit',
+        fontSize: 'inherit',
+        lineHeight: 'inherit',
+        fontStyle: 'inherit',
+        fontVariant: 'inherit',
+        color: 'inherit',
+        textAlign: 'inherit',
+        overflowWrap: 'inherit',
+        wordWrap: 'inherit',
+        hyphens: 'inherit',
+        whiteSpace: 'inherit',
+        letterSpacing: 'inherit',
+    };
+};
+
+const sizeMap$5 = {
+    medium: fontSizeDisplayMedium,
+    large: fontSizeDisplayLarge,
+};
+const getComponentCss$K = (size, align, color, ellipsis, theme) => {
+    return getCss({
+        '@global': {
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            '::slotted': {
+                [DISPLAY_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
             },
         },
-        root: Object.assign(Object.assign({ margin: '0 auto', width: '100%', minWidth: 0 }, widthMap[width]), { backgroundColor: backgroundColor === 'default' ? getThemedColors(theme).backgroundColor : 'transparent' }),
+        root: getTypographyRootJssStyle(displayLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
+            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$5[sizeValue],
+        })), align, color, ellipsis, theme),
     });
 };
 
@@ -6516,28 +6444,22 @@ const getComponentCss$J = (color, orientation, theme) => {
     };
     return getCss({
         '@global': {
-            ':host': {
-                display: 'block',
-            },
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
             hr: Object.assign({ margin: 0, padding: 0, border: 'none', textAlign: 'left', background: colorMap[color] }, buildResponsiveStyles(orientation, (o) => o === 'horizontal' ? { height: '1px', width: '100%' } : { height: '100%', width: '1px' })),
         },
     });
 };
 
-const { medium: spacingMedium$1 } = spacing;
-const getComponentCss$I = (state, labelSize, hasLabel) => {
-    const theme = 'light';
-    return getCss(Object.assign(Object.assign({ '@global': Object.assign({ ':host': {
-                display: addImportantToRule('block'),
-            }, fieldset: {
+const getComponentCss$I = (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,
                 border: 'none',
             } }, (hasLabel && {
-            legend: Object.assign({ margin: `0 0 ${spacingMedium$1}`, padding: 0, color: getThemedColors(theme).baseColor }, (labelSize === 'small' ? headingXSmall : headingSmall)),
-        })) }, getFunctionalComponentRequiredStyles(theme)), mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
+            legend: Object.assign({ margin: `0 0 ${spacingStaticMedium}`, padding: 0, color: getThemedColors(theme).primaryColor }, (labelSize === 'small' ? headingSmallStyle : headingMediumStyle)),
+        })) }, getFunctionalComponentRequiredStyles()), mergeDeep(getFunctionalComponentStateMessageStyles(theme, state), {
         message: {
-            marginTop: spacingMedium$1,
+            marginTop: spacingStaticMedium,
         },
     })));
 };
@@ -6555,7 +6477,7 @@ const flexItemWidths = {
 const getComponentCss$H = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ boxSizing: 'border-box' }, mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(width, (widthResponsive) => ({
                 width: `${flexItemWidths[widthResponsive]}%`,
             })), buildResponsiveStyles(offset, (offsetResponsive) => ({
                 marginLeft: `${flexItemWidths[offsetResponsive]}%`,
@@ -6573,7 +6495,7 @@ const getComponentCss$H = (width, offset, alignSelf, grow, shrink, flex) => {
 const getComponentCss$G = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(mergeDeep(buildResponsiveStyles(inline, (inlineResponsive) => ({
+            ':host': addImportantToEachRule(mergeDeep(hostHiddenStyles, buildResponsiveStyles(inline, (inlineResponsive) => ({
                 display: inlineResponsive ? 'inline-flex' : 'flex',
             })), buildResponsiveStyles(wrap, (flexWrapResponsive) => ({ flexWrap: flexWrapResponsive })), buildResponsiveStyles(direction, (flexDirectionResponsive) => ({
                 flexDirection: flexDirectionResponsive,
@@ -6588,295 +6510,331 @@ const getComponentCss$G = (inline, wrap, direction, justifyContent, alignItems,
     });
 };
 
+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$F = (size, offset, gutter) => {
+const getComponentCss$F = (size, offset) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ boxSizing: 'border-box' }, mergeDeep(buildResponsiveStyles(size, (sizeResponsive) => ({
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ paddingLeft: gutter$1, paddingRight: gutter$1, boxSizing: 'border-box' }, hostHiddenStyles), mergeDeep(buildResponsiveStyles(size, (sizeResponsive) => ({
                 width: `${gridItemWidths[sizeResponsive]}%`,
                 minWidth: `${gridItemWidths[sizeResponsive]}%`,
             })), buildResponsiveStyles(offset, (offsetResponsive) => ({
                 marginLeft: `${gridItemWidths[offsetResponsive]}%`,
-            })), buildResponsiveStyles(gutter, (gutterResponsive) => {
-                const gutterRem = pxToRemWithUnit(gutterResponsive / 2);
-                return {
-                    paddingLeft: gutterRem,
-                    paddingRight: gutterRem,
-                };
-            })))),
+            }))))),
         },
     });
 };
 
-const getGutterJssStyle = (gutter) => {
-    const gutterRem = `-${pxToRemWithUnit(gutter / 2)}`;
-    return {
-        marginLeft: gutterRem,
-        marginRight: gutterRem,
-    };
-};
-const getComponentCss$E = (direction, wrap, gutter) => {
+const gutter = `calc(${gridGap} / -2)`;
+const getComponentCss$E = (direction, wrap) => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'flex', flex: 'auto', width: 'auto' }, mergeDeep(buildResponsiveStyles(direction, (flexDirection) => ({ flexDirection })), buildResponsiveStyles(wrap, (flexWrap) => ({ flexWrap })), buildResponsiveStyles(gutter, getGutterJssStyle)))),
+            ':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 }))))),
         },
     });
 };
 
-const getSlottedTypographyJssStyle = () => {
-    return {
-        margin: 'inherit',
-        padding: 'inherit',
-        fontFamily: 'inherit',
-        fontWeight: 'inherit',
-        fontSize: 'inherit',
-        lineHeight: 'inherit',
-        fontStyle: 'inherit',
-        fontVariant: 'inherit',
-        color: 'inherit',
-        textAlign: 'inherit',
-        overflowWrap: 'inherit',
-        wordWrap: 'inherit',
-        hyphens: 'inherit',
-        whiteSpace: 'inherit',
-    };
+const sizeMap$4 = {
+    small: fontSizeHeadingSmall,
+    medium: fontSizeHeadingMedium,
+    large: fontSizeHeadingLarge,
+    'x-large': fontSizeHeadingXLarge,
+    'xx-large': fontSizeHeadingXXLarge,
+    'xxx-large': fontSizeHeadingXXXLarge,
 };
-const getEllipsisJssStyle = () => {
-    return {
-        maxWidth: '100%',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-    };
+const getComponentCss$D = (size, align, color, ellipsis, theme) => {
+    return getCss({
+        '@global': {
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            '::slotted': {
+                [HEADING_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
+            },
+        },
+        root: getTypographyRootJssStyle(headingXXLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
+            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$4[sizeValue],
+        })), align, color, ellipsis, theme),
+    });
 };
 
-const headingMap = {
-    'large-title': headingXXLarge,
-    'headline-1': headingXLarge,
-    'headline-2': headingLarge,
-    'headline-3': headingMedium,
-    'headline-4': headingSmall,
-    'headline-5': headingXSmall,
+const HEADLINE_VARIANTS = [
+    'large-title',
+    'headline-1',
+    'headline-2',
+    'headline-3',
+    'headline-4',
+    'headline-5',
+];
+const HEADLINE_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+const isValidVariantType = (variant) => {
+    return HEADLINE_VARIANTS.includes(variant);
 };
-const getVariantJssStyle = (variant) => {
-    return headingMap[variant];
+
+const headlineSizeMap = {
+    'headline-1': fontSizeHeadingXXLarge,
+    'headline-2': fontSizeHeadingXLarge,
+    'headline-3': fontSizeHeadingLarge,
+    'headline-4': fontSizeHeadingMedium,
+    'headline-5': fontSizeHeadingSmall,
 };
-const getSizeJssStyle = (textSize) => {
-    const { semiBold: fontWeightSemiBold } = fontWeight;
-    return textSize === 'inherit'
-        ? {
-            fontSize: textSize,
-            fontWeight: fontWeightSemiBold,
-        }
+const getHeadlineVariantJssStyle = (variant) => {
+    return Object.assign({}, (variant === 'large-title'
+        ? displayMediumStyle
         : {
-            font: textMap[textSize].font.replace('400', fontWeightSemiBold),
-        };
+            fontSize: headlineSizeMap[variant],
+        }));
+};
+const textSizeMap = {
+    'x-small': fontSizeTextXSmall,
+    small: fontSizeTextSmall,
+    medium: fontSizeTextMedium,
+    large: fontSizeTextLarge,
+    'x-large': fontSizeTextXLarge,
+};
+const getTextSizeJssStyle = (textSize) => {
+    return {
+        fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
+    };
 };
-const getComponentCss$D = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$C = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
-            ':host': {
-                display: 'block',
-            },
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
             '::slotted': {
-                '&(h1),&(h2),&(h3),&(h4),&(h5),&(h6)': addImportantToEachRule(getSlottedTypographyJssStyle()),
+                [HEADLINE_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
             },
         },
-        root: Object.assign(Object.assign({ padding: 0, margin: 0, textAlign: align, color: color !== 'default' ? 'inherit' : getThemedColors(theme).baseColor, whiteSpace: 'inherit' }, (isVariantType(variant)
-            ? getVariantJssStyle(variant)
-            : Object.assign(Object.assign(Object.assign({}, textSmall), buildResponsiveStyles(variant, getSizeJssStyle)), { overflowWrap: null, hyphens: null }))), (ellipsis && getEllipsisJssStyle())),
+        root: getTypographyRootJssStyle(headingXXLargeStyle, isValidVariantType(variant)
+            ? getHeadlineVariantJssStyle(variant)
+            : buildResponsiveStyles(variant, getTextSizeJssStyle), align, color, ellipsis, theme),
     });
 };
 
-const getThemedTextColor = (theme, textColor) => {
-    const { baseColor, brandColor, contrastHighColor, contrastMediumColor, contrastLowColor, successColor, errorColor, warningColor, neutralColor, } = getThemedColors(theme);
-    const colorMap = {
-        brand: brandColor,
-        default: baseColor,
-        'neutral-contrast-high': contrastHighColor,
-        'neutral-contrast-medium': contrastMediumColor,
-        'neutral-contrast-low': contrastLowColor,
-        'notification-success': successColor,
-        'notification-warning': warningColor,
-        'notification-error': errorColor,
-        'notification-neutral': neutralColor,
-        inherit: 'currentColor',
-    };
-    return colorMap[textColor];
+const sizeMap$3 = {
+    'x-small': fontSizeTextXSmall,
+    small: fontSizeTextSmall,
+    medium: fontSizeTextMedium,
+    large: fontSizeTextLarge,
+    'x-large': fontSizeTextXLarge,
+};
+// TODO, use Tuple to reduce chunk size
+// TODO: shall icon component support 'disabled' color too? For e.g. button-pure disabled state?
+const filterLightPrimary = 'invert(3%) sepia(7%) saturate(2930%) hue-rotate(188deg) brightness(91%) contrast(103%)';
+const filterLightContrastLow = 'invert(93%) sepia(11%) saturate(36%) hue-rotate(201deg) brightness(89%) contrast(102%)';
+const filterLightContrastMedium = 'invert(65%) sepia(6%) saturate(119%) hue-rotate(187deg) brightness(90%) contrast(92%)';
+const filterLightContrastHigh = 'invert(40%) sepia(2%) saturate(686%) hue-rotate(187deg) brightness(80%) contrast(94%)';
+const filterLightNotificationSuccess = 'invert(62%) sepia(61%) saturate(551%) hue-rotate(86deg) brightness(86%) contrast(80%)';
+const filterLightNotificationWarning = 'invert(74%) sepia(91%) saturate(343%) hue-rotate(348deg) brightness(92%) contrast(86%)';
+const filterLightNotificationError = 'invert(25%) sepia(62%) saturate(2003%) hue-rotate(335deg) brightness(100%) contrast(97%)';
+const filterLightNotificationInfo = 'invert(31%) sepia(32%) saturate(5493%) hue-rotate(216deg) brightness(90%) contrast(107%)';
+const filterDarkPrimary = 'invert(97%) sepia(55%) saturate(2840%) hue-rotate(180deg) brightness(114%) contrast(103%)';
+const filterDarkContrastLow = 'invert(20%) sepia(7%) saturate(421%) hue-rotate(202deg) brightness(97%) contrast(82%)';
+const filterDarkContrastMedium = 'invert(54%) sepia(4%) saturate(229%) hue-rotate(187deg) brightness(91%) contrast(84%)';
+const filterDarkContrastHigh = 'invert(68%) sepia(6%) saturate(108%) hue-rotate(187deg) brightness(104%) contrast(88%)';
+const filterDarkNotificationSuccess = 'invert(59%) sepia(22%) saturate(1342%) hue-rotate(86deg) brightness(96%) contrast(88%)';
+const filterDarkNotificationWarning = 'invert(72%) sepia(94%) saturate(303%) hue-rotate(354deg) brightness(89%) contrast(94%)';
+const filterDarkNotificationError = 'invert(28%) sepia(34%) saturate(3133%) hue-rotate(333deg) brightness(95%) contrast(100%)';
+const filterDarkNotificationInfo = 'invert(31%) sepia(32%) saturate(5493%) hue-rotate(216deg) brightness(90%) contrast(107%)';
+const filter = {
+    light: {
+        primary: filterLightPrimary,
+        brand: filterLightPrimary,
+        default: filterLightPrimary,
+        'contrast-low': filterLightContrastLow,
+        'neutral-contrast-low': filterLightContrastLow,
+        'contrast-medium': filterLightContrastMedium,
+        'neutral-contrast-medium': filterLightContrastMedium,
+        'contrast-high': filterLightContrastHigh,
+        'neutral-contrast-high': filterLightContrastHigh,
+        'notification-success': filterLightNotificationSuccess,
+        'notification-warning': filterLightNotificationWarning,
+        'notification-error': filterLightNotificationError,
+        'notification-info': filterLightNotificationInfo,
+        'notification-neutral': filterLightNotificationInfo, // deprecated
+    },
+    dark: {
+        primary: filterDarkPrimary,
+        brand: filterDarkPrimary,
+        default: filterDarkPrimary,
+        'contrast-low': filterDarkContrastLow,
+        'neutral-contrast-low': filterDarkContrastLow,
+        'contrast-medium': filterDarkContrastMedium,
+        'neutral-contrast-medium': filterDarkContrastMedium,
+        'contrast-high': filterDarkContrastHigh,
+        'neutral-contrast-high': filterDarkContrastHigh,
+        'notification-success': filterDarkNotificationSuccess,
+        'notification-warning': filterDarkNotificationWarning,
+        'notification-error': filterDarkNotificationError,
+        'notification-info': filterDarkNotificationInfo,
+        'notification-neutral': filterDarkNotificationInfo, // deprecated
+    },
 };
-
-const sizeMap$2 = {
-    small: pxToRemWithUnit(24),
-    medium: pxToRemWithUnit(36),
-    large: pxToRemWithUnit(48),
-    inherit: 'inherit',
+const forceRerenderAnimationStyle = {
+    '0%': {
+        transform: 'rotateZ(0)',
+    },
+    '100%': {
+        transform: 'rotateZ(0)',
+    },
 };
-const getComponentCss$C = (color, size, theme) => {
-    const dimension = sizeMap$2[size];
+const keyFramesLight = 'rerender-light';
+const keyFramesDark = 'rerender-dark';
+const getComponentCss$B = (color, size, theme) => {
+    const isColorInherit = color === 'inherit';
+    const isSizeInherit = size === 'inherit';
     return getCss({
-        '@global': {
-            ':host': {
-                display: 'inline-flex',
-                verticalAlign: 'top',
-            },
-            img: {
-                filter: ['dark', 'dark-electric'].includes(theme) ? 'invert(100%)' : 'none',
-            },
-            svg: {
-                fill: 'currentColor',
-                // TODO: This is a temporary fallback for Chromium and should be removed if this bug is resolved: https://bugs.chromium.org/p/chromium/issues/detail?id=1242706
-                // further information: https://melanie-richards.com/blog/currentcolor-svg-hcm/
-                '@media (forced-colors: active)': {
-                    fill: 'canvasText',
-                },
-            },
-        },
-        root: {
-            display: 'flex',
-            flexShrink: 0,
-            margin: 0,
-            padding: 0,
-            boxSizing: 'border-box',
-            width: dimension,
-            height: dimension,
-            color: getThemedTextColor(theme, color),
-        },
+        '@global': Object.assign({ ':host': Object.assign({ display: 'inline-block', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)), img: Object.assign(Object.assign({ display: 'block', margin: 0, padding: 0 }, (!isColorInherit && {
+                filter: filter[theme][color],
+                WebkitAnimation: `${theme === 'light' ? keyFramesLight : keyFramesDark} 1ms`, // needed to enforce repaint in Safari if theme is switched programmatically.
+            })), (isSizeInherit
+                ? {
+                    width: size,
+                    height: size,
+                }
+                : {
+                    width: fontLineHeight,
+                    height: fontLineHeight,
+                    font: `${sizeMap$3[size]} ${fontFamily}`,
+                })) }, (!isColorInherit && {
+            [`@keyframes ${isThemeDark(theme) ? keyFramesDark : keyFramesLight}`]: forceRerenderAnimationStyle,
+        })),
     });
 };
 
-const mediaQueryS = mediaQueryMin('s');
-const getComponentCss$B = (state, hasAction, hasClose, theme) => {
-    const textColor = getThemedColors('light').baseColor;
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': addImportantToEachRule(getNotificationRootJssStyle(state, theme)),
-            h5: Object.assign(Object.assign({}, headingXSmall), { margin: 0, color: textColor }),
-            p: Object.assign(Object.assign({}, textSmall), { margin: 0, color: textColor }),
-        }, icon: getNotificationIconJssStyle(state), content: getNotificationContentJssStyle() }, (hasAction && {
-        action: {
-            gridColumnStart: 1,
-            gridRowStart: 2,
-            [mediaQueryS]: {
-                gridColumnStart: 3,
-                gridRowStart: 1,
-                marginLeft: pxToRemWithUnit(16),
-            },
-        },
-    })), (hasClose && { close: getCloseIconJssStyle() })));
+const mediaQueryMinS$1 = getMediaQueryMin('s');
+const mediaQueryMaxS$1 = getMediaQueryMax('s');
+const getBackgroundColor = (state, theme) => {
+    const { infoSoftColor, successSoftColor, errorSoftColor, warningSoftColor } = getThemedColors(theme);
+    const colorMap = {
+        neutral: infoSoftColor,
+        info: infoSoftColor,
+        warning: warningSoftColor,
+        success: successSoftColor,
+        error: errorSoftColor,
+    };
+    return colorMap[state];
 };
-const getNotificationRootJssStyle = (state, theme) => {
-    const themedColors = getThemedColors(theme);
+const getNotificationRootJssStyle = (state, hasAction, hasClose, theme) => {
     return {
         display: 'grid',
-        gridTemplateColumns: '1fr auto',
-        gridTemplateRows: 'auto',
-        gridRowGap: pxToRemWithUnit(16),
-        alignItems: 'start',
-        justifyItems: 'start',
-        padding: pxToRemWithUnit(16),
-        background: themedColors[`${state}SoftColor`],
-        borderLeft: `${pxToRemWithUnit(4)} solid ${themedColors[`${state}Color`]}`,
-        [mediaQueryS]: {
-            // 4 columns are for icon, content, action button and close button
-            gridTemplateColumns: '2rem 1fr auto auto',
+        // 2 columns for content and optional close button
+        gridTemplateColumns: `minmax(auto, 1fr)${hasClose ? ' auto' : ''}`,
+        gap: spacingStaticMedium,
+        placeItems: 'start',
+        padding: spacingStaticMedium,
+        background: getBackgroundColor(state, theme),
+        borderRadius: borderRadiusSmall,
+        [mediaQueryMinS$1]: {
+            // 4 columns are for icon, content, optional action button and optional close button
+            gridTemplateColumns: `auto minmax(auto, 1fr)${hasAction ? ' auto' : ''}${hasClose ? ' auto' : ''}`,
         },
     };
 };
-const getNotificationIconJssStyle = (state) => ({
-    display: 'none',
-    [mediaQueryS]: {
-        display: 'inline-flex',
-        color: getThemedColors('light')[`${state}Color`],
+const getNotificationIconJssStyle = () => ({
+    [mediaQueryMaxS$1]: {
+        display: 'none',
     },
 });
 const getNotificationContentJssStyle = () => ({
     display: 'grid',
-    gridGap: pxToRemWithUnit(4),
-    maxWidth: pxToRemWithUnit(800),
-});
-const getCloseIconJssStyle = () => ({
-    marginLeft: pxToRemWithUnit(16),
+    gap: spacingStaticXSmall,
+    maxWidth: '50rem',
+    [mediaQueryMinS$1]: {
+        marginLeft: `-${spacingStaticSmall}`,
+    },
 });
 
-const getComponentCss$A = (icon, active, stretch, size, weight, hideLabel, alignLabel, hasSubline, hasSlottedAnchor, theme) => {
-    return getCss(mergeDeep(getLinkButtonPureStyles(icon, active, false, stretch, size, weight, hideLabel, alignLabel, hasSubline, hasSlottedAnchor, theme), {
-        '@global': {
-            '::slotted': addImportantToEachRule({
+const mediaQueryMaxS = getMediaQueryMax('s');
+const getComponentCss$A = (state, hasAction, hasClose, theme) => {
+    return getCss(Object.assign({ '@global': {
+            ':host': addImportantToEachRule(Object.assign(Object.assign({}, getNotificationRootJssStyle(state, hasAction, hasClose, theme)), hostHiddenStyles)),
+            h5: headingSmallStyle,
+            p: textSmallStyle,
+            'h5,p': {
+                margin: 0,
+                color: getThemedColors(theme).primaryColor,
+            },
+        }, icon: getNotificationIconJssStyle(), content: getNotificationContentJssStyle() }, (hasAction && {
+        action: {
+            [mediaQueryMaxS]: {
+                gridRowStart: 2,
+            },
+        },
+    })));
+};
+
+const getComponentCss$z = (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 && {
+        '@global': addImportantToEachRule({
+            '::slotted': {
                 '&(a)': {
-                    display: 'block',
-                    position: 'static',
-                    textDecoration: 'none',
+                    outline: 0,
+                    textDecoration: underline ? 'underline' : 'none',
                     font: 'inherit',
                     color: 'inherit',
-                    outline: 0,
                 },
                 // The clickable area for Safari < ~15 (<= release date: 2021-10-28) is reduced to the slotted anchor itself,
                 // since Safari prior to this major release does not support pseudo-elements in the slotted context
                 // (https://bugs.webkit.org/show_bug.cgi?id=178237)
-                '&(a)::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle()), { outline: '1px solid transparent', outlineOffset: '1px' }),
-                // The focusable area for Safari < ~15 (<= release date: 2021-10-28) is reduced to the slotted anchor itself
-                // and uses the browser's default style, since Safari prior to this major version does not support
-                // pseudo-elements in the slotted context (https://bugs.webkit.org/show_bug.cgi?id=178237)
+                '&(a)::before': Object.assign({ content: '""', position: 'fixed', top: offsetVertical, bottom: offsetVertical, borderRadius: borderRadiusSmall }, buildResponsiveStyles(hideLabel, (hideLabelValue) => ({
+                    right: hideLabelValue ? offsetVertical : offsetHorizontal,
+                    left: hideLabelValue || hasIcon ? offsetVertical : offsetHorizontal,
+                }))),
                 '&(a:focus)::before': {
-                    outlineColor: 'currentColor',
+                    border: `${borderWidthBase} solid ${focusColor}`,
                 },
                 '&(a:focus:not(:focus-visible))::before': {
-                    outlineColor: 'transparent',
+                    border: 0,
                 },
-            }),
-            'slot[name=subline]::slotted(*)': {
-                margin: 0,
             },
-        },
-    }));
+        }),
+    })), { root: {
+            textDecoration: underline ? 'underline' : 'none',
+        } })));
 };
 
-const { contrastHighColor: themeLightContrastHighColor, baseColor: themeLightBaseColor$2 } = getThemedColors('light');
-const { baseColor: themeDarkBaseColor } = getThemedColors('dark');
-const getColors$4 = (icon, theme) => {
-    const isDarkTheme = isThemeDark(theme);
-    const { contrastHighColorDarken, baseColorDarken } = getThemedColors(theme);
-    const externalBrandColor = colorExternal[icon === null || icon === void 0 ? void 0 : icon.split('-')[1]];
-    return {
-        baseColor: isDarkTheme ? themeDarkBaseColor : themeLightContrastHighColor,
-        baseColorHover: externalBrandColor || (isDarkTheme ? baseColorDarken : contrastHighColorDarken),
-        textColor: isDarkTheme ? themeLightBaseColor$2 : themeDarkBaseColor,
-        textColorHover: icon === 'logo-kakaotalk' ? themeLightBaseColor$2 : externalBrandColor ? themeDarkBaseColor : undefined,
-    };
-};
-const getComponentCss$z = (icon, hideLabel, hasHref, theme) => {
-    const { baseColor, baseColorHover, textColor, textColorHover } = getColors$4(icon, theme);
-    return getCss({
-        '@global': Object.assign(Object.assign({ ':host': {
-                display: 'inline-flex',
-                verticalAlign: 'top',
-                outline: addImportantToRule(0),
-            } }, (!hasHref && {
-            '::slotted': addImportantToEachRule(Object.assign(Object.assign({ '&(a)': Object.assign({ display: 'block', textDecoration: 'none', color: 'inherit', lineHeight: 'inherit', outline: 'transparent solid 1px', outlineOffset: '3px' }, buildResponsiveStyles(hideLabel, getSlottedLinkJssStyle)), 
+const getComponentCss$y = (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({
+            '::slotted': {
+                '&(a)': {
+                    outline: 0,
+                    textDecoration: 'none',
+                    font: 'inherit',
+                    color: 'inherit',
+                },
+                // The clickable area for Safari < ~15 (<= release date: 2021-10-28) is reduced to the slotted anchor itself,
+                // since Safari prior to this major release does not support pseudo-elements in the slotted context
+                // (https://bugs.webkit.org/show_bug.cgi?id=178237)
+                '&(a)::before': Object.assign({ content: '""', position: 'fixed', borderRadius: borderRadiusMedium }, getInsetJssStyle(-6)),
                 // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
                 '&(a::-moz-focus-inner)': {
                     border: 0,
-                }, '&(a:focus)': {
-                    outlineColor: baseColor,
-                } }, hoverMediaQuery({
-                '&(a:hover:focus)': {
-                    outlineColor: baseColorHover,
                 },
-            })), { '&(a:focus:not(:focus-visible))': {
-                    outlineColor: 'transparent',
-                } })),
-        })), { span: Object.assign(Object.assign({ display: 'block', width: '100%', color: textColor }, textSmall), (hasHref && buildResponsiveStyles(hideLabel, getLabelJssStyle))) }),
-        root: Object.assign(Object.assign({ display: 'flex', width: '100%', minWidth: pxToRemWithUnit(48), minHeight: pxToRemWithUnit(48), position: 'relative', margin: 0, padding: 0, boxSizing: 'border-box', outline: 'transparent none', appearance: 'none', cursor: 'pointer', textDecoration: 'none', textAlign: 'left', border: '1px solid currentColor', backgroundColor: 'currentColor', color: baseColor, transition: getTransition('background-color') + ',' + getTransition('border-color') + ',' + getTransition('color') }, hoverMediaQuery({
-            '&:hover, &:active': {
-                color: baseColorHover,
-                '& span, & $icon': {
-                    color: textColorHover,
+                '&(a:focus)::before': {
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                },
+                '&(a:focus:not(:focus-visible))::before': {
+                    border: 0,
                 },
             },
-        })), (hasHref && Object.assign(Object.assign({}, buildResponsiveStyles(hideLabel, getRootJssStyle)), getFocusJssStyle()))),
-        icon: Object.assign({ position: 'absolute', width: pxToRemWithUnit(24), height: pxToRemWithUnit(24), color: textColor, pointerEvents: 'none' }, buildResponsiveStyles(hideLabel, getIconJssStyle)),
-    });
+        }),
+    }))));
+};
+
+const fontWeightMap = {
+    thin: fontWeightRegular,
+    regular: fontWeightRegular,
+    semibold: fontWeightSemiBold$1,
+    'semi-bold': fontWeightSemiBold$1,
+    bold: fontWeightBold,
+};
+const getFontWeight = (weight) => {
+    return fontWeightMap[weight];
 };
 
 const aspectRatioPaddingTop = {
@@ -6905,31 +6863,26 @@ const getGradientBackground = (isCompact, isTopAligned) => {
         ? `linear-gradient(${gradient} 100%);`
         : `linear-gradient(to top, ${gradient} 100%);`;
 };
-const sizeMap$1 = {
+const sizeMap$2 = {
     inherit: {
         fontSize: 'inherit',
     },
     default: { fontSize: '1.25rem' },
 };
-const getComponentCss$y = (aspectRatio, size, weight, align, compact, hasGradient) => {
+const getComponentCss$x = (aspectRatio, size, weight, align, compact, hasGradient) => {
     const isTopAligned = align === 'top';
     const paddingSizeXS = pxToRemWithUnit(24);
     const gradientPadding = pxToRemWithUnit(72);
     return getCss({
-        '@global': {
-            ':host': {
-                display: 'block',
-                height: addImportantToRule('fit-content'),
-                '& ::slotted(picture),::slotted(img)': addImportantToEachRule(Object.assign({ transition: getTransition('transform') }, getBackfaceVisibilityJssStyle())),
-                '& ::slotted(picture)': addImportantToEachRule(Object.assign({ position: 'absolute' }, getInsetJssStyle())),
-                '& ::slotted(img)': addImportantToEachRule({
-                    height: '100%',
-                    width: '100%',
-                    objectFit: 'cover',
-                }),
+        '@global': Object.assign(Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ height: 'fit-content' }, hostHiddenStyles))) }, addImportantToEachRule({
+            '::slotted(picture),::slotted(img)': Object.assign({ transition: getTransition('transform') }, getBackfaceVisibilityJssStyle()),
+            '::slotted(picture)': Object.assign({ position: 'absolute' }, getInsetJssStyle()),
+            '::slotted(img)': {
+                height: '100%',
+                width: '100%',
+                objectFit: 'cover',
             },
-            p: Object.assign(Object.assign(Object.assign({ color: getThemedTextColor('dark', 'default') }, textSmall), { maxWidth: pxToRemWithUnit(550), margin: 0 }), mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$1[s]), buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) })))),
-        },
+        })), { p: Object.assign(Object.assign(Object.assign({ color: getThemedTypographyColor('dark', 'primary') }, textSmallStyle), { maxWidth: pxToRemWithUnit(550), margin: 0 }), mergeDeep(buildResponsiveStyles(size, (s) => sizeMap$2[s]), buildResponsiveStyles(weight, (w) => ({ fontWeight: getFontWeight(w) })))) }),
         root: Object.assign(Object.assign({ height: 0, position: 'relative', transform: 'translate3d(0,0,0)' }, hoverMediaQuery({
             '&:hover': {
                 '& ::slotted(picture),::slotted(img)': addImportantToEachRule({
@@ -6943,7 +6896,7 @@ const getComponentCss$y = (aspectRatio, size, weight, align, compact, hasGradien
         content: Object.assign(Object.assign(Object.assign({ position: 'absolute' }, (isTopAligned ? { top: 0 } : { bottom: 0 })), { left: 0, right: 0, display: 'grid', justifyItems: 'start', padding: align === 'bottom'
                 ? `${gradientPadding} ${paddingSizeXS} ${paddingSizeXS}`
                 : `${paddingSizeXS} ${paddingSizeXS} ${gradientPadding}`, gap: pxToRemWithUnit(24) }), mergeDeep({
-            [mediaQueryMin('s')]: Object.assign({ paddingLeft: pxToRemWithUnit(32), paddingRight: pxToRemWithUnit(32) }, (align === 'bottom' ? { paddingBottom: pxToRemWithUnit(32) } : { paddingTop: pxToRemWithUnit(32) })),
+            [getMediaQueryMin('s')]: Object.assign({ paddingLeft: pxToRemWithUnit(32), paddingRight: pxToRemWithUnit(32) }, (align === 'bottom' ? { paddingBottom: pxToRemWithUnit(32) } : { paddingTop: pxToRemWithUnit(32) })),
         }, hasGradient &&
             buildResponsiveStyles(compact, (isCompact) => ({
                 background: getGradientBackground(isCompact, isTopAligned),
@@ -6960,10 +6913,6 @@ const getComponentCss$y = (aspectRatio, size, weight, align, compact, hasGradien
     });
 };
 
-const getComponentCss$x = (variant, hideLabel, hasSlottedAnchor, theme) => {
-    return getCss(getLinkButtonStyles(variant, hideLabel, false, hasSlottedAnchor, theme));
-};
-
 const baseSizes = {
     small: {
         width: '100px',
@@ -6977,15 +6926,14 @@ const baseSizes = {
 const getComponentCss$w = (size) => {
     return getCss({
         '@global': {
-            ':host': {
-                position: 'relative',
-                display: 'inline-flex',
-                verticalAlign: 'top',
-                outline: addImportantToRule(0),
-            },
-            a: Object.assign({ display: 'block', textDecoration: 'none' }, getFocusJssStyle({ color: getThemedColors('light').baseColor, offset: 0, pseudo: '::before' })),
+            ':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',
+            })),
             picture: Object.assign({ display: 'block' }, (size === 'responsive'
-                ? Object.assign(Object.assign({}, baseSizes.small), { [mediaQueryMin('l')]: baseSizes.medium }) : baseSizes[size])),
+                ? Object.assign(Object.assign({}, baseSizes.small), { [getMediaQueryMin('l')]: baseSizes.medium }) : baseSizes[size])),
             img: {
                 display: 'block',
                 width: '100%',
@@ -6995,33 +6943,9 @@ const getComponentCss$w = (size) => {
     });
 };
 
-// inspired by https://www.abeautifulsite.net/posts/testing-support-for-focus-visible/
-const supportsFocusVisible = () => {
-    let isSupported = true;
-    const style = document.createElement('style');
-    document.head.appendChild(style);
-    try {
-        style.sheet.insertRule(':focus-visible{}');
-    }
-    catch (e) {
-        isSupported = false;
-    }
-    finally {
-        style.remove();
-    }
-    return isSupported;
-};
-const hasFocusVisibleSupport = hasDocument && supportsFocusVisible();
-// getter for easy mocking
-const getHasFocusVisibleSupport = () => hasFocusVisibleSupport;
-// TODO: remove fallback once :focus-visible is supported by safari
-const getFocusVisibleFallback = (style) => getHasFocusVisibleSupport() ? style : { outline: 0 };
-
-const mediaQueryM = mediaQueryMin('m');
-const mediaQueryXl = mediaQueryMin('xl');
-const mediaQueryXxl = mediaQueryMin('xxl');
-const { backgroundColor: lightThemeBackgroundColor } = getThemedColors('light');
-const { backgroundColor: darkThemeBackgroundColor } = getThemedColors('dark');
+const mediaQueryXl = getMediaQueryMin('xl');
+const { backgroundColor, primaryColor: lightThemePrimaryColor } = getThemedColors('light');
+const { primaryColor: darkThemePrimaryColor } = getThemedColors('dark');
 const transitionTimingFunction = 'cubic-bezier(.16,1,.3,1)';
 const stretchToFullModalWidthClassName = 'stretch-to-full-modal-width';
 const getFullscreenJssStyles = (fullscreen) => {
@@ -7031,12 +6955,14 @@ const getFullscreenJssStyles = (fullscreen) => {
             maxWidth: 'none',
             minHeight: '100%',
             margin: 0,
+            borderRadius: 0,
         }
         : {
             minWidth: pxToRemWithUnit(275.2),
             maxWidth: pxToRemWithUnit(1536),
             minHeight: 'auto',
-            margin: `max(1rem, 7vh) ${gridSafeZone.base}`,
+            margin: `max(16px, 7vh) ${gridSafeZoneBase}`,
+            borderRadius: borderRadiusMedium,
         };
 };
 const isFullscreenForXl = (fullscreen) => {
@@ -7051,118 +6977,133 @@ const isFullscreenForXl = (fullscreen) => {
         return BREAKPOINTS.indexOf(lastTrueBreakpoint) > BREAKPOINTS.indexOf(lastFalseBreakpoint);
     }
 };
-const getSlottedJssStyle = (marginValue, hasHeader) => {
+const getSlottedJssStyle = (marginValue, hasHeader, disableCloseButton) => {
+    const marginPx = `${-marginValue}px`;
     const marginRem = pxToRemWithUnit(-marginValue);
     return Object.assign(Object.assign({ [`&(.${stretchToFullModalWidthClassName})`]: {
-            width: `calc(100% + ${pxToRemWithUnit(marginValue * 2)})`,
-            margin: `0 ${marginRem}`,
+            width: `calc(100% + ${marginValue * 2}px)`,
+            margin: `0 ${marginPx}`,
         } }, (!hasHeader && {
         [`&(.${stretchToFullModalWidthClassName}:first-child)`]: {
-            marginTop: marginRem,
+            marginTop: !disableCloseButton ? marginRem : marginPx,
         },
     })), { [`&(.${stretchToFullModalWidthClassName}:last-child)`]: {
-            marginBottom: marginRem,
+            marginBottom: marginPx,
         } });
 };
 const getComponentCss$v = (open, fullscreen, disableCloseButton, hasHeader) => {
     const isFullscreenForXlAndXxl = isFullscreenForXl(fullscreen);
-    const { baseColor } = getThemedColors('light');
     return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule(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' }), (open
                 ? {
-                    transition: `opacity .6s ${transitionTimingFunction}`,
                     opacity: 1,
                     visibility: 'inherit',
                 }
                 : {
-                    transition: `opacity .2s ${transitionTimingFunction},visibility 0s linear .2s`,
                     opacity: 0,
                     visibility: 'hidden',
-                })), { 
+                })), hostHiddenStyles), { 
                 // workaround via pseudo element to fix stacking (black) background in safari
-                '&::before': Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: `${darkThemeBackgroundColor}e6` }) }))), { overflowY: 'auto' }),
-            '::slotted': addImportantToEachRule(Object.assign(Object.assign({}, getSlottedJssStyle(32, hasHeader)), { [mediaQueryM]: getSlottedJssStyle(40, hasHeader), [mediaQueryXxl]: getSlottedJssStyle(64, hasHeader) })),
-            h1: Object.assign(Object.assign({}, textMedium), { fontWeight: fontWeight.semiBold, margin: 0, color: baseColor, [mediaQueryMin('m')]: Object.assign(Object.assign({}, textLarge), { fontWeight: fontWeight.semiBold }) }),
-        }, root: mergeDeep(Object.assign(Object.assign({ position: 'relative', boxSizing: 'border-box', transition: `transform .6s ${transitionTimingFunction}`, transform: open ? 'scale3d(1,1,1)' : 'scale3d(.9,.9,1)', padding: pxToRemWithUnit(32), backgroundColor: lightThemeBackgroundColor }, getFocusVisibleFallback(getFocusJssStyle({ color: lightThemeBackgroundColor }))), { [mediaQueryM]: {
-                padding: pxToRemWithUnit(40),
-            }, [mediaQueryXl]: {
-                margin: isFullscreenForXlAndXxl ? 0 : `min(12rem, 10vh) ${gridSafeZone.xl}`,
-            }, [mediaQueryXxl]: {
-                padding: pxToRemWithUnit(64),
-                margin: isFullscreenForXlAndXxl ? 0 : `min(12rem, 10vh) ${gridSafeZone.xl}`,
-            } }), buildResponsiveStyles(fullscreen, getFullscreenJssStyles)) }, (hasHeader && {
-        header: Object.assign(Object.assign({ padding: `0 0 ${pxToRemWithUnit(16)}` }, (!disableCloseButton && { margin: `0 ${pxToRemWithUnit(32)} 0 0` })), { [mediaQueryM]: {
-                padding: `0 0 ${pxToRemWithUnit(24)}`,
-            }, [mediaQueryXxl]: Object.assign({ padding: `0 0 ${pxToRemWithUnit(32)}` }, (!disableCloseButton && { margin: 0 })) }),
+                '&::before': Object.assign(Object.assign(Object.assign({ content: '""', position: 'fixed' }, getInsetJssStyle()), { background: themeDarkBackgroundShading }), frostedGlassStyle) }))), { overflowY: 'auto' }),
+            '::slotted': addImportantToEachRule(Object.assign({}, mergeDeep(getSlottedJssStyle(32, hasHeader, disableCloseButton), buildResponsiveStyles(fullscreen, (fullscreenValue) => ({
+                [`&(.${stretchToFullModalWidthClassName}`]: {
+                    '&:first-child)': {
+                        borderRadius: fullscreenValue ? 0 : '8px 8px 0 0',
+                    },
+                    '&:last-child)': {
+                        borderRadius: fullscreenValue ? 0 : '0 0 8px 8px',
+                    },
+                },
+            }))))),
+            h2: Object.assign(Object.assign({}, headingLargeStyle), { margin: 0, color: lightThemePrimaryColor }),
+        }, root: mergeDeep({
+            position: 'relative',
+            boxSizing: 'border-box',
+            transition: `transform .6s ${transitionTimingFunction}`,
+            transform: open ? 'scale3d(1,1,1)' : 'scale3d(.9,.9,1)',
+            padding: !disableCloseButton ? `${pxToRemWithUnit(32)} 32px 32px 32px` : '32px',
+            backgroundColor,
+            outline: 0,
+            '&:focus::before': Object.assign({ content: '""', position: 'fixed', border: `${borderWidthBase} solid` }, buildResponsiveStyles(fullscreen, (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) ${gridSafeZoneBase}`,
+            },
+        }, buildResponsiveStyles(fullscreen, getFullscreenJssStyles)) }, (hasHeader && {
+        header: {
+            padding: '0 0 8px',
+        },
     })), { close: {
             position: 'absolute',
-            top: 0,
-            right: 0,
-            padding: pxToRemWithUnit(8),
-            border: `${pxToRemWithUnit(6)} solid ${lightThemeBackgroundColor}`,
-            background: lightThemeBackgroundColor,
+            top: '8px',
+            right: '8px',
+            border: `2px solid ${backgroundColor}`,
+            borderRadius: '4px',
+            backgroundColor,
+            '&:hover': {
+                backgroundColor: 'transparent',
+                borderColor: 'transparent',
+            },
         } }));
 };
 
+const mediaQueryMinS = getMediaQueryMin('s');
+// button size needs to be fluid between 320px and 360px viewport width, so that the pagination fits into 320px viewport
+// and text scale 200% works (almost) on mobile viewports too
+const buttonSize = `clamp(36px, calc(${fontLineHeight} + 10vw - 20px), 40px)`;
+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 { baseColor, brandColor, disabledColor, hoverColor, activeColor, focusColor } = getThemedColors(theme);
+    const { primaryColor, disabledColor, hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': {
-                display: 'block',
-                outline: addImportantToRule(0),
-            },
-            nav: Object.assign({ display: 'flex', justifyContent: 'center', margin: 0, padding: 0 }, buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
+            nav: Object.assign({ display: 'flex', justifyContent: 'center' }, buildResponsiveStyles(maxNumberOfPageLinks, (n) => ({
                 counterReset: `size ${n}`,
             }))),
             ul: {
                 display: 'flex',
+                gap: spacingStaticXSmall,
                 margin: 0,
                 padding: 0,
+                [mediaQueryMinS]: {
+                    gap: spacingStaticSmall,
+                },
             },
             li: {
                 listStyleType: 'none',
-                margin: 0,
-                padding: 0,
-            },
-            span: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', transition: getTransition('color'), position: 'relative', width: pxToRemWithUnit(40), height: pxToRemWithUnit(40), boxSizing: 'border-box', textDecoration: 'none' }, textSmall), { whiteSpace: 'nowrap', cursor: 'pointer', color: baseColor }), getFocusJssStyle({ color: focusColor, offset: 1 })), hoverMediaQuery({
-                '&:hover': {
-                    color: hoverColor,
-                },
-            })), { '&:active': {
-                    outline: 'none',
-                    color: activeColor,
-                }, '&[aria-disabled]': {
-                    cursor: 'default',
-                    pointerEvents: 'none',
-                    color: disabledColor,
-                }, '&[aria-current]': Object.assign(Object.assign({ cursor: 'default' }, hoverMediaQuery({
-                    '&:hover': {
-                        color: baseColor,
+                [mediaQueryMinS]: {
+                    '&:first-child': {
+                        marginRight: spacingStaticSmall,
                     },
-                })), { '&::after': {
-                        content: '""',
-                        display: 'block',
-                        position: 'absolute',
-                        bottom: 0,
-                        left: pxToRemWithUnit(6),
-                        right: pxToRemWithUnit(6),
-                        height: pxToRemWithUnit(4),
-                        background: brandColor,
-                    } }) }),
-        },
-        ellipsis: {
-            cursor: 'default',
-            pointerEvents: 'none',
-            '&::after': {
-                content: '"…"',
+                    '&:last-child': {
+                        marginLeft: spacingStaticSmall,
+                    },
+                },
             },
+            span: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center', transition: ['color', 'border-color', 'background-color'].map(getTransition).join(), position: 'relative', width: buttonSize, height: buttonSize, boxSizing: 'border-box' }, textSmallStyle), { whiteSpace: 'nowrap', cursor: 'pointer', color: primaryColor, outline: 0, borderRadius: borderRadiusSmall, borderColor: 'transparent' }), hoverMediaQuery({
+                '&:not([aria-disabled]):not(.ellipsis):hover': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
+            })), { '&:not(.ellipsis):focus::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: borderRadiusMedium }), '&:focus:not(:focus-visible)::before': {
+                    borderColor: 'transparent',
+                }, '&[aria-current]': {
+                    disabledCursorStyle,
+                    color: primaryColor,
+                    border: `${borderWidthBase} solid ${primaryColor}`,
+                    borderRadius: borderRadiusSmall,
+                    '&:not(.ellipsis):focus::before': Object.assign({}, getInsetJssStyle(-6)),
+                }, '&[aria-disabled]': Object.assign(Object.assign({}, disabledCursorStyle), { color: disabledColor }) }),
         },
+        ellipsis: Object.assign(Object.assign({}, disabledCursorStyle), { '&::after': {
+                content: '"…"',
+            } }),
     });
 };
 
-const { backgroundColor, baseColor: baseColor$2 } = getThemedColors('light');
-const mediaQueryXS = mediaQueryMin('xs');
+const { backgroundColor: backgroundColorThemeLight, primaryColor: primaryColorThemeLight } = getThemedColors('light');
 const mediaQueryForcedColors = '@media (forced-colors: active)';
 const directionPositionMap = {
     top: {
@@ -7186,7 +7127,7 @@ const directionPositionMap = {
         transform: 'translate3d(0, -50%, 0)',
     },
 };
-const borderWidth = '.75rem';
+const borderWidth = '12px';
 const transparentColor = 'transparent';
 const canvas = 'canvas';
 const canvasText = 'canvastext';
@@ -7197,7 +7138,7 @@ const directionArrowMap = {
         left: '50%',
         transform: 'translateX(-50%)',
         borderWidth: join(borderWidth, borderWidth, 0),
-        borderColor: join(backgroundColor, transparentColor, transparentColor),
+        borderColor: join(backgroundColorThemeLight, transparentColor, transparentColor),
         [mediaQueryForcedColors]: {
             borderColor: join(canvasText, canvas, canvas),
         },
@@ -7207,7 +7148,7 @@ const directionArrowMap = {
         right: 0,
         transform: 'translateY(-50%)',
         borderWidth: join(borderWidth, borderWidth, borderWidth, 0),
-        borderColor: join(transparentColor, backgroundColor, transparentColor, transparentColor),
+        borderColor: join(transparentColor, backgroundColorThemeLight, transparentColor, transparentColor),
         [mediaQueryForcedColors]: {
             borderColor: join(canvas, canvasText, canvas, canvas),
         },
@@ -7217,7 +7158,7 @@ const directionArrowMap = {
         left: '50%',
         transform: 'translateX(-50%)',
         borderWidth: join(0, borderWidth, borderWidth),
-        borderColor: join(transparentColor, transparentColor, backgroundColor),
+        borderColor: join(transparentColor, transparentColor, backgroundColorThemeLight),
         [mediaQueryForcedColors]: {
             borderColor: join(canvas, canvas, canvasText),
         },
@@ -7227,23 +7168,32 @@ const directionArrowMap = {
         left: 0,
         transform: 'translateY(-50%)',
         borderWidth: join(borderWidth, 0, borderWidth, borderWidth),
-        borderColor: join(transparentColor, transparentColor, transparentColor, backgroundColor),
+        borderColor: join(transparentColor, transparentColor, transparentColor, backgroundColorThemeLight),
         [mediaQueryForcedColors]: {
             borderColor: join(canvas, canvas, canvas, canvasText),
         },
     },
 };
-const getComponentCss$t = (direction) => {
-    const spacerBox = '-1rem';
+const getComponentCss$t = (direction, theme) => {
+    const spacerBox = '-16px';
+    const { hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule({
-                position: 'relative',
-                display: 'inline-block',
-                width: '1.5rem',
-                height: '1.5rem', // height of icon (to improve ssr support)
-            })), { verticalAlign: 'top' }),
-            p: Object.assign(Object.assign({}, textSmall), { margin: 0 }),
+            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ position: 'relative', display: 'inline-block' }, hostHiddenStyles))), { verticalAlign: 'top' }),
+            p: Object.assign(Object.assign({}, textSmallStyle), { margin: 0 }),
+            button: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block', position: 'relative', appearance: 'none', background: 'transparent', border: 0, padding: 0, outline: 0, cursor: 'pointer' }, textSmallStyle), { width: fontLineHeight, height: fontLineHeight, borderRadius: '50%' }), hoverMediaQuery({
+                transition: getTransition('background-color'),
+                '&:hover': Object.assign(Object.assign({}, frostedGlassStyle), { backgroundColor: hoverColor }),
+            })), { '&::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-2)), { border: `${borderWidthBase} solid transparent`, borderRadius: '50%' }), '&:focus::before': {
+                    borderColor: focusColor,
+                }, '&:focus:not(:focus-visible)::before': {
+                    borderColor: 'transparent',
+                } }),
+        },
+        label: getTextHiddenJssStyle(true),
+        icon: {
+            display: 'inline-block',
+            transform: 'translate3d(0,0,0)', // Fixes movement on hover in Safari
         },
         spacer: {
             position: 'absolute',
@@ -7252,18 +7202,14 @@ const getComponentCss$t = (direction) => {
             left: spacerBox,
             right: spacerBox,
             bottom: spacerBox,
-            filter: 'drop-shadow(0 0 1rem rgba(0,0,0,.3))',
+            filter: 'drop-shadow(0 0 16px rgba(0,0,0,.3))',
             backdropFilter: 'drop-shadow(0px 0px 0px transparent)',
             pointerEvents: 'none',
             animation: '240ms $fadeIn ease forwards'
                 ,
             '&::before': Object.assign({ content: '""', position: 'absolute', borderStyle: 'solid' }, directionArrowMap[direction]),
         },
-        popover: Object.assign(Object.assign(Object.assign({ position: 'absolute', maxWidth: '90vw', width: 'max-content', boxSizing: 'border-box', background: backgroundColor, padding: '.5rem 1rem', pointerEvents: 'auto' }, directionPositionMap[direction]), textSmall), { listStyleType: 'none', 
-            // TODO: The styles above are our text styles should be extracted as soon as p-text is refactored with JSS
-            color: baseColor$2, whiteSpace: 'inherit', [mediaQueryXS]: {
-                maxWidth: pxToRemWithUnit(432),
-            }, [mediaQueryForcedColors]: {
+        popover: Object.assign(Object.assign(Object.assign({ position: 'absolute', maxWidth: 'min(90vw, 27rem)', width: 'max-content', boxSizing: 'border-box', background: backgroundColorThemeLight, padding: '8px 16px', pointerEvents: 'auto' }, directionPositionMap[direction]), textSmallStyle), { listStyleType: 'none', color: primaryColorThemeLight, whiteSpace: 'inherit', borderRadius: borderRadiusSmall, [mediaQueryForcedColors]: {
                 outline: `1px solid ${canvasText}`,
             } }),
         '@keyframes fadeIn': {
@@ -7277,69 +7223,72 @@ const getComponentCss$t = (direction) => {
     });
 };
 
-const theme = 'light';
-const getBackgroundImageStyles = (hasVisibleState, innerCircleColor, outerCircleColor) => {
-    const maskColor = getThemedColors(theme).backgroundColor.replace(/#/g, '%23');
-    return {
-        backgroundImage: `url(${
-        // SVG images act like a mask to smooth the circle radius
-        hasVisibleState
-            ? `'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><g fill="${maskColor}" fill-rule="nonzero"><path d="M14 26c6.627 0 12-5.373 12-12S20.627 2 14 2 2 7.373 2 14s5.373 12 12 12zm0 2C6.268 28 0 21.732 0 14S6.268 0 14 0s14 6.268 14 14-6.268 14-14 14z"/><path d="M14 21.273a7.273 7.273 0 1 0 0-14.546 7.273 7.273 0 0 0 0 14.546zM14 24C8.477 24 4 19.523 4 14S8.477 4 14 4s10 4.477 10 10-4.477 10-10 10z"/></g></svg>'`
-            : `'data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><g fill="${maskColor}" fill-rule="nonzero"><path d="M14 26c6.627 0 12-5.373 12-12S20.627 2 14 2 2 7.373 2 14s5.373 12 12 12zm0 2C6.268 28 0 21.732 0 14S6.268 0 14 0s14 6.268 14 14-6.268 14-14 14z"/><path d="M14 22a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0 3C7.925 25 3 20.075 3 14S7.925 3 14 3s11 4.925 11 11-4.925 11-11 11z"/></g></svg>'`}), radial-gradient(circle, ${innerCircleColor} ${pxToRemWithUnit(9)}, ${outerCircleColor} ${pxToRemWithUnit(9)})`,
-    };
-};
-const getComponentCss$s = (hideLabel, state, isDisabled) => {
-    const size = pxToRemWithUnit(28);
-    const hasVisibleState = isVisibleFormState(state);
-    const { baseColor, backgroundColor, contrastMediumColor, contrastHighColor, disabledColor } = getThemedColors(theme);
-    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': {
-                display: 'block',
-            },
-            '::slotted': addImportantToEachRule(Object.assign(Object.assign({ '&(input)': Object.assign({ position: 'static', width: size, height: size, flexShrink: 0, display: 'block', margin: pxToRemWithUnit(-2), padding: 0, WebkitAppearance: 'none', appearance: 'none', boxSizing: 'border-box', backgroundSize: size, backgroundPosition: 'center', backgroundColor: 'transparent', transition: getTransition('background-image'), opacity: 1, border: `2px solid ${backgroundColor}`, borderRadius: '50%', outline: 'none', cursor: 'pointer' }, getBackgroundImageStyles(hasVisibleState, backgroundColor, formStateColor || contrastMediumColor)), '&(input:checked)': getBackgroundImageStyles(hasVisibleState, formStateColor || contrastHighColor, formStateColor || contrastHighColor) }, hoverMediaQuery({
-                '&(input:not(:disabled):not(:checked):hover), .label:hover ~ &(input:not(:disabled):not(:checked))': getBackgroundImageStyles(hasVisibleState, backgroundColor, formStateHoverColor || baseColor),
-                '&(input:not(:disabled):checked:hover), .label:hover ~ &(input:not(:disabled):checked)': getBackgroundImageStyles(hasVisibleState, formStateColor || contrastHighColor, formStateHoverColor || baseColor),
-            })), { '&(input:disabled)': Object.assign({ cursor: 'not-allowed' }, getBackgroundImageStyles(hasVisibleState, backgroundColor, disabledColor)), '&(input:checked:disabled)': getBackgroundImageStyles(hasVisibleState, disabledColor, disabledColor), '&(input:focus)': {
-                    boxShadow: `0 0 0 1px ${formStateColor || contrastMediumColor}`,
-                }, '&(input:focus:not(:focus-visible))': {
-                    boxShadow: 'none',
-                } })),
-            label: {
-                position: 'relative',
-                display: 'flex',
-            },
-        }, label: getCheckboxRadioLabelJssStyle(isDisabled, hideLabel, theme) }, getFunctionalComponentRequiredStyles(theme)), getFunctionalComponentStateMessageStyles(theme, state)));
+const getComponentCss$s = (hideLabel, state, isDisabled, theme) => {
+    const checkedIconColor = getThemedColors(theme === 'light' ? 'dark' : 'light').primaryColor.replace(/#/g, '%23');
+    return getCss(mergeDeep(getCheckboxRadioJssStyle(hideLabel, state, isDisabled, theme), {
+        '@global': {
+            '::slotted': addImportantToEachRule(Object.assign({ '&(input)': {
+                    borderRadius: '50%',
+                }, '&(input:checked)': {
+                    backgroundImage: getInlineSVGBackgroundImage(`<circle fill="${checkedIconColor}" cx="12" cy="12" r="6"/>`),
+                } }, (!isDisabled && {
+                '&(input:focus)::before': {
+                    borderRadius: '50%',
+                },
+            }))),
+        },
+    }));
 };
 
-const getComponentCss$r = (gradientColorScheme, isNextHidden, isPrevHidden, scrollIndicatorPosition, theme) => {
-    const { backgroundColor, backgroundSurfaceColor, baseColor } = getThemedColors(theme);
-    const gradientColor = gradientColorScheme === 'surface' ? backgroundSurfaceColor : backgroundColor;
-    const gradientColorTransparent = gradientColor + (gradientColor.length === 4 ? '0' : '00');
+const gradientColorMap = {
+    light: {
+        default: '255,255,255',
+        surface: '238,239,242',
+    },
+    dark: {
+        default: '14,14,18',
+        surface: '33,34,37',
+    },
+};
+const getGradient = (theme, gradientColorTheme) => {
+    const gradientColor = gradientColorMap[theme][gradientColorTheme];
+    return (`rgba(${gradientColor},1) 0%,` +
+        `rgba(${gradientColor},0.9) 10%,` +
+        `rgba(${gradientColor},0.668116) 40%,` +
+        `rgba(${gradientColor},0.331884) 60%,` +
+        `rgba(${gradientColor},0.0816599) 80%,` +
+        `rgba(${gradientColor},0)`);
+};
+const getComponentCss$r = (gradientColorTheme, isNextHidden, isPrevHidden, scrollIndicatorPosition, theme) => {
+    const { backgroundColor, backgroundSurfaceColor, focusColor } = getThemedColors('light');
+    const { hoverColor } = getThemedColors(theme);
+    const isDarkTheme = isThemeDark(theme);
     const actionPrevNextStyles = {
         position: 'relative',
-        padding: `${pxToRemWithUnit(4)} 0`,
+        padding: '4px 0',
         pointerEvents: 'none',
         display: 'flex',
         alignItems: scrollIndicatorPosition === 'center' ? 'center' : 'flex-start',
     };
     return getCss({
         '@global': {
-            ':host': {
-                display: 'block',
-                height: addImportantToRule('inherit'),
-            },
-        },
-        root: {
-            display: 'grid',
-            gridTemplateColumns: '2em minmax(0, 1fr) 2em',
-            margin: `0 ${pxToRemWithUnit(-4)}`,
-            height: 'inherit',
+            ':host': addImportantToEachRule(Object.assign({ display: 'block', height: 'inherit' }, hostHiddenStyles)),
+            button: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', pointerEvents: 'auto', alignItems: 'center', justifyContent: 'center' }, textSmallStyle), { height: `calc(${fontLineHeight} + 4px)`, width: `calc(${fontLineHeight} + 4px)`, border: 0, outline: 0, cursor: 'pointer', background: gradientColorTheme === 'surface' ? backgroundSurfaceColor : backgroundColor, borderRadius: borderRadiusSmall }), frostedGlassStyle), { visibility: 'hidden' }), (!isDarkTheme && dropShadowLowStyle)), hoverMediaQuery({
+                transition: getTransition('background-color'),
+                '&:hover': Object.assign({ background: hoverColor }, (isDarkTheme && {
+                    '& > .icon': {
+                        filter: 'invert(97%) sepia(55%) saturate(2840%) hue-rotate(180deg) brightness(114%) contrast(103%)', // TODO: this is not shared from icon?
+                    },
+                })),
+            })),
         },
+        root: Object.assign(Object.assign({ display: 'grid', gridTemplateColumns: '48px minmax(0, 1fr) 48px' }, hoverMediaQuery({
+            // distinguish gradient width on mobile and desktop
+            gridTemplateColumns: '64px minmax(0, 1fr) 64px',
+        })), { margin: '0 -4px', height: 'inherit' }),
         'scroll-area': {
-            minHeight: pxToRemWithUnit(24),
             gridArea: '1 / 1 / 1 / -1',
-            padding: pxToRemWithUnit(4),
+            padding: '4px',
             overflow: 'scroll hidden',
             msOverflowStyle: 'none' /* IE and Edge */,
             scrollbarWidth: 'none' /* Firefox */,
@@ -7347,9 +7296,23 @@ const getComponentCss$r = (gradientColorScheme, isNextHidden, isPrevHidden, scro
                 display: 'none',
             },
         },
-        // Extra wrapper needed to compensate different offset parent calculation depending of browser.
+        // Extra wrapper needed to compensate different offset parent calculation depending on browser.
         // Needed for position of status bar.
-        'scroll-wrapper': Object.assign(Object.assign({}, getFocus({ color: baseColor })), { position: 'relative', display: 'inline-flex', minWidth: '100%', verticalAlign: 'top' }),
+        'scroll-wrapper': {
+            position: 'relative',
+            display: 'inline-flex',
+            minHeight: '28px',
+            minWidth: '100%',
+            verticalAlign: 'top',
+            outline: 0,
+            '&::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid transparent`, borderRadius: borderRadiusSmall, pointerEvents: 'none' }),
+            '&:focus::before': {
+                borderColor: focusColor,
+            },
+            '&:focus:not(:focus-visible)::before': {
+                borderColor: 'transparent',
+            },
+        },
         trigger: {
             position: 'absolute',
             top: 0,
@@ -7363,68 +7326,50 @@ const getComponentCss$r = (gradientColorScheme, isNextHidden, isPrevHidden, scro
                 right: 0,
             },
         },
-        'action-prev': Object.assign(Object.assign({}, actionPrevNextStyles), { marginLeft: '-1px', gridArea: '1 / 1 / 1 / 1', justifyContent: 'flex-start', background: `linear-gradient(90deg, ${gradientColor} 50%, ${gradientColorTransparent} 100%)`, visibility: isPrevHidden ? 'hidden' : 'visible', '& .button::before': {
-                left: 0,
-            } }),
-        'action-next': Object.assign(Object.assign({}, actionPrevNextStyles), { marginRight: '-1px', gridArea: '1 / 3 / 1 / 3', justifyContent: 'flex-end', background: `linear-gradient(90deg, ${gradientColorTransparent} 0%, ${gradientColor} 50%)`, visibility: isNextHidden ? 'hidden' : 'visible', '& .button::before': {
-                right: 0,
-            } }),
-        button: {
-            pointerEvents: 'auto',
-            position: 'static',
-            // Pseudo-element to stretch the click-area to full height
-            '&::before': {
-                content: '""',
-                position: 'absolute',
-                top: 0,
-                bottom: 0,
-                width: 'max(2rem, 80%)',
-            },
-        },
+        'action-prev': Object.assign(Object.assign({}, actionPrevNextStyles), { marginLeft: '-1px', gridArea: '1 / 1 / 1 / 1', justifyContent: 'flex-start', background: `linear-gradient(to right, ${getGradient(theme, gradientColorTheme)} 100%)`, visibility: isPrevHidden ? 'hidden' : 'visible', '& button': Object.assign({ marginLeft: '8px' }, hoverMediaQuery({
+                visibility: isPrevHidden ? 'hidden' : 'visible',
+            })) }),
+        'action-next': Object.assign(Object.assign({}, actionPrevNextStyles), { marginRight: '-1px', gridArea: '1 / 3 / 1 / 3', justifyContent: 'flex-end', background: `linear-gradient(to left, ${getGradient(theme, gradientColorTheme)} 100%)`, visibility: isNextHidden ? 'hidden' : 'visible', '& button': Object.assign({ marginRight: '8px' }, hoverMediaQuery({
+                visibility: isNextHidden ? 'hidden' : 'visible',
+            })) }),
     });
 };
 
-const ITEM_PADDING = pxToRemWithUnit(16);
+const ITEM_PADDING = '17px';
 const ICON_SIZE = pxToRemWithUnit(24);
 const ICON_MARGIN = pxToRemWithUnit(4);
-const getColors$3 = (isDisabled, isSelected, bgColor, theme) => {
-    const themedColors = getThemedColors(theme);
-    const { baseColor, contrastMediumColor } = isSelected ? getInvertedThemedColors(theme) : themedColors;
-    const backgroundColor = themedColors[isSelected ? 'contrastHighColor' : bgColor === 'background-surface' ? 'backgroundColor' : 'backgroundSurfaceColor'];
-    return isDisabled
-        ? {
-            backgroundColor,
-            buttonColor: themedColors.disabledColor,
-            labelColor: themedColors.disabledColor,
-        }
-        : {
-            backgroundColor,
-            buttonColor: baseColor,
-            labelColor: contrastMediumColor,
-        };
+const getColors$3 = (isDisabled, isSelected, theme) => {
+    const { primaryColor, contrastMediumColor, disabledColor, contrastLowColor } = getThemedColors(theme);
+    return {
+        buttonColor: isDisabled ? disabledColor : primaryColor,
+        labelColor: isDisabled ? disabledColor : contrastMediumColor,
+        borderColor: isSelected ? primaryColor : contrastLowColor,
+        hoverBorderColor: primaryColor,
+    };
 };
-const getComponentCss$q = (isDisabled, isSelected, bgColor, theme) => {
-    const { baseColor, contrastLowColor } = getThemedColors(theme);
-    const { backgroundColor, buttonColor, labelColor } = getColors$3(isDisabled, isSelected, bgColor, theme);
+const getComponentCss$q = (isDisabled, isSelected, hasIcon, theme) => {
+    const { focusColor } = getThemedColors(theme);
+    const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$3(isDisabled, isSelected, theme);
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
-                display: 'block',
-                outline: 0,
-            }),
-            button: Object.assign(Object.assign(Object.assign({ display: 'block', height: '100%', width: '100%', padding: `${pxToRemWithUnit(12)} ${ITEM_PADDING}`, margin: 0, border: 0, background: backgroundColor, color: buttonColor }, textSmall), getFocusJssStyle({ color: baseColor })), (isDisabled
+            ':host': addImportantToEachRule(Object.assign({ display: 'block', outline: 0 }, hostHiddenStyles)),
+            button: Object.assign(Object.assign(Object.assign({ display: 'block', height: '100%', width: '100%', padding: hasIcon ? `13px ${ITEM_PADDING} 13px 13px` : `13px ${ITEM_PADDING}`, margin: 0, border: `${borderWidthBase} solid ${borderColor}`, borderRadius: borderRadiusSmall, outline: 0, background: 'transparent', color: buttonColor }, textSmallStyle), { overflowWrap: 'normal', position: 'relative', '&::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-5)), { border: `${borderWidthBase} solid transparent`, borderRadius: '7px' }), '&:focus::before': {
+                    borderColor: focusColor,
+                }, '&:focus:not(:focus-visible)::before': {
+                    borderColor: 'transparent',
+                } }), (isDisabled
                 ? {
                     cursor: 'not-allowed',
                 }
                 : Object.assign({ cursor: 'pointer' }, (!isSelected &&
                     hoverMediaQuery({
-                        transition: getTransition('background-color'),
+                        transition: getTransition('border-color'),
                         '&:hover': {
-                            background: contrastLowColor,
+                            borderColor: hoverBorderColor,
                         },
                     }))))),
             // label
-            span: Object.assign(Object.assign({ display: 'block' }, textXSmall), { color: labelColor }),
+            span: Object.assign(Object.assign({ display: 'block' }, textXSmallStyle), { overflowWrap: 'normal', color: labelColor }),
         },
         icon: {
             height: ICON_SIZE,
@@ -7440,192 +7385,162 @@ const getComponentCss$p = (maxWidth) => {
     maxWidth = (maxWidth > MAX_ITEM_WIDTH && MAX_ITEM_WIDTH) || (maxWidth < MIN_ITEM_WIDTH && MIN_ITEM_WIDTH) || maxWidth;
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
-                display: 'grid',
-                gridAutoRows: '1fr',
-                gridTemplateColumns: `repeat(auto-fit, ${maxWidth}px)`,
-                gridGap: '4px',
-            }),
+            ':host': addImportantToEachRule(Object.assign({ display: 'grid', gridAutoRows: '1fr', gridTemplateColumns: `repeat(auto-fit, ${maxWidth}px)`, gap: '6px' }, hostHiddenStyles)),
         },
     });
 };
-
-const { disabledColor: lightThemeDisabledColor } = getThemedColors('light');
-const INPUT_HEIGHT = 48;
 const getBaseChildStyles = (child, state, theme, additionalDefaultJssStyle) => {
-    const { baseColor, backgroundColor, contrastHighColor, contrastMediumColor } = getThemedColors(theme);
+    const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const hasVisibleState = isVisibleFormState(state);
-    // TODO: Add readonly color to utilities package
-    const readonly = '#ebebeb'; // 🤷
-    return Object.assign(Object.assign(Object.assign({ [`::slotted(${child})`]: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block', position: 'relative' }, getInsetJssStyle()), { width: '100%' }), (child !== 'textarea' && { height: pxToRemWithUnit(INPUT_HEIGHT) })), { margin: 0, outline: '1px solid transparent', outlineOffset: '2px', WebkitAppearance: 'none', appearance: 'none', boxSizing: 'border-box', border: hasVisibleState ? `2px solid ${formStateColor}` : `1px solid ${contrastMediumColor}`, borderRadius: 0, backgroundColor, opacity: 1 }), textSmall), { overflowWrap: null, hyphens: null, textIndent: 0, color: baseColor, transition: ['color', 'border-color', 'background-color'].map(getTransition).join() }), additionalDefaultJssStyle) }, hoverMediaQuery({
+    return Object.assign(Object.assign(Object.assign({ [`::slotted(${child})`]: Object.assign({ display: 'block', width: '100%', height: 'auto', margin: 0, outline: 0, WebkitAppearance: 'none', appearance: 'none', boxSizing: 'border-box', border: `${borderWidthBase} solid ${formStateColor || contrastMediumColor}`, borderRadius: borderRadiusSmall, background: 'transparent', font: textSmallStyle.font.replace('ex', 'ex + 10px'), textIndent: 0, color: primaryColor, transition: ['color', 'border-color', 'background-color'].map(getTransition).join() }, additionalDefaultJssStyle) }, hoverMediaQuery({
         // with the media query the selector has higher priority and overrides disabled styles
-        [`::slotted(${child}:not(:disabled):not([readonly]):hover)`]: {
-            borderColor: formStateHoverColor || (isThemeDark(theme) ? contrastHighColor : baseColor),
+        [`::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)`]: {
+            borderColor: formStateHoverColor || primaryColor,
         },
     })), { [`::slotted(${child}:focus)`]: {
-            outlineColor: formStateColor || contrastMediumColor,
+            borderColor: primaryColor,
         }, [`::slotted(${child}:disabled)`]: {
             cursor: 'not-allowed',
-            color: lightThemeDisabledColor,
-            borderColor: lightThemeDisabledColor,
-            WebkitTextFillColor: lightThemeDisabledColor, // 🤷 no theming here; fix placeholder color bug in Safari
+            color: disabledColor,
+            borderColor: disabledColor,
+            WebkitTextFillColor: disabledColor,
         } }), (child !== 'select' && {
         [`::slotted(${child}[readonly])`]: {
-            borderColor: readonly,
-            backgroundColor: readonly,
-        },
-        [`::slotted(${child}[readonly]:focus)`]: {
-            outlineColor: 'transparent',
-        },
-        [`::slotted(${child}[readonly]:not(:disabled))`]: {
-            color: contrastMediumColor,
+            borderColor: contrastLowColor,
+            background: contrastLowColor,
         },
     }));
 };
 const getLabelStyles = (child, isDisabled, hideLabel, state, theme, counterOrUnitOrIconStyles) => {
-    const { baseColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor, disabledColor, contrastHighColor } = getThemedColors(theme);
     const { formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const hasVisibleState = isVisibleFormState(state);
-    // jss prefers flat and simple selectors, therefore we reuse properties
-    const labelTextHoverJssStyle = hoverMediaQuery({
-        '&:hover': {
-            [`&~::slotted(${child}:not(:disabled):not([readonly]))` +
-                (hasVisibleState ? `,::slotted(${child}:not(:disabled):not([readonly]):hover)` : '')]: {
-                borderColor: addImportantToRule(hasVisibleState ? formStateHoverColor : baseColor),
-            },
-        },
-    });
     const counterOrUnitOrIconStylesKey = counterOrUnitOrIconStyles && Object.keys(counterOrUnitOrIconStyles)[0];
     return Object.assign({ label: {
-            display: 'block',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: spacingStaticXSmall,
             position: 'relative',
-            '&__text': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(hideLabel, getFormTextHiddenJssStyle)), textSmall), { color: isDisabled ? disabledColor : baseColor, transition: getTransition('color'), '&+&--description': Object.assign({ marginTop: pxToRemWithUnit(-4), paddingBottom: pxToRemWithUnit(8) }, textXSmall) }), (!isDisabled && {
-                '&--description': {
-                    color: contrastMediumColor,
+            '&__text': Object.assign(Object.assign(Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(hideLabel, getFormTextHiddenJssStyle)), textSmallStyle), { color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color'), '&+&': Object.assign({ marginTop: `-${spacingStaticXSmall}`, fontSize: fontSizeTextXSmall }, (!isDisabled && {
+                    color: contrastHighColor,
+                })) }), hoverMediaQuery({
+                '&:hover': {
+                    [`&~::slotted(${child}:not(:disabled):not(:focus):not([readonly]))` +
+                        (formStateHoverColor ? `,::slotted(${child}:not(:disabled):not(:focus):not([readonly]):hover)` : '')]: {
+                        borderColor: addImportantToRule(formStateHoverColor || primaryColor),
+                    },
                 },
-            })), labelTextHoverJssStyle),
+            })),
         } }, (counterOrUnitOrIconStyles && {
-        [counterOrUnitOrIconStylesKey]: Object.assign(Object.assign(Object.assign({}, counterOrUnitOrIconStyles[counterOrUnitOrIconStylesKey]), (isDisabled && {
+        [counterOrUnitOrIconStylesKey]: Object.assign(Object.assign(Object.assign({}, counterOrUnitOrIconStyles[counterOrUnitOrIconStylesKey]), { pointerEvents: 'none' }), (isDisabled && {
             color: disabledColor,
             cursor: 'not-allowed',
-        })), labelTextHoverJssStyle),
+        })),
     }));
 };
-
-const { baseColor: themeLightBaseColor$1 } = getThemedColors('light');
+const ICON_SPACE = `${24 + 13 * 2 + 2}px`; // 24px = icon width, 13px * 2 = padding, 2px = border
 const getComponentCss$o = (isDisabled, hideLabel, state, theme) => {
-    const isDarkTheme = isThemeDark(theme);
-    const { baseColor, backgroundColor } = getThemedColors(theme);
-    const defaultPadding = pxToRemWithUnit(isVisibleFormState(state) ? 10 : 11);
-    return getCss(Object.assign(Object.assign(Object.assign({ '@global': Object.assign({ ':host': {
-                display: 'block',
-            } }, addImportantToEachRule(mergeDeep(getBaseChildStyles('select', 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,
             cursor: 'pointer',
-            padding: [defaultPadding, pxToRemWithUnit(47), defaultPadding, defaultPadding].join(' '),
-            '&@-moz-document url-prefix()': {
-                // fix for 3px text-indention in FF
-                paddingLeft: pxToRemWithUnit(8),
-            },
-        }), {
-            '::slotted(select:disabled)': {
-                background: isDarkTheme ? themeLightBaseColor$1 : backgroundColor, // 🤷
-            },
+            padding: `8px ${ICON_SPACE} 8px ${spacingStaticMedium}`,
         }))), root: {
             display: 'block',
             position: 'relative',
         } }, getLabelStyles('select', isDisabled, hideLabel, state, theme, {
         icon: {
             position: 'absolute',
-            bottom: pxToRemWithUnit(12),
-            right: pxToRemWithUnit(12),
-            color: baseColor,
-            pointerEvents: 'none',
+            bottom: '13px',
+            right: '15px',
             transform: 'rotate3d(0,0,1,0.0001deg)',
             transition: getTransition('transform'),
             '&--open': {
                 transform: 'rotate3d(0,0,1,180deg)',
             },
         },
-    })), getFunctionalComponentRequiredStyles(theme)), getFunctionalComponentStateMessageStyles(theme, state)));
+    })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)));
 };
 
-const sizeSmall = pxToRemWithUnit(48);
-const sizeMedium = pxToRemWithUnit(72);
-const sizeLarge = pxToRemWithUnit(104);
-const sizeMap = {
+const sizeSmall = '48px';
+const sizeMedium = '72px';
+const sizeLarge = '104px';
+const sizeMap$1 = {
     small: { height: sizeSmall, width: sizeSmall },
     medium: { height: sizeMedium, width: sizeMedium },
     large: { height: sizeLarge, width: sizeLarge },
     inherit: { height: 'inherit', width: 'inherit' },
 };
 const getComponentCss$m = (size, theme) => {
-    const { contrastHighColor, baseColor } = getThemedColors(theme);
-    const animationDuration = 'var(--p-animation-duration__spinner, 2s)';
+    const strokeDasharray = '57'; // C = 2πR
+    const animationDuration = 'var(--p-animation-duration, 2s)';
+    const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': {
-                display: 'inline-flex',
-                verticalAlign: 'top',
-            },
+            ':host': addImportantToEachRule(Object.assign({ display: 'inline-flex', verticalAlign: 'top' }, hostHiddenStyles)),
             svg: {
                 display: 'block',
                 position: 'relative',
                 fill: 'none',
                 transform: 'translate3d(0,0,0)',
+                animation: `$rotate ${animationDuration} linear infinite`,
             },
             circle: {
-                stroke: isThemeDark(theme) || isThemeDarkElectric(theme) ? baseColor : contrastHighColor,
                 '&:first-child': {
-                    opacity: 0.4,
+                    stroke: contrastMediumColor,
+                    animation: `$rotate ${animationDuration} linear infinite`, // needs to rotate to eliminate stutter in safari
                 },
                 '&:last-child': {
                     transformOrigin: '0 0',
-                    animation: `$rotate ${animationDuration} linear infinite,$dash ${animationDuration} ease-in-out infinite`,
-                    strokeDasharray: '40, 200',
-                    strokeDashoffset: 0,
+                    animation: `$dash ${animationDuration} ease-in-out infinite`,
+                    stroke: primaryColor,
+                    strokeDasharray: strokeDasharray
+                        ,
                     strokeLinecap: 'round',
                 },
             },
             '@keyframes rotate': {
+                '0%': {
+                    transform: 'rotateZ(0deg)',
+                },
                 '100%': {
-                    transform: 'rotate(360deg)',
+                    transform: 'rotateZ(360deg)',
                 },
             },
             '@keyframes dash': {
                 '0%': {
-                    strokeDasharray: '3, 1000',
+                    strokeDashoffset: 57,
+                    transform: 'rotateZ(0)',
                 },
-                '50%': {
-                    strokeDasharray: '42, 1000',
+                '50%, 75%': {
+                    strokeDashoffset: 20,
+                    transform: 'rotateZ(80deg)',
                 },
                 '100%': {
-                    strokeDasharray: '30, 1000',
-                    strokeDashoffset: '-52',
+                    strokeDashoffset: 57,
+                    transform: 'rotateZ(360deg)',
                 },
             },
         },
-        root: Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(size, (s) => sizeMap[s])), { margin: 0, padding: 0, boxSizing: 'border-box', strokeWidth: 1 }),
+        root: Object.assign(Object.assign({ display: 'block' }, buildResponsiveStyles(size, (s) => sizeMap$1[s])), { margin: 0, padding: 0, boxSizing: 'border-box', strokeWidth: 1.5 }),
         'sr-only': getScreenReaderOnlyJssStyle(),
     });
 };
 
 // source for svg can be found in sprite.sketch file
-// svg is created via Sketch export, then run trough ImageOptim and optimized via icons package
+// svg is created via Sketch export, then run through ImageOptim and optimized via icons package
 const getSvg = (color) => `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" fill="${color}" width="90" height="10" viewBox="0 0 90 10"><path d="M5.524 9h.996V.456h-.828L3.16 1.464v.912l2.364-.888zm7.006 0h5.017v-.792H13.49v-.156c0-.804.396-1.224 1.476-1.956l.924-.612c.84-.552 1.74-1.236 1.74-2.724 0-1.548-.84-2.448-2.652-2.448-1.908 0-2.604 1.056-2.664 2.832h.936c.096-1.452.624-1.92 1.728-1.92 1.056 0 1.656.444 1.656 1.536 0 1.164-.768 1.68-1.524 2.184l-.924.612c-.948.636-1.656 1.332-1.656 2.652zm9.689-2.592c.084 1.86.9 2.736 2.808 2.736 1.788 0 2.736-.924 2.736-2.424 0-1.236-.504-1.86-1.32-2.136.756-.348 1.128-1.08 1.128-1.848 0-1.524-.852-2.424-2.664-2.424-1.872 0-2.592 1.092-2.688 2.832h.948c.096-1.44.672-1.92 1.74-1.92 1.056 0 1.68.456 1.68 1.512 0 .948-.528 1.488-1.62 1.488h-.804V5.1h.864c1.26 0 1.752.564 1.752 1.62 0 1.152-.588 1.632-1.752 1.632-1.26 0-1.776-.552-1.872-1.944zm9.736.624h3.876V9h.96V7.032h1.212v-.84H36.79V.456h-1.392l-3.444 5.832zm1.044-.84 2.832-4.848v4.848zm9.411-.648h.889c.204-.732.66-1.14 1.704-1.14 1.332 0 1.8.636 1.8 1.944 0 1.344-.444 2.004-1.8 2.004-1.236 0-1.728-.552-1.788-1.656h-.948c.072 1.632.984 2.448 2.736 2.448 1.776 0 2.784-.828 2.784-2.832 0-1.86-.876-2.736-2.688-2.736-.768 0-1.368.24-1.74.66l.252-2.868h3.792V.456h-4.584L42.41 5.16zm9.809.768c0 2.004.984 2.832 2.796 2.832 1.776 0 2.784-.828 2.784-2.832 0-1.86-.9-2.736-2.688-2.736-.396 0-.744.072-1.068.228L56.25.456h-1.068l-2.16 3.312c-.516.792-.804 1.488-.804 2.544zm.996.048c0-1.332.468-1.956 1.8-1.956s1.788.624 1.788 1.956-.444 1.992-1.788 1.992c-1.356 0-1.8-.66-1.8-1.992zm9.075-4.992h4.369L63.215 9h1.02l3.48-7.824v-.72H62.29zm9.929 5.352c0 1.68.96 2.424 2.784 2.424s2.784-.744 2.784-2.424c0-1.008-.408-1.716-1.308-2.052.66-.324 1.116-.9 1.116-1.956 0-1.488-.804-2.4-2.592-2.4-1.764 0-2.592.912-2.592 2.4 0 1.056.468 1.632 1.104 1.956-.9.336-1.296 1.044-1.296 2.052zm.984-.012c0-1.068.564-1.572 1.8-1.572s1.8.504 1.8 1.572c0 1.152-.564 1.644-1.8 1.644s-1.8-.492-1.8-1.644zm1.8-2.4c-1.164 0-1.608-.588-1.608-1.56 0-1.068.54-1.524 1.608-1.524s1.608.456 1.608 1.524c0 .972-.444 1.56-1.608 1.56zm9.904 1.608c.348 0 .684-.06.984-.192L83.767 9h1.068l2.124-3.348c.504-.792.792-1.488.792-2.568 0-1.98-.996-2.772-2.748-2.772-1.764 0-2.76.804-2.76 2.784 0 1.86.888 2.82 2.664 2.82zm.096-.828c-1.284 0-1.764-.66-1.764-1.992 0-1.2.444-1.872 1.764-1.872 1.308 0 1.764.672 1.764 1.872 0 1.332-.48 1.992-1.764 1.992z"/></svg>`)}")`;
 const getColors$2 = (state, theme) => {
-    const { baseColor, hoverColor, warningColor, successColor, disabledColor } = getThemedColors(theme);
+    const { primaryColor, hoverColor, warningColor, successColor, disabledColor } = getThemedColors(theme);
     const stateToColorMap = {
         current: 'inherit',
         complete: successColor,
         warning: warningColor,
     };
     return {
-        baseColor,
+        primaryColor,
         hoverColor,
         iconColor: stateToColorMap[state],
-        invertedBaseColor: getInvertedThemedColors(theme).baseColor,
+        invertedBaseColor: getInvertedThemedColors(theme).primaryColor,
         disabledColor,
     };
 };
@@ -7640,17 +7555,17 @@ const counterCircleSize = `calc(${fontLineHeight} - ${counterCirclePosition} * 2
 const counterValuePosition = `calc((${fontLineHeight} - ${spriteStepSize}em) / 2)`;
 const counterValueSize = spriteHeight;
 const getComponentCss$l = (state, disabled, theme) => {
-    const { baseColor, hoverColor, iconColor, invertedBaseColor, disabledColor } = getColors$2(state, theme);
+    const { primaryColor, hoverColor, iconColor, invertedBaseColor, disabledColor } = getColors$2(state, theme);
     const isStateCurrentOrUndefined = !state || state === 'current';
     const isDisabled = !state || disabled;
     return getCss(Object.assign(Object.assign({ '@global': {
             ':host': Object.assign(Object.assign({}, (isStateCurrentOrUndefined &&
                 Array.from(Array(9)).reduce((result, _, i) => (Object.assign(Object.assign({}, result), { [`&(:nth-of-type(${i + 1})) $button::after`]: {
                         backgroundPositionX: `${-i * spriteStepSize}em`,
-                    } })), {}))), { fontSize: addImportantToRule('inherit'), '&(:not(:last-of-type))': {
-                    marginRight: addImportantToRule('1em'),
-                } }),
-            button: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative', color: isDisabled ? disabledColor : baseColor, transition: getTransition('color'), margin: 0, padding: `0 0 0 calc(${fontLineHeight} + ${pxToRemWithUnit(4)})`, background: 0, border: 0 }, textSmall), { fontSize: 'inherit', whiteSpace: 'nowrap' }), getFocusJssStyle()), (isStateCurrentOrUndefined
+                    } })), {}))), addImportantToEachRule(Object.assign(Object.assign({ fontSize: 'inherit' }, hostHiddenStyles), { '&(:not(:last-of-type))': {
+                    marginRight: '1em',
+                } }))),
+            button: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative', color: isDisabled ? disabledColor : primaryColor, transition: getTransition('color'), margin: 0, padding: `0 0 0 calc(${fontLineHeight} + ${pxToRemWithUnit(4)})`, background: 0, border: 0 }, textSmallStyle), { fontSize: 'inherit', whiteSpace: 'nowrap' }), getFocusJssStyle()), (isStateCurrentOrUndefined
                 ? // counter circle icon via css
                     {
                         cursor: isDisabled ? 'not-allowed' : 'auto',
@@ -7663,7 +7578,7 @@ const getComponentCss$l = (state, disabled, theme) => {
                                 border: `1px solid ${disabledColor}`,
                             }
                             : {
-                                background: baseColor,
+                                background: primaryColor,
                             })),
                         '&::after': {
                             // value of counter element
@@ -7702,111 +7617,86 @@ const getComponentCss$l = (state, disabled, theme) => {
 const getComponentCss$k = (size) => {
     return getCss({
         '@global': {
-            ':host': {
-                display: 'block',
-            },
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
         },
-        scroller: Object.assign(Object.assign({ display: 'flex' }, textSmall), buildResponsiveStyles(size, (s) => fontSize[s])),
+        scroller: Object.assign(Object.assign({ display: 'flex' }, textSmallStyle), buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] }))),
     });
 };
 
-const { small: spacingSmall$1 } = spacing;
-const getColors$1 = (checked, isDisabledOrLoading, theme) => {
-    const { backgroundColor, baseColor, contrastHighColor, successColor, successColorDarken, hoverColorDarken, disabledColor, brandColor, } = getThemedColors(theme);
+const getColors$1 = (checked, disabled, loading, theme) => {
+    const { primaryColor, contrastMediumColor, successColor, successColorDarken, disabledColor } = getThemedColors(theme);
     const { backgroundColor: lightThemeBackgroundColor } = getThemedColors('light');
-    const isLightElectricTheme = isThemeLightElectric(theme);
-    const checkedColor = isLightElectricTheme ? brandColor : successColor;
-    const disabledOrLoadingColor = isDisabledOrLoading && disabledColor;
+    const checkedColor = successColor;
+    const disabledOrLoadingColor = isDisabledOrLoading(disabled, loading) && disabledColor;
     return {
-        backgroundColor,
-        buttonBorderColor: disabledOrLoadingColor || (checked ? checkedColor : contrastHighColor),
-        buttonBorderColorHover: checked ? (isLightElectricTheme ? hoverColorDarken : successColorDarken) : baseColor,
+        buttonBorderColor: disabledOrLoadingColor || (checked ? checkedColor : contrastMediumColor),
+        buttonBorderColorHover: checked ? successColorDarken : primaryColor,
         buttonBackgroundColor: checked ? disabledOrLoadingColor || checkedColor : 'transparent',
-        buttonBackgroundColorHover: checked
-            ? isLightElectricTheme
-                ? hoverColorDarken
-                : successColorDarken
-            : 'transparent',
-        toggleBackgroundColor: (!checked && disabledOrLoadingColor) || (checked ? lightThemeBackgroundColor : contrastHighColor),
-        toggleBackgroundColorHover: checked ? lightThemeBackgroundColor : baseColor,
-        textColor: disabledOrLoadingColor || baseColor,
-    };
-};
-const getAlignLabelJssStyle = (alignLabel) => {
-    const styles = {
-        left: {
-            order: 0,
-            paddingLeft: 0,
-            paddingRight: spacingSmall$1,
-        },
-        right: {
-            order: 1,
-            paddingLeft: spacingSmall$1,
-            paddingRight: 0,
-        },
+        buttonBackgroundColorHover: checked ? successColorDarken : 'transparent',
+        toggleBackgroundColor: (loading && 'transparent') ||
+            (disabled && !checked && disabledColor) ||
+            (checked ? lightThemeBackgroundColor : primaryColor),
+        toggleBackgroundColorHover: checked ? lightThemeBackgroundColor : primaryColor,
+        textColor: disabledOrLoadingColor || primaryColor,
     };
-    return styles[alignLabel];
-};
-const getStretchJssStyle = (stretch) => {
-    return stretch
-        ? {
-            width: '100%',
-            justifyContent: 'space-between',
-        }
-        : {
-            width: 'auto',
-            justifyContent: 'flex-start',
-        };
 };
-const getComponentCss$j = (alignLabel, hideLabel, stretch, checked, loading, isDisabledOrLoading, theme) => {
-    const { backgroundColor, buttonBorderColor, buttonBorderColorHover, buttonBackgroundColor, buttonBackgroundColorHover, toggleBackgroundColor, toggleBackgroundColorHover, textColor, } = getColors$1(checked, isDisabledOrLoading, theme);
-    return getCss(Object.assign({ '@global': {
-            ':host': addImportantToEachRule({
-                display: 'flex',
-                outline: 0,
-            }),
-            button: Object.assign(Object.assign({ position: 'relative', width: pxToRemWithUnit(48), height: pxToRemWithUnit(24), flexShrink: 0, display: 'block', margin: 0, padding: 0, appearance: 'none', boxSizing: 'border-box', color: buttonBorderColor, border: '1px solid currentColor', borderRadius: pxToRemWithUnit(12), backgroundColor: buttonBackgroundColor, outline: 'none', cursor: isDisabledOrLoading ? 'not-allowed' : 'pointer', transition: `${getTransition('background-color')},${getTransition('border-color')},${getTransition('color')}` }, (!isDisabledOrLoading &&
-                hoverMediaQuery({
-                    '&:hover': {
-                        color: buttonBorderColorHover,
-                        backgroundColor: buttonBackgroundColorHover,
-                        '& .toggle': {
-                            backgroundColor: toggleBackgroundColorHover,
-                        },
+const getComponentCss$j = (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': {
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ outline: 0 }, hostHiddenStyles), buildResponsiveStyles(stretch, (stretchValue) => (Object.assign({ display: stretchValue ? 'block' : 'inline-block' }, (!stretchValue && { verticalAlign: 'top' })))))),
+        }, root: Object.assign(Object.assign(Object.assign({ display: 'flex', alignItems: 'flex-start', gap: spacingStaticSmall, width: '100%', padding: 0, outline: 0, border: 0, textAlign: 'left', background: 'transparent', appearance: 'none', cursor: isDisabledOrLoading(disabled, loading) ? 'auto' : 'pointer' }, buildResponsiveStyles(stretch, (stretchValue) => ({
+            justifyContent: stretchValue ? 'space-between' : 'flex-start',
+        }))), (!isDisabledOrLoading(disabled, loading) &&
+            hoverMediaQuery({
+                '&:hover .switch': {
+                    borderColor: buttonBorderColorHover,
+                    backgroundColor: buttonBackgroundColorHover,
+                    '& .toggle': {
+                        backgroundColor: toggleBackgroundColorHover,
                     },
-                }))), { '&:focus': {
-                    boxShadow: `0 0 0 2px ${backgroundColor}, 0 0 0 3px currentColor`,
-                }, '&:not(:focus-visible)': {
-                    boxShadow: 'none',
-                } }),
-        }, root: Object.assign({ display: 'flex', minWidth: 0, minHeight: 0, cursor: isDisabledOrLoading ? 'auto' : 'pointer' }, buildResponsiveStyles(stretch, getStretchJssStyle)), text: Object.assign(Object.assign(Object.assign({}, textSmall), { minWidth: 0, minHeight: 0, color: textColor }), mergeDeep(buildResponsiveStyles(alignLabel, getAlignLabelJssStyle), buildResponsiveStyles(hideLabel, getTextHiddenJssStyle))), toggle: {
+                },
+            }))), { '&:focus .switch::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-6)), { border: `${borderWidthBase} solid ${focusColor}`, borderRadius: '18px' }), '&:not(:focus-visible) .switch::before': {
+                borderColor: 'transparent',
+            } }), switch: {
+            position: 'relative',
+            width: '48px',
+            height: '28px',
+            flexShrink: 0,
+            boxSizing: 'border-box',
+            border: `${borderWidthBase} solid ${buttonBorderColor}`,
+            borderRadius: '14px',
+            backgroundColor: buttonBackgroundColor,
+            cursor: isDisabledOrLoading(disabled, loading) ? 'not-allowed' : 'pointer',
+            transition: `${getTransition('background-color')},${getTransition('border-color')},${getTransition('color')}`,
+        }, toggle: {
             position: 'absolute',
-            top: pxToRemWithUnit(2),
-            left: pxToRemWithUnit(2),
-            width: pxToRemWithUnit(18),
-            height: pxToRemWithUnit(18),
+            top: '2px',
+            left: '2px',
+            width: '20px',
+            height: '20px',
             display: 'block',
             borderRadius: '50%',
             backgroundColor: toggleBackgroundColor,
-            transform: `translate3d(${checked ? pxToRemWithUnit(24) : '0'}, 0, 0)`,
+            transform: `translate3d(${checked ? '20px' : '0'}, 0, 0)`,
             transition: `${getTransition('background-color')},${getTransition('transform')}`,
         } }, (loading && {
         spinner: {
             position: 'absolute',
-            top: pxToRemWithUnit(-3),
-            left: pxToRemWithUnit(-3),
-            width: pxToRemWithUnit(24),
-            height: pxToRemWithUnit(24),
+            top: '-4px',
+            left: '-4px',
+            width: '28px',
+            height: '28px',
         },
-    })));
+    })), { label: Object.assign(Object.assign(Object.assign({}, textSmallStyle), { paddingTop: '2px', minWidth: 0, minHeight: 0, color: textColor }), mergeDeep(buildResponsiveStyles(alignLabel, (alignLabelValue) => ({
+            order: alignLabelValue === 'left' ? -1 : 0,
+        })), buildResponsiveStyles(hideLabel, getTextHiddenJssStyle))) }));
 };
 
 const getComponentCss$i = () => {
     return getCss({
         '@global': {
-            ':host': {
-                display: addImportantToRule('table-row-group'),
-            },
+            ':host': addImportantToEachRule(Object.assign({ display: 'table-row-group' }, hostHiddenStyles)),
         },
     });
 };
@@ -7814,13 +7704,7 @@ const getComponentCss$i = () => {
 const getComponentCss$h = (multiline) => {
     return getCss({
         '@global': {
-            ':host': Object.assign(Object.assign({}, addImportantToEachRule({
-                display: 'table-cell',
-                padding: pxToRemWithUnit(12),
-                margin: 0,
-                borderBottom: `1px solid ${getThemedColors('light').contrastLowColor}`,
-                whiteSpace: multiline ? 'normal' : 'nowrap',
-            })), { verticalAlign: 'middle' }),
+            ':host': Object.assign(Object.assign({}, addImportantToEachRule(Object.assign({ display: 'table-cell', padding: pxToRemWithUnit(12), margin: 0, borderBottom: `1px solid ${getThemedColors('light').contrastLowColor}`, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles))), { verticalAlign: 'middle' }),
         },
     });
 };
@@ -7830,20 +7714,13 @@ const isSortable = (active, direction) => {
     return active !== undefined && direction !== undefined;
 };
 
-const { contrastMediumColor, baseColor: baseColor$1 } = getThemedColors('light');
+const { contrastMediumColor, primaryColor: primaryColor$1 } = getThemedColors('light');
 const { semiBold: fontWeightSemiBold } = fontWeight;
 const getComponentCss$g = (active, direction, hideLabel, multiline) => {
     const sortable = isSortable(active, direction);
-    return getCss(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule({
-                display: 'table-cell',
-                padding: `${pxToRemWithUnit(2)} ${pxToRemWithUnit(12)} ${pxToRemWithUnit(8)}`,
-                borderBottom: `1px solid ${contrastMediumColor}`,
-                verticalAlign: 'bottom',
-                fontWeight: fontWeightSemiBold,
-                whiteSpace: multiline ? 'normal' : 'nowrap',
-            }) }, (sortable
+    return getCss(Object.assign({ '@global': Object.assign({ ':host': addImportantToEachRule(Object.assign({ display: 'table-cell', padding: `${pxToRemWithUnit(2)} ${pxToRemWithUnit(12)} ${pxToRemWithUnit(8)}`, borderBottom: `1px solid ${contrastMediumColor}`, verticalAlign: 'bottom', fontWeight: fontWeightSemiBold, whiteSpace: multiline ? 'normal' : 'nowrap' }, hostHiddenStyles)) }, (sortable
             ? {
-                button: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', alignItems: 'flex-end', padding: 0, boxSizing: 'border-box', appearance: 'none', border: 'none' }, textSmall), { fontWeight: fontWeightSemiBold, color: baseColor$1, textDecoration: 'none', textAlign: 'left', background: 'transparent', cursor: 'pointer' }), getFocusJssStyle({ offset: 1 })), hoverMediaQuery(Object.assign(Object.assign({}, getHoverJssStyle()), { '&:hover, &:focus': {
+                button: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', alignItems: 'flex-end', padding: 0, boxSizing: 'border-box', appearance: 'none', border: 'none' }, textSmallStyle), { fontWeight: fontWeightSemiBold, color: primaryColor$1, textDecoration: 'none', textAlign: 'left', background: 'transparent', cursor: 'pointer' }), getFocusJssStyle({ offset: 1 })), hoverMediaQuery(Object.assign(Object.assign({}, getHoverJssStyle()), { '&:hover, &:focus': {
                         '& .icon': {
                             opacity: 1,
                         },
@@ -7853,7 +7730,7 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
                 span: Object.assign(Object.assign({}, getTextHiddenJssStyle(true)), { display: 'block', border: 0 }),
             })) }, (sortable && {
         icon: {
-            marginLeft: spacing.xSmall,
+            marginLeft: spacingStaticXSmall,
             opacity: active ? 1 : 0,
             transform: `rotate3d(0,0,1,${isDirectionAsc(direction) ? 0 : 180}deg)`,
             transformOrigin: '50% 50%', // for iOS
@@ -7864,9 +7741,7 @@ const getComponentCss$g = (active, direction, hideLabel, multiline) => {
 const getComponentCss$f = () => {
     return getCss({
         '@global': {
-            ':host': {
-                display: addImportantToRule('table-row'),
-            },
+            ':host': addImportantToEachRule(Object.assign({ display: 'table-row' }, hostHiddenStyles)),
         },
     });
 };
@@ -7874,9 +7749,7 @@ const getComponentCss$f = () => {
 const getComponentCss$e = () => {
     return getCss({
         '@global': {
-            ':host': {
-                display: addImportantToRule('table-header-group'),
-            },
+            ':host': addImportantToEachRule(Object.assign({ display: 'table-header-group' }, hostHiddenStyles)),
         },
     });
 };
@@ -7884,7 +7757,8 @@ const getComponentCss$e = () => {
 const getComponentCss$d = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'table-row', transition: getTransition('background-color') }, hoverMediaQuery({
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'table-row' }, hostHiddenStyles), hoverMediaQuery({
+                transition: getTransition('background-color'),
                 '&(:hover)': {
                     backgroundColor: getThemedColors('light').backgroundSurfaceColor,
                 },
@@ -7893,26 +7767,23 @@ const getComponentCss$d = () => {
     });
 };
 
-const { baseColor } = getThemedColors('light');
-const { small: spacingSmall, medium: spacingMedium, large: spacingLarge } = spacing;
+const { primaryColor } = getThemedColors('light');
 const getComponentCss$c = () => {
     return getCss({
         '@global': {
-            ':host': {
-                display: addImportantToRule('block'),
-            },
+            ':host': addImportantToEachRule(Object.assign({ display: 'block' }, hostHiddenStyles)),
         },
         caption: {
-            marginBottom: spacingSmall,
-            [mediaQueryMin('m')]: {
-                marginBottom: spacingMedium,
+            marginBottom: spacingStaticSmall,
+            [getMediaQueryMin('m')]: {
+                marginBottom: spacingStaticMedium,
             },
         },
         root: {
             position: 'relative',
         },
         'scroll-area': Object.assign({ overflow: 'auto visible' }, getFocusJssStyle({ offset: -1 })),
-        table: Object.assign(Object.assign({ position: 'relative', width: '100%', display: 'table' }, textSmall), { textAlign: 'left', color: baseColor, whiteSpace: 'nowrap' }),
+        table: Object.assign(Object.assign({ position: 'relative', width: '100%', display: 'table' }, textSmallStyle), { textAlign: 'left', color: primaryColor, whiteSpace: 'nowrap' }),
         'scroll-trigger': {
             position: 'absolute',
             top: 0,
@@ -7926,7 +7797,7 @@ const getComponentCss$c = () => {
             top: 0,
             right: 0,
             bottom: 0,
-            paddingLeft: spacingLarge,
+            paddingLeft: spacingStaticLarge,
             pointerEvents: 'none',
             display: 'flex',
             alignItems: 'center',
@@ -7951,17 +7822,15 @@ 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 { baseColor, hoverColor, activeColor, focusColor } = getThemedColors(theme);
+    const { primaryColor, hoverColor, focusColor } = getThemedColors(theme);
     return getCss({
-        '@global': Object.assign({ ':host': {
-                display: 'block',
-                position: addImportantToRule('relative'),
-            } }, addImportantToEachRule(Object.assign(Object.assign({ 
+        '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ position: 'relative', transform: 'translate3d(0,0,0)' }, hostHiddenStyles))) }, addImportantToEachRule(Object.assign(Object.assign({ 
             // would be nice to use shared selector like '::slotted([role])'
             // but this doesn't work reliably when rendering in browser
             [transformSelector('::slotted([role])')]: {
                 display: 'inline-block',
-                margin: `0 0 calc(.5em - ${pxToRemWithUnit(4)}) 0`,
+                position: 'relative',
+                margin: '0 0 4px 0',
                 padding: 0,
                 verticalAlign: 'top',
                 fontFamily: 'inherit',
@@ -7974,39 +7843,39 @@ const getComponentCss$b = (size, weight, theme) => {
                 boxSizing: 'border-box',
                 WebkitAppearance: 'none',
                 appearance: 'none',
-                outline: '1px solid transparent',
+                outline: 0,
                 outlineOffset: '1px',
                 textDecoration: 'none',
                 textAlign: 'left',
                 border: 0,
                 background: 'transparent',
-                color: baseColor,
+                color: primaryColor,
                 cursor: 'pointer',
-                transition: getTransition('color'),
+                borderRadius: borderRadiusSmall,
+                '&::before': Object.assign({ content: '""', position: 'absolute', top: '-2px', bottom: '-2px', left: '-4px', right: '-4px', borderRadius: borderRadiusSmall, zIndex: '-1' }, hoverMediaQuery({
+                    transition: getTransition('background'),
+                })),
             } }, hoverMediaQuery({
-            [transformSelector('::slotted([role]:hover)')]: {
-                color: hoverColor,
-            },
-        })), { [transformSelector('::slotted([role]:active),::slotted([role][aria-selected="true"])')]: {
-                color: activeColor,
-            }, 
+            [transformSelector('::slotted([role]:hover)::before')]: Object.assign(Object.assign({}, frostedGlassStyle), { background: hoverColor }),
+        })), { 
             // TODO: combine link-social-styles with link-button-styles and tabs-bar-styles
-            [transformSelector('::slotted([role]:focus)')]: {
-                outlineColor: focusColor,
-            }, [transformSelector('::slotted([role]:focus:not(:focus-visible))')]: {
-                outlineColor: 'transparent',
+            [transformSelector('::slotted([role]:focus)::before')]: {
+                border: `${borderWidthBase} solid ${focusColor}`,
+                borderRadius: borderRadiusSmall,
+            }, [transformSelector('::slotted([role]:focus:not(:focus-visible))::before')]: {
+                borderColor: 'transparent',
             }, [transformSelector('::slotted([role]:not(:last-child))')]: {
-                marginRight: '1em',
+                marginRight: '16px', // No token for this spacing exists yet
             } }))),
-        scroller: Object.assign(Object.assign(Object.assign({}, textSmall), { fontWeight: getFontWeight(weight) }), buildResponsiveStyles(size, (s) => ({ fontSize: fontSize[s].fontSize }))),
+        scroller: Object.assign(Object.assign(Object.assign({}, textSmallStyle), { fontWeight: getFontWeight(weight) }), buildResponsiveStyles(size, (s) => ({ fontSize: fontSizeText[s] }))),
         bar: {
             display: 'block',
             position: 'absolute',
             width: 0,
-            height: weight === 'semibold' ? '.125em' : '.09375em',
+            height: weight === 'semibold' ? '2px' : '1.5px',
             left: 0,
-            bottom: `-${pxToRemWithUnit(4)}`,
-            background: activeColor,
+            bottom: '-4px',
+            background: primaryColor,
             '&--enable-transition': {
                 willChange: 'width',
                 transition: `transform ${tabsTransitionDuration},width ${tabsTransitionDuration}`,
@@ -8016,14 +7885,15 @@ const getComponentCss$b = (size, weight, theme) => {
 };
 
 const getComponentCss$a = (theme) => {
+    const { focusColor } = getThemedColors(theme);
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule(Object.assign({ display: 'block', '&([hidden])': {
-                    display: 'none',
-                } }, getFocusVisibleFallback(Object.entries(getFocusJssStyle({ color: getThemedColors(theme).baseColor })).reduce((result, [key, val]) => {
-                result[key.startsWith('&') ? `&(${key.slice(1)})` : key] = val;
-                return result;
-            }, {})))),
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ display: 'block', position: 'relative' }, hostHiddenStyles), { outline: 0, '&::before': Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), '&(:focus)::before': {
+                    border: `${borderWidthBase} solid ${focusColor}`,
+                    borderRadius: borderRadiusSmall,
+                }, '&(:focus:not(:focus-visible))::before': {
+                    borderColor: 'transparent',
+                } })),
         },
     });
 };
@@ -8031,82 +7901,120 @@ const getComponentCss$a = (theme) => {
 const getComponentCss$9 = () => {
     return getCss({
         '@global': {
-            ':host': {
-                display: 'block',
-            },
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
         },
         root: {
-            marginBottom: pxToRemWithUnit(8),
+            marginBottom: '8px',
         },
     });
 };
 
-const hasInvertedThemeColor = (tagColor, theme) => {
-    const isDark = isThemeDark(theme);
-    return ((!isDark && tagColor === 'neutral-contrast-high') ||
-        (isDark && tagColor !== 'background-surface' && tagColor !== 'background-default'));
+const getTagFocusJssStyle = (themedColors) => {
+    return {
+        '&:focus::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-4)), { border: `${borderWidthBase} solid ${themedColors.focusColor}`, borderRadius: borderRadiusMedium }),
+        '&:focus:not(:focus-visible)::before': {
+            borderColor: 'transparent',
+        },
+    };
 };
-
 const getThemedBackgroundColor = (tagColor, themedColors) => {
     const colorMap = {
         'background-default': themedColors.backgroundColor,
+        'background-base': themedColors.backgroundColor,
         'background-surface': themedColors.backgroundSurfaceColor,
-        'neutral-contrast-high': themedColors.contrastHighColor,
-        'notification-neutral': themedColors.neutralSoftColor,
+        'neutral-contrast-high': themedColors.primaryColor,
+        primary: themedColors.primaryColor,
+        'notification-neutral': themedColors.infoSoftColor,
+        'notification-info': themedColors.infoSoftColor,
         'notification-success': themedColors.successSoftColor,
         'notification-error': themedColors.errorSoftColor,
         'notification-warning': themedColors.warningSoftColor,
     };
     return colorMap[tagColor];
 };
-const getColors = (tagColor, theme) => {
+
+const getComponentCss$8 = (color, hasLabel, theme) => {
     const themedColors = getThemedColors(theme);
-    const hasInvertedTheme = hasInvertedThemeColor(tagColor, theme);
-    const { baseColor, hoverColor } = hasInvertedTheme ? getInvertedThemedColors(theme) : themedColors;
-    const { focusColor, baseColor: themedBaseColor } = themedColors;
-    return {
-        baseColor,
-        hoverColor,
-        outlineColor: hasInvertedTheme ? themedBaseColor : focusColor,
-        backgroundColor: getThemedBackgroundColor(tagColor, themedColors),
-    };
+    const { primaryColor, hoverColor, contrastHighColor } = themedColors;
+    const backgroundColor = getThemedBackgroundColor(color, themedColors);
+    return getCss(Object.assign(Object.assign({ '@global': {
+            ':host': addImportantToEachRule(Object.assign({ display: 'inline-block', verticalAlign: 'top', outline: 0 }, hostHiddenStyles)),
+            button: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'flex', position: 'relative', alignItems: 'center', gap: '12px', minHeight: '54px', padding: '4px 0 4px 12px', borderRadius: borderRadiusSmall, border: 0, cursor: 'pointer', background: backgroundColor, color: primaryColor, textAlign: 'left' }, textSmallStyle), { outline: 0 }), getTagFocusJssStyle(themedColors)), hoverMediaQuery({
+                '&:hover > .icon': {
+                    backgroundColor: hoverColor,
+                },
+            })),
+        } }, (hasLabel && {
+        label: {
+            display: 'block',
+            marginBottom: '-4px',
+            color: contrastHighColor,
+            fontSize: fontSizeTextXSmall,
+        },
+    })), { icon: {
+            padding: '4px',
+            marginRight: '10px',
+            transition: getTransition('background-color'),
+            borderRadius: borderRadiusSmall,
+        }, 'sr-only': getScreenReaderOnlyJssStyle() }));
 };
-const slottedTextJssStyle = {
-    '&(strong),&(b)': {
-        fontWeight: fontWeight.bold,
-    },
-    '&(em),&(i)': {
-        fontStyle,
-    },
+
+const hasInvertedThemeColor = (tagColor, theme) => {
+    const isDark = isThemeDark(theme);
+    return ((!isDark && (tagColor === 'neutral-contrast-high' || tagColor === 'primary')) || // 'neutral-contrast-high' is deprecated (replaced with 'primary')
+        (isDark &&
+            tagColor !== 'background-surface' &&
+            tagColor !== 'background-default' && // 'background-default' is deprecated (replaced with 'background-base')
+            tagColor !== 'background-base' &&
+            tagColor !== 'notification-neutral' && // 'notification-neutral' is deprecated (replaced with 'notification-info')
+            tagColor !== 'notification-info' &&
+            tagColor !== 'notification-warning' &&
+            tagColor !== 'notification-success' &&
+            tagColor !== 'notification-error'));
+};
+const getThemedBackgroundHoverColor = (tagColor, themedColors, theme) => {
+    const isDark = isThemeDark(theme);
+    const keySuffix = isDark ? 'ColorLighten' : 'ColorDarken';
+    const primaryColor = isDark ? themedColors.contrastHighColorLighten : themedColors.contrastHighColor;
+    const colorMap = {
+        'background-default': themedColors[`background${keySuffix}`],
+        'background-base': themedColors[`background${keySuffix}`],
+        'background-surface': themedColors[`backgroundSurface${keySuffix}`],
+        'neutral-contrast-high': primaryColor,
+        primary: primaryColor,
+        'notification-neutral': themedColors[`infoSoft${keySuffix}`],
+        'notification-info': themedColors[`infoSoft${keySuffix}`],
+        'notification-success': themedColors[`successSoft${keySuffix}`],
+        'notification-error': themedColors[`errorSoft${keySuffix}`],
+        'notification-warning': themedColors[`warningSoft${keySuffix}`],
+    };
+    return colorMap[tagColor];
 };
-const getTagFocusJssStyle = (focusColor, focusHoverColor) => {
+
+const getColors = (themedColors, tagColor, theme) => {
+    const hasInvertedTheme = hasInvertedThemeColor(tagColor, theme);
+    const { primaryColor } = hasInvertedTheme ? getInvertedThemedColors(theme) : themedColors;
+    const { focusColor } = themedColors;
     return {
-        '&::before': Object.assign(Object.assign({ content: '""', position: 'absolute' }, getInsetJssStyle(-3)), { border: '1px solid transparent', borderRadius: pxToRemWithUnit(6), transition: getTransition('border-color') }),
-        '&:focus::before': {
-            borderColor: focusColor,
-        },
-        '&:focus:not(:focus-visible)::before': {
-            borderColor: 'transparent',
-        },
-        '&:hover:focus::before': hoverMediaQuery({
-            borderColor: focusHoverColor,
-        }),
+        primaryColor,
+        focusColor,
+        backgroundColor: getThemedBackgroundColor(tagColor, themedColors),
+        backgroundHoverColor: getThemedBackgroundHoverColor(tagColor, themedColors, theme),
     };
 };
-const getComponentCss$8 = (tagColor, isFocusable, theme) => {
-    const { baseColor, hoverColor, backgroundColor, outlineColor } = getColors(tagColor, theme);
+const getComponentCss$7 = (tagColor, isFocusable, theme) => {
+    const themedColors = getThemedColors(theme);
+    const { primaryColor, backgroundColor, backgroundHoverColor } = getColors(themedColors, tagColor, theme);
     return getCss({
         '@global': {
-            ':host': {
-                display: 'inline-flex',
-                verticalAlign: 'top',
-            },
-            span: Object.assign(Object.assign(Object.assign({ display: 'flex', alignItems: 'center', position: 'relative', height: pxToRemWithUnit(24), padding: `0 ${pxToRemWithUnit(6)}`, borderRadius: pxToRemWithUnit(4), background: backgroundColor, color: baseColor }, textXSmall), { whiteSpace: 'nowrap' }), (isFocusable && Object.assign({ transition: getTransition('color') }, hoverMediaQuery({
+            ':host': Object.assign({ display: 'inline-flex', verticalAlign: 'top' }, addImportantToEachRule(hostHiddenStyles)),
+            span: Object.assign({ display: 'flex', gap: '2px', alignItems: 'center', position: 'relative', padding: '4px 9px', borderRadius: borderRadiusSmall, background: backgroundColor, color: primaryColor, font: textXSmallStyle.font, whiteSpace: 'nowrap' }, (isFocusable && Object.assign({}, hoverMediaQuery({
+                transition: getTransition('background-color'),
                 '&:hover': {
-                    color: hoverColor,
+                    background: backgroundHoverColor,
                 },
             })))),
-            '::slotted': addImportantToEachRule(Object.assign(Object.assign(Object.assign({ '&(a),&(button)': {
+            '::slotted': addImportantToEachRule(Object.assign(Object.assign({ '&(a),&(button)': {
                     display: 'inline',
                     position: 'static',
                     textDecoration: 'underline',
@@ -8114,121 +8022,91 @@ const getComponentCss$8 = (tagColor, isFocusable, theme) => {
                     font: 'inherit',
                     outline: 0,
                     color: 'inherit',
-                } }, Object.entries(getTagFocusJssStyle(outlineColor, hoverColor)).reduce((result, [key, value]) => {
-                result[key.replace(/^&([a-z:\-()]*)(::[a-z\-]+)$/, '&(a$1)$2, &(button$1)$2')] = value;
-                return result;
-            }, {})), { '&(button)': {
+                    appearance: 'none',
                     margin: 0,
                     padding: 0,
                     background: 0,
                     border: 0,
                     textAlign: 'left',
-                }, '&(br)': {
+                } }, Object.entries(getTagFocusJssStyle(themedColors)).reduce((result, [key, value]) => {
+                result[key.replace(/^&([a-z:\-()]*)(::[a-z\-]+)$/, '&(a$1)$2, &(button$1)$2')] = value;
+                return result;
+            }, {})), { '&(br)': {
                     display: 'none',
-                } }), slottedTextJssStyle)),
+                } })),
         },
         icon: {
-            margin: `0 ${pxToRemWithUnit(2)} 0 ${pxToRemWithUnit(-2)}`,
+            marginLeft: '-2px', // optimize visual alignment
         },
     });
 };
 
-const getComponentCss$7 = (color, hasLabel) => {
-    const themedColors = getThemedColors('light');
-    const { baseColor, hoverColor, contrastMediumColor } = themedColors;
-    const backgroundColor = getThemedBackgroundColor(color, themedColors);
-    return getCss(Object.assign(Object.assign({ '@global': {
-            ':host': {
-                display: 'inline-flex',
-                verticalAlign: 'top',
-                outline: addImportantToRule(0),
-            },
-            button: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'relative', minHeight: pxToRemWithUnit(48), padding: `${pxToRemWithUnit(4)} ${pxToRemWithUnit(46)} ${pxToRemWithUnit(4)} ${pxToRemWithUnit(16)}`, borderRadius: pxToRemWithUnit(4), border: 0, cursor: 'pointer', background: backgroundColor, color: baseColor, textAlign: 'left' }, textSmall), { outline: 0 }), getTagFocusJssStyle(baseColor, hoverColor)), hoverMediaQuery({
-                '&:hover > .icon': {
-                    color: hoverColor,
-                },
-            })),
-            '::slotted': addImportantToEachRule(slottedTextJssStyle),
-        } }, (hasLabel && {
-        label: {
-            display: 'block',
-            marginBottom: pxToRemWithUnit(-4),
-            color: contrastMediumColor,
-            fontSize: pxToRemWithUnit(14),
-            // a custom line-height is needed to have 48px height in total when label + slotted text is used
-            lineHeight: pxToRemWithUnit(20),
-        },
-    })), { icon: {
-            position: 'absolute',
-            top: '50%',
-            right: pxToRemWithUnit(12),
-            transform: 'translate3d(0, -50%, 0)',
-            transition: getTransition('color'),
-        }, 'sr-only': getScreenReaderOnlyJssStyle() }));
-};
-
 const isType = (inputType, typeToValidate) => inputType === typeToValidate;
 
-const getComponentCss$6 = (isDisabled, hideLabel, state, hasUnitOrVisibleCounter, unitPosition, inputType, isWithinForm, hasAction, hasActionLoading) => {
-    const theme = 'light';
-    const { baseColor, contrastMediumColor, activeColor, disabledColor, hoverColor } = getThemedColors(theme);
-    const hasVisibleState = isVisibleFormState(state);
+const cssVariableInputPaddingLeft = '--p-internal-text-field-input-padding-left';
+const cssVariableInputPaddingRight = '--p-internal-text-field-input-padding-right';
+const buttonOrIconPadding = '4px';
+const buttonOrIconSize = `calc(${fontLineHeight} + ${buttonOrIconPadding} * 2)`;
+const buttonOrIconOffset = '9px';
+const baseButtonOrIconStyles = {
+    position: 'absolute',
+    bottom: '11px',
+    padding: buttonOrIconPadding,
+    font: `1rem ${fontFamily}`,
+};
+const getInputPaddingHorizontal = (buttonOrIconAmount) => {
+    return `calc(${buttonOrIconOffset} * 2 + ${buttonOrIconSize} * ${buttonOrIconAmount})`;
+};
+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 { contrastMediumColor } = getThemedColors(theme);
     const isSearch = isType(inputType, 'search');
     const isPassword = isType(inputType, 'password');
+    const isNumber = isType(inputType, 'number');
     const isSearchOrPassword = isSearch || isPassword;
-    const disabledJssStyle = {
-        color: disabledColor,
-        cursor: 'not-allowed',
-    };
-    return getCss(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ '@global': Object.assign(Object.assign({ ':host': {
-                display: 'block',
-            } }, addImportantToEachRule(Object.assign(Object.assign({}, getBaseChildStyles('input', state, theme, Object.assign(Object.assign({}, (!hasUnitOrVisibleCounter && {
-            // padding is set via inline style if unit is present
-            padding: pxToRemWithUnit(hasVisibleState ? 10 : 11),
-        })), (isType(inputType, 'number')
-            ? {
-                MozAppearance: 'textfield', // hides up/down spin button for Firefox
-            }
-            : isSearchOrPassword && Object.assign({ paddingRight: pxToRemWithUnit(isSearch && isWithinForm ? 88 : 48) }, (isSearch && !isWithinForm && { paddingLeft: pxToRemWithUnit(48) })))))), { 
-            // Reset webkit autofill styles
-            '::slotted(input:-internal-autofill-selected),::slotted(input:-internal-autofill-previewed),::slotted(input:-webkit-autofill),::slotted(input:-webkit-autofill:focus)': {
-                WebkitBackgroundClip: 'padding-box',
-            } }))), (isSearchOrPassword && {
-            button: Object.assign(Object.assign(Object.assign(Object.assign({ position: 'absolute', bottom: 0, right: 0, margin: 0, width: pxToRemWithUnit(48), height: pxToRemWithUnit(48), padding: pxToRemWithUnit(12), boxSizing: 'border-box', outline: 'transparent none', appearance: 'none', border: 'none', textDecoration: 'none', background: 'transparent', cursor: 'pointer', color: baseColor, transition: getTransition('color') }, getFocusJssStyle({ offset: hasVisibleState ? -5 : -4 })), hoverMediaQuery({
-                '&:not(:disabled):hover': {
-                    color: hoverColor,
+    const isSearchWithoutForm = isSearch && !isWithinForm;
+    const isSearchWithForm = isSearch && isWithinForm;
+    return getCss(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ '@global': Object.assign({ ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ [cssVariableInputPaddingLeft]: isSearchWithoutForm ? getInputPaddingHorizontal(1) : spacingStaticMedium, [cssVariableInputPaddingRight]: isSearchOrPassword
+                    ? getInputPaddingHorizontal(isSearchWithForm ? 2 : 1)
+                    : spacingStaticMedium }, hostHiddenStyles))) }, addImportantToEachRule(Object.assign(Object.assign({}, getBaseChildStyles('input', state, theme, Object.assign({ padding: `8px var(${cssVariableInputPaddingRight}) 8px var(${cssVariableInputPaddingLeft})` }, (isNumber && {
+            MozAppearance: 'textfield', // hides up/down spin button for Firefox
+        })))), { '::slotted': {
+                '&(input:-internal-autofill-selected),&(input:-internal-autofill-previewed),&(input:-webkit-autofill),&(input:-webkit-autofill:focus)': {
+                    WebkitBackgroundClip: 'padding-box', // reset webkit autofill styles
                 },
-            })), { '&:active': {
-                    color: activeColor,
-                }, '&:disabled': disabledJssStyle }), (isSearch &&
-                isWithinForm && Object.assign(Object.assign({ right: pxToRemWithUnit(40) }, (hasActionLoading && {
-                '&+button[type=button]': disabledJssStyle, // action button
-            })), { '&+button[type=submit]': {
-                    right: 0, // submit button
-                } }))),
-        })), root: {
+            } }))) }, (isSearchOrPassword && {
+        button: Object.assign(Object.assign({}, baseButtonOrIconStyles), { right: getButtonOrIconOffsetHorizontal(1), 
+            // TODO: maybe we should render hidden button conditionally, needs to be checked if a11y compliant
+            '&:not([hidden]) ~ .button': {
+                right: getButtonOrIconOffsetHorizontal(2),
+            } }),
+    })), (isSearchWithoutForm && {
+        icon: Object.assign(Object.assign({}, baseButtonOrIconStyles), { left: getButtonOrIconOffsetHorizontal(1), pointerEvents: 'none' }),
+    })), { root: {
             display: 'block',
             position: 'relative',
-        } }, getLabelStyles('input', isDisabled, hideLabel, state, theme, hasUnitOrVisibleCounter && {
-        unit: Object.assign(Object.assign({ position: 'absolute', bottom: 0, [unitPosition === 'suffix' ? 'right' : 'left']: 0, padding: pxToRemWithUnit(12), zIndex: 1, boxSizing: 'border-box' }, textSmall), { color: contrastMediumColor }),
-    })), getFunctionalComponentRequiredStyles(theme)), getFunctionalComponentStateMessageStyles(theme, state)), (isSearch &&
-        (hasAction || !isWithinForm) && {
-        icon: {
-            // search icon on left side
+        } }), getLabelStyles('input', isDisabled, hideLabel, state, theme, hasUnitOrVisibleCounter && {
+        unit: {
             position: 'absolute',
-            left: 0,
-            bottom: 0,
+            bottom: '15px',
+            [unitPosition === 'suffix' ? 'right' : 'left']: 0,
+            zIndex: 1,
+            padding: unitPosition === 'suffix' ? `0 ${spacingStaticMedium} 0 10px` : `0 10px 0 ${spacingStaticMedium}`,
+            font: textSmallStyle.font,
             color: contrastMediumColor,
-            padding: pxToRemWithUnit(12),
-            pointerEvents: 'none',
         },
-    })), { 'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }) }));
+    })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), { 
+        // TODO: could be made conditional if we had hasUnit
+        'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }) }));
 };
 
-const cssVariableOrderedSuffix = '--pds-text-list-item-ordered-suffix';
-const cssVariableUnorderedWidth = '--pds-text-list-item-unordered-width';
-const cssVariableUnorderedHeight = '--pds-text-list-item-unordered-height';
-const cssVariableUnorderedTop = '--pds-text-list-item-unordered-top';
+const cssVariableOrderedSuffix = '--p-internal-text-list-item-ordered-suffix';
+const cssVariableUnorderedWidth = '--p-internal-text-list-item-unordered-width';
+const cssVariableUnorderedHeight = '--p-internal-text-list-item-unordered-height';
+const cssVariableUnorderedTop = '--p-internal-text-list-item-unordered-top';
 const getComponentCss$5 = (listType, orderType) => {
     const isOrdered = listType === 'ordered';
     const beforeJssStyles = {
@@ -8237,21 +8115,14 @@ const getComponentCss$5 = (listType, orderType) => {
     };
     return getCss({
         '@global': {
+            ':host': addImportantToEachRule(Object.assign(Object.assign({ position: 'relative', display: 'list-item', color: 'inherit', listStyleType: 'none', paddingLeft: pxToRemWithUnit(isOrdered ? 40 : 24) }, hostHiddenStyles), { '&:before': isOrdered
+                    ? Object.assign(Object.assign(Object.assign({}, beforeJssStyles), { content: `counters(section,".",${orderType === 'numbered' ? 'decimal' : 'lower-latin'}) var(${cssVariableOrderedSuffix},".")`, top: 0, width: pxToRemWithUnit(24), height: 'auto', counterIncrement: 'section', textAlign: 'right', backgroundColor: 'transparent' }), textSmallStyle) : Object.assign(Object.assign({}, beforeJssStyles), { content: '""', width: `var(${cssVariableUnorderedWidth},${pxToRemWithUnit(4)})`, height: `var(${cssVariableUnorderedHeight},${pxToRemWithUnit(4)})`, top: `var(${cssVariableUnorderedTop},calc(1.5em / 2 - 0.125em))`, backgroundColor: 'currentColor' }) })),
             '::slotted(*)': {
                 [cssVariableOrderedSuffix]: '""',
                 [cssVariableUnorderedWidth]: pxToRemWithUnit(8),
                 [cssVariableUnorderedHeight]: '1px',
                 [cssVariableUnorderedTop]: 'calc(1.5em / 2)',
             },
-            ':host': addImportantToEachRule({
-                position: 'relative',
-                display: 'list-item',
-                color: 'inherit',
-                listStyleType: 'none',
-                paddingLeft: pxToRemWithUnit(isOrdered ? 40 : 24),
-                '&:before': isOrdered
-                    ? Object.assign(Object.assign(Object.assign({}, beforeJssStyles), { content: `counters(section,".",${orderType === 'numbered' ? 'decimal' : 'lower-latin'}) var(${cssVariableOrderedSuffix},".")`, top: 0, width: pxToRemWithUnit(24), height: 'auto', counterIncrement: 'section', textAlign: 'right', backgroundColor: 'transparent' }), textSmall) : Object.assign(Object.assign({}, beforeJssStyles), { content: '""', width: `var(${cssVariableUnorderedWidth},${pxToRemWithUnit(4)})`, height: `var(${cssVariableUnorderedHeight},${pxToRemWithUnit(4)})`, top: `var(${cssVariableUnorderedTop},calc(1.5em / 2 - 0.125em))`, backgroundColor: 'currentColor' }),
-            }),
         },
     });
 };
@@ -8259,87 +8130,76 @@ const getComponentCss$5 = (listType, orderType) => {
 const getComponentCss$4 = (theme) => {
     return getCss({
         '@global': {
-            ':host': {
-                display: 'block',
-                counterReset: addImportantToRule('section'),
-            },
-            '[role]': Object.assign({ display: 'block', padding: 0, margin: 0, color: getThemedColors(theme).baseColor }, textSmall),
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(Object.assign({ counterReset: 'section' }, hostHiddenStyles))),
+            '[role]': Object.assign({ display: 'block', padding: 0, margin: 0, color: getThemedColors(theme).primaryColor }, textSmallStyle),
         },
     });
 };
 
+const TEXT_TAGS = ['p', 'span', 'div', 'address', 'blockquote', 'figcaption', 'cite', 'time', 'legend'];
+
+const sizeMap = {
+    'x-small': fontSizeTextXSmall,
+    small: fontSizeTextSmall,
+    medium: fontSizeTextMedium,
+    large: fontSizeTextLarge,
+    'x-large': fontSizeTextXLarge,
+};
 const getComponentCss$3 = (size, weight, align, color, ellipsis, theme) => {
-    // function is local to reuse `weight` parameter
-    // TODO: font short hand isn't really the best choice but we don't have any better alternative atm
-    const getSizeJssStyle = (textSize) => {
-        const fontWeightValue = getFontWeight(weight);
-        return textSize === 'inherit'
-            ? {
-                fontSize: textSize,
-                fontWeight: fontWeightValue,
-            }
-            : { font: textMap[textSize].font.replace('400', fontWeightValue) };
-    };
     return getCss({
         '@global': {
-            ':host': {
-                display: 'block',
-            },
+            ':host': Object.assign({ display: 'block' }, addImportantToEachRule(hostHiddenStyles)),
             '::slotted': {
-                '&(p),&(address),&(blockquote),&(figcaption),&(cite),&(time),&(legend)': addImportantToEachRule(getSlottedTypographyJssStyle()),
+                [TEXT_TAGS.map((i) => `&(${i})`).join()]: addImportantToEachRule(getTypographySlottedJssStyle()),
             },
         },
-        root: Object.assign(Object.assign(Object.assign(Object.assign({ display: 'inherit', padding: 0, margin: 0, textAlign: align }, textSmall), { color: getThemedTextColor(theme, color), listStyleType: 'none', whiteSpace: 'inherit' }), (ellipsis && getEllipsisJssStyle())), buildResponsiveStyles(size, getSizeJssStyle)),
+        root: getTypographyRootJssStyle(textSmallStyle, buildResponsiveStyles(size, (sizeValue) => ({
+            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap[sizeValue],
+            fontWeight: getFontWeight(weight),
+        })), align, color, ellipsis, theme),
     });
 };
 
-const getComponentCss$2 = (isDisabled, hideLabel, state, isCounterVisible, hasCounter) => {
-    const theme = 'light';
-    const hasVisibleState = isVisibleFormState(state);
+const getComponentCss$2 = (isDisabled, hideLabel, state, hasCounter, theme) => {
     const { contrastMediumColor } = getThemedColors(theme);
-    const defaultPadding = pxToRemWithUnit(hasVisibleState ? 10 : 11);
-    return getCss(Object.assign(Object.assign(Object.assign(Object.assign({ '@global': Object.assign({ ':host': {
-                display: 'block',
-            } }, mergeDeep(addImportantToEachRule(getBaseChildStyles('textarea', state, theme, {
-            // 36 = 2 * 6 + 24 where 6 is the bottom distance and 24 the height of the text
-            padding: isCounterVisible
-                ? [defaultPadding, defaultPadding, pxToRemWithUnit(36)].join(' ')
-                : defaultPadding,
-            resize: 'vertical',
+    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,
+            padding: hasCounter ? `12px ${spacingStaticMedium} ${spacingStaticLarge}` : `12px ${spacingStaticMedium}`,
         })), {
             '::slotted(textarea)': {
-                minHeight: pxToRemWithUnit(192), // min-height should be overridable
+                height: 'auto',
+                minHeight: '200px',
+                resize: 'vertical', // overridable, too
             },
-        })) }, getLabelStyles('textarea', isDisabled, hideLabel, state, theme, isCounterVisible && {
-        counter: Object.assign(Object.assign({ position: 'absolute', bottom: pxToRemWithUnit(6), right: pxToRemWithUnit(12), zIndex: 1 }, textSmall), { color: contrastMediumColor }),
-    })), getFunctionalComponentRequiredStyles(theme)), getFunctionalComponentStateMessageStyles(theme, state)), (hasCounter && {
+        })) }, getLabelStyles('textarea', isDisabled, hideLabel, state, theme, hasCounter && {
+        counter: {
+            position: 'absolute',
+            bottom: '6px',
+            right: '12px',
+            zIndex: 1,
+            font: textSmallStyle.font,
+            color: contrastMediumColor,
+        },
+    })), getFunctionalComponentRequiredStyles()), getFunctionalComponentStateMessageStyles(theme, state)), (hasCounter && {
         'sr-only': Object.assign(Object.assign({}, getScreenReaderOnlyJssStyle()), { padding: 0 }),
     })));
 };
 
 const toastPositionBottomVarPublic = '--p-toast-position-bottom'; // CSS custom property exposed as public interface
-const toastPositionBottomVarInternal = `${toastPositionBottomVarPublic}-internal`;
+const toastPositionBottomVarInternal = '--p-internal-toast-position-bottom';
 const toastCloseClassName = 'close';
 const getComponentCss = () => {
     return getCss({
         '@global': {
-            ':host': addImportantToEachRule({
-                position: 'fixed',
-                left: gridSafeZone.base,
-                right: gridSafeZone.base,
-                // Needs a not overwritable internal css variable to cover default position depending on viewport size and to handle animation properly.
+            ':host': addImportantToEachRule(Object.assign({ position: 'fixed', left: gridSafeZoneBase, right: gridSafeZoneBase, 
+                // Needs a not overridable internal css variable to cover default position depending on viewport size and to handle animation properly.
                 // In addition, a public css variable can be passed to overwrite the default position.
-                [toastPositionBottomVarInternal]: `var(${toastPositionBottomVarPublic}, ${pxToRemWithUnit(56)})`,
-                bottom: `var(${toastPositionBottomVarInternal})`,
-                maxWidth: '42rem',
-                zIndex: TOAST_Z_INDEX,
-                [mediaQueryMin('s')]: {
-                    left: pxToRemWithUnit(64),
+                [toastPositionBottomVarInternal]: `var(${toastPositionBottomVarPublic}, 56px)`, bottom: `var(${toastPositionBottomVarInternal})`, maxWidth: '42rem', zIndex: TOAST_Z_INDEX, [getMediaQueryMin('s')]: {
+                    left: '64px',
                     right: 'auto',
-                    [toastPositionBottomVarInternal]: `var(${toastPositionBottomVarPublic}, ${pxToRemWithUnit(64)})`,
+                    [toastPositionBottomVarInternal]: `var(${toastPositionBottomVarPublic}, 64px)`,
                     bottom: `var(${toastPositionBottomVarInternal})`,
-                },
-            }),
+                } }, hostHiddenStyles)),
             '@keyframes in': getKeyframesMobile('in', toastPositionBottomVarInternal),
             '@keyframes out': getKeyframesMobile('out', toastPositionBottomVarInternal),
         },
@@ -8348,14 +8208,15 @@ const getComponentCss = () => {
     });
 };
 
-exports.getAccordionCss = getComponentCss$R;
-exports.getBannerCss = getComponentCss$Q;
-exports.getButtonCss = getComponentCss$N;
-exports.getButtonGroupCss = getComponentCss$P;
-exports.getButtonPureCss = getComponentCss$O;
-exports.getCarouselCss = getComponentCss$M;
-exports.getCheckboxWrapperCss = getComponentCss$L;
-exports.getContentWrapperCss = getComponentCss$K;
+exports.getAccordionCss = getComponentCss$S;
+exports.getBannerCss = getComponentCss$R;
+exports.getButtonCss = getComponentCss$O;
+exports.getButtonGroupCss = getComponentCss$Q;
+exports.getButtonPureCss = getComponentCss$P;
+exports.getCarouselCss = getComponentCss$N;
+exports.getCheckboxWrapperCss = getComponentCss$M;
+exports.getContentWrapperCss = getComponentCss$L;
+exports.getDisplayCss = getComponentCss$K;
 exports.getDividerCss = getComponentCss$J;
 exports.getFieldsetWrapperCss = getComponentCss$I;
 exports.getFlexCss = getComponentCss$G;
@@ -8364,13 +8225,14 @@ exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredSty
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
 exports.getGridCss = getComponentCss$E;
 exports.getGridItemCss = getComponentCss$F;
-exports.getHeadlineCss = getComponentCss$D;
-exports.getIconCss = getComponentCss$C;
-exports.getInlineNotificationCss = getComponentCss$B;
-exports.getLinkCss = getComponentCss$x;
-exports.getLinkPureCss = getComponentCss$A;
-exports.getLinkSocialCss = getComponentCss$z;
-exports.getLinkTileCss = getComponentCss$y;
+exports.getHeadingCss = getComponentCss$D;
+exports.getHeadlineCss = getComponentCss$C;
+exports.getIconCss = getComponentCss$B;
+exports.getInlineNotificationCss = getComponentCss$A;
+exports.getLinkCss = getComponentCss$y;
+exports.getLinkPureCss = getComponentCss$z;
+exports.getLinkSocialCss = getComponentCss$y;
+exports.getLinkTileCss = getComponentCss$x;
 exports.getMarqueCss = getComponentCss$w;
 exports.getModalCss = getComponentCss$v;
 exports.getPaginationCss = getComponentCss$u;
@@ -8394,8 +8256,8 @@ exports.getTableRowCss = getComponentCss$d;
 exports.getTabsBarCss = getComponentCss$b;
 exports.getTabsCss = getComponentCss$9;
 exports.getTabsItemCss = getComponentCss$a;
-exports.getTagCss = getComponentCss$8;
-exports.getTagDismissibleCss = getComponentCss$7;
+exports.getTagCss = getComponentCss$7;
+exports.getTagDismissibleCss = getComponentCss$8;
 exports.getTextCss = getComponentCss$3;
 exports.getTextFieldWrapperCss = getComponentCss$6;
 exports.getTextListCss = getComponentCss$4;