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

package/build/index.js

@@ -4582,14 +4582,15 @@ const Logo = ({
 }) => {
   const LogoSm = svgPaths[`WISE_FLAG${type === exports.LogoType.WISE_PLATFORM ? '_PLATFORM' : ''}${inverse ? '_INVERSE' : ''}`];
   const LogoMd = svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
+  const screenMd = useScreenSize(exports.Breakpoint.MEDIUM);
   return /*#__PURE__*/jsxRuntime.jsxs("span", {
     "aria-label": type === exports.LogoType.WISE ? 'Wise' : 'Wise Business' | type === exports.LogoType.WISE_PLATFORM ? 'Wise Platform' : 'Wise Business',
     role: "img",
     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"
+    children: [!screenMd && /*#__PURE__*/jsxRuntime.jsx(LogoSm, {
+      className: "np-logo-svg"
+    }), screenMd && /*#__PURE__*/jsxRuntime.jsx(LogoMd, {
+      className: "np-logo-svg"
     })]
   });
 };
@@ -9976,12 +9977,11 @@ Select.defaultProps = {
 
 const SegmentedControl = ({
   name,
-  defaultValue,
+  value,
   mode = 'input',
   segments,
   onChange
 }) => {
-  const [selectedValue, setSelectedValue] = React.useState(defaultValue || segments[0].value);
   const [animate, setAnimate] = React.useState(false);
   const segmentsRef = React.useRef(null);
   if (segments.length > 3) {
@@ -9992,7 +9992,7 @@ const SegmentedControl = ({
     ref: /*#__PURE__*/React.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
@@ -10005,6 +10005,7 @@ const SegmentedControl = ({
     }
   };
   React.useEffect(() => {
+    setAnimate(true);
     updateSegmentPosition();
     const handleWindowSizeChange = () => {
       setAnimate(false);
@@ -10015,7 +10016,7 @@ const SegmentedControl = ({
       window.removeEventListener('resize', handleWindowSizeChange);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentsWithRefs, selectedValue]);
+  }, [segmentsWithRefs, value]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     ref: segmentsRef,
     "data-testid": "segmented-control",
@@ -10030,14 +10031,13 @@ const SegmentedControl = ({
       children: segmentsWithRefs.map(segment => {
         const onSelect = () => {
           setAnimate(true);
-          setSelectedValue(segment.value);
           onChange(segment.value);
         };
         return mode === 'input' ? /*#__PURE__*/jsxRuntime.jsxs("label", {
           ref: segment.ref,
           htmlFor: segment.id,
           className: classNames__default.default('segmented-control__segment', {
-            'segmented-control__selected-segment': selectedValue === segment.value
+            'segmented-control__selected-segment': value === segment.value
           }),
           children: [/*#__PURE__*/jsxRuntime.jsx("input", {
             type: "radio",
@@ -10045,12 +10045,12 @@ const SegmentedControl = ({
             id: segment.id,
             name: name,
             value: segment.value,
-            checked: selectedValue === segment.value,
+            checked: value === segment.value,
             onChange: onSelect
           }), /*#__PURE__*/jsxRuntime.jsx(Body, {
             className: "segmented-control__text",
             as: "span",
-            type: selectedValue === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
+            type: value === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
             children: segment.label
           })]
         }, segment.id) : /*#__PURE__*/jsxRuntime.jsx("button", {
@@ -10059,15 +10059,15 @@ const SegmentedControl = ({
           role: "tab",
           id: segment.id,
           "aria-controls": segment.controls,
-          "aria-selected": selectedValue === segment.value,
+          "aria-selected": value === segment.value,
           className: classNames__default.default('segmented-control__segment', 'segmented-control__button', {
-            'segmented-control__selected-segment': selectedValue === segment.value
+            'segmented-control__selected-segment': value === segment.value
           }),
           onClick: onSelect,
           children: /*#__PURE__*/jsxRuntime.jsx(Body, {
             as: "span",
             className: "segmented-control__text",
-            type: selectedValue === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
+            type: value === segment.value ? exports.Typography.BODY_DEFAULT_BOLD : exports.Typography.BODY_DEFAULT,
             children: segment.label
           })
         }, segment.id);