npm - @rango-dev/ui - Versions diffs - 0.15.1-next.2 → 0.15.1-next.21 - Mend

@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.21

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 (1004) hide show

package/src/components/Drawer/Drawer.tsx CHANGED Viewed

@@ -1,119 +1,61 @@
+import type { PropTypes } from './Drawer.types';
+import type { PropsWithChildren } from 'react';
 import React from 'react';
-import { styled } from '../../theme';
-import { CloseIcon } from '../Icon';
-import { Typography } from '../Typography';
 import { createPortal } from 'react-dom';
-export interface PropTypes {
-  title?: string;
-  open: boolean;
-  onClose: () => void;
-  content: React.ReactNode;
-  containerStyle?: React.CSSProperties;
-  anchor?: 'bottom' | 'left' | 'right' | 'top';
-  showClose?: boolean;
-  footer?: React.ReactNode;
-  container: Element | null;
-}
-const BackDrop = styled('div', {
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  width: '100%',
-  height: '100%',
-  zIndex: 9999999,
-  backgroundColor: 'rgba(0,0,0,.1)',
-  borderRadius: '$10',
-});
-const DrawerContainer = styled('div', {
-  position: 'absolute',
-  boxShadow: '$s',
-  background: '$background',
-  padding: '$20',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  zIndex: 9999999,
-  borderRadius: '$10',
-  variants: {
-    anchor: {
-      left: {
-        top: 0,
-        left: 0,
-        height: '100%',
-        minWidth: '300px',
-        maxWidth: '90%',
-      },
-      right: {
-        top: 0,
-        right: 0,
-        height: '100%',
-        minWidth: '300px',
-        maxWidth: '90%',
-      },
-      bottom: {
-        bottom: 0,
-        width: '100%',
-        maxHeight: '90%',
-      },
-      top: {
-        top: 0,
-        width: '100%',
-        maxHeight: '90%',
-      },
-    },
-  },
-});
-const DrawerHeader = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  position: 'relative',
-  marginBottom: '$16',
-});
+import { CloseIcon } from '../../icons';
+import { Divider } from '../Divider';
+import { IconButton } from '../IconButton/IconButton';
+import { Typography } from '../Typography';
-const Body = styled('div', {
-  overflowY: 'auto',
-  height: '100%',
-});
-const Footer = styled('footer', {
-  width: '100%',
-  marginTop: '$28',
-});
+import {
+  BackDrop,
+  Body,
+  DrawerContainer,
+  DrawerHeader,
+  Footer,
+} from './Drawer.styles';
-export function Drawer(props: PropTypes) {
+export function Drawer(props: PropsWithChildren<PropTypes>) {
   const {
     title,
-    content,
     open,
     onClose,
-    containerStyle,
     anchor = 'bottom',
-    showClose = false,
+    dismissible = true,
     footer,
-    container,
+    container = document.body,
+    prefix,
+    children,
   } = props;
   const handleBackDropClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (event.target === event.currentTarget) onClose();
+    if (event.target === event.currentTarget && dismissible) {
+      onClose();
+    }
   };
   return (
     <>
-      {open &&
-        container &&
+      {container &&
+        open &&
         createPortal(
           <BackDrop onClick={handleBackDropClick}>
-            <DrawerContainer anchor={anchor} style={containerStyle}>
+            <DrawerContainer anchor={anchor}>
               <DrawerHeader>
-                <Typography variant="h6">{title}</Typography>
-                {showClose && <CloseIcon size={24} onClick={onClose} />}
+                {prefix}
+                <Typography variant="title" size="small">
+                  {title}
+                </Typography>
+                {dismissible && (
+                  <IconButton onClick={onClose}>
+                    <CloseIcon color="gray" />
+                  </IconButton>
+                )}
               </DrawerHeader>
-              <Body>{content}</Body>
+              <Divider size={16} />
+              <Body>{children}</Body>
               <Footer>{footer}</Footer>
             </DrawerContainer>
           </BackDrop>,

package/src/components/Drawer/Drawer.types.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type { DrawerContainer } from './Drawer.styles';
+import type * as Stitches from '@stitches/react';
+type BaseProps = Stitches.VariantProps<typeof DrawerContainer>;
+type BaseAnchor = Exclude<BaseProps['anchor'], object>;
+export interface PropTypes {
+  title?: string;
+  open: boolean;
+  onClose: () => void;
+  anchor?: BaseAnchor;
+  dismissible?: boolean;
+  footer?: React.ReactNode;
+  container?: Element | null;
+  hasLogo?: boolean;
+  prefix?: React.ReactNode;
+}

package/src/components/Header/Header.stories.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+const meta: Meta<typeof Header> = {
+  component: Header,
+};
+export default meta;
+type Story = StoryObj<typeof Header>;
+export const Main: Story = {
+  args: {
+    title: 'Swap',
+    prefix: 'hello',
+    suffix: 'world',
+  },
+};

package/src/components/Header/Header.styles.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { darkTheme, styled } from '../../theme';
+export const Container = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '$15 $20',
+  $$color: '$colors$neutral100',
+  [`.${darkTheme} &`]: {
+    $$color: '$colors$neutral300',
+  },
+  backgroundColor: '$$color',
+  position: 'relative',
+  borderTopRightRadius: '$primary',
+  borderTopLeftRadius: '$primary',
+});
+export const Suffix = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  gap: '$5',
+});

package/src/components/Header/Header.tsx CHANGED Viewed

@@ -1,39 +1,24 @@
-import { styled } from '../../theme';
-import React, { PropsWithChildren } from 'react';
-import { AngleLeftIcon } from '../Icon';
-import { Typography } from '../Typography';
-import { Button } from '../Button';
+import type { PropTypes } from './Header.types';
+import type { PropsWithChildren } from 'react';
-const HeaderContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: '$8 0',
-  position: 'relative',
-});
+import React from 'react';
-const BackButton = styled(Button, {
-  padding: '$8',
-});
+import { Typography } from '../Typography';
-interface PropTypes {
-  onBack?: () => void;
-  prefix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  title: string;
-}
+import { Container, Suffix } from './Header.styles';
-export function Header(props: PropsWithChildren<PropTypes>) {
+export function Header({
+  prefix,
+  suffix,
+  title,
+}: PropsWithChildren<PropTypes>) {
   return (
-    <HeaderContainer>
-      {props.onBack ? (
-        <BackButton variant="ghost" size="small" onClick={props.onBack}>
-          <AngleLeftIcon size={24} />
-        </BackButton>
-      ) : null}
-      {props.prefix}
-      <Typography variant="h4">{props.title}</Typography>
-      {props.suffix || <div></div>}
-    </HeaderContainer>
+    <Container>
+      {prefix}
+      <Typography variant="headline" size="small">
+        {title}
+      </Typography>
+      <Suffix>{suffix}</Suffix>
+    </Container>
   );
 }

package/src/components/Header/Header.types.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export interface PropTypes {
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  title: string;
+}

package/src/components/I18nManager/I18nManager.tsx CHANGED Viewed

@@ -1,18 +1,20 @@
-import React, { useEffect } from 'react';
+import type { PropsWithChildren } from 'react';
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
-import { PropsWithChildren } from 'react';
-/*
-  Note: esbuild doesn't work properly with paths yet, so I couldn't use `paths` to make this path shorter.
-  e.g:
-  "paths": {
-    "translations/*": ["../../translations/*"]
-  }
-*/
+import React, { useEffect } from 'react';
+/*
+ *Note: esbuild doesn't work properly with paths yet, so I couldn't use `paths` to make this path shorter.
+ *e.g:
+ *"paths": {
+ *  "translations/*": ["../../translations/*"]
+ *}
+ */
 import { messages as enMessages } from '../../../../../translations/en';
 import { messages as esMessages } from '../../../../../translations/es';
-import { messages as jpMessages } from '../../../../../translations/jp';
 import { messages as frMessages } from '../../../../../translations/fr';
+import { messages as jpMessages } from '../../../../../translations/jp';
 const DEFAULT_LANGUAGE = 'en';
 const messages = {

package/src/components/Icon/AddCircleIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const AddCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM8 12h8M12 16V8"
         strokeWidth={1.5}

package/src/components/Icon/AddIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const AddIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M6 12h12M12 18V6"
         strokeWidth={1.5}

package/src/components/Icon/AddWalletIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const AddWalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/AngleDownIcon.tsx CHANGED Viewed

@@ -15,8 +15,7 @@ export const AngleDownIcon: React.FC<IconProps> = ({
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     className="_icon"
-    {...props}
-  >
+    {...props}>
     <path
       d="m19.92 8.95-6.52 6.52c-.77.77-2.03.77-2.8 0L4.08 8.95"
       strokeWidth={1.5}

package/src/components/Icon/AngleLeftIcon.tsx CHANGED Viewed

@@ -17,8 +17,7 @@ export const AngleLeftIcon: React.FC<IconProps> = ({
       color={color}
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M15 19.92 8.48 13.4c-.77-.77-.77-2.03 0-2.8L15 4.08"
         strokeWidth={1.5}

package/src/components/Icon/AngleRightIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const AngleRightIcon: React.FC<IconProps> = ({
       viewBox="0 0 24 24"
       color={color}
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="m8.91 19.92 6.52-6.52c.77-.77.77-2.03 0-2.8L8.91 4.08"
         strokeWidth={1.5}

package/src/components/Icon/AngleUpIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const AngleUpIcon: React.FC<IconProps> = ({
       viewBox="0 0 24 24"
       color={color}
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M19.92 15.05 13.4 8.53c-.77-.77-2.03-.77-2.8 0l-6.52 6.52"
         strokeWidth={1.5}

package/src/components/Icon/ArrowRightIcon.tsx CHANGED Viewed

@@ -20,8 +20,7 @@ export const ArrowRightIcon: React.FC<IconProps> = ({
       strokeLinejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <line x1="5" y1="12" x2="19" y2="12"></line>
       <polyline points="12 5 19 12 12 19"></polyline>
     </SvgWithStrokeColor>

package/src/components/Icon/BagIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const BagIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <g clipPath="url(#a)" strokeWidth={1.5}>
         <path d="M9.333 9.333V4.8a.8.8 0 0 1 .8-.8h11.734a.8.8 0 0 1 .8.8v4.533M13.333 4v5.333M16 4v5.333m9.333 17.334H6.667A2.667 2.667 0 0 1 4 24V12a2.667 2.667 0 0 1 2.667-2.667h18.666A2.667 2.667 0 0 1 28 12v12a2.667 2.667 0 0 1-2.667 2.667Z" />
         <path

package/src/components/Icon/BanIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const BanIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2 2 6.48 2 12s4.48 10 10 10ZM18.9 5l-14 14"
         strokeWidth={1.5}

package/src/components/Icon/CheckCircleIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const CheckCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10Z"
         strokeWidth={1.5}

package/src/components/Icon/CheckIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const CheckIcon: React.FC<IconProps> = ({
       xmlns="http://www.w3.org/2000/svg"
       color={color}
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
         fillRule="evenodd"

package/src/components/Icon/CheckSquareIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const CheckSquareIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z"
         strokeWidth={1.5}

package/src/components/Icon/CheckWalletIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const CheckWalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/ChevronRightIcon.tsx CHANGED Viewed

@@ -18,8 +18,7 @@ export const ChevronRightIcon = React.forwardRef<SVGSVGElement, IconProps>(
         strokeLinejoin="round"
         className="_icon"
         {...props}
-        ref={forwardedRef}
-      >
+        ref={forwardedRef}>
         <polyline points="9 18 15 12 9 6"></polyline>
       </SvgWithStrokeColor>
     );

package/src/components/Icon/CopyIcon.tsx CHANGED Viewed

@@ -15,8 +15,7 @@ export const CopyIcon: React.FC<IconProps> = ({
       color={color}
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <g id="Text-files">
         <path
           d="M53.9791489,9.1429005H50.010849c-0.0826988,0-0.1562004,0.0283995-0.2331009,0.0469999V5.0228

package/src/components/Icon/DeleteCircleIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const DeleteCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM9.17 14.83l5.66-5.66M14.83 14.83 9.17 9.17"
         strokeWidth={1.5}

package/src/components/Icon/DeleteWalletIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const DeleteWalletIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"

package/src/components/Icon/DisconnectIcon.tsx CHANGED Viewed

@@ -18,8 +18,7 @@ export const DisconnectIcon = React.forwardRef<SVGSVGElement, IconProps>(
         strokeLinejoin="round"
         className="_icon"
         {...props}
-        ref={forwardedRef}
-      >
+        ref={forwardedRef}>
         <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
         <polyline points="16 17 21 12 16 7"></polyline>
         <line x1="21" y1="12" x2="9" y2="12"></line>

package/src/components/Icon/DownloadIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const DownloadIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M16.44 8.9c3.6.31 5.07 2.16 5.07 6.21v.13c0 4.47-1.79 6.26-6.26 6.26H8.74c-4.47 0-6.26-1.79-6.26-6.26v-.13c0-4.02 1.45-5.87 4.99-6.2M12 2v12.88"
         strokeWidth={1.5}

package/src/components/Icon/GasIcon.tsx CHANGED Viewed

@@ -1,6 +1,9 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import type { IconProps } from './types';
 import * as React from 'react';
 import { SvgWithStrokeColor } from './common';
-import { IconProps } from './types';
 export const GasIcon: React.FC<IconProps> = ({
   size = 16,
@@ -16,8 +19,7 @@ export const GasIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M4 22V5c0-2 1.34-3 3-3h8c1.66 0 3 1 3 3v17H4ZM2.5 22h17"
         strokeWidth={1.5}

package/src/components/Icon/HistoryIcon.tsx CHANGED Viewed

@@ -20,8 +20,7 @@ export const HistoryIcon: React.FC<IconProps> = ({
       strokeLinejoin="round"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
       <polyline points="14 2 14 8 20 8"></polyline>
       <line x1="16" y1="13" x2="8" y2="13"></line>

package/src/components/Icon/HorizontalSwapIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const HorizontalSwapIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="m17.15 13.82-3.04 3.04M6.85 13.82h10.3M6.85 10.18l3.04-3.04M17.15 10.18H6.85"
         strokeWidth={1.5}

package/src/components/Icon/Icons.stories.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { Meta } from '@storybook/react';
 import { styled } from '../../theme';
 export default {
-  title: 'Components/Icons',
+  title: 'Components/Icons (Deprecated)',
   component: Icons.AngleRightIcon,
   args: {
     size: 16,

package/src/components/Icon/InfoCircleIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const InfoCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M12 22c5.5 0 10-4.5 10-10S17.5 2 12 2 2 6.5 2 12s4.5 10 10 10ZM12 8v5"
         strokeWidth={2}

package/src/components/Icon/MinusCircleIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const MinusCircleIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M11.92 22c5.5 0 10-4.5 10-10s-4.5-10-10-10-10 4.5-10 10 4.5 10 10 10ZM7.92 12h8"
         strokeWidth={1.5}

package/src/components/Icon/RetryIcon.tsx CHANGED Viewed

@@ -18,8 +18,7 @@ export const RetryIcon = React.forwardRef<SVGSVGElement, IconProps>(
         strokeLinejoin="round"
         className="_icon"
         {...props}
-        ref={forwardedRef}
-      >
+        ref={forwardedRef}>
         <polyline points="23 4 23 10 17 10"></polyline>
         <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
       </SvgWithStrokeColor>

package/src/components/Icon/RetryLeftIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const RetryLeftIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M9.11 5.08c.87-.26 1.83-.43 2.89-.43 4.79 0 8.67 3.88 8.67 8.67s-3.88 8.67-8.67 8.67-8.67-3.88-8.67-8.67c0-1.78.54-3.44 1.46-4.82M7.87 5.32 10.76 2M7.87 5.32l3.37 2.46"
         strokeWidth={1.5}

package/src/components/Icon/RetryRightIcon.tsx CHANGED Viewed

@@ -16,8 +16,7 @@ export const RetryRightIcon: React.FC<IconProps> = ({
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className="_icon"
-      {...props}
-    >
+      {...props}>
       <path
         d="M14.89 5.08c-.87-.26-1.83-.43-2.89-.43-4.79 0-8.67 3.88-8.67 8.67C3.33 18.12 7.21 22 12 22s8.67-3.88 8.67-8.67c0-1.78-.54-3.44-1.46-4.82M16.13 5.32 13.24 2M16.13 5.32l-3.37 2.46"
         strokeWidth={1.5}