@dnb/eufemia 10.7.0 → 10.9.0

package/extensions/forms/Field/index.js

@@ -5,8 +5,6 @@ import BooleanComponent from './Boolean';
 import Currency from './Currency';
 import DateComponent from './Date';
 import Email from './Email';
-import FirstName from './FirstName';
-import LastName from './LastName';
 import NationalIdentityNumber from './NationalIdentityNumber';
 import PhoneNumber from './PhoneNumber';
 import OrganizationNumber from './OrganizationNumber';
@@ -16,6 +14,7 @@ import ArraySelection from './ArraySelection';
 import Option from './Option';
 import SelectCountry from './SelectCountry';
 import BankAccountNumber from './BankAccountNumber';
+import CountryCode from './CountryCode';
 const Field = {
   String: StringComponent,
   Number: NumberComponent,
@@ -24,8 +23,6 @@ const Field = {
   Currency,
   Date: DateComponent,
   Email,
-  FirstName,
-  LastName,
   NationalIdentityNumber,
   OrganizationNumber,
   PhoneNumber,
@@ -34,7 +31,8 @@ const Field = {
   ArraySelection,
   Option,
   SelectCountry,
-  BankAccountNumber
+  BankAccountNumber,
+  CountryCode
 };
 export default Field;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StringComponent","NumberComponent","Toggle","BooleanComponent","Currency","DateComponent","Email","FirstName","LastName","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Field","String","Number","Boolean","Date"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["import StringComponent from './String'\nimport NumberComponent from './Number'\nimport Toggle from './Toggle'\nimport BooleanComponent from './Boolean'\nimport Currency from './Currency'\nimport DateComponent from './Date'\nimport Email from './Email'\nimport FirstName from './FirstName'\nimport LastName from './LastName'\nimport NationalIdentityNumber from './NationalIdentityNumber'\nimport PhoneNumber from './PhoneNumber'\nimport OrganizationNumber from './OrganizationNumber'\nimport PostalCodeAndCity from './PostalCodeAndCity'\nimport Selection from './Selection'\nimport ArraySelection from './ArraySelection';\nimport Option from './Option'\nimport SelectCountry from './SelectCountry'\nimport BankAccountNumber from './BankAccountNumber'\n\nconst Field = {\n  String: StringComponent,\n  Number: NumberComponent,\n  Toggle,\n  Boolean: BooleanComponent,\n  Currency,\n  Date: DateComponent,\n  Email,\n  FirstName,\n  LastName,\n  NationalIdentityNumber,\n  OrganizationNumber,\n  PhoneNumber,\n  PostalCodeAndCity,\n  Selection,\n  ArraySelection,\n  Option,\n  SelectCountry,\n  BankAccountNumber,\n}\n\nexport default Field\n"],"mappings":"AAAA,OAAOA,eAAe,MAAM,UAAU;AACtC,OAAOC,eAAe,MAAM,UAAU;AACtC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,gBAAgB,MAAM,WAAW;AACxC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,aAAa,MAAM,QAAQ;AAClC,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,iBAAiB,MAAM,qBAAqB;AAEnD,MAAMC,KAAK,GAAG;EACZC,MAAM,EAAEnB,eAAe;EACvBoB,MAAM,EAAEnB,eAAe;EACvBC,MAAM;EACNmB,OAAO,EAAElB,gBAAgB;EACzBC,QAAQ;EACRkB,IAAI,EAAEjB,aAAa;EACnBC,KAAK;EACLC,SAAS;EACTC,QAAQ;EACRC,sBAAsB;EACtBE,kBAAkB;EAClBD,WAAW;EACXE,iBAAiB;EACjBC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,aAAa;EACbC;AACF,CAAC;AAED,eAAeC,KAAK"}
+{"version":3,"file":"index.js","names":["StringComponent","NumberComponent","Toggle","BooleanComponent","Currency","DateComponent","Email","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","CountryCode","Field","String","Number","Boolean","Date"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["import StringComponent from './String'\nimport NumberComponent from './Number'\nimport Toggle from './Toggle'\nimport BooleanComponent from './Boolean'\nimport Currency from './Currency'\nimport DateComponent from './Date'\nimport Email from './Email'\nimport NationalIdentityNumber from './NationalIdentityNumber'\nimport PhoneNumber from './PhoneNumber'\nimport OrganizationNumber from './OrganizationNumber'\nimport PostalCodeAndCity from './PostalCodeAndCity'\nimport Selection from './Selection'\nimport ArraySelection from './ArraySelection'\nimport Option from './Option'\nimport SelectCountry from './SelectCountry'\nimport BankAccountNumber from './BankAccountNumber'\nimport CountryCode from './CountryCode'\n\nconst Field = {\n  String: StringComponent,\n  Number: NumberComponent,\n  Toggle,\n  Boolean: BooleanComponent,\n  Currency,\n  Date: DateComponent,\n  Email,\n  NationalIdentityNumber,\n  OrganizationNumber,\n  PhoneNumber,\n  PostalCodeAndCity,\n  Selection,\n  ArraySelection,\n  Option,\n  SelectCountry,\n  BankAccountNumber,\n  CountryCode,\n}\n\nexport default Field\n"],"mappings":"AAAA,OAAOA,eAAe,MAAM,UAAU;AACtC,OAAOC,eAAe,MAAM,UAAU;AACtC,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,gBAAgB,MAAM,WAAW;AACxC,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,aAAa,MAAM,QAAQ;AAClC,OAAOC,KAAK,MAAM,SAAS;AAC3B,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,OAAOC,MAAM,MAAM,UAAU;AAC7B,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,iBAAiB,MAAM,qBAAqB;AACnD,OAAOC,WAAW,MAAM,eAAe;AAEvC,MAAMC,KAAK,GAAG;EACZC,MAAM,EAAElB,eAAe;EACvBmB,MAAM,EAAElB,eAAe;EACvBC,MAAM;EACNkB,OAAO,EAAEjB,gBAAgB;EACzBC,QAAQ;EACRiB,IAAI,EAAEhB,aAAa;EACnBC,KAAK;EACLC,sBAAsB;EACtBE,kBAAkB;EAClBD,WAAW;EACXE,iBAAiB;EACjBC,SAAS;EACTC,cAAc;EACdC,MAAM;EACNC,aAAa;EACbC,iBAAiB;EACjBC;AACF,CAAC;AAED,eAAeC,KAAK"}

package/extensions/forms/Field/style/dnb-array-selection.css

@@ -0,0 +1,13 @@
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  grid-row-gap: var(--spacing-x-small);
+  row-gap: var(--spacing-x-small);
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}

package/extensions/forms/Field/style/dnb-array-selection.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}

package/extensions/forms/Field/style/dnb-array-selection.scss

@@ -0,0 +1,15 @@
+@import '../../variables.scss';
+
+.dnb-forms-field-array-selection {
+  &--options-layout-vertical &__options {
+    display: flex;
+    flex-flow: column;
+    row-gap: var(--spacing-x-small);
+  }
+
+  &--options-layout-horizontal &__options {
+    display: flex;
+    flex-flow: row wrap;
+    column-gap: var(--spacing-small);
+  }
+}

package/extensions/forms/Field/style/dnb-country-code.css

@@ -0,0 +1,12 @@
+.dnb-forms-field-country-code .dnb-autocomplete__inner {
+  --autocomplete-width: 9rem;
+}
+.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner {
+  --autocomplete-width: 5rem;
+}
+.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner {
+  --autocomplete-width: 11rem;
+}
+.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner {
+  --autocomplete-width: 21rem;
+}

package/extensions/forms/Field/style/dnb-country-code.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-country-code .dnb-autocomplete__inner{--autocomplete-width:9rem}.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner{--autocomplete-width:5rem}.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner{--autocomplete-width:11rem}.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner{--autocomplete-width:21rem}

package/extensions/forms/Field/style/dnb-country-code.scss

@@ -0,0 +1,19 @@
+@import '../../variables.scss';
+
+.dnb-forms-field-country-code {
+  .dnb-autocomplete__inner {
+    --autocomplete-width: 9rem;
+  }
+
+  &--width-small .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-small};
+  }
+
+  &--width-medium .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-medium};
+  }
+
+  &--width-large .dnb-autocomplete__inner {
+    --autocomplete-width: #{$forms-field-width-large};
+  }
+}

package/extensions/forms/Field/style/dnb-phone-number.css

@@ -9,17 +9,13 @@
   width: 100%;
 }
 .dnb-forms-field-phone-number--width-large {
-  width: 336px;
-}
-.dnb-forms-field-phone-number--width-medium {
-  width: 176px;
+  width: 21rem;
 }
 .dnb-forms-field-phone-number__country-code {
-  --autocomplete-width: 145px;
-  flex: 0 144px;
+  flex: 0 9rem;
 }
 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
-  width: 144px;
+  width: 9rem;
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;

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

@@ -1 +1 @@
-.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}
+.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:21rem}.dnb-forms-field-phone-number__country-code{flex:0 9rem}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}

package/extensions/forms/Field/style/dnb-phone-number.scss

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-phone-number {
   display: flex;
@@ -13,16 +13,11 @@
     width: $forms-field-width-large;
   }
 
-  &--width-medium {
-    width: $forms-field-width-medium;
-  }
-
   &__country-code {
-    --autocomplete-width: 145px;
-    flex: 0 144px;
+    flex: 0 9rem;
 
     .dnb-autocomplete__shell {
-      width: 144px;
+      width: 9rem;
     }
   }
 

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

@@ -5,11 +5,14 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-postal-code-and-city--width-small {
+  width: 5rem;
+}
 .dnb-forms-field-postal-code-and-city--width-medium {
-  width: 176px;
+  width: 11rem;
 }
 .dnb-forms-field-postal-code-and-city--width-large {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;

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

@@ -1 +1 @@
-.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-medium{width:176px}.dnb-forms-field-postal-code-and-city--width-large{width:336px}.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__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:5rem}.dnb-forms-field-postal-code-and-city--width-medium{width:11rem}.dnb-forms-field-postal-code-and-city--width-large{width:21rem}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}

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

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-postal-code-and-city {
   &__fields {
@@ -7,6 +7,10 @@
     column-gap: var(--spacing-small);
   }
 
+  &--width-small {
+    width: $forms-field-width-small;
+  }
+
   &--width-medium {
     width: $forms-field-width-medium;
   }

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

@@ -1,6 +1,9 @@
 .dnb-forms-field-selection--width-large .dnb-dropdown__shell {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: 5rem;
 }

package/extensions/forms/Field/style/dnb-selection.min.css

@@ -1 +1 @@
-.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}
+.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:21rem}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:11rem}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:5rem}

package/extensions/forms/Field/style/dnb-selection.scss

@@ -1,4 +1,4 @@
-@import '../fields.scss';
+@import '../../variables.scss';
 
 .dnb-forms-field-selection {
   &--width-large {
@@ -12,4 +12,10 @@
       width: $forms-field-width-medium;
     }
   }
+
+  &--width-small {
+    .dnb-dropdown__shell {
+      width: $forms-field-width-small;
+    }
+  }
 }

package/extensions/forms/Field/style/index.scss

@@ -1,3 +1,5 @@
 @import './dnb-phone-number.scss';
 @import './dnb-postal-code-and-city.scss';
 @import './dnb-selection.scss';
+@import './dnb-array-selection.scss';
+@import './dnb-country-code.scss';

package/extensions/forms/FieldBlock/FieldBlock.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
-import type { ComponentProps } from '../component-types';
-import type { FieldProps } from '../field-types';
-export type Props = ComponentProps & Pick<FieldProps, 'layout' | 'label' | 'labelDescription' | 'labelSecondary' | 'info' | 'warning' | 'error'> & {
+import { ComponentProps, FieldProps } from '../types';
+export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' | 'labelDescription' | 'labelSecondary' | 'info' | 'warning' | 'error'> & {
     forId?: string;
+    contentClassName?: string;
     children: React.ReactNode;
     /** Width of outer block element */
-    width?: 'medium' | 'large';
+    width?: 'small' | 'medium' | 'large';
     /** Width of contents block, while label etc can be wider if space is available */
-    contentsWidth?: 'medium' | 'large' | 'stretch';
+    contentsWidth?: 'small' | 'medium' | 'large' | 'stretch';
 };
 declare function FieldBlock(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace FieldBlock {

package/extensions/forms/FieldBlock/FieldBlock.js

@@ -1,11 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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, useState, useCallback } from 'react';
 import classnames from 'classnames';
 import { Div, Span } from '../../../elements';
 import { FormLabel, FormStatus } from '../../../components';
-import { forwardSpaceProps } from '../utils';
-import { FormError } from '../types';
+import { FormError, pickSpacingProps } from '../types';
+import FieldBlockContext from './FieldBlockContext';
 function FieldBlock(props) {
+  const nestedFieldBlockContext = useContext(FieldBlockContext);
   const {
     className,
     forId,
@@ -15,19 +22,77 @@ function FieldBlock(props) {
     labelSecondary,
     info,
     warning,
-    error,
+    error: errorProp,
     width,
     contentsWidth,
+    contentClassName,
     children
   } = props;
-  const cn = classnames('dnb-forms-field-block', className, width !== undefined && `dnb-forms-field-block--width-${width}`);
-  return React.createElement(Div, _extends({
+  const [fieldErrorRecord, setFieldErrorRecord] = useState({});
+  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState({});
+  const setError = useCallback((id, error) => {
+    if (nestedFieldBlockContext) {
+      nestedFieldBlockContext.setError(id, error);
+      return;
+    }
+    setFieldErrorRecord(existing => {
+      if (error) {
+        return _objectSpread(_objectSpread({}, existing), {}, {
+          [id]: error
+        });
+      } else {
+        const {
+            [id]: removed
+          } = existing,
+          newRecord = _objectWithoutProperties(existing, [id].map(_toPropertyKey));
+        return newRecord;
+      }
+    });
+  }, [nestedFieldBlockContext]);
+  const setShowError = useCallback((id, show) => {
+    if (nestedFieldBlockContext) {
+      nestedFieldBlockContext.setShowError(id, show);
+      return;
+    }
+    setShowFieldErrorRecord(existing => {
+      if (show) {
+        return _objectSpread(_objectSpread({}, existing), {}, {
+          [id]: true
+        });
+      } else {
+        const {
+            [id]: removed
+          } = existing,
+          newRecord = _objectWithoutProperties(existing, [id].map(_toPropertyKey));
+        return newRecord;
+      }
+    });
+  }, [nestedFieldBlockContext]);
+  const error = useMemo(() => {
+    if (errorProp) {
+      return errorProp;
+    }
+    const errors = Object.entries(fieldErrorRecord).filter(_ref => {
+      let [id] = _ref;
+      return showFieldErrorRecord[id] === true;
+    }).map(_ref2 => {
+      let [, error] = _ref2;
+      return error;
+    });
+    return errors.length > 0 ? new Error(errors.map(error => error.message).join(' | ')) : undefined;
+  }, [errorProp, fieldErrorRecord, showFieldErrorRecord]);
+  const cn = classnames(`dnb-forms-field-block dnb-forms-field-block--layout-${layout}`, className, width !== undefined && `dnb-forms-field-block--width-${width}`);
+  return React.createElement(FieldBlockContext.Provider, {
+    value: {
+      setError,
+      setShowError
+    }
+  }, React.createElement(Div, _extends({
     className: cn
-  }, forwardSpaceProps(props)), labelDescription || labelSecondary ? React.createElement("div", {
-    className: "dnb-forms-field-block__label-block"
+  }, pickSpacingProps(props)), labelDescription || labelSecondary ? React.createElement("div", {
+    className: 'dnb-forms-field-block__label'
   }, label || labelDescription ? React.createElement(FormLabel, {
     for_id: forId,
-    label_direction: layout,
     space: {
       bottom: 'x-small'
     }
@@ -37,13 +102,14 @@ function FieldBlock(props) {
     className: "dnb-forms-field-block__label-secondary"
   }, labelSecondary)) : label && React.createElement(FormLabel, {
     for_id: forId,
-    label_direction: layout,
     space: {
       bottom: 'x-small'
     }
   }, label), React.createElement("div", {
-    className: 'dnb-forms-field-block__contents' + (contentsWidth !== undefined ? ` dnb-forms-field-block__contents--width-${contentsWidth}` : "")
-  }, children), error && React.createElement(FormStatus, {
+    className: classnames('dnb-forms-field-block__contents', contentClassName, contentsWidth !== undefined && `dnb-forms-field-block__contents--width-${contentsWidth}`)
+  }, children), error && React.createElement("div", {
+    className: "dnb-forms-field-block__status"
+  }, React.createElement(FormStatus, {
     state: "error",
     id: forId ? `${forId}-form-status` : undefined,
     text: error === null || error === void 0 ? void 0 : error.message,
@@ -51,15 +117,19 @@ function FieldBlock(props) {
     space: {
       top: 'x-small'
     }
-  }), warning && React.createElement(FormStatus, {
+  })) || warning && React.createElement("div", {
+    className: "dnb-forms-field-block__status"
+  }, React.createElement(FormStatus, {
     state: "warn",
     id: forId ? `${forId}-form-status` : undefined,
-    text: warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (info === null || info === void 0 ? void 0 : info.toString()),
+    text: warning instanceof Error && warning.message || warning instanceof FormError && warning.message || (warning === null || warning === void 0 ? void 0 : warning.toString()),
     label: label,
     space: {
       top: 'x-small'
     }
-  }), info && React.createElement(FormStatus, {
+  })) || info && React.createElement("div", {
+    className: "dnb-forms-field-block__status"
+  }, React.createElement(FormStatus, {
     state: "info",
     id: forId ? `${forId}-form-status` : undefined,
     text: info instanceof Error && info.message || info instanceof FormError && info.message || (info === null || info === void 0 ? void 0 : info.toString()),
@@ -67,7 +137,7 @@ function FieldBlock(props) {
     space: {
       top: 'x-small'
     }
-  }));
+  }))));
 }
 FieldBlock._supportsEufemiaSpacingProps = true;
 export default FieldBlock;

package/extensions/forms/FieldBlock/FieldBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","classnames","Div","Span","FormLabel","FormStatus","forwardSpaceProps","FormError","FieldBlock","props","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","width","contentsWidth","children","cn","undefined","createElement","_extends","for_id","label_direction","space","bottom","Fragment","state","id","text","message","top","Error","toString","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport { forwardSpaceProps } from '../utils'\nimport type { ComponentProps } from '../component-types'\nimport { FormError } from '../types'\nimport type { FieldProps } from '../field-types'\n\nexport type Props = ComponentProps &\n  Pick<\n    FieldProps,\n    | 'layout'\n    | 'label'\n    | 'labelDescription'\n    | 'labelSecondary'\n    | 'info'\n    | 'warning'\n    | 'error'\n  > & {\n    forId?: string\n    children: React.ReactNode\n    /** Width of outer block element */\n    width?: 'medium' | 'large'\n    /** Width of contents block, while label etc can be wider if space is available */\n    contentsWidth?: 'medium' | 'large' | 'stretch'\n  }\n\nfunction FieldBlock(props: Props) {\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error,\n    width,\n    contentsWidth,\n    children,\n  } = props\n\n  const cn = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n\n  return (\n    <Div className={cn} {...forwardSpaceProps(props)}>\n      {labelDescription || labelSecondary ? (\n        <div className=\"dnb-forms-field-block__label-block\">\n          {label || labelDescription ? (\n            <FormLabel\n              for_id={forId}\n              label_direction={layout}\n              space={{ bottom: 'x-small' }}\n            >\n              {label}\n              {labelDescription && (\n                <span className=\"dnb-forms-field-block__label-description\">\n                  {labelDescription}\n                </span>\n              )}\n            </FormLabel>\n          ) : (\n            <>&nbsp;</>\n          )}\n          {labelSecondary && (\n            <Span className=\"dnb-forms-field-block__label-secondary\">\n              {labelSecondary}\n            </Span>\n          )}\n        </div>\n      ) : (\n        label && (\n          <FormLabel\n            for_id={forId}\n            label_direction={layout}\n            space={{ bottom: 'x-small' }}\n          >\n            {label}\n          </FormLabel>\n        )\n      )}\n\n      <div\n        className={classnames(\n          'dnb-forms-field-block__contents',\n          contentsWidth !== undefined &&\n            `dnb-forms-field-block__contents--width-${contentsWidth}`\n        )}\n      >\n        {children}\n      </div>\n\n      {error && (\n        <FormStatus\n          state=\"error\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={error?.message}\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {warning && (\n        <FormStatus\n          state=\"warn\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (warning instanceof Error && warning.message) ||\n            (warning instanceof FormError && warning.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n      {info && (\n        <FormStatus\n          state=\"info\"\n          id={forId ? `${forId}-form-status` : undefined}\n          text={\n            (info instanceof Error && info.message) ||\n            (info instanceof FormError && info.message) ||\n            info?.toString()\n          }\n          label={label}\n          space={{ top: 'x-small' }}\n        />\n      )}\n    </Div>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Div","Span","FormLabel","FormStatus","FormError","pickSpacingProps","FieldBlockContext","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","labelSecondary","info","warning","error","errorProp","width","contentsWidth","contentClassName","children","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","id","existing","_objectSpread","removed","newRecord","_objectWithoutProperties","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","_ref","_ref2","length","Error","message","join","undefined","cn","createElement","Provider","value","_extends","for_id","space","bottom","Fragment","state","text","top","toString","_supportsEufemiaSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Div, Span } from '../../../elements'\nimport { FormLabel, FormStatus } from '../../../components'\nimport {\n  FormError,\n  ComponentProps,\n  FieldProps,\n  pickSpacingProps,\n} from '../types'\nimport FieldBlockContext from './FieldBlockContext'\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'labelSecondary'\n  | 'info'\n  | 'warning'\n  | 'error'\n> & {\n  forId?: string\n  contentClassName?: string\n  children: React.ReactNode\n  /** Width of outer block element */\n  width?: 'small' | 'medium' | 'large'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n}\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    labelSecondary,\n    info,\n    warning,\n    error: errorProp,\n    width,\n    contentsWidth,\n    contentClassName,\n    children,\n  } = props\n\n  const [fieldErrorRecord, setFieldErrorRecord] = useState<\n    Record<string, FormError>\n  >({})\n  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n    Record<string, boolean>\n  >({})\n\n  const setError = useCallback(\n    (id, error) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setError(id, error)\n        return\n      }\n\n      setFieldErrorRecord((existing) => {\n        if (error) {\n          return {\n            ...existing,\n            [id]: error,\n          }\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [id]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const setShowError = useCallback(\n    (id, show) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setShowError(id, show)\n        return\n      }\n\n      setShowFieldErrorRecord((existing) => {\n        if (show) {\n          return {\n            ...existing,\n            [id]: true,\n          }\n        } else {\n          const { [id]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const error = useMemo(() => {\n    if (errorProp) {\n      return errorProp\n    }\n    const errors = Object.entries(fieldErrorRecord)\n      .filter(([id]) => showFieldErrorRecord[id] === true)\n      .map(([, error]) => error)\n    return errors.length > 0\n      ? new Error(errors.map((error) => error.message).join(' | '))\n      : undefined\n  }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n  const cn = classnames(\n    'dnb-forms-field-block',\n    `dnb-forms-field-block--layout-${layout}`,\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setError,\n        setShowError,\n      }}\n    >\n      <Div className={cn} {...pickSpacingProps(props)}>\n        {labelDescription || labelSecondary ? (\n          <div className={classnames('dnb-forms-field-block__label')}>\n            {label || labelDescription ? (\n              <FormLabel for_id={forId} space={{ bottom: 'x-small' }}>\n                {label}\n                {labelDescription && (\n                  <span className=\"dnb-forms-field-block__label-description\">\n                    {labelDescription}\n                  </span>\n                )}\n              </FormLabel>\n            ) : (\n              <>&nbsp;</>\n            )}\n            {labelSecondary && (\n              <Span className=\"dnb-forms-field-block__label-secondary\">\n                {labelSecondary}\n              </Span>\n            )}\n          </div>\n        ) : (\n          label && (\n            <FormLabel for_id={forId} space={{ bottom: 'x-small' }}>\n              {label}\n            </FormLabel>\n          )\n        )}\n\n        <div\n          className={classnames(\n            'dnb-forms-field-block__contents',\n            contentsWidth !== undefined &&\n              `dnb-forms-field-block__contents--width-${contentsWidth}`,\n            contentClassName\n          )}\n        >\n          {children}\n        </div>\n\n        {(error && (\n          <div className=\"dnb-forms-field-block__status\">\n            <FormStatus\n              state=\"error\"\n              id={forId ? `${forId}-form-status` : undefined}\n              text={error?.message}\n              label={label}\n              space={{ top: 'x-small' }}\n            />\n          </div>\n        )) ||\n          (warning && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state=\"warn\"\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  (warning instanceof Error && warning.message) ||\n                  (warning instanceof FormError && warning.message) ||\n                  warning?.toString()\n                }\n                label={label}\n                space={{ top: 'x-small' }}\n              />\n            </div>\n          )) ||\n          (info && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state=\"info\"\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  (info instanceof Error && info.message) ||\n                  (info instanceof FormError && info.message) ||\n                  info?.toString()\n                }\n                label={label}\n                space={{ top: 'x-small' }}\n              />\n            </div>\n          ))}\n      </Div>\n    </FieldBlockContext.Provider>\n  )\n}\n\nFieldBlock._supportsEufemiaSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}

package/extensions/forms/FieldBlock/FieldBlockContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormError } from '../types';
+export interface FieldBlockContextState {
+    setError?: (id: string, error: FormError) => void;
+    setShowError?: (id: string, showError: boolean) => void;
+}
+declare const FieldBlockContext: React.Context<FieldBlockContextState>;
+export default FieldBlockContext;

package/extensions/forms/FieldBlock/FieldBlockContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const FieldBlockContext = React.createContext(undefined);
+export default FieldBlockContext;
+//# sourceMappingURL=FieldBlockContext.js.map

package/extensions/forms/FieldBlock/FieldBlockContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldBlockContext.js","names":["React","FieldBlockContext","createContext","undefined"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlockContext.ts"],"sourcesContent":["import React from 'react'\nimport { FormError } from '../types'\n\nexport interface FieldBlockContextState {\n  setError?: (id: string, error: FormError) => void\n  setShowError?: (id: string, showError: boolean) => void\n}\n\nconst FieldBlockContext = React.createContext<\n  FieldBlockContextState | undefined\n>(undefined)\n\nexport default FieldBlockContext\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAQzB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,aAAa,CAE3CC,SAAS,CAAC;AAEZ,eAAeF,iBAAiB"}

package/extensions/forms/FieldBlock/index.d.ts

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

package/extensions/forms/FieldBlock/index.js

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

package/extensions/forms/FieldBlock/index.js.map

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

package/extensions/forms/FieldBlock/style/dnb-field-block.css

@@ -1,4 +1,24 @@
-.dnb-forms-field-block__label-block {
+.dnb-forms-field-block--layout-vertical {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block--layout-horizontal {
+  display: grid;
+  grid-template-columns: 11rem auto;
+  grid-template-areas: "label contents" "status status";
+}
+.dnb-forms-field-block--width-small {
+  width: 5rem;
+}
+.dnb-forms-field-block--width-medium {
+  width: 11rem;
+}
+.dnb-forms-field-block--width-large {
+  width: 21rem;
+}
+.dnb-forms-field-block__label {
+  grid-area: label;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
@@ -13,18 +33,21 @@
   color: var(--color-black-55);
   font-size: var(--font-size-small);
 }
-.dnb-forms-field-block--width-large {
-  width: 336px;
+.dnb-forms-field-block__status {
+  grid-area: status;
 }
-.dnb-forms-field-block--width-medium {
-  width: 176px;
+.dnb-forms-field-block__contents {
+  grid-area: contents;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-.dnb-forms-field-block__contents--width-large {
-  width: 336px;
+.dnb-forms-field-block__contents--width-small {
+  width: 5rem;
 }
 .dnb-forms-field-block__contents--width-medium {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 21rem;
 }

package/extensions/forms/FieldBlock/style/dnb-field-block.min.css

@@ -1 +1 @@
-.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block--width-large{width:336px}.dnb-forms-field-block--width-medium{width:176px}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-large{width:336px}.dnb-forms-field-block__contents--width-medium{width:176px}
+.dnb-forms-field-block--layout-vertical{display:grid;grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{display:grid;grid-template-areas:"label contents" "status status";grid-template-columns:11rem auto}.dnb-forms-field-block--width-small{width:5rem}.dnb-forms-field-block--width-medium{width:11rem}.dnb-forms-field-block--width-large{width:21rem}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-small{width:5rem}.dnb-forms-field-block__contents--width-medium{width:11rem}.dnb-forms-field-block__contents--width-large{width:21rem}