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

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

@@ -3629,7 +3629,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
@@ -4025,7 +4025,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';
@@ -4197,7 +4197,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': {
@@ -4269,7 +4269,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1l = (direction) => {
+const getComponentCss$1n = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4426,7 +4426,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: {
@@ -4468,7 +4468,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': {
@@ -4761,7 +4761,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');
@@ -4837,7 +4837,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({
@@ -5220,7 +5220,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();
@@ -5682,7 +5682,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);
@@ -5888,7 +5888,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);
@@ -6180,7 +6180,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."}
  */
@@ -6190,7 +6190,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))`;
@@ -6503,6 +6503,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);
@@ -6527,7 +6534,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$1d = (width) => {
+const getComponentCss$1f = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6569,7 +6576,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$1c = () => {
+const getComponentCss$1e = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6668,7 +6675,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': {
@@ -6686,7 +6693,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 = {
@@ -6747,7 +6754,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({
@@ -6994,7 +7001,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': {
@@ -7225,7 +7232,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
@@ -7277,7 +7284,7 @@ const getComponentCss$17 = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$16 = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$18 = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7314,7 +7321,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': {
@@ -7359,7 +7366,7 @@ const sizeMap$4 = {
     large: fontSizeTextLarge,
     'x-large': fontSizeTextXLarge,
 };
-const getComponentCss$14 = (size) => {
+const getComponentCss$16 = (size) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7401,7 +7408,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({
@@ -7423,7 +7430,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': {
@@ -7620,7 +7627,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({
@@ -7732,7 +7739,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({
@@ -7752,7 +7759,7 @@ const getComponentCss$10 = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$$ = (direction, wrap) => {
+const getComponentCss$11 = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7778,7 +7785,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': {
@@ -7838,7 +7845,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': {
@@ -7949,7 +7956,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);
@@ -8072,7 +8079,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': {
@@ -8123,7 +8130,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',
@@ -8150,7 +8157,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',
@@ -8174,7 +8181,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',
@@ -8203,7 +8237,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"]': {
@@ -8230,7 +8264,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',
@@ -8258,7 +8292,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',
@@ -8282,7 +8316,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',
@@ -8312,7 +8346,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',
@@ -8339,7 +8373,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',
@@ -8352,6 +8386,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"}
@@ -9134,9 +9195,6 @@ const getComponentCss$F = (theme, isDisabled, selected) => {
                     [`${cssVarInternalCheckboxScaling}`]: `var(${cssVarInternalMultiSelectOptionScaling})`,
                 }),
             },
-            slot: {
-                display: 'block',
-            },
         },
         option: getOptionJssStyle('multi-select-option', `var(${cssVarInternalMultiSelectOptionScaling}, 1)`, theme),
         'checkbox-wrapper': {
@@ -9220,6 +9278,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',
@@ -9386,13 +9446,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})`;
@@ -9862,16 +9922,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})`;
@@ -9912,12 +9962,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
             },
@@ -10044,14 +10090,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,
@@ -10060,13 +10107,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
@@ -10079,9 +10130,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': {
@@ -10153,25 +10204,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),
     });
 };
 
@@ -10512,6 +10580,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',
@@ -11378,11 +11448,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;
@@ -11405,9 +11482,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,
@@ -11447,7 +11523,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,
@@ -11874,11 +11950,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);
@@ -11895,6 +11987,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',
@@ -11908,8 +12005,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,
@@ -11918,8 +12013,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,
@@ -11969,7 +12064,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(),
@@ -12096,4 +12191,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1n as getAccordionCss, getComponentCss$1m as getBannerCss, getComponentCss$1i as getButtonCss, getComponentCss$1l as getButtonGroupCss, getComponentCss$1k as getButtonPureCss, getComponentCss$1j as getButtonTileCss, getComponentCss$1h as getCanvasCss, getComponentCss$1g as getCarouselCss, getComponentCss$1e as getCheckboxCss, getComponentCss$1f as getCheckboxWrapperCss, getComponentCss$1d as getContentWrapperCss, getComponentCss$1c as getCrestCss, getComponentCss$1b as getDisplayCss, getComponentCss$1a as getDividerCss, getComponentCss$19 as getDrilldownCss, getComponentCss$18 as getDrilldownItemCss, getComponentCss$17 as getDrilldownLinkCss, getComponentCss$15 as getFieldsetCss, getComponentCss$16 as getFieldsetWrapperCss, getComponentCss$14 as getFlagCss, getComponentCss$12 as getFlexCss, getComponentCss$13 as getFlexItemCss, getComponentCss$11 as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$$ as getGridCss, getComponentCss$10 as getGridItemCss, getComponentCss$_ as getHeadingCss, getComponentCss$Z as getHeadlineCss, getComponentCss$Y as getIconCss, getComponentCss$X as getInlineNotificationCss, getComponentCss$W as getInputDateCss, getComponentCss$V as getInputEmailCss, getComponentCss$U as getInputNumberCss, getComponentCss$T as getInputPasswordCss, getComponentCss$S as getInputSearchCss, getComponentCss$R as getInputTelCss, getComponentCss$Q as getInputTextCss, getComponentCss$P as getInputTimeCss, getComponentCss$O as getInputUrlCss, getComponentCss$M as getLinkCss, getComponentCss$N as getLinkPureCss, getComponentCss$M as getLinkSocialCss, getComponentCss$J as getLinkTileCss, getComponentCss$L as getLinkTileModelSignatureCss, getComponentCss$K as getLinkTileProductCss, getComponentCss$I as getMarqueCss, getComponentCss$H as getModalCss, getComponentCss$G as getModelSignatureCss, getComponentCss$D as getMultiSelectCss, getComponentCss$F as getMultiSelectOptionCss, getComponentCss$E as getOptgroupCss, getComponentCss$C as getPaginationCss, getComponentCss$B as getPinCodeCss, getComponentCss$A as getPopoverCss, getComponentCss$z as getRadioButtonWrapperCss, getComponentCss$x as getRadioGroupCss, getComponentCss$y as getRadioGroupOptionCss, getScalingVar$2 as getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1p as getAccordionCss, getComponentCss$1o as getBannerCss, getComponentCss$1k as getButtonCss, getComponentCss$1n as getButtonGroupCss, getComponentCss$1m as getButtonPureCss, getComponentCss$1l as getButtonTileCss, getComponentCss$1j as getCanvasCss, getComponentCss$1i as getCarouselCss, getComponentCss$1g as getCheckboxCss, getComponentCss$1h as getCheckboxWrapperCss, getComponentCss$1f as getContentWrapperCss, getComponentCss$1e as getCrestCss, getComponentCss$1d as getDisplayCss, getComponentCss$1c as getDividerCss, getComponentCss$1b as getDrilldownCss, getComponentCss$1a as getDrilldownItemCss, getComponentCss$19 as getDrilldownLinkCss, getComponentCss$17 as getFieldsetCss, getComponentCss$18 as getFieldsetWrapperCss, getComponentCss$16 as getFlagCss, getComponentCss$14 as getFlexCss, getComponentCss$15 as getFlexItemCss, getComponentCss$13 as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentNoResultsOptionStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$11 as getGridCss, getComponentCss$12 as getGridItemCss, getComponentCss$10 as getHeadingCss, getComponentCss$$ as getHeadlineCss, getComponentCss$_ as getIconCss, getComponentCss$Z as getInlineNotificationCss, getComponentCss$Y as getInputDateCss, getComponentCss$X as getInputEmailCss, getComponentCss$W as getInputMonthCss, getComponentCss$V as getInputNumberCss, getComponentCss$U as getInputPasswordCss, getComponentCss$T as getInputSearchCss, getComponentCss$S as getInputTelCss, getComponentCss$R as getInputTextCss, getComponentCss$Q as getInputTimeCss, getComponentCss$P as getInputUrlCss, getComponentCss$O as getInputWeekCss, getComponentCss$M as getLinkCss, getComponentCss$N as getLinkPureCss, getComponentCss$M as getLinkSocialCss, getComponentCss$J as getLinkTileCss, getComponentCss$L as getLinkTileModelSignatureCss, getComponentCss$K as getLinkTileProductCss, getComponentCss$I as getMarqueCss, getComponentCss$H as getModalCss, getComponentCss$G as getModelSignatureCss, getComponentCss$D as getMultiSelectCss, getComponentCss$F as getMultiSelectOptionCss, getComponentCss$E as getOptgroupCss, getComponentCss$C as getPaginationCss, getComponentCss$B as getPinCodeCss, getComponentCss$A as getPopoverCss, getComponentCss$z as getRadioButtonWrapperCss, getComponentCss$x as getRadioGroupCss, getComponentCss$y as getRadioGroupOptionCss, getScalingVar$4 as getScalingVar, getComponentCss$w as getScrollerCss, getComponentCss$u as getSegmentedControlCss, getComponentCss$v as getSegmentedControlItemCss, getComponentCss$q as getSelectCss, getComponentCss$r as getSelectOptionCss, getComponentCss$s as getSelectWrapperCss, getComponentCss$t as getSelectWrapperDropdownCss, getComponentCss$p as getSheetCss, getComponentCss$o as getSpinnerCss, getComponentCss$m as getStepperHorizontalCss, getComponentCss$n as getStepperHorizontalItemCss, getComponentCss$l as getSwitchCss, getComponentCss$k as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$j as getTableCss, getComponentCss$h as getTableHeadCellCss, getComponentCss$f as getTableHeadCss, getComponentCss$g as getTableHeadRowCss, getComponentCss$e as getTableRowCss, getComponentCss$d as getTabsBarCss, getComponentCss$b as getTabsCss, getComponentCss$c as getTabsItemCss, getComponentCss$9 as getTagCss, getComponentCss$a as getTagDismissibleCss, getComponentCss$5 as getTextCss, getComponentCss$8 as getTextFieldWrapperCss, getComponentCss$7 as getTextListCss, getComponentCss$6 as getTextListItemCss, getComponentCss$3 as getTextareaCss, getComponentCss$4 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };