@transferwise/components 46.94.2 → 46.95.1

package/build/withDisplayFormat/WithDisplayFormat.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var historyNavigator = require('../common/historyNavigator/historyNavigator.js');
 require('../common/theme.js');
@@ -60,10 +62,10 @@ class WithDisplayFormat extends React__namespace.Component {
   };
   constructor(props) {
     super(props);
-    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);
+    const unformattedValue = unformatWithPattern.default(props.value ?? '', props.displayPattern);
     this.state = {
-      value: formatWithPattern(unformattedValue, props.displayPattern),
-      historyNavigator: new historyNavigator(),
+      value: formatWithPattern.default(unformattedValue, props.displayPattern),
+      historyNavigator: new historyNavigator.default(),
       prevDisplayPattern: props.displayPattern,
       triggerType: 'Initial',
       triggerEvent: null,
@@ -80,11 +82,11 @@ class WithDisplayFormat extends React__namespace.Component {
     historyNavigator
   }) {
     if (prevDisplayPattern !== displayPattern) {
-      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);
+      const unFormattedValue = unformatWithPattern.default(value, prevDisplayPattern);
       historyNavigator.reset();
       return {
         prevDisplayPattern: displayPattern,
-        value: formatWithPattern(unFormattedValue, displayPattern),
+        value: formatWithPattern.default(unFormattedValue, displayPattern),
         triggerType: null,
         triggerEvent: null,
         pastedLength: 0
@@ -114,7 +116,7 @@ class WithDisplayFormat extends React__namespace.Component {
         return 'Delete';
       }
       // Android Fix.
-      if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern(value, displayPattern).length) {
+      if (typeof triggerEvent.key === 'undefined' && unformattedValue.length <= unformatWithPattern.default(value, displayPattern).length) {
         return 'Backspace';
       }
       return triggerEvent.key;
@@ -151,13 +153,13 @@ class WithDisplayFormat extends React__namespace.Component {
     // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.
     let newFormattedValue = '';
     if (this.detectUndoRedo(event) === 'Undo') {
-      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);
+      newFormattedValue = formatWithPattern.default(historyNavigator.undo().toString(), displayPattern);
       this.setState({
         value: newFormattedValue,
         triggerType: 'Undo'
       });
     } else if (this.detectUndoRedo(event) === 'Redo') {
-      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);
+      newFormattedValue = formatWithPattern.default(historyNavigator.redo().toString(), displayPattern);
       this.setState({
         value: newFormattedValue,
         triggerType: 'Redo'
@@ -175,7 +177,7 @@ class WithDisplayFormat extends React__namespace.Component {
     const {
       displayPattern
     } = this.props;
-    const pastedLength = unformatWithPattern(event.clipboardData.getData('Text'), displayPattern).length;
+    const pastedLength = unformatWithPattern.default(event.clipboardData.getData('Text'), displayPattern).length;
     this.setState({
       triggerType: 'Paste',
       pastedLength
@@ -205,7 +207,7 @@ class WithDisplayFormat extends React__namespace.Component {
     const {
       value
     } = event.target;
-    let unformattedValue = unformatWithPattern(value, displayPattern);
+    let unformattedValue = unformatWithPattern.default(value, displayPattern);
     const action = this.getUserAction(unformattedValue);
     if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {
       return;
@@ -213,7 +215,7 @@ class WithDisplayFormat extends React__namespace.Component {
     if (action === 'Backspace' || action === 'Delete') {
       unformattedValue = this.handleDelete(unformattedValue, action);
     }
-    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);
+    const newFormattedValue = formatWithPattern.default(unformattedValue, displayPattern);
     historyNavigator.add(unformattedValue);
     this.handleCursorPositioning(action);
     this.setState({
@@ -221,13 +223,13 @@ class WithDisplayFormat extends React__namespace.Component {
     }, () => {
       this.resetEvent();
       if (onChange) {
-        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);
+        const broadcastValue = unformatWithPattern.default(newFormattedValue, displayPattern);
         onChange(broadcastValue);
       }
     });
   };
   handleOnBlur = event => {
-    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));
+    this.props.onBlur?.(unformatWithPattern.default(event.target.value, this.props.displayPattern));
   };
   handleOnFocus = event => {
     const {
@@ -236,7 +238,7 @@ class WithDisplayFormat extends React__namespace.Component {
     } = this.props;
     if (onFocus) {
       this.handleOnChange(event);
-      onFocus(unformatWithPattern(event.target.value, displayPattern));
+      onFocus(unformatWithPattern.default(event.target.value, displayPattern));
     }
   };
   handleDelete = (unformattedValue, action) => {
@@ -249,7 +251,7 @@ class WithDisplayFormat extends React__namespace.Component {
     } = this.state;
     const newStack = [...unformattedValue];
     if (selectionStart === selectionEnd) {
-      let startPosition = selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);
+      let startPosition = selectionStart - getCountOfSymbolsInSelection.default(0, selectionStart, displayPattern);
       let toDelete = 0;
       let count = getDistanceToSymbol.getDistanceToNextSymbol(selectionStart, displayPattern);
       if (action === 'Backspace') {
@@ -274,7 +276,7 @@ class WithDisplayFormat extends React__namespace.Component {
       pastedLength
     } = this.state;
     const target = triggerEvent?.currentTarget;
-    const cursorPosition = getCursorPositionAfterKeystroke(action, selectionStart, selectionEnd, displayPattern, pastedLength);
+    const cursorPosition = getCursorPositionAfterKeystroke.default(action, selectionStart, selectionEnd, displayPattern, pastedLength);
     setTimeout(() => {
       target?.setSelectionRange(cursorPosition, cursorPosition);
       this.setState({
@@ -324,5 +326,5 @@ class WithDisplayFormat extends React__namespace.Component {
   }
 }
 
-module.exports = WithDisplayFormat;
+exports.default = WithDisplayFormat;
 //# sourceMappingURL=WithDisplayFormat.js.map

package/build/withDisplayFormat/WithDisplayFormat.js.map

@@ -1 +1 @@
-{"version":3,"file":"WithDisplayFormat.js","sources":["../../src/withDisplayFormat/WithDisplayFormat.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { HistoryNavigator } from '../common';\nimport {\n  formatWithPattern,\n  getCountOfSymbolsInSelection,\n  getCursorPositionAfterKeystroke,\n  unformatWithPattern,\n  getDistanceToPreviousSymbol,\n  getDistanceToNextSymbol,\n} from '../common/textFormat';\nimport { InputProps } from '../inputs/Input';\nimport { TextAreaProps } from '../inputs/TextArea';\n\ntype HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;\ntype TextElementProps = InputProps | TextAreaProps;\n\nexport type EventType =\n  | 'KeyDown'\n  | 'Paste'\n  | 'Cut'\n  | 'Undo'\n  | 'Redo'\n  | 'Backspace'\n  | 'Delete'\n  | 'Initial';\n\ninterface WithDisplayFormatState {\n  value: string;\n  historyNavigator: HistoryNavigator;\n  prevDisplayPattern: string;\n  triggerType: EventType;\n  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;\n  pastedLength: number;\n  selectionStart: number;\n  selectionEnd: number;\n}\n\nexport interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>\n  extends Pick<\n    TextElementProps,\n    | 'className'\n    | 'disabled'\n    | 'id'\n    | 'maxLength'\n    | 'minLength'\n    | 'name'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'inputMode'\n  > {\n  value?: string;\n  displayPattern: string;\n  /**\n   * autocomplete hides our form help so we need to disable it when help text\n   * is present. Chrome ignores autocomplete=off, the only way to disable it is\n   * to provide an 'invalid' value, for which 'disabled' serves.\n   */\n  autoComplete?: TextElementProps['autoComplete'] | 'disabled';\n  onChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  onFocus?: (value: string) => void;\n  render: (renderProps: T) => React.JSX.Element;\n}\n\nclass WithDisplayFormat<T extends TextElementProps> extends React.Component<\n  WithDisplayFormatProps<T>,\n  WithDisplayFormatState\n> {\n  declare props: WithDisplayFormatProps<T> &\n    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;\n  static defaultProps = {\n    autoComplete: 'off',\n    displayPattern: '',\n    value: '',\n  };\n\n  constructor(props: WithDisplayFormatProps) {\n    super(props);\n    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);\n    this.state = {\n      value: formatWithPattern(unformattedValue, props.displayPattern),\n      historyNavigator: new HistoryNavigator(),\n      prevDisplayPattern: props.displayPattern,\n      triggerType: 'Initial',\n      triggerEvent: null,\n      selectionStart: 0,\n      selectionEnd: 0,\n      pastedLength: 0,\n    };\n  }\n\n  static getDerivedStateFromProps(\n    { displayPattern }: WithDisplayFormatProps,\n    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,\n  ) {\n    if (prevDisplayPattern !== displayPattern) {\n      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);\n      historyNavigator.reset();\n\n      return {\n        prevDisplayPattern: displayPattern,\n        value: formatWithPattern(unFormattedValue, displayPattern),\n        triggerType: null,\n        triggerEvent: null,\n        pastedLength: 0,\n      };\n    }\n    return null;\n  }\n\n  getUserAction = (unformattedValue: string): EventType | string => {\n    const { triggerEvent, triggerType, value } = this.state;\n    const { displayPattern } = this.props;\n\n    if (triggerEvent) {\n      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();\n\n      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && charCode === 'd') {\n        return 'Delete';\n      }\n\n      // Android Fix.\n      if (\n        typeof triggerEvent.key === 'undefined' &&\n        unformattedValue.length <= unformatWithPattern(value, displayPattern).length\n      ) {\n        return 'Backspace';\n      }\n      return triggerEvent.key;\n    }\n    // triggerEvent can be null only in case of \"autofilling\" (via password manager extension or browser build-in one) events\n    return 'Paste';\n  };\n\n  resetEvent = () => {\n    this.setState({\n      triggerType: 'Initial',\n      triggerEvent: null,\n      pastedLength: 0,\n    });\n  };\n\n  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {\n    const charCode = String.fromCharCode(event.which).toLowerCase();\n    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {\n      return event.shiftKey ? 'Redo' : 'Undo';\n    }\n    return null;\n  };\n\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {\n    event.persist();\n    const { selectionStart, selectionEnd } = event.currentTarget;\n    const { historyNavigator } = this.state;\n    const { displayPattern } = this.props;\n\n    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.\n    let newFormattedValue = '';\n\n    if (this.detectUndoRedo(event) === 'Undo') {\n      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Undo' });\n    } else if (this.detectUndoRedo(event) === 'Redo') {\n      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Redo' });\n    } else {\n      this.setState({\n        triggerEvent: event,\n        triggerType: 'KeyDown',\n        selectionStart: selectionStart ?? 0,\n        selectionEnd: selectionEnd ?? 0,\n      });\n    }\n  };\n\n  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern } = this.props;\n    const pastedLength = unformatWithPattern(\n      event.clipboardData.getData('Text'),\n      displayPattern,\n    ).length;\n\n    this.setState({ triggerType: 'Paste', pastedLength });\n  };\n\n  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {\n    this.setState({ triggerType: 'Cut' });\n  };\n\n  isKeyAllowed = (action: EventType | string) => {\n    const { displayPattern } = this.props;\n    const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');\n\n    return !symbolsInPattern.includes(action);\n  };\n\n  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {\n    const { historyNavigator, triggerType } = this.state;\n    const { displayPattern, onChange } = this.props;\n    const { value } = event.target;\n    let unformattedValue = unformatWithPattern(value, displayPattern);\n    const action = this.getUserAction(unformattedValue);\n    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {\n      return;\n    }\n\n    if (action === 'Backspace' || action === 'Delete') {\n      unformattedValue = this.handleDelete(unformattedValue, action);\n    }\n\n    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);\n    historyNavigator.add(unformattedValue);\n\n    this.handleCursorPositioning(action);\n\n    this.setState({ value: newFormattedValue }, () => {\n      this.resetEvent();\n      if (onChange) {\n        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);\n        onChange(broadcastValue);\n      }\n    });\n  };\n\n  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));\n  };\n\n  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern, onFocus } = this.props;\n    if (onFocus) {\n      this.handleOnChange(event);\n      onFocus(unformatWithPattern(event.target.value, displayPattern));\n    }\n  };\n\n  handleDelete = (unformattedValue: string, action: EventType) => {\n    const { displayPattern } = this.props;\n    const { selectionStart, selectionEnd } = this.state;\n    const newStack = [...unformattedValue];\n    if (selectionStart === selectionEnd) {\n      let startPosition =\n        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);\n      let toDelete = 0;\n\n      let count = getDistanceToNextSymbol(selectionStart, displayPattern);\n      if (action === 'Backspace') {\n        startPosition -= 1;\n        count = getDistanceToPreviousSymbol(selectionStart, displayPattern);\n      }\n\n      if (startPosition >= 0 && count) {\n        toDelete = 1;\n      }\n\n      newStack.splice(startPosition, toDelete);\n    }\n\n    return newStack.join('');\n  };\n\n  handleCursorPositioning = (action: string) => {\n    const { displayPattern } = this.props;\n    const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;\n    const target = triggerEvent?.currentTarget;\n\n    const cursorPosition = getCursorPositionAfterKeystroke(\n      action,\n      selectionStart,\n      selectionEnd,\n      displayPattern,\n      pastedLength,\n    );\n\n    setTimeout(() => {\n      target?.setSelectionRange(cursorPosition, cursorPosition);\n      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });\n    }, 0);\n  };\n\n  render() {\n    const {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n    } = this.props;\n    const { value } = this.state;\n    const renderProps: TextElementProps = {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n      value,\n      onFocus: this.handleOnFocus,\n      onBlur: this.handleOnBlur,\n      onPaste: this.handleOnPaste,\n      onKeyDown: this.handleOnKeyDown,\n      onChange: this.handleOnChange,\n      onCut: this.handleOnCut,\n    };\n    return this.props.render(renderProps as T);\n  }\n}\n\nexport default WithDisplayFormat;\n"],"names":["WithDisplayFormat","React","Component","defaultProps","autoComplete","displayPattern","value","constructor","props","unformattedValue","unformatWithPattern","state","formatWithPattern","historyNavigator","HistoryNavigator","prevDisplayPattern","triggerType","triggerEvent","selectionStart","selectionEnd","pastedLength","getDerivedStateFromProps","unFormattedValue","reset","getUserAction","charCode","String","fromCharCode","which","toLowerCase","ctrlKey","metaKey","shiftKey","key","length","resetEvent","setState","detectUndoRedo","event","handleOnKeyDown","persist","currentTarget","newFormattedValue","undo","toString","redo","handleOnPaste","clipboardData","getData","handleOnCut","isKeyAllowed","action","symbolsInPattern","split","filter","character","includes","handleOnChange","onChange","target","handleDelete","add","handleCursorPositioning","broadcastValue","handleOnBlur","onBlur","handleOnFocus","onFocus","newStack","startPosition","getCountOfSymbolsInSelection","toDelete","count","getDistanceToNextSymbol","getDistanceToPreviousSymbol","splice","join","cursorPosition","getCursorPositionAfterKeystroke","setTimeout","setSelectionRange","render","inputMode","className","id","name","placeholder","readOnly","required","minLength","maxLength","disabled","renderProps","onPaste","onKeyDown","onCut"],"mappings":"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"}
+{"version":3,"file":"WithDisplayFormat.js","sources":["../../src/withDisplayFormat/WithDisplayFormat.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { HistoryNavigator } from '../common';\nimport {\n  formatWithPattern,\n  getCountOfSymbolsInSelection,\n  getCursorPositionAfterKeystroke,\n  unformatWithPattern,\n  getDistanceToPreviousSymbol,\n  getDistanceToNextSymbol,\n} from '../common/textFormat';\nimport { InputProps } from '../inputs/Input';\nimport { TextAreaProps } from '../inputs/TextArea';\n\ntype HTMLTextElement = HTMLInputElement | HTMLTextAreaElement;\ntype TextElementProps = InputProps | TextAreaProps;\n\nexport type EventType =\n  | 'KeyDown'\n  | 'Paste'\n  | 'Cut'\n  | 'Undo'\n  | 'Redo'\n  | 'Backspace'\n  | 'Delete'\n  | 'Initial';\n\ninterface WithDisplayFormatState {\n  value: string;\n  historyNavigator: HistoryNavigator;\n  prevDisplayPattern: string;\n  triggerType: EventType;\n  triggerEvent: React.KeyboardEvent<HTMLTextElement> | null;\n  pastedLength: number;\n  selectionStart: number;\n  selectionEnd: number;\n}\n\nexport interface WithDisplayFormatProps<T extends TextElementProps = TextElementProps>\n  extends Pick<\n    TextElementProps,\n    | 'className'\n    | 'disabled'\n    | 'id'\n    | 'maxLength'\n    | 'minLength'\n    | 'name'\n    | 'placeholder'\n    | 'readOnly'\n    | 'required'\n    | 'inputMode'\n  > {\n  value?: string;\n  displayPattern: string;\n  /**\n   * autocomplete hides our form help so we need to disable it when help text\n   * is present. Chrome ignores autocomplete=off, the only way to disable it is\n   * to provide an 'invalid' value, for which 'disabled' serves.\n   */\n  autoComplete?: TextElementProps['autoComplete'] | 'disabled';\n  onChange?: (value: string) => void;\n  onBlur?: (value: string) => void;\n  onFocus?: (value: string) => void;\n  render: (renderProps: T) => React.JSX.Element;\n}\n\nclass WithDisplayFormat<T extends TextElementProps> extends React.Component<\n  WithDisplayFormatProps<T>,\n  WithDisplayFormatState\n> {\n  declare props: WithDisplayFormatProps<T> &\n    Required<Pick<WithDisplayFormatProps<T>, keyof typeof WithDisplayFormat.defaultProps>>;\n  static defaultProps = {\n    autoComplete: 'off',\n    displayPattern: '',\n    value: '',\n  };\n\n  constructor(props: WithDisplayFormatProps) {\n    super(props);\n    const unformattedValue = unformatWithPattern(props.value ?? '', props.displayPattern);\n    this.state = {\n      value: formatWithPattern(unformattedValue, props.displayPattern),\n      historyNavigator: new HistoryNavigator(),\n      prevDisplayPattern: props.displayPattern,\n      triggerType: 'Initial',\n      triggerEvent: null,\n      selectionStart: 0,\n      selectionEnd: 0,\n      pastedLength: 0,\n    };\n  }\n\n  static getDerivedStateFromProps(\n    { displayPattern }: WithDisplayFormatProps,\n    { prevDisplayPattern = displayPattern, value, historyNavigator }: WithDisplayFormatState,\n  ) {\n    if (prevDisplayPattern !== displayPattern) {\n      const unFormattedValue = unformatWithPattern(value, prevDisplayPattern);\n      historyNavigator.reset();\n\n      return {\n        prevDisplayPattern: displayPattern,\n        value: formatWithPattern(unFormattedValue, displayPattern),\n        triggerType: null,\n        triggerEvent: null,\n        pastedLength: 0,\n      };\n    }\n    return null;\n  }\n\n  getUserAction = (unformattedValue: string): EventType | string => {\n    const { triggerEvent, triggerType, value } = this.state;\n    const { displayPattern } = this.props;\n\n    if (triggerEvent) {\n      const charCode = String.fromCharCode(triggerEvent.which).toLowerCase();\n\n      if (triggerType === 'Paste' || triggerType === 'Cut') {\n        return triggerType;\n      }\n\n      if ((triggerEvent.ctrlKey || triggerEvent.metaKey) && charCode === 'z') {\n        return triggerEvent.shiftKey ? 'Redo' : 'Undo';\n      }\n      // Detect mouse event redo\n      if (triggerEvent.ctrlKey && charCode === 'd') {\n        return 'Delete';\n      }\n\n      // Android Fix.\n      if (\n        typeof triggerEvent.key === 'undefined' &&\n        unformattedValue.length <= unformatWithPattern(value, displayPattern).length\n      ) {\n        return 'Backspace';\n      }\n      return triggerEvent.key;\n    }\n    // triggerEvent can be null only in case of \"autofilling\" (via password manager extension or browser build-in one) events\n    return 'Paste';\n  };\n\n  resetEvent = () => {\n    this.setState({\n      triggerType: 'Initial',\n      triggerEvent: null,\n      pastedLength: 0,\n    });\n  };\n\n  detectUndoRedo = (event: React.KeyboardEvent<HTMLTextElement>) => {\n    const charCode = String.fromCharCode(event.which).toLowerCase();\n    if ((event.ctrlKey || event.metaKey) && charCode === 'z') {\n      return event.shiftKey ? 'Redo' : 'Undo';\n    }\n    return null;\n  };\n\n  handleOnKeyDown: React.KeyboardEventHandler<HTMLTextElement> = (event) => {\n    event.persist();\n    const { selectionStart, selectionEnd } = event.currentTarget;\n    const { historyNavigator } = this.state;\n    const { displayPattern } = this.props;\n\n    // Unfortunately Undo and Redo don't trigger OnChange event so we need to handle some value logic here.\n    let newFormattedValue = '';\n\n    if (this.detectUndoRedo(event) === 'Undo') {\n      newFormattedValue = formatWithPattern(historyNavigator.undo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Undo' });\n    } else if (this.detectUndoRedo(event) === 'Redo') {\n      newFormattedValue = formatWithPattern(historyNavigator.redo().toString(), displayPattern);\n      this.setState({ value: newFormattedValue, triggerType: 'Redo' });\n    } else {\n      this.setState({\n        triggerEvent: event,\n        triggerType: 'KeyDown',\n        selectionStart: selectionStart ?? 0,\n        selectionEnd: selectionEnd ?? 0,\n      });\n    }\n  };\n\n  handleOnPaste: React.ClipboardEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern } = this.props;\n    const pastedLength = unformatWithPattern(\n      event.clipboardData.getData('Text'),\n      displayPattern,\n    ).length;\n\n    this.setState({ triggerType: 'Paste', pastedLength });\n  };\n\n  handleOnCut: React.ClipboardEventHandler<HTMLTextElement> = () => {\n    this.setState({ triggerType: 'Cut' });\n  };\n\n  isKeyAllowed = (action: EventType | string) => {\n    const { displayPattern } = this.props;\n    const symbolsInPattern = displayPattern.split('').filter((character) => character !== '*');\n\n    return !symbolsInPattern.includes(action);\n  };\n\n  handleOnChange: React.ChangeEventHandler<HTMLTextElement> = (event) => {\n    const { historyNavigator, triggerType } = this.state;\n    const { displayPattern, onChange } = this.props;\n    const { value } = event.target;\n    let unformattedValue = unformatWithPattern(value, displayPattern);\n    const action = this.getUserAction(unformattedValue);\n    if (!this.isKeyAllowed(action) || triggerType === 'Undo' || triggerType === 'Redo') {\n      return;\n    }\n\n    if (action === 'Backspace' || action === 'Delete') {\n      unformattedValue = this.handleDelete(unformattedValue, action);\n    }\n\n    const newFormattedValue = formatWithPattern(unformattedValue, displayPattern);\n    historyNavigator.add(unformattedValue);\n\n    this.handleCursorPositioning(action);\n\n    this.setState({ value: newFormattedValue }, () => {\n      this.resetEvent();\n      if (onChange) {\n        const broadcastValue = unformatWithPattern(newFormattedValue, displayPattern);\n        onChange(broadcastValue);\n      }\n    });\n  };\n\n  handleOnBlur: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    this.props.onBlur?.(unformatWithPattern(event.target.value, this.props.displayPattern));\n  };\n\n  handleOnFocus: React.FocusEventHandler<HTMLTextElement> = (event) => {\n    const { displayPattern, onFocus } = this.props;\n    if (onFocus) {\n      this.handleOnChange(event);\n      onFocus(unformatWithPattern(event.target.value, displayPattern));\n    }\n  };\n\n  handleDelete = (unformattedValue: string, action: EventType) => {\n    const { displayPattern } = this.props;\n    const { selectionStart, selectionEnd } = this.state;\n    const newStack = [...unformattedValue];\n    if (selectionStart === selectionEnd) {\n      let startPosition =\n        selectionStart - getCountOfSymbolsInSelection(0, selectionStart, displayPattern);\n      let toDelete = 0;\n\n      let count = getDistanceToNextSymbol(selectionStart, displayPattern);\n      if (action === 'Backspace') {\n        startPosition -= 1;\n        count = getDistanceToPreviousSymbol(selectionStart, displayPattern);\n      }\n\n      if (startPosition >= 0 && count) {\n        toDelete = 1;\n      }\n\n      newStack.splice(startPosition, toDelete);\n    }\n\n    return newStack.join('');\n  };\n\n  handleCursorPositioning = (action: string) => {\n    const { displayPattern } = this.props;\n    const { triggerEvent, selectionStart, selectionEnd, pastedLength } = this.state;\n    const target = triggerEvent?.currentTarget;\n\n    const cursorPosition = getCursorPositionAfterKeystroke(\n      action,\n      selectionStart,\n      selectionEnd,\n      displayPattern,\n      pastedLength,\n    );\n\n    setTimeout(() => {\n      target?.setSelectionRange(cursorPosition, cursorPosition);\n      this.setState({ selectionStart: cursorPosition, selectionEnd: cursorPosition });\n    }, 0);\n  };\n\n  render() {\n    const {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n    } = this.props;\n    const { value } = this.state;\n    const renderProps: TextElementProps = {\n      inputMode,\n      className,\n      id,\n      name,\n      placeholder,\n      readOnly,\n      required,\n      minLength,\n      maxLength,\n      disabled,\n      autoComplete,\n      value,\n      onFocus: this.handleOnFocus,\n      onBlur: this.handleOnBlur,\n      onPaste: this.handleOnPaste,\n      onKeyDown: this.handleOnKeyDown,\n      onChange: this.handleOnChange,\n      onCut: this.handleOnCut,\n    };\n    return this.props.render(renderProps as T);\n  }\n}\n\nexport default WithDisplayFormat;\n"],"names":["WithDisplayFormat","React","Component","defaultProps","autoComplete","displayPattern","value","constructor","props","unformattedValue","unformatWithPattern","state","formatWithPattern","historyNavigator","HistoryNavigator","prevDisplayPattern","triggerType","triggerEvent","selectionStart","selectionEnd","pastedLength","getDerivedStateFromProps","unFormattedValue","reset","getUserAction","charCode","String","fromCharCode","which","toLowerCase","ctrlKey","metaKey","shiftKey","key","length","resetEvent","setState","detectUndoRedo","event","handleOnKeyDown","persist","currentTarget","newFormattedValue","undo","toString","redo","handleOnPaste","clipboardData","getData","handleOnCut","isKeyAllowed","action","symbolsInPattern","split","filter","character","includes","handleOnChange","onChange","target","handleDelete","add","handleCursorPositioning","broadcastValue","handleOnBlur","onBlur","handleOnFocus","onFocus","newStack","startPosition","getCountOfSymbolsInSelection","toDelete","count","getDistanceToNextSymbol","getDistanceToPreviousSymbol","splice","join","cursorPosition","getCursorPositionAfterKeystroke","setTimeout","setSelectionRange","render","inputMode","className","id","name","placeholder","readOnly","required","minLength","maxLength","disabled","renderProps","onPaste","onKeyDown","onCut"],"mappings":"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"}

package/build/withId/withId.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -15,5 +17,5 @@ function withId(WrappedComponent) {
   return WithIdComponent;
 }
 
-module.exports = withId;
+exports.default = withId;
 //# sourceMappingURL=withId.js.map

package/build/withId/withId.js.map

@@ -1 +1 @@
-{"version":3,"file":"withId.js","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\ntype ChildProps<Props> = Props & {\n  id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n  id: string;\n};\n\n/**\n * @internal\n * @param {ReactNode} WrappedComponent\n */\nexport default function withId<Props extends object>(\n  WrappedComponent: ComponentType<WithIdProps<Props>>,\n) {\n  function WithIdComponent(props: ChildProps<Props>) {\n    const id = useId();\n\n    return <WrappedComponent {...props} id={props.id || id} />;\n  }\n\n  WithIdComponent.displayName = `withId(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n  return WithIdComponent;\n}\n"],"names":["withId","WrappedComponent","WithIdComponent","props","id","useId","_jsx","displayName","name"],"mappings":";;;;;AAcwB,SAAAA,MAAMA,CAC5BC,gBAAmD,EAAA;EAEnD,SAASC,eAAeA,CAACC,KAAwB,EAAA;AAC/C,IAAA,MAAMC,EAAE,GAAGC,WAAK,EAAE,CAAA;IAElB,oBAAOC,cAAA,CAACL,gBAAgB,EAAA;AAAA,MAAA,GAAKE,KAAK;AAAEC,MAAAA,EAAE,EAAED,KAAK,CAACC,EAAE,IAAIA,EAAAA;AAAG,MAAG,CAAA;AAC5D,GAAA;AAEAF,EAAAA,eAAe,CAACK,WAAW,GAAG,CAAA,OAAA,EAAUN,gBAAgB,CAACM,WAAW,IAAIN,gBAAgB,CAACO,IAAI,IAAI,WAAW,CAAG,CAAA,CAAA,CAAA;AAE/G,EAAA,OAAON,eAAe,CAAA;AACxB;;;;"}
+{"version":3,"file":"withId.js","sources":["../../src/withId/withId.tsx"],"sourcesContent":["import { useId, ComponentType } from 'react';\n\ntype ChildProps<Props> = Props & {\n  id?: string;\n};\n\nexport type WithIdProps<Props> = Props & {\n  id: string;\n};\n\n/**\n * @internal\n * @param {ReactNode} WrappedComponent\n */\nexport default function withId<Props extends object>(\n  WrappedComponent: ComponentType<WithIdProps<Props>>,\n) {\n  function WithIdComponent(props: ChildProps<Props>) {\n    const id = useId();\n\n    return <WrappedComponent {...props} id={props.id || id} />;\n  }\n\n  WithIdComponent.displayName = `withId(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n  return WithIdComponent;\n}\n"],"names":["withId","WrappedComponent","WithIdComponent","props","id","useId","_jsx","displayName","name"],"mappings":";;;;;;;AAcwB,SAAAA,MAAMA,CAC5BC,gBAAmD,EAAA;EAEnD,SAASC,eAAeA,CAACC,KAAwB,EAAA;AAC/C,IAAA,MAAMC,EAAE,GAAGC,WAAK,EAAE,CAAA;IAElB,oBAAOC,cAAA,CAACL,gBAAgB,EAAA;AAAA,MAAA,GAAKE,KAAK;AAAEC,MAAAA,EAAE,EAAED,KAAK,CAACC,EAAE,IAAIA,EAAAA;AAAG,MAAG,CAAA;AAC5D,GAAA;AAEAF,EAAAA,eAAe,CAACK,WAAW,GAAG,CAAA,OAAA,EAAUN,gBAAgB,CAACM,WAAW,IAAIN,gBAAgB,CAACO,IAAI,IAAI,WAAW,CAAG,CAAA,CAAA,CAAA;AAE/G,EAAA,OAAON,eAAe,CAAA;AACxB;;;;"}

package/build/withNextPortal/withNextPortal.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -16,5 +18,5 @@ function withNextPortalWrapper(Component) {
   };
 }
 
-module.exports = withNextPortalWrapper;
+exports.default = withNextPortalWrapper;
 //# sourceMappingURL=withNextPortal.js.map

package/build/withNextPortal/withNextPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"withNextPortal.js","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n  Component: React.ComponentType<T>,\n) {\n  return function (props: T) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n      setMounted(true);\n    }, [setMounted]);\n    return mounted ? createPortal(<Component {...props} />, document.body) : null;\n  };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;;;AAGwB,SAAAA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AAE7CC,IAAAA,eAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAChB,IAAA,OAAOD,OAAO,gBAAGI,qBAAY,eAACC,cAAA,CAACP,SAAS,EAAA;MAAA,GAAKC,KAAAA;AAAK,KAAI,CAAA,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI,CAAA;GAC9E,CAAA;AACH;;;;"}
+{"version":3,"file":"withNextPortal.js","sources":["../../src/withNextPortal/withNextPortal.tsx"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport default function withNextPortalWrapper<T extends Record<string, any>>(\n  Component: React.ComponentType<T>,\n) {\n  return function (props: T) {\n    const [mounted, setMounted] = useState(false);\n\n    useEffect(() => {\n      setMounted(true);\n    }, [setMounted]);\n    return mounted ? createPortal(<Component {...props} />, document.body) : null;\n  };\n}\n"],"names":["withNextPortalWrapper","Component","props","mounted","setMounted","useState","useEffect","createPortal","_jsx","document","body"],"mappings":";;;;;;;;AAGwB,SAAAA,qBAAqBA,CAC3CC,SAAiC,EAAA;EAEjC,OAAO,UAAUC,KAAQ,EAAA;IACvB,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAA;AAE7CC,IAAAA,eAAS,CAAC,MAAK;MACbF,UAAU,CAAC,IAAI,CAAC,CAAA;AAClB,KAAC,EAAE,CAACA,UAAU,CAAC,CAAC,CAAA;AAChB,IAAA,OAAOD,OAAO,gBAAGI,qBAAY,eAACC,cAAA,CAACP,SAAS,EAAA;MAAA,GAAKC,KAAAA;AAAK,KAAI,CAAA,EAAEO,QAAQ,CAACC,IAAI,CAAC,GAAG,IAAI,CAAA;GAC9E,CAAA;AACH;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.94.2",
+  "version": "46.95.1",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -68,7 +68,7 @@
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@transferwise/icons": "^3.19.0",
+    "@transferwise/icons": "^3.19.1",
     "@tsconfig/recommended": "^1.0.7",
     "@types/babel__core": "^7.20.5",
     "@types/commonmark": "^0.27.9",
@@ -80,11 +80,12 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@types/react-transition-group": "4.4.10",
-    "@wise/art": "^2.16.3",
+    "@wise/art": "^2.20.0",
     "@wise/eslint-config": "^12.3.0",
     "babel-plugin-formatjs": "^10.5.16",
     "enzyme": "^3.11.0",
     "eslint": "^9.22.0",
+    "gulp": "^5.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
@@ -93,10 +94,10 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/less-config": "3.1.0",
-    "@wise/wds-configs": "0.0.0",
-    "@transferwise/neptune-css": "14.23.0",
-    "@wise/components-theming": "1.6.1"
+    "@transferwise/less-config": "3.1.1",
+    "@transferwise/neptune-css": "14.24.0",
+    "@wise/components-theming": "1.6.2",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.19.0",
@@ -110,7 +111,6 @@
   "dependencies": {
     "@babel/runtime": "^7.24.8",
     "@floating-ui/react": "^0.25.4",
-    "@formatjs/intl-locale": "^3.4.6",
     "@headlessui/react": "^1.7.19",
     "@popperjs/core": "^2.11.8",
     "@react-aria/focus": "^3.17.1",
@@ -123,7 +123,6 @@
     "core-js": "^3.37.1",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
-    "lodash.topairs": "^4.3.0",
     "merge-props": "^6.0.0",
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",

package/src/badge/Badge.tsx

@@ -11,7 +11,7 @@ import {
   ThemeLight,
   CommonProps,
 } from '../common';
-import { BadgeAssetsProps } from '.';
+import type { BadgeAssetsProps } from '.';
 
 /**
  * @deprecated Use `16` or `24` instead.

package/src/badge/BadgeAssets.tsx

@@ -1,8 +1,8 @@
-import StatusIcon, { StatusIconProps } from '../statusIcon';
+import { Plus } from '@transferwise/icons';
 import { Flag } from '@wise/art';
+import StatusIcon, { StatusIconProps } from '../statusIcon';
 import Circle from '../common/circle';
 import Image from '../image';
-import { Plus } from '@transferwise/icons';
 
 export type Props = {
   status?: StatusIconProps['sentiment'];

package/src/common/Option/Option.css

@@ -110,7 +110,7 @@ button.np-option {
   max-width: fit-content;
 }
 @media (max-width: 480px) {
-  .np-theme-personal .np-option-additional-content {
+  .np-theme-personal :not(.np-option__sm-media) > .np-option-additional-content {
     margin-left: 16px;
     margin-left: var(--size-16);
   }

package/src/common/Option/Option.less

@@ -101,11 +101,11 @@ button.np-option {
       margin-right: var(--size-16);
       margin-top: -10px;
       padding-bottom: var(--size-16);
-      max-width:fit-content
+      max-width:fit-content;
   }
 
   @media (max-width: 480px) {
-    .np-option-additional-content  {
+    :not(.np-option__sm-media) > .np-option-additional-content {
       margin-left: var(--size-16);
     }
   }

package/src/common/Option/Option.tsx

@@ -105,7 +105,7 @@ const Option = forwardRef<ReferenceType, OptionProps>(
           <div className="media-right">{button}</div>
         </div>
         {additionalContent ? (
-          <div className="np-option-additional-content"> {additionalContent} </div>
+          <div className="np-option-additional-content">{additionalContent}</div>
         ) : null}
       </Element>
     );

package/src/common/locale/index.ts

@@ -1,4 +1,4 @@
-import { Direction } from '..';
+import { Direction } from '../direction';
 
 export const DEFAULT_LANG = 'en';
 export const DEFAULT_LOCALE = 'en-GB';

package/src/dateInput/DateInput.tsx

@@ -2,7 +2,13 @@ import { clsx } from 'clsx';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
-import { Body, Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';
+import Body from '../body';
+import { Input } from '../inputs/Input';
+import {
+  SelectInput,
+  SelectInputOptionContent,
+  type SelectInputProps,
+} from '../inputs/SelectInput';
 import {
   DateMode,
   MonthFormat,

package/src/divider/Divider.accessibility.docs.mdx

@@ -0,0 +1,61 @@
+import { Meta, Canvas, Source } from '@storybook/blocks';
+import { NavigationOption } from '..';
+import { Bulb } from '@transferwise/icons';
+
+<Meta title="Layouts/Divider/Accessibility" />
+
+# Accessibility
+
+A Divider is used to separate sections of content. While it doesn't directly announce anything to screen readers, there are a few considerations:
+
+<NavigationOption
+  media={<Bulb size={24} />}
+  title="Design guidance"
+  content="Before you start, please review the documentation on how separators should be used, announced or hidden from assistive tech."
+  href="https://wise.design/components/divider"
+/>
+
+<br />
+<br />
+
+## Using `<hr />` vs `<div />`
+
+By default, our Divider is rendered as `<div role="presentation" />`. However, you can optionally set `isContent` to true, which many screen readers interpret as a “separator.”
+
+<Source dark code={`
+// By default: non-semantic divider
+<Divider isContent={false} />
+
+// Alternatively, to provide a semantic HR:
+
+<Divider isContent={true} />
+`}/>
+
+Compared to a `<div>`, `<hr>` tells assistive technologies that a thematic break or separation has occurred. However, sometimes you may not want an audible separation. In that case, using `<div>` (which omits semantic meaning) might be preferable.
+
+<br />
+
+## Levels
+
+The Divider supports levels like “section”, “subsection”, or “content” to visually change the separation style:
+
+<Source
+  dark
+  code={`
+// A few level examples
+<>
+  <Divider level="section" />
+  <Divider level="subsection" />
+  <Divider level="content" />
+</>
+`}
+/>
+
+Screen readers generally ignore these visual styling changes unless you explicitly provide more context (e.g., additional text or heading tags).
+
+<br />
+
+**Additional resources:**
+
+1. [WAI-ARIA Authoring Practices: Separator Role](https://www.w3.org/TR/wai-aria-practices-1.2/#separator)
+2. [MDN Web Docs: &lt;hr /&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)

package/src/divider/Divider.css

@@ -0,0 +1,24 @@
+.wds-Divider {
+  --Divider-border-width: 4px;
+  --Divider-border-color: var(--color-border-neutral);
+  --Divider-border-style: solid;
+  --Divider-dash-length: 4px;
+  --Divider-dash-spacing: 4px;
+  border-top: 4px solid rgba(0,0,0,0.10196);
+  border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  height: 4px;
+  height: var(--Divider-border-width);
+  width: 100%;
+}
+.wds-Divider--content {
+  border-top: none;
+  background: repeating-linear-gradient(to right, var(--Divider-border-color), var(--Divider-border-color) var(--Divider-dash-length), transparent var(--Divider-dash-length), transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing)));
+  height: var(--Divider-border-width);
+}
+.wds-Divider--content,
+.wds-Divider--subsection {
+  --Divider-border-width: 1px;
+}

package/src/divider/Divider.less

@@ -0,0 +1,31 @@
+.wds-Divider {
+    --Divider-border-width: 4px;
+    --Divider-border-color: var(--color-border-neutral);
+    --Divider-border-style: solid;
+    --Divider-dash-length: 4px;
+    --Divider-dash-spacing: 4px;
+
+    border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    height: var(--Divider-border-width);
+    width: 100%;
+
+    &--content {
+        border-top: none;
+        background: repeating-linear-gradient(
+            to right,
+            var(--Divider-border-color),
+            var(--Divider-border-color) var(--Divider-dash-length),
+            transparent var(--Divider-dash-length),
+            transparent calc(var(--Divider-dash-length) + var(--Divider-dash-spacing))
+        );
+        height: var(--Divider-border-width);
+    }
+
+    &--content,
+    &--subsection {
+        --Divider-border-width: 1px;
+    }
+}

package/src/divider/Divider.spec.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Divider, { DividerProps } from './Divider';
+
+describe('Divider', () => {
+  const defaultProps: DividerProps = {
+    testId: 'test-divider',
+  };
+
+  const renderDivider = (props: Partial<DividerProps> = {}) => {
+    const utils = render(<Divider {...defaultProps} {...props} />);
+    const rerender = (newProps: Partial<DividerProps> = {}) =>
+      utils.rerender(<Divider {...defaultProps} {...newProps} />);
+    return { ...utils, rerender };
+  };
+
+  it('should render the Divider component', () => {
+    renderDivider();
+    expect(screen.getByTestId('test-divider')).toBeInTheDocument();
+    expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider');
+  });
+
+  it('should render as a semantic <hr> when `isContent` is true', () => {
+    renderDivider({ isContent: true });
+    expect(screen.getByTestId('test-divider')).not.toHaveAttribute('role', 'presentation');
+  });
+
+  it('should render as a non-semantic <div> when `isContent` is false', () => {
+    renderDivider({ isContent: false });
+    expect(screen.getByTestId('test-divider')).toHaveAttribute('role', 'presentation');
+  });
+
+  it('should apply custom class names when provided', () => {
+    const { rerender } = renderDivider();
+    expect(screen.getByTestId('test-divider')).not.toHaveClass('custom-class');
+
+    // Re-render with updated props
+    rerender({ className: 'custom-class' });
+    expect(screen.getByTestId('test-divider')).toHaveClass('custom-class');
+  });
+
+  it('should apply the "content" level styling', () => {
+    const { rerender } = renderDivider();
+    expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--content');
+
+    rerender({ level: 'content' });
+    expect(screen.getByTestId('test-divider')).toHaveClass('wds-Divider', 'wds-Divider--content');
+  });
+
+  it('should apply the "subsection" level styling', () => {
+    const { rerender } = renderDivider();
+    expect(screen.getByTestId('test-divider')).not.toHaveClass('wds-Divider--subsection');
+
+    rerender({ level: 'subsection' });
+    expect(screen.getByTestId('test-divider')).toHaveClass(
+      'wds-Divider',
+      'wds-Divider--subsection',
+    );
+  });
+});