@porsche-design-system/components-react 3.29.0-rc.2 → 3.29.0-rc.4

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

@@ -3886,6 +3886,12 @@ const getCDNBaseURL = () => global.PORSCHE_DESIGN_SYSTEM_CDN_URL + "/porsche-des
 // index.ts
 var MODEL_SIGNATURES_MANIFEST = { "718": { "src": "718.493a9e3.svg", "width": 79, "height": 26 }, "911": { "src": "911.b68f913.svg", "width": 94, "height": 25 }, "boxster": { "src": "boxster.c321738.svg", "width": 239, "height": 26 }, "cayenne": { "src": "cayenne.2556201.svg", "width": 245, "height": 35 }, "cayman": { "src": "cayman.cc89196.svg", "width": 229, "height": 35 }, "macan": { "src": "macan.a1844f4.svg", "width": 196, "height": 26 }, "panamera": { "src": "panamera.6dae809.svg", "width": 260, "height": 25 }, "taycan": { "src": "taycan.df444c6.svg", "width": 167, "height": 36 }, "turbo-s": { "src": "turbo-s.73f1e10.svg", "width": 199, "height": 25 }, "turbo": { "src": "turbo.6a4084a.svg", "width": 143, "height": 25 } };
 
+const hasDocument = typeof document !== 'undefined';
+
+const hasShowPickerSupport = () => (hasDocument &&
+    'showPicker' in HTMLInputElement.prototype &&
+    CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
+
 /**
  * Applies a style only on Chromium based browsers by using a media query which is only supported there.
  * https://browserstack.com/guide/create-browser-specific-css
@@ -3897,8 +3903,6 @@ const supportsChromiumMediaQuery = (style) => ({
     '@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm)': style,
 });
 
-const hasDocument = typeof document !== 'undefined';
-
 const isThemeAuto = (theme) => {
     return theme === 'auto';
 };
@@ -3923,7 +3927,7 @@ const formatObjectOutput = (value) => {
 
 const OPTION_LIST_SAFE_ZONE = 6;
 
-const getComponentCss$1f = (size, compact, open, theme, sticky) => {
+const getComponentCss$1l = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4095,7 +4099,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$1e = (isOpen) => {
+const getComponentCss$1k = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4167,7 +4171,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1d = (direction) => {
+const getComponentCss$1j = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4320,7 +4324,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$1c = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$1i = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4358,7 +4362,7 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$1b = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$1h = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4628,7 +4632,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$1a = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$1g = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4704,7 +4708,7 @@ const mediaQueryS$1 = getMediaQueryMin('s');
 const mediaQueryM = getMediaQueryMin('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const getComponentCss$19 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$1f = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -5061,29 +5065,29 @@ const backfaceVisibilityJssStyle = {
     backfaceVisibility: 'hidden',
     WebkitBackfaceVisibility: 'hidden',
 };
-const gradientColorLight$1 = {
+const gradientColorLight = {
     'background-base': '255,255,255',
     'background-surface': '238,239,242',
     none: '',
 };
-const gradientColorDark$1 = {
+const gradientColorDark = {
     'background-base': '14,14,18',
     'background-surface': '33,34,37',
     none: '',
 };
-const gradientColorMap$1 = {
-    auto: gradientColorLight$1,
-    light: gradientColorLight$1,
-    dark: gradientColorDark$1,
+const gradientColorMap = {
+    auto: gradientColorLight,
+    light: gradientColorLight,
+    dark: gradientColorDark,
 };
-const getGradient$1 = (theme, gradientColorTheme) => {
-    const gradientColor = gradientColorMap$1[theme][gradientColorTheme];
+const getGradient = (theme, gradientColorTheme) => {
+    const gradientColor = gradientColorMap[theme][gradientColorTheme];
     return (`rgba(${gradientColor},1) 20%,` +
         `rgba(${gradientColor},0.6) 48%,` +
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$18 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
+const getComponentCss$1e = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
     const { primaryColor, contrastMediumColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
     const { canvasTextColor } = getHighContrastColors();
@@ -5091,9 +5095,9 @@ const getComponentCss$18 = (gradientColor, hasHeading, hasDescription, hasContro
     const getGradientStyles = (direction) => gradientColor
         ? {
             [direction === 'left' ? 'right' : 'left']: 0,
-            background: `linear-gradient(to ${direction}, ${getGradient$1(theme, gradientColor)} 100%)`,
+            background: `linear-gradient(to ${direction}, ${getGradient(theme, gradientColor)} 100%)`,
             ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: `linear-gradient(to ${direction}, ${getGradient$1('dark', gradientColor)} 100%)`,
+                background: `linear-gradient(to ${direction}, ${getGradient('dark', gradientColor)} 100%)`,
             }),
         }
         : {};
@@ -5541,7 +5545,7 @@ const getCheckedSVGBackgroundImage$2 = (fill) => {
 const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$17 = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$1d = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
@@ -5743,7 +5747,7 @@ const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$16 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$1c = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
     const { primaryColor, contrastMediumColor, contrastHighColor, disabledColor, focusColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, focusColor: focusColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -6112,19 +6116,18 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
             ...prefersColorSchemeDarkMediaQuery(theme, {
                 borderColor: formStateColorDark || contrastMediumColorDark,
             }),
-            ...(!disabled && {
+            ...(!disabled &&
+                !readOnly && {
                 '&:has(input:focus)': {
                     borderColor: primaryColor,
                     ...prefersColorSchemeDarkMediaQuery(theme, {
                         borderColor: primaryColorDark,
                     }),
                 },
-            }),
-            ...(!disabled &&
-                !readOnly &&
-                hoverMediaQuery({
+                ...hoverMediaQuery({
                     '&:hover:not(:has(.button:hover, input:focus ))': hoverStyles,
-                })),
+                }),
+            }),
             ...(disabled && {
                 cursor: 'not-allowed',
                 borderColor: disabledColor,
@@ -6162,12 +6165,228 @@ const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, sta
     };
 };
 
+const getButtonJssStyle = (componentName, isOpen, isDisabled, state, cssVarScaling, theme) => {
+    const cssVarBackgroundColor = `--p-${componentName}-background-color`;
+    const cssVarTextColor = `--p-${componentName}-text-color`;
+    const cssVarBorderColor = `--p-${componentName}-border-color`;
+    const { primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
+    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
+    return {
+        all: 'unset',
+        display: 'flex',
+        alignItems: 'center',
+        gap: `max(4px, ${cssVarScaling} * 12px)`,
+        padding: `max(2px, ${cssVarScaling} * ${formElementPaddingVertical}) max(4px, ${cssVarScaling} * ${formElementPaddingHorizontal})`,
+        minWidth: 0,
+        height: `max(${fontLineHeight}, ${cssVarScaling} * (${fontLineHeight} + 10px))`,
+        boxSizing: 'content-box', // ensures height calculation is based on content, not including padding
+        font: textSmallStyle.font,
+        cursor: 'pointer',
+        transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
+        color: `var(${cssVarTextColor}, ${primaryColor})`,
+        backgroundColor: `var(${cssVarBackgroundColor}, transparent)`,
+        border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateColor || contrastMediumColor})`,
+        borderRadius: borderRadiusSmall,
+        ...(isDisabled && {
+            cursor: 'not-allowed',
+            color: disabledColor,
+            borderColor: disabledColor,
+        }),
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: `var(${cssVarTextColor}, ${primaryColorDark})`,
+            backgroundColor: `var(${cssVarBackgroundColor}, transparent)`,
+            border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark})`,
+            ...(isDisabled && {
+                color: disabledColorDark,
+                borderColor: disabledColorDark,
+            }),
+        }),
+        ...(!isDisabled && {
+            ...hoverMediaQuery({
+                '&:hover,label:hover~&': {
+                    borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateHoverColor || primaryColor})`,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark})`,
+                    }),
+                },
+            }),
+            ...getFocusJssStyle(theme),
+        }),
+    };
+};
+
+const getButtonImageJssStyle = {
+    font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct calculations based on ex-unit
+    width: 'auto',
+    height: fontLineHeight,
+    borderRadius: borderRadiusSmall,
+};
+
+const getButtonLabelJssStyle = {
+    flexGrow: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+
+const getFilterJssStyle = (scalingVar, theme) => {
+    const { backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
+    return {
+        position: 'sticky',
+        top: `calc(max(2px, ${scalingVar} * 6px) * -1)`,
+        padding: `max(2px, ${scalingVar} * 6px)`,
+        margin: `calc(max(2px, ${scalingVar} * 6px) * -1)`,
+        background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            background: backgroundSurfaceColorDark,
+        }),
+        zIndex: 1,
+    };
+};
+
+const getIconJssStyle = (componentName, isOpen) => {
+    const cssVarIconFilter = `--p-${componentName}-icon-filter`;
+    return {
+        marginInlineEnd: '-3px', // to temporarily align with multi-select and select-wrapper
+        pointerEvents: 'none',
+        transform: `rotate3d(0,0,1,${isOpen ? '180' : '0.0001'}deg)`, // needs to be a little more than 0 for correct direction in safari
+        transition: getTransition('transform'),
+        ...(!isHighContrastMode && {
+            filter: `var(${cssVarIconFilter})`,
+        }),
+    };
+};
+
+const getOptionJssStyle = (componentName, cssVarScaling, // "1" is needed for components not yet supporting compact mode
+theme) => {
+    const { primaryColor: primaryColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
+    const { primaryColor, contrastLowColor, contrastHighColor, disabledColor } = getThemedColors(theme);
+    const { highlightColor } = getHighContrastColors();
+    const gap = `max(4px, ${cssVarScaling} * 12px)`;
+    const paddingBlock = `max(2px, ${cssVarScaling} * ${spacingStaticSmall})`;
+    const paddingInline = `max(4px, ${cssVarScaling} * var(--p-internal-${componentName}-padding-left, 12px)) max(4px, ${cssVarScaling} * 12px)`;
+    return {
+        display: 'flex',
+        gap,
+        paddingBlock,
+        paddingInline,
+        minHeight: fontLineHeight, // preserves height for empty option
+        ...textSmallStyle,
+        color: contrastHighColor,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: contrastHighColorDark,
+        }),
+        cursor: 'pointer',
+        textAlign: 'start',
+        wordBreak: 'break-word',
+        boxSizing: 'content-box',
+        borderRadius: borderRadiusSmall,
+        transition: `${getTransition('background-color')}, ${getTransition('color')}`,
+        '&--highlighted': {
+            background: contrastLowColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                background: contrastLowColorDark,
+            }),
+        },
+        '&--highlighted, &--selected': {
+            color: isHighContrastMode ? highlightColor : primaryColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: isHighContrastMode ? highlightColor : primaryColorDark,
+            }),
+        },
+        '&--disabled': {
+            cursor: 'not-allowed',
+            color: disabledColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: disabledColorDark,
+            }),
+        },
+        '&--hidden': {
+            display: 'none',
+        },
+    };
+};
+
+const getOptionsJssStyle = (scalingVar) => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: `max(2px, ${scalingVar} * ${spacingStaticSmall})`,
+    };
+};
+
+const keyframesName = 'fade-in';
+const getPopoverKeyframesStyles = {
+    [`@keyframes ${keyframesName}`]: {
+        from: {
+            opacity: 0,
+        },
+        to: {
+            opacity: 1,
+        },
+    },
+};
+const getPopoverJssStyle = (isOpen, cssVarScaling, // "1" is needed for components not yet supporting compact mode
+optionHeight, theme) => {
+    const { contrastLowColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
+    const { contrastLowColor: contrastLowColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
+    const minHeightOptionList = `calc(${4.5 * (optionHeight + 8) + 6 + 2}px)`; // 4.5 options * option height + 8px gap + additional spacing (6px = padding, 2px = border)
+    return {
+        all: 'unset',
+        position: 'absolute',
+        zIndex: 99, // needed for backwards compatibility, to enable browsers not supporting #top-layer
+        padding: `max(2px, ${cssVarScaling} * 6px)`,
+        display: isOpen ? 'flex' : 'none', // needed for backwards compatibility, otherwise 'flex' would be enough
+        flexDirection: 'column',
+        gap: `max(2px, ${cssVarScaling} * ${spacingStaticSmall})`,
+        maxHeight: `max(${minHeightOptionList}, calc(50vh - 54px / 2 - ${OPTION_LIST_SAFE_ZONE}px * 2))`,
+        boxSizing: 'border-box',
+        overflow: 'hidden auto',
+        scrollbarWidth: 'thin', // firefox
+        scrollbarColor: 'auto', // firefox
+        animation: `var(${cssVariableAnimationDuration}, ${motionDurationShort}) ${keyframesName} ${motionEasingBase} forwards`,
+        filter: 'drop-shadow(0 0 8px rgba(0,0,0,0.15))',
+        background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
+        border: `1px solid ${contrastLowColor}`,
+        borderRadius: borderRadiusMedium,
+        ...prefersColorSchemeDarkMediaQuery(theme, {
+            background: backgroundSurfaceColorDark,
+            borderColor: contrastLowColorDark,
+        }),
+        '&:not(:popover-open)': {
+            display: 'none',
+        },
+    };
+};
+
+const getFunctionalComponentNoResultsOptionStyles = (componentName, cssVarScaling, // "1" is needed for components not yet supporting compact mode
+theme) => {
+    const { contrastMediumColor } = getThemedColors(theme);
+    const { contrastMediumColor: contrastMediumColorDark } = getThemedColors('dark');
+    return {
+        'no-results': {
+            ...getOptionJssStyle(componentName, cssVarScaling, theme),
+            '&[role=option]': {
+                cursor: 'not-allowed',
+            },
+            color: contrastMediumColor,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+                color: contrastMediumColorDark,
+            }),
+        },
+        'sr-only': getHiddenTextJssStyle(),
+    };
+};
+
 const widthMap = {
     narrow: gridNarrowOffset,
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$15 = (width) => {
+const getComponentCss$1b = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6209,7 +6428,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$14 = () => {
+const getComponentCss$1a = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6303,12 +6522,12 @@ const getTypographySlottedJssStyle = () => {
     };
 };
 
-const sizeMap$4 = {
+const sizeMap$5 = {
     small: fontSizeDisplaySmall,
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$13 = (size, align, color, ellipsis, theme) => {
+const getComponentCss$19 = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6321,12 +6540,12 @@ const getComponentCss$13 = (size, align, color, ellipsis, theme) => {
             [`::slotted(:is(${DISPLAY_TAGS.join()}))`]: addImportantToEachRule(getTypographySlottedJssStyle()),
         },
         root: getTypographyRootJssStyle(displayLargeStyle, buildResponsiveStyles(size, (sizeValue) => ({
-            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$4[sizeValue],
+            fontSize: sizeValue === 'inherit' ? sizeValue : sizeMap$5[sizeValue],
         })), align, color, ellipsis, theme),
     });
 };
 
-const getComponentCss$12 = (color, orientation, theme) => {
+const getComponentCss$18 = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6387,7 +6606,7 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-const getComponentCss$11 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$17 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6634,7 +6853,7 @@ const getComponentCss$11 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme
     });
 };
 
-const getComponentCss$10 = (isPrimary, isSecondary, isCascade) => {
+const getComponentCss$16 = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -6865,7 +7084,7 @@ const getComponentCss$10 = (isPrimary, isSecondary, isCascade) => {
     });
 };
 
-const getComponentCss$$ = (hasSlottedAnchor, isActive) => {
+const getComponentCss$15 = (hasSlottedAnchor, isActive) => {
     const anchorJssStyle = {
         all: 'unset',
         padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
@@ -6917,7 +7136,7 @@ const getComponentCss$$ = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$14 = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6954,7 +7173,7 @@ const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$Z = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$13 = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6991,6 +7210,46 @@ const getComponentCss$Z = (state, labelSize, hasLabel, theme) => {
     });
 };
 
+const sizeMap$4 = {
+    'xx-small': fontSizeTextXXSmall,
+    'x-small': fontSizeTextXSmall,
+    small: fontSizeTextSmall,
+    medium: fontSizeTextMedium,
+    large: fontSizeTextLarge,
+    'x-large': fontSizeTextXLarge,
+};
+const getComponentCss$12 = (size) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'inline-block',
+                verticalAlign: 'top',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            img: {
+                display: 'block', // without display, img tag gets some extra spacing
+                margin: 0,
+                padding: '1px', // add safe-zone to be visually in sync with <p-icon />
+                boxSizing: 'border-box',
+                pointerEvents: 'none', // disable dragging/ghosting of images
+                ...(size === 'inherit'
+                    ? {
+                        width: size,
+                        height: size,
+                    }
+                    : {
+                        width: fontLineHeight,
+                        height: fontLineHeight,
+                        font: `${sizeMap$4[size]} ${fontFamily}`,
+                    }),
+            },
+        },
+    });
+};
+
 const flexItemWidths = {
     none: 0,
     'one-quarter': 25,
@@ -7001,7 +7260,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$Y = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$11 = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7023,7 +7282,7 @@ const getComponentCss$Y = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$X = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$10 = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7220,7 +7479,7 @@ const cssVarRefPaddingTop = '--ref-p-flyout-pt';
 const cssVarRefPaddingInline = '--ref-p-flyout-px';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$W = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$$ = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -7332,7 +7591,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$V = (size, offset) => {
+const getComponentCss$_ = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7352,7 +7611,7 @@ const getComponentCss$V = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$U = (direction, wrap) => {
+const getComponentCss$Z = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7378,7 +7637,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$T = (size, align, color, ellipsis, theme) => {
+const getComponentCss$Y = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7438,7 +7697,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$S = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$X = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7549,7 +7808,7 @@ const isFlippableIcon = (name, source) => {
             name === 'return' ||
             name === 'send'));
 };
-const getComponentCss$R = (name, source, color, size, theme) => {
+const getComponentCss$W = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -7668,7 +7927,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$Q = (state, hasAction, hasClose, theme) => {
+const getComponentCss$V = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7715,13 +7974,56 @@ const getComponentCss$Q = (state, hasAction, hasClose, theme) => {
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
+const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
             MozAppearance: 'textfield',
-            '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
-                WebkitAppearance: 'none',
+            '&::-webkit-calendar-picker-indicator': {
+                display: 'none',
+            },
+        }),
+        button: {
+            padding: `var(${cssVarButtonPurePadding})`,
+            margin: `var(${cssVarButtonPureMargin})`,
+        },
+    });
+};
+
+// CSS Variables defined in base input
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
+ */
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
+ */
+const getComponentCss$T = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
+            textOverflow: 'ellipsis',
+            MozAppearance: 'textfield',
+            '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                WebkitAppearance: 'none',
+            },
+        }),
+        'sr-only': getHiddenTextJssStyle(),
+    });
+};
+
+// CSS Variables defined in base input
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
+ */
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
+ */
+const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
+            textOverflow: 'ellipsis',
+            MozAppearance: 'textfield',
+            '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                WebkitAppearance: 'none',
             },
         }),
         ...(controls && {
@@ -7740,7 +8042,7 @@ const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$O = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
+const getComponentCss$R = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             '&[type="text"]': {
@@ -7763,7 +8065,7 @@ const getComponentCss$O = (disabled, loading, hideLabel, state, toggle, compact,
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$N = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
+const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -7787,7 +8089,27 @@ const getComponentCss$N = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
  */
-const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
+const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
+            textOverflow: 'ellipsis',
+            MozAppearance: 'textfield',
+            '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                WebkitAppearance: 'none',
+            },
+        }),
+        'sr-only': getHiddenTextJssStyle(),
+    });
+};
+
+// CSS Variables defined in base input
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
+ */
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
+ */
+const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -7806,6 +8128,49 @@ const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnl
     });
 };
 
+// CSS Variables defined in base input
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
+ */
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
+ */
+const getComponentCss$N = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
+            textOverflow: 'ellipsis',
+            MozAppearance: 'textfield',
+            '&::-webkit-calendar-picker-indicator': {
+                display: 'none',
+            },
+        }),
+        button: {
+            padding: `var(${cssVarButtonPurePadding})`,
+            margin: `var(${cssVarButtonPureMargin})`,
+        },
+    });
+};
+
+// CSS Variables defined in base input
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
+ */
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
+ */
+const getComponentCss$M = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
+            textOverflow: 'ellipsis',
+            MozAppearance: 'textfield',
+            '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                WebkitAppearance: 'none',
+            },
+        }),
+        'sr-only': getHiddenTextJssStyle(),
+    });
+};
+
 const getComponentCss$L = (icon, iconSource, active, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme) => {
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, false, stretch, size, hideLabel, alignLabel, underline, hasSlottedAnchor, theme), hasSlottedAnchor && {
         '@global': addImportantToEachRule({
@@ -8528,229 +8893,30 @@ const getComponentCss$E = (model, safeZone, size, color, theme) => {
     });
 };
 
-const getButtonJssStyle = (componentName, isOpen, isDisabled, state, hasSlottedImage, cssVarScaling, theme) => {
-    const cssVarBackgroundColor = `--p-${componentName}-background-color`;
-    const cssVarTextColor = `--p-${componentName}-text-color`;
-    const cssVarBorderColor = `--p-${componentName}-border-color`;
-    const { backgroundColor, primaryColor, disabledColor, contrastMediumColor } = getThemedColors(theme);
-    const { backgroundColor: backgroundColorDark, primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, } = getThemedColors('dark');
-    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
-    return {
-        all: 'unset',
-        display: 'grid',
-        gridTemplateColumns: `${hasSlottedImage ? 'auto ' : ''}minmax(0, 1fr) auto`,
-        alignItems: 'center',
-        gap: `max(4px, ${cssVarScaling} * 12px)`,
-        padding: `max(2px, ${cssVarScaling} * ${formElementPaddingVertical}) max(4px, ${cssVarScaling} * ${formElementPaddingHorizontal})`,
-        minWidth: 0,
-        height: `max(${fontLineHeight}, ${cssVarScaling} * (${fontLineHeight} + 10px))`,
-        boxSizing: 'content-box', // ensures height calculation is based on content, not including padding
-        font: textSmallStyle.font,
-        cursor: 'pointer',
-        transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
-        color: `var(${cssVarTextColor}, ${primaryColor})`,
-        background: `var(${cssVarBackgroundColor}, ${backgroundColor})`,
-        border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateColor || contrastMediumColor})`,
-        borderRadius: borderRadiusSmall,
-        ...(isDisabled && {
-            cursor: 'not-allowed',
-            color: disabledColor,
-            borderColor: disabledColor,
-        }),
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            color: `var(${cssVarTextColor}, ${primaryColorDark})`,
-            background: `var(${cssVarBackgroundColor}, ${backgroundColorDark})`,
-            border: `${borderWidthBase} solid var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark})`,
-            ...(isDisabled && {
-                color: disabledColorDark,
-                borderColor: disabledColorDark,
-            }),
-        }),
-        ...(!isDisabled && {
-            ...hoverMediaQuery({
-                '&:hover,label:hover~&': {
-                    borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColor : formStateHoverColor || primaryColor})`,
-                    ...prefersColorSchemeDarkMediaQuery(theme, {
-                        borderColor: `var(${cssVarBorderColor}, ${isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark})`,
-                    }),
-                },
-            }),
-            ...getFocusJssStyle(theme),
-        }),
-    };
-};
-
-const getButtonImageJssStyle = {
-    font: `${fontSizeTextSmall} ${fontFamily}`, // needed for correct calculations based on ex-unit
-    width: 'auto',
-    height: fontLineHeight,
-    borderRadius: borderRadiusSmall,
-};
-
-const getButtonLabelJssStyle = {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-};
-
-const getIconJssStyle = (componentName, isOpen) => {
-    const cssVarIconFilter = `--p-${componentName}-icon-filter`;
-    return {
-        marginInlineEnd: '-3px', // to temporarily align with multi-select and select-wrapper
-        pointerEvents: 'none',
-        transform: `rotate3d(0,0,1,${isOpen ? '180' : '0.0001'}deg)`, // needs to be a little more than 0 for correct direction in safari
-        transition: getTransition('transform'),
-        ...(!isHighContrastMode && {
-            filter: `var(${cssVarIconFilter})`,
-        }),
-    };
-};
-
-const getNoResultsOptionJssStyle = () => ({
-    '&[role=status]': {
-        cursor: 'not-allowed',
-    },
-    // TODO: shouldn't be used here, instead use sr-only functional component and style
-    '&__sr': getHiddenTextJssStyle(),
-});
-
-const getOptionJssStyle = (componentName, cssVarScaling, // "1" is needed for components not yet supporting compact mode
-theme) => {
-    const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastHighColor: contrastHighColorDark, disabledColor: disabledColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
-    const { primaryColor, hoverColor, contrastLowColor, contrastHighColor, disabledColor } = getThemedColors(theme);
-    const { highlightColor } = getHighContrastColors();
-    const gap = `max(4px, ${cssVarScaling} * 12px)`;
-    const paddingBlock = `max(2px, ${cssVarScaling} * ${spacingStaticSmall})`;
-    const paddingInline = `max(4px, ${cssVarScaling} * var(--p-internal-${componentName}-padding-left, 12px)) max(4px, ${cssVarScaling} * 12px)`;
-    return {
-        display: 'flex',
-        gap,
-        paddingBlock,
-        paddingInline,
-        minHeight: fontLineHeight, // preserves height for empty option
-        ...textSmallStyle,
-        color: contrastHighColor,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            color: contrastHighColorDark,
-        }),
-        cursor: 'pointer',
-        textAlign: 'start',
-        wordBreak: 'break-word',
-        boxSizing: 'content-box',
-        borderRadius: borderRadiusSmall,
-        transition: `${getTransition('background-color')}, ${getTransition('color')}`,
-        ...getNoResultsOptionJssStyle(),
-        ...hoverMediaQuery({
-            '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
-                color: isHighContrastMode ? highlightColor : primaryColor,
-                background: hoverColor,
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: isHighContrastMode ? highlightColor : primaryColorDark,
-                    background: hoverColorDark,
-                }),
-            },
-        }),
-        '&--selected': {
-            ...(componentName === 'select-option' && {
-                cursor: 'default',
-                pointerEvents: 'none',
-            }),
-            background: hoverColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: hoverColorDark,
-            }),
-        },
-        '&--highlighted': {
-            background: contrastLowColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: contrastLowColorDark,
-            }),
-        },
-        '&--highlighted, &--selected': {
-            color: isHighContrastMode ? highlightColor : primaryColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: isHighContrastMode ? highlightColor : primaryColorDark,
-            }),
-        },
-        '&--disabled': {
-            cursor: 'not-allowed',
-            color: disabledColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: disabledColorDark,
-            }),
-        },
-        '&--hidden': {
-            display: 'none',
-        },
-    };
-};
-
-const keyframesName = 'fade-in';
-const getPopoverKeyframesStyles = {
-    [`@keyframes ${keyframesName}`]: {
-        from: {
-            opacity: 0,
-        },
-        to: {
-            opacity: 1,
-        },
-    },
-};
-const getPopoverJssStyle = (isOpen, cssVarScaling, // "1" is needed for components not yet supporting compact mode
-optionHeight, theme) => {
-    const { contrastLowColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
-    const { contrastLowColor: contrastLowColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
-    const minHeightOptionList = `calc(${4.5 * (optionHeight + 8) + 6 + 2}px)`; // 4.5 options * option height + 8px gap + additional spacing (6px = padding, 2px = border)
-    return {
-        all: 'unset',
-        position: 'absolute',
-        zIndex: 99, // needed for backwards compatibility, to enable browsers not supporting #top-layer
-        padding: `max(2px, ${cssVarScaling} * 6px)`,
-        display: isOpen ? 'flex' : 'none', // needed for backwards compatibility, otherwise 'flex' would be enough
-        flexDirection: 'column',
-        gap: `max(2px, ${cssVarScaling} * ${spacingStaticSmall})`,
-        maxHeight: `max(${minHeightOptionList}, calc(50vh - 54px / 2 - ${OPTION_LIST_SAFE_ZONE}px * 2))`,
-        boxSizing: 'border-box',
-        overflow: 'hidden auto',
-        scrollbarWidth: 'thin', // firefox
-        scrollbarColor: 'auto', // firefox
-        animation: `var(${cssVariableAnimationDuration}, ${motionDurationShort}) ${keyframesName} ${motionEasingBase} forwards`,
-        filter: 'drop-shadow(0 0 8px rgba(0,0,0,0.15))',
-        background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
-        border: `1px solid ${contrastLowColor}`,
-        borderRadius: borderRadiusMedium,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            background: backgroundSurfaceColorDark,
-            borderColor: contrastLowColorDark,
-        }),
-        '&:not(:popover-open)': {
-            display: 'none',
-        },
-    };
-};
-
+const cssVarInternalMultiSelectOptionScaling = '--p-internal-multi-select-option-scaling';
 const getComponentCss$D = (theme, isDisabled, selected) => {
-    const dimension = `calc(max(${SCALING_BASE_VALUE} * 0.75, ${fontLineHeight}))`;
-    const dimensionFull = `calc(${dimension} + ${borderWidthBase} * 2)`; // Calculates the total size of the checkbox including its borders.
-    const paddingTop = `calc((${dimensionFull} - ${fontLineHeight}) / 2)`; // Vertically centers the checkbox label relative to the checkbox size.
     return getCss({
         '@global': {
             ':host': {
                 display: 'block',
                 ...addImportantToEachRule({
-                    scrollMargin: '6px', // Aligns option when list is scrolled by navigating with keyboard
+                    scrollMarginBlockStart: `calc(max(2px, var(${cssVarInternalMultiSelectOptionScaling}, 1) * 6px) + 36px)`, // 36px input height + 6px padding
+                    scrollMarginBlockEnd: `max(2px, var(${cssVarInternalMultiSelectOptionScaling}, 1) * 6px)`, // Aligns option when list is scrolled by navigating with keyboard
                     ...hostHiddenStyles,
+                    [`${cssVarInternalCheckboxScaling}`]: `var(${cssVarInternalMultiSelectOptionScaling})`,
                 }),
             },
             slot: {
                 display: 'block',
-                paddingTop,
             },
         },
-        option: {
-            ...getOptionJssStyle('multi-select-option', 1, theme),
-            columnGap: '8px',
+        option: getOptionJssStyle('multi-select-option', `var(${cssVarInternalMultiSelectOptionScaling}, 1)`, theme),
+        'checkbox-wrapper': {
+            fontFamily: fontFamily,
+            fontSize: fontSizeTextSmall,
+            height: fontLineHeight,
+            display: 'flex',
+            alignItems: 'center',
         },
         checkbox: {
             flexShrink: 0,
@@ -8760,151 +8926,9 @@ const getComponentCss$D = (theme, isDisabled, selected) => {
     });
 };
 
-/**
- * Generates placeholder styles for an input element.
- *
- * @param {JssStyle} styles - The styles to apply to the placeholder.
- * @returns {JssStyle} - The generated placeholder styles.
- */
-const getPlaceholderJssStyle = (styles) => ({
-    '&::placeholder': styles,
-    '&::-webkit-input-placeholder': styles /* Chrome/Opera/Safari */,
-    '&::-moz-placeholder': styles /* Firefox 19+ */,
-    '&:-moz-placeholder': styles /* Firefox 18- */,
-});
-
-const getComponentCss$C = (isOpen, isDisabled, hideLabel, state, theme) => {
-    const { primaryColor, disabledColor, contrastHighColor, contrastMediumColor, backgroundColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
-    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const { formStateColor: formStateColorDark, formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
-    return getCss({
-        '@global': {
-            // @keyframes fade-in
-            ...getPopoverKeyframesStyles,
-            ':host': {
-                display: 'block',
-                ...addImportantToEachRule({
-                    ...colorSchemeStyles,
-                    ...hostHiddenStyles,
-                }),
-            },
-            ...preventFoucOfNestedElementsStyles,
-            input: {
-                gridArea: '1/1/1/-1',
-                flex: 1,
-                minWidth: 0,
-                height: `calc(${fontLineHeight} + 10px + ${borderWidthBase} * 2 + ${spacingStaticSmall} * 2)`, // we need 10px additionally so input height becomes 54px, // we need 6px additionally so input height becomes 50px
-                font: textSmallStyle.font.replace('ex', 'ex + 6px'), // a minimum line-height is needed for input, otherwise value is scrollable in Chrome, +6px is alig
-                margin: 0, // necessary reset for iOS Safari 15 (and maybe other browsers)
-                padding: `${formElementPaddingVertical} ${formElementPaddingHorizontal}`,
-                paddingInlineEnd: getCalculatedFormElementPaddingHorizontal(2),
-                boxSizing: 'border-box',
-                outline: 0,
-                WebkitAppearance: 'none', // iOS safari
-                appearance: 'none',
-                ...textSmallStyle,
-                textOverflow: 'ellipsis',
-                '&:disabled': {
-                    cursor: 'not-allowed',
-                },
-                transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
-                color: primaryColor,
-                '&:not(:focus)': {
-                    ...getPlaceholderJssStyle({ color: primaryColor, opacity: 1 }),
-                    ...prefersColorSchemeDarkMediaQuery(theme, getPlaceholderJssStyle({ color: primaryColorDark, opacity: 1 })),
-                }, // Opacity fixes placeholder being shown lighter in firefox
-                ...hoverMediaQuery({
-                    '&:hover:not(:disabled):not(:focus),label:hover~.wrapper &:not(:disabled):not(:focus)': {
-                        borderColor: isOpen ? primaryColor : formStateHoverColor || primaryColor,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            borderColor: isOpen ? primaryColorDark : formStateHoverColorDark || primaryColorDark,
-                        }),
-                    },
-                }),
-                ...(!isDisabled && {
-                    '&:focus': {
-                        borderColor: primaryColor,
-                        ...prefersColorSchemeDarkMediaQuery(theme, {
-                            borderColor: primaryColorDark,
-                        }),
-                    },
-                }),
-                background: backgroundColor,
-                border: `${borderWidthBase} solid ${isOpen ? primaryColor : formStateColor || contrastMediumColor}`,
-                borderRadius: borderRadiusSmall,
-                ...(isDisabled && {
-                    ...getPlaceholderJssStyle({ color: disabledColor }),
-                    cursor: 'not-allowed',
-                    color: disabledColor,
-                    borderColor: disabledColor,
-                    WebkitTextFillColor: disabledColor,
-                }),
-                ...prefersColorSchemeDarkMediaQuery(theme, {
-                    color: primaryColorDark,
-                    background: backgroundColorDark,
-                    border: `${borderWidthBase} solid ${isOpen ? primaryColorDark : formStateColorDark || contrastMediumColorDark}`,
-                    ...(isDisabled && {
-                        ...getPlaceholderJssStyle({ color: disabledColorDark }),
-                        color: disabledColorDark,
-                        borderColor: disabledColorDark,
-                        WebkitTextFillColor: disabledColorDark,
-                    }),
-                }),
-            },
-            '[popover]': getPopoverJssStyle(isOpen, 1, 44, theme),
-        },
-        root: {
-            display: 'grid',
-            gap: spacingStaticXSmall,
-            // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
-            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
-        },
-        wrapper: {
-            position: 'relative',
-            display: 'grid',
-            gridTemplateColumns: `minmax(0, 1fr) auto auto ${formElementLayeredSafeZone}`,
-        },
-        // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf)
-        icon: {
-            gridArea: '1/3',
-            placeSelf: 'center',
-            padding: formButtonOrIconPadding,
-            pointerEvents: 'none',
-            transform: 'rotate3d(0,0,1,0.0001deg)', // needs to be a little more than 0 for correct direction in safari
-            transition: getTransition('transform'),
-            '&--rotate': {
-                transform: 'rotate3d(0,0,1,180deg)',
-            },
-        },
-        // TODO: extract for multi-select, select-wrapper and text-field (not gridArea and placeSelf)
-        button: {
-            gridArea: '1/2',
-            placeSelf: 'center',
-            padding: formButtonOrIconPadding,
-        },
-        // TODO: extract (maybe even as functional component) and re-use in multi-select and select-wrapper
-        'no-results': {
-            padding: `${spacingStaticSmall} 12px`,
-            boxSizing: 'border-box',
-            color: contrastHighColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastHighColorDark,
-            }),
-            ...getNoResultsOptionJssStyle(),
-        },
-        // TODO: maybe we should extract it as functional component too
-        'sr-only': getHiddenTextJssStyle(),
-        // .label / .required
-        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
-        // .message
-        ...getFunctionalComponentStateMessageStyles(theme, state),
-    });
-};
-
 const cssVarInternalOptgroupScaling = '--p-internal-optgroup-scaling';
 const scalingVar = `var(${cssVarInternalOptgroupScaling}, 1)`;
-const getComponentCss$B = (isDisabled, theme) => {
+const getComponentCss$C = (isDisabled, theme) => {
     const { primaryColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
     const padding = `max(2px, ${scalingVar} * ${spacingStaticSmall}) max(4px, ${scalingVar} * 12px)`;
@@ -8942,6 +8966,47 @@ const getComponentCss$B = (isDisabled, theme) => {
     });
 };
 
+const cssVarInternalMultiSelectScaling = '--p-internal-multi-select-scaling';
+const getComponentCss$B = (isOpen, isDisabled, hideLabel, state, compact, theme) => {
+    const scalingVar = `var(${cssVarInternalMultiSelectScaling}, ${compact ? 0.5 : 1})`;
+    return getCss({
+        '@global': {
+            // @keyframes fade-in
+            ...getPopoverKeyframesStyles,
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                    [`${cssVarInternalMultiSelectOptionScaling}`]: scalingVar,
+                    [`${cssVarInternalOptgroupScaling}`]: scalingVar,
+                }),
+            },
+            ...preventFoucOfNestedElementsStyles,
+            button: {
+                ...getButtonJssStyle('multi-select', isOpen, isDisabled, state, scalingVar, theme),
+                '& span': getButtonLabelJssStyle,
+            },
+            '[popover]': getPopoverJssStyle(isOpen, scalingVar, 44, theme),
+        },
+        root: {
+            display: 'grid',
+            gap: `max(2px, ${scalingVar} * ${spacingStaticXSmall})`,
+            // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
+            minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(2)})`,
+        },
+        filter: getFilterJssStyle(scalingVar, theme),
+        options: getOptionsJssStyle(scalingVar),
+        icon: getIconJssStyle('multi-select', isOpen),
+        // .no-results / .sr-only
+        ...getFunctionalComponentNoResultsOptionStyles('multi-select-option', scalingVar, theme),
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
+    });
+};
+
 const mediaQueryMinS = getMediaQueryMin('s');
 const mediaQueryMaxS = getMediaQueryMax('s');
 // button size needs to be fluid between 320px and 360px viewport width, so that the pagination fits into 320px viewport
@@ -9353,28 +9418,8 @@ const getComponentCss$x = (hideLabel, state, isDisabled, isLoading, theme) => {
     });
 };
 
-const gradientColorLight = {
-    'background-base': '255,255,255',
-    'background-surface': '238,239,242',
-};
-const gradientColorDark = {
-    'background-base': '14,14,18',
-    'background-surface': '33,34,37',
-};
-const gradientColorMap = {
-    auto: gradientColorLight,
-    light: gradientColorLight,
-    dark: gradientColorDark,
-};
-const getGradient = (theme, gradientColorTheme) => {
-    const gradientColor = gradientColorMap[theme][gradientColorTheme];
-    return (`rgba(${gradientColor},1) 20%,` +
-        `rgba(${gradientColor},0.6) 48%,` +
-        `rgba(${gradientColor},0.3) 68%,` +
-        `rgba(${gradientColor},0)`);
-};
 const prevNextWrapperWidth = `calc(${fontLineHeight} + 24px)`;
-const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, alignScrollIndicator, hasScrollbar, theme) => {
+const getComponentCss$w = (isNextHidden, isPrevHidden, alignScrollIndicator, hasScrollbar, theme) => {
     const actionPrevNextStyles = {
         position: 'absolute',
         top: 0,
@@ -9408,6 +9453,13 @@ const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, alignScrol
             gridArea: '1 / 1 / 1 / -1',
             padding: '4px',
             overflow: 'auto hidden',
+            ...((!isPrevHidden || !isNextHidden) && {
+                mask: isNextHidden
+                    ? 'linear-gradient(90deg,#0000 8px,#000 40px) alpha'
+                    : isPrevHidden
+                        ? 'linear-gradient(90deg,#000 calc(100% - 40px), #0000 calc(100% - 8px)) alpha'
+                        : 'linear-gradient(90deg,#0000 8px,#000 40px calc(100% - 40px),#0000 calc(100% - 8px)) alpha',
+            }),
             ...(!hasScrollbar && {
                 // If scrollbar is disabled - hide scrollbar
                 msOverflowStyle: 'none' /* IE and Edge */,
@@ -9445,10 +9497,6 @@ const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, alignScrol
             ...actionPrevNextStyles,
             left: '-1px', // ensures that the gradient always overlays the content (e.g. when zoomed)
             justifyContent: 'flex-start',
-            background: `linear-gradient(to right, ${getGradient(theme, gradientColor)} 100%)`,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: `linear-gradient(to right, ${getGradient('dark', gradientColor)} 100%)`,
-            }),
             visibility: isPrevHidden ? 'hidden' : 'inherit',
             '& .action-button': {
                 marginLeft: '8px',
@@ -9462,10 +9510,6 @@ const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, alignScrol
             ...actionPrevNextStyles,
             right: '-1px', // ensures that the gradient always overlays the content (e.g. when zoomed)
             justifyContent: 'flex-end',
-            background: `linear-gradient(to left, ${getGradient(theme, gradientColor)} 100%)`,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: `linear-gradient(to left, ${getGradient('dark', gradientColor)} 100%)`,
-            }),
             visibility: isNextHidden ? 'hidden' : 'inherit',
             '& .action-button': {
                 marginRight: '8px',
@@ -9746,8 +9790,9 @@ const getFilterStyles = (isOpen, state, disabled, theme) => {
     };
 };
 const getListStyles = (isOpen, theme) => {
-    const { primaryColor, disabledColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark } = getThemedColors('dark');
+    const { primaryColor, disabledColor, hoverColor } = getThemedColors(theme);
+    const { primaryColor: primaryColorDark, disabledColor: disabledColorDark, hoverColor: hoverColorDark, } = getThemedColors('dark');
+    const { highlightColor } = getHighContrastColors();
     return {
         '@global': {
             // @keyframes fade-in
@@ -9756,6 +9801,22 @@ const getListStyles = (isOpen, theme) => {
         },
         option: {
             ...getOptionJssStyle('select-wrapper', 1, theme),
+            ...hoverMediaQuery({
+                '&:not([aria-disabled]):not(.option--disabled):not([role=status]):hover': {
+                    color: isHighContrastMode ? highlightColor : primaryColor,
+                    background: hoverColor,
+                    ...prefersColorSchemeDarkMediaQuery(theme, {
+                        color: isHighContrastMode ? highlightColor : primaryColorDark,
+                        background: hoverColorDark,
+                    }),
+                },
+            }),
+            '&--selected': {
+                background: hoverColor,
+                ...prefersColorSchemeDarkMediaQuery(theme, {
+                    background: hoverColorDark,
+                }),
+            },
             '&--indent': {
                 paddingLeft: '28px',
             },
@@ -9782,6 +9843,8 @@ const getListStyles = (isOpen, theme) => {
                 color: primaryColorDark,
             }),
         },
+        // .no-results / .sr-only
+        ...getFunctionalComponentNoResultsOptionStyles('select-wrapper', 1, theme),
     };
 };
 const getComponentCss$t = (isOpen, state, disabled, filter, theme) => {
@@ -9884,10 +9947,8 @@ const getComponentCss$r = (theme) => {
 };
 
 const cssVarInternalSelectScaling = '--p-internal-select-scaling';
-const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme, hasSlottedImage) => {
+const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme) => {
     const scalingVar = `var(${cssVarInternalSelectScaling}, ${compact ? 0.5 : 1})`;
-    const { contrastMediumColor: contrastMediumColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark } = getThemedColors('dark');
-    const { contrastMediumColor, backgroundColor, backgroundSurfaceColor } = getThemedColors(theme);
     return getCss({
         '@global': {
             // @keyframes fade-in
@@ -9897,15 +9958,13 @@ const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme,
                 ...addImportantToEachRule({
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
+                    [`${cssVarInternalSelectOptionScaling}`]: scalingVar,
+                    [`${cssVarInternalOptgroupScaling}`]: scalingVar,
                 }),
             },
-            '::slotted(*)': addImportantToEachRule({
-                '--p-internal-select-option-scaling': scalingVar,
-                '--p-internal-optgroup-scaling': scalingVar,
-            }),
             ...preventFoucOfNestedElementsStyles,
             button: {
-                ...getButtonJssStyle('select', isOpen, isDisabled, state, hasSlottedImage, scalingVar, theme),
+                ...getButtonJssStyle('select', isOpen, isDisabled, state, scalingVar, theme),
                 '& img': getButtonImageJssStyle,
                 '& span': getButtonLabelJssStyle,
             },
@@ -9917,31 +9976,11 @@ const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme,
             // min width is needed for showing at least 1 character in very narrow containers. The "1rem" value is the minimum safe zone to show at least 1 character plus the ellipsis dots.
             minWidth: `calc(1rem + ${formElementPaddingHorizontal} + ${borderWidthBase} * 2 + ${getCalculatedFormElementPaddingHorizontal(1)})`,
         },
-        filter: {
-            position: 'sticky',
-            top: `calc(max(2px, ${scalingVar} * 6px) * -1)`,
-            padding: `max(2px, ${scalingVar} * 6px)`,
-            margin: `calc(max(2px, ${scalingVar} * 6px) * -1)`,
-            background: isThemeDark(theme) ? backgroundSurfaceColor : backgroundColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                background: backgroundSurfaceColorDark,
-            }),
-            zIndex: 1,
-        },
-        options: {
-            display: 'flex',
-            flexDirection: 'column',
-            gap: `max(2px, ${scalingVar} * ${spacingStaticSmall})`,
-        },
-        'no-results': {
-            ...getOptionJssStyle('select-option', scalingVar, theme),
-            color: contrastMediumColor,
-            ...prefersColorSchemeDarkMediaQuery(theme, {
-                color: contrastMediumColorDark,
-            }),
-        },
+        filter: getFilterJssStyle(scalingVar, theme),
+        options: getOptionsJssStyle(scalingVar),
         icon: getIconJssStyle('select', isOpen),
-        'sr-only': getHiddenTextJssStyle(),
+        // .no-results / .sr-only
+        ...getFunctionalComponentNoResultsOptionStyles('select-option', scalingVar, theme),
         // .label / .required
         ...getFunctionalComponentLabelStyles(isDisabled, hideLabel, theme),
         // .message
@@ -10967,16 +11006,8 @@ const getComponentCss$9 = (tagColor, compact, isFocusable, hasIcon, theme) => {
 };
 
 const isType = (inputType, typeToValidate) => inputType === typeToValidate;
-// eslint-disable-next-line no-underscore-dangle
-const _hasShowPickerSupport = () => {
-    return (hasDocument &&
-        'showPicker' in HTMLInputElement.prototype &&
-        // TODO: it would be better to determinate support by checking for existence of "calendar-picker-indicator"
-        !!window.navigator.userAgent.match(/chrome|chromium|crios|edg/i));
-};
-const hasShowPickerSupport = _hasShowPickerSupport();
 const showCustomCalendarOrTimeIndicator = (isCalendar, isTime) => {
-    return hasShowPickerSupport && (isCalendar || isTime);
+    return hasShowPickerSupport() && (isCalendar || isTime);
 };
 
 const cssVariableInputPaddingStart = '--p-internal-text-field-input-padding-start';
@@ -11493,43 +11524,50 @@ const getComponentCss = (size, theme) => {
 exports.cssVarButtonPureMargin = cssVarButtonPureMargin;
 exports.cssVarButtonPurePadding = cssVarButtonPurePadding;
 exports.cssVarInternalInputBaseScaling = cssVarInternalInputBaseScaling;
-exports.getAccordionCss = getComponentCss$1f;
-exports.getBannerCss = getComponentCss$1e;
-exports.getButtonCss = getComponentCss$1a;
-exports.getButtonGroupCss = getComponentCss$1d;
-exports.getButtonPureCss = getComponentCss$1c;
-exports.getButtonTileCss = getComponentCss$1b;
-exports.getCanvasCss = getComponentCss$19;
-exports.getCarouselCss = getComponentCss$18;
-exports.getCheckboxCss = getComponentCss$16;
-exports.getCheckboxWrapperCss = getComponentCss$17;
-exports.getContentWrapperCss = getComponentCss$15;
-exports.getCrestCss = getComponentCss$14;
-exports.getDisplayCss = getComponentCss$13;
-exports.getDividerCss = getComponentCss$12;
-exports.getDrilldownCss = getComponentCss$11;
-exports.getDrilldownItemCss = getComponentCss$10;
-exports.getDrilldownLinkCss = getComponentCss$$;
-exports.getFieldsetCss = getComponentCss$Z;
-exports.getFieldsetWrapperCss = getComponentCss$_;
-exports.getFlexCss = getComponentCss$X;
-exports.getFlexItemCss = getComponentCss$Y;
-exports.getFlyoutCss = getComponentCss$W;
+exports.getAccordionCss = getComponentCss$1l;
+exports.getBannerCss = getComponentCss$1k;
+exports.getButtonCss = getComponentCss$1g;
+exports.getButtonGroupCss = getComponentCss$1j;
+exports.getButtonPureCss = getComponentCss$1i;
+exports.getButtonTileCss = getComponentCss$1h;
+exports.getCanvasCss = getComponentCss$1f;
+exports.getCarouselCss = getComponentCss$1e;
+exports.getCheckboxCss = getComponentCss$1c;
+exports.getCheckboxWrapperCss = getComponentCss$1d;
+exports.getContentWrapperCss = getComponentCss$1b;
+exports.getCrestCss = getComponentCss$1a;
+exports.getDisplayCss = getComponentCss$19;
+exports.getDividerCss = getComponentCss$18;
+exports.getDrilldownCss = getComponentCss$17;
+exports.getDrilldownItemCss = getComponentCss$16;
+exports.getDrilldownLinkCss = getComponentCss$15;
+exports.getFieldsetCss = getComponentCss$13;
+exports.getFieldsetWrapperCss = getComponentCss$14;
+exports.getFlagCss = getComponentCss$12;
+exports.getFlexCss = getComponentCss$10;
+exports.getFlexItemCss = getComponentCss$11;
+exports.getFlyoutCss = getComponentCss$$;
 exports.getFunctionalComponentInputBaseStyles = getFunctionalComponentInputBaseStyles;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
+exports.getFunctionalComponentNoResultsOptionStyles = getFunctionalComponentNoResultsOptionStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$U;
-exports.getGridItemCss = getComponentCss$V;
-exports.getHeadingCss = getComponentCss$T;
-exports.getHeadlineCss = getComponentCss$S;
-exports.getIconCss = getComponentCss$R;
-exports.getInlineNotificationCss = getComponentCss$Q;
-exports.getInputNumberCss = getComponentCss$P;
-exports.getInputPasswordCss = getComponentCss$O;
-exports.getInputSearchCss = getComponentCss$N;
-exports.getInputTextCss = getComponentCss$M;
+exports.getGridCss = getComponentCss$Z;
+exports.getGridItemCss = getComponentCss$_;
+exports.getHeadingCss = getComponentCss$Y;
+exports.getHeadlineCss = getComponentCss$X;
+exports.getIconCss = getComponentCss$W;
+exports.getInlineNotificationCss = getComponentCss$V;
+exports.getInputDateCss = getComponentCss$U;
+exports.getInputEmailCss = getComponentCss$T;
+exports.getInputNumberCss = getComponentCss$S;
+exports.getInputPasswordCss = getComponentCss$R;
+exports.getInputSearchCss = getComponentCss$Q;
+exports.getInputTelCss = getComponentCss$P;
+exports.getInputTextCss = getComponentCss$O;
+exports.getInputTimeCss = getComponentCss$N;
+exports.getInputUrlCss = getComponentCss$M;
 exports.getLinkCss = getComponentCss$K;
 exports.getLinkPureCss = getComponentCss$L;
 exports.getLinkSocialCss = getComponentCss$K;
@@ -11539,9 +11577,9 @@ exports.getLinkTileProductCss = getComponentCss$I;
 exports.getMarqueCss = getComponentCss$G;
 exports.getModalCss = getComponentCss$F;
 exports.getModelSignatureCss = getComponentCss$E;
-exports.getMultiSelectCss = getComponentCss$C;
+exports.getMultiSelectCss = getComponentCss$B;
 exports.getMultiSelectOptionCss = getComponentCss$D;
-exports.getOptgroupCss = getComponentCss$B;
+exports.getOptgroupCss = getComponentCss$C;
 exports.getPaginationCss = getComponentCss$A;
 exports.getPinCodeCss = getComponentCss$z;
 exports.getPopoverCss = getComponentCss$y;