@dnb/eufemia 10.20.0 → 10.22.0

package/es/extensions/forms/Field/Number/style/dnb-number.min.css

@@ -1 +1 @@
-.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}
+.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__input{align-items:center}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}

package/es/extensions/forms/Field/Number/style/dnb-number.scss

@@ -26,7 +26,6 @@
 
   &__contents {
     display: flex;
-    align-items: center;
 
     &--has-controls {
       border-radius: 0.25rem;
@@ -51,6 +50,10 @@
       }
 
       .dnb-input {
+        &__input {
+          align-items: center;
+        }
+
         &__shell {
           border-radius: 0;
           box-shadow: none;

package/es/extensions/forms/Field/Password/Password.d.ts

@@ -0,0 +1,45 @@
+import React, { MutableRefObject } from 'react';
+import { Props as StringFieldProps } from '../String';
+import { InputProps } from '../../../../components/Input';
+export type PasswordVisibilityEvent = React.MouseEvent<HTMLButtonElement> & {
+    value: string;
+};
+export type PasswordProps = Omit<StringFieldProps, 'innerRef'> & {
+    /**
+     * Fires when the input toggles to show the password.
+     */
+    onShowPassword?: (event: PasswordVisibilityEvent) => void;
+    /**
+     * Fires when the input toggles to hide the password.
+     */
+    onHidePassword?: (event: PasswordVisibilityEvent) => void;
+    /**
+     * The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size="2" then it will be forwarded as the input element attribute.
+     */
+    size?: InputProps['size'];
+    /**
+     * ElememntRef passed on to the password input element.
+     */
+    innerRef?: MutableRefObject<HTMLInputElement>;
+    /**
+     * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordShowLabel` instead.
+     */
+    show_password?: string;
+    /**
+     * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordHideLabel` instead.
+     */
+    hide_password?: string;
+    /**
+     * @deprecated in v11, use `onShowPassword` instead.
+     */
+    on_show_password?: (event: PasswordVisibilityEvent) => void;
+    /**
+     * @deprecated in v11, use `onHidePassword` instead.
+     */
+    on_hide_password?: (event: PasswordVisibilityEvent) => void;
+};
+declare function Password({ id, className, innerRef, value, label, disabled, size, ...externalProps }: PasswordProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Password {
+    var _supportsSpacingProps: boolean;
+}
+export default Password;

package/es/extensions/forms/Field/Password/Password.js

@@ -0,0 +1,99 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["id", "className", "innerRef", "value", "label", "disabled", "size"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useContext, useRef, useState, useCallback } from 'react';
+import classnames from 'classnames';
+import SharedContext from '../../../../shared/Context';
+import StringField from '../String';
+import { SubmitButton } from '../../../../components/Input';
+import IconView from '../../../../icons/view';
+import IconViewOff from '../../../../icons/hide';
+import IconViewMedium from '../../../../icons/view_medium';
+import IconViewOffMedium from '../../../../icons/hide_medium';
+import { convertSnakeCaseProps } from '../../../../shared/helpers/withSnakeCaseProps';
+function Password(_ref) {
+  var _innerRef$current;
+  let {
+      id,
+      className,
+      innerRef,
+      value,
+      label,
+      disabled,
+      size
+    } = _ref,
+    externalProps = _objectWithoutProperties(_ref, _excluded);
+  const props = convertSnakeCaseProps(Object.freeze(externalProps));
+  const [hidden, setHidden] = useState(true);
+  const sharedContext = useContext(SharedContext);
+  const translations = sharedContext.translation.Forms;
+  const ref = useRef((_innerRef$current = innerRef === null || innerRef === void 0 ? void 0 : innerRef.current) !== null && _innerRef$current !== void 0 ? _innerRef$current : null);
+  const toggleVisibility = useCallback(event => {
+    const {
+      onShowPassword,
+      onHidePassword
+    } = convertSnakeCaseProps(props);
+    const value = ref.current.value;
+    setHidden(hidden => {
+      hidden ? onShowPassword === null || onShowPassword === void 0 ? void 0 : onShowPassword(_objectSpread(_objectSpread({}, event), {}, {
+        value
+      })) : onHidePassword === null || onHidePassword === void 0 ? void 0 : onHidePassword(_objectSpread(_objectSpread({}, event), {}, {
+        value
+      }));
+      return !hidden;
+    });
+    if (ref.current) {
+      ref.current.focus();
+    }
+  }, [props]);
+  const getAriaLabel = useCallback(() => {
+    const {
+      passwordShowLabel,
+      passwordHideLabel
+    } = translations;
+    const ariaLabels = {
+      showPassword: passwordShowLabel,
+      hidePassword: passwordHideLabel
+    };
+    if (externalProps.show_password) {
+      ariaLabels['showPassword'] = externalProps.show_password;
+    }
+    if (externalProps.hide_password) {
+      ariaLabels['hidePassword'] = externalProps.hide_password;
+    }
+    return ariaLabels;
+  }, [externalProps.show_password, externalProps.hide_password, translations]);
+  const ariaLabels = getAriaLabel();
+  const ToggleVisibilityButton = useCallback(() => {
+    return React.createElement(SubmitButton, {
+      id: id + '-submit-button',
+      type: "button",
+      variant: "secondary",
+      "aria-controls": id,
+      "aria-label": hidden ? ariaLabels.showPassword : ariaLabels.hidePassword,
+      icon: size === 'large' ? hidden ? IconViewMedium : IconViewOffMedium : hidden ? IconView : IconViewOff,
+      disabled: disabled,
+      skeleton: sharedContext.skeleton,
+      onClick: toggleVisibility
+    });
+  }, [id, hidden, sharedContext.skeleton, disabled, size, toggleVisibility, ariaLabels]);
+  return React.createElement(StringField, _extends({
+    id: id,
+    className: classnames('dnb-forms-field-password', className),
+    label: label !== null && label !== void 0 ? label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.passwordLabel,
+    type: hidden ? 'password' : 'text',
+    value: value,
+    innerRef: ref,
+    "aria-describedby": id + '-submit-button',
+    submitElement: React.createElement(ToggleVisibilityButton, null),
+    disabled: disabled
+  }, props));
+}
+export default Password;
+Password._supportsSpacingProps = true;
+//# sourceMappingURL=Password.js.map

package/es/extensions/forms/Field/Password/Password.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Password.js","names":["React","useContext","useRef","useState","useCallback","classnames","SharedContext","StringField","SubmitButton","IconView","IconViewOff","IconViewMedium","IconViewOffMedium","convertSnakeCaseProps","Password","_ref","_innerRef$current","id","className","innerRef","value","label","disabled","size","externalProps","_objectWithoutProperties","_excluded","props","Object","freeze","hidden","setHidden","sharedContext","translations","translation","Forms","ref","current","toggleVisibility","event","onShowPassword","onHidePassword","_objectSpread","focus","getAriaLabel","passwordShowLabel","passwordHideLabel","ariaLabels","showPassword","hidePassword","show_password","hide_password","ToggleVisibilityButton","createElement","type","variant","icon","skeleton","onClick","_extends","passwordLabel","submitElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Password/Password.tsx"],"sourcesContent":["import React, {\n  useContext,\n  useRef,\n  useState,\n  ElementRef,\n  MutableRefObject,\n  useCallback,\n} from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport StringField, { Props as StringFieldProps } from '../String'\n\nimport { InputProps, SubmitButton } from '../../../../components/Input'\nimport IconView from '../../../../icons/view'\nimport IconViewOff from '../../../../icons/hide'\nimport IconViewMedium from '../../../../icons/view_medium'\nimport IconViewOffMedium from '../../../../icons/hide_medium'\nimport { convertSnakeCaseProps } from '../../../../shared/helpers/withSnakeCaseProps'\n\nexport type PasswordVisibilityEvent =\n  React.MouseEvent<HTMLButtonElement> & {\n    value: string\n  }\n\nexport type PasswordProps = Omit<StringFieldProps, 'innerRef'> & {\n  /**\n   * Fires when the input toggles to show the password.\n   */\n  onShowPassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * Fires when the input toggles to hide the password.\n   */\n  onHidePassword?: (event: PasswordVisibilityEvent) => void\n  /**\n   * The sizes you can choose is small (1.5rem), default (2rem), medium (2.5rem) and large (3rem) are supported component sizes. Defaults to default / null. Also, if you define a number like size=\"2\" then it will be forwarded as the input element attribute.\n   */\n  size?: InputProps['size']\n  /**\n   * ElememntRef passed on to the password input element.\n   */\n  innerRef?: MutableRefObject<HTMLInputElement>\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordShowLabel` instead.\n   */\n  show_password?: string\n  /**\n   * @deprecated in v11, use use `locales`prop on `Provider` and override `passwordHideLabel` instead.\n   */\n  hide_password?: string\n  /**\n   * @deprecated in v11, use `onShowPassword` instead.\n   */\n  on_show_password?: (event: PasswordVisibilityEvent) => void\n  /**\n   * @deprecated in v11, use `onHidePassword` instead.\n   */\n  on_hide_password?: (event: PasswordVisibilityEvent) => void\n}\n\nfunction Password({\n  id,\n  className,\n  innerRef,\n  value,\n  label,\n  disabled,\n  size,\n  ...externalProps\n}: PasswordProps) {\n  // Object freeze used to prevent mutation of show_password and hide_password props. Freeze and convertToSnakeCase can be removed in v11.\n  const props = convertSnakeCaseProps(Object.freeze(externalProps))\n\n  const [hidden, setHidden] = useState<boolean>(true)\n\n  const sharedContext = useContext(SharedContext)\n  const translations = sharedContext.translation.Forms\n\n  const ref = useRef<ElementRef<'input'>>(innerRef?.current ?? null)\n\n  const toggleVisibility = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      const { onShowPassword, onHidePassword } =\n        convertSnakeCaseProps(props)\n\n      const value = ref.current.value\n\n      setHidden((hidden) => {\n        hidden\n          ? onShowPassword?.({ ...event, value })\n          : onHidePassword?.({ ...event, value })\n\n        return !hidden\n      })\n\n      if (ref.current) {\n        ref.current.focus()\n      }\n    },\n    [props]\n  )\n\n  // Can be removed with v11, just used to make sure that the old show_password and hide_password are still backward compatible.\n  const getAriaLabel = useCallback(() => {\n    const { passwordShowLabel, passwordHideLabel } = translations\n\n    const ariaLabels = {\n      showPassword: passwordShowLabel,\n      hidePassword: passwordHideLabel,\n    }\n\n    if (externalProps.show_password) {\n      ariaLabels['showPassword'] = externalProps.show_password\n    }\n\n    if (externalProps.hide_password) {\n      ariaLabels['hidePassword'] = externalProps.hide_password\n    }\n\n    return ariaLabels\n  }, [\n    externalProps.show_password,\n    externalProps.hide_password,\n    translations,\n  ])\n\n  const ariaLabels = getAriaLabel()\n\n  const ToggleVisibilityButton = useCallback(() => {\n    return (\n      <SubmitButton\n        id={id + '-submit-button'}\n        type=\"button\"\n        variant=\"secondary\"\n        aria-controls={id}\n        aria-label={\n          hidden ? ariaLabels.showPassword : ariaLabels.hidePassword\n        }\n        icon={\n          size === 'large'\n            ? hidden\n              ? IconViewMedium\n              : IconViewOffMedium\n            : hidden\n            ? IconView\n            : IconViewOff\n        }\n        // status={hasError ? 'error' : undefined}\n        disabled={disabled}\n        skeleton={sharedContext.skeleton}\n        onClick={toggleVisibility}\n      />\n    )\n  }, [\n    id,\n    hidden,\n    sharedContext.skeleton,\n    disabled,\n    size,\n    toggleVisibility,\n    ariaLabels,\n  ])\n\n  return (\n    <StringField\n      id={id}\n      className={classnames('dnb-forms-field-password', className)}\n      label={label ?? sharedContext?.translation.Forms.passwordLabel}\n      type={hidden ? 'password' : 'text'}\n      value={value}\n      innerRef={ref}\n      aria-describedby={id + '-submit-button'}\n      submitElement={<ToggleVisibilityButton />}\n      disabled={disabled}\n      {...props}\n    />\n  )\n}\n\nexport default Password\n\nPassword._supportsSpacingProps = true\n"],"mappings":"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"}

package/es/extensions/forms/Field/Password/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Password';
+export * from './Password';

package/es/extensions/forms/Field/Password/index.js

@@ -0,0 +1,3 @@
+export { default } from './Password';
+export * from './Password';
+//# sourceMappingURL=index.js.map

package/es/extensions/forms/Field/Password/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../../../src/extensions/forms/Field/Password/index.ts"],"sourcesContent":["export { default } from './Password'\nexport * from './Password'\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,cAAc,YAAY"}

package/es/extensions/forms/Field/Password/style/dnb-password.css

@@ -0,0 +1,6 @@
+.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button {
+  color: var(--color-fire-red);
+}
+.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover {
+  color: var(--color-white);
+}

package/es/extensions/forms/Field/Password/style/dnb-password.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button{color:var(--color-fire-red)}.dnb-forms-field-password .dnb-input__status--error .dnb-input__submit-button__button:hover{color:var(--color-white)}

package/es/extensions/forms/Field/Password/style/dnb-password.scss

@@ -0,0 +1,10 @@
+.dnb-forms-field-password {
+  // Make sure submit element recieves red text color on error.
+  .dnb-input__status--error .dnb-input__submit-button__button {
+    color: var(--color-fire-red);
+
+    &:hover {
+      color: var(--color-white);
+    }
+  }
+}

package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js

@@ -24,10 +24,9 @@ function PostalCodeAndCity(props) {
   return React.createElement(FieldBlock, _extends({
     className: classnames('dnb-forms-field-postal-code-and-city', props.className)
   }, fieldBlockProps, {
-    width: width
-  }), React.createElement("div", {
-    className: 'dnb-forms-field-postal-code-and-city__fields'
-  }, React.createElement(StringField, _extends({}, postalCode, {
+    width: width,
+    composition: true
+  }), React.createElement(StringField, _extends({}, postalCode, {
     pattern: (_postalCode$pattern = postalCode.pattern) !== null && _postalCode$pattern !== void 0 ? _postalCode$pattern : '^[0-9]{4}$',
     mask: [/\d/, /\d/, /\d/, /\d/],
     className: classnames('dnb-forms-field-postal-code-and-city__postal-code', postalCode.className),
@@ -48,7 +47,7 @@ function PostalCodeAndCity(props) {
     }, city.errorMessages),
     width: "stretch",
     help: help
-  }))));
+  })));
 }
 PostalCodeAndCity._supportsSpacingProps = true;
 export default PostalCodeAndCity;

package/es/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringField","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","pattern","mask","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","inputMode","cityLabel","cityErrorRequired","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringFieldProps>\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    ...fieldBlockProps\n  } = props\n\n  return (\n    <FieldBlock\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n    >\n      <div\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__fields'\n        )}\n      >\n        <StringField\n          {...postalCode}\n          pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n          mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__postal-code',\n            postalCode.className\n          )}\n          label={\n            postalCode.label ??\n            sharedContext?.translation.Forms.postalCodeLabel\n          }\n          errorMessages={{\n            required:\n              sharedContext?.translation.Forms.postalCodeErrorRequired,\n            pattern:\n              sharedContext?.translation.Forms.postalCodeErrorPattern,\n            ...postalCode.errorMessages,\n          }}\n          placeholder={postalCode.placeholder ?? '0000'}\n          width={false}\n          inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n          inputMode=\"numeric\"\n        />\n        <StringField\n          {...city}\n          className={classnames(\n            'dnb-forms-field-postal-code-and-city__city',\n            city.className\n          )}\n          label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n          errorMessages={{\n            required: sharedContext?.translation.Forms.cityErrorRequired,\n            ...city.errorMessages,\n          }}\n          width=\"stretch\"\n          help={help}\n        />\n      </div>\n    </FieldBlock>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,OAAOC,WAAW,MAAqC,WAAW;AAOlE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA;EACvC,MAAMC,aAAa,GAAGX,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJU,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,IAAI;MACJC,KAAK,GAAG;IAEV,CAAC,GAAGT,KAAK;IADJU,eAAe,GAAAC,wBAAA,CAChBX,KAAK,EAAAY,SAAA;EAET,OACEnB,KAAA,CAAAoB,aAAA,CAAChB,UAAU,EAAAiB,QAAA;IACTC,SAAS,EAAEpB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACe,SACR;EAAE,GACEL,eAAe;IACnBD,KAAK,EAAEA;EAAM,IAEbhB,KAAA,CAAAoB,aAAA;IACEE,SAAS,EACP;EACA,GAEFtB,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNR,UAAU;IACdU,OAAO,GAAAf,mBAAA,GAAEK,UAAU,CAACU,OAAO,cAAAf,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5CgB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BF,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFG,KAAK,GAAAhB,iBAAA,GACHI,UAAU,CAACY,KAAK,cAAAhB,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNnB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DT,OAAO,EACLX,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACM;IAAsB,GACtDpB,UAAU,CAACgB,aAAa,CAC3B;IACFK,WAAW,GAAAxB,qBAAA,GAAEG,UAAU,CAACqB,WAAW,cAAAxB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CM,KAAK,EAAE,KAAM;IACbmB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC;EAAS,EACpB,CAAC,EACFpC,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFG,KAAK,GAAAd,WAAA,GAAEG,IAAI,CAACW,KAAK,cAAAd,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACU,SAAU;IAChER,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEnB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEc,WAAW,CAACC,KAAK,CAACW;IAAiB,GACzDxB,IAAI,CAACe,aAAa,CACrB;IACFb,KAAK,EAAC,SAAS;IACfD,IAAI,EAAEA;EAAK,EACZ,CACE,CACK,CAAC;AAEjB;AAEAT,iBAAiB,CAACiC,qBAAqB,GAAG,IAAI;AAC9C,eAAejC,iBAAiB"}
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","useContext","classnames","SharedContext","FieldBlock","StringField","PostalCodeAndCity","props","_postalCode$pattern","_postalCode$label","_postalCode$placehold","_city$label","sharedContext","postalCode","city","help","width","fieldBlockProps","_objectWithoutProperties","_excluded","createElement","_extends","className","composition","pattern","mask","label","translation","Forms","postalCodeLabel","errorMessages","_objectSpread","required","postalCodeErrorRequired","postalCodeErrorPattern","placeholder","inputClassName","inputMode","cityLabel","cityErrorRequired","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport classnames from 'classnames'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport StringField, { Props as StringFieldProps } from '../String'\nimport { FieldHelpProps } from '../../types'\n\nexport type Props = FieldHelpProps &\n  Omit<FieldBlockProps, 'children'> &\n  Record<'postalCode' | 'city', StringFieldProps>\n\nfunction PostalCodeAndCity(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const {\n    postalCode = {},\n    city = {},\n    help,\n    width = 'large',\n    ...fieldBlockProps\n  } = props\n\n  return (\n    <FieldBlock\n      className={classnames(\n        'dnb-forms-field-postal-code-and-city',\n        props.className\n      )}\n      {...fieldBlockProps}\n      width={width}\n      composition\n    >\n      <StringField\n        {...postalCode}\n        pattern={postalCode.pattern ?? '^[0-9]{4}$'}\n        mask={[/\\d/, /\\d/, /\\d/, /\\d/]}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__postal-code',\n          postalCode.className\n        )}\n        label={\n          postalCode.label ??\n          sharedContext?.translation.Forms.postalCodeLabel\n        }\n        errorMessages={{\n          required:\n            sharedContext?.translation.Forms.postalCodeErrorRequired,\n          pattern: sharedContext?.translation.Forms.postalCodeErrorPattern,\n          ...postalCode.errorMessages,\n        }}\n        placeholder={postalCode.placeholder ?? '0000'}\n        width={false}\n        inputClassName=\"dnb-forms-field-postal-code-and-city__postal-code-input\"\n        inputMode=\"numeric\"\n      />\n      <StringField\n        {...city}\n        className={classnames(\n          'dnb-forms-field-postal-code-and-city__city',\n          city.className\n        )}\n        label={city.label ?? sharedContext?.translation.Forms.cityLabel}\n        errorMessages={{\n          required: sharedContext?.translation.Forms.cityErrorRequired,\n          ...city.errorMessages,\n        }}\n        width=\"stretch\"\n        help={help}\n      />\n    </FieldBlock>\n  )\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,aAAa,MAAM,4BAA4B;AACtD,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,OAAOC,WAAW,MAAqC,WAAW;AAOlE,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,mBAAA,EAAAC,iBAAA,EAAAC,qBAAA,EAAAC,WAAA;EACvC,MAAMC,aAAa,GAAGX,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAM;MACJU,UAAU,GAAG,CAAC,CAAC;MACfC,IAAI,GAAG,CAAC,CAAC;MACTC,IAAI;MACJC,KAAK,GAAG;IAEV,CAAC,GAAGT,KAAK;IADJU,eAAe,GAAAC,wBAAA,CAChBX,KAAK,EAAAY,SAAA;EAET,OACEnB,KAAA,CAAAoB,aAAA,CAAChB,UAAU,EAAAiB,QAAA;IACTC,SAAS,EAAEpB,UAAU,CACnB,sCAAsC,EACtCK,KAAK,CAACe,SACR;EAAE,GACEL,eAAe;IACnBD,KAAK,EAAEA,KAAM;IACbO,WAAW;EAAA,IAEXvB,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNR,UAAU;IACdW,OAAO,GAAAhB,mBAAA,GAAEK,UAAU,CAACW,OAAO,cAAAhB,mBAAA,cAAAA,mBAAA,GAAI,YAAa;IAC5CiB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAE;IAC/BH,SAAS,EAAEpB,UAAU,CACnB,mDAAmD,EACnDW,UAAU,CAACS,SACb,CAAE;IACFI,KAAK,GAAAjB,iBAAA,GACHI,UAAU,CAACa,KAAK,cAAAjB,iBAAA,cAAAA,iBAAA,GAChBG,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACC,eAClC;IACDC,aAAa,EAAAC,aAAA;MACXC,QAAQ,EACNpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACK,uBAAuB;MAC1DT,OAAO,EAAEZ,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACM;IAAsB,GAC7DrB,UAAU,CAACiB,aAAa,CAC3B;IACFK,WAAW,GAAAzB,qBAAA,GAAEG,UAAU,CAACsB,WAAW,cAAAzB,qBAAA,cAAAA,qBAAA,GAAI,MAAO;IAC9CM,KAAK,EAAE,KAAM;IACboB,cAAc,EAAC,yDAAyD;IACxEC,SAAS,EAAC;EAAS,EACpB,CAAC,EACFrC,KAAA,CAAAoB,aAAA,CAACf,WAAW,EAAAgB,QAAA,KACNP,IAAI;IACRQ,SAAS,EAAEpB,UAAU,CACnB,4CAA4C,EAC5CY,IAAI,CAACQ,SACP,CAAE;IACFI,KAAK,GAAAf,WAAA,GAAEG,IAAI,CAACY,KAAK,cAAAf,WAAA,cAAAA,WAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACU,SAAU;IAChER,aAAa,EAAAC,aAAA;MACXC,QAAQ,EAAEpB,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEe,WAAW,CAACC,KAAK,CAACW;IAAiB,GACzDzB,IAAI,CAACgB,aAAa,CACrB;IACFd,KAAK,EAAC,SAAS;IACfD,IAAI,EAAEA;EAAK,EACZ,CACS,CAAC;AAEjB;AAEAT,iBAAiB,CAACkC,qBAAqB,GAAG,IAAI;AAC9C,eAAelC,iBAAiB"}

package/es/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.css

@@ -1,18 +1,6 @@
 /*
  * Utilities
  */
-.dnb-forms-field-postal-code-and-city__fields {
-  display: flex;
-  flex-flow: row;
-  -moz-column-gap: var(--spacing-small);
-       column-gap: var(--spacing-small);
-}
-@media screen and (max-width: 25em) {
-  .dnb-forms-field-postal-code-and-city__fields {
-    row-gap: var(--spacing-x-small);
-    flex-flow: column;
-  }
-}
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
 }

package/es/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.min.css

@@ -1 +1 @@
-.dnb-forms-field-postal-code-and-city__fields{-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}@media screen and (max-width:25em){.dnb-forms-field-postal-code-and-city__fields{flex-flow:column;row-gap:var(--spacing-x-small)}}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}
+.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}

package/es/extensions/forms/Field/PostalCodeAndCity/style/dnb-postal-code-and-city.scss

@@ -1,17 +1,6 @@
 @import '../../../../../style/core/utilities.scss';
 
 .dnb-forms-field-postal-code-and-city {
-  &__fields {
-    display: flex;
-    flex-flow: row;
-    column-gap: var(--spacing-small);
-
-    @include allBelow(x-small) {
-      row-gap: var(--spacing-x-small);
-      flex-flow: column;
-    }
-  }
-
   &__postal-code {
     flex: 0 5rem;
   }

package/es/extensions/forms/Field/Selection/Selection.d.ts

@@ -9,7 +9,6 @@ interface IOption {
 export type Props = FieldHelpProps & FieldProps<IOption['value']> & {
     children?: React.ReactNode;
     variant?: 'dropdown' | 'radio' | 'button';
-    clear?: boolean;
     optionsLayout?: 'horizontal' | 'vertical';
     width?: 'small' | 'medium' | 'large' | 'stretch';
 };

package/es/extensions/forms/Field/Selection/Selection.js

@@ -1,5 +1,3 @@
-"use client";
-
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -8,24 +6,21 @@ const _excluded = ["value", "error", "title", "children"],
   _excluded2 = ["value", "title", "status"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useMemo, useContext, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { ToggleButton, Dropdown, Radio, HelpButton } from '../../../../components';
 import classnames from 'classnames';
 import { makeUniqueId } from '../../../../shared/component-helper';
-import SharedContext from '../../../../shared/Context';
 import OptionField from '../Option';
 import { useDataValue } from '../../hooks';
 import { FormError } from '../../types';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import FieldBlock from '../../FieldBlock';
 function Selection(props) {
-  const sharedContext = useContext(SharedContext);
   const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, []);
   const {
     id,
     className,
     variant = 'dropdown',
-    clear,
     label,
     labelDescription,
     layout = 'vertical',
@@ -145,10 +140,6 @@ function Selection(props) {
             content: child
           };
         });
-        const data = [clear ? {
-          selectedKey: clearValue,
-          content: React.createElement("em", null, sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectionClearSelected)
-        } : undefined, ...(optionsData !== null && optionsData !== void 0 ? optionsData : [])].filter(Boolean);
         return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
           width: width
         }), React.createElement(Dropdown, _extends({
@@ -160,7 +151,7 @@ function Selection(props) {
           status: (hasError || status) && 'error',
           disabled: disabled
         }, ariaAttributes, {
-          data: data,
+          data: optionsData,
           suffix: help ? React.createElement(HelpButton, {
             title: help.title
           }, help.content) : undefined,

package/es/extensions/forms/Field/Selection/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","ToggleButton","Dropdown","Radio","HelpButton","classnames","makeUniqueId","SharedContext","OptionField","useDataValue","FormError","pickSpacingProps","FieldBlock","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","ariaAttributes","setHasFocus","handleChange","children","handleDropdownChange","data","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","v","title","rest","_objectWithoutProperties","_excluded","status","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","optionsData","_child$props$value","_ref","_child$props$children","_child$props$children2","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","suffix","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport OptionField from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport FieldBlock from '../../FieldBlock'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    ariaAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const {\n            value: v,\n            error,\n            title,\n            children,\n            ...rest\n          } = option.props\n\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            value: v,\n            status,\n            ...rest,\n          }\n        }),\n    [children, getStatus]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={status}\n                  {...ariaAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === OptionField) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          <Dropdown\n            id={id}\n            list_class=\"dnb-forms-field-selection__list\"\n            portal_class=\"dnb-forms-field-selection__portal\"\n            title={placeholder}\n            value={String(value ?? '')}\n            status={(hasError || status) && 'error'}\n            disabled={disabled}\n            {...ariaAttributes}\n            data={data}\n            suffix={\n              help ? (\n                <HelpButton title={help.title}>{help.content}</HelpButton>\n              ) : undefined\n            }\n            on_change={handleDropdownChange}\n            on_show={handleShow}\n            on_hide={handleHide}\n            stretch\n          />\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","ToggleButton","Dropdown","Radio","HelpButton","classnames","makeUniqueId","OptionField","useDataValue","FormError","pickSpacingProps","FieldBlock","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","ariaAttributes","setHasFocus","handleChange","children","handleDropdownChange","data","selectedKey","onChangeHandler","undefined","handleShow","handleHide","cn","fieldBlockProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","v","title","rest","_objectWithoutProperties","_excluded","status","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","optionsData","_child$props$value","_ref","_child$props$children","_child$props$children2","content","_em","list_class","portal_class","suffix","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport OptionField from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport FieldBlock from '../../FieldBlock'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    ariaAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const {\n            value: v,\n            error,\n            title,\n            children,\n            ...rest\n          } = option.props\n\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            value: v,\n            status,\n            ...rest,\n          }\n        }),\n    [children, getStatus]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={status}\n                  {...ariaAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === OptionField) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          <Dropdown\n            id={id}\n            list_class=\"dnb-forms-field-selection__list\"\n            portal_class=\"dnb-forms-field-selection__portal\"\n            title={placeholder}\n            value={String(value ?? '')}\n            status={(hasError || status) && 'error'}\n            disabled={disabled}\n            {...ariaAttributes}\n            data={optionsData}\n            suffix={\n              help ? (\n                <HelpButton title={help.title}>{help.content}</HelpButton>\n              ) : undefined\n            }\n            on_change={handleDropdownChange}\n            on_show={handleShow}\n            on_hide={handleHide}\n            stretch\n          />\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

package/es/extensions/forms/Field/String/String.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { InputProps } from '../../../../components/input/Input';
 import { InputMaskedProps } from '../../../../components/InputMasked';
+import { TextareaProps } from '../../../../components/Textarea';
 import type { TextCounterProps } from '../../../../fragments/TextCounter';
 import type { FieldProps, FieldHelpProps, CustomErrorMessages } from '../../types';
 interface ErrorMessages extends CustomErrorMessages {
@@ -11,23 +12,33 @@ interface ErrorMessages extends CustomErrorMessages {
     pattern?: string;
 }
 export type Props = FieldHelpProps & FieldProps<string, undefined | string, ErrorMessages> & {
-    type?: InputProps['type'];
     multiline?: boolean;
+    mask?: InputMaskedProps['mask'];
     leftIcon?: string;
     rightIcon?: string;
     inputClassName?: string;
     innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
-    clear?: boolean;
-    autoresize?: boolean;
-    autoComplete?: HTMLInputElement['autocomplete'];
-    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
-    autoresizeMaxRows?: number;
-    characterCounter?: Omit<TextCounterProps, 'text'> | number;
-    mask?: InputMaskedProps['mask'];
+    submitElement?: InputProps['submit_element'];
+    width?: false | 'small' | 'medium' | 'large' | 'stretch';
     minLength?: number;
     maxLength?: number;
     pattern?: string;
-    width?: false | 'small' | 'medium' | 'large' | 'stretch';
+    type?: InputProps['type'];
+    size?: InputProps['size'];
+    align?: InputProps['align'];
+    selectall?: InputProps['selectall'];
+    clear?: boolean;
+    keepPlaceholder?: InputProps['keep_placeholder'];
+    rows?: TextareaProps['rows'];
+    autoresizeMaxRows?: TextareaProps['autoresize_max_rows'];
+    autoresize?: TextareaProps['autoresize'];
+    characterCounter?: Omit<TextCounterProps, 'text'> | number;
+    autoComplete?: HTMLInputElement['autocomplete'];
+    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
+    autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect'];
+    spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck'];
+    autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus'];
+    autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize'];
 };
 declare function StringComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace StringComponent {