@transferwise/components 46.0.8 → 46.1.1

package/README.md

@@ -10,17 +10,15 @@ This is the Neptune Web React component library. It uses [Neptune CSS](https://g
 
 Neptune Components are published to npm as [@transferwise/components](https://www.npmjs.com/package/@transferwise/components).
 
-Install `@transferwise/components` and its peer dependencies. **Note:** currency-flags is only required if you're using the [Money Input](https://transferwise.github.io/neptune-web/components/MoneyInput) or if you're using flags on the [Select](https://transferwise.github.io/neptune-web/components/Select).
-
 ```
 # pnpm
-pnpm install @transferwise/components react react-dom prop-types currency-flags
+pnpm install @transferwise/components react react-dom prop-types @wise/art
 
 # yarn
-yarn add @transferwise/components react react-dom prop-types currency-flags
+yarn add @transferwise/components react react-dom prop-types @wise/art
 
 # npm
-npm install @transferwise/components react react-dom prop-types currency-flags
+npm install @transferwise/components react react-dom prop-types @wise/art
 ```
 
 ```js

package/build/index.esm.js

@@ -4424,7 +4424,7 @@ class DateLookup extends PureComponent {
   }
 }
 DateLookup.propTypes = {
-  value: PropTypes.instanceOf(Date).isRequired,
+  value: PropTypes.instanceOf(Date),
   min: PropTypes.instanceOf(Date),
   max: PropTypes.instanceOf(Date),
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
@@ -4438,6 +4438,7 @@ DateLookup.propTypes = {
   clearable: PropTypes.bool
 };
 DateLookup.defaultProps = {
+  value: null,
   min: null,
   max: null,
   size: Size.MEDIUM,
@@ -10578,7 +10579,6 @@ var messages$2 = defineMessages({
   }
 });
 
-// Option.tsx NEW
 function Option$1({
   label,
   currency = '',
@@ -10591,13 +10591,12 @@ function Option$1({
   const {
     isModern
   } = 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__*/cloneElement(icon, {
     size: 24,
     className: 'tw-icon'
-  }) : currency && /*#__PURE__*/jsx("i", {
-    className: currencyClassNames
+  }) : currency && /*#__PURE__*/jsx(Flag, {
+    code: currency.toLowerCase(),
+    intrinsicSize: 24
   });
   const titleAndNoteElement = /*#__PURE__*/jsxs(Body, {
     as: "span",
@@ -12470,7 +12469,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;
@@ -12510,13 +12509,13 @@ const Option = props => {
       tabIndex: -1,
       onClick: onClick,
       children: [/*#__PURE__*/jsx("span", {
-        children: hightlight(label, query)
+        children: highlight(label, query)
       }), note && /*#__PURE__*/jsx("span", {
         className: "np-text-body-default m-l-1",
         children: note
       }), secondary && /*#__PURE__*/jsx("span", {
         className: "np-text-body-default text-ellipsis",
-        children: secondary
+        children: highlight(secondary, query)
       })]
     })
   });