@transferwise/components 0.0.0-experimental-bc13343 → 0.0.0-experimental-739bfcf

package/src/main.css

@@ -518,10 +518,18 @@ div.critical-comms .critical-comms-body {
   -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
           mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) right calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
 }
+[dir="rtl"] .np-avatar-layout-diagonal-mask {
+  -webkit-mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+          mask-image: radial-gradient(circle at bottom calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)) left calc(100% - var(--np-avatar-size) - var(--np-avatar-offset)), transparent 0, transparent calc(var(--np-avatar-size) / 2 + 2px), black 0);
+}
 .np-avatar-layout-diagonal-child {
   margin-left: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
   margin-top: calc(var(--np-avatar-layout-size) - var(--np-avatar-size));
 }
+[dir="rtl"] .np-avatar-layout-diagonal-child {
+  margin-left: 0;
+  margin-right: calc(var(--np-avatar-layout-size) - var(--np-avatar-size) * 2);
+}
 .np-avatar-layout-horizontal {
   width: calc(var(--np-avatar-size) * 2 - var(--np-avatar-offset));
   height: var(--np-avatar-layout-size);
@@ -535,6 +543,9 @@ div.critical-comms .critical-comms-body {
 .np-avatar-layout-horizontal-child {
   margin-left: calc(var(--np-avatar-offset) * -1);
 }
+[dir="rtl"] .np-avatar-layout-horizontal-child {
+  margin-right: calc(var(--np-avatar-offset) * -1);
+}
 .np-icon-button {
   border: none;
 }
@@ -705,6 +716,245 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
+.wds-Button {
+  --Button-background: var(--color-interactive-accent);
+  --Button-background-hover: var(--color-interactive-accent-hover);
+  --Button-background-active: var(--color-interactive-accent-active);
+  --Button-color: var(--color-interactive-control);
+  --Button-padding: var(--size-8) var(--size-12);
+  --Button-border-radius: var(--radius-full);
+  --Button-size-small-padding: 5px var(--size-12);
+  --Button-size-medium-padding: var(--size-8) var(--size-12);
+  --Button-size-large-padding: var(--size-12) var(--size-16);
+  --Button-transition-duration: 150ms;
+  --Button-transition-easing: ease-in-out;
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
+  --Button-secondary-background-active: var(--color-interactive-neutral-active);
+  --Button-secondary-color: var(--color-interactive-primary);
+  --Button-tertiary-background: var(--color-background-neutral);
+  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
+  --Button-tertiary-background-active: var(--color-background-neutral-active);
+  --Button-tertiary-color: var(--color-content-primary);
+  --Button-minimal-background: transparent;
+  --Button-minimal-background-hover: var(--color-background-screen-hover);
+  --Button-minimal-background-active: var(--color-background-screen-active);
+  --Button-minimal-color: var(--color-interactive-primary);
+  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-primary-negative-color: var(--color-contrast);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
+  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
+}
+.np-theme-personal--bright-green .wds-Button {
+  --color-contrast: #FFFFFF;
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-contrast);
+}
+/* Button Styles */
+.wds-Button {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: var(--Button-background);
+  border: none;
+  border-radius: var(--Button-border-radius);
+  color: var(--Button-color);
+  cursor: pointer;
+  padding: var(--Button-padding);
+  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
+}
+.wds-Button:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:hover {
+  background-color: var(--Button-background-hover);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:active {
+  background-color: var(--Button-background-active);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled {
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.wds-Button.wds-Button--disabled:hover,
+.wds-Button:disabled:hover,
+.wds-Button.wds-Button--disabled:active,
+.wds-Button:disabled:active {
+  background-color: var(--Button-background);
+}
+.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-background);
+  --Button-background-hover: var(--Button-secondary-background-hover);
+  --Button-background-active: var(--Button-secondary-background-active);
+  --Button-color: var(--Button-secondary-color);
+}
+.wds-Button--tertiary {
+  --Button-background: var(--Button-tertiary-background);
+  --Button-background-hover: var(--Button-tertiary-background-hover);
+  --Button-background-active: var(--Button-tertiary-background-active);
+  --Button-color: var(--Button-tertiary-color);
+}
+.wds-Button--tertiary .wds-Button-icon--end {
+  color: var(--color-interactive-primary);
+}
+.wds-Button--minimal {
+  --Button-background: var(--Button-minimal-background);
+  --Button-background-hover: var(--Button-minimal-background-hover);
+  --Button-background-active: var(--Button-minimal-background-active);
+  --Button-color: var(--Button-minimal-color);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+.wds-Button--minimal:hover,
+.wds-Button--minimal:hover:active {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.wds-Button--negative.wds-Button--primary {
+  --Button-background: var(--Button-primary-negative-background);
+  --Button-background-hover: var(--Button-primary-negative-background-hover);
+  --Button-background-active: var(--Button-primary-negative-background-active);
+  --Button-color: var(--Button-primary-negative-color);
+}
+.wds-Button--negative.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-negative-background);
+  --Button-background-hover: var(--Button-secondary-negative-background-hover);
+  --Button-background-active: var(--Button-secondary-negative-background-active);
+  --Button-color: var(--Button-secondary-negative-color);
+}
+.wds-Button--small {
+  --Button-padding: var(--Button-size-small-padding);
+}
+.wds-Button--small .wds-Button-icon--start {
+  margin-right: 4px;
+  margin-right: var(--size-4);
+}
+[dir="rtl"] .wds-Button--small .wds-Button-icon--start {
+  margin-right: 0;
+  margin-left: 4px;
+  margin-left: var(--size-4);
+}
+.wds-Button--medium {
+  --Button-padding: var(--Button-size-medium-padding);
+}
+.wds-Button--large {
+  --Button-padding: var(--Button-size-large-padding);
+}
+.wds-Button--block {
+  width: 100%;
+}
+.wds-Button-avatars {
+  display: inline-flex;
+  margin-right: 5px;
+  margin-left: calc(4px * -1);
+  margin-left: calc(var(--size-4) * -1);
+}
+[dir="rtl"] .wds-Button-avatars {
+  margin-right: 0;
+  margin-left: 5px;
+}
+.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
+  color: var(--Button-color);
+}
+.wds-Button-icon {
+  display: inline-block;
+}
+.wds-Button-icon--start {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .wds-Button-icon--start {
+  margin-right: 0;
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}
+.wds-Button-icon--end {
+  margin-left: 4px;
+  margin-left: var(--size-4);
+}
+[dir="rtl"] .wds-Button-icon--end {
+  margin-left: 0;
+  margin-right: 4px;
+  margin-right: var(--size-4);
+}
+.wds-Button-content {
+  position: relative;
+}
+.wds-Button-content--loading .wds-Button-label,
+.wds-Button-content--loading .wds-Button-media,
+.wds-Button-content--loading .wds-Button-icon {
+  visibility: hidden;
+  opacity: 0;
+}
+.wds-Button-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+.wds-Button-loader {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.wds-Button-loader .process-circle {
+  stroke: var(--Button-color);
+}
+/* RTL Styles */
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right {
+  transform: rotate(180deg);
+}
+[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left {
+  transform: rotate(180deg);
+}
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
+}
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;

package/src/main.less

@@ -7,6 +7,7 @@
 @import "./avatarLayout/AvatarLayout.less";
 @import "./iconButton/IconButton.less";
 @import "./badge/Badge.less";
+@import "./button/LegacyButton.less";
 @import "./button/Button.less";
 @import "./card/Card.less";
 @import "./carousel/Carousel.less";

package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.tsx

@@ -30,13 +30,7 @@ const PrimitiveAnchor = forwardRef<HTMLAnchorElement, PrimitiveAnchorProps>(
     },
     ref,
   ) => {
-    const anchorClasses = clsx(
-      'wds-Anchor',
-      {
-        'wds-Anchor--disabled': disabled,
-      },
-      className,
-    );
+    const anchorClasses = clsx(className);
 
     const handleClick = useCallback(
       (event: React.MouseEvent<HTMLAnchorElement>) => {

package/src/primitives/PrimitiveAnchor/src/PrimitiveAnchor.types.ts

@@ -18,11 +18,16 @@ export interface PrimitiveAnchorProps
   children?: ReactNode;
 
   /** The URL to navigate to when the anchor is clicked */
-  href: string;
+  href?: string | undefined;
 
   /** Disable the anchor */
   disabled?: boolean;
 
   /** Reference to the anchor element */
   ref?: PrimitiveAnchorElementRef;
+
+  /**
+   * HTML anchor `target` attribute. If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
+   */
+  target?: HTMLAnchorElement['target'];
 }

package/src/primitives/PrimitiveAnchor/test/PrimitiveAnchor.spec.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import PrimitiveAnchor from '..';
+import PrimitiveAnchor from '../src';
 
 describe('PrimitiveAnchor', () => {
   const defaultProps = {
@@ -27,7 +27,6 @@ describe('PrimitiveAnchor', () => {
     renderAnchor(props);
 
     const link = screen.getByRole('link');
-    expect(link).toHaveClass('wds-Anchor');
     expect(link).toHaveClass('custom-class');
   });
 
@@ -41,7 +40,6 @@ describe('PrimitiveAnchor', () => {
 
     const link = screen.getByRole('link');
     expect(link).toHaveAttribute('aria-disabled', 'true');
-    expect(link).toHaveClass('wds-Anchor--disabled');
     expect(link).not.toHaveAttribute('href', 'https://example.com');
   });
 

package/src/primitives/PrimitiveButton/src/PrimitiveButton.tsx

@@ -35,14 +35,7 @@ const PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(
     ref,
   ) => {
     const intl = useIntl();
-    const classNames = clsx(
-      'wds-Button',
-      {
-        'wds-Button--disabled': disabled,
-        'wds-Button--loading': loading,
-      },
-      className,
-    );
+    const classNames = clsx(className);
 
     const handleClick = useCallback(
       (event: React.MouseEvent<HTMLButtonElement>) => {

package/src/primitives/PrimitiveButton/test/PrimitiveButton.spec.tsx

@@ -1,6 +1,5 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { userEvent } from '@testing-library/user-event';
-import PrimitiveButton from '..';
+import { screen } from '@testing-library/react';
+import PrimitiveButton from '../src';
 import messages from '../../../i18n/commonMessages/Button.messages';
 import { render } from '../../../test-utils';
 
@@ -36,7 +35,6 @@ describe('Button', () => {
     renderButton(props);
 
     const button = screen.getByRole('button');
-    expect(button).toHaveClass('wds-Button');
     expect(button).toHaveClass('custom-class');
   });
 
@@ -49,7 +47,6 @@ describe('Button', () => {
     renderButton(props);
 
     const button = screen.getByRole('button');
-    expect(button).toHaveClass('wds-Button--disabled');
     expect(button).toBeDisabled();
   });
 

package/src/select/Select.tsx

@@ -573,6 +573,7 @@ export default function Select({
         aria-controls={listboxId}
         aria-expanded={open}
         onClick={handleOnClick}
+        // @ts-expect-error Spread types may only be created from object types.
         {...buttonProps}
       >
         {selected ? (

package/src/button/__snapshots__/Button.spec.tsx.snap

@@ -1,309 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button by default renders a medium button of type accent and priority primary 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button by default renders an anchor tag with button styles of type accent and priority primary 1`] = `
-<div>
-  <a
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    href="#"
-  >
-    Send money
-  </a>
-</div>
-`;
-
-exports[`Button deprecated types renders danger as negative buttons with priority secondary and logs a warning 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button deprecated types renders link as accent buttons with priority tertiary and logs a warning 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button deprecated types renders pay as positive buttons and logs a warning 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button deprecated types renders primary as accent buttons and logs a warning 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button other states renders as block if block is true 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-block np-btn-block btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities defaults tertiary buttons to secondary for positive buttons 2`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders primary buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders primary buttons 2`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders primary buttons 3`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders secondary buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders secondary buttons 2`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders secondary buttons 3`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-2"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button priorities renders tertiary buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-3"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button sizes renders large buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-lg np-btn np-btn-lg btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button sizes renders medium buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button sizes renders small buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-sm np-btn np-btn-sm btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button types renders accent buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-accent btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button types renders negative buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-negative btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;
-
-exports[`Button types renders positive buttons 1`] = `
-<div>
-  <button
-    aria-busy="false"
-    aria-disabled="false"
-    aria-live="off"
-    class="btn btn-md np-btn np-btn-md btn-positive btn-priority-1"
-    type="button"
-  >
-    Send money
-  </button>
-</div>
-`;