@rango-dev/ui 0.28.2-next.6 → 0.28.2-next.8

package/dist/translations/pt.d.ts

@@ -0,0 +1,2 @@
+export declare const messages: any;
+//# sourceMappingURL=pt.d.ts.map

package/dist/translations/pt.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pt.d.ts","sourceRoot":"","sources":["../../../../translations/pt.ts"],"names":[],"mappings":"AAAkB,eAAO,MAAM,QAAQ,KAA25b,CAAC"}

package/dist/widget/ui/src/components/Flags/Portuguese.d.ts

@@ -0,0 +1,4 @@
+import type { FlagPropTypes } from './Flags.types';
+import React from 'react';
+export default function Portuguese(props: FlagPropTypes): React.JSX.Element;
+//# sourceMappingURL=Portuguese.d.ts.map

package/dist/widget/ui/src/components/Flags/Portuguese.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portuguese.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/Portuguese.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,aAAa,qBA2BtD"}

package/dist/widget/ui/src/components/Flags/index.d.ts

@@ -1,7 +1,8 @@
 import English from './English';
 import French from './French';
 import Japanese from './Japanese';
+import Portuguese from './Portuguese';
 import Spanish from './Spanish';
 export type { FlagPropTypes } from './Flags.types';
-export { English, Spanish, Japanese, French };
+export { English, Spanish, Japanese, French, Portuguese };
 //# sourceMappingURL=index.d.ts.map

package/dist/widget/ui/src/components/Flags/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Flags/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC"}

package/dist/widget/ui/src/components/I18nManager/I18nManager.d.ts

@@ -5,6 +5,7 @@ declare const messages: {
     es: any;
     ja: any;
     fr: any;
+    pt: any;
 };
 export type Language = keyof typeof messages;
 interface PropTypes {

package/dist/widget/ui/src/components/I18nManager/I18nManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"I18nManager.d.ts","sourceRoot":"","sources":["../../../../../../src/components/I18nManager/I18nManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAgC,MAAM,OAAO,CAAC;AAcrD,QAAA,MAAM,QAAQ;;;;;CAKb,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAgBvD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"I18nManager.d.ts","sourceRoot":"","sources":["../../../../../../src/components/I18nManager/I18nManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/C,OAAO,KAAgC,MAAM,OAAO,CAAC;AAerD,QAAA,MAAM,QAAQ;;;;;;CAMb,CAAC;AAIF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,QAAQ,CAAC;AAC7C,UAAU,SAAS;IACjB,QAAQ,EAAE,QAAQ,CAAC;CACpB;AAED,iBAAS,WAAW,CAAC,KAAK,EAAE,iBAAiB,CAAC,SAAS,CAAC,qBAgBvD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/widget/ui/src/components/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAAoB,MAAM,OAAO,CAAC;AAiBzC,eAAO,MAAM,KAAK,UAAW,UAAU,sBAkEtC,CAAC"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,KAA8B,MAAM,OAAO,CAAC;AAmBnD,eAAO,MAAM,KAAK,UAAW,UAAU,sBAyFtC,CAAC"}

package/dist/widget/ui/src/components/Toast/Toast.helpers.d.ts

@@ -1,2 +1,6 @@
 export declare function idGenerator(): () => number;
+export declare const TOAST_UNMOUNT_DELAY = 500;
+export declare const TOAST_TRANSITION_DURATION = 300;
+export declare const HOVER_TRANSITION_DURATION = 200;
+export declare const TOAST_HIDE_DELAY = 200;
 //# sourceMappingURL=Toast.helpers.d.ts.map

package/dist/widget/ui/src/components/Toast/Toast.helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.helpers.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,iBAM1B"}
+{"version":3,"file":"Toast.helpers.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.helpers.ts"],"names":[],"mappings":"AAAA,wBAAgB,WAAW,iBAM1B;AAED,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,eAAO,MAAM,gBAAgB,MAAM,CAAC"}

package/dist/widget/ui/src/components/Toast/Toast.styles.d.ts

@@ -1,5 +1,171 @@
 import { Typography } from '../Typography';
-export declare const ToastContentContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+export declare const toastContentStyles: import("@stitches/react/types/styled-component").CssComponent<never, {}, {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+}, {
+    colors: {
+        primary: string;
+        primary500: string;
+        primary600: string;
+        secondary: string;
+        secondary100: string;
+        secondary200: string;
+        secondary300: string;
+        secondary400: string;
+        secondary500: string;
+        secondary600: string;
+        secondary700: string;
+        secondary800: string;
+        secondary900: string;
+        neutral: string;
+        neutral100: string;
+        neutral200: string;
+        neutral300: string;
+        neutral400: string;
+        neutral500: string;
+        neutral600: string;
+        neutral700: string;
+        neutral800: string;
+        neutral900: string;
+        error100: string;
+        error300: string;
+        error500: string;
+        error600: string;
+        error700: string;
+        warning100: string;
+        warning300: string;
+        warning500: string;
+        warning600: string;
+        warning700: string;
+        info: string;
+        info100: string;
+        info300: string;
+        info500: string;
+        info600: string;
+        info700: string;
+        success100: string;
+        success300: string;
+        success500: string;
+        success600: string;
+        success700: string;
+        background: string;
+        foreground: string;
+    };
+    space: {
+        0: string;
+        5: string;
+        10: string;
+        15: string;
+        20: string;
+        25: string;
+        30: string;
+        40: string;
+        46: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        100: string;
+        2: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        28: string;
+        32: string;
+    };
+    radii: {
+        xs: string;
+        sm: string;
+        xm: string;
+        md: string;
+        xl: string;
+        lg: string;
+        primary: string;
+        secondary: string;
+    };
+    fontSizes: {
+        10: string;
+        12: string;
+        14: string;
+        16: string;
+        18: string;
+        20: string;
+        22: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        48: string;
+    };
+    fonts: {
+        primary: string;
+        widget: string;
+    };
+    fontWeights: {
+        regular: number;
+        medium: number;
+        semiBold: number;
+        bold: number;
+    };
+    lineHeights: {
+        12: string;
+        16: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        36: string;
+        40: string;
+        44: string;
+        52: string;
+        64: string;
+    };
+    letterSpacings: {};
+    sizes: {
+        4: string;
+        6: string;
+        8: string;
+        10: string;
+        12: string;
+        16: string;
+        18: string;
+        20: string;
+        24: string;
+        26: string;
+        28: string;
+        30: string;
+        32: string;
+        36: string;
+        40: string;
+        45: string;
+        48: string;
+    };
+    borderWidths: {};
+    borderStyles: {};
+    shadows: {
+        s: string;
+    };
+    zIndices: {};
+    transitions: {};
+}, import("@stitches/react/types/config").DefaultThemeMap, {}>>;
+export declare const ToastContentContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    isActive?: boolean | "true" | undefined;
+    isVisible?: boolean | "true" | undefined;
+    position?: "right-top" | "right-bottom" | "left-top" | "left-bottom" | "center-top" | "center-bottom" | undefined;
+}, {
     xs: string;
     sm: string;
     md: string;

package/dist/widget/ui/src/components/Toast/Toast.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAO3C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAEhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAoCzB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwEnB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI7B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAa3B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAG9B,CAAC"}
+{"version":3,"file":"Toast.styles.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Toast/Toast.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAO3C,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAK7B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAmMhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwCzB,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAwEnB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAI7B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAa3B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+DAG9B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/ui",
-  "version": "0.28.2-next.6",
+  "version": "0.28.2-next.8",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",

package/src/components/Flags/Portuguese.tsx

@@ -0,0 +1,34 @@
+import type { FlagPropTypes } from './Flags.types';
+
+import React from 'react';
+
+import { DEFAULT_SIZE } from './Flags.constants';
+
+export default function Portuguese(props: FlagPropTypes) {
+  const { size = DEFAULT_SIZE } = props;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512">
+      <mask id="a">
+        <circle cx="256" cy="256" r="256" fill="#fff" />
+      </mask>
+      <g mask="url(#a)">
+        <path fill="#6da544" d="M0 512h167l37.9-260.3L167 0H0z" />
+        <path fill="#d80027" d="M512 0H167v512h345z" />
+        <circle cx="167" cy="256" r="89" fill="#ffda44" />
+        <path
+          fill="#d80027"
+          d="M116.9 211.5V267a50 50 0 1 0 100.1 0v-55.6H117z"
+        />
+        <path
+          fill="#eee"
+          d="M167 283.8c-9.2 0-16.7-7.5-16.7-16.7V245h33.4v22c0 9.2-7.5 16.7-16.7 16.7z"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/components/Flags/index.ts

@@ -1,8 +1,9 @@
 import English from './English';
 import French from './French';
 import Japanese from './Japanese';
+import Portuguese from './Portuguese';
 import Spanish from './Spanish';
 
 export type { FlagPropTypes } from './Flags.types';
 
-export { English, Spanish, Japanese, French };
+export { English, Spanish, Japanese, French, Portuguese };

package/src/components/I18nManager/I18nManager.tsx

@@ -15,12 +15,14 @@ import { messages as enMessages } from '../../../../../translations/en';
 import { messages as esMessages } from '../../../../../translations/es';
 import { messages as frMessages } from '../../../../../translations/fr';
 import { messages as jaMessages } from '../../../../../translations/ja';
+import { messages as ptMessages } from '../../../../../translations/pt';
 
 const messages = {
   en: enMessages,
   es: esMessages,
   ja: jaMessages,
   fr: frMessages,
+  pt: ptMessages,
 };
 
 i18n.load(messages);

package/src/components/Toast/Toast.helpers.ts

@@ -5,3 +5,8 @@ export function idGenerator() {
     return id;
   };
 }
+
+export const TOAST_UNMOUNT_DELAY = 500; // the delay before the toast is unmounted
+export const TOAST_TRANSITION_DURATION = 300; // the duration of the toast transition
+export const HOVER_TRANSITION_DURATION = 200; // the duration of the toast transition hover
+export const TOAST_HIDE_DELAY = 200; // the delay before the toast is invisible to shift remained toast smoothly

package/src/components/Toast/Toast.styles.ts

@@ -1,16 +1,217 @@
-import { darkTheme, keyframes, lightTheme, styled } from '../../theme';
+import { css, darkTheme, lightTheme, styled } from '../../theme';
 import { Typography } from '../Typography';
 
-const toastOpacity = keyframes({
-  from: { opacity: 0 },
-  to: { opacity: 1 },
+import {
+  HOVER_TRANSITION_DURATION,
+  TOAST_TRANSITION_DURATION,
+} from './Toast.helpers';
+
+export const toastContentStyles = css({
+  transition: `transform ${HOVER_TRANSITION_DURATION}ms ease-in-out`,
+  '&:hover': {
+    transform: 'scale(0.99)',
+  },
 });
 
 export const ToastContentContainer = styled('div', {
-  animation: `${toastOpacity} .7s`,
+  transition: `transform ${TOAST_TRANSITION_DURATION}ms cubic-bezier(0, 0, 0.75, 1.25)`,
+  cursor: 'pointer',
+  variants: {
+    isActive: {
+      true: {},
+    },
+    isVisible: {
+      true: {},
+    },
+    position: {
+      'right-top': {},
+      'right-bottom': {},
+      'left-top': {},
+      'left-bottom': {},
+      'center-top': {},
+      'center-bottom': {},
+    },
+  },
+  compoundVariants: [
+    {
+      position: 'right-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateX(100%)',
+      },
+    },
+    {
+      position: 'right-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        maxHeight: '0px',
+        transform: 'translateX(100%)',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'right-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateX(0)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '200px',
+      },
+    },
+    {
+      position: 'left-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateX(-100%)',
+        maxHeight: '0px',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: true,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateY(0)',
+        opacity: 1,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: false,
+      isVisible: true,
+      css: {
+        maxHeight: '200px',
+        transform: 'translateY(-1000%)',
+        opacity: 0,
+      },
+    },
+    {
+      position: 'center-top',
+      isActive: false,
+      isVisible: false,
+      css: {
+        maxHeight: '0px',
+        opacity: 0,
+        transform: 'translateY(-1000%)',
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: true,
+      isVisible: true,
+      css: {
+        transform: 'translateY(0)',
+        maxHeight: '200px',
+        opacity: 1,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: false,
+      isVisible: true,
+      css: {
+        transform: 'translateY(1000%)',
+        maxHeight: '200px',
+        opacity: 0,
+      },
+    },
+    {
+      position: 'center-bottom',
+      isActive: false,
+      isVisible: false,
+      css: {
+        transform: 'translateY(1000%)',
+        maxHeight: '0px',
+        opacity: 0,
+        transition: `max-height ${TOAST_TRANSITION_DURATION}ms ease-in-out`,
+      },
+    },
+  ],
 });
 
 export const ToastContainer = styled('div', {
+  overflow: 'hidden',
   position: 'absolute',
   zIndex: 9999,
   display: 'flex',
@@ -25,6 +226,7 @@ export const ToastContainer = styled('div', {
       'right-bottom': {
         right: 12,
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
       'left-top': {
         left: 12,
@@ -33,6 +235,7 @@ export const ToastContainer = styled('div', {
       'left-bottom': {
         left: 12,
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
       'center-top': {
         left: '50%',
@@ -43,6 +246,7 @@ export const ToastContainer = styled('div', {
         left: '50%',
         transform: 'translateX(-50%)',
         bottom: 2,
+        flexDirection: 'column-reverse',
       },
     },
   },