@porsche-design-system/components-react 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -14,6 +14,42 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.3.0] - 2023-07-07
+
+### [3.3.0-rc.0] - 2023-07-06
+
+#### Added
+
+- `Tabs` and `Tabs Bar` support SSR ([#2611](https://github.com/porsche-design-system/porsche-design-system/pull/2611))
+- Contents of `Tag` component can now be wrapped in multiple lines
+  ([#2625](https://github.com/porsche-design-system/porsche-design-system/pull/2625))
+- `Carousel`: Possibility to set custom border-radius of slide items
+  ([#2645](https://github.com/porsche-design-system/porsche-design-system/pull/2645))
+- native lazy loading attribute to `img` tag of `Icon`
+  ([#2644](https://github.com/porsche-design-system/porsche-design-system/pull/2644))
+
+#### Fixed
+
+- `Stepper Horizontal` navigation between 2 pages is not working as expected in angular
+  ([#2641](https://github.com/porsche-design-system/porsche-design-system/pull/2641))
+- `Segmented Control` text is not centered / causing unintended line-breaks
+  ([#2614](https://github.com/porsche-design-system/porsche-design-system/pull/2614))
+- `jsdom-polyfill` fixes validation errors in unit tests during SSR hydration
+  ([#2613](https://github.com/porsche-design-system/porsche-design-system/pull/2613))
+- `Accordion` collapsable content is overflowing when used with multiple prefixes  
+  ([#2612](https://github.com/porsche-design-system/porsche-design-system/pull/2612))
+- `Tabs Bar` position of underline for fluid font-size with `size="medium` when resizing
+  ([#2611](https://github.com/porsche-design-system/porsche-design-system/pull/2611))
+- `Button Pure`, `Link Pure`: `:hover` bug on Firefox
+  ([#2630](https://github.com/porsche-design-system/porsche-design-system/pull/2630))
+- `Carousel`: Removed `overflow:hidden` of slide items
+  ([#2645](https://github.com/porsche-design-system/porsche-design-system/pull/2645))
+
+#### Changed
+
+- Improved bootstrapping behaviour of `Icon`
+  ([#2644](https://github.com/porsche-design-system/porsche-design-system/pull/2644))
+
 ### [3.2.0] - 2023-06-19
 
 ### [3.2.0-rc.0] - 2023-06-19

package/esm/hooks.js

@@ -10,7 +10,7 @@ let skipCheck = false;
 const skipCheckForPorscheDesignSystemProviderDuringTests = () => {
     skipCheck = true;
 };
-const usePrefix =  (tagName) => {
+const usePrefix = (tagName) => {
     if (process.env.NODE_ENV === 'test' && skipCheck) {
         return tagName;
     }
@@ -22,16 +22,16 @@ const usePrefix =  (tagName) => {
         return prefix ? prefix + '-' + tagName : tagName;
     }
 };
-const useEventCallback =  (ref, eventName, eventHandler) => {
+const useEventCallback = (ref, eventName, eventHandler) => {
     useEffect(() => {
         const { current } = ref;
         if (current && eventHandler) {
             current.addEventListener(eventName, eventHandler);
-            return () => current === null || current === void 0 ? void 0 : current.removeEventListener(eventName, eventHandler);
+            return () => current?.removeEventListener(eventName, eventHandler);
         }
     }, [eventHandler]); // eslint-disable-line react-hooks/exhaustive-deps
 };
-const useMergedClass =  (ref, className) => {
+const useMergedClass = (ref, className) => {
     const prevComponentClassName = useRef();
     return useMemo(() => {
         if (!className) {

package/esm/utils.js

@@ -1,5 +1,5 @@
-const splitToArray =  (str) => str.split(' ').filter((str) => str);
-const getMergedClassName =  (domClassName, oldClassName = '', newClassName = '') => {
+const splitToArray = (str) => str.split(' ').filter((str) => str);
+const getMergedClassName = (domClassName, oldClassName = '', newClassName = '') => {
     // classes previously set by component
     const prevComponentClassNames = splitToArray(oldClassName);
     // all classes not set by component -> to keep hydrated class and other classes set on host element
@@ -12,7 +12,7 @@ const getMergedClassName =  (domClassName, oldClassName = '', newClassName = '')
     const componentClasses = splitToArray(newClassName);
     return componentClasses.concat(domClasses).join(' ');
 };
-const syncRef =  (elementRef, ref) => (el) => {
+const syncRef = (elementRef, ref) => (el) => {
     elementRef.current = el;
     if (typeof ref === 'function') {
         ref(el);

package/hooks.d.ts

@@ -7,8 +7,8 @@ import type { ToastMessage } from './lib/types';
  */
 export declare const skipCheckForPorscheDesignSystemProviderDuringTests: () => void;
 export declare const usePrefix: (tagName: string) => string;
-export declare const useEventCallback: (ref: MutableRefObject<HTMLElement>, eventName: string, eventHandler: (e: Event) => void) => void;
-export declare const useMergedClass: (ref: MutableRefObject<HTMLElement>, className: string) => string;
+export declare const useEventCallback: (ref: MutableRefObject<HTMLElement | undefined>, eventName: string, eventHandler: (e: Event) => void) => void;
+export declare const useMergedClass: (ref: MutableRefObject<HTMLElement | undefined>, className?: string) => string | undefined;
 export declare const useBrowserLayoutEffect: typeof useEffect;
 export declare const useToastManager: () => {
     addMessage: (msg: ToastMessage) => void;

package/hooks.js

@@ -12,7 +12,7 @@ let skipCheck = false;
 const skipCheckForPorscheDesignSystemProviderDuringTests = () => {
     skipCheck = true;
 };
-const usePrefix =  (tagName) => {
+const usePrefix = (tagName) => {
     if (process.env.NODE_ENV === 'test' && skipCheck) {
         return tagName;
     }
@@ -24,16 +24,16 @@ const usePrefix =  (tagName) => {
         return prefix ? prefix + '-' + tagName : tagName;
     }
 };
-const useEventCallback =  (ref, eventName, eventHandler) => {
+const useEventCallback = (ref, eventName, eventHandler) => {
     react.useEffect(() => {
         const { current } = ref;
         if (current && eventHandler) {
             current.addEventListener(eventName, eventHandler);
-            return () => current === null || current === void 0 ? void 0 : current.removeEventListener(eventName, eventHandler);
+            return () => current?.removeEventListener(eventName, eventHandler);
         }
     }, [eventHandler]); // eslint-disable-line react-hooks/exhaustive-deps
 };
-const useMergedClass =  (ref, className) => {
+const useMergedClass = (ref, className) => {
     const prevComponentClassName = react.useRef();
     return react.useMemo(() => {
         if (!className) {

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { AccordionUpdateEvent, BreakpointCustomizable, AccordionSize, AccordionTag, Theme } from '../types';
 export type PAccordionProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -38,35 +38,35 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
     /**
      * Displays the Accordion as compact version with thinner border and smaller paddings.
      */
-    compact?: boolean;
+    compact?: boolean | undefined;
     /**
      * Defines the heading used in accordion.
      */
-    heading?: string;
+    heading?: string | undefined;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when accordion state is changed.
      */
-    onAccordionChange?: (event: CustomEvent<AccordionUpdateEvent>) => void;
+    onAccordionChange?: ((event: CustomEvent<AccordionUpdateEvent>) => void) | undefined;
     /**
      * Emitted when accordion state is changed.
      */
-    onUpdate?: (event: CustomEvent<AccordionUpdateEvent>) => void;
+    onUpdate?: ((event: CustomEvent<AccordionUpdateEvent>) => void) | undefined;
     /**
      * Defines if accordion is open.
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * The text size.
      */
-    size?: BreakpointCustomizable<AccordionSize>;
+    size?: BreakpointCustomizable<"small" | "medium"> | undefined;
     /**
      * Sets a headline tag, so it fits correctly within the outline of the page.
      */
-    tag?: AccordionTag;
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: Theme;
+    theme?: "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { BannerState, Theme, BannerWidth } from '../types';
 export type PBannerProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -43,19 +43,19 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Description of the banner.
      */
-    description?: string;
+    description?: string | undefined;
     /**
      * If false, the banner will not have a dismiss button.
      */
-    dismissButton?: boolean;
+    dismissButton?: boolean | undefined;
     /**
      * Heading of the banner.
      */
-    heading?: string;
+    heading?: string | undefined;
     /**
      * Emitted when the close button is clicked.
      */
-    onDismiss?: (event: CustomEvent<void>) => void;
+    onDismiss?: ((event: CustomEvent<void>) => void) | undefined;
     /**
      * If true, the banner is open.
      */
@@ -63,20 +63,20 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. Defines if the banner can be closed/removed by the user.
      */
-    persistent?: boolean;
+    persistent?: boolean | undefined;
     /**
      * State of the banner.
      */
-    state?: BannerState;
+    state?: "warning" | "error" | "info" | "neutral" | undefined;
     /**
      * Adapts the banner color depending on the theme.
      */
-    theme?: Theme;
+    theme?: "light" | "dark" | undefined;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    width?: BannerWidth;
+    width?: "extended" | "basic" | "fluid" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, ButtonGroupDirection } from '../types';
 export type PButtonGroupProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -10,7 +10,7 @@ export declare const PButtonGroup: import("react").ForwardRefExoticComponent<Omi
     /**
      * Defines the direction of the main and cross axis. The default is ’{base: ‘column’, xs: ‘row’}' showing buttons vertically stacked on mobile viewports and side-by-side in a horizontal row from breakpoint ‘xs’. You always need to provide a base value when using breakpoints.
      */
-    direction?: BreakpointCustomizable<ButtonGroupDirection>;
+    direction?: BreakpointCustomizable<"row" | "column"> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttributes, ButtonPureAriaAttribute, ButtonPureIcon, ButtonPureSize, Theme, ButtonPureType, ButtonPureWeight } from '../types';
 export type PButtonPureProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -59,56 +59,56 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Display button in active state.
      */
-    active?: boolean;
+    active?: boolean | undefined;
     /**
      * Aligns the label.
      */
-    alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
+    alignLabel?: BreakpointCustomizable<"left" | "right"> | undefined;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
-    hideLabel?: BreakpointCustomizable<boolean>;
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
     /**
      * The icon shown.
      */
-    icon?: ButtonPureIcon;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
-    iconSource?: string;
+    iconSource?: string | undefined;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * Size of the button.
      */
-    size?: BreakpointCustomizable<ButtonPureSize>;
+    size?: BreakpointCustomizable<"small" | "inherit" | "xx-small" | "x-small" | "medium" | "large" | "x-large"> | undefined;
     /**
      * Stretches the area between icon and label to max available space.
      */
-    stretch?: BreakpointCustomizable<boolean>;
+    stretch?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: Theme;
+    theme?: "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */
-    type?: ButtonPureType;
+    type?: "button" | "reset" | "submit" | undefined;
     /**
      * The weight of the text (only has effect with visible label).
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    weight?: ButtonPureWeight;
+    weight?: "bold" | "regular" | "semi-bold" | "thin" | "semibold" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute, BreakpointCustomizable, ButtonTileAspectRatio, ButtonTileIcon, ButtonTileSize, ButtonTileType, ButtonTileWeight } from '../types';
 export type PButtonTileProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -62,19 +62,19 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     /**
      * Alignment of button and description.
      */
-    align?: ButtonTileAlign;
+    align?: "top" | "bottom" | undefined;
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
     /**
      * Aspect ratio of the button-tile.
      */
-    aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
+    aspectRatio?: BreakpointCustomizable<"1:1" | "4:3" | "3:4" | "16:9" | "9:16"> | undefined;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */
-    compact?: BreakpointCustomizable<boolean>;
+    compact?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Description text.
      */
@@ -82,19 +82,19 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Show gradient.
      */
-    gradient?: boolean;
+    gradient?: boolean | undefined;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: ButtonTileIcon;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
-    iconSource?: string;
+    iconSource?: string | undefined;
     /**
      * Label of the button.
      */
@@ -102,19 +102,19 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     /**
      * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * Font size of the description.
      */
-    size?: BreakpointCustomizable<ButtonTileSize>;
+    size?: BreakpointCustomizable<"default" | "inherit"> | undefined;
     /**
      * Specifies the type of the button.
      */
-    type?: ButtonTileType;
+    type?: "button" | "reset" | "submit" | undefined;
     /**
      * Font weight of the description.
      */
-    weight?: BreakpointCustomizable<ButtonTileWeight>;
+    weight?: BreakpointCustomizable<"regular" | "semi-bold"> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, ButtonAriaAttribute, BreakpointCustomizable, ButtonIcon, Theme, ButtonType, ButtonVariant } from '../types';
 export type PButtonProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -42,39 +42,39 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
+    aria?: SelectedAriaAttributes<"aria-label" | "aria-expanded" | "aria-pressed" | "aria-haspopup"> | undefined;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Show or hide label. For better accessibility it is recommended to show the label.
      */
-    hideLabel?: BreakpointCustomizable<boolean>;
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
      */
-    icon?: ButtonIcon;
+    icon?: import("../types").LinkButtonIconName | undefined;
     /**
      * A URL path to a custom icon.
      */
-    iconSource?: string;
+    iconSource?: string | undefined;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: Theme;
+    theme?: "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */
-    type?: ButtonType;
+    type?: "button" | "reset" | "submit" | undefined;
     /**
      * The style variant of the button.
      */
-    variant?: ButtonVariant;
+    variant?: "primary" | "secondary" | "tertiary" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { CarouselAlignHeader, BreakpointCustomizable, CarouselInternationalization, CarouselUpdateEvent, Theme, CarouselWidth } from '../types';
 export type PCarouselProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -67,64 +67,64 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Defines which slide to be active (zero-based numbering).
      */
-    activeSlideIndex?: number;
+    activeSlideIndex?: number | undefined;
     /**
      * Alignment of heading and description
      */
-    alignHeader?: CarouselAlignHeader;
+    alignHeader?: "center" | "left" | undefined;
     /**
      * Defines the description used in the carousel.
      */
-    description?: string;
+    description?: string | undefined;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `pagination` instead. If true, the carousel will not show pagination bullets at the bottom.
      */
-    disablePagination?: BreakpointCustomizable<boolean>;
+    disablePagination?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Defines the heading used in the carousel.
      */
-    heading?: string;
+    heading?: string | undefined;
     /**
      * Override the default wordings that are used for aria-labels on the next/prev buttons and pagination.
      */
-    intl?: CarouselInternationalization;
+    intl?: CarouselInternationalization | undefined;
     /**
      * @deprecated since v3.0.0, will be removed with next major release, use `update` event instead. Emitted when carousel's content slides.
      */
-    onCarouselChange?: (event: CustomEvent<CarouselUpdateEvent>) => void;
+    onCarouselChange?: ((event: CustomEvent<CarouselUpdateEvent>) => void) | undefined;
     /**
      * Emitted when carousel's content slides.
      */
-    onUpdate?: (event: CustomEvent<CarouselUpdateEvent>) => void;
+    onUpdate?: ((event: CustomEvent<CarouselUpdateEvent>) => void) | undefined;
     /**
      * If false, the carousel will not show pagination bullets at the bottom.
      */
-    pagination?: BreakpointCustomizable<boolean>;
+    pagination?: BreakpointCustomizable<boolean> | undefined;
     /**
      * Whether the slides should rewind from last to first slide and vice versa.
      */
-    rewind?: boolean;
+    rewind?: boolean | undefined;
     /**
      * Defines target of skip link (to skip carousel entries).
      */
-    skipLinkTarget?: string;
+    skipLinkTarget?: string | undefined;
     /**
      * Sets the amount of slides visible at the same time. Can be set to `auto` if you want to define different widths per slide via CSS.
      */
-    slidesPerPage?: BreakpointCustomizable<number> | "auto";
+    slidesPerPage?: BreakpointCustomizable<number> | undefined;
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: Theme;
+    theme?: "light" | "dark" | undefined;
     /**
      * Defines the outer spacings between the carousel and the left and right screen sides.
      */
-    width?: CarouselWidth;
+    width?: "extended" | "basic" | undefined;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    wrapContent?: boolean;
+    wrapContent?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/checkbox-wrapper.wrapper.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { BreakpointCustomizable, CheckboxWrapperState, Theme } from '../types';
 export type PCheckboxWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -30,27 +30,27 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
     /**
      * Show or hide label. For better accessibility it's recommended to show the label.
      */
-    hideLabel?: BreakpointCustomizable<boolean>;
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
     /**
      * The label text.
      */
-    label?: string;
+    label?: string | undefined;
     /**
      * __Experimental__: Disables the checkbox and shows a loading indicator.
      */
-    loading?: boolean;
+    loading?: boolean | undefined;
     /**
      * The message styled depending on validation state.
      */
-    message?: string;
+    message?: string | undefined;
     /**
      * The validation state.
      */
-    state?: CheckboxWrapperState;
+    state?: "none" | "success" | "error" | undefined;
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: Theme;
+    theme?: "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/lib/components/content-wrapper.wrapper.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { ContentWrapperBackgroundColor, Theme, ContentWrapperWidth } from '../types';
 export type PContentWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -22,16 +22,16 @@ export declare const PContentWrapper: import("react").ForwardRefExoticComponent<
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    backgroundColor?: ContentWrapperBackgroundColor;
+    backgroundColor?: "default" | "transparent" | undefined;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    theme?: Theme;
+    theme?: "light" | "dark" | undefined;
     /**
      * Defines the outer spacings between the content area and the left and right screen sides, as well as centering its content and setting a max-width.
      */
-    width?: ContentWrapperWidth;
+    width?: "extended" | "basic" | "fluid" | "narrow" | "full" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { type HTMLAttributes } from 'react';
 import type { SelectedAriaAttributes, CrestAriaAttribute, CrestTarget } from '../types';
 export type PCrestProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
@@ -18,13 +18,13 @@ export declare const PCrest: import("react").ForwardRefExoticComponent<Omit<HTML
     /**
      * Add ARIA attributes.
      */
-    aria?: SelectedAriaAttributes<CrestAriaAttribute>;
+    aria?: SelectedAriaAttributes<"aria-label"> | undefined;
     /**
      * When providing an url then the component will be rendered as `<a>`.
      */
-    href?: string;
+    href?: string | undefined;
     /**
      * Target attribute where the link should be opened.
      */
-    target?: CrestTarget;
+    target?: string | undefined;
 } & import("react").RefAttributes<HTMLElement>>;