@transferwise/components 45.14.2 → 45.15.0

package/src/inputs/_BottomSheet.tsx

@@ -0,0 +1,128 @@
+import {
+  FloatingFocusManager,
+  FloatingPortal,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { Transition } from '@headlessui/react';
+import classNames from 'classnames';
+import { useState } from 'react';
+
+import { CloseButton } from '../common/closeButton';
+import { PreventScroll } from '../common/preventScroll/PreventScroll';
+import { Size } from '../common/propsValues/size';
+
+export interface BottomSheetProps {
+  open: boolean;
+  renderTrigger?: (args: {
+    ref: React.RefCallback<Element>;
+    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {
+      [key: string]: unknown;
+    };
+  }) => React.ReactNode;
+  title?: string;
+  initialFocusRef?: React.RefObject<HTMLElement>;
+  padding?: 'none' | 'md';
+  children?: React.ReactNode;
+  onClose?: () => void;
+}
+
+export function BottomSheet({
+  open,
+  renderTrigger,
+  title,
+  initialFocusRef,
+  padding = 'md',
+  children,
+  onClose,
+}: BottomSheetProps) {
+  const { refs, context } = useFloating<Element>({
+    open,
+    onOpenChange: (value) => {
+      if (!value) {
+        onClose?.();
+      }
+    },
+  });
+
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'mousedown',
+  });
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role]);
+
+  const [floatingKey, setFloatingKey] = useState(0);
+
+  return (
+    <>
+      {open ? <PreventScroll /> : null}
+      {renderTrigger?.({
+        ref: refs.setReference,
+        getInteractionProps: getReferenceProps,
+      })}
+
+      <FloatingPortal>
+        <Transition
+          show={open}
+          className="np-bottom-sheet-v2-container"
+          beforeEnter={() => {
+            setFloatingKey((prev) => prev + 1);
+          }}
+        >
+          <Transition.Child
+            enter="np-bottom-sheet-v2-backdrop-container--enter"
+            enterFrom="np-bottom-sheet-v2-backdrop-container--enter-from"
+            leave="np-bottom-sheet-v2-backdrop-container--leave"
+            leaveTo="np-bottom-sheet-v2-backdrop-container--leave-to"
+          >
+            <div className="np-bottom-sheet-v2-backdrop" />
+          </Transition.Child>
+
+          <FloatingFocusManager context={context} initialFocus={initialFocusRef}>
+            <div className="np-bottom-sheet-v2">
+              <Transition.Child
+                className="np-bottom-sheet-v2-content"
+                enter="np-bottom-sheet-v2-content--enter"
+                enterFrom="np-bottom-sheet-v2-content--enter-from"
+                leave="np-bottom-sheet-v2-content--leave"
+                leaveTo="np-bottom-sheet-v2-content--leave-to"
+              >
+                <div
+                  key={floatingKey} // Force inner state invalidation on open
+                  ref={refs.setFloating}
+                  className="np-bottom-sheet-v2-content-inner-container"
+                  {...getFloatingProps()}
+                >
+                  <div className="np-bottom-sheet-v2-header">
+                    <CloseButton
+                      size={Size.SMALL}
+                      onClick={() => {
+                        onClose?.();
+                      }}
+                    />
+                  </div>
+                  <div
+                    className={classNames(
+                      'np-bottom-sheet-v2-content-inner',
+                      title && 'np-bottom-sheet-v2-content-inner--has-title',
+                      {
+                        'np-bottom-sheet-v2-content-inner--padding-md': padding === 'md',
+                      },
+                    )}
+                  >
+                    {title ? (
+                      <h2 className="np-bottom-sheet-v2-title np-text-title-body">{title}</h2>
+                    ) : null}
+                    <div className="np-bottom-sheet-v2-body np-text-body-default">{children}</div>
+                  </div>
+                </div>
+              </Transition.Child>
+            </div>
+          </FloatingFocusManager>
+        </Transition>
+      </FloatingPortal>
+    </>
+  );
+}

package/src/inputs/_ButtonInput.less

@@ -0,0 +1,7 @@
+.np-button-input {
+  display: inline-grid;
+  grid-auto-columns: minmax(0, 1fr);
+  align-content: center;
+  border-radius: var(--size-10);
+  text-align: start;
+}

package/src/inputs/_ButtonInput.tsx

@@ -0,0 +1,27 @@
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+
+import { useInputPaddings } from './InputGroup';
+import { formControlClassNameBase } from './_common';
+
+export interface ButtonInputProps extends React.ComponentPropsWithRef<'button'> {
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const ButtonInput = forwardRef(function ButtonInput(
+  { size = 'md', className, style, ...restProps }: ButtonInputProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const inputPaddings = useInputPaddings();
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={classNames(className, formControlClassNameBase({ size }), 'np-button-input')}
+      // eslint-disable-next-line react/forbid-dom-props
+      style={{ ...inputPaddings, ...style }}
+      {...restProps}
+    />
+  );
+});

package/src/inputs/_Popover.less

@@ -0,0 +1,38 @@
+.np-popover-v2-container {
+  z-index: 10;
+  display: flex;
+  max-height: var(--max-height);
+  width: var(--width);
+  min-width: min-content;
+  flex-direction: column;
+  border-radius: var(--radius-small);
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 0 40px rgb(69 71 69 / 0.2);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.np-popover-v2 {
+  display: grid;
+  row-gap: var(--size-8);
+  overflow-y: auto;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+
+  &--has-title {
+    grid-template-rows: auto 1fr;
+  }
+
+  &--padding-md {
+    padding: var(--size-16);
+  }
+}
+
+.np-popover-v2-title {
+  color: var(--color-content-primary);
+}
+
+.np-popover-v2-content {
+  color: var(--color-content-secondary);
+}

package/src/inputs/_Popover.tsx

@@ -0,0 +1,118 @@
+import {
+  autoUpdate,
+  flip,
+  FloatingFocusManager,
+  FloatingPortal,
+  offset,
+  shift,
+  type Side,
+  size,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from '@floating-ui/react';
+import { Transition } from '@headlessui/react';
+import classNames from 'classnames';
+import { useState } from 'react';
+
+import { PreventScroll } from '../common/preventScroll/PreventScroll';
+
+export interface PopoverProps {
+  placement?: Side;
+  open: boolean;
+  renderTrigger: (args: {
+    ref: React.RefCallback<Element>;
+    getInteractionProps: (customEventHandlers?: React.HTMLProps<Element>) => {
+      [key: string]: unknown;
+    };
+  }) => React.ReactNode;
+  title?: string;
+  padding?: 'none' | 'md';
+  children?: React.ReactNode;
+  onClose?: () => void;
+}
+
+const floatingPadding = 16;
+
+export function Popover({
+  placement,
+  open,
+  renderTrigger,
+  title,
+  padding = 'md',
+  children,
+  onClose,
+}: PopoverProps) {
+  const { refs, floatingStyles, context } = useFloating<Element>({
+    placement,
+    middleware: [
+      offset(8),
+      flip({ padding: floatingPadding, crossAxis: false }),
+      shift(),
+      size({
+        padding: floatingPadding,
+        apply: ({ elements, rects, availableHeight }) => {
+          elements.floating.style.setProperty('--max-height', `${availableHeight}px`);
+          elements.floating.style.setProperty('--width', `${rects.reference.width}px`);
+        },
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: (value) => {
+      if (!value) {
+        onClose?.();
+      }
+    },
+  });
+
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'mousedown',
+  });
+  const role = useRole(context);
+  const { getReferenceProps, getFloatingProps } = useInteractions([role, dismiss]);
+
+  const [floatingKey, setFloatingKey] = useState(0);
+
+  return (
+    <>
+      {open ? <PreventScroll /> : null}
+      {renderTrigger({
+        ref: refs.setReference,
+        getInteractionProps: getReferenceProps,
+      })}
+
+      <FloatingPortal>
+        <FloatingFocusManager context={context}>
+          <Transition
+            show={open}
+            leave="transition-opacity"
+            leaveTo="opacity-0"
+            beforeEnter={() => {
+              setFloatingKey((prev) => prev + 1);
+            }}
+          >
+            <div
+              key={floatingKey} // Force inner state invalidation on open
+              ref={refs.setFloating}
+              className="np-popover-v2-container"
+              // eslint-disable-next-line react/forbid-dom-props
+              style={floatingStyles}
+              {...getFloatingProps()}
+            >
+              <div
+                className={classNames('np-popover-v2', title && 'np-popover-v2--has-title', {
+                  'np-popover-v2--padding-md': padding === 'md',
+                })}
+              >
+                {title ? <h2 className="np-popover-v2-title np-text-title-body">{title}</h2> : null}
+                <div className="np-popover-v2-content np-text-body-default">{children}</div>
+              </div>
+            </div>
+          </Transition>
+        </FloatingFocusManager>
+      </FloatingPortal>
+    </>
+  );
+}

package/src/inputs/_common.less

@@ -56,8 +56,4 @@
   &--size-lg {
     height: var(--size-72) !important;
   }
-
-  &--shape-rectangle {
-    border-radius: var(--radius-small);
-  }
 }

package/src/inputs/_common.ts

@@ -16,6 +16,5 @@ export function formControlClassNameBase({ size = 'auto' }: FormControlPropsBase
       'np-form-control--size-md np-text-body-large': size === 'md',
       'np-form-control--size-lg np-text-title-subsection': size === 'lg',
     },
-    'np-form-control--shape-rectangle',
   );
 }

package/src/logo/Logo.js

@@ -1,4 +1,3 @@
-import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -9,21 +8,9 @@ import { useClientWidth } from '../common/hooks';
 import { LogoType } from './logoTypes';
 import { LogoFlagInverse } from './svg/flag-inverse.svg';
 import { LogoFlag } from './svg/flag.svg';
-import { LogoWiseBusinessInverse } from './svg/logo-business-inverse.svg';
-import { LogoWiseBusiness } from './svg/logo-business.svg';
 import { LogoWiseInverse } from './svg/logo-inverse.svg';
 import { LogoWise } from './svg/logo.svg';
 
-const baseUrl = 'https://wise.com/public-resources/assets/logos/wise/';
-
-const logoPaths = {
-  WISE: 'brand_logo.svg',
-  WISE_BUSINESS: 'brand_logo_business.svg',
-  WISE_INVERSE: 'brand_logo_inverse.svg',
-  WISE_BUSINESS_INVERSE: 'brand_logo_business_inverse.svg',
-  WISE_FLAG: 'brand_flag.svg',
-};
-
 const svgPaths = {
   WISE: LogoWise,
   WISE_BUSINESS: LogoWise,
@@ -34,21 +21,16 @@ const svgPaths = {
 };
 
 const Logo = ({ className, inverse, type }) => {
-  const { isModern } = useTheme();
   const [clientWidth] = useClientWidth({ ref: isServerSide() ? undefined : window });
   const isSmall = clientWidth < Breakpoint.SMALL;
-  const path = isSmall ? logoPaths['WISE_FLAG'] : logoPaths[`${type}${inverse ? '_INVERSE' : ''}`];
   const LogoSvg = isSmall
     ? svgPaths[`WISE_FLAG${inverse ? '_INVERSE' : ''}`]
     : svgPaths[`${type}${inverse ? '_INVERSE' : ''}`];
 
-  return isModern ? (
-    <LogoSvg className="np-logo-svg" />
-  ) : (
-    <img
-      className={classNames('np-logo', className)}
+  return (
+    <LogoSvg
+      className={classNames('np-logo-svg', className)}
       alt={type === LogoType.WISE ? 'Wise' : 'Wise business'}
-      src={`${baseUrl}${path}`}
     />
   );
 };

package/src/logo/__snapshots__/Logo.spec.js.snap

@@ -1,61 +1,109 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Logo on mobile renders only fast flag 1`] = `
+<div>
+  <svg
+    alt="Wise"
+    class="np-logo-svg class"
+    fill="none"
+    height="24"
+    width="26"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.826 7.232 0 15.21h12.188l1.37-3.762H8.335l3.191-3.69.01-.098L9.461 4.09h9.336L11.56 24h4.953L25.25 0H2.676l4.15 7.232Z"
+      fill="#163300"
+    />
+  </svg>
+</div>
+`;
+
 exports[`Logo renders wise business logo 1`] = `
 <div>
-  <img
+  <svg
     alt="Wise business"
-    class="np-logo class"
-    src="https://wise.com/public-resources/assets/logos/wise/brand_logo_business.svg"
-  />
+    class="np-logo-svg class"
+    fill="none"
+    height="24"
+    width="106"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
+      fill="#163300"
+    />
+  </svg>
 </div>
 `;
 
 exports[`Logo renders wise business logo inversed 1`] = `
 <div>
-  <img
+  <svg
     alt="Wise business"
-    class="np-logo class"
-    src="https://wise.com/public-resources/assets/logos/wise/brand_logo_business_inverse.svg"
-  />
+    class="np-logo-svg class"
+    fill="none"
+    height="24"
+    width="106"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
+      fill="#9FE870"
+    />
+  </svg>
 </div>
 `;
 
 exports[`Logo renders wise logo 1`] = `
 <div>
-  <img
+  <svg
     alt="Wise"
-    class="np-logo class"
-    src="https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"
-  />
+    class="np-logo-svg class"
+    fill="none"
+    height="24"
+    width="106"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
+      fill="#163300"
+    />
+  </svg>
 </div>
 `;
 
 exports[`Logo renders wise logo by default 1`] = `
 <div>
-  <img
+  <svg
     alt="Wise"
-    class="np-logo class"
-    src="https://wise.com/public-resources/assets/logos/wise/brand_logo.svg"
-  />
+    class="np-logo-svg class"
+    fill="none"
+    height="24"
+    width="106"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
+      fill="#163300"
+    />
+  </svg>
 </div>
 `;
 
 exports[`Logo renders wise logo inversed 1`] = `
 <div>
-  <img
-    alt="Wise"
-    class="np-logo class"
-    src="https://wise.com/public-resources/assets/logos/wise/brand_logo_inverse.svg"
-  />
-</div>
-`;
-
-exports[`Logo on mobile renders only fast flag 1`] = `
-<div>
-  <img
+  <svg
     alt="Wise"
-    class="np-logo class"
-    src="https://wise.com/public-resources/assets/logos/wise/brand_flag.svg"
-  />
+    class="np-logo-svg class"
+    fill="none"
+    height="24"
+    width="106"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M58.738.359h6.498l-3.27 23.322h-6.498L58.739.359Zm-8.193 0L46.16 13.794 44.247.359h-4.545L33.96 13.754 33.243.36h-6.299l2.193 23.322h5.223l6.458-14.75 2.272 14.75h5.143L56.725.359h-6.18Zm54.558 13.555H89.674c.08 3.03 1.894 5.023 4.565 5.023 2.014 0 3.608-1.077 4.844-3.13l5.208 2.368C102.501 21.702 98.729 24 94.08 24c-6.339 0-10.545-4.266-10.545-11.123C83.535 5.342 88.478 0 95.455 0c6.14 0 10.007 4.146 10.007 10.605 0 1.076-.12 2.152-.359 3.309Zm-5.78-4.466c0-2.71-1.516-4.425-3.947-4.425-2.512 0-4.585 1.794-5.144 4.425h9.09ZM6.632 7.387 0 15.139h11.844l1.33-3.655H8.1l3.1-3.586.01-.095-2.016-3.471h9.072l-7.032 19.35h4.812L24.538.358H2.6l4.033 7.028Zm69.168-2.364c2.292 0 4.3 1.233 6.055 3.346l.921-6.575C81.143.688 78.93 0 76 0c-5.82 0-9.09 3.409-9.09 7.734 0 3 1.675 4.834 4.426 6.02l1.315.598c2.452 1.047 3.11 1.565 3.11 2.671 0 1.146-1.106 1.874-2.79 1.874-2.782.01-5.034-1.415-6.728-3.847l-.94 6.699C67.234 23.22 69.708 24 72.97 24c5.532 0 8.93-3.19 8.93-7.615 0-3.01-1.335-4.943-4.704-6.458l-1.435-.678c-1.994-.887-2.671-1.375-2.671-2.352 0-1.056.927-1.874 2.71-1.874Z"
+      fill="#9FE870"
+    />
+  </svg>
 </div>
 `;