@transferwise/components 0.0.0-experimental-77f3fcf → 0.0.0-experimental-72aed20

package/build/index.js

@@ -644,10 +644,8 @@ const Option$2 = /*#__PURE__*/React.forwardRef(({
         })
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "media-body",
-        children: [/*#__PURE__*/jsxRuntime.jsx(Body, {
-          as: "span",
-          type: exports.Typography.BODY_LARGE_BOLD,
-          className: "text-primary np-option__title d-block",
+        children: [/*#__PURE__*/jsxRuntime.jsx("h4", {
+          className: "np-text-body-large-bold text-primary np-option__title",
           children: title
         }), content && /*#__PURE__*/jsxRuntime.jsx(Body, {
           className: "d-block np-option__body",
@@ -2366,7 +2364,7 @@ var Card$2 = Card$1;
 
 const Card = ({
   className,
-  children = null,
+  children,
   id,
   isDisabled = false,
   isSmall = false,
@@ -2389,10 +2387,7 @@ const Card = ({
       size: isSmall ? 'sm' : 'md',
       isDisabled: isDisabled,
       testId: "close-button",
-      onClick: e => {
-        stopPropagation$1(e);
-        onDismiss();
-      }
+      onClick: onDismiss
     }), children]
   });
 };
@@ -2755,8 +2750,10 @@ const DateInput = ({
   size,
   value,
   dayLabel,
+  dayAutoComplete,
   monthLabel,
   yearLabel,
+  yearAutoComplete,
   monthFormat,
   mode,
   onChange,
@@ -2954,6 +2951,7 @@ const DateInput = ({
             children: /*#__PURE__*/jsxRuntime.jsx(Input, {
               type: "number",
               name: "day",
+              autoComplete: dayAutoComplete,
               value: day || '',
               placeholder: placeholders.day,
               disabled: disabled,
@@ -2976,6 +2974,7 @@ const DateInput = ({
             children: /*#__PURE__*/jsxRuntime.jsx(Input, {
               type: "number",
               name: "year",
+              autoComplete: yearAutoComplete,
               placeholder: placeholders.year,
               value: year || '',
               disabled: disabled,
@@ -3023,8 +3022,10 @@ DateInput.propTypes = {
   onFocus: PropTypes__default.default.func,
   onBlur: PropTypes__default.default.func,
   dayLabel: PropTypes__default.default.string,
+  dayAutoComplete: PropTypes__default.default.string,
   monthLabel: PropTypes__default.default.string,
   yearLabel: PropTypes__default.default.string,
+  yearAutoComplete: PropTypes__default.default.string,
   monthFormat: PropTypes__default.default.oneOf(['long', 'short']),
   mode: PropTypes__default.default.oneOf(['day-month-year', 'month-year']),
   placeholders: PropTypes__default.default.shape({
@@ -3041,6 +3042,8 @@ DateInput.defaultProps = {
   value: null,
   onFocus: null,
   onBlur: null,
+  dayAutoComplete: null,
+  yearAutoComplete: null,
   monthFormat: exports.MonthFormat.LONG,
   mode: exports.DateMode.DAY_MONTH_YEAR,
   id: '',
@@ -10130,6 +10133,7 @@ const PhoneNumberInput = props => {
         className: `input-group input-group-${size}`,
         children: /*#__PURE__*/jsxRuntime.jsx("input", {
           id: id,
+          autoComplete: "tel-national",
           name: "phoneNumber",
           inputMode: "numeric",
           value: internalValue.suffix,
@@ -10381,12 +10385,10 @@ const PromoCardIndicator = ({
   children,
   label,
   icon,
-  isSmall = false,
   testid,
   ...rest
 }) => {
-  const isIconString = icon && typeof icon === 'string';
-  const IconComponent = isIconString && {
+  const IconComponent = icon && {
     check: icons.Check,
     arrow: icons.ArrowRight,
     download: icons.Download
@@ -10400,15 +10402,12 @@ const PromoCardIndicator = ({
       type: exports.Typography.BODY_LARGE_BOLD,
       className: "np-Card-indicatorText",
       children: label
-    }), icon && /*#__PURE__*/jsxRuntime.jsx(Avatar, {
-      type: exports.AvatarType.ICON,
-      size: isSmall ? 40 : 56,
-      backgroundColor: "var(--Card-indicator-icon-background-color)",
+    }), IconComponent && /*#__PURE__*/jsxRuntime.jsx("span", {
       className: "np-Card-indicatorIcon",
-      children: IconComponent ? /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
+      children: /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
         size: 24,
         "aria-hidden": "true"
-      }) : icon
+      })
     }), children]
   });
 };
@@ -10470,7 +10469,6 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   imageClass,
   imageSource,
   indicatorLabel,
-  indicatorIcon,
   isChecked,
   isDisabled,
   onClick,
@@ -10481,8 +10479,6 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   title,
   type,
   value,
-  isSmall,
-  useDisplayFont = true,
   ...props
 }, reference) => {
   // Set the `checked` state to the value of `defaultChecked` if it is truthy,
@@ -10506,19 +10502,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
   // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or
   // `'download'` if `download` is truthy. If neither condition is true, set
   // `icon` to `undefined`.
-  // Create a function to get icon type
-  const getIconType = () => {
-    if (indicatorIcon) {
-      return indicatorIcon;
-    }
-    if (download) {
-      return 'download';
-    }
-    if (href && !type) {
-      return 'arrow';
-    }
-    return undefined;
-  };
+  const icon = href && download ? 'download' : href ? 'arrow' : undefined;
   // Define all class names string based on the values of the `href`, `type`,
   // `checked`, and `className` props.
   const commonClasses = classNames__default.default({
@@ -10535,8 +10519,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
     isDisabled: isDisabled || contextIsDisabled,
     onClick,
     ref: reference,
-    'data-testid': testId,
-    isSmall
+    'data-testid': testId
   };
   // Object with Anchor props that will be passed to the `a` element. These
   // won't be refurned if set to `isDisabled`
@@ -10564,27 +10547,6 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
     ref: reference,
     tabIndex: 0
   } : {};
-  const getTitle = () => {
-    const titleContent = href && !type ? /*#__PURE__*/jsxRuntime.jsx("a", {
-      className: "np-Card-titleLink",
-      ...anchorProps,
-      children: title
-    }) : title;
-    const titleProps = {
-      id: `${componentId}-title`,
-      as: headingLevel,
-      className: 'np-Card-title'
-    };
-    return useDisplayFont ? /*#__PURE__*/jsxRuntime.jsx(Display, {
-      type: exports.Typography.DISPLAY_SMALL,
-      ...titleProps,
-      children: titleContent
-    }) : /*#__PURE__*/jsxRuntime.jsx(Title, {
-      type: exports.Typography.TITLE_SUBSECTION,
-      ...titleProps,
-      children: titleContent
-    });
-  };
   React.useEffect(() => {
     setChecked(defaultChecked ?? isChecked ?? false);
   }, [defaultChecked, isChecked]);
@@ -10598,7 +10560,17 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
         size: 24,
         "aria-hidden": "true"
       })
-    }), getTitle(), /*#__PURE__*/jsxRuntime.jsx(Body, {
+    }), /*#__PURE__*/jsxRuntime.jsx(Display, {
+      id: `${componentId}-title`,
+      as: headingLevel,
+      className: "np-Card-title",
+      type: exports.Typography.DISPLAY_SMALL,
+      children: href && !type ? /*#__PURE__*/jsxRuntime.jsx("a", {
+        className: "np-Card-titleLink",
+        ...anchorProps,
+        children: title
+      }) : title
+    }), /*#__PURE__*/jsxRuntime.jsx(Body, {
       className: "np-Card-description",
       children: description
     }), imageSource && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -10612,8 +10584,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
       })
     }), /*#__PURE__*/jsxRuntime.jsx(PromoCardIndicator, {
       label: indicatorLabel,
-      icon: getIconType(),
-      isSmall: isSmall
+      icon: icon
     })]
   });
 });