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

package/CHANGELOG.md

@@ -14,6 +14,45 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### [Unreleased]
 
+### [3.7.0-rc.2] - 2023-09-28
+
+#### Added
+
+- Styles: `gridStyles` and `pds-grid` support basic usage inside `Flyout` component
+  ([#2756](https://github.com/porsche-design-system/porsche-design-system/pull/2756))
+
+#### Fixed
+
+- Overlay issues of header/footer in `Flyout` component
+  ([#2786](https://github.com/porsche-design-system/porsche-design-system/pull/2786))
+
+### [3.7.0-rc.1] - 2023-09-20
+
+#### Added
+
+- **[EXPERIMENTAL]** Prop `loading` for `Radio Button Wrapper`
+  ([#2774](https://github.com/porsche-design-system/porsche-design-system/pull/2774))
+- Theme property supports `auto` for all themeable components, reflecting `prefers-color-scheme` based on OS system
+  settings ([#2719](https://github.com/porsche-design-system/porsche-design-system/pull/2719))
+- `hyphens` CSS property can now be overwritten in `Button Tile`, `Link Tile` and `Link Tile Model Signature` components
+  ([#2758](https://github.com/porsche-design-system/porsche-design-system/pull/2758))
+- Partials that produce innerHTML support `{ format: 'sha256' }` option for whitelisting in
+  [Content-Security-Policy (CSP)](must-know/security/content-security-policy)
+  ([#2773](https://github.com/porsche-design-system/porsche-design-system/pull/2773))
+- `Pin Code` ([#2691](https://github.com/porsche-design-system/porsche-design-system/pull/2691))
+
+#### Fixed
+
+- Dragging of `Carousel` can become stucked
+  ([#2768](https://github.com/porsche-design-system/porsche-design-system/pull/2768))
+- Color of `message` for `Fieldset`, `Fieldset Wrapper`, `Text Field Wrapper` and `Textarea Wrapper` in dark theme
+  ([#2769](https://github.com/porsche-design-system/porsche-design-system/pull/2769))
+
+#### Changed
+
+- Usage of `getInitialStyles()` partial is required and validated with an exception
+  ([#2749](https://github.com/porsche-design-system/porsche-design-system/pull/2749))
+
 ### [3.7.0-rc.0] - 2023-09-05
 
 #### Added

package/LICENSE.md

@@ -0,0 +1,115 @@
+Copyright (c) 2022 Dr. Ing. h.c. F. Porsche AG
+
+The Porsche Design System source code is licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the License at
+[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0).
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific
+language governing permissions and limitations under the License.
+
+All Porsche specific design assets like fonts, icons, marque, etc. are licensed under the Porsche Design System Assets
+License Agreement.
+
+By accessing, using or contributing to the Design System of Porsche ('Porsche Design System'), you agree to the
+following Porsche Design System Assets License Agreement agreement ('Agreement') with Dr. Ing. h.c. F. Porsche AG,
+Germany ('Porsche AG') and its affiliates (“we”, “our”, “us” or "Porsche"). Porsche reserves the right to change and
+update this licensing agreement at any time.
+
+### License
+
+Subject to the terms of this Agreement, Porsche grants you a limited, worldwide, royalty-free, non-assignable,
+non-transferable, non-sublicensable, and non-exclusive license to use the Porsche Design System Assets solely to
+develop, test, and distribute software applications, websites, and interfaces on behalf of Porsche that are available
+via www.porsche.com or any associated websites or other Porsche software (“Applications”).
+
+### License Restrictions
+
+You may not use the Porsche Design System Assets (i) to develop, test, or distribute an external, stand-alone
+Application (“External Application”) unless such External Application is not identical to and is dissimilar and visually
+distinct from Porsche products and services, as determined by Porsche in its sole discretion, (ii) to mislead consumers
+as to Porsche’s sponsorship of, affiliation with, or endorsement of you, your organization, or your Application, and
+(iii) for any purpose not expressly permitted by this License Agreement. For clarity, any Application that embeds
+directly inside the Porsche Admin or other Porsche interface that allows for the embedding of Applications (“Embedded
+Application”), as determined by Porsche in its sole discretion, may be visually similar, but not identical, to Porsche
+products and services. You may not modify, adapt, redistribute, or create derivative works of the Porsche Design System
+Assets or any part of the Porsche Design System Assets.
+
+### Ownership of Intellectual Property
+
+You agree that Porsche owns all legal right, title and interest in and to the Porsche products and services, including
+the Porsche Design System and the Porsche Design System Assets, including any Intellectual Property Rights inherent
+therein and related thereto. “Intellectual Property Rights” means any and all rights under patent law, copyright law,
+trade secret law, trademark law, and any and all other proprietary rights. Porsche reserves all rights not expressly
+granted to you.
+
+### Termination
+
+Porsche may terminate this Agreement: (a) if you breach any of the terms of this Agreement or (b) if Porsche ceases to
+make the Porsche Design System Assets generally available. Either party may terminate this Agreement at any time, with
+or without cause. Upon termination, your Porsche Design System Assets license will also terminate. This means that you
+must cease using the Porsche Design System Assets and delete all copies of the Porsche Design System Assets. All terms
+of this Agreement will survive the termination or expiration of this Agreement, except for your license right granted in
+Section 1.
+
+### No Warranty
+
+THE Porsche Design System Assets ARE PROVIDED “AS IS” AND “WITH ALL FAULTS”. PORSCHE AND ITS THIRD PARTY LICENSORS
+DISCLAIM ALL REPRESENTATIONS, WARRANTIES AND GUARANTEES, WHETHER EXPRESS, IMPLIED OR STATUTORY, INCLUDING IMPLIED
+WARRANTIES OF MERCHANTABILITY, TITLE, NON-INFRINGEMENT AND FITNESS FOR ANY PURPOSE. PORSCHE MAKES NO REPRESENTATION,
+WARRANTY OR GUARANTEE RELATED TO RELIABILITY, ACCURACY, OR COMPLETENESS OF THE Porsche Design System Assets OR THAT YOUR
+USE OF THE Porsche Design System Assets WILL BE SECURE, TIMELY, UNINTERRUPTED OR ERROR-FREE. THE Porsche Design System
+Assets MAY NOT MEET YOUR REQUIREMENTS OR EXPECTATIONS.
+
+### Limitation of Liability
+
+IN NO EVENT SHALL PORSCHE BE LIABLE FOR ANY LOSS OF USE, LOST DATA, FAILURE OF SECURITY MECHANISMS, INTERRUPTION OF
+BUSINESS, OR ANY INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY KIND (INCLUDING LOST PROFITS OR LOST
+DATA), REGARDLESS OF THE FORM OF ACTION, WHETHER IN CONTRACT, TORT (INCLUDING NEGLIGENCE), STRICT LIABILITY OR
+OTHERWISE, EVEN IF INFORMED OF THE POSSIBILITY OF SUCH DAMAGES IN ADVANCE. PORSCHE SHALL NOT BE LIABLE FOR ANY DAMAGES
+THAT YOU MAY SUFFER IN CONNECTION WITH THE PERFORMANCE OF THE Porsche Design System Assets. NOTWITHSTANDING ANY OTHER
+PROVISION OF THIS AGREEMENT, PORSCHE’S ENTIRE LIABILITY TO YOU UNDER THIS AGREEMENT SHALL NOT EXCEED FIVE HUNDRED US
+DOLLARS ($500). THE ABOVE WARRANTY DISCLAIMERS AND LIMITATIONS OF LIABILITY APPLY TO THE MAXIMUM EXTENT PERMITTED BY
+LAW, BUT YOU MAY HAVE OTHER STATUTORY RIGHTS, WHICH THIS AGREEMENT CANNOT CHANGE. The limitations in this Section 6 will
+survive and apply even if any limited remedy specified in this Agreement is found to have failed of its essential
+purpose.
+
+### Applications; Indemnification
+
+You are solely responsible for your Applications, your use of Porsche Design System Assets, and your compliance with
+this Agreement. You agree to indemnify, defend and hold Porsche and its affiliates and their respective directors,
+officers, employees, successors, assigns, insurers, independent contractors and agents harmless from and against any and
+all claims, costs, damages, losses, liabilities and expenses (including reasonable attorneys’ fees and costs) arising
+out of any claim relating to (a) your Applications, (b) your use of the Porsche Design System Assets or (c) your breach
+of this Agreement. Porsche may participate in defending the claim at its own expense. You may not settle any claim
+without Porsche’s prior written consent. If you distribute your Applications to others, you agree to require the end
+users to agree that Porsche has no liability, warranty, or support or other obligations related to your Applications.
+
+#### General
+
+1. Severability If any provision of this Agreement is, for any reason, held to be invalid, illegal or unenforceable in
+   any respect, then such invalidity, illegality or unenforceability will not affect any other provision of this
+   Agreement, and this Agreement will be construed as if such invalid, illegal or unenforceable provision had never been
+   contained within this Agreement.
+
+2. No Waiver The failure of either party to insist upon or enforce strict performance by the other party of any
+   provision of this Agreement or to exercise any right under this Agreement shall not be construed as a waiver or
+   relinquishment to any extent of such party’s right to assert or rely upon any such provision or right in that or any
+   other instance; rather, the same shall be and remain in full force and effect. Each waiver shall be set forth in a
+   written instrument signed by the waiving party.
+
+3. Entire Agreement This Agreement, including all guidelines and other documents linked or otherwise incorporated or
+   referenced herein, sets forth the entire agreement and supersedes any and all prior agreements, written or oral, of
+   the parties with respect to the subject matter hereof (including any prior version of this Agreement).
+
+4. Assignment All the terms and provisions of this Agreement shall be binding upon and inure to the benefit of the
+   parties to the Agreement and to their respective heirs, successors, permitted assigns and legal representatives.
+   Porsche shall be permitted to assign this Agreement without notice to or consent from you. You shall have no right to
+   assign or otherwise transfer the Agreement, or any of your rights or obligations hereunder, to any third party
+   without Porsche’s prior written consent, to be given or withheld in Porsche’s sole discretion.
+
+5. Applicable Law This Agreement will be governed by and construed in accordance with the laws of Germany, excluding
+   conflicts of law rules and principles. Each party submits to the personal and exclusive jurisdiction of the courts
+   located in Stuttgart, Germany. Nothing in this Agreement limits Porsche’s rights to seek equitable relief.
+
+Last updated: February 20, 2022

package/cjs/lib/components/pin-code.wrapper.cjs

@@ -0,0 +1,26 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var hooks = require('../../hooks.cjs');
+var utils = require('../../utils.cjs');
+
+const PPinCode = react.forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme = 'light', type = 'number', value = '', className, ...rest }, ref) => {
+    const elementRef = react.useRef();
+    hooks.useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = hooks.usePrefix('p-pin-code');
+    const propsToSync = [description, disabled, hideLabel, label, length, loading, message, name, required, state, theme, type, value];
+    hooks.useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', 'value'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    const props = {
+        ...rest,
+        class: hooks.useMergedClass(elementRef, className),
+        ref: utils.syncRef(elementRef, ref)
+    };
+    return jsxRuntime.jsx(WebComponentTag, { ...props });
+});
+
+exports.PPinCode = PPinCode;

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

@@ -6,13 +6,13 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PRadioButtonWrapper = react.forwardRef(({ hideLabel = false, label = '', message = '', state = 'none', theme = 'light', className, ...rest }, ref) => {
+const PRadioButtonWrapper = react.forwardRef(({ hideLabel = false, label = '', loading = false, 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, theme];
+    const propsToSync = [hideLabel, label, loading, message, state, theme];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['hideLabel', 'label', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/cjs/public-api.cjs

@@ -35,6 +35,7 @@ var modelSignature_wrapper = require('./lib/components/model-signature.wrapper.c
 var multiSelect_wrapper = require('./lib/components/multi-select.wrapper.cjs');
 var multiSelectOption_wrapper = require('./lib/components/multi-select-option.wrapper.cjs');
 var pagination_wrapper = require('./lib/components/pagination.wrapper.cjs');
+var pinCode_wrapper = require('./lib/components/pin-code.wrapper.cjs');
 var popover_wrapper = require('./lib/components/popover.wrapper.cjs');
 var radioButtonWrapper_wrapper = require('./lib/components/radio-button-wrapper.wrapper.cjs');
 var scroller_wrapper = require('./lib/components/scroller.wrapper.cjs');
@@ -108,6 +109,7 @@ exports.PModelSignature = modelSignature_wrapper.PModelSignature;
 exports.PMultiSelect = multiSelect_wrapper.PMultiSelect;
 exports.PMultiSelectOption = multiSelectOption_wrapper.PMultiSelectOption;
 exports.PPagination = pagination_wrapper.PPagination;
+exports.PPinCode = pinCode_wrapper.PPinCode;
 exports.PPopover = popover_wrapper.PPopover;
 exports.PRadioButtonWrapper = radioButtonWrapper_wrapper.PRadioButtonWrapper;
 exports.PScroller = scroller_wrapper.PScroller;

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

@@ -66,7 +66,7 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -71,7 +71,7 @@ export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Adapts the banner color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release

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

@@ -99,7 +99,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */

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

@@ -78,7 +78,7 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the description and button theme when used on light background image.
      */
-    background?: "light" | "dark" | undefined;
+    background?: "auto" | "light" | "dark" | undefined;
     /**
      * Displays the button-tile as compact version with description and button icon only.
      */

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

@@ -66,7 +66,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Specifies the type of the button.
      */

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

@@ -115,7 +115,7 @@ export declare const PCarousel: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Defines the outer spacings between the carousel and the left and right screen sides.
      */

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

@@ -50,7 +50,7 @@ export declare const PCheckboxWrapper: import("react").ForwardRefExoticComponent
     /**
      * Adapts the color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -27,7 +27,7 @@ export declare const PContentWrapper: import("react").ForwardRefExoticComponent<
      * Has no effect anymore
      * @deprecated since v3.0.0, will be removed with next major release
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "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.
      */

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

@@ -50,7 +50,7 @@ export declare const PDisplay: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -34,5 +34,5 @@ export declare const PDivider: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts color depending on theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/fieldset-wrapper.wrapper.d.ts

@@ -51,7 +51,7 @@ export declare const PFieldsetWrapper: import("react").ForwardRefExoticComponent
     /**
      * Adapts color depending on theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -50,7 +50,7 @@ export declare const PFieldset: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts color depending on theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -42,7 +42,7 @@ export declare const PFlyout: import("react").ForwardRefExoticComponent<Omit<HTM
     /**
      * Adapts the flyout color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -50,7 +50,7 @@ export declare const PHeading: import("react").ForwardRefExoticComponent<Omit<HT
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -47,7 +47,7 @@ export declare const PHeadline: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the text color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Predefined style of the headline.
      */

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

@@ -60,5 +60,5 @@ export declare const PIcon: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the color depending on the theme. Has no effect when "inherit" is set as color prop.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -32,6 +32,7 @@ export * from './model-signature.wrapper';
 export * from './multi-select.wrapper';
 export * from './multi-select-option.wrapper';
 export * from './pagination.wrapper';
+export * from './pin-code.wrapper';
 export * from './popover.wrapper';
 export * from './radio-button-wrapper.wrapper';
 export * from './scroller.wrapper';

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

@@ -90,7 +90,7 @@ export declare const PInlineNotification: import("react").ForwardRefExoticCompon
     /**
      * Adapts the inline-notification color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -115,7 +115,7 @@ export declare const PLinkPure: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the button color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * Shows an underline under the label.
      */

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

@@ -59,7 +59,7 @@ export declare const PLinkSocial: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<HTMLElement>>;

package/esm/lib/components/link-tile.wrapper.d.ts

@@ -74,7 +74,7 @@ export declare const PLinkTile: import("react").ForwardRefExoticComponent<Omit<H
     /**
      * Adapts the description and link theme when used on light background image.
      */
-    background?: "light" | "dark" | undefined;
+    background?: "auto" | "light" | "dark" | undefined;
     /**
      * Displays the link-tile as compact version with description and link icon only.
      */

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

@@ -78,7 +78,7 @@ export declare const PLink: import("react").ForwardRefExoticComponent<Omit<HTMLA
     /**
      * Adapts the link color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The style variant of the link.
      */

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

@@ -10,7 +10,8 @@ export type PModalProps = Omit<HTMLAttributes<{}>, 'color'> & {
      */
     disableBackdropClick?: boolean;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. If true, the modal will not have a dismiss button.
+     * If true, the modal will not have a dismiss button.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead.
      */
     disableCloseButton?: boolean;
     /**
@@ -48,7 +49,8 @@ export declare const PModal: import("react").ForwardRefExoticComponent<Omit<HTML
      */
     disableBackdropClick?: boolean | undefined;
     /**
-     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead. If true, the modal will not have a dismiss button.
+     * If true, the modal will not have a dismiss button.
+     * @deprecated since v3.0.0, will be removed with next major release, use `dismissButton` instead.
      */
     disableCloseButton?: boolean | undefined;
     /**

package/esm/lib/components/model-signature.wrapper.d.ts

@@ -34,5 +34,5 @@ export declare const PModelSignature: import("react").ForwardRefExoticComponent<
     /**
      * Adapts color depending on theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
 } & import("react").RefAttributes<HTMLElement>>;

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

@@ -94,7 +94,7 @@ export declare const PMultiSelect: import("react").ForwardRefExoticComponent<Omi
     /**
      * Adapts the select color depending on the theme.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The selected values.
      */

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

@@ -102,7 +102,7 @@ export declare const PPagination: import("react").ForwardRefExoticComponent<Omit
     /**
      * Adapts the color when used on dark background.
      */
-    theme?: "light" | "dark" | undefined;
+    theme?: "auto" | "light" | "dark" | undefined;
     /**
      * The total count of items.
      */

package/esm/lib/components/pin-code.wrapper.d.ts

@@ -0,0 +1,120 @@
+import { type HTMLAttributes } from 'react';
+import type { BreakpointCustomizable, PinCodeLength, PinCodeUpdateEvent, PinCodeState, Theme, PinCodeType } from '../types';
+export type PPinCodeProps = Omit<HTMLAttributes<{}>, 'color'> & {
+    /**
+     * The description text.
+     */
+    description?: string;
+    /**
+     * Disables the Pin Code. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * The label text.
+     */
+    label?: string;
+    /**
+     * Number of characters of the Pin Code.
+     */
+    length?: PinCodeLength;
+    /**
+     * Disables the Pin Code and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string;
+    /**
+     * Name of the control.
+     */
+    name?: string;
+    /**
+     * Emitted when selected element changes.
+     */
+    onUpdate?: (event: CustomEvent<PinCodeUpdateEvent>) => void;
+    /**
+     * Marks the Pin Code as required.
+     */
+    required?: boolean;
+    /**
+     * The validation state.
+     */
+    state?: PinCodeState;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: Theme;
+    /**
+     * Pin Code type.
+     */
+    type?: PinCodeType;
+    /**
+     * Sets the initial value of the Pin Code.
+     */
+    value?: string;
+};
+export declare const PPinCode: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<{}>, "color"> & {
+    /**
+     * The description text.
+     */
+    description?: string | undefined;
+    /**
+     * Disables the Pin Code. No events will be triggered while disabled state is active.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean> | undefined;
+    /**
+     * The label text.
+     */
+    label?: string | undefined;
+    /**
+     * Number of characters of the Pin Code.
+     */
+    length?: 4 | 6 | undefined;
+    /**
+     * Disables the Pin Code and shows a loading indicator. No events will be triggered while loading state is active.
+     */
+    loading?: boolean | undefined;
+    /**
+     * The message styled depending on validation state.
+     */
+    message?: string | undefined;
+    /**
+     * Name of the control.
+     */
+    name?: string | undefined;
+    /**
+     * Emitted when selected element changes.
+     */
+    onUpdate?: ((event: CustomEvent<PinCodeUpdateEvent>) => void) | undefined;
+    /**
+     * Marks the Pin Code as required.
+     */
+    required?: boolean | undefined;
+    /**
+     * The validation state.
+     */
+    state?: "none" | "success" | "error" | undefined;
+    /**
+     * Adapts the color depending on the theme.
+     */
+    theme?: "auto" | "light" | "dark" | undefined;
+    /**
+     * Pin Code type.
+     */
+    type?: "number" | "password" | undefined;
+    /**
+     * Sets the initial value of the Pin Code.
+     */
+    value?: string | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,24 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+
+const PPinCode = forwardRef(({ description = '', disabled = false, hideLabel = false, label = '', length = 4, loading = false, message = '', name, onUpdate, required = false, state = 'none', theme = 'light', type = 'number', value = '', className, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'update', onUpdate);
+    const WebComponentTag = usePrefix('p-pin-code');
+    const propsToSync = [description, disabled, hideLabel, label, length, loading, message, name, required, state, theme, type, value];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['description', 'disabled', 'hideLabel', 'label', 'length', 'loading', 'message', 'name', 'required', 'state', 'theme', 'type', '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 { PPinCode };