@porsche-design-system/components-react 2.20.0-rc.1 → 3.0.0-alpha.0

package/lib/components/headline.wrapper.d.ts

@@ -1,20 +1,20 @@
 import { HTMLAttributes } from 'react';
-import type { TextAlign, TextColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
+import type { HeadlineAlign, HeadlineColor, HeadlineTag, Theme, HeadlineVariant } from '../types';
 export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Text alignment of the component.
      */
-    align?: TextAlign;
+    align?: HeadlineAlign;
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: Extract<TextColor, "default" | "inherit">;
+    color?: HeadlineColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
     ellipsis?: boolean;
     /**
-     * Sets a custom HTML tag depending of the usage of the headline component.
+     * Sets a custom HTML tag depending on the usage of the headline component.
      */
     tag?: HeadlineTag;
     /**
@@ -26,21 +26,22 @@ export type PHeadlineProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     variant?: HeadlineVariant;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
 export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Text alignment of the component.
      */
-    align?: TextAlign;
+    align?: HeadlineAlign;
     /**
      * Basic text color variations depending on theme property.
      */
-    color?: Extract<TextColor, "default" | "inherit">;
+    color?: HeadlineColor;
     /**
      * Adds an ellipsis to a single line of text if it overflows.
      */
     ellipsis?: boolean;
     /**
-     * Sets a custom HTML tag depending of the usage of the headline component.
+     * Sets a custom HTML tag depending on the usage of the headline component.
      */
     tag?: HeadlineTag;
     /**

package/lib/components/headline.wrapper.js

@@ -5,7 +5,8 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PHeadline = /*#__PURE__*/ react.forwardRef(({ align = 'left', color = 'default', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
+/** @deprecated since v3.0.0, will be removed with next major release. Please use "p-heading" instead. */
+const PHeadline = react.forwardRef(({ align = 'left', color = 'primary', ellipsis = false, tag, theme = 'light', variant = 'headline-1', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-headline');
     const propsToSync = [align, color, ellipsis, tag, theme, variant];

package/lib/components/icon.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, IconAriaAttribute, TextColor, IconName, IconSize, ThemeExtendedElectricDark } from '../types';
+import type { SelectedAriaAttributes, IconAriaAttribute, IconColor, IconName, IconSize, Theme } from '../types';
 export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -8,9 +8,10 @@ export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Basic color variations depending on theme property.
      */
-    color?: TextColor;
+    color?: IconColor;
     /**
-     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     lazy?: boolean;
     /**
@@ -26,9 +27,9 @@ export type PIconProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     source?: string;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
 };
 export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -38,9 +39,10 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Basic color variations depending on theme property.
      */
-    color?: TextColor;
+    color?: IconColor;
     /**
-     * If enabled, icon will be loaded lazily when it's visible in the viewport.
+     * Has no effect anymore
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     lazy?: boolean;
     /**
@@ -56,7 +58,7 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
      */
     source?: string;
     /**
-     * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
+     * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/icon.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PIcon = /*#__PURE__*/ react.forwardRef(({ aria, color = 'default', lazy = false, name = 'arrow-head-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
+const PIcon = react.forwardRef(({ aria, color = 'primary', lazy = false, name = 'arrow-right', size = 'small', source, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-icon');
     const propsToSync = [aria, color, lazy, name, size, source, theme];

package/lib/components/index.d.ts

@@ -6,12 +6,14 @@ export * from './button-pure.wrapper';
 export * from './carousel.wrapper';
 export * from './checkbox-wrapper.wrapper';
 export * from './content-wrapper.wrapper';
+export * from './display.wrapper';
 export * from './divider.wrapper';
 export * from './fieldset-wrapper.wrapper';
 export * from './flex.wrapper';
 export * from './flex-item.wrapper';
 export * from './grid.wrapper';
 export * from './grid-item.wrapper';
+export * from './heading.wrapper';
 export * from './headline.wrapper';
 export * from './icon.wrapper';
 export * from './inline-notification.wrapper';

package/lib/components/inline-notification.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PInlineNotification = /*#__PURE__*/ react.forwardRef(({ actionIcon = 'arrow-head-right', actionLabel, actionLoading = false, description = '', heading = '', onAction, onDismiss, persistent = false, state = 'neutral', theme = 'light', className, ...rest }, ref) => {
+const PInlineNotification = react.forwardRef(({ actionIcon = 'arrow-right', actionLabel, actionLoading = false, description = '', heading = '', onAction, onDismiss, persistent = false, state = 'info', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'action', onAction);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);

package/lib/components/link-pure.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkAriaAttribute, LinkButtonPureIconName, TextSize, LinkTarget, ThemeExtendedElectricDark, TextWeight } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SelectedAriaAttributes, LinkAriaAttribute, LinkButtonIconName, TextSize, LinkTarget, Theme, TextWeight } from '../types';
 export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Display link in active state.
@@ -28,7 +28,7 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * The icon shown. By choosing 'none', no icon is displayed
      */
-    icon?: LinkButtonPureIconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -52,9 +52,14 @@ export type PLinkPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     weight?: TextWeight;
 };
@@ -86,7 +91,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * The icon shown. By choosing 'none', no icon is displayed
      */
-    icon?: LinkButtonPureIconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -110,9 +115,14 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
+    /**
+     * Shows an underline under the label.
+     */
+    underline?: boolean;
     /**
      * The weight of the text (only has effect with visible label).
+     * @deprecated since v3.0.0, will be removed with next major release
      */
     weight?: TextWeight;
 } & {

package/lib/components/link-pure.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PLinkPure = /*#__PURE__*/ react.forwardRef(({ active = false, alignLabel = 'right', aria, download, hideLabel = false, href, icon = 'arrow-head-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', weight = 'regular', className, ...rest }, ref) => {
+const PLinkPure = react.forwardRef(({ active = false, alignLabel = 'right', aria, download, hideLabel = false, href, icon = 'arrow-right', iconSource, rel, size = 'small', stretch = false, target = '_self', theme = 'light', underline = false, weight = 'regular', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-pure');
-    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, weight];
+    const propsToSync = [active, alignLabel, aria, download, hideLabel, href, icon, iconSource, rel, size, stretch, target, theme, underline, weight];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['active', 'alignLabel', 'aria', 'download', 'hideLabel', 'href', 'icon', 'iconSource', 'rel', 'size', 'stretch', 'target', 'theme', 'underline', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/link-social.wrapper.d.ts

@@ -30,6 +30,7 @@ export type PLinkSocialProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     theme?: Theme;
 };
+/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social instead. */
 export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
      * Show or hide label.

package/lib/components/link-social.wrapper.js

@@ -5,7 +5,8 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PLinkSocial = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
+/** @deprecated since v3.0.0, will be removed with next major release. Use `p-link` with corresponding social instead. */
+const PLinkSocial = react.forwardRef(({ hideLabel = false, href, icon, iconSource, rel, target = '_self', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-social');
     const propsToSync = [hideLabel, href, icon, iconSource, rel, target, theme];

package/lib/components/link-tile.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PLinkTile = /*#__PURE__*/ react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semibold', className, ...rest }, ref) => {
+const PLinkTile = react.forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', compact = false, description, download, gradient = true, href, label, rel, size = 'default', target = '_self', weight = 'semibold', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link-tile');
     const propsToSync = [align, aria, aspectRatio, compact, description, download, gradient, href, label, rel, size, target, weight];

package/lib/components/link.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, IconName, LinkTarget, ThemeExtendedElectric, LinkVariant } from '../types';
+import type { SelectedAriaAttributes, LinkAriaAttribute, BreakpointCustomizable, LinkButtonIconName, LinkTarget, Theme, LinkVariant } from '../types';
 export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -18,9 +18,9 @@ export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     href?: string;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -36,7 +36,7 @@ export type PLinkProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * The style variant of the link.
      */
@@ -60,9 +60,9 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLA
      */
     href?: string;
     /**
-     * The icon shown.
+     * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: IconName;
+    icon?: LinkButtonIconName;
     /**
      * A URL path to a custom icon.
      */
@@ -78,7 +78,7 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
     /**
      * The style variant of the link.
      */

package/lib/components/link.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PLink = /*#__PURE__*/ react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'arrow-head-right', iconSource, rel, target = '_self', theme = 'light', variant = 'secondary', className, ...rest }, ref) => {
+const PLink = react.forwardRef(({ aria, download, hideLabel = false, href, icon = 'none', iconSource, rel, target = '_self', theme = 'light', variant = 'primary', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-link');
     const propsToSync = [aria, download, hideLabel, href, icon, iconSource, rel, target, theme, variant];

package/lib/components/marque.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PMarque = /*#__PURE__*/ react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
+const PMarque = react.forwardRef(({ aria, href, size = 'responsive', target = '_self', trademark = true, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-marque');
     const propsToSync = [aria, href, size, target, trademark];

package/lib/components/modal.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PModal = /*#__PURE__*/ react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton = false, fullscreen = false, heading, onClose, open = false, className, ...rest }, ref) => {
+const PModal = react.forwardRef(({ aria, disableBackdropClick = false, disableCloseButton = false, fullscreen = false, heading, onClose, open = false, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'close', onClose);
     const WebComponentTag = hooks.usePrefix('p-modal');

package/lib/components/pagination.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PPagination = /*#__PURE__*/ react.forwardRef(({ activePage = 1, allyLabel = 'Pagination', allyLabelNext = 'Next page', allyLabelPage = 'Page', allyLabelPrev = 'Previous page', itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
+const PPagination = react.forwardRef(({ activePage = 1, allyLabel = 'Pagination', allyLabelNext = 'Next page', allyLabelPage = 'Page', allyLabelPrev = 'Previous page', itemsPerPage = 1, maxNumberOfPageLinks = { base: 5, xs: 7, }, onPageChange, theme = 'light', totalItemsCount = 1, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'pageChange', onPageChange);
     const WebComponentTag = hooks.usePrefix('p-pagination');

package/lib/components/popover.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, PopoverDirection } from '../types';
+import type { SelectedAriaAttributes, PopoverDirection, Theme } from '../types';
 export type PPopoverProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -13,6 +13,10 @@ export type PPopoverProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: PopoverDirection;
+    /**
+     * Adapts the popover color depending on the theme.
+     */
+    theme?: Theme;
 };
 export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -27,6 +31,10 @@ export declare const PPopover: import("react").ForwardRefExoticComponent<Omit<HT
      * Preferred direction in which popover should open, given there is enough space in viewport. Otherwise, it will be opened in the direction with most available space.
      */
     direction?: PopoverDirection;
+    /**
+     * Adapts the popover color depending on the theme.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/popover.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PPopover = /*#__PURE__*/ react.forwardRef(({ aria, description, direction = 'bottom', className, ...rest }, ref) => {
+const PPopover = react.forwardRef(({ aria, description, direction = 'bottom', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-popover');
-    const propsToSync = [aria, description, direction];
+    const propsToSync = [aria, description, direction, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'description', 'direction'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'description', 'direction', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/radio-button-wrapper.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, FormState } from '../types';
+import type { BreakpointCustomizable, FormState, Theme } from '../types';
 export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
@@ -17,6 +17,10 @@ export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
 };
 export declare const PRadioButtonWrapper: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -35,6 +39,10 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
      * The validation state.
      */
     state?: FormState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/radio-button-wrapper.wrapper.js

@@ -5,13 +5,13 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PRadioButtonWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', className, ...rest }, ref) => {
+const PRadioButtonWrapper = react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-radio-button-wrapper');
-    const propsToSync = [hideLabel, label, message, state];
+    const propsToSync = [hideLabel, label, message, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['hideLabel', 'label', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/lib/components/scroller.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, ThemeExtendedElectric } from '../types';
+import type { GradientColorTheme, ScrollIndicatorPosition, ScrollToPosition, Theme } from '../types';
 export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the background gradient color of prev and next button.
@@ -16,7 +16,7 @@ export type PScrollerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
 };
 export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -34,7 +34,7 @@ export declare const PScroller: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/scroller.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PScroller = /*#__PURE__*/ react.forwardRef(({ gradientColorScheme = 'default', scrollIndicatorPosition = 'center', scrollToPosition, theme = 'light', className, ...rest }, ref) => {
+const PScroller = react.forwardRef(({ gradientColorScheme = 'default', scrollIndicatorPosition = 'center', scrollToPosition, theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-scroller');
     const propsToSync = [gradientColorScheme, scrollIndicatorPosition, scrollToPosition, theme];

package/lib/components/segmented-control-item.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSegmentedControlItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
+const PSegmentedControlItem = react.forwardRef(({ disabled = false, icon, iconSource, label, value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-segmented-control-item');
     const propsToSync = [disabled, icon, iconSource, label, value];

package/lib/components/segmented-control.wrapper.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react';
 import type { SegmentedControlBackgroundColor, SegmentedControlChangeEvent, Theme } from '../types';
 export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
-     * Background color variations
+     * @deprecated Background color variations
      */
     backgroundColor?: SegmentedControlBackgroundColor;
     /**
@@ -20,7 +20,7 @@ export type PSegmentedControlProps = Omit<HTMLAttributes<{}>, 'color'> & {
 };
 export declare const PSegmentedControl: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
-     * Background color variations
+     * @deprecated Background color variations
      */
     backgroundColor?: SegmentedControlBackgroundColor;
     /**

package/lib/components/segmented-control.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSegmentedControl = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'background-default', onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
+const PSegmentedControl = react.forwardRef(({ backgroundColor, onSegmentedControlChange, theme = 'light', value, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'segmentedControlChange', onSegmentedControlChange);
     const WebComponentTag = hooks.usePrefix('p-segmented-control');

package/lib/components/select-wrapper.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSelectWrapper = /*#__PURE__*/ react.forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PSelectWrapper = react.forwardRef(({ description = '', dropdownDirection = 'auto', filter = false, hideLabel = false, label = '', message = '', native = false, state = 'none', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-select-wrapper');
     const propsToSync = [description, dropdownDirection, filter, hideLabel, label, message, native, state, theme];

package/lib/components/spinner.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize, ThemeExtendedElectricDark } from '../types';
+import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize, Theme } from '../types';
 export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
@@ -12,7 +12,7 @@ export type PSpinnerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Adapts the spinner color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
 };
 export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -26,5 +26,5 @@ export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the spinner color depending on the theme.
      */
-    theme?: ThemeExtendedElectricDark;
+    theme?: Theme;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/spinner.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PSpinner = /*#__PURE__*/ react.forwardRef(({ aria, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PSpinner = react.forwardRef(({ aria, size = 'small', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-spinner');
     const propsToSync = [aria, size, theme];

package/lib/components/stepper-horizontal-item.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PStepperHorizontalItem = /*#__PURE__*/ react.forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
+const PStepperHorizontalItem = react.forwardRef(({ disabled = false, state, className, ...rest }, ref) => {
     const elementRef = react.useRef();
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal-item');
     const propsToSync = [disabled, state];

package/lib/components/stepper-horizontal.wrapper.js

@@ -5,7 +5,7 @@ var react = require('react');
 var hooks = require('../../hooks.js');
 var utils = require('../../utils.js');
 
-const PStepperHorizontal = /*#__PURE__*/ react.forwardRef(({ onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
+const PStepperHorizontal = react.forwardRef(({ onStepChange, size = 'small', theme = 'light', className, ...rest }, ref) => {
     const elementRef = react.useRef();
     hooks.useEventCallback(elementRef, 'stepChange', onStepChange);
     const WebComponentTag = hooks.usePrefix('p-stepper-horizontal');

package/lib/components/switch.wrapper.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-import type { BreakpointCustomizable, AlignLabel, SwitchChangeEvent, ThemeExtendedElectric } from '../types';
+import type { BreakpointCustomizable, AlignLabel, SwitchChangeEvent, Theme } from '../types';
 export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Aligns the label.
@@ -29,15 +29,10 @@ export type PSwitchProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * Stretches the contents to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean;
     /**
      * Adapts the switch color depending on the theme.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
 };
 export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
     /**
@@ -68,15 +63,10 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<HTM
      * Stretches the contents to max available space.
      */
     stretch?: BreakpointCustomizable<boolean>;
-    /**
-     * To remove the element from tab order.
-     * @deprecated since v2.8.0, use `tabindex="-1"` instead
-     */
-    tabbable?: boolean;
     /**
      * Adapts the switch color depending on the theme.
      */
-    theme?: ThemeExtendedElectric;
+    theme?: Theme;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;