@dnb/eufemia 10.18.0 → 10.19.0

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","classnames","ButtonRow","FieldBlock","useDataValue","pickSpacingProps","SharedContext","ToggleButtonGroupContext","Toggle","props","sharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","textOn","textOff","value","info","warning","error","handleChange","handleCheckboxChange","checked","handleToggleChange","cn","fieldBlockPropsWithoutLabel","_objectSpread","forId","fieldBlockProps","isOn","isOff","createElement","_extends","status","undefined","on_change","text","translation","Forms","booleanYes","booleanNo","asFieldset","bottom","Provider","onChange","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\nexport type Props = FieldProps<unknown> & {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nfunction Toggle(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    handleChange,\n  } = useDataValue(props)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    disabled,\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={label}\n            checked={isOn}\n            disabled={disabled}\n            status={error ? 'error' : undefined}\n            on_change={handleCheckboxChange}\n            {...pickSpacingProps(props)}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={error ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps} asFieldset>\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : undefined,\n                onChange: handleToggleChange,\n                status: error ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={\n                  textOn ?? sharedContext?.translation.Forms.booleanYes\n                }\n                value=\"on\"\n              />\n              <ToggleButton\n                text={\n                  textOff ?? sharedContext?.translation.Forms.booleanNo\n                }\n                value=\"off\"\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={error ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","classnames","ButtonRow","FieldBlock","useDataValue","pickSpacingProps","SharedContext","ToggleButtonGroupContext","Toggle","props","sharedContext","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","info","warning","error","hasError","ariaAttributes","handleChange","handleCheckboxChange","checked","handleToggleChange","cn","fieldBlockPropsWithoutLabel","_objectSpread","forId","fieldBlockProps","isOn","isOff","createElement","_extends","status","undefined","on_change","text","translation","Forms","booleanYes","booleanNo","asFieldset","bottom","Provider","onChange","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\nexport type Props = FieldProps<unknown> & {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nfunction Toggle(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    ariaAttributes,\n    handleChange,\n  } = useDataValue(props)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    disabled,\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={label}\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            on_change={handleCheckboxChange}\n            {...ariaAttributes}\n            {...pickSpacingProps(props)}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...ariaAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps} asFieldset>\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : undefined,\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={\n                  textOn ?? sharedContext?.translation.Forms.booleanYes\n                }\n                value=\"on\"\n                {...ariaAttributes}\n              />\n              <ToggleButton\n                text={\n                  textOff ?? sharedContext?.translation.Forms.booleanNo\n                }\n                value=\"off\"\n                {...ariaAttributes}\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...ariaAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ComponentProps, FieldProps } from '../types';
-export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' | 'info' | 'warning' | 'error' | 'disabled'> & {
+export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' | 'labelDescription' | 'info' | 'warning' | 'error' | 'disabled'> & {
     forId?: string;
     contentClassName?: string;
     children: React.ReactNode;
@@ -9,7 +9,7 @@ export type Props = Pick<FieldProps, keyof ComponentProps | 'layout' | 'label' |
     /** Width of outer block element */
     width?: false | 'small' | 'medium' | 'large' | 'stretch';
     /** Width of contents block, while label etc can be wider if space is available */
-    contentsWidth?: 'small' | 'medium' | 'large' | 'stretch';
+    contentWidth?: 'small' | 'medium' | 'large' | 'stretch';
     /** Typography size */
     size?: 'medium' | 'large';
 } & React.HTMLAttributes<HTMLDivElement>;

package/es/extensions/forms/FieldBlock/FieldBlock.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["className", "forId", "layout", "label", "asFieldset", "info", "warning", "error", "disabled", "width", "contentsWidth", "size", "contentClassName", "children"];
+const _excluded = ["className", "forId", "layout", "label", "labelDescription", "asFieldset", "info", "warning", "error", "disabled", "width", "contentWidth", "size", "contentClassName", "children"];
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -21,13 +21,14 @@ function FieldBlock(props) {
       forId,
       layout = 'vertical',
       label,
+      labelDescription,
       asFieldset,
       info,
       warning,
       error: errorProp,
       disabled,
       width,
-      contentsWidth,
+      contentWidth,
       size,
       contentClassName,
       children
@@ -110,8 +111,12 @@ function FieldBlock(props) {
     className: mainClasses
   }, rest), React.createElement("div", {
     className: gridClasses
-  }, label && React.createElement(FormLabel, labelProps, label), React.createElement("div", {
-    className: classnames('dnb-forms-field-block__contents', contentClassName, contentsWidth !== undefined && `dnb-forms-field-block__contents--width-${contentsWidth}`)
+  }, labelDescription ? React.createElement("div", {
+    className: "dnb-forms-field-block__label"
+  }, label || labelDescription ? React.createElement(FormLabel, labelProps, label, labelDescription && React.createElement("span", {
+    className: "dnb-forms-field-block__label-description"
+  }, labelDescription)) : React.createElement(React.Fragment, null, "\xA0")) : label && React.createElement(FormLabel, labelProps, label), React.createElement("div", {
+    className: classnames('dnb-forms-field-block__contents', contentClassName, contentWidth !== undefined && `dnb-forms-field-block__contents--width-${contentWidth}`)
   }, children), stateStatus && React.createElement("div", {
     className: "dnb-forms-field-block__status"
   }, React.createElement(FormStatus, {

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

@@ -1 +1 @@
-{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","asFieldset","info","warning","error","errorProp","disabled","width","contentsWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","identifier","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","useEnableFieldset","state","stateStatus","labelProps","element","space","top","bottom","createElement","Provider","value","_extends","id","text","toString","result","count","child","_child$props","_child$type","type","Boolean","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport { findElementInChildren } from '../../../shared/component-helper'\nimport type { FormLabelAllProps } from '../../../components/FormLabel'\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'disabled'\n> & {\n  forId?: string\n  contentClassName?: string\n  children: React.ReactNode\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentsWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  /** Typography size */\n  size?: 'medium' | 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    disabled,\n    width,\n    contentsWidth,\n    size,\n    contentClassName,\n    children,\n    ...rest\n  } = props\n\n  const [fieldErrorRecord, setFieldErrorRecord] = useState<\n    Record<string, FormError>\n  >({})\n  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n    Record<string, boolean>\n  >({})\n\n  const setError = useCallback(\n    (identifier, error) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setError(identifier, error)\n        return\n      }\n\n      setFieldErrorRecord((existing) => {\n        if (error) {\n          return {\n            ...existing,\n            [identifier]: error,\n          }\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const setShowError = useCallback(\n    (identifier, show) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setShowError(identifier, show)\n        return\n      }\n\n      setShowFieldErrorRecord((existing) => {\n        if (show) {\n          return {\n            ...existing,\n            [identifier]: true,\n          }\n        } else {\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const error = useMemo(() => {\n    if (errorProp) {\n      return errorProp\n    }\n    const errors = Object.entries(fieldErrorRecord)\n      .filter(([identifier]) => showFieldErrorRecord[identifier] === true)\n      .map(([, error]) => error)\n    return errors.length > 0\n      ? new Error(errors.map((error) => error.message).join(' | '))\n      : undefined\n  }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const state = error || warning || info\n  const stateStatus = error\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const labelProps: FormLabelAllProps = {\n    element: enableFieldset ? 'legend' : 'label',\n    forId: enableFieldset ? undefined : forId,\n    space: { top: 0, bottom: 'x-small' },\n    size,\n    disabled,\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setError,\n        setShowError,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {label && <FormLabel {...labelProps}>{label}</FormLabel>}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentsWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentsWidth}`,\n              contentClassName\n            )}\n          >\n            {children}\n          </div>\n\n          {stateStatus && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state={stateStatus}\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  error?.message ||\n                  (state instanceof Error && state.message) ||\n                  (state instanceof FormError && state.message) ||\n                  state?.toString()\n                }\n                label={label as string}\n                space={{ top: 'x-small' }}\n              />\n            </div>\n          )}\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nfunction useEnableFieldset({\n  label,\n  asFieldset,\n  children,\n  nestedFieldBlockContext,\n}) {\n  return useMemo(() => {\n    if (asFieldset === false) {\n      return false\n    }\n\n    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          child?.props?.label ||\n          child?.type?.['_formElement'] === true\n        ) {\n          count++\n        }\n        if (count > 1) {\n          return (result = true)\n        }\n      })\n    }\n\n    return Boolean(result)\n  }, [asFieldset, children, label, nestedFieldBlockContext])\n}\n\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}
+{"version":3,"file":"FieldBlock.js","names":["React","useMemo","useContext","useState","useCallback","classnames","Space","FormLabel","FormStatus","FormError","FieldBlockContext","findElementInChildren","FieldBlock","props","nestedFieldBlockContext","className","forId","layout","label","labelDescription","asFieldset","info","warning","error","errorProp","disabled","width","contentWidth","size","contentClassName","children","rest","_objectWithoutProperties","_excluded","fieldErrorRecord","setFieldErrorRecord","showFieldErrorRecord","setShowFieldErrorRecord","setError","identifier","existing","_objectSpread","removed","newRecord","map","_toPropertyKey","setShowError","show","errors","Object","entries","filter","length","Error","message","join","undefined","mainClasses","gridClasses","enableFieldset","useEnableFieldset","state","stateStatus","labelProps","element","space","top","bottom","createElement","Provider","value","_extends","Fragment","id","text","toString","result","count","child","_child$props","_child$type","type","Boolean","_supportsSpacingProps"],"sources":["../../../../../src/extensions/forms/FieldBlock/FieldBlock.tsx"],"sourcesContent":["import React, { useMemo, useContext, useState, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { Space, FormLabel, FormStatus } from '../../../components'\nimport { FormError, ComponentProps, FieldProps } from '../types'\nimport FieldBlockContext from './FieldBlockContext'\nimport { findElementInChildren } from '../../../shared/component-helper'\nimport type { FormLabelAllProps } from '../../../components/FormLabel'\n\nexport type Props = Pick<\n  FieldProps,\n  | keyof ComponentProps\n  | 'layout'\n  | 'label'\n  | 'labelDescription'\n  | 'info'\n  | 'warning'\n  | 'error'\n  | 'disabled'\n> & {\n  forId?: string\n  contentClassName?: string\n  children: React.ReactNode\n  /** Use true if you have more than one form element */\n  asFieldset?: boolean\n  /** Width of outer block element */\n  width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  /** Width of contents block, while label etc can be wider if space is available */\n  contentWidth?: 'small' | 'medium' | 'large' | 'stretch'\n  /** Typography size */\n  size?: 'medium' | 'large'\n} & React.HTMLAttributes<HTMLDivElement>\n\nfunction FieldBlock(props: Props) {\n  const nestedFieldBlockContext = useContext(FieldBlockContext)\n\n  const {\n    className,\n    forId,\n    layout = 'vertical',\n    label,\n    labelDescription,\n    asFieldset,\n    info,\n    warning,\n    error: errorProp,\n    disabled,\n    width,\n    contentWidth,\n    size,\n    contentClassName,\n    children,\n    ...rest\n  } = props\n\n  const [fieldErrorRecord, setFieldErrorRecord] = useState<\n    Record<string, FormError>\n  >({})\n  const [showFieldErrorRecord, setShowFieldErrorRecord] = useState<\n    Record<string, boolean>\n  >({})\n\n  const setError = useCallback(\n    (identifier, error) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setError(identifier, error)\n        return\n      }\n\n      setFieldErrorRecord((existing) => {\n        if (error) {\n          return {\n            ...existing,\n            [identifier]: error,\n          }\n        } else {\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const setShowError = useCallback(\n    (identifier, show) => {\n      if (nestedFieldBlockContext) {\n        // If this FieldBlock is inside another one, forward the call to the outer one\n        nestedFieldBlockContext.setShowError(identifier, show)\n        return\n      }\n\n      setShowFieldErrorRecord((existing) => {\n        if (show) {\n          return {\n            ...existing,\n            [identifier]: true,\n          }\n        } else {\n          const { [identifier]: removed, ...newRecord } = existing\n          return newRecord\n        }\n      })\n    },\n    [nestedFieldBlockContext]\n  )\n\n  const error = useMemo(() => {\n    if (errorProp) {\n      return errorProp\n    }\n    const errors = Object.entries(fieldErrorRecord)\n      .filter(([identifier]) => showFieldErrorRecord[identifier] === true)\n      .map(([, error]) => error)\n    return errors.length > 0\n      ? new Error(errors.map((error) => error.message).join(' | '))\n      : undefined\n  }, [errorProp, fieldErrorRecord, showFieldErrorRecord])\n\n  const mainClasses = classnames(\n    'dnb-forms-field-block',\n    width !== undefined && `dnb-forms-field-block--width-${width}`,\n    className\n  )\n  const gridClasses = classnames(\n    'dnb-forms-field-block__grid',\n    `dnb-forms-field-block--layout-${layout}`\n  )\n\n  // A child component with a label was found, use fieldset/legend instead of div/label\n  const enableFieldset = useEnableFieldset({\n    label,\n    asFieldset,\n    children,\n    nestedFieldBlockContext,\n  })\n\n  const state = error || warning || info\n  const stateStatus = error\n    ? 'error'\n    : warning\n    ? 'warn'\n    : info\n    ? 'info'\n    : null\n\n  const labelProps: FormLabelAllProps = {\n    element: enableFieldset ? 'legend' : 'label',\n    forId: enableFieldset ? undefined : forId,\n    space: { top: 0, bottom: 'x-small' },\n    size,\n    disabled,\n  }\n\n  return (\n    <FieldBlockContext.Provider\n      value={{\n        setError,\n        setShowError,\n      }}\n    >\n      <Space\n        element={enableFieldset ? 'fieldset' : 'div'} // use fieldset and legend to enhance a11y\n        className={mainClasses}\n        {...rest}\n      >\n        <div className={gridClasses}>\n          {labelDescription ? (\n            <div className=\"dnb-forms-field-block__label\">\n              {label || labelDescription ? (\n                <FormLabel {...labelProps}>\n                  {label}\n                  {labelDescription && (\n                    <span className=\"dnb-forms-field-block__label-description\">\n                      {labelDescription}\n                    </span>\n                  )}\n                </FormLabel>\n              ) : (\n                <>&nbsp;</>\n              )}\n            </div>\n          ) : (\n            label && <FormLabel {...labelProps}>{label}</FormLabel>\n          )}\n\n          <div\n            className={classnames(\n              'dnb-forms-field-block__contents',\n              contentWidth !== undefined &&\n                `dnb-forms-field-block__contents--width-${contentWidth}`,\n              contentClassName\n            )}\n          >\n            {children}\n          </div>\n\n          {stateStatus && (\n            <div className=\"dnb-forms-field-block__status\">\n              <FormStatus\n                state={stateStatus}\n                id={forId ? `${forId}-form-status` : undefined}\n                text={\n                  error?.message ||\n                  (state instanceof Error && state.message) ||\n                  (state instanceof FormError && state.message) ||\n                  state?.toString()\n                }\n                label={label as string}\n                space={{ top: 'x-small' }}\n              />\n            </div>\n          )}\n        </div>\n      </Space>\n    </FieldBlockContext.Provider>\n  )\n}\n\nfunction useEnableFieldset({\n  label,\n  asFieldset,\n  children,\n  nestedFieldBlockContext,\n}) {\n  return useMemo(() => {\n    if (asFieldset === false) {\n      return false\n    }\n\n    let result = asFieldset\n\n    if (label && !result && !nestedFieldBlockContext) {\n      let count = 0\n\n      findElementInChildren(children, (child: React.ReactElement) => {\n        if (\n          child?.props?.label ||\n          child?.type?.['_formElement'] === true\n        ) {\n          count++\n        }\n        if (count > 1) {\n          return (result = true)\n        }\n      })\n    }\n\n    return Boolean(result)\n  }, [asFieldset, children, label, nestedFieldBlockContext])\n}\n\nFieldBlock._supportsSpacingProps = true\nexport default FieldBlock\n"],"mappings":"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"}

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

@@ -65,6 +65,9 @@ fieldset.dnb-forms-field-block:not([class*=space__left]) {
   justify-content: space-between;
   align-items: center;
 }
+.dnb-forms-field-block__label-description {
+  margin-left: 0.3em;
+}
 .dnb-forms-field-block__status {
   grid-area: status;
 }

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

@@ -1 +1 @@
-:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}fieldset.dnb-forms-field-block{border:none;padding:0}fieldset.dnb-forms-field-block:not([class*=space__top]){margin-top:0}fieldset.dnb-forms-field-block:not([class*=space__right]){margin-right:0}fieldset.dnb-forms-field-block:not([class*=space__bottom]){margin-bottom:0}fieldset.dnb-forms-field-block:not([class*=space__left]){margin-left:0}.dnb-forms-field-block__grid{display:grid}@media screen and (max-width:40em){.dnb-forms-field-block__grid{flex-wrap:wrap}.dnb-forms-field-block__grid>.dnb-form-label{margin-bottom:.5rem;margin-top:.5rem}}.dnb-forms-field-block--layout-vertical{grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{grid-template-areas:"label contents" "status status";grid-template-columns:fit-content(100%) auto}.dnb-forms-field-block--width-stretch{flex-grow:1}@media screen and (min-width:30em){.dnb-forms-field-block--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block--width-large{width:var(--forms-field-width--large)}}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}@media screen and (min-width:30em){.dnb-forms-field-block__contents--width-small{width:var(--forms-field-width--small)}.dnb-forms-field-block__contents--width-medium{width:var(--forms-field-width--medium)}.dnb-forms-field-block__contents--width-large{width:var(--forms-field-width--large)}}

package/es/extensions/forms/FieldBlock/style/dnb-field-block.scss

@@ -54,6 +54,10 @@ fieldset.dnb-forms-field-block {
     align-items: center;
   }
 
+  &__label-description {
+    margin-left: 0.3em;
+  }
+
   &__status {
     grid-area: status;
   }

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

@@ -0,0 +1,4 @@
+.dnb-forms-field-block__label-description {
+  color: var(--color-gray-dark);
+  font-size: var(--font-size-small);
+}

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

@@ -0,0 +1 @@
+.dnb-forms-field-block__label-description{color:var(--color-gray-dark);font-size:var(--font-size-small)}

package/es/extensions/forms/FieldBlock/style/themes/dnb-field-block-sbanken.scss

@@ -0,0 +1,6 @@
+.dnb-forms-field-block {
+  &__label-description {
+    color: var(--color-gray-dark);
+    font-size: var(--font-size-small);
+  }
+}

package/es/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.css

@@ -0,0 +1,4 @@
+.dnb-forms-field-block__label-description {
+  color: var(--color-black-55);
+  font-size: var(--font-size-small);
+}

package/es/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.min.css

@@ -0,0 +1 @@
+.dnb-forms-field-block__label-description{color:var(--color-black-55);font-size:var(--font-size-small)}

package/es/extensions/forms/FieldBlock/style/themes/dnb-field-block-theme-ui.scss

@@ -0,0 +1,6 @@
+.dnb-forms-field-block {
+  &__label-description {
+    color: var(--color-black-55);
+    font-size: var(--font-size-small);
+  }
+}

package/es/extensions/forms/Form/hooks/useData.js

@@ -1,28 +1,31 @@
 "use client";
 
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useReducer, useRef } from 'react';
 import pointer from 'json-pointer';
 import { useSharedState } from '../../../../shared/helpers/useSharedState';
 export default function useData(id, data = undefined) {
+  var _sharedStateRef$curre5;
   const initialDataRef = useRef(data);
-  const sharedState = useSharedState(id, data);
+  const sharedStateRef = useRef(null);
+  const [, forceUpdate] = useReducer(() => ({}), {});
+  sharedStateRef.current = useSharedState(id, data, forceUpdate);
   const updatePath = useCallback((path, fn) => {
-    var _sharedState$update;
-    const existingData = sharedState.data || {};
+    var _sharedStateRef$curre, _sharedStateRef$curre2;
+    const existingData = sharedStateRef.current.data || {};
     const existingValue = pointer.has(existingData, path) ? pointer.get(existingData, path) : undefined;
     const newValue = fn(existingValue);
     pointer.set(existingData, path, newValue);
-    (_sharedState$update = sharedState.update) === null || _sharedState$update === void 0 ? void 0 : _sharedState$update.call(sharedState, existingData);
-  }, [sharedState]);
+    (_sharedStateRef$curre = sharedStateRef.current) === null || _sharedStateRef$curre === void 0 ? void 0 : (_sharedStateRef$curre2 = _sharedStateRef$curre.update) === null || _sharedStateRef$curre2 === void 0 ? void 0 : _sharedStateRef$curre2.call(_sharedStateRef$curre, existingData);
+  }, []);
   useEffect(() => {
     if (data && data !== initialDataRef.current) {
-      var _sharedState$update2;
+      var _sharedStateRef$curre3, _sharedStateRef$curre4;
       initialDataRef.current = data;
-      (_sharedState$update2 = sharedState.update) === null || _sharedState$update2 === void 0 ? void 0 : _sharedState$update2.call(sharedState, data);
+      (_sharedStateRef$curre3 = sharedStateRef.current) === null || _sharedStateRef$curre3 === void 0 ? void 0 : (_sharedStateRef$curre4 = _sharedStateRef$curre3.update) === null || _sharedStateRef$curre4 === void 0 ? void 0 : _sharedStateRef$curre4.call(_sharedStateRef$curre3, data);
     }
-  }, [data, sharedState]);
+  }, [data]);
   return {
-    data: sharedState.data,
+    data: (_sharedStateRef$curre5 = sharedStateRef.current) === null || _sharedStateRef$curre5 === void 0 ? void 0 : _sharedStateRef$curre5.data,
     update: updatePath
   };
 }

package/es/extensions/forms/Form/hooks/useData.js.map

@@ -1 +1 @@
-{"version":3,"file":"useData.js","names":["useCallback","useEffect","useRef","pointer","useSharedState","useData","id","data","undefined","initialDataRef","sharedState","updatePath","path","fn","_sharedState$update","existingData","existingValue","has","get","newValue","set","update","call","current","_sharedState$update2"],"sources":["../../../../../../src/extensions/forms/Form/hooks/useData.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react'\nimport pointer from 'json-pointer'\nimport { useSharedState } from '../../../../shared/helpers/useSharedState'\nimport type { Path } from '../../DataContext/Provider'\n\ntype PathImpl<T, P extends string> = P extends `${infer Key}/${infer Rest}`\n  ? Key extends keyof T\n    ? Rest extends ''\n      ? T[Key]\n      : PathImpl<T[Key], Rest>\n    : never\n  : T[P & keyof T]\n\ntype PathType<T, P extends string> = P extends `/${infer Rest}`\n  ? PathImpl<T, Rest>\n  : never\n\ntype UseDataReturnUpdate<Data> = <P extends Path>(\n  path: P,\n  fn: (value: PathType<Data, P>) => unknown\n) => void\n\ntype UseDataReturn<Data> = {\n  data: Data\n  update: UseDataReturnUpdate<Data>\n}\n\nexport default function useData<Data>(\n  id: string,\n  data: Data = undefined\n): UseDataReturn<Data> {\n  const initialDataRef = useRef(data)\n  const sharedState = useSharedState<Data>(id, data)\n\n  const updatePath = useCallback<UseDataReturnUpdate<Data>>(\n    (path, fn) => {\n      const existingData = sharedState.data || ({} as Data)\n      const existingValue = pointer.has(existingData, path)\n        ? pointer.get(existingData, path)\n        : undefined\n\n      // get new value\n      const newValue = fn(existingValue)\n\n      // update existing data\n      pointer.set(existingData, path, newValue)\n\n      // update provider\n      sharedState.update?.(existingData)\n    },\n    [sharedState]\n  )\n\n  // when initial data changes, update the shared state\n  useEffect(() => {\n    if (data && data !== initialDataRef.current) {\n      initialDataRef.current = data\n      sharedState.update?.(data)\n    }\n  }, [data, sharedState])\n\n  return { data: sharedState.data, update: updatePath }\n}\n"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACtD,OAAOC,OAAO,MAAM,cAAc;AAClC,SAASC,cAAc,QAAQ,2CAA2C;AAyB1E,eAAe,SAASC,OAAOA,CAC7BC,EAAU,EACVC,IAAU,GAAGC,SAAS,EACD;EACrB,MAAMC,cAAc,GAAGP,MAAM,CAACK,IAAI,CAAC;EACnC,MAAMG,WAAW,GAAGN,cAAc,CAAOE,EAAE,EAAEC,IAAI,CAAC;EAElD,MAAMI,UAAU,GAAGX,WAAW,CAC5B,CAACY,IAAI,EAAEC,EAAE,KAAK;IAAA,IAAAC,mBAAA;IACZ,MAAMC,YAAY,GAAGL,WAAW,CAACH,IAAI,IAAK,CAAC,CAAU;IACrD,MAAMS,aAAa,GAAGb,OAAO,CAACc,GAAG,CAACF,YAAY,EAAEH,IAAI,CAAC,GACjDT,OAAO,CAACe,GAAG,CAACH,YAAY,EAAEH,IAAI,CAAC,GAC/BJ,SAAS;IAGb,MAAMW,QAAQ,GAAGN,EAAE,CAACG,aAAa,CAAC;IAGlCb,OAAO,CAACiB,GAAG,CAACL,YAAY,EAAEH,IAAI,EAAEO,QAAQ,CAAC;IAGzC,CAAAL,mBAAA,GAAAJ,WAAW,CAACW,MAAM,cAAAP,mBAAA,uBAAlBA,mBAAA,CAAAQ,IAAA,CAAAZ,WAAW,EAAUK,YAAY,CAAC;EACpC,CAAC,EACD,CAACL,WAAW,CACd,CAAC;EAGDT,SAAS,CAAC,MAAM;IACd,IAAIM,IAAI,IAAIA,IAAI,KAAKE,cAAc,CAACc,OAAO,EAAE;MAAA,IAAAC,oBAAA;MAC3Cf,cAAc,CAACc,OAAO,GAAGhB,IAAI;MAC7B,CAAAiB,oBAAA,GAAAd,WAAW,CAACW,MAAM,cAAAG,oBAAA,uBAAlBA,oBAAA,CAAAF,IAAA,CAAAZ,WAAW,EAAUH,IAAI,CAAC;IAC5B;EACF,CAAC,EAAE,CAACA,IAAI,EAAEG,WAAW,CAAC,CAAC;EAEvB,OAAO;IAAEH,IAAI,EAAEG,WAAW,CAACH,IAAI;IAAEc,MAAM,EAAEV;EAAW,CAAC;AACvD"}
+{"version":3,"file":"useData.js","names":["useCallback","useEffect","useReducer","useRef","pointer","useSharedState","useData","id","data","undefined","_sharedStateRef$curre5","initialDataRef","sharedStateRef","forceUpdate","current","updatePath","path","fn","_sharedStateRef$curre","_sharedStateRef$curre2","existingData","existingValue","has","get","newValue","set","update","call","_sharedStateRef$curre3","_sharedStateRef$curre4"],"sources":["../../../../../../src/extensions/forms/Form/hooks/useData.tsx"],"sourcesContent":["import { useCallback, useEffect, useReducer, useRef } from 'react'\nimport pointer from 'json-pointer'\nimport { useSharedState } from '../../../../shared/helpers/useSharedState'\nimport type { Path } from '../../DataContext/Provider'\n\ntype PathImpl<T, P extends string> = P extends `${infer Key}/${infer Rest}`\n  ? Key extends keyof T\n    ? Rest extends ''\n      ? T[Key]\n      : PathImpl<T[Key], Rest>\n    : never\n  : T[P & keyof T]\n\ntype PathType<T, P extends string> = P extends `/${infer Rest}`\n  ? PathImpl<T, Rest>\n  : never\n\ntype UseDataReturnUpdate<Data> = <P extends Path>(\n  path: P,\n  fn: (value: PathType<Data, P>) => unknown\n) => void\n\ntype UseDataReturn<Data> = {\n  data: Data\n  update: UseDataReturnUpdate<Data>\n}\n\nexport default function useData<Data>(\n  id: string,\n  data: Data = undefined\n): UseDataReturn<Data> {\n  const initialDataRef = useRef(data)\n  const sharedStateRef = useRef(null)\n  const [, forceUpdate] = useReducer(() => ({}), {})\n  sharedStateRef.current = useSharedState<Data>(id, data, forceUpdate)\n\n  const updatePath = useCallback<UseDataReturnUpdate<Data>>((path, fn) => {\n    const existingData = sharedStateRef.current.data || ({} as Data)\n    const existingValue = pointer.has(existingData, path)\n      ? pointer.get(existingData, path)\n      : undefined\n\n    // get new value\n    const newValue = fn(existingValue)\n\n    // update existing data\n    pointer.set(existingData, path, newValue)\n\n    // update provider\n    sharedStateRef.current?.update?.(existingData)\n  }, [])\n\n  // when initial data changes, update the shared state\n  useEffect(() => {\n    if (data && data !== initialDataRef.current) {\n      initialDataRef.current = data\n      sharedStateRef.current?.update?.(data)\n    }\n  }, [data])\n\n  return { data: sharedStateRef.current?.data, update: updatePath }\n}\n"],"mappings":";;AAAA,SAASA,WAAW,EAAEC,SAAS,EAAEC,UAAU,EAAEC,MAAM,QAAQ,OAAO;AAClE,OAAOC,OAAO,MAAM,cAAc;AAClC,SAASC,cAAc,QAAQ,2CAA2C;AAyB1E,eAAe,SAASC,OAAOA,CAC7BC,EAAU,EACVC,IAAU,GAAGC,SAAS,EACD;EAAA,IAAAC,sBAAA;EACrB,MAAMC,cAAc,GAAGR,MAAM,CAACK,IAAI,CAAC;EACnC,MAAMI,cAAc,GAAGT,MAAM,CAAC,IAAI,CAAC;EACnC,MAAM,GAAGU,WAAW,CAAC,GAAGX,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;EAClDU,cAAc,CAACE,OAAO,GAAGT,cAAc,CAAOE,EAAE,EAAEC,IAAI,EAAEK,WAAW,CAAC;EAEpE,MAAME,UAAU,GAAGf,WAAW,CAA4B,CAACgB,IAAI,EAAEC,EAAE,KAAK;IAAA,IAAAC,qBAAA,EAAAC,sBAAA;IACtE,MAAMC,YAAY,GAAGR,cAAc,CAACE,OAAO,CAACN,IAAI,IAAK,CAAC,CAAU;IAChE,MAAMa,aAAa,GAAGjB,OAAO,CAACkB,GAAG,CAACF,YAAY,EAAEJ,IAAI,CAAC,GACjDZ,OAAO,CAACmB,GAAG,CAACH,YAAY,EAAEJ,IAAI,CAAC,GAC/BP,SAAS;IAGb,MAAMe,QAAQ,GAAGP,EAAE,CAACI,aAAa,CAAC;IAGlCjB,OAAO,CAACqB,GAAG,CAACL,YAAY,EAAEJ,IAAI,EAAEQ,QAAQ,CAAC;IAGzC,CAAAN,qBAAA,GAAAN,cAAc,CAACE,OAAO,cAAAI,qBAAA,wBAAAC,sBAAA,GAAtBD,qBAAA,CAAwBQ,MAAM,cAAAP,sBAAA,uBAA9BA,sBAAA,CAAAQ,IAAA,CAAAT,qBAAA,EAAiCE,YAAY,CAAC;EAChD,CAAC,EAAE,EAAE,CAAC;EAGNnB,SAAS,CAAC,MAAM;IACd,IAAIO,IAAI,IAAIA,IAAI,KAAKG,cAAc,CAACG,OAAO,EAAE;MAAA,IAAAc,sBAAA,EAAAC,sBAAA;MAC3ClB,cAAc,CAACG,OAAO,GAAGN,IAAI;MAC7B,CAAAoB,sBAAA,GAAAhB,cAAc,CAACE,OAAO,cAAAc,sBAAA,wBAAAC,sBAAA,GAAtBD,sBAAA,CAAwBF,MAAM,cAAAG,sBAAA,uBAA9BA,sBAAA,CAAAF,IAAA,CAAAC,sBAAA,EAAiCpB,IAAI,CAAC;IACxC;EACF,CAAC,EAAE,CAACA,IAAI,CAAC,CAAC;EAEV,OAAO;IAAEA,IAAI,GAAAE,sBAAA,GAAEE,cAAc,CAACE,OAAO,cAAAJ,sBAAA,uBAAtBA,sBAAA,CAAwBF,IAAI;IAAEkB,MAAM,EAAEX;EAAW,CAAC;AACnE"}

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

@@ -14,6 +14,7 @@ function ArrayComponent(props) {
     layout = 'vertical',
     placeholder,
     label,
+    labelDescription,
     path,
     value: arrayValue,
     info,
@@ -46,11 +47,12 @@ function ArrayComponent(props) {
     className: classnames('dnb-forms-field-number', className),
     layout: layout,
     label: label,
+    labelDescription: labelDescription,
     info: info,
     warning: warning,
     error: error,
     width: width,
-    contentsWidth: width !== false ? width : undefined
+    contentWidth: width !== false ? width : undefined
   }, pickSpacingProps(props)), React.createElement(Flex.Container, pickFlexContainerProps(props, {
     spacing: 'small'
   }), arrayValue === emptyValue ? React.createElement("em", null, placeholder) : elementData.map(({

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

@@ -1 +1 @@
-{"version":3,"file":"Array.js","names":["React","useMemo","useCallback","classnames","pointer","IterateElementContext","FieldBlock","useDataValue","pickSpacingProps","pickFlexContainerProps","Flex","ArrayComponent","props","className","layout","placeholder","label","path","value","arrayValue","info","warning","error","emptyValue","width","handleChange","children","elementData","map","elementValue","elementIndex","handleElementChange","newArrayValue","structuredClone","set","handleRemoveElement","splice","handlePush","element","createElement","_extends","contentsWidth","undefined","Container","spacing","Provider","key","index","handleRemove","Array","isArray","childElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport pointer from 'json-pointer'\nimport IterateElementContext from '../IterateElementContext'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport {\n  BasicProps as FlexContainerProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport Flex from '../../../../components/flex/Flex'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<unknown[], undefined, ErrorMessages> &\n  Omit<FieldBlockProps, 'children'> &\n  Omit<FlexContainerProps, 'children' | 'width'> & {\n    children:\n      | React.ReactNode\n      | ((value: any, index: number) => React.ReactNode)\n      | Array<\n          | React.ReactNode\n          | ((value: any, index: number) => React.ReactNode)\n        >\n  }\n\nfunction ArrayComponent(props: Props) {\n  const {\n    className,\n    layout = 'vertical',\n    placeholder,\n    label,\n    path,\n    value: arrayValue,\n    info,\n    warning,\n    error,\n    emptyValue,\n    width,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const elementData: {\n    elementValue: unknown\n    handleElementChange: (path: string, value: unknown) => void\n    handleRemoveElement: () => void\n  }[] = useMemo(() => {\n    return (arrayValue ?? []).map((elementValue, elementIndex) => ({\n      elementValue,\n      handleElementChange: (path, value) => {\n        const newArrayValue = structuredClone(arrayValue)\n        pointer.set(newArrayValue, path, value)\n        handleChange?.(newArrayValue)\n      },\n      handleRemoveElement: () => {\n        const newArrayValue = structuredClone(arrayValue)\n        newArrayValue.splice(elementIndex, 1)\n        handleChange?.(newArrayValue)\n      },\n    }))\n  }, [arrayValue, handleChange])\n\n  const handlePush = useCallback(\n    (element: unknown) => {\n      handleChange([...(arrayValue ?? []), element])\n    },\n    [arrayValue, handleChange]\n  )\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      layout={layout}\n      label={label}\n      info={info}\n      warning={warning}\n      error={error}\n      width={width}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Container\n        {...pickFlexContainerProps(props as FlexContainerProps, {\n          spacing: 'small',\n        })}\n      >\n        {arrayValue === emptyValue ? (\n          <em>{placeholder}</em>\n        ) : (\n          elementData.map(\n            (\n              { elementValue, handleElementChange, handleRemoveElement },\n              elementIndex\n            ) => {\n              return (\n                <IterateElementContext.Provider\n                  key={`element-${elementIndex}`}\n                  value={{\n                    index: elementIndex,\n                    value: elementValue,\n                    path,\n                    handleChange: handleElementChange,\n                    handleRemove: handleRemoveElement,\n                    handlePush,\n                  }}\n                >\n                  {Array.isArray(children)\n                    ? children.map((childElement) =>\n                        typeof childElement === 'function'\n                          ? childElement(elementValue, elementIndex)\n                          : childElement\n                      )\n                    : typeof children === 'function'\n                    ? children(elementValue, elementIndex)\n                    : children}\n                </IterateElementContext.Provider>\n              )\n            }\n          )\n        )}\n      </Flex.Container>\n    </FieldBlock>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,WAAW,QAAQ,OAAO;AACnD,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,OAAO,MAAM,cAAc;AAClC,OAAOC,qBAAqB,MAAM,0BAA0B;AAC5D,OAAOC,UAAU,MAAoC,kBAAkB;AACvE,SAASC,YAAY,QAAQ,aAAa;AAE1C,SAASC,gBAAgB,QAAQ,mCAAmC;AACpE,SAEEC,sBAAsB,QACjB,uCAAuC;AAC9C,OAAOC,IAAI,MAAM,kCAAkC;AAoBnD,SAASC,cAAcA,CAACC,KAAY,EAAE;EACpC,MAAM;IACJC,SAAS;IACTC,MAAM,GAAG,UAAU;IACnBC,WAAW;IACXC,KAAK;IACLC,IAAI;IACJC,KAAK,EAAEC,UAAU;IACjBC,IAAI;IACJC,OAAO;IACPC,KAAK;IACLC,UAAU;IACVC,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,GAAGnB,YAAY,CAACK,KAAK,CAAC;EAEvB,MAAMe,WAIH,GAAG1B,OAAO,CAAC,MAAM;IAClB,OAAO,CAACkB,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAE,EAAES,GAAG,CAAC,CAACC,YAAY,EAAEC,YAAY,MAAM;MAC7DD,YAAY;MACZE,mBAAmB,EAAEA,CAACd,IAAI,EAAEC,KAAK,KAAK;QACpC,MAAMc,aAAa,GAAGC,eAAe,CAACd,UAAU,CAAC;QACjDf,OAAO,CAAC8B,GAAG,CAACF,aAAa,EAAEf,IAAI,EAAEC,KAAK,CAAC;QACvCO,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGO,aAAa,CAAC;MAC/B,CAAC;MACDG,mBAAmB,EAAEA,CAAA,KAAM;QACzB,MAAMH,aAAa,GAAGC,eAAe,CAACd,UAAU,CAAC;QACjDa,aAAa,CAACI,MAAM,CAACN,YAAY,EAAE,CAAC,CAAC;QACrCL,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGO,aAAa,CAAC;MAC/B;IACF,CAAC,CAAC,CAAC;EACL,CAAC,EAAE,CAACb,UAAU,EAAEM,YAAY,CAAC,CAAC;EAE9B,MAAMY,UAAU,GAAGnC,WAAW,CAC3BoC,OAAgB,IAAK;IACpBb,YAAY,CAAC,CAAC,IAAIN,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAE,CAAC,EAAEmB,OAAO,CAAC,CAAC;EAChD,CAAC,EACD,CAACnB,UAAU,EAAEM,YAAY,CAC3B,CAAC;EAED,OACEzB,KAAA,CAAAuC,aAAA,CAACjC,UAAU,EAAAkC,QAAA;IACT3B,SAAS,EAAEV,UAAU,CAAC,wBAAwB,EAAEU,SAAS,CAAE;IAC3DC,MAAM,EAAEA,MAAO;IACfE,KAAK,EAAEA,KAAM;IACbI,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAEA,KAAM;IACbE,KAAK,EAAEA,KAAM;IACbiB,aAAa,EAAEjB,KAAK,KAAK,KAAK,GAAGA,KAAK,GAAGkB;EAAU,GAC/ClC,gBAAgB,CAACI,KAAK,CAAC,GAE3BZ,KAAA,CAAAuC,aAAA,CAAC7B,IAAI,CAACiC,SAAS,EACTlC,sBAAsB,CAACG,KAAK,EAAwB;IACtDgC,OAAO,EAAE;EACX,CAAC,CAAC,EAEDzB,UAAU,KAAKI,UAAU,GACxBvB,KAAA,CAAAuC,aAAA,aAAKxB,WAAgB,CAAC,GAEtBY,WAAW,CAACC,GAAG,CACb,CACE;IAAEC,YAAY;IAAEE,mBAAmB;IAAEI;EAAoB,CAAC,EAC1DL,YAAY,KACT;IACH,OACE9B,KAAA,CAAAuC,aAAA,CAAClC,qBAAqB,CAACwC,QAAQ;MAC7BC,GAAG,EAAG,WAAUhB,YAAa,EAAE;MAC/BZ,KAAK,EAAE;QACL6B,KAAK,EAAEjB,YAAY;QACnBZ,KAAK,EAAEW,YAAY;QACnBZ,IAAI;QACJQ,YAAY,EAAEM,mBAAmB;QACjCiB,YAAY,EAAEb,mBAAmB;QACjCE;MACF;IAAE,GAEDY,KAAK,CAACC,OAAO,CAACxB,QAAQ,CAAC,GACpBA,QAAQ,CAACE,GAAG,CAAEuB,YAAY,IACxB,OAAOA,YAAY,KAAK,UAAU,GAC9BA,YAAY,CAACtB,YAAY,EAAEC,YAAY,CAAC,GACxCqB,YACN,CAAC,GACD,OAAOzB,QAAQ,KAAK,UAAU,GAC9BA,QAAQ,CAACG,YAAY,EAAEC,YAAY,CAAC,GACpCJ,QAC0B,CAAC;EAErC,CACF,CAEY,CACN,CAAC;AAEjB;AAEAf,cAAc,CAACyC,qBAAqB,GAAG,IAAI;AAC3C,eAAezC,cAAc"}
+{"version":3,"file":"Array.js","names":["React","useMemo","useCallback","classnames","pointer","IterateElementContext","FieldBlock","useDataValue","pickSpacingProps","pickFlexContainerProps","Flex","ArrayComponent","props","className","layout","placeholder","label","labelDescription","path","value","arrayValue","info","warning","error","emptyValue","width","handleChange","children","elementData","map","elementValue","elementIndex","handleElementChange","newArrayValue","structuredClone","set","handleRemoveElement","splice","handlePush","element","createElement","_extends","contentWidth","undefined","Container","spacing","Provider","key","index","handleRemove","Array","isArray","childElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Iterate/Array/Array.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport pointer from 'json-pointer'\nimport IterateElementContext from '../IterateElementContext'\nimport FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport {\n  BasicProps as FlexContainerProps,\n  pickFlexContainerProps,\n} from '../../../../components/flex/Container'\nimport Flex from '../../../../components/flex/Flex'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<unknown[], undefined, ErrorMessages> &\n  Omit<FieldBlockProps, 'children'> &\n  Omit<FlexContainerProps, 'children' | 'width'> & {\n    children:\n      | React.ReactNode\n      | ((value: any, index: number) => React.ReactNode)\n      | Array<\n          | React.ReactNode\n          | ((value: any, index: number) => React.ReactNode)\n        >\n  }\n\nfunction ArrayComponent(props: Props) {\n  const {\n    className,\n    layout = 'vertical',\n    placeholder,\n    label,\n    labelDescription,\n    path,\n    value: arrayValue,\n    info,\n    warning,\n    error,\n    emptyValue,\n    width,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const elementData: {\n    elementValue: unknown\n    handleElementChange: (path: string, value: unknown) => void\n    handleRemoveElement: () => void\n  }[] = useMemo(() => {\n    return (arrayValue ?? []).map((elementValue, elementIndex) => ({\n      elementValue,\n      handleElementChange: (path, value) => {\n        const newArrayValue = structuredClone(arrayValue)\n        pointer.set(newArrayValue, path, value)\n        handleChange?.(newArrayValue)\n      },\n      handleRemoveElement: () => {\n        const newArrayValue = structuredClone(arrayValue)\n        newArrayValue.splice(elementIndex, 1)\n        handleChange?.(newArrayValue)\n      },\n    }))\n  }, [arrayValue, handleChange])\n\n  const handlePush = useCallback(\n    (element: unknown) => {\n      handleChange([...(arrayValue ?? []), element])\n    },\n    [arrayValue, handleChange]\n  )\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      error={error}\n      width={width}\n      contentWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      <Flex.Container\n        {...pickFlexContainerProps(props as FlexContainerProps, {\n          spacing: 'small',\n        })}\n      >\n        {arrayValue === emptyValue ? (\n          <em>{placeholder}</em>\n        ) : (\n          elementData.map(\n            (\n              { elementValue, handleElementChange, handleRemoveElement },\n              elementIndex\n            ) => {\n              return (\n                <IterateElementContext.Provider\n                  key={`element-${elementIndex}`}\n                  value={{\n                    index: elementIndex,\n                    value: elementValue,\n                    path,\n                    handleChange: handleElementChange,\n                    handleRemove: handleRemoveElement,\n                    handlePush,\n                  }}\n                >\n                  {Array.isArray(children)\n                    ? children.map((childElement) =>\n                        typeof childElement === 'function'\n                          ? childElement(elementValue, elementIndex)\n                          : childElement\n                      )\n                    : typeof children === 'function'\n                    ? children(elementValue, elementIndex)\n                    : children}\n                </IterateElementContext.Provider>\n              )\n            }\n          )\n        )}\n      </Flex.Container>\n    </FieldBlock>\n  )\n}\n\nArrayComponent._supportsSpacingProps = true\nexport default ArrayComponent\n"],"mappings":"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"}

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

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

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

@@ -4,7 +4,7 @@ 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, { useContext } from 'react';
-import StringComponent from '../String';
+import StringValue from '../String';
 import { format, cleanNumber } from '../../../../components/number-format/NumberUtils';
 import SharedContext from '../../../../shared/Context';
 function BankAccountNumber(props) {
@@ -16,7 +16,7 @@ function BankAccountNumber(props) {
       ban: true
     }).toString()
   });
-  return React.createElement(StringComponent, stringValueProps);
+  return React.createElement(StringValue, stringValueProps);
 }
 BankAccountNumber._supportsSpacingProps = true;
 export default BankAccountNumber;

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

@@ -1 +1 @@
-{"version":3,"file":"BankAccountNumber.js","names":["React","useContext","StringComponent","format","cleanNumber","SharedContext","BankAccountNumber","props","_props$label","sharedContext","stringValueProps","_objectSpread","label","inline","undefined","translation","Forms","bankAccountNumberLabel","prepare","value","ban","toString","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport {\n  format,\n  cleanNumber,\n} from '../../../../components/number-format/NumberUtils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps\n\nfunction BankAccountNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const stringValueProps: Props = {\n    ...props,\n    label:\n      props.label ??\n      (props.inline\n        ? undefined\n        : sharedContext?.translation.Forms.bankAccountNumberLabel),\n    prepare: (value) =>\n      format(cleanNumber(value), {\n        ban: true,\n      }).toString(),\n  }\n  return <StringComponent {...stringValueProps} />\n}\n\nBankAccountNumber._supportsSpacingProps = true\nexport default BankAccountNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAyC,WAAW;AAC1E,SACEC,MAAM,EACNC,WAAW,QACN,kDAAkD;AACzD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EACvC,MAAMC,aAAa,GAAGR,UAAU,CAACI,aAAa,CAAC;EAE/C,MAAMK,gBAAuB,GAAAC,aAAA,CAAAA,aAAA,KACxBJ,KAAK;IACRK,KAAK,GAAAJ,YAAA,GACHD,KAAK,CAACK,KAAK,cAAAJ,YAAA,cAAAA,YAAA,GACVD,KAAK,CAACM,MAAM,GACTC,SAAS,GACTL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC,sBAAuB;IAC9DC,OAAO,EAAGC,KAAK,IACbhB,MAAM,CAACC,WAAW,CAACe,KAAK,CAAC,EAAE;MACzBC,GAAG,EAAE;IACP,CAAC,CAAC,CAACC,QAAQ,CAAC;EAAC,EAChB;EACD,OAAOrB,KAAA,CAAAsB,aAAA,CAACpB,eAAe,EAAKQ,gBAAmB,CAAC;AAClD;AAEAJ,iBAAiB,CAACiB,qBAAqB,GAAG,IAAI;AAC9C,eAAejB,iBAAiB"}
+{"version":3,"file":"BankAccountNumber.js","names":["React","useContext","StringValue","format","cleanNumber","SharedContext","BankAccountNumber","props","_props$label","sharedContext","stringValueProps","_objectSpread","label","inline","undefined","translation","Forms","bankAccountNumberLabel","prepare","value","ban","toString","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/BankAccountNumber/BankAccountNumber.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringValue, { Props as StringValueProps } from '../String'\nimport {\n  format,\n  cleanNumber,\n} from '../../../../components/number-format/NumberUtils'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringValueProps\n\nfunction BankAccountNumber(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const stringValueProps: Props = {\n    ...props,\n    label:\n      props.label ??\n      (props.inline\n        ? undefined\n        : sharedContext?.translation.Forms.bankAccountNumberLabel),\n    prepare: (value) =>\n      format(cleanNumber(value), {\n        ban: true,\n      }).toString(),\n  }\n  return <StringValue {...stringValueProps} />\n}\n\nBankAccountNumber._supportsSpacingProps = true\nexport default BankAccountNumber\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,WAAW,MAAqC,WAAW;AAClE,SACEC,MAAM,EACNC,WAAW,QACN,kDAAkD;AACzD,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,iBAAiBA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EACvC,MAAMC,aAAa,GAAGR,UAAU,CAACI,aAAa,CAAC;EAE/C,MAAMK,gBAAuB,GAAAC,aAAA,CAAAA,aAAA,KACxBJ,KAAK;IACRK,KAAK,GAAAJ,YAAA,GACHD,KAAK,CAACK,KAAK,cAAAJ,YAAA,cAAAA,YAAA,GACVD,KAAK,CAACM,MAAM,GACTC,SAAS,GACTL,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEM,WAAW,CAACC,KAAK,CAACC,sBAAuB;IAC9DC,OAAO,EAAGC,KAAK,IACbhB,MAAM,CAACC,WAAW,CAACe,KAAK,CAAC,EAAE;MACzBC,GAAG,EAAE;IACP,CAAC,CAAC,CAACC,QAAQ,CAAC;EAAC,EAChB;EACD,OAAOrB,KAAA,CAAAsB,aAAA,CAACpB,WAAW,EAAKQ,gBAAmB,CAAC;AAC9C;AAEAJ,iBAAiB,CAACiB,qBAAqB,GAAG,IAAI;AAC9C,eAAejB,iBAAiB"}

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

@@ -1,5 +1,5 @@
-import { Props as NumberComponentProps } from '../Number';
-export type Props = NumberComponentProps;
+import { Props as NumberValueProps } from '../Number';
+export type Props = NumberValueProps;
 declare function Currency(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace Currency {
     var _supportsSpacingProps: boolean;

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

@@ -2,7 +2,7 @@ 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 NumberComponent from '../Number';
+import NumberValue from '../Number';
 function Currency(props) {
   var _props$thousandSepara, _props$suffix;
   const numberProps = _objectSpread(_objectSpread({}, props), {}, {
@@ -10,7 +10,7 @@ function Currency(props) {
     thousandSeparator: (_props$thousandSepara = props.thousandSeparator) !== null && _props$thousandSepara !== void 0 ? _props$thousandSepara : ' ',
     suffix: (_props$suffix = props.suffix) !== null && _props$suffix !== void 0 ? _props$suffix : ' kr'
   });
-  return React.createElement(NumberComponent, numberProps);
+  return React.createElement(NumberValue, numberProps);
 }
 Currency._supportsSpacingProps = true;
 export default Currency;

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.js","names":["React","NumberComponent","Currency","props","_props$thousandSepara","_props$suffix","numberProps","_objectSpread","label","thousandSeparator","suffix","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport NumberComponent, { Props as NumberComponentProps } from '../Number'\n\nexport type Props = NumberComponentProps\n\nfunction Currency(props: Props) {\n  const numberProps: Props = {\n    ...props,\n    label: props.label,\n    thousandSeparator: props.thousandSeparator ?? ' ',\n    suffix: props.suffix ?? ' kr',\n  }\n  return <NumberComponent {...numberProps} />\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,eAAe,MAAyC,WAAW;AAI1E,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA,EAAAC,aAAA;EAC9B,MAAMC,WAAkB,GAAAC,aAAA,CAAAA,aAAA,KACnBJ,KAAK;IACRK,KAAK,EAAEL,KAAK,CAACK,KAAK;IAClBC,iBAAiB,GAAAL,qBAAA,GAAED,KAAK,CAACM,iBAAiB,cAAAL,qBAAA,cAAAA,qBAAA,GAAI,GAAG;IACjDM,MAAM,GAAAL,aAAA,GAAEF,KAAK,CAACO,MAAM,cAAAL,aAAA,cAAAA,aAAA,GAAI;EAAK,EAC9B;EACD,OAAOL,KAAA,CAAAW,aAAA,CAACV,eAAe,EAAKK,WAAc,CAAC;AAC7C;AAEAJ,QAAQ,CAACU,qBAAqB,GAAG,IAAI;AACrC,eAAeV,QAAQ"}
+{"version":3,"file":"Currency.js","names":["React","NumberValue","Currency","props","_props$thousandSepara","_props$suffix","numberProps","_objectSpread","label","thousandSeparator","suffix","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Currency/Currency.tsx"],"sourcesContent":["import React from 'react'\nimport NumberValue, { Props as NumberValueProps } from '../Number'\n\nexport type Props = NumberValueProps\n\nfunction Currency(props: Props) {\n  const numberProps: Props = {\n    ...props,\n    label: props.label,\n    thousandSeparator: props.thousandSeparator ?? ' ',\n    suffix: props.suffix ?? ' kr',\n  }\n  return <NumberValue {...numberProps} />\n}\n\nCurrency._supportsSpacingProps = true\nexport default Currency\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,WAAW,MAAqC,WAAW;AAIlE,SAASC,QAAQA,CAACC,KAAY,EAAE;EAAA,IAAAC,qBAAA,EAAAC,aAAA;EAC9B,MAAMC,WAAkB,GAAAC,aAAA,CAAAA,aAAA,KACnBJ,KAAK;IACRK,KAAK,EAAEL,KAAK,CAACK,KAAK;IAClBC,iBAAiB,GAAAL,qBAAA,GAAED,KAAK,CAACM,iBAAiB,cAAAL,qBAAA,cAAAA,qBAAA,GAAI,GAAG;IACjDM,MAAM,GAAAL,aAAA,GAAEF,KAAK,CAACO,MAAM,cAAAL,aAAA,cAAAA,aAAA,GAAI;EAAK,EAC9B;EACD,OAAOL,KAAA,CAAAW,aAAA,CAACV,WAAW,EAAKK,WAAc,CAAC;AACzC;AAEAJ,QAAQ,CAACU,qBAAqB,GAAG,IAAI;AACrC,eAAeV,QAAQ"}

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

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

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

@@ -4,7 +4,7 @@ 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, { useContext } from 'react';
-import StringComponent from '../String';
+import StringValue from '../String';
 import SharedContext from '../../../../shared/Context';
 function DateComponent(props) {
   var _props$label;
@@ -12,7 +12,7 @@ function DateComponent(props) {
   const stringProps = _objectSpread(_objectSpread({}, props), {}, {
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.dateLabel
   });
-  return React.createElement(StringComponent, stringProps);
+  return React.createElement(StringValue, stringProps);
 }
 DateComponent._supportsSpacingProps = true;
 export default DateComponent;

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

@@ -1 +1 @@
-{"version":3,"file":"Date.js","names":["React","useContext","StringComponent","SharedContext","DateComponent","props","_props$label","sharedContext","stringProps","_objectSpread","label","translation","Forms","dateLabel","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Date/Date.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const stringProps: Props = {\n    ...props,\n    label: props.label ?? sharedContext?.translation.Forms.dateLabel,\n  }\n  return <StringComponent {...stringProps} />\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EACnC,MAAMC,aAAa,GAAGN,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAMK,WAAkB,GAAAC,aAAA,CAAAA,aAAA,KACnBJ,KAAK;IACRK,KAAK,GAAAJ,YAAA,GAAED,KAAK,CAACK,KAAK,cAAAJ,YAAA,cAAAA,YAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC;EAAS,EACjE;EACD,OAAOb,KAAA,CAAAc,aAAA,CAACZ,eAAe,EAAKM,WAAc,CAAC;AAC7C;AAEAJ,aAAa,CAACW,qBAAqB,GAAG,IAAI;AAC1C,eAAeX,aAAa"}
+{"version":3,"file":"Date.js","names":["React","useContext","StringValue","SharedContext","DateComponent","props","_props$label","sharedContext","stringProps","_objectSpread","label","translation","Forms","dateLabel","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Date/Date.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringValue, { Props as StringValueProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringValueProps\n\nfunction DateComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const stringProps: Props = {\n    ...props,\n    label: props.label ?? sharedContext?.translation.Forms.dateLabel,\n  }\n  return <StringValue {...stringProps} />\n}\n\nDateComponent._supportsSpacingProps = true\nexport default DateComponent\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,aAAaA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EACnC,MAAMC,aAAa,GAAGN,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAMK,WAAkB,GAAAC,aAAA,CAAAA,aAAA,KACnBJ,KAAK;IACRK,KAAK,GAAAJ,YAAA,GAAED,KAAK,CAACK,KAAK,cAAAJ,YAAA,cAAAA,YAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC;EAAS,EACjE;EACD,OAAOb,KAAA,CAAAc,aAAA,CAACZ,WAAW,EAAKM,WAAc,CAAC;AACzC;AAEAJ,aAAa,CAACW,qBAAqB,GAAG,IAAI;AAC1C,eAAeX,aAAa"}

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

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

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

@@ -4,7 +4,7 @@ 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, { useContext } from 'react';
-import StringComponent from '../String';
+import StringValue from '../String';
 import SharedContext from '../../../../shared/Context';
 function Email(props) {
   var _props$label;
@@ -12,7 +12,7 @@ function Email(props) {
   const stringProps = _objectSpread(_objectSpread({}, props), {}, {
     label: (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.emailLabel
   });
-  return React.createElement(StringComponent, stringProps);
+  return React.createElement(StringValue, stringProps);
 }
 Email._supportsSpacingProps = true;
 export default Email;

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

@@ -1 +1 @@
-{"version":3,"file":"Email.js","names":["React","useContext","StringComponent","SharedContext","Email","props","_props$label","sharedContext","stringProps","_objectSpread","label","translation","Forms","emailLabel","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Email/Email.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringComponent, { Props as StringComponentProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringComponentProps\n\nfunction Email(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const stringProps: Props = {\n    ...props,\n    label: props.label ?? sharedContext?.translation.Forms.emailLabel,\n  }\n  return <StringComponent {...stringProps} />\n}\n\nEmail._supportsSpacingProps = true\nexport default Email\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,eAAe,MAAyC,WAAW;AAC1E,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EAC3B,MAAMC,aAAa,GAAGN,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAMK,WAAkB,GAAAC,aAAA,CAAAA,aAAA,KACnBJ,KAAK;IACRK,KAAK,GAAAJ,YAAA,GAAED,KAAK,CAACK,KAAK,cAAAJ,YAAA,cAAAA,YAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC;EAAU,EAClE;EACD,OAAOb,KAAA,CAAAc,aAAA,CAACZ,eAAe,EAAKM,WAAc,CAAC;AAC7C;AAEAJ,KAAK,CAACW,qBAAqB,GAAG,IAAI;AAClC,eAAeX,KAAK"}
+{"version":3,"file":"Email.js","names":["React","useContext","StringValue","SharedContext","Email","props","_props$label","sharedContext","stringProps","_objectSpread","label","translation","Forms","emailLabel","createElement","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Value/Email/Email.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport StringValue, { Props as StringValueProps } from '../String'\nimport SharedContext from '../../../../shared/Context'\n\nexport type Props = StringValueProps\n\nfunction Email(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const stringProps: Props = {\n    ...props,\n    label: props.label ?? sharedContext?.translation.Forms.emailLabel,\n  }\n  return <StringValue {...stringProps} />\n}\n\nEmail._supportsSpacingProps = true\nexport default Email\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,WAAW,MAAqC,WAAW;AAClE,OAAOC,aAAa,MAAM,4BAA4B;AAItD,SAASC,KAAKA,CAACC,KAAY,EAAE;EAAA,IAAAC,YAAA;EAC3B,MAAMC,aAAa,GAAGN,UAAU,CAACE,aAAa,CAAC;EAE/C,MAAMK,WAAkB,GAAAC,aAAA,CAAAA,aAAA,KACnBJ,KAAK;IACRK,KAAK,GAAAJ,YAAA,GAAED,KAAK,CAACK,KAAK,cAAAJ,YAAA,cAAAA,YAAA,GAAIC,aAAa,aAAbA,aAAa,uBAAbA,aAAa,CAAEI,WAAW,CAACC,KAAK,CAACC;EAAU,EAClE;EACD,OAAOb,KAAA,CAAAc,aAAA,CAACZ,WAAW,EAAKM,WAAc,CAAC;AACzC;AAEAJ,KAAK,CAACW,qBAAqB,GAAG,IAAI;AAClC,eAAeX,KAAK"}

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

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

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

@@ -4,7 +4,7 @@ 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, { useContext } from 'react';
-import StringComponent from '../String';
+import StringValue from '../String';
 import SharedContext from '../../../../shared/Context';
 import { format, cleanNumber } from '../../../../components/number-format/NumberUtils';
 function NationalIdentityNumber(props) {
@@ -16,7 +16,7 @@ function NationalIdentityNumber(props) {
       nin: true
     }).toString()
   });
-  return React.createElement(StringComponent, stringValueProps);
+  return React.createElement(StringValue, stringValueProps);
 }
 NationalIdentityNumber._supportsSpacingProps = true;
 export default NationalIdentityNumber;