@transferwise/components 41.2.0 → 41.2.1-inter.0

package/build/types/checkboxButton/CheckboxButton.story.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const _default: {
-    component: import("react").ForwardRefExoticComponent<Pick<import("./CheckboxButton").CheckboxButtonProps, "id" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "value" | "className" | "open" | "list" | "role" | "onMouseDown" | "content" | "size" | "onClick" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "media" | "as" | "disabled" | "name" | "htmlFor" | "href" | "target" | "classID" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "multiple" | "download" | "coords" | "autoPlay" | "controls" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "encType" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "challenge" | "keyType" | "keyParams" | "charSet" | "httpEquiv" | "high" | "low" | "reversed" | "start" | "selected" | "async" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "maxLength" | "minLength" | "default" | "kind" | "src" | "srcLang" | "preload" | "type" | "step" | "key" | "crossOrigin" | "defer" | "height" | "hrefLang" | "integrity" | "loop" | "marginHeight" | "marginWidth" | "max" | "mediaGroup" | "method" | "min" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "readOnly" | "rel" | "required" | "rows" | "sandbox" | "scoped" | "scrolling" | "seamless" | "shape" | "sizes" | "srcDoc" | "srcSet" | "useMap" | "width" | "wmode" | "wrap"> & import("react").RefAttributes<HTMLInputElement>>;
+    component: import("react").ForwardRefExoticComponent<Pick<import("./CheckboxButton").CheckboxButtonProps, "id" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "value" | "className" | "open" | "list" | "role" | "onMouseDown" | "as" | "type" | "htmlFor" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "key" | "classID" | "height" | "name" | "useMap" | "width" | "wmode" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "size" | "src" | "step" | "href" | "hrefLang" | "integrity" | "media" | "rel" | "sizes" | "charSet" | "download" | "target" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "dateTime" | "acceptCharset" | "action" | "encType" | "method" | "noValidate" | "manifest" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "challenge" | "keyType" | "keyParams" | "content" | "httpEquiv" | "high" | "low" | "optimum" | "reversed" | "start" | "selected" | "async" | "defer" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "rows" | "wrap" | "default" | "kind" | "srcLang" | "poster"> & import("react").RefAttributes<HTMLInputElement>>;
     title: string;
 };
 export default _default;

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

@@ -4,6 +4,7 @@ export * from "./theme";
 export * from "./direction";
 export * from "./propsValues/control";
 export * from "./propsValues/size";
+export * from "./propsValues/typography";
 export * from "./propsValues/width";
 export * from "./propsValues/position";
 export * from "./propsValues/scroll";

package/build/types/common/panel/Panel.d.ts

@@ -16,7 +16,7 @@ declare const Panel: import("react").ForwardRefExoticComponent<{
     altAxis?: boolean | undefined;
     open?: boolean | undefined;
     onClose?: ((event: Event | SyntheticEvent) => void) | undefined;
-    position?: "top" | "left" | "right" | "bottom" | undefined;
+    position?: "left" | "right" | "top" | "bottom" | undefined;
     anchorRef: RefObject<Element>;
     anchorWidth?: boolean | undefined;
 } & {

package/build/types/common/propsValues/typography.d.ts

@@ -0,0 +1,27 @@
+export declare enum Typography {
+    SCREEN_TITLE = "screen-title",
+    SECTION_TITLE = "section-title",
+    SUBSECTION_TITLE = "subsection-title",
+    BODY_TITLE = "body-title",
+    GROUP_TITLE = "group-title",
+    BODY_LARGE = "body-large",
+    BODY_DEFAULT = "body-default",
+    BODY_DEFAULT_BOLD = "body-default-bold",
+    BODY_LARGE_BOLD = "body-large-bold",
+    LINK_LARGE = "link-large",
+    LINK_DEFAULT = "link-default"
+}
+export declare type ScreenTitle = 'screen-title';
+export declare type SectionTitle = 'section-title';
+export declare type SubsectionTitle = 'subsection-title';
+export declare type BodyTitle = 'body-title';
+export declare type GroupTitle = 'group-title';
+export declare type TitleTypes = ScreenTitle | SectionTitle | SubsectionTitle | BodyTitle | GroupTitle;
+export declare type BodyTypes = BodyLargeBold | BodyDefault | BodyLarge | BodyDefaultBold;
+export declare type BodyDefault = 'body-default';
+export declare type BodyLargeBold = 'body-large-bold';
+export declare type BodyDefaultBold = 'body-default-bold';
+export declare type BodyLarge = 'body-large';
+export declare type LinkDefault = 'link-default';
+export declare type LinkLarge = 'link-large';
+export declare type TypographyTypes = ScreenTitle | SectionTitle | SubsectionTitle | BodyTitle | GroupTitle | BodyDefault | BodyLargeBold | BodyDefaultBold | BodyLarge | LinkDefault | LinkLarge;

package/build/types/common/responsivePanel/ResponsivePanel.d.ts

@@ -5,7 +5,7 @@ declare const ResponsivePanel: import("react").ForwardRefExoticComponent<{
     altAxis?: boolean | undefined;
     open?: boolean | undefined;
     onClose?: ((event: Event | import("react").SyntheticEvent<Element, Event>) => void) | undefined;
-    position?: "top" | "left" | "right" | "bottom" | undefined;
+    position?: "left" | "right" | "top" | "bottom" | undefined;
     anchorRef: import("react").RefObject<Element>;
     anchorWidth?: boolean | undefined;
 } & {

package/build/types/header/Header.d.ts

@@ -24,5 +24,5 @@ export declare type HeaderProps = CommonProps & {
  * Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
  *
  */
-export declare const Header: ({ action, as: Element, title, className }: HeaderProps) => JSX.Element;
+export declare const Header: ({ action, as, title, className }: HeaderProps) => JSX.Element;
 export default Header;

package/build/types/header/Header.story.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const _default: {
-    component: ({ action, as: Element, title, className }: import("./Header").HeaderProps) => JSX.Element;
+    component: ({ action, as, title, className }: import("./Header").HeaderProps) => JSX.Element;
     title: string;
 };
 export default _default;

package/build/types/index.d.ts

@@ -3,10 +3,12 @@
  */
 export type { UploadedFile, UploadError, UploadResponse } from './uploadInput/types';
 export type { ModalProps } from './modal';
-export type { LayoutDirection } from './common';
+export type { LayoutDirection, TypographyTypes, TitleTypes, BodyTypes } from './common';
 /**
  * Components
  */
+export { default as Title } from './title';
+export { default as Body } from './body';
 export { default as Accordion } from './accordion';
 export { default as ActionButton } from './actionButton';
 export { default as ActionOption } from './actionOption';
@@ -85,7 +87,7 @@ export { useDirection, useLayout } from './common/hooks';
 /**
  * Enums
  */
-export { Direction, Size, Width, Sentiment, Priority, ControlType, Type, Theme, DateMode, MonthFormat, Position, Scroll, ProfileType, Breakpoint, Layout, Status, MarkdownNodeType, } from './common';
+export { Direction, Size, Width, Sentiment, Priority, ControlType, Type, Theme, DateMode, MonthFormat, Position, Scroll, ProfileType, Breakpoint, Layout, Status, MarkdownNodeType, Typography, } from './common';
 export { AvatarType } from './avatar';
 export { InfoPresentation } from './info';
 export { UploadStep } from './upload';

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

@@ -1,11 +1,12 @@
-import { PropsWithChildren } from 'react';
-import { AriaLabelProperty, CommonProps, LinkProps } from '../common';
-declare type Props = PropsWithChildren<CommonProps & AriaLabelProperty & LinkProps>;
+import { AnchorHTMLAttributes } from 'react';
+import { LinkLarge, LinkDefault } from '../common';
+declare type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
+    type?: LinkLarge | LinkDefault;
+};
 /**
  * Standard Link component with navigate away icon
  *
  * Documentation: https://transferwise.github.io/neptune-web/components/content/Link
- *
  */
-declare const Link: ({ className, children, href, target, "aria-label": ariaLabel }: Props) => JSX.Element;
+declare const Link: ({ className, children, type, ...props }: Props) => JSX.Element;
 export default Link;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
-    component: ({ className, children, href, target, "aria-label": ariaLabel }: import("../common").CommonProps & import("../common").AriaLabelProperty & import("../common").LinkProps & {
-        children?: import("react").ReactNode;
+    component: ({ className, children, type, ...props }: import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        type?: "link-default" | "link-large" | undefined;
     }) => JSX.Element;
     title: string;
 };

package/build/types/select/searchBox/SearchBox.d.ts

@@ -1,5 +1,5 @@
 import { InputHTMLAttributes } from 'react';
 declare const SearchBox: import("react").ForwardRefExoticComponent<{
     classNames?: Record<string, string> | undefined;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "onClick" | "placeholder" | "onChange"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "value" | "placeholder" | "onChange" | "onClick"> & import("react").RefAttributes<HTMLInputElement>>;
 export default SearchBox;

package/build/types/title/Title.d.ts

@@ -0,0 +1,14 @@
+import { LabelHTMLAttributes, LiHTMLAttributes } from 'react';
+import { TitleTypes, Heading } from '../common';
+declare type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement> & LiHTMLAttributes<HTMLLIElement> & {
+    /**
+     * Default value will based one `type` prop
+     */
+    as?: 'span' | 'label' | 'li' | Heading;
+    /**
+     * Default value: {@link DEFAULT_TYPE}
+     */
+    type?: TitleTypes;
+};
+declare function Title({ as, type, className, ...props }: Props): JSX.Element;
+export default Title;

package/build/types/title/Title.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/build/types/title/Title.story.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import Title from './Title';
+declare const _default: {
+    component: typeof Title;
+    title: string;
+};
+export default _default;
+export declare const Basic: () => JSX.Element;

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

@@ -0,0 +1 @@
+export { default } from './Title';

package/build/types/tooltip/Tooltip.story.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     component: ({ position, children, label, className, }: {
-        position?: "top" | "left" | "right" | "bottom" | undefined;
+        position?: "left" | "right" | "top" | "bottom" | undefined;
         label: import("react").ReactNode;
     } & {
         children?: import("react").ReactNode;