@transferwise/components 46.27.0 → 46.29.0

package/build/index.mjs

@@ -1,13 +1,14 @@
 import classNames from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { forwardRef, cloneElement, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect, createContext, useContext, useImperativeHandle, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
+import React__default, { forwardRef, cloneElement, useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect, createContext, useContext, useImperativeHandle, createElement, Component, PureComponent, createRef, isValidElement, Children, Fragment as Fragment$1 } from 'react';
 import { useId } from '@radix-ui/react-id';
-import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$2, ClockBorderless, CheckCircle, InfoCircle, Warning, CrossCircle, Clock, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
+import { ChevronUp, CrossCircleFill, Cross, NavigateAway, Check, Info as Info$1, Alert as Alert$1, ClockBorderless, Briefcase, Person, ArrowLeft, QuestionMarkCircle, AlertCircle, Search, CrossCircle, ChevronDown, CheckCircleFill, ArrowRight, Download, ClockFill, Upload as Upload$2, Document, Plus, PlusCircle, AlertCircleFill } from '@transferwise/icons';
 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';
@@ -15,16 +16,14 @@ import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, Floa
 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 { usePopper } from 'react-popper';
 import throttle from 'lodash.throttle';
-import { createPortal } from 'react-dom';
-import { isUndefined, isKey, isNumber, isEmpty, isNull } from '@transferwise/neptune-validation';
-import commonmark from 'commonmark';
 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);
 }
 
@@ -775,22 +774,22 @@ const Link = ({
   });
 };
 
+const iconTypeMap = {
+  positive: Check,
+  neutral: Info$1,
+  warning: Alert$1,
+  negative: Cross,
+  pending: ClockBorderless,
+  info: Info$1,
+  error: Cross,
+  success: Check
+};
 const StatusIcon = ({
-  sentiment = Sentiment.NEUTRAL,
-  size = Size.MEDIUM
+  sentiment = 'neutral',
+  size = 'md'
 }) => {
-  const iconTypeMap = {
-    [Sentiment.POSITIVE]: Check,
-    [Sentiment.NEUTRAL]: Info$1,
-    [Sentiment.WARNING]: Alert$2,
-    [Sentiment.NEGATIVE]: Cross,
-    [Sentiment.PENDING]: ClockBorderless,
-    [Sentiment.INFO]: Info$1,
-    [Sentiment.ERROR]: Cross,
-    [Sentiment.SUCCESS]: Check
-  };
-  const iconColor = [Sentiment.WARNING, Sentiment.PENDING].includes(sentiment) ? 'dark' : 'light';
   const Icon = iconTypeMap[sentiment];
+  const iconColor = sentiment === 'warning' || sentiment === 'pending' ? 'dark' : 'light';
   return /*#__PURE__*/jsx("span", {
     "data-testid": "status-icon",
     className: classNames('status-circle', 'status-circle-' + size, sentiment),
@@ -800,7 +799,7 @@ const StatusIcon = ({
   });
 };
 
-function logActionRequired$1(message) {
+function logActionRequired(message) {
   if (['development', 'test'].includes(process?.env?.NODE_ENV)) {
     // eslint-disable-next-line no-console
     console.warn(message);
@@ -808,48 +807,10 @@ function logActionRequired$1(message) {
 }
 function logActionRequiredIf(message, conditional) {
   if (conditional) {
-    logActionRequired$1(message);
+    logActionRequired(message);
   }
 }
 
-const deprecatedMessage = ({
-  component,
-  propName,
-  message,
-  expiryDate
-}) => {
-  const messages = [`${component} has deprecated the use of ${propName}.`];
-  if (message) {
-    messages.push(message);
-  }
-  if (expiryDate) {
-    messages.push(`${propName} will be removed on or after ${expiryDate.toLocaleString('en-GB', {
-      year: 'numeric',
-      month: 'numeric',
-      day: 'numeric'
-    })}`);
-  }
-  return messages.join(' ');
-};
-const deprecated = (validator, {
-  component,
-  message = '',
-  newProp: newProperty = null,
-  expiryDate = null
-}) => (props, propertyName, ...rest) => {
-  const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
-  if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
-    logActionRequired$1(deprecatedMessage({
-      component,
-      propName: propertyName,
-      message: newPropertyMessage,
-      expiryDate
-    }));
-  }
-  return validator(props, propertyName, ...rest);
-};
-var deprecated$1 = deprecated;
-
 const reader = new commonmark.Parser();
 const writer = new commonmark.HtmlRenderer({
   safe: true
@@ -869,7 +830,7 @@ function Markdown({
   const linkTarget = config?.link?.target ?? '_self';
   const paragraphClass = config?.paragraph?.className ?? '';
   if (allowList != null && blockList != null) {
-    logActionRequired$1('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
+    logActionRequired('Markdown supports only one of `allowList` or `blockList` to be used at a time. `blockList` will be ignored.');
   }
   const parser = nodes => {
     const parsed = reader.parse(nodes);
@@ -930,146 +891,99 @@ InlineMarkdown.defaultProps = {
 };
 var InlineMarkdown$1 = InlineMarkdown;
 
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-var ArrowPosition;
-(function (ArrowPosition) {
-  ArrowPosition["TOP_LEFT"] = "up-left";
-  ArrowPosition["TOP"] = "up-center";
-  ArrowPosition["TOP_RIGHT"] = "up-right";
-  ArrowPosition["BOTTOM_LEFT"] = "down-left";
-  ArrowPosition["BOTTOM"] = "down-center";
-  ArrowPosition["BOTTOM_RIGHT"] = "down-right";
-})(ArrowPosition || (ArrowPosition = {}));
-
-function withArrow(Alert, arrow) {
-  const AlertWithArrow = props => /*#__PURE__*/jsx(Alert, {
-    ...props,
-    className: classNames(props.className, arrowClasses(arrow)),
-    arrow: undefined
-  });
-  AlertWithArrow.propTypes = {
-    className: PropTypes.string
-  };
-  AlertWithArrow.defaultProps = {
-    className: undefined
-  };
-  return AlertWithArrow;
-}
-function arrowClasses(arrow) {
-  if (arrow) {
-    const classes = ['arrow'];
-    const {
-      BOTTOM,
-      BOTTOM_LEFT,
-      BOTTOM_RIGHT,
-      TOP,
-      TOP_RIGHT,
-      TOP_LEFT
-    } = ArrowPosition;
-    switch (arrow) {
-      case BOTTOM:
-        return classes.concat('arrow-bottom', 'arrow-center');
-      case BOTTOM_LEFT:
-        return classes.concat('arrow-bottom', 'arrow-left');
-      case BOTTOM_RIGHT:
-        return classes.concat('arrow-bottom', 'arrow-right');
-      case TOP:
-        return classes.concat('arrow-center');
-      case TOP_RIGHT:
-        return classes.concat('arrow-right');
-      case TOP_LEFT:
-      default:
-        return classes;
-    }
+var AlertArrowPosition;
+(function (AlertArrowPosition) {
+  AlertArrowPosition["TOP_LEFT"] = "up-left";
+  AlertArrowPosition["TOP"] = "up-center";
+  AlertArrowPosition["TOP_RIGHT"] = "up-right";
+  AlertArrowPosition["BOTTOM_LEFT"] = "down-left";
+  AlertArrowPosition["BOTTOM"] = "down-center";
+  AlertArrowPosition["BOTTOM_RIGHT"] = "down-right";
+})(AlertArrowPosition || (AlertArrowPosition = {}));
+function resolveType(type) {
+  switch (type) {
+    case 'success':
+      return 'positive';
+    case 'info':
+      return 'neutral';
+    case 'error':
+      return 'negative';
+    default:
+      return type;
   }
-  return '';
 }
-
-const deprecatedTypeMap$1 = {
-  [Sentiment.SUCCESS]: Sentiment.POSITIVE,
-  [Sentiment.INFO]: Sentiment.NEUTRAL,
-  [Sentiment.ERROR]: Sentiment.NEGATIVE
-};
-const Alert = props => {
-  const {
-    isModern
-  } = useTheme();
-  const iconTypeMap = {
-    [Sentiment.POSITIVE]: CheckCircle,
-    [Sentiment.NEUTRAL]: InfoCircle,
-    [Sentiment.WARNING]: Warning,
-    [Sentiment.NEGATIVE]: CrossCircle,
-    [Sentiment.PENDING]: Clock
-  };
-  const [shouldFire, setShouldFire] = useState(false);
-  const {
-    arrow,
-    action,
-    children,
-    className,
-    icon,
-    onDismiss,
-    message,
-    title,
-    type,
-    variant
-  } = props;
-  const closeButtonReference = useRef(null);
-  if (arrow) {
-    const AlertWithArrow = withArrow(Alert, arrow);
-    return /*#__PURE__*/jsx(AlertWithArrow, {
-      ...props
-    });
-  }
-  logActionRequired(props);
-  const mappedType = deprecatedTypeMap$1[type] || type;
-  const Icon = iconTypeMap[mappedType];
-  function generateIcon() {
-    if (icon) {
-      return /*#__PURE__*/jsx("div", {
-        className: "alert__icon",
-        children: icon
-      });
+function Alert({
+  arrow,
+  action,
+  children,
+  className,
+  dismissible,
+  icon,
+  onDismiss,
+  message,
+  size,
+  title,
+  type = 'neutral',
+  variant = 'desktop'
+}) {
+  useEffect(() => {
+    if (arrow !== undefined) {
+      logActionRequired("Alert component doesn't support 'arrow' anymore, use 'InlineAlert' instead.");
     }
-    if (isModern) {
-      return /*#__PURE__*/jsx(StatusIcon, {
-        size: Size.LARGE,
-        sentiment: mappedType
-      });
-    } else {
-      return /*#__PURE__*/jsx(Icon, {
-        size: 24
-      });
+  }, [arrow]);
+  useEffect(() => {
+    if (children !== undefined) {
+      logActionRequired("Alert component doesn't support 'children' anymore, use 'message' instead.");
     }
-  }
-  const handleTouchStart = () => setShouldFire(true);
-  const handleTouchMove = () => setShouldFire(false);
-  const handleTouchEnd = event => {
-    if (shouldFire && action) {
+  }, [children]);
+  useEffect(() => {
+    if (dismissible !== undefined) {
+      logActionRequired("Alert component doesn't support 'dismissible' anymore, use 'onDismiss' instead.");
+    }
+  }, [dismissible]);
+  useEffect(() => {
+    if (size !== undefined) {
+      logActionRequired("Alert component doesn't support 'size' anymore, please remove that prop.");
+    }
+  }, [size]);
+  const resolvedType = resolveType(type);
+  useEffect(() => {
+    if (resolvedType !== type) {
+      logActionRequired(`Alert component has deprecated '${type}' value for the 'type' prop. Please use '${resolvedType}' instead.`);
+    }
+  }, [resolvedType, type]);
+  const [shouldFire, setShouldFire] = useState(false);
+  const closeButtonReference = useRef(null);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames('alert d-flex', `alert-${resolvedType}`, arrow != null && alertArrowClassNames(arrow), className),
+    "data-testid": "alert",
+    onTouchStart: () => setShouldFire(true),
+    onTouchEnd: event => {
+      if (shouldFire && action &&
       // Check if current event is triggered from closeButton
-      if (closeButtonReference?.current && !closeButtonReference.current.contains(event.target)) {
-        if (action?.target === '_blank') {
-          window.top.open(action.href);
+      event.target instanceof Node && closeButtonReference.current && !closeButtonReference.current.contains(event.target)) {
+        if (action.target === '_blank') {
+          window.top?.open(action.href);
         } else {
-          window.top.location.assign(action.href);
+          window.top?.location.assign(action.href);
         }
       }
-    }
-    setShouldFire(false);
-  };
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames('alert d-flex', `alert-${mappedType}`, className),
-    "data-testid": "alert",
-    onTouchStart: handleTouchStart,
-    onTouchEnd: handleTouchEnd,
-    onTouchMove: handleTouchMove,
+      setShouldFire(false);
+    },
+    onTouchMove: () => setShouldFire(false),
     children: [/*#__PURE__*/jsxs("div", {
       className: classNames('alert__content', 'd-flex', 'flex-grow-1', variant),
       "data-testid": variant,
-      children: [generateIcon(), /*#__PURE__*/jsxs("div", {
+      children: [icon ? /*#__PURE__*/jsx("div", {
+        className: "alert__icon",
+        children: icon
+      }) : /*#__PURE__*/jsx(StatusIcon, {
+        size: Size.LARGE,
+        sentiment: resolvedType
+      }), /*#__PURE__*/jsxs("div", {
         className: "alert__message",
         children: [/*#__PURE__*/jsxs("div", {
-          role: Sentiment.NEGATIVE === mappedType ? 'alert' : 'status',
+          role: Sentiment.NEGATIVE === resolvedType ? 'alert' : 'status',
           children: [title && /*#__PURE__*/jsx(Title, {
             className: "m-b-1",
             type: Typography.TITLE_BODY,
@@ -1097,72 +1011,24 @@ const Alert = props => {
       onClick: onDismiss
     })]
   });
-};
-const deprecatedTypeMapMessage$1 = {
-  [Sentiment.SUCCESS]: 'Sentiment.POSITIVE',
-  [Sentiment.INFO]: 'Sentiment.NEUTRAL',
-  [Sentiment.ERROR]: 'Sentiment.NEGATIVE'
-};
-const deprecatedTypes$1 = Object.keys(deprecatedTypeMap$1);
-function logActionRequired({
-  size,
-  type
-}) {
-  logActionRequiredIf('Alert no longer supports any possible variations in size. Please remove the `size` prop.', !!size);
-  logActionRequiredIf(`Alert has deprecated the ${type} value for the \`type\` prop. Please update to ${deprecatedTypeMapMessage$1[type]}.`, deprecatedTypes$1.includes(type));
 }
-Alert.propTypes = {
-  /** An optional call to action to sit under the main body of the alert. If your label is short, use aria-label to provide more context */
-  action: PropTypes.shape({
-    'aria-label': PropTypes.string,
-    href: PropTypes.string.isRequired,
-    target: PropTypes.string,
-    text: PropTypes.node.isRequired
-  }),
-  className: PropTypes.string,
-  /** An optional icon. If not provided, we will default the icon to something appropriate for the type */
-  icon: PropTypes.element,
-  /** Title for the alert component */
-  title: PropTypes.string,
-  /** The main body of the alert. Accepts plain text and bold words specified with **double stars*/
-  message: requiredIf(PropTypes.node, ({
-    children
-  }) => !children),
-  /** The presence of the onDismiss handler will trigger the visibility of the close button */
-  onDismiss: PropTypes.func,
-  /** The type dictates which icon and colour will be used */
-  type: PropTypes.oneOf(['negative', 'neutral', 'positive', 'warning', 'info', 'error', 'success']),
-  variant: PropTypes.oneOf(['desktop', 'mobile']),
-  /** @deprecated no arrow for `Alert` component anymore, consider to use [`InlineAlert`](https://transferwise.github.io/neptune-web/components/alerts/InlineAlert) component */
-  arrow: deprecated$1(PropTypes.oneOf(['up-left', 'up-center', 'up-right', 'down-left', 'down-center', 'down-right']), {
-    component: 'Alert',
-    expiryDate: new Date('03-01-2021')
-  }),
-  /** @deprecated use `message` property instead */
-  children: deprecated$1(requiredIf(PropTypes.node, ({
-    message
-  }) => !message), {
-    component: 'Alert',
-    message: 'You should now use the `message` prop. Be aware `message` only accepts plain text or text with **bold** markdown.',
-    expiryDate: new Date('03-01-2021')
-  }),
-  /** @deprecated use `onDismiss` instead */
-  dismissible: deprecated$1(PropTypes.bool, {
-    component: 'Alert',
-    message: 'The Alert will now be considered dismissible if an `onDismiss` hander is present.',
-    expiryDate: new Date('03-01-2021')
-  })
-};
-Alert.defaultProps = {
-  action: undefined,
-  arrow: undefined,
-  className: undefined,
-  dismissible: undefined,
-  icon: undefined,
-  type: Sentiment.NEUTRAL,
-  variant: Variant.DESKTOP
-};
-var Alert$1 = Alert;
+function alertArrowClassNames(arrow) {
+  switch (arrow) {
+    case 'down-center':
+      return 'arrow arrow-bottom arrow-center';
+    case 'down-left':
+      return 'arrow arrow-bottom arrow-left';
+    case 'down-right':
+      return 'arrow arrow-bottom arrow-right';
+    case 'up-center':
+      return 'arrow arrow-center';
+    case 'up-right':
+      return 'arrow arrow-right';
+    case 'up-left':
+    default:
+      return 'arrow';
+  }
+}
 
 // TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
 var AvatarType;
@@ -1190,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;
   }
@@ -1388,6 +1254,7 @@ const FocusBoundary = ({
     })
   });
 };
+var FocusBoundary$1 = FocusBoundary;
 
 function withNextPortalWrapper(Component) {
   return function (props) {
@@ -1481,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;
@@ -1529,7 +1400,7 @@ const Dimmer = ({
       onExited: onExited,
       children: /*#__PURE__*/jsx(DimmerContentWrapper, {
         scrollBody: !transparent,
-        children: /*#__PURE__*/jsx(FocusBoundary, {
+        children: /*#__PURE__*/jsx(FocusBoundary$1, {
           children: /*#__PURE__*/jsx("div", {
             ref: dimmerReference,
             className: classNames('dimmer', {
@@ -2161,7 +2032,7 @@ var messages$b = defineMessages({
   }
 });
 
-const typeClassMap$1 = {
+const typeClassMap = {
   [ControlType.ACCENT]: 'btn-accent',
   [ControlType.POSITIVE]: 'btn-positive',
   [ControlType.NEGATIVE]: 'btn-negative'
@@ -2245,7 +2116,7 @@ const Button = /*#__PURE__*/forwardRef(({
   },
   // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeClassMap$1[newType],
+  typeClassMap[newType],
   // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   priorityClassMap[newPriority], className);
@@ -2630,7 +2501,7 @@ const CircularButton = ({
   type = ControlType.ACCENT,
   ...rest
 }) => {
-  const classes = classNames('btn np-btn', typeClassMap$1[type], priorityClassMap[priority]);
+  const classes = classNames('btn np-btn', typeClassMap[type], priorityClassMap[priority]);
   const iconElement = Number(icon.props.size) !== 24 ? /*#__PURE__*/cloneElement(icon, {
     size: 24
   }) : icon;
@@ -2665,11 +2536,17 @@ function getDayNames(locale, format = 'short') {
 
 // Makes sure that date is between min and max dates, returns a cloned min or max
 function moveToWithinRange(date, min, max) {
-  return isWithinRange(date, min, max) ? date : new Date(min && date < min ? +min : +max);
+  if (min && date < min) {
+    return new Date(min);
+  }
+  if (max && date > max) {
+    return new Date(max);
+  }
+  return date;
 }
 
 function isWithinRange(date, min, max) {
-  return !date || (!min || date >= min) && (!max || date <= max);
+  return (!min || date >= min) && (!max || date <= max);
 }
 
 const getMonthNames = (locale, format = 'long') => {
@@ -3193,7 +3070,7 @@ var dateTriggerMessages = defineMessages({
 
 const DateTrigger = ({
   selectedDate,
-  size,
+  size = Size.MEDIUM,
   placeholder,
   label,
   monthFormat,
@@ -3205,19 +3082,6 @@ const DateTrigger = ({
     locale,
     formatMessage
   } = useIntl();
-  const handleKeyDown = event => {
-    if (isKey({
-      keyType: 'Space',
-      event: event
-    }) || isKey({
-      keyType: 'Enter',
-      event: event
-    })) {
-      event.stopPropagation();
-      event.preventDefault();
-      onClear();
-    }
-  };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("button", {
       className: `btn btn-${size} btn-input np-date-trigger`,
@@ -3254,29 +3118,12 @@ const DateTrigger = ({
             event.stopPropagation();
             event.preventDefault();
             onClear();
-          },
-          onKeyPress: handleKeyDown
+          }
         })
       })]
     }) : null]
   });
 };
-DateTrigger.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  placeholder: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  monthFormat: PropTypes.oneOf(['short', 'long']).isRequired,
-  disabled: PropTypes.bool.isRequired,
-  onClick: PropTypes.func,
-  onClear: PropTypes.func
-};
-DateTrigger.defaultProps = {
-  selectedDate: null,
-  size: Size.MEDIUM,
-  onClear: undefined
-};
-var DateTrigger$1 = DateTrigger;
 
 var messages$8 = defineMessages({
   next: {
@@ -3358,18 +3205,6 @@ const DateHeader = ({
     })]
   });
 };
-DateHeader.propTypes = {
-  label: PropTypes.string,
-  onLabelClick: PropTypes.func,
-  onPreviousClick: PropTypes.func.isRequired,
-  onNextClick: PropTypes.func.isRequired,
-  dateMode: PropTypes.string
-};
-DateHeader.defaultProps = {
-  label: null,
-  onLabelClick: () => {}
-};
-var DateHeader$1 = DateHeader;
 
 function getFocusableTime(props) {
   return props.timeSpan.find(time => props.isActive(time)) || props.timeSpan.find(time => props.isNow(time) && !props.isDisabled(time)) || props.timeSpan.find(time => !props.isDisabled(time));
@@ -3455,10 +3290,9 @@ class DayCalendarTable extends PureComponent {
     let week = [];
     const weeks = [];
     let i;
-
     // Pad first week
     for (i = 1; i < firstDayOfMonth; i += 1) {
-      week.push(false);
+      week.push(-1);
     }
     // Fill in days
     for (i = 1; i <= daysInMonth; i += 1) {
@@ -3471,7 +3305,7 @@ class DayCalendarTable extends PureComponent {
     if (week.length > 0) {
       // Pad last week
       for (i = week.length; i < 7; i += 1) {
-        week.push(false);
+        week.push(-1);
       }
       weeks.push(week);
     }
@@ -3526,12 +3360,10 @@ class DayCalendarTable extends PureComponent {
     const {
       viewMonth,
       viewYear,
-      intl: {
-        locale
-      }
+      intl
     } = this.props;
     const weeks = this.getTableStructure();
-    let autoFocusDay = this.getAutofocusDay(weeks, viewMonth, viewYear);
+    const autoFocusDay = this.getAutofocusDay(weeks);
     return /*#__PURE__*/jsxs("table", {
       className: "table table-condensed table-bordered tw-date-lookup-calendar m-b-0",
       children: [/*#__PURE__*/jsx("thead", {
@@ -3557,12 +3389,12 @@ class DayCalendarTable extends PureComponent {
         children: weeks.map((week, weekIndex) => /*#__PURE__*/jsx("tr", {
           children: week.map((day, dayIndex) => /*#__PURE__*/jsx("td", {
             className: dayIndex > 4 ? 'weekend' : '',
-            children: day && /*#__PURE__*/jsx(TableLink, {
+            children: day !== -1 && /*#__PURE__*/jsx(TableLink, {
               item: day,
               type: "day",
-              title: formatDate(new Date(viewYear, viewMonth, day), locale, SHORT_DAY_FORMAT),
+              title: formatDate(new Date(viewYear, viewMonth, day), intl.locale, SHORT_DAY_FORMAT),
               autofocus: day === autoFocusDay,
-              longTitle: formatDate(new Date(viewYear, viewMonth, day), locale),
+              longTitle: formatDate(new Date(viewYear, viewMonth, day), intl.locale),
               active: this.isActive(day),
               disabled: this.isDisabled(day),
               today: this.isToday(day),
@@ -3574,19 +3406,6 @@ class DayCalendarTable extends PureComponent {
     });
   }
 }
-DayCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewMonth: PropTypes.number.isRequired,
-  viewYear: PropTypes.number.isRequired,
-  onSelect: PropTypes.func.isRequired
-};
-DayCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null
-};
 var DayCalendarTable$1 = injectIntl(DayCalendarTable);
 
 class DayCalendar extends PureComponent {
@@ -3626,7 +3445,7 @@ class DayCalendar extends PureComponent {
       onSelect
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(DateHeader$1, {
+      children: [/*#__PURE__*/jsx(DateHeader, {
         label: formatDate(new Date(viewYear, viewMonth), locale, {
           month: monthFormat,
           year: 'numeric'
@@ -3646,22 +3465,6 @@ class DayCalendar extends PureComponent {
     });
   }
 }
-DayCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewMonth: PropTypes.number.isRequired,
-  viewYear: PropTypes.number.isRequired,
-  monthFormat: PropTypes.oneOf([MonthFormat.LONG, MonthFormat.SHORT]).isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onLabelClick: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired
-};
-DayCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null
-};
 var DayCalendar$1 = injectIntl(DayCalendar);
 
 const ROWS$1 = 3;
@@ -3693,7 +3496,7 @@ const MonthCalendarTable = ({
     });
   };
   const isActive = month => {
-    return selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear();
+    return !!(selectedDate && month === selectedDate.getMonth() && viewYear === selectedDate.getFullYear());
   };
   const isThisMonth = month => {
     return viewYear === new Date().getFullYear() && month === new Date().getMonth();
@@ -3703,7 +3506,9 @@ const MonthCalendarTable = ({
     return !!(min && date < new Date(min.getFullYear(), min.getMonth()) || max && date > new Date(max.getFullYear(), max.getMonth()));
   };
   const autofocusMonth = (() => {
-    const months = [...new Array(ROWS$1 * COLS$1)].map((_, index) => index);
+    const months = Array.from({
+      length: ROWS$1 * COLS$1
+    }, (_, index) => index);
     return getFocusableTime({
       isActive,
       isNow: isThisMonth,
@@ -3717,33 +3522,23 @@ const MonthCalendarTable = ({
       className: "sr-only",
       children: /*#__PURE__*/jsx("tr", {
         children: /*#__PURE__*/jsx("th", {
-          colSpan: "3",
+          colSpan: COLS$1,
           children: placeholder
         })
       })
     }), /*#__PURE__*/jsx("tbody", {
-      children: [...new Array(ROWS$1)].map((row, rowIndex) => /*#__PURE__*/jsx("tr", {
-        children: [...new Array(COLS$1)].map((col, colIndex) => /*#__PURE__*/jsx("td", {
+      children: Array.from({
+        length: ROWS$1
+      }, (_, rowIndex) => /*#__PURE__*/jsx("tr", {
+        children: Array.from({
+          length: COLS$1
+        }, (_, colIndex) => /*#__PURE__*/jsx("td", {
           children: getLink(rowIndex * COLS$1 + colIndex)
         }, colIndex))
       }, rowIndex))
     })]
   });
 };
-MonthCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired
-};
-MonthCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null
-};
-var MonthCalendarTable$1 = MonthCalendarTable;
 
 class MonthCalendar extends PureComponent {
   onMonthSelect = month => {
@@ -3776,7 +3571,7 @@ class MonthCalendar extends PureComponent {
       onLabelClick
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(DateHeader$1, {
+      children: [/*#__PURE__*/jsx(DateHeader, {
         dateMode: formatMessage(messages$8.year),
         label: formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
@@ -3784,32 +3579,17 @@ class MonthCalendar extends PureComponent {
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousYear,
         onNextClick: this.selectNextYear
-      }), /*#__PURE__*/jsx(MonthCalendarTable$1, {
-        selectedDate,
-        min,
-        max,
-        viewYear,
-        placeholder,
+      }), /*#__PURE__*/jsx(MonthCalendarTable, {
+        selectedDate: selectedDate,
+        min: min,
+        max: max,
+        viewYear: viewYear,
+        placeholder: placeholder,
         onSelect: this.onMonthSelect
       })]
     });
   }
 }
-MonthCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onLabelClick: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired
-};
-MonthCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null
-};
 var MonthCalendar$1 = injectIntl(MonthCalendar);
 
 const ROWS = 5;
@@ -3851,7 +3631,9 @@ const YearCalendarTable = ({
     return !!(min && year < min.getFullYear() || max && year > max.getFullYear());
   };
   const autofocusYear = (() => {
-    const years = [...new Array(ROWS * COLS)].map((_, index) => startYear + index);
+    const years = Array.from({
+      length: ROWS * COLS
+    }, (_, index) => startYear + index);
     return getFocusableTime({
       isActive,
       isNow: isThisYear,
@@ -3865,33 +3647,23 @@ const YearCalendarTable = ({
       className: "sr-only",
       children: /*#__PURE__*/jsx("tr", {
         children: /*#__PURE__*/jsx("th", {
-          colSpan: "4",
+          colSpan: COLS,
           children: placeholder
         })
       })
     }), /*#__PURE__*/jsx("tbody", {
-      children: [...new Array(ROWS)].map((row, rowIndex) => /*#__PURE__*/jsx("tr", {
-        children: [...new Array(COLS)].map((col, colIndex) => /*#__PURE__*/jsx("td", {
+      children: Array.from({
+        length: ROWS
+      }, (_, rowIndex) => /*#__PURE__*/jsx("tr", {
+        children: Array.from({
+          length: COLS
+        }, (_, colIndex) => /*#__PURE__*/jsx("td", {
           children: getLink(startYear + rowIndex * COLS + colIndex)
         }, colIndex))
       }, rowIndex))
     })]
   });
 };
-YearCalendarTable.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired
-};
-YearCalendarTable.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null
-};
-var YearCalendarTable$1 = YearCalendarTable;
 
 class YearCalendar extends PureComponent {
   onYearSelect = year => {
@@ -3922,43 +3694,35 @@ class YearCalendar extends PureComponent {
       }
     } = this.props;
     return /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(DateHeader$1, {
+      children: [/*#__PURE__*/jsx(DateHeader, {
         dateMode: formatMessage(messages$8.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
-      }), /*#__PURE__*/jsx(YearCalendarTable$1, {
-        selectedDate,
-        min,
-        max,
-        viewYear,
-        placeholder,
+      }), /*#__PURE__*/jsx(YearCalendarTable, {
+        selectedDate: selectedDate,
+        min: min,
+        max: max,
+        viewYear: viewYear,
+        placeholder: placeholder,
         onSelect: this.onYearSelect
       })]
     });
   }
 }
-YearCalendar.propTypes = {
-  selectedDate: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  viewYear: PropTypes.number.isRequired,
-  placeholder: PropTypes.string.isRequired,
-  onSelect: PropTypes.func.isRequired,
-  onViewDateUpdate: PropTypes.func.isRequired
-};
-YearCalendar.defaultProps = {
-  selectedDate: null,
-  min: null,
-  max: null
-};
 var YearCalendar$1 = injectIntl(YearCalendar);
 
-const MODE = {
-  DAY: 'day',
-  MONTH: 'month',
-  YEAR: 'year'
-};
 class DateLookup extends PureComponent {
+  static defaultProps = {
+    value: null,
+    min: null,
+    max: null,
+    size: Size.MEDIUM,
+    placeholder: '',
+    label: '',
+    monthFormat: MonthFormat.LONG,
+    disabled: false,
+    clearable: false
+  };
   element = /*#__PURE__*/createRef();
   dropdown = /*#__PURE__*/createRef();
   constructor(props) {
@@ -3971,7 +3735,7 @@ class DateLookup extends PureComponent {
       viewMonth: (props.value || new Date()).getMonth(),
       viewYear: (props.value || new Date()).getFullYear(),
       open: false,
-      mode: MODE.DAY,
+      mode: 'day',
       isMobile: false
     };
   }
@@ -3979,20 +3743,20 @@ class DateLookup extends PureComponent {
     const propsSelected = getStartOfDay(props.value);
     const propsMin = getStartOfDay(props.min);
     const propsMax = getStartOfDay(props.max);
-    const hasSelectedChanged = +state.selectedDate !== +propsSelected;
-    const hasMinChanged = +state.min !== +propsMin;
-    const hasMaxChanged = +state.max !== +propsMax;
+    const hasSelectedChanged = state.selectedDate?.getTime() !== propsSelected?.getTime();
+    const hasMinChanged = state.min?.getTime() !== propsMin?.getTime();
+    const hasMaxChanged = state.max?.getTime() !== propsMax?.getTime();
     if (hasSelectedChanged || hasMinChanged || hasMaxChanged) {
       const selectedDate = hasSelectedChanged ? propsSelected : state.selectedDate;
       const min = hasMinChanged ? propsMin : state.min;
       const max = hasMaxChanged ? propsMax : state.max;
-      // make sure that selected date is within allowed range
-      if (!isWithinRange(selectedDate, min, max)) {
+      if (selectedDate && !isWithinRange(selectedDate, min, max)) {
         props.onChange(moveToWithinRange(selectedDate, min, max));
         return null;
       }
-      const viewMonth = (selectedDate || new Date()).getMonth();
-      const viewYear = (selectedDate || new Date()).getFullYear();
+      const viewDateThatIsWithinRange = selectedDate || (min || max) && moveToWithinRange(new Date(), min, max) || new Date();
+      const viewMonth = viewDateThatIsWithinRange.getMonth();
+      const viewYear = viewDateThatIsWithinRange.getFullYear();
       return {
         selectedDate,
         min,
@@ -4004,12 +3768,12 @@ class DateLookup extends PureComponent {
     return null;
   }
   componentDidUpdate(previousProps) {
-    if (+this.props.value !== +previousProps.value && this.state.open) {
+    if (this.props.value?.getTime() !== previousProps.value?.getTime() && this.state.open) {
       this.focusOn('.active');
     }
-    this.mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);
+    const mediaQuery = window.matchMedia(`(max-width: ${Breakpoint.SMALL}px)`);
     this.setState({
-      isMobile: this.mediaQuery.matches
+      isMobile: mediaQuery.matches
     });
   }
   componentWillUnmount() {
@@ -4022,7 +3786,7 @@ class DateLookup extends PureComponent {
     } = this.props;
     this.setState({
       open: true,
-      mode: MODE.DAY
+      mode: 'day'
     });
     if (onFocus) {
       onFocus();
@@ -4111,17 +3875,19 @@ class DateLookup extends PureComponent {
     }
     let date;
     if (selectedDate) {
-      date = new Date(mode === MODE.YEAR ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(), mode === MODE.MONTH ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(), mode === MODE.DAY ? selectedDate.getDate() + daysToAdd : selectedDate.getDate());
+      date = new Date(mode === 'year' ? selectedDate.getFullYear() + yearsToAdd : selectedDate.getFullYear(), mode === 'month' ? selectedDate.getMonth() + monthsToAdd : selectedDate.getMonth(), mode === 'day' ? selectedDate.getDate() + daysToAdd : selectedDate.getDate());
     } else {
       date = getStartOfDay(new Date());
     }
-    date = moveToWithinRange(date, min, max);
-    if (+date !== +selectedDate) {
+    if (date) {
+      date = moveToWithinRange(date, min, max);
+    }
+    if (date?.getTime() !== selectedDate?.getTime()) {
       this.props.onChange(date);
     }
   };
   focusOn = (preferredElement, fallbackElement) => {
-    const element = this.element.current.querySelector(preferredElement);
+    const element = this.element.current?.querySelector(preferredElement);
     if (element) {
       element.focus();
     } else if (fallbackElement) {
@@ -4135,9 +3901,9 @@ class DateLookup extends PureComponent {
       this.focusOn('.active', '.today');
     });
   };
-  switchToDays = () => this.switchMode(MODE.DAY);
-  switchToMonths = () => this.switchMode(MODE.MONTH);
-  switchToYears = () => this.switchMode(MODE.YEAR);
+  switchToDays = () => this.switchMode('day');
+  switchToMonths = () => this.switchMode('month');
+  switchToYears = () => this.switchMode('year');
   handleSelectedDateUpdate = selectedDate => {
     this.setState({
       selectedDate
@@ -4174,31 +3940,31 @@ class DateLookup extends PureComponent {
       className: classNames({
         'p-a-1': !isMobile
       }),
-      children: [mode === MODE.DAY && /*#__PURE__*/jsx(DayCalendar$1, {
-        selectedDate,
-        min,
-        max,
-        viewMonth,
-        viewYear,
-        monthFormat,
+      children: [mode === 'day' && /*#__PURE__*/jsx(DayCalendar$1, {
+        selectedDate: selectedDate,
+        min: min,
+        max: max,
+        viewMonth: viewMonth,
+        viewYear: viewYear,
+        monthFormat: monthFormat,
         onSelect: this.handleSelectedDateUpdate,
         onLabelClick: this.switchToYears,
         onViewDateUpdate: this.handleViewDateUpdate
-      }), mode === MODE.MONTH && /*#__PURE__*/jsx(MonthCalendar$1, {
-        selectedDate,
-        min,
-        max,
-        viewYear,
-        placeholder,
+      }), mode === 'month' && /*#__PURE__*/jsx(MonthCalendar$1, {
+        selectedDate: selectedDate,
+        min: min,
+        max: max,
+        viewYear: viewYear,
+        placeholder: placeholder,
         onSelect: this.switchToDays,
         onLabelClick: this.switchToYears,
         onViewDateUpdate: this.handleViewDateUpdate
-      }), mode === MODE.YEAR && /*#__PURE__*/jsx(YearCalendar$1, {
-        selectedDate,
-        min,
-        max,
-        viewYear,
-        placeholder,
+      }), mode === 'year' && /*#__PURE__*/jsx(YearCalendar$1, {
+        selectedDate: selectedDate,
+        min: min,
+        max: max,
+        viewYear: viewYear,
+        placeholder: placeholder,
         onSelect: this.switchToMonths,
         onViewDateUpdate: this.handleViewDateUpdate
       })]
@@ -4224,21 +3990,20 @@ class DateLookup extends PureComponent {
       value
     } = this.props;
     return /*#__PURE__*/jsxs("div", {
-      // eslint-disable-line jsx-a11y/no-static-element-interactions
       ref: this.element,
       id: this.props.id,
       "aria-labelledby": ariaLabelledBy,
       className: "input-group",
       onKeyDown: this.handleKeyDown,
-      children: [/*#__PURE__*/jsx(DateTrigger$1, {
-        selectedDate,
-        size,
-        placeholder,
-        label,
-        monthFormat,
-        disabled,
+      children: [/*#__PURE__*/jsx(DateTrigger, {
+        selectedDate: selectedDate,
+        size: size,
+        placeholder: placeholder,
+        label: label,
+        monthFormat: monthFormat,
+        disabled: disabled || false,
         onClick: this.open,
-        onClear: !disabled && clearable && value ? this.handleClear : null
+        onClear: !disabled && clearable && value ? this.handleClear : undefined
       }), /*#__PURE__*/jsx(ResponsivePanel$1, {
         anchorRef: this.element,
         open: open,
@@ -4250,36 +4015,6 @@ class DateLookup extends PureComponent {
     });
   }
 }
-DateLookup.propTypes = {
-  id: PropTypes.string,
-  value: PropTypes.instanceOf(Date),
-  min: PropTypes.instanceOf(Date),
-  max: PropTypes.instanceOf(Date),
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  placeholder: PropTypes.string,
-  label: PropTypes.string,
-  'aria-labelledby': PropTypes.string,
-  monthFormat: PropTypes.oneOf(['long', 'short']),
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  clearable: PropTypes.bool
-};
-DateLookup.defaultProps = {
-  value: null,
-  min: null,
-  max: null,
-  size: Size.MEDIUM,
-  placeholder: '',
-  label: '',
-  monthFormat: MonthFormat.LONG,
-  disabled: false,
-  onFocus: null,
-  onBlur: null,
-  clearable: false
-};
-var DateLookup$1 = DateLookup;
 
 const NavigationOption = /*#__PURE__*/forwardRef(({
   as: component = 'button',
@@ -4596,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 {
@@ -5318,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"
     })]
   });
 };
@@ -5438,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);
@@ -5446,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.
@@ -5852,8 +5083,9 @@ function resolvePlacement(preferredPlacement) {
     case 'bottom-left':
     case 'bottom-right':
       return 'bottom';
+    default:
+      return preferredPlacement;
   }
-  return preferredPlacement;
 }
 function Popover$1({
   children,
@@ -5866,7 +5098,7 @@ function Popover$1({
   const resolvedPlacement = resolvePlacement(preferredPlacement);
   useEffect(() => {
     if (resolvedPlacement !== preferredPlacement) {
-      logActionRequired$1(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
+      logActionRequired(`Popover has deprecated ${preferredPlacement} value for the 'preferredPlacement' prop. Please use ${resolvedPlacement} instead.`);
     }
   }, [preferredPlacement, resolvedPlacement]);
   const anchorReference = useRef(null);
@@ -5971,49 +5203,22 @@ const Info = ({
   });
 };
 
-const typeClassMap = {
-  [Sentiment.ERROR]: 'danger',
-  [Sentiment.NEGATIVE]: 'danger'
-};
-const InlineAlert = ({
+function InlineAlert({
   id,
-  type = Sentiment.NEUTRAL,
+  type = 'neutral',
   className,
   children
-}) => {
-  const {
-    isModern
-  } = useTheme();
-  const typeClass = `alert-${typeClassMap[type] || type}`;
-  if (isModern) {
-    return /*#__PURE__*/jsxs("div", {
-      role: "alert",
-      id: id,
-      className: classNames('alert alert-detach', typeClass, className),
-      children: [(type === 'error' || type === 'negative') && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
-        children: children
-      })]
-    });
-  }
-  const getAlertContents = ({
-    children,
-    className
-  }) => {
-    return /*#__PURE__*/jsx("div", {
-      role: "alert",
-      id: id,
-      className: classNames('alert alert-detach p-x-2 p-y-1', typeClass, className),
+}) {
+  const danger = type === 'negative' || type === 'error';
+  return /*#__PURE__*/jsxs("div", {
+    role: "alert",
+    id: id,
+    className: classNames('alert alert-detach', `alert-${danger ? 'danger' : type}`, className),
+    children: [danger && /*#__PURE__*/jsx(AlertCircle, {}), /*#__PURE__*/jsx("div", {
       children: children
-    });
-  };
-  const AlertWithArrow = withArrow(getAlertContents, ArrowPosition.TOP_LEFT);
-  return /*#__PURE__*/jsx(AlertWithArrow, {
-    id,
-    type,
-    className,
-    children
+    })]
   });
-};
+}
 
 /*
  * Inspired by:
@@ -6112,9 +5317,9 @@ function InputAddon({
   const ref = useRef(null);
   useResizeObserver(ref, entry => {
     // TODO: Remove fallback once most browsers support `borderBoxSize`
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (entry.borderBoxSize != null) {
-      setInputPadding(entry.borderBoxSize[0].inlineSize);
+    const inlineSize = entry.borderBoxSize?.[0]?.inlineSize;
+    if (inlineSize != null) {
+      setInputPadding(inlineSize);
     } else {
       const targetStyle = getComputedStyle(entry.target);
       setInputPadding(entry.contentRect.width + Number.parseFloat(targetStyle.paddingInlineStart) + Number.parseFloat(targetStyle.paddingInlineEnd));
@@ -6261,35 +5466,33 @@ function BottomSheet({
         theme: "personal",
         screenMode: theme === 'personal' ? screenMode : 'light',
         isNotRootProvider: true,
-        children: /*#__PURE__*/jsx(Transition, {
+        children: /*#__PURE__*/jsxs(Transition, {
           show: open,
           className: "np-bottom-sheet-v2-container",
           beforeEnter: () => {
             setFloatingKey(prev => prev + 1);
           },
           afterLeave: onCloseEnd,
-          children: /*#__PURE__*/jsxs(FocusBoundary, {
-            children: [/*#__PURE__*/jsx(Transition.Child, {
-              enter: "np-bottom-sheet-v2-backdrop-container--enter",
-              enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
-              leave: "np-bottom-sheet-v2-backdrop-container--leave",
-              leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
-              children: /*#__PURE__*/jsx("div", {
-                className: "np-bottom-sheet-v2-backdrop"
-              })
-            }), /*#__PURE__*/jsx("div", {
-              className: "np-bottom-sheet-v2",
-              children: /*#__PURE__*/jsx(Transition.Child, {
-                className: "np-bottom-sheet-v2-content",
-                enter: "np-bottom-sheet-v2-content--enter",
-                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(Transition.Child, {
+            enter: "np-bottom-sheet-v2-backdrop-container--enter",
+            enterFrom: "np-bottom-sheet-v2-backdrop-container--enter-from",
+            leave: "np-bottom-sheet-v2-backdrop-container--leave",
+            leaveTo: "np-bottom-sheet-v2-backdrop-container--leave-to",
+            children: /*#__PURE__*/jsx("div", {
+              className: "np-bottom-sheet-v2-backdrop"
+            })
+          }), /*#__PURE__*/jsx("div", {
+            className: "np-bottom-sheet-v2",
+            children: /*#__PURE__*/jsx(Transition.Child, {
+              className: "np-bottom-sheet-v2-content",
+              enter: "np-bottom-sheet-v2-content--enter",
+              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(FocusScope, {
                 children: /*#__PURE__*/jsx(FloatingFocusManager, {
                   context: context,
                   initialFocus: initialFocusRef,
-                  guards: false,
-                  modal: false,
                   children: /*#__PURE__*/jsxs("div", {
                     // Force inner state invalidation on open
                     ref: refs.setFloating,
@@ -6318,8 +5521,8 @@ function BottomSheet({
                   }, floatingKey)
                 })
               })
-            })]
-          })
+            })
+          })]
         })
       })
     })]
@@ -6417,11 +5620,9 @@ function Popover({
             setFloatingKey(prev => prev + 1);
           },
           afterLeave: onCloseEnd,
-          children: /*#__PURE__*/jsx(FocusBoundary, {
+          children: /*#__PURE__*/jsx(FocusScope, {
             children: /*#__PURE__*/jsx(FloatingFocusManager, {
               context: context,
-              guards: false,
-              modal: false,
               children: /*#__PURE__*/jsx("div", {
                 // Force inner state invalidation on open
                 ref: refs.setFloating,
@@ -6542,6 +5743,7 @@ const defaultRenderTrigger = ({
         })
       })]
     }),
+    initialContentWidth: 24 + 4,
     padding: 'sm'
   },
   disabled: disabled,
@@ -6825,6 +6027,7 @@ function SelectInputOptions({
       })
     }) : null, /*#__PURE__*/jsxs("section", {
       ref: listboxContainerRef,
+      tabIndex: -1,
       className: classNames('np-select-input-listbox-container', items.some(item => item.type === 'group') && 'np-select-input-listbox-container--has-group'),
       children: [resultsEmpty ? /*#__PURE__*/jsxs("div", {
         id: statusId,
@@ -7450,7 +6653,6 @@ const Loader = ({
       }, 1000);
     }
     return () => {
-      // eslint-disable-next-line fp/no-mutation
       cancelled = true;
       clearTimeout(timeout);
     };
@@ -9387,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) {
@@ -9473,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}`;
@@ -9746,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,
@@ -10399,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) {
@@ -10627,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, {
@@ -10743,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) {
@@ -10759,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
@@ -10772,6 +9973,7 @@ const SegmentedControl = ({
     }
   };
   useEffect(() => {
+    setAnimate(true);
     updateSegmentPosition();
     const handleWindowSizeChange = () => {
       setAnimate(false);
@@ -10782,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",
@@ -10797,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);
+      })
     })
   });
 };
@@ -14050,7 +13249,7 @@ function CriticalCommsBanner({
         type: AvatarType.ICON,
         className: classNames(isModern ? 'm-r-2' : 'm-r-1'),
         backgroundColor: isModern ? 'var(--color-sentiment-negative)' : 'var(--color-background-negative)',
-        children: isModern ? /*#__PURE__*/jsx(AlertCircleFill, {}) : /*#__PURE__*/jsx(Alert$2, {
+        children: isModern ? /*#__PURE__*/jsx(AlertCircleFill, {}) : /*#__PURE__*/jsx(Alert$1, {
           size: 24
         })
       }), /*#__PURE__*/jsxs("div", {
@@ -14834,10 +14033,10 @@ var th = {
 	"neptune.ClearButton.ariaLabel": "ล้าง",
 	"neptune.CloseButton.ariaLabel": "ปิด",
 	"neptune.DateInput.day.label": "วัน",
-	"neptune.DateInput.day.placeholder": "DD",
+	"neptune.DateInput.day.placeholder": "วัน",
 	"neptune.DateInput.month.label": "เดือน",
 	"neptune.DateInput.year.label": "ปี",
-	"neptune.DateInput.year.placeholder": "YYYY",
+	"neptune.DateInput.year.placeholder": "ปี",
 	"neptune.DateLookup.day": "วัน",
 	"neptune.DateLookup.goTo20YearView": "ไปที่มุมมอง 20 ปี",
 	"neptune.DateLookup.month": "เดือน",
@@ -15139,5 +14338,5 @@ const translations = {
   'zh-HK': zhHK
 };
 
-export { Accordion, ActionButton, ActionOption, Alert$1 as Alert, ArrowPosition as AlertArrowPosition, 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$1 as 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