@transferwise/components 45.26.1 → 45.26.3

package/build/index.js

@@ -834,7 +834,7 @@ const ActionOption = ({
   });
 };
 
-var messages$b = reactIntl.defineMessages({
+var messages$c = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.CloseButton.ariaLabel"
   }
@@ -850,7 +850,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   testId
 }, reference) {
   const intl = reactIntl.useIntl();
-  ariaLabel ??= intl.formatMessage(messages$b.ariaLabel);
+  ariaLabel ??= intl.formatMessage(messages$c.ariaLabel);
   const Icon = filled ? icons.CrossCircleFill : icons.Cross;
   return /*#__PURE__*/jsxRuntime.jsx("button", {
     ref: reference,
@@ -870,7 +870,7 @@ const CloseButton = /*#__PURE__*/React.forwardRef(function CloseButton({
   });
 });
 
-var messages$a = reactIntl.defineMessages({
+var messages$b = reactIntl.defineMessages({
   opensInNewTab: {
     id: "neptune.Link.opensInNewTab"
   }
@@ -899,7 +899,7 @@ const Link = ({
     onClick: onClick,
     ...props,
     children: [children, " ", isBlank && /*#__PURE__*/jsxRuntime.jsx(icons.NavigateAway, {
-      title: formatMessage(messages$a.opensInNewTab)
+      title: formatMessage(messages$b.opensInNewTab)
     })]
   });
 };
@@ -2346,7 +2346,7 @@ ProcessIndicator.defaultProps = {
 };
 var ProcessIndicator$1 = ProcessIndicator;
 
-var messages$9 = reactIntl.defineMessages({
+var messages$a = reactIntl.defineMessages({
   loadingAriaLabel: {
     id: "neptune.Button.loadingAriaLabel"
   }
@@ -2465,7 +2465,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     className: classes,
     ...props,
     "aria-live": loading ? 'polite' : 'off',
-    "aria-label": loading ? intl.formatMessage(messages$9.loadingAriaLabel) : rest['aria-label'],
+    "aria-label": loading ? intl.formatMessage(messages$a.loadingAriaLabel) : rest['aria-label'],
     children: [children, loading && /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator$1, {
       size: processIndicatorSize(),
       className: "btn-loader"
@@ -2758,7 +2758,7 @@ const Chip = ({
   }, value);
 };
 
-var messages$8 = reactIntl.defineMessages({
+var messages$9 = reactIntl.defineMessages({
   ariaLabel: {
     id: "neptune.Chips.ariaLabel"
   }
@@ -2790,7 +2790,7 @@ const Chips = ({
         value: chip.value,
         label: chip.label,
         closeButton: {
-          'aria-label': intl.formatMessage(messages$8.ariaLabel, {
+          'aria-label': intl.formatMessage(messages$9.ariaLabel, {
             choice: chip.label
           })
         },
@@ -2898,7 +2898,7 @@ const validDateObject = dateObject => dateObject instanceof Date && !isNaN(dateO
 
 const isMonthAndYearFormat = dateString => validDateString(dateString) && dateString.split('-').length < 3;
 
-var messages$7 = reactIntl.defineMessages({
+var messages$8 = reactIntl.defineMessages({
   monthLabel: {
     id: "neptune.DateInput.month.label"
   },
@@ -2978,12 +2978,12 @@ const DateInput = ({
   const [month, setMonth] = React.useState(() => getExplodedDate('month'));
   const [year, setYear] = React.useState(() => getExplodedDate('year'));
   const [lastBroadcastedValue, setLastBroadcastedValue] = React.useState(getDateObject);
-  dayLabel = dayLabel || formatMessage(messages$7.dayLabel);
-  monthLabel = monthLabel || formatMessage(messages$7.monthLabel);
-  yearLabel = yearLabel || formatMessage(messages$7.yearLabel);
+  dayLabel = dayLabel || formatMessage(messages$8.dayLabel);
+  monthLabel = monthLabel || formatMessage(messages$8.monthLabel);
+  yearLabel = yearLabel || formatMessage(messages$8.yearLabel);
   placeholders = {
     day: placeholders?.day || 'DD',
-    month: placeholders?.month || formatMessage(messages$7.monthLabel),
+    month: placeholders?.month || formatMessage(messages$8.monthLabel),
     year: placeholders?.year || 'YYYY'
   };
   const getDateAsString = date => {
@@ -3516,7 +3516,7 @@ DateTrigger.defaultProps = {
 };
 var DateTrigger$1 = DateTrigger;
 
-var messages$6 = reactIntl.defineMessages({
+var messages$7 = reactIntl.defineMessages({
   next: {
     id: "neptune.DateLookup.next"
   },
@@ -3562,7 +3562,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsxRuntime.jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${intl.formatMessage(messages$6.previous)} ${dateMode}`,
+        "aria-label": `${intl.formatMessage(messages$7.previous)} ${dateMode}`,
         onClick: onPreviousClick,
         children: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
           orientation: exports.Position.LEFT,
@@ -3576,7 +3576,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsxRuntime.jsx("button", {
         type: "button",
         className: `tw-date-lookup-header-current ${buttonClasses}`,
-        "aria-label": intl.formatMessage(messages$6.goTo20YearView),
+        "aria-label": intl.formatMessage(messages$7.goTo20YearView),
         onClick: onLabelClick,
         children: label
       })
@@ -3585,7 +3585,7 @@ const DateHeader = ({
       children: /*#__PURE__*/jsxRuntime.jsx("button", {
         type: "button",
         className: `d-inline-flex ${buttonClasses}`,
-        "aria-label": `${reactIntl.useIntl().formatMessage(messages$6.next)} ${dateMode}`,
+        "aria-label": `${reactIntl.useIntl().formatMessage(messages$7.next)} ${dateMode}`,
         onClick: onNextClick,
         children: /*#__PURE__*/jsxRuntime.jsx(Chevron$1, {
           orientation: exports.Position.RIGHT,
@@ -3652,7 +3652,7 @@ const TableLink = ({
   };
   const calculateAriaLabel = () => {
     if (active) {
-      return `${longTitle || title || ''}, ${intl.formatMessage(messages$6.selected)} ${intl.formatMessage(messages$6[type])}`;
+      return `${longTitle || title || ''}, ${intl.formatMessage(messages$7.selected)} ${intl.formatMessage(messages$7[type])}`;
     }
     return longTitle || title;
   };
@@ -3869,7 +3869,7 @@ class DayCalendar extends React.PureComponent {
           month: monthFormat,
           year: 'numeric'
         }),
-        dateMode: formatMessage(messages$6.month),
+        dateMode: formatMessage(messages$7.month),
         onLabelClick: onLabelClick,
         onPreviousClick: this.selectPreviousMonth,
         onNextClick: this.selectNextMonth
@@ -4015,7 +4015,7 @@ class MonthCalendar extends React.PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$6.year),
+        dateMode: formatMessage(messages$7.year),
         label: formatting.formatDate(new Date(viewYear, 0), locale, {
           year: 'numeric'
         }),
@@ -4161,7 +4161,7 @@ class YearCalendar extends React.PureComponent {
     } = this.props;
     return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx(DateHeader$1, {
-        dateMode: formatMessage(messages$6.twentyYears),
+        dateMode: formatMessage(messages$7.twentyYears),
         onPreviousClick: this.selectPreviousYears,
         onNextClick: this.selectNextYears
       }), /*#__PURE__*/jsxRuntime.jsx(YearCalendarTable$1, {
@@ -5813,7 +5813,7 @@ const Stepper = ({
   });
 };
 
-var messages$5 = reactIntl.defineMessages({
+var messages$6 = reactIntl.defineMessages({
   back: {
     id: "neptune.FlowNavigation.back"
   }
@@ -5905,16 +5905,19 @@ const FlowNavigation = ({
       }),
       leftContent: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [isSmall && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(BackButton$1, {
-          "aria-label": intl.formatMessage(messages$5.back),
+          "aria-label": intl.formatMessage(messages$6.back),
           onClick: onGoBack
-        }) : logo, isSmall && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel, {
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "np-flow-header__left",
+          children: logo
+        }), isSmall && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel, {
           className: "m-x-1",
           labels: steps.map(step => step.label),
           activeLabel: activeStep
         })]
       }),
       rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('d-flex', 'align-items-center', {
+        className: classNames__default.default('np-flow-header__right', 'd-flex', 'align-items-center', 'justify-content-end', {
           'order-2': isLarge
         }),
         children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -6172,7 +6175,7 @@ const Popover$1 = ({
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: isModern ? 'np-popover__content np-text-default-body' : 'np-popover__content',
         "aria-hidden": !open,
-        role: "tooltip",
+        role: "dialog",
         children: [title && /*#__PURE__*/jsxRuntime.jsx(Title, {
           type: exports.Typography.TITLE_BODY,
           className: "m-b-1",
@@ -6211,6 +6214,12 @@ const deprecatedPlacements = {
 };
 var Popover$2 = Popover$1;
 
+var messages$5 = reactIntl.defineMessages({
+  ariaLabel: {
+    id: "neptune.Info.ariaLabel"
+  }
+});
+
 const Info = ({
   className = undefined,
   content = undefined,
@@ -6221,7 +6230,9 @@ const Info = ({
   'aria-label': ariaLabel,
   preferredPlacement = exports.Position.BOTTOM
 }) => {
+  const intl = reactIntl.useIntl();
   const [open, setOpen] = React.useState(false);
+  ariaLabel ??= intl.formatMessage(messages$5.ariaLabel);
   const isModal = presentation === exports.InfoPresentation.MODAL;
   const isSmall = size === exports.Size.SMALL;
   const buttonProps = {
@@ -10863,6 +10874,7 @@ var en = {
 	"neptune.DateLookup.twentyYears": "20 years",
 	"neptune.DateLookup.year": "year",
 	"neptune.FlowNavigation.back": "back to previous step",
+	"neptune.Info.ariaLabel": "More information",
 	"neptune.Link.opensInNewTab": "(opens in new tab)",
 	"neptune.MoneyInput.Select.placeholder": "Select an option...",
 	"neptune.Select.searchPlaceholder": "Search...",
@@ -11464,7 +11476,6 @@ const Summary = ({
   help,
   icon,
   illustration = null,
-  // @ts-expect-error help is old and deprecated prop
   info = help,
   status,
   title
@@ -12501,6 +12512,7 @@ const Option = props => {
     children: /*#__PURE__*/jsxRuntime.jsxs("a", {
       className: "dropdown-item",
       href: "#",
+      tabIndex: -1,
       onClick: onClick,
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
         children: hightlight(label, query)