@dnb/eufemia 10.11.0 → 10.13.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiInputMask.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_TextMask","_useHandleCursorPosition","_classnames","_FormLabel","_SpacingHelper","_useMultiInputValues","_excluded","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","MultiInputMask","_ref","label","labelDirection","inputs","delimiter","onChange","onChangeExternal","disabled","status","statusState","values","defaultValues","className","props","useMultiInputValue","callback","inputRefs","useRef","onKeyDown","useHandleCursorPosition","current","getKeysToHandle","WrapperElement","createElement","classnames","createSpacingClasses","element","onClick","onLegendClick","vertical","status_state","input_element","map","input","index","Fragment","id","MultiInputMaskInput","value","undefined","inputRef","getInputRef","firstInput","focus","setSelectionRange","ref","includes","push","uniqueMasks","getUniqueMasks","size","pattern","next","replace","RegExp","reduce","_ref2","mask","masks","Set","forEach","add","String","_ref3","placeholderCharacter","placeholderChar","guide","showMask","keepCharPositions","onFocus","event","removePlaceholder","htmlFor","hidden","placeholder","_ref4","select","_default","exports"],"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'\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}\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   * 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} & Omit<\n  React.HTMLProps<HTMLInputElement>,\n  'onChange' | '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  ...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        input_element={inputs.map((input, index) => (\n          <Fragment key={input.id}>\n            <MultiInputMaskInput\n              {...input}\n              value={values[input.id]}\n              delimiter={\n                index !== inputs.length - 1 ? delimiter : undefined\n              }\n              onKeyDown={onKeyDown}\n              onChange={onChange}\n              disabled={disabled}\n              inputRef={getInputRef}\n            />\n          </Fragment>\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}__input`] = mask\n\n        return keys\n      },\n      {} as Record<`${T}__input`, 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}: MultiInputMaskInputProps<T>) {\n  return (\n    <>\n      <TextMask\n        id={`${id}__input`}\n        className={classnames(\n          'dnb-input__input',\n          'dnb-multi-input-mask__input',\n          value && '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}__label`}\n        ref={inputRef}\n        onKeyDown={onKeyDown}\n        onFocus={onFocus}\n        onChange={(event) => {\n          onChange(\n            id,\n            removePlaceholder(event.target.value, placeholderCharacter)\n          )\n        }}\n      />\n      <label id={`${id}__label`} htmlFor={`${id}__input`} hidden>\n        {label}\n      </label>\n      {delimiter && (\n        <span\n          aria-hidden\n          className={classnames(\n            'dnb-multi-input-mask__delimiter',\n            value && '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  function onFocus({ target }: React.FocusEvent<HTMLInputElement>) {\n    target.focus()\n    target.select()\n  }\n}\n\nexport default MultiInputMask\n"],"mappings":"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"}

package/cjs/components/input-masked/TextMask.d.ts

@@ -13,7 +13,7 @@ export type TextMaskInputElement =
 export type TextMaskValue = string | number;
 export interface TextMaskProps extends React.HTMLProps<HTMLElement> {
   mask: TextMaskMask;
-  inputRef?: Record<string, unknown>;
+  inputRef?: React.MutableRefObject<HTMLInputElement>;
   inputElement?: TextMaskInputElement;
   onChange?: (...args: any[]) => any;
   guide?: boolean;

package/cjs/components/input-masked/hooks/useHandleCursorPosition.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+declare function useHandleCursorPosition(inputRefs: MutableRefObject<HTMLInputElement>[], keysToHandle?: RegExp | {
+    [inputId: string]: RegExp[];
+}): {
+    onKeyDown: (event: React.KeyboardEvent) => void;
+};
+export default useHandleCursorPosition;

package/cjs/components/input-masked/hooks/useHandleCursorPosition.js

@@ -0,0 +1,114 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+function useHandleCursorPosition(inputRefs, keysToHandle) {
+  const inputList = (0, _react.useRef)(refsToInputList(inputRefs));
+  (0, _react.useEffect)(() => {
+    inputList.current = refsToInputList(inputRefs);
+  }, [inputRefs]);
+  function onKeyDown(event) {
+    var _getKeysToHandle;
+    const inputs = inputList.current;
+    const input = event.target;
+    const pressedKey = event.key;
+    const hasPressedKeysToHandle = ((_getKeysToHandle = getKeysToHandle({
+      keysToHandle,
+      input
+    })) === null || _getKeysToHandle === void 0 ? void 0 : _getKeysToHandle.test(pressedKey)) || /(ArrowRight|ArrowLeft|Backspace)/.test(pressedKey);
+    const initialSelectionStart = input.selectionStart;
+    const inputPosition = getInputPosition(input, inputs);
+    window.requestAnimationFrame(() => {
+      const caretPosition = getCaretPosition(input);
+      if (!hasPressedKeysToHandle) {
+        return;
+      }
+      if (caretPosition === 'last' && inputPosition !== 'last' && !(initialSelectionStart === 1 && pressedKey === 'ArrowRight')) {
+        return goToInput('next', input, inputs);
+      }
+      if (caretPosition === 'first' && inputPosition !== 'first' && !(initialSelectionStart === 1 && (pressedKey === 'ArrowLeft' || pressedKey === 'Backspace'))) {
+        return goToInput('previous', input, inputs);
+      }
+    });
+  }
+  return {
+    onKeyDown
+  };
+}
+function refsToInputList(inputRefs) {
+  return inputRefs.map(ref => ref.current).filter(Boolean);
+}
+function getKeysToHandle(_ref) {
+  let {
+    keysToHandle,
+    input
+  } = _ref;
+  if (!keysToHandle) {
+    return undefined;
+  }
+  if (keysToHandle instanceof RegExp) {
+    return keysToHandle;
+  }
+  const masks = keysToHandle[input.id];
+  const selection = input.selectionStart === input.selectionEnd ? input.selectionStart : undefined;
+  if (!selection) {
+    return undefined;
+  }
+  const maskIndex = selection === input.size ? masks.length - 1 : selection;
+  return masks[maskIndex];
+}
+function getInputPosition(input, inputs) {
+  const firstInput = inputs[0];
+  const lastInput = inputs[inputs.length - 1];
+  if (input === firstInput) {
+    return 'first';
+  }
+  if (input === lastInput) {
+    return 'last';
+  }
+  return 'non-initial';
+}
+function getSelectionPositions(input) {
+  return {
+    start: 0,
+    end: Number(input.size)
+  };
+}
+function getCaretPosition(input) {
+  const {
+    start,
+    end
+  } = getSelectionPositions(input);
+  const selectionStart = input.selectionStart;
+  const selectionEnd = input.selectionEnd;
+  if (selectionStart === start && selectionEnd === start) {
+    return 'first';
+  }
+  if (selectionStart === end && selectionEnd === end) {
+    return 'last';
+  }
+  return 'non-initial';
+}
+function goToInput(to, input, inputs) {
+  const currentInputIndex = inputs.indexOf(input);
+  const siblingIndex = to === 'next' ? currentInputIndex + 1 : to === 'previous' ? currentInputIndex - 1 : 0;
+  const siblingInput = inputs[siblingIndex];
+  const {
+    start,
+    end
+  } = getSelectionPositions(siblingInput);
+  siblingInput.focus();
+  if (to === 'next') {
+    return siblingInput.setSelectionRange(start, start);
+  }
+  if (to === 'previous') {
+    return siblingInput.setSelectionRange(end, end);
+  }
+}
+var _default = useHandleCursorPosition;
+exports.default = _default;
+//# sourceMappingURL=useHandleCursorPosition.js.map

package/cjs/components/input-masked/hooks/useHandleCursorPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHandleCursorPosition.js","names":["_react","require","useHandleCursorPosition","inputRefs","keysToHandle","inputList","useRef","refsToInputList","useEffect","current","onKeyDown","event","_getKeysToHandle","inputs","input","target","pressedKey","key","hasPressedKeysToHandle","getKeysToHandle","test","initialSelectionStart","selectionStart","inputPosition","getInputPosition","window","requestAnimationFrame","caretPosition","getCaretPosition","goToInput","map","ref","filter","Boolean","_ref","undefined","RegExp","masks","id","selection","selectionEnd","maskIndex","size","length","firstInput","lastInput","getSelectionPositions","start","end","Number","to","currentInputIndex","indexOf","siblingIndex","siblingInput","focus","setSelectionRange","_default","exports","default"],"sources":["../../../../../src/components/input-masked/hooks/useHandleCursorPosition.ts"],"sourcesContent":["import { MutableRefObject, useEffect, useRef } from 'react'\n\nfunction useHandleCursorPosition(\n  inputRefs: MutableRefObject<HTMLInputElement>[],\n  keysToHandle?: RegExp | { [inputId: string]: RegExp[] }\n) {\n  const inputList = useRef(refsToInputList(inputRefs))\n\n  // To keep the refs.current in synch with component of use, or else it wont be possible to navigate to the next input, without triggering a re-render first.\n  useEffect(() => {\n    inputList.current = refsToInputList(inputRefs)\n  }, [inputRefs])\n\n  function onKeyDown(event: React.KeyboardEvent) {\n    const inputs = inputList.current\n    const input = event.target as HTMLInputElement\n\n    const pressedKey = event.key\n\n    const hasPressedKeysToHandle =\n      getKeysToHandle({ keysToHandle, input })?.test(pressedKey) ||\n      /(ArrowRight|ArrowLeft|Backspace)/.test(pressedKey)\n\n    const initialSelectionStart = input.selectionStart\n\n    const inputPosition = getInputPosition(input, inputs)\n\n    window.requestAnimationFrame(() => {\n      const caretPosition = getCaretPosition(input)\n\n      if (!hasPressedKeysToHandle) {\n        return // stop here\n      }\n\n      if (\n        caretPosition === 'last' &&\n        inputPosition !== 'last' &&\n        !(initialSelectionStart === 1 && pressedKey === 'ArrowRight')\n      ) {\n        return goToInput('next', input, inputs)\n      }\n\n      if (\n        caretPosition === 'first' &&\n        inputPosition !== 'first' &&\n        !(\n          initialSelectionStart === 1 &&\n          (pressedKey === 'ArrowLeft' || pressedKey === 'Backspace')\n        )\n      ) {\n        return goToInput('previous', input, inputs)\n      }\n    })\n  }\n\n  return { onKeyDown }\n}\n\n// Helpers\nfunction refsToInputList(inputRefs: MutableRefObject<HTMLInputElement>[]) {\n  return inputRefs.map((ref) => ref.current).filter(Boolean)\n}\n\ntype GetKeysToHandleParams = {\n  keysToHandle: RegExp | { [inputId: string]: RegExp[] }\n  input: HTMLInputElement\n}\n\nfunction getKeysToHandle({ keysToHandle, input }: GetKeysToHandleParams) {\n  if (!keysToHandle) {\n    return undefined\n  }\n\n  if (keysToHandle instanceof RegExp) {\n    return keysToHandle\n  }\n\n  const masks = keysToHandle[input.id]\n\n  const selection =\n    input.selectionStart === input.selectionEnd\n      ? input.selectionStart\n      : undefined\n\n  if (!selection) {\n    return undefined\n  }\n\n  const maskIndex = selection === input.size ? masks.length - 1 : selection\n\n  return masks[maskIndex]\n}\n\nfunction getInputPosition(\n  input: HTMLInputElement,\n  inputs: HTMLInputElement[]\n) {\n  const firstInput = inputs[0]\n  const lastInput = inputs[inputs.length - 1]\n\n  if (input === firstInput) {\n    return 'first'\n  }\n\n  if (input === lastInput) {\n    return 'last'\n  }\n\n  return 'non-initial'\n}\n\nfunction getSelectionPositions(input: HTMLInputElement) {\n  return { start: 0, end: Number(input.size) }\n}\n\nfunction getCaretPosition(input: HTMLInputElement) {\n  const { start, end } = getSelectionPositions(input)\n\n  const selectionStart = input.selectionStart\n  const selectionEnd = input.selectionEnd\n\n  if (selectionStart === start && selectionEnd === start) {\n    return 'first'\n  }\n\n  if (selectionStart === end && selectionEnd === end) {\n    return 'last'\n  }\n\n  return 'non-initial'\n}\n\nfunction goToInput(\n  to: 'next' | 'previous',\n  input: HTMLInputElement,\n  inputs: HTMLInputElement[]\n) {\n  const currentInputIndex = inputs.indexOf(input)\n\n  const siblingIndex =\n    to === 'next'\n      ? currentInputIndex + 1\n      : to === 'previous'\n      ? currentInputIndex - 1\n      : 0\n\n  const siblingInput = inputs[siblingIndex]\n\n  const { start, end } = getSelectionPositions(siblingInput)\n\n  siblingInput.focus()\n\n  if (to === 'next') {\n    return siblingInput.setSelectionRange(start, start)\n  }\n\n  if (to === 'previous') {\n    return siblingInput.setSelectionRange(end, end)\n  }\n}\n\nexport default useHandleCursorPosition\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,SAASC,uBAAuBA,CAC9BC,SAA+C,EAC/CC,YAAuD,EACvD;EACA,MAAMC,SAAS,GAAG,IAAAC,aAAM,EAACC,eAAe,CAACJ,SAAS,CAAC,CAAC;EAGpD,IAAAK,gBAAS,EAAC,MAAM;IACdH,SAAS,CAACI,OAAO,GAAGF,eAAe,CAACJ,SAAS,CAAC;EAChD,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,SAASO,SAASA,CAACC,KAA0B,EAAE;IAAA,IAAAC,gBAAA;IAC7C,MAAMC,MAAM,GAAGR,SAAS,CAACI,OAAO;IAChC,MAAMK,KAAK,GAAGH,KAAK,CAACI,MAA0B;IAE9C,MAAMC,UAAU,GAAGL,KAAK,CAACM,GAAG;IAE5B,MAAMC,sBAAsB,GAC1B,EAAAN,gBAAA,GAAAO,eAAe,CAAC;MAAEf,YAAY;MAAEU;IAAM,CAAC,CAAC,cAAAF,gBAAA,uBAAxCA,gBAAA,CAA0CQ,IAAI,CAACJ,UAAU,CAAC,KAC1D,kCAAkC,CAACI,IAAI,CAACJ,UAAU,CAAC;IAErD,MAAMK,qBAAqB,GAAGP,KAAK,CAACQ,cAAc;IAElD,MAAMC,aAAa,GAAGC,gBAAgB,CAACV,KAAK,EAAED,MAAM,CAAC;IAErDY,MAAM,CAACC,qBAAqB,CAAC,MAAM;MACjC,MAAMC,aAAa,GAAGC,gBAAgB,CAACd,KAAK,CAAC;MAE7C,IAAI,CAACI,sBAAsB,EAAE;QAC3B;MACF;MAEA,IACES,aAAa,KAAK,MAAM,IACxBJ,aAAa,KAAK,MAAM,IACxB,EAAEF,qBAAqB,KAAK,CAAC,IAAIL,UAAU,KAAK,YAAY,CAAC,EAC7D;QACA,OAAOa,SAAS,CAAC,MAAM,EAAEf,KAAK,EAAED,MAAM,CAAC;MACzC;MAEA,IACEc,aAAa,KAAK,OAAO,IACzBJ,aAAa,KAAK,OAAO,IACzB,EACEF,qBAAqB,KAAK,CAAC,KAC1BL,UAAU,KAAK,WAAW,IAAIA,UAAU,KAAK,WAAW,CAAC,CAC3D,EACD;QACA,OAAOa,SAAS,CAAC,UAAU,EAAEf,KAAK,EAAED,MAAM,CAAC;MAC7C;IACF,CAAC,CAAC;EACJ;EAEA,OAAO;IAAEH;EAAU,CAAC;AACtB;AAGA,SAASH,eAAeA,CAACJ,SAA+C,EAAE;EACxE,OAAOA,SAAS,CAAC2B,GAAG,CAAEC,GAAG,IAAKA,GAAG,CAACtB,OAAO,CAAC,CAACuB,MAAM,CAACC,OAAO,CAAC;AAC5D;AAOA,SAASd,eAAeA,CAAAe,IAAA,EAAiD;EAAA,IAAhD;IAAE9B,YAAY;IAAEU;EAA6B,CAAC,GAAAoB,IAAA;EACrE,IAAI,CAAC9B,YAAY,EAAE;IACjB,OAAO+B,SAAS;EAClB;EAEA,IAAI/B,YAAY,YAAYgC,MAAM,EAAE;IAClC,OAAOhC,YAAY;EACrB;EAEA,MAAMiC,KAAK,GAAGjC,YAAY,CAACU,KAAK,CAACwB,EAAE,CAAC;EAEpC,MAAMC,SAAS,GACbzB,KAAK,CAACQ,cAAc,KAAKR,KAAK,CAAC0B,YAAY,GACvC1B,KAAK,CAACQ,cAAc,GACpBa,SAAS;EAEf,IAAI,CAACI,SAAS,EAAE;IACd,OAAOJ,SAAS;EAClB;EAEA,MAAMM,SAAS,GAAGF,SAAS,KAAKzB,KAAK,CAAC4B,IAAI,GAAGL,KAAK,CAACM,MAAM,GAAG,CAAC,GAAGJ,SAAS;EAEzE,OAAOF,KAAK,CAACI,SAAS,CAAC;AACzB;AAEA,SAASjB,gBAAgBA,CACvBV,KAAuB,EACvBD,MAA0B,EAC1B;EACA,MAAM+B,UAAU,GAAG/B,MAAM,CAAC,CAAC,CAAC;EAC5B,MAAMgC,SAAS,GAAGhC,MAAM,CAACA,MAAM,CAAC8B,MAAM,GAAG,CAAC,CAAC;EAE3C,IAAI7B,KAAK,KAAK8B,UAAU,EAAE;IACxB,OAAO,OAAO;EAChB;EAEA,IAAI9B,KAAK,KAAK+B,SAAS,EAAE;IACvB,OAAO,MAAM;EACf;EAEA,OAAO,aAAa;AACtB;AAEA,SAASC,qBAAqBA,CAAChC,KAAuB,EAAE;EACtD,OAAO;IAAEiC,KAAK,EAAE,CAAC;IAAEC,GAAG,EAAEC,MAAM,CAACnC,KAAK,CAAC4B,IAAI;EAAE,CAAC;AAC9C;AAEA,SAASd,gBAAgBA,CAACd,KAAuB,EAAE;EACjD,MAAM;IAAEiC,KAAK;IAAEC;EAAI,CAAC,GAAGF,qBAAqB,CAAChC,KAAK,CAAC;EAEnD,MAAMQ,cAAc,GAAGR,KAAK,CAACQ,cAAc;EAC3C,MAAMkB,YAAY,GAAG1B,KAAK,CAAC0B,YAAY;EAEvC,IAAIlB,cAAc,KAAKyB,KAAK,IAAIP,YAAY,KAAKO,KAAK,EAAE;IACtD,OAAO,OAAO;EAChB;EAEA,IAAIzB,cAAc,KAAK0B,GAAG,IAAIR,YAAY,KAAKQ,GAAG,EAAE;IAClD,OAAO,MAAM;EACf;EAEA,OAAO,aAAa;AACtB;AAEA,SAASnB,SAASA,CAChBqB,EAAuB,EACvBpC,KAAuB,EACvBD,MAA0B,EAC1B;EACA,MAAMsC,iBAAiB,GAAGtC,MAAM,CAACuC,OAAO,CAACtC,KAAK,CAAC;EAE/C,MAAMuC,YAAY,GAChBH,EAAE,KAAK,MAAM,GACTC,iBAAiB,GAAG,CAAC,GACrBD,EAAE,KAAK,UAAU,GACjBC,iBAAiB,GAAG,CAAC,GACrB,CAAC;EAEP,MAAMG,YAAY,GAAGzC,MAAM,CAACwC,YAAY,CAAC;EAEzC,MAAM;IAAEN,KAAK;IAAEC;EAAI,CAAC,GAAGF,qBAAqB,CAACQ,YAAY,CAAC;EAE1DA,YAAY,CAACC,KAAK,CAAC,CAAC;EAEpB,IAAIL,EAAE,KAAK,MAAM,EAAE;IACjB,OAAOI,YAAY,CAACE,iBAAiB,CAACT,KAAK,EAAEA,KAAK,CAAC;EACrD;EAEA,IAAIG,EAAE,KAAK,UAAU,EAAE;IACrB,OAAOI,YAAY,CAACE,iBAAiB,CAACR,GAAG,EAAEA,GAAG,CAAC;EACjD;AACF;AAAC,IAAAS,QAAA,GAEcvD,uBAAuB;AAAAwD,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/cjs/components/input-masked/hooks/useMultiInputValues.d.ts

@@ -0,0 +1,8 @@
+import { MultiInputMaskProps, MultiInputMaskValue } from '../MultiInputMask';
+type SteppedValuesHook<T extends string> = {
+    inputs: MultiInputMaskProps<T>['inputs'];
+    defaultValues?: MultiInputMaskProps<T>['values'];
+    callback?: (values: MultiInputMaskProps<T>['values']) => void;
+};
+export declare function useMultiInputValue<T extends string>({ inputs, defaultValues, callback, }: SteppedValuesHook<T>): readonly [MultiInputMaskValue<T>, (id: string, value: string) => void];
+export {};

package/cjs/components/input-masked/hooks/useMultiInputValues.js

@@ -0,0 +1,38 @@
+"use strict";
+"use client";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMultiInputValue = useMultiInputValue;
+var _react = require("react");
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function useMultiInputValue(_ref) {
+  let {
+    inputs,
+    defaultValues,
+    callback
+  } = _ref;
+  const [values, setValues] = (0, _react.useState)(defaultValues ? defaultValues : createDefaultValues());
+  function createDefaultValues() {
+    return inputs.reduce((values, input) => {
+      values[input.id] = '';
+      return values;
+    }, {});
+  }
+  function onChange(id, value) {
+    const updatedValues = _objectSpread(_objectSpread({}, values), {}, {
+      [id]: value
+    });
+    setValues(updatedValues);
+    if (callback) {
+      callback(updatedValues);
+    }
+  }
+  return [values, onChange];
+}
+//# sourceMappingURL=useMultiInputValues.js.map

package/cjs/components/input-masked/hooks/useMultiInputValues.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiInputValues.js","names":["_react","require","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty","getOwnPropertyDescriptors","defineProperties","defineProperty","obj","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","call","TypeError","Number","useMultiInputValue","_ref","inputs","defaultValues","callback","values","setValues","useState","createDefaultValues","reduce","id","onChange","updatedValues"],"sources":["../../../../../src/components/input-masked/hooks/useMultiInputValues.ts"],"sourcesContent":["import { useState } from 'react'\nimport {\n  MultiInputMaskProps,\n  MultiInputMaskValue,\n} from '../MultiInputMask'\n\ntype SteppedValuesHook<T extends string> = {\n  inputs: MultiInputMaskProps<T>['inputs']\n  defaultValues?: MultiInputMaskProps<T>['values']\n  callback?: (values: MultiInputMaskProps<T>['values']) => void\n}\n\nexport function useMultiInputValue<T extends string>({\n  inputs,\n  defaultValues,\n  callback,\n}: SteppedValuesHook<T>) {\n  const [values, setValues] = useState<MultiInputMaskValue<T>>(\n    defaultValues ? defaultValues : createDefaultValues()\n  )\n\n  function createDefaultValues() {\n    return inputs.reduce((values, input) => {\n      values[input.id] = ''\n\n      return values\n    }, {} as MultiInputMaskValue<T>)\n  }\n\n  function onChange(id: string, value: string) {\n    const updatedValues = { ...values, [id]: value }\n\n    setValues(updatedValues)\n    if (callback) {\n      callback(updatedValues)\n    }\n  }\n\n  return [values, onChange] as const\n}\n"],"mappings":"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"}

package/cjs/components/input-masked/index.d.ts

@@ -5,3 +5,5 @@
 import InputMasked from './InputMasked';
 export default InputMasked;
 export * from './InputMasked';
+export { default as MultiInputMask } from './MultiInputMask';
+export * from './MultiInputMask';

package/cjs/components/input-masked/index.js

@@ -3,7 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
+var _exportNames = {
+  MultiInputMask: true
+};
+Object.defineProperty(exports, "MultiInputMask", {
+  enumerable: true,
+  get: function () {
+    return _MultiInputMask.default;
+  }
+});
 exports.default = void 0;
 var _InputMasked = _interopRequireWildcard(require("./InputMasked"));
 Object.keys(_InputMasked).forEach(function (key) {
@@ -17,6 +25,18 @@ Object.keys(_InputMasked).forEach(function (key) {
     }
   });
 });
+var _MultiInputMask = _interopRequireWildcard(require("./MultiInputMask"));
+Object.keys(_MultiInputMask).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _MultiInputMask[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MultiInputMask[key];
+    }
+  });
+});
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var _default = _InputMasked.default;

package/cjs/components/input-masked/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_InputMasked","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set","_default","InputMasked"],"sources":["../../../../src/components/input-masked/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport InputMasked from './InputMasked'\nexport default InputMasked\nexport * from './InputMasked'\n"],"mappings":";;;;;;;AAKA,IAAAA,YAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEAC,MAAA,CAAAC,IAAA,CAAAJ,YAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,YAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,YAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAA6B,SAAAS,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAf,wBAAAmB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAT,GAAA,CAAAM,GAAA,SAAAK,MAAA,WAAAC,qBAAA,GAAAvB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAwB,wBAAA,WAAArB,GAAA,IAAAc,GAAA,QAAAd,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAW,GAAA,EAAAd,GAAA,SAAAsB,IAAA,GAAAF,qBAAA,GAAAvB,MAAA,CAAAwB,wBAAA,CAAAP,GAAA,EAAAd,GAAA,cAAAsB,IAAA,KAAAA,IAAA,CAAAd,GAAA,IAAAc,IAAA,CAAAC,GAAA,KAAA1B,MAAA,CAAAS,cAAA,CAAAa,MAAA,EAAAnB,GAAA,EAAAsB,IAAA,YAAAH,MAAA,CAAAnB,GAAA,IAAAc,GAAA,CAAAd,GAAA,SAAAmB,MAAA,CAAAH,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAM,GAAA,CAAAT,GAAA,EAAAK,MAAA,YAAAA,MAAA;AAAA,IAAAK,QAAA,GADdC,oBAAW;AAAApB,OAAA,CAAAW,OAAA,GAAAQ,QAAA"}
+{"version":3,"file":"index.js","names":["_InputMasked","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_MultiInputMask","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","newObj","hasPropertyDescriptor","getOwnPropertyDescriptor","desc","set","_default","InputMasked"],"sources":["../../../../src/components/input-masked/index.ts"],"sourcesContent":["/**\n * Component Entry\n *\n */\n\nimport InputMasked from './InputMasked'\nexport default InputMasked\nexport * from './InputMasked'\n\nexport { default as MultiInputMask } from './MultiInputMask'\nexport * from './MultiInputMask'\n"],"mappings":";;;;;;;;;;;;;;;AAKA,IAAAA,YAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEAC,MAAA,CAAAC,IAAA,CAAAJ,YAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,YAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAd,YAAA,CAAAM,GAAA;IAAA;EAAA;AAAA;AAEA,IAAAS,eAAA,GAAAd,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAW,eAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,eAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,eAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AAAgC,SAAAU,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAhB,wBAAAoB,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAV,GAAA,CAAAO,GAAA,SAAAK,MAAA,WAAAC,qBAAA,GAAAxB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAyB,wBAAA,WAAAtB,GAAA,IAAAe,GAAA,QAAAf,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAY,GAAA,EAAAf,GAAA,SAAAuB,IAAA,GAAAF,qBAAA,GAAAxB,MAAA,CAAAyB,wBAAA,CAAAP,GAAA,EAAAf,GAAA,cAAAuB,IAAA,KAAAA,IAAA,CAAAf,GAAA,IAAAe,IAAA,CAAAC,GAAA,KAAA3B,MAAA,CAAAS,cAAA,CAAAc,MAAA,EAAApB,GAAA,EAAAuB,IAAA,YAAAH,MAAA,CAAApB,GAAA,IAAAe,GAAA,CAAAf,GAAA,SAAAoB,MAAA,CAAAH,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAM,GAAA,CAAAT,GAAA,EAAAK,MAAA,YAAAA,MAAA;AAAA,IAAAK,QAAA,GAJjBC,oBAAW;AAAArB,OAAA,CAAAY,OAAA,GAAAQ,QAAA"}

package/cjs/components/input-masked/style/dnb-input-masked.css

@@ -7,4 +7,61 @@
  */
 .dnb-input-masked--guide {
   font-family: var(--font-family-monospace);
+}
+
+.dnb-multi-input-mask__fieldset {
+  margin: 0;
+  padding: 0;
+  border: none;
+}
+.dnb-multi-input-mask__fieldset--horizontal {
+  display: inline-flex;
+  flex-flow: row wrap;
+  align-items: baseline;
+  grid-gap: 1rem;
+  gap: 1rem;
+}
+
+.dnb-multi-input-mask__input {
+  display: inline-block;
+  width: auto;
+  margin: 0;
+  padding: 0 0.125rem;
+  transform: translateY(0);
+  outline: none;
+  font-family: var(--font-family-monospace);
+  text-align: center;
+  border: none;
+  background: transparent;
+  overflow: visible;
+  white-space: nowrap;
+}
+.dnb-multi-input-mask__input:first-of-type {
+  padding-left: 0.5rem;
+}
+.dnb-multi-input-mask__input:last-of-type {
+  padding-right: 0.5rem;
+}
+
+.dnb-multi-input-mask {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter {
+  color: var(--color-black-55);
+}
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight,
+.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight {
+  color: var(--color-black);
+}
+.dnb-multi-input-mask .dnb-input__shell:focus-within {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
+}
+
+.dnb-multi-input-mask__legend--horizontal.dnb-form-label {
+  display: contents;
+}
+.dnb-multi-input-mask__legend:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
+  box-shadow: 0 0 0 var(--input-border-width--focus) var(--input-border-color--hover);
 }

package/cjs/components/input-masked/style/dnb-input-masked.min.css

@@ -1 +1 @@
-.dnb-input-masked--guide{font-family:var(--font-family-monospace)}
+.dnb-input-masked--guide{font-family:var(--font-family-monospace)}.dnb-multi-input-mask__fieldset{border:none;margin:0;padding:0}.dnb-multi-input-mask__fieldset--horizontal{grid-gap:1rem;align-items:baseline;display:inline-flex;flex-flow:row wrap;gap:1rem}.dnb-multi-input-mask__input{background:transparent;border:none;display:inline-block;font-family:var(--font-family-monospace);margin:0;outline:none;overflow:visible;padding:0 .125rem;text-align:center;transform:translateY(0);white-space:nowrap;width:auto}.dnb-multi-input-mask__input:first-of-type{padding-left:.5rem}.dnb-multi-input-mask__input:last-of-type{padding-right:.5rem}.dnb-multi-input-mask{width:-moz-fit-content;width:fit-content}.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter,.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input{color:var(--color-black-55)}.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__delimiter--highlight,.dnb-multi-input-mask:not(.dnb-input__status--error) .dnb-multi-input-mask__input--highlight{color:var(--color-black)}.dnb-multi-input-mask .dnb-input__shell:focus-within{box-shadow:0 0 0 var(--input-border-width--focus) var(--input-border-color--hover)}.dnb-multi-input-mask__legend--horizontal.dnb-form-label{display:contents}.dnb-multi-input-mask__legend:not([disabled]):hover~.dnb-multi-input-mask .dnb-input__shell{box-shadow:0 0 0 var(--input-border-width--focus) var(--input-border-color--hover)}

package/cjs/components/input-masked/style/dnb-input-masked.scss

@@ -10,3 +10,76 @@
     font-family: var(--font-family-monospace);
   }
 }
+
+// MultiInputMask
+.dnb-multi-input-mask__fieldset {
+  @include fieldsetReset();
+
+  &--horizontal {
+    display: inline-flex;
+    flex-flow: row wrap;
+    align-items: baseline;
+    // Adds the 1rem space between legend and input wrapper, as the `display: contents` in .dnb-multi-input-mask__legend makes the margins from .dnb-form-label not apply
+    gap: 1rem;
+  }
+}
+
+.dnb-multi-input-mask__input {
+  display: inline-block;
+  width: auto;
+
+  margin: 0;
+  padding: 0 0.125rem;
+
+  // reset vertical alignment
+  transform: translateY(0);
+
+  outline: none;
+
+  font-family: var(--font-family-monospace);
+  text-align: center;
+  border: none;
+  background: transparent;
+
+  overflow: visible;
+  white-space: nowrap;
+
+  &:first-of-type {
+    padding-left: 0.5rem;
+  }
+
+  &:last-of-type {
+    padding-right: 0.5rem;
+  }
+}
+
+.dnb-multi-input-mask {
+  width: fit-content;
+
+  &:not(.dnb-input__status--error) {
+    .dnb-multi-input-mask__input,
+    .dnb-multi-input-mask__delimiter {
+      color: var(--color-black-55);
+
+      &--highlight {
+        color: var(--color-black);
+      }
+    }
+  }
+
+  .dnb-input__shell:focus-within {
+    box-shadow: 0 0 0 var(--input-border-width--focus)
+      var(--input-border-color--hover);
+  }
+}
+
+.dnb-multi-input-mask__legend {
+  &--horizontal.dnb-form-label {
+    display: contents;
+  }
+
+  &:not([disabled]):hover ~ .dnb-multi-input-mask .dnb-input__shell {
+    box-shadow: 0 0 0 var(--input-border-width--focus)
+      var(--input-border-color--hover);
+  }
+}

package/cjs/components/lib.d.ts

@@ -118,7 +118,7 @@ export declare const getComponents: () => {
         _supportsSpacingProps: boolean;
     };
     Input: typeof Input;
-    InputMasked: import("react").FC<import("./input-masked/InputMasked").InputMaskedProps>;
+    InputMasked: any;
     Logo: typeof Logo;
     Modal: typeof import("./modal/Modal").OriginalComponent;
     NumberFormat: typeof NumberFormat;