@transferwise/components 45.26.3 → 45.27.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/build/index.esm.js +14 -15
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +14 -15
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +1 -1
  6. package/build/styles/logo/Logo.css +1 -1
  7. package/build/styles/main.css +1 -1
  8. package/build/types/inputs/SearchInput.d.ts +2 -1
  9. package/build/types/inputs/SearchInput.d.ts.map +1 -1
  10. package/build/types/logo/Logo.d.ts.map +1 -1
  11. package/package.json +3 -3
  12. package/src/inputs/SearchInput.story.tsx +3 -1
  13. package/src/inputs/SearchInput.tsx +13 -5
  14. package/src/logo/Logo.css +1 -1
  15. package/src/logo/Logo.js +9 -18
  16. package/src/logo/Logo.less +21 -2
  17. package/src/logo/__snapshots__/Logo.spec.js.snap +168 -72
  18. package/src/main.css +1 -1
package/build/index.js CHANGED
@@ -5609,19 +5609,16 @@ const Logo = ({
5609
5609
  inverse,
5610
5610
  type
5611
5611
  }) => {
5612
- const [clientWidth] = useClientWidth({
5613
- ref: isServerSide() ? undefined : window
5614
- });
5615
- const isSmall = clientWidth < exports.Breakpoint.SMALL;
5616
- const LogoSvg = isSmall ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`] : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
5617
-
5618
- // If clientWidth is not defined, don't render anything
5619
- if (clientWidth === null) {
5620
- return null;
5621
- }
5622
- return /*#__PURE__*/jsxRuntime.jsx(LogoSvg, {
5623
- className: classNames__default.default('np-logo-svg', className),
5624
- alt: type === exports.LogoType.WISE ? 'Wise' : 'Wise business'
5612
+ const LogoSm = svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`];
5613
+ const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
5614
+ return /*#__PURE__*/jsxRuntime.jsxs("span", {
5615
+ "aria-label": type === exports.LogoType.WISE ? 'Wise' : 'Wise business',
5616
+ className: classNames__default.default(className, 'np-logo'),
5617
+ children: [/*#__PURE__*/jsxRuntime.jsx(LogoSm, {
5618
+ className: "np-logo-svg np-logo-svg--size-sm"
5619
+ }), /*#__PURE__*/jsxRuntime.jsx(LogoMd, {
5620
+ className: "np-logo-svg np-logo-svg--size-md"
5621
+ })]
5625
5622
  });
5626
5623
  };
5627
5624
  Logo.propTypes = {
@@ -6479,6 +6476,7 @@ const Input = /*#__PURE__*/React.forwardRef(function Input({
6479
6476
 
6480
6477
  const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
6481
6478
  shape = 'pill',
6479
+ size = exports.Size.MEDIUM,
6482
6480
  disabled,
6483
6481
  className,
6484
6482
  ...restProps
@@ -6486,9 +6484,9 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
6486
6484
  return /*#__PURE__*/jsxRuntime.jsx(InputGroup, {
6487
6485
  addonStart: {
6488
6486
  content: /*#__PURE__*/jsxRuntime.jsx(icons.Search, {
6489
- size: 24
6487
+ size: size === exports.Size.SMALL ? 16 : 24
6490
6488
  }),
6491
- initialContentWidth: 24
6489
+ initialContentWidth: size === exports.Size.SMALL ? 16 : 24
6492
6490
  },
6493
6491
  disabled: disabled,
6494
6492
  className: className,
@@ -6497,6 +6495,7 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
6497
6495
  role: "searchbox",
6498
6496
  inputMode: "search",
6499
6497
  shape: shape,
6498
+ size: size,
6500
6499
  ...restProps
6501
6500
  })
6502
6501
  });