@porsche-design-system/components-react 3.13.0-rc.0 → 3.13.0-rc.2

package/esm/lib/components/button-group.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/button-pure.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/button-tile.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/button.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/carousel.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/checkbox-wrapper.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/content-wrapper.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/crest.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/display.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/divider.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/fieldset-wrapper.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/fieldset.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/flex-item.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/flex.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/flyout-navigation-item.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/flyout-navigation.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/flyout.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/grid-item.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/grid.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/heading.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/headline.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

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

@@ -48,7 +48,7 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Specifies which icon to use.
      */
-    name?: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "bookmark-filled" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-x" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "star-filled" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
+    name?: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-empty-co2" | "battery-full" | "bell" | "bookmark" | "bookmark-filled" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-class" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-x" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "star-filled" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
     /**
      * The size of the icon.
      */

package/esm/lib/components/icon.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/index.d.ts

@@ -41,6 +41,8 @@ export * from './radio-button-wrapper.wrapper';
 export * from './scroller.wrapper';
 export * from './segmented-control.wrapper';
 export * from './segmented-control-item.wrapper';
+export * from './select.wrapper';
+export * from './select-option.wrapper';
 export * from './select-wrapper.wrapper';
 export * from './spinner.wrapper';
 export * from './stepper-horizontal.wrapper';

package/esm/lib/components/inline-notification.wrapper.d.ts

@@ -50,7 +50,7 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
     /**
      * Action icon of the inline-notification.
      */
-    actionIcon?: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-full" | "bell" | "bookmark" | "bookmark-filled" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-x" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "star-filled" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
+    actionIcon?: "list" | "copy" | "grid" | "document" | "search" | "switch" | "360" | "accessibility" | "active-cabin-ventilation" | "add" | "adjust" | "arrow-double-down" | "arrow-double-left" | "arrow-double-right" | "arrow-double-up" | "arrow-down" | "arrow-first" | "arrow-head-down" | "arrow-head-left" | "arrow-head-right" | "arrow-head-up" | "arrow-last" | "arrow-left" | "arrow-right" | "arrow-up" | "augmented-reality" | "battery-empty" | "battery-empty-co2" | "battery-full" | "bell" | "bookmark" | "bookmark-filled" | "broadcast" | "calculator" | "calendar" | "camera" | "car" | "car-battery" | "card" | "charging-active" | "charging-state" | "charging-station" | "chart" | "chat" | "check" | "city" | "climate" | "climate-control" | "clock" | "close" | "closed-caption" | "co2-class" | "co2-emission" | "compare" | "configurate" | "country-road" | "cubic-capacity" | "delete" | "disable" | "download" | "duration" | "edit" | "email" | "error-filled" | "exclamation" | "external" | "filter" | "fingerprint" | "flash" | "fuel-station" | "garage" | "gift" | "globe" | "heart" | "heart-filled" | "highway" | "home" | "horn" | "image" | "increase" | "information" | "information-filled" | "key" | "leaf" | "leather" | "light" | "locate" | "lock" | "lock-open" | "logo-apple-podcast" | "logo-baidu" | "logo-delicious" | "logo-digg" | "logo-facebook" | "logo-foursquare" | "logo-gmail" | "logo-google" | "logo-hatena" | "logo-instagram" | "logo-kaixin" | "logo-kakaotalk" | "logo-linkedin" | "logo-naver" | "logo-pinterest" | "logo-qq" | "logo-qq-share" | "logo-reddit" | "logo-skyrock" | "logo-sohu" | "logo-spotify" | "logo-tecent" | "logo-telegram" | "logo-tiktok" | "logo-tumblr" | "logo-twitter" | "logo-viber" | "logo-vk" | "logo-wechat" | "logo-weibo" | "logo-whatsapp" | "logo-x" | "logo-xing" | "logo-yahoo" | "logo-youku" | "logo-youtube" | "logout" | "map" | "menu-dots-horizontal" | "menu-dots-vertical" | "menu-lines" | "minus" | "mobile" | "moon" | "oil-can" | "parking-brake" | "parking-light" | "pause" | "phone" | "pin" | "pin-filled" | "play" | "plug" | "plus" | "preheating" | "printer" | "purchase" | "push-pin" | "push-pin-off" | "qr" | "question" | "racing-flag" | "refresh" | "replay" | "reset" | "roof-closed" | "roof-open" | "route" | "rss" | "save" | "screen" | "send" | "share" | "shopping-bag" | "shopping-bag-filled" | "shopping-cart" | "shopping-cart-filled" | "sidelights" | "snowflake" | "sort" | "stack" | "star" | "star-filled" | "steering-wheel" | "stopwatch" | "subtract" | "success" | "success-filled" | "sun" | "tablet" | "tachometer" | "tire" | "truck" | "upload" | "user" | "user-filled" | "user-group" | "user-manual" | "video" | "view" | "view-off" | "volume-off" | "volume-up" | "warning" | "warning-filled" | "weight" | "wifi" | "work" | "wrench" | "wrenches" | "zoom-in" | "zoom-out" | undefined;
     /**
      * Action label of the inline-notification.
      */

package/esm/lib/components/inline-notification.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/link-pure.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/link-social.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/link-tile-model-signature.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/link-tile-product.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/link-tile.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/link.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/marque.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/modal.wrapper.d.ts

@@ -1,10 +1,14 @@
 import { type HTMLAttributes } from 'react';
-import type { SelectedAriaAttributes, ModalAriaAttribute, BreakpointCustomizable, Theme } from '../types';
+import type { SelectedAriaAttributes, ModalAriaAttribute, ModalBackdrop, BreakpointCustomizable, Theme } from '../types';
 export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
     /**
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<ModalAriaAttribute>;
+    /**
+     * Defines the backdrop, 'blur' (should be used when Modal is opened by user interaction, e.g. after a click on a button) and 'shading' (should be used when Modal gets opened automatically, e.g. Cookie Consent).
+     */
+    backdrop?: ModalBackdrop;
     /**
      * If true, the modal will not be closable via backdrop click.
      */
@@ -48,6 +52,10 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      * Add ARIA attributes.
      */
     aria?: SelectedAriaAttributes<"aria-label"> | undefined;
+    /**
+     * Defines the backdrop, 'blur' (should be used when Modal is opened by user interaction, e.g. after a click on a button) and 'shading' (should be used when Modal gets opened automatically, e.g. Cookie Consent).
+     */
+    backdrop?: "blur" | "shading" | undefined;
     /**
      * If true, the modal will not be closable via backdrop click.
      */

package/esm/lib/components/modal.wrapper.mjs

@@ -1,18 +1,18 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PModal = forwardRef(({ aria, disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, ...rest }, ref) => {
+const PModal = forwardRef(({ aria, backdrop = 'blur', disableBackdropClick = false, disableCloseButton, dismissButton = true, fullscreen = false, heading, onClose, onDismiss, open = false, theme, className, ...rest }, ref) => {
     const elementRef = useRef();
     useEventCallback(elementRef, 'close', onClose);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-modal');
-    const propsToSync = [aria, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || useTheme()];
+    const propsToSync = [aria, backdrop, disableBackdropClick, disableCloseButton, dismissButton, fullscreen, heading, open, theme || useTheme()];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['aria', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['aria', 'backdrop', 'disableBackdropClick', 'disableCloseButton', 'dismissButton', 'fullscreen', 'heading', 'open', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/model-signature.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/multi-select-option.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/multi-select.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/pagination.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/pin-code.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/popover.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/radio-button-wrapper.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/scroller.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/segmented-control-item.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/segmented-control.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/select-option.wrapper.d.ts

@@ -0,0 +1,23 @@
+import { type HTMLAttributes } from 'react';
+export type PSelectOptionProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * Disables the option.
+     */
+    disabled?: boolean;
+    /**
+     * The option value.
+     */
+    value?: string;
+};
+export declare const PSelectOption: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * Disables the option.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The option value.
+     */
+    value?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/select-option.wrapper.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PSelectOption = forwardRef(({ disabled = false, value, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    const WebComponentTag = usePrefix('p-select-option');
+    const propsToSync = [disabled, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['disabled', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PSelectOption };

package/esm/lib/components/select-wrapper.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/select.wrapper.d.ts

@@ -0,0 +1,104 @@
+import { type HTMLAttributes } from 'react';
+import type { SelectDropdownDirection, BreakpointCustomizable, SelectUpdateEventDetail, SelectState, Theme } from '../types';
+export type PSelectProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the select
+     */
+    disabled?: boolean;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: SelectDropdownDirection;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * The name of the control.
+     */
+    name: string;
+    /**
+     * Emitted when the selection is changed.
+     */
+    onUpdate?: (event: CustomEvent<SelectUpdateEventDetail>) => void;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: SelectState;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * The selected value.
+     */
+    value?: string;
+};
+export declare const PSelect: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The description text.
+     */
+    description?: string | undefined;
+    /**
+     * Disables the select
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Changes the direction to which the dropdown list appears.
+     */
+    dropdownDirection?: "auto" | "down" | "up" | undefined;
+    /**
+     * Show or hide label. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string | undefined;
+    /**
+     * The name of the control.
+     */
+    name: string;
+    /**
+     * Emitted when the selection is changed.
+     */
+    onUpdate?: ((event: CustomEvent<SelectUpdateEventDetail>) => void) | undefined;
+    /**
+     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
+     */
+    required?: boolean | undefined;
+    /**
+     * The validation state.
+     */
+    state?: "none" | "success" | "error" | undefined;
+    /**
+     * Adapts the select color depending on the theme.
+     */
+    theme?: "light" | "dark" | "auto" | undefined;
+    /**
+     * The selected value.
+     */
+    value?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/select.wrapper.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PSelect = forwardRef(({ description = '', disabled = false, dropdownDirection = 'auto', hideLabel = false, label = '', message = '', name, onUpdate, required = false, state = 'none', theme, value, className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = usePrefix('p-select');
+    const propsToSync = [description, disabled, dropdownDirection, hideLabel, label, message, name, required, state, theme || useTheme(), value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disabled', 'dropdownDirection', 'hideLabel', 'label', 'message', 'name', 'required', 'state', 'theme', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PSelect };

package/esm/lib/components/spinner.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/stepper-horizontal-item.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';

package/esm/lib/components/stepper-horizontal.wrapper.mjs

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useTheme, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';