@dnb/eufemia 10.55.1 → 10.57.0

package/es/extensions/forms/Form/SubHeading/SubHeading.js

@@ -1,26 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 const _excluded = ["level"],
-  _excluded2 = ["className", "children"];
+  _excluded2 = ["help", "className", "children"];
 import React from 'react';
 import classnames from 'classnames';
+import useId from '../../../../shared/helpers/useId';
 import Heading from '../../../../components/heading/Heading';
+import HelpButtonInline, { HelpButtonInlineContent } from '../../../../components/help-button/HelpButtonInline';
 function SubHeading(_ref) {
   let {
       level
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
+      help,
       className,
       children
     } = props,
     rest = _objectWithoutProperties(props, _excluded2);
-  return React.createElement(Heading, _extends({
-    className: classnames('dnb-forms-sub-heading', className),
+  const helpId = useId();
+  const hasHelp = (help === null || help === void 0 ? void 0 : help.title) || (help === null || help === void 0 ? void 0 : help.content);
+  return React.createElement(React.Fragment, null, React.createElement(Heading, _extends({
+    className: classnames("dnb-forms-sub-heading dnb-card--auto-indent", className),
     level: level || 3,
     skip_correction: true,
     size: "medium"
-  }, rest), children);
+  }, rest), children, hasHelp && React.createElement(HelpButtonInline, {
+    left: "x-small",
+    contentId: helpId,
+    help: help
+  })), hasHelp && React.createElement(HelpButtonInlineContent, {
+    top: "x-small",
+    contentId: helpId,
+    help: help
+  }));
 }
 SubHeading._supportsSpacingProps = true;
 SubHeading._isHeadingElement = true;

package/es/extensions/forms/Form/SubHeading/SubHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubHeading.js","names":["React","classnames","Heading","SubHeading","_ref","level","props","_objectWithoutProperties","_excluded","className","children","rest","_excluded2","createElement","_extends","skip_correction","size","_supportsSpacingProps","_isHeadingElement"],"sources":["../../../../../../src/extensions/forms/Form/SubHeading/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport Heading from '../../../../components/heading/Heading'\nimport type { HeadingLevel } from '../../../../components/heading/Heading'\nimport type { ComponentProps } from '../../types'\n\nexport type Props = ComponentProps & {\n  level?: HeadingLevel\n  children?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLElement>, 'size'>\n\nfunction SubHeading({ level, ...props }: Props) {\n  const { className, children, ...rest } = props\n  return (\n    <Heading\n      className={classnames('dnb-forms-sub-heading', className)}\n      level={level || 3}\n      skip_correction\n      size=\"medium\"\n      {...rest}\n    >\n      {children}\n    </Heading>\n  )\n}\n\nSubHeading._supportsSpacingProps = true\nSubHeading._isHeadingElement = true\n\nexport default SubHeading\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,wCAAwC;AAS5D,SAASC,UAAUA,CAAAC,IAAA,EAA6B;EAAA,IAA5B;MAAEC;IAAuB,CAAC,GAAAD,IAAA;IAAdE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACnC,MAAM;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGJ,KAAK;IAAdK,IAAI,GAAAJ,wBAAA,CAAKD,KAAK,EAAAM,UAAA;EAC9C,OACEZ,KAAA,CAAAa,aAAA,CAACX,OAAO,EAAAY,QAAA;IACNL,SAAS,EAAER,UAAU,CAAC,uBAAuB,EAAEQ,SAAS,CAAE;IAC1DJ,KAAK,EAAEA,KAAK,IAAI,CAAE;IAClBU,eAAe;IACfC,IAAI,EAAC;EAAQ,GACTL,IAAI,GAEPD,QACM,CAAC;AAEd;AAEAP,UAAU,CAACc,qBAAqB,GAAG,IAAI;AACvCd,UAAU,CAACe,iBAAiB,GAAG,IAAI;AAEnC,eAAef,UAAU"}
+{"version":3,"file":"SubHeading.js","names":["React","classnames","useId","Heading","HelpButtonInline","HelpButtonInlineContent","SubHeading","_ref","level","props","_objectWithoutProperties","_excluded","help","className","children","rest","_excluded2","helpId","hasHelp","title","content","createElement","Fragment","_extends","skip_correction","size","left","contentId","top","_supportsSpacingProps","_isHeadingElement"],"sources":["../../../../../../src/extensions/forms/Form/SubHeading/SubHeading.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport useId from '../../../../shared/helpers/useId'\nimport Heading from '../../../../components/heading/Heading'\nimport HelpButtonInline, {\n  HelpButtonInlineContent,\n  HelpProps,\n} from '../../../../components/help-button/HelpButtonInline'\nimport type { HeadingLevel } from '../../../../components/heading/Heading'\nimport type { ComponentProps } from '../../types'\n\nexport type Props = ComponentProps & {\n  level?: HeadingLevel\n  help?: HelpProps\n  children?: React.ReactNode\n} & Omit<React.HTMLProps<HTMLElement>, 'size'>\n\nfunction SubHeading({ level, ...props }: Props) {\n  const { help, className, children, ...rest } = props\n  const helpId = useId()\n  const hasHelp = help?.title || help?.content\n\n  return (\n    <>\n      <Heading\n        className={classnames(\n          'dnb-forms-sub-heading',\n          'dnb-card--auto-indent',\n          className\n        )}\n        level={level || 3}\n        skip_correction\n        size=\"medium\"\n        {...rest}\n      >\n        {children}\n        {hasHelp && (\n          <HelpButtonInline\n            left=\"x-small\"\n            contentId={helpId}\n            help={help}\n          />\n        )}\n      </Heading>\n\n      {hasHelp && (\n        <HelpButtonInlineContent\n          top=\"x-small\"\n          contentId={helpId}\n          help={help}\n        />\n      )}\n    </>\n  )\n}\n\nSubHeading._supportsSpacingProps = true\nSubHeading._isHeadingElement = true\n\nexport default SubHeading\n"],"mappings":";;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,kCAAkC;AACpD,OAAOC,OAAO,MAAM,wCAAwC;AAC5D,OAAOC,gBAAgB,IACrBC,uBAAuB,QAElB,qDAAqD;AAU5D,SAASC,UAAUA,CAAAC,IAAA,EAA6B;EAAA,IAA5B;MAAEC;IAAuB,CAAC,GAAAD,IAAA;IAAdE,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EACnC,MAAM;MAAEC,IAAI;MAAEC,SAAS;MAAEC;IAAkB,CAAC,GAAGL,KAAK;IAAdM,IAAI,GAAAL,wBAAA,CAAKD,KAAK,EAAAO,UAAA;EACpD,MAAMC,MAAM,GAAGf,KAAK,CAAC,CAAC;EACtB,MAAMgB,OAAO,GAAG,CAAAN,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEO,KAAK,MAAIP,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEQ,OAAO;EAE5C,OACEpB,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsB,QAAA,QACEtB,KAAA,CAAAqB,aAAA,CAAClB,OAAO,EAAAoB,QAAA;IACNV,SAAS,EAAEZ,UAAU,gDAGnBY,SACF,CAAE;IACFL,KAAK,EAAEA,KAAK,IAAI,CAAE;IAClBgB,eAAe;IACfC,IAAI,EAAC;EAAQ,GACTV,IAAI,GAEPD,QAAQ,EACRI,OAAO,IACNlB,KAAA,CAAAqB,aAAA,CAACjB,gBAAgB;IACfsB,IAAI,EAAC,SAAS;IACdC,SAAS,EAAEV,MAAO;IAClBL,IAAI,EAAEA;EAAK,CACZ,CAEI,CAAC,EAETM,OAAO,IACNlB,KAAA,CAAAqB,aAAA,CAAChB,uBAAuB;IACtBuB,GAAG,EAAC,SAAS;IACbD,SAAS,EAAEV,MAAO;IAClBL,IAAI,EAAEA;EAAK,CACZ,CAEH,CAAC;AAEP;AAEAN,UAAU,CAACuB,qBAAqB,GAAG,IAAI;AACvCvB,UAAU,CAACwB,iBAAiB,GAAG,IAAI;AAEnC,eAAexB,UAAU"}

package/es/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.css

@@ -6,4 +6,8 @@
 }
 .dnb-forms-sub-heading:has(+ .dnb-flex-stack > .dnb-card, + .dnb-card):not([class*=space__bottom]) {
   margin-bottom: var(--spacing-small);
+}
+
+.dnb-forms-sub-heading + .dnb-help-button__content .dnb-section {
+  margin-top: 1rem;
 }

package/es/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.min.css

@@ -1 +1 @@
-.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-forms-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}
+.dnb-spacing .dnb-forms-sub-heading.dnb-h--medium:not([class*=space__]){margin:0}.dnb-forms-sub-heading:has(+.dnb-flex-stack>.dnb-card,+.dnb-card):not([class*=space__bottom]){margin-bottom:var(--spacing-small)}.dnb-forms-sub-heading+.dnb-help-button__content .dnb-section{margin-top:1rem}

package/es/extensions/forms/Form/SubHeading/style/dnb-form-sub-heading.scss

@@ -14,3 +14,9 @@
     }
   }
 }
+
+.dnb-forms-sub-heading + .dnb-help-button__content {
+  .dnb-section {
+    margin-top: 1rem;
+  }
+}

package/es/extensions/forms/Form/SubmitButton/SubmitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.js","names":["React","useCallback","useContext","classnames","DataContext","Button","SubmitIndicator","useTranslation","send","SubmitButton","props","translations","variant","className","showIndicator","children","text","rest","_objectWithoutProperties","_excluded","content","sendText","formState","handleSubmit","isInsideFormElement","dataContextProps","isolate","onClickHandler","createElement","_extends","onClick","type","icon","state","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport DataContext from '../../DataContext/Context'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\nimport SubmitIndicator from '../SubmitIndicator'\nimport useTranslation from '../../hooks/useTranslation'\nimport { send } from '../../../../icons'\n\nexport type Props = {\n  /**\n   * Show the submit indicator\n   */\n  showIndicator?: boolean\n} & ComponentProps &\n  Omit<ButtonProps, 'variant'> &\n  Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>> & {\n    variant?: 'send'\n  }\n\nfunction SubmitButton(props: Props) {\n  const translations = useTranslation().SubmitButton\n\n  const { variant, className, showIndicator, children, text, ...rest } =\n    props\n\n  const content =\n    text ||\n    children ||\n    (variant === 'send' ? translations.sendText : translations.text)\n\n  const {\n    formState,\n    handleSubmit,\n    isInsideFormElement,\n    props: dataContextProps,\n  } = useContext(DataContext) || {}\n  const { isolate } = dataContextProps || {}\n\n  const onClickHandler = useCallback(() => {\n    if (!isInsideFormElement) {\n      handleSubmit?.()\n    }\n  }, [isInsideFormElement, handleSubmit])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-submit-button', className)}\n      onClick={onClickHandler}\n      type={isolate ? 'button' : 'submit'}\n      icon={variant === 'send' ? send : null}\n      {...rest}\n    >\n      {content}\n\n      <SubmitIndicator\n        state={\n          showIndicator ? 'pending' : formState // will be enabled in a follow-up PR\n        }\n      />\n    </Button>\n  )\n}\n\nSubmitButton._supportsSpacingProps = true\nexport default SubmitButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,MAAM,MAAuB,sCAAsC;AAC1E,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,cAAc,MAAM,4BAA4B;AACvD,SAASC,IAAI,QAAQ,mBAAmB;AAaxC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,YAAY,GAAGJ,cAAc,CAAC,CAAC,CAACE,YAAY;EAElD,MAAM;MAAEG,OAAO;MAAEC,SAAS;MAAEC,aAAa;MAAEC,QAAQ;MAAEC;IAAc,CAAC,GAClEN,KAAK;IADuDO,IAAI,GAAAC,wBAAA,CAChER,KAAK,EAAAS,SAAA;EAEP,MAAMC,OAAO,GACXJ,IAAI,IACJD,QAAQ,KACPH,OAAO,KAAK,MAAM,GAAGD,YAAY,CAACU,QAAQ,GAAGV,YAAY,CAACK,IAAI,CAAC;EAElE,MAAM;IACJM,SAAS;IACTC,YAAY;IACZC,mBAAmB;IACnBd,KAAK,EAAEe;EACT,CAAC,GAAGvB,UAAU,CAACE,WAAW,CAAC,IAAI,CAAC,CAAC;EACjC,MAAM;IAAEsB;EAAQ,CAAC,GAAGD,gBAAgB,IAAI,CAAC,CAAC;EAE1C,MAAME,cAAc,GAAG1B,WAAW,CAAC,MAAM;IACvC,IAAI,CAACuB,mBAAmB,EAAE;MACxBD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC;IAClB;EACF,CAAC,EAAE,CAACC,mBAAmB,EAAED,YAAY,CAAC,CAAC;EAEvC,OACEvB,KAAA,CAAA4B,aAAA,CAACvB,MAAM,EAAAwB,QAAA;IACLhB,SAAS,EAAEV,UAAU,CAAC,yBAAyB,EAAEU,SAAS,CAAE;IAC5DiB,OAAO,EAAEH,cAAe;IACxBI,IAAI,EAAEL,OAAO,GAAG,QAAQ,GAAG,QAAS;IACpCM,IAAI,EAAEpB,OAAO,KAAK,MAAM,GAAGJ,IAAI,GAAG;EAAK,GACnCS,IAAI,GAEPG,OAAO,EAERpB,KAAA,CAAA4B,aAAA,CAACtB,eAAe;IACd2B,KAAK,EACHnB,aAAa,GAAG,SAAS,GAAGQ;EAC7B,CACF,CACK,CAAC;AAEb;AAEAb,YAAY,CAACyB,qBAAqB,GAAG,IAAI;AACzC,eAAezB,YAAY"}
+{"version":3,"file":"SubmitButton.js","names":["React","useCallback","useContext","classnames","DataContext","Button","SubmitIndicator","useTranslation","send","SubmitButton","props","translations","variant","className","showIndicator","children","text","rest","_objectWithoutProperties","_excluded","content","sendText","formState","handleSubmit","isInsideFormElement","dataContextProps","isolate","onClickHandler","createElement","_extends","onClick","type","icon","state","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react'\nimport classnames from 'classnames'\nimport type { ComponentProps } from '../../types'\nimport DataContext from '../../DataContext/Context'\nimport Button, { ButtonProps } from '../../../../components/button/Button'\nimport SubmitIndicator from '../SubmitIndicator'\nimport useTranslation from '../../hooks/useTranslation'\nimport { send } from '../../../../icons'\n\nexport type Props = {\n  /**\n   * Show the submit indicator\n   */\n  showIndicator?: boolean\n} & ComponentProps &\n  Omit<ButtonProps, 'variant'> &\n  Partial<React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>> & {\n    variant?: 'send'\n  }\n\nfunction SubmitButton(props: Props) {\n  const translations = useTranslation().SubmitButton\n\n  const { variant, className, showIndicator, children, text, ...rest } =\n    props\n\n  const content =\n    text ||\n    children ||\n    (variant === 'send' ? translations.sendText : translations.text)\n\n  const {\n    formState,\n    handleSubmit,\n    isInsideFormElement,\n    props: dataContextProps,\n  } = useContext(DataContext) || {}\n  const { isolate } = dataContextProps || {}\n\n  const onClickHandler = useCallback(() => {\n    if (!isInsideFormElement) {\n      handleSubmit?.()\n    }\n  }, [isInsideFormElement, handleSubmit])\n\n  return (\n    <Button\n      className={classnames('dnb-forms-submit-button', className)}\n      onClick={onClickHandler}\n      type={isolate ? 'button' : 'submit'}\n      icon={variant === 'send' ? send : null}\n      {...rest}\n    >\n      {content}\n\n      <SubmitIndicator state={showIndicator ? 'pending' : formState} />\n    </Button>\n  )\n}\n\nSubmitButton._supportsSpacingProps = true\nexport default SubmitButton\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AACtD,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,WAAW,MAAM,2BAA2B;AACnD,OAAOC,MAAM,MAAuB,sCAAsC;AAC1E,OAAOC,eAAe,MAAM,oBAAoB;AAChD,OAAOC,cAAc,MAAM,4BAA4B;AACvD,SAASC,IAAI,QAAQ,mBAAmB;AAaxC,SAASC,YAAYA,CAACC,KAAY,EAAE;EAClC,MAAMC,YAAY,GAAGJ,cAAc,CAAC,CAAC,CAACE,YAAY;EAElD,MAAM;MAAEG,OAAO;MAAEC,SAAS;MAAEC,aAAa;MAAEC,QAAQ;MAAEC;IAAc,CAAC,GAClEN,KAAK;IADuDO,IAAI,GAAAC,wBAAA,CAChER,KAAK,EAAAS,SAAA;EAEP,MAAMC,OAAO,GACXJ,IAAI,IACJD,QAAQ,KACPH,OAAO,KAAK,MAAM,GAAGD,YAAY,CAACU,QAAQ,GAAGV,YAAY,CAACK,IAAI,CAAC;EAElE,MAAM;IACJM,SAAS;IACTC,YAAY;IACZC,mBAAmB;IACnBd,KAAK,EAAEe;EACT,CAAC,GAAGvB,UAAU,CAACE,WAAW,CAAC,IAAI,CAAC,CAAC;EACjC,MAAM;IAAEsB;EAAQ,CAAC,GAAGD,gBAAgB,IAAI,CAAC,CAAC;EAE1C,MAAME,cAAc,GAAG1B,WAAW,CAAC,MAAM;IACvC,IAAI,CAACuB,mBAAmB,EAAE;MACxBD,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAG,CAAC;IAClB;EACF,CAAC,EAAE,CAACC,mBAAmB,EAAED,YAAY,CAAC,CAAC;EAEvC,OACEvB,KAAA,CAAA4B,aAAA,CAACvB,MAAM,EAAAwB,QAAA;IACLhB,SAAS,EAAEV,UAAU,CAAC,yBAAyB,EAAEU,SAAS,CAAE;IAC5DiB,OAAO,EAAEH,cAAe;IACxBI,IAAI,EAAEL,OAAO,GAAG,QAAQ,GAAG,QAAS;IACpCM,IAAI,EAAEpB,OAAO,KAAK,MAAM,GAAGJ,IAAI,GAAG;EAAK,GACnCS,IAAI,GAEPG,OAAO,EAERpB,KAAA,CAAA4B,aAAA,CAACtB,eAAe;IAAC2B,KAAK,EAAEnB,aAAa,GAAG,SAAS,GAAGQ;EAAU,CAAE,CAC1D,CAAC;AAEb;AAEAb,YAAY,CAACyB,qBAAqB,GAAG,IAAI;AACzC,eAAezB,YAAY"}

package/es/extensions/forms/Form/SubmitIndicator/SubmitIndicator.js

@@ -7,7 +7,7 @@ var _b, _span;
 const _excluded = ["className", "children", "state", "successLabel"];
 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, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Icon, Space, Tooltip } from '../../../../components';
 import { check } from '../../../../icons';
@@ -27,11 +27,18 @@ function SubmitIndicator(props) {
   const childrenRef = useRef(null);
   const [willWrap, setWillWrap] = useState(false);
   const key = useMemo(() => convertJsxToString(children), [children]);
+  const recalculate = useCallback(() => {
+    setWillWrap(willWordWrap(childrenRef.current, '. . . '));
+  }, [childrenRef]);
   useLayoutEffect(() => {
-    if (children && state) {
-      setWillWrap(willWordWrap(childrenRef.current, '. . . '));
+    if (key) {
+      recalculate();
+      window.addEventListener('resize', recalculate);
+      return () => {
+        window.removeEventListener('resize', recalculate);
+      };
     }
-  }, [children, state]);
+  }, [key, recalculate]);
   const params = _objectSpread({
     className: classnames('dnb-forms-submit-indicator', className, state && `dnb-forms-submit-indicator--state-${state}`, willWrap && 'dnb-forms-submit-indicator--inline-wrap')
   }, pickSpacingProps(rest));
@@ -39,7 +46,9 @@ function SubmitIndicator(props) {
     role: 'status',
     'aria-busy': true,
     'aria-label': translation.ProgressIndicator.indicator_label
-  } : {};
+  } : {
+    'aria-hidden': true
+  };
   const dot = _b || (_b = React.createElement("b", null, "."));
   const indicator = React.createElement("span", _extends({
     className: "dnb-forms-submit-indicator__content"
@@ -56,6 +65,7 @@ function SubmitIndicator(props) {
   }, children), indicator);
 }
 function willWordWrap(element, word) {
+  var _element$parentElemen;
   if (!element) {
     return;
   }
@@ -63,9 +73,12 @@ function willWordWrap(element, word) {
     offsetHeight,
     innerHTML
   } = element;
-  element.innerHTML += word;
-  const height = element.offsetHeight;
-  element.innerHTML = innerHTML;
+  const clone = element.cloneNode(true);
+  (_element$parentElemen = element.parentElement) === null || _element$parentElemen === void 0 ? void 0 : _element$parentElemen.insertBefore(clone, element);
+  clone.innerHTML += word;
+  const height = clone.offsetHeight;
+  clone.innerHTML = innerHTML;
+  clone.remove();
   return height > offsetHeight;
 }
 SubmitIndicator._supportsSpacingProps = true;

package/es/extensions/forms/Form/SubmitIndicator/SubmitIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitIndicator.js","names":["React","useMemo","useRef","useState","classnames","Icon","Space","Tooltip","check","omitSpacingProps","pickSpacingProps","useTranslation","convertJsxToString","useLayoutEffect","window","useEffect","SubmitIndicator","props","className","children","state","successLabel","rest","_objectWithoutProperties","_excluded","translation","childrenRef","willWrap","setWillWrap","key","willWordWrap","current","params","_objectSpread","ariaAttributes","role","ProgressIndicator","indicator_label","dot","_b","createElement","indicator","_extends","targetElement","_span","icon","Fragment","element","ref","word","offsetHeight","innerHTML","height","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx"],"sourcesContent":["import React, { useMemo, useRef, useState } from 'react'\nimport classnames from 'classnames'\nimport { Icon, Space, Tooltip } from '../../../../components'\nimport type { SpaceProps } from '../../../../components/Space'\nimport { check } from '../../../../icons'\nimport type { SubmitState } from '../../types'\nimport {\n  omitSpacingProps,\n  pickSpacingProps,\n} from '../../../../components/flex/utils'\nimport { useTranslation } from '../../../../shared'\nimport { convertJsxToString } from '../../../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = {\n  state: SubmitState\n  className?: string\n  successLabel?: string\n  children?: React.ReactNode\n} & SpaceProps\n\nfunction SubmitIndicator(props: Props) {\n  const {\n    className,\n    children,\n    state,\n    successLabel = 'Saved',\n    ...rest\n  } = props\n  const translation = useTranslation()\n  const childrenRef = useRef<HTMLSpanElement>(null)\n  const [willWrap, setWillWrap] = useState(false)\n  const key = useMemo(() => convertJsxToString(children), [children])\n\n  useLayoutEffect(() => {\n    if (children && state) {\n      setWillWrap(willWordWrap(childrenRef.current, '. . . '))\n    }\n  }, [children, state])\n\n  const params = {\n    className: classnames(\n      'dnb-forms-submit-indicator',\n      state && `dnb-forms-submit-indicator--state-${state}`,\n      willWrap && 'dnb-forms-submit-indicator--inline-wrap',\n      className\n    ),\n    ...pickSpacingProps(rest),\n  } as SpaceProps\n\n  const ariaAttributes =\n    state === 'pending'\n      ? {\n          role: 'status',\n          'aria-busy': true,\n          'aria-label': translation.ProgressIndicator.indicator_label,\n        }\n      : {}\n\n  const dot = <b>.</b>\n  const indicator = (\n    <span\n      className=\"dnb-forms-submit-indicator__content\"\n      {...ariaAttributes}\n      {...omitSpacingProps(rest)}\n    >\n      {state === 'success' && (\n        <Tooltip\n          targetElement={\n            <span>\n              <Icon icon={check} />\n            </span>\n          }\n        >\n          {successLabel}\n        </Tooltip>\n      )}\n      {state && state !== 'success' && state !== 'abort' && (\n        <>\n          {dot}\n          {dot}\n          {dot}\n        </>\n      )}\n    </span>\n  )\n\n  return (\n    <Space {...params} element=\"span\">\n      {children && (\n        <span ref={childrenRef} key={key}>\n          {children}\n        </span>\n      )}\n      {indicator}\n    </Space>\n  )\n}\n\nfunction willWordWrap(element: HTMLElement, word: string) {\n  if (!element) {\n    return\n  }\n\n  const { offsetHeight, innerHTML } = element\n\n  element.innerHTML += word\n  const height = element.offsetHeight\n  element.innerHTML = innerHTML\n\n  return height > offsetHeight\n}\n\nSubmitIndicator._supportsSpacingProps = true\nexport default SubmitIndicator\n"],"mappings":"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"}
+{"version":3,"file":"SubmitIndicator.js","names":["React","useCallback","useMemo","useRef","useState","classnames","Icon","Space","Tooltip","check","omitSpacingProps","pickSpacingProps","useTranslation","convertJsxToString","useLayoutEffect","window","useEffect","SubmitIndicator","props","className","children","state","successLabel","rest","_objectWithoutProperties","_excluded","translation","childrenRef","willWrap","setWillWrap","key","recalculate","willWordWrap","current","addEventListener","removeEventListener","params","_objectSpread","ariaAttributes","role","ProgressIndicator","indicator_label","dot","_b","createElement","indicator","_extends","targetElement","_span","icon","Fragment","element","ref","word","_element$parentElemen","offsetHeight","innerHTML","clone","cloneNode","parentElement","insertBefore","height","remove","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Form/SubmitIndicator/SubmitIndicator.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react'\nimport classnames from 'classnames'\nimport { Icon, Space, Tooltip } from '../../../../components'\nimport type { SpaceProps } from '../../../../components/Space'\nimport { check } from '../../../../icons'\nimport type { SubmitState } from '../../types'\nimport {\n  omitSpacingProps,\n  pickSpacingProps,\n} from '../../../../components/flex/utils'\nimport { useTranslation } from '../../../../shared'\nimport { convertJsxToString } from '../../../../shared/component-helper'\n\n// SSR warning fix: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\nconst useLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\nexport type Props = {\n  state: SubmitState\n  className?: string\n  successLabel?: string\n  children?: React.ReactNode\n} & SpaceProps\n\nfunction SubmitIndicator(props: Props) {\n  const {\n    className,\n    children,\n    state,\n    successLabel = 'Saved',\n    ...rest\n  } = props\n  const translation = useTranslation()\n  const childrenRef = useRef<HTMLSpanElement>(null)\n  const [willWrap, setWillWrap] = useState(false)\n  const key = useMemo(() => convertJsxToString(children), [children])\n\n  const recalculate = useCallback(() => {\n    setWillWrap(willWordWrap(childrenRef.current, '. . . '))\n  }, [childrenRef])\n\n  useLayoutEffect(() => {\n    if (key) {\n      recalculate()\n\n      window.addEventListener('resize', recalculate)\n      return () => {\n        window.removeEventListener('resize', recalculate)\n      }\n    }\n  }, [key, recalculate])\n\n  const params = {\n    className: classnames(\n      'dnb-forms-submit-indicator',\n      state && `dnb-forms-submit-indicator--state-${state}`,\n      willWrap && 'dnb-forms-submit-indicator--inline-wrap',\n      className\n    ),\n    ...pickSpacingProps(rest),\n  } as SpaceProps\n\n  const ariaAttributes =\n    state === 'pending'\n      ? {\n          role: 'status',\n          'aria-busy': true,\n          'aria-label': translation.ProgressIndicator.indicator_label,\n        }\n      : {\n          'aria-hidden': true,\n        }\n\n  const dot = <b>.</b>\n  const indicator = (\n    <span\n      className=\"dnb-forms-submit-indicator__content\"\n      {...ariaAttributes}\n      {...omitSpacingProps(rest)}\n    >\n      {state === 'success' && (\n        <Tooltip\n          targetElement={\n            <span>\n              <Icon icon={check} />\n            </span>\n          }\n        >\n          {successLabel}\n        </Tooltip>\n      )}\n      {state && state !== 'success' && state !== 'abort' && (\n        <>\n          {dot}\n          {dot}\n          {dot}\n        </>\n      )}\n    </span>\n  )\n\n  return (\n    <Space {...params} element=\"span\">\n      {children && (\n        <span ref={childrenRef} key={key}>\n          {children}\n        </span>\n      )}\n      {indicator}\n    </Space>\n  )\n}\n\nfunction willWordWrap(element: HTMLElement, word: string) {\n  if (!element) {\n    return\n  }\n\n  const { offsetHeight, innerHTML } = element\n\n  const clone = element.cloneNode(true) as HTMLElement\n  element.parentElement?.insertBefore(clone, element)\n\n  clone.innerHTML += word\n  const height = clone.offsetHeight\n  clone.innerHTML = innerHTML\n\n  clone.remove()\n\n  return height > offsetHeight\n}\n\nSubmitIndicator._supportsSpacingProps = true\nexport default SubmitIndicator\n"],"mappings":"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"}

package/es/extensions/forms/Form/SubmitIndicator/style/dnb-form-submit-indicator.scss

@@ -46,12 +46,6 @@
   }
   &--state-success &__content {
     font-size: 1em;
-    // opacity: 0;
-    // font-size: 0;
-    // white-space: nowrap;
-
-    // animation-name: submit-indicator-success;
-    // animation-duration: 5s;
 
     .dnb-icon {
       padding-left: var(--padding-left);

package/es/extensions/forms/Form/index.d.ts

@@ -10,6 +10,7 @@ export { default as MainHeading } from './MainHeading';
 export { default as SubHeading } from './SubHeading';
 export { default as Visibility } from './Visibility';
 export { default as Section } from './Section';
+export { default as Card } from './Card';
 export { default as Isolation } from './Isolation';
 export { default as Snapshot } from './Snapshot';
 export { default as useData } from './data-context/useData';

package/es/extensions/forms/Form/index.js

@@ -10,6 +10,7 @@ export { default as MainHeading } from './MainHeading';
 export { default as SubHeading } from './SubHeading';
 export { default as Visibility } from './Visibility';
 export { default as Section } from './Section';
+export { default as Card } from './Card';
 export { default as Isolation } from './Isolation';
 export { default as Snapshot } from './Snapshot';
 export { default as useData } from './data-context/useData';

package/es/extensions/forms/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FieldProvider","default","Handler","Element","Appearance","SubmitButton","SubmitIndicator","SubmitConfirmation","ButtonRow","MainHeading","SubHeading","Visibility","Section","Isolation","Snapshot","useData","setData","getData","clearData","useValidation","useTranslation","useSnapshot","useLocale","useError","FieldProps"],"sources":["../../../../../src/extensions/forms/Form/index.ts"],"sourcesContent":["import FieldProvider from '../Field/Provider/FieldProvider'\n\nexport { default as Handler } from './Handler'\nexport { default as Element } from './Element'\nexport { default as Appearance } from './Appearance'\nexport { default as SubmitButton } from './SubmitButton'\nexport { default as SubmitIndicator } from './SubmitIndicator'\nexport { default as SubmitConfirmation } from './SubmitConfirmation'\nexport { default as ButtonRow } from './ButtonRow'\nexport { default as MainHeading } from './MainHeading'\nexport { default as SubHeading } from './SubHeading'\nexport { default as Visibility } from './Visibility'\nexport { default as Section } from './Section'\nexport { default as Isolation } from './Isolation'\nexport { default as Snapshot } from './Snapshot'\nexport { default as useData } from './data-context/useData'\nexport { default as setData } from './data-context/setData'\nexport { default as getData } from './data-context/getData'\nexport { default as clearData } from './data-context/clearData'\nexport { default as useValidation } from './data-context/useValidation'\nexport { default as useTranslation } from '../hooks/useTranslation'\nexport { default as useSnapshot } from '../hooks/useSnapshot'\n\n/**\n * Can be removed in v11\n * @deprecated Use `useTranslation` instead\n */\nexport { default as useLocale } from '../hooks/useTranslation'\n\n/**\n * Can be removed in v11\n * @deprecated Use `useValidation` instead\n */\nexport { default as useError } from './data-context/useValidation'\n\n/**\n * Can be removed in v11\n * @deprecated Use `Field.Provider` instead\n */\nexport const FieldProps = FieldProvider\n"],"mappings":"AAAA,OAAOA,aAAa,MAAM,iCAAiC;AAE3D,SAASC,OAAO,IAAIC,OAAO,QAAQ,WAAW;AAC9C,SAASD,OAAO,IAAIE,OAAO,QAAQ,WAAW;AAC9C,SAASF,OAAO,IAAIG,UAAU,QAAQ,cAAc;AACpD,SAASH,OAAO,IAAII,YAAY,QAAQ,gBAAgB;AACxD,SAASJ,OAAO,IAAIK,eAAe,QAAQ,mBAAmB;AAC9D,SAASL,OAAO,IAAIM,kBAAkB,QAAQ,sBAAsB;AACpE,SAASN,OAAO,IAAIO,SAAS,QAAQ,aAAa;AAClD,SAASP,OAAO,IAAIQ,WAAW,QAAQ,eAAe;AACtD,SAASR,OAAO,IAAIS,UAAU,QAAQ,cAAc;AACpD,SAAST,OAAO,IAAIU,UAAU,QAAQ,cAAc;AACpD,SAASV,OAAO,IAAIW,OAAO,QAAQ,WAAW;AAC9C,SAASX,OAAO,IAAIY,SAAS,QAAQ,aAAa;AAClD,SAASZ,OAAO,IAAIa,QAAQ,QAAQ,YAAY;AAChD,SAASb,OAAO,IAAIc,OAAO,QAAQ,wBAAwB;AAC3D,SAASd,OAAO,IAAIe,OAAO,QAAQ,wBAAwB;AAC3D,SAASf,OAAO,IAAIgB,OAAO,QAAQ,wBAAwB;AAC3D,SAAShB,OAAO,IAAIiB,SAAS,QAAQ,0BAA0B;AAC/D,SAASjB,OAAO,IAAIkB,aAAa,QAAQ,8BAA8B;AACvE,SAASlB,OAAO,IAAImB,cAAc,QAAQ,yBAAyB;AACnE,SAASnB,OAAO,IAAIoB,WAAW,QAAQ,sBAAsB;AAM7D,SAASpB,OAAO,IAAIqB,SAAS,QAAQ,yBAAyB;AAM9D,SAASrB,OAAO,IAAIsB,QAAQ,QAAQ,8BAA8B;AAMlE,OAAO,MAAMC,UAAU,GAAGxB,aAAa"}
+{"version":3,"file":"index.js","names":["FieldProvider","default","Handler","Element","Appearance","SubmitButton","SubmitIndicator","SubmitConfirmation","ButtonRow","MainHeading","SubHeading","Visibility","Section","Card","Isolation","Snapshot","useData","setData","getData","clearData","useValidation","useTranslation","useSnapshot","useLocale","useError","FieldProps"],"sources":["../../../../../src/extensions/forms/Form/index.ts"],"sourcesContent":["import FieldProvider from '../Field/Provider/FieldProvider'\n\nexport { default as Handler } from './Handler'\nexport { default as Element } from './Element'\nexport { default as Appearance } from './Appearance'\nexport { default as SubmitButton } from './SubmitButton'\nexport { default as SubmitIndicator } from './SubmitIndicator'\nexport { default as SubmitConfirmation } from './SubmitConfirmation'\nexport { default as ButtonRow } from './ButtonRow'\nexport { default as MainHeading } from './MainHeading'\nexport { default as SubHeading } from './SubHeading'\nexport { default as Visibility } from './Visibility'\nexport { default as Section } from './Section'\nexport { default as Card } from './Card'\nexport { default as Isolation } from './Isolation'\nexport { default as Snapshot } from './Snapshot'\nexport { default as useData } from './data-context/useData'\nexport { default as setData } from './data-context/setData'\nexport { default as getData } from './data-context/getData'\nexport { default as clearData } from './data-context/clearData'\nexport { default as useValidation } from './data-context/useValidation'\nexport { default as useTranslation } from '../hooks/useTranslation'\nexport { default as useSnapshot } from '../hooks/useSnapshot'\n\n/**\n * Can be removed in v11\n * @deprecated Use `useTranslation` instead\n */\nexport { default as useLocale } from '../hooks/useTranslation'\n\n/**\n * Can be removed in v11\n * @deprecated Use `useValidation` instead\n */\nexport { default as useError } from './data-context/useValidation'\n\n/**\n * Can be removed in v11\n * @deprecated Use `Field.Provider` instead\n */\nexport const FieldProps = FieldProvider\n"],"mappings":"AAAA,OAAOA,aAAa,MAAM,iCAAiC;AAE3D,SAASC,OAAO,IAAIC,OAAO,QAAQ,WAAW;AAC9C,SAASD,OAAO,IAAIE,OAAO,QAAQ,WAAW;AAC9C,SAASF,OAAO,IAAIG,UAAU,QAAQ,cAAc;AACpD,SAASH,OAAO,IAAII,YAAY,QAAQ,gBAAgB;AACxD,SAASJ,OAAO,IAAIK,eAAe,QAAQ,mBAAmB;AAC9D,SAASL,OAAO,IAAIM,kBAAkB,QAAQ,sBAAsB;AACpE,SAASN,OAAO,IAAIO,SAAS,QAAQ,aAAa;AAClD,SAASP,OAAO,IAAIQ,WAAW,QAAQ,eAAe;AACtD,SAASR,OAAO,IAAIS,UAAU,QAAQ,cAAc;AACpD,SAAST,OAAO,IAAIU,UAAU,QAAQ,cAAc;AACpD,SAASV,OAAO,IAAIW,OAAO,QAAQ,WAAW;AAC9C,SAASX,OAAO,IAAIY,IAAI,QAAQ,QAAQ;AACxC,SAASZ,OAAO,IAAIa,SAAS,QAAQ,aAAa;AAClD,SAASb,OAAO,IAAIc,QAAQ,QAAQ,YAAY;AAChD,SAASd,OAAO,IAAIe,OAAO,QAAQ,wBAAwB;AAC3D,SAASf,OAAO,IAAIgB,OAAO,QAAQ,wBAAwB;AAC3D,SAAShB,OAAO,IAAIiB,OAAO,QAAQ,wBAAwB;AAC3D,SAASjB,OAAO,IAAIkB,SAAS,QAAQ,0BAA0B;AAC/D,SAASlB,OAAO,IAAImB,aAAa,QAAQ,8BAA8B;AACvE,SAASnB,OAAO,IAAIoB,cAAc,QAAQ,yBAAyB;AACnE,SAASpB,OAAO,IAAIqB,WAAW,QAAQ,sBAAsB;AAM7D,SAASrB,OAAO,IAAIsB,SAAS,QAAQ,yBAAyB;AAM9D,SAAStB,OAAO,IAAIuB,QAAQ,QAAQ,8BAA8B;AAMlE,OAAO,MAAMC,UAAU,GAAGzB,aAAa"}

package/es/extensions/forms/Iterate/Array/ArrayDocs.js

@@ -50,7 +50,7 @@ export const ArrayProperties = {
     type: 'unknown',
     status: 'optional'
   },
-  validator: DataValueWritePropsProperties.validator,
+  onChangeValidator: DataValueWritePropsProperties.onChangeValidator,
   validateInitially: DataValueWritePropsProperties.validateInitially,
   continuousValidation: DataValueWritePropsProperties.continuousValidation,
   containerMode: {

package/es/extensions/forms/Iterate/Array/ArrayDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayDocs.js","names":["DataValueWritePropsProperties","ArrayProperties","value","doc","type","status","path","limit","countPath","countPathTransform","countPathLimit","withoutFlex","animate","placeholder","emptyValue","validator","validateInitially","continuousValidation","containerMode","children","ArrayEvents","onChange"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/ArrayDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { DataValueWritePropsProperties } from '../../hooks/DataValueWritePropsDocs'\n\nexport const ArrayProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The data to iterate over. Alternative you can use the `path` prop.',\n    type: 'array',\n    status: 'optional',\n  },\n  path: {\n    doc: 'A path (JSON Pointer) to the array to iterate over.',\n    type: 'string',\n    status: 'optional',\n  },\n  limit: {\n    doc: 'Limit the number of rendered items to iterate over. Defaults to `undefined`.',\n    type: 'number',\n    status: 'optional',\n  },\n  countPath: {\n    doc: 'A path (JSON Pointer) to the array length.',\n    type: 'string',\n    status: 'optional',\n  },\n  countPathTransform: {\n    doc: 'Will transform the current value before it is displayed.',\n    type: 'function',\n    status: 'optional',\n  },\n  countPathLimit: {\n    doc: 'Will limit the iterate amount by given \"countPathLimit\" value.',\n    type: 'number',\n    status: 'optional',\n  },\n  withoutFlex: {\n    doc: 'When `true` it will omit the Flex.Stack wrapper so it can be used for tables and lists.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'When `true` it will animate the height of the items.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Will be shown if the value or data context value is empty.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  emptyValue: {\n    doc: 'Will be used to compare the value in order to show the placeholder.',\n    type: 'unknown',\n    status: 'optional',\n  },\n  validator: DataValueWritePropsProperties.validator,\n  validateInitially: DataValueWritePropsProperties.validateInitially,\n  continuousValidation: DataValueWritePropsProperties.continuousValidation,\n  containerMode: {\n    doc: 'Defines the container mode for all nested containers. Can be `view`, `edit` or `auto`. When using `auto`, it will automatically open if there is an error in the container. When a new item is added, the item before it will change to `view` mode, if it had no validation errors. Defaults to `auto`.',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'React.Node or a function so you can get the current value and index.',\n    type: ['React.ReactNode', 'function'],\n    status: 'optional',\n  },\n  '[Flex.Stack](/uilib/layout/flex/stack/properties)': {\n    doc: 'All Flex.Stack properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const ArrayEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AACA,SAASA,6BAA6B,QAAQ,qCAAqC;AAEnF,OAAO,MAAMC,eAAqC,GAAG;EACnDC,KAAK,EAAE;IACLC,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,qDAAqD;IAC1DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,kBAAkB,EAAE;IAClBN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDK,cAAc,EAAE;IACdP,GAAG,EAAE,gEAAgE;IACrEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,WAAW,EAAE;IACXR,GAAG,EAAE,yFAAyF;IAC9FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,WAAW,EAAE;IACXV,GAAG,EAAE,4DAA4D;IACjEC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,SAAS,EAAEf,6BAA6B,CAACe,SAAS;EAClDC,iBAAiB,EAAEhB,6BAA6B,CAACgB,iBAAiB;EAClEC,oBAAoB,EAAEjB,6BAA6B,CAACiB,oBAAoB;EACxEC,aAAa,EAAE;IACbf,GAAG,EAAE,0SAA0S;IAC/SC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDc,QAAQ,EAAE;IACRhB,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACD,mDAAmD,EAAE;IACnDF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMe,WAAiC,GAAG;EAC/CC,QAAQ,EAAE;IACRlB,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ArrayDocs.js","names":["DataValueWritePropsProperties","ArrayProperties","value","doc","type","status","path","limit","countPath","countPathTransform","countPathLimit","withoutFlex","animate","placeholder","emptyValue","onChangeValidator","validateInitially","continuousValidation","containerMode","children","ArrayEvents","onChange"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/ArrayDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\nimport { DataValueWritePropsProperties } from '../../hooks/DataValueWritePropsDocs'\n\nexport const ArrayProperties: PropertiesTableProps = {\n  value: {\n    doc: 'The data to iterate over. Alternative you can use the `path` prop.',\n    type: 'array',\n    status: 'optional',\n  },\n  path: {\n    doc: 'A path (JSON Pointer) to the array to iterate over.',\n    type: 'string',\n    status: 'optional',\n  },\n  limit: {\n    doc: 'Limit the number of rendered items to iterate over. Defaults to `undefined`.',\n    type: 'number',\n    status: 'optional',\n  },\n  countPath: {\n    doc: 'A path (JSON Pointer) to the array length.',\n    type: 'string',\n    status: 'optional',\n  },\n  countPathTransform: {\n    doc: 'Will transform the current value before it is displayed.',\n    type: 'function',\n    status: 'optional',\n  },\n  countPathLimit: {\n    doc: 'Will limit the iterate amount by given \"countPathLimit\" value.',\n    type: 'number',\n    status: 'optional',\n  },\n  withoutFlex: {\n    doc: 'When `true` it will omit the Flex.Stack wrapper so it can be used for tables and lists.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  animate: {\n    doc: 'When `true` it will animate the height of the items.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Will be shown if the value or data context value is empty.',\n    type: 'React.Node',\n    status: 'optional',\n  },\n  emptyValue: {\n    doc: 'Will be used to compare the value in order to show the placeholder.',\n    type: 'unknown',\n    status: 'optional',\n  },\n  onChangeValidator: DataValueWritePropsProperties.onChangeValidator,\n  validateInitially: DataValueWritePropsProperties.validateInitially,\n  continuousValidation: DataValueWritePropsProperties.continuousValidation,\n  containerMode: {\n    doc: 'Defines the container mode for all nested containers. Can be `view`, `edit` or `auto`. When using `auto`, it will automatically open if there is an error in the container. When a new item is added, the item before it will change to `view` mode, if it had no validation errors. Defaults to `auto`.',\n    type: 'string',\n    status: 'optional',\n  },\n  children: {\n    doc: 'React.Node or a function so you can get the current value and index.',\n    type: ['React.ReactNode', 'function'],\n    status: 'optional',\n  },\n  '[Flex.Stack](/uilib/layout/flex/stack/properties)': {\n    doc: 'All Flex.Stack properties.',\n    type: 'Various',\n    status: 'optional',\n  },\n}\n\nexport const ArrayEvents: PropertiesTableProps = {\n  onChange: {\n    doc: 'Will be called when a value of a field was changed by the user, with the data set (including the changed value) as argument.',\n    type: 'function',\n    status: 'optional',\n  },\n}\n"],"mappings":"AACA,SAASA,6BAA6B,QAAQ,qCAAqC;AAEnF,OAAO,MAAMC,eAAqC,GAAG;EACnDC,KAAK,EAAE;IACLC,GAAG,EAAE,oEAAoE;IACzEC,IAAI,EAAE,OAAO;IACbC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,qDAAqD;IAC1DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,SAAS,EAAE;IACTL,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,kBAAkB,EAAE;IAClBN,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDK,cAAc,EAAE;IACdP,GAAG,EAAE,gEAAgE;IACrEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,WAAW,EAAE;IACXR,GAAG,EAAE,yFAAyF;IAC9FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,OAAO,EAAE;IACPT,GAAG,EAAE,sDAAsD;IAC3DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,WAAW,EAAE;IACXV,GAAG,EAAE,4DAA4D;IACjEC,IAAI,EAAE,YAAY;IAClBC,MAAM,EAAE;EACV,CAAC;EACDS,UAAU,EAAE;IACVX,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,iBAAiB,EAAEf,6BAA6B,CAACe,iBAAiB;EAClEC,iBAAiB,EAAEhB,6BAA6B,CAACgB,iBAAiB;EAClEC,oBAAoB,EAAEjB,6BAA6B,CAACiB,oBAAoB;EACxEC,aAAa,EAAE;IACbf,GAAG,EAAE,0SAA0S;IAC/SC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDc,QAAQ,EAAE;IACRhB,GAAG,EAAE,sEAAsE;IAC3EC,IAAI,EAAE,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACrCC,MAAM,EAAE;EACV,CAAC;EACD,mDAAmD,EAAE;IACnDF,GAAG,EAAE,4BAA4B;IACjCC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV;AACF,CAAC;AAED,OAAO,MAAMe,WAAiC,GAAG;EAC/CC,QAAQ,EAAE;IACRlB,GAAG,EAAE,8HAA8H;IACnIC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/es/extensions/forms/Iterate/Array/types.d.ts

@@ -10,7 +10,7 @@ export type Props = Omit<FlexContainerProps, keyof Omit<React.HTMLAttributes<HTM
     limit?: number;
     countPath?: Path;
     countPathLimit?: number;
-    validator?: Validator<Value>;
+    onChangeValidator?: Validator<Value>;
     withoutFlex?: boolean;
     animate?: boolean;
     placeholder?: React.ReactNode;

package/es/extensions/forms/Iterate/Array/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/extensions/forms/Iterate/Array/types.ts"],"sourcesContent":["import { Path, UseFieldProps, Validator } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\n\nexport type ContainerMode = 'view' | 'edit' | 'auto'\nexport type Value = Array<unknown | Record<string, unknown>>\nexport type ElementChild =\n  | React.ReactNode\n  | ((value: any, index: number) => React.ReactNode)\nexport type Props = Omit<\n  FlexContainerProps,\n  keyof Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>\n> &\n  Pick<\n    UseFieldProps<Value, undefined | Value>,\n    | 'value'\n    | 'defaultValue'\n    | 'emptyValue'\n    | 'onChange'\n    | 'validateInitially'\n    | 'continuousValidation'\n  > & {\n    children: ElementChild | Array<ElementChild>\n    path?: Path\n    limit?: number\n    countPath?: Path\n    countPathLimit?: number\n    validator?: Validator<Value>\n    withoutFlex?: boolean\n    animate?: boolean\n    placeholder?: React.ReactNode\n    containerMode?: ContainerMode\n    countPathTransform?: (params: { value: any; index: number }) => any\n  }\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../../../src/extensions/forms/Iterate/Array/types.ts"],"sourcesContent":["import { Path, UseFieldProps, Validator } from '../../types'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\n\nexport type ContainerMode = 'view' | 'edit' | 'auto'\nexport type Value = Array<unknown | Record<string, unknown>>\nexport type ElementChild =\n  | React.ReactNode\n  | ((value: any, index: number) => React.ReactNode)\nexport type Props = Omit<\n  FlexContainerProps,\n  keyof Omit<React.HTMLAttributes<HTMLDivElement>, 'className'>\n> &\n  Pick<\n    UseFieldProps<Value, undefined | Value>,\n    | 'value'\n    | 'defaultValue'\n    | 'emptyValue'\n    | 'onChange'\n    | 'validateInitially'\n    | 'continuousValidation'\n  > & {\n    children: ElementChild | Array<ElementChild>\n    path?: Path\n    limit?: number\n    countPath?: Path\n    countPathLimit?: number\n    onChangeValidator?: Validator<Value>\n    withoutFlex?: boolean\n    animate?: boolean\n    placeholder?: React.ReactNode\n    containerMode?: ContainerMode\n    countPathTransform?: (params: { value: any; index: number }) => any\n  }\n"],"mappings":""}

package/es/extensions/forms/Value/Provider/useValueProvider.d.ts

@@ -18,6 +18,7 @@ declare function useValueProvider(props?: Omit<ValueProviderProps, 'children'>):
         placeholder?: import("react").ReactNode;
         inline?: boolean;
         maxWidth?: "small" | "auto" | "medium" | "large";
+        labelSrOnly?: boolean;
         transformIn?: (external: unknown) => unknown;
         toInput?: (external: unknown) => unknown;
         fromExternal?: (external: unknown) => unknown;

package/es/extensions/forms/Value/SummaryList/SummaryList.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DlAllProps } from '../../../../elements/Dl';
 import { ValueProps } from '../../types';
-export type Props = Omit<DlAllProps, 'label' | 'children'> & {
+export type Props = Omit<DlAllProps, 'label' | 'labelSrOnly' | 'children'> & {
     children: React.ReactNode;
     transformLabel?: ValueProps['transformLabel'];
     inheritVisibility?: ValueProps['inheritVisibility'];

package/es/extensions/forms/Value/SummaryList/SummaryList.js

@@ -28,7 +28,8 @@ function SummaryList(props) {
   } = useVerifyChildren({
     children,
     message: 'Value.SummaryList accepts only Value.* components!',
-    ignoreTypes: ['ValueBlock']
+    messageInfo: props,
+    ignoreTypes: ['Visibility', 'ValueBlock']
   });
   return React.createElement(SummaryListContext.Provider, {
     value: {

package/es/extensions/forms/Value/SummaryList/SummaryList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.js","names":["React","classnames","removeUndefinedProps","SummaryListContext","Dl","ValueProvider","useVerifyChildren","SummaryList","props","className","children","layout","transformLabel","inheritVisibility","inheritLabel","rest","_objectWithoutProperties","_excluded","valueProviderProps","verifyChild","message","ignoreTypes","createElement","Provider","value","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/SummaryList/SummaryList.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { removeUndefinedProps } from '../../../../shared/component-helper'\nimport SummaryListContext from './SummaryListContext'\nimport Dl, { DlAllProps } from '../../../../elements/Dl'\nimport ValueProvider from '../Provider/ValueProvider'\nimport { ValueProps } from '../../types'\nimport { useVerifyChildren } from './useVerifyChildren'\n\nexport type Props = Omit<DlAllProps, 'label' | 'children'> & {\n  children: React.ReactNode\n  transformLabel?: ValueProps['transformLabel']\n  inheritVisibility?: ValueProps['inheritVisibility']\n  inheritLabel?: ValueProps['inheritLabel']\n}\n\nfunction SummaryList(props: Props) {\n  const {\n    className,\n    children,\n    layout,\n    transformLabel,\n    inheritVisibility,\n    inheritLabel,\n    ...rest\n  } = props\n\n  const valueProviderProps = removeUndefinedProps({\n    transformLabel,\n    inheritVisibility,\n    inheritLabel,\n  })\n\n  const { verifyChild } = useVerifyChildren({\n    children,\n    message: 'Value.SummaryList accepts only Value.* components!',\n    ignoreTypes: ['ValueBlock'],\n  })\n\n  return (\n    <SummaryListContext.Provider value={{ layout, verifyChild }}>\n      <Dl\n        className={classnames('dnb-forms-summary-list', className)}\n        layout={layout}\n        {...rest}\n      >\n        <ValueProvider {...valueProviderProps}>{children}</ValueProvider>\n      </Dl>\n    </SummaryListContext.Provider>\n  )\n}\n\nSummaryList._supportsSpacingProps = true\n\nexport default SummaryList\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,oBAAoB,QAAQ,qCAAqC;AAC1E,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,EAAE,MAAsB,yBAAyB;AACxD,OAAOC,aAAa,MAAM,2BAA2B;AAErD,SAASC,iBAAiB,QAAQ,qBAAqB;AASvD,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAM;MACJC,SAAS;MACTC,QAAQ;MACRC,MAAM;MACNC,cAAc;MACdC,iBAAiB;MACjBC;IAEF,CAAC,GAAGN,KAAK;IADJO,IAAI,GAAAC,wBAAA,CACLR,KAAK,EAAAS,SAAA;EAET,MAAMC,kBAAkB,GAAGhB,oBAAoB,CAAC;IAC9CU,cAAc;IACdC,iBAAiB;IACjBC;EACF,CAAC,CAAC;EAEF,MAAM;IAAEK;EAAY,CAAC,GAAGb,iBAAiB,CAAC;IACxCI,QAAQ;IACRU,OAAO,EAAE,oDAAoD;IAC7DC,WAAW,EAAE,CAAC,YAAY;EAC5B,CAAC,CAAC;EAEF,OACErB,KAAA,CAAAsB,aAAA,CAACnB,kBAAkB,CAACoB,QAAQ;IAACC,KAAK,EAAE;MAAEb,MAAM;MAAEQ;IAAY;EAAE,GAC1DnB,KAAA,CAAAsB,aAAA,CAAClB,EAAE,EAAAqB,QAAA;IACDhB,SAAS,EAAER,UAAU,CAAC,wBAAwB,EAAEQ,SAAS,CAAE;IAC3DE,MAAM,EAAEA;EAAO,GACXI,IAAI,GAERf,KAAA,CAAAsB,aAAA,CAACjB,aAAa,EAAKa,kBAAkB,EAAGR,QAAwB,CAC9D,CACuB,CAAC;AAElC;AAEAH,WAAW,CAACmB,qBAAqB,GAAG,IAAI;AAExC,eAAenB,WAAW"}
+{"version":3,"file":"SummaryList.js","names":["React","classnames","removeUndefinedProps","SummaryListContext","Dl","ValueProvider","useVerifyChildren","SummaryList","props","className","children","layout","transformLabel","inheritVisibility","inheritLabel","rest","_objectWithoutProperties","_excluded","valueProviderProps","verifyChild","message","messageInfo","ignoreTypes","createElement","Provider","value","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/SummaryList/SummaryList.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport { removeUndefinedProps } from '../../../../shared/component-helper'\nimport SummaryListContext from './SummaryListContext'\nimport Dl, { DlAllProps } from '../../../../elements/Dl'\nimport ValueProvider from '../Provider/ValueProvider'\nimport { ValueProps } from '../../types'\nimport { useVerifyChildren } from './useVerifyChildren'\n\nexport type Props = Omit<\n  DlAllProps,\n  'label' | 'labelSrOnly' | 'children'\n> & {\n  children: React.ReactNode\n  transformLabel?: ValueProps['transformLabel']\n  inheritVisibility?: ValueProps['inheritVisibility']\n  inheritLabel?: ValueProps['inheritLabel']\n}\n\nfunction SummaryList(props: Props) {\n  const {\n    className,\n    children,\n    layout,\n    transformLabel,\n    inheritVisibility,\n    inheritLabel,\n    ...rest\n  } = props\n\n  const valueProviderProps = removeUndefinedProps({\n    transformLabel,\n    inheritVisibility,\n    inheritLabel,\n  })\n\n  const { verifyChild } = useVerifyChildren({\n    children,\n    message: 'Value.SummaryList accepts only Value.* components!',\n    messageInfo: props,\n    ignoreTypes: ['Visibility', 'ValueBlock'],\n  })\n\n  return (\n    <SummaryListContext.Provider value={{ layout, verifyChild }}>\n      <Dl\n        className={classnames('dnb-forms-summary-list', className)}\n        layout={layout}\n        {...rest}\n      >\n        <ValueProvider {...valueProviderProps}>{children}</ValueProvider>\n      </Dl>\n    </SummaryListContext.Provider>\n  )\n}\n\nSummaryList._supportsSpacingProps = true\n\nexport default SummaryList\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,oBAAoB,QAAQ,qCAAqC;AAC1E,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,EAAE,MAAsB,yBAAyB;AACxD,OAAOC,aAAa,MAAM,2BAA2B;AAErD,SAASC,iBAAiB,QAAQ,qBAAqB;AAYvD,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAM;MACJC,SAAS;MACTC,QAAQ;MACRC,MAAM;MACNC,cAAc;MACdC,iBAAiB;MACjBC;IAEF,CAAC,GAAGN,KAAK;IADJO,IAAI,GAAAC,wBAAA,CACLR,KAAK,EAAAS,SAAA;EAET,MAAMC,kBAAkB,GAAGhB,oBAAoB,CAAC;IAC9CU,cAAc;IACdC,iBAAiB;IACjBC;EACF,CAAC,CAAC;EAEF,MAAM;IAAEK;EAAY,CAAC,GAAGb,iBAAiB,CAAC;IACxCI,QAAQ;IACRU,OAAO,EAAE,oDAAoD;IAC7DC,WAAW,EAAEb,KAAK;IAClBc,WAAW,EAAE,CAAC,YAAY,EAAE,YAAY;EAC1C,CAAC,CAAC;EAEF,OACEtB,KAAA,CAAAuB,aAAA,CAACpB,kBAAkB,CAACqB,QAAQ;IAACC,KAAK,EAAE;MAAEd,MAAM;MAAEQ;IAAY;EAAE,GAC1DnB,KAAA,CAAAuB,aAAA,CAACnB,EAAE,EAAAsB,QAAA;IACDjB,SAAS,EAAER,UAAU,CAAC,wBAAwB,EAAEQ,SAAS,CAAE;IAC3DE,MAAM,EAAEA;EAAO,GACXI,IAAI,GAERf,KAAA,CAAAuB,aAAA,CAAClB,aAAa,EAAKa,kBAAkB,EAAGR,QAAwB,CAC9D,CACuB,CAAC;AAElC;AAEAH,WAAW,CAACoB,qBAAqB,GAAG,IAAI;AAExC,eAAepB,WAAW"}

package/es/extensions/forms/Value/SummaryList/useVerifyChildren.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-export declare function useVerifyChildren({ children, message, ignoreTypes, }: {
+export declare function useVerifyChildren({ children, message, messageInfo, ignoreTypes, }: {
     ignoreTypes?: Array<string>;
+    messageInfo?: unknown;
     children: React.ReactNode;
     message: string;
 }): {

package/es/extensions/forms/Value/SummaryList/useVerifyChildren.js

@@ -5,6 +5,7 @@ import { warn } from '../../../../shared/helpers';
 export function useVerifyChildren({
   children,
   message,
+  messageInfo,
   ignoreTypes
 }) {
   const verifyCount = useRef(0);
@@ -16,7 +17,7 @@ export function useVerifyChildren({
     if (process.env.NODE_ENV !== 'production') {
       const count = countChildren(children, ignoreTypes);
       if (count > 0 && count > verifyCount.current) {
-        warn(message);
+        warn(message, messageInfo);
       }
     }
   }, [children, message]);

package/es/extensions/forms/Value/SummaryList/useVerifyChildren.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVerifyChildren.js","names":["Children","Fragment","isValidElement","useCallback","useEffect","useRef","warn","useVerifyChildren","children","message","ignoreTypes","verifyCount","current","verifyChild","process","env","NODE_ENV","count","countChildren","toArray","reduce","child","_child$type","_child$props","includes","type"],"sources":["../../../../../../src/extensions/forms/Value/SummaryList/useVerifyChildren.ts"],"sourcesContent":["import {\n  Children,\n  Fragment,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport { warn } from '../../../../shared/helpers'\n\nexport function useVerifyChildren({\n  children,\n  message,\n  ignoreTypes,\n}: {\n  ignoreTypes?: Array<string>\n  children: React.ReactNode\n  message: string\n}) {\n  const verifyCount = useRef(0)\n  verifyCount.current = 0\n  const verifyChild = useCallback(() => {\n    verifyCount.current += 1\n  }, [])\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') {\n      const count = countChildren(children, ignoreTypes)\n      if (count > 0 && count > verifyCount.current) {\n        warn(message)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, message])\n\n  return { verifyChild }\n}\n\n/**\n * Count the children of a React node,\n * without counting React.Fragment or primitive nodes.\n */\nexport const countChildren = (\n  children: React.ReactNode,\n  ignoreTypes?: Array<string>,\n  count = 0\n) => {\n  return Children.toArray(children).reduce((count: number, child) => {\n    if (child?.['type'] === Fragment) {\n      return countChildren(child['props']?.children, ignoreTypes, count)\n    }\n\n    return (\n      count +\n      (isValidElement(child) &&\n      !ignoreTypes?.includes(child?.type?.['name'])\n        ? 1\n        : 0)\n    )\n  }, count)\n}\n"],"mappings":";;AAAA,SACEA,QAAQ,EACRC,QAAQ,EACRC,cAAc,EACdC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,OAAO,SAASC,iBAAiBA,CAAC;EAChCC,QAAQ;EACRC,OAAO;EACPC;AAKF,CAAC,EAAE;EACD,MAAMC,WAAW,GAAGN,MAAM,CAAC,CAAC,CAAC;EAC7BM,WAAW,CAACC,OAAO,GAAG,CAAC;EACvB,MAAMC,WAAW,GAAGV,WAAW,CAAC,MAAM;IACpCQ,WAAW,CAACC,OAAO,IAAI,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAENR,SAAS,CAAC,MAAM;IACd,IAAIU,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;MACzC,MAAMC,KAAK,GAAGC,aAAa,CAACV,QAAQ,EAAEE,WAAW,CAAC;MAClD,IAAIO,KAAK,GAAG,CAAC,IAAIA,KAAK,GAAGN,WAAW,CAACC,OAAO,EAAE;QAC5CN,IAAI,CAACG,OAAO,CAAC;MACf;IACF;EAEF,CAAC,EAAE,CAACD,QAAQ,EAAEC,OAAO,CAAC,CAAC;EAEvB,OAAO;IAAEI;EAAY,CAAC;AACxB;AAMA,OAAO,MAAMK,aAAa,GAAGA,CAC3BV,QAAyB,EACzBE,WAA2B,EAC3BO,KAAK,GAAG,CAAC,KACN;EACH,OAAOjB,QAAQ,CAACmB,OAAO,CAACX,QAAQ,CAAC,CAACY,MAAM,CAAC,CAACH,KAAa,EAAEI,KAAK,KAAK;IAAA,IAAAC,WAAA;IACjE,IAAI,CAAAD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,MAAM,CAAC,MAAKpB,QAAQ,EAAE;MAAA,IAAAsB,YAAA;MAChC,OAAOL,aAAa,EAAAK,YAAA,GAACF,KAAK,CAAC,OAAO,CAAC,cAAAE,YAAA,uBAAdA,YAAA,CAAgBf,QAAQ,EAAEE,WAAW,EAAEO,KAAK,CAAC;IACpE;IAEA,OACEA,KAAK,IACJf,cAAc,CAACmB,KAAK,CAAC,IACtB,EAACX,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAEc,QAAQ,CAACH,KAAK,aAALA,KAAK,wBAAAC,WAAA,GAALD,KAAK,CAAEI,IAAI,cAAAH,WAAA,uBAAXA,WAAA,CAAc,MAAM,CAAC,CAAC,IACzC,CAAC,GACD,CAAC,CAAC;EAEV,CAAC,EAAEL,KAAK,CAAC;AACX,CAAC"}
+{"version":3,"file":"useVerifyChildren.js","names":["Children","Fragment","isValidElement","useCallback","useEffect","useRef","warn","useVerifyChildren","children","message","messageInfo","ignoreTypes","verifyCount","current","verifyChild","process","env","NODE_ENV","count","countChildren","toArray","reduce","child","_child$type","_child$props","includes","type"],"sources":["../../../../../../src/extensions/forms/Value/SummaryList/useVerifyChildren.ts"],"sourcesContent":["import {\n  Children,\n  Fragment,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react'\nimport { warn } from '../../../../shared/helpers'\n\nexport function useVerifyChildren({\n  children,\n  message,\n  messageInfo,\n  ignoreTypes,\n}: {\n  ignoreTypes?: Array<string>\n  messageInfo?: unknown\n  children: React.ReactNode\n  message: string\n}) {\n  const verifyCount = useRef(0)\n  verifyCount.current = 0\n  const verifyChild = useCallback(() => {\n    verifyCount.current += 1\n  }, [])\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== 'production') {\n      const count = countChildren(children, ignoreTypes)\n      if (count > 0 && count > verifyCount.current) {\n        warn(message, messageInfo)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [children, message])\n\n  return { verifyChild }\n}\n\n/**\n * Count the children of a React node,\n * without counting React.Fragment or primitive nodes.\n */\nexport const countChildren = (\n  children: React.ReactNode,\n  ignoreTypes?: Array<string>,\n  count = 0\n) => {\n  return Children.toArray(children).reduce((count: number, child) => {\n    if (child?.['type'] === Fragment) {\n      return countChildren(child['props']?.children, ignoreTypes, count)\n    }\n\n    return (\n      count +\n      (isValidElement(child) &&\n      !ignoreTypes?.includes(child?.type?.['name'])\n        ? 1\n        : 0)\n    )\n  }, count)\n}\n"],"mappings":";;AAAA,SACEA,QAAQ,EACRC,QAAQ,EACRC,cAAc,EACdC,WAAW,EACXC,SAAS,EACTC,MAAM,QACD,OAAO;AACd,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,OAAO,SAASC,iBAAiBA,CAAC;EAChCC,QAAQ;EACRC,OAAO;EACPC,WAAW;EACXC;AAMF,CAAC,EAAE;EACD,MAAMC,WAAW,GAAGP,MAAM,CAAC,CAAC,CAAC;EAC7BO,WAAW,CAACC,OAAO,GAAG,CAAC;EACvB,MAAMC,WAAW,GAAGX,WAAW,CAAC,MAAM;IACpCS,WAAW,CAACC,OAAO,IAAI,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAENT,SAAS,CAAC,MAAM;IACd,IAAIW,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;MACzC,MAAMC,KAAK,GAAGC,aAAa,CAACX,QAAQ,EAAEG,WAAW,CAAC;MAClD,IAAIO,KAAK,GAAG,CAAC,IAAIA,KAAK,GAAGN,WAAW,CAACC,OAAO,EAAE;QAC5CP,IAAI,CAACG,OAAO,EAAEC,WAAW,CAAC;MAC5B;IACF;EAEF,CAAC,EAAE,CAACF,QAAQ,EAAEC,OAAO,CAAC,CAAC;EAEvB,OAAO;IAAEK;EAAY,CAAC;AACxB;AAMA,OAAO,MAAMK,aAAa,GAAGA,CAC3BX,QAAyB,EACzBG,WAA2B,EAC3BO,KAAK,GAAG,CAAC,KACN;EACH,OAAOlB,QAAQ,CAACoB,OAAO,CAACZ,QAAQ,CAAC,CAACa,MAAM,CAAC,CAACH,KAAa,EAAEI,KAAK,KAAK;IAAA,IAAAC,WAAA;IACjE,IAAI,CAAAD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,MAAM,CAAC,MAAKrB,QAAQ,EAAE;MAAA,IAAAuB,YAAA;MAChC,OAAOL,aAAa,EAAAK,YAAA,GAACF,KAAK,CAAC,OAAO,CAAC,cAAAE,YAAA,uBAAdA,YAAA,CAAgBhB,QAAQ,EAAEG,WAAW,EAAEO,KAAK,CAAC;IACpE;IAEA,OACEA,KAAK,IACJhB,cAAc,CAACoB,KAAK,CAAC,IACtB,EAACX,WAAW,aAAXA,WAAW,eAAXA,WAAW,CAAEc,QAAQ,CAACH,KAAK,aAALA,KAAK,wBAAAC,WAAA,GAALD,KAAK,CAAEI,IAAI,cAAAH,WAAA,uBAAXA,WAAA,CAAc,MAAM,CAAC,CAAC,IACzC,CAAC,GACD,CAAC,CAAC;EAEV,CAAC,EAAEL,KAAK,CAAC;AACX,CAAC"}

package/es/extensions/forms/Value/ValueDocs.js

@@ -14,6 +14,11 @@ export const ValueProperties = {
     type: 'string',
     status: 'optional'
   },
+  labelSrOnly: {
+    doc: 'Use `true` to make the label only readable by screen readers.',
+    type: 'boolean',
+    status: 'optional'
+  },
   transformLabel: {
     doc: 'Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.',
     type: 'function',

package/es/extensions/forms/Value/ValueDocs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ValueDocs.js","names":["ValueProperties","value","doc","type","status","defaultValue","label","transformLabel","inheritLabel","inheritVisibility","showEmpty","placeholder","path","inline","maxWidth","transformIn"],"sources":["../../../../../src/extensions/forms/Value/ValueDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../shared/types'\n\nexport const ValueProperties: PropertiesTableProps = {\n  value: {\n    doc: 'Value for the value component. Will take precedence over the path value given in the data context.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  defaultValue: {\n    doc: 'Default value for the value component. Will not take precedence over the path value given in the data context.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Field label to show above the displayed value.',\n    type: 'string',\n    status: 'optional',\n  },\n  transformLabel: {\n    doc: 'Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.',\n    type: 'function',\n    status: 'optional',\n  },\n  inheritLabel: {\n    doc: 'Use `true` to inherit the label from a visible (rendered) field with the same path.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  inheritVisibility: {\n    doc: 'Use `true` to inherit the visibility from a field with the same path. You can find more info in the [Value section](/uilib/extensions/forms/Value/#inherit-visibility-from-fields-based-on-path).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  showEmpty: {\n    doc: 'Shows the value even if it is empty.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Text showing in place of the value if no value is given.',\n    type: 'string',\n    status: 'optional',\n  },\n  path: {\n    doc: 'JSON Pointer for where the data for this input is located in the source dataset.',\n    type: 'string',\n    status: 'optional',\n  },\n  inline: {\n    doc: 'For showing the value inline (not as a block element).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  maxWidth: {\n    doc: 'Use `auto` for no max-width (use browser default), `small`, `medium` or `large` for predefined standard max widths. Defaults to `large`.',\n    type: 'string',\n    status: 'optional',\n  },\n  transformIn: {\n    doc: 'Transforms the `value` before its displayed in the value component.',\n    type: 'function',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,KAAK,EAAE;IACLC,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDC,YAAY,EAAE;IACZH,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,cAAc,EAAE;IACdL,GAAG,EAAE,0KAA0K;IAC/KC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDI,YAAY,EAAE;IACZN,GAAG,EAAE,qFAAqF;IAC1FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,iBAAiB,EAAE;IACjBP,GAAG,EAAE,mMAAmM;IACxMC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,SAAS,EAAE;IACTR,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,WAAW,EAAE;IACXT,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,IAAI,EAAE;IACJV,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,MAAM,EAAE;IACNX,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDU,QAAQ,EAAE;IACRZ,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDW,WAAW,EAAE;IACXb,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ValueDocs.js","names":["ValueProperties","value","doc","type","status","defaultValue","label","labelSrOnly","transformLabel","inheritLabel","inheritVisibility","showEmpty","placeholder","path","inline","maxWidth","transformIn"],"sources":["../../../../../src/extensions/forms/Value/ValueDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../shared/types'\n\nexport const ValueProperties: PropertiesTableProps = {\n  value: {\n    doc: 'Value for the value component. Will take precedence over the path value given in the data context.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  defaultValue: {\n    doc: 'Default value for the value component. Will not take precedence over the path value given in the data context.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Field label to show above the displayed value.',\n    type: 'string',\n    status: 'optional',\n  },\n  labelSrOnly: {\n    doc: 'Use `true` to make the label only readable by screen readers.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  transformLabel: {\n    doc: 'Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.',\n    type: 'function',\n    status: 'optional',\n  },\n  inheritLabel: {\n    doc: 'Use `true` to inherit the label from a visible (rendered) field with the same path.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  inheritVisibility: {\n    doc: 'Use `true` to inherit the visibility from a field with the same path. You can find more info in the [Value section](/uilib/extensions/forms/Value/#inherit-visibility-from-fields-based-on-path).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  showEmpty: {\n    doc: 'Shows the value even if it is empty.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  placeholder: {\n    doc: 'Text showing in place of the value if no value is given.',\n    type: 'string',\n    status: 'optional',\n  },\n  path: {\n    doc: 'JSON Pointer for where the data for this input is located in the source dataset.',\n    type: 'string',\n    status: 'optional',\n  },\n  inline: {\n    doc: 'For showing the value inline (not as a block element).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  maxWidth: {\n    doc: 'Use `auto` for no max-width (use browser default), `small`, `medium` or `large` for predefined standard max widths. Defaults to `large`.',\n    type: 'string',\n    status: 'optional',\n  },\n  transformIn: {\n    doc: 'Transforms the `value` before its displayed in the value component.',\n    type: 'function',\n    status: 'optional',\n  },\n  '[Space](/uilib/layout/space/properties)': {\n    doc: 'Spacing properties like `top` or `bottom` are supported.',\n    type: ['string', 'object'],\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,KAAK,EAAE;IACLC,GAAG,EAAE,oGAAoG;IACzGC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDC,YAAY,EAAE;IACZH,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDE,KAAK,EAAE;IACLJ,GAAG,EAAE,gDAAgD;IACrDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,cAAc,EAAE;IACdN,GAAG,EAAE,0KAA0K;IAC/KC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACDK,YAAY,EAAE;IACZP,GAAG,EAAE,qFAAqF;IAC1FC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,iBAAiB,EAAE;IACjBR,GAAG,EAAE,mMAAmM;IACxMC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDQ,WAAW,EAAE;IACXV,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,IAAI,EAAE;IACJX,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,MAAM,EAAE;IACNZ,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDW,QAAQ,EAAE;IACRb,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDY,WAAW,EAAE;IACXd,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV,CAAC;EACD,yCAAyC,EAAE;IACzCF,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV;AACF,CAAC"}

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

@@ -27,6 +27,7 @@ function ValueBlock(props) {
   const {
     className,
     label: labelProp,
+    labelSrOnly,
     transformLabel = label => label,
     inline,
     maxWidth = props.composition ? props.maxWidth : 'large',
@@ -70,7 +71,7 @@ function ValueBlock(props) {
           isNested: true
         })
       }, React.createElement(Item, null, React.createElement(Dt, {
-        className: "dnb-forms-value-block__label"
+        className: 'dnb-forms-value-block__label' + (!label || labelSrOnly ? " dnb-sr-only" : "")
       }, 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", {
@@ -86,7 +87,8 @@ function ValueBlock(props) {
     }, pickSpacingProps(props)), label && React.createElement(FormLabel, {
       element: "strong",
       className: "dnb-forms-value-block__label",
-      labelDirection: inline ? 'horizontal' : 'vertical'
+      labelDirection: inline ? 'horizontal' : 'vertical',
+      srOnly: labelSrOnly
     }, label), children ? React.createElement("span", {
       className: defaultClass
     }, children) : React.createElement("span", {

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","prerenderFieldProps","index","iterateIndex","className","label","labelProp","transformLabel","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","replace","String","transformLabelParameters","ref","useNotInSummaryList","hide","createElement","content","compositionClass","defaultClass","Item","isNested","layout","_span","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/IterateItemContext'\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 { prerenderFieldProps } = useContext(DataContext) || {}\n  const { index: iterateIndex } = useContext(IterateElementContext) || {}\n\n  const {\n    className,\n    label: labelProp,\n    transformLabel = (label: Props['label']) => label,\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\n    let label = labelProp\n\n    if (iterateIndex !== undefined) {\n      label = convertJsxToString(labelProp).replace(\n        '{itemNo}',\n        String(iterateIndex + 1)\n      )\n    }\n\n    return transformLabel(label, transformLabelParameters)\n  }, [inline, iterateIndex, labelProp, transformLabel])\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(valueBlockContext?.composition ? null : ref, label)\n\n  const hide =\n    prerenderFieldProps ||\n    ((children === undefined || children === null || children === false) &&\n      !showEmpty &&\n      !placeholder)\n\n  if (hide) {\n    return <></>\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  const defaultClass = classnames(\n    'dnb-forms-value-block__content',\n    `dnb-forms-value-block__content--gap-${gap === false ? 'none' : gap}`\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 = <span className={defaultClass}>{children}</span> ?? (\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 className={defaultClass}>{children}</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 className={defaultClass}>{children}</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\nconst transformLabelParameters = {\n  convertJsxToString,\n} as unknown as Parameters<Props['transformLabel']>[1]\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","prerenderFieldProps","index","iterateIndex","className","label","labelProp","labelSrOnly","transformLabel","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","replace","String","transformLabelParameters","ref","useNotInSummaryList","hide","createElement","content","compositionClass","defaultClass","Item","isNested","layout","_span","Provider","value","_objectSpread","_extends","element","labelDirection","srOnly","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/IterateItemContext'\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 { prerenderFieldProps } = useContext(DataContext) || {}\n  const { index: iterateIndex } = useContext(IterateElementContext) || {}\n\n  const {\n    className,\n    label: labelProp,\n    labelSrOnly,\n    transformLabel = (label: Props['label']) => label,\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\n    let label = labelProp\n\n    if (iterateIndex !== undefined) {\n      label = convertJsxToString(labelProp).replace(\n        '{itemNo}',\n        String(iterateIndex + 1)\n      )\n    }\n\n    return transformLabel(label, transformLabelParameters)\n  }, [inline, iterateIndex, labelProp, transformLabel])\n\n  const ref = useRef<HTMLElement>(null)\n  useNotInSummaryList(valueBlockContext?.composition ? null : ref, label)\n\n  const hide =\n    prerenderFieldProps ||\n    ((children === undefined || children === null || children === false) &&\n      !showEmpty &&\n      !placeholder)\n\n  if (hide) {\n    return <></>\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  const defaultClass = classnames(\n    'dnb-forms-value-block__content',\n    `dnb-forms-value-block__content--gap-${gap === false ? 'none' : gap}`\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 = <span className={defaultClass}>{children}</span> ?? (\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\n              className={classnames(\n                'dnb-forms-value-block__label',\n                (!label || labelSrOnly) && 'dnb-sr-only'\n              )}\n            >\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 className={defaultClass}>{children}</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            srOnly={labelSrOnly}\n          >\n            {label}\n          </FormLabel>\n        )}\n        {children ? (\n          <span className={defaultClass}>{children}</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\nconst transformLabelParameters = {\n  convertJsxToString,\n} as unknown as Parameters<Props['transformLabel']>[1]\n"],"mappings":"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"}

package/es/extensions/forms/Wizard/style/dnb-wizard-layout.css

@@ -4,8 +4,8 @@
 .dnb-forms-wizard-layout {
   display: flex;
   flex-flow: row wrap;
-  -moz-column-gap: var(--spacing-medium);
-       column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-x-large);
+       column-gap: var(--spacing-x-large);
 }
 .dnb-forms-wizard-layout--drawer {
   flex-direction: column;

package/es/extensions/forms/Wizard/style/dnb-wizard-layout.min.css

@@ -1 +1 @@
-.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__indicator{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-forms-step{outline:none}.dnb-forms-wizard-layout__contents .dnb-forms-button-row>.appear-fx,.dnb-forms-wizard-layout__contents .dnb-forms-step>.appear-fx{--appear-opacity:0;--appear-offset:-0.25rem;animation:appear .6s var(--easing-default) forwards;animation-delay:calc(var(--element-index, 0)*30ms);opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}@keyframes appear{0%{opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}80%{opacity:1}to{opacity:1;transform:translateZ(0)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}@media screen and (min-width:60.00625em){.dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status{margin-left:21.5rem}}
+.dnb-forms-wizard-layout{-moz-column-gap:var(--spacing-x-large);column-gap:var(--spacing-x-large);display:flex;flex-flow:row wrap}.dnb-forms-wizard-layout--drawer{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__indicator{flex:0;margin-bottom:2rem}.dnb-forms-wizard-layout__contents{flex:1}.dnb-forms-wizard-layout__contents .dnb-forms-step{outline:none}.dnb-forms-wizard-layout__contents .dnb-forms-button-row>.appear-fx,.dnb-forms-wizard-layout__contents .dnb-forms-step>.appear-fx{--appear-opacity:0;--appear-offset:-0.25rem;animation:appear .6s var(--easing-default) forwards;animation-delay:calc(var(--element-index, 0)*30ms);opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}@keyframes appear{0%{opacity:var(--appear-opacity);transform:translate3d(var(--appear-offset),0,0)}80%{opacity:1}to{opacity:1;transform:translateZ(0)}}@media screen and (max-width:60em){.dnb-forms-wizard-layout{align-items:stretch;flex-direction:column;justify-content:stretch}.dnb-forms-wizard-layout__contents{flex-basis:auto}}.dnb-forms-wizard-layout .dnb-step-indicator__sidebar{margin-right:0}@media screen and (min-width:60.00625em){.dnb-forms-form:has(.dnb-forms-wizard-layout--sidebar) .dnb-forms-status{margin-left:21.5rem}}

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

@@ -3,7 +3,7 @@
 .dnb-forms-wizard-layout {
   display: flex;
   flex-flow: row wrap;
-  column-gap: var(--spacing-medium);
+  column-gap: var(--spacing-x-large);
 
   &--drawer {
     flex-direction: column;