@transferwise/components 45.2.0 → 45.4.0

package/build/styles/snackbar/Snackbar.css

@@ -1 +1 @@
-.snackbar{bottom:0;left:0;position:fixed;right:0;text-align:center;z-index:1060}[dir=rtl] .snackbar{left:auto;left:0;right:0;right:auto}.snackbar__text{align-items:center;background:#37517e;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.25);color:#fff;display:inline-flex;font-size:.875rem;font-size:var(--font-size-14);justify-content:space-between;margin:0 16px;margin:0 var(--size-16);padding:8px 16px;padding:var(--size-8) var(--size-16);text-align:left;transition:.4s cubic-bezier(.215,.61,.355,1);width:calc(100% - 32px);width:calc(100% - var(--size-32))}[dir=rtl] .snackbar__text{text-align:right}.np-theme-personal .snackbar__text{background:#86a7bd1a;background:var(--color-background-neutral);background:#fff;background:var(--color-background-elevated);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 2px 4px 0 rgba(69,71,69,.35);color:#37517e;color:var(--color-content-primary);position:relative}.np-theme-personal .snackbar__text:after{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border-radius:inherit;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}@media (min-width:576px){.snackbar__text{max-width:600px;width:auto}}.snackbar__text__action{color:#00b9ff;flex-shrink:0;margin-left:16px;margin-left:var(--size-16)}.snackbar__text-container-enter,.snackbar__text-container-exit{transform:translateY(calc(100% + 10px))}.snackbar__text-container-enter-active{transform:translateY(-16px);transform:translateY(calc(-16px - env(safe-area-inset-bottom)))}@media (min-width:576px){.snackbar__text-container-enter-active{transform:translateY(-24px)}}
+.snackbar{bottom:0;left:0;position:fixed;right:0;text-align:center;z-index:1060}[dir=rtl] .snackbar{left:auto;left:0;right:0}.snackbar__text{align-items:center;background:#37517e;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.25);color:#fff;display:inline-flex;font-size:.875rem;font-size:var(--font-size-14);justify-content:space-between;margin:0 16px;margin:0 var(--size-16);padding:8px 16px;padding:var(--size-8) var(--size-16);text-align:left;transition:.4s cubic-bezier(.215,.61,.355,1);width:calc(100% - 32px);width:calc(100% - var(--size-32))}[dir=rtl] .snackbar__text{text-align:right}.np-theme-personal .snackbar__text{background:var(--color-contrast-theme);border-radius:10px;border-radius:var(--radius-small);box-shadow:0 2px 4px 0 rgba(69,71,69,.35);color:var(--color-contrast-overlay);position:relative}.np-theme-personal .snackbar__text:after{background-color:#86a7bd1a;background-color:var(--color-background-neutral);border-radius:inherit;content:"";display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.np-theme-personal--dark .snackbar__text,.np-theme-personal--forest-green .snackbar__text{box-shadow:none}@media (min-width:576px){.snackbar__text{max-width:600px;width:auto}}.snackbar__text__action{color:#00b9ff;flex-shrink:0;margin-left:16px;margin-left:var(--size-16)}[dir=rtl] .snackbar__text__action{margin-left:0;margin-right:16px;margin-right:var(--size-16)}.snackbar__text-container-enter,.snackbar__text-container-exit{transform:translateY(calc(100% + 10px))}.snackbar__text-container-enter-active{transform:translateY(-16px);transform:translateY(calc(-16px - env(safe-area-inset-bottom)))}@media (min-width:576px){.snackbar__text-container-enter-active{transform:translateY(-24px)}}

package/build/types/accordion/Accordion.story.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+declare const _default: {
+    component: {
+        ({ items, onClick, indexOpen, theme }: {
+            items: any;
+            onClick: any;
+            indexOpen: any;
+            theme: any;
+        }): any;
+        propTypes: {
+            indexOpen: any;
+            items: any;
+            onClick: any;
+            theme: any;
+        };
+        defaultProps: {
+            indexOpen: number;
+            onClick: null;
+            theme: import("../common").Theme;
+        };
+    };
+    title: string;
+    args: {
+        items: ({
+            title: string;
+            content: string;
+            id: string;
+            icon?: undefined;
+        } | {
+            title: string;
+            content: string;
+            id: string;
+            icon: JSX.Element;
+        })[];
+    };
+};
+export default _default;
+type Story = StoryObj<typeof Accordion>;
+export declare const Basic: Story;
+export declare const BasicMobile: Story;
+export declare const Variants: Story;
+export declare const Multiple: Story;
+export declare const InModal: Story;
+export declare const InModalMobile: Story;

package/build/types/avatar/Avatar.d.ts

@@ -1,22 +1,18 @@
-import * as React from 'react';
-
-export type AvatarSize = "sm" | "md" | "lg" | 40 | 56;
-
-export type AvatarTheme = "light" | "dark";
-
-export type AvatarType = "thumbnail" | "icon" | "emoji" | "initials";
-
-export interface AvatarProps {
-    backgroundColor?: string;
-    children?: React.ReactNode;
-    className?: string;
-    outlined?: boolean;
-    size?: AvatarSize;
-    theme?: AvatarTheme;
-    type?: AvatarType;
-}
-
-declare const Avatar: React.FC<AvatarProps>;
-
-export default Avatar;
-
+/// <reference types="react" />
+type NumericAvatarSize = 24 | 40 | 48 | 56 | 72;
+type LegacyAvatarSize = 'sm' | 'md' | 'lg';
+export type AvatarSize = NumericAvatarSize | LegacyAvatarSize;
+export type AvatarTheme = 'light' | 'dark';
+export type AvatarType = 'thumbnail' | 'icon' | 'emoji' | 'initials';
+export interface AvatarProps {
+    backgroundColor?: string;
+    backgroundColorSeed?: string;
+    children?: React.ReactNode;
+    className?: string;
+    outlined?: boolean;
+    size?: AvatarSize;
+    theme?: AvatarTheme;
+    type?: AvatarType;
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/build/types/avatar/Avatar.story.d.ts

@@ -1,37 +1,8 @@
 /// <reference types="react" />
 import { StoryObj } from '@storybook/react';
-import { Size, Theme } from '../common';
-import Avatar, { AvatarType } from '.';
+import Avatar from '.';
 declare const _default: {
-    component: {
-        ({ backgroundColor, children, className, outlined, size, theme, type }: {
-            backgroundColor: any;
-            children: any;
-            className: any;
-            outlined: any;
-            size: any;
-            theme: any;
-            type: any;
-        }): JSX.Element;
-        propTypes: {
-            backgroundColor: any;
-            children: any;
-            className: any;
-            outlined: any;
-            size: any;
-            theme: any;
-            type: any;
-        };
-        defaultProps: {
-            backgroundColor: null;
-            children: null;
-            className: null;
-            outlined: boolean;
-            size: Size;
-            theme: Theme;
-            type: AvatarType;
-        };
-    };
+    component: import("react").FC<import("./Avatar").AvatarProps>;
     title: string;
     tags: string[];
 };

package/build/types/avatar/colors/colors.d.ts

@@ -0,0 +1,3 @@
+declare const avatarColors: readonly ["--color-bright-blue", "--color-bright-yellow", "--color-bright-pink", "--color-bright-orange"];
+export declare const getAvatarColorFromSeed: (seed: string) => (typeof avatarColors)[number];
+export {};

package/build/types/avatar/colors/index.d.ts

@@ -0,0 +1 @@
+export * from './colors';

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

@@ -1,2 +1,2 @@
-export { AvatarType } from "./avatarTypes";
-export { default } from "./Avatar";
+export { AvatarType } from './avatarTypes';
+export { default } from './Avatar';

package/build/types/avatarWrapper/AvatarWrapper.d.ts

@@ -13,6 +13,7 @@ export interface AvatarWrapperBadgeProps {
 export interface AvatarWrapperProps {
     url?: string;
     profileType?: AvatarWrapperProfileType;
+    profileId?: number;
     badgeUrl?: string;
     badgeAltText?: string;
     badgeStatusIcon?: AvatarWrapperBadgeStatusIcon;

package/build/types/avatarWrapper/AvatarWrapper.story.d.ts

@@ -4,9 +4,10 @@ import { Sentiment } from '../common';
 import AvatarWrapper from './AvatarWrapper';
 declare const _default: {
     component: {
-        ({ url, profileType, badgeUrl, badgeAltText, badgeStatusIcon, name, avatarProps, badgeProps, }: {
+        ({ url, profileType, profileId, badgeUrl, badgeAltText, badgeStatusIcon, name, avatarProps, badgeProps, }: {
             url: any;
             profileType: any;
+            profileId: any;
             badgeUrl: any;
             badgeAltText: any;
             badgeStatusIcon: any;
@@ -17,6 +18,7 @@ declare const _default: {
         defaultProps: {
             url: undefined;
             profileType: undefined;
+            profileId: undefined;
             badgeUrl: undefined;
             badgeAltText: undefined;
             badgeStatusIcon: undefined;
@@ -27,6 +29,7 @@ declare const _default: {
         propTypes: {
             url: any;
             profileType: any;
+            profileId: any;
             badgeUrl: any;
             badgeAltText: any;
             badgeStatusIcon: any;