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

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

@@ -2733,11 +2733,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);
@@ -3637,7 +3641,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), {});
 };
@@ -3811,7 +3815,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];
@@ -3894,20 +3897,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) => {
@@ -3934,7 +3923,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';
@@ -4106,7 +4095,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': {
@@ -4178,7 +4167,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$1d = (direction) => {
+const getComponentCss$1e = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4331,7 +4320,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: {
@@ -4369,7 +4358,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': {
@@ -4639,7 +4628,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');
@@ -4715,7 +4704,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({
@@ -5094,7 +5083,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();
@@ -5552,7 +5541,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);
@@ -5754,7 +5743,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);
@@ -6178,7 +6167,7 @@ const widthMap = {
     basic: gridBasicOffset,
     extended: gridExtendedOffset,
 };
-const getComponentCss$15 = (width) => {
+const getComponentCss$16 = (width) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6220,7 +6209,7 @@ const getDimensionStyle = {
     width: 'inherit',
     height: 'inherit',
 };
-const getComponentCss$14 = () => {
+const getComponentCss$15 = () => {
     return getCss({
         '@global': {
             ':host': {
@@ -6319,7 +6308,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': {
@@ -6337,7 +6326,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 = {
@@ -6398,7 +6387,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({
@@ -6645,7 +6634,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': {
@@ -6876,7 +6865,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
@@ -6928,7 +6917,7 @@ const getComponentCss$$ = (hasSlottedAnchor, isActive) => {
     });
 };
 
-const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$$ = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -6965,7 +6954,7 @@ const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
     });
 };
 
-const getComponentCss$Z = (state, labelSize, hasLabel, theme) => {
+const getComponentCss$_ = (state, labelSize, hasLabel, theme) => {
     return getCss({
         '@global': {
             ':host': {
@@ -7012,7 +7001,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({
@@ -7034,7 +7023,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': {
@@ -7231,7 +7220,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({
@@ -7343,7 +7332,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({
@@ -7363,7 +7352,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': {
@@ -7389,7 +7378,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': {
@@ -7449,7 +7438,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': {
@@ -7560,7 +7549,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);
@@ -7679,7 +7668,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': {
@@ -7719,6 +7708,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."}
@@ -9499,6 +9508,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) => {
@@ -11503,39 +11513,40 @@ const getComponentCss = (size, theme) => {
 exports.cssVarButtonPureMargin = cssVarButtonPureMargin;
 exports.cssVarButtonPurePadding = cssVarButtonPurePadding;
 exports.cssVarInternalInputBaseScaling = cssVarInternalInputBaseScaling;
-exports.getAccordionCss = getComponentCss$1f;
-exports.getBannerCss = getComponentCss$1e;
-exports.getButtonCss = getComponentCss$1a;
-exports.getButtonGroupCss = getComponentCss$1d;
-exports.getButtonPureCss = getComponentCss$1c;
-exports.getButtonTileCss = getComponentCss$1b;
-exports.getCanvasCss = getComponentCss$19;
-exports.getCarouselCss = getComponentCss$18;
-exports.getCheckboxCss = getComponentCss$16;
-exports.getCheckboxWrapperCss = getComponentCss$17;
-exports.getContentWrapperCss = getComponentCss$15;
-exports.getCrestCss = getComponentCss$14;
-exports.getDisplayCss = getComponentCss$13;
-exports.getDividerCss = getComponentCss$12;
-exports.getDrilldownCss = getComponentCss$11;
-exports.getDrilldownItemCss = getComponentCss$10;
-exports.getDrilldownLinkCss = getComponentCss$$;
-exports.getFieldsetCss = getComponentCss$Z;
-exports.getFieldsetWrapperCss = getComponentCss$_;
-exports.getFlexCss = getComponentCss$X;
-exports.getFlexItemCss = getComponentCss$Y;
-exports.getFlyoutCss = getComponentCss$W;
+exports.getAccordionCss = getComponentCss$1g;
+exports.getBannerCss = getComponentCss$1f;
+exports.getButtonCss = getComponentCss$1b;
+exports.getButtonGroupCss = getComponentCss$1e;
+exports.getButtonPureCss = getComponentCss$1d;
+exports.getButtonTileCss = getComponentCss$1c;
+exports.getCanvasCss = getComponentCss$1a;
+exports.getCarouselCss = getComponentCss$19;
+exports.getCheckboxCss = getComponentCss$17;
+exports.getCheckboxWrapperCss = getComponentCss$18;
+exports.getContentWrapperCss = getComponentCss$16;
+exports.getCrestCss = getComponentCss$15;
+exports.getDisplayCss = getComponentCss$14;
+exports.getDividerCss = getComponentCss$13;
+exports.getDrilldownCss = getComponentCss$12;
+exports.getDrilldownItemCss = getComponentCss$11;
+exports.getDrilldownLinkCss = getComponentCss$10;
+exports.getFieldsetCss = getComponentCss$_;
+exports.getFieldsetWrapperCss = getComponentCss$$;
+exports.getFlexCss = getComponentCss$Y;
+exports.getFlexItemCss = getComponentCss$Z;
+exports.getFlyoutCss = getComponentCss$X;
 exports.getFunctionalComponentInputBaseStyles = getFunctionalComponentInputBaseStyles;
 exports.getFunctionalComponentLabelStyles = getFunctionalComponentLabelStyles;
 exports.getFunctionalComponentLoadingMessageStyles = getFunctionalComponentLoadingMessageStyles;
 exports.getFunctionalComponentRequiredStyles = getFunctionalComponentRequiredStyles;
 exports.getFunctionalComponentStateMessageStyles = getFunctionalComponentStateMessageStyles;
-exports.getGridCss = getComponentCss$U;
-exports.getGridItemCss = getComponentCss$V;
-exports.getHeadingCss = getComponentCss$T;
-exports.getHeadlineCss = getComponentCss$S;
-exports.getIconCss = getComponentCss$R;
-exports.getInlineNotificationCss = getComponentCss$Q;
+exports.getGridCss = getComponentCss$V;
+exports.getGridItemCss = getComponentCss$W;
+exports.getHeadingCss = getComponentCss$U;
+exports.getHeadlineCss = getComponentCss$T;
+exports.getIconCss = getComponentCss$S;
+exports.getInlineNotificationCss = getComponentCss$R;
+exports.getInputEmailCss = getComponentCss$Q;
 exports.getInputNumberCss = getComponentCss$P;
 exports.getInputPasswordCss = getComponentCss$O;
 exports.getInputSearchCss = getComponentCss$N;

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

@@ -2733,11 +2733,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);
@@ -3511,7 +3515,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/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/input-email.wrapper.cjs

@@ -0,0 +1,40 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+var inputEmail = require('../dsr-components/input-email.cjs');
+
+const PInputEmail = /*#__PURE__*/ react.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 = react.useRef(undefined);
+    hooks.useEventCallback(elementRef, 'blur', onBlur);
+    hooks.useEventCallback(elementRef, 'change', onChange);
+    hooks.useEventCallback(elementRef, 'input', onInput);
+    const WebComponentTag = hooks.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 || hooks.useTheme(), value];
+    hooks.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: (jsxRuntime.jsx(inputEmail.DSRInputEmail, { autoComplete, compact, description, disabled, form, hideLabel, indicator, label, loading, maxLength, message, minLength, multiple, name, pattern, placeholder, readOnly, required, state, theme: theme || hooks.useTheme(), value, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        'data-ssr': '',
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PInputEmail = PInputEmail;

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

@@ -23,7 +23,7 @@ class DSRBanner extends react.Component {
         return this.props.persistent ? false : this.props.dismissButton;
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasTitleSlot = namedSlotChildren.filter(({ props: { slot } }) => slot === 'title').length > 0;
         const style = minifyCss.minifyCss(stylesEntry.getBannerCss(this.props.open));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(inlineNotification_wrapper.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 ? (jsxRuntime.jsx("slot", { name: "heading", slot: "heading" })) : (hasTitleSlot && jsxRuntime.jsx("slot", { name: "title", slot: "heading" })), namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0 && jsxRuntime.jsx("slot", { name: "description" })] }) })] }), this.props.children] }));

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

@@ -40,7 +40,7 @@ class DSRCanvas extends react.Component {
     // private header: any;
     // 
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.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;

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

@@ -34,7 +34,7 @@ class DSRCarousel extends react.Component {
         return this.props.slidesPerPage === 'auto' || this.props.amountOfPages > 1;
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const alignHeaderDeprecationMap = {
             left: 'start',
         };

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox-wrapper.cjs

@@ -21,7 +21,7 @@ class DSRCheckboxWrapper extends react.Component {
     initialLoading = false;
     input;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
         const { disabled } = typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props || {};
         const style = minifyCss.minifyCss(stylesEntry.getCheckboxWrapperCss(this.props.hideLabel, this.props.state, disabled, this.props.loading, this.props.theme));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(legacyLabel.LegacyLabel, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: this.props.label, isLoading: this.props.loading, isDisabled: disabled, formElement: typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", {}), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.cjs

@@ -32,7 +32,7 @@ class DSRCheckbox extends react.Component {
     formStateRestoreCallback() {
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const id = 'checkbox';
         const style = minifyCss.minifyCss(stylesEntry.getCheckboxCss(this.props.hideLabel, this.props.state, this.props.disabled, this.props.loading, this.props.compact, this.props.theme));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, htmlFor: id, label: this.props.label, isLoading: this.props.loading, isDisabled: this.props.disabled, isRequired: this.props.required }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("input", { type: "checkbox", id: id, "aria-describedby": `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": this.props.state === 'error' ? 'true' : null, "aria-disabled": this.props.loading || this.props.disabled ? 'true' : null, checked: this.props.checked, form: this.props.form, value: this.props.value, name: this.props.name, onBlur: this.props.onBlur, required: this.props.required, disabled: this.props.disabled }), this.props.loading && (jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, "aria-hidden": "true" }))] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: this.props.loading, initialLoading: this.props.initialLoading })] })] }), this.props.children] }));

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/drilldown-item.cjs

@@ -23,7 +23,7 @@ class DSRDrilldownItem extends react.Component {
         return this.props.theme || 'light'; // default as fallback (internal private prop is controlled by drilldown)
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasSlottedHeader = namedSlotChildren.filter(({ props: { slot } }) => slot === 'header').length > 0;
         const hasSlottedButton = namedSlotChildren.filter(({ props: { slot } }) => slot === 'button').length > 0;
         const style = minifyCss.minifyCss(stylesEntry.getDrilldownItemCss(this.props.primary, this.props.secondary, this.props.cascade));

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/fieldset-wrapper.cjs

@@ -18,7 +18,7 @@ var required = require('./required.cjs');
 class DSRFieldsetWrapper extends react.Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasMessageValue = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
         const style = minifyCss.minifyCss(stylesEntry.getFieldsetWrapperCss(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("fieldset", { "aria-describedby": hasMessageValue ? stateMessage.messageId : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsxs("legend", { children: [this.props.label || jsxRuntime.jsx("slot", { name: "label" }), this.props.required && jsxRuntime.jsx(required.Required, {})] })), jsxRuntime.jsx("slot", {}), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/fieldset.cjs

@@ -16,7 +16,7 @@ var required = require('./required.cjs');
 class DSRFieldset extends react.Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const hasMessageValue = (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state);
         const style = minifyCss.minifyCss(stylesEntry.getFieldsetCss(this.props.state, this.props.labelSize, (this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0), this.props.theme));
         return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("fieldset", { "aria-describedby": hasMessageValue ? stateMessage.messageId : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsxRuntime.jsxs("legend", { children: [this.props.label || jsxRuntime.jsx("slot", { name: "label" }), this.props.required && jsxRuntime.jsx(required.Required, {})] })), jsxRuntime.jsx("slot", {}), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state), state: this.props.state, message: this.props.message, theme: this.props.theme, host: null })] })] }), this.props.children] }));

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout.cjs

@@ -27,7 +27,7 @@ class DSRFlyout extends react.Component {
     hasFooter;
     hasSubFooter;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const positionDeprecationMap = {
             left: 'start',
             right: 'end',

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/grid.cjs

@@ -14,7 +14,7 @@ var stylesEntry = require('../../../../../../components/dist/styles/esm/styles-e
 class DSRGrid extends react.Component {
     host;
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { children, otherChildren } = splitChildren.splitChildren(this.props.children);
         const manipulatedChildren = children.map((child) => typeof child === 'object' && 'props' in child && otherChildren.includes(child)
             ? { ...child, props: { ...child.props, gutter: this.props.gutter } }
             : child);

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/inline-notification.cjs

@@ -21,7 +21,7 @@ class DSRInlineNotification extends react.Component {
         return this.props.persistent ? false : this.props.dismissButton;
     }
     render() {
-        const { children, namedSlotChildren, otherChildren } = splitChildren.splitChildren(this.props.children);
+        const { namedSlotChildren} = splitChildren.splitChildren(this.props.children);
         const bannerId = 'banner';
         const labelId = 'label';
         const descriptionId = 'description';

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/input-base.cjs

@@ -12,7 +12,7 @@ var spinner_wrapper = require('../components/spinner.wrapper.cjs');
 
 const InputBase = ({ children, 
 // host,
-id, label: label$1, description, loading, initialLoading, required, disabled, state, message, theme, readOnly, type, form, placeholder, maxLength, minLength, max, min, value, step, spellCheck, autoComplete, name, 
+id, label: label$1, description, loading, initialLoading, required, disabled, state, message, theme, readOnly, type, form, placeholder, maxLength, minLength, max, min, value, step, spellCheck, autoComplete, pattern, multiple, name, 
 // onInput,
 // onWheel,
 // onChange,
@@ -20,7 +20,7 @@ id, label: label$1, description, loading, initialLoading, required, disabled, st
 // refElement,
 start, end, }) => {
     const { namedSlotChildren } = splitChildren.splitChildren(children);
-    return (jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: !!label$1 || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label$1, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", { name: "start" }), start, jsxRuntime.jsx("input", { "aria-describedby": loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, value: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
+    return (jsxRuntime.jsxs("div", { className: "root", children: [jsxRuntime.jsx(label.Label, { hasLabel: !!label$1 || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label$1, description: description, htmlFor: id, isRequired: required, isLoading: loading, isDisabled: disabled }), jsxRuntime.jsxs("div", { className: "wrapper", children: [jsxRuntime.jsx("slot", { name: "start" }), start, jsxRuntime.jsx("input", { "aria-describedby": loading ? loadingMessage.loadingId : `${utilsEntry.descriptionId} ${stateMessage.messageId}`, "aria-invalid": state === 'error' ? 'true' : null, "aria-disabled": disabled || loading ? 'true' : null, "aria-readonly": readOnly ? 'true' : null, id: id, name: name, form: form, type: type, required: required, placeholder: placeholder, maxLength: maxLength, minLength: minLength, spellCheck: spellCheck, max: max, min: min, step: step, value: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled, pattern: pattern, multiple: multiple }), end, jsxRuntime.jsx("slot", { name: "end" }), loading && jsxRuntime.jsx(spinner_wrapper.PSpinner, { className: "spinner", size: "inherit", theme: theme, "aria-hidden": "true" })] }), jsxRuntime.jsx(stateMessage.StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null }), jsxRuntime.jsx(loadingMessage.LoadingMessage, { loading: loading, initialLoading: initialLoading })] }));
 };
 
 exports.InputBase = InputBase;