@dnb/eufemia 10.51.2 → 10.52.0

package/extensions/forms/hooks/useSnapshot.js

@@ -0,0 +1,81 @@
+"use client";
+
+import { useCallback, useRef } from 'react';
+import { makeUniqueId } from '../../../shared/component-helper';
+import pointer from '../utils/json-pointer';
+import useDataContext from './useDataContext';
+import useData from '../Form/data-context/useData';
+export default function useSnapshot(id) {
+  const internalSnapshotsRef = useRef();
+  if (!internalSnapshotsRef.current) {
+    internalSnapshotsRef.current = new Map();
+  }
+  const {
+    getContext
+  } = useDataContext(id);
+  const {
+    set: setData,
+    update: updateData
+  } = useData(id);
+  const createSnapshot = useCallback(function () {
+    let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : makeUniqueId();
+    let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    let content = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    const {
+      internalDataRef,
+      snapshotsRef
+    } = getContext();
+    if (!content) {
+      var _snapshotsRef$current, _snapshotsRef$current2;
+      const snapshotWithPaths = snapshotsRef === null || snapshotsRef === void 0 ? void 0 : (_snapshotsRef$current = snapshotsRef.current) === null || _snapshotsRef$current === void 0 ? void 0 : (_snapshotsRef$current2 = _snapshotsRef$current.get) === null || _snapshotsRef$current2 === void 0 ? void 0 : _snapshotsRef$current2.call(_snapshotsRef$current, name);
+      if (snapshotWithPaths) {
+        const collectedData = new Map();
+        snapshotWithPaths.forEach((isMounted, path) => {
+          if (isMounted && pointer.has(internalDataRef.current, path)) {
+            collectedData.set(path, pointer.get(internalDataRef.current, path));
+          }
+        });
+        content = collectedData;
+      } else {
+        content = internalDataRef.current;
+      }
+    }
+    internalSnapshotsRef.current.set(combineIdWithName(id, name), content);
+    return id;
+  }, [getContext]);
+  const getSnapshot = useCallback(function (id) {
+    let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return internalSnapshotsRef.current.get(combineIdWithName(id, name));
+  }, []);
+  const deleteSnapshot = useCallback(function (id) {
+    let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    internalSnapshotsRef.current.delete(combineIdWithName(id, name));
+  }, []);
+  const applySnapshot = useCallback(function (id) {
+    let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    const snapshot = getSnapshot(id, name);
+    if (snapshot instanceof Map) {
+      snapshot.forEach((value, path) => {
+        updateData(path, value);
+      });
+    } else if (snapshot) {
+      setData(snapshot);
+    }
+  }, [getSnapshot, setData, updateData]);
+  const revertSnapshot = useCallback(function (id) {
+    let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    applySnapshot(id, name);
+    deleteSnapshot(id, name);
+  }, [applySnapshot, deleteSnapshot]);
+  return {
+    createSnapshot,
+    revertSnapshot,
+    applySnapshot,
+    internalSnapshotsRef
+  };
+}
+function combineIdWithName(id) {
+  let name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  return name ? `${id}-${name}` : id;
+}
+//# sourceMappingURL=useSnapshot.js.map

package/extensions/forms/hooks/useSnapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnapshot.js","names":["useCallback","useRef","makeUniqueId","pointer","useDataContext","useData","useSnapshot","id","internalSnapshotsRef","current","Map","getContext","set","setData","update","updateData","createSnapshot","arguments","length","undefined","name","content","internalDataRef","snapshotsRef","_snapshotsRef$current","_snapshotsRef$current2","snapshotWithPaths","get","call","collectedData","forEach","isMounted","path","has","combineIdWithName","getSnapshot","deleteSnapshot","delete","applySnapshot","snapshot","value","revertSnapshot"],"sources":["../../../../../src/extensions/forms/hooks/useSnapshot.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react'\nimport { makeUniqueId } from '../../../shared/component-helper'\nimport pointer from '../utils/json-pointer'\nimport { SharedStateId } from '../../../shared/helpers/useSharedState'\nimport useDataContext from './useDataContext'\nimport { SnapshotId, SnapshotName } from '../Form/Snapshot'\nimport useData from '../Form/data-context/useData'\n\nexport default function useSnapshot(id?: SharedStateId) {\n  const internalSnapshotsRef = useRef<Map<SnapshotId, unknown>>()\n  if (!internalSnapshotsRef.current) {\n    internalSnapshotsRef.current = new Map()\n  }\n\n  const { getContext } = useDataContext(id)\n  const { set: setData, update: updateData } = useData(id)\n\n  const createSnapshot = useCallback(\n    (\n      id: SnapshotId = makeUniqueId(),\n      name: SnapshotName = null,\n      content: unknown = null\n    ): SnapshotId => {\n      const { internalDataRef, snapshotsRef } = getContext()\n\n      if (!content) {\n        const snapshotWithPaths = snapshotsRef?.current?.get?.(name)\n        if (snapshotWithPaths) {\n          const collectedData = new Map()\n          snapshotWithPaths.forEach((isMounted, path) => {\n            if (isMounted && pointer.has(internalDataRef.current, path)) {\n              collectedData.set(\n                path,\n                pointer.get(internalDataRef.current, path)\n              )\n            }\n          })\n          content = collectedData\n        } else {\n          content = internalDataRef.current\n        }\n      }\n\n      internalSnapshotsRef.current.set(\n        combineIdWithName(id, name),\n        content\n      )\n\n      return id\n    },\n    [getContext]\n  )\n\n  const getSnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null): unknown => {\n      return internalSnapshotsRef.current.get(combineIdWithName(id, name))\n    },\n    []\n  )\n\n  const deleteSnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null): void => {\n      internalSnapshotsRef.current.delete(combineIdWithName(id, name))\n    },\n    []\n  )\n\n  const applySnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null) => {\n      const snapshot = getSnapshot(id, name)\n\n      if (snapshot instanceof Map) {\n        snapshot.forEach((value, path) => {\n          updateData(path, value)\n        })\n      } else if (snapshot) {\n        setData(snapshot)\n      }\n    },\n    [getSnapshot, setData, updateData]\n  )\n\n  const revertSnapshot = useCallback(\n    (id: SnapshotId, name: SnapshotName = null) => {\n      applySnapshot(id, name)\n      deleteSnapshot(id, name)\n    },\n    [applySnapshot, deleteSnapshot]\n  )\n\n  return {\n    createSnapshot,\n    revertSnapshot,\n    applySnapshot,\n    internalSnapshotsRef,\n  }\n}\n\nfunction combineIdWithName(id: SnapshotId, name: SnapshotName = null) {\n  return name ? `${id}-${name}` : id\n}\n"],"mappings":"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"}

package/extensions/forms/hooks/useValueProps.js

@@ -4,10 +4,14 @@ 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 { useCallback, useContext, useEffect, useReducer, useRef } from 'react';
+import { convertJsxToString } from '../../../shared/component-helper';
 import useExternalValue from './useExternalValue';
 import usePath from './usePath';
 import DataContext from '../DataContext/Context';
 import ValueProviderContext from '../Value/Provider/ValueProviderContext';
+const transformLabelParameters = {
+  convertJsxToString
+};
 export default function useValueProps(localeProps) {
   var _useExternalValue, _props$label, _fieldPropsRef$curren, _fieldPropsRef$curren2;
   const [, forceUpdate] = useReducer(() => ({}), {});
@@ -22,6 +26,7 @@ export default function useValueProps(localeProps) {
     defaultValue,
     inheritVisibility,
     inheritLabel,
+    transformLabel = label => label,
     transformIn = value => value,
     toInput = value => value,
     fromExternal = value => value
@@ -66,7 +71,7 @@ export default function useValueProps(localeProps) {
     return item.isVisible !== false && (item.isPreMounted !== false || item.wasStepChange === true);
   }, [inheritVisibility, mountedFieldsRef]);
   const value = shouldBeVisible(path) ? transformIn(toInput(externalValue)) : undefined;
-  const label = (_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : inheritLabel ? fieldPropsRef === null || fieldPropsRef === void 0 ? void 0 : (_fieldPropsRef$curren = fieldPropsRef.current) === null || _fieldPropsRef$curren === void 0 ? void 0 : (_fieldPropsRef$curren2 = _fieldPropsRef$curren[path]) === null || _fieldPropsRef$curren2 === void 0 ? void 0 : _fieldPropsRef$curren2.label : undefined;
+  const label = transformLabel((_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : inheritLabel ? fieldPropsRef === null || fieldPropsRef === void 0 ? void 0 : (_fieldPropsRef$curren = fieldPropsRef.current) === null || _fieldPropsRef$curren === void 0 ? void 0 : (_fieldPropsRef$curren2 = _fieldPropsRef$curren[path]) === null || _fieldPropsRef$curren2 === void 0 ? void 0 : _fieldPropsRef$curren2.label : undefined, transformLabelParameters);
   return _objectSpread(_objectSpread({}, props), {}, {
     label,
     value

package/extensions/forms/hooks/useValueProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"useValueProps.js","names":["useCallback","useContext","useEffect","useReducer","useRef","useExternalValue","usePath","DataContext","ValueProviderContext","useValueProps","localeProps","_useExternalValue","_props$label","_fieldPropsRef$curren","_fieldPropsRef$curren2","forceUpdate","extend","props","path","pathProp","value","valueProp","itemPath","defaultValue","inheritVisibility","inheritLabel","transformIn","toInput","fromExternal","transformers","externalValue","fieldPropsRef","mountedFieldsRef","setValueProps","setFieldEventListener","requestAnimationFrame","shouldBeVisible","_mountedFieldsRef$cur","item","current","isVisible","isPreMounted","wasStepChange","undefined","label","_objectSpread"],"sources":["../../../../../src/extensions/forms/hooks/useValueProps.ts"],"sourcesContent":["import {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport { Path, ValueProps } from '../types'\nimport useExternalValue from './useExternalValue'\nimport usePath from './usePath'\nimport DataContext from '../DataContext/Context'\nimport ValueProviderContext from '../Value/Provider/ValueProviderContext'\n\nexport type Props<Value> = ValueProps<Value>\n\nexport default function useValueProps<\n  Value = unknown,\n  Props extends ValueProps<Value> = ValueProps<Value>,\n>(localeProps: Props): Props & ValueProps<Value> {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const { extend } = useContext(ValueProviderContext)\n  const props = extend(localeProps)\n\n  const {\n    path: pathProp,\n    value: valueProp,\n    itemPath,\n    defaultValue,\n    inheritVisibility,\n    inheritLabel,\n    transformIn = (value: Value) => value,\n    toInput = (value: Value) => value,\n    fromExternal = (value: Value) => value,\n  } = props\n\n  const transformers = useRef({\n    transformIn,\n    toInput,\n    fromExternal,\n  })\n\n  const { path } = usePath({ path: pathProp, itemPath })\n\n  const externalValue =\n    useExternalValue<Value>({\n      path,\n      itemPath,\n      value: valueProp,\n      transformers,\n    }) ?? defaultValue\n\n  const {\n    fieldPropsRef,\n    mountedFieldsRef,\n    setValueProps,\n    setFieldEventListener,\n  } = useContext(DataContext) || {}\n  setValueProps?.(path, props)\n\n  useEffect(() => {\n    if (inheritLabel || inheritVisibility) {\n      setFieldEventListener?.(path, 'onMount', () => {\n        // This is needed to make values, rendered before the field, to get the correct visibility state\n        requestAnimationFrame(forceUpdate)\n      })\n    }\n  }, [setFieldEventListener, path, inheritVisibility, inheritLabel])\n\n  const shouldBeVisible = useCallback(\n    (path: Path): boolean => {\n      const item = mountedFieldsRef?.current?.[path]\n\n      if (!item || !inheritVisibility) {\n        return true\n      }\n\n      return (\n        item.isVisible !== false &&\n        (item.isPreMounted !== false || item.wasStepChange === true)\n      )\n    },\n    [inheritVisibility, mountedFieldsRef]\n  )\n\n  const value = shouldBeVisible(path)\n    ? transformIn(toInput(externalValue))\n    : undefined\n\n  const label =\n    props.label ??\n    (inheritLabel ? fieldPropsRef?.current?.[path]?.label : undefined)\n\n  return { ...props, label, value }\n}\n"],"mappings":"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"}
+{"version":3,"file":"useValueProps.js","names":["useCallback","useContext","useEffect","useReducer","useRef","convertJsxToString","useExternalValue","usePath","DataContext","ValueProviderContext","transformLabelParameters","useValueProps","localeProps","_useExternalValue","_props$label","_fieldPropsRef$curren","_fieldPropsRef$curren2","forceUpdate","extend","props","path","pathProp","value","valueProp","itemPath","defaultValue","inheritVisibility","inheritLabel","transformLabel","label","transformIn","toInput","fromExternal","transformers","externalValue","fieldPropsRef","mountedFieldsRef","setValueProps","setFieldEventListener","requestAnimationFrame","shouldBeVisible","_mountedFieldsRef$cur","item","current","isVisible","isPreMounted","wasStepChange","undefined","_objectSpread"],"sources":["../../../../../src/extensions/forms/hooks/useValueProps.ts"],"sourcesContent":["import {\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  useRef,\n} from 'react'\nimport { Path, ValueProps } from '../types'\nimport { convertJsxToString } from '../../../shared/component-helper'\nimport useExternalValue from './useExternalValue'\nimport usePath from './usePath'\nimport DataContext from '../DataContext/Context'\nimport ValueProviderContext from '../Value/Provider/ValueProviderContext'\n\nexport type Props<Value> = ValueProps<Value>\n\nconst transformLabelParameters = {\n  convertJsxToString,\n} as unknown as Parameters<Props<unknown>['transformLabel']>[1]\n\nexport default function useValueProps<\n  Value = unknown,\n  Props extends ValueProps<Value> = ValueProps<Value>,\n>(localeProps: Props): Props & ValueProps<Value> {\n  const [, forceUpdate] = useReducer(() => ({}), {})\n\n  const { extend } = useContext(ValueProviderContext)\n  const props = extend(localeProps)\n\n  const {\n    path: pathProp,\n    value: valueProp,\n    itemPath,\n    defaultValue,\n    inheritVisibility,\n    inheritLabel,\n    transformLabel = (label: Props['label']) => label,\n    transformIn = (value: Value) => value,\n    toInput = (value: Value) => value,\n    fromExternal = (value: Value) => value,\n  } = props\n\n  const transformers = useRef({\n    transformIn,\n    toInput,\n    fromExternal,\n  })\n\n  const { path } = usePath({ path: pathProp, itemPath })\n\n  const externalValue =\n    useExternalValue<Value>({\n      path,\n      itemPath,\n      value: valueProp,\n      transformers,\n    }) ?? defaultValue\n\n  const {\n    fieldPropsRef,\n    mountedFieldsRef,\n    setValueProps,\n    setFieldEventListener,\n  } = useContext(DataContext) || {}\n  setValueProps?.(path, props)\n\n  useEffect(() => {\n    if (inheritLabel || inheritVisibility) {\n      setFieldEventListener?.(path, 'onMount', () => {\n        // This is needed to make values, rendered before the field, to get the correct visibility state\n        requestAnimationFrame(forceUpdate)\n      })\n    }\n  }, [setFieldEventListener, path, inheritVisibility, inheritLabel])\n\n  const shouldBeVisible = useCallback(\n    (path: Path): boolean => {\n      const item = mountedFieldsRef?.current?.[path]\n\n      if (!item || !inheritVisibility) {\n        return true\n      }\n\n      return (\n        item.isVisible !== false &&\n        (item.isPreMounted !== false || item.wasStepChange === true)\n      )\n    },\n    [inheritVisibility, mountedFieldsRef]\n  )\n\n  const value = shouldBeVisible(path)\n    ? transformIn(toInput(externalValue))\n    : undefined\n\n  const label = transformLabel(\n    props.label ??\n      (inheritLabel ? fieldPropsRef?.current?.[path]?.label : undefined),\n    transformLabelParameters\n  )\n\n  return { ...props, label, value }\n}\n"],"mappings":"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"}

package/extensions/forms/types.d.ts

@@ -255,6 +255,10 @@ export interface ValueProps<Value = unknown> extends DataValueReadComponentProps
     inline?: boolean;
     /** The max-width of a value block. Defaults to large */
     maxWidth?: 'small' | 'medium' | 'large' | 'auto';
+    /**
+     * Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.
+     */
+    transformLabel?: (label: React.ReactNode, convertJsxToString: (label: React.ReactNode) => string) => React.ReactNode;
     /**
      * Transforms the `value` before its displayed in the field (e.g. input).
      * Public API. Should not be used internally.

package/extensions/forms/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","key","dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","_ref","includes","omitDataValueReadProps","_ref2","dataValueWriteProps","pickDataValueWriteProps","_ref3","omitDataValueWriteProps","_ref4","pickDataValueReadWriteProps","_ref5","omitDataValueReadWriteProps","_ref6"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import type { SpacingProps } from '../../components/space/types'\nimport type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'\nimport type { JSONSchemaType } from 'ajv/dist/2020'\nimport { JsonObject } from './utils/json-pointer'\nimport { AriaAttributes } from 'react'\nimport { FilterData, VisibleDataOptions } from './DataContext'\n\nexport type * from 'json-schema'\nexport type JSONSchema = JSONSchema7\nexport type AllJSONSchemaVersionsBasis<DataType> =\n  | JSONSchema4\n  | JSONSchema6\n  | JSONSchema7\n  | JSONSchemaType<DataType>\nexport type AllJSONSchemaVersions<DataType = unknown> =\n  | AllJSONSchemaVersionsBasis<DataType>\n\n  // In order to support \"schema = { ... } as const\"\n  | (Omit<AllJSONSchemaVersionsBasis<DataType>, 'required'> & {\n      required?: readonly string[]\n    })\nexport { JSONSchemaType }\n\ntype ValidationRule = 'type' | 'pattern' | 'required' | string\ntype MessageValues = Record<string, string>\nexport type ValidatorReturnSync<Value> =\n  | Error\n  | undefined\n  | void\n  | Array<Validator<Value>>\n\nexport type ValidatorReturnAsync<Value> =\n  | ValidatorReturnSync<Value>\n  | Promise<ValidatorReturnSync<Value>>\nexport type Validator<Value, ErrorMessages = DefaultErrorMessages> = (\n  value: Value,\n  additionalArgs?: ValidatorAdditionalArgs<Value, ErrorMessages>\n) => ValidatorReturnAsync<Value>\nexport type ValidatorAdditionalArgs<\n  Value,\n  ErrorMessages = DefaultErrorMessages,\n> = {\n  /**\n   * Returns the error messages from the { errorMessages } object.\n   */\n  errorMessages: ErrorMessages\n\n  /**\n   * Connects the validator to another field.\n   * This allows you to rerun the validator function once the value of the connected field changes.\n   */\n  connectWithPath: (path: Path) => { getValue: () => Value }\n\n  /**\n   * Returns the validators from the { exportValidators } object.\n   */\n  validators: Record<string, Validator<Value>>\n} & {\n  /** @deprecated use the error messages from the { errorMessages } object instead. */\n  pattern: string\n  /** @deprecated use the error messages from the { errorMessages } object instead. */\n  required: string\n}\n\ninterface IFormErrorOptions {\n  validationRule?: ValidationRule\n  messageValues?: MessageValues\n}\n\n/**\n * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling\n */\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: ValidationRule\n\n  /**\n   * Replacement values relevant for this error.\n   * @example { minLength: 3 } to be able to replace values in a message like \"Minimum {minLength} characters\"\n   */\n  messageValues?: MessageValues\n\n  constructor(message: string, options?: IFormErrorOptions) {\n    super(message)\n\n    if (options) {\n      for (const key in options) {\n        this[key] = options[key]\n      }\n    }\n  }\n}\n\n/**\n * Accept any key, so custom message keys can be used\n */\nexport type CustomErrorMessages = Record<string, string>\n\n/**\n * Accept any key, so custom message keys can be used\n * including the path to the field the message is for\n */\nexport type CustomErrorMessagesWithPaths =\n  | CustomErrorMessages\n  | {\n      // eslint-disable-next-line no-unused-vars\n      [K in `/${string}`]?: CustomErrorMessages\n    }\n\nexport interface DefaultErrorMessages {\n  required?: string\n  pattern?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: Path\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: Path\n  /** Source data value for the field. Will take precedence over the path value given in the data context */\n  value?: Value\n  /** Default source data value for the field. Will not take precedence over the path value given in the data context */\n  defaultValue?: Value\n}\n\nconst dataValueReadProps = ['path', 'itemPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\ntype EventArgs<\n  Value,\n  ExtraValue extends AdditionalEventArgs,\n> = ExtraValue extends undefined\n  ? [value: Value]\n  : [value: Value, additionalArgs?: ExtraValue]\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ExtraValue extends AdditionalEventArgs = undefined,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (...args: EventArgs<Value | EmptyValue, ExtraValue>) => void\n  onBlur?: (...args: EventArgs<Value | EmptyValue, ExtraValue>) => void\n  onChange?: (\n    ...args: EventArgs<Value | EmptyValue, ExtraValue>\n  ) => OnChangeReturnType\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type AdditionalEventArgs = Record<string, unknown>\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport type FieldBlockProps = {\n  /**\n   * The layout of the field block\n   */\n  layout?: 'horizontal' | 'vertical'\n  /**\n   * Main label text for the field\n   */\n  label?: React.ReactNode\n  /**\n   * Will append an additional text to the label, like \"(optional)\" or \"(recommended)\"\n   */\n  labelSuffix?: React.ReactNode\n  /**\n   * A more discreet text displayed beside the label\n   */\n  labelDescription?: React.ReactNode\n  /**\n   * Text showing in place of the value if no value is given\n   */\n  placeholder?: React.ReactNode\n}\n\n/**\n * The width of a field block\n */\nexport type FieldBlockWidth =\n  | false\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'stretch'\n\nexport interface UseFieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue>,\n    AriaAttributes {\n  // - HTML Element Attributes\n  /**\n   * ID added to the actual field component, and linked to the label via for-attribute\n   */\n  id?: Identifier\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n\n  /**\n   * NB: Undocumented for now.\n   * Forwards all possible props to the underlying component.\n   */\n  htmlAttributes?: Record<string, unknown>\n\n  /**\n   * NB: Undocumented for now.\n   * Forwards all given props in a props object.\n   */\n  props?: Record<string, unknown>\n\n  // - Used by useFieldProps and FieldBlock\n  info?: React.ReactNode\n  warning?: React.ReactNode\n  error?: Error | FormError\n\n  // - Validation\n  required?: boolean\n  schema?: AllJSONSchemaVersions<Value>\n  validator?: Validator<Value>\n  onBlurValidator?: Validator<Value>\n  exportValidators?: Record<string, Validator<Value>>\n  validateRequired?: (\n    internal: Value,\n    {\n      emptyValue,\n      required,\n      isChanged,\n      error,\n    }: {\n      emptyValue: EmptyValue\n      required: boolean\n      isChanged: boolean\n      error: FormError | undefined\n    }\n  ) => FormError | undefined\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /**\n   * Should validation be done while writing, not just when blurring the field?\n   */\n  continuousValidation?: boolean\n  /**\n   * Provide custom error messages for the field\n   */\n  errorMessages?: ErrorMessages\n\n  // - Derivatives\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: unknown) => Value\n\n  /**\n   * Transforms the value before it gets forwarded to the form data object or returned as the onChange value parameter.\n   * Public API. Should not be used internally.\n   */\n  transformOut?: (internal: Value, additionalArgs?: unknown) => unknown\n\n  /**\n   * Transforms the value given by `handleChange` after `fromInput` and before `updateValue` and `toEvent`. The second parameter returns the current value.\n   */\n  transformValue?: (value: Value, currentValue?: Value) => Value\n\n  /**\n   * Transform additionalArgs or generate it based on `value`.\n   */\n  provideAdditionalArgs?: (\n    value: Value,\n    additionalArgs?: AdditionalEventArgs\n  ) => AdditionalEventArgs\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the internal value before it gets returned by even callbacks such as `onChange`, `onFocus` and `onBlur`. The second parameter returns the event type: `onChange`, `onFocus`, `onBlur` or `onBlurValidator`.\n   */\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n\n  /**\n   * Transforms the value given by `handleChange` before it is used in the further process flow. Use it to destruct the value from the original event object.\n   */\n  fromInput?: (external: Value | unknown) => Value\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n\n  /**\n   * For internal use only.\n   */\n  valueType?: string | number | boolean | Array<string | number | boolean>\n}\n\nexport type FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = UseFieldProps<Value, EmptyValue, ErrorMessages> & FieldBlockProps\n\nexport type FieldPropsGeneric<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = Omit<\n  FieldProps<Value, EmptyValue, ErrorMessages>,\n  keyof DataValueWriteProps\n> &\n  DataValueWriteProps<Value, EmptyValue, AdditionalEventArgs>\n\nexport type FieldPropsWithExtraValue<\n  Value = unknown,\n  ExtraValue extends AdditionalEventArgs = AdditionalEventArgs,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = Omit<\n  FieldProps<Value, EmptyValue, ErrorMessages>,\n  keyof DataValueWriteProps\n> &\n  DataValueWriteProps<Value, EmptyValue, ExtraValue>\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    content?: React.ReactNode\n  }\n}\n\nexport interface ValueProps<Value = unknown>\n  extends DataValueReadComponentProps<Value> {\n  /**\n   * Field label to show above the data value.\n   */\n  label?: React.ReactNode\n\n  /**\n   * Use `true` to inherit the label from a visible (rendered) field with the same path.\n   */\n  inheritLabel?: boolean\n\n  /**\n   * Use `true` to inherit the visibility from a field with the same path.\n   */\n  inheritVisibility?: boolean\n\n  /**\n   * Shows the value even if it is empty.\n   */\n  showEmpty?: boolean\n\n  /**\n   * Text showing in place of the value if no value is given.\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * For showing the value inline (not as a block element)\n   */\n  inline?: boolean\n\n  /** The max-width of a value block. Defaults to large */\n  maxWidth?: 'small' | 'medium' | 'large' | 'auto'\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type Path = string\nexport type Identifier = string\n\nexport type SubmitState =\n  | 'pending' // Used for async operations\n  | 'complete' // Used to hide the submit indicator\n  | 'success' // Used for fields\n  | 'error' // Used when error is shown\n  | 'abort' // Used to abort the state regardless (step change)\n\n/**\n * Provide a error that shows in the FormStatus of a field.\n */\ntype EventStateObjectError = Error\n/**\n * Provide a warning that shows in the FormStatus of a field.\n */\ntype EventStateObjectWarning = React.ReactNode\n/**\n * Provide an info that shows in the FormStatus of a field.\n */\ntype EventStateObjectInfo = React.ReactNode\n\n/**\n * Provide a status that will enforce the form to stay in pending state\n */\ntype EventStateObjectStatus = 'pending'\n\n/**\n * Provide a success state that will show an indicator on the related field label\n */\ntype EventStateObjectSuccess = 'saved'\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventStateObjectOr = {\n  error?: EventStateObjectError\n  warning?: EventStateObjectWarning\n  info?: EventStateObjectInfo\n  pending?: EventStateObjectStatus\n  customStatus?: unknown\n}\n\nexport type EventStateObjectEitherOr =\n  | { error: EventStateObjectError }\n  | { warning: EventStateObjectWarning }\n  | { info: EventStateObjectInfo }\n  | { status: EventStateObjectStatus }\n  | { customStatus: unknown }\n\nexport type EventStateObject = EventStateObjectOr &\n  EventStateObjectEitherOr\n\n/**\n * Provide 'saved' to indicate the data has been saved successfully. Can not be combined with `error`.\n */\nexport type EventStateObjectWithSuccess = EventStateObjectOr & {\n  success?: EventStateObjectSuccess\n} & (EventStateObjectEitherOr | { success: EventStateObjectSuccess })\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventReturnWithStateObject = Error | EventStateObject\n\nexport type EventReturnWithStateObjectAndSuccess =\n  | Error\n  | EventStateObjectWithSuccess\n\nexport type OnSubmitParams = {\n  /** Will remove data entries of fields that are not visible */\n  reduceToVisibleFields: (\n    data: JsonObject,\n    options?: VisibleDataOptions\n  ) => Partial<JsonObject>\n\n  /** Will filter data based on the given \"filterDataHandler\" method */\n  filterData: (filterDataHandler: FilterData) => Partial<JsonObject>\n\n  /** Will remove browser-side stored autocomplete data  */\n  resetForm: () => void\n\n  /** Will empty the whole internal data set of the form  */\n  clearData: () => void\n}\n\nexport type OnSubmitReturn =\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\nexport type OnSubmit<Data = JsonObject> = (\n  data: Data,\n  {\n    reduceToVisibleFields,\n    filterData,\n    resetForm,\n    clearData,\n  }: OnSubmitParams\n) => OnSubmitReturn\n\nexport type OnCommit<Data = JsonObject> = (\n  data: Data,\n  {\n    clearData,\n    preventCommit,\n  }: { clearData: () => void; preventCommit?: () => void }\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type OnChange<Data = JsonObject> = (\n  data: Data,\n  additionalArgs: Pick<OnSubmitParams, 'filterData'>\n) => OnChangeReturnType\n\ntype OnChangeReturnType =\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n"],"mappings":"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"}
+{"version":3,"file":"types.js","names":["FormError","Error","constructor","message","options","_defineProperty","key","dataValueReadProps","pickDataValueReadProps","props","Object","fromEntries","entries","filter","_ref","includes","omitDataValueReadProps","_ref2","dataValueWriteProps","pickDataValueWriteProps","_ref3","omitDataValueWriteProps","_ref4","pickDataValueReadWriteProps","_ref5","omitDataValueReadWriteProps","_ref6"],"sources":["../../../../src/extensions/forms/types.ts"],"sourcesContent":["import type { SpacingProps } from '../../components/space/types'\nimport type { JSONSchema4, JSONSchema6, JSONSchema7 } from 'json-schema'\nimport type { JSONSchemaType } from 'ajv/dist/2020'\nimport { JsonObject } from './utils/json-pointer'\nimport { AriaAttributes } from 'react'\nimport { FilterData, VisibleDataOptions } from './DataContext'\n\nexport type * from 'json-schema'\nexport type JSONSchema = JSONSchema7\nexport type AllJSONSchemaVersionsBasis<DataType> =\n  | JSONSchema4\n  | JSONSchema6\n  | JSONSchema7\n  | JSONSchemaType<DataType>\nexport type AllJSONSchemaVersions<DataType = unknown> =\n  | AllJSONSchemaVersionsBasis<DataType>\n\n  // In order to support \"schema = { ... } as const\"\n  | (Omit<AllJSONSchemaVersionsBasis<DataType>, 'required'> & {\n      required?: readonly string[]\n    })\nexport { JSONSchemaType }\n\ntype ValidationRule = 'type' | 'pattern' | 'required' | string\ntype MessageValues = Record<string, string>\nexport type ValidatorReturnSync<Value> =\n  | Error\n  | undefined\n  | void\n  | Array<Validator<Value>>\n\nexport type ValidatorReturnAsync<Value> =\n  | ValidatorReturnSync<Value>\n  | Promise<ValidatorReturnSync<Value>>\nexport type Validator<Value, ErrorMessages = DefaultErrorMessages> = (\n  value: Value,\n  additionalArgs?: ValidatorAdditionalArgs<Value, ErrorMessages>\n) => ValidatorReturnAsync<Value>\nexport type ValidatorAdditionalArgs<\n  Value,\n  ErrorMessages = DefaultErrorMessages,\n> = {\n  /**\n   * Returns the error messages from the { errorMessages } object.\n   */\n  errorMessages: ErrorMessages\n\n  /**\n   * Connects the validator to another field.\n   * This allows you to rerun the validator function once the value of the connected field changes.\n   */\n  connectWithPath: (path: Path) => { getValue: () => Value }\n\n  /**\n   * Returns the validators from the { exportValidators } object.\n   */\n  validators: Record<string, Validator<Value>>\n} & {\n  /** @deprecated use the error messages from the { errorMessages } object instead. */\n  pattern: string\n  /** @deprecated use the error messages from the { errorMessages } object instead. */\n  required: string\n}\n\ninterface IFormErrorOptions {\n  validationRule?: ValidationRule\n  messageValues?: MessageValues\n}\n\n/**\n * Standard error object for Eufemia Forms, extending the built-in error with additional information for data handling\n */\nexport class FormError extends Error {\n  /**\n   * What validation rule did the error occur based on? (i.e: minLength, required or maximum)\n   */\n  validationRule?: ValidationRule\n\n  /**\n   * Replacement values relevant for this error.\n   * @example { minLength: 3 } to be able to replace values in a message like \"Minimum {minLength} characters\"\n   */\n  messageValues?: MessageValues\n\n  constructor(message: string, options?: IFormErrorOptions) {\n    super(message)\n\n    if (options) {\n      for (const key in options) {\n        this[key] = options[key]\n      }\n    }\n  }\n}\n\n/**\n * Accept any key, so custom message keys can be used\n */\nexport type CustomErrorMessages = Record<string, string>\n\n/**\n * Accept any key, so custom message keys can be used\n * including the path to the field the message is for\n */\nexport type CustomErrorMessagesWithPaths =\n  | CustomErrorMessages\n  | {\n      // eslint-disable-next-line no-unused-vars\n      [K in `/${string}`]?: CustomErrorMessages\n    }\n\nexport interface DefaultErrorMessages {\n  required?: string\n  pattern?: string\n}\n\nexport interface DataValueReadProps<Value = unknown> {\n  /** JSON Pointer for where the data for this field is located in the source dataset */\n  path?: Path\n  /** JSON Pointer for where the data for this field is located in the source iterate loop element */\n  itemPath?: Path\n  /** Source data value for the field. Will take precedence over the path value given in the data context */\n  value?: Value\n  /** Default source data value for the field. Will not take precedence over the path value given in the data context */\n  defaultValue?: Value\n}\n\nconst dataValueReadProps = ['path', 'itemPath', 'value']\n\nexport function pickDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): DataValueReadProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueReadProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadProps<Props extends DataValueReadProps>(\n  props: Props\n): Omit<DataValueReadProps, keyof DataValueReadProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueReadProps.includes(key)\n    )\n  )\n}\n\ntype EventArgs<\n  Value,\n  ExtraValue extends AdditionalEventArgs,\n> = ExtraValue extends undefined\n  ? [value: Value]\n  : [value: Value, additionalArgs?: ExtraValue]\n\nexport interface DataValueWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ExtraValue extends AdditionalEventArgs = undefined,\n> {\n  emptyValue?: EmptyValue\n  onFocus?: (...args: EventArgs<Value | EmptyValue, ExtraValue>) => void\n  onBlur?: (...args: EventArgs<Value | EmptyValue, ExtraValue>) => void\n  onChange?: (\n    ...args: EventArgs<Value | EmptyValue, ExtraValue>\n  ) => OnChangeReturnType\n}\n\nconst dataValueWriteProps = ['emptyValue', 'onFocus', 'onBlur', 'onChange']\n\nexport function pickDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): DataValueWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(([key]) =>\n      dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueWriteProps<Props extends DataValueWriteProps>(\n  props: Props\n): Omit<DataValueWriteProps, keyof DataValueWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) => !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type DataValueReadWriteProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = DataValueReadProps<Value> & DataValueWriteProps<Value, EmptyValue>\n\nexport function pickDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(props: Props): DataValueReadWriteProps {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        dataValueReadProps.includes(key) ||\n        dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport function omitDataValueReadWriteProps<\n  Props extends DataValueReadWriteProps,\n>(\n  props: Props\n): Omit<DataValueReadWriteProps, keyof DataValueReadWriteProps> {\n  return Object.fromEntries(\n    Object.entries(props ?? {}).filter(\n      ([key]) =>\n        !dataValueReadProps.includes(key) &&\n        !dataValueWriteProps.includes(key)\n    )\n  )\n}\n\nexport type ComponentProps = SpacingProps & {\n  className?: string\n}\n\nexport type AdditionalEventArgs = Record<string, unknown>\n\nexport type DataValueReadComponentProps<Value = unknown> = ComponentProps &\n  DataValueReadProps<Value>\n\nexport type DataValueReadWriteComponentProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n> = ComponentProps &\n  DataValueReadProps<Value> &\n  DataValueWriteProps<Value, EmptyValue>\n\nexport type FieldBlockProps = {\n  /**\n   * The layout of the field block\n   */\n  layout?: 'horizontal' | 'vertical'\n  /**\n   * Main label text for the field\n   */\n  label?: React.ReactNode\n  /**\n   * Will append an additional text to the label, like \"(optional)\" or \"(recommended)\"\n   */\n  labelSuffix?: React.ReactNode\n  /**\n   * A more discreet text displayed beside the label\n   */\n  labelDescription?: React.ReactNode\n  /**\n   * Text showing in place of the value if no value is given\n   */\n  placeholder?: React.ReactNode\n}\n\n/**\n * The width of a field block\n */\nexport type FieldBlockWidth =\n  | false\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'stretch'\n\nexport interface UseFieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> extends DataValueReadWriteComponentProps<Value, EmptyValue>,\n    AriaAttributes {\n  // - HTML Element Attributes\n  /**\n   * ID added to the actual field component, and linked to the label via for-attribute\n   */\n  id?: Identifier\n  name?: string\n  disabled?: boolean\n  readOnly?: boolean\n  autoComplete?:\n    | HTMLInputElement['autocomplete']\n    | HTMLTextAreaElement['autocomplete']\n\n  /**\n   * NB: Undocumented for now.\n   * Forwards all possible props to the underlying component.\n   */\n  htmlAttributes?: Record<string, unknown>\n\n  /**\n   * NB: Undocumented for now.\n   * Forwards all given props in a props object.\n   */\n  props?: Record<string, unknown>\n\n  // - Used by useFieldProps and FieldBlock\n  info?: React.ReactNode\n  warning?: React.ReactNode\n  error?: Error | FormError\n\n  // - Validation\n  required?: boolean\n  schema?: AllJSONSchemaVersions<Value>\n  validator?: Validator<Value>\n  onBlurValidator?: Validator<Value>\n  exportValidators?: Record<string, Validator<Value>>\n  validateRequired?: (\n    internal: Value,\n    {\n      emptyValue,\n      required,\n      isChanged,\n      error,\n    }: {\n      emptyValue: EmptyValue\n      required: boolean\n      isChanged: boolean\n      error: FormError | undefined\n    }\n  ) => FormError | undefined\n  /**\n   * Should error messages based on validation be shown initially (from given value-prop or source data)\n   * before the user interacts with the field?\n   * @default false\n   */\n  validateInitially?: boolean\n  /**\n   * Should error messages be shown when touching (like focusing a field and blurring) without having changed\n   * the value? So the user did not introduce a new error, but it was invalid based on validation initially.\n   */\n  validateUnchanged?: boolean\n  /**\n   * Should validation be done while writing, not just when blurring the field?\n   */\n  continuousValidation?: boolean\n  /**\n   * Provide custom error messages for the field\n   */\n  errorMessages?: ErrorMessages\n\n  // - Derivatives\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: unknown) => Value\n\n  /**\n   * Transforms the value before it gets forwarded to the form data object or returned as the onChange value parameter.\n   * Public API. Should not be used internally.\n   */\n  transformOut?: (internal: Value, additionalArgs?: unknown) => unknown\n\n  /**\n   * Transforms the value given by `handleChange` after `fromInput` and before `updateValue` and `toEvent`. The second parameter returns the current value.\n   */\n  transformValue?: (value: Value, currentValue?: Value) => Value\n\n  /**\n   * Transform additionalArgs or generate it based on `value`.\n   */\n  provideAdditionalArgs?: (\n    value: Value,\n    additionalArgs?: AdditionalEventArgs\n  ) => AdditionalEventArgs\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the internal value before it gets returned by even callbacks such as `onChange`, `onFocus` and `onBlur`. The second parameter returns the event type: `onChange`, `onFocus`, `onBlur` or `onBlurValidator`.\n   */\n  toEvent?: (\n    internal: Value,\n    type: 'onChange' | 'onFocus' | 'onBlur' | 'onBlurValidator'\n  ) => Value\n\n  /**\n   * Transforms the value given by `handleChange` before it is used in the further process flow. Use it to destruct the value from the original event object.\n   */\n  fromInput?: (external: Value | unknown) => Value\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n\n  /**\n   * For internal use only.\n   */\n  valueType?: string | number | boolean | Array<string | number | boolean>\n}\n\nexport type FieldProps<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = UseFieldProps<Value, EmptyValue, ErrorMessages> & FieldBlockProps\n\nexport type FieldPropsGeneric<\n  Value = unknown,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = Omit<\n  FieldProps<Value, EmptyValue, ErrorMessages>,\n  keyof DataValueWriteProps\n> &\n  DataValueWriteProps<Value, EmptyValue, AdditionalEventArgs>\n\nexport type FieldPropsWithExtraValue<\n  Value = unknown,\n  ExtraValue extends AdditionalEventArgs = AdditionalEventArgs,\n  EmptyValue = undefined | unknown,\n  ErrorMessages extends DefaultErrorMessages = DefaultErrorMessages,\n> = Omit<\n  FieldProps<Value, EmptyValue, ErrorMessages>,\n  keyof DataValueWriteProps\n> &\n  DataValueWriteProps<Value, EmptyValue, ExtraValue>\n\nexport interface FieldHelpProps {\n  help?: {\n    title?: string\n    content?: React.ReactNode\n  }\n}\n\nexport interface ValueProps<Value = unknown>\n  extends DataValueReadComponentProps<Value> {\n  /**\n   * Field label to show above the data value.\n   */\n  label?: React.ReactNode\n\n  /**\n   * Use `true` to inherit the label from a visible (rendered) field with the same path.\n   */\n  inheritLabel?: boolean\n\n  /**\n   * Use `true` to inherit the visibility from a field with the same path.\n   */\n  inheritVisibility?: boolean\n\n  /**\n   * Shows the value even if it is empty.\n   */\n  showEmpty?: boolean\n\n  /**\n   * Text showing in place of the value if no value is given.\n   */\n  placeholder?: React.ReactNode\n\n  /**\n   * For showing the value inline (not as a block element)\n   */\n  inline?: boolean\n\n  /** The max-width of a value block. Defaults to large */\n  maxWidth?: 'small' | 'medium' | 'large' | 'auto'\n\n  /**\n   * Transforms the label before it gets displayed. Receives the label as the first parameter. The second parameter is a object containing the `convertJsxToString` function.\n   */\n  transformLabel?: (\n    label: React.ReactNode,\n    convertJsxToString: (label: React.ReactNode) => string\n  ) => React.ReactNode\n\n  /**\n   * Transforms the `value` before its displayed in the field (e.g. input).\n   * Public API. Should not be used internally.\n   */\n  transformIn?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the value before it gets returned as the `value`.\n   */\n  toInput?: (external: Value | unknown) => Value | unknown\n\n  /**\n   * Transforms the given props `value` before any other step gets entered.\n   */\n  fromExternal?: (external: Value) => Value\n}\n\nexport type Path = string\nexport type Identifier = string\n\nexport type SubmitState =\n  | 'pending' // Used for async operations\n  | 'complete' // Used to hide the submit indicator\n  | 'success' // Used for fields\n  | 'error' // Used when error is shown\n  | 'abort' // Used to abort the state regardless (step change)\n\n/**\n * Provide a error that shows in the FormStatus of a field.\n */\ntype EventStateObjectError = Error\n/**\n * Provide a warning that shows in the FormStatus of a field.\n */\ntype EventStateObjectWarning = React.ReactNode\n/**\n * Provide an info that shows in the FormStatus of a field.\n */\ntype EventStateObjectInfo = React.ReactNode\n\n/**\n * Provide a status that will enforce the form to stay in pending state\n */\ntype EventStateObjectStatus = 'pending'\n\n/**\n * Provide a success state that will show an indicator on the related field label\n */\ntype EventStateObjectSuccess = 'saved'\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventStateObjectOr = {\n  error?: EventStateObjectError\n  warning?: EventStateObjectWarning\n  info?: EventStateObjectInfo\n  pending?: EventStateObjectStatus\n  customStatus?: unknown\n}\n\nexport type EventStateObjectEitherOr =\n  | { error: EventStateObjectError }\n  | { warning: EventStateObjectWarning }\n  | { info: EventStateObjectInfo }\n  | { status: EventStateObjectStatus }\n  | { customStatus: unknown }\n\nexport type EventStateObject = EventStateObjectOr &\n  EventStateObjectEitherOr\n\n/**\n * Provide 'saved' to indicate the data has been saved successfully. Can not be combined with `error`.\n */\nexport type EventStateObjectWithSuccess = EventStateObjectOr & {\n  success?: EventStateObjectSuccess\n} & (EventStateObjectEitherOr | { success: EventStateObjectSuccess })\n\n/**\n * Provide an error or status messages that shows in the FormStatus of a field\n */\nexport type EventReturnWithStateObject = Error | EventStateObject\n\nexport type EventReturnWithStateObjectAndSuccess =\n  | Error\n  | EventStateObjectWithSuccess\n\nexport type OnSubmitParams = {\n  /** Will remove data entries of fields that are not visible */\n  reduceToVisibleFields: (\n    data: JsonObject,\n    options?: VisibleDataOptions\n  ) => Partial<JsonObject>\n\n  /** Will filter data based on the given \"filterDataHandler\" method */\n  filterData: (filterDataHandler: FilterData) => Partial<JsonObject>\n\n  /** Will remove browser-side stored autocomplete data  */\n  resetForm: () => void\n\n  /** Will empty the whole internal data set of the form  */\n  clearData: () => void\n}\n\nexport type OnSubmitReturn =\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\nexport type OnSubmit<Data = JsonObject> = (\n  data: Data,\n  {\n    reduceToVisibleFields,\n    filterData,\n    resetForm,\n    clearData,\n  }: OnSubmitParams\n) => OnSubmitReturn\n\nexport type OnCommit<Data = JsonObject> = (\n  data: Data,\n  {\n    clearData,\n    preventCommit,\n  }: {\n    clearData: () => void\n    preventCommit?: () => void\n  }\n) =>\n  | EventReturnWithStateObject\n  | void\n  | Promise<EventReturnWithStateObject | void>\n\nexport type OnChange<Data = JsonObject> = (\n  data: Data,\n  additionalArgs: Pick<OnSubmitParams, 'filterData'>\n) => OnChangeReturnType\n\ntype OnChangeReturnType =\n  | EventReturnWithStateObjectAndSuccess\n  | void\n  | Promise<EventReturnWithStateObjectAndSuccess | void>\n"],"mappings":"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"}

package/extensions/payment-card/style/dnb-payment-card.css

@@ -22,8 +22,9 @@
   --sb-font-size-small: 0.875rem;
   --sb-font-size-basis: 1rem;
   --sb-font-size-basis--em: 1em;
-  --sb-font-size-lead: 1.25rem;
-  --sb-font-size-medium: 1.625rem;
+  --sb-font-size-lead: var(--font-size-medium);
+  --sb-font-size-medium: 1.25rem;
+  --sb-font-size-medium--plus: 1.625rem;
   --sb-font-size-large: 2rem;
   --sb-font-size-x-large: 2.375rem;
   --sb-font-size-xx-large: 3rem;

package/extensions/payment-card/style/dnb-payment-card.min.css

@@ -1 +1 @@
-:root{--sb-font-family-default:"Roboto","Helvetica","Arial",sans-serif;--sb-font-family-headings:"MaisonNeueHeadings","Roboto","Helvetica","Arial",sans-serif;--sb-font-weight-default:normal;--sb-font-weight-basis:normal;--sb-font-weight-regular:normal;--sb-font-weight-medium:500;--sb-font-weight-bold:700;--sb-font-size-x-small:0.75rem;--sb-font-size-small:0.875rem;--sb-font-size-basis:1rem;--sb-font-size-basis--em:1em;--sb-font-size-lead:1.25rem;--sb-font-size-medium:1.625rem;--sb-font-size-large:2rem;--sb-font-size-x-large:2.375rem;--sb-font-size-xx-large:3rem;--sb-line-height-x-small:1.125rem;--sb-line-height-small:1.25rem;--sb-line-height-basis:1.5rem;--sb-line-height-basis--em:1.5em;--sb-line-height-lead:1.75rem;--sb-line-height-medium:2rem;--sb-line-height-large:2.375rem;--sb-line-height-x-large:2.75rem;--sb-line-height-xx-large:3.375rem;--sb-color-black:#000;--sb-color-text:#18172a;--sb-color-gray-dark-3:#3a3a4a;--sb-color-gray-dark-3-neutral:#3e3e4a;--sb-color-gray-dark-2:#4a4a5b;--sb-color-gray-dark-2-neutral:#656472;--sb-color-gray-dark:#666578;--sb-color-gray-dark-neutral:#9494a3;--sb-color-gray:#bbbbce;--sb-color-gray-neutral:#bdbdc6;--sb-color-gray-light:#d9d9e4;--sb-color-gray-light-2:#ebebf2;--sb-color-gray-light-3:#f9f9fd;--sb-color-purple:#1c1b4e;--sb-color-purple-alternative:#222163;--sb-color-green:#92eecd;--sb-color-white:#fff;--sb-color-red:#d8134b;--sb-color-magenta:#ff3c64;--sb-color-orange:#ff5b44;--sb-color-yellow-dark:#f7bf16;--sb-color-yellow:#ffef57;--sb-color-green-dark-3:#00785b;--sb-color-green-dark-2:#1e9f73;--sb-color-violet:#4e08bc;--sb-color-violet-light:#7129e2;--sb-color-blue-dark-2:#044ccc;--sb-color-blue-dark:#005cff;--sb-color-blue:#008eff;--sb-color-orange-light:#ff817b;--sb-color-orange-light-2:#ffd7d5;--sb-color-orange-light-3:#fff0ef;--sb-color-magenta-light:#ffb6d2;--sb-color-magenta-light-2:#ffdbe9;--sb-color-magenta-light-3:#fff5f9;--sb-color-yellow-light:#fff489;--sb-color-yellow-light-2:#fff9c4;--sb-color-yellow-light-3:#fffce5;--sb-color-green-dark:#64d7b4;--sb-color-green-light:#c8f6e5;--sb-color-green-light-2:#e5fff7;--sb-color-violet-light-2:#be99ff;--sb-color-violet-light-3:#e0d0ff;--sb-color-violet-light-4:#f1ebff;--sb-color-blue-light:#61b9ff;--sb-color-blue-light-2:#bfe3ff;--sb-color-blue-light-3:#ebf6ff;--sb-spacing-x-small:0.5rem;--sb-spacing-small:1rem;--sb-spacing-medium:1.5rem;--sb-spacing-large:2rem;--sb-spacing-x-large:3rem;--sb-spacing-xx-large:3.5rem;--sb-layout-small:40em;--sb-layout-medium:60em;--sb-layout-large:72em;--sb-layout-x-large:80em;--sb-layout-xx-large:90em;--sb-shadow-small:0 2px 4px rgba(38,35,66,.12);--sb-shadow-medium:0 5px 20px rgba(38,35,66,.1);--sb-shadow-large:0 5px 20px rgba(38,35,66,.2);--sb-shadow-hover:0 20px 40px rgba(38,35,66,.2);--sb-easing-default:cubic-bezier(0.42,0,0,1)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent;border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-mastercard{background:var(--sb-color-purple);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-visa{background:var(--color-white);color:var(--sb-color-text)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card--design-sbanken-mastercard:after{background:none}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__card__credit{position:absolute;right:0;top:6px}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay svg path{stroke:currentcolor}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}
+:root{--sb-font-family-default:"Roboto","Helvetica","Arial",sans-serif;--sb-font-family-headings:"MaisonNeueHeadings","Roboto","Helvetica","Arial",sans-serif;--sb-font-weight-default:normal;--sb-font-weight-basis:normal;--sb-font-weight-regular:normal;--sb-font-weight-medium:500;--sb-font-weight-bold:700;--sb-font-size-x-small:0.75rem;--sb-font-size-small:0.875rem;--sb-font-size-basis:1rem;--sb-font-size-basis--em:1em;--sb-font-size-lead:var(--font-size-medium);--sb-font-size-medium:1.25rem;--sb-font-size-medium--plus:1.625rem;--sb-font-size-large:2rem;--sb-font-size-x-large:2.375rem;--sb-font-size-xx-large:3rem;--sb-line-height-x-small:1.125rem;--sb-line-height-small:1.25rem;--sb-line-height-basis:1.5rem;--sb-line-height-basis--em:1.5em;--sb-line-height-lead:1.75rem;--sb-line-height-medium:2rem;--sb-line-height-large:2.375rem;--sb-line-height-x-large:2.75rem;--sb-line-height-xx-large:3.375rem;--sb-color-black:#000;--sb-color-text:#18172a;--sb-color-gray-dark-3:#3a3a4a;--sb-color-gray-dark-3-neutral:#3e3e4a;--sb-color-gray-dark-2:#4a4a5b;--sb-color-gray-dark-2-neutral:#656472;--sb-color-gray-dark:#666578;--sb-color-gray-dark-neutral:#9494a3;--sb-color-gray:#bbbbce;--sb-color-gray-neutral:#bdbdc6;--sb-color-gray-light:#d9d9e4;--sb-color-gray-light-2:#ebebf2;--sb-color-gray-light-3:#f9f9fd;--sb-color-purple:#1c1b4e;--sb-color-purple-alternative:#222163;--sb-color-green:#92eecd;--sb-color-white:#fff;--sb-color-red:#d8134b;--sb-color-magenta:#ff3c64;--sb-color-orange:#ff5b44;--sb-color-yellow-dark:#f7bf16;--sb-color-yellow:#ffef57;--sb-color-green-dark-3:#00785b;--sb-color-green-dark-2:#1e9f73;--sb-color-violet:#4e08bc;--sb-color-violet-light:#7129e2;--sb-color-blue-dark-2:#044ccc;--sb-color-blue-dark:#005cff;--sb-color-blue:#008eff;--sb-color-orange-light:#ff817b;--sb-color-orange-light-2:#ffd7d5;--sb-color-orange-light-3:#fff0ef;--sb-color-magenta-light:#ffb6d2;--sb-color-magenta-light-2:#ffdbe9;--sb-color-magenta-light-3:#fff5f9;--sb-color-yellow-light:#fff489;--sb-color-yellow-light-2:#fff9c4;--sb-color-yellow-light-3:#fffce5;--sb-color-green-dark:#64d7b4;--sb-color-green-light:#c8f6e5;--sb-color-green-light-2:#e5fff7;--sb-color-violet-light-2:#be99ff;--sb-color-violet-light-3:#e0d0ff;--sb-color-violet-light-4:#f1ebff;--sb-color-blue-light:#61b9ff;--sb-color-blue-light-2:#bfe3ff;--sb-color-blue-light-3:#ebf6ff;--sb-spacing-x-small:0.5rem;--sb-spacing-small:1rem;--sb-spacing-medium:1.5rem;--sb-spacing-large:2rem;--sb-spacing-x-large:3rem;--sb-spacing-xx-large:3.5rem;--sb-layout-small:40em;--sb-layout-medium:60em;--sb-layout-large:72em;--sb-layout-x-large:80em;--sb-layout-xx-large:90em;--sb-shadow-small:0 2px 4px rgba(38,35,66,.12);--sb-shadow-medium:0 5px 20px rgba(38,35,66,.1);--sb-shadow-large:0 5px 20px rgba(38,35,66,.2);--sb-shadow-hover:0 20px 40px rgba(38,35,66,.2);--sb-easing-default:cubic-bezier(0.42,0,0,1)}.dnb-payment-card{--color-dark-cyan:#003b47;--dnb-payment-bg-default:linear-gradient(187.2deg,#008484 6.31%,var(--color-sea-green) 82.66%);--dnb-payment-bg-pluss:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-white:linear-gradient(184.55deg,var(--color-black-background) 4.63%,var(--color-white) 92.04%);--dnb-payment-bg-gold:linear-gradient(184.55deg,#bfa970 4.63%,#d3bd83 84.57%);--dnb-payment-bg-saga:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-private:linear-gradient(187.2deg,#1c1c1c 6.31%,#000 82.66%);--dnb-payment-bg-business-no-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);--dnb-payment-bg-business-with-visa:linear-gradient(187.2deg,var(--color-dark-cyan) 6.31%,var(--color-ocean-green) 82.66%),var(--color-emerald-green);margin:0}.dnb-payment-card__card{border-color:currentcolor;border-color:hsla(0,0%,100%,.1) transparent;border-radius:12px;border-style:solid;border-width:1px;box-shadow:var(--shadow-default);color:var(--color-white);height:216px;padding:16px;position:relative;transition:all 225ms cubic-bezier(0,0,.2,1) 0ms;width:343px}.dnb-payment-card__card--design-default{background:var(--dnb-payment-bg-default);color:var(--color-white)}.dnb-payment-card__card--design-pluss{background:var(--dnb-payment-bg-pluss);color:var(--color-white)}.dnb-payment-card__card--design-my-first,.dnb-payment-card__card--design-ung,.dnb-payment-card__card--design-youth{color:var(--color-black-80)}.dnb-payment-card__card--design-gold{background:var(--dnb-payment-bg-gold);color:var(--color-white)}.dnb-payment-card__card--design-saga{background:var(--dnb-payment-bg-saga);color:var(--color-white)}.dnb-payment-card__card--design-private{background:var(--dnb-payment-bg-private);color:var(--color-white)}.dnb-payment-card__card--design-black{background:var(--color-black);color:var(--color-white)}.dnb-payment-card__card--design-business-no-visa{background:var(--dnb-payment-bg-business-no-visa);color:var(--color-white)}.dnb-payment-card__card--design-business-with-visa{background:var(--dnb-payment-bg-business-with-visa);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-mastercard{background:var(--sb-color-purple);color:var(--color-white)}.dnb-payment-card__card--design-sbanken-visa{background:var(--color-white);color:var(--sb-color-text)}.dnb-payment-card__card:after{background:radial-gradient(52.39% 52.39% at 50% 50%,hsla(56,52%,94%,.122) 0,rgba(6,6,6,0) 100%);border-radius:inherit;content:"";height:100%;left:0;position:absolute;top:0;width:100%}.dnb-payment-card__card--design-sbanken-mastercard:after{background:none}.dnb-payment-card__card__content{display:flex;height:100%;position:relative;width:100%}.dnb-payment-card__card__wrapper{bottom:0;left:0;position:absolute}.dnb-spacing .dnb-payment-card__card .dnb-p{margin-bottom:0!important}.dnb-payment-card__card__holder{font-weight:var(--font-weight-medium);text-align:left;text-transform:uppercase}.dnb-payment-card__card__holder.dnb-p{font-size:.625rem}.dnb-payment-card__card__numbers{font-size:1.5rem!important;font-weight:var(--font-weight-medium)}.dnb-payment-card__card__credit-type{bottom:0;position:absolute;right:0}.dnb-payment-card__card__bank-logo{left:0;position:absolute;top:0}.dnb-payment-card__card__product-type{height:38px;left:70px;position:absolute;top:0}.dnb-payment-card__card__bank-axept{height:45px;position:absolute;right:0;top:0}.dnb-payment-card__card__credit{position:absolute;right:0;top:6px}.dnb-payment-card__blocking__overlay{align-items:center;background:linear-gradient(184.55deg,hsla(0,0%,80%,.5) 4.63%,hsla(0,0%,91%,.5) 84.83%);border-radius:inherit;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.dnb-payment-card__blocking__overlay svg path{stroke:currentcolor}.dnb-payment-card__blocking__center{align-items:center;background:var(--color-black-80);border-radius:4px;color:var(--color-sand-yellow);display:flex;flex-direction:column;justify-content:center;padding:1rem}.dnb-payment-card__blocking svg{shape-rendering:geometricprecision}.dnb-payment-card.dnb-skeleton .dnb-payment-card__card__holder{opacity:1}.dnb-payment-card--compact .dnb-payment-card__card{border-radius:12px 12px 0 0;box-shadow:var(--shadow-default);height:32.8mm;padding:0}.dnb-payment-card--compact .dnb-payment-card__card__top{left:6mm;position:absolute;right:6mm;top:4mm}.dnb-payment-card--compact .dnb-payment-card__card__bottom{background-color:var(--color-white);bottom:0;height:14mm;left:0;position:absolute;right:0}.dnb-payment-card--compact .dnb-payment-card__card__wrapper{color:var(--color-black-80);padding:6px 22px}.dnb-payment-card--compact .dnb-payment-card__card__numbers{font-size:var(--font-size-basis)}.dnb-payment-card--compact .dnb-payment-card__card__credit-type{bottom:auto;right:4px;top:10px}.dnb-payment-card--compact .dnb-payment-card__blocking__center{align-items:center;background:rgba(0,0,0,.739);border-radius:inherit;display:flex;flex-direction:row;gap:var(--spacing-x-small);height:100%;justify-content:center;width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnb/eufemia",
-  "version": "10.51.2",
+  "version": "10.52.0",
   "description": "DNB Eufemia Design System UI Library",
   "license": "SEE LICENSE IN LICENSE FILE",
   "author": "DNB Team & Tobias Høegh",

package/shared/Eufemia.d.ts

@@ -1,2 +1,2 @@
-export declare const version = "10.51.2";
+export declare const version = "10.52.0";
 export declare function init(): void;

package/shared/Eufemia.js

@@ -1,9 +1,9 @@
-export const version = '10.51.2';
+export const version = '10.52.0';
 export function init() {
   if (typeof window !== 'undefined') {
     class Eufemia {
       get version() {
-        return '10.51.2';
+        return '10.52.0';
       }
     }
     window.Eufemia = new Eufemia();

package/shared/Eufemia.js.map

@@ -1 +1 @@
-{"version":3,"file":"Eufemia.js","names":["version","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.ts"],"sourcesContent":["export const version = '10.51.2'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.51.2'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,SAAS;AAEhC,OAAO,SAASC,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIH,OAAOA,CAAA,EAAG;QACZ,OAAO,SAAS;MAClB;IACF;IAEAE,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}
+{"version":3,"file":"Eufemia.js","names":["version","init","window","Eufemia"],"sources":["../../../src/shared/Eufemia.ts"],"sourcesContent":["export const version = '10.52.0'\n\nexport function init() {\n  if (typeof window !== 'undefined') {\n    class Eufemia {\n      get version() {\n        return '10.52.0'\n      }\n    }\n\n    window.Eufemia = new Eufemia()\n  }\n}\n"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAG,SAAS;AAEhC,OAAO,SAASC,IAAIA,CAAA,EAAG;EACrB,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE;IACjC,MAAMC,OAAO,CAAC;MACZ,IAAIH,OAAOA,CAAA,EAAG;QACZ,OAAO,SAAS;MAClB;IACF;IAEAE,MAAM,CAACC,OAAO,GAAG,IAAIA,OAAO,CAAC,CAAC;EAChC;AACF"}

package/shared/component-helper.js

@@ -531,7 +531,7 @@ export function escapeRegexChars(str) {
   return str.replace(/[-[\]{}()*+?.,\\^$|#]/g, '\\$&');
 }
 export function removeUndefinedProps(object) {
-  Object.keys(object).forEach(key => {
+  Object.keys(object || {}).forEach(key => {
     if (object[key] === undefined) {
       delete object[key];
     }