@transferwise/components 0.0.0-experimental-75fc27b → 0.0.0-experimental-8a932bb

package/build/styles/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) - 2px);
   height: var(--np-avatar-layout-size);
@@ -535,81 +543,79 @@ 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;
 }
 .np-icon-button-tertiary-default {
-  color: var(--color-interactive-primary);
-  background-color: rgba(134,167,189,0.10196);
-  background-color: var(--color-background-neutral);
+  --Button-color: var(--color-interactive-primary);
+  --Button-background: var(--color-background-neutral);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-neutral-hover);
+  --Button-background-hover: var(--color-background-neutral-hover);
 }
 .np-icon-button-tertiary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-neutral-active);
+  --Button-background-active: var(--color-background-neutral-active);
 }
 .np-icon-button-primary-default {
-  color: var(--color-interactive-control);
-  background-color: #00a2dd;
-  background-color: var(--color-interactive-accent);
+  --Button-color: var(--color-interactive-control);
+  --Button-background: var(--color-interactive-accent);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):hover {
-  background-color: #008fc9;
-  background-color: var(--color-interactive-accent-hover);
+  --Button-background-hover: var(--color-interactive-accent-hover);
 }
 .np-icon-button-primary-default:not(.disabled):not(:disabled):active {
-  background-color: #0081ba;
-  background-color: var(--color-interactive-accent-active);
+  --Button-background-active: var(--color-interactive-accent-active);
 }
 .np-icon-button-primary-negative {
-  color: var(--color-contrast-overlay);
-  background-color: var(--color-sentiment-negative-primary);
+  --Button-color: var(--color-contrast-overlay);
+  --Button-background: var(--color-sentiment-negative-primary);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-sentiment-negative-primary-hover);
+  --Button-background-hover: var(--color-sentiment-negative-primary-hover);
 }
 .np-icon-button-primary-negative:not(.disabled):not(:disabled):active {
-  background-color: var(--color-sentiment-negative-primary-active);
+  --Button-background-active: var(--color-sentiment-negative-primary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-primary-negative {
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  color: var(--color-interactive-primary);
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
+  --Button-color: var(--color-interactive-primary);
+  --Button-background: var(--color-background-screen);
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
+  --Button-background-hover: var(--color-background-screen-hover);
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
+  --Button-background-active: var(--color-background-screen-active);
 }
 .np-icon-button-secondary-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-interactive-neutral);
+  --Button-color: var(--color-interactive-primary);
+  --Button-background: var(--color-interactive-neutral);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-interactive-neutral-hover);
+  --Button-background-hover: var(--color-interactive-neutral-hover);
 }
 .np-icon-button-secondary-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-interactive-neutral-active);
+  --Button-background-active: var(--color-interactive-neutral-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-default,
 .np-theme-personal--forest-green .np-icon-button-secondary-default {
   color: var(--color-interactive-control);
 }
 .np-icon-button-secondary-negative {
-  color: var(--color-sentiment-negative-primary);
-  background-color: var(--color-sentiment-negative-secondary);
+  --Button-color: var(--color-sentiment-negative-primary);
+  --Button-background: var(--color-sentiment-negative-secondary);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-sentiment-negative-secondary-hover);
+  --Button-background-hover: var(--color-sentiment-negative-secondary-hover);
 }
 .np-icon-button-secondary-negative:not(.disabled):not(:disabled):active {
-  background-color: var(--color-sentiment-negative-secondary-active);
+  --Button-background-active: var(--color-sentiment-negative-secondary-active);
 }
 .np-theme-personal--bright-green .np-icon-button-secondary-negative {
   color: var(--color-white);
@@ -705,6 +711,259 @@ div.critical-comms .critical-comms-body {
 .np-btn.disabled[class] {
   pointer-events: auto;
 }
+:root {
+  --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-font-size: var(--font-size-16);
+  --Button-line-height: var(--size-24);
+  --Button-font-weight: var(--font-weight-semi-bold);
+  --Button-letter-spacing: -0.011em;
+  --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-avatar-border-color: var(--color-border-neutral);
+  --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-primary-netative-avatar-border-color: rgba(255,255,255,0.2);
+  --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);
+  --Button-secondary-netative-avatar-border-color: rgba(168,32,13,0.12157);
+}
+.np-theme-personal--dark {
+  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+}
+.np-theme-personal--forest-green {
+  --color-interactive-neutral: rgba(159,232,112,0.2);
+  --color-interactive-neutral-hover: rgba(205,255,173,0.2);
+  --color-interactive-neutral-active: rgba(236,255,224,0.2);
+  --color-sentiment-negative-secondary: rgba(255,196,194,0.2);
+  --color-sentiment-negative-secondary-hover: rgba(255,220,219,0.2);
+  --color-sentiment-negative-secondary-active: rgba(255,235,235,0.2);
+  --Button-primary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+  --Button-secondary-netative-avatar-border-color: rgba(14,15,12,0.12157);
+}
+.np-theme-personal--bright-green {
+  --color-contrast: #FFFFFF;
+  --Button-secondary-color: var(--color-interactive-control);
+  --Button-secondary-negative-color: var(--color-contrast);
+  --Button-secondary-netative-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
+}
+/* Button Styles */
+.wds-Button {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  font-weight: 600;
+  font-weight: var(--Button-font-weight);
+  font-size: 1rem;
+  font-size: var(--Button-font-size);
+  letter-spacing: -0.011em;
+  letter-spacing: var(--Button-letter-spacing);
+  line-height: 24px;
+  line-height: var(--Button-line-height);
+  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: #00a2dd;
+  background-color: var(--Button-background);
+  border: none;
+  border-radius: 9999px;
+  border-radius: var(--Button-border-radius);
+  color: var(--Button-color);
+  cursor: pointer;
+  padding: 8px 12px;
+  padding: var(--Button-padding);
+}
+.wds-Button:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:hover {
+  background-color: #008fc9;
+  background-color: var(--Button-background-hover);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:active {
+  background-color: #0081ba;
+  background-color: var(--Button-background-active);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+.wds-Button:disabled {
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.wds-Button:disabled:hover,
+.wds-Button:disabled:active {
+  background-color: #00a2dd;
+  background-color: var(--Button-background);
+}
+.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-background);
+  --Button-background-hover: var(--Button-secondary-hover-background);
+  --Button-background-active: var(--Button-secondary-active-background);
+  --Button-color: var(--Button-secondary-color);
+}
+.wds-Button--tertiary {
+  --Button-background: var(--Button-tertiary-background);
+  --Button-background-hover: var(--Button-tertiary-hover-background);
+  --Button-background-active: var(--Button-tertiary-active-background);
+  --Button-color: var(--Button-tertiary-color);
+}
+.wds-Button--tertiary .wds-Button-icon--right {
+  color: var(--color-interactive-primary);
+}
+.wds-Button--minimal {
+  --Button-background: var(--Button-minimal-background);
+  --Button-background-hover: var(--Button-minimal-hover-background);
+  --Button-background-active: var(--Button-minimal-active-background);
+  --Button-color: var(--Button-minimal-color);
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+}
+.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-hover-background);
+  --Button-background-active: var(--Button-primary-negative-active-background);
+  --Button-color: var(--Button-primary-negative-color);
+  --Button-avatar-border-color: var(--Button-primary-netative-avatar-border-color);
+}
+.wds-Button--negative.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-negative-background);
+  --Button-background-hover: var(--Button-secondary-negative-hover-background);
+  --Button-background-active: var(--Button-secondary-negative-active-background);
+  --Button-color: var(--Button-secondary-negative-color);
+  --Button-avatar-border-color: var(--Button-secondary-netative-avatar-border-color);
+}
+.wds-Button--small {
+  --Button-padding: var(--Button-size-small-padding);
+  --Button-line-height: 22px;
+  --Button-font-size: var(--font-size-14);
+  --Button-letter-spacing: -0.006em;
+}
+.wds-Button--small .wds-Button-icon--left {
+  margin-right: 4px;
+  margin-right: var(--size-4);
+}
+[dir="rtl"] .wds-Button--small .wds-Button-icon--left {
+  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-circle {
+  --circle-border-color: var(--Button-avatar-border-color);
+}
+.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
+  color: var(--Button-color);
+}
+.wds-Button-icon {
+  display: inline-block;
+}
+.wds-Button-icon--left {
+  margin-right: 8px;
+  margin-right: var(--size-8);
+}
+[dir="rtl"] .wds-Button-icon--left {
+  margin-right: 0;
+  margin-left: 8px;
+  margin-left: var(--size-8);
+}
+.wds-Button-icon--right {
+  margin-left: 4px;
+  margin-left: var(--size-4);
+}
+[dir="rtl"] .wds-Button-icon--right {
+  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);
+}
 .np-card {
   overflow: hidden;
   transition-property: transform, box-shadow;

package/build/types/avatarLayout/AvatarLayout.d.ts

@@ -1,5 +1,5 @@
 import { AvatarViewProps } from '../avatarView';
-type SingleAvatarType = {
+export type SingleAvatarType = {
     asset?: AvatarViewProps['children'];
 } & Omit<AvatarViewProps, 'notification' | 'selected' | 'size' | 'badge' | 'children' | 'interactive'>;
 export type Props = {
@@ -7,5 +7,4 @@ export type Props = {
     orientation?: 'horizontal' | 'diagonal';
 } & Pick<AvatarViewProps, 'size' | 'interactive' | 'className' | 'role' | 'aria-label' | 'aria-labelledby' | 'aria-hidden'>;
 export default function AvatarLayout({ avatars, orientation: orientationProp, size, className, interactive, ...restProps }: Props): import("react").JSX.Element | null;
-export {};
 //# sourceMappingURL=AvatarLayout.d.ts.map

package/build/types/avatarLayout/AvatarLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarLayout.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/AvatarLayout.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE5D,KAAK,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CACpE,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAC5E,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,IAAI,CACN,eAAe,EACf,MAAM,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAY,EACZ,WAAW,EAAE,eAA8B,EAC3C,IAAS,EACT,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,sCA8CP"}
+{"version":3,"file":"AvatarLayout.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/AvatarLayout.tsx"],"names":[],"mappings":"AACA,OAAmB,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,MAAM,gBAAgB,GAAG;IAAE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAA;CAAE,GAAG,IAAI,CAC3E,eAAe,EACf,cAAc,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAC5E,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC,GAAG,IAAI,CACN,eAAe,EACf,MAAM,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,GAAG,YAAY,GAAG,iBAAiB,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,OAAY,EACZ,WAAW,EAAE,eAA8B,EAC3C,IAAS,EACT,SAAS,EACT,WAAW,EACX,GAAG,SAAS,EACb,EAAE,KAAK,sCAuDP"}

package/build/types/avatarLayout/index.d.ts

@@ -1,3 +1,4 @@
 export type { Props as AvatarLayoutProps } from './AvatarLayout';
+export type { SingleAvatarType } from './AvatarLayout';
 export { default } from './AvatarLayout';
 //# sourceMappingURL=index.d.ts.map

package/build/types/avatarLayout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/avatarLayout/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/build/types/button/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './src';
+export * from './src';
+//# sourceMappingURL=index.d.ts.map

package/build/types/button/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,cAAc,OAAO,CAAC"}

package/build/types/button/Button/src/Button.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const Button: React.ForwardRefExoticComponent<(Omit<import("./Button.types").ButtonElementProps, "ref"> | Omit<import("./Button.types").AnchorElementProps, "ref">) & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/build/types/button/Button/src/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/button/Button/src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AASnD,QAAA,MAAM,MAAM,qNAsGX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/build/types/button/Button/src/Button.types.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import type { PrimitiveButtonProps, PrimitiveAnchorProps, PrimitiveButtonElementRef, PrimitiveAnchorElementRef } from '../../../primitives';
+import type { SingleAvatarType } from '../../../avatarLayout';
+export type ButtonApperance = 'default' | 'negative';
+export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonRefType = PrimitiveButtonElementRef | PrimitiveAnchorElementRef;
+/**
+ * Common properties for the Button component.
+ */
+export interface CommonButtonProps {
+    /** The HTML element to render */
+    as?: 'button' | 'a';
+    /** Additional class name(s) to apply to the button */
+    className?: string;
+    /** Content to be displayed inside the button */
+    children?: ReactNode;
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    href?: string;
+    /** Whether the button is in a loading state */
+    loading?: boolean;
+    /** Whether the button should take up the full width of its container */
+    block?: boolean;
+    /** Size of the button */
+    size?: ButtonSize;
+    /**
+     * Priority of the button
+     * @default 'primary'
+     */
+    priority?: ButtonPriority;
+    /**
+     * Appearance of the button
+     * @default 'default'
+     */
+    appearance?: ButtonApperance;
+    /** Icon to be displayed on the left side of the button */
+    iconLeft?: React.ElementType;
+    /** Icon to be displayed on the right side of the button */
+    iconRight?: React.ElementType;
+    /** Media to be displayed on the left side of the button */
+    avatars?: SingleAvatarType[];
+    /** Optional property to provide component Ref */
+    ref?: ButtonRefType;
+}
+export type ButtonElementProps = PrimitiveButtonProps & CommonButtonProps;
+export type AnchorElementProps = PrimitiveAnchorProps & CommonButtonProps;
+export type ButtonProps = ButtonElementProps | AnchorElementProps;
+//# sourceMappingURL=Button.types.d.ts.map

package/build/types/button/Button/src/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../../../src/button/Button/src/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,yBAAyB,EACzB,yBAAyB,EAC1B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,UAAU,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,yBAAyB,GAAG,yBAAyB,CAAC;AAElF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wEAAwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,yBAAyB;IACzB,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE7B,2DAA2D;IAC3D,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAE9B,2DAA2D;IAC3D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAE7B,iDAAiD;IACjD,GAAG,CAAC,EAAE,aAAa,CAAC;CACrB;AAED,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,GAAG,iBAAiB,CAAC;AAC1E,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}

package/build/types/button/Button/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/build/types/button/Button/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/button/Button/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}

package/build/types/button/{Button.d.ts → LegacyButton/Button.d.ts}

@@ -1,4 +1,4 @@
-import { ControlTypeAccent, ControlTypeNegative, ControlTypePositive, PriorityPrimary, PrioritySecondary, PriorityTertiary, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge } from '../common';
+import { ControlTypeAccent, ControlTypeNegative, ControlTypePositive, PriorityPrimary, PrioritySecondary, PriorityTertiary, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge } from '../../common';
 /** @deprecated */
 type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
 /** @deprecated */
@@ -7,16 +7,18 @@ type CommonProps = {
     block?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    /** @deprecated */
     type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;
     priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;
     size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;
+    htmlType?: 'submit' | 'reset' | 'button';
 };
-type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
+export type ButtonProps = CommonProps & Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {
     as?: 'button';
-    htmlType?: 'submit' | 'reset' | 'button';
 };
-type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
+export type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
     as?: 'a';
+    href?: string;
 };
 export type Props = ButtonProps | AnchorProps;
 export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;

package/build/types/button/LegacyButton/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/button/LegacyButton/Button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,UAAU,EACV,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,kBAAkB;AAClB,KAAK,eAAe,GAAG,SAAS,GAAG,KAAK,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3E,kBAAkB;AAClB,KAAK,eAAe,GAAG,cAAc,CAAC;AAEtC,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,IAAI,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,mBAAmB,GAAG,eAAe,GAAG,IAAI,CAAC;IAC9F,QAAQ,CAAC,EAAE,eAAe,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,IAAI,CAAC;IACzE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,eAAe,CAAC;IAC5D,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,WAAW,GAAG,WAAW,GACnC,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG;IAC/C,EAAE,CAAC,EAAE,GAAG,CAAC;IACT,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEJ,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,WAAW,CAAC;AAE9C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAExE,QAAA,MAAM,MAAM,uJAkGX,CAAC;AAIF,eAAe,MAAM,CAAC"}

package/build/types/button/LegacyButton/classMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classMap.d.ts","sourceRoot":"","sources":["../../../../src/button/LegacyButton/classMap.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAC"}

package/build/types/button/LegacyButton/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Button';
+export type { Props as ButtonProps } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/build/types/button/LegacyButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button/LegacyButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/build/types/button/LegacyButton/legacyUtils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/button/LegacyButton/legacyUtils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC"}

package/build/types/button/{legacyUtils → LegacyButton/legacyUtils}/legacyUtils.d.ts

@@ -1,4 +1,4 @@
-import { ControlType, Priority, Size, Type } from '../../common';
+import { ControlType, Priority, Size, Type } from '../../../common';
 type OldTypeKeys = Type.DANGER | Type.LINK | Type.SECONDARY;
 declare const deprecatedTypeMapMessage: {
     danger: string;

package/build/types/button/LegacyButton/legacyUtils/legacyUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legacyUtils.d.ts","sourceRoot":"","sources":["../../../../../src/button/LegacyButton/legacyUtils/legacyUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAWpE,KAAK,WAAW,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;AAO5D,QAAA,MAAM,wBAAwB;;;;;;CAM7B,CAAC;AAIF,KAAK,oBAAoB,GAAG,CAC1B,YAAY,EAAE,IAAI,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,KACxD,GAAG,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,CAAC;AAEtC,eAAO,MAAM,gBAAgB,EAAE,oBAGb,CAAC;AAEnB,KAAK,wBAAwB,GAAG,CAC9B,gBAAgB,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,EACpE,YAAY,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,KAChE,GAAG,WAAW,EAAE,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAElD,eAAO,MAAM,oBAAoB,EAAE,wBAalC,CAAC;AAEF,KAAK,4BAA4B,GAAG,MAAM,OAAO,wBAAwB,CAAC;AAC1E,KAAK,yBAAyB,GAAG,CAAC,MAAM,EAAE;IACxC,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,CAAC;IACjB,IAAI,CAAC,EAAE,4BAA4B,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,IAAI,CAAC;CAC9E,KAAK,IAAI,CAAC;AACX,eAAO,MAAM,qBAAqB,EAAE,yBAWnC,CAAC"}

package/build/types/button/index.d.ts

@@ -1,3 +1,3 @@
-export { default } from './Button';
-export type { Props as ButtonProps } from './Button';
+export { default } from './src';
+export * from './src';
 //# sourceMappingURL=index.d.ts.map

package/build/types/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,cAAc,OAAO,CAAC"}

package/build/types/button/src/Button.d.ts

@@ -0,0 +1,30 @@
+import { ButtonProps as LegacyButtonProps } from '../LegacyButton';
+import { ButtonProps as NewButtonProps } from '../Button/src/Button.types';
+type LegacyButtonType = 'accent' | 'negative' | 'positive' | 'primary' | 'pay' | 'secondary' | 'danger' | 'link' | null | undefined;
+type NewButtonType = 'button' | 'submit' | 'reset' | LegacyButtonType | undefined;
+export type ButtonProps = (Omit<LegacyButtonProps, 'ref'> & {
+    type?: LegacyButtonType;
+    htmlType?: string;
+    useNewButton?: false;
+    href?: string;
+    ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+}) | (Omit<Omit<NewButtonProps, 'type'>, 'ref'> & {
+    type?: NewButtonType;
+    useNewButton: true;
+    href?: string;
+    ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+});
+declare const Button: import("react").ForwardRefExoticComponent<(Omit<Omit<LegacyButtonProps, "ref"> & {
+    type?: LegacyButtonType;
+    htmlType?: string;
+    useNewButton?: false;
+    href?: string;
+    ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+}, "ref"> | Omit<Omit<Omit<NewButtonProps, "type">, "ref"> & {
+    type?: NewButtonType;
+    useNewButton: true;
+    href?: string;
+    ref?: React.Ref<HTMLButtonElement | HTMLAnchorElement>;
+}, "ref">) & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/build/types/button/src/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/button/src/Button.tsx"],"names":[],"mappings":"AAEA,OAAqB,EAAE,WAAW,IAAI,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEjF,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAE3E,KAAK,gBAAgB,GACjB,QAAQ,GACR,UAAU,GACV,UAAU,GACV,SAAS,GACT,KAAK,GACL,WAAW,GACX,QAAQ,GACR,MAAM,GACN,IAAI,GACJ,SAAS,CAAC;AACd,KAAK,aAAa,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,GAAG,gBAAgB,GAAG,SAAS,CAAC;AAElF,MAAM,MAAM,WAAW,GACnB,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,GAAG;IAChC,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACxD,CAAC,GACF,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,EAAE,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CACxD,CAAC,CAAC;AAkDP,QAAA,MAAM,MAAM;WA7DC,gBAAgB;eACZ,MAAM;mBACF,KAAK;WACb,MAAM;UACP,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;;WAG/C,aAAa;kBACN,IAAI;WACX,MAAM;UACP,KAAK,CAAC,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;kFAkF1D,CAAC;AAIH,eAAe,MAAM,CAAC"}

package/build/types/button/src/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Button';
+export type { ButtonProps } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/build/types/button/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button/src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACnC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC"}

package/build/types/link/Link.d.ts

@@ -1,6 +1,6 @@
-import { AnchorHTMLAttributes } from 'react';
+import type { PrimitiveAnchorProps } from '../primitives';
 import { LinkLarge, LinkDefault } from '../common';
-export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
+export type Props = PrimitiveAnchorProps & {
     type?: LinkLarge | LinkDefault;
 };
 /**

package/build/types/link/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAInD,MAAM,MAAM,KAAK,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAEjG;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCAkBP,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAInD,MAAM,MAAM,KAAK,GAAG,oBAAoB,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAE9E;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCA0BP,CAAC;AAEF,eAAe,IAAI,CAAC"}