@transferwise/components 46.28.0 → 46.29.0

package/build/index.mjs

@@ -8,23 +8,22 @@ import { defineMessages, useIntl, injectIntl, IntlProvider } from 'react-intl';
 import PropTypes from 'prop-types';
 import commonmark from 'commonmark';
 import { useTheme, ThemeProvider } from '@wise/components-theming';
-import { formatDate, formatNumber, formatMoney, formatAmount } from '@transferwise/formatting';
+import { formatDate, formatMoney, formatAmount } from '@transferwise/formatting';
 import { Transition, Listbox } from '@headlessui/react';
 import mergeProps from 'merge-props';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager, offset, flip, shift, size, autoUpdate } from '@floating-ui/react';
+import { FocusScope } from '@react-aria/focus';
 import { usePreventScroll } from '@react-aria/overlays';
 import { CSSTransition } from 'react-transition-group';
 import { isUndefined, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
 import { createPortal } from 'react-dom';
-import { FocusScope } from '@react-aria/focus';
 import { usePopper } from 'react-popper';
 import throttle from 'lodash.throttle';
 import { Flag, Illustration } from '@wise/art';
 import clamp$2 from 'lodash.clamp';
 import debounce from 'lodash.debounce';
 import requiredIf from 'react-required-if';
-import toPairs from 'lodash.topairs';
 import { Spring, animated } from '@react-spring/web';
 
 class HistoryNavigator {
@@ -63,7 +62,7 @@ var HistoryNavigator$1 = HistoryNavigator;
 function isIosDevice() {
   const sampleTouchDevices = ['iphone', 'ipad', 'ipod'];
   const matchString = sampleTouchDevices.map(device => `(${device})`).join('|');
-  const regex = new RegExp(matchString, 'ig');
+  const regex = new RegExp(matchString, 'gi');
   return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
 }
 
@@ -909,8 +908,9 @@ function resolveType(type) {
       return 'neutral';
     case 'error':
       return 'negative';
+    default:
+      return type;
   }
-  return type;
 }
 function Alert({
   arrow,
@@ -1056,7 +1056,7 @@ const hashSeed = seed => {
   const modulo = avatarColors.length;
   let hashValue = 0;
   let basePow = 1;
-  for (let i = 0; i < seed.length; i++) {
+  for (let i = 0; i < seed.length; i += 1) {
     hashValue = (hashValue + seed.charCodeAt(i) * basePow) % modulo;
     basePow = basePow * base % modulo;
   }
@@ -1348,11 +1348,15 @@ const Dimmer = ({
   }, [onClose]);
   const onEnter = () => {
     setHasNotExited(true);
-    dimmerReference.current && dimmerManager.add(dimmerReference.current);
+    if (dimmerReference.current) {
+      dimmerManager.add(dimmerReference.current);
+    }
   };
   const onExited = () => {
     setHasNotExited(false);
-    dimmerReference.current && dimmerManager.remove(dimmerReference.current);
+    if (dimmerReference.current) {
+      dimmerManager.remove(dimmerReference.current);
+    }
   };
   useEffect(() => {
     const localReferenceCopy = dimmerReference.current;
@@ -4327,508 +4331,6 @@ const DropFade = ({
   });
 };
 
-/* eslint-disable no-unused-vars */
-/* eslint-disable no-param-reassign */
-
-const prepFields = (fields, model, validationMessages) => {
-  if (!fields) {
-    return {};
-  }
-  let preparedFields = copyOf(fields);
-  preparedFields = flattenFieldsWithGroups(preparedFields);
-  preparedFields = transformFieldArrayToMap(preparedFields);
-  preparedFields = transformNestedKeysToNestedSpecs(preparedFields);
-  Object.keys(preparedFields).forEach(key => {
-    preparedFields[key] = prepField(preparedFields[key], model, validationMessages);
-  });
-  return preparedFields;
-};
-const prepField = (field, model, validationMessages) => {
-  const preparedField = copyOf(field);
-  prepLegacyProps(preparedField);
-  prepType(preparedField);
-  prepPattern(preparedField);
-  prepValidationMessages(preparedField, validationMessages);
-  return preparedField;
-};
-
-/**
- * In an older format we had an extra fieldGroup level, here we flatten that out
- * So the inner arrays of fields within the different field groups are flattened
- * to a single array, which is returned.
- *
- * @param fields
- */
-const flattenFieldsWithGroups = fields => {
-  if (Array.isArray(fields)) {
-    let flattenedFields = [];
-    fields.forEach(field => {
-      // If we've been given a group with nested fields, break them out.
-      if (field.fields) {
-        flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.fields));
-      } else if (field.group) {
-        flattenedFields = flattenedFields.concat(flattenFieldWithGroup(field, field.group));
-      } else {
-        // Otherwise it's a regular field, just add it.
-        flattenedFields.push(field);
-      }
-    });
-    return flattenedFields;
-  }
-  return fields;
-};
-const flattenFieldWithGroup = (field, subFields) => {
-  // If first field doesn't have a label, use the one from the group
-  if (field.name && subFields.length > 0 && !subFields[0].name) {
-    subFields[0].name = field.name;
-  }
-  if (field.width && subFields.length > 0 && !subFields[0].width) {
-    subFields[0].width = field.width;
-  }
-
-  // If there was a tooltip at fieldGroup level move it to first field.
-  if (field.tooltip && subFields.length > 0 && !subFields[0].help) {
-    subFields[0].help = {
-      message: field.tooltip
-    };
-  }
-  if (field.info && subFields.length > 0 && !subFields[0].help) {
-    subFields[0].help = {
-      message: field.info
-    };
-  }
-
-  // If there are two parts of this group, render them side by side
-  if (subFields.length === 2) {
-    subFields.forEach(nestedField => {
-      nestedField.width = 'md';
-    });
-  }
-
-  // If there are three parts, render the first two side by side
-  if (subFields.length === 3) {
-    subFields[0].width = 'md';
-    subFields[1].width = 'md';
-  }
-  return subFields;
-};
-
-/*
- * Some older requirements return an array of fields, where it should be a map
- * from the property name to the spec.  This converts arrays to maps.
- */
-const transformFieldArrayToMap = fields => {
-  if (Array.isArray(fields)) {
-    const fieldMap = {};
-    fields.forEach(field => {
-      const key = field.key || field.name;
-      delete field.key;
-      fieldMap[key] = copyOf(field);
-    });
-    return fieldMap;
-  }
-  return fields;
-};
-
-/*
- * Some older format return keys like 'address.city', expecting the value of
- * city to be nested inside an address object.  This function creates a spec of
- * type 'object', and nests such fields inside of it.  When we render we pass
- * this object spec to a nested fieldset.
- */
-const transformNestedKeysToNestedSpecs = fieldMap => {
-  if (Array.isArray(fieldMap)) {
-    throw new TypeError('Expecting a map of fields, not an array');
-  }
-  const nestedFields = {};
-  Object.keys(fieldMap).forEach(key => {
-    if (key.indexOf('.') > 0) {
-      // If the key contains a period we need to nest the fields in another object
-      const pathSections = key.split('.');
-      const nestedKey = pathSections[0];
-
-      // If this sub object doesn't exist yet, create it
-      if (!nestedFields[nestedKey]) {
-        nestedFields[nestedKey] = {
-          type: 'object',
-          properties: {}
-        };
-      }
-      nestedFields[nestedKey].properties[pathSections[1]] = fieldMap[key];
-    } else {
-      nestedFields[key] = fieldMap[key];
-    }
-  });
-  return nestedFields;
-};
-const prepType = field => {
-  const type = field.type && field.type.toLowerCase && field.type.toLowerCase();
-  switch (type) {
-    case 'text':
-      field.type = 'string';
-      break;
-    case 'date':
-      field.type = 'string';
-      field.format = 'date';
-      break;
-    case 'password':
-      field.type = 'string';
-      field.control = 'password';
-      break;
-    case 'checkbox':
-      field.type = 'boolean';
-      break;
-    case 'select':
-      if (!field.control) {
-        field.control = 'select';
-      }
-      delete field.type;
-      break;
-    case 'radio':
-      field.control = 'radio';
-      delete field.type;
-      break;
-    case 'upload':
-      field.type = 'string';
-      field.format = 'base64url';
-      break;
-    case 'tel':
-      field.type = 'string';
-      field.format = 'phone';
-      break;
-    case 'textarea':
-      field.type = 'string';
-      field.control = 'textarea';
-      break;
-  }
-  if (!field.control && field.type !== 'object') {
-    field.control = getControlType(field);
-  }
-};
-const prepLegacyProps = field => {
-  if (field.name && !field.title) {
-    field.title = field.name;
-    delete field.name;
-  }
-  if (field.validationRegexp) {
-    field.pattern = field.validationRegexp;
-    delete field.validationRegexp;
-  }
-  if (field.min) {
-    field.minimum = field.min;
-    delete field.min;
-  }
-  if (field.max) {
-    field.maximum = field.max;
-    delete field.max;
-  }
-  if (field.example && !field.placeholder) {
-    field.placeholder = field.example;
-    delete field.example;
-  }
-  if (field.tooltip && !field.help) {
-    field.help = {
-      message: field.tooltip
-    };
-    delete field.tooltip;
-  }
-  if (field.valuesAllowed && !field.values) {
-    field.values = field.valuesAllowed;
-    delete field.valuesAllowed;
-  }
-  if (field.values && field.values.map) {
-    field.values = prepLegacyValues(field.values);
-  }
-  if (field.value && !field.default) {
-    field.default = field.value;
-    delete field.value;
-  }
-  if (field.values) {
-    // In some legacy arrays the first value is a placeholder, extract it.
-    if (field.values && field.values.length > 0 && field.values[0] && !field.values[0].value && field.values[0].label && !field.placeholder) {
-      field.placeholder = field.values[0].label;
-      field.values = field.values.slice(1);
-    }
-  }
-};
-const prepLegacyValues = values => values.map(prepLegacyValue);
-const prepLegacyValue = value => {
-  if (!value.label && value.title) {
-    value.label = value.title;
-    delete value.title;
-  }
-  if (!value.label && value.name) {
-    value.label = value.name;
-    delete value.name;
-  }
-  if (!value.value && value.code) {
-    value.value = value.code;
-    delete value.code;
-  }
-  if (!value.value && value.key) {
-    value.value = value.key;
-    delete value.key;
-  }
-  return value;
-};
-const prepPattern = field => {
-  if (field.pattern) {
-    try {
-      new RegExp(field.pattern);
-    } catch {
-      // eslint-disable-next-line no-console
-      console.warn('API regexp is invalid');
-      delete field.pattern;
-    }
-  } else {
-    delete field.pattern;
-  }
-};
-const prepValidationMessages = (field, validationMessages) => {
-  field.validationMessages = field.validationMessages ? field.validationMessages : validationMessages;
-  if (!field.validationMessages) {
-    delete field.validationMessages;
-    return;
-  }
-  if (field.validationMessages.minimum) {
-    field.validationMessages.min = field.validationMessages.minimum;
-    delete field.validationMessages.minimum;
-  }
-  if (field.validationMessages.maximum) {
-    field.validationMessages.max = field.validationMessages.maximum;
-    delete field.validationMessages.maximum;
-  }
-};
-const getControlType = field => {
-  if (field.control) {
-    return field.control.toLowerCase();
-  }
-  if (field.hidden) {
-    return 'hidden';
-  }
-  if (field.values && field.values.length > 0) {
-    return getSelectionType(field);
-  }
-  switch (field.type) {
-    case 'string':
-      return getControlForStringFormat(field.format);
-    case 'number':
-    case 'integer':
-      return 'number';
-    case 'boolean':
-      return 'checkbox';
-    default:
-      return 'text';
-  }
-};
-const getControlForStringFormat = format => {
-  switch (format) {
-    case 'date':
-      return 'date';
-    case 'base64url':
-      return 'file';
-    case 'password':
-      return 'password';
-    case 'uri':
-      return 'text';
-    // 'url'; - not implemented
-    case 'email':
-      return 'text';
-    // 'email'; - not implemented
-    case 'phone':
-      return 'tel';
-    default:
-      return 'text';
-  }
-};
-const getSelectionType = field => {
-  if (field.control) {
-    return field.control;
-  }
-  if (field.type === 'select') {
-    return 'select';
-  }
-  if (field.type === 'radio') {
-    return 'radio';
-  }
-  if (field.values) {
-    return field.values.length > 3 ? 'select' : 'radio';
-  }
-  return 'select';
-};
-const copyOf = object => JSON.parse(JSON.stringify(object));
-
-const formatUsingPattern = (value = '', pattern) => {
-  if (typeof pattern !== 'string') {
-    return value;
-  }
-  let newPattern = pattern;
-  if (newPattern.indexOf('||') > 0) {
-    newPattern = newPattern.slice(0, Math.max(0, pattern.indexOf('||')));
-  }
-  let newValue = '';
-  let separators = 0;
-  let charactersToAllocate = value.length;
-  let position = 0;
-  while (charactersToAllocate) {
-    if (positionIsSeparator(newPattern, position)) {
-      newValue += newPattern[position];
-      separators += 1;
-    } else {
-      newValue += value[position - separators];
-      charactersToAllocate -= 1;
-    }
-    position += 1;
-  }
-  const separatorsAfterCursor = countSeparatorsAfterCursor(newPattern, position);
-  if (separatorsAfterCursor) {
-    newValue += newPattern.slice(position, separatorsAfterCursor);
-  }
-  return newValue;
-};
-const countSeparatorsAfterCursor = (newPattern, position) => {
-  let separators = 0;
-  while (positionIsSeparator(newPattern, position + separators)) {
-    separators += 1;
-  }
-  return separators;
-};
-const positionIsSeparator = (newPattern, position) => newPattern[position] && newPattern[position] !== '*';
-
-const getValueLabel = (options, value) => {
-  const option = options.find(currentOption => currentOption.value === value);
-  return option && option.label ? option.label : value;
-};
-
-/**
- *
- * @param {string} value
- */
-const mask = value => new Array(value.length + 1).join('*');
-const FormattedValue = ({
-  field,
-  value
-}) => {
-  const {
-    locale
-  } = useIntl();
-  const style = [];
-  if (field.tagClassName && field.tagClassName.h3) {
-    style.push('np-text-body-large-bold');
-    style.push('formatted-value__h3-custom-alignment');
-  }
-  switch (field.control) {
-    case 'select':
-    case 'radio':
-      return /*#__PURE__*/jsx("span", {
-        children: getValueLabel(field.values, value)
-      });
-    case 'date':
-      return /*#__PURE__*/jsx("span", {
-        children: formatDate(value instanceof Date ? value : new Date(value), locale)
-      });
-    case 'number':
-      return /*#__PURE__*/jsx("span", {
-        children: formatNumber(value, locale)
-      });
-    case 'password':
-      return /*#__PURE__*/jsx("span", {
-        children: mask(value)
-      });
-    case 'file':
-      return /*#__PURE__*/jsx("div", {
-        className: "thumbnail",
-        children: /*#__PURE__*/jsx("img", {
-          alt: field.title,
-          src: value
-        })
-      });
-    case 'checkbox':
-      return /*#__PURE__*/jsx("span", {
-        children: JSON.stringify(value)
-      });
-    default:
-      return /*#__PURE__*/jsx("span", {
-        className: classNames(style),
-        children: formatUsingPattern(value, field.displayFormat)
-      });
-  }
-};
-FormattedValue.propTypes = {
-  field: PropTypes.shape({
-    control: PropTypes.string.isRequired,
-    displayFormat: PropTypes.string,
-    refreshRequirementsOnChange: PropTypes.bool,
-    title: PropTypes.string.isRequired,
-    type: PropTypes.string.isRequired,
-    width: PropTypes.string,
-    tagClassName: PropTypes.shape({
-      h3: PropTypes.bool
-    }),
-    values: PropTypes.arrayOf(PropTypes.shape({
-      value: PropTypes.any
-    }))
-  }).isRequired,
-  value: PropTypes.any.isRequired
-};
-var FormattedValue$1 = FormattedValue;
-
-function createDefinitions(fields, model) {
-  return toPairs(fields).map(([name, field]) => createDefinition(name, field, model)).filter(definition => !!definition);
-}
-function createDefinition(name, field, model) {
-  const {
-    title,
-    group,
-    hidden
-  } = field;
-  if (!model[name] || hidden) {
-    return null;
-  }
-  return {
-    title,
-    value: group ? group.map((groupField, groupFieldIndex) => /*#__PURE__*/jsx(FormattedValue$1, {
-      // eslint-disable-line react/no-array-index-key
-      field: groupField,
-      value: model[name]
-    }, groupFieldIndex)) : /*#__PURE__*/jsx(FormattedValue$1, {
-      field: field,
-      value: model[name]
-    }),
-    key: name
-  };
-}
-
-const DynamicFieldDefinitionList = ({
-  model,
-  title,
-  layout,
-  fields
-}) => /*#__PURE__*/jsxs(Fragment, {
-  children: [title && /*#__PURE__*/jsx("div", {
-    className: "m-t-1 m-b-3",
-    children: /*#__PURE__*/jsx(Title, {
-      type: Typography.TITLE_BODY,
-      className: "p-t-3",
-      children: title
-    })
-  }), /*#__PURE__*/jsx(DefinitionList$1, {
-    layout: layout,
-    definitions: createDefinitions(prepFields(fields), model)
-  })]
-});
-DynamicFieldDefinitionList.propTypes = {
-  model: PropTypes.shape({}).isRequired,
-  fields: PropTypes.shape({}).isRequired,
-  title: PropTypes.string,
-  layout: PropTypes.oneOf(['VERTICAL_TWO_COLUMN', 'VERTICAL_ONE_COLUMN', 'HORIZONTAL_JUSTIFIED', 'HORIZONTAL_LEFT_ALIGNED'])
-};
-DynamicFieldDefinitionList.defaultProps = {
-  title: null,
-  layout: Layout.VERTICAL_TWO_COLUMN
-};
-var DynamicFieldDefinitionList$1 = DynamicFieldDefinitionList;
-
 const ESCAPED_OPENING_CHEVRON = '&lt;';
 const ESCAPED_CLOSING_CHEVRON = '&gt;';
 class EmphasisHtmlTransformer {
@@ -5049,15 +4551,14 @@ const Logo = ({
 }) => {
   const LogoSm = svgPaths[`WISE_FLAG${type === LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
-  const screenMd = useScreenSize(Breakpoint.MEDIUM);
   return /*#__PURE__*/jsxs("span", {
     "aria-label": type === LogoType.WISE ? 'Wise' : 'Wise Business' | type === LogoType.WISE_PLATFORM ? 'Wise Platform' : 'Wise Business',
     role: "img",
     className: classNames(className, 'np-logo'),
-    children: [!screenMd && /*#__PURE__*/jsx(LogoSm, {
-      className: "np-logo-svg"
-    }), screenMd && /*#__PURE__*/jsx(LogoMd, {
-      className: "np-logo-svg"
+    children: [/*#__PURE__*/jsx(LogoSm, {
+      className: "np-logo-svg np-logo-svg--size-sm"
+    }), /*#__PURE__*/jsx(LogoMd, {
+      className: "np-logo-svg np-logo-svg--size-md"
     })]
   });
 };
@@ -5169,7 +4670,6 @@ const Tooltip = ({
 
 function supportsTouchEvents() {
   const onTouchStartIsDefined = typeof window !== 'undefined' && window.ontouchstart !== undefined;
-  // eslint-disable-next-line compat/compat
   const maxTouchPointsIsDefined = typeof navigator !== 'undefined' && navigator.maxTouchPoints;
   const documentTouchIsDefined = typeof window !== 'undefined' && window.DocumentTouch && document instanceof window.DocumentTouch;
   return !!(onTouchStartIsDefined || maxTouchPointsIsDefined || documentTouchIsDefined);
@@ -5177,7 +4677,7 @@ function supportsTouchEvents() {
 function userAgentSuggestsTouchDevice() {
   const sampleTouchDevices = ['android', 'iemobile', 'iphone', 'ipad', 'ipod', 'blackberry', 'bada'];
   const matchString = sampleTouchDevices.map(device => `(${device})`).join('|');
-  const regex = new RegExp(matchString, 'ig');
+  const regex = new RegExp(matchString, 'gi');
   return typeof navigator !== 'undefined' && !!navigator.userAgent.match(regex);
 }
 // Important: this is not fool-proof! It gives false positives and negatives, and will be outdated.
@@ -5583,8 +5083,9 @@ function resolvePlacement(preferredPlacement) {
     case 'bottom-left':
     case 'bottom-right':
       return 'bottom';
+    default:
+      return preferredPlacement;
   }
-  return preferredPlacement;
 }
 function Popover$1({
   children,
@@ -5988,35 +5489,37 @@ function BottomSheet({
               enterFrom: "np-bottom-sheet-v2-content--enter-from",
               leave: "np-bottom-sheet-v2-content--leave",
               leaveTo: "np-bottom-sheet-v2-content--leave-to",
-              children: /*#__PURE__*/jsx(FloatingFocusManager, {
-                context: context,
-                initialFocus: initialFocusRef,
-                children: /*#__PURE__*/jsxs("div", {
-                  // Force inner state invalidation on open
-                  ref: refs.setFloating,
-                  className: "np-bottom-sheet-v2-content-inner-container",
-                  ...getFloatingProps(),
-                  children: [/*#__PURE__*/jsx("div", {
-                    className: "np-bottom-sheet-v2-header",
-                    children: /*#__PURE__*/jsx(CloseButton, {
-                      size: Size.SMALL,
-                      onClick: () => {
-                        onClose?.();
-                      }
-                    })
-                  }), /*#__PURE__*/jsxs("div", {
-                    className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
-                      'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
-                    }),
-                    children: [title ? /*#__PURE__*/jsx("h2", {
-                      className: "np-bottom-sheet-v2-title np-text-title-body",
-                      children: title
-                    }) : null, /*#__PURE__*/jsx("div", {
-                      className: "np-bottom-sheet-v2-body np-text-body-default",
-                      children: children
+              children: /*#__PURE__*/jsx(FocusScope, {
+                children: /*#__PURE__*/jsx(FloatingFocusManager, {
+                  context: context,
+                  initialFocus: initialFocusRef,
+                  children: /*#__PURE__*/jsxs("div", {
+                    // Force inner state invalidation on open
+                    ref: refs.setFloating,
+                    className: "np-bottom-sheet-v2-content-inner-container",
+                    ...getFloatingProps(),
+                    children: [/*#__PURE__*/jsx("div", {
+                      className: "np-bottom-sheet-v2-header",
+                      children: /*#__PURE__*/jsx(CloseButton, {
+                        size: Size.SMALL,
+                        onClick: () => {
+                          onClose?.();
+                        }
+                      })
+                    }), /*#__PURE__*/jsxs("div", {
+                      className: classNames('np-bottom-sheet-v2-content-inner', title && 'np-bottom-sheet-v2-content-inner--has-title', {
+                        'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md'
+                      }),
+                      children: [title ? /*#__PURE__*/jsx("h2", {
+                        className: "np-bottom-sheet-v2-title np-text-title-body",
+                        children: title
+                      }) : null, /*#__PURE__*/jsx("div", {
+                        className: "np-bottom-sheet-v2-body np-text-body-default",
+                        children: children
+                      })]
                     })]
-                  })]
-                }, floatingKey)
+                  }, floatingKey)
+                })
               })
             })
           })]
@@ -6117,32 +5620,34 @@ function Popover({
             setFloatingKey(prev => prev + 1);
           },
           afterLeave: onCloseEnd,
-          children: /*#__PURE__*/jsx(FloatingFocusManager, {
-            context: context,
-            children: /*#__PURE__*/jsx("div", {
-              // Force inner state invalidation on open
-              ref: refs.setFloating,
-              className: classNames('np-popover-v2-container', {
-                'np-popover-v2-container--size-md': size$1 === 'md',
-                'np-popover-v2-container--size-lg': size$1 === 'lg'
-              })
-              // eslint-disable-next-line react/forbid-dom-props
-              ,
-              style: floatingStyles,
-              ...getFloatingProps(),
-              children: /*#__PURE__*/jsxs("div", {
-                className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
-                  'np-popover-v2--padding-md': padding === 'md'
-                }),
-                children: [title ? /*#__PURE__*/jsx("h2", {
-                  className: "np-popover-v2-title np-text-title-body",
-                  children: title
-                }) : null, /*#__PURE__*/jsx("div", {
-                  className: "np-popover-v2-content np-text-body-default",
-                  children: children
-                })]
-              })
-            }, floatingKey)
+          children: /*#__PURE__*/jsx(FocusScope, {
+            children: /*#__PURE__*/jsx(FloatingFocusManager, {
+              context: context,
+              children: /*#__PURE__*/jsx("div", {
+                // Force inner state invalidation on open
+                ref: refs.setFloating,
+                className: classNames('np-popover-v2-container', {
+                  'np-popover-v2-container--size-md': size$1 === 'md',
+                  'np-popover-v2-container--size-lg': size$1 === 'lg'
+                })
+                // eslint-disable-next-line react/forbid-dom-props
+                ,
+                style: floatingStyles,
+                ...getFloatingProps(),
+                children: /*#__PURE__*/jsxs("div", {
+                  className: classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                    'np-popover-v2--padding-md': padding === 'md'
+                  }),
+                  children: [title ? /*#__PURE__*/jsx("h2", {
+                    className: "np-popover-v2-title np-text-title-body",
+                    children: title
+                  }) : null, /*#__PURE__*/jsx("div", {
+                    className: "np-popover-v2-content np-text-body-default",
+                    children: children
+                  })]
+                })
+              }, floatingKey)
+            })
           })
         })
       })
@@ -6238,6 +5743,7 @@ const defaultRenderTrigger = ({
         })
       })]
     }),
+    initialContentWidth: 24 + 4,
     padding: 'sm'
   },
   disabled: disabled,
@@ -7147,7 +6653,6 @@ const Loader = ({
       }, 1000);
     }
     return () => {
-      // eslint-disable-next-line fp/no-mutation
       cancelled = true;
       clearTimeout(timeout);
     };
@@ -9084,7 +8589,7 @@ const explodeNumberModel = number => {
   };
 };
 
-const DIGITS_MATCH = /^$|^(\+)|([\d]+)/g;
+const DIGITS_MATCH = /^$|^(\+)|(\d+)/g;
 const cleanNumber = number => number.match(DIGITS_MATCH)?.join('') ?? '';
 
 function sortArrayByProperty(arrayToSort, property) {
@@ -9170,7 +8675,8 @@ const PhoneNumberInput = ({
   };
   useEffect(() => {
     if (broadcastedValue === null) {
-      return setBroadcastedValue(internalValue);
+      setBroadcastedValue(internalValue);
+      return;
     }
     const internalPhoneNumber = `${internalValue.prefix ?? ''}${internalValue.suffix}`;
     const broadcastedPhoneNumber = `${broadcastedValue.prefix ?? ''}${broadcastedValue.suffix}`;
@@ -9443,7 +8949,7 @@ const PromoCard = /*#__PURE__*/forwardRef(({
   const checkedProps = (type === 'checkbox' || type === 'radio') && !href ? {
     ...commonProps,
     'aria-checked': type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,
-    'aria-describedby': `${componentId}-title` || undefined,
+    'aria-describedby': `${componentId}-title`,
     'aria-disabled': isDisabled,
     'data-value': value ?? undefined,
     role: type === 'checkbox' || type === 'radio' ? type : undefined,
@@ -10096,8 +9602,8 @@ function Select({
     }
   };
   function selectKeyboardFocusedOption() {
-    if (keyboardFocusedOptionIndex != null) {
-      selectableOptions.length > 0 && selectOption(selectableOptions[keyboardFocusedOptionIndex]);
+    if (keyboardFocusedOptionIndex != null && selectableOptions.length > 0) {
+      selectOption(selectableOptions[keyboardFocusedOptionIndex]);
     }
   }
   function moveFocusWithDifference(difference) {
@@ -10324,7 +9830,6 @@ function Select({
       disabled: disabled,
       "aria-controls": listboxId,
       "aria-expanded": open,
-      "aria-autocomplete": "none",
       onClick: handleOnClick,
       ...buttonProps,
       children: [selected ? /*#__PURE__*/jsx(Option$1, {
@@ -10440,12 +9945,11 @@ Select.defaultProps = {
 
 const SegmentedControl = ({
   name,
-  defaultValue,
+  value,
   mode = 'input',
   segments,
   onChange
 }) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
   const [animate, setAnimate] = useState(false);
   const segmentsRef = useRef(null);
   if (segments.length > 3) {
@@ -10456,7 +9960,7 @@ const SegmentedControl = ({
     ref: /*#__PURE__*/createRef()
   }));
   const updateSegmentPosition = () => {
-    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === selectedValue)?.ref;
+    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === value)?.ref;
     // We grab the active segments style object from the ref
     // and set the css variables to the selected segments width and x position.
     // This is so we can animate the highlight to the selected segment
@@ -10469,6 +9973,7 @@ const SegmentedControl = ({
     }
   };
   useEffect(() => {
+    setAnimate(true);
     updateSegmentPosition();
     const handleWindowSizeChange = () => {
       setAnimate(false);
@@ -10479,10 +9984,7 @@ const SegmentedControl = ({
       window.removeEventListener('resize', handleWindowSizeChange);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentsWithRefs, selectedValue]);
-  useEffect(() => {
-    onChange(selectedValue);
-  }, [onChange, selectedValue]);
+  }, [segmentsWithRefs, value]);
   return /*#__PURE__*/jsx("div", {
     ref: segmentsRef,
     "data-testid": "segmented-control",
@@ -10494,50 +9996,50 @@ const SegmentedControl = ({
         'segmented-control__segments--no-animate': !animate
       }),
       role: mode !== 'input' ? 'tablist' : undefined,
-      children: segmentsWithRefs.map(segment => mode === 'input' ? /*#__PURE__*/jsxs("label", {
-        ref: segment.ref,
-        htmlFor: segment.id,
-        className: classNames('segmented-control__segment', {
-          'segmented-control__selected-segment': selectedValue === segment.value
-        }),
-        children: [/*#__PURE__*/jsx("input", {
-          type: "radio",
-          className: "segmented-control__radio-input",
-          id: segment.id,
-          name: name,
-          value: segment.value,
-          checked: selectedValue === segment.value,
-          onChange: () => {
-            setAnimate(true);
-            setSelectedValue(segment.value);
-          }
-        }), /*#__PURE__*/jsx(Body, {
-          className: "segmented-control__text",
-          as: "span",
-          type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
-          children: segment.label
-        })]
-      }, segment.id) : /*#__PURE__*/jsx("button", {
-        ref: segment.ref,
-        type: "button",
-        role: "tab",
-        id: segment.id,
-        "aria-controls": segment.controls,
-        "aria-selected": selectedValue === segment.value,
-        className: classNames('segmented-control__segment', 'segmented-control__button', {
-          'segmented-control__selected-segment': selectedValue === segment.value
-        }),
-        onClick: () => {
+      children: segmentsWithRefs.map(segment => {
+        const onSelect = () => {
           setAnimate(true);
-          setSelectedValue(segment.value);
-        },
-        children: /*#__PURE__*/jsx(Body, {
-          as: "span",
-          className: "segmented-control__text",
-          type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
-          children: segment.label
-        })
-      }, segment.id))
+          onChange(segment.value);
+        };
+        return mode === 'input' ? /*#__PURE__*/jsxs("label", {
+          ref: segment.ref,
+          htmlFor: segment.id,
+          className: classNames('segmented-control__segment', {
+            'segmented-control__selected-segment': value === segment.value
+          }),
+          children: [/*#__PURE__*/jsx("input", {
+            type: "radio",
+            className: "segmented-control__radio-input",
+            id: segment.id,
+            name: name,
+            value: segment.value,
+            checked: value === segment.value,
+            onChange: onSelect
+          }), /*#__PURE__*/jsx(Body, {
+            className: "segmented-control__text",
+            as: "span",
+            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+            children: segment.label
+          })]
+        }, segment.id) : /*#__PURE__*/jsx("button", {
+          ref: segment.ref,
+          type: "button",
+          role: "tab",
+          id: segment.id,
+          "aria-controls": segment.controls,
+          "aria-selected": value === segment.value,
+          className: classNames('segmented-control__segment', 'segmented-control__button', {
+            'segmented-control__selected-segment': value === segment.value
+          }),
+          onClick: onSelect,
+          children: /*#__PURE__*/jsx(Body, {
+            as: "span",
+            className: "segmented-control__text",
+            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+            children: segment.label
+          })
+        }, segment.id);
+      })
     })
   });
 };
@@ -14836,5 +14338,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, DynamicFieldDefinitionList$1 as DynamicFieldDefinitionList, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
+export { Accordion, ActionButton, ActionOption, Alert, Avatar, AvatarType, AvatarWrapper, Badge, Card as BaseCard, Body, BottomSheet$2 as BottomSheet, Breakpoint, Button, Card$2 as Card, Checkbox$1 as Checkbox, CheckboxButton$1 as CheckboxButton, CheckboxOption, Chevron, Chip, Chips, CircularButton, ControlType, CriticalCommsBanner, DEFAULT_LANG, DEFAULT_LOCALE, DateInput, DateLookup, DateMode, Decision, DecisionPresentation, DecisionType, DefinitionList$1 as DefinitionList, Dimmer$1 as Dimmer, Direction, DirectionProvider, Display, Drawer$1 as Drawer, DropFade, Emphasis, FileType, FlowNavigation, Header, Image, Info, InfoPresentation, InlineAlert, Input, InputGroup, InputWithDisplayFormat, InstructionsList, LanguageProvider, Layout, Link, ListItem$1 as ListItem, Loader, Logo$1 as Logo, LogoType, Markdown, MarkdownNodeType, Modal, Money, MoneyInput$1 as MoneyInput, MonthFormat, NavigationOption, NavigationOptionList as NavigationOptionsList, Nudge, Option$2 as Option, OverlayHeader$1 as OverlayHeader, PhoneNumberInput, Popover$1 as Popover, Position, Priority, ProcessIndicator$1 as ProcessIndicator, ProfileType, Progress, ProgressBar, PromoCard$1 as PromoCard, PromoCard$1 as PromoCardGroup, Provider, RTL_LANGUAGES, Radio, RadioGroup, RadioOption, SUPPORTED_LANGUAGES, Scroll, SearchInput, Section, SegmentedControl, Select, SelectInput, SelectInputOptionContent, SelectInputTriggerButton, Sentiment, Size, SlidingPanel, SnackbarConsumer, SnackbarContext, SnackbarPortal, SnackbarProvider, Status, StatusIcon, Stepper, Sticky, Summary, Switch, SwitchOption, Tabs$1 as Tabs, TextArea, TextareaWithDisplayFormat, Theme, Title, Tooltip, Type, Typeahead, Typography, Upload$1 as Upload, UploadInput, UploadStep, Variant, Width, adjustLocale, getCountryFromLocale, getDirectionFromLocale, getLangFromLocale, isBrowser, isServerSide, translations, useDirection, useLayout, useScreenSize, useSnackbar };
 //# sourceMappingURL=index.mjs.map