@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-9b6d886

package/build/button/LegacyButton.mjs

@@ -1,112 +0,0 @@
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import { useIntl } from 'react-intl';
-import '../common/theme.mjs';
-import '../common/direction.mjs';
-import { Priority, ControlType } from '../common/propsValues/control.mjs';
-import '../common/propsValues/breakpoint.mjs';
-import { Size } from '../common/propsValues/size.mjs';
-import '../common/propsValues/typography.mjs';
-import '../common/propsValues/width.mjs';
-import '../common/propsValues/type.mjs';
-import '../common/propsValues/dateMode.mjs';
-import '../common/propsValues/monthFormat.mjs';
-import '../common/propsValues/position.mjs';
-import '../common/propsValues/layouts.mjs';
-import '../common/propsValues/status.mjs';
-import '../common/propsValues/sentiment.mjs';
-import '../common/propsValues/profileType.mjs';
-import '../common/propsValues/variant.mjs';
-import '../common/propsValues/scroll.mjs';
-import '../common/propsValues/markdownNodeType.mjs';
-import '../common/fileType.mjs';
-import '@transferwise/icons';
-import '../common/closeButton/CloseButton.messages.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import ProcessIndicator from '../processIndicator/ProcessIndicator.mjs';
-import messages from '../i18n/commonMessages/Button.messages.mjs';
-import { typeClassMap, priorityClassMap } from './classMap.mjs';
-import { logDeprecationNotices, establishNewType, establishNewPriority } from './legacyUtils/legacyUtils.mjs';
-
-const LegacyButton = /*#__PURE__*/forwardRef(({
-  as: component = 'button',
-  block = false,
-  children,
-  className,
-  disabled,
-  loading = false,
-  priority = Priority.PRIMARY,
-  size = Size.MEDIUM,
-  type = ControlType.ACCENT,
-  onClick,
-  ...rest
-}, ref) => {
-  const intl = useIntl();
-  logDeprecationNotices({
-    size,
-    type
-  });
-  const newType = establishNewType(type);
-  const newPriority = establishNewPriority(priority, type);
-  const classes = clsx(`btn btn-${size}`, `np-btn np-btn-${size}`, {
-    'btn-loading': loading,
-    'btn-block np-btn-block': block,
-    disabled
-  },
-  // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  typeClassMap[newType],
-  // @ts-expect-error fix when refactor `typeClassMap` to TypeScript
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-  priorityClassMap[newPriority], className);
-  function processIndicatorSize() {
-    return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';
-  }
-  const Element = component ?? 'button';
-  let props;
-  if (Element === 'button') {
-    const {
-      htmlType = 'button',
-      ...restProps
-    } = rest;
-    props = {
-      ...restProps,
-      disabled,
-      'aria-disabled': loading,
-      type: htmlType
-    };
-  } else {
-    props = {
-      ...rest,
-      'aria-disabled': loading
-    };
-  }
-  /**
-   * Ensures that the button cannot be activated in loading or disabled mode,
-   * when `aria-disabled` might be used over the `disabled` HTML attribute
-   */
-  const handleClick = handler => event => {
-    if (disabled || loading) {
-      event.preventDefault();
-    } else if (typeof handler === 'function') {
-      handler(event);
-    }
-  };
-  return /*#__PURE__*/jsxs(Element, {
-    ref: ref,
-    className: classes,
-    onClick: handleClick(onClick),
-    ...props,
-    "aria-live": loading ? 'polite' : 'off',
-    "aria-busy": loading,
-    "aria-label": loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label'],
-    children: [children, loading && /*#__PURE__*/jsx(ProcessIndicator, {
-      size: processIndicatorSize(),
-      className: "btn-loader",
-      "data-testid": "ButtonProgressIndicator"
-    })]
-  });
-});
-
-export { LegacyButton as default };
-//# sourceMappingURL=LegacyButton.mjs.map

package/build/button/LegacyButton.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"LegacyButton.mjs","sources":["../../src/button/LegacyButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ElementType, forwardRef, MouseEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  Size,\n  ControlType,\n  Priority,\n  ControlTypeAccent,\n  ControlTypeNegative,\n  ControlTypePositive,\n  PriorityPrimary,\n  PrioritySecondary,\n  PriorityTertiary,\n  SizeExtraSmall,\n  SizeSmall,\n  SizeMedium,\n  SizeLarge,\n} from '../common';\nimport ProcessIndicator from '../processIndicator';\n\nimport messages from '../i18n/commonMessages/Button.messages';\nimport { typeClassMap, priorityClassMap } from './classMap';\nimport { establishNewPriority, establishNewType, logDeprecationNotices } from './legacyUtils';\nimport { ButtonReferenceType } from './Button.types';\n\n/** @deprecated */\ntype DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';\n\n/** @deprecated */\ntype DeprecatedSizes = SizeExtraSmall;\n\ntype CommonProps = {\n  v2?: false;\n\n  /** Makes the button take up the full width of its container */\n  block?: boolean;\n\n  /**\n   * The `target` attribute for HTML anchor.\n   * If set to `_blank`, `rel=\"noopener noreferrer\"` is automatically added to the rendered node.\n   */\n  target?: string;\n  /**\n   * Toggles the disabled state\n   * @default false\n   */\n\n  disabled?: boolean;\n  /**\n   * Toggles the loading state\n   * @default false\n   */\n  loading?: boolean;\n  type?: ControlTypeAccent | ControlTypeNegative | ControlTypePositive | DeprecatedTypes | null;\n  priority?: PriorityPrimary | PrioritySecondary | PriorityTertiary | null;\n  size?: SizeSmall | SizeMedium | SizeLarge | DeprecatedSizes;\n  htmlType?: 'submit' | 'reset' | 'button';\n};\n\ntype ButtonProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'button'>, 'type'> & {\n    as?: 'button';\n  };\n\ntype AnchorProps = CommonProps &\n  Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {\n    as?: 'a';\n    href?: string;\n  };\n\nexport type LegacyButtonProps = ButtonProps | AnchorProps;\n\n/**\n * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props\n */\nconst LegacyButton = forwardRef<ButtonReferenceType, LegacyButtonProps>(\n  (\n    {\n      as: component = 'button',\n      block = false,\n      children,\n      className,\n      disabled,\n      loading = false,\n      priority = Priority.PRIMARY,\n      size = Size.MEDIUM,\n      type = ControlType.ACCENT,\n      onClick,\n      ...rest\n    }: LegacyButtonProps,\n    ref,\n  ) => {\n    const intl = useIntl();\n\n    logDeprecationNotices({ size, type });\n\n    const newType = establishNewType(type);\n    const newPriority = establishNewPriority(priority, type);\n\n    const classes = clsx(\n      `btn btn-${size}`,\n      `np-btn np-btn-${size}`,\n      {\n        'btn-loading': loading,\n        'btn-block np-btn-block': block,\n        disabled,\n      },\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      typeClassMap[newType],\n      // @ts-expect-error fix when refactor `typeClassMap` to TypeScript\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n      priorityClassMap[newPriority],\n      className,\n    );\n\n    function processIndicatorSize() {\n      return ['sm', 'xs'].includes(size) ? 'xxs' : 'xs';\n    }\n\n    const Element = (component as ElementType) ?? 'button';\n    let props;\n\n    if (Element === 'button') {\n      const { htmlType = 'button', ...restProps } = rest as ButtonProps;\n      props = {\n        ...restProps,\n        disabled,\n        'aria-disabled': loading,\n        type: htmlType,\n      };\n    } else {\n      props = {\n        ...rest,\n        'aria-disabled': loading,\n      } as AnchorProps;\n    }\n\n    /**\n     * Ensures that the button cannot be activated in loading or disabled mode,\n     * when `aria-disabled` might be used over the `disabled` HTML attribute\n     */\n    const handleClick =\n      (handler: LegacyButtonProps['onClick']) =>\n      (event: MouseEvent<HTMLButtonElement> & MouseEvent<HTMLAnchorElement>) => {\n        if (disabled || loading) {\n          event.preventDefault();\n        } else if (typeof handler === 'function') {\n          handler(event);\n        }\n      };\n\n    return (\n      <Element\n        ref={ref as React.Ref<ButtonReferenceType>}\n        className={classes}\n        onClick={handleClick(onClick)}\n        {...props}\n        aria-live={loading ? 'polite' : 'off'}\n        aria-busy={loading}\n        aria-label={loading ? intl.formatMessage(messages.loadingAriaLabel) : rest['aria-label']}\n      >\n        {children}\n        {loading && (\n          <ProcessIndicator\n            size={processIndicatorSize()}\n            className=\"btn-loader\"\n            data-testid=\"ButtonProgressIndicator\"\n          />\n        )}\n      </Element>\n    );\n  },\n);\n\nexport default LegacyButton;\n"],"names":["LegacyButton","forwardRef","as","component","block","children","className","disabled","loading","priority","Priority","PRIMARY","size","Size","MEDIUM","type","ControlType","ACCENT","onClick","rest","ref","intl","useIntl","logDeprecationNotices","newType","establishNewType","newPriority","establishNewPriority","classes","clsx","typeClassMap","priorityClassMap","processIndicatorSize","includes","Element","props","htmlType","restProps","handleClick","handler","event","preventDefault","_jsxs","formatMessage","messages","loadingAriaLabel","_jsx","ProcessIndicator"],"mappings":"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"}

package/build/styles/button/Button.vars.css

@@ -1,46 +0,0 @@
-.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-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  --Button-small-padding: var(--size-5) var(--size-12);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --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-overlay);
-  --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 {
-  --Button-primary-negative-color: var(--color-white);
-  --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-white);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-secondary-negative-color: var(--color-contrast-overlay);
-}

package/build/styles/button/LegacyButton.css

@@ -1,23 +0,0 @@
-.np-btn {
-  position: relative;
-}
-.np-btn.np-btn-block > span.btn-loader {
-  position: absolute;
-  left: 24px;
-  left: var(--size-24);
-}
-[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
-  right: 24px;
-  right: var(--size-24);
-  left: auto;
-  left: initial;
-}
-.np-btn.np-btn-xs > span.btn-loader {
-  background-size: 16px 16px;
-}
-.np-btn.np-btn-xs.btn-block > span.btn-loader {
-  top: 0;
-}
-.np-btn.disabled[class] {
-  pointer-events: auto;
-}

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

@@ -1,35 +0,0 @@
-import { LegacyButtonProps } from './LegacyButton';
-import { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';
-export type ButtonProps = LegacyButtonProps | NewButtonProps;
-declare const Button: import("react").ForwardRefExoticComponent<(NewButtonProps | Omit<{
-    v2?: false;
-    block?: boolean;
-    target?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    type?: import("../common").ControlTypeAccent | import("../common").ControlTypeNegative | import("../common").ControlTypePositive | ("link" | "primary" | "secondary" | "pay" | "danger") | null;
-    priority?: import("../common").PriorityPrimary | import("../common").PrioritySecondary | import("../common").PriorityTertiary | null;
-    size?: import("../common").SizeSmall | import("../common").SizeMedium | import("../common").SizeLarge | "xs";
-    htmlType?: "submit" | "reset" | "button";
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "type"> & {
-    as?: "button";
-}, "ref"> | Omit<{
-    v2?: false;
-    block?: boolean;
-    target?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    type?: import("../common").ControlTypeAccent | import("../common").ControlTypeNegative | import("../common").ControlTypePositive | ("link" | "primary" | "secondary" | "pay" | "danger") | null;
-    priority?: import("../common").PriorityPrimary | import("../common").PrioritySecondary | import("../common").PriorityTertiary | null;
-    size?: import("../common").SizeSmall | import("../common").SizeMedium | import("../common").SizeLarge | "xs";
-    htmlType?: "submit" | "reset" | "button";
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
-    ref?: ((instance: HTMLAnchorElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
-}, "type"> & {
-    as?: "a";
-    href?: string;
-}, "ref">) & import("react").RefAttributes<ButtonReferenceType>>;
-export default Button;
-//# sourceMappingURL=Button.resolver.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.resolver.d.ts","sourceRoot":"","sources":["../../../src/button/Button.resolver.tsx"],"names":[],"mappings":"AACA,OAAqB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGpF,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,cAAc,CAAC;AAwD7D,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gEAOV,CAAC;AAIH,eAAe,MAAM,CAAC"}

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

@@ -1,70 +0,0 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
-import type { AvatarLayoutProps } from '../avatarLayout';
-export type ButtonSentiment = 'default' | 'negative';
-export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
-type ButtonAddonIcon = {
-    type: 'icon';
-    value: ReactNode;
-};
-type ButtonAddonAvatar = {
-    type: 'avatar';
-    value: AvatarLayoutProps['avatars'];
-};
-type ButtonAddonStart = ButtonAddonIcon | ButtonAddonAvatar;
-type ButtonAddonEnd = ButtonAddonIcon;
-/**
- * Common properties for the Button component.
- */
-export interface CommonProps {
-    /**
-     * If set, toggles the new Button API
-     * @default false
-     * */
-    v2: true;
-    /**
-     * The HTML element to render. Takes precedence over `href` prop.
-     * @default undefined
-     **/
-    as?: 'button' | 'a';
-    /** @default false **/
-    disabled?: boolean;
-    /** If set, the component will render as an HTML anchor. */
-    href?: string;
-    /**
-     * The `target` attribute for HTML anchor.
-     * If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
-     */
-    target?: string;
-    /** @default false */
-    loading?: boolean;
-    /** Makes the button take up the full width of its container */
-    block?: boolean;
-    /**
-     * Sets the size of the button
-     * @default lg
-     * */
-    size?: ButtonSize;
-    /**
-     * Sets a visual hierarchy amongst the buttons displayed on the screen
-     * @default 'primary'
-     */
-    priority?: ButtonPriority;
-    /**
-     * Emphasises the nature of the button's action
-     * @default default
-     */
-    sentiment?: ButtonSentiment;
-    /** Accessory to be displayed before the label */
-    addonStart?: ButtonAddonStart;
-    /** Accessory to be displayed after the label */
-    addonEnd?: ButtonAddonEnd;
-    className?: string;
-    children?: ReactNode;
-}
-export type ButtonElementProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled' | 'className'> & CommonProps;
-export type AnchorElementProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'type' | 'disabled' | 'href' | 'className'> & CommonProps;
-export type ButtonProps = ButtonElementProps | AnchorElementProps;
-export {};
-//# sourceMappingURL=Button.types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD,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,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,mBAAmB,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AACxE,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,SAAS,CAAC;CAClB,CAAC;AACF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;CACrC,CAAC;AACF,KAAK,gBAAgB,GAAG,eAAe,GAAG,iBAAiB,CAAC;AAC5D,KAAK,cAAc,GAAG,eAAe,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;;SAGK;IACL,EAAE,EAAE,IAAI,CAAC;IAET;;;QAGI;IACJ,EAAE,CAAC,EAAE,QAAQ,GAAG,GAAG,CAAC;IAEpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;SAGK;IACL,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,iDAAiD;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAE9B,gDAAgD;IAChD,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,CACzB,GACC,WAAW,CAAC;AACd,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,WAAW,CAC3C,GACC,WAAW,CAAC;AAEd,MAAM,MAAM,WAAW,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}

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

@@ -1,44 +0,0 @@
-import { ControlTypeAccent, ControlTypeNegative, ControlTypePositive, PriorityPrimary, PrioritySecondary, PriorityTertiary, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge } from '../common';
-import { ButtonReferenceType } from './Button.types';
-/** @deprecated */
-type DeprecatedTypes = 'primary' | 'pay' | 'secondary' | 'danger' | 'link';
-/** @deprecated */
-type DeprecatedSizes = SizeExtraSmall;
-type CommonProps = {
-    v2?: false;
-    /** Makes the button take up the full width of its container */
-    block?: boolean;
-    /**
-     * The `target` attribute for HTML anchor.
-     * If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
-     */
-    target?: string;
-    /**
-     * Toggles the disabled state
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Toggles the loading state
-     * @default false
-     */
-    loading?: boolean;
-    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'> & {
-    as?: 'button';
-};
-type AnchorProps = CommonProps & Omit<React.ComponentPropsWithRef<'a'>, 'type'> & {
-    as?: 'a';
-    href?: string;
-};
-export type LegacyButtonProps = ButtonProps | AnchorProps;
-/**
- * @deprecated make sure you use new Button component via `<Button v2 .. />` and new props
- */
-declare const LegacyButton: import("react").ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<AnchorProps, "ref">) & import("react").RefAttributes<ButtonReferenceType>>;
-export default LegacyButton;
-//# sourceMappingURL=LegacyButton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"LegacyButton.d.ts","sourceRoot":"","sources":["../../../src/button/LegacyButton.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,WAAW,CAAC;AAMnB,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,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,EAAE,CAAC,EAAE,KAAK,CAAC;IAEX,+DAA+D;IAC/D,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;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,KAAK,WAAW,GAAG,WAAW,GAC5B,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG;IACpD,EAAE,CAAC,EAAE,QAAQ,CAAC;CACf,CAAC;AAEJ,KAAK,WAAW,GAAG,WAAW,GAC5B,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,iBAAiB,GAAG,WAAW,GAAG,WAAW,CAAC;AAE1D;;GAEG;AACH,QAAA,MAAM,YAAY,uJAkGjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/src/button/Button.accessibility.docs.mdx

@@ -1,103 +0,0 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
-import { NavigationOption } from '..';
-import { Bulb } from '@transferwise/icons';
-import * as stories from './Button.story';
-
-<Meta title="Actions/Button/Accessibility" />
-
-# Accessibility
-
-Given the `Button` is a widely used and highly sensitive component, there are some instances where care is required to ensure inclusive and accessible experience.
-
-<NavigationOption
-  media={<Bulb size={24} />}
-  title="Design guidance"
-  content="Before you start, familiarise yourself with the dedicated accessibility documentation."
-  href="https://wise.design/components/button#accessibility"
-/>
-
-<br />
-<br />
-
-## Anchors
-
-While it's technically possible to make the `Button` component render as a link by using `as="a"` on its own, and there are use cases for it, this will not result in a semantic HTML anchor. For that to happen, you should set `href` instead – it will automatically render the component as a semantic anchor.
-
-<Source dark code={`
-// ⚠️ use with care
-<Button v2 as="a">Inaccessible anchor</Button>
-
-// ✅ semantic link
-
-<Button v2 href="https://wise.com">
-  Accessible anchor
-</Button>
-<Button v2 href="https://wise.com" as="a">
-  Accessible anchor
-</Button>
-`}/>
-
-It's also worth noting that HTML links without a valid `href` are not recognised by RTL via `getByRole('link')`.
-
-**Additional resources:**
-
-1. [Deque: Anchors must only be used as links with valid URLs or URL fragments](https://dequeuniversity.com/rules/axe-devtools/4.2/href-no-hash)
-2. [whatwg HTML standard: 4.6.2 Links created by a and area elements](https://html.spec.whatwg.org/multipage/links.html#links-created-by-a-and-area-elements)
-
-<br />
-
-## Disabled anchors
-
-Technically, there's no such thing as disabled HTML anchor and the `disabled` attribute is not recognised on the `<a />`. While the code shown below works in all major screen readers, should be overall considered a last resort and design teams should be encouraged to use it sporadically and consider alternative flows instead.
-
-<Source
-  dark
-  code={`
-// ⚠️ use with care
-<Button v2 href="https://wise.com" disabled>Emulated disabled anchor</Button>
-`}
-/>
-
-We're emulating this behaviour by applying a combination of the following:
-
-1. removing `href` attribute to strip out the link's semantics.
-2. adding `role="link"` to make it recognisable and discoverable by the assistive tech.
-3. setting `aria-disabled="true"` to inform assistive tech of the component state.
-
-**Additional resources:**
-
-1. [Scott O'Hara: Disabling a link](https://www.scottohara.me/blog/2021/05/28/disabled-links.html)
-2. [CSS-Tricks: How to Disable Links](https://css-tricks.com/how-to-disable-links/)
-
-<br />
-
-## Loading state
-
-While it might be tempting to use the native, HTML `disabled` attribute for the `loading` state, it would result in a component that is completely invisible to the assistive tech – not focusable and not parsable – entirely inaccessible experience for users relying on such tools.
-
-Instead, we're relying on ARIA attributes and roles to ensure the `Button` is focusable, correctly announced as "busy" and offering visual cue different to the disabled state.
-
-<Source dark code={`
-// ❌  do not use
-<Button v2 loading disabled>Invisible</Button>
-
-// ✅ semantic loading button
-
-<Button v2 loading>
-  Proper loading state
-</Button>
-`}/>
-
-`Button` instances rendered as HTML anchors, follow the strategy described in the [Disabled anchors](#disabled-anchors) section above.
-
-<br />
-
-## Working with addons (accessories)
-
-One of the core requirements of accessible experience is that all users have equal access to the same content, no matter how they interact with our products.
-
-This becomes troublesome for more complex instances of the `Button` such as those with contentful icons or avatars, e.g. those referring to particular currencies, people or action types.
-
-Exposing separate ARIA labels for such addons would likely become problematic due to syntactic differences between different languages and so instead we recommend using simple `aria-label` attribute to describe given components complete content. Please note, that screen readers will use that text over the visible label
-
-<Canvas of={stories.AccessibilityAddons} />

package/src/button/Button.resolver.tsx

@@ -1,73 +0,0 @@
-import { forwardRef } from 'react';
-import LegacyButton, { LegacyButtonProps } from './LegacyButton';
-import { ButtonReferenceType, ButtonProps as NewButtonProps } from './Button.types';
-import NewButton from './Button';
-
-export type ButtonProps = LegacyButtonProps | NewButtonProps;
-
-const mapProps = (props: LegacyButtonProps): NewButtonProps => {
-  const { priority, size, type, ...newProps } = props;
-
-  const priorityMapping: Record<string, Record<string, NewButtonProps['priority']>> = {
-    accent: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'minimal',
-    },
-    positive: {
-      primary: 'primary',
-      secondary: 'tertiary',
-      tertiary: 'tertiary',
-    },
-    negative: {
-      primary: 'primary',
-      secondary: 'secondary',
-      tertiary: 'secondary',
-    },
-  };
-
-  const mappedPriority =
-    type && priority ? priorityMapping[type]?.[priority] || priority : priority || undefined;
-  const mappedSentiment = type === 'negative' ? 'negative' : undefined;
-
-  const legacyButtonTypes: LegacyButtonProps['type'][] = [
-    'accent',
-    'negative',
-    'positive',
-    'primary',
-    'pay',
-    'secondary',
-    'danger',
-    'link',
-  ];
-
-  const resolveSize = () => {
-    if (size) {
-      return { xs: 'sm', sm: 'sm', md: 'md', lg: 'lg' }[size] || size;
-    }
-
-    return size;
-  };
-
-  return {
-    ...newProps,
-    size: resolveSize(),
-    priority: mappedPriority,
-    sentiment: mappedSentiment || ('sentiment' in props ? props.sentiment : null),
-    type: type && !legacyButtonTypes.includes(type) ? type : props.htmlType || null,
-    v2: true,
-  } as NewButtonProps;
-};
-
-const Button = forwardRef<ButtonReferenceType, ButtonProps>(({ v2 = false, ...props }, ref) => {
-  if (v2) {
-    const mappedProps = mapProps(props as LegacyButtonProps);
-    return <NewButton {...mappedProps} ref={ref} />;
-  }
-
-  return <LegacyButton {...(props as LegacyButtonProps)} ref={ref} />;
-});
-
-Button.displayName = 'Button';
-
-export default Button;

package/src/button/Button.tests.story.tsx

@@ -1,27 +0,0 @@
-import { Meta } from '@storybook/react';
-import Button from './Button.resolver';
-import { expect, userEvent, within } from '@storybook/test';
-import { storyConfig } from '../test-utils';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  title: 'Actions/Button/Tests',
-};
-export default meta;
-
-export const FocusMinimal = storyConfig(
-  {
-    render: () => (
-      <Button v2 priority="minimal">
-        Focus has underline
-      </Button>
-    ),
-  },
-  {},
-);
-FocusMinimal.play = async ({ canvasElement }) => {
-  await userEvent.tab();
-  const canvas = within(canvasElement);
-  const buttonElement: HTMLButtonElement = canvas.getByRole('button');
-  await expect(buttonElement).toHaveFocus();
-};

package/src/button/Button.types.ts

@@ -1,92 +0,0 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
-import type { AvatarLayoutProps } from '../avatarLayout';
-
-export type ButtonSentiment = 'default' | 'negative';
-export type ButtonPriority = 'primary' | 'secondary' | 'tertiary' | 'minimal';
-export type ButtonSize = 'sm' | 'md' | 'lg';
-export type ButtonReferenceType = HTMLButtonElement | HTMLAnchorElement;
-type ButtonAddonIcon = {
-  type: 'icon';
-  value: ReactNode;
-};
-type ButtonAddonAvatar = {
-  type: 'avatar';
-  value: AvatarLayoutProps['avatars'];
-};
-type ButtonAddonStart = ButtonAddonIcon | ButtonAddonAvatar;
-type ButtonAddonEnd = ButtonAddonIcon;
-
-/**
- * Common properties for the Button component.
- */
-export interface CommonProps {
-  /**
-   * If set, toggles the new Button API
-   * @default false
-   * */
-  v2: true;
-
-  /**
-   * The HTML element to render. Takes precedence over `href` prop.
-   * @default undefined
-   **/
-  as?: 'button' | 'a';
-
-  /** @default false **/
-  disabled?: boolean;
-
-  /** If set, the component will render as an HTML anchor. */
-  href?: string;
-
-  /**
-   * The `target` attribute for HTML anchor.
-   * If set to `_blank`, `rel="noopener noreferrer"` is automatically added to the rendered node.
-   */
-  target?: string;
-
-  /** @default false */
-  loading?: boolean;
-
-  /** Makes the button take up the full width of its container */
-  block?: boolean;
-
-  /**
-   * Sets the size of the button
-   * @default lg
-   * */
-  size?: ButtonSize;
-
-  /**
-   * Sets a visual hierarchy amongst the buttons displayed on the screen
-   * @default 'primary'
-   */
-  priority?: ButtonPriority;
-
-  /**
-   * Emphasises the nature of the button's action
-   * @default default
-   */
-  sentiment?: ButtonSentiment;
-
-  /** Accessory to be displayed before the label */
-  addonStart?: ButtonAddonStart;
-
-  /** Accessory to be displayed after the label */
-  addonEnd?: ButtonAddonEnd;
-
-  className?: string;
-  children?: ReactNode;
-}
-
-export type ButtonElementProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'disabled' | 'className'
-> &
-  CommonProps;
-export type AnchorElementProps = Omit<
-  AnchorHTMLAttributes<HTMLAnchorElement>,
-  'type' | 'disabled' | 'href' | 'className'
-> &
-  CommonProps;
-
-export type ButtonProps = ButtonElementProps | AnchorElementProps;