@dnb/eufemia 10.28.0 → 10.29.0

package/extensions/forms/Iterate/ViewContainer/ViewContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewContainer.js","names":["React","useMemo","classnames","convertJsxToString","Flex","Lead","ElementBlock","Toolbar","ViewToolbarTools","ViewContainer","props","_ref","children","className","title","restProps","_objectWithoutProperties","_excluded","ariaLabel","createElement","_extends","mode","Stack","size","_Toolbar","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Flex } from '../../../../components'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { Lead } from '../../../../elements'\nimport ElementBlock from '../AnimatedContainer/ElementBlock'\nimport Toolbar from '../Toolbar'\nimport ViewToolbarTools from './ViewToolbarTools'\n\nexport type Props = {\n  /**\n   * The title of the ViewContainer.\n   */\n  title?: React.ReactNode\n}\n\nexport type AllProps = Props & FlexContainerProps\n\nfunction ViewContainer(props: AllProps) {\n  const { children, className, title, ...restProps } = props || {}\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n\n  return (\n    <ElementBlock\n      mode=\"view\"\n      ariaLabel={ariaLabel}\n      className={classnames('dnb-form-iterate-view-block', className)}\n      {...restProps}\n    >\n      <Flex.Stack>\n        {title && <Lead size=\"basis\">{title}</Lead>}\n        {children}\n        <Toolbar>\n          <ViewToolbarTools />\n        </Toolbar>\n      </Flex.Stack>\n    </ElementBlock>\n  )\n}\n\nViewContainer._supportsSpacingProps = true\nexport default ViewContainer\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,SAASC,IAAI,QAAQ,wBAAwB;AAE7C,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,OAAOC,YAAY,MAAM,mCAAmC;AAC5D,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,gBAAgB,MAAM,oBAAoB;AAWjD,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAAC,IAAA,GAAqDD,KAAK,IAAI,CAAC,CAAC;IAA1D;MAAEE,QAAQ;MAAEC,SAAS;MAAEC;IAAoB,CAAC,GAAAH,IAAA;IAAXI,SAAS,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAChD,MAAMC,SAAS,GAAGjB,OAAO,CAAC,MAAME,kBAAkB,CAACW,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEnE,OACEd,KAAA,CAAAmB,aAAA,CAACb,YAAY,EAAAc,QAAA;IACXC,IAAI,EAAC,MAAM;IACXH,SAAS,EAAEA,SAAU;IACrBL,SAAS,EAAEX,UAAU,CAAC,6BAA6B,EAAEW,SAAS;EAAE,GAC5DE,SAAS,GAEbf,KAAA,CAAAmB,aAAA,CAACf,IAAI,CAACkB,KAAK,QACRR,KAAK,IAAId,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAACkB,IAAI,EAAC;EAAO,GAAET,KAAY,CAAC,EAC1CF,QAAQ,EAAAY,QAAA,KAAAA,QAAA,GACTxB,KAAA,CAAAmB,aAAA,CAACZ,OAAO,QACNP,KAAA,CAAAmB,aAAA,CAACX,gBAAgB,MAAE,CACZ,CAAC,CACA,CACA,CAAC;AAEnB;AAEAC,aAAa,CAACgB,qBAAqB,GAAG,IAAI;AAC1C,eAAehB,aAAa"}
+{"version":3,"file":"ViewContainer.js","names":["React","useMemo","classnames","convertJsxToString","Flex","Lead","ElementBlock","Toolbar","ViewToolbarTools","ViewContainer","props","_ref","children","className","title","restProps","_objectWithoutProperties","_excluded","ariaLabel","createElement","_extends","mode","Stack","size","_Toolbar","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/ViewContainer/ViewContainer.tsx"],"sourcesContent":["import React, { useMemo } from 'react'\nimport classnames from 'classnames'\nimport { convertJsxToString } from '../../../../shared/component-helper'\nimport { Flex } from '../../../../components'\nimport { Props as FlexContainerProps } from '../../../../components/flex/Container'\nimport { Lead } from '../../../../elements'\nimport ElementBlock from '../AnimatedContainer/ElementBlock'\nimport Toolbar from '../Toolbar'\nimport ViewToolbarTools from './ViewToolbarTools'\n\nexport type Props = {\n  /**\n   * The title of the ViewContainer.\n   */\n  title?: React.ReactNode\n}\n\nexport type AllProps = Props & FlexContainerProps\n\nfunction ViewContainer(props: AllProps) {\n  const { children, className, title, ...restProps } = props || {}\n  const ariaLabel = useMemo(() => convertJsxToString(title), [title])\n\n  return (\n    <ElementBlock\n      mode=\"view\"\n      ariaLabel={ariaLabel}\n      className={classnames('dnb-forms-iterate-view-block', className)}\n      {...restProps}\n    >\n      <Flex.Stack>\n        {title && <Lead size=\"basis\">{title}</Lead>}\n        {children}\n        <Toolbar>\n          <ViewToolbarTools />\n        </Toolbar>\n      </Flex.Stack>\n    </ElementBlock>\n  )\n}\n\nViewContainer._supportsSpacingProps = true\nexport default ViewContainer\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,kBAAkB,QAAQ,qCAAqC;AACxE,SAASC,IAAI,QAAQ,wBAAwB;AAE7C,SAASC,IAAI,QAAQ,sBAAsB;AAC3C,OAAOC,YAAY,MAAM,mCAAmC;AAC5D,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,gBAAgB,MAAM,oBAAoB;AAWjD,SAASC,aAAaA,CAACC,KAAe,EAAE;EACtC,MAAAC,IAAA,GAAqDD,KAAK,IAAI,CAAC,CAAC;IAA1D;MAAEE,QAAQ;MAAEC,SAAS;MAAEC;IAAoB,CAAC,GAAAH,IAAA;IAAXI,SAAS,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAChD,MAAMC,SAAS,GAAGjB,OAAO,CAAC,MAAME,kBAAkB,CAACW,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEnE,OACEd,KAAA,CAAAmB,aAAA,CAACb,YAAY,EAAAc,QAAA;IACXC,IAAI,EAAC,MAAM;IACXH,SAAS,EAAEA,SAAU;IACrBL,SAAS,EAAEX,UAAU,CAAC,8BAA8B,EAAEW,SAAS;EAAE,GAC7DE,SAAS,GAEbf,KAAA,CAAAmB,aAAA,CAACf,IAAI,CAACkB,KAAK,QACRR,KAAK,IAAId,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAACkB,IAAI,EAAC;EAAO,GAAET,KAAY,CAAC,EAC1CF,QAAQ,EAAAY,QAAA,KAAAA,QAAA,GACTxB,KAAA,CAAAmB,aAAA,CAACZ,OAAO,QACNP,KAAA,CAAAmB,aAAA,CAACX,gBAAgB,MAAE,CACZ,CAAC,CACA,CACA,CAAC;AAEnB;AAEAC,aAAa,CAACgB,qBAAqB,GAAG,IAAI;AAC1C,eAAehB,aAAa"}

package/extensions/forms/Iterate/style/dnb-form-iterate.css

@@ -1,48 +1,48 @@
-.dnb-form-iterate-block {
+.dnb-forms-iterate-block {
   --block-outline-color: var(--outline-color, var(--color-lavender));
 }
-.dnb-form-iterate-block--error:has(.dnb-form-status--error) {
+.dnb-forms-iterate-block--error:has(.dnb-form-status--error) {
   --block-outline-color: var(--color-fire-red);
 }
-.dnb-form-iterate-block:not(.dnb-height-animation--hidden) {
+.dnb-forms-iterate-block:not(.dnb-height-animation--hidden) {
   display: flex;
   flex-direction: column;
 }
-.dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block__inner {
   flex: 1;
   margin-bottom: var(--space);
   padding: var(--padding, 1rem);
   transition: transform 400ms var(--easing-default) 50ms, box-shadow 0.8s var(--easing-default);
   transform: translateY(-2.5rem);
 }
-.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
+.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]) {
   --padding: 0;
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing] {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing] {
   border-radius: 0.375rem;
   box-shadow: inset 0 0 0 2px var(--block-outline-color);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small {
   --space: var(--spacing-small);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium {
   --space: var(--spacing-medium);
 }
-.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
+.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large {
   --space: var(--spacing-large);
 }
-.dnb-form-iterate-block__inner .dnb-dl .dnb-dd {
+.dnb-forms-iterate-block__inner .dnb-dl .dnb-dd {
   margin-bottom: 0;
 }
-.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block.dnb-height-animation--is-visible .dnb-forms-iterate-block__inner {
   transform: translateY(-0.5rem);
 }
-.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner {
+.dnb-forms-iterate-block.dnb-height-animation--parallax .dnb-forms-iterate-block__inner {
   transform: translateY(0);
 }
-.dnb-form-iterate__element {
+.dnb-forms-iterate__element {
   outline: none;
 }
-.dnb-form-iterate > .dnb-form-iterate__element:has(.dnb-form-iterate-block) {
+.dnb-forms-iterate > .dnb-forms-iterate__element:has(.dnb-forms-iterate-block) {
   margin-top: 0;
 }

package/extensions/forms/Iterate/style/dnb-form-iterate.min.css

@@ -1 +1 @@
-.dnb-form-iterate-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-form-iterate-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-form-iterate-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-form-iterate-block__inner{flex:1;margin-bottom:var(--space);padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-form-iterate-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem;box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-form-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-form-iterate-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-form-iterate-block.dnb-height-animation--is-visible .dnb-form-iterate-block__inner{transform:translateY(-.5rem)}.dnb-form-iterate-block.dnb-height-animation--parallax .dnb-form-iterate-block__inner{transform:translateY(0)}.dnb-form-iterate__element{outline:none}.dnb-form-iterate>.dnb-form-iterate__element:has(.dnb-form-iterate-block){margin-top:0}
+.dnb-forms-iterate-block{--block-outline-color:var(--outline-color,var(--color-lavender))}.dnb-forms-iterate-block--error:has(.dnb-form-status--error){--block-outline-color:var(--color-fire-red)}.dnb-forms-iterate-block:not(.dnb-height-animation--hidden){display:flex;flex-direction:column}.dnb-forms-iterate-block__inner{flex:1;margin-bottom:var(--space);padding:var(--padding,1rem);transform:translateY(-2.5rem);transition:transform .4s var(--easing-default) 50ms,box-shadow .8s var(--easing-default)}.dnb-forms-iterate-block__inner:not([class*=dnb-flex-container--spacing]){--padding:0}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing]{border-radius:.375rem;box-shadow:inset 0 0 0 2px var(--block-outline-color)}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-small{--space:var(--spacing-small)}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-medium{--space:var(--spacing-medium)}.dnb-forms-iterate-block__inner[class*=dnb-flex-container--spacing].dnb-flex-container--spacing-large{--space:var(--spacing-large)}.dnb-forms-iterate-block__inner .dnb-dl .dnb-dd{margin-bottom:0}.dnb-forms-iterate-block.dnb-height-animation--is-visible .dnb-forms-iterate-block__inner{transform:translateY(-.5rem)}.dnb-forms-iterate-block.dnb-height-animation--parallax .dnb-forms-iterate-block__inner{transform:translateY(0)}.dnb-forms-iterate__element{outline:none}.dnb-forms-iterate>.dnb-forms-iterate__element:has(.dnb-forms-iterate-block){margin-top:0}

package/extensions/forms/Iterate/style/dnb-form-iterate.scss

@@ -1,4 +1,4 @@
-.dnb-form-iterate {
+.dnb-forms-iterate {
   &-block {
     --block-outline-color: var(--outline-color, var(--color-lavender));
     &--error:has(.dnb-form-status--error) {

package/extensions/forms/Value/Boolean/Boolean.js

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["value"];
+const _excluded = ["value", "className"];
 import React from 'react';
+import classnames from 'classnames';
 import ValueBlock from '../../ValueBlock';
 import { useValueProps } from '../../hooks';
 import useTranslation from '../../hooks/useTranslation';
@@ -8,10 +10,13 @@ function BooleanComponent(props) {
   const translations = useTranslation().BooleanField;
   const _useValueProps = useValueProps(props),
     {
-      value
+      value,
+      className
     } = _useValueProps,
     rest = _objectWithoutProperties(_useValueProps, _excluded);
-  return React.createElement(ValueBlock, rest, value === true || value === false ? value === true ? translations.yes : translations.no : null);
+  return React.createElement(ValueBlock, _extends({
+    className: classnames('dnb-forms-value-boolean', className)
+  }, rest), value === true || value === false ? value === true ? translations.yes : translations.no : null);
 }
 BooleanComponent._supportsSpacingProps = true;
 export default BooleanComponent;

package/extensions/forms/Value/Boolean/Boolean.js.map

@@ -1 +1 @@
-{"version":3,"file":"Boolean.js","names":["React","ValueBlock","useValueProps","useTranslation","BooleanComponent","props","translations","BooleanField","_useValueProps","value","rest","_objectWithoutProperties","_excluded","createElement","yes","no","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Boolean/Boolean.tsx"],"sourcesContent":["import React from 'react'\nimport ValueBlock from '../../ValueBlock'\nimport { useValueProps } from '../../hooks'\nimport { ValueProps } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = ValueProps<boolean>\n\nfunction BooleanComponent(props: Props) {\n  const translations = useTranslation().BooleanField\n  const { value, ...rest } = useValueProps(props)\n\n  return (\n    <ValueBlock {...rest}>\n      {value === true || value === false\n        ? value === true\n          ? translations.yes\n          : translations.no\n        : null}\n    </ValueBlock>\n  )\n}\n\nBooleanComponent._supportsSpacingProps = true\nexport default BooleanComponent\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAE3C,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,gBAAgBA,CAACC,KAAY,EAAE;EACtC,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,YAAY;EAClD,MAAAC,cAAA,GAA2BN,aAAa,CAACG,KAAK,CAAC;IAAzC;MAAEI;IAAe,CAAC,GAAAD,cAAA;IAANE,IAAI,GAAAC,wBAAA,CAAAH,cAAA,EAAAI,SAAA;EAEtB,OACEZ,KAAA,CAAAa,aAAA,CAACZ,UAAU,EAAKS,IAAI,EACjBD,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,GAC9BA,KAAK,KAAK,IAAI,GACZH,YAAY,CAACQ,GAAG,GAChBR,YAAY,CAACS,EAAE,GACjB,IACM,CAAC;AAEjB;AAEAX,gBAAgB,CAACY,qBAAqB,GAAG,IAAI;AAC7C,eAAeZ,gBAAgB"}
+{"version":3,"file":"Boolean.js","names":["React","classnames","ValueBlock","useValueProps","useTranslation","BooleanComponent","props","translations","BooleanField","_useValueProps","value","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","yes","no","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Boolean/Boolean.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ValueBlock from '../../ValueBlock'\nimport { useValueProps } from '../../hooks'\nimport { ValueProps } from '../../types'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = ValueProps<boolean>\n\nfunction BooleanComponent(props: Props) {\n  const translations = useTranslation().BooleanField\n  const { value, className, ...rest } = useValueProps(props)\n\n  return (\n    <ValueBlock\n      className={classnames('dnb-forms-value-boolean', className)}\n      {...rest}\n    >\n      {value === true || value === false\n        ? value === true\n          ? translations.yes\n          : translations.no\n        : null}\n    </ValueBlock>\n  )\n}\n\nBooleanComponent._supportsSpacingProps = true\nexport default BooleanComponent\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAE3C,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,gBAAgBA,CAACC,KAAY,EAAE;EACtC,MAAMC,YAAY,GAAGH,cAAc,CAAC,CAAC,CAACI,YAAY;EAClD,MAAAC,cAAA,GAAsCN,aAAa,CAACG,KAAK,CAAC;IAApD;MAAEI,KAAK;MAAEC;IAAmB,CAAC,GAAAF,cAAA;IAANG,IAAI,GAAAC,wBAAA,CAAAJ,cAAA,EAAAK,SAAA;EAEjC,OACEd,KAAA,CAAAe,aAAA,CAACb,UAAU,EAAAc,QAAA;IACTL,SAAS,EAAEV,UAAU,CAAC,yBAAyB,EAAEU,SAAS;EAAE,GACxDC,IAAI,GAEPF,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,GAC9BA,KAAK,KAAK,IAAI,GACZH,YAAY,CAACU,GAAG,GAChBV,YAAY,CAACW,EAAE,GACjB,IACM,CAAC;AAEjB;AAEAb,gBAAgB,CAACc,qBAAqB,GAAG,IAAI;AAC7C,eAAed,gBAAgB"}

package/extensions/forms/Value/Name/Name.d.ts

@@ -0,0 +1,10 @@
+import { Props as StringValueProps } from '../String';
+export type Props = StringValueProps;
+declare function Name(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace Name {
+    var _supportsSpacingProps: boolean;
+    var First: (props: StringValueProps) => import("react/jsx-runtime").JSX.Element;
+    var Last: (props: StringValueProps) => import("react/jsx-runtime").JSX.Element;
+    var Company: (props: StringValueProps) => import("react/jsx-runtime").JSX.Element;
+}
+export default Name;

package/extensions/forms/Value/Name/Name.js

@@ -0,0 +1,40 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 from 'react';
+import StringValue from '../String';
+import useTranslation from '../../hooks/useTranslation';
+function Name(props) {
+  const StringValueProps = _objectSpread({}, props);
+  return React.createElement(StringValue, StringValueProps);
+}
+Name._supportsSpacingProps = true;
+Name.First = function FirstName(props) {
+  var _props$label;
+  const translations = useTranslation();
+  const nameProps = _objectSpread(_objectSpread({}, props), {}, {
+    label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : translations.FirstName.label
+  });
+  return React.createElement(Name, nameProps);
+};
+Name.First['_supportsSpacingProps'] = true;
+Name.Last = function LastName(props) {
+  var _props$label2;
+  const translations = useTranslation();
+  const nameProps = _objectSpread(_objectSpread({}, props), {}, {
+    label: (_props$label2 = props.label) !== null && _props$label2 !== void 0 ? _props$label2 : translations.LastName.label
+  });
+  return React.createElement(Name, nameProps);
+};
+Name.Last['_supportsSpacingProps'] = true;
+Name.Company = function CompanyName(props) {
+  var _props$label3;
+  const translations = useTranslation();
+  const nameProps = _objectSpread(_objectSpread({}, props), {}, {
+    label: (_props$label3 = props.label) !== null && _props$label3 !== void 0 ? _props$label3 : translations.CompanyName.label
+  });
+  return React.createElement(Name, nameProps);
+};
+Name.Company['_supportsSpacingProps'] = true;
+export default Name;
+//# sourceMappingURL=Name.js.map

package/extensions/forms/Value/Name/Name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Name.js","names":["React","StringValue","useTranslation","Name","props","StringValueProps","_objectSpread","createElement","_supportsSpacingProps","First","FirstName","_props$label","translations","nameProps","label","Last","LastName","_props$label2","Company","CompanyName","_props$label3"],"sources":["../../../../../../src/extensions/forms/Value/Name/Name.tsx"],"sourcesContent":["import React from 'react'\nimport StringValue, { Props as StringValueProps } from '../String'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringValueProps\n\nfunction Name(props: Props) {\n  const StringValueProps: Props = {\n    ...props,\n  }\n\n  return <StringValue {...StringValueProps} />\n}\nName._supportsSpacingProps = true\n\nName.First = function FirstName(props: Props) {\n  const translations = useTranslation()\n\n  const nameProps: Props = {\n    ...props,\n    label: props.label ?? translations.FirstName.label,\n  }\n\n  return <Name {...nameProps} />\n}\nName.First['_supportsSpacingProps'] = true\n\nName.Last = function LastName(props: Props) {\n  const translations = useTranslation()\n\n  const nameProps: Props = {\n    ...props,\n    label: props.label ?? translations.LastName.label,\n  }\n\n  return <Name {...nameProps} />\n}\nName.Last['_supportsSpacingProps'] = true\n\nName.Company = function CompanyName(props: Props) {\n  const translations = useTranslation()\n\n  const nameProps: Props = {\n    ...props,\n    label: props.label ?? translations.CompanyName.label,\n  }\n\n  return <Name {...nameProps} />\n}\nName.Company['_supportsSpacingProps'] = true\n\nexport default Name\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,IAAIA,CAACC,KAAY,EAAE;EAC1B,MAAMC,gBAAuB,GAAAC,aAAA,KACxBF,KAAK,CACT;EAED,OAAOJ,KAAA,CAAAO,aAAA,CAACN,WAAW,EAAKI,gBAAmB,CAAC;AAC9C;AACAF,IAAI,CAACK,qBAAqB,GAAG,IAAI;AAEjCL,IAAI,CAACM,KAAK,GAAG,SAASC,SAASA,CAACN,KAAY,EAAE;EAAA,IAAAO,YAAA;EAC5C,MAAMC,YAAY,GAAGV,cAAc,CAAC,CAAC;EAErC,MAAMW,SAAgB,GAAAP,aAAA,CAAAA,aAAA,KACjBF,KAAK;IACRU,KAAK,GAAAH,YAAA,GAAEP,KAAK,CAACU,KAAK,cAAAH,YAAA,cAAAA,YAAA,GAAIC,YAAY,CAACF,SAAS,CAACI;EAAK,EACnD;EAED,OAAOd,KAAA,CAAAO,aAAA,CAACJ,IAAI,EAAKU,SAAY,CAAC;AAChC,CAAC;AACDV,IAAI,CAACM,KAAK,CAAC,uBAAuB,CAAC,GAAG,IAAI;AAE1CN,IAAI,CAACY,IAAI,GAAG,SAASC,QAAQA,CAACZ,KAAY,EAAE;EAAA,IAAAa,aAAA;EAC1C,MAAML,YAAY,GAAGV,cAAc,CAAC,CAAC;EAErC,MAAMW,SAAgB,GAAAP,aAAA,CAAAA,aAAA,KACjBF,KAAK;IACRU,KAAK,GAAAG,aAAA,GAAEb,KAAK,CAACU,KAAK,cAAAG,aAAA,cAAAA,aAAA,GAAIL,YAAY,CAACI,QAAQ,CAACF;EAAK,EAClD;EAED,OAAOd,KAAA,CAAAO,aAAA,CAACJ,IAAI,EAAKU,SAAY,CAAC;AAChC,CAAC;AACDV,IAAI,CAACY,IAAI,CAAC,uBAAuB,CAAC,GAAG,IAAI;AAEzCZ,IAAI,CAACe,OAAO,GAAG,SAASC,WAAWA,CAACf,KAAY,EAAE;EAAA,IAAAgB,aAAA;EAChD,MAAMR,YAAY,GAAGV,cAAc,CAAC,CAAC;EAErC,MAAMW,SAAgB,GAAAP,aAAA,CAAAA,aAAA,KACjBF,KAAK;IACRU,KAAK,GAAAM,aAAA,GAAEhB,KAAK,CAACU,KAAK,cAAAM,aAAA,cAAAA,aAAA,GAAIR,YAAY,CAACO,WAAW,CAACL;EAAK,EACrD;EAED,OAAOd,KAAA,CAAAO,aAAA,CAACJ,IAAI,EAAKU,SAAY,CAAC;AAChC,CAAC;AACDV,IAAI,CAACe,OAAO,CAAC,uBAAuB,CAAC,GAAG,IAAI;AAE5C,eAAef,IAAI"}

package/extensions/forms/Value/Name/index.d.ts

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

package/extensions/forms/Value/Name/index.js

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

package/extensions/forms/Value/Name/index.js.map

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

package/extensions/forms/Value/OrganizationNumber/OrganizationNumber.d.ts

@@ -0,0 +1,7 @@
+import { Props as StringValueProps } from '../String';
+export type Props = StringValueProps;
+declare function OrganizationNumber(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace OrganizationNumber {
+    var _supportsSpacingProps: boolean;
+}
+export default OrganizationNumber;

package/extensions/forms/Value/OrganizationNumber/OrganizationNumber.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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, { useCallback } from 'react';
+import StringValue from '../String';
+import { format, cleanNumber } from '../../../../components/number-format/NumberUtils';
+import useTranslation from '../../hooks/useTranslation';
+function OrganizationNumber(props) {
+  var _props$label;
+  const translations = useTranslation().OrganizationNumber;
+  const toInput = useCallback(value => {
+    return format(cleanNumber(value), {
+      org: true
+    }).toString();
+  }, []);
+  const stringValueProps = _objectSpread(_objectSpread({}, props), {}, {
+    label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : props.inline ? undefined : translations.label,
+    toInput
+  });
+  return React.createElement(StringValue, stringValueProps);
+}
+OrganizationNumber._supportsSpacingProps = true;
+export default OrganizationNumber;
+//# sourceMappingURL=OrganizationNumber.js.map

package/extensions/forms/Value/OrganizationNumber/OrganizationNumber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationNumber.js","names":["React","useCallback","StringValue","format","cleanNumber","useTranslation","OrganizationNumber","props","_props$label","translations","toInput","value","org","toString","stringValueProps","_objectSpread","label","inline","undefined","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/OrganizationNumber/OrganizationNumber.tsx"],"sourcesContent":["import React, { useCallback } from 'react'\nimport StringValue, { Props as StringValueProps } from '../String'\nimport {\n  format,\n  cleanNumber,\n} from '../../../../components/number-format/NumberUtils'\nimport useTranslation from '../../hooks/useTranslation'\n\nexport type Props = StringValueProps\n\nfunction OrganizationNumber(props: Props) {\n  const translations = useTranslation().OrganizationNumber\n\n  const toInput = useCallback((value) => {\n    return format(cleanNumber(value), {\n      org: true,\n    }).toString()\n  }, [])\n\n  const stringValueProps: Props = {\n    ...props,\n    label: props.label ?? (props.inline ? undefined : translations.label),\n    toInput,\n  }\n  return <StringValue {...stringValueProps} />\n}\n\nOrganizationNumber._supportsSpacingProps = true\nexport default OrganizationNumber\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,WAAW,QAAQ,OAAO;AAC1C,OAAOC,WAAW,MAAqC,WAAW;AAClE,SACEC,MAAM,EACNC,WAAW,QACN,kDAAkD;AACzD,OAAOC,cAAc,MAAM,4BAA4B;AAIvD,SAASC,kBAAkBA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EACxC,MAAMC,YAAY,GAAGJ,cAAc,CAAC,CAAC,CAACC,kBAAkB;EAExD,MAAMI,OAAO,GAAGT,WAAW,CAAEU,KAAK,IAAK;IACrC,OAAOR,MAAM,CAACC,WAAW,CAACO,KAAK,CAAC,EAAE;MAChCC,GAAG,EAAE;IACP,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EACf,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,gBAAuB,GAAAC,aAAA,CAAAA,aAAA,KACxBR,KAAK;IACRS,KAAK,GAAAR,YAAA,GAAED,KAAK,CAACS,KAAK,cAAAR,YAAA,cAAAA,YAAA,GAAKD,KAAK,CAACU,MAAM,GAAGC,SAAS,GAAGT,YAAY,CAACO,KAAM;IACrEN;EAAO,EACR;EACD,OAAOV,KAAA,CAAAmB,aAAA,CAACjB,WAAW,EAAKY,gBAAmB,CAAC;AAC9C;AAEAR,kBAAkB,CAACc,qBAAqB,GAAG,IAAI;AAC/C,eAAed,kBAAkB"}

package/extensions/forms/Value/OrganizationNumber/index.d.ts

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

package/extensions/forms/Value/OrganizationNumber/index.js

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

package/extensions/forms/Value/OrganizationNumber/index.js.map

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

package/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCity.d.ts

@@ -0,0 +1,7 @@
+import { Props as StringValueProps } from '../String';
+export type Props = StringValueProps & Partial<Record<'postalCode' | 'city', StringValueProps>>;
+declare function PostalCodeAndCity(props: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace PostalCodeAndCity {
+    var _supportsSpacingProps: boolean;
+}
+export default PostalCodeAndCity;

package/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCity.js

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 from 'react';
+import StringValue from '../String';
+import useTranslation from '../../hooks/useTranslation';
+import { useValueProps } from '../../hooks';
+function PostalCodeAndCity(props) {
+  var _props$value, _props$label;
+  const translations = useTranslation().PostalCodeAndCity;
+  const city = (props === null || props === void 0 ? void 0 : props.city) || {};
+  const postalCode = (props === null || props === void 0 ? void 0 : props.postalCode) || {};
+  const cityProps = useValueProps(city);
+  if (cityProps.value) {
+    city.value = cityProps.value;
+  }
+  const postalCodeProps = useValueProps(postalCode);
+  if (postalCodeProps.value) {
+    postalCode.value = postalCodeProps.value;
+  }
+  const value = (_props$value = props.value) !== null && _props$value !== void 0 ? _props$value : (postalCode || city ? [postalCode === null || postalCode === void 0 ? void 0 : postalCode.value, city === null || city === void 0 ? void 0 : city.value].filter(Boolean).join(' ') : undefined) || undefined;
+  const label = (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : props.inline ? undefined : translations.label;
+  const stringValueProps = _objectSpread(_objectSpread({}, props), {}, {
+    value,
+    label
+  });
+  return React.createElement(StringValue, stringValueProps);
+}
+PostalCodeAndCity._supportsSpacingProps = true;
+export default PostalCodeAndCity;
+//# sourceMappingURL=PostalCodeAndCity.js.map

package/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostalCodeAndCity.js","names":["React","StringValue","useTranslation","useValueProps","PostalCodeAndCity","props","_props$value","_props$label","translations","city","postalCode","cityProps","value","postalCodeProps","filter","Boolean","join","undefined","label","inline","stringValueProps","_objectSpread","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCity.tsx"],"sourcesContent":["import React from 'react'\nimport StringValue, { Props as StringValueProps } from '../String'\nimport useTranslation from '../../hooks/useTranslation'\nimport { useValueProps } from '../../hooks'\n\nexport type Props = StringValueProps &\n  Partial<Record<'postalCode' | 'city', StringValueProps>>\n\nfunction PostalCodeAndCity(props: Props) {\n  const translations = useTranslation().PostalCodeAndCity\n\n  const city = props?.city || {}\n  const postalCode = props?.postalCode || {}\n\n  const cityProps = useValueProps(city)\n  if (cityProps.value) {\n    city.value = cityProps.value\n  }\n\n  const postalCodeProps = useValueProps(postalCode)\n  if (postalCodeProps.value) {\n    postalCode.value = postalCodeProps.value\n  }\n\n  const value =\n    props.value ??\n    ((postalCode || city\n      ? [postalCode?.value, city?.value].filter(Boolean).join(' ')\n      : undefined) ||\n      undefined)\n  const label =\n    props.label ?? (props.inline ? undefined : translations.label)\n\n  const stringValueProps: Props = {\n    ...props,\n    value,\n    label,\n  }\n\n  return <StringValue {...stringValueProps} />\n}\n\nPostalCodeAndCity._supportsSpacingProps = true\nexport default PostalCodeAndCity\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,cAAc,MAAM,4BAA4B;AACvD,SAASC,aAAa,QAAQ,aAAa;AAK3C,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA,EAAAC,YAAA;EACvC,MAAMC,YAAY,GAAGN,cAAc,CAAC,CAAC,CAACE,iBAAiB;EAEvD,MAAMK,IAAI,GAAG,CAAAJ,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEI,IAAI,KAAI,CAAC,CAAC;EAC9B,MAAMC,UAAU,GAAG,CAAAL,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEK,UAAU,KAAI,CAAC,CAAC;EAE1C,MAAMC,SAAS,GAAGR,aAAa,CAACM,IAAI,CAAC;EACrC,IAAIE,SAAS,CAACC,KAAK,EAAE;IACnBH,IAAI,CAACG,KAAK,GAAGD,SAAS,CAACC,KAAK;EAC9B;EAEA,MAAMC,eAAe,GAAGV,aAAa,CAACO,UAAU,CAAC;EACjD,IAAIG,eAAe,CAACD,KAAK,EAAE;IACzBF,UAAU,CAACE,KAAK,GAAGC,eAAe,CAACD,KAAK;EAC1C;EAEA,MAAMA,KAAK,IAAAN,YAAA,GACTD,KAAK,CAACO,KAAK,cAAAN,YAAA,cAAAA,YAAA,GACV,CAACI,UAAU,IAAID,IAAI,GAChB,CAACC,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEE,KAAK,EAAEH,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEG,KAAK,CAAC,CAACE,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,GAC1DC,SAAS,KACXA,SAAU;EACd,MAAMC,KAAK,IAAAX,YAAA,GACTF,KAAK,CAACa,KAAK,cAAAX,YAAA,cAAAA,YAAA,GAAKF,KAAK,CAACc,MAAM,GAAGF,SAAS,GAAGT,YAAY,CAACU,KAAM;EAEhE,MAAME,gBAAuB,GAAAC,aAAA,CAAAA,aAAA,KACxBhB,KAAK;IACRO,KAAK;IACLM;EAAK,EACN;EAED,OAAOlB,KAAA,CAAAsB,aAAA,CAACrB,WAAW,EAAKmB,gBAAmB,CAAC;AAC9C;AAEAhB,iBAAiB,CAACmB,qBAAqB,GAAG,IAAI;AAC9C,eAAenB,iBAAiB"}

package/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCityDocs.d.ts

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

package/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCityDocs.js

@@ -0,0 +1,13 @@
+export const PostalCodeAndCityProperties = {
+  postalCode: {
+    doc: 'Properties such as `value` and `path` for the [Value.String](/uilib/extensions/forms/Value/String) component for postcode.',
+    type: 'object',
+    status: 'optional'
+  },
+  city: {
+    doc: 'Properties such as `value` and `path` for the [Value.String](/uilib/extensions/forms/Value/String) component for city.',
+    type: 'object',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=PostalCodeAndCityDocs.js.map

package/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCityDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PostalCodeAndCityDocs.js","names":["PostalCodeAndCityProperties","postalCode","doc","type","status","city"],"sources":["../../../../../../src/extensions/forms/Value/PostalCodeAndCity/PostalCodeAndCityDocs.ts"],"sourcesContent":["import { PropertiesTableProps } from '../../../../shared/types'\n\nexport const PostalCodeAndCityProperties: PropertiesTableProps = {\n  postalCode: {\n    doc: 'Properties such as `value` and `path` for the [Value.String](/uilib/extensions/forms/Value/String) component for postcode.',\n    type: 'object',\n    status: 'optional',\n  },\n  city: {\n    doc: 'Properties such as `value` and `path` for the [Value.String](/uilib/extensions/forms/Value/String) component for city.',\n    type: 'object',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAEA,OAAO,MAAMA,2BAAiD,GAAG;EAC/DC,UAAU,EAAE;IACVC,GAAG,EAAE,4HAA4H;IACjIC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDC,IAAI,EAAE;IACJH,GAAG,EAAE,wHAAwH;IAC7HC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Value/PostalCodeAndCity/index.d.ts

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

package/extensions/forms/Value/PostalCodeAndCity/index.js

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

package/extensions/forms/Value/PostalCodeAndCity/index.js.map

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

package/extensions/forms/Value/String/String.js

@@ -1,15 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["value"];
+const _excluded = ["value", "className"];
 import React from 'react';
+import classnames from 'classnames';
 import ValueBlock from '../../ValueBlock';
 import { useValueProps } from '../../hooks';
 function StringComponent(props) {
   const _useValueProps = useValueProps(props),
     {
-      value
+      value,
+      className
     } = _useValueProps,
     rest = _objectWithoutProperties(_useValueProps, _excluded);
-  return React.createElement(ValueBlock, rest, value);
+  return React.createElement(ValueBlock, _extends({
+    className: classnames('dnb-forms-value-string', className)
+  }, rest), value);
 }
 StringComponent._supportsSpacingProps = true;
 export default StringComponent;

package/extensions/forms/Value/String/String.js.map

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","ValueBlock","useValueProps","StringComponent","props","_useValueProps","value","rest","_objectWithoutProperties","_excluded","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/String/String.tsx"],"sourcesContent":["import React from 'react'\nimport ValueBlock from '../../ValueBlock'\nimport { useValueProps } from '../../hooks'\nimport { ValueProps } from '../../types'\n\nexport type Props = ValueProps<string>\n\nfunction StringComponent(props: Props) {\n  const { value, ...rest } = useValueProps(props)\n\n  return <ValueBlock {...rest}>{value}</ValueBlock>\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAK3C,SAASC,eAAeA,CAACC,KAAY,EAAE;EACrC,MAAAC,cAAA,GAA2BH,aAAa,CAACE,KAAK,CAAC;IAAzC;MAAEE;IAAe,CAAC,GAAAD,cAAA;IAANE,IAAI,GAAAC,wBAAA,CAAAH,cAAA,EAAAI,SAAA;EAEtB,OAAOT,KAAA,CAAAU,aAAA,CAACT,UAAU,EAAKM,IAAI,EAAGD,KAAkB,CAAC;AACnD;AAEAH,eAAe,CAACQ,qBAAqB,GAAG,IAAI;AAC5C,eAAeR,eAAe"}
+{"version":3,"file":"String.js","names":["React","classnames","ValueBlock","useValueProps","StringComponent","props","_useValueProps","value","className","rest","_objectWithoutProperties","_excluded","createElement","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/String/String.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport ValueBlock from '../../ValueBlock'\nimport { useValueProps } from '../../hooks'\nimport { ValueProps } from '../../types'\n\nexport type Props = ValueProps<string>\n\nfunction StringComponent(props: Props) {\n  const { value, className, ...rest } = useValueProps(props)\n\n  return (\n    <ValueBlock\n      className={classnames('dnb-forms-value-string', className)}\n      {...rest}\n    >\n      {value}\n    </ValueBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,kBAAkB;AACzC,SAASC,aAAa,QAAQ,aAAa;AAK3C,SAASC,eAAeA,CAACC,KAAY,EAAE;EACrC,MAAAC,cAAA,GAAsCH,aAAa,CAACE,KAAK,CAAC;IAApD;MAAEE,KAAK;MAAEC;IAAmB,CAAC,GAAAF,cAAA;IAANG,IAAI,GAAAC,wBAAA,CAAAJ,cAAA,EAAAK,SAAA;EAEjC,OACEX,KAAA,CAAAY,aAAA,CAACV,UAAU,EAAAW,QAAA;IACTL,SAAS,EAAEP,UAAU,CAAC,wBAAwB,EAAEO,SAAS;EAAE,GACvDC,IAAI,GAEPF,KACS,CAAC;AAEjB;AAEAH,eAAe,CAACU,qBAAqB,GAAG,IAAI;AAC5C,eAAeV,eAAe"}

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

@@ -17,7 +17,7 @@ function SummaryList(props) {
       layout
     }
   }, React.createElement(Dl, _extends({
-    className: classnames('dnb-form-summary-list', className),
+    className: classnames('dnb-forms-summary-list', className),
     layout: layout
   }, rest), children));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.js","names":["React","classnames","SummaryListContext","Dl","SummaryList","props","className","children","layout","rest","_objectWithoutProperties","_excluded","createElement","Provider","value","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/SummaryList/SummaryList.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport SummaryListContext from './SummaryListContext'\nimport Dl, { DlAllProps } from '../../../../elements/Dl'\n\nexport type Props = Omit<DlAllProps, 'label'>\n\nfunction SummaryList(props: Props) {\n  const { className, children, layout, ...rest } = props\n  return (\n    <SummaryListContext.Provider value={{ layout }}>\n      <Dl\n        className={classnames('dnb-form-summary-list', className)}\n        layout={layout}\n        {...rest}\n      >\n        {children}\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,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,EAAE,MAAsB,yBAAyB;AAIxD,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAM;MAAEC,SAAS;MAAEC,QAAQ;MAAEC;IAAgB,CAAC,GAAGH,KAAK;IAAdI,IAAI,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA;EACtD,OACEX,KAAA,CAAAY,aAAA,CAACV,kBAAkB,CAACW,QAAQ;IAACC,KAAK,EAAE;MAAEN;IAAO;EAAE,GAC7CR,KAAA,CAAAY,aAAA,CAACT,EAAE,EAAAY,QAAA;IACDT,SAAS,EAAEL,UAAU,CAAC,uBAAuB,EAAEK,SAAS,CAAE;IAC1DE,MAAM,EAAEA;EAAO,GACXC,IAAI,GAEPF,QACC,CACuB,CAAC;AAElC;AAEAH,WAAW,CAACY,qBAAqB,GAAG,IAAI;AAExC,eAAeZ,WAAW"}
+{"version":3,"file":"SummaryList.js","names":["React","classnames","SummaryListContext","Dl","SummaryList","props","className","children","layout","rest","_objectWithoutProperties","_excluded","createElement","Provider","value","_extends","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/SummaryList/SummaryList.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\nimport SummaryListContext from './SummaryListContext'\nimport Dl, { DlAllProps } from '../../../../elements/Dl'\n\nexport type Props = Omit<DlAllProps, 'label'>\n\nfunction SummaryList(props: Props) {\n  const { className, children, layout, ...rest } = props\n  return (\n    <SummaryListContext.Provider value={{ layout }}>\n      <Dl\n        className={classnames('dnb-forms-summary-list', className)}\n        layout={layout}\n        {...rest}\n      >\n        {children}\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,OAAOC,kBAAkB,MAAM,sBAAsB;AACrD,OAAOC,EAAE,MAAsB,yBAAyB;AAIxD,SAASC,WAAWA,CAACC,KAAY,EAAE;EACjC,MAAM;MAAEC,SAAS;MAAEC,QAAQ;MAAEC;IAAgB,CAAC,GAAGH,KAAK;IAAdI,IAAI,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA;EACtD,OACEX,KAAA,CAAAY,aAAA,CAACV,kBAAkB,CAACW,QAAQ;IAACC,KAAK,EAAE;MAAEN;IAAO;EAAE,GAC7CR,KAAA,CAAAY,aAAA,CAACT,EAAE,EAAAY,QAAA;IACDT,SAAS,EAAEL,UAAU,CAAC,wBAAwB,EAAEK,SAAS,CAAE;IAC3DE,MAAM,EAAEA;EAAO,GACXC,IAAI,GAEPF,QACC,CACuB,CAAC;AAElC;AAEAH,WAAW,CAACY,qBAAqB,GAAG,IAAI;AAExC,eAAeZ,WAAW"}

package/extensions/forms/Value/ValueDocs.js

@@ -10,7 +10,7 @@ export const ValueProperties = {
     status: 'optional'
   },
   showEmpty: {
-    doc: 'Text showing in place of the value if no value is given.',
+    doc: 'Shows the value even if it is empty.',
     type: 'boolean',
     status: 'optional'
   },
@@ -38,6 +38,11 @@ export const ValueProperties = {
     doc: 'Transforms the `value` before its displayed in the value component.',
     type: 'function',
     status: 'optional'
+  },
+  '[Space](/uilib/layout/space/properties)': {
+    doc: 'Spacing properties like `top` or `bottom` are supported.',
+    type: ['string', 'object'],
+    status: 'optional'
   }
 };
 //# sourceMappingURL=ValueDocs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ValueDocs.js","names":["ValueProperties","value","doc","type","status","label","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: 'Source data value for the input.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Field label to show above the data value.',\n    type: 'string',\n    status: 'optional',\n  },\n  showEmpty: {\n    doc: 'Text showing in place of the value if no value is given.',\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}\n"],"mappings":"AAEA,OAAO,MAAMA,eAAqC,GAAG;EACnDC,KAAK,EAAE;IACLC,GAAG,EAAE,kCAAkC;IACvCC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,2CAA2C;IAChDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,MAAM,EAAE;IACNP,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,WAAW,EAAE;IACXT,GAAG,EAAE,qEAAqE;IAC1EC,IAAI,EAAE,UAAU;IAChBC,MAAM,EAAE;EACV;AACF,CAAC"}
+{"version":3,"file":"ValueDocs.js","names":["ValueProperties","value","doc","type","status","label","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: 'Source data value for the input.',\n    type: '{valueType}',\n    status: 'optional',\n  },\n  label: {\n    doc: 'Field label to show above the data value.',\n    type: 'string',\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,kCAAkC;IACvCC,IAAI,EAAE,aAAa;IACnBC,MAAM,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACLH,GAAG,EAAE,2CAA2C;IAChDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,sCAAsC;IAC3CC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDG,WAAW,EAAE;IACXL,GAAG,EAAE,0DAA0D;IAC/DC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,kFAAkF;IACvFC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDK,MAAM,EAAE;IACNP,GAAG,EAAE,wDAAwD;IAC7DC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDM,QAAQ,EAAE;IACRR,GAAG,EAAE,0IAA0I;IAC/IC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDO,WAAW,EAAE;IACXT,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/extensions/forms/Value/index.d.ts

@@ -4,8 +4,11 @@ export { default as Boolean } from './Boolean';
 export { default as Currency } from './Currency';
 export { default as Date } from './Date';
 export { default as Email } from './Email';
+export { default as Name } from './Name';
 export { default as NationalIdentityNumber } from './NationalIdentityNumber';
+export { default as PostalCodeAndCity } from './PostalCodeAndCity';
 export { default as PhoneNumber } from './PhoneNumber';
 export { default as BankAccountNumber } from './BankAccountNumber';
+export { default as OrganizationNumber } from './OrganizationNumber';
 export { default as SummaryList } from './SummaryList';
 export { default as Composition } from './Composition';

package/extensions/forms/Value/index.js

@@ -4,9 +4,12 @@ export { default as Boolean } from './Boolean';
 export { default as Currency } from './Currency';
 export { default as Date } from './Date';
 export { default as Email } from './Email';
+export { default as Name } from './Name';
 export { default as NationalIdentityNumber } from './NationalIdentityNumber';
+export { default as PostalCodeAndCity } from './PostalCodeAndCity';
 export { default as PhoneNumber } from './PhoneNumber';
 export { default as BankAccountNumber } from './BankAccountNumber';
+export { default as OrganizationNumber } from './OrganizationNumber';
 export { default as SummaryList } from './SummaryList';
 export { default as Composition } from './Composition';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","String","Number","Boolean","Currency","Date","Email","NationalIdentityNumber","PhoneNumber","BankAccountNumber","SummaryList","Composition"],"sources":["../../../../../src/extensions/forms/Value/index.ts"],"sourcesContent":["export { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as SummaryList } from './SummaryList'\nexport { default as Composition } from './Composition'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU;AAC5C,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,OAAO,QAAQ,WAAW;AAC9C,SAASH,OAAO,IAAII,QAAQ,QAAQ,YAAY;AAChD,SAASJ,OAAO,IAAIK,IAAI,QAAQ,QAAQ;AACxC,SAASL,OAAO,IAAIM,KAAK,QAAQ,SAAS;AAC1C,SAASN,OAAO,IAAIO,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASP,OAAO,IAAIQ,WAAW,QAAQ,eAAe;AACtD,SAASR,OAAO,IAAIS,iBAAiB,QAAQ,qBAAqB;AAClE,SAAST,OAAO,IAAIU,WAAW,QAAQ,eAAe;AACtD,SAASV,OAAO,IAAIW,WAAW,QAAQ,eAAe"}
+{"version":3,"file":"index.js","names":["default","String","Number","Boolean","Currency","Date","Email","Name","NationalIdentityNumber","PostalCodeAndCity","PhoneNumber","BankAccountNumber","OrganizationNumber","SummaryList","Composition"],"sources":["../../../../../src/extensions/forms/Value/index.ts"],"sourcesContent":["export { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as Name } from './Name'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as SummaryList } from './SummaryList'\nexport { default as Composition } from './Composition'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU;AAC5C,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,OAAO,QAAQ,WAAW;AAC9C,SAASH,OAAO,IAAII,QAAQ,QAAQ,YAAY;AAChD,SAASJ,OAAO,IAAIK,IAAI,QAAQ,QAAQ;AACxC,SAASL,OAAO,IAAIM,KAAK,QAAQ,SAAS;AAC1C,SAASN,OAAO,IAAIO,IAAI,QAAQ,QAAQ;AACxC,SAASP,OAAO,IAAIQ,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASR,OAAO,IAAIS,iBAAiB,QAAQ,qBAAqB;AAClE,SAAST,OAAO,IAAIU,WAAW,QAAQ,eAAe;AACtD,SAASV,OAAO,IAAIW,iBAAiB,QAAQ,qBAAqB;AAClE,SAASX,OAAO,IAAIY,kBAAkB,QAAQ,sBAAsB;AACpE,SAASZ,OAAO,IAAIa,WAAW,QAAQ,eAAe;AACtD,SAASb,OAAO,IAAIc,WAAW,QAAQ,eAAe"}

package/extensions/forms/ValueBlock/ValueBlock.js

@@ -16,7 +16,7 @@ function ValueBlock(props) {
   const valueBlockContext = useContext(ValueBlockContext);
   const {
     className,
-    label,
+    label: labelProp,
     inline,
     maxWidth = props.composition ? props.maxWidth : 'large',
     placeholder,
@@ -25,6 +25,7 @@ function ValueBlock(props) {
     composition,
     gap = 'xx-small'
   } = props;
+  const label = inline ? null : labelProp;
   if ((children === undefined || children === null || children === false) && !showEmpty && !placeholder) {
     return null;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","classnames","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","pickSpacingProps","ValueBlockContext","ValueBlock","props","summaryListContext","valueBlockContext","className","label","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","content","compositionClass","Element","isNested","layout","Item","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, { Fragment, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport ValueBlockContext from './ValueBlockContext'\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\n  const {\n    className,\n    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  if (\n    (children === undefined || children === null || children === false) &&\n    !showEmpty &&\n    !placeholder\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass = classnames(\n    composition &&\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        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\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":"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"}
+{"version":3,"file":"ValueBlock.js","names":["React","Fragment","useContext","classnames","Dd","Dl","Dt","Span","FormLabel","SummaryListContext","pickSpacingProps","ValueBlockContext","ValueBlock","props","summaryListContext","valueBlockContext","className","label","labelProp","inline","maxWidth","composition","placeholder","showEmpty","children","gap","undefined","content","compositionClass","Element","isNested","layout","Item","_span","createElement","Provider","value","_objectSpread","_extends","element","labelDirection","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/ValueBlock/ValueBlock.tsx"],"sourcesContent":["import React, { Fragment, useContext } from 'react'\nimport classnames from 'classnames'\nimport { Dd, Dl, Dt, Span } from '../../../elements'\nimport { FormLabel } from '../../../components'\nimport SummaryListContext from '../Value/SummaryList/SummaryListContext'\nimport { ValueProps } from '../types'\nimport { pickSpacingProps } from '../../../components/flex/utils'\nimport ValueBlockContext from './ValueBlockContext'\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\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 = inline ? null : labelProp\n\n  if (\n    (children === undefined || children === null || children === false) &&\n    !showEmpty &&\n    !placeholder\n  ) {\n    return null\n  }\n\n  let content = null\n\n  const compositionClass = classnames(\n    composition &&\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        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\nValueBlock._supportsSpacingProps = true\nexport default ValueBlock\n"],"mappings":"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"}