@transferwise/components 0.0.0-experimental-f29ed58 → 0.0.0-experimental-6371be6

package/build/index.js

@@ -1955,7 +1955,7 @@ function SelectOption({
   optionsTitle,
   options,
   onChange,
-  actionLabel = null,
+  action,
   ...props
 }) {
   const intl = reactIntl.useIntl();
@@ -1980,29 +1980,32 @@ function SelectOption({
     isMobile
   } = useLayout();
   function getOptionsContent(isMobileView = false) {
-    return /*#__PURE__*/jsxRuntime.jsxs(Section, {
-      className: classNames__default.default('np-select-option-list', {
-        'p-a-2': !isMobileView
-      }),
-      children: [optionsTitle && /*#__PURE__*/jsxRuntime.jsx(Header, {
-        title: optionsTitle
-      }), /*#__PURE__*/jsxRuntime.jsx(NavigationOptionList, {
-        children: options.map(option => {
-          return (
-            /*#__PURE__*/
-            // eslint-disable-next-line react/jsx-key
-            jsxRuntime.jsx(NavigationOption, {
-              isContainerAligned: isMobileView,
-              showMediaCircle: true,
-              showMediaAtAllSizes: false,
-              media: option.media,
-              title: option.title,
-              content: option.content,
-              onClick: handleOnChange(option)
-            })
-          );
-        })
-      })]
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames__default.default('np-select-option-list'),
+      children: options.map(optionsGroup =>
+      /*#__PURE__*/
+      // eslint-disable-next-line react/jsx-key
+      jsxRuntime.jsxs(Section, {
+        className: classNames__default.default('np-select-option-group', {
+          'p-a-2': !isMobileView
+        }),
+        children: [optionsGroup.title && /*#__PURE__*/jsxRuntime.jsx(Header, {
+          title: optionsGroup.title
+        }), /*#__PURE__*/jsxRuntime.jsx(NavigationOptionList, {
+          children: optionsGroup.options.map(option =>
+          /*#__PURE__*/
+          // eslint-disable-next-line react/jsx-key
+          jsxRuntime.jsx(NavigationOption, {
+            isContainerAligned: isMobileView,
+            showMediaCircle: true,
+            showMediaAtAllSizes: true,
+            media: option.media,
+            title: option.title,
+            content: option.content,
+            onClick: handleOnChange(option)
+          }))
+        })]
+      }))
     });
   }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -2010,7 +2013,7 @@ function SelectOption({
       ref: rootRef,
       ...props,
       ...inputAttributes,
-      showMediaAtAllSizes: false,
+      showMediaAtAllSizes: true,
       media: (isSelected ? selected : props).media,
       title: (isSelected ? selected : props).title,
       content: (isSelected ? selected : props).content,
@@ -2020,7 +2023,7 @@ function SelectOption({
       button: isSelected ? /*#__PURE__*/jsxRuntime.jsx(Chevron, {}) : /*#__PURE__*/jsxRuntime.jsx(ActionButton, {
         disabled: props.disabled,
         onClick: handleOnClick(true),
-        children: actionLabel || intl.formatMessage(messages$b.actionLabel)
+        children: action?.label || intl.formatMessage(messages$b.actionLabel)
       }),
       onClick: isSelected ? handleOnClick(true) : undefined
     }), isMobile ? /*#__PURE__*/jsxRuntime.jsx(BottomSheet$1, {