@porsche-design-system/components-react 3.29.0-rc.1 → 3.29.0-rc.3

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

@@ -2731,11 +2731,15 @@ function getDefaultExportFromCjs (x) {
 }
 
 function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
+  if (Object.prototype.hasOwnProperty.call(n, '__esModule')) return n;
   var f = n.default;
 	if (typeof f == "function") {
 		var a = function a () {
-			if (this instanceof a) {
+			var isInstance = false;
+      try {
+        isInstance = this instanceof a;
+      } catch {}
+			if (isInstance) {
         return Reflect.construct(f, arguments, this.constructor);
 			}
 			return f.apply(this, arguments);
@@ -3635,7 +3639,7 @@ const addImportantToEachRule = (input) => {
         ? result
         : // @ts-expect-error: Type string can't be used to index type JssStyle
             ((result[key] =
-                // biome-ignore lint/style/noCommaOperator: to be refactored
+                // biome-ignore lint/complexity/noCommaOperator: to be refactored
                 typeof value === 'object' ? addImportantToEachRule(value) : addImportantToRule(value)),
                 result), {});
 };
@@ -3809,7 +3813,6 @@ const isObject = (obj) => typeof obj === 'object' && !Array.isArray(obj);
 // NOTE: taken from https://stackoverflow.com/a/48218209
 const mergeDeep = (...objects) => {
     return objects.reduce((prev, obj) => {
-        // biome-ignore lint/complexity/noForEach: to be refactored
         Object.keys(obj).forEach((key) => {
             const pVal = prev[key];
             const oVal = obj[key];
@@ -3892,20 +3895,6 @@ const supportsChromiumMediaQuery = (style) => ({
     '@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm)': style,
 });
 
-/**
- * Checks if the current environment supports the native Popover API.
- *
- * @returns {boolean} `true` if the native Popover API is supported, `false` otherwise.
- */
-const supportsNativePopover = () => {
-    if (!hasWindow) {
-        return false;
-    }
-    return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'popover');
-};
-// determine it once
-supportsNativePopover();
-
 const hasDocument = typeof document !== 'undefined';
 
 const isThemeAuto = (theme) => {
@@ -3932,7 +3921,7 @@ const formatObjectOutput = (value) => {
 
 const OPTION_LIST_SAFE_ZONE = 6;
 
-const getComponentCss$1f = (size, compact, open, theme, sticky) => {
+const getComponentCss$1g = (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';
@@ -4104,7 +4093,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$1e = (isOpen) => {
+const getComponentCss$1f = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4176,7 +4165,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1d = (direction) => {
+const getComponentCss$1e = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4329,7 +4318,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$1c = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$1d = (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: {
@@ -4367,7 +4356,7 @@ const getFontWeight = (weight) => {
     return fontWeightMap[weight];
 };
 
-const getComponentCss$1b = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
+const getComponentCss$1c = (isDisabledOrLoading, aspectRatio, size, weight, background, align, compact, hasGradient, isDisabled) => {
     const isTopAligned = align === 'top';
     return getCss({
         '@global': {
@@ -4637,7 +4626,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$1a = (icon, iconSource, variant, hideLabel, disabled, loading, compact, theme) => {
+const getComponentCss$1b = (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');
@@ -4713,7 +4702,7 @@ const mediaQueryS$1 = getMediaQueryMin('s');
 const mediaQueryM = getMediaQueryMin('m');
 // others
 const spacingBase = gridGap.replace('36px', '24px');
-const getComponentCss$19 = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
+const getComponentCss$1a = (theme, isSidebarStartOpen, isSidebarEndOpen) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, contrastLowColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, contrastLowColor: contrastLowColorDark, } = getThemedColors('dark');
     return getCss({
@@ -5092,7 +5081,7 @@ const getGradient$1 = (theme, gradientColorTheme) => {
         `rgba(${gradientColor},0.3) 68%,` +
         `rgba(${gradientColor},0)`);
 };
-const getComponentCss$18 = (gradientColor, hasHeading, hasDescription, hasControlsSlot, headingSize, width, hasPagination, isInfinitePagination, alignHeader, theme, hasNavigation, alignControls) => {
+const getComponentCss$19 = (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();
@@ -5550,7 +5539,7 @@ const getCheckedSVGBackgroundImage$2 = (fill) => {
 const getIndeterminateSVGBackgroundImage$1 = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$17 = (hideLabel, state, isDisabled, isLoading, theme) => {
+const getComponentCss$18 = (hideLabel, state, isDisabled, isLoading, theme) => {
     const checkedIconColor = escapeHashCharacter(getInvertedThemedColors(theme).primaryColor);
     const checkedIconColorDark = escapeHashCharacter(getInvertedThemedColors('dark').primaryColor);
     const indeterminateIconColor = escapeHashCharacter(getThemedColors(theme).primaryColor);
@@ -5752,7 +5741,7 @@ const getCheckboxCheckedBaseStyles = (theme, isDisabled, isLoading, state) => {
 const getIndeterminateSVGBackgroundImage = (fill) => {
     return getInlineSVGBackgroundImage(`<path fill="${fill}" d="m20,11v2H4v-2h16Z"/>`);
 };
-const getComponentCss$16 = (hideLabel, state, isDisabled, isLoading, compact, theme) => {
+const getComponentCss$17 = (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);
@@ -6176,7 +6165,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$15 = (width) => {
+const getComponentCss$16 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6218,7 +6207,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$14 = () => {
+const getComponentCss$15 = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6317,7 +6306,7 @@ const sizeMap$4 = {
     medium: fontSizeDisplayMedium,
     large: fontSizeDisplayLarge,
 };
-const getComponentCss$13 = (size, align, color, ellipsis, theme) => {
+const getComponentCss$14 = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6335,7 +6324,7 @@ const getComponentCss$13 = (size, align, color, ellipsis, theme) => {
     });
 };
 
-const getComponentCss$12 = (color, orientation, theme) => {
+const getComponentCss$13 = (color, orientation, theme) => {
     const { contrastLowColor, contrastMediumColor, contrastHighColor } = getThemedColors(theme);
     const { contrastLowColor: contrastLowColorDark, contrastMediumColor: contrastMediumColorDark, contrastHighColor: contrastHighColorDark, } = getThemedColors('dark');
     const colorMap = {
@@ -6396,7 +6385,7 @@ const easingOpen = 'in';
 const dialogDurationClose = 'short';
 const backdropDurationClose = 'moderate';
 const easingClose = 'out';
-const getComponentCss$11 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
+const getComponentCss$12 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme) => {
     const { primaryColor, backgroundColor, backgroundSurfaceColor, backgroundShadingColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, backgroundColor: backgroundColorDark, backgroundSurfaceColor: backgroundSurfaceColorDark, backgroundShadingColor: backgroundShadingColorDark, } = getThemedColors('dark');
     return getCss({
@@ -6643,7 +6632,7 @@ const getComponentCss$11 = (isOpen, isPrimary, isSecondaryScrollerVisible, theme
     });
 };
 
-const getComponentCss$10 = (isPrimary, isSecondary, isCascade) => {
+const getComponentCss$11 = (isPrimary, isSecondary, isCascade) => {
     return getCss({
         '@global': {
             '@keyframes slide-up-mobile': {
@@ -6874,7 +6863,7 @@ const getComponentCss$10 = (isPrimary, isSecondary, isCascade) => {
     });
 };
 
-const getComponentCss$$ = (hasSlottedAnchor, isActive) => {
+const getComponentCss$10 = (hasSlottedAnchor, isActive) => {
     const anchorJssStyle = {
         all: 'unset',
         padding: `calc(${spacingFluidSmall} + 2px) calc(${spacingFluidSmall} + 4px)`, // aligned with link-pure
@@ -6926,7 +6915,7 @@ const getComponentCss$$ = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$$ = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6963,7 +6952,7 @@ const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$Z = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7010,7 +6999,7 @@ const flexItemWidths = {
     full: 100,
     auto: 'auto',
 };
-const getComponentCss$Y = (width, offset, alignSelf, grow, shrink, flex) => {
+const getComponentCss$Z = (width, offset, alignSelf, grow, shrink, flex) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7032,7 +7021,7 @@ const getComponentCss$Y = (width, offset, alignSelf, grow, shrink, flex) => {
     });
 };
 
-const getComponentCss$X = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
+const getComponentCss$Y = (inline, wrap, direction, justifyContent, alignItems, alignContent) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7229,7 +7218,7 @@ const cssVarRefPaddingTop = '--ref-p-flyout-pt';
 const cssVarRefPaddingInline = '--ref-p-flyout-px';
 // TODO: we shouldn't expose --p-flyout-max-width
 const cssVariableMaxWidth = '--p-flyout-max-width';
-const getComponentCss$W = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
+const getComponentCss$X = (isOpen, position, hasHeader, hasFooter, hasSubFooter, footerBehavior, theme) => {
     const isPositionStart = position === 'start' || position === 'left';
     const isFooterFixed = footerBehavior === 'fixed';
     return getCss({
@@ -7341,7 +7330,7 @@ const gutter$1 = `calc(${gridGap} / 2)`;
 const gridItemWidths = [
     0, 8.333333, 16.666667, 25, 33.333333, 41.666667, 50, 58.333333, 66.666667, 75, 83.333333, 91.666667, 100,
 ];
-const getComponentCss$V = (size, offset) => {
+const getComponentCss$W = (size, offset) => {
     return getCss({
         '@global': {
             ':host': addImportantToEachRule({
@@ -7361,7 +7350,7 @@ const getComponentCss$V = (size, offset) => {
 };
 
 const gutter = `calc(${gridGap} / -2)`;
-const getComponentCss$U = (direction, wrap) => {
+const getComponentCss$V = (direction, wrap) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7387,7 +7376,7 @@ const sizeMap$3 = {
     'x-large': fontSizeHeadingXLarge,
     'xx-large': fontSizeHeadingXXLarge,
 };
-const getComponentCss$T = (size, align, color, ellipsis, theme) => {
+const getComponentCss$U = (size, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7447,7 +7436,7 @@ const getTextSizeJssStyle = (textSize) => {
         fontSize: textSize === 'inherit' ? textSize : textSizeMap[textSize],
     };
 };
-const getComponentCss$S = (variant, align, color, ellipsis, theme) => {
+const getComponentCss$T = (variant, align, color, ellipsis, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7558,7 +7547,7 @@ const isFlippableIcon = (name, source) => {
             name === 'return' ||
             name === 'send'));
 };
-const getComponentCss$R = (name, source, color, size, theme) => {
+const getComponentCss$S = (name, source, color, size, theme) => {
     const isColorInherit = color === 'inherit';
     const isSizeInherit = size === 'inherit';
     const isDark = isThemeDark(theme);
@@ -7677,7 +7666,7 @@ const getHeadingJssStyle = (theme) => ({
     ...headingSmallStyle,
     ...getTextJssStyle(theme),
 });
-const getComponentCss$Q = (state, hasAction, hasClose, theme) => {
+const getComponentCss$R = (state, hasAction, hasClose, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7717,6 +7706,26 @@ const getComponentCss$Q = (state, hasAction, hasClose, theme) => {
     });
 };
 
+// CSS Variables defined in base input
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
+ */
+/**
+ * @css-variable {"name": "--ref-p-input-slotted-margin", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `margin` in oder to adjust the spacings correctly."}
+ */
+const getComponentCss$Q = (disabled, loading, hideLabel, state, compact, readOnly, theme) => {
+    return getCss({
+        ...getFunctionalComponentInputBaseStyles(disabled, loading, hideLabel, state, compact, readOnly, theme, {
+            textOverflow: 'ellipsis',
+            MozAppearance: 'textfield',
+            '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
+                WebkitAppearance: 'none',
+            },
+        }),
+        'sr-only': getHiddenTextJssStyle(),
+    });
+};
+
 // CSS Variables defined in base input
 /**
  * @css-variable {"name": "--ref-p-input-slotted-padding", "description": "When slotting a `p-button-pure` or `p-link-pure` this variable needs to be set as `padding` in oder to adjust the alignment correctly."}
@@ -9497,6 +9506,7 @@ const getComponentCss$w = (gradientColor, isNextHidden, isPrevHidden, alignScrol
 };
 
 const ITEM_PADDING = '17px';
+const { font: BUTTON_FONT } = textSmallStyle;
 const ICON_SIZE = '1.5rem';
 const ICON_MARGIN = '.25rem';
 const getColors$2 = (isDisabled, isSelected, theme) => {
@@ -11498,4 +11508,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { cssVarButtonPureMargin, cssVarButtonPurePadding, cssVarInternalInputBaseScaling, getComponentCss$1f as getAccordionCss, getComponentCss$1e as getBannerCss, getComponentCss$1a as getButtonCss, getComponentCss$1d as getButtonGroupCss, getComponentCss$1c as getButtonPureCss, getComponentCss$1b as getButtonTileCss, getComponentCss$19 as getCanvasCss, getComponentCss$18 as getCarouselCss, getComponentCss$16 as getCheckboxCss, getComponentCss$17 as getCheckboxWrapperCss, getComponentCss$15 as getContentWrapperCss, getComponentCss$14 as getCrestCss, getComponentCss$13 as getDisplayCss, getComponentCss$12 as getDividerCss, getComponentCss$11 as getDrilldownCss, getComponentCss$10 as getDrilldownItemCss, getComponentCss$$ as getDrilldownLinkCss, getComponentCss$Z as getFieldsetCss, getComponentCss$_ as getFieldsetWrapperCss, getComponentCss$X as getFlexCss, getComponentCss$Y as getFlexItemCss, getComponentCss$W as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$U as getGridCss, getComponentCss$V as getGridItemCss, getComponentCss$T as getHeadingCss, getComponentCss$S as getHeadlineCss, getComponentCss$R as getIconCss, getComponentCss$Q as getInlineNotificationCss, getComponentCss$P as getInputNumberCss, getComponentCss$O as getInputPasswordCss, getComponentCss$N as getInputSearchCss, getComponentCss$M as getInputTextCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$C as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$B as getOptgroupCss, getComponentCss$A as getPaginationCss, getComponentCss$z as getPinCodeCss, getComponentCss$y as getPopoverCss, getComponentCss$x as getRadioButtonWrapperCss, 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$1g as getAccordionCss, getComponentCss$1f as getBannerCss, getComponentCss$1b as getButtonCss, getComponentCss$1e as getButtonGroupCss, getComponentCss$1d as getButtonPureCss, getComponentCss$1c as getButtonTileCss, getComponentCss$1a as getCanvasCss, getComponentCss$19 as getCarouselCss, getComponentCss$17 as getCheckboxCss, getComponentCss$18 as getCheckboxWrapperCss, getComponentCss$16 as getContentWrapperCss, getComponentCss$15 as getCrestCss, getComponentCss$14 as getDisplayCss, getComponentCss$13 as getDividerCss, getComponentCss$12 as getDrilldownCss, getComponentCss$11 as getDrilldownItemCss, getComponentCss$10 as getDrilldownLinkCss, getComponentCss$_ as getFieldsetCss, getComponentCss$$ as getFieldsetWrapperCss, getComponentCss$Y as getFlexCss, getComponentCss$Z as getFlexItemCss, getComponentCss$X as getFlyoutCss, getFunctionalComponentInputBaseStyles, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$V as getGridCss, getComponentCss$W as getGridItemCss, getComponentCss$U as getHeadingCss, getComponentCss$T as getHeadlineCss, getComponentCss$S as getIconCss, getComponentCss$R as getInlineNotificationCss, getComponentCss$Q as getInputEmailCss, getComponentCss$P as getInputNumberCss, getComponentCss$O as getInputPasswordCss, getComponentCss$N as getInputSearchCss, getComponentCss$M as getInputTextCss, getComponentCss$K as getLinkCss, getComponentCss$L as getLinkPureCss, getComponentCss$K as getLinkSocialCss, getComponentCss$H as getLinkTileCss, getComponentCss$J as getLinkTileModelSignatureCss, getComponentCss$I as getLinkTileProductCss, getComponentCss$G as getMarqueCss, getComponentCss$F as getModalCss, getComponentCss$E as getModelSignatureCss, getComponentCss$C as getMultiSelectCss, getComponentCss$D as getMultiSelectOptionCss, getComponentCss$B as getOptgroupCss, getComponentCss$A as getPaginationCss, getComponentCss$z as getPinCodeCss, getComponentCss$y as getPopoverCss, getComponentCss$x as getRadioButtonWrapperCss, 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 };

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

@@ -2731,11 +2731,15 @@ function getDefaultExportFromCjs (x) {
 }
 
 function getAugmentedNamespace(n) {
-  if (n.__esModule) return n;
+  if (Object.prototype.hasOwnProperty.call(n, '__esModule')) return n;
   var f = n.default;
 	if (typeof f == "function") {
 		var a = function a () {
-			if (this instanceof a) {
+			var isInstance = false;
+      try {
+        isInstance = this instanceof a;
+      } catch {}
+			if (isInstance) {
         return Reflect.construct(f, arguments, this.constructor);
 			}
 			return f.apply(this, arguments);
@@ -3509,7 +3513,7 @@ const supportsNativePopover = () => {
     if (!hasWindow$1) {
         return false;
     }
-    return Object.prototype.hasOwnProperty.call(HTMLElement.prototype, 'popover');
+    return Object.hasOwn(HTMLElement.prototype, 'popover');
 };
 // determine it once
 const hasNativePopoverSupport = supportsNativePopover();

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/hooks.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useContext, useEffect, useRef, useMemo, useLayoutEffect } from 'react';
+import { useLayoutEffect, useEffect, useContext, useRef, useMemo } from 'react';
 import { PorscheDesignSystemContext } from './provider.mjs';
 import { getMergedClassName } from './utils.mjs';
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/input-email.wrapper.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+import { DSRInputEmail } from '../dsr-components/input-email.mjs';
+
+const PInputEmail = /*#__PURE__*/ forwardRef(({ autoComplete, compact = false, description = '', disabled = false, form, hideLabel = false, indicator = false, label = '', loading = false, maxLength, message = '', minLength, multiple = false, name, onBlur, onChange, onInput, pattern, placeholder = '', readOnly = false, required = false, state = 'none', theme, value = '', className, children, ...rest }, ref) => {
+    const elementRef = useRef(undefined);
+    useEventCallback(elementRef, 'blur', onBlur);
+    useEventCallback(elementRef, 'change', onChange);
+    useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = usePrefix('p-input-email');
+    const propsToSync = [autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['autoComplete', 'compact', 'description', 'disabled', 'form', 'hideLabel', 'indicator', 'label', 'loading', 'maxLength', 'message', 'minLength', 'multiple', 'name', 'pattern', 'placeholder', 'readOnly', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRInputEmail, { autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, theme: theme || useTheme(), value, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PInputEmail };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/accordion.mjs

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getAccordionCss as getComponentCss$1f } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getAccordionCss as getComponentCss$1g } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 
 /**
@@ -19,7 +19,7 @@ class DSRAccordion extends Component {
         const buttonId = 'accordion-control';
         const contentId = 'accordion-panel';
         const Heading = this.props.tag || this.props.headingTag;
-        const style = minifyCss(getComponentCss$1f(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky));
+        const style = minifyCss(getComponentCss$1g(this.props.size, this.props.compact, this.props.open, this.props.theme, this.props.sticky));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsx(Heading, { className: "heading", children: jsxs("button", { id: buttonId, type: "button", "aria-expanded": this.props.open ? 'true' : 'false', "aria-controls": contentId, children: [this.props.heading || jsx("slot", { name: "heading" }), jsx("span", { className: "icon-container", children: jsx(PIcon, { className: "icon", name: this.props.open ? 'minus' : 'plus', theme: this.props.theme, size: "xx-small", "aria-hidden": "true" }) })] }) }), jsx("div", { id: contentId, className: "collapsible", role: "region", "aria-labelledby": buttonId, children: jsx("div", { children: jsx("slot", {}) }) })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/banner.mjs

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getBannerCss as getComponentCss$1e } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getBannerCss as getComponentCss$1f } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { PInlineNotification } from '../components/inline-notification.wrapper.mjs';
 
 /**
@@ -21,9 +21,9 @@ class DSRBanner extends Component {
         return this.props.persistent ? false : this.props.dismissButton;
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasTitleSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
-        const style = minifyCss(getComponentCss$1e(this.props.open));
+        const style = minifyCss(getComponentCss$1f(this.props.open));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx(Fragment, { children: jsxs(PInlineNotification, { heading: this.props.heading, headingTag: this.props.headingTag, description: this.props.description, state: this.props.state, dismissButton: this.hasDismissButton, theme: this.props.theme, "aria-hidden": this.props.open ? 'false' : 'true', children: [namedSlotChildren.filter(({ props: { slot } }) => slot === 'heading').length > 0 ? (jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsx("slot", { name: "description" })] }) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-group.mjs

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getButtonGroupCss as getComponentCss$1d } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonGroupCss as getComponentCss$1e } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 
 /**
  * @slot {"name": "", "description": "Default slot for the buttons to group." }
@@ -11,7 +11,7 @@ class DSRButtonGroup extends Component {
     host;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(getComponentCss$1d(this.props.direction));
+        const style = minifyCss(getComponentCss$1e(this.props.direction));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsx("div", { role: "group", children: jsx("slot", {}) })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.mjs

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getButtonPureCss as getComponentCss$1c } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonPureCss as getComponentCss$1d } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isDisabledOrLoading, hasVisibleIcon, getButtonPureAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
@@ -29,7 +29,7 @@ class DSRButtonPure extends Component {
             size: 'inherit',
             theme: this.props.theme,
         };
-        const style = minifyCss(getComponentCss$1c(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline, this.props.theme));
+        const style = minifyCss(getComponentCss$1d(this.props.icon, this.props.iconSource, this.props.active, this.props.loading, this.isDisabledOrLoading, this.props.stretch, this.props.size, this.props.hideLabel, this.props.alignLabel, this.props.underline, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...getButtonPureAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingId : undefined, children: [this.props.loading ? (jsx(PSpinner, { ...iconProps, "aria-hidden": "true" })) : (hasIcon && (jsx(PIcon, { ...iconProps, name: this.props.icon, source: this.props.iconSource, color: this.isDisabledOrLoading ? 'state-disabled' : 'primary', theme: this.props.theme, "aria-hidden": "true" }))), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-tile.mjs

@@ -3,7 +3,7 @@ import { Component, createElement } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getButtonTileCss as getComponentCss$1b } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getButtonTileCss as getComponentCss$1c } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isDisabledOrLoading } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButton } from '../components/button.wrapper.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
@@ -27,7 +27,7 @@ class DSRButtonTile extends Component {
         };
         const button = (createElement(PButton, { ...buttonProps, icon: this.props.icon, key: "link-or-button", className: "link-or-button" }, this.props.label));
         const buttonPure = (createElement(PButtonPure, { ...buttonProps, key: "link-or-button-pure", className: "link-or-button-pure", hideLabel: true, icon: this.props.icon === 'none' ? 'arrow-right' : this.props.icon }, this.props.label));
-        const style = minifyCss(getComponentCss$1b(isDisabledOrLoading(this.props.disabled, this.props.loading), this.props.aspectRatio, this.props.size, this.props.weight, this.props.background, this.props.align, this.props.compact, this.props.gradient, this.props.disabled));
+        const style = minifyCss(getComponentCss$1c(isDisabledOrLoading(this.props.disabled, this.props.loading), this.props.aspectRatio, this.props.size, this.props.weight, this.props.background, this.props.align, this.props.compact, this.props.gradient, this.props.disabled));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs("div", { className: "root", children: [jsx("slot", { name: "header" }), jsx("div", { className: "media", children: jsx("slot", {}) }), jsxs("div", { className: "footer", children: [jsx("p", { children: this.props.description }), typeof this.props.compact === 'boolean' ? (this.props.compact ? buttonPure : button) : [buttonPure, button]] })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button.mjs

@@ -3,8 +3,8 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getButtonCss as getComponentCss$1a } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
-import { getButtonAriaAttributes, hasVisibleIcon } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
+import { getButtonCss as getComponentCss$1b } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { hasVisibleIcon, getButtonAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { loadingId, LoadingMessage } from './loading-message.mjs';
 import { PIcon } from '../components/icon.wrapper.mjs';
 import { PSpinner } from '../components/spinner.wrapper.mjs';
@@ -19,7 +19,7 @@ class DSRButton extends Component {
     initialLoading = false;
     render() {
         splitChildren(this.props.children);
-        const style = minifyCss(getComponentCss$1a(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.compact, this.props.theme));
+        const style = minifyCss(getComponentCss$1b(this.props.icon, this.props.iconSource, this.props.variant, this.props.hideLabel, this.props.disabled, this.props.loading, this.props.compact, this.props.theme));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("button", { ...getButtonAriaAttributes(this.props.disabled, this.props.loading, this.props.aria), className: "root", type: this.props.type, name: this.props.name, value: this.props.value, "aria-describedby": this.props.loading ? loadingId : undefined, children: [this.props.loading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" })), hasVisibleIcon(this.props.icon, this.props.iconSource) && (jsx(PIcon, { className: "icon", size: "inherit", name: this.props.iconSource ? undefined : this.props.icon, source: this.props.iconSource, color: this.props.disabled ? (this.props.variant === 'primary' ? 'contrast-high' : 'state-disabled') : 'primary', theme: this.props.theme, "aria-hidden": "true" })), jsx("span", { className: "label", children: jsx("slot", {}) })] }), jsx(LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/canvas.mjs

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getCanvasCss as getComponentCss$19 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getCanvasCss as getComponentCss$1a } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { PButton } from '../components/button.wrapper.mjs';
 import { PCrest } from '../components/crest.wrapper.mjs';
 import { PFlyout } from '../components/flyout.wrapper.mjs';
@@ -38,13 +38,13 @@ class DSRCanvas extends Component {
     // private header: any;
     // 
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren(this.props.children);
         const hasTitle = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
         const hasSidebarEnd = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end').length > 0;
         const hasSidebarEndHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'sidebar-end-header').length > 0;
         const hasFooter = namedSlotChildren.filter(({ props: { slot } }) => slot === 'footer').length > 0;
         const hasBackground = namedSlotChildren.filter(({ props: { slot } }) => slot === 'background').length > 0;
-        const style = minifyCss(getComponentCss$19(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen));
+        const style = minifyCss(getComponentCss$1a(this.props.theme, this.props.sidebarStartOpen, this.props.sidebarEndOpen));
         return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("div", { className: "root", children: [jsxs("header", { className: "header", tabIndex: -1, children: [jsxs("div", { className: "blur", children: [jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {}), jsx("div", {})] }), jsxs("div", { className: "header__area header__area--start", children: [!this.props.sidebarStartOpen && (jsxs(PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] })), jsx("slot", { name: "header-start" })] }), jsx(PCrest, { className: "header__crest" }), jsx(PWordmark, { className: "header__wordmark", size: "inherit", theme: this.props.theme }), jsx("div", { className: "header__area header__area--end", children: jsx("slot", { name: "header-end" }) })] }), this.props.isMediaQueryS && (jsx("aside", { className: "sidebar sidebar--start", inert: !this.props.sidebarStartOpen, "aria-label": `Navigation sidebar ${this.props.sidebarStartOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxs("div", { className: "sidebar__scroller", children: [jsxs("div", { className: "sidebar__header sidebar__header--start", children: [jsxs(PButton, { theme: this.props.theme, icon: "sidebar", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarStartOpen }, children: [this.props.sidebarStartOpen ? 'Close' : 'Open', " navigation sidebar"] }), hasTitle && (jsx("h2", { children: jsx("slot", { name: "title" }) }))] }), jsx("div", { className: "sidebar__content", children: jsx("slot", { name: "sidebar-start" }) })] }) })), jsx("main", { className: "main", children: jsx("slot", {}) }), hasSidebarEnd && this.props.isMediaQueryM && (jsx("aside", { className: "sidebar sidebar--end", inert: !this.props.sidebarEndOpen, "aria-label": `Settings sidebar ${this.props.sidebarEndOpen ? 'open' : 'closed'}`, tabIndex: -1, children: jsxs("div", { className: "sidebar__scroller", children: [jsxs("div", { className: "sidebar__header sidebar__header--end", children: [jsx("slot", { name: "sidebar-end-header" }), jsxs(PButton, { theme: this.props.theme, icon: "close", variant: "ghost", compact: true, "hide-label": "true", aria: { 'aria-expanded': this.props.sidebarEndOpen }, children: [this.props.sidebarEndOpen ? 'Close' : 'Open', " settings sidebar"] })] }), jsx("div", { className: "sidebar__content", children: jsx("slot", { name: "sidebar-end" }) })] }) })), hasFooter && (jsx("footer", { className: "footer", children: jsx("slot", { name: "footer" }) })), hasBackground && jsx("slot", { name: "background" })] }), !this.props.isMediaQueryS && (jsxs(PFlyout, { className: "flyout-start", theme: this.props.theme, open: this.props.sidebarStartOpen, position: "start", children: [hasTitle && (jsx("h2", { slot: "header", children: jsx("slot", { name: "title" }) })), jsx("slot", { name: "sidebar-start" })] })), hasSidebarEnd && !this.props.isMediaQueryM && (jsxs(PFlyout, { className: "flyout-end", theme: this.props.theme, open: this.props.sidebarEndOpen, position: "end", children: [hasSidebarEndHeader && jsx("slot", { slot: "header", name: "sidebar-end-header" }), jsx("slot", { name: "sidebar-end" })] }))] })] }), this.props.children] }));
     }
 }

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.mjs

@@ -3,7 +3,7 @@ import { Component } from 'react';
 import '../../provider.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { minifyCss } from '../../minifyCss.mjs';
-import { getCarouselCss as getComponentCss$18 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
+import { getCarouselCss as getComponentCss$19 } from '../../../../../../components/dist/styles/esm/styles-entry.mjs';
 import { isInfinitePagination, parseAndGetAriaAttributes } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
 import { PButtonPure } from '../components/button-pure.wrapper.mjs';
 import { PLinkPure } from '../components/link-pure.wrapper.mjs';
@@ -32,7 +32,7 @@ class DSRCarousel extends Component {
         return this.props.slidesPerPage === 'auto' || this.props.amountOfPages > 1;
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const alignHeaderDeprecationMap = {
             left: 'start',
         };
@@ -47,7 +47,7 @@ class DSRCarousel extends Component {
             // 'aria-controls': 'splide-track', // TODO: cross shadow dom? use native button tag instead of p-button-pure?
         };
         const headingId = 'heading';
-        const style = minifyCss(getComponentCss$18(this.props.gradientColor, hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
+        const style = minifyCss(getComponentCss$19(this.props.gradientColor, hasHeadingPropOrSlot, hasDescriptionPropOrSlot, hasControlsSlot, this.props.headingSize, this.props.width, 
         // flip boolean values of disablePagination since it is the inverse of pagination
         this.props.disablePagination
             ? typeof this.props.disablePagination === 'object'