@transferwise/components 45.26.2 → 45.27.0

package/build/index.esm.js

@@ -5575,19 +5575,16 @@ const Logo = ({
   inverse,
   type
 }) => {
-  const [clientWidth] = useClientWidth({
-    ref: isServerSide() ? undefined : window
-  });
-  const isSmall = clientWidth < Breakpoint.SMALL;
-  const LogoSvg = isSmall ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`] : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
-
-  // If clientWidth is not defined, don't render anything
-  if (clientWidth === null) {
-    return null;
-  }
-  return /*#__PURE__*/jsx(LogoSvg, {
-    className: classNames('np-logo-svg', className),
-    alt: type === LogoType.WISE ? 'Wise' : 'Wise business'
+  const LogoSm = svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`];
+  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
+  return /*#__PURE__*/jsxs("span", {
+    "aria-label": type === LogoType.WISE ? 'Wise' : 'Wise business',
+    className: classNames(className, 'np-logo'),
+    children: [/*#__PURE__*/jsx(LogoSm, {
+      className: "np-logo-svg np-logo-svg--size-sm"
+    }), /*#__PURE__*/jsx(LogoMd, {
+      className: "np-logo-svg np-logo-svg--size-md"
+    })]
   });
 };
 Logo.propTypes = {
@@ -5873,14 +5870,17 @@ const FlowNavigation = ({
         children: [isSmall && displayGoBack ? /*#__PURE__*/jsx(BackButton$1, {
           "aria-label": intl.formatMessage(messages$6.back),
           onClick: onGoBack
-        }) : logo, isSmall && /*#__PURE__*/jsx(AnimatedLabel, {
+        }) : /*#__PURE__*/jsx("div", {
+          className: "np-flow-header__left",
+          children: logo
+        }), isSmall && /*#__PURE__*/jsx(AnimatedLabel, {
           className: "m-x-1",
           labels: steps.map(step => step.label),
           activeLabel: activeStep
         })]
       }),
       rightContent: /*#__PURE__*/jsxs("div", {
-        className: classNames('d-flex', 'align-items-center', {
+        className: classNames('np-flow-header__right', 'd-flex', 'align-items-center', 'justify-content-end', {
           'order-2': isLarge
         }),
         children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsx("span", {
@@ -6442,6 +6442,7 @@ const Input = /*#__PURE__*/forwardRef(function Input({
 
 const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
   shape = 'pill',
+  size = Size.MEDIUM,
   disabled,
   className,
   ...restProps
@@ -6449,9 +6450,9 @@ const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
   return /*#__PURE__*/jsx(InputGroup, {
     addonStart: {
       content: /*#__PURE__*/jsx(Search, {
-        size: 24
+        size: size === Size.SMALL ? 16 : 24
       }),
-      initialContentWidth: 24
+      initialContentWidth: size === Size.SMALL ? 16 : 24
     },
     disabled: disabled,
     className: className,
@@ -6460,6 +6461,7 @@ const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
       role: "searchbox",
       inputMode: "search",
       shape: shape,
+      size: size,
       ...restProps
     })
   });