Merge pull request #4956 from GeekyAnts/release/3.4.2-rc.0

Release/3.4.2 rc.0

example/storybook/stories/components/basic/View/Basic.tsx

@@ -7,7 +7,7 @@ export const Example = () => {
         A component library for the{' '}
         <Heading color="emerald.400">React Ecosystem</Heading>
       </Heading>
-      <Text pt="3" fontWeight="md">
+      <Text pt="3">
         NativeBase is a simple, modular and accessible component library that
         gives you building blocks to build you React applications.
       </Text>

example/storybook/stories/components/primitives/Image/BorderRadius.tsx

@@ -5,7 +5,6 @@ export function Example() {
     <Center>
       <Image
         size={150}
-        resizeMode={'contain'}
         borderRadius={100}
         source={{
           uri: 'https://wallpaperaccess.com/full/317501.jpg',

example/storybook/stories/components/primitives/Image/WithRef.tsx

@@ -6,8 +6,14 @@ export function Example() {
   const myRef = React.useRef(null);
 
   React.useEffect(() => {
-    if (myRef.current && myRef.current.setNativeProps)
-      myRef.current?.setNativeProps({ borderWidth: 10, opacity: 0.5 });
+    const styleObj = {
+      borderWidth: 4,
+      borderRadius: 4,
+      borderColor: '#22D3EE',
+    };
+    myRef?.current?.setNativeProps({
+      style: styleObj,
+    });
   }, [myRef]);
 
   return (

example/storybook/stories/components/primitives/Input/Size.tsx

@@ -3,7 +3,7 @@ import { Input, Stack } from 'native-base';
 
 export const Example = () => {
   return (
-    <Stack space={4} w="75%" maxW="300px">
+    <Stack space={4} w="75%" maxW="300px" mx="auto">
       <Input size="xs" placeholder="xs Input" />
       <Input size="sm" placeholder="sm Input" />
       <Input size="md" placeholder="md Input" />

example/storybook/stories/components/primitives/Input/Variant.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Input, Stack } from 'native-base';
 export const Example = () => {
   return (
-    <Stack space={4} w="75%" maxW="300px">
+    <Stack space={4} w="75%" maxW="300px" mx="auto">
       <Input variant="outline" placeholder="Outline" />
       <Input variant="filled" placeholder="Filled" />
       <Input variant="underlined" placeholder="Underlined" />

example/storybook/stories/components/primitives/Select/Basic.tsx

@@ -6,7 +6,7 @@ export const Example = () => {
 
   return (
     <Center>
-      <Box w="3/4" maxW="300">
+      <Box maxW="300">
         <Select
           selectedValue={service}
           minWidth="200"

example/storybook/stories/components/primitives/TextArea/value.tsx

@@ -3,14 +3,12 @@ import { TextArea, Box } from 'native-base';
 
 export const Example = () => {
   const [textAreaValue, setTextAreaValue] = useState('Value Controlled');
-  const demoValueControlledTextArea = (e: any) => {
-    setTextAreaValue(e.currentTarget.value);
-  };
   return (
     <Box alignItems="center" w="100%">
       <TextArea
         value={textAreaValue}
-        onChange={demoValueControlledTextArea}
+        onChange={(e: any) => setTextAreaValue(e.currentTarget.value)} // for web
+        onChangeText={(text: any) => setTextAreaValue(text)} // for android and ios
         w="75%"
         maxW="300"
       />

package.json

@@ -36,7 +36,7 @@
       "prettier --write"
     ]
   },
-  "version": "3.4.1",
+  "version": "3.4.2-rc.0",
   "license": "MIT",
   "private": false,
   "main": "lib/commonjs/index",

src/components/composites/Modal/Modal.tsx

@@ -55,6 +55,7 @@ const Modal = (
       bottom={avoidKeyboard ? bottomInset + 'px' : undefined}
       {...resolvedProps}
       ref={ref}
+      pointerEvents="box-none"
     >
       {children}
     </Box>

src/components/primitives/Checkbox/Checkbox.web.tsx

@@ -147,11 +147,7 @@ const CheckboxComponent = React.memo(
         <Stack {..._stack} {...layoutProps}>
           <Center>
             {/* Interaction Box */}
-            <Box
-              {..._interactionBox}
-              h={isFocusVisible || isFocusVisibleProp ? '130%' : '0%'}
-              w={isFocusVisible || isFocusVisibleProp ? '130%' : '0%'}
-            />
+            <Box {..._interactionBox} />
             {/* Checkbox */}
             <Center {...nonLayoutProps}>
               {/* {iconResolver()} */}
@@ -170,10 +166,8 @@ const CheckboxComponent = React.memo(
       _interactionBox,
       icon,
       isChecked,
-      isFocusVisible,
       nonLayoutProps,
       layoutProps,
-      isFocusVisibleProp,
       resolvedProps?.children,
     ]);
 

src/components/primitives/Icon/Icons/Add.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from '../createIcon';
 
 export const AddIcon = createIcon({
-  viewBox: '0 0 20 20',
-  d: 'M11.25 8.75V0H8.75V8.75H0V11.25H8.75V20H11.25V11.25H20V8.75H11.25Z',
+  viewBox: '0 0 24 24',
+  d: 'M13.25 10.75V2H10.75V10.75H2V13.25H10.75V22H13.25V13.25H22V10.75H13.25Z',
 });

src/components/primitives/Icon/Icons/Arrow.tsx

@@ -3,47 +3,47 @@ import { createIcon } from '../createIcon';
 import { G, Path } from '../nbSvg';
 
 export const ArrowUpIcon = createIcon({
-  viewBox: '0 0 20 20',
+  viewBox: '0 0 24 24',
   path: (
     <G>
       <Path
-        d="M18.2362 11.0666L11.6036 4.43395L10.75 3.58039V4.7875L10.75 19.5H9.25L9.25 4.7875V3.58192L8.39676 4.43363L1.76282 11.0557L0.707108 10L10 0.707107L19.2941 10.0012L18.2362 11.0666Z"
+        d="M20.2362 13.0666L13.6036 6.43395L12.75 5.58039V6.7875L12.75 21.5H11.25L11.25 6.7875V5.58192L10.3968 6.43363L3.76282 13.0557L2.70711 12L12 2.70711L21.2941 12.0012L20.2362 13.0666Z"
         stroke="currentColor"
       />
     </G>
   ),
 });
 
 export const ArrowDownIcon = createIcon({
-  viewBox: '0 0 20 20',
+  viewBox: '0 0 24 24',
   path: (
     <G>
       <Path
-        d="M1.76375 8.93336L8.39645 15.5661L9.25 16.4196V15.2125L9.25 0.5H10.75L10.75 15.2125V16.4181L11.6032 15.5664L18.2372 8.94429L19.2929 10L10 19.2929L0.70586 9.99875L1.76375 8.93336Z"
+        d="M3.76375 10.9334L10.3964 17.5661L11.25 18.4196V17.2125L11.25 2.5H12.75L12.75 17.2125V18.4181L13.6032 17.5664L20.2372 10.9443L21.2929 12L12 21.2929L2.70586 11.9988L3.76375 10.9334Z"
         stroke="currentColor"
       />
     </G>
   ),
 });
 
 export const ArrowForwardIcon = createIcon({
-  viewBox: '0 0 20 20',
+  viewBox: '0 0 24 24',
   path: (
     <G>
       <Path
-        d="M8.93336 1.76375L15.5661 8.39645L16.4196 9.25H15.2125H0.5V10.75H15.2125H16.4181L15.5664 11.6032L8.94429 18.2372L10 19.2929L19.2929 10L9.99875 0.70586L8.93336 1.76375Z"
+        d="M10.9334 3.76375L17.5661 10.3964L18.4196 11.25H17.2125H2.5V12.75H17.2125H18.4181L17.5664 13.6032L10.9443 24.2372L12 21.2929L21.2929 12L11.9988 2.70586L10.9334 3.76375Z"
         stroke="currentColor"
       />
     </G>
   ),
 });
 
 export const ArrowBackIcon = createIcon({
-  viewBox: '0 0 20 20',
+  viewBox: '0 0 24 24',
   path: (
     <G>
       <Path
-        d="M11.0666 1.76375L4.43395 8.39645L3.58039 9.25H4.7875H19.5V10.75H4.7875H3.58192L4.43363 11.6032L11.0557 18.2372L10 19.2929L0.707107 10L10.0012 0.70586L11.0666 1.76375Z"
+        d="M13.0666 3.76375L6.43395 10.3964L5.58039 11.25H6.7875H21.5V12.75H6.7875H5.58192L6.43363 13.6032L13.0557 20.2372L12 21.2929L2.70711 12L12.0012 2.70586L13.0666 3.76375Z"
         stroke="currentColor"
       />
     </G>

src/components/primitives/Icon/Icons/Check.tsx

@@ -1,9 +1,9 @@
 import { createIcon } from '../createIcon';
 
 export const CheckIcon = createIcon({
-  viewBox: '0 0 20 15',
+  viewBox: '0 0 24 24',
   d:
-    'M6.53115 11.1856L1.96198 6.744L0 8.6512L6.53115 15L20 1.9072L18.038 0L6.53115 11.1856Z',
+    'M8.53115 15.1856L3.96198 10.744L2 12.6512L8.53115 19L22 5.9072L20.038 4L8.53115 15.1856Z',
 });
 
 export const CheckCircleIcon = createIcon({

src/components/primitives/Icon/Icons/Chevron.tsx

@@ -1,25 +1,25 @@
 import { createIcon } from '../createIcon';
 
 export const ChevronUpIcon = createIcon({
-  viewBox: '0 0 20 12',
+  viewBox: '0 0 24 24',
   d:
-    'M18.2286 12L9.99728 3.62148L1.76862 11.9973L0 10.1971L10 0L20 10.1971L18.2286 12Z',
+    'M20.2286 18L11.9973 9.62148L3.76862 17.9973L2 16.1971L12 6L22 16.1971L20.2286 18Z',
 });
 
 export const ChevronDownIcon = createIcon({
-  viewBox: '0 0 20 12',
+  viewBox: '0 0 24 24',
   d:
-    'M18.2286 0L9.99728 8.37852L1.76862 0.00268367L0 1.80293L10 12L20 1.80293L18.2286 0Z',
+    'M20.2286 6L11.9973 14.3785L3.76862 6.00268L2 7.80293L12 18L22 7.80293L20.2286 6Z',
 });
 
 export const ChevronLeftIcon = createIcon({
-  viewBox: '0 0 12 20',
+  viewBox: '0 0 24 24',
   d:
-    'M12 1.77141L3.62148 10.0027L11.9973 18.2314L10.1971 20L0 10L10.1971 0L12 1.77141Z',
+    'M18 3.77141L9.62148 12.0027L17.9973 20.2314L16.1971 22L6 12L16.1971 2L18 3.77141Z',
 });
 
 export const ChevronRightIcon = createIcon({
-  viewBox: '0 0 12 20',
+  viewBox: '0 0 24 24',
   d:
-    'M0 1.77141L8.37852 10.0027L0.00268364 18.2314L1.80293 20L12 10L1.80293 0L0 1.77141Z',
+    'M6 3.77141L14.3785 12.0027L6.00268 20.2314L7.80293 22L18 12L7.80293 2L6 3.77141Z',
 });

src/components/primitives/Icon/Icons/Close.tsx

@@ -3,9 +3,9 @@ import { createIcon } from '../createIcon';
 import { Path } from '../nbSvg';
 
 export const CloseIcon = createIcon({
-  viewBox: '0 0 20 20',
+  viewBox: '0 0 24 24',
   d:
-    'M10 7.77778L2.22222 0L0 2.22222L7.77778 10L0 17.7778L2.22222 20L10 12.2222L17.7778 20L20 17.7778L12.2222 10L20 2.22222L17.7778 0L10 7.77778Z',
+    'M12 9.77778L4.22222 2L2 4.22222L9.77778 12L2 19.7778L4.22222 22L12 14.2222L19.7778 22L22 19.7778L14.2222 12L22 4.22222L19.7778 2L12 9.77778Z',
 });
 
 export const SmallCloseIcon = createIcon({

src/components/primitives/Icon/Icons/Delete.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from '../createIcon';
 
 export const DeleteIcon = createIcon({
-  viewBox: '0 0 16 20',
+  viewBox: '0 0 24 24',
   d:
-    'M1.11111 17.7778C1.11111 19 2.11111 20 3.33333 20H12.2222C13.4444 20 14.4444 19 14.4444 17.7778V4.44444H1.11111V17.7778ZM15.5556 1.11111H11.6667L10.5556 0H5L3.88889 1.11111H0V3.33333H15.5556V1.11111Z',
+    'M5.11111 19.7778C5.11111 21 6.11111 22 7.33333 22H16.2222C17.4444 22 18.4444 21 18.4444 19.7778V6.44444H5.11111V19.7778ZM19.5556 3.11111H15.6667L14.5556 2H9L7.88889 3.11111H4V5.33333H19.5556V3.11111Z',
 });

src/components/primitives/Icon/Icons/Favourite.tsx

@@ -3,5 +3,5 @@ import { createIcon } from '../createIcon';
 export const FavouriteIcon = createIcon({
   viewBox: '0 0 24 24',
   d:
-    'M1.75143 2.371C2.87321 1.22206 4.39447 0.576618 5.98067 0.576618C7.56686 0.576618 9.08812 1.22206 10.2099 2.371L11.9626 4.16516L13.7153 2.371C14.2671 1.78565 14.9272 1.31876 15.657 0.997564C16.3869 0.676368 17.1718 0.507303 17.9661 0.500231C18.7604 0.49316 19.5481 0.648225 20.2832 0.956378C21.0184 1.26453 21.6863 1.7196 22.2479 2.29504C22.8096 2.87047 23.2538 3.55474 23.5545 4.30793C23.8553 5.06112 24.0067 5.86813 23.9998 6.68189C23.9929 7.49564 23.8279 8.29984 23.5143 9.04756C23.2008 9.79528 22.7451 10.4715 22.1738 11.0369L11.9626 21.5L1.75143 11.0369C0.629991 9.8876 0 8.32904 0 6.70394C0 5.07885 0.629991 3.52029 1.75143 2.371Z',
+    'M1.75143 3.371C2.87321 2.22206 4.39447 1.57662 5.98067 1.57662C7.56686 1.57662 9.08812 2.22206 10.2099 3.371L11.9626 5.16516L13.7153 3.371C14.2671 2.78565 14.9272 2.31876 15.657 1.99756C16.3869 1.67637 17.1718 1.5073 17.9661 1.50023C18.7604 1.49316 19.5481 1.64823 20.2832 1.95638C21.0184 2.26453 21.6863 2.7196 22.2479 3.29504C22.8096 3.87047 23.2538 4.55474 23.5545 5.30793C23.8553 6.06112 24.0067 6.86813 23.9998 7.68189C23.9929 8.49564 23.8279 9.29984 23.5143 10.0476C23.2008 10.7953 22.7451 11.4715 22.1738 12.0369L11.9626 22.5L1.75143 12.0369C0.629991 10.8876 0 9.32904 0 7.70394C0 6.07885 0.629991 4.52029 1.75143 3.371Z',
 });

src/components/primitives/Icon/Icons/Hamburger.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from '../createIcon';
 
 export const HamburgerIcon = createIcon({
-  viewBox: '0 0 20 14',
+  viewBox: '0 0 24 24',
   d:
-    'M20 0H0V2.47961H20V0ZM20 5.47949H0V7.9591H20V5.47949ZM0 10.959H20V13.4386H0V10.959Z',
+    'M22 5H2V7.47961H22V5ZM22 10.4795H2V12.9591H22V10.4795ZM2 15.959H22V18.4386H2V15.959Z',
 });

src/components/primitives/Icon/Icons/Info.tsx

@@ -3,12 +3,12 @@ import { createIcon } from '../createIcon';
 import { G, Path } from '../nbSvg';
 
 export const InfoOutlineIcon = createIcon({
-  viewBox: '0 0 20 20',
+  viewBox: '0 0 24 24',
   path: (
     <G>
-      <Path d="M9.94422 6.24C10.5628 6.24 11.0642 5.73856 11.0642 5.12C11.0642 4.50144 10.5628 4 9.94422 4C9.32566 4 8.82422 4.50144 8.82422 5.12C8.82422 5.73856 9.32566 6.24 9.94422 6.24Z" />
-      <Path d="M12.4008 13.9996H10.8008V7.59961H8.40078C8.18861 7.59961 7.98513 7.68389 7.8351 7.83392C7.68507 7.98395 7.60078 8.18744 7.60078 8.39961C7.60078 8.61178 7.68507 8.81527 7.8351 8.9653C7.98513 9.11532 8.18861 9.19961 8.40078 9.19961H9.20078V13.9996H7.60078C7.38861 13.9996 7.18513 14.0839 7.0351 14.2339C6.88507 14.384 6.80078 14.5874 6.80078 14.7996C6.80078 15.0118 6.88507 15.2153 7.0351 15.3653C7.18513 15.5153 7.38861 15.5996 7.60078 15.5996H12.4008C12.613 15.5996 12.8164 15.5153 12.9665 15.3653C13.1165 15.2153 13.2008 15.0118 13.2008 14.7996C13.2008 14.5874 13.1165 14.384 12.9665 14.2339C12.8164 14.0839 12.613 13.9996 12.4008 13.9996Z" />
-      <Path d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17316C0.00433286 8.00042 -0.1937 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8078C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C20 7.34783 18.9464 4.80429 17.0711 2.92893C15.1957 1.05357 12.6522 0 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99075 1.82679 8.37424C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27288 2.942 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7117 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3333 11.0943 18.1178 12.178 17.699 13.189C17.2802 14.2001 16.6664 15.1187 15.8926 15.8926C15.1187 16.6664 14.2001 17.2802 13.189 17.699C12.178 18.1178 11.0944 18.3333 10 18.3333V18.3333Z" />
+      <Path d="M11.9442 8.24C12.5628 8.24 13.0642 7.73856 13.0642 7.12C13.0642 6.50144 12.5628 6 11.9442 6C11.3257 6 10.8242 6.50144 10.8242 7.12C10.8242 7.73856 11.3257 8.24 11.9442 8.24Z" />
+      <Path d="M14.4008 15.9996H12.8008V9.59961H10.4008C10.1886 9.59961 9.98513 9.68389 9.8351 9.83392C9.68507 9.98395 9.60078 10.1874 9.60078 10.3996C9.60078 10.6118 9.68507 10.8153 9.8351 10.9653C9.98513 11.1153 10.1886 11.1996 10.4008 11.1996H11.2008V15.9996H9.60078C9.38861 15.9996 9.18513 16.0839 9.0351 16.2339C8.88507 16.384 8.80078 16.5874 8.80078 16.7996C8.80078 17.0118 8.88507 17.2153 9.0351 17.3653C9.18513 17.5153 9.38861 17.5996 9.60078 17.5996H14.4008C14.613 17.5996 14.8164 17.5153 14.9665 17.3653C15.1165 17.2153 15.2008 17.0118 15.2008 16.7996C15.2008 16.5874 15.1165 16.384 14.9665 16.2339C14.8164 16.0839 14.613 15.9996 14.4008 15.9996Z" />
+      <Path d="M12 2C10.0222 2 8.08879 2.58649 6.4443 3.6853C4.79981 4.78412 3.51809 6.3459 2.76121 8.17316C2.00433 10.0004 1.8063 12.0111 2.19215 13.9509C2.578 15.8907 3.53041 17.6725 4.92894 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8078C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 9.34783 20.9464 6.80429 19.0711 4.92893C17.1957 3.05357 14.6522 2 12 2ZM12 20.3333C10.3518 20.3333 8.74066 19.8446 7.37025 18.9289C5.99984 18.0132 4.93174 16.7117 4.30101 15.189C3.67028 13.6663 3.50525 11.9908 3.82679 10.3742C4.14834 8.75774 4.94201 7.27288 6.10745 6.10744C7.27288 4.942 8.75774 4.14833 10.3743 3.82679C11.9908 3.50525 13.6663 3.67027 15.189 4.301C16.7117 4.93173 18.0132 5.99984 18.9289 7.37025C19.8446 8.74066 20.3333 10.3518 20.3333 12C20.3333 13.0943 20.1178 14.178 19.699 15.189C19.2802 16.2001 18.6664 17.1187 17.8926 17.8926C17.1187 18.6664 16.2001 19.2802 15.189 19.699C14.178 20.1178 13.0944 20.3333 12 20.3333Z" />
     </G>
   ),
 });

src/components/primitives/Icon/Icons/Minus.tsx

@@ -1,6 +1,6 @@
 import { createIcon } from '../createIcon';
 
 export const MinusIcon = createIcon({
-  viewBox: '0 0 20 3',
-  d: 'M20 0.5H0V3H20V0.5Z',
+  viewBox: '0 0 24 24',
+  d: 'M22 10.5H2V13H22V10.5Z',
 });

src/components/primitives/Icon/Icons/Moon.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from '../createIcon';
 
 export const MoonIcon = createIcon({
-  viewBox: '0 0 20 20',
+  viewBox: '0 0 24 24',
   d:
-    'M18.8562 11.4434C18.1167 11.6274 17.3772 11.7194 16.6378 11.7194C12.0162 11.7194 8.31889 8.0391 8.31889 3.43876C8.31889 2.7027 8.41132 1.96665 8.59619 1.23059C8.68862 0.954572 8.59619 0.586544 8.31889 0.310523C8.04159 0.0345026 7.7643 -0.0575043 7.39457 0.0345026C3.05026 1.3226 0 5.3709 0 9.87924C0 15.4917 4.52917 20 10.1675 20C14.6967 20 18.7637 16.9638 19.9653 12.5474C20.0578 12.2714 19.9653 11.9034 19.688 11.6274C19.5032 11.4434 19.1334 11.3514 18.8562 11.4434Z',
+    'M20.8562 13.4434C20.1167 13.6274 19.3772 13.7194 18.6378 13.7194C14.0162 13.7194 10.3189 10.0391 10.3189 5.43876C10.3189 4.7027 10.4113 3.96665 10.5962 3.23059C10.6886 2.95457 10.5962 2.58654 10.3189 2.31052C10.0416 2.0345 9.7643 1.9425 9.39457 2.0345C5.05026 3.3226 2 7.3709 2 11.8792C2 17.4917 6.52917 22 12.1675 22C16.6967 22 20.7637 18.9638 21.9653 14.5474C22.0578 14.2714 21.9653 13.9034 21.688 13.6274C21.5032 13.4434 21.1334 13.3514 20.8562 13.4434Z',
 });

src/components/primitives/Icon/Icons/Question.tsx

@@ -8,6 +8,6 @@ export const QuestionIcon = createIcon({
 });
 
 export const QuestionOutlineIcon = createIcon({
-  viewBox: '0 0 20 20',
+  viewBox: '0 0 24 24',
   path: questionOutlineIconPath,
 });

src/components/primitives/Icon/Icons/Search.tsx

@@ -1,7 +1,7 @@
 import { createIcon } from '../createIcon';
 
 export const SearchIcon = createIcon({
-  viewBox: '0 0 20 20',
+  viewBox: '0 0 24 24',
   d:
-    'M19.9399 18.5624L13.4474 12.0699C14.4549 10.7675 14.9999 9.17496 14.9999 7.49997C14.9999 5.49498 14.2174 3.61498 12.8024 2.19749C11.3874 0.779996 9.50246 0 7.49997 0C5.49748 0 3.61248 0.782496 2.19749 2.19749C0.779996 3.61248 0 5.49498 0 7.49997C0 9.50246 0.782496 11.3874 2.19749 12.8024C3.61248 14.2199 5.49498 14.9999 7.49997 14.9999C9.17496 14.9999 10.765 14.4549 12.0674 13.4499L18.5599 19.9399C18.579 19.959 18.6016 19.9741 18.6264 19.9844C18.6513 19.9947 18.678 20 18.7049 20C18.7318 20 18.7585 19.9947 18.7834 19.9844C18.8083 19.9741 18.8309 19.959 18.8499 19.9399L19.9399 18.8524C19.959 18.8334 19.9741 18.8108 19.9844 18.7859C19.9947 18.761 20 18.7343 20 18.7074C20 18.6805 19.9947 18.6538 19.9844 18.6289C19.9741 18.6041 19.959 18.5815 19.9399 18.5624ZM11.46 11.46C10.4 12.5174 8.99496 13.0999 7.49997 13.0999C6.00497 13.0999 4.59998 12.5174 3.53998 11.46C2.48249 10.4 1.89999 8.99496 1.89999 7.49997C1.89999 6.00497 2.48249 4.59748 3.53998 3.53998C4.59998 2.48249 6.00497 1.89999 7.49997 1.89999C8.99496 1.89999 10.4025 2.47999 11.46 3.53998C12.5174 4.59998 13.0999 6.00497 13.0999 7.49997C13.0999 8.99496 12.5174 10.4025 11.46 11.46Z',
+    'M21.9399 20.5624L15.4474 14.0699C16.4549 12.7675 16.9999 11.175 16.9999 9.49997C16.9999 7.49498 16.2174 5.61498 14.8024 4.19749C13.3874 2.78 11.5025 2 9.49997 2C7.49748 2 5.61248 2.7825 4.19749 4.19749C2.78 5.61248 2 7.49498 2 9.49997C2 11.5025 2.7825 13.3874 4.19749 14.8024C5.61248 16.2199 7.49498 16.9999 9.49997 16.9999C11.175 16.9999 12.765 16.4549 14.0674 15.4499L20.5599 21.9399C20.579 21.959 20.6016 21.9741 20.6264 21.9844C20.6513 21.9947 20.678 22 20.7049 22C20.7318 22 20.7585 21.9947 20.7834 21.9844C20.8083 21.9741 20.8309 21.959 20.8499 21.9399L21.9399 20.8524C21.959 20.8334 21.9741 20.8108 21.9844 20.7859C21.9947 20.761 22 20.7343 22 20.7074C22 20.6805 21.9947 20.6538 21.9844 20.6289C21.9741 20.6041 21.959 20.5815 21.9399 20.5624ZM13.46 13.46C12.4 14.5174 10.995 15.0999 9.49997 15.0999C8.00497 15.0999 6.59998 14.5174 5.53998 13.46C4.48249 12.4 3.89999 10.995 3.89999 9.49997C3.89999 8.00497 4.48249 6.59748 5.53998 5.53998C6.59998 4.48249 8.00497 3.89999 9.49997 3.89999C10.995 3.89999 12.4025 4.47999 13.46 5.53998C14.5174 6.59998 15.0999 8.00497 15.0999 9.49997C15.0999 10.995 14.5174 12.4025 13.46 13.46Z',
 });