@porsche-design-system/components-react 3.31.0 → 3.32.0-rc.1

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

@@ -3631,7 +3631,7 @@ const hasShowPickerSupport = () => (hasDocument &&
     'showPicker' in HTMLInputElement.prototype &&
     CSS.supports('selector(::-webkit-calendar-picker-indicator)'));
 
-const prefix = `[Porsche Design System v${"3.31.0"}]` // this part isn't covered by unit tests
+const prefix = `[Porsche Design System v${"3.32.0-rc.1"}]` // this part isn't covered by unit tests
     ;
 const consoleError = (...messages) => {
     console.error(prefix, ...messages); // eslint-disable-line no-console
@@ -4027,7 +4027,7 @@ const forcedColorsMediaQuery = (style) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$1n = (size, compact, open, theme, sticky) => {
+const getComponentCss$1p = (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';
@@ -4199,7 +4199,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$1m = (isOpen) => {
+const getComponentCss$1o = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4271,7 +4271,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1l = (direction) => {
+const getComponentCss$1n = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4428,7 +4428,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$1k = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$1m = (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: {
@@ -4470,7 +4470,7 @@ const getFontWeight = (weight) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$1j = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
+const getComponentCss$1l = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, hasFooterSlot, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4763,7 +4763,7 @@ const getDisabledColors = (variant, loading, theme) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$1i = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$1k = (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');
@@ -4839,7 +4839,7 @@ const mediaQueryS$1 = getMediaQueryMin('s');
 const mediaQueryM = getMediaQueryMin('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const getComponentCss$1h = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$1j = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -5222,7 +5222,7 @@ const getGradient = (theme, gradientColorTheme) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$1g = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
+const getComponentCss$1i = (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();
@@ -5684,7 +5684,7 @@ const getIndeterminateSVGBackgroundImage$1 = (fill) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$1f = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$1h = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
@@ -5890,7 +5890,7 @@ const getIndeterminateSVGBackgroundImage = (fill) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$1e = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$1g = (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);
@@ -6182,7 +6182,7 @@ const getUnitCounterJssStyle = (isDisabled, isReadonly, theme) => {
 const cssVarInternalInputBaseScaling = '--p-internal-input-base-scaling';
 // Determines the scaling factor for the input-number size. In "compact" mode, it uses 0.5 to achieve a 36px input-number (compact size).
 // Defaults to 1 for the standard size and can be overridden by the CSS variable `cssVarInternalInputBaseScaling`.
-const getScalingVar$2 = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
+const getScalingVar$4 = (compact) => `var(${cssVarInternalInputBaseScaling}, ${compact ? 0.5 : 1})`;
 /**
  * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
  */
@@ -6192,7 +6192,7 @@ const cssVarButtonPurePadding = '--ref-p-input-slotted-padding';
  */
 const cssVarButtonPureMargin = '--ref-p-input-slotted-margin';
 const getFunctionalComponentInputBaseStyles = (disabled, loading, hideLabel, state, compact, readOnly, theme, additionalInputJssStyle) => {
-    const scalingVar = getScalingVar$2(compact);
+    const scalingVar = getScalingVar$4(compact);
     const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
     const paddingInline = `max(2px, ${formElementPaddingHorizontal} * ${scalingVar})`;
     const height = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
@@ -6505,6 +6505,13 @@ optionHeight, theme) => {
     };
 };
 
+const getSelectedSlotJssStyle = {
+    display: 'block',
+    height: '100%',
+    flexGrow: 1,
+    overflow: 'hidden',
+};
+
 const getFunctionalComponentNoResultsOptionStyles = (componentName, cssVarScaling, // "1" is needed for components not yet supporting compact mode
 theme) => {
     const { contrastMediumColor } = getThemedColors(theme);
@@ -6529,7 +6536,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$1d = (width) => {
+const getComponentCss$1f = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6571,7 +6578,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$1c = () => {
+const getComponentCss$1e = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6670,7 +6677,7 @@ const sizeMap$5 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$1b = (size, align, color, ellipsis, theme) => {
+const getComponentCss$1d = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6688,7 +6695,7 @@ const getComponentCss$1b = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$1a = (color, orientation, theme) => {
+const getComponentCss$1c = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6749,7 +6756,7 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-const getComponentCss$19 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$1b = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6996,7 +7003,7 @@ const getComponentCss$19 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme
     });
 };
 
-const getComponentCss$18 = (isPrimary, isSecondary, isCascade) => {
+const getComponentCss$1a = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -7227,7 +7234,7 @@ const getComponentCss$18 = (isPrimary, isSecondary, isCascade) => {
     });
 };
 
-const getComponentCss$17 = (hasSlottedAnchor, isActive) => {
+const getComponentCss$19 = (hasSlottedAnchor, isActive) => {
     const anchorJssStyle = {
         all: 'unset',
         padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
@@ -7279,7 +7286,7 @@ const getComponentCss$17 = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$16 = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$18 = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7316,7 +7323,7 @@ const getComponentCss$16 = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$15 = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$17 = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7361,7 +7368,7 @@ const sizeMap$4 = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-const getComponentCss$14 = (size) => {
+const getComponentCss$16 = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7403,7 +7410,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$13 = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$15 = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7425,7 +7432,7 @@ const getComponentCss$13 = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$12 = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$14 = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7622,7 +7629,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$11 = (isOpen, backdrop, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$13 = (isOpen, backdrop, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -7734,7 +7741,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$10 = (size, offset) => {
+const getComponentCss$12 = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7754,7 +7761,7 @@ const getComponentCss$10 = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$$ = (direction, wrap) => {
+const getComponentCss$11 = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7780,7 +7787,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$_ = (size, align, color, ellipsis, theme) => {
+const getComponentCss$10 = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7840,7 +7847,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$Z = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$$ = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7951,7 +7958,7 @@ const isFlippableIcon = (name, source) => {
             name === 'return' ||
             name === 'send'));
 };
-const getComponentCss$Y = (name, source, color, size, theme) => {
+const getComponentCss$_ = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -8074,7 +8081,7 @@ const getHeadingJssStyle = (theme) => ({
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$X = (state, hasAction, hasClose, theme) => {
+const getComponentCss$Z = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -8125,7 +8132,7 @@ const getComponentCss$X = (state, hasAction, hasClose, theme) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$W = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$Y = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8152,7 +8159,7 @@ const getComponentCss$W = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$V = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$X = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8176,7 +8183,34 @@ const getComponentCss$V = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
+const getComponentCss$W = (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."}
+ */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
+const getComponentCss$V = (disabled, loading, hideLabel, state, compact, readOnly, theme, controls) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8205,7 +8239,7 @@ const getComponentCss$U = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$T = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
+const getComponentCss$U = (disabled, loading, hideLabel, state, toggle, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             '&[type="text"]': {
@@ -8232,7 +8266,7 @@ const getComponentCss$T = (disabled, loading, hideLabel, state, toggle, compact,
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
+const getComponentCss$T = (disabled, loading, hideLabel, state, compact, readOnly, theme, clear) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8260,7 +8294,7 @@ const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$R = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$S = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8284,7 +8318,7 @@ const getComponentCss$R = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
+const getComponentCss$R = (disabled, loading, hideLabel, state, compact, readOnly, theme, counter) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8314,7 +8348,7 @@ const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8341,7 +8375,7 @@ const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnl
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$O = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+const getComponentCss$P = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
     return getCss({
         ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
             textOverflow: 'ellipsis',
@@ -8354,6 +8388,33 @@ const getComponentCss$O = (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."}
+ */
+// CSS Variable defined in fontHyphenationStyle
+/**
+ * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ */
+const getComponentCss$O = (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 Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
@@ -9136,9 +9197,6 @@ const getComponentCss$F = (theme, isDisabled, selected) => {
                     [`${cssVarInternalCheckboxScaling}`]: `var(${cssVarInternalMultiSelectOptionScaling})`,
                 }),
             },
-            slot: {
-                display: 'block',
-            },
         },
         option: getOptionJssStyle('multi-select-option', `var(${cssVarInternalMultiSelectOptionScaling}, 1)`, theme),
         'checkbox-wrapper': {
@@ -9222,6 +9280,8 @@ const getComponentCss$D = (isOpen, isDisabled, hideLabel, state, compact, theme)
                 '& span': getButtonLabelJssStyle,
             },
             '[popover]': getPopoverJssStyle(isOpen, scalingVar, 44, theme),
+            '::slotted([slot="filter"])': addImportantToEachRule(getFilterJssStyle(scalingVar, theme)),
+            'slot[name="selected"]': getSelectedSlotJssStyle,
         },
         root: {
             display: 'grid',
@@ -9388,13 +9448,13 @@ const removeStyles = (selector, styles) => Object.fromEntries(Object.entries(sty
 }));
 
 const cssVarInternalPinCodeScaling = '--p-internal-pin-code-scaling';
-const getScalingVar$1 = (compact) => `var(${cssVarInternalPinCodeScaling}, ${compact ? 0.5 : 1})`;
+const getScalingVar$3 = (compact) => `var(${cssVarInternalPinCodeScaling}, ${compact ? 0.5 : 1})`;
 // CSS Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
 const getComponentCss$B = (hideLabel, state, isDisabled, isLoading, length, compact, theme) => {
-    const scalingVar = getScalingVar$1(compact);
+    const scalingVar = getScalingVar$3(compact);
     const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
     const gap = `max(${spacingStaticXSmall}, ${scalingVar} * ${spacingStaticSmall})`;
     const paddingBlock = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
@@ -9864,16 +9924,6 @@ const getRadioGroupDirectionJssStyles = (direction) => {
  */
 const getComponentCss$x = (disabled, loading, hideLabel, state, compact, direction, theme) => {
     const scalingVar = `var(${cssVarInternalRadioGroupScaling}, ${compact ? 0.6668 : 1})`;
-    const { primaryColor } = getThemedColors(theme);
-    const { primaryColor: primaryColorDark } = getThemedColors('dark');
-    const { formStateHoverColor } = getThemedFormStateColors(theme, state);
-    const { formStateHoverColor: formStateHoverColorDark } = getThemedFormStateColors('dark', state);
-    const hoverStyles = {
-        borderColor: formStateHoverColor || primaryColor,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-            borderColor: formStateHoverColorDark || primaryColorDark,
-        }),
-    };
     const dimension = `max(${fontLineHeight}, ${scalingVar} * (${fontLineHeight} + 10px))`;
     const columnGap = `max(${spacingStaticSmall}, ${scalingVar} * ${spacingStaticMedium})`;
     const rowGap = `max(${spacingStaticXSmall}, ${scalingVar} * ${spacingStaticSmall})`;
@@ -9914,12 +9964,8 @@ const getComponentCss$x = (disabled, loading, hideLabel, state, compact, directi
             },
         }),
         // .label / .required
-        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, !disabled && {
-            ...hoverMediaQuery({
-                '&:hover~.wrapper': hoverStyles,
-            }),
-            cursor: 'inherit', // the label is not clickable
-        }, {
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, {
+            cursor: 'inherit',
             '&:is(legend)': {
                 marginBottom: spacingStaticXSmall, // this fixes a known layout bug of the legend element (in all browsers) when the parent fieldset is a flex or grid container
             },
@@ -10046,14 +10092,15 @@ const getComponentCss$w = (isNextHidden, isPrevHidden, alignScrollIndicator, has
 };
 
 const cssVarInternalSegmentedControlScaling = '--p-internal-segmented-control-scaling';
-const getScalingVar = (compact) => `var(${cssVarInternalSegmentedControlScaling}, ${compact ? 0.5 : 1})`;
+const getScalingVar$2 = (compact) => `var(${cssVarInternalSegmentedControlScaling}, ${compact ? 0.5 : 1})`;
 const ICON_OFFSET = '4px';
 const { font: BUTTON_FONT } = textSmallStyle;
 const ICON_SIZE = '1.5rem';
 const ICON_MARGIN = '.25rem';
-const getColors$2 = (isDisabled, isSelected, theme) => {
+const getColors$2 = (isDisabled, isSelected, state, theme) => {
     const { primaryColor, contrastMediumColor, disabledColor, contrastLowColor } = getThemedColors(theme);
     const { highlightColor } = getHighContrastColors();
+    const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
     return {
         buttonColor: isDisabled ? disabledColor : primaryColor,
         labelColor: isDisabled ? disabledColor : contrastMediumColor,
@@ -10062,13 +10109,17 @@ const getColors$2 = (isDisabled, isSelected, theme) => {
                 ? disabledColor
                 : isHighContrastMode
                     ? highlightColor
-                    : primaryColor
-            : contrastLowColor,
-        hoverBorderColor: primaryColor,
+                    : state === 'success'
+                        ? formStateColor
+                        : primaryColor
+            : state === 'error'
+                ? formStateColor
+                : contrastLowColor,
+        hoverBorderColor: state === 'error' ? formStateHoverColor : primaryColor,
     };
 };
 const getScalableItemStyles = (hasIconAndSlottedContent, compact) => {
-    const scalingVar = getScalingVar(compact);
+    const scalingVar = getScalingVar$2(compact);
     const verticalPadding = `max(2px, ${formElementPaddingVertical} * ${scalingVar})`;
     const horizontalPadding = `calc(${verticalPadding} + ${ICON_OFFSET})`;
     const padding = hasIconAndSlottedContent
@@ -10081,9 +10132,9 @@ const getScalableItemStyles = (hasIconAndSlottedContent, compact) => {
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$v = (compact, isDisabled, isSelected, hasIcon, hasSlottedContent, theme) => {
-    const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, theme);
-    const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, 'dark');
+const getComponentCss$v = (compact, isDisabled, isSelected, state, hasIcon, hasSlottedContent, theme) => {
+    const { buttonColor, labelColor, borderColor, hoverBorderColor } = getColors$2(isDisabled, isSelected, state, theme);
+    const { buttonColor: buttonColorDark, labelColor: labelColorDark, borderColor: borderColorDark, hoverBorderColor: hoverBorderColorDark, } = getColors$2(isDisabled, isSelected, state, 'dark');
     const { dimension, padding } = getScalableItemStyles(hasIcon && hasSlottedContent, compact);
     return getCss({
         '@global': {
@@ -10155,25 +10206,42 @@ const getComponentCss$v = (compact, isDisabled, isSelected, hasIcon, hasSlottedC
         }),
     });
 };
-const getComponentCss$u = (minWidth, maxWidth, columns, compact) => {
-    const scalingVar = getScalingVar(compact);
+const getComponentCss$u = (minWidth, maxWidth, columns, disabled, hideLabel, state, theme) => {
     return getCss({
         '@global': {
             ':host': {
-                display: 'grid',
                 ...addImportantToEachRule({
-                    gridAutoRows: '1fr', // for equal height
-                    ...buildResponsiveStyles(columns, (col) => ({
-                        gridTemplateColumns: col === 'auto'
-                            ? `repeat(auto-fit, ${maxWidth}px)`
-                            : `repeat(${col}, minmax(0, 1fr))`,
-                    })),
-                    gap: `max(${spacingStaticXSmall}, ${scalingVar} * 6px)`,
+                    ...(disabled && { cursor: 'not-allowed' }),
                     ...colorSchemeStyles,
                     ...hostHiddenStyles,
                 }),
             },
+            ...preventFoucOfNestedElementsStyles,
+            'slot:not([name])': {
+                display: 'grid',
+                gridAutoRows: '1fr', // for equal height
+                ...buildResponsiveStyles(columns, (col) => ({
+                    gridTemplateColumns: col === 'auto'
+                        ? `repeat(auto-fit, ${maxWidth}px)`
+                        : `repeat(${col}, minmax(0, 1fr))`,
+                })),
+                gap: '6px',
+            },
         },
+        root: {
+            all: 'unset',
+            display: 'grid',
+            gap: spacingStaticXSmall,
+        },
+        // .label / .required
+        ...getFunctionalComponentLabelStyles(disabled, hideLabel, theme, {
+            cursor: 'inherit',
+            '&:is(legend)': {
+                marginBottom: spacingStaticXSmall, // this fixes a known layout bug of the legend element (in all browsers) when the parent fieldset is a flex or grid container
+            },
+        }),
+        // .message
+        ...getFunctionalComponentStateMessageStyles(theme, state),
     });
 };
 
@@ -10514,6 +10582,8 @@ const getComponentCss$q = (isOpen, isDisabled, hideLabel, state, compact, theme)
                 '& span': getButtonLabelJssStyle,
             },
             '[popover]': getPopoverJssStyle(isOpen, scalingVar, 40, theme),
+            '::slotted([slot="filter"])': addImportantToEachRule(getFilterJssStyle(scalingVar, theme)),
+            'slot[name="selected"]': getSelectedSlotJssStyle,
         },
         root: {
             display: 'grid',
@@ -11380,11 +11450,18 @@ const getThemedBackgroundColor = (tagColor, themedColors) => {
     return colorMap[tagColor];
 };
 
+const cssVarInternalTagDismissibleScaling = '--p-internal-tag-dismissible-scaling';
+const getScalingVar$1 = (compact) => `var(${cssVarInternalTagDismissibleScaling}, ${compact ? 'calc(4 / 13)' : 1})`;
 // CSS Variable defined in fontHyphenationStyle
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
  */
-const getComponentCss$a = (color, hasLabel, theme) => {
+const getComponentCss$a = (color, hasLabel, compact, theme) => {
+    const scalingVar = getScalingVar$1(compact);
+    const iconPadding = '4px';
+    const paddingBlock = `calc(${scalingVar} * 0.8125 * ${SCALING_BASE_VALUE} - ${iconPadding}/2)`; // 0.8125 * SCALING_BASE_VALUE corresponds to 13px
+    const paddingInline = `max(calc(${scalingVar} * 0.8125 * ${SCALING_BASE_VALUE} - 1px), 4px)`;
+    const gap = `max(calc(${scalingVar} * 0.75 * ${SCALING_BASE_VALUE}), 2px)`; // 0.5 * SCALING_BASE_VALUE corresponds to 12px
     const themedColors = getThemedColors(theme);
     const themedColorsDark = getThemedColors('dark');
     const { primaryColor, hoverColor, contrastHighColor } = themedColors;
@@ -11407,9 +11484,8 @@ const getComponentCss$a = (color, hasLabel, theme) => {
                 display: 'flex',
                 position: 'relative',
                 alignItems: 'center',
-                gap: '12px',
-                minHeight: '54px',
-                padding: '4px 12px',
+                gap,
+                padding: `${hasLabel ? `calc(${paddingBlock} - 6px)` : paddingBlock} ${paddingInline}`,
                 margin: 0, // Removes default button margin on safari 15
                 borderRadius: borderRadiusSmall,
                 border: 0,
@@ -11449,7 +11525,7 @@ const getComponentCss$a = (color, hasLabel, theme) => {
             },
         }),
         icon: {
-            padding: '4px',
+            padding: iconPadding,
             marginInlineEnd: '-2px', // compensate white space of svg icon and optimize visual alignment
             transition: getTransition('background-color'),
             borderRadius: borderRadiusSmall,
@@ -11876,11 +11952,27 @@ const getComponentCss$4 = (isDisabled, isReadonly, hideLabel, state, hasCounter,
     });
 };
 
-// CSS Variable defined in fontHyphenationStyle
+const cssVarInternalTextareaScaling = '--p-internal-textarea-scaling';
+const getScalingVar = (compact) => `var(${cssVarInternalTextareaScaling}, ${compact ? 0.5 : 1})`;
 /**
  * @css-variable {"name": "--p-hyphens", "description": "Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.", "defaultValue": "auto"}
+ * @css-variable {"name":"--p-textarea-field-sizing","description":"Controls CSS `field-sizing` for textarea.","defaultValue":"unset"}
+ * @css-variable {"name":"--p-textarea-min-width","description":"Minimum width of the textarea.","defaultValue":"52px"}
+ * @css-variable {"name":"--p-textarea-max-width","description":"Maximum width of the textarea.","defaultValue":"unset"}
+ * @css-variable {"name":"--p-textarea-min-height","description":"Minimum height of the textarea.","defaultValue":"unset"}
+ * @css-variable {"name":"--p-textarea-max-height","description":"Maximum height of the textarea.","defaultValue":"unset"}
  */
-const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, counter, resize, theme) => {
+const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, compact, counter, resize, theme) => {
+    const scalingVar = getScalingVar(compact);
+    const minPadding = '2px';
+    const minCounterPadding = '12px';
+    const basePaddingInline = `max(${minPadding}, calc(${formElementPaddingHorizontal} * ${scalingVar}))`;
+    const basePaddingBlock = `max(${minPadding}, calc(12px * ${scalingVar}))`;
+    const counterPaddingInline = `max(${minCounterPadding}, calc((${formElementPaddingHorizontal} + ${borderWidthBase}) * ${scalingVar}))`;
+    const counterPaddingBlock = `max(${minPadding}, calc(6px * ${scalingVar}))`;
+    const paddingBottom = `calc(${fontLineHeight} + ${counterPaddingBlock} * 2 - 4px)`;
+    // 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.
+    const minWidth = `calc(1rem + ${formElementPaddingHorizontal}*2 + ${borderWidthBase}*2)`;
     const { primaryColor, contrastLowColor, contrastMediumColor, disabledColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, disabledColor: disabledColorDark, } = getThemedColors('dark');
     const { formStateColor, formStateHoverColor } = getThemedFormStateColors(theme, state);
@@ -11897,6 +11989,11 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, counter, re
             ...preventFoucOfNestedElementsStyles,
             textarea: {
                 resize,
+                fieldSizing: 'var(--p-textarea-field-sizing, unset)',
+                minWidth: `var(--p-textarea-min-width, ${minWidth})`,
+                maxWidth: 'var(--p-textarea-max-width, unset)',
+                minHeight: 'var(--p-textarea-min-height, unset)',
+                maxHeight: 'var(--p-textarea-max-height, unset)',
                 display: 'block',
                 width: '100%',
                 height: 'auto',
@@ -11910,8 +12007,6 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, counter, re
                 background: 'transparent',
                 textIndent: 0,
                 color: primaryColor,
-                // 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.
-                minWidth: `calc(1rem + ${formElementPaddingHorizontal}*2 + ${borderWidthBase}*2)`,
                 transition: `${getTransition('background-color')}, ${getTransition('border-color')}, ${getTransition('color')}`, // for smooth transitions between e.g. disabled states
                 ...prefersColorSchemeDarkMediaQuery(theme, {
                     borderColor: formStateColorDark || contrastMediumColorDark,
@@ -11920,8 +12015,8 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, counter, re
                 gridArea: '1/1',
                 font: textSmallStyle.font, // to override line-height
                 padding: counter
-                    ? `12px ${formElementPaddingHorizontal} ${spacingStaticLarge}`
-                    : `12px ${formElementPaddingHorizontal}`,
+                    ? `${basePaddingBlock} ${basePaddingInline} ${paddingBottom}`
+                    : `${basePaddingBlock} ${basePaddingInline}`,
                 // TODO: getFocusJssStyle() can't be re-used because focus style differs for form elements
                 '&:focus': {
                     borderColor: primaryColor,
@@ -11971,7 +12066,7 @@ const getComponentCss$3 = (isDisabled, isReadonly, hideLabel, state, counter, re
                 ...getUnitCounterJssStyle(isDisabled, isReadonly, theme),
                 gridArea: '1/1',
                 placeSelf: 'flex-end',
-                padding: `6px calc(${formElementPaddingHorizontal} + ${borderWidthBase})`,
+                padding: `${counterPaddingBlock} ${counterPaddingInline}`,
             },
             // TODO: maybe we should extract it as functional component too
             'sr-only': getHiddenTextJssStyle(),
@@ -12101,50 +12196,52 @@ const getComponentCss = (size, theme) => {
 exports.cssVarButtonPureMargin = cssVarButtonPureMargin;
 exports.cssVarButtonPurePadding = cssVarButtonPurePadding;
 exports.cssVarInternalInputBaseScaling = cssVarInternalInputBaseScaling;
-exports.getAccordionCss = getComponentCss$1n;
-exports.getBannerCss = getComponentCss$1m;
-exports.getButtonCss = getComponentCss$1i;
-exports.getButtonGroupCss = getComponentCss$1l;
-exports.getButtonPureCss = getComponentCss$1k;
-exports.getButtonTileCss = getComponentCss$1j;
-exports.getCanvasCss = getComponentCss$1h;
-exports.getCarouselCss = getComponentCss$1g;
-exports.getCheckboxCss = getComponentCss$1e;
-exports.getCheckboxWrapperCss = getComponentCss$1f;
-exports.getContentWrapperCss = getComponentCss$1d;
-exports.getCrestCss = getComponentCss$1c;
-exports.getDisplayCss = getComponentCss$1b;
-exports.getDividerCss = getComponentCss$1a;
-exports.getDrilldownCss = getComponentCss$19;
-exports.getDrilldownItemCss = getComponentCss$18;
-exports.getDrilldownLinkCss = getComponentCss$17;
-exports.getFieldsetCss = getComponentCss$15;
-exports.getFieldsetWrapperCss = getComponentCss$16;
-exports.getFlagCss = getComponentCss$14;
-exports.getFlexCss = getComponentCss$12;
-exports.getFlexItemCss = getComponentCss$13;
-exports.getFlyoutCss = getComponentCss$11;
+exports.getAccordionCss = getComponentCss$1p;
+exports.getBannerCss = getComponentCss$1o;
+exports.getButtonCss = getComponentCss$1k;
+exports.getButtonGroupCss = getComponentCss$1n;
+exports.getButtonPureCss = getComponentCss$1m;
+exports.getButtonTileCss = getComponentCss$1l;
+exports.getCanvasCss = getComponentCss$1j;
+exports.getCarouselCss = getComponentCss$1i;
+exports.getCheckboxCss = getComponentCss$1g;
+exports.getCheckboxWrapperCss = getComponentCss$1h;
+exports.getContentWrapperCss = getComponentCss$1f;
+exports.getCrestCss = getComponentCss$1e;
+exports.getDisplayCss = getComponentCss$1d;
+exports.getDividerCss = getComponentCss$1c;
+exports.getDrilldownCss = getComponentCss$1b;
+exports.getDrilldownItemCss = getComponentCss$1a;
+exports.getDrilldownLinkCss = getComponentCss$19;
+exports.getFieldsetCss = getComponentCss$17;
+exports.getFieldsetWrapperCss = getComponentCss$18;
+exports.getFlagCss = getComponentCss$16;
+exports.getFlexCss = getComponentCss$14;
+exports.getFlexItemCss = getComponentCss$15;
+exports.getFlyoutCss = getComponentCss$13;
 exports.getFunctionalComponentInputBaseStyles = getFunctionalComponentInputBaseStyles;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentNoResultsOptionStyles = getFunctionalComponentNoResultsOptionStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$$;
-exports.getGridItemCss = getComponentCss$10;
-exports.getHeadingCss = getComponentCss$_;
-exports.getHeadlineCss = getComponentCss$Z;
-exports.getIconCss = getComponentCss$Y;
-exports.getInlineNotificationCss = getComponentCss$X;
-exports.getInputDateCss = getComponentCss$W;
-exports.getInputEmailCss = getComponentCss$V;
-exports.getInputNumberCss = getComponentCss$U;
-exports.getInputPasswordCss = getComponentCss$T;
-exports.getInputSearchCss = getComponentCss$S;
-exports.getInputTelCss = getComponentCss$R;
-exports.getInputTextCss = getComponentCss$Q;
-exports.getInputTimeCss = getComponentCss$P;
-exports.getInputUrlCss = getComponentCss$O;
+exports.getGridCss = getComponentCss$11;
+exports.getGridItemCss = getComponentCss$12;
+exports.getHeadingCss = getComponentCss$10;
+exports.getHeadlineCss = getComponentCss$$;
+exports.getIconCss = getComponentCss$_;
+exports.getInlineNotificationCss = getComponentCss$Z;
+exports.getInputDateCss = getComponentCss$Y;
+exports.getInputEmailCss = getComponentCss$X;
+exports.getInputMonthCss = getComponentCss$W;
+exports.getInputNumberCss = getComponentCss$V;
+exports.getInputPasswordCss = getComponentCss$U;
+exports.getInputSearchCss = getComponentCss$T;
+exports.getInputTelCss = getComponentCss$S;
+exports.getInputTextCss = getComponentCss$R;
+exports.getInputTimeCss = getComponentCss$Q;
+exports.getInputUrlCss = getComponentCss$P;
+exports.getInputWeekCss = getComponentCss$O;
 exports.getLinkCss = getComponentCss$M;
 exports.getLinkPureCss = getComponentCss$N;
 exports.getLinkSocialCss = getComponentCss$M;
@@ -12163,7 +12260,7 @@ exports.getPopoverCss = getComponentCss$A;
 exports.getRadioButtonWrapperCss = getComponentCss$z;
 exports.getRadioGroupCss = getComponentCss$x;
 exports.getRadioGroupOptionCss = getComponentCss$y;
-exports.getScalingVar = getScalingVar$2;
+exports.getScalingVar = getScalingVar$4;
 exports.getScrollerCss = getComponentCss$w;
 exports.getSegmentedControlCss = getComponentCss$u;
 exports.getSegmentedControlItemCss = getComponentCss$v;