@transferwise/components 46.1.0 → 46.1.1

package/build/index.js

@@ -10613,7 +10613,6 @@ var messages$2 = reactIntl.defineMessages({
   }
 });
 
-// Option.tsx NEW
 function Option$1({
   label,
   currency = '',
@@ -10626,13 +10625,12 @@ function Option$1({
   const {
     isModern
   } = componentsTheming.useTheme();
-  const style = classes => classes.map(className => classNames[className] || className).join(' ');
-  const currencyClassNames = currency ? style(['currency-flag', `currency-flag-${currency.toLowerCase()}`]) : undefined;
   const iconElement = icon ? /*#__PURE__*/React.cloneElement(icon, {
     size: 24,
     className: 'tw-icon'
-  }) : currency && /*#__PURE__*/jsxRuntime.jsx("i", {
-    className: currencyClassNames
+  }) : currency && /*#__PURE__*/jsxRuntime.jsx(art.Flag, {
+    code: currency.toLowerCase(),
+    intrinsicSize: 24
   });
   const titleAndNoteElement = /*#__PURE__*/jsxRuntime.jsxs(Body, {
     as: "span",
@@ -12505,7 +12503,7 @@ TypeaheadInput.defaultProps = {
   selected: []
 };
 
-function hightlight(value, query) {
+function highlight(value, query) {
   if (value && query) {
     const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
     const highlightEnd = highlightStart + query.trim().length;
@@ -12545,13 +12543,13 @@ const Option = props => {
       tabIndex: -1,
       onClick: onClick,
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        children: hightlight(label, query)
+        children: highlight(label, query)
       }), note && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "np-text-body-default m-l-1",
         children: note
       }), secondary && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "np-text-body-default text-ellipsis",
-        children: hightlight(secondary, query)
+        children: highlight(secondary, query)
       })]
     })
   });