@dnb/eufemia 10.7.0 → 10.9.0

package/cjs/extensions/forms/{Field/hooks/useField.js → hooks/useDataValue.js}

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useField;
+exports.default = useDataValue;
 var _react = require("react");
 var _jsonPointer = _interopRequireDefault(require("json-pointer"));
-var _types = require("../../types");
-var _ajv = _interopRequireWildcard(require("../../utils/ajv"));
-var _DataContext = _interopRequireDefault(require("../../DataContext"));
-var _FieldGroup = require("../../FieldGroup");
-var _componentHelper = require("../../../../shared/component-helper");
+var _types = require("../types");
+var _ajv = _interopRequireWildcard(require("../utils/ajv"));
+var _DataContext = _interopRequireDefault(require("../DataContext"));
+var _FieldBlockContext = _interopRequireDefault(require("../FieldBlock/FieldBlockContext"));
+var _IterateElementContext = _interopRequireDefault(require("../Iterate/IterateElementContext"));
+var _componentHelper = require("../../../shared/component-helper");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,17 +20,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 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 useField(props) {
+function useDataValue(props) {
   const {
     path,
+    elementPath,
     emptyValue,
     required,
     error: errorProp,
-    onFocus: onFocusProp,
-    onBlur: onBlurProp,
-    onChange: onChangeProp,
-    validator: validatorProp,
-    onBlurValidator: onBlurValidatorProp,
+    onFocus,
+    onBlur,
+    onChange,
+    validator,
+    onBlurValidator,
     schema,
     errorMessages,
     validateInitially,
@@ -39,23 +41,51 @@ function useField(props) {
   } = props;
   const id = (0, _react.useMemo)(() => props.id ?? (0, _componentHelper.makeUniqueId)(), [props.id]);
   const dataContext = (0, _react.useContext)(_DataContext.default.Context);
-  const fieldGroupContext = (0, _react.useContext)(_FieldGroup.FieldGroupContext);
-  const inFieldGroup = Boolean(fieldGroupContext);
-  const {
-    setFieldError: setFieldGroupError,
-    setShowFieldError: setShowFieldGroupError
-  } = fieldGroupContext ?? {};
+  const fieldBlockContext = (0, _react.useContext)(_FieldBlockContext.default);
+  const iterateElementContext = (0, _react.useContext)(_IterateElementContext.default);
   const {
     handlePathChange: dataContextHandlePathChange,
     setPathWithError: dataContextSetPathWithError,
     errors: dataContextErrors
   } = dataContext ?? {};
+  const inFieldBlock = Boolean(fieldBlockContext);
+  const {
+    setError: setFieldBlockError,
+    setShowError: setShowFieldBlockError
+  } = fieldBlockContext ?? {};
+  const inIterate = Boolean(iterateElementContext);
+  const {
+    index: iterateElementIndex,
+    value: iterateElementValue,
+    handleChange: handleIterateElementChange
+  } = iterateElementContext ?? {};
   if (path && path.substring(0, 1) !== '/') {
-    throw new Error('Invalid path. Input path JSON Pointers  must be from root (starting with a /).');
+    throw new Error('Invalid path. Data value path JSON Pointers must be from root (starting with a /).');
+  }
+  if (elementPath && elementPath.substring(0, 1) !== '/') {
+    throw new Error('Invalid elementPath. Element pathJSON Pointers must be from root of iterate element (starting with a /).');
+  }
+  if (elementPath && !iterateElementContext) {
+    throw new Error('elementPath cannot be used when not inside an iterate element context. Wrap the component in an Iterate.Loop.');
   }
   const externalValue = (0, _react.useMemo)(() => {
-    return props.value ?? (dataContext.data && path !== undefined && _jsonPointer.default.has(dataContext.data, path) ? _jsonPointer.default.get(dataContext.data, path) : undefined);
-  }, [path, props.value, dataContext.data]);
+    if (props.value !== undefined) {
+      return props.value;
+    }
+    if (inIterate && elementPath) {
+      if (elementPath === '/') {
+        return iterateElementValue;
+      }
+      return _jsonPointer.default.has(iterateElementValue, elementPath) ? _jsonPointer.default.get(iterateElementValue, elementPath) : undefined;
+    }
+    if (dataContext.data && path) {
+      if (path === '/') {
+        return dataContext.data;
+      }
+      return _jsonPointer.default.has(dataContext.data, path) ? _jsonPointer.default.get(dataContext.data, path) : undefined;
+    }
+    return undefined;
+  }, [path, elementPath, inIterate, iterateElementValue, props.value, dataContext.data]);
   const [value, setValue] = (0, _react.useState)(externalValue);
   const changedRef = (0, _react.useRef)(false);
   (0, _react.useEffect)(() => {
@@ -70,11 +100,11 @@ function useField(props) {
     if (path) {
       dataContextSetPathWithError === null || dataContextSetPathWithError === void 0 ? void 0 : dataContextSetPathWithError(path, Boolean(error));
     }
-    setFieldGroupError === null || setFieldGroupError === void 0 ? void 0 : setFieldGroupError(path ?? id, errorWithCorrectMessage);
-  }, [path, id, errorMessages, dataContextSetPathWithError, setFieldGroupError]);
+    setFieldBlockError === null || setFieldBlockError === void 0 ? void 0 : setFieldBlockError(path ?? id, errorWithCorrectMessage);
+  }, [path, id, errorMessages, dataContextSetPathWithError, setFieldBlockError]);
   const validateValue = (0, _react.useCallback)(valueToValidate => {
-    if (typeof validatorProp === 'function') {
-      Promise.resolve(validatorProp(valueToValidate)).then(setErrorAndUpdateDataContext);
+    if (typeof validator === 'function') {
+      Promise.resolve(validator(valueToValidate)).then(setErrorAndUpdateDataContext);
     }
     if (valueToValidate === emptyValue && required) {
       const error = new _types.FormError('The value is required', {
@@ -95,7 +125,7 @@ function useField(props) {
       setErrorAndUpdateDataContext(undefined);
       return undefined;
     }
-  }, [schemaValidator, emptyValue, required, setErrorAndUpdateDataContext, validatorProp]);
+  }, [schemaValidator, emptyValue, required, setErrorAndUpdateDataContext, validator]);
   (0, _react.useEffect)(() => {
     if (!error && path && dataContextErrors !== null && dataContextErrors !== void 0 && dataContextErrors[path]) {
       setErrorAndUpdateDataContext(dataContextErrors[path]);
@@ -104,41 +134,45 @@ function useField(props) {
   (0, _react.useEffect)(() => {
     if (dataContext.showAllErrors) {
       setShowError(true);
-      setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, true);
+      setShowFieldBlockError === null || setShowFieldBlockError === void 0 ? void 0 : setShowFieldBlockError(path ?? id, true);
     }
-  }, [id, path, dataContext.showAllErrors, setShowFieldGroupError]);
-  const onFocus = (0, _react.useCallback)(_ref => {
-    let {
-      onFocusValue
-    } = _ref;
-    onFocusProp === null || onFocusProp === void 0 ? void 0 : onFocusProp(onFocusValue ?? value);
-  }, [value, onFocusProp]);
-  const onBlur = (0, _react.useCallback)(_ref2 => {
-    let {
-      onBlurValue
-    } = _ref2;
-    onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(onBlurValue ?? value);
-    if (!changedRef.current && !validateUnchanged) {
-      return;
+  }, [id, path, dataContext.showAllErrors, setShowFieldBlockError]);
+  const setHasFocus = (0, _react.useCallback)((hasFocus, valueOverride) => {
+    if (hasFocus) {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(valueOverride ?? value);
+    } else {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(valueOverride ?? value);
+      if (!changedRef.current && !validateUnchanged) {
+        return;
+      }
+      if (typeof onBlurValidator === 'function') {
+        Promise.resolve(onBlurValidator(valueOverride ?? value)).then(setErrorAndUpdateDataContext);
+      }
+      setShowError(true);
+      setShowFieldBlockError === null || setShowFieldBlockError === void 0 ? void 0 : setShowFieldBlockError(path ?? id, true);
     }
-    if (typeof onBlurValidatorProp === 'function') {
-      Promise.resolve(onBlurValidatorProp(onBlurValue ?? value)).then(setErrorAndUpdateDataContext);
+  }, [id, path, value, validateUnchanged, onFocus, onBlur, onBlurValidator, setErrorAndUpdateDataContext, setShowFieldBlockError]);
+  const handleFocus = (0, _react.useCallback)(() => setHasFocus(true), [setHasFocus]);
+  const handleBlur = (0, _react.useCallback)(() => setHasFocus(false), [setHasFocus]);
+  const handleChange = (0, _react.useCallback)(argFromInput => {
+    const newValue = fromInput(argFromInput);
+    if (newValue === value) {
+      return;
     }
-    setShowError(true);
-    setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, true);
-  }, [id, path, value, onBlurProp, validateUnchanged, onBlurValidatorProp, setErrorAndUpdateDataContext, setShowFieldGroupError]);
-  const onChange = (0, _react.useCallback)(valueFromInput => {
-    const newValue = fromInput(valueFromInput);
     setValue(newValue);
     changedRef.current = true;
     setShowError(false);
-    setShowFieldGroupError === null || setShowFieldGroupError === void 0 ? void 0 : setShowFieldGroupError(path ?? id, false);
+    setShowFieldBlockError === null || setShowFieldBlockError === void 0 ? void 0 : setShowFieldBlockError(path ?? id, false);
     validateValue(newValue);
-    onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(newValue);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     if (path) {
       dataContextHandlePathChange === null || dataContextHandlePathChange === void 0 ? void 0 : dataContextHandlePathChange(path, newValue);
     }
-  }, [id, path, onChangeProp, validateValue, dataContextHandlePathChange, setShowFieldGroupError, fromInput]);
+    if (elementPath) {
+      const iteratValuePath = `/${iterateElementIndex}${elementPath && elementPath !== '/' ? elementPath : ''}`;
+      handleIterateElementChange === null || handleIterateElementChange === void 0 ? void 0 : handleIterateElementChange(iteratValuePath, newValue);
+    }
+  }, [id, path, elementPath, iterateElementIndex, value, onChange, validateValue, dataContextHandlePathChange, setShowFieldBlockError, handleIterateElementChange, fromInput]);
   const exportError = (0, _react.useMemo)(() => errorProp ?? error, [errorProp, error]);
   (0, _react.useEffect)(() => {
     if (path) {
@@ -154,10 +188,11 @@ function useField(props) {
   return _objectSpread(_objectSpread({}, props), {}, {
     id,
     value: toInput(value),
-    error: inFieldGroup ? undefined : showError ? exportError : undefined,
-    onFocus,
-    onBlur,
-    onChange
+    error: inFieldBlock ? undefined : showError ? exportError : undefined,
+    setHasFocus,
+    handleFocus,
+    handleBlur,
+    handleChange
   });
 }
-//# sourceMappingURL=useField.js.map
+//# sourceMappingURL=useDataValue.js.map

package/cjs/extensions/forms/hooks/useDataValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataValue.js","names":["_react","require","_jsonPointer","_interopRequireDefault","_types","_ajv","_interopRequireWildcard","_DataContext","_FieldBlockContext","_IterateElementContext","_componentHelper","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","useDataValue","props","path","elementPath","emptyValue","required","error","errorProp","onFocus","onBlur","onChange","validator","onBlurValidator","schema","errorMessages","validateInitially","validateUnchanged","toInput","fromInput","id","useMemo","makeUniqueId","dataContext","useContext","DataContext","Context","fieldBlockContext","FieldBlockContext","iterateElementContext","IterateElementContext","handlePathChange","dataContextHandlePathChange","setPathWithError","dataContextSetPathWithError","errors","dataContextErrors","inFieldBlock","Boolean","setError","setFieldBlockError","setShowError","setShowFieldBlockError","inIterate","index","iterateElementIndex","iterateElementValue","handleChange","handleIterateElementChange","substring","Error","externalValue","pointer","data","setValue","useState","changedRef","useRef","useEffect","showError","schemaValidator","ajv","compile","setErrorAndUpdateDataContext","useCallback","errorWithCorrectMessage","FormError","validationRule","validateValue","valueToValidate","Promise","resolve","then","ajvErrorsToOneFormError","showAllErrors","setHasFocus","hasFocus","valueOverride","current","handleFocus","handleBlur","argFromInput","newValue","iteratValuePath","exportError","handleMountField","handleUnMountField"],"sources":["../../../../../src/extensions/forms/hooks/useDataValue.ts"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useContext,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react'\nimport pointer from 'json-pointer'\nimport { FormError, FieldProps } from '../types'\nimport ajv, { ajvErrorsToOneFormError } from '../utils/ajv'\nimport DataContext from '../DataContext'\nimport FieldBlockContext from '../FieldBlock/FieldBlockContext'\nimport IterateElementContext from '../Iterate/IterateElementContext'\nimport { makeUniqueId } from '../../../shared/component-helper'\n\ninterface ReturnAdditional<Value> {\n  id: string\n  value: Value\n  error: Error | FormError | undefined\n  setHasFocus: (hasFocus: boolean, valueOverride?: unknown) => void\n  handleFocus: FieldProps<unknown>['onFocus']\n  handleBlur: FieldProps<unknown>['onBlur']\n  handleChange: FieldProps<unknown>['onChange']\n}\n\nexport default function useDataValue<\n  Value = unknown,\n  Props extends FieldProps<Value> = FieldProps<Value>,\n>(props: Props): Props & ReturnAdditional<Value> {\n  const {\n    path,\n    elementPath,\n    emptyValue,\n    required,\n    error: errorProp,\n    onFocus,\n    onBlur,\n    onChange,\n    validator,\n    onBlurValidator,\n    schema,\n    errorMessages,\n    validateInitially,\n    validateUnchanged,\n    toInput = (value) => value,\n    fromInput = (value) => value,\n  } = props\n  const id = useMemo(() => props.id ?? makeUniqueId(), [props.id])\n  const dataContext = useContext(DataContext.Context)\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const iterateElementContext = useContext(IterateElementContext)\n\n  const {\n    handlePathChange: dataContextHandlePathChange,\n    setPathWithError: dataContextSetPathWithError,\n    errors: dataContextErrors,\n  } = dataContext ?? {}\n  const inFieldBlock = Boolean(fieldBlockContext)\n  const {\n    setError: setFieldBlockError,\n    setShowError: setShowFieldBlockError,\n  } = fieldBlockContext ?? {}\n  const inIterate = Boolean(iterateElementContext)\n  const {\n    index: iterateElementIndex,\n    value: iterateElementValue,\n    handleChange: handleIterateElementChange,\n  } = iterateElementContext ?? {}\n\n  if (path && path.substring(0, 1) !== '/') {\n    throw new Error(\n      'Invalid path. Data value path JSON Pointers must be from root (starting with a /).'\n    )\n  }\n  if (elementPath && elementPath.substring(0, 1) !== '/') {\n    throw new Error(\n      'Invalid elementPath. Element pathJSON Pointers must be from root of iterate element (starting with a /).'\n    )\n  }\n  if (elementPath && !iterateElementContext) {\n    throw new Error(\n      'elementPath cannot be used when not inside an iterate element context. Wrap the component in an Iterate.Loop.'\n    )\n  }\n\n  const externalValue = useMemo(() => {\n    if (props.value !== undefined) {\n      // Value-prop sent directly to the field has highest priority, overriding any surrounding source\n      return props.value\n    }\n\n    if (inIterate && elementPath) {\n      // This field is inside an iterate, and has a pointer from the base of the element being iterated\n      if (elementPath === '/') {\n        return iterateElementValue\n      }\n\n      return pointer.has(iterateElementValue, elementPath)\n        ? pointer.get(iterateElementValue, elementPath)\n        : undefined\n    }\n\n    if (dataContext.data && path) {\n      // There is a surrounding data context and a path for where in the source to find the data\n      if (path === '/') {\n        return dataContext.data\n      }\n\n      return pointer.has(dataContext.data, path)\n        ? pointer.get(dataContext.data, path)\n        : undefined\n    }\n    return undefined\n  }, [\n    path,\n    elementPath,\n    inIterate,\n    iterateElementValue,\n    props.value,\n    dataContext.data,\n  ])\n\n  // Hold an internal copy of the input value in case the input component is used uncontrolled,\n  // and to handle errors in Eufemia on components that does not take updated callback functions into account.\n  const [value, setValue] = useState(externalValue)\n  const changedRef = useRef(false)\n\n  useEffect(() => {\n    // When receiving the initial value, or receiving an updated value by props, update the internal value\n    // so the component can be used \"controlled\".\n    setValue(externalValue)\n  }, [externalValue])\n\n  // Error handling\n  const [error, setError] = useState<Error | FormError | undefined>()\n  const [showError, setShowError] = useState<boolean>(\n    Boolean(validateInitially || errorProp)\n  )\n  const schemaValidator = useMemo(\n    () =>\n      schema && Object.keys(schema).length > 0\n        ? ajv.compile(schema)\n        : undefined,\n    [schema]\n  )\n\n  const setErrorAndUpdateDataContext = useCallback(\n    (error: FormError | undefined) => {\n      const errorWithCorrectMessage =\n        error instanceof FormError &&\n        typeof error.validationRule === 'string' &&\n        errorMessages?.[error.validationRule] !== undefined\n          ? new FormError(errorMessages[error.validationRule])\n          : error\n\n      setError(errorWithCorrectMessage)\n\n      if (path) {\n        // Tell the data context about the error, so it can stop the user from submitting the form until the error has been fixed\n        dataContextSetPathWithError?.(path, Boolean(error))\n      }\n\n      setFieldBlockError?.(path ?? id, errorWithCorrectMessage)\n    },\n    [\n      path,\n      id,\n      errorMessages,\n      dataContextSetPathWithError,\n      setFieldBlockError,\n    ]\n  )\n\n  const validateValue = useCallback(\n    (valueToValidate): FormError | undefined => {\n      // Prioritize received validator functions first\n      // Possible future change: Merge errors if multiple, like one message with each message concatinated.\n      if (typeof validator === 'function') {\n        // Since the validator can return either a synchronous result or an asynchronous\n        Promise.resolve(validator(valueToValidate))\n          // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n          // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n          // as if they were operational errors.\n          .then(setErrorAndUpdateDataContext)\n      }\n\n      if (valueToValidate === emptyValue && required) {\n        const error = new FormError('The value is required', {\n          validationRule: 'required',\n        })\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else if (schemaValidator) {\n        // This input has a direct schema (through props)\n        if (valueToValidate === undefined && emptyValue === undefined) {\n          // Avoid validating undefined-values if they are expected (set with emptyValue) as they will\n          // usually fail against json-schema type\n          setErrorAndUpdateDataContext(undefined)\n          return undefined\n        }\n        schemaValidator(valueToValidate)\n        const error = ajvErrorsToOneFormError(schemaValidator.errors)\n        setErrorAndUpdateDataContext(error)\n        return error\n      } else {\n        // Removing any previous error from required\n        setErrorAndUpdateDataContext(undefined)\n        return undefined\n      }\n    },\n    [\n      schemaValidator,\n      emptyValue,\n      required,\n      setErrorAndUpdateDataContext,\n      validator,\n    ]\n  )\n\n  useEffect(() => {\n    // If a surrounding data context has an error for this field (by path) and no error has been set by local component validation, use the data context error\n    if (!error && path && dataContextErrors?.[path]) {\n      setErrorAndUpdateDataContext(dataContextErrors[path])\n    }\n  }, [path, dataContextErrors, error, setErrorAndUpdateDataContext])\n\n  useEffect(() => {\n    if (dataContext.showAllErrors) {\n      // If showError on a surrounding data context was changed and set to true, it is because the user clicked next, submit or\n      // something else that should lead to showing the user all errors.\n      setShowError(true)\n      setShowFieldBlockError?.(path ?? id, true)\n    }\n  }, [id, path, dataContext.showAllErrors, setShowFieldBlockError])\n\n  const setHasFocus = useCallback(\n    (hasFocus: boolean, valueOverride?: unknown) => {\n      if (hasFocus) {\n        // Field was put in focus (like when clicking in a text field or opening a dropdown menu)\n        onFocus?.(valueOverride ?? value)\n      } else {\n        // Field was removed from focus (like when tabbing out of a text field or closing a dropdown menu)\n        onBlur?.(valueOverride ?? value)\n\n        if (!changedRef.current && !validateUnchanged) {\n          // Avoid showing errors when blurring without havinc hanged the value, so tabbing through several\n          // fields does not make errors pop up all over the place\n          return\n        }\n\n        // External blur validators makes it possible to validate values but not on every character change in case of\n        // expensive validation calling external services etc.\n        if (typeof onBlurValidator === 'function') {\n          // Since the validator can return either a synchronous result or an asynchronous\n          Promise.resolve(onBlurValidator(valueOverride ?? value))\n            // This is a validator, so it is expected to resolve with an error when the value is invalid. If it\n            // throws an error, it is not caught here as that will cause programmatic errors to show inside the form\n            // as if they were operational errors.\n            .then(setErrorAndUpdateDataContext)\n        }\n\n        // Since the user left the field, show error (if any)\n        setShowError(true)\n        setShowFieldBlockError?.(path ?? id, true)\n      }\n    },\n    [\n      id,\n      path,\n      value,\n      validateUnchanged,\n      onFocus,\n      onBlur,\n      onBlurValidator,\n      setErrorAndUpdateDataContext,\n      setShowFieldBlockError,\n    ]\n  )\n\n  const handleFocus = useCallback(() => setHasFocus(true), [setHasFocus])\n  const handleBlur = useCallback(() => setHasFocus(false), [setHasFocus])\n\n  const handleChange = useCallback(\n    (argFromInput) => {\n      const newValue = fromInput(argFromInput)\n\n      if (newValue === value) {\n        // Avoid triggering a change if the value was not actually changed. This may be caused by rendering components\n        // calling onChange even if the actual value did not change.\n        return\n      }\n      setValue(newValue)\n      changedRef.current = true\n      // When changing the value, hide errors to avoid annoying the user before they are finished filling in that value\n      setShowError(false)\n      setShowFieldBlockError?.(path ?? id, false)\n      // Always validate the value immediately when it is changed\n      validateValue(newValue)\n\n      // Tell any parent data context about the error, so they can take it into consideration when a submit button is clicked for instance\n      onChange?.(newValue)\n      if (path) {\n        dataContextHandlePathChange?.(path, newValue)\n      }\n      if (elementPath) {\n        const iteratValuePath = `/${iterateElementIndex}${\n          elementPath && elementPath !== '/' ? elementPath : ''\n        }`\n        handleIterateElementChange?.(iteratValuePath, newValue)\n      }\n    },\n    [\n      id,\n      path,\n      elementPath,\n      iterateElementIndex,\n      value,\n      onChange,\n      validateValue,\n      dataContextHandlePathChange,\n      setShowFieldBlockError,\n      handleIterateElementChange,\n      fromInput,\n    ]\n  )\n\n  const exportError = useMemo(() => errorProp ?? error, [errorProp, error])\n\n  useEffect(() => {\n    // Mount procedure\n    if (path) {\n      dataContext?.handleMountField(path)\n    }\n    validateValue(externalValue)\n\n    return () => {\n      // Unmount procedure\n      if (path) {\n        dataContext?.handleUnMountField(path)\n      }\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Only run for mount and unmount\n  }, [])\n\n  return {\n    ...props,\n    id,\n    value: toInput(value),\n    error: inFieldBlock ? undefined : showError ? exportError : undefined,\n    setHasFocus,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  }\n}\n"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
-export type { FieldProps } from './field-types';
-export type { ValueProps } from './value-types';
-export { useField } from './Field/hooks';
+export type { FieldProps, ValueProps } from './types';
+export { useDataValue } from './hooks';
 export { default as FieldBlock } from './FieldBlock';
 export { default as Field } from './Field';
-export { useValue } from './Value/hooks';
+export { default as Iterate } from './Iterate';
 export { default as ValueBlock } from './ValueBlock';
+export { default as Form } from './Form';
 export { default as Value } from './Value';
 export { default as Layout } from './Layout';
 export { default as StepsLayout, StepsContext } from './StepsLayout';

package/cjs/extensions/forms/index.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  useField: true,
+  useDataValue: true,
   FieldBlock: true,
   Field: true,
-  useValue: true,
+  Iterate: true,
   ValueBlock: true,
+  Form: true,
   Value: true,
   Layout: true,
   StepsLayout: true,
@@ -34,6 +35,18 @@ Object.defineProperty(exports, "FieldBlock", {
     return _FieldBlock.default;
   }
 });
+Object.defineProperty(exports, "Form", {
+  enumerable: true,
+  get: function () {
+    return _Form.default;
+  }
+});
+Object.defineProperty(exports, "Iterate", {
+  enumerable: true,
+  get: function () {
+    return _Iterate.default;
+  }
+});
 Object.defineProperty(exports, "Layout", {
   enumerable: true,
   get: function () {
@@ -70,23 +83,18 @@ Object.defineProperty(exports, "Visibility", {
     return _Visibility.default;
   }
 });
-Object.defineProperty(exports, "useField", {
-  enumerable: true,
-  get: function () {
-    return _hooks.useField;
-  }
-});
-Object.defineProperty(exports, "useValue", {
+Object.defineProperty(exports, "useDataValue", {
   enumerable: true,
   get: function () {
-    return _hooks2.useValue;
+    return _hooks.useDataValue;
   }
 });
-var _hooks = require("./Field/hooks");
+var _hooks = require("./hooks");
 var _FieldBlock = _interopRequireDefault(require("./FieldBlock"));
 var _Field = _interopRequireDefault(require("./Field"));
-var _hooks2 = require("./Value/hooks");
+var _Iterate = _interopRequireDefault(require("./Iterate"));
 var _ValueBlock = _interopRequireDefault(require("./ValueBlock"));
+var _Form = _interopRequireDefault(require("./Form"));
 var _Value = _interopRequireDefault(require("./Value"));
 var _Layout = _interopRequireDefault(require("./Layout"));
 var _StepsLayout = _interopRequireWildcard(require("./StepsLayout"));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_hooks","require","_FieldBlock","_interopRequireDefault","_Field","_hooks2","_ValueBlock","_Value","_Layout","_StepsLayout","_interopRequireWildcard","_DataContext","_Visibility","_utils","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set"],"sources":["../../../../src/extensions/forms/index.ts"],"sourcesContent":["export type { FieldProps } from './field-types'\nexport type { ValueProps } from './value-types'\nexport { useField } from './Field/hooks'\nexport { default as FieldBlock } from './FieldBlock'\nexport { default as Field } from './Field'\nexport { useValue } from './Value/hooks'\nexport { default as ValueBlock } from './ValueBlock'\nexport { default as Value } from './Value'\nexport { default as Layout } from './Layout'\nexport { default as StepsLayout, StepsContext } from './StepsLayout'\nexport { default as DataContext } from './DataContext'\nexport { default as Visibility } from './Visibility'\nexport * from './utils'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,MAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,OAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,YAAA,GAAAC,uBAAA,CAAAT,OAAA;AACA,IAAAU,YAAA,GAAAR,sBAAA,CAAAF,OAAA;AACA,IAAAW,WAAA,GAAAT,sBAAA,CAAAF,OAAA;AACA,IAAAY,MAAA,GAAAZ,OAAA;AAAAa,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAAuB,SAAAS,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAjB,wBAAAqB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAT,GAAA,CAAAM,GAAA,SAAAK,MAAA,WAAAC,qBAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAArB,GAAA,IAAAc,GAAA,QAAAd,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAW,GAAA,EAAAd,GAAA,SAAAsB,IAAA,GAAAF,qBAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAP,GAAA,EAAAd,GAAA,cAAAsB,IAAA,KAAAA,IAAA,CAAAd,GAAA,IAAAc,IAAA,CAAAC,GAAA,KAAA1B,MAAA,CAAAS,cAAA,CAAAa,MAAA,EAAAnB,GAAA,EAAAsB,IAAA,YAAAH,MAAA,CAAAnB,GAAA,IAAAc,GAAA,CAAAd,GAAA,SAAAmB,MAAA,CAAAH,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAM,GAAA,CAAAT,GAAA,EAAAK,MAAA,YAAAA,MAAA;AAAA,SAAAjC,uBAAA4B,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}
+{"version":3,"file":"index.js","names":["_hooks","require","_FieldBlock","_interopRequireDefault","_Field","_Iterate","_ValueBlock","_Form","_Value","_Layout","_StepsLayout","_interopRequireWildcard","_DataContext","_Visibility","_utils","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set"],"sources":["../../../../src/extensions/forms/index.ts"],"sourcesContent":["export type { FieldProps, ValueProps } from './types'\nexport { useDataValue } from './hooks'\nexport { default as FieldBlock } from './FieldBlock'\nexport { default as Field } from './Field'\nexport { default as Iterate } from './Iterate'\nexport { default as ValueBlock } from './ValueBlock'\nexport { default as Form } from './Form'\nexport { default as Value } from './Value'\nexport { default as Layout } from './Layout'\nexport { default as StepsLayout, StepsContext } from './StepsLayout'\nexport { default as DataContext } from './DataContext'\nexport { default as Visibility } from './Visibility'\nexport * from './utils'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,QAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,WAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,KAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,MAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,OAAA,GAAAN,sBAAA,CAAAF,OAAA;AACA,IAAAS,YAAA,GAAAC,uBAAA,CAAAV,OAAA;AACA,IAAAW,YAAA,GAAAT,sBAAA,CAAAF,OAAA;AACA,IAAAY,WAAA,GAAAV,sBAAA,CAAAF,OAAA;AACA,IAAAa,MAAA,GAAAb,OAAA;AAAAc,MAAA,CAAAC,IAAA,CAAAF,MAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,MAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,MAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AAAuB,SAAAS,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAjB,wBAAAqB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAT,GAAA,CAAAM,GAAA,SAAAK,MAAA,WAAAC,qBAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAArB,GAAA,IAAAc,GAAA,QAAAd,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAW,GAAA,EAAAd,GAAA,SAAAsB,IAAA,GAAAF,qBAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAP,GAAA,EAAAd,GAAA,cAAAsB,IAAA,KAAAA,IAAA,CAAAd,GAAA,IAAAc,IAAA,CAAAC,GAAA,KAAA1B,MAAA,CAAAS,cAAA,CAAAa,MAAA,EAAAnB,GAAA,EAAAsB,IAAA,YAAAH,MAAA,CAAAnB,GAAA,IAAAc,GAAA,CAAAd,GAAA,SAAAmB,MAAA,CAAAH,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAM,GAAA,CAAAT,GAAA,EAAAK,MAAA,YAAAA,MAAA;AAAA,SAAAlC,uBAAA6B,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}

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

@@ -9,17 +9,13 @@
   width: 100%;
 }
 .dnb-forms-field-phone-number--width-large {
-  width: 336px;
-}
-.dnb-forms-field-phone-number--width-medium {
-  width: 176px;
+  width: 21rem;
 }
 .dnb-forms-field-phone-number__country-code {
-  --autocomplete-width: 145px;
-  flex: 0 144px;
+  flex: 0 9rem;
 }
 .dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell {
-  width: 144px;
+  width: 9rem;
 }
 .dnb-forms-field-phone-number__number {
   flex: 1;
@@ -32,11 +28,14 @@
   -moz-column-gap: var(--spacing-small);
        column-gap: var(--spacing-small);
 }
+.dnb-forms-field-postal-code-and-city--width-small {
+  width: 5rem;
+}
 .dnb-forms-field-postal-code-and-city--width-medium {
-  width: 176px;
+  width: 11rem;
 }
 .dnb-forms-field-postal-code-and-city--width-large {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-postal-code-and-city__postal-code {
   flex: 0 5rem;
@@ -46,10 +45,40 @@
 }
 
 .dnb-forms-field-selection--width-large .dnb-dropdown__shell {
-  width: 336px;
+  width: 21rem;
 }
 .dnb-forms-field-selection--width-medium .dnb-dropdown__shell {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-selection--width-small .dnb-dropdown__shell {
+  width: 5rem;
+}
+
+.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: column;
+  grid-row-gap: var(--spacing-x-small);
+  row-gap: var(--spacing-x-small);
+}
+.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options {
+  display: flex;
+  flex-flow: row wrap;
+  grid-column-gap: var(--spacing-small);
+  -moz-column-gap: var(--spacing-small);
+       column-gap: var(--spacing-small);
+}
+
+.dnb-forms-field-country-code .dnb-autocomplete__inner {
+  --autocomplete-width: 9rem;
+}
+.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner {
+  --autocomplete-width: 5rem;
+}
+.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner {
+  --autocomplete-width: 11rem;
+}
+.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner {
+  --autocomplete-width: 21rem;
 }
 
 .dnb-forms-button-row {
@@ -61,10 +90,10 @@
 }
 
 .dnb-forms-card {
-  background-color: var(--color-white);
-  border: 4px solid #F2F2F5;
-  border-radius: 0.5rem;
   padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium);
+  background-color: var(--color-white);
+  border: 0.25rem solid var(--color-pistachio);
+  border-radius: 0.75rem;
 }
 .dnb-forms-card__heading {
   font-size: var(--font-size-basis);
@@ -137,6 +166,15 @@
   -moz-column-gap: var(--spacing-medium);
        column-gap: var(--spacing-medium);
 }
+.dnb-forms-flex-container--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-container--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-container--width-large {
+  width: 21rem;
+}
 
 .dnb-forms-flex-item--grow {
   flex-grow: 1;
@@ -144,6 +182,15 @@
 .dnb-forms-flex-item--shrink {
   flex-shrink: 1;
 }
+.dnb-forms-flex-item--width-small {
+  width: 5rem;
+}
+.dnb-forms-flex-item--width-medium {
+  width: 11rem;
+}
+.dnb-forms-flex-item--width-large {
+  width: 21rem;
+}
 
 .dnb-forms-section + .dnb-forms-section {
   margin-top: var(--spacing-large);
@@ -155,9 +202,9 @@
 .dnb-forms-steps-layout {
   display: flex;
   flex-flow: row wrap;
-  grid-column-gap: 3rem;
-  -moz-column-gap: 3rem;
-       column-gap: 3rem;
+  grid-column-gap: var(--spacing-medium);
+  -moz-column-gap: var(--spacing-medium);
+       column-gap: var(--spacing-medium);
 }
 @media (max-width: 60em) {
   .dnb-forms-steps-layout {
@@ -168,21 +215,47 @@
 }
 .dnb-forms-steps-layout__sidebar {
   flex: 0;
-  min-width: 320px;
+  min-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar {
+  max-width: 21rem;
+}
+.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item {
+  min-width: 336px;
 }
 .dnb-forms-steps-layout__contents {
   flex: 1;
-  min-width: 400px;
+  min-width: 25rem;
 }
 
 .dnb-forms-test-element {
   border: 1px dashed #808080;
-  border-radius: 6px;
+  border-radius: 0.5rem;
   color: #909090;
-  padding: 4px 8px;
+  padding: 0.5rem 1rem;
 }
 
-.dnb-forms-field-block__label-block {
+.dnb-forms-field-block--layout-vertical {
+  display: grid;
+  grid-template-columns: auto;
+  grid-template-areas: "label" "contents" "status";
+}
+.dnb-forms-field-block--layout-horizontal {
+  display: grid;
+  grid-template-columns: 11rem auto;
+  grid-template-areas: "label contents" "status status";
+}
+.dnb-forms-field-block--width-small {
+  width: 5rem;
+}
+.dnb-forms-field-block--width-medium {
+  width: 11rem;
+}
+.dnb-forms-field-block--width-large {
+  width: 21rem;
+}
+.dnb-forms-field-block__label {
+  grid-area: label;
   display: flex;
   flex-flow: row;
   justify-content: space-between;
@@ -197,20 +270,23 @@
   color: var(--color-black-55);
   font-size: var(--font-size-small);
 }
-.dnb-forms-field-block--width-large {
-  width: 336px;
+.dnb-forms-field-block__status {
+  grid-area: status;
 }
-.dnb-forms-field-block--width-medium {
-  width: 176px;
+.dnb-forms-field-block__contents {
+  grid-area: contents;
 }
 .dnb-forms-field-block__contents--width-stretch {
   width: 100%;
 }
-.dnb-forms-field-block__contents--width-large {
-  width: 336px;
+.dnb-forms-field-block__contents--width-small {
+  width: 5rem;
 }
 .dnb-forms-field-block__contents--width-medium {
-  width: 176px;
+  width: 11rem;
+}
+.dnb-forms-field-block__contents--width-large {
+  width: 21rem;
 }
 
 .dnb-forms-value-block {

package/cjs/extensions/forms/style/dnb-forms.min.css

@@ -1 +1 @@
-.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:336px}.dnb-forms-field-phone-number--width-medium{width:176px}.dnb-forms-field-phone-number__country-code{--autocomplete-width:145px;flex:0 144px}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:144px}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-medium{width:176px}.dnb-forms-field-postal-code-and-city--width-large{width:336px}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:336px}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:176px}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:4px solid #f2f2f5;border-radius:.5rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:3rem;-moz-column-gap:3rem;column-gap:3rem;display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:320px}.dnb-forms-steps-layout__contents{flex:1;min-width:400px}.dnb-forms-test-element{border:1px dashed grey;border-radius:6px;color:#909090;padding:4px 8px}.dnb-forms-field-block__label-block{align-items:center;display:flex;flex-flow:row;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block--width-large{width:336px}.dnb-forms-field-block--width-medium{width:176px}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-large{width:336px}.dnb-forms-field-block__contents--width-medium{width:176px}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}
+.dnb-forms-field-phone-number{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-phone-number--width-stretch{width:100%}.dnb-forms-field-phone-number--width-large{width:21rem}.dnb-forms-field-phone-number__country-code{flex:0 9rem}.dnb-forms-field-phone-number__country-code .dnb-autocomplete__shell{width:9rem}.dnb-forms-field-phone-number__number{flex:1}.dnb-forms-field-postal-code-and-city__fields{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-field-postal-code-and-city--width-small{width:5rem}.dnb-forms-field-postal-code-and-city--width-medium{width:11rem}.dnb-forms-field-postal-code-and-city--width-large{width:21rem}.dnb-forms-field-postal-code-and-city__postal-code{flex:0 5rem}.dnb-forms-field-postal-code-and-city__city{flex:1}.dnb-forms-field-selection--width-large .dnb-dropdown__shell{width:21rem}.dnb-forms-field-selection--width-medium .dnb-dropdown__shell{width:11rem}.dnb-forms-field-selection--width-small .dnb-dropdown__shell{width:5rem}.dnb-forms-field-array-selection--options-layout-vertical .dnb-forms-field-array-selection__options{grid-row-gap:var(--spacing-x-small);display:flex;flex-flow:column;row-gap:var(--spacing-x-small)}.dnb-forms-field-array-selection--options-layout-horizontal .dnb-forms-field-array-selection__options{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row wrap}.dnb-forms-field-country-code .dnb-autocomplete__inner{--autocomplete-width:9rem}.dnb-forms-field-country-code--width-small .dnb-autocomplete__inner{--autocomplete-width:5rem}.dnb-forms-field-country-code--width-medium .dnb-autocomplete__inner{--autocomplete-width:11rem}.dnb-forms-field-country-code--width-large .dnb-autocomplete__inner{--autocomplete-width:21rem}.dnb-forms-button-row{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small);display:flex;flex-flow:row}.dnb-forms-card{background-color:var(--color-white);border:.25rem solid var(--color-pistachio);border-radius:.75rem;padding:var(--spacing-medium) var(--spacing-medium) var(--spacing-large) var(--spacing-medium)}.dnb-forms-card__heading{font-size:var(--font-size-basis);font-weight:var(--font-weight-medium)}.dnb-forms-card+.dnb-forms-card__heading{margin-top:var(--spacing-small)}.dnb-forms-flex-container{display:flex}.dnb-forms-flex-container--direction-row{flex-direction:row}.dnb-forms-flex-container--direction-column{flex-direction:column}.dnb-forms-flex-container--justify-flex-start{justify-content:flex-start}.dnb-forms-flex-container--justify-flex-end{justify-content:flex-end}.dnb-forms-flex-container--justify-center{justify-content:center}.dnb-forms-flex-container--justify-space-between{justify-content:space-between}.dnb-forms-flex-container--justify-space-around{justify-content:space-around}.dnb-forms-flex-container--justify-space-evenly{justify-content:space-evenly}.dnb-forms-flex-container--align-flex-start{align-items:flex-start}.dnb-forms-flex-container--align-flex-end{align-items:flex-end}.dnb-forms-flex-container--align-center{align-items:center}.dnb-forms-flex-container--align-stretch{align-items:stretch}.dnb-forms-flex-container--align-baseline{align-items:baseline}.dnb-forms-flex-container--wrap{flex-wrap:wrap}.dnb-forms-flex-container__hr{border:none;border-top:1px solid var(--color-black-8);height:0;margin:0;padding:0;width:100%}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-small{grid-column-gap:var(--spacing-small);-moz-column-gap:var(--spacing-small);column-gap:var(--spacing-small)}.dnb-forms-flex-container--direction-row.dnb-forms-flex-container--spacing-medium{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium)}.dnb-forms-flex-container--width-small{width:5rem}.dnb-forms-flex-container--width-medium{width:11rem}.dnb-forms-flex-container--width-large{width:21rem}.dnb-forms-flex-item--grow{flex-grow:1}.dnb-forms-flex-item--shrink{flex-shrink:1}.dnb-forms-flex-item--width-small{width:5rem}.dnb-forms-flex-item--width-medium{width:11rem}.dnb-forms-flex-item--width-large{width:21rem}.dnb-forms-section+.dnb-forms-section{margin-top:var(--spacing-large)}.dnb-forms-steps-layout{grid-column-gap:var(--spacing-medium);-moz-column-gap:var(--spacing-medium);column-gap:var(--spacing-medium);display:flex;flex-flow:row wrap}@media (max-width:60em){.dnb-forms-steps-layout{align-items:stretch;flex-direction:column;justify-content:stretch}}.dnb-forms-steps-layout__sidebar{flex:0;min-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar{max-width:21rem}.dnb-forms-steps-layout__sidebar .dnb-step-indicator__sidebar .dnb-step-indicator__item{min-width:336px}.dnb-forms-steps-layout__contents{flex:1;min-width:25rem}.dnb-forms-test-element{border:1px dashed grey;border-radius:.5rem;color:#909090;padding:.5rem 1rem}.dnb-forms-field-block--layout-vertical{display:grid;grid-template-areas:"label" "contents" "status";grid-template-columns:auto}.dnb-forms-field-block--layout-horizontal{display:grid;grid-template-areas:"label contents" "status status";grid-template-columns:11rem auto}.dnb-forms-field-block--width-small{width:5rem}.dnb-forms-field-block--width-medium{width:11rem}.dnb-forms-field-block--width-large{width:21rem}.dnb-forms-field-block__label{align-items:center;display:flex;flex-flow:row;grid-area:label;justify-content:space-between}.dnb-forms-field-block__label-description{margin-left:.3em}.dnb-forms-field-block__label-description,.dnb-forms-field-block__label-secondary{color:var(--color-black-55);font-size:var(--font-size-small)}.dnb-forms-field-block__status{grid-area:status}.dnb-forms-field-block__contents{grid-area:contents}.dnb-forms-field-block__contents--width-stretch{width:100%}.dnb-forms-field-block__contents--width-small{width:5rem}.dnb-forms-field-block__contents--width-medium{width:11rem}.dnb-forms-field-block__contents--width-large{width:21rem}.dnb-forms-value-block{display:block;font-size:var(--font-size-basis)}.dnb-forms-value-block--inline{display:inline-block;font-size:inherit;margin-left:var(--spacing-xx-small);margin-right:var(--spacing-xx-small)}.dnb-forms-value-block__label{font-weight:var(--font-weight-medium)}.dnb-forms-value-block__placeholder{color:rgba(0,0,0,.5)}

package/cjs/extensions/forms/style/index.d.ts

@@ -0,0 +1 @@
+export {};

package/cjs/extensions/forms/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("./dnb-forms.min.css");
+//# sourceMappingURL=index.js.map

package/cjs/extensions/forms/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["require"],"sources":["../../../../../src/extensions/forms/style/index.js"],"sourcesContent":["/**\n * Web Style Import\n *\n */\n\nimport './dnb-forms.scss'\n"],"mappings":";;AAKAA,OAAA"}