@dnb/eufemia 10.41.0 → 10.42.0

package/elements/lists/style/lists-mixins.scss

@@ -109,6 +109,9 @@
 }
 
 @mixin dlStyle() {
+  --column-gap: 1rem;
+  --row-gap: 0.5rem;
+
   &:not([class*='dnb-space__top']) {
     margin-top: 0;
   }
@@ -121,13 +124,14 @@
   line-height: var(--line-height-basis);
 
   & dt {
-    margin-top: 1rem;
-
     padding: 0;
     font-weight: var(--font-weight-medium);
   }
   & dd ~ dt {
-    margin-top: 1.5rem;
+    margin-top: var(--row-gap);
+  }
+  & dt:not(:first-of-type) {
+    margin-top: calc(var(--row-gap) + 1rem);
   }
   & dd {
     padding: 0;
@@ -138,7 +142,7 @@
   }
   & > dd > dl,
   &:not([class*='dnb-space']) > dd > dl {
-    margin-top: 1.5rem;
+    margin-top: calc(var(--row-gap) + 0.5rem);
     margin-left: 2rem;
   }
 
@@ -154,18 +158,20 @@
       max-width: 60ch; // to enhance readability
 
       & dt {
-        margin-right: 1rem;
+        margin-top: 0;
+        margin-right: calc(var(--column-gap) - 0.5rem);
         max-width: var(--dt-max-width);
       }
 
       & dd {
         width: var(--dd-max-width);
+        align-self: end;
       }
 
-      & dt,
+      & dt:not(:first-of-type),
       & dd,
-      & dd ~ dt {
-        margin-top: 0.5rem;
+      & dd ~ dt:not(:first-of-type) {
+        margin-top: var(--row-gap);
         margin-bottom: 0;
         &:first-of-type {
           margin-top: 0;
@@ -174,25 +180,32 @@
     }
 
     dd#{&}__item {
-      display: none;
+      visibility: hidden;
+      user-select: none;
       flex-basis: 100%; // ensures we always break to a new line, no matter what the available space is
       height: 0;
       margin: 0;
     }
+    &:not(#{&}__layout--horizontal) dd#{&}__item {
+      display: none;
+    }
 
     &__layout--grid {
       --dt-max-width: 15ch;
-      --dd-max-width: 30ch;
+      --dd-max-width: 40ch;
 
       display: grid;
       grid-template-columns: max-content 1fr;
-      column-gap: 1rem;
-      row-gap: 1rem;
+      column-gap: var(--column-gap);
+      row-gap: var(--row-gap);
 
       /* stylelint-disable */
       & dt {
         max-width: var(--dt-max-width);
       }
+      & dt:not(:first-of-type) {
+        margin-top: 0;
+      }
       & dd {
         max-width: var(--dd-max-width);
         align-self: end;

package/es/elements/img/Img.d.ts

@@ -13,9 +13,10 @@ export type ImgProps = SpacingProps & React.HTMLProps<HTMLImageElement> & {
     imgClass?: string;
     element?: DynamicElement & 'figure';
     caption?: string;
+    loading?: 'eager' | 'lazy';
 };
 declare const Img: {
-    ({ caption, alt, element, skeleton, imgClass, className, ...p }: ImgProps): import("react/jsx-runtime").JSX.Element;
+    ({ caption, alt, element, skeleton, imgClass, className, loading, ...p }: ImgProps): import("react/jsx-runtime").JSX.Element;
     _supportsSpacingProps: boolean;
 };
 export default Img;

package/es/elements/img/Img.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["caption", "alt", "element", "skeleton", "imgClass", "className"];
+const _excluded = ["caption", "alt", "element", "skeleton", "imgClass", "className", "loading"];
 import React from 'react';
 import E from '../Element';
 import { createSpacingClasses, removeSpaceProps } from '../../components/space/SpacingHelper';
@@ -12,7 +12,8 @@ const Img = _ref => {
       element = 'figure',
       skeleton,
       imgClass,
-      className
+      className,
+      loading = 'eager'
     } = _ref,
     p = _objectWithoutProperties(_ref, _excluded);
   const [hasError, setError] = React.useState(false);
@@ -24,6 +25,7 @@ const Img = _ref => {
     skeletonMethod: "shape"
   }, React.createElement(E, _extends({
     as: "img",
+    loading: loading,
     alt: alt,
     internalClass: 'dnb-img' + (hasError ? " dnb-img--error" : ""),
     className: imgClass,

package/es/elements/img/Img.js.map

@@ -1 +1 @@
-{"version":3,"file":"Img.js","names":["React","E","createSpacingClasses","removeSpaceProps","classnames","Img","_ref","caption","alt","element","skeleton","imgClass","className","p","_objectWithoutProperties","_excluded","hasError","setError","useState","createElement","as","internalClass","is","skeletonMethod","_extends","onError","_supportsSpacingProps"],"sources":["../../../../src/elements/img/Img.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport E from '../Element'\nimport {\n  createSpacingClasses,\n  removeSpaceProps,\n} from '../../components/space/SpacingHelper'\nimport { SpacingProps } from '../../components/space/types'\nimport { SkeletonShow } from '../../components/skeleton/Skeleton'\nimport classnames from 'classnames'\nimport type { DynamicElement } from '../../shared/types'\n\nexport type ImgProps = SpacingProps &\n  React.HTMLProps<HTMLImageElement> & {\n    src: string\n    alt: string\n    skeleton?: SkeletonShow\n    imgClass?: string\n    element?: DynamicElement & 'figure'\n    caption?: string\n  }\n\nconst Img = ({\n  caption,\n  alt,\n  element = 'figure',\n  skeleton,\n  imgClass,\n  className,\n  ...p\n}: ImgProps) => {\n  const [hasError, setError] = React.useState(false)\n\n  return (\n    <E\n      as={element}\n      internalClass=\"dnb-img\"\n      className={classnames(className, createSpacingClasses(p, p.is))}\n      skeleton={skeleton}\n      skeletonMethod=\"shape\"\n    >\n      <E\n        as=\"img\"\n        alt={alt}\n        internalClass={classnames('dnb-img', hasError && 'dnb-img--error')}\n        className={imgClass}\n        skeleton={skeleton}\n        onError={() => setError(true)}\n        {...removeSpaceProps(p as Omit<ImgProps, 'ref'>)}\n      />\n      {caption && <figcaption>{caption}</figcaption>}\n    </E>\n  )\n}\n\nImg._supportsSpacingProps = true\n\nexport default Img\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,CAAC,MAAM,YAAY;AAC1B,SACEC,oBAAoB,EACpBC,gBAAgB,QACX,sCAAsC;AAG7C,OAAOC,UAAU,MAAM,YAAY;AAanC,MAAMC,GAAG,GAAGC,IAAA,IAQI;EAAA,IARH;MACXC,OAAO;MACPC,GAAG;MACHC,OAAO,GAAG,QAAQ;MAClBC,QAAQ;MACRC,QAAQ;MACRC;IAEQ,CAAC,GAAAN,IAAA;IADNO,CAAC,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAEJ,MAAM,CAACC,QAAQ,EAAEC,QAAQ,CAAC,GAAGjB,KAAK,CAACkB,QAAQ,CAAC,KAAK,CAAC;EAElD,OACElB,KAAA,CAAAmB,aAAA,CAAClB,CAAC;IACAmB,EAAE,EAAEX,OAAQ;IACZY,aAAa,EAAC,SAAS;IACvBT,SAAS,EAAER,UAAU,CAACQ,SAAS,EAAEV,oBAAoB,CAACW,CAAC,EAAEA,CAAC,CAACS,EAAE,CAAC,CAAE;IAChEZ,QAAQ,EAAEA,QAAS;IACnBa,cAAc,EAAC;EAAO,GAEtBvB,KAAA,CAAAmB,aAAA,CAAClB,CAAC,EAAAuB,QAAA;IACAJ,EAAE,EAAC,KAAK;IACRZ,GAAG,EAAEA,GAAI;IACTa,aAAa,EAAa,SAAS,IAAEL,QAAQ,0BAAsB;IACnEJ,SAAS,EAAED,QAAS;IACpBD,QAAQ,EAAEA,QAAS;IACnBe,OAAO,EAAEA,CAAA,KAAMR,QAAQ,CAAC,IAAI;EAAE,GAC1Bd,gBAAgB,CAACU,CAA0B,CAAC,CACjD,CAAC,EACDN,OAAO,IAAIP,KAAA,CAAAmB,aAAA,qBAAaZ,OAAoB,CAC5C,CAAC;AAER,CAAC;AAEDF,GAAG,CAACqB,qBAAqB,GAAG,IAAI;AAEhC,eAAerB,GAAG"}
+{"version":3,"file":"Img.js","names":["React","E","createSpacingClasses","removeSpaceProps","classnames","Img","_ref","caption","alt","element","skeleton","imgClass","className","loading","p","_objectWithoutProperties","_excluded","hasError","setError","useState","createElement","as","internalClass","is","skeletonMethod","_extends","onError","_supportsSpacingProps"],"sources":["../../../../src/elements/img/Img.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport E from '../Element'\nimport {\n  createSpacingClasses,\n  removeSpaceProps,\n} from '../../components/space/SpacingHelper'\nimport { SpacingProps } from '../../components/space/types'\nimport { SkeletonShow } from '../../components/skeleton/Skeleton'\nimport classnames from 'classnames'\nimport type { DynamicElement } from '../../shared/types'\n\nexport type ImgProps = SpacingProps &\n  React.HTMLProps<HTMLImageElement> & {\n    src: string\n    alt: string\n    skeleton?: SkeletonShow\n    imgClass?: string\n    element?: DynamicElement & 'figure'\n    caption?: string\n    loading?: 'eager' | 'lazy'\n  }\n\nconst Img = ({\n  caption,\n  alt,\n  element = 'figure',\n  skeleton,\n  imgClass,\n  className,\n  loading = 'eager',\n  ...p\n}: ImgProps) => {\n  const [hasError, setError] = React.useState(false)\n\n  return (\n    <E\n      as={element}\n      internalClass=\"dnb-img\"\n      className={classnames(className, createSpacingClasses(p, p.is))}\n      skeleton={skeleton}\n      skeletonMethod=\"shape\"\n    >\n      <E\n        as=\"img\"\n        loading={loading}\n        alt={alt}\n        internalClass={classnames('dnb-img', hasError && 'dnb-img--error')}\n        className={imgClass}\n        skeleton={skeleton}\n        onError={() => setError(true)}\n        {...removeSpaceProps(p as Omit<ImgProps, 'ref'>)}\n      />\n      {caption && <figcaption>{caption}</figcaption>}\n    </E>\n  )\n}\n\nImg._supportsSpacingProps = true\n\nexport default Img\n"],"mappings":";;;AAKA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,CAAC,MAAM,YAAY;AAC1B,SACEC,oBAAoB,EACpBC,gBAAgB,QACX,sCAAsC;AAG7C,OAAOC,UAAU,MAAM,YAAY;AAcnC,MAAMC,GAAG,GAAGC,IAAA,IASI;EAAA,IATH;MACXC,OAAO;MACPC,GAAG;MACHC,OAAO,GAAG,QAAQ;MAClBC,QAAQ;MACRC,QAAQ;MACRC,SAAS;MACTC,OAAO,GAAG;IAEF,CAAC,GAAAP,IAAA;IADNQ,CAAC,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAEJ,MAAM,CAACC,QAAQ,EAAEC,QAAQ,CAAC,GAAGlB,KAAK,CAACmB,QAAQ,CAAC,KAAK,CAAC;EAElD,OACEnB,KAAA,CAAAoB,aAAA,CAACnB,CAAC;IACAoB,EAAE,EAAEZ,OAAQ;IACZa,aAAa,EAAC,SAAS;IACvBV,SAAS,EAAER,UAAU,CAACQ,SAAS,EAAEV,oBAAoB,CAACY,CAAC,EAAEA,CAAC,CAACS,EAAE,CAAC,CAAE;IAChEb,QAAQ,EAAEA,QAAS;IACnBc,cAAc,EAAC;EAAO,GAEtBxB,KAAA,CAAAoB,aAAA,CAACnB,CAAC,EAAAwB,QAAA;IACAJ,EAAE,EAAC,KAAK;IACRR,OAAO,EAAEA,OAAQ;IACjBL,GAAG,EAAEA,GAAI;IACTc,aAAa,EAAa,SAAS,IAAEL,QAAQ,0BAAsB;IACnEL,SAAS,EAAED,QAAS;IACpBD,QAAQ,EAAEA,QAAS;IACnBgB,OAAO,EAAEA,CAAA,KAAMR,QAAQ,CAAC,IAAI;EAAE,GAC1Bf,gBAAgB,CAACW,CAA0B,CAAC,CACjD,CAAC,EACDP,OAAO,IAAIP,KAAA,CAAAoB,aAAA,qBAAab,OAAoB,CAC5C,CAAC;AAER,CAAC;AAEDF,GAAG,CAACsB,qBAAqB,GAAG,IAAI;AAEhC,eAAetB,GAAG"}

package/es/elements/lib.d.ts

@@ -131,7 +131,7 @@ export declare const getElements: () => {
         _supportsSpacingProps: boolean;
     };
     Img: {
-        ({ caption, alt, element, skeleton, imgClass, className, ...p }: import("./Img").ImgProps): import("react/jsx-runtime").JSX.Element;
+        ({ caption, alt, element, skeleton, imgClass, className, loading, ...p }: import("./Img").ImgProps): import("react/jsx-runtime").JSX.Element;
         _supportsSpacingProps: boolean;
     };
     Ingress: {

package/es/elements/lists/style/lists-mixins.scss

@@ -109,6 +109,9 @@
 }
 
 @mixin dlStyle() {
+  --column-gap: 1rem;
+  --row-gap: 0.5rem;
+
   &:not([class*='dnb-space__top']) {
     margin-top: 0;
   }
@@ -121,13 +124,14 @@
   line-height: var(--line-height-basis);
 
   & dt {
-    margin-top: 1rem;
-
     padding: 0;
     font-weight: var(--font-weight-medium);
   }
   & dd ~ dt {
-    margin-top: 1.5rem;
+    margin-top: var(--row-gap);
+  }
+  & dt:not(:first-of-type) {
+    margin-top: calc(var(--row-gap) + 1rem);
   }
   & dd {
     padding: 0;
@@ -138,7 +142,7 @@
   }
   & > dd > dl,
   &:not([class*='dnb-space']) > dd > dl {
-    margin-top: 1.5rem;
+    margin-top: calc(var(--row-gap) + 0.5rem);
     margin-left: 2rem;
   }
 
@@ -154,18 +158,20 @@
       max-width: 60ch; // to enhance readability
 
       & dt {
-        margin-right: 1rem;
+        margin-top: 0;
+        margin-right: calc(var(--column-gap) - 0.5rem);
         max-width: var(--dt-max-width);
       }
 
       & dd {
         width: var(--dd-max-width);
+        align-self: end;
       }
 
-      & dt,
+      & dt:not(:first-of-type),
       & dd,
-      & dd ~ dt {
-        margin-top: 0.5rem;
+      & dd ~ dt:not(:first-of-type) {
+        margin-top: var(--row-gap);
         margin-bottom: 0;
         &:first-of-type {
           margin-top: 0;
@@ -174,25 +180,32 @@
     }
 
     dd#{&}__item {
-      display: none;
+      visibility: hidden;
+      user-select: none;
       flex-basis: 100%; // ensures we always break to a new line, no matter what the available space is
       height: 0;
       margin: 0;
     }
+    &:not(#{&}__layout--horizontal) dd#{&}__item {
+      display: none;
+    }
 
     &__layout--grid {
       --dt-max-width: 15ch;
-      --dd-max-width: 30ch;
+      --dd-max-width: 40ch;
 
       display: grid;
       grid-template-columns: max-content 1fr;
-      column-gap: 1rem;
-      row-gap: 1rem;
+      column-gap: var(--column-gap);
+      row-gap: var(--row-gap);
 
       /* stylelint-disable */
       & dt {
         max-width: var(--dt-max-width);
       }
+      & dt:not(:first-of-type) {
+        margin-top: 0;
+      }
       & dd {
         max-width: var(--dd-max-width);
         align-self: end;

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

@@ -3,7 +3,7 @@ import { ReturnAdditional } from '../../hooks/useFieldProps';
 import { FieldHelpProps, FieldProps } from '../../types';
 export type Props = FieldHelpProps & FieldProps<Array<string | number> | undefined> & {
     children?: React.ReactNode;
-    variant?: 'checkbox' | 'button';
+    variant?: 'checkbox' | 'button' | 'checkbox-button';
     optionsLayout?: 'horizontal' | 'vertical';
 };
 declare function ArraySelection(props: Props): import("react/jsx-runtime").JSX.Element;

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

@@ -36,7 +36,7 @@ function ArraySelection(props) {
   } = useFieldProps(props);
   const fieldBlockProps = _objectSpread({
     forId: id,
-    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--variant-${variant} dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
+    className: classnames(`dnb-forms-field-array-selection dnb-forms-field-array-selection--variant-${variant === 'checkbox' ? 'checkbox' : 'button'} dnb-forms-field-array-selection--layout-${layout} dnb-forms-field-array-selection--options-layout-${optionsLayout}`, className),
     contentClassName: 'dnb-forms-field-array-selection__options',
     help,
     info,
@@ -64,15 +64,16 @@ function ArraySelection(props) {
     hasError
   });
   switch (variant) {
-    case 'button':
+    case 'checkbox':
+      return React.createElement(FieldBlock, fieldBlockProps, options);
+    default:
       return React.createElement(FieldBlock, fieldBlockProps, React.createElement(ToggleButtonGroupContext.Provider, {
         value: {
           status: hasError ? 'error' : undefined,
-          disabled
+          disabled,
+          variant: variant === 'checkbox-button' ? 'checkbox' : 'default'
         }
       }, options));
-    case 'checkbox':
-      return React.createElement(FieldBlock, fieldBlockProps, options);
   }
 }
 export function getCheckboxOrToggleOptions({
@@ -113,9 +114,9 @@ export function getCheckboxOrToggleOptions({
     return React.createElement(Component, _extends({
       id: optionsCount === 1 ? id : undefined,
       key: `option-${i}-${value}`,
-      className: classnames(`dnb-forms-field-array-selection__${variant}`, className),
+      className: classnames(`dnb-forms-field-array-selection__${variant === 'checkbox' ? 'checkbox' : 'button'}`, className),
       label: variant === 'checkbox' ? label : undefined,
-      text: variant === 'button' ? label : undefined,
+      text: variant !== 'checkbox' ? label : undefined,
       value: value,
       disabled: disabled,
       checked: value === null || value === void 0 ? void 0 : value.includes(selected),

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

@@ -1 +1 @@
-{"version":3,"file":"ArraySelection.js","names":["React","Checkbox","HelpButton","ToggleButton","classnames","OptionField","FieldBlock","useFieldProps","pickSpacingProps","getStatus","ToggleButtonGroupContext","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","options","getCheckboxOrToggleOptions","Provider","status","optionsCount","Children","count","Component","createOption","i","selected","rest","_objectWithoutProperties","_excluded","suffix","handleSelect","newValue","includes","filter","length","_extends","key","text","checked","on_change","mapOptions","toArray","map","child","isValidElement","type","nestedChildren","cloneElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport OptionField from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { FieldHelpProps, FieldProps, FormError } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${variant}`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    ...pickSpacingProps(props),\n  }\n\n  const options = getCheckboxOrToggleOptions({\n    id,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    children,\n    value,\n    disabled,\n    handleChange,\n    hasError,\n  })\n\n  switch (variant) {\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n    case 'checkbox':\n      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>\n  }\n}\n\nexport function getCheckboxOrToggleOptions({\n  id,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n}: {\n  id: Props['id']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n}) {\n  const optionsCount = React.Children.count(children)\n\n  const Component = (\n    variant === 'checkbox' ? Checkbox : ToggleButton\n  ) as typeof Checkbox & typeof ToggleButton\n\n  const createOption = (props: OptionProps, i: number) => {\n    const {\n      value: selected,\n      error,\n      title,\n      help,\n      className,\n      children,\n      ...rest\n    } = props\n\n    const label = title ?? children\n    const status = getStatus(error, info, warning)\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={help.title}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n    const handleSelect = () => {\n      const newValue = value?.includes(selected)\n        ? value.filter((value) => value !== selected)\n        : [...(value ?? []), selected]\n\n      handleChange?.(\n        newValue.length === 0 ? (emptyValue as typeof value) : newValue\n      )\n    }\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${value}`}\n        className={classnames(\n          `dnb-forms-field-array-selection__${variant}`,\n          className\n        )}\n        label={variant === 'checkbox' ? label : undefined}\n        text={variant === 'button' ? label : undefined}\n        value={value}\n        disabled={disabled}\n        checked={value?.includes(selected)}\n        status={(hasError || status) && 'error'}\n        suffix={suffix}\n        on_change={handleSelect}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  const mapOptions = (children: React.ReactNode) => {\n    return React.Children.toArray(children).map(\n      (child: React.ReactElement<OptionProps>, i) => {\n        if (React.isValidElement(child)) {\n          if (child.type === OptionField) {\n            return createOption(child.props, i)\n          }\n\n          if (child.props.children) {\n            const nestedChildren = mapOptions(child.props.children)\n            return React.cloneElement(child, child.props, nestedChildren)\n          }\n        }\n\n        return child\n      }\n    )\n  }\n\n  return mapOptions(children)\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}
+{"version":3,"file":"ArraySelection.js","names":["React","Checkbox","HelpButton","ToggleButton","classnames","OptionField","FieldBlock","useFieldProps","pickSpacingProps","getStatus","ToggleButtonGroupContext","ArraySelection","props","id","className","variant","layout","optionsLayout","label","labelDescription","value","error","hasError","help","info","warning","disabled","emptyValue","htmlAttributes","handleChange","children","fieldBlockProps","_objectSpread","forId","contentClassName","createElement","Fragment","size","left","title","content","undefined","options","getCheckboxOrToggleOptions","Provider","status","optionsCount","Children","count","Component","createOption","i","selected","rest","_objectWithoutProperties","_excluded","suffix","handleSelect","newValue","includes","filter","length","_extends","key","text","checked","on_change","mapOptions","toArray","map","child","isValidElement","type","nestedChildren","cloneElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelection.tsx"],"sourcesContent":["import React from 'react'\nimport { Checkbox, HelpButton, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport OptionField from '../Option'\nimport FieldBlock from '../../FieldBlock'\nimport { useFieldProps } from '../../hooks'\nimport { ReturnAdditional } from '../../hooks/useFieldProps'\nimport { FieldHelpProps, FieldProps, FormError } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { getStatus } from '../Selection'\nimport { HelpButtonProps } from '../../../../components/HelpButton'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\ntype OptionProps = React.ComponentProps<\n  React.FC<{\n    value: number | string\n    error: Error | FormError | undefined\n    title: React.ReactNode\n    help: HelpButtonProps\n    className: string\n    children: React.ReactNode\n    handleSelect: () => void\n  }>\n>\n\nexport type Props = FieldHelpProps &\n  FieldProps<Array<string | number> | undefined> & {\n    children?: React.ReactNode\n    variant?: 'checkbox' | 'button' | 'checkbox-button'\n    optionsLayout?: 'horizontal' | 'vertical'\n  }\n\nfunction ArraySelection(props: Props) {\n  const {\n    id,\n    className,\n    variant = 'checkbox',\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    label,\n    labelDescription,\n    value,\n    error,\n    hasError,\n    help,\n    info,\n    warning,\n    disabled,\n    emptyValue,\n    htmlAttributes,\n    handleChange,\n    children,\n  } = useFieldProps(props)\n\n  const fieldBlockProps = {\n    forId: id,\n    className: classnames(\n      'dnb-forms-field-array-selection',\n      `dnb-forms-field-array-selection--variant-${\n        variant === 'checkbox' ? 'checkbox' : 'button'\n      }`,\n      `dnb-forms-field-array-selection--layout-${layout}`,\n      `dnb-forms-field-array-selection--options-layout-${optionsLayout}`,\n      className\n    ),\n    contentClassName: 'dnb-forms-field-array-selection__options',\n    help,\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription: (\n      <>\n        {labelDescription}\n        {help ? (\n          <HelpButton\n            size=\"small\"\n            left={labelDescription ? 'x-small' : false}\n            title={help.title}\n          >\n            {help.content}\n          </HelpButton>\n        ) : undefined}\n      </>\n    ),\n    ...pickSpacingProps(props),\n  }\n\n  const options = getCheckboxOrToggleOptions({\n    id,\n    variant,\n    info,\n    warning,\n    emptyValue,\n    htmlAttributes,\n    children,\n    value,\n    disabled,\n    handleChange,\n    hasError,\n  })\n\n  switch (variant) {\n    case 'checkbox':\n      return <FieldBlock {...fieldBlockProps}>{options}</FieldBlock>\n    default:\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButtonGroupContext.Provider\n            value={{\n              status: hasError ? 'error' : undefined,\n              disabled,\n              variant:\n                variant === 'checkbox-button' ? 'checkbox' : 'default',\n            }}\n          >\n            {options}\n          </ToggleButtonGroupContext.Provider>\n        </FieldBlock>\n      )\n  }\n}\n\nexport function getCheckboxOrToggleOptions({\n  id,\n  variant = 'checkbox',\n  info,\n  warning,\n  emptyValue,\n  htmlAttributes,\n  children,\n  value,\n  disabled,\n  hasError,\n  handleChange,\n}: {\n  id: Props['id']\n  variant?: Props['variant']\n  info?: Props['info']\n  warning?: Props['warning']\n  emptyValue?: Props['emptyValue']\n  htmlAttributes?: Props['htmlAttributes']\n  children?: Props['children']\n  value?: Props['value']\n  disabled?: Props['disabled']\n  hasError?: ReturnAdditional<Props['value']>['hasError']\n  handleChange?: ReturnAdditional<Props['value']>['handleChange']\n}) {\n  const optionsCount = React.Children.count(children)\n\n  const Component = (\n    variant === 'checkbox' ? Checkbox : ToggleButton\n  ) as typeof Checkbox & typeof ToggleButton\n\n  const createOption = (props: OptionProps, i: number) => {\n    const {\n      value: selected,\n      error,\n      title,\n      help,\n      className,\n      children,\n      ...rest\n    } = props\n\n    const label = title ?? children\n    const status = getStatus(error, info, warning)\n    const suffix = help ? (\n      <HelpButton size=\"small\" title={help.title}>\n        {help.content}\n      </HelpButton>\n    ) : undefined\n    const handleSelect = () => {\n      const newValue = value?.includes(selected)\n        ? value.filter((value) => value !== selected)\n        : [...(value ?? []), selected]\n\n      handleChange?.(\n        newValue.length === 0 ? (emptyValue as typeof value) : newValue\n      )\n    }\n\n    return (\n      <Component\n        id={optionsCount === 1 ? id : undefined}\n        key={`option-${i}-${value}`}\n        className={classnames(\n          `dnb-forms-field-array-selection__${\n            variant === 'checkbox' ? 'checkbox' : 'button'\n          }`,\n          className\n        )}\n        label={variant === 'checkbox' ? label : undefined}\n        text={variant !== 'checkbox' ? label : undefined}\n        value={value}\n        disabled={disabled}\n        checked={value?.includes(selected)}\n        status={(hasError || status) && 'error'}\n        suffix={suffix}\n        on_change={handleSelect}\n        {...htmlAttributes}\n        {...rest}\n      />\n    )\n  }\n\n  const mapOptions = (children: React.ReactNode) => {\n    return React.Children.toArray(children).map(\n      (child: React.ReactElement<OptionProps>, i) => {\n        if (React.isValidElement(child)) {\n          if (child.type === OptionField) {\n            return createOption(child.props, i)\n          }\n\n          if (child.props.children) {\n            const nestedChildren = mapOptions(child.props.children)\n            return React.cloneElement(child, child.props, nestedChildren)\n          }\n        }\n\n        return child\n      }\n    )\n  }\n\n  return mapOptions(children)\n}\n\nArraySelection._supportsSpacingProps = true\nexport default ArraySelection\n"],"mappings":"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"}

package/es/extensions/forms/Field/ArraySelection/ArraySelectionDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../../../shared/types';
+export declare const arraySelectionProperties: PropertiesTableProps;

package/es/extensions/forms/Field/ArraySelection/ArraySelectionDocs.js

@@ -0,0 +1,20 @@
+export const arraySelectionProperties = {
+  variant: {
+    doc: 'Choice of UI feature.',
+    type: [`'checkbox'`, `'button'`, `'checkbox-button'`],
+    defaultValue: `'checkbox'`,
+    status: 'optional'
+  },
+  optionsLayout: {
+    doc: 'Layout for the list of options.',
+    type: [`'horizontal'`, `'vertical'`],
+    defaultValue: `'vertical'`,
+    status: 'optional'
+  },
+  children: {
+    doc: 'For providing `<Field.Option>` components.',
+    type: 'React.Node',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=ArraySelectionDocs.js.map

package/es/extensions/forms/Field/ArraySelection/ArraySelectionDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArraySelectionDocs.js","names":["arraySelectionProperties","variant","doc","type","defaultValue","status","optionsLayout","children"],"sources":["../../../../../../src/extensions/forms/Field/ArraySelection/ArraySelectionDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const arraySelectionProperties: PropertiesTableProps = {\n  variant: {\n    doc: 'Choice of UI feature.',\n    type: [`'checkbox'`, `'button'`, `'checkbox-button'`],\n    defaultValue: `'checkbox'`,\n    status: 'optional',\n  },\n  optionsLayout: {\n    doc: 'Layout for the list of options.',\n    type: [`'horizontal'`, `'vertical'`],\n    defaultValue: `'vertical'`,\n    status: 'optional',\n  },\n  children: {\n    doc: 'For providing `<Field.Option>` components.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,wBAA8C,GAAG;EAC5DC,OAAO,EAAE;IACPC,GAAG,EAAE,uBAAuB;IAC5BC,IAAI,EAAE,CAAE,YAAW,EAAG,UAAS,EAAG,mBAAkB,CAAC;IACrDC,YAAY,EAAG,YAAW;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbJ,GAAG,EAAE,iCAAiC;IACtCC,IAAI,EAAE,CAAE,cAAa,EAAG,YAAW,CAAC;IACpCC,YAAY,EAAG,YAAW;IAC1BC,MAAM,EAAE;EACV,CAAC;EACDE,QAAQ,EAAE;IACRL,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,YAAY;IAClBE,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/ValueBlock/ValueBlock.js

@@ -51,7 +51,7 @@ function ValueBlock(props) {
   let content = null;
   const compositionClass = composition && `dnb-forms-value-block__composition--${composition === true ? 'horizontal' : composition}`;
   if (summaryListContext) {
-    const Element = summaryListContext.isNested ? Dl : summaryListContext.layout === 'horizontal' ? Dl.Item : Fragment;
+    const Item = summaryListContext.isNested ? Dl : summaryListContext.layout === 'horizontal' ? Dl.Item : Fragment;
     if (!label && valueBlockContext !== null && valueBlockContext !== void 0 && valueBlockContext.composition) {
       var _span;
       content = (_span = React.createElement("span", {
@@ -60,13 +60,13 @@ function ValueBlock(props) {
         className: "dnb-forms-value-block__placeholder"
       }, placeholder);
     } else {
-      content = React.createElement(Element, null, React.createElement(SummaryListContext.Provider, {
+      content = React.createElement(SummaryListContext.Provider, {
         value: _objectSpread(_objectSpread({}, summaryListContext), {}, {
           isNested: true
         })
-      }, label && React.createElement(Dt, {
+      }, React.createElement(Item, null, React.createElement(Dt, {
         className: "dnb-forms-value-block__label"
-      }, React.createElement("strong", null, label)), React.createElement(Dd, {
+      }, label && React.createElement("strong", null, label)), React.createElement(Dd, {
         className: classnames(compositionClass, summaryListContext.layout !== 'grid' && !summaryListContext.isNested && maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`)
       }, children ? React.createElement("span", {
         className: 'dnb-forms-value-block__content' + (gap ? ` dnb-forms-value-block__content--gap-${gap}` : "")

package/es/extensions/forms/ValueBlock/ValueBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","useEffect","useMemo","useRef","classnames","warn","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","ValueBlockContext","DataContext","pickSpacingProps","IterateElementContext","convertJsxToString","ValueBlock","props","summaryListContext","valueBlockContext","dataContext","iterateElementContext","index","iterateIndex","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","replace","String","ref","useNotInSummaryList","prerenderFieldProps","content","compositionClass","Element","isNested","layout","Item","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","current","sibling","previousElementSibling","classList","contains","closest","apply","filter","Boolean","error","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, {\n  Fragment,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { warn } from '../../../shared/helpers'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from './ValueBlockContext'\nimport DataContext from '../DataContext/Context'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport IterateElementContext from '../Iterate/IterateElementContext'\nimport { convertJsxToString } from '../../../shared/component-helper'\n\n/**\n * Props are documented in ValueDocs.ts\n */\nexport type Props = Omit<ValueProps<unknown>, 'value'> & {\n  children?: React.ReactNode\n\n  /**\n   * Used internally by the Composition component\n   */\n  composition?: boolean\n\n  /**\n   * Used internally by the Composition component\n   */\n  gap?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | false\n}\n\nfunction ValueBlock(props: Props) {\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n  const dataContext = useContext(DataContext)\n  const iterateElementContext = useContext(IterateElementContext)\n  const { index: iterateIndex } = iterateElementContext ?? {}\n\n  const {\n    className,\n    label: labelProp,\n    inline,\n    maxWidth = props.composition ? props.maxWidth : 'large',\n    placeholder,\n    showEmpty,\n    children,\n    composition,\n    gap = 'xx-small',\n  } = props\n\n  const label = useMemo(() => {\n    if (inline) {\n      return null\n    }\n    if (iterateIndex !== undefined) {\n      return convertJsxToString(labelProp).replace(\n        '{itemNr}',\n        String(iterateIndex + 1)\n      )\n    }\n    return labelProp\n  }, [inline, iterateIndex, labelProp])\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(valueBlockContext?.composition ? null : ref, label)\n\n  if (\n    ((children === undefined || children === null || children === false) &&\n      !showEmpty &&\n      !placeholder) ||\n    dataContext?.prerenderFieldProps\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass =\n    composition &&\n    classnames(\n      `dnb-forms-value-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`\n    )\n\n  if (summaryListContext) {\n    const Element = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && valueBlockContext?.composition) {\n      content = (\n        <span\n          className={classnames(\n            'dnb-forms-value-block__content',\n            gap && `dnb-forms-value-block__content--gap-${gap}`\n          )}\n        >\n          {children}\n        </span>\n      ) ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      content = (\n        <Element>\n          <SummaryListContext.Provider\n            value={{ ...summaryListContext, isNested: true }}\n          >\n            {label && (\n              <Dt className=\"dnb-forms-value-block__label\">\n                <strong>{label}</strong>\n              </Dt>\n            )}\n            <Dd\n              className={classnames(\n                summaryListContext.layout !== 'grid' &&\n                  !summaryListContext.isNested &&\n                  maxWidth &&\n                  `dnb-forms-value-block--max-width-${maxWidth}`,\n                compositionClass\n              )}\n            >\n              {children ? (\n                <span\n                  className={classnames(\n                    'dnb-forms-value-block__content',\n                    gap && `dnb-forms-value-block__content--gap-${gap}`\n                  )}\n                >\n                  {children}\n                </span>\n              ) : (\n                <span className=\"dnb-forms-value-block__placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </Dd>\n          </SummaryListContext.Provider>\n        </Element>\n      )\n    }\n  } else {\n    content = (\n      <Span\n        ref={ref}\n        className={classnames(\n          'dnb-forms-value-block',\n          inline && 'dnb-forms-value-block--inline',\n          maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`,\n          compositionClass,\n          className\n        )}\n        {...pickSpacingProps(props)}\n      >\n        {label && (\n          <FormLabel\n            element=\"strong\" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49\n            className=\"dnb-forms-value-block__label\"\n            labelDirection={inline ? 'horizontal' : 'vertical'}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span\n            className={classnames(\n              'dnb-forms-value-block__content',\n              gap && `dnb-forms-value-block__content--gap-${gap}`\n            )}\n          >\n            {children}\n          </span>\n        ) : (\n          <span className=\"dnb-forms-value-block__placeholder\">\n            {placeholder}\n          </span>\n        )}\n      </Span>\n    )\n  }\n\n  return (\n    <ValueBlockContext.Provider value={props}>\n      {content}\n    </ValueBlockContext.Provider>\n  )\n}\n\nfunction useNotInSummaryList(\n  ref: React.RefObject<HTMLElement>,\n  label?: React.ReactNode\n) {\n  useEffect(() => {\n    if (ref?.current) {\n      try {\n        const sibling = ref.current.previousElementSibling\n\n        if (\n          sibling?.classList.contains('dnb-forms-value-block') &&\n          !ref.current.closest('.dnb-forms-summary-list')\n        ) {\n          warn.apply(\n            warn,\n            [\n              'Value components as siblings should be wrapped inside a Value.SummaryList!',\n              label,\n            ].filter(Boolean)\n          )\n        }\n      } catch (error) {\n        //\n      }\n    }\n  }, [label, ref])\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":"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"}
+{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","useEffect","useMemo","useRef","classnames","warn","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","ValueBlockContext","DataContext","pickSpacingProps","IterateElementContext","convertJsxToString","ValueBlock","props","summaryListContext","valueBlockContext","dataContext","iterateElementContext","index","iterateIndex","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","replace","String","ref","useNotInSummaryList","prerenderFieldProps","content","compositionClass","Item","isNested","layout","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","current","sibling","previousElementSibling","classList","contains","closest","apply","filter","Boolean","error","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, {\n  Fragment,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport classnames from 'classnames'\nimport { warn } from '../../../shared/helpers'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport ValueBlockContext from './ValueBlockContext'\nimport DataContext from '../DataContext/Context'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport IterateElementContext from '../Iterate/IterateElementContext'\nimport { convertJsxToString } from '../../../shared/component-helper'\n\n/**\n * Props are documented in ValueDocs.ts\n */\nexport type Props = Omit<ValueProps<unknown>, 'value'> & {\n  children?: React.ReactNode\n\n  /**\n   * Used internally by the Composition component\n   */\n  composition?: boolean\n\n  /**\n   * Used internally by the Composition component\n   */\n  gap?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | false\n}\n\nfunction ValueBlock(props: Props) {\n  const summaryListContext = useContext(SummaryListContext)\n  const valueBlockContext = useContext(ValueBlockContext)\n  const dataContext = useContext(DataContext)\n  const iterateElementContext = useContext(IterateElementContext)\n  const { index: iterateIndex } = iterateElementContext ?? {}\n\n  const {\n    className,\n    label: labelProp,\n    inline,\n    maxWidth = props.composition ? props.maxWidth : 'large',\n    placeholder,\n    showEmpty,\n    children,\n    composition,\n    gap = 'xx-small',\n  } = props\n\n  const label = useMemo(() => {\n    if (inline) {\n      return null\n    }\n    if (iterateIndex !== undefined) {\n      return convertJsxToString(labelProp).replace(\n        '{itemNr}',\n        String(iterateIndex + 1)\n      )\n    }\n    return labelProp\n  }, [inline, iterateIndex, labelProp])\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(valueBlockContext?.composition ? null : ref, label)\n\n  if (\n    ((children === undefined || children === null || children === false) &&\n      !showEmpty &&\n      !placeholder) ||\n    dataContext?.prerenderFieldProps\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass =\n    composition &&\n    classnames(\n      `dnb-forms-value-block__composition--${\n        composition === true ? 'horizontal' : composition\n      }`\n    )\n\n  if (summaryListContext) {\n    const Item = summaryListContext.isNested\n      ? Dl\n      : summaryListContext.layout === 'horizontal'\n      ? Dl.Item\n      : Fragment\n\n    if (!label && valueBlockContext?.composition) {\n      content = (\n        <span\n          className={classnames(\n            'dnb-forms-value-block__content',\n            gap && `dnb-forms-value-block__content--gap-${gap}`\n          )}\n        >\n          {children}\n        </span>\n      ) ?? (\n        <span className=\"dnb-forms-value-block__placeholder\">\n          {placeholder}\n        </span>\n      )\n    } else {\n      content = (\n        <SummaryListContext.Provider\n          value={{ ...summaryListContext, isNested: true }}\n        >\n          <Item>\n            <Dt className=\"dnb-forms-value-block__label\">\n              {label && <strong>{label}</strong>}\n            </Dt>\n            <Dd\n              className={classnames(\n                summaryListContext.layout !== 'grid' &&\n                  !summaryListContext.isNested &&\n                  maxWidth &&\n                  `dnb-forms-value-block--max-width-${maxWidth}`,\n                compositionClass\n              )}\n            >\n              {children ? (\n                <span\n                  className={classnames(\n                    'dnb-forms-value-block__content',\n                    gap && `dnb-forms-value-block__content--gap-${gap}`\n                  )}\n                >\n                  {children}\n                </span>\n              ) : (\n                <span className=\"dnb-forms-value-block__placeholder\">\n                  {placeholder}\n                </span>\n              )}\n            </Dd>\n          </Item>\n        </SummaryListContext.Provider>\n      )\n    }\n  } else {\n    content = (\n      <Span\n        ref={ref}\n        className={classnames(\n          'dnb-forms-value-block',\n          inline && 'dnb-forms-value-block--inline',\n          maxWidth && `dnb-forms-value-block--max-width-${maxWidth}`,\n          compositionClass,\n          className\n        )}\n        {...pickSpacingProps(props)}\n      >\n        {label && (\n          <FormLabel\n            element=\"strong\" // enhance a11y: https://www.w3.org/WAI/WCAG21/Techniques/html/H49\n            className=\"dnb-forms-value-block__label\"\n            labelDirection={inline ? 'horizontal' : 'vertical'}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span\n            className={classnames(\n              'dnb-forms-value-block__content',\n              gap && `dnb-forms-value-block__content--gap-${gap}`\n            )}\n          >\n            {children}\n          </span>\n        ) : (\n          <span className=\"dnb-forms-value-block__placeholder\">\n            {placeholder}\n          </span>\n        )}\n      </Span>\n    )\n  }\n\n  return (\n    <ValueBlockContext.Provider value={props}>\n      {content}\n    </ValueBlockContext.Provider>\n  )\n}\n\nfunction useNotInSummaryList(\n  ref: React.RefObject<HTMLElement>,\n  label?: React.ReactNode\n) {\n  useEffect(() => {\n    if (ref?.current) {\n      try {\n        const sibling = ref.current.previousElementSibling\n\n        if (\n          sibling?.classList.contains('dnb-forms-value-block') &&\n          !ref.current.closest('.dnb-forms-summary-list')\n        ) {\n          warn.apply(\n            warn,\n            [\n              'Value components as siblings should be wrapped inside a Value.SummaryList!',\n              label,\n            ].filter(Boolean)\n          )\n        }\n      } catch (error) {\n        //\n      }\n    }\n  }, [label, ref])\n}\n\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":"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"}

package/es/extensions/forms/ValueBlock/style/dnb-value-block.css

@@ -2,18 +2,15 @@
 /*
  * Utilities
  */
-.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 {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
   margin: 0;
 }
-.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd {
   margin-bottom: var(--spacing-medium);
 }
-.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
   margin-bottom: 0;
 }
-.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid {
-  row-gap: var(--spacing-medium);
-}
 
 .dnb-forms-value-block {
   display: block;

package/es/extensions/forms/ValueBlock/style/dnb-value-block.min.css

@@ -1 +1 @@
-@charset "UTF-8";.dnb-forms-summary-list.dnb-dl .dnb-dt,.dnb-forms-summary-list.dnb-dl:not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid{row-gap:var(--spacing-medium)}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit}.dnb-forms-value-block--inline:not([class*=__composition]):after,.dnb-forms-value-block--inline:not([class*=__composition]):before{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)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}
+@charset "UTF-8";.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space])>.dnb-dd>.dnb-dl,.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal)>.dnb-dd>.dnb-dl{margin:0}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd{margin-bottom:var(--spacing-medium)}.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid)>.dnb-dd:last-of-type{margin-bottom:0}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline:not([class*=__composition]){display:inline-block;font-size:inherit}.dnb-forms-value-block--inline:not([class*=__composition]):after,.dnb-forms-value-block--inline:not([class*=__composition]):before{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)}.dnb-forms-value-block__placeholder{color:var(--color-black-80)}.dnb-forms-value-block--max-width-stretch{width:100%}@media screen and (min-width:25em){.dnb-forms-value-block--max-width-small{max-width:var(--forms-field-width--small)}.dnb-forms-value-block--max-width-medium{max-width:var(--forms-field-width--medium)}.dnb-forms-value-block--max-width-large{max-width:var(--forms-field-width--large)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{-moz-column-gap:var(--column-gap,0);column-gap:var(--column-gap,0);display:flex;flex-flow:row;row-gap:var(--row-gap,var(--spacing-medium))}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-xx-small{--column-gap:var(--spacing-xx-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-x-small{--column-gap:var(--spacing-x-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-small{--column-gap:var(--spacing-small)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-medium{--column-gap:var(--spacing-medium)}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content--gap-large{--column-gap:var(--spacing-large)}@media screen and (min-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{align-items:flex-start}}@media screen and (max-width:25em){.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content{flex-flow:column}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not(:has(.dnb-forms-value-block__label)){--row-gap:var(--spacing-x-small)}}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content:not([class*=dnb-space])>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dd,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl,.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dt{margin:0}.dnb-forms-value-block__composition--horizontal .dnb-forms-value-block__content>.dnb-dl>.dnb-dd{margin-bottom:0}

package/es/extensions/forms/ValueBlock/style/dnb-value-block.scss

@@ -1,6 +1,6 @@
 @import '../../../../style/core/utilities.scss';
 
-.dnb-forms-summary-list.dnb-dl {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) {
   & .dnb-dt,
   & > .dnb-dd > .dnb-dl,
   &:not([class*='dnb-space']) > .dnb-dd > .dnb-dl {
@@ -13,9 +13,6 @@
       margin-bottom: 0;
     }
   }
-  &.dnb-dl__layout--grid {
-    row-gap: var(--spacing-medium);
-  }
 }
 
 .dnb-forms-value-block {

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

@@ -573,18 +573,15 @@ html[data-visual-test] .dnb-forms-submit-indicator__content b {
 /*
  * Utilities
  */
-.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 {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) .dnb-dt, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal) > .dnb-dd > .dnb-dl, .dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not([class*=dnb-space]) > .dnb-dd > .dnb-dl {
   margin: 0;
 }
-.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd {
   margin-bottom: var(--spacing-medium);
 }
-.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
+.dnb-forms-summary-list.dnb-dl:not(.dnb-dl__layout--horizontal):not(.dnb-dl__layout--grid) > .dnb-dd:last-of-type {
   margin-bottom: 0;
 }
-.dnb-forms-summary-list.dnb-dl.dnb-dl__layout--grid {
-  row-gap: var(--spacing-medium);
-}
 
 .dnb-forms-value-block {
   display: block;