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

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-button-wrapper.mjs

@@ -1,4 +1,68 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import '../components/accordion.wrapper.mjs';
+import '../components/banner.wrapper.mjs';
+import '../components/button.wrapper.mjs';
+import '../components/button-group.wrapper.mjs';
+import '../components/button-pure.wrapper.mjs';
+import '../components/button-tile.wrapper.mjs';
+import '../components/carousel.wrapper.mjs';
+import '../components/checkbox-wrapper.wrapper.mjs';
+import '../components/content-wrapper.wrapper.mjs';
+import '../components/crest.wrapper.mjs';
+import '../components/display.wrapper.mjs';
+import '../components/divider.wrapper.mjs';
+import '../components/fieldset.wrapper.mjs';
+import '../components/fieldset-wrapper.wrapper.mjs';
+import '../components/flex.wrapper.mjs';
+import '../components/flex-item.wrapper.mjs';
+import '../components/flyout.wrapper.mjs';
+import '../components/grid.wrapper.mjs';
+import '../components/grid-item.wrapper.mjs';
+import '../components/heading.wrapper.mjs';
+import '../components/headline.wrapper.mjs';
+import '../components/icon.wrapper.mjs';
+import '../components/inline-notification.wrapper.mjs';
+import '../components/link.wrapper.mjs';
+import '../components/link-pure.wrapper.mjs';
+import '../components/link-social.wrapper.mjs';
+import '../components/link-tile.wrapper.mjs';
+import '../components/link-tile-model-signature.wrapper.mjs';
+import '../components/marque.wrapper.mjs';
+import '../components/modal.wrapper.mjs';
+import '../components/model-signature.wrapper.mjs';
+import '../components/multi-select.wrapper.mjs';
+import '../components/multi-select-option.wrapper.mjs';
+import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
+import '../components/popover.wrapper.mjs';
+import '../components/radio-button-wrapper.wrapper.mjs';
+import '../components/scroller.wrapper.mjs';
+import '../components/segmented-control.wrapper.mjs';
+import '../components/segmented-control-item.wrapper.mjs';
+import '../components/select-wrapper.wrapper.mjs';
+import { PSpinner } from '../components/spinner.wrapper.mjs';
+import '../components/stepper-horizontal.wrapper.mjs';
+import '../components/stepper-horizontal-item.wrapper.mjs';
+import '../components/switch.wrapper.mjs';
+import '../components/table.wrapper.mjs';
+import '../components/table-body.wrapper.mjs';
+import '../components/table-cell.wrapper.mjs';
+import '../components/table-head.wrapper.mjs';
+import '../components/table-head-cell.wrapper.mjs';
+import '../components/table-head-row.wrapper.mjs';
+import '../components/table-row.wrapper.mjs';
+import '../components/tabs.wrapper.mjs';
+import '../components/tabs-bar.wrapper.mjs';
+import '../components/tabs-item.wrapper.mjs';
+import '../components/tag.wrapper.mjs';
+import '../components/tag-dismissible.wrapper.mjs';
+import '../components/text.wrapper.mjs';
+import '../components/text-field-wrapper.wrapper.mjs';
+import '../components/text-list.wrapper.mjs';
+import '../components/text-list-item.wrapper.mjs';
+import '../components/textarea-wrapper.wrapper.mjs';
+import '../components/toast.wrapper.mjs';
+import '../components/wordmark.wrapper.mjs';
 import { splitChildren } from '../../splitChildren.mjs';
 import { Component } from 'react';
 import { minifyCss } from '../../minifyCss.mjs';
@@ -11,8 +75,10 @@ class DSRRadioButtonWrapper extends Component {
     input;
     render() {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
-        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$t(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props.disabled, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "text", children: this.props.label || jsx("slot", { name: "label" }) })), jsx("slot", {})] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
+        // spinner is only displayed when radio is not checked already
+        const isLoading = this.props.loading && !(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && (otherChildren[0]?.props.checked || otherChildren[0]?.props.defaultChecked));
+        const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$t(this.props.hideLabel, this.props.state, typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props.disabled, isLoading, this.props.theme)));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { "aria-disabled": isLoading ? 'true' : null, children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "text", children: this.props.label || jsx("slot", { name: "label" }) })), jsx("slot", {}), isLoading && (jsx(PSpinner, { className: "spinner", size: "inherit", theme: this.props.theme, aria: { 'aria-label': `Loading state of ${this.props.label}` } }))] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control-item.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper-dropdown.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/state-message.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import { PScroller } from '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/switch.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import { PScroller } from '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import { PScroller } from '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag-dismissible.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag.mjs

@@ -33,6 +33,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.mjs

@@ -34,6 +34,7 @@ import '../components/model-signature.wrapper.mjs';
 import '../components/multi-select.wrapper.mjs';
 import '../components/multi-select-option.wrapper.mjs';
 import '../components/pagination.wrapper.mjs';
+import '../components/pin-code.wrapper.mjs';
 import '../components/popover.wrapper.mjs';
 import '../components/radio-button-wrapper.wrapper.mjs';
 import '../components/scroller.wrapper.mjs';
@@ -110,7 +111,7 @@ class DSRTextFieldWrapper extends Component {
                                             this.props.isWithinForm ? (createElement(PButtonPure, { ...buttonProps, key: "btn-submit", type: "submit", icon: "search", disabled: disabledOrReadOnly }, "Search")) : (jsx(PIcon, { className: "icon", name: "search", color: "state-disabled", theme: this.props.theme, "aria-hidden": "true" }, "icon")),
                                             createElement(PButtonPure, { ...buttonProps, type: "button", key: "btn-clear", icon: "close", tabIndex: -1, hidden: !isClearable, disabled: disabledOrReadOnly }, "Clear field"),
                                             hasAction && (createElement(PButtonPure, { ...buttonProps, type: "button", key: "btn-action", icon: "locate", hidden: isClearable, disabled: disabledOrReadOnly, loading: this.props.actionLoading }, "Locate me")),
-                                        ])] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: "light", host: null }))] })] }), this.props.children] }));
+                                        ])] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/textarea-wrapper.mjs

@@ -16,7 +16,7 @@ class DSRTextareaWrapper extends Component {
         const { children, namedSlotChildren, otherChildren } = splitChildren(this.props.children);
         const labelProps = {};
         const style = minifyCss(stripFocusAndHoverStyles(getComponentCss$3(typeof otherChildren[0] === 'object' && 'props' in otherChildren[0] && otherChildren[0]?.props.disabled, this.props.hideLabel, this.props.state, this.props.hasCounter, this.props.theme)));
-        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: "light", host: null }))] })] }), this.props.children] }));
+        return (jsxs(Fragment, { children: [jsxs("template", { shadowroot: "open", shadowrootmode: "open", children: [jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxs(Fragment, { children: [jsxs("label", { className: "label", children: [(this.props.label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.label || jsx("slot", { name: "label" }) })), (this.props.description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0) && (jsx("span", { className: "label__text", ...labelProps, children: this.props.description || jsx("slot", { name: "description" }) })), this.props.hasCounter && jsx("span", { className: "counter", "aria-hidden": "true" }), jsx("slot", {}), this.props.hasCounter && jsx("span", { className: "sr-only", "aria-live": "polite" })] }), (this.props.message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(this.props.state) && (jsx(StateMessage, { state: this.props.state, message: this.props.message, theme: this.props.theme, host: null }))] })] }), this.props.children] }));
     }
 }
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/public-api.mjs

@@ -33,6 +33,7 @@ export { PModelSignature } from './lib/components/model-signature.wrapper.mjs';
 export { PMultiSelect } from './lib/components/multi-select.wrapper.mjs';
 export { PMultiSelectOption } from './lib/components/multi-select-option.wrapper.mjs';
 export { PPagination } from './lib/components/pagination.wrapper.mjs';
+export { PPinCode } from './lib/components/pin-code.wrapper.mjs';
 export { PPopover } from './lib/components/popover.wrapper.mjs';
 export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.mjs';
 export { PScroller } from './lib/components/scroller.wrapper.mjs';

package/ssr/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/ssr/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;
     /**
-     * @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;
     /**

package/ssr/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;
+    /**
+     * 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;
+} & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -9,6 +9,10 @@ export type PRadioButtonWrapperProps = Omit<HTMLAttributes<{}>, 'color'> & {
      * The label text.
      */
     label?: string;
+    /**
+     * __Experimental__: Disables the radio button and shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */
@@ -31,6 +35,10 @@ export declare const PRadioButtonWrapper: import("react").ForwardRefExoticCompon
      * The label text.
      */
     label?: string;
+    /**
+     * __Experimental__: Disables the radio button and shows a loading indicator.
+     */
+    loading?: boolean;
     /**
      * The message styled depending on validation state.
      */

package/ssr/esm/lib/dsr-components/carousel.d.ts

@@ -8,5 +8,6 @@ export declare class DSRCarousel extends Component<any> {
     private btnNext;
     private paginationEl;
     private slides;
+    private get hasNavigation();
     render(): JSX.Element;
 }

package/ssr/esm/lib/dsr-components/pin-code.d.ts

@@ -0,0 +1,9 @@
+import { Component } from 'react';
+export declare class DSRPinCode extends Component<any> {
+    host: HTMLElement;
+    private form;
+    private isWithinForm;
+    private hiddenInput;
+    private inputElements;
+    render(): JSX.Element;
+}

package/ssr/esm/lib/types.d.ts

@@ -448,9 +448,10 @@ export type BreakpointValues<T> = {
 export type BreakpointCustomizable<T> = T | BreakpointValues<T> | string;
 declare const THEMES: readonly [
     "light",
-    "dark"
+    "dark",
+    "auto"
 ];
-export type Theme = typeof THEMES[number];
+export type Theme = (typeof THEMES)[number];
 declare const TILE_ASPECT_RATIOS: readonly [
     "1:1",
     "4:3",
@@ -1028,6 +1029,21 @@ export type PaginationUpdateEvent = {
     previousPage: number;
 };
 export type PaginationInternationalization = Partial<Record<"root" | "prev" | "next" | "page", string>> | string;
+declare const PIN_CODE_TYPES: readonly [
+    "number",
+    "password"
+];
+export type PinCodeType = (typeof PIN_CODE_TYPES)[number];
+declare const PIN_CODE_LENGTHS: readonly [
+    4,
+    6
+];
+export type PinCodeLength = (typeof PIN_CODE_LENGTHS)[number];
+export type PinCodeUpdateEvent = {
+    value: string;
+    isComplete: boolean;
+};
+export type PinCodeState = FormState;
 declare const POPOVER_DIRECTIONS: readonly [
     "top",
     "right",