@dnb/eufemia 10.28.0 → 10.29.0

package/extensions/forms/Wizard/style/dnb-wizard-layout.scss

@@ -19,10 +19,40 @@
   &__contents {
     flex: 1;
 
+    .dnb-forms-step {
+      outline: none;
+    }
+
     .dnb-card {
       --border-color: var(--color-pistachio);
       max-width: var(--forms-card-max-width);
     }
+
+    .dnb-forms-step > .appear-fx,
+    .dnb-forms-button-row > .appear-fx {
+      --appear-opacity: 0;
+      --appear-offset: -0.25rem;
+
+      opacity: var(--appear-opacity);
+      transform: translate3d(var(--appear-offset), 0, 0);
+
+      animation: appear 600ms var(--easing-default) forwards;
+      animation-delay: calc(var(--element-index, 0) * 30ms);
+
+      @keyframes appear {
+        0% {
+          opacity: var(--appear-opacity);
+          transform: translate3d(var(--appear-offset), 0, 0);
+        }
+        80% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 1;
+          transform: translate3d(0, 0, 0);
+        }
+      }
+    }
   }
 
   // FormStatus as part of the Form.Handler
@@ -50,6 +80,9 @@
   }
 }
 
-.dnb-forms-step {
-  outline: none;
+@include allAbove('medium') {
+  .dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar)
+    .dnb-forms-status {
+    margin-left: 23rem;
+  }
 }

package/extensions/forms/constants/locales/en-GB.d.ts

@@ -64,10 +64,16 @@ declare const _default: {
         FirstName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
         };
         LastName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
+        };
+        CompanyName: {
+            label: string;
+            errorRequired: string;
         };
         NationalIdentityNumber: {
             label: string;
@@ -89,6 +95,9 @@ declare const _default: {
             errorRequired: string;
             warningRequired: string;
         };
+        PostalCodeAndCity: {
+            label: string;
+        };
         PostalCode: {
             label: string;
             errorRequired: string;

package/extensions/forms/constants/locales/en-GB.js

@@ -53,12 +53,18 @@ export default {
       errorPattern: 'Invalid Email address. Enter a valid Email address.'
     },
     FirstName: {
-      label: 'First name',
-      errorRequired: 'You must enter a first name.'
+      label: 'Given name',
+      errorRequired: 'You must enter a given name (first name).',
+      errorPattern: 'Enter a given name (first name) using only letters and characters such as hyphens and spaces.'
     },
     LastName: {
       label: 'Surname',
-      errorRequired: 'You must enter a surname.'
+      errorRequired: 'You must enter a surname (last name).',
+      errorPattern: 'Enter a surname (last name) using only letters and characters such as hyphens and spaces.'
+    },
+    CompanyName: {
+      label: 'Company name',
+      errorRequired: 'You must enter a company name.'
     },
     NationalIdentityNumber: {
       label: 'National identity number (11 digits)',
@@ -80,6 +86,9 @@ export default {
       errorRequired: 'Mobile number must be filled in. If you don’t have a mobile number, you can enter another phone number.',
       warningRequired: 'You have not entered a mobile number. You can still use this number if it is correct.'
     },
+    PostalCodeAndCity: {
+      label: 'Postcode and city'
+    },
     PostalCode: {
       label: 'Postc.',
       errorRequired: 'You must enter a postcode.',

package/extensions/forms/constants/locales/en-GB.js.map

@@ -1 +1 @@
-{"version":3,"file":"en-GB.js","names":["SubmitButton","text","sendText","Step","next","previous","edit","summaryTitle","Form","errorSummaryTitle","Iterate","remove","done","cancel","Field","stateSummary","errorSummary","errorRequired","errorPattern","StringField","errorMinLength","errorMaxLength","NumberField","errorMinimum","errorMaximum","errorExclusiveMinimum","errorExclusiveMaximum","errorMultipleOf","BooleanField","yes","no","Date","label","Expiry","Email","FirstName","LastName","NationalIdentityNumber","OrganizationNumber","BankAccountNumber","PhoneNumber","countryCodeLabel","warningRequired","PostalCode","City","SelectCountry","placeholder","Password","ariaLabelShow","ariaLabelHide"],"sources":["../../../../../../src/extensions/forms/constants/locales/en-GB.ts"],"sourcesContent":["export default {\n  'en-GB': {\n    /**\n     * General\n     */\n    SubmitButton: {\n      text: 'Send',\n      sendText: 'Send',\n    },\n    Step: {\n      next: 'Next',\n      previous: 'Back',\n      edit: 'Edit',\n      summaryTitle: 'Summary',\n    },\n    Form: {\n      errorSummaryTitle: 'Please correct the following errors',\n    },\n    Iterate: {\n      remove: 'Remove',\n      done: 'Done',\n      cancel: 'Cancel',\n      edit: 'Edit',\n    },\n\n    /**\n     * Base fields\n     */\n    Field: {\n      stateSummary: 'Summary:',\n      errorSummary: 'Please correct the following errors:',\n      errorRequired: 'This field is required.',\n      errorPattern: 'The value is invalid.',\n    },\n    StringField: {\n      errorMinLength:\n        'The value cannot be shorter than {minLength} characters.',\n      errorMaxLength:\n        'The value cannot be longer than {maxLength} characters.',\n    },\n    NumberField: {\n      errorMinimum: 'The value must be at least {minimum}.',\n      errorMaximum: 'The value must be a maximum of {maximum}.',\n      errorExclusiveMinimum:\n        'The value must be greater than {exclusiveMinimum}.',\n      errorExclusiveMaximum:\n        'The value must be less than {exclusiveMaximum}.',\n      errorMultipleOf: 'The value must be a multiple of {multipleOf}.',\n    },\n    BooleanField: {\n      yes: 'Yes',\n      no: 'No',\n    },\n\n    /**\n     * Feature fields\n     */\n    Date: {\n      label: 'Date',\n      errorRequired: 'You must provide a valid date.',\n    },\n    Expiry: {\n      label: 'Expiry date',\n    },\n    Email: {\n      label: 'Email address',\n      errorRequired: 'You must enter a Email address.',\n      errorPattern: 'Invalid Email address. Enter a valid Email address.',\n    },\n    FirstName: {\n      label: 'First name',\n      errorRequired: 'You must enter a first name.',\n    },\n    LastName: {\n      label: 'Surname',\n      errorRequired: 'You must enter a surname.',\n    },\n    NationalIdentityNumber: {\n      label: 'National identity number (11 digits)',\n      errorRequired:\n        'Invalid national identity number. Enter a valid 11-digit number.',\n    },\n    OrganizationNumber: {\n      label: 'Organisation number',\n      errorRequired: 'You must enter an organisation number.',\n      errorPattern: 'This is not a valid organisation number.',\n    },\n    BankAccountNumber: {\n      label: 'Bank account',\n      errorRequired:\n        'Enter a valid account number. Account number is mandatory to fill out.',\n      errorPattern: 'This is not a valid bank account number.',\n    },\n    PhoneNumber: {\n      label: 'Mobile number',\n      countryCodeLabel: 'Country code',\n      errorRequired:\n        'Mobile number must be filled in. If you don’t have a mobile number, you can enter another phone number.',\n      warningRequired:\n        'You have not entered a mobile number. You can still use this number if it is correct.',\n    },\n    PostalCode: {\n      label: 'Postc.',\n      errorRequired: 'You must enter a postcode.',\n      errorPattern: 'This is not a valid postcode (four-digits).',\n    },\n    City: {\n      label: 'City',\n      errorRequired: 'You must enter a city name.',\n      errorPattern:\n        'City names can only contain letters and valid characters such as hyphens and spaces.',\n    },\n    SelectCountry: {\n      label: 'Country',\n      placeholder: 'Select country',\n      errorRequired: 'You must select a country from the list.',\n    },\n    Password: {\n      label: 'Password',\n      ariaLabelShow: 'Show password',\n      ariaLabelHide: 'Hide password',\n    },\n  },\n}\n"],"mappings":"AAAA,eAAe;EACb,OAAO,EAAE;IAIPA,YAAY,EAAE;MACZC,IAAI,EAAE,MAAM;MACZC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJC,IAAI,EAAE,MAAM;MACZC,QAAQ,EAAE,MAAM;MAChBC,IAAI,EAAE,MAAM;MACZC,YAAY,EAAE;IAChB,CAAC;IACDC,IAAI,EAAE;MACJC,iBAAiB,EAAE;IACrB,CAAC;IACDC,OAAO,EAAE;MACPC,MAAM,EAAE,QAAQ;MAChBC,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBP,IAAI,EAAE;IACR,CAAC;IAKDQ,KAAK,EAAE;MACLC,YAAY,EAAE,UAAU;MACxBC,YAAY,EAAE,sCAAsC;MACpDC,aAAa,EAAE,yBAAyB;MACxCC,YAAY,EAAE;IAChB,CAAC;IACDC,WAAW,EAAE;MACXC,cAAc,EACZ,0DAA0D;MAC5DC,cAAc,EACZ;IACJ,CAAC;IACDC,WAAW,EAAE;MACXC,YAAY,EAAE,uCAAuC;MACrDC,YAAY,EAAE,2CAA2C;MACzDC,qBAAqB,EACnB,oDAAoD;MACtDC,qBAAqB,EACnB,iDAAiD;MACnDC,eAAe,EAAE;IACnB,CAAC;IACDC,YAAY,EAAE;MACZC,GAAG,EAAE,KAAK;MACVC,EAAE,EAAE;IACN,CAAC;IAKDC,IAAI,EAAE;MACJC,KAAK,EAAE,MAAM;MACbf,aAAa,EAAE;IACjB,CAAC;IACDgB,MAAM,EAAE;MACND,KAAK,EAAE;IACT,CAAC;IACDE,KAAK,EAAE;MACLF,KAAK,EAAE,eAAe;MACtBf,aAAa,EAAE,iCAAiC;MAChDC,YAAY,EAAE;IAChB,CAAC;IACDiB,SAAS,EAAE;MACTH,KAAK,EAAE,YAAY;MACnBf,aAAa,EAAE;IACjB,CAAC;IACDmB,QAAQ,EAAE;MACRJ,KAAK,EAAE,SAAS;MAChBf,aAAa,EAAE;IACjB,CAAC;IACDoB,sBAAsB,EAAE;MACtBL,KAAK,EAAE,sCAAsC;MAC7Cf,aAAa,EACX;IACJ,CAAC;IACDqB,kBAAkB,EAAE;MAClBN,KAAK,EAAE,qBAAqB;MAC5Bf,aAAa,EAAE,wCAAwC;MACvDC,YAAY,EAAE;IAChB,CAAC;IACDqB,iBAAiB,EAAE;MACjBP,KAAK,EAAE,cAAc;MACrBf,aAAa,EACX,wEAAwE;MAC1EC,YAAY,EAAE;IAChB,CAAC;IACDsB,WAAW,EAAE;MACXR,KAAK,EAAE,eAAe;MACtBS,gBAAgB,EAAE,cAAc;MAChCxB,aAAa,EACX,yGAAyG;MAC3GyB,eAAe,EACb;IACJ,CAAC;IACDC,UAAU,EAAE;MACVX,KAAK,EAAE,QAAQ;MACff,aAAa,EAAE,4BAA4B;MAC3CC,YAAY,EAAE;IAChB,CAAC;IACD0B,IAAI,EAAE;MACJZ,KAAK,EAAE,MAAM;MACbf,aAAa,EAAE,6BAA6B;MAC5CC,YAAY,EACV;IACJ,CAAC;IACD2B,aAAa,EAAE;MACbb,KAAK,EAAE,SAAS;MAChBc,WAAW,EAAE,gBAAgB;MAC7B7B,aAAa,EAAE;IACjB,CAAC;IACD8B,QAAQ,EAAE;MACRf,KAAK,EAAE,UAAU;MACjBgB,aAAa,EAAE,eAAe;MAC9BC,aAAa,EAAE;IACjB;EACF;AACF,CAAC"}
+{"version":3,"file":"en-GB.js","names":["SubmitButton","text","sendText","Step","next","previous","edit","summaryTitle","Form","errorSummaryTitle","Iterate","remove","done","cancel","Field","stateSummary","errorSummary","errorRequired","errorPattern","StringField","errorMinLength","errorMaxLength","NumberField","errorMinimum","errorMaximum","errorExclusiveMinimum","errorExclusiveMaximum","errorMultipleOf","BooleanField","yes","no","Date","label","Expiry","Email","FirstName","LastName","CompanyName","NationalIdentityNumber","OrganizationNumber","BankAccountNumber","PhoneNumber","countryCodeLabel","warningRequired","PostalCodeAndCity","PostalCode","City","SelectCountry","placeholder","Password","ariaLabelShow","ariaLabelHide"],"sources":["../../../../../../src/extensions/forms/constants/locales/en-GB.ts"],"sourcesContent":["export default {\n  'en-GB': {\n    /**\n     * General\n     */\n    SubmitButton: {\n      text: 'Send',\n      sendText: 'Send',\n    },\n    Step: {\n      next: 'Next',\n      previous: 'Back',\n      edit: 'Edit',\n      summaryTitle: 'Summary',\n    },\n    Form: {\n      errorSummaryTitle: 'Please correct the following errors',\n    },\n    Iterate: {\n      remove: 'Remove',\n      done: 'Done',\n      cancel: 'Cancel',\n      edit: 'Edit',\n    },\n\n    /**\n     * Base fields\n     */\n    Field: {\n      stateSummary: 'Summary:',\n      errorSummary: 'Please correct the following errors:',\n      errorRequired: 'This field is required.',\n      errorPattern: 'The value is invalid.',\n    },\n    StringField: {\n      errorMinLength:\n        'The value cannot be shorter than {minLength} characters.',\n      errorMaxLength:\n        'The value cannot be longer than {maxLength} characters.',\n    },\n    NumberField: {\n      errorMinimum: 'The value must be at least {minimum}.',\n      errorMaximum: 'The value must be a maximum of {maximum}.',\n      errorExclusiveMinimum:\n        'The value must be greater than {exclusiveMinimum}.',\n      errorExclusiveMaximum:\n        'The value must be less than {exclusiveMaximum}.',\n      errorMultipleOf: 'The value must be a multiple of {multipleOf}.',\n    },\n    BooleanField: {\n      yes: 'Yes',\n      no: 'No',\n    },\n\n    /**\n     * Feature fields\n     */\n    Date: {\n      label: 'Date',\n      errorRequired: 'You must provide a valid date.',\n    },\n    Expiry: {\n      label: 'Expiry date',\n    },\n    Email: {\n      label: 'Email address',\n      errorRequired: 'You must enter a Email address.',\n      errorPattern: 'Invalid Email address. Enter a valid Email address.',\n    },\n    FirstName: {\n      label: 'Given name',\n      errorRequired: 'You must enter a given name (first name).',\n      errorPattern:\n        'Enter a given name (first name) using only letters and characters such as hyphens and spaces.',\n    },\n    LastName: {\n      label: 'Surname',\n      errorRequired: 'You must enter a surname (last name).',\n      errorPattern:\n        'Enter a surname (last name) using only letters and characters such as hyphens and spaces.',\n    },\n    CompanyName: {\n      label: 'Company name',\n      errorRequired: 'You must enter a company name.',\n    },\n    NationalIdentityNumber: {\n      label: 'National identity number (11 digits)',\n      errorRequired:\n        'Invalid national identity number. Enter a valid 11-digit number.',\n    },\n    OrganizationNumber: {\n      label: 'Organisation number',\n      errorRequired: 'You must enter an organisation number.',\n      errorPattern: 'This is not a valid organisation number.',\n    },\n    BankAccountNumber: {\n      label: 'Bank account',\n      errorRequired:\n        'Enter a valid account number. Account number is mandatory to fill out.',\n      errorPattern: 'This is not a valid bank account number.',\n    },\n    PhoneNumber: {\n      label: 'Mobile number',\n      countryCodeLabel: 'Country code',\n      errorRequired:\n        'Mobile number must be filled in. If you don’t have a mobile number, you can enter another phone number.',\n      warningRequired:\n        'You have not entered a mobile number. You can still use this number if it is correct.',\n    },\n    PostalCodeAndCity: {\n      label: 'Postcode and city',\n    },\n    PostalCode: {\n      label: 'Postc.',\n      errorRequired: 'You must enter a postcode.',\n      errorPattern: 'This is not a valid postcode (four-digits).',\n    },\n    City: {\n      label: 'City',\n      errorRequired: 'You must enter a city name.',\n      errorPattern:\n        'City names can only contain letters and valid characters such as hyphens and spaces.',\n    },\n    SelectCountry: {\n      label: 'Country',\n      placeholder: 'Select country',\n      errorRequired: 'You must select a country from the list.',\n    },\n    Password: {\n      label: 'Password',\n      ariaLabelShow: 'Show password',\n      ariaLabelHide: 'Hide password',\n    },\n  },\n}\n"],"mappings":"AAAA,eAAe;EACb,OAAO,EAAE;IAIPA,YAAY,EAAE;MACZC,IAAI,EAAE,MAAM;MACZC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJC,IAAI,EAAE,MAAM;MACZC,QAAQ,EAAE,MAAM;MAChBC,IAAI,EAAE,MAAM;MACZC,YAAY,EAAE;IAChB,CAAC;IACDC,IAAI,EAAE;MACJC,iBAAiB,EAAE;IACrB,CAAC;IACDC,OAAO,EAAE;MACPC,MAAM,EAAE,QAAQ;MAChBC,IAAI,EAAE,MAAM;MACZC,MAAM,EAAE,QAAQ;MAChBP,IAAI,EAAE;IACR,CAAC;IAKDQ,KAAK,EAAE;MACLC,YAAY,EAAE,UAAU;MACxBC,YAAY,EAAE,sCAAsC;MACpDC,aAAa,EAAE,yBAAyB;MACxCC,YAAY,EAAE;IAChB,CAAC;IACDC,WAAW,EAAE;MACXC,cAAc,EACZ,0DAA0D;MAC5DC,cAAc,EACZ;IACJ,CAAC;IACDC,WAAW,EAAE;MACXC,YAAY,EAAE,uCAAuC;MACrDC,YAAY,EAAE,2CAA2C;MACzDC,qBAAqB,EACnB,oDAAoD;MACtDC,qBAAqB,EACnB,iDAAiD;MACnDC,eAAe,EAAE;IACnB,CAAC;IACDC,YAAY,EAAE;MACZC,GAAG,EAAE,KAAK;MACVC,EAAE,EAAE;IACN,CAAC;IAKDC,IAAI,EAAE;MACJC,KAAK,EAAE,MAAM;MACbf,aAAa,EAAE;IACjB,CAAC;IACDgB,MAAM,EAAE;MACND,KAAK,EAAE;IACT,CAAC;IACDE,KAAK,EAAE;MACLF,KAAK,EAAE,eAAe;MACtBf,aAAa,EAAE,iCAAiC;MAChDC,YAAY,EAAE;IAChB,CAAC;IACDiB,SAAS,EAAE;MACTH,KAAK,EAAE,YAAY;MACnBf,aAAa,EAAE,2CAA2C;MAC1DC,YAAY,EACV;IACJ,CAAC;IACDkB,QAAQ,EAAE;MACRJ,KAAK,EAAE,SAAS;MAChBf,aAAa,EAAE,uCAAuC;MACtDC,YAAY,EACV;IACJ,CAAC;IACDmB,WAAW,EAAE;MACXL,KAAK,EAAE,cAAc;MACrBf,aAAa,EAAE;IACjB,CAAC;IACDqB,sBAAsB,EAAE;MACtBN,KAAK,EAAE,sCAAsC;MAC7Cf,aAAa,EACX;IACJ,CAAC;IACDsB,kBAAkB,EAAE;MAClBP,KAAK,EAAE,qBAAqB;MAC5Bf,aAAa,EAAE,wCAAwC;MACvDC,YAAY,EAAE;IAChB,CAAC;IACDsB,iBAAiB,EAAE;MACjBR,KAAK,EAAE,cAAc;MACrBf,aAAa,EACX,wEAAwE;MAC1EC,YAAY,EAAE;IAChB,CAAC;IACDuB,WAAW,EAAE;MACXT,KAAK,EAAE,eAAe;MACtBU,gBAAgB,EAAE,cAAc;MAChCzB,aAAa,EACX,yGAAyG;MAC3G0B,eAAe,EACb;IACJ,CAAC;IACDC,iBAAiB,EAAE;MACjBZ,KAAK,EAAE;IACT,CAAC;IACDa,UAAU,EAAE;MACVb,KAAK,EAAE,QAAQ;MACff,aAAa,EAAE,4BAA4B;MAC3CC,YAAY,EAAE;IAChB,CAAC;IACD4B,IAAI,EAAE;MACJd,KAAK,EAAE,MAAM;MACbf,aAAa,EAAE,6BAA6B;MAC5CC,YAAY,EACV;IACJ,CAAC;IACD6B,aAAa,EAAE;MACbf,KAAK,EAAE,SAAS;MAChBgB,WAAW,EAAE,gBAAgB;MAC7B/B,aAAa,EAAE;IACjB,CAAC;IACDgC,QAAQ,EAAE;MACRjB,KAAK,EAAE,UAAU;MACjBkB,aAAa,EAAE,eAAe;MAC9BC,aAAa,EAAE;IACjB;EACF;AACF,CAAC"}

package/extensions/forms/constants/locales/en-US.d.ts

@@ -60,10 +60,16 @@ declare const _default: {
         FirstName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
         };
         LastName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
+        };
+        CompanyName: {
+            label: string;
+            errorRequired: string;
         };
         NationalIdentityNumber: {
             label: string;
@@ -80,6 +86,9 @@ declare const _default: {
             errorRequired: string;
             warningRequired: string;
         };
+        PostalCodeAndCity: {
+            label: string;
+        };
         PostalCode: {
             label: string;
             errorRequired: string;

package/extensions/forms/constants/locales/index.d.ts

@@ -55,10 +55,16 @@ declare const locales: {
         FirstName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
         };
         LastName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
+        };
+        CompanyName: {
+            label: string;
+            errorRequired: string;
         };
         NationalIdentityNumber: {
             label: string;
@@ -80,6 +86,9 @@ declare const locales: {
             errorRequired: string;
             warningRequired: string;
         };
+        PostalCodeAndCity: {
+            label: string;
+        };
         PostalCode: {
             label: string;
             errorRequired: string;
@@ -157,10 +166,16 @@ declare const locales: {
         FirstName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
         };
         LastName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
+        };
+        CompanyName: {
+            label: string;
+            errorRequired: string;
         };
         NationalIdentityNumber: {
             label: string;
@@ -182,6 +197,9 @@ declare const locales: {
             errorRequired: string;
             warningRequired: string;
         };
+        PostalCodeAndCity: {
+            label: string;
+        };
         PostalCode: {
             label: string;
             errorRequired: string;

package/extensions/forms/constants/locales/nb-NO.d.ts

@@ -64,10 +64,16 @@ declare const _default: {
         FirstName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
         };
         LastName: {
             label: string;
             errorRequired: string;
+            errorPattern: string;
+        };
+        CompanyName: {
+            label: string;
+            errorRequired: string;
         };
         NationalIdentityNumber: {
             label: string;
@@ -89,6 +95,9 @@ declare const _default: {
             errorRequired: string;
             warningRequired: string;
         };
+        PostalCodeAndCity: {
+            label: string;
+        };
         PostalCode: {
             label: string;
             errorRequired: string;

package/extensions/forms/constants/locales/nb-NO.js

@@ -54,11 +54,17 @@ export default {
     },
     FirstName: {
       label: 'Fornavn',
-      errorRequired: 'Du må fylle inn fornavn.'
+      errorRequired: 'Du må fylle inn fornavn.',
+      errorPattern: 'Kun bokstaver og tegn som bindestrek og mellomrom er tillatt.'
     },
     LastName: {
       label: 'Etternavn',
-      errorRequired: 'Du må fylle inn etternavn.'
+      errorRequired: 'Du må fylle inn etternavn.',
+      errorPattern: 'Kun bokstaver og tegn som bindestrek og mellomrom er tillatt.'
+    },
+    CompanyName: {
+      label: 'Firmanavn',
+      errorRequired: 'Du må fylle inn firmanavn.'
     },
     NationalIdentityNumber: {
       label: 'Fødselsnummer (11 siffer)',
@@ -80,6 +86,9 @@ export default {
       errorRequired: 'Mobilnummer må fylles ut. Hvis du ikke har et mobilnummer, kan du oppgi et annet telefonnummer.',
       warningRequired: 'Du har ikke skrevet inn et mobilnummer. Du kan likevel bruke dette nummeret hvis det er riktig.'
     },
+    PostalCodeAndCity: {
+      label: 'Postnummer og sted'
+    },
     PostalCode: {
       label: 'Postnr.',
       errorRequired: 'Du må fylle inn et postnummer.',

package/extensions/forms/constants/locales/nb-NO.js.map

@@ -1 +1 @@
-{"version":3,"file":"nb-NO.js","names":["SubmitButton","text","sendText","Step","next","previous","edit","summaryTitle","Form","errorSummaryTitle","Iterate","remove","done","cancel","Field","stateSummary","errorSummary","errorRequired","errorPattern","StringField","errorMinLength","errorMaxLength","NumberField","errorMinimum","errorMaximum","errorExclusiveMinimum","errorExclusiveMaximum","errorMultipleOf","BooleanField","yes","no","Date","label","Expiry","Email","FirstName","LastName","NationalIdentityNumber","OrganizationNumber","BankAccountNumber","PhoneNumber","countryCodeLabel","warningRequired","PostalCode","City","SelectCountry","placeholder","Password","ariaLabelShow","ariaLabelHide"],"sources":["../../../../../../src/extensions/forms/constants/locales/nb-NO.ts"],"sourcesContent":["export default {\n  'nb-NO': {\n    /**\n     * General\n     */\n    SubmitButton: {\n      text: 'Send',\n      sendText: 'Send inn',\n    },\n    Step: {\n      next: 'Neste',\n      previous: 'Tilbake',\n      edit: 'Endre',\n      summaryTitle: 'Oppsummering',\n    },\n    Form: {\n      errorSummaryTitle: 'Feil som må rettes',\n    },\n    Iterate: {\n      remove: 'Fjern',\n      done: 'Ferdig',\n      cancel: 'Avbryt',\n      edit: 'Endre',\n    },\n\n    /**\n     * Base fields\n     */\n    Field: {\n      stateSummary: 'Oppsummering:',\n      errorSummary: 'Feil som må rettes:',\n      errorRequired: 'Dette feltet må fylles ut.',\n      errorPattern: 'Verdien er ugyldig.',\n    },\n    StringField: {\n      errorMinLength:\n        'Verdien kan ikke være kortere enn {minLength} tegn.',\n      errorMaxLength: 'Verdien kan ikke være lengre enn {maxLength} tegn.',\n    },\n    NumberField: {\n      errorMinimum: 'Verdien må være minst {minimum}.',\n      errorMaximum: 'Verdien må være maksimalt {maximum}.',\n      errorExclusiveMinimum:\n        'Verdien må være større enn {exclusiveMinimum}.',\n      errorExclusiveMaximum:\n        'Verdien må være mindre enn {exclusiveMaximum}.',\n      errorMultipleOf: 'Verdien må være et multiplum av {multipleOf}.',\n    },\n    BooleanField: {\n      yes: 'Ja',\n      no: 'Nei',\n    },\n\n    /**\n     * Feature fields\n     */\n    Date: {\n      label: 'Dato',\n      errorRequired: 'Du må angi en gyldig dato.',\n    },\n    Expiry: {\n      label: 'Utløpsdato',\n    },\n    Email: {\n      label: 'E-postadresse',\n      errorRequired: 'Du må fylle inn en e-postadresse.',\n      errorPattern: 'Ugyldig e-postadresse. Skriv inn en e-postadresse.',\n    },\n    FirstName: {\n      label: 'Fornavn',\n      errorRequired: 'Du må fylle inn fornavn.',\n    },\n    LastName: {\n      label: 'Etternavn',\n      errorRequired: 'Du må fylle inn etternavn.',\n    },\n    NationalIdentityNumber: {\n      label: 'Fødselsnummer (11 siffer)',\n      errorRequired:\n        'Ugyldig fødselsnummer. Skriv inn et gyldig fødselsnummer med 11 siffer.',\n    },\n    OrganizationNumber: {\n      label: 'Organisasjonsnummer',\n      errorRequired: 'Du må fylle inn et organisasjonsnummer.',\n      errorPattern: 'Dette er ikke et gyldig organisasjonsnummer.',\n    },\n    BankAccountNumber: {\n      label: 'Bankkonto',\n      errorRequired:\n        'Skriv inn et gyldig kontonummer. Kontonummeret må fylles ut.',\n      errorPattern: 'Dette er ikke et gyldig kontonummer.',\n    },\n    PhoneNumber: {\n      label: 'Mobilnummer',\n      countryCodeLabel: 'Landskode',\n      errorRequired:\n        'Mobilnummer må fylles ut. Hvis du ikke har et mobilnummer, kan du oppgi et annet telefonnummer.',\n      warningRequired:\n        'Du har ikke skrevet inn et mobilnummer. Du kan likevel bruke dette nummeret hvis det er riktig.',\n    },\n    PostalCode: {\n      label: 'Postnr.',\n      errorRequired: 'Du må fylle inn et postnummer.',\n      errorPattern: 'Dette er ikke et gyldig postnummer (fire siffer).',\n    },\n    City: {\n      label: 'Sted',\n      errorRequired: 'Du må fylle inn et stedsnavn.',\n      errorPattern:\n        'Stedsnavn kan kun inneholde bokstaver og gyldige tegn som bindestrek og mellomrom.',\n    },\n    SelectCountry: {\n      label: 'Land',\n      placeholder: 'Velg et land',\n      errorRequired: 'Du må velge et land fra listen.',\n    },\n    Password: {\n      label: 'Passord',\n      ariaLabelShow: 'Vis passord',\n      ariaLabelHide: 'Skjul passord',\n    },\n  },\n}\n"],"mappings":"AAAA,eAAe;EACb,OAAO,EAAE;IAIPA,YAAY,EAAE;MACZC,IAAI,EAAE,MAAM;MACZC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJC,IAAI,EAAE,OAAO;MACbC,QAAQ,EAAE,SAAS;MACnBC,IAAI,EAAE,OAAO;MACbC,YAAY,EAAE;IAChB,CAAC;IACDC,IAAI,EAAE;MACJC,iBAAiB,EAAE;IACrB,CAAC;IACDC,OAAO,EAAE;MACPC,MAAM,EAAE,OAAO;MACfC,IAAI,EAAE,QAAQ;MACdC,MAAM,EAAE,QAAQ;MAChBP,IAAI,EAAE;IACR,CAAC;IAKDQ,KAAK,EAAE;MACLC,YAAY,EAAE,eAAe;MAC7BC,YAAY,EAAE,qBAAqB;MACnCC,aAAa,EAAE,4BAA4B;MAC3CC,YAAY,EAAE;IAChB,CAAC;IACDC,WAAW,EAAE;MACXC,cAAc,EACZ,qDAAqD;MACvDC,cAAc,EAAE;IAClB,CAAC;IACDC,WAAW,EAAE;MACXC,YAAY,EAAE,kCAAkC;MAChDC,YAAY,EAAE,sCAAsC;MACpDC,qBAAqB,EACnB,gDAAgD;MAClDC,qBAAqB,EACnB,gDAAgD;MAClDC,eAAe,EAAE;IACnB,CAAC;IACDC,YAAY,EAAE;MACZC,GAAG,EAAE,IAAI;MACTC,EAAE,EAAE;IACN,CAAC;IAKDC,IAAI,EAAE;MACJC,KAAK,EAAE,MAAM;MACbf,aAAa,EAAE;IACjB,CAAC;IACDgB,MAAM,EAAE;MACND,KAAK,EAAE;IACT,CAAC;IACDE,KAAK,EAAE;MACLF,KAAK,EAAE,eAAe;MACtBf,aAAa,EAAE,mCAAmC;MAClDC,YAAY,EAAE;IAChB,CAAC;IACDiB,SAAS,EAAE;MACTH,KAAK,EAAE,SAAS;MAChBf,aAAa,EAAE;IACjB,CAAC;IACDmB,QAAQ,EAAE;MACRJ,KAAK,EAAE,WAAW;MAClBf,aAAa,EAAE;IACjB,CAAC;IACDoB,sBAAsB,EAAE;MACtBL,KAAK,EAAE,2BAA2B;MAClCf,aAAa,EACX;IACJ,CAAC;IACDqB,kBAAkB,EAAE;MAClBN,KAAK,EAAE,qBAAqB;MAC5Bf,aAAa,EAAE,yCAAyC;MACxDC,YAAY,EAAE;IAChB,CAAC;IACDqB,iBAAiB,EAAE;MACjBP,KAAK,EAAE,WAAW;MAClBf,aAAa,EACX,8DAA8D;MAChEC,YAAY,EAAE;IAChB,CAAC;IACDsB,WAAW,EAAE;MACXR,KAAK,EAAE,aAAa;MACpBS,gBAAgB,EAAE,WAAW;MAC7BxB,aAAa,EACX,iGAAiG;MACnGyB,eAAe,EACb;IACJ,CAAC;IACDC,UAAU,EAAE;MACVX,KAAK,EAAE,SAAS;MAChBf,aAAa,EAAE,gCAAgC;MAC/CC,YAAY,EAAE;IAChB,CAAC;IACD0B,IAAI,EAAE;MACJZ,KAAK,EAAE,MAAM;MACbf,aAAa,EAAE,+BAA+B;MAC9CC,YAAY,EACV;IACJ,CAAC;IACD2B,aAAa,EAAE;MACbb,KAAK,EAAE,MAAM;MACbc,WAAW,EAAE,cAAc;MAC3B7B,aAAa,EAAE;IACjB,CAAC;IACD8B,QAAQ,EAAE;MACRf,KAAK,EAAE,SAAS;MAChBgB,aAAa,EAAE,aAAa;MAC5BC,aAAa,EAAE;IACjB;EACF;AACF,CAAC"}
+{"version":3,"file":"nb-NO.js","names":["SubmitButton","text","sendText","Step","next","previous","edit","summaryTitle","Form","errorSummaryTitle","Iterate","remove","done","cancel","Field","stateSummary","errorSummary","errorRequired","errorPattern","StringField","errorMinLength","errorMaxLength","NumberField","errorMinimum","errorMaximum","errorExclusiveMinimum","errorExclusiveMaximum","errorMultipleOf","BooleanField","yes","no","Date","label","Expiry","Email","FirstName","LastName","CompanyName","NationalIdentityNumber","OrganizationNumber","BankAccountNumber","PhoneNumber","countryCodeLabel","warningRequired","PostalCodeAndCity","PostalCode","City","SelectCountry","placeholder","Password","ariaLabelShow","ariaLabelHide"],"sources":["../../../../../../src/extensions/forms/constants/locales/nb-NO.ts"],"sourcesContent":["export default {\n  'nb-NO': {\n    /**\n     * General\n     */\n    SubmitButton: {\n      text: 'Send',\n      sendText: 'Send inn',\n    },\n    Step: {\n      next: 'Neste',\n      previous: 'Tilbake',\n      edit: 'Endre',\n      summaryTitle: 'Oppsummering',\n    },\n    Form: {\n      errorSummaryTitle: 'Feil som må rettes',\n    },\n    Iterate: {\n      remove: 'Fjern',\n      done: 'Ferdig',\n      cancel: 'Avbryt',\n      edit: 'Endre',\n    },\n\n    /**\n     * Base fields\n     */\n    Field: {\n      stateSummary: 'Oppsummering:',\n      errorSummary: 'Feil som må rettes:',\n      errorRequired: 'Dette feltet må fylles ut.',\n      errorPattern: 'Verdien er ugyldig.',\n    },\n    StringField: {\n      errorMinLength:\n        'Verdien kan ikke være kortere enn {minLength} tegn.',\n      errorMaxLength: 'Verdien kan ikke være lengre enn {maxLength} tegn.',\n    },\n    NumberField: {\n      errorMinimum: 'Verdien må være minst {minimum}.',\n      errorMaximum: 'Verdien må være maksimalt {maximum}.',\n      errorExclusiveMinimum:\n        'Verdien må være større enn {exclusiveMinimum}.',\n      errorExclusiveMaximum:\n        'Verdien må være mindre enn {exclusiveMaximum}.',\n      errorMultipleOf: 'Verdien må være et multiplum av {multipleOf}.',\n    },\n    BooleanField: {\n      yes: 'Ja',\n      no: 'Nei',\n    },\n\n    /**\n     * Feature fields\n     */\n    Date: {\n      label: 'Dato',\n      errorRequired: 'Du må angi en gyldig dato.',\n    },\n    Expiry: {\n      label: 'Utløpsdato',\n    },\n    Email: {\n      label: 'E-postadresse',\n      errorRequired: 'Du må fylle inn en e-postadresse.',\n      errorPattern: 'Ugyldig e-postadresse. Skriv inn en e-postadresse.',\n    },\n    FirstName: {\n      label: 'Fornavn',\n      errorRequired: 'Du må fylle inn fornavn.',\n      errorPattern:\n        'Kun bokstaver og tegn som bindestrek og mellomrom er tillatt.',\n    },\n    LastName: {\n      label: 'Etternavn',\n      errorRequired: 'Du må fylle inn etternavn.',\n      errorPattern:\n        'Kun bokstaver og tegn som bindestrek og mellomrom er tillatt.',\n    },\n    CompanyName: {\n      label: 'Firmanavn',\n      errorRequired: 'Du må fylle inn firmanavn.',\n    },\n    NationalIdentityNumber: {\n      label: 'Fødselsnummer (11 siffer)',\n      errorRequired:\n        'Ugyldig fødselsnummer. Skriv inn et gyldig fødselsnummer med 11 siffer.',\n    },\n    OrganizationNumber: {\n      label: 'Organisasjonsnummer',\n      errorRequired: 'Du må fylle inn et organisasjonsnummer.',\n      errorPattern: 'Dette er ikke et gyldig organisasjonsnummer.',\n    },\n    BankAccountNumber: {\n      label: 'Bankkonto',\n      errorRequired:\n        'Skriv inn et gyldig kontonummer. Kontonummeret må fylles ut.',\n      errorPattern: 'Dette er ikke et gyldig kontonummer.',\n    },\n    PhoneNumber: {\n      label: 'Mobilnummer',\n      countryCodeLabel: 'Landskode',\n      errorRequired:\n        'Mobilnummer må fylles ut. Hvis du ikke har et mobilnummer, kan du oppgi et annet telefonnummer.',\n      warningRequired:\n        'Du har ikke skrevet inn et mobilnummer. Du kan likevel bruke dette nummeret hvis det er riktig.',\n    },\n    PostalCodeAndCity: {\n      label: 'Postnummer og sted',\n    },\n    PostalCode: {\n      label: 'Postnr.',\n      errorRequired: 'Du må fylle inn et postnummer.',\n      errorPattern: 'Dette er ikke et gyldig postnummer (fire siffer).',\n    },\n    City: {\n      label: 'Sted',\n      errorRequired: 'Du må fylle inn et stedsnavn.',\n      errorPattern:\n        'Stedsnavn kan kun inneholde bokstaver og gyldige tegn som bindestrek og mellomrom.',\n    },\n    SelectCountry: {\n      label: 'Land',\n      placeholder: 'Velg et land',\n      errorRequired: 'Du må velge et land fra listen.',\n    },\n    Password: {\n      label: 'Passord',\n      ariaLabelShow: 'Vis passord',\n      ariaLabelHide: 'Skjul passord',\n    },\n  },\n}\n"],"mappings":"AAAA,eAAe;EACb,OAAO,EAAE;IAIPA,YAAY,EAAE;MACZC,IAAI,EAAE,MAAM;MACZC,QAAQ,EAAE;IACZ,CAAC;IACDC,IAAI,EAAE;MACJC,IAAI,EAAE,OAAO;MACbC,QAAQ,EAAE,SAAS;MACnBC,IAAI,EAAE,OAAO;MACbC,YAAY,EAAE;IAChB,CAAC;IACDC,IAAI,EAAE;MACJC,iBAAiB,EAAE;IACrB,CAAC;IACDC,OAAO,EAAE;MACPC,MAAM,EAAE,OAAO;MACfC,IAAI,EAAE,QAAQ;MACdC,MAAM,EAAE,QAAQ;MAChBP,IAAI,EAAE;IACR,CAAC;IAKDQ,KAAK,EAAE;MACLC,YAAY,EAAE,eAAe;MAC7BC,YAAY,EAAE,qBAAqB;MACnCC,aAAa,EAAE,4BAA4B;MAC3CC,YAAY,EAAE;IAChB,CAAC;IACDC,WAAW,EAAE;MACXC,cAAc,EACZ,qDAAqD;MACvDC,cAAc,EAAE;IAClB,CAAC;IACDC,WAAW,EAAE;MACXC,YAAY,EAAE,kCAAkC;MAChDC,YAAY,EAAE,sCAAsC;MACpDC,qBAAqB,EACnB,gDAAgD;MAClDC,qBAAqB,EACnB,gDAAgD;MAClDC,eAAe,EAAE;IACnB,CAAC;IACDC,YAAY,EAAE;MACZC,GAAG,EAAE,IAAI;MACTC,EAAE,EAAE;IACN,CAAC;IAKDC,IAAI,EAAE;MACJC,KAAK,EAAE,MAAM;MACbf,aAAa,EAAE;IACjB,CAAC;IACDgB,MAAM,EAAE;MACND,KAAK,EAAE;IACT,CAAC;IACDE,KAAK,EAAE;MACLF,KAAK,EAAE,eAAe;MACtBf,aAAa,EAAE,mCAAmC;MAClDC,YAAY,EAAE;IAChB,CAAC;IACDiB,SAAS,EAAE;MACTH,KAAK,EAAE,SAAS;MAChBf,aAAa,EAAE,0BAA0B;MACzCC,YAAY,EACV;IACJ,CAAC;IACDkB,QAAQ,EAAE;MACRJ,KAAK,EAAE,WAAW;MAClBf,aAAa,EAAE,4BAA4B;MAC3CC,YAAY,EACV;IACJ,CAAC;IACDmB,WAAW,EAAE;MACXL,KAAK,EAAE,WAAW;MAClBf,aAAa,EAAE;IACjB,CAAC;IACDqB,sBAAsB,EAAE;MACtBN,KAAK,EAAE,2BAA2B;MAClCf,aAAa,EACX;IACJ,CAAC;IACDsB,kBAAkB,EAAE;MAClBP,KAAK,EAAE,qBAAqB;MAC5Bf,aAAa,EAAE,yCAAyC;MACxDC,YAAY,EAAE;IAChB,CAAC;IACDsB,iBAAiB,EAAE;MACjBR,KAAK,EAAE,WAAW;MAClBf,aAAa,EACX,8DAA8D;MAChEC,YAAY,EAAE;IAChB,CAAC;IACDuB,WAAW,EAAE;MACXT,KAAK,EAAE,aAAa;MACpBU,gBAAgB,EAAE,WAAW;MAC7BzB,aAAa,EACX,iGAAiG;MACnG0B,eAAe,EACb;IACJ,CAAC;IACDC,iBAAiB,EAAE;MACjBZ,KAAK,EAAE;IACT,CAAC;IACDa,UAAU,EAAE;MACVb,KAAK,EAAE,SAAS;MAChBf,aAAa,EAAE,gCAAgC;MAC/CC,YAAY,EAAE;IAChB,CAAC;IACD4B,IAAI,EAAE;MACJd,KAAK,EAAE,MAAM;MACbf,aAAa,EAAE,+BAA+B;MAC9CC,YAAY,EACV;IACJ,CAAC;IACD6B,aAAa,EAAE;MACbf,KAAK,EAAE,MAAM;MACbgB,WAAW,EAAE,cAAc;MAC3B/B,aAAa,EAAE;IACjB,CAAC;IACDgC,QAAQ,EAAE;MACRjB,KAAK,EAAE,SAAS;MAChBkB,aAAa,EAAE,aAAa;MAC5BC,aAAa,EAAE;IACjB;EACF;AACF,CAAC"}

package/extensions/forms/style/dnb-forms.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
  * ATTENTION: This file is auto generated by using "styleFactory".
  * Do not change the content!
@@ -9,12 +10,15 @@
 /*
  * Utilities
  */
-.dnb-forms-field-array-selection--layout-vertical .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: column;
   row-gap: var(--spacing-x-small);
 }
-.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
+.dnb-forms-field-array-selection--options-layout-vertical.dnb-forms-field-array-selection--layout-horizontal .dnb-forms-field-array-selection__options {
+  row-gap: 0;
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
   display: flex;
   flex-flow: row wrap;
   -moz-column-gap: var(--spacing-small);
@@ -364,42 +368,42 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
 /*
  * Utilities
  */
-.dnb-spacing .dnb-form-main-heading.dnb-h--large:not([class*=space__]) {
+.dnb-spacing .dnb-forms-main-heading.dnb-h--large:not([class*=space__]) {
   margin: 0;
 }
 @media screen and (min-width: 40em) {
-  .dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
+  .dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__left]) {
     margin-left: var(--spacing-medium);
   }
 }
-.dnb-form-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+.dnb-forms-main-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);
 }
 
 /*
  * Utilities
  */
-.dnb-spacing .dnb-form-sub-heading.dnb-h--medium:not([class*=space__]) {
+.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]) {
   margin: 0;
 }
-.dnb-form-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
+.dnb-forms-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);
 }
 
 /*
  * Utilities
  */
-.dnb-form-submit-indicator {
+.dnb-forms-submit-indicator {
   display: inline;
   --padding-left: 0.5em;
 }
-.dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator__content {
   font-size: 0;
   line-height: 1em;
   will-change: font-size;
   transition: font-size 800ms var(--easing-default);
 }
-.dnb-form-submit-indicator__content b {
+.dnb-forms-submit-indicator__content b {
   padding-left: 0.125em;
   color: var(--dots-color, currentColor);
   opacity: 0.2;
@@ -408,38 +412,38 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   animation-duration: 1.3s;
   animation-delay: 200ms;
 }
-.dnb-form-submit-indicator__content b:nth-of-type(1) {
+.dnb-forms-submit-indicator__content b:nth-of-type(1) {
   padding-left: var(--padding-left);
   animation-delay: 50ms;
 }
-.dnb-form-submit-indicator__content b:nth-of-type(2) {
+.dnb-forms-submit-indicator__content b:nth-of-type(2) {
   animation-delay: 200ms;
 }
-.dnb-form-submit-indicator__content b:nth-of-type(3) {
+.dnb-forms-submit-indicator__content b:nth-of-type(3) {
   animation-delay: 400ms;
 }
-html[data-visual-test] .dnb-form-submit-indicator__content b {
+html[data-visual-test] .dnb-forms-submit-indicator__content b {
   animation: none;
 }
-.dnb-form-submit-indicator--state-pending .dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator--state-pending .dnb-forms-submit-indicator__content {
   font-size: 1em;
   font-weight: var(--font-weight-bold);
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content {
   font-size: 1em;
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon {
   padding-left: var(--padding-left);
   color: var(--color-success-green);
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content .dnb-icon--default {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content .dnb-icon--default {
   font-size: 1em;
 }
-.dnb-form-submit-indicator--state-success .dnb-form-submit-indicator__content__label {
+.dnb-forms-submit-indicator--state-success .dnb-forms-submit-indicator__content__label {
   font-size: var(--font-size-small);
   padding-left: calc(var(--padding-left) * 2);
 }
-.dnb-form-submit-indicator--inline-wrap .dnb-form-submit-indicator__content {
+.dnb-forms-submit-indicator--inline-wrap .dnb-forms-submit-indicator__content {
   display: flex;
   --padding-left: 0.25em;
 }
@@ -485,68 +489,68 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
     font-size: 0;
   }
 }
-.dnb-form-iterate-block {
+.dnb-forms-iterate-block {
   --block-outline-color: var(--outline-color, var(--color-lavender));
 }
-.dnb-form-iterate-block--error:has(.dnb-form-status--error) {
+.dnb-forms-iterate-block--error:has(.dnb-form-status--error) {
   --block-outline-color: var(--color-fire-red);
 }
-.dnb-form-iterate-block:not(.dnb-height-animation--hidden) {
+.dnb-forms-iterate-block:not(.dnb-height-animation--hidden) {
   display: flex;
   flex-direction: column;
 }
-.dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block__inner {
   flex: 1;
   margin-bottom: var(--space);
   padding: var(--padding, 1rem);
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
+.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
   --padding: 0;
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing] {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
   border-radius: 0.375rem;
   box-shadow: inset 0 0 0 2px var(--block-outline-color);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
   --space: var(--spacing-small);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
   --space: var(--spacing-medium);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
   --space: var(--spacing-large);
 }
-.dnb-form-iterate-block__inner .dnb-dl .dnb-dd {
+.dnb-forms-iterate-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
-.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block.dnb-height-animation--is-visible .dnb-forms-iterate-block__inner {
   transform: translateY(-0.5rem);
 }
-.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block.dnb-height-animation--parallax .dnb-forms-iterate-block__inner {
   transform: translateY(0);
 }
-.dnb-form-iterate__element {
+.dnb-forms-iterate__element {
   outline: none;
 }
-.dnb-form-iterate > .dnb-form-iterate__element:has(.dnb-form-iterate-block) {
+.dnb-forms-iterate > .dnb-forms-iterate__element:has(.dnb-forms-iterate-block) {
   margin-top: 0;
 }
 
 /*
  * Utilities
  */
-.dnb-form-summary-list.dnb-dl .dnb-dt, .dnb-form-summary-list.dnb-dl > .dnb-dd > .dnb-dl, .dnb-form-summary-list.dnb-dl:not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
+.dnb-forms-summary-list.dnb-dl .dnb-dt, .dnb-forms-summary-list.dnb-dl > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
   margin: 0;
 }
-.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
   margin-bottom: var(--spacing-medium);
 }
-.dnb-form-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
   margin-bottom: 0;
 }
-.dnb-form-summary-list.dnb-dl.dnb-dl__layout--grid {
+.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid {
   row-gap: var(--spacing-medium);
 }
 
@@ -557,8 +561,12 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
 .dnb-forms-value-block--inline:not([class*=__composition]) {
   display: inline-block;
   font-size: inherit;
-  margin-left: var(--spacing-xx-small);
-  margin-right: var(--spacing-xx-small);
+}
+.dnb-forms-value-block--inline:not([class*=__composition])::before, .dnb-forms-value-block--inline:not([class*=__composition])::after {
+  content: " ";
+}
+.dnb-forms-value-block + .dnb-forms-value-block--inline:not([class*=__composition])::before {
+  content: none;
 }
 .dnb-forms-value-block__label, .dnb-forms-value-block__label strong {
   font-weight: var(--font-weight-medium);
@@ -645,10 +653,35 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
 .dnb-forms-wizard-layout__contents {
   flex: 1;
 }
+.dnb-forms-wizard-layout__contents .dnb-forms-step {
+  outline: none;
+}
 .dnb-forms-wizard-layout__contents .dnb-card {
   --border-color: var(--color-pistachio);
   max-width: var(--forms-card-max-width);
 }
+.dnb-forms-wizard-layout__contents .dnb-forms-step > .appear-fx,
+.dnb-forms-wizard-layout__contents .dnb-forms-button-row > .appear-fx {
+  --appear-opacity: 0;
+  --appear-offset: -0.25rem;
+  opacity: var(--appear-opacity);
+  transform: translate3d(var(--appear-offset), 0, 0);
+  animation: appear 600ms var(--easing-default) forwards;
+  animation-delay: calc(var(--element-index, 0) * 30ms);
+}
+@keyframes appear {
+  0% {
+    opacity: var(--appear-opacity);
+    transform: translate3d(var(--appear-offset), 0, 0);
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
 @media screen and (min-width: 40em) {
   .dnb-forms-wizard-layout + .dnb-form-status:not([class*=space__left]), .dnb-forms-wizard-layout + .dnb-form-status + .dnb-form-status:not([class*=space__left]) {
     margin-left: var(--spacing-medium);
@@ -668,10 +701,11 @@ html[data-visual-test] .dnb-form-submit-indicator__content b {
   margin-right: 0;
 }
 
-.dnb-forms-step {
-  outline: none;
+@media screen and (min-width: 60em) {
+  .dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status {
+    margin-left: 23rem;
+  }
 }
-
 .dnb-forms-test-element {
   border: 1px dashed #808080;
   border-radius: 0.5rem;