@transferwise/components 45.26.2 → 45.27.0

package/build/index.js

@@ -5609,19 +5609,16 @@ const Logo = ({
   inverse,
   type
 }) => {
-  const [clientWidth] = useClientWidth({
-    ref: isServerSide() ? undefined : window
-  });
-  const isSmall = clientWidth < exports.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__*/jsxRuntime.jsx(LogoSvg, {
-    className: classNames__default.default('np-logo-svg', className),
-    alt: type === exports.LogoType.WISE ? 'Wise' : 'Wise business'
+  const LogoSm = svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`];
+  const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
+  return /*#__PURE__*/jsxRuntime.jsxs("span", {
+    "aria-label": type === exports.LogoType.WISE ? 'Wise' : 'Wise business',
+    className: classNames__default.default(className, 'np-logo'),
+    children: [/*#__PURE__*/jsxRuntime.jsx(LogoSm, {
+      className: "np-logo-svg np-logo-svg--size-sm"
+    }), /*#__PURE__*/jsxRuntime.jsx(LogoMd, {
+      className: "np-logo-svg np-logo-svg--size-md"
+    })]
   });
 };
 Logo.propTypes = {
@@ -5907,14 +5904,17 @@ const FlowNavigation = ({
         children: [isSmall && displayGoBack ? /*#__PURE__*/jsxRuntime.jsx(BackButton$1, {
           "aria-label": intl.formatMessage(messages$6.back),
           onClick: onGoBack
-        }) : logo, isSmall && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel, {
+        }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "np-flow-header__left",
+          children: logo
+        }), isSmall && /*#__PURE__*/jsxRuntime.jsx(AnimatedLabel, {
           className: "m-x-1",
           labels: steps.map(step => step.label),
           activeLabel: activeStep
         })]
       }),
       rightContent: /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames__default.default('d-flex', 'align-items-center', {
+        className: classNames__default.default('np-flow-header__right', 'd-flex', 'align-items-center', 'justify-content-end', {
           'order-2': isLarge
         }),
         children: [newAvatar, newAvatar && closeButton && /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -6476,6 +6476,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
 
 const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   shape = 'pill',
+  size = exports.Size.MEDIUM,
   disabled,
   className,
   ...restProps
@@ -6483,9 +6484,9 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   return /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
     addonStart: {
       content: /*#__PURE__*/jsxRuntime.jsx(icons.Search, {
-        size: 24
+        size: size === exports.Size.SMALL ? 16 : 24
       }),
-      initialContentWidth: 24
+      initialContentWidth: size === exports.Size.SMALL ? 16 : 24
     },
     disabled: disabled,
     className: className,
@@ -6494,6 +6495,7 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
       role: "searchbox",
       inputMode: "search",
       shape: shape,
+      size: size,
       ...restProps
     })
   });