@transferwise/components 0.0.0-experimental-14afc1f → 0.0.0-experimental-ecf13ed

package/build/index.mjs

@@ -4551,14 +4551,15 @@ const Logo = ({
 }) => {
   const LogoSm = svgPaths[`WISE_FLAG${type === LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
+  const screenMd = useScreenSize(Breakpoint.MEDIUM);
   return /*#__PURE__*/jsxs("span", {
     "aria-label": type === LogoType.WISE ? 'Wise' : 'Wise Business' | type === LogoType.WISE_PLATFORM ? 'Wise Platform' : 'Wise Business',
     role: "img",
     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"
+    children: [!screenMd && /*#__PURE__*/jsx(LogoSm, {
+      className: "np-logo-svg"
+    }), screenMd && /*#__PURE__*/jsx(LogoMd, {
+      className: "np-logo-svg"
     })]
   });
 };
@@ -9945,12 +9946,11 @@ Select.defaultProps = {
 
 const SegmentedControl = ({
   name,
-  defaultValue,
+  value,
   mode = 'input',
   segments,
   onChange
 }) => {
-  const [selectedValue, setSelectedValue] = useState(defaultValue || segments[0].value);
   const [animate, setAnimate] = useState(false);
   const segmentsRef = useRef(null);
   if (segments.length > 3) {
@@ -9961,7 +9961,7 @@ const SegmentedControl = ({
     ref: /*#__PURE__*/createRef()
   }));
   const updateSegmentPosition = () => {
-    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === selectedValue)?.ref;
+    const selectedSegmentRef = segmentsWithRefs.find(segment => segment.value === value)?.ref;
     // We grab the active segments style object from the ref
     // and set the css variables to the selected segments width and x position.
     // This is so we can animate the highlight to the selected segment
@@ -9974,6 +9974,7 @@ const SegmentedControl = ({
     }
   };
   useEffect(() => {
+    setAnimate(true);
     updateSegmentPosition();
     const handleWindowSizeChange = () => {
       setAnimate(false);
@@ -9984,7 +9985,7 @@ const SegmentedControl = ({
       window.removeEventListener('resize', handleWindowSizeChange);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentsWithRefs, selectedValue]);
+  }, [segmentsWithRefs, value]);
   return /*#__PURE__*/jsx("div", {
     ref: segmentsRef,
     "data-testid": "segmented-control",
@@ -9999,14 +10000,13 @@ const SegmentedControl = ({
       children: segmentsWithRefs.map(segment => {
         const onSelect = () => {
           setAnimate(true);
-          setSelectedValue(segment.value);
           onChange(segment.value);
         };
         return mode === 'input' ? /*#__PURE__*/jsxs("label", {
           ref: segment.ref,
           htmlFor: segment.id,
           className: classNames('segmented-control__segment', {
-            'segmented-control__selected-segment': selectedValue === segment.value
+            'segmented-control__selected-segment': value === segment.value
           }),
           children: [/*#__PURE__*/jsx("input", {
             type: "radio",
@@ -10014,12 +10014,12 @@ const SegmentedControl = ({
             id: segment.id,
             name: name,
             value: segment.value,
-            checked: selectedValue === segment.value,
+            checked: value === segment.value,
             onChange: onSelect
           }), /*#__PURE__*/jsx(Body, {
             className: "segmented-control__text",
             as: "span",
-            type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
             children: segment.label
           })]
         }, segment.id) : /*#__PURE__*/jsx("button", {
@@ -10028,15 +10028,15 @@ const SegmentedControl = ({
           role: "tab",
           id: segment.id,
           "aria-controls": segment.controls,
-          "aria-selected": selectedValue === segment.value,
+          "aria-selected": value === segment.value,
           className: classNames('segmented-control__segment', 'segmented-control__button', {
-            'segmented-control__selected-segment': selectedValue === segment.value
+            'segmented-control__selected-segment': value === segment.value
           }),
           onClick: onSelect,
           children: /*#__PURE__*/jsx(Body, {
             as: "span",
             className: "segmented-control__text",
-            type: selectedValue === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
+            type: value === segment.value ? Typography.BODY_DEFAULT_BOLD : Typography.BODY_DEFAULT,
             children: segment.label
           })
         }, segment.id);