@dnb/eufemia 10.18.0 → 10.19.0

package/components/input-masked/MultiInputMask.js

@@ -3,9 +3,10 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className", "stretch", "inputMode", "suffix", "onBlur", "onFocus"],
-  _excluded2 = ["id", "label", "value", "mask", "placeholderCharacter", "delimiter", "disabled", "inputRef", "onKeyDown", "onChange", "onBlur", "onFocus"],
-  _excluded3 = ["target"];
+const _excluded = ["id", "label", "labelDirection", "inputs", "delimiter", "onChange", "disabled", "status", "statusState", "values", "className", "stretch", "inputMode", "suffix", "onBlur", "onFocus"],
+  _excluded2 = ["id"],
+  _excluded3 = ["id", "inputId", "label", "value", "mask", "placeholderCharacter", "delimiter", "disabled", "getInputRef", "onKeyDown", "onChange", "onBlur", "onFocus"],
+  _excluded4 = ["target"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useRef } from 'react';
@@ -19,6 +20,7 @@ import { useMultiInputValue } from './hooks/useMultiInputValues';
 import { makeUniqueId } from '../../shared/component-helper';
 function MultiInputMask(_ref) {
   let {
+      id = makeUniqueId(),
       label,
       labelDirection = 'horizontal',
       inputs,
@@ -61,27 +63,35 @@ function MultiInputMask(_ref) {
     status_state: statusState,
     suffix: suffix,
     stretch: stretch,
-    input_element: inputs.map((input, index) => React.createElement(MultiInputMaskInput, _extends({
-      key: input.id
-    }, input, {
-      inputMode: inputMode,
-      value: values[input.id],
-      delimiter: index !== inputs.length - 1 ? delimiter : undefined,
-      onKeyDown: onKeyDown,
-      onChange: onChange,
-      onFocus: () => {
-        if (onFocus) {
-          onFocus(values);
-        }
-      },
-      onBlur: () => {
-        if (onBlur) {
-          onBlur(values);
-        }
-      },
-      disabled: disabled,
-      inputRef: getInputRef
-    })))
+    input_element: inputs.map((_ref2, index) => {
+      let {
+          id: inputId
+        } = _ref2,
+        rest = _objectWithoutProperties(_ref2, _excluded2);
+      return React.createElement(MultiInputMaskInput, _extends({
+        key: inputId,
+        id: id,
+        inputId: inputId,
+        delimiter: index !== inputs.length - 1 ? delimiter : undefined,
+        disabled: disabled,
+        inputMode: inputMode,
+        onKeyDown: onKeyDown,
+        onChange: onChange,
+        onFocus: () => {
+          if (onFocus) {
+            onFocus(values);
+          }
+        },
+        onBlur: () => {
+          if (onBlur) {
+            onBlur(values);
+          }
+        },
+        getInputRef: getInputRef
+      }, rest, {
+        value: values[inputId]
+      }));
+    })
   })));
   function onLegendClick() {
     if (disabled) {
@@ -96,6 +106,7 @@ function MultiInputMask(_ref) {
     if (inputRef && !inputRefs.current.includes(inputRef)) {
       inputRefs.current.push(inputRef);
     }
+    return inputRef;
   }
   function getKeysToHandle() {
     const uniqueMasks = getUniqueMasks();
@@ -103,11 +114,11 @@ function MultiInputMask(_ref) {
       const pattern = uniqueMasks.values().next().value.replace(/\//g, '');
       return new RegExp(pattern);
     }
-    return inputs.reduce((keys, _ref2) => {
+    return inputs.reduce((keys, _ref3) => {
       let {
         id,
         mask
-      } = _ref2;
+      } = _ref3;
       keys[id] = mask;
       return keys;
     }, {});
@@ -120,27 +131,27 @@ function MultiInputMask(_ref) {
     return masks;
   }
 }
-function MultiInputMaskInput(_ref3) {
+function MultiInputMaskInput(_ref4) {
   let {
       id,
+      inputId,
       label,
       value,
       mask,
       placeholderCharacter,
       delimiter,
       disabled,
-      inputRef,
+      getInputRef,
       onKeyDown,
       onChange,
       onBlur,
       onFocus
-    } = _ref3,
-    attributes = _objectWithoutProperties(_ref3, _excluded2);
+    } = _ref4,
+    attributes = _objectWithoutProperties(_ref4, _excluded3);
   const shouldHighlight = !disabled && /\w+/.test(value);
-  const markupId = `${id}-${makeUniqueId()}`;
   return React.createElement(React.Fragment, null, React.createElement(TextMask, _extends({
-    id: `${markupId}__input`,
-    "data-mask-id": id,
+    id: `${id}-${inputId}`,
+    "data-mask-id": inputId,
     className: "dnb-input__input dnb-multi-input-mask__input" + (shouldHighlight ? " dnb-multi-input-mask__input--highlight" : ""),
     disabled: disabled,
     size: mask.length,
@@ -150,15 +161,15 @@ function MultiInputMaskInput(_ref3) {
     guide: true,
     showMask: true,
     keepCharPositions: false,
-    "aria-labelledby": `${markupId}__label`,
-    ref: inputRef,
+    "aria-labelledby": `${id}-${inputId}__label`,
+    ref: getInputRef,
     onKeyDown: onKeyDown,
     onBlur: onBlur,
-    onFocus: _ref4 => {
+    onFocus: _ref5 => {
       let {
           target
-        } = _ref4,
-        event = _objectWithoutProperties(_ref4, _excluded3);
+        } = _ref5,
+        event = _objectWithoutProperties(_ref5, _excluded4);
       target.focus();
       target.select();
       if (onFocus) {
@@ -168,11 +179,11 @@ function MultiInputMaskInput(_ref3) {
       }
     },
     onChange: event => {
-      onChange(id, removePlaceholder(event.target.value, placeholderCharacter));
+      onChange(inputId, removePlaceholder(event.target.value, placeholderCharacter));
     }
   }, attributes)), React.createElement("label", {
-    id: `${markupId}__label`,
-    htmlFor: `${markupId}__input`,
+    id: `${id}-${inputId}__label`,
+    htmlFor: `${id}-${inputId}`,
     hidden: true
   }, label), delimiter && React.createElement("span", {
     "aria-hidden": true,

package/components/input-masked/MultiInputMask.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","inputMode","suffix","onBlur","onFocus","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","input","index","MultiInputMaskInput","key","id","value","length","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","_ref2","mask","masks","Set","forEach","add","String","_ref3","placeholderCharacter","attributes","_excluded2","shouldHighlight","test","markupId","Fragment","placeholderChar","guide","showMask","keepCharPositions","_ref4","target","event","_excluded3","select","_objectSpread","removePlaceholder","htmlFor","hidden","placeholder","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n  /**\n   * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n   */\n  id: T\n  /**\n   * Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n   */\n  label: React.ReactNode\n  /**\n   * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n   */\n  mask: RegExp[]\n  /**\n   * Sets the placeholder character used for the input.\n   */\n  placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n  // eslint-disable-next-line no-unused-vars\n  [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n  /**\n   * The label describing the group of inputs inside the components.\n   */\n  label?: React.ReactNode\n  /**\n   * Use to change the label layout direction. Defaults to `horizontal`.\n   */\n  labelDirection?: 'vertical' | 'horizontal'\n  /**\n   * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n   */\n  inputs: MultiInputMaskInput<T>[]\n  /**\n   * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n   */\n  values?: MultiInputMaskValue<T>\n  /**\n   * Defines the delimiter used to separate the inputs inside the component.\n   */\n  delimiter?: string\n  /**\n   * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onChange?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Runs when the input gains focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onFocus?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Runs when the input loses focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onBlur?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Set it to `true` in order to stretch the input to the available space. Defaults to false.\n   */\n  stretch?: boolean\n  /**\n   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n   */\n  suffix?: React.ReactNode\n} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | 'onFocus' | 'onBlur' | 'ref' | 'value' | 'label'\n> &\n  SpacingProps\n\nfunction MultiInputMask<T extends string>({\n  label,\n  labelDirection = 'horizontal',\n  inputs,\n  delimiter,\n  onChange: onChangeExternal,\n  disabled,\n  status,\n  statusState,\n  values: defaultValues,\n  className,\n  stretch,\n  inputMode,\n  suffix,\n  onBlur,\n  onFocus,\n  ...props\n}: MultiInputMaskProps<T>) {\n  const [values, onChange] = useMultiInputValue({\n    inputs,\n    defaultValues,\n    callback: onChangeExternal,\n  })\n\n  const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n  const { onKeyDown } = useHandleCursorPosition(\n    inputRefs.current,\n    getKeysToHandle()\n  )\n\n  const WrapperElement = label ? 'fieldset' : 'div'\n\n  return (\n    <WrapperElement\n      className={classnames(\n        'dnb-multi-input-mask__fieldset',\n        labelDirection === 'horizontal' &&\n          'dnb-multi-input-mask__fieldset--horizontal',\n        createSpacingClasses(props)\n      )}\n    >\n      {label && (\n        <FormLabel\n          className={classnames(\n            'dnb-multi-input-mask__legend',\n            labelDirection === 'horizontal' &&\n              'dnb-multi-input-mask__legend--horizontal'\n          )}\n          element=\"legend\"\n          onClick={onLegendClick}\n          disabled={disabled}\n          vertical={labelDirection === 'vertical'}\n        >\n          {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n          <span>{label}</span>\n        </FormLabel>\n      )}\n      <Input\n        {...props}\n        className={classnames('dnb-multi-input-mask', className)}\n        disabled={disabled}\n        status={status}\n        status_state={statusState}\n        suffix={suffix}\n        stretch={stretch}\n        input_element={inputs.map((input, index) => (\n          <MultiInputMaskInput\n            key={input.id}\n            {...input}\n            inputMode={inputMode}\n            value={values[input.id]}\n            delimiter={index !== inputs.length - 1 ? delimiter : undefined}\n            onKeyDown={onKeyDown}\n            onChange={onChange}\n            onFocus={() => {\n              if (onFocus) {\n                onFocus(values)\n              }\n            }}\n            onBlur={() => {\n              if (onBlur) {\n                onBlur(values)\n              }\n            }}\n            disabled={disabled}\n            inputRef={getInputRef}\n          />\n        ))}\n      />\n    </WrapperElement>\n  )\n\n  // Event handlers\n  function onLegendClick() {\n    if (disabled) {\n      return\n    }\n\n    const firstInput = inputRefs.current[0].current\n\n    firstInput.focus()\n    firstInput.setSelectionRange(0, 0)\n  }\n\n  // Utilities\n  function getInputRef(ref: any) {\n    const inputRef = ref?.inputRef\n\n    if (inputRef && !inputRefs.current.includes(inputRef)) {\n      inputRefs.current.push(inputRef)\n    }\n  }\n\n  function getKeysToHandle() {\n    const uniqueMasks = getUniqueMasks()\n\n    // Return the only one RegExp since all the inputs are using the same mask\n    if (uniqueMasks.size === 1) {\n      const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n      return new RegExp(pattern)\n    }\n\n    // If there are multiple types of masks used, then map the maps to an object based on input ids\n    // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n    return inputs.reduce(\n      (keys, { id, mask }) => {\n        keys[id] = mask\n\n        return keys\n      },\n      {} as Record<T, RegExp[]>\n    )\n  }\n\n  function getUniqueMasks() {\n    const masks = new Set()\n\n    inputs.forEach((input) => {\n      input.mask.forEach((pattern) => masks.add(String(pattern)))\n    })\n\n    return masks\n  }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n  MultiInputMaskInput<T> & {\n    id: MultiInputMaskInput<T>['id']\n    label: MultiInputMaskInput<T>['label']\n    value: string\n    mask: MultiInputMaskInput<T>['mask']\n    placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    delimiter?: MultiInputMaskProps<T>['delimiter']\n    disabled: boolean\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n    onChange: (\n      id: string,\n      placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    ) => void\n    inputRef: any\n  }\n\nfunction MultiInputMaskInput<T extends string>({\n  id,\n  label,\n  value,\n  mask,\n  placeholderCharacter,\n  delimiter,\n  disabled,\n  inputRef,\n  onKeyDown,\n  onChange,\n  onBlur,\n  onFocus,\n  ...attributes\n}: MultiInputMaskInputProps<T>) {\n  const shouldHighlight = !disabled && /\\w+/.test(value)\n  const markupId = `${id}-${makeUniqueId()}`\n\n  return (\n    <>\n      <TextMask\n        id={`${markupId}__input`}\n        data-mask-id={id}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          shouldHighlight && 'dnb-multi-input-mask__input--highlight'\n        )}\n        disabled={disabled}\n        size={mask.length}\n        mask={mask}\n        value={value ?? ''}\n        placeholderChar={placeholderCharacter}\n        guide={true}\n        showMask={true}\n        keepCharPositions={false} // so we can overwrite next value, if it already exists\n        aria-labelledby={`${markupId}__label`}\n        ref={inputRef}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        onFocus={({ target, ...event }) => {\n          target.focus()\n          target.select()\n\n          if (onFocus) {\n            onFocus({ target, ...event })\n          }\n        }}\n        onChange={(event) => {\n          onChange(\n            id,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n        {...attributes}\n      />\n      <label\n        id={`${markupId}__label`}\n        htmlFor={`${markupId}__input`}\n        hidden\n      >\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            shouldHighlight && 'dnb-multi-input-mask__delimiter--highlight'\n          )}\n        >\n          {delimiter}\n        </span>\n      )}\n    </>\n  )\n\n  function removePlaceholder(value: string, placeholder: string) {\n    return value.replace(RegExp(placeholder, 'gm'), '')\n  }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"MultiInputMask.js","names":["React","useRef","Input","TextMask","useHandleCursorPosition","classnames","FormLabel","createSpacingClasses","useMultiInputValue","makeUniqueId","MultiInputMask","_ref","id","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","stretch","inputMode","suffix","onBlur","onFocus","props","_objectWithoutProperties","_excluded","callback","inputRefs","onKeyDown","current","getKeysToHandle","WrapperElement","createElement","element","onClick","onLegendClick","vertical","_extends","status_state","input_element","map","_ref2","index","inputId","rest","_excluded2","MultiInputMaskInput","key","length","undefined","getInputRef","value","firstInput","focus","setSelectionRange","ref","inputRef","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","keys","_ref3","mask","masks","Set","forEach","input","add","String","_ref4","placeholderCharacter","attributes","_excluded3","shouldHighlight","test","Fragment","placeholderChar","guide","showMask","keepCharPositions","_ref5","target","event","_excluded4","select","_objectSpread","removePlaceholder","htmlFor","hidden","placeholder","_formElement","_supportsSpacingProps"],"sources":["../../../../src/components/input-masked/MultiInputMask.tsx"],"sourcesContent":["import React, { Fragment, MutableRefObject, useRef } from 'react'\nimport Input from '../Input'\nimport TextMask from './TextMask'\nimport useHandleCursorPosition from './hooks/useHandleCursorPosition'\nimport classnames from 'classnames'\nimport FormLabel from '../FormLabel'\nimport { SpacingProps } from '../space/types'\nimport { createSpacingClasses } from '../space/SpacingHelper'\nimport { FormStatusState, FormStatusText } from '../FormStatus'\nimport { useMultiInputValue } from './hooks/useMultiInputValues'\nimport { makeUniqueId } from '../../shared/component-helper'\n\nexport type MultiInputMaskInput<T extends string> = {\n  /**\n   * Defines the id for the input. This id is also used to map the input value to the correct property on the objects used for `values` and `onChange` parameters.\n   */\n  id: T\n  /**\n   * Label used by the input. The label itself is hidden, but required to uphold accessibility standards for screen readers.\n   */\n  label: React.ReactNode\n  /**\n   * Each RegExp item in the array defines what the mask should be for each subsequent character in the input. The length sets the size of the input, so an array of two items would produce an input of two characters\n   */\n  mask: RegExp[]\n  /**\n   * Sets the placeholder character used for the input.\n   */\n  placeholderCharacter: string\n} & Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'ref'>\n\nexport type MultiInputMaskValue<T extends string> = {\n  // eslint-disable-next-line no-unused-vars\n  [K in T]: string\n}\n\nexport type MultiInputMaskProps<T extends string> = {\n  /**\n   * The label describing the group of inputs inside the components.\n   */\n  label?: React.ReactNode\n  /**\n   * Use to change the label layout direction. Defaults to `horizontal`.\n   */\n  labelDirection?: 'vertical' | 'horizontal'\n  /**\n   * Used to define the different inputs representing the inputs in the component. The id's defined here is used to map input value to correct property in `values` parameters used in `onChange`\n   */\n  inputs: MultiInputMaskInput<T>[]\n  /**\n   * Values used for the inputs inside the component. Expects an object with keys matching the id's defined in `inputs`\n   */\n  values?: MultiInputMaskValue<T>\n  /**\n   * Defines the delimiter used to separate the inputs inside the component.\n   */\n  delimiter?: string\n  /**\n   * Runs when the input value changes. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onChange?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Runs when the input gains focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onFocus?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Runs when the input loses focus. Has an object parameter with keys matching the id's defined in `inputs`. i.e. `{month: string, year: string}`\n   */\n  onBlur?: (values: MultiInputMaskValue<T>) => void\n  /**\n   * Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.\n   */\n  status?: FormStatusText\n  /**\n   * Defines the state of the status. Currently, there are two statuses `[error, info]`. Defaults to `error`.\n   */\n  statusState?: FormStatusState\n  /**\n   * Set it to `true` in order to stretch the input to the available space. Defaults to false.\n   */\n  stretch?: boolean\n  /**\n   * Text describing the content of the input more than the label. you can also send in a React component, so it gets wrapped inside the Input component.\n   */\n  suffix?: React.ReactNode\n} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | 'onFocus' | 'onBlur' | 'ref' | 'value' | 'label'\n> &\n  SpacingProps\n\nfunction MultiInputMask<T extends string>({\n  id = makeUniqueId(),\n  label,\n  labelDirection = 'horizontal',\n  inputs,\n  delimiter,\n  onChange: onChangeExternal,\n  disabled,\n  status,\n  statusState,\n  values: defaultValues,\n  className,\n  stretch,\n  inputMode,\n  suffix,\n  onBlur,\n  onFocus,\n  ...props\n}: MultiInputMaskProps<T>) {\n  const [values, onChange] = useMultiInputValue({\n    inputs,\n    defaultValues,\n    callback: onChangeExternal,\n  })\n\n  const inputRefs = useRef<Array<MutableRefObject<HTMLInputElement>>>([])\n\n  const { onKeyDown } = useHandleCursorPosition(\n    inputRefs.current,\n    getKeysToHandle()\n  )\n\n  const WrapperElement = label ? 'fieldset' : 'div'\n\n  return (\n    <WrapperElement\n      className={classnames(\n        'dnb-multi-input-mask__fieldset',\n        labelDirection === 'horizontal' &&\n          'dnb-multi-input-mask__fieldset--horizontal',\n        createSpacingClasses(props)\n      )}\n    >\n      {label && (\n        <FormLabel\n          className={classnames(\n            'dnb-multi-input-mask__legend',\n            labelDirection === 'horizontal' &&\n              'dnb-multi-input-mask__legend--horizontal'\n          )}\n          element=\"legend\"\n          onClick={onLegendClick}\n          disabled={disabled}\n          vertical={labelDirection === 'vertical'}\n        >\n          {/* This <span/> wrapper is needed to make hover work in Safari Desktop */}\n          <span>{label}</span>\n        </FormLabel>\n      )}\n      <Input\n        {...props}\n        className={classnames('dnb-multi-input-mask', className)}\n        disabled={disabled}\n        status={status}\n        status_state={statusState}\n        suffix={suffix}\n        stretch={stretch}\n        input_element={inputs.map(({ id: inputId, ...rest }, index) => {\n          return (\n            <MultiInputMaskInput\n              key={inputId}\n              id={id}\n              inputId={inputId}\n              delimiter={\n                index !== inputs.length - 1 ? delimiter : undefined\n              }\n              disabled={disabled}\n              inputMode={inputMode}\n              onKeyDown={onKeyDown}\n              onChange={onChange}\n              onFocus={() => {\n                if (onFocus) {\n                  onFocus(values)\n                }\n              }}\n              onBlur={() => {\n                if (onBlur) {\n                  onBlur(values)\n                }\n              }}\n              getInputRef={getInputRef}\n              {...rest}\n              value={values[inputId]}\n            />\n          )\n        })}\n      />\n    </WrapperElement>\n  )\n\n  // Event handlers\n  function onLegendClick() {\n    if (disabled) {\n      return\n    }\n\n    const firstInput = inputRefs.current[0].current\n\n    firstInput.focus()\n    firstInput.setSelectionRange(0, 0)\n  }\n\n  // Utilities\n  function getInputRef(ref?: {\n    inputRef?: MutableRefObject<HTMLInputElement>\n  }) {\n    const inputRef = ref?.inputRef\n\n    if (inputRef && !inputRefs.current.includes(inputRef)) {\n      inputRefs.current.push(inputRef)\n    }\n\n    return inputRef\n  }\n\n  function getKeysToHandle() {\n    const uniqueMasks = getUniqueMasks()\n\n    // Return the only one RegExp since all the inputs are using the same mask\n    if (uniqueMasks.size === 1) {\n      const pattern = uniqueMasks.values().next().value.replace(/\\//g, '')\n      return new RegExp(pattern)\n    }\n\n    // If there are multiple types of masks used, then map the maps to an object based on input ids\n    // So that useHandleCursorPosition can do a per character test to see if the pressed key should be handled or not\n    return inputs.reduce(\n      (keys, { id, mask }) => {\n        keys[id] = mask\n\n        return keys\n      },\n      {} as Record<T, RegExp[]>\n    )\n  }\n\n  function getUniqueMasks() {\n    const masks = new Set()\n\n    inputs.forEach((input) => {\n      input.mask.forEach((pattern) => masks.add(String(pattern)))\n    })\n\n    return masks\n  }\n}\n\ntype MultiInputMaskInputProps<T extends string> =\n  MultiInputMaskInput<T> & {\n    id: MultiInputMaskInput<T>['id']\n    inputId: MultiInputMaskInput<T>['id']\n    label: MultiInputMaskInput<T>['label']\n    value: string\n    mask: MultiInputMaskInput<T>['mask']\n    placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    delimiter?: MultiInputMaskProps<T>['delimiter']\n    disabled: boolean\n    onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void\n    onChange: (\n      id: string,\n      placeholderCharacter: MultiInputMaskInput<T>['placeholderCharacter']\n    ) => void\n    getInputRef: () => MutableRefObject<HTMLInputElement>\n  }\n\nfunction MultiInputMaskInput<T extends string>({\n  id,\n  inputId,\n  label,\n  value,\n  mask,\n  placeholderCharacter,\n  delimiter,\n  disabled,\n  getInputRef,\n  onKeyDown,\n  onChange,\n  onBlur,\n  onFocus,\n  ...attributes\n}: MultiInputMaskInputProps<T>) {\n  const shouldHighlight = !disabled && /\\w+/.test(value)\n\n  return (\n    <>\n      <TextMask\n        id={`${id}-${inputId}`}\n        data-mask-id={inputId}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          shouldHighlight && 'dnb-multi-input-mask__input--highlight'\n        )}\n        disabled={disabled}\n        size={mask.length}\n        mask={mask}\n        value={value ?? ''}\n        placeholderChar={placeholderCharacter}\n        guide={true}\n        showMask={true}\n        keepCharPositions={false} // so we can overwrite next value, if it already exists\n        aria-labelledby={`${id}-${inputId}__label`}\n        ref={getInputRef}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        onFocus={({ target, ...event }) => {\n          target.focus()\n          target.select()\n\n          if (onFocus) {\n            onFocus({ target, ...event })\n          }\n        }}\n        onChange={(event) => {\n          onChange(\n            inputId,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n        {...attributes}\n      />\n      <label\n        id={`${id}-${inputId}__label`}\n        htmlFor={`${id}-${inputId}`}\n        hidden\n      >\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            shouldHighlight && 'dnb-multi-input-mask__delimiter--highlight'\n          )}\n        >\n          {delimiter}\n        </span>\n      )}\n    </>\n  )\n\n  function removePlaceholder(value: string, placeholder: string) {\n    return value.replace(RegExp(placeholder, 'gm'), '')\n  }\n}\n\nexport default MultiInputMask\n\nMultiInputMask._formElement = true\nMultiInputMask._supportsSpacingProps = true\n"],"mappings":";;;;;;;;;;;AAAA,OAAOA,KAAK,IAAgCC,MAAM,QAAQ,OAAO;AACjE,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,uBAAuB,MAAM,iCAAiC;AACrE,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,SAAS,MAAM,cAAc;AAEpC,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,SAASC,kBAAkB,QAAQ,6BAA6B;AAChE,SAASC,YAAY,QAAQ,+BAA+B;AAiF5D,SAASC,cAAcA,CAAAC,IAAA,EAkBI;EAAA,IAlBe;MACxCC,EAAE,GAAGH,YAAY,CAAC,CAAC;MACnBI,KAAK;MACLC,cAAc,GAAG,YAAY;MAC7BC,MAAM;MACNC,SAAS;MACTC,QAAQ,EAAEC,gBAAgB;MAC1BC,QAAQ;MACRC,MAAM;MACNC,WAAW;MACXC,MAAM,EAAEC,aAAa;MACrBC,SAAS;MACTC,OAAO;MACPC,SAAS;MACTC,MAAM;MACNC,MAAM;MACNC;IAEsB,CAAC,GAAAlB,IAAA;IADpBmB,KAAK,GAAAC,wBAAA,CAAApB,IAAA,EAAAqB,SAAA;EAER,MAAM,CAACV,MAAM,EAAEL,QAAQ,CAAC,GAAGT,kBAAkB,CAAC;IAC5CO,MAAM;IACNQ,aAAa;IACbU,QAAQ,EAAEf;EACZ,CAAC,CAAC;EAEF,MAAMgB,SAAS,GAAGjC,MAAM,CAA4C,EAAE,CAAC;EAEvE,MAAM;IAAEkC;EAAU,CAAC,GAAG/B,uBAAuB,CAC3C8B,SAAS,CAACE,OAAO,EACjBC,eAAe,CAAC,CAClB,CAAC;EAED,MAAMC,cAAc,GAAGzB,KAAK,GAAG,UAAU,GAAG,KAAK;EAEjD,OACEb,KAAA,CAAAuC,aAAA,CAACD,cAAc;IACbd,SAAS,EAAEnB,UAAU,CACnB,gCAAgC,EAGhCE,oBAAoB,CAACuB,KAAK,CAAC,EAF3BhB,cAAc,KAAK,YAAY,IAC7B,4CAEJ;EAAE,GAEDD,KAAK,IACJb,KAAA,CAAAuC,aAAA,CAACjC,SAAS;IACRkB,SAAS,EACP,8BAA8B,IAC9BV,cAAc,KAAK,YAAY,oDAE/B;IACF0B,OAAO,EAAC,QAAQ;IAChBC,OAAO,EAAEC,aAAc;IACvBvB,QAAQ,EAAEA,QAAS;IACnBwB,QAAQ,EAAE7B,cAAc,KAAK;EAAW,GAGxCd,KAAA,CAAAuC,aAAA,eAAO1B,KAAY,CACV,CACZ,EACDb,KAAA,CAAAuC,aAAA,CAACrC,KAAK,EAAA0C,QAAA,KACAd,KAAK;IACTN,SAAS,EAAEnB,UAAU,CAAC,sBAAsB,EAAEmB,SAAS,CAAE;IACzDL,QAAQ,EAAEA,QAAS;IACnBC,MAAM,EAAEA,MAAO;IACfyB,YAAY,EAAExB,WAAY;IAC1BM,MAAM,EAAEA,MAAO;IACfF,OAAO,EAAEA,OAAQ;IACjBqB,aAAa,EAAE/B,MAAM,CAACgC,GAAG,CAAC,CAAAC,KAAA,EAA2BC,KAAK,KAAK;MAAA,IAApC;UAAErC,EAAE,EAAEsC;QAAiB,CAAC,GAAAF,KAAA;QAANG,IAAI,GAAApB,wBAAA,CAAAiB,KAAA,EAAAI,UAAA;MAC/C,OACEpD,KAAA,CAAAuC,aAAA,CAACc,mBAAmB,EAAAT,QAAA;QAClBU,GAAG,EAAEJ,OAAQ;QACbtC,EAAE,EAAEA,EAAG;QACPsC,OAAO,EAAEA,OAAQ;QACjBlC,SAAS,EACPiC,KAAK,KAAKlC,MAAM,CAACwC,MAAM,GAAG,CAAC,GAAGvC,SAAS,GAAGwC,SAC3C;QACDrC,QAAQ,EAAEA,QAAS;QACnBO,SAAS,EAAEA,SAAU;QACrBS,SAAS,EAAEA,SAAU;QACrBlB,QAAQ,EAAEA,QAAS;QACnBY,OAAO,EAAEA,CAAA,KAAM;UACb,IAAIA,OAAO,EAAE;YACXA,OAAO,CAACP,MAAM,CAAC;UACjB;QACF,CAAE;QACFM,MAAM,EAAEA,CAAA,KAAM;UACZ,IAAIA,MAAM,EAAE;YACVA,MAAM,CAACN,MAAM,CAAC;UAChB;QACF,CAAE;QACFmC,WAAW,EAAEA;MAAY,GACrBN,IAAI;QACRO,KAAK,EAAEpC,MAAM,CAAC4B,OAAO;MAAE,EACxB,CAAC;IAEN,CAAC;EAAE,EACJ,CACa,CAAC;EAInB,SAASR,aAAaA,CAAA,EAAG;IACvB,IAAIvB,QAAQ,EAAE;MACZ;IACF;IAEA,MAAMwC,UAAU,GAAGzB,SAAS,CAACE,OAAO,CAAC,CAAC,CAAC,CAACA,OAAO;IAE/CuB,UAAU,CAACC,KAAK,CAAC,CAAC;IAClBD,UAAU,CAACE,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC;EACpC;EAGA,SAASJ,WAAWA,CAACK,GAEpB,EAAE;IACD,MAAMC,QAAQ,GAAGD,GAAG,aAAHA,GAAG,uBAAHA,GAAG,CAAEC,QAAQ;IAE9B,IAAIA,QAAQ,IAAI,CAAC7B,SAAS,CAACE,OAAO,CAAC4B,QAAQ,CAACD,QAAQ,CAAC,EAAE;MACrD7B,SAAS,CAACE,OAAO,CAAC6B,IAAI,CAACF,QAAQ,CAAC;IAClC;IAEA,OAAOA,QAAQ;EACjB;EAEA,SAAS1B,eAAeA,CAAA,EAAG;IACzB,MAAM6B,WAAW,GAAGC,cAAc,CAAC,CAAC;IAGpC,IAAID,WAAW,CAACE,IAAI,KAAK,CAAC,EAAE;MAC1B,MAAMC,OAAO,GAAGH,WAAW,CAAC5C,MAAM,CAAC,CAAC,CAACgD,IAAI,CAAC,CAAC,CAACZ,KAAK,CAACa,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;MACpE,OAAO,IAAIC,MAAM,CAACH,OAAO,CAAC;IAC5B;IAIA,OAAOtD,MAAM,CAAC0D,MAAM,CAClB,CAACC,IAAI,EAAAC,KAAA,KAAmB;MAAA,IAAjB;QAAE/D,EAAE;QAAEgE;MAAK,CAAC,GAAAD,KAAA;MACjBD,IAAI,CAAC9D,EAAE,CAAC,GAAGgE,IAAI;MAEf,OAAOF,IAAI;IACb,CAAC,EACD,CAAC,CACH,CAAC;EACH;EAEA,SAASP,cAAcA,CAAA,EAAG;IACxB,MAAMU,KAAK,GAAG,IAAIC,GAAG,CAAC,CAAC;IAEvB/D,MAAM,CAACgE,OAAO,CAAEC,KAAK,IAAK;MACxBA,KAAK,CAACJ,IAAI,CAACG,OAAO,CAAEV,OAAO,IAAKQ,KAAK,CAACI,GAAG,CAACC,MAAM,CAACb,OAAO,CAAC,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,OAAOQ,KAAK;EACd;AACF;AAoBA,SAASxB,mBAAmBA,CAAA8B,KAAA,EAeI;EAAA,IAfe;MAC7CvE,EAAE;MACFsC,OAAO;MACPrC,KAAK;MACL6C,KAAK;MACLkB,IAAI;MACJQ,oBAAoB;MACpBpE,SAAS;MACTG,QAAQ;MACRsC,WAAW;MACXtB,SAAS;MACTlB,QAAQ;MACRW,MAAM;MACNC;IAE2B,CAAC,GAAAsD,KAAA;IADzBE,UAAU,GAAAtD,wBAAA,CAAAoD,KAAA,EAAAG,UAAA;EAEb,MAAMC,eAAe,GAAG,CAACpE,QAAQ,IAAI,KAAK,CAACqE,IAAI,CAAC9B,KAAK,CAAC;EAEtD,OACE1D,KAAA,CAAAuC,aAAA,CAAAvC,KAAA,CAAAyF,QAAA,QACEzF,KAAA,CAAAuC,aAAA,CAACpC,QAAQ,EAAAyC,QAAA;IACPhC,EAAE,EAAG,GAAEA,EAAG,IAAGsC,OAAQ,EAAE;IACvB,gBAAcA,OAAQ;IACtB1B,SAAS,oDAGP+D,eAAe,kDACf;IACFpE,QAAQ,EAAEA,QAAS;IACnBiD,IAAI,EAAEQ,IAAI,CAACrB,MAAO;IAClBqB,IAAI,EAAEA,IAAK;IACXlB,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAG;IACnBgC,eAAe,EAAEN,oBAAqB;IACtCO,KAAK,EAAE,IAAK;IACZC,QAAQ,EAAE,IAAK;IACfC,iBAAiB,EAAE,KAAM;IACzB,mBAAkB,GAAEjF,EAAG,IAAGsC,OAAQ,SAAS;IAC3CY,GAAG,EAAEL,WAAY;IACjBtB,SAAS,EAAEA,SAAU;IACrBP,MAAM,EAAEA,MAAO;IACfC,OAAO,EAAEiE,KAAA,IAA0B;MAAA,IAAzB;UAAEC;QAAiB,CAAC,GAAAD,KAAA;QAAPE,KAAK,GAAAjE,wBAAA,CAAA+D,KAAA,EAAAG,UAAA;MAC1BF,MAAM,CAACnC,KAAK,CAAC,CAAC;MACdmC,MAAM,CAACG,MAAM,CAAC,CAAC;MAEf,IAAIrE,OAAO,EAAE;QACXA,OAAO,CAAAsE,aAAA;UAAGJ;QAAM,GAAKC,KAAK,CAAE,CAAC;MAC/B;IACF,CAAE;IACF/E,QAAQ,EAAG+E,KAAK,IAAK;MACnB/E,QAAQ,CACNiC,OAAO,EACPkD,iBAAiB,CAACJ,KAAK,CAACD,MAAM,CAACrC,KAAK,EAAE0B,oBAAoB,CAC5D,CAAC;IACH;EAAE,GACEC,UAAU,CACf,CAAC,EACFrF,KAAA,CAAAuC,aAAA;IACE3B,EAAE,EAAG,GAAEA,EAAG,IAAGsC,OAAQ,SAAS;IAC9BmD,OAAO,EAAG,GAAEzF,EAAG,IAAGsC,OAAQ,EAAE;IAC5BoD,MAAM;EAAA,GAELzF,KACI,CAAC,EACPG,SAAS,IACRhB,KAAA,CAAAuC,aAAA;IACE,mBAAW;IACXf,SAAS,EACP,iCAAiC,IACjC+D,eAAe;EACf,GAEDvE,SACG,CAER,CAAC;EAGL,SAASoF,iBAAiBA,CAAC1C,KAAa,EAAE6C,WAAmB,EAAE;IAC7D,OAAO7C,KAAK,CAACa,OAAO,CAACC,MAAM,CAAC+B,WAAW,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;EACrD;AACF;AAEA,eAAe7F,cAAc;AAE7BA,cAAc,CAAC8F,YAAY,GAAG,IAAI;AAClC9F,cAAc,CAAC+F,qBAAqB,GAAG,IAAI"}

package/components/lib.d.ts

@@ -10,6 +10,7 @@
  */
 import Accordion from './accordion/Accordion';
 import Anchor from './anchor/Anchor';
+import AriaLive from './aria-live/AriaLive';
 import Autocomplete from './autocomplete/Autocomplete';
 import Avatar from './avatar/Avatar';
 import Badge from './badge/Badge';
@@ -59,13 +60,14 @@ import ToggleButton from './toggle-button/ToggleButton';
 import Tooltip from './tooltip/Tooltip';
 import Upload from './upload/Upload';
 import VisuallyHidden from './visually-hidden/VisuallyHidden';
-export { Accordion, Anchor, Autocomplete, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Drawer, Dropdown, Flex, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Grid, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden, };
+export { Accordion, Anchor, AriaLive, Autocomplete, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Drawer, Dropdown, Flex, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Grid, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden, };
 export declare const getComponents: () => {
     Accordion: typeof Accordion;
     Anchor: import("react").ForwardRefExoticComponent<import("./anchor/Anchor").AnchorProps & Omit<import("react").HTMLProps<HTMLAnchorElement>, "ref"> & import("./space/types").SpacingElementProps & {
         space?: import("./space/types").SpaceTypeAll;
         innerSpace?: import("./space/types").SpaceTypeAll | import("./space/types").SpaceTypeMedia;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
+    AriaLive: typeof AriaLive;
     Autocomplete: typeof Autocomplete;
     Avatar: {
         (localProps: import("./avatar/Avatar").AvatarProps & import("./space/types").SpacingElementProps & {

package/components/lib.js

@@ -1,5 +1,6 @@
 import Accordion from './accordion/Accordion';
 import Anchor from './anchor/Anchor';
+import AriaLive from './aria-live/AriaLive';
 import Autocomplete from './autocomplete/Autocomplete';
 import Avatar from './avatar/Avatar';
 import Badge from './badge/Badge';
@@ -49,11 +50,12 @@ import ToggleButton from './toggle-button/ToggleButton';
 import Tooltip from './tooltip/Tooltip';
 import Upload from './upload/Upload';
 import VisuallyHidden from './visually-hidden/VisuallyHidden';
-export { Accordion, Anchor, Autocomplete, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Drawer, Dropdown, Flex, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Grid, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden };
+export { Accordion, Anchor, AriaLive, Autocomplete, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Drawer, Dropdown, Flex, FormLabel, FormRow, FormSet, FormStatus, GlobalError, GlobalStatus, Grid, Heading, HeightAnimation, HelpButton, Icon, IconPrimary, InfoCard, Input, InputMasked, Logo, Modal, NumberFormat, Pagination, ProgressIndicator, Radio, Section, Skeleton, SkipContent, Slider, Space, StepIndicator, Switch, Table, Tabs, Tag, Textarea, Timeline, ToggleButton, Tooltip, Upload, VisuallyHidden };
 export const getComponents = () => {
   return {
     Accordion,
     Anchor,
+    AriaLive,
     Autocomplete,
     Avatar,
     Badge,

package/components/lib.js.map

@@ -1 +1 @@
-{"version":3,"file":"lib.js","names":["Accordion","Anchor","Autocomplete","Avatar","Badge","Breadcrumb","Button","Card","Checkbox","DatePicker","Dialog","Drawer","Dropdown","Flex","FormLabel","FormRow","FormSet","FormStatus","GlobalError","GlobalStatus","Grid","Heading","HeightAnimation","HelpButton","Icon","IconPrimary","InfoCard","Input","InputMasked","Logo","Modal","NumberFormat","Pagination","ProgressIndicator","Radio","Section","Skeleton","SkipContent","Slider","Space","StepIndicator","Switch","Table","Tabs","Tag","Textarea","Timeline","ToggleButton","Tooltip","Upload","VisuallyHidden","getComponents"],"sources":["../../../src/components/lib.ts"],"sourcesContent":["/**\n * ATTENTION: This file is auto generated by using \"prepareTemplates\".\n * Do not change the content!\n *\n */\n\n/**\n * Library Index template to autogenerate all the components and extensions\n * Used by \"prepareTemplates\"\n */\n\n// import all the available components\nimport Accordion from './accordion/Accordion'\nimport Anchor from './anchor/Anchor'\nimport Autocomplete from './autocomplete/Autocomplete'\nimport Avatar from './avatar/Avatar'\nimport Badge from './badge/Badge'\nimport Breadcrumb from './breadcrumb/Breadcrumb'\nimport Button from './button/Button'\nimport Card from './card/Card'\nimport Checkbox from './checkbox/Checkbox'\nimport DatePicker from './date-picker/DatePicker'\nimport Dialog from './dialog/Dialog'\nimport Drawer from './drawer/Drawer'\nimport Dropdown from './dropdown/Dropdown'\nimport Flex from './flex/Flex'\nimport FormLabel from './form-label/FormLabel'\nimport FormRow from './form-row/FormRow'\nimport FormSet from './form-set/FormSet'\nimport FormStatus from './form-status/FormStatus'\nimport GlobalError from './global-error/GlobalError'\nimport GlobalStatus from './global-status/GlobalStatus'\nimport Grid from './grid/Grid'\nimport Heading from './heading/Heading'\nimport HeightAnimation from './height-animation/HeightAnimation'\nimport HelpButton from './help-button/HelpButton'\nimport Icon from './icon/Icon'\nimport IconPrimary from './icon-primary/IconPrimary'\nimport InfoCard from './info-card/InfoCard'\nimport Input from './input/Input'\nimport InputMasked from './input-masked/InputMasked'\nimport Logo from './logo/Logo'\nimport Modal from './modal/Modal'\nimport NumberFormat from './number-format/NumberFormat'\nimport Pagination from './pagination/Pagination'\nimport ProgressIndicator from './progress-indicator/ProgressIndicator'\nimport Radio from './radio/Radio'\nimport Section from './section/Section'\nimport Skeleton from './skeleton/Skeleton'\nimport SkipContent from './skip-content/SkipContent'\nimport Slider from './slider/Slider'\nimport Space from './space/Space'\nimport StepIndicator from './step-indicator/StepIndicator'\nimport Switch from './switch/Switch'\nimport Table from './table/Table'\nimport Tabs from './tabs/Tabs'\nimport Tag from './tag/Tag'\nimport Textarea from './textarea/Textarea'\nimport Timeline from './timeline/Timeline'\nimport ToggleButton from './toggle-button/ToggleButton'\nimport Tooltip from './tooltip/Tooltip'\nimport Upload from './upload/Upload'\nimport VisuallyHidden from './visually-hidden/VisuallyHidden'\n\n// define / export all the available components\nexport {\n  Accordion,\n  Anchor,\n  Autocomplete,\n  Avatar,\n  Badge,\n  Breadcrumb,\n  Button,\n  Card,\n  Checkbox,\n  DatePicker,\n  Dialog,\n  Drawer,\n  Dropdown,\n  Flex,\n  FormLabel,\n  FormRow,\n  FormSet,\n  FormStatus,\n  GlobalError,\n  GlobalStatus,\n  Grid,\n  Heading,\n  HeightAnimation,\n  HelpButton,\n  Icon,\n  IconPrimary,\n  InfoCard,\n  Input,\n  InputMasked,\n  Logo,\n  Modal,\n  NumberFormat,\n  Pagination,\n  ProgressIndicator,\n  Radio,\n  Section,\n  Skeleton,\n  SkipContent,\n  Slider,\n  Space,\n  StepIndicator,\n  Switch,\n  Table,\n  Tabs,\n  Tag,\n  Textarea,\n  Timeline,\n  ToggleButton,\n  Tooltip,\n  Upload,\n  VisuallyHidden,\n}\n\nexport const getComponents = () => {\n  return {\n    Accordion,\n    Anchor,\n    Autocomplete,\n    Avatar,\n    Badge,\n    Breadcrumb,\n    Button,\n    Card,\n    Checkbox,\n    DatePicker,\n    Dialog,\n    Drawer,\n    Dropdown,\n    Flex,\n    FormLabel,\n    FormRow,\n    FormSet,\n    FormStatus,\n    GlobalError,\n    GlobalStatus,\n    Grid,\n    Heading,\n    HeightAnimation,\n    HelpButton,\n    Icon,\n    IconPrimary,\n    InfoCard,\n    Input,\n    InputMasked,\n    Logo,\n    Modal,\n    NumberFormat,\n    Pagination,\n    ProgressIndicator,\n    Radio,\n    Section,\n    Skeleton,\n    SkipContent,\n    Slider,\n    Space,\n    StepIndicator,\n    Switch,\n    Table,\n    Tabs,\n    Tag,\n    Textarea,\n    Timeline,\n    ToggleButton,\n    Tooltip,\n    Upload,\n    VisuallyHidden,\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"lib.js","names":["Accordion","Anchor","AriaLive","Autocomplete","Avatar","Badge","Breadcrumb","Button","Card","Checkbox","DatePicker","Dialog","Drawer","Dropdown","Flex","FormLabel","FormRow","FormSet","FormStatus","GlobalError","GlobalStatus","Grid","Heading","HeightAnimation","HelpButton","Icon","IconPrimary","InfoCard","Input","InputMasked","Logo","Modal","NumberFormat","Pagination","ProgressIndicator","Radio","Section","Skeleton","SkipContent","Slider","Space","StepIndicator","Switch","Table","Tabs","Tag","Textarea","Timeline","ToggleButton","Tooltip","Upload","VisuallyHidden","getComponents"],"sources":["../../../src/components/lib.ts"],"sourcesContent":["/**\n * ATTENTION: This file is auto generated by using \"prepareTemplates\".\n * Do not change the content!\n *\n */\n\n/**\n * Library Index template to autogenerate all the components and extensions\n * Used by \"prepareTemplates\"\n */\n\n// import all the available components\nimport Accordion from './accordion/Accordion'\nimport Anchor from './anchor/Anchor'\nimport AriaLive from './aria-live/AriaLive'\nimport Autocomplete from './autocomplete/Autocomplete'\nimport Avatar from './avatar/Avatar'\nimport Badge from './badge/Badge'\nimport Breadcrumb from './breadcrumb/Breadcrumb'\nimport Button from './button/Button'\nimport Card from './card/Card'\nimport Checkbox from './checkbox/Checkbox'\nimport DatePicker from './date-picker/DatePicker'\nimport Dialog from './dialog/Dialog'\nimport Drawer from './drawer/Drawer'\nimport Dropdown from './dropdown/Dropdown'\nimport Flex from './flex/Flex'\nimport FormLabel from './form-label/FormLabel'\nimport FormRow from './form-row/FormRow'\nimport FormSet from './form-set/FormSet'\nimport FormStatus from './form-status/FormStatus'\nimport GlobalError from './global-error/GlobalError'\nimport GlobalStatus from './global-status/GlobalStatus'\nimport Grid from './grid/Grid'\nimport Heading from './heading/Heading'\nimport HeightAnimation from './height-animation/HeightAnimation'\nimport HelpButton from './help-button/HelpButton'\nimport Icon from './icon/Icon'\nimport IconPrimary from './icon-primary/IconPrimary'\nimport InfoCard from './info-card/InfoCard'\nimport Input from './input/Input'\nimport InputMasked from './input-masked/InputMasked'\nimport Logo from './logo/Logo'\nimport Modal from './modal/Modal'\nimport NumberFormat from './number-format/NumberFormat'\nimport Pagination from './pagination/Pagination'\nimport ProgressIndicator from './progress-indicator/ProgressIndicator'\nimport Radio from './radio/Radio'\nimport Section from './section/Section'\nimport Skeleton from './skeleton/Skeleton'\nimport SkipContent from './skip-content/SkipContent'\nimport Slider from './slider/Slider'\nimport Space from './space/Space'\nimport StepIndicator from './step-indicator/StepIndicator'\nimport Switch from './switch/Switch'\nimport Table from './table/Table'\nimport Tabs from './tabs/Tabs'\nimport Tag from './tag/Tag'\nimport Textarea from './textarea/Textarea'\nimport Timeline from './timeline/Timeline'\nimport ToggleButton from './toggle-button/ToggleButton'\nimport Tooltip from './tooltip/Tooltip'\nimport Upload from './upload/Upload'\nimport VisuallyHidden from './visually-hidden/VisuallyHidden'\n\n// define / export all the available components\nexport {\n  Accordion,\n  Anchor,\n  AriaLive,\n  Autocomplete,\n  Avatar,\n  Badge,\n  Breadcrumb,\n  Button,\n  Card,\n  Checkbox,\n  DatePicker,\n  Dialog,\n  Drawer,\n  Dropdown,\n  Flex,\n  FormLabel,\n  FormRow,\n  FormSet,\n  FormStatus,\n  GlobalError,\n  GlobalStatus,\n  Grid,\n  Heading,\n  HeightAnimation,\n  HelpButton,\n  Icon,\n  IconPrimary,\n  InfoCard,\n  Input,\n  InputMasked,\n  Logo,\n  Modal,\n  NumberFormat,\n  Pagination,\n  ProgressIndicator,\n  Radio,\n  Section,\n  Skeleton,\n  SkipContent,\n  Slider,\n  Space,\n  StepIndicator,\n  Switch,\n  Table,\n  Tabs,\n  Tag,\n  Textarea,\n  Timeline,\n  ToggleButton,\n  Tooltip,\n  Upload,\n  VisuallyHidden,\n}\n\nexport const getComponents = () => {\n  return {\n    Accordion,\n    Anchor,\n    AriaLive,\n    Autocomplete,\n    Avatar,\n    Badge,\n    Breadcrumb,\n    Button,\n    Card,\n    Checkbox,\n    DatePicker,\n    Dialog,\n    Drawer,\n    Dropdown,\n    Flex,\n    FormLabel,\n    FormRow,\n    FormSet,\n    FormStatus,\n    GlobalError,\n    GlobalStatus,\n    Grid,\n    Heading,\n    HeightAnimation,\n    HelpButton,\n    Icon,\n    IconPrimary,\n    InfoCard,\n    Input,\n    InputMasked,\n    Logo,\n    Modal,\n    NumberFormat,\n    Pagination,\n    ProgressIndicator,\n    Radio,\n    Section,\n    Skeleton,\n    SkipContent,\n    Slider,\n    Space,\n    StepIndicator,\n    Switch,\n    Table,\n    Tabs,\n    Tag,\n    Textarea,\n    Timeline,\n    ToggleButton,\n    Tooltip,\n    Upload,\n    VisuallyHidden,\n  }\n}\n"],"mappings":"AAYA,OAAOA,SAAS,MAAM,uBAAuB;AAC7C,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,QAAQ,MAAM,sBAAsB;AAC3C,OAAOC,YAAY,MAAM,6BAA6B;AACtD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,UAAU,MAAM,yBAAyB;AAChD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,UAAU,MAAM,0BAA0B;AACjD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,SAAS,MAAM,wBAAwB;AAC9C,OAAOC,OAAO,MAAM,oBAAoB;AACxC,OAAOC,OAAO,MAAM,oBAAoB;AACxC,OAAOC,UAAU,MAAM,0BAA0B;AACjD,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,OAAO,MAAM,mBAAmB;AACvC,OAAOC,eAAe,MAAM,oCAAoC;AAChE,OAAOC,UAAU,MAAM,0BAA0B;AACjD,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,QAAQ,MAAM,sBAAsB;AAC3C,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,UAAU,MAAM,yBAAyB;AAChD,OAAOC,iBAAiB,MAAM,wCAAwC;AACtE,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,OAAO,MAAM,mBAAmB;AACvC,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,WAAW,MAAM,4BAA4B;AACpD,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,aAAa,MAAM,gCAAgC;AAC1D,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,MAAM,eAAe;AACjC,OAAOC,IAAI,MAAM,aAAa;AAC9B,OAAOC,GAAG,MAAM,WAAW;AAC3B,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,QAAQ,MAAM,qBAAqB;AAC1C,OAAOC,YAAY,MAAM,8BAA8B;AACvD,OAAOC,OAAO,MAAM,mBAAmB;AACvC,OAAOC,MAAM,MAAM,iBAAiB;AACpC,OAAOC,cAAc,MAAM,kCAAkC;AAG7D,SACEnD,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,YAAY,EACZC,MAAM,EACNC,KAAK,EACLC,UAAU,EACVC,MAAM,EACNC,IAAI,EACJC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,OAAO,EACPC,UAAU,EACVC,WAAW,EACXC,YAAY,EACZC,IAAI,EACJC,OAAO,EACPC,eAAe,EACfC,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,QAAQ,EACRC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,YAAY,EACZC,UAAU,EACVC,iBAAiB,EACjBC,KAAK,EACLC,OAAO,EACPC,QAAQ,EACRC,WAAW,EACXC,MAAM,EACNC,KAAK,EACLC,aAAa,EACbC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,GAAG,EACHC,QAAQ,EACRC,QAAQ,EACRC,YAAY,EACZC,OAAO,EACPC,MAAM,EACNC,cAAc;AAGhB,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAM;EACjC,OAAO;IACLpD,SAAS;IACTC,MAAM;IACNC,QAAQ;IACRC,YAAY;IACZC,MAAM;IACNC,KAAK;IACLC,UAAU;IACVC,MAAM;IACNC,IAAI;IACJC,QAAQ;IACRC,UAAU;IACVC,MAAM;IACNC,MAAM;IACNC,QAAQ;IACRC,IAAI;IACJC,SAAS;IACTC,OAAO;IACPC,OAAO;IACPC,UAAU;IACVC,WAAW;IACXC,YAAY;IACZC,IAAI;IACJC,OAAO;IACPC,eAAe;IACfC,UAAU;IACVC,IAAI;IACJC,WAAW;IACXC,QAAQ;IACRC,KAAK;IACLC,WAAW;IACXC,IAAI;IACJC,KAAK;IACLC,YAAY;IACZC,UAAU;IACVC,iBAAiB;IACjBC,KAAK;IACLC,OAAO;IACPC,QAAQ;IACRC,WAAW;IACXC,MAAM;IACNC,KAAK;IACLC,aAAa;IACbC,MAAM;IACNC,KAAK;IACLC,IAAI;IACJC,GAAG;IACHC,QAAQ;IACRC,QAAQ;IACRC,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC;EACF,CAAC;AACH,CAAC"}

package/components/number-format/NumberUtils.d.ts

@@ -30,6 +30,7 @@ export interface formatReturnValue {
 }
 export type formatValue = string | number;
 export type formatReturnType = formatReturnValue | formatValue;
+
 export interface formatOptionParams {
   /** can be "auto" */
   locale?: Locale;
@@ -80,10 +81,15 @@ export interface formatOptionParams {
   /** If an object should be returned, including the "aria" property */
   returnAria?: boolean;
 }
-export const format: (
+
+export function format(
+  value: formatValue,
+  options: formatOptionParams & { returnAria: true }
+): formatReturnValue;
+export function format(
   value: formatValue,
   options?: formatOptionParams
-) => formatReturnType;
+): formatValue;
 
 type cleanNumberOptions = {
   decimalSeparator?: string;

package/components/number-format/useNumberFormat.d.ts

@@ -1,3 +1,3 @@
 import type { formatOptionParams, formatValue } from './NumberUtils';
-declare function useNumberFormat(value: formatValue, options?: formatOptionParams): import("./NumberUtils").formatReturnType;
+declare function useNumberFormat(value: formatValue, options?: formatOptionParams): formatValue;
 export default useNumberFormat;

package/components/section/Section.d.ts

@@ -69,13 +69,16 @@ export type SectionProps = {
      */
     innerRef?: React.RefObject<HTMLElement>;
     /**
-     * @deprecated in v11 use "innerSpace" prop instead */
+     * @deprecated in v11 use "innerSpace" prop instead
+     */
     spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>;
     /**
-     * @deprecated in v11 use "background" prop instead */
+     * @deprecated in v11 use "background" prop instead
+     */
     style_type?: SectionStyleTypes | string;
     /**
-     * @deprecated in v11 use "innerRef" prop instead */
+     * @deprecated in v11 use "innerRef" prop instead
+     */
     inner_ref?: React.RefObject<HTMLElement>;
 };
 export type SectionAllProps = SectionProps & SpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;

package/components/section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction getColor(value: string) {\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}
+{"version":3,"file":"Section.js","names":["React","classnames","Context","isTrue","extendPropsWithContext","Space","defaultProps","element","Section","localProps","createElement","SectionParams","context","useContext","props","variant","breakout","roundedCorner","textColor","backgroundColor","dropShadow","outline","innerRef","className","children","spacing","style_type","inner_ref","attributes","_objectWithoutProperties","_excluded","internalRef","useRef","elementRef","Object","freeze","_objectSpread","style","computeStyle","value","getColor","String","test","undefined","property","name","valueCallback","media","small","medium","large","result","size","_media","_media2","_name","_supportsSpacingProps"],"sources":["../../../../src/components/section/Section.tsx"],"sourcesContent":["/**\n * Web Section Component\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport Context from '../../shared/Context'\nimport {\n  isTrue,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport type {\n  DynamicElement,\n  ResponsiveProp,\n  SpacingProps,\n} from '../../shared/types'\nimport Space from '../space/Space'\n\nexport type SectionVariants = 'error' | 'info' | 'warning' | 'success'\n\nexport type SectionStyleTypes =\n  | 'divider'\n  | 'white'\n  | 'transparent'\n\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'lavender'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'pistachio'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'emerald-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sea-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'fire-red-8'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'sand-yellow'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'black-3'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green'\n  /** @deprecated in v11 use \"variant\" or \"backgroundColor\" prop instead */\n  | 'mint-green-12'\n\nexport type SectionSpacing =\n  | boolean\n  | 'x-small'\n  | 'small'\n  | 'medium'\n  | 'large'\n  | 'x-large'\n  | 'xx-large'\n\nexport type TextColor = string\nexport type OutlineColor = string | boolean\nexport type BackgroundColor = string\nexport type DropShadow = boolean\n\nexport type SectionProps = {\n  /**\n   * Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop\n   */\n  variant?: SectionVariants | string\n\n  /**\n   * Define if the background color should break-out to a fullscreen view. Defaults to `true`.\n   */\n  breakout?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define if the section should have rounded corners. Defaults to `false`.\n   */\n  roundedCorner?: boolean | ResponsiveProp<boolean>\n\n  /**\n   * Define a custom border color. Use a Eufemia color.\n   */\n  outline?: OutlineColor | ResponsiveProp<OutlineColor>\n\n  /**\n   * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.\n   */\n  textColor?: TextColor | ResponsiveProp<TextColor>\n\n  /**\n   * Define a custom background color, instead of a variant. Use a Eufemia color.\n   */\n  backgroundColor?: BackgroundColor | ResponsiveProp<BackgroundColor>\n\n  /**\n   * Define a custom drop-shadow.\n   */\n  dropShadow?: DropShadow | ResponsiveProp<DropShadow>\n\n  /**\n   * Define what HTML element should be used. Defaults to `<section>`.\n   */\n  element?: DynamicElement\n\n  /**\n   * Define a React.Ref.\n   */\n  innerRef?: React.RefObject<HTMLElement>\n\n  /**\n   * @deprecated in v11 use \"innerSpace\" prop instead\n   */\n  spacing?: SectionSpacing | ResponsiveProp<SectionSpacing>\n  /**\n   * @deprecated in v11 use \"background\" prop instead\n   */\n  style_type?: SectionStyleTypes | string\n  /**\n   * @deprecated in v11 use \"innerRef\" prop instead\n   */\n  inner_ref?: React.RefObject<HTMLElement>\n}\n\nexport type SectionAllProps = SectionProps &\n  SpacingProps &\n  Omit<React.HTMLProps<HTMLElement>, 'ref'>\n\ntype SectionReturnParams = Record<string, unknown> & {\n  className: string\n  innerRef: React.RefObject<HTMLElement>\n  children: React.ReactNode\n  style: React.CSSProperties\n}\n\nconst defaultProps = {\n  element: 'section',\n}\n\nexport default function Section(localProps: SectionAllProps) {\n  return <Space {...SectionParams(localProps)} />\n}\n\nexport function SectionParams(\n  localProps: SectionAllProps\n): SectionReturnParams {\n  const context = React.useContext(Context)\n\n  // use only the props from context, who are available here anyway\n  const props = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context.Section\n  )\n\n  const {\n    variant,\n    breakout = true,\n    roundedCorner,\n    textColor,\n    backgroundColor,\n    dropShadow,\n    outline,\n    innerRef,\n\n    className,\n    children,\n\n    spacing,\n    style_type,\n    inner_ref,\n\n    ...attributes\n  } = props\n\n  const internalRef = React.useRef<HTMLElement>()\n  const elementRef = innerRef || inner_ref || internalRef\n\n  return Object.freeze({\n    ...attributes,\n    className: classnames(\n      'dnb-section',\n      `dnb-section--${variant ? variant : style_type || 'default'}`,\n      spacing &&\n        `dnb-section--spacing-${isTrue(spacing) ? 'large' : spacing}`,\n      className\n    ),\n    style: {\n      ...computeStyle(\n        breakout,\n        'breakout',\n        (value) => `var(--breakout--${value ? 'on' : 'off'})`\n      ),\n      ...computeStyle(\n        roundedCorner,\n        'rounded-corner',\n        (value) => value && 'var(--rounded-corner--value)'\n      ),\n      ...computeStyle(textColor, 'text-color', (value) => getColor(value)),\n      ...computeStyle(backgroundColor, 'background-color', (value) =>\n        getColor(value)\n      ),\n      ...computeStyle(\n        dropShadow,\n        'drop-shadow',\n        (value) => value && 'var(--shadow-default)'\n      ),\n      ...computeStyle(outline, 'outline-color', (value) =>\n        String(value) === 'true'\n          ? 'var(--outline-color--value)'\n          : getColor(value)\n      ),\n      ...attributes?.style,\n    } as React.CSSProperties,\n    innerRef: elementRef,\n    children,\n  })\n}\n\nfunction getColor(value: string) {\n  return value\n    ? !/#|var/.test(value)\n      ? `var(--color-${value})`\n      : value\n    : undefined\n}\n\nfunction computeStyle(\n  property: ResponsiveProp<unknown> | boolean | string,\n  name: string,\n  valueCallback: (value: string) => string | undefined\n) {\n  let media = property as ResponsiveProp<unknown>\n\n  if (media !== null && typeof media !== 'object') {\n    media = {\n      small: property,\n      medium: property,\n      large: property,\n    } as ResponsiveProp<unknown>\n  }\n\n  const result = {}\n\n  for (const size in media as ResponsiveProp<unknown>) {\n    if (typeof media?.[size] !== 'undefined') {\n      const value = valueCallback(media?.[size])\n      if (typeof value === 'string') {\n        result[`--${name}--${size}`] = value\n      }\n    }\n  }\n\n  return result\n}\n\nSection._name = 'Section'\nSection._supportsSpacingProps = true\n"],"mappings":"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"}

package/components/section/style/dnb-section.css

@@ -18,6 +18,7 @@
   --left: -100vw;
   --width: 100vw;
   --height: 100%;
+  --color-transparent: transparent;
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);
 }

package/components/section/style/dnb-section.min.css

@@ -1,4 +1,4 @@
-.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{border-radius:var(--rounded-corner,0);box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));content:"";inset:0;position:absolute;z-index:-1}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
+.dnb-section{--breakout--on:visible;--breakout--off:hidden;--rounded-corner--value:0.5rem;--outline:0 0 0 var(--outline-width,1px) var(--outline-color,transparent);--outline-none:0 0 0 0 transparent;--top:0;--left:-100vw;--width:100vw;--height:100%;--color-transparent:transparent;border-radius:var(--rounded-corner,0);color:var(--text-color,#000);display:flow-root;position:relative}.dnb-section[style*="--background-color"]{background-color:var(--background-color,#fff)}.dnb-section:before{border-radius:var(--rounded-corner,0);box-shadow:var(--drop-shadow,var(--outline-none)),var(--outline,var(--outline-none));content:"";inset:0;position:absolute;z-index:-1}.dnb-section:after{--box-shadow:99vw 0 0 0 currentcolor,198vw 0 0 0 currentcolor,297vw 0 0 0 currentcolor,396vw 0 0 0 currentcolor;background-color:currentcolor;box-shadow:var(--box-shadow);color:var(--background-color,currentcolor);content:"";height:var(--height);left:var(--left);position:absolute;top:var(--top);visibility:var(--breakout,hidden);width:var(--width);z-index:-15}.dnb-section:not([style*="--breakout"]){--breakout:var(--breakout--on)}@media screen and (max-width:60em){.dnb-section{--breakout:var(--breakout--small,var(--breakout--fallback));--background-color--value:var(--background-color--small);--text-color--value:var(--text-color--small);--outline-color:var(--outline-color--small);--drop-shadow:var(--drop-shadow--small);--rounded-corner:var(
       --rounded-corner--small,var(--rounded-corner--fallback)
     )}}@media screen and (max-width:59.9375em) and (min-width:40.0625em){.dnb-section{--breakout:var(--breakout--medium,var(--breakout--fallback));--background-color--value:var(--background-color--medium);--text-color--value:var(--text-color--medium);--outline-color:var(--outline-color--medium);--drop-shadow:var(--drop-shadow--medium);--rounded-corner:var(
       --rounded-corner--medium,var(--rounded-corner--fallback)

package/components/section/style/dnb-section.scss

@@ -22,6 +22,7 @@
   --left: -100vw;
   --width: 100vw;
   --height: 100%;
+  --color-transparent: transparent;
 
   color: var(--text-color, black);
   border-radius: var(--rounded-corner, 0);

package/components/space/SpacingUtils.js

@@ -99,7 +99,11 @@ export const createSpacingClasses = function (props) {
   const p = Object.isFrozen(props) ? _objectSpread({}, props) : props;
   if (typeof p.space !== 'undefined') {
     if (typeof p.space === 'string' || typeof p.space === 'number' || typeof p.space === 'boolean' && p.space) {
-      p.top = p.right = p.bottom = p.left = p.space;
+      var _p$left, _p$bottom, _p$right, _p$top;
+      p.left = (_p$left = p.left) !== null && _p$left !== void 0 ? _p$left : p.space;
+      p.bottom = (_p$bottom = p.bottom) !== null && _p$bottom !== void 0 ? _p$bottom : p.space;
+      p.right = (_p$right = p.right) !== null && _p$right !== void 0 ? _p$right : p.space;
+      p.top = (_p$top = p.top) !== null && _p$top !== void 0 ? _p$top : p.space;
     }
     if (typeof p.space === 'object') {
       for (const i in p.space) {