@cleartrip/ct-design-toast 4.0.0-TEST.3 → 5.0.0

package/dist/ct-design-toast.esm.js

@@ -1,13 +1,11 @@
-import { __assign } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { useTheme } from '@cleartrip/ct-design-theme';
-import { Portal } from '@cleartrip/ct-design-portal';
-import { Transition } from '@cleartrip/ct-design-transition';
-import { Typography } from '@cleartrip/ct-design-typography';
+import { useRef, useEffect } from 'react';
 import { Container } from '@cleartrip/ct-design-container';
-import styled from 'styled-components';
-import classNames from 'classnames';
+import { Portal } from '@cleartrip/ct-design-portal';
+import { Typography, TypographyVariant, TypographyColor } from '@cleartrip/ct-design-typography';
+import { useAnimatedStyles, Animated } from '@cleartrip/ct-design-animated';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { isPwa } from '@cleartrip/ct-design-common-utils';
 
 var IToastBorderSize;
 (function (IToastBorderSize) {
@@ -19,98 +17,110 @@ var IToastBorderSize;
 })(IToastBorderSize || (IToastBorderSize = {}));
 var IToastPosition;
 (function (IToastPosition) {
-    IToastPosition["BOTTOM_CENTER"] = "BOTTOM_CENTER";
+    IToastPosition["TOP"] = "top";
+    IToastPosition["BOTTOM"] = "bottom";
+    IToastPosition["BOTTOM_CENTER"] = "bottom_center";
 })(IToastPosition || (IToastPosition = {}));
 
-var getToastBorderSize = function (borderSize, theme) {
+const getToastBorderSize = (borderSize, theme) => {
     switch (borderSize) {
-        case IToastBorderSize.XS: {
-            return {
-                borderRadius: theme.border.radius[4],
-            };
-        }
-        case IToastBorderSize.SM: {
-            return {
-                borderRadius: theme.border.radius[6],
-            };
-        }
-        case IToastBorderSize.MD: {
-            return {
-                borderRadius: theme.border.radius[8],
-            };
-        }
-        case IToastBorderSize.LG: {
-            return {
-                borderRadius: theme.border.radius[16],
-            };
-        }
-        case IToastBorderSize.XL: {
-            return {
-                borderRadius: theme.border.radius[32],
-            };
-        }
-        default: {
-            return {
-                borderRadius: theme.border.radius[8],
-            };
-        }
+        case IToastBorderSize.XS:
+            return { borderRadius: theme.border.radius[4] };
+        case IToastBorderSize.SM:
+            return { borderRadius: theme.border.radius[6] };
+        case IToastBorderSize.LG:
+            return { borderRadius: theme.border.radius[16] };
+        case IToastBorderSize.XL:
+            return { borderRadius: theme.border.radius[32] };
+        case IToastBorderSize.MD:
+        default:
+            return { borderRadius: theme.border.radius[8] };
     }
 };
-var getToastPosition = function (_a) {
-    var position = _a.position, _b = _a.bottom, bottom = _b === void 0 ? '100px' : _b; _a.theme;
+const getToastPosition = ({ position = IToastPosition.BOTTOM_CENTER, theme, }) => {
     switch (position) {
         case IToastPosition.BOTTOM_CENTER: {
-            return {
-                left: '50%',
-                transform: 'translate(-50%, 0)',
-                bottom: bottom,
-            };
-        }
-        default: {
-            return {
-                left: '50%',
-                transform: 'translate(-50%, 0)',
-                bottom: bottom,
-            };
+            if (isPwa()) {
+                return { left: 0, right: 0, margin: 'auto' };
+            }
+            return {};
         }
+        case IToastPosition.TOP:
+            return { top: theme.spacing[4], left: theme.spacing[4] };
+        case IToastPosition.BOTTOM:
+        default:
+            return { left: theme.spacing[4], right: 'auto' };
     }
 };
-var getToastStyles = function (_a) {
-    var borderSize = _a.borderSize, position = _a.position, bottom = _a.bottom, theme = _a.theme;
-    var tooltipPosition = getToastPosition({ position: position, bottom: bottom, theme: theme }) || {};
-    return __assign(__assign({ width: '288px', position: 'fixed', background: theme.color.background.defaultDarkest, padding: '8px 12px', display: 'flex', alignItems: 'center' }, tooltipPosition), getToastBorderSize(borderSize, theme));
-};
-
-var StyledToast = styled.div(function (_a) {
-    var css = _a.css;
-    return (__assign({}, css));
-});
 
-var DEFAULT_ANIMATION_TIME = 400;
-var DEFAULT_TOAST_CLOSE_TIMEOUT = 2000;
-var Toast = function (_a) {
-    var _b = _a.borderSize, borderSize = _b === void 0 ? IToastBorderSize.MD : _b, _c = _a.position, position = _c === void 0 ? IToastPosition.BOTTOM_CENTER : _c, bottom = _a.bottom, _d = _a.show, show = _d === void 0 ? true : _d, text = _a.text, prefixComponent = _a.prefixComponent, suffixComponent = _a.suffixComponent, _e = _a.animationDuration, animationDuration = _e === void 0 ? DEFAULT_ANIMATION_TIME : _e, _f = _a.isAutoClose, isAutoClose = _f === void 0 ? true : _f, _g = _a.closeTimeout, closeTimeout = _g === void 0 ? DEFAULT_TOAST_CLOSE_TIMEOUT : _g, _h = _a.css, css = _h === void 0 ? {} : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.styleConfig, styleConfig = _k === void 0 ? {} : _k;
-    var theme = useTheme();
-    var prefixContainer = styleConfig.prefixContainer, textTypography = styleConfig.textTypography, toastContainer = styleConfig.toastContainer, suffixContainer = styleConfig.suffixContainer;
-    var _l = useState(show), showToast = _l[0], setShowToast = _l[1];
-    var toastStyles = getToastStyles({
-        borderSize: borderSize,
-        position: position,
-        bottom: bottom,
-        theme: theme,
-    });
-    useEffect(function () {
-        var id;
-        if (isAutoClose) {
-            id = setTimeout(function () {
-                setShowToast(false);
-            }, closeTimeout);
+const DEFAULT_TOAST_CLOSE_TIMEOUT = 2000;
+const DEFAULT_ANIMATION_TIME = 400;
+const staticStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        bottom: 30,
+        margin: 'auto',
+        maxWidth: '100%',
+        position: 'absolute',
+        backgroundColor: theme.color.background.defaultDarkest,
+        paddingVertical: theme.spacing[2],
+        paddingHorizontal: theme.spacing[3],
+        flexDirection: 'row',
+        alignSelf: 'center',
+        gap: theme.spacing[2],
+    },
+    prefixContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    textContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        flex: 1,
+    },
+    suffixContainer: {
+        display: 'flex',
+    },
+}));
+const Toast = ({ borderSize = IToastBorderSize.MD, position = IToastPosition.BOTTOM_CENTER, bottomOffset = 30, show = false, text, prefixComponent, suffixComponent, animationDuration = DEFAULT_ANIMATION_TIME, isAutoClose = true, closeTimeout = DEFAULT_TOAST_CLOSE_TIMEOUT, styleConfig, onHide: onToastClose, }) => {
+    const { prefixContainer = [], textTypography = [], toastContainer = [], suffixContainer = [] } = styleConfig || {};
+    const timerRef = useRef(null);
+    const [containerStyle, containerController] = useAnimatedStyles({
+        from: { translateY: +bottomOffset, opacity: 0 },
+        to: { translateY: -bottomOffset, opacity: 1 },
+        config: {
+            duration: animationDuration,
+            immediate: show ? true : false,
+        },
+    }, [show]);
+    const dynamicRootStyles = useStyles((theme) => ({
+        root: Object.assign(Object.assign(Object.assign({}, getToastBorderSize(borderSize, theme)), getToastPosition({ position, theme })), { opacity: show ? 1 : 0 }),
+    }), [show, borderSize, position]);
+    const handleTimerClear = () => {
+        if (!timerRef.current)
+            return;
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+    };
+    useEffect(() => {
+        if (!show) {
+            handleTimerClear();
+            return;
         }
-        return function () {
-            id && clearTimeout(id);
-        };
-    }, []);
-    return (jsx(Portal, { children: jsx(Transition, __assign({ type: 'fade', slideDirection: 'up', in: showToast, timeout: animationDuration }, { children: jsxs(StyledToast, __assign({ css: __assign(__assign({}, toastStyles), ((toastContainer === null || toastContainer === void 0 ? void 0 : toastContainer.css) || css)), className: className }, { children: [prefixComponent && (jsx(Container, __assign({ className: classNames('flex flex-middle mr-2', prefixContainer === null || prefixContainer === void 0 ? void 0 : prefixContainer.className), css: prefixContainer === null || prefixContainer === void 0 ? void 0 : prefixContainer.css }, { children: prefixComponent }))), jsx(Typography, __assign({ variant: 'B3', color: 'neutral', className: 'p-1', styleConfig: textTypography }, { children: text })), suffixComponent && (jsx(Container, __assign({ className: classNames('flex flex-middle ml-auto', suffixContainer === null || suffixContainer === void 0 ? void 0 : suffixContainer.className), css: suffixContainer === null || suffixContainer === void 0 ? void 0 : suffixContainer.css }, { children: suffixComponent })))] })) })) }));
+        containerController.start();
+        if (!isAutoClose)
+            return;
+        timerRef.current = setTimeout(() => {
+            onToastClose === null || onToastClose === void 0 ? void 0 : onToastClose();
+            containerController.start({
+                to: { opacity: 0, translateY: +bottomOffset },
+            });
+        }, closeTimeout || DEFAULT_TOAST_CLOSE_TIMEOUT);
+        return () => handleTimerClear();
+    }, [show, isAutoClose, closeTimeout, bottomOffset]);
+    return (jsx(Portal, { id: 'toast-portal', children: jsxs(Animated.Container, { animated: containerStyle, styleConfig: { root: [staticStyles.root, dynamicRootStyles.root, ...toastContainer] }, children: [prefixComponent && (jsx(Container, { styleConfig: { root: [staticStyles.prefixContainer, ...prefixContainer] }, children: prefixComponent })), jsx(Container, { styleConfig: { root: [staticStyles.textContainer, ...textTypography] }, children: jsx(Typography, { variant: TypographyVariant.B3, color: TypographyColor.NEUTRAL, children: text }) }), suffixComponent && (jsx(Container, { styleConfig: { root: [staticStyles.suffixContainer, ...suffixContainer] }, children: suffixComponent }))] }) }));
 };
 
 export { IToastBorderSize, IToastPosition, Toast };

package/dist/ct-design-toast.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ct-design-toast.esm.js","sources":["../packages/components/Toast/src/type.ts","../packages/components/Toast/src/style.ts","../packages/components/Toast/src/StyledToast/StyledToast.tsx","../packages/components/Toast/src/Toast.tsx"],"sourcesContent":[null,null,null,null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;IAGY,iBAMX;AAND,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACX,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,GAM3B,EAAA,CAAA,CAAA,CAAA;IAGW,eAEX;AAFD,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AACjC,CAAC,EAFW,cAAc,KAAd,cAAc,GAEzB,EAAA,CAAA,CAAA;;ACVM,IAAM,kBAAkB,GAAG,UAAC,UAAiC,EAAE,KAAY,EAAA;AAChF,IAAA,QAAQ,UAAU;AAChB,QAAA,KAAK,gBAAgB,CAAC,EAAE,EAAE;YACxB,OAAO;gBACL,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;aACrC,CAAC;AACH,SAAA;AACD,QAAA,KAAK,gBAAgB,CAAC,EAAE,EAAE;YACxB,OAAO;gBACL,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;aACrC,CAAC;AACH,SAAA;AACD,QAAA,KAAK,gBAAgB,CAAC,EAAE,EAAE;YACxB,OAAO;gBACL,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;aACrC,CAAC;AACH,SAAA;AACD,QAAA,KAAK,gBAAgB,CAAC,EAAE,EAAE;YACxB,OAAO;gBACL,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;aACtC,CAAC;AACH,SAAA;AACD,QAAA,KAAK,gBAAgB,CAAC,EAAE,EAAE;YACxB,OAAO;gBACL,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;aACtC,CAAC;AACH,SAAA;AACD,QAAA,SAAS;YACP,OAAO;gBACL,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC;aACrC,CAAC;AACH,SAAA;AACF,KAAA;AACH,CAAC,CAAC;AAEK,IAAM,gBAAgB,GAAG,UAAC,EAQhC,EAAA;QAPC,QAAQ,GAAA,EAAA,CAAA,QAAA,CACR,CAAA,EAAA,GAAA,EAAA,CAAA,MAAgB,CAAhB,CAAA,MAAM,mBAAG,OAAO,GAAA,EAAA,CAChB,CAAK,EAAA,CAAA,MAAA;AAML,IAAA,QAAQ,QAAQ;AACd,QAAA,KAAK,cAAc,CAAC,aAAa,EAAE;YACjC,OAAO;AACL,gBAAA,IAAI,EAAE,KAAK;AACX,gBAAA,SAAS,EAAE,oBAAoB;AAC/B,gBAAA,MAAM,EAAE,MAAM;aACf,CAAC;AACH,SAAA;AAED,QAAA,SAAS;YACP,OAAO;AACL,gBAAA,IAAI,EAAE,KAAK;AACX,gBAAA,SAAS,EAAE,oBAAoB;AAC/B,gBAAA,MAAM,EAAA,MAAA;aACP,CAAC;AACH,SAAA;AACF,KAAA;AACH,CAAC,CAAC;AAEK,IAAM,cAAc,GAAG,UAAC,EAU9B,EAAA;QATC,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,KAAK,GAAA,EAAA,CAAA,KAAA,CAAA;AAOL,IAAA,IAAM,eAAe,GAAG,gBAAgB,CAAC,EAAE,QAAQ,EAAA,QAAA,EAAE,MAAM,EAAA,MAAA,EAAE,KAAK,EAAA,KAAA,EAAE,CAAC,IAAI,EAAE,CAAC;AAE5E,IAAA,OAAA,QAAA,CAAA,QAAA,CAAA,EACE,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,OAAO,EACjB,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc,EACjD,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,EACjB,EAAA,eAAe,GACf,kBAAkB,CAAC,UAAU,EAAE,KAAK,CAAC,CACxC,CAAA;AACJ,CAAC;;ACvFD,IAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAqB,UAAC,EAAO,EAAA;AAAL,IAAA,IAAA,GAAG,GAAA,EAAA,CAAA,GAAA,CAAA;IAAO,QAAA,QAAA,CAAA,EAAA,EAC3D,GAAG,CACN,EAAA;AAF8D,CAE9D,CAAC;;ACSH,IAAM,sBAAsB,GAAG,GAAG,CAAC;AACnC,IAAM,2BAA2B,GAAG,IAAI,CAAC;AAMnC,IAAA,KAAK,GAA0B,UAAC,EAcrC,EAAA;AAbC,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,UAAgC,EAAhC,UAAU,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,gBAAgB,CAAC,EAAE,GAAA,EAAA,EAChC,EAAuC,GAAA,EAAA,CAAA,QAAA,EAAvC,QAAQ,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,cAAc,CAAC,aAAa,KAAA,EACvC,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,YAAW,EAAX,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,KAAA,EACX,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,eAAe,GAAA,EAAA,CAAA,eAAA,EACf,EAA0C,GAAA,EAAA,CAAA,iBAAA,EAA1C,iBAAiB,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,sBAAsB,GAAA,EAAA,EAC1C,EAAkB,GAAA,EAAA,CAAA,WAAA,EAAlB,WAAW,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,GAAA,EAAA,EAClB,oBAA0C,EAA1C,YAAY,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,2BAA2B,KAAA,EAC1C,EAAA,GAAA,EAAA,CAAA,GAAQ,EAAR,GAAG,mBAAG,EAAE,GAAA,EAAA,EACR,EAAA,GAAA,EAAA,CAAA,SAAc,EAAd,SAAS,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,EACd,EAAgB,GAAA,EAAA,CAAA,WAAA,EAAhB,WAAW,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,CAAA;AAEhB,IAAA,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;AACjB,IAAA,IAAA,eAAe,GAAsD,WAAW,gBAAjE,EAAE,cAAc,GAAsC,WAAW,CAAA,cAAjD,EAAE,cAAc,GAAsB,WAAW,CAAjC,cAAA,EAAE,eAAe,GAAK,WAAW,gBAAhB,CAAiB;IACnF,IAAA,EAAA,GAA4B,QAAQ,CAAU,IAAI,CAAC,EAAlD,SAAS,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,YAAY,GAAA,EAAA,CAAA,CAAA,CAA2B,CAAC;IAE1D,IAAM,WAAW,GAAG,cAAc,CAAC;AACjC,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,MAAM,EAAA,MAAA;AACN,QAAA,KAAK,EAAA,KAAA;AACN,KAAA,CAAC,CAAC;AAGH,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,IAAI,WAAW,EAAE;YACf,EAAE,GAAG,UAAU,CAAC,YAAA;gBACd,YAAY,CAAC,KAAK,CAAC,CAAC;aACrB,EAAE,YAAY,CAAC,CAAC;AAClB,SAAA;QACD,OAAO,YAAA;AAEL,YAAA,EAAE,IAAI,YAAY,CAAC,EAAE,CAAC,CAAC;AACzB,SAAC,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;AAOP,IAAA,QACEA,GAAA,CAAC,MAAM,EAAA,EAAA,QAAA,EACLA,IAAC,UAAU,EAAA,QAAA,CAAA,EAAC,IAAI,EAAE,MAAM,EAAE,cAAc,EAAC,IAAI,EAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,iBAAiB,gBACrFC,IAAC,CAAA,WAAW,EAAC,QAAA,CAAA,EAAA,GAAG,EAAO,QAAA,CAAA,QAAA,CAAA,EAAA,EAAA,WAAW,CAAK,GAAC,CAAA,cAAc,KAAA,IAAA,IAAd,cAAc,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAd,cAAc,CAAE,GAAG,KAAI,GAAG,EAAC,EAAI,SAAS,EAAE,SAAS,EAAA,EAAA,EAAA,QAAA,EAAA,CACxF,eAAe,KACdD,GAAC,CAAA,SAAS,EACR,QAAA,CAAA,EAAA,SAAS,EAAE,UAAU,CAAC,uBAAuB,EAAE,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAf,eAAe,CAAE,SAAS,CAAC,EAC1E,GAAG,EAAE,eAAe,KAAf,IAAA,IAAA,eAAe,KAAf,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,eAAe,CAAE,GAAG,gBAExB,eAAe,EAAA,CAAA,CACN,CACb,EACDA,GAAC,CAAA,UAAU,EAAC,QAAA,CAAA,EAAA,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAC,KAAK,EAAC,WAAW,EAAE,cAAc,EACjF,EAAA,EAAA,QAAA,EAAA,IAAI,EACM,CAAA,CAAA,EACZ,eAAe,KACdA,GAAC,CAAA,SAAS,EACR,QAAA,CAAA,EAAA,SAAS,EAAE,UAAU,CAAC,0BAA0B,EAAE,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAf,eAAe,CAAE,SAAS,CAAC,EAC7E,GAAG,EAAE,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAf,eAAe,CAAE,GAAG,EAExB,EAAA,EAAA,QAAA,EAAA,eAAe,IACN,CACb,CAAA,EAAA,CAAA,CACW,EACH,CAAA,CAAA,EAAA,CACN,EACT;AACJ;;;;"}
+{"version":3,"file":"ct-design-toast.esm.js","sources":["../packages/components/Toast/src/constants.ts","../packages/components/Toast/src/style.ts","../packages/components/Toast/src/Toast.tsx"],"sourcesContent":[null,null,null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;IAAY,iBAMX;AAND,CAAA,UAAY,gBAAgB,EAAA;AAC1B,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,gBAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACX,CAAC,EANW,gBAAgB,KAAhB,gBAAgB,GAM3B,EAAA,CAAA,CAAA,CAAA;IAEW,eAIX;AAJD,CAAA,UAAY,cAAc,EAAA;AACxB,IAAA,cAAA,CAAA,KAAA,CAAA,GAAA,KAAW,CAAA;AACX,IAAA,cAAA,CAAA,QAAA,CAAA,GAAA,QAAiB,CAAA;AACjB,IAAA,cAAA,CAAA,eAAA,CAAA,GAAA,eAA+B,CAAA;AACjC,CAAC,EAJW,cAAc,KAAd,cAAc,GAIzB,EAAA,CAAA,CAAA;;ACPM,MAAM,kBAAkB,GAAG,CAAC,UAAiC,EAAE,KAAY,KAAI;IACpF,QAAQ,UAAU;QAChB,KAAK,gBAAgB,CAAC,EAAE;AACtB,YAAA,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAClD,KAAK,gBAAgB,CAAC,EAAE;AACtB,YAAA,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;QAClD,KAAK,gBAAgB,CAAC,EAAE;AACtB,YAAA,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;QACnD,KAAK,gBAAgB,CAAC,EAAE;AACtB,YAAA,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;QACnD,KAAK,gBAAgB,CAAC,EAAE,CAAC;AACzB,QAAA;AACE,YAAA,OAAO,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;KACnD;AACH,CAAC,CAAC;AAEK,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,GAAG,cAAc,CAAC,aAAa,EACvC,KAAK,GAIN,KAAI;IACH,QAAQ,QAAQ;AACd,QAAA,KAAK,cAAc,CAAC,aAAa,EAAE;YACjC,IAAI,KAAK,EAAE,EAAE;AACX,gBAAA,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,MAA2B,EAAE,CAAC;aACnE;AACD,YAAA,OAAO,EAAE,CAAC;SACX;QACD,KAAK,cAAc,CAAC,GAAG;AACrB,YAAA,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;QAC3D,KAAK,cAAc,CAAC,MAAM,CAAC;AAC3B,QAAA;AACE,YAAA,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAA2B,EAAE,CAAC;KACzE;AACH,CAAC;;AC7BD,MAAM,2BAA2B,GAAG,IAAI,CAAC;AACzC,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAEnC,MAAM,YAAY,GAAG,UAAU,CAAC,CAAC,KAAK,MAAM;AAC1C,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,cAAc;AACtD,QAAA,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACjC,QAAA,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACnC,QAAA,aAAa,EAAE,KAAK;AACpB,QAAA,SAAS,EAAE,QAAQ;AACnB,QAAA,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACtB,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,cAAc,EAAE,QAAQ;AACzB,KAAA;AACD,IAAA,aAAa,EAAE;AACb,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,aAAa,EAAE,KAAK;AACpB,QAAA,IAAI,EAAE,CAAC;AACR,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,MAAM;AAChB,KAAA;AACF,CAAA,CAAC,CAAC,CAAC;AAEE,MAAA,KAAK,GAA0B,CAAC,EACpC,UAAU,GAAG,gBAAgB,CAAC,EAAE,EAChC,QAAQ,GAAG,cAAc,CAAC,aAAa,EACvC,YAAY,GAAG,EAAE,EACjB,IAAI,GAAG,KAAK,EACZ,IAAI,EACJ,eAAe,EACf,eAAe,EACf,iBAAiB,GAAG,sBAAsB,EAC1C,WAAW,GAAG,IAAI,EAClB,YAAY,GAAG,2BAA2B,EAC1C,WAAW,EACX,MAAM,EAAE,YAAY,GACrB,KAAI;IACH,MAAM,EAAE,eAAe,GAAG,EAAE,EAAE,cAAc,GAAG,EAAE,EAAE,cAAc,GAAG,EAAE,EAAE,eAAe,GAAG,EAAE,EAAE,GAAG,WAAW,IAAI,EAAE,CAAC;AAEnH,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAuC,IAAI,CAAC,CAAC;AAEpE,IAAA,MAAM,CAAC,cAAc,EAAE,mBAAmB,CAAC,GAAG,iBAAiB,CAC7D;QACE,IAAI,EAAE,EAAE,UAAU,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE;QAC/C,EAAE,EAAE,EAAE,UAAU,EAAE,CAAC,YAAY,EAAE,OAAO,EAAE,CAAC,EAAE;AAC7C,QAAA,MAAM,EAAE;AACN,YAAA,QAAQ,EAAE,iBAAiB;YAC3B,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK;AAC/B,SAAA;AACF,KAAA,EACD,CAAC,IAAI,CAAC,CACP,CAAC;IAEF,MAAM,iBAAiB,GAAG,SAAS,CACjC,CAAC,KAAK,MAAM;AACV,QAAA,IAAI,EACC,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAA,kBAAkB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAA,EACrC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CACxC,EAAA,EAAA,OAAO,EAAE,IAAI,GAAG,CAAC,GAAG,CAAC,EACtB,CAAA;KACF,CAAC,EACF,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,CAAC,CAC7B,CAAC;IAEF,MAAM,gBAAgB,GAAG,MAAK;QAC5B,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;AAC9B,QAAA,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;AAC/B,QAAA,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAC1B,KAAC,CAAC;IAEF,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,IAAI,EAAE;AACT,YAAA,gBAAgB,EAAE,CAAC;YACnB,OAAO;SACR;QAED,mBAAmB,CAAC,KAAK,EAAE,CAAC;AAE5B,QAAA,IAAI,CAAC,WAAW;YAAE,OAAO;AAEzB,QAAA,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;AACjC,YAAA,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,YAAY,EAAI,CAAC;YACjB,mBAAmB,CAAC,KAAK,CAAC;gBACxB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,YAAY,EAAE;AAC9C,aAAA,CAAC,CAAC;AACL,SAAC,EAAE,YAAY,IAAI,2BAA2B,CAAC,CAAC;AAEhD,QAAA,OAAO,MAAM,gBAAgB,EAAE,CAAC;KAEjC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC;AAEpD,IAAA,QACEA,GAAA,CAAC,MAAM,EAAA,EAAC,EAAE,EAAC,cAAc,EAAA,QAAA,EACvBC,IAAC,CAAA,QAAQ,CAAC,SAAS,EACjB,EAAA,QAAQ,EAAE,cAAc,EACxB,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,IAAI,EAAE,GAAG,cAAc,CAAC,EAAE,EAAA,QAAA,EAAA,CAEpF,eAAe,KACdD,GAAA,CAAC,SAAS,EAAA,EAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,eAAe,CAAC,EAAE,EACjF,QAAA,EAAA,eAAe,EACN,CAAA,CACb,EACDA,GAAA,CAAC,SAAS,EAAA,EAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,aAAa,EAAE,GAAG,cAAc,CAAC,EAAE,EAC/E,QAAA,EAAAA,GAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,iBAAiB,CAAC,EAAE,EAAE,KAAK,EAAE,eAAe,CAAC,OAAO,EAAA,QAAA,EACtE,IAAI,EAAA,CACM,EACH,CAAA,EACX,eAAe,KACdA,GAAA,CAAC,SAAS,EAAA,EAAC,WAAW,EAAE,EAAE,IAAI,EAAE,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,eAAe,CAAC,EAAE,EACjF,QAAA,EAAA,eAAe,EACN,CAAA,CACb,CACkB,EAAA,CAAA,EAAA,CACd,EACT;AACJ;;;;"}

package/dist/ct-design-toast.umd.js

@@ -1,43 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-portal'), require('@cleartrip/ct-design-transition'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-container'), require('styled-components')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-portal', '@cleartrip/ct-design-transition', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-container', 'styled-components'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemToast = {}, global.jsxRuntime, global.React, global.ctDesignTheme, global.ctDesignPortal, global.ctDesignTransition, global.ctDesignTypography, global.ctDesignContainer, global.styled));
-})(this, (function (exports, jsxRuntime, react, ctDesignTheme, ctDesignPortal, ctDesignTransition, ctDesignTypography, ctDesignContainer, styled) { 'use strict';
-
-    function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-    var styled__default = /*#__PURE__*/_interopDefault(styled);
-
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-    /* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-    var __assign = function () {
-      __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-          s = arguments[i];
-          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-      };
-      return __assign.apply(this, arguments);
-    };
-    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-      var e = new Error(message);
-      return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-    };
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-portal'), require('@cleartrip/ct-design-typography'), require('@cleartrip/ct-design-animated'), require('@cleartrip/ct-design-style-manager'), require('@cleartrip/ct-design-common-utils')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-container', '@cleartrip/ct-design-portal', '@cleartrip/ct-design-typography', '@cleartrip/ct-design-animated', '@cleartrip/ct-design-style-manager', '@cleartrip/ct-design-common-utils'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemToast = {}, global.jsxRuntime, global.React, global.ctDesignContainer, global.ctDesignPortal, global.ctDesignTypography, global.ctDesignAnimated, global.ctDesignStyleManager, global.ctDesignCommonUtils));
+})(this, (function (exports, jsxRuntime, react, ctDesignContainer, ctDesignPortal, ctDesignTypography, ctDesignAnimated, ctDesignStyleManager, ctDesignCommonUtils) { 'use strict';
 
     exports.IToastBorderSize = void 0;
     (function (IToastBorderSize) {
@@ -49,165 +14,110 @@
     })(exports.IToastBorderSize || (exports.IToastBorderSize = {}));
     exports.IToastPosition = void 0;
     (function (IToastPosition) {
-        IToastPosition["BOTTOM_CENTER"] = "BOTTOM_CENTER";
+        IToastPosition["TOP"] = "top";
+        IToastPosition["BOTTOM"] = "bottom";
+        IToastPosition["BOTTOM_CENTER"] = "bottom_center";
     })(exports.IToastPosition || (exports.IToastPosition = {}));
 
-    var getToastBorderSize = function (borderSize, theme) {
+    const getToastBorderSize = (borderSize, theme) => {
         switch (borderSize) {
-            case exports.IToastBorderSize.XS: {
-                return {
-                    borderRadius: theme.border.radius[4],
-                };
-            }
-            case exports.IToastBorderSize.SM: {
-                return {
-                    borderRadius: theme.border.radius[6],
-                };
-            }
-            case exports.IToastBorderSize.MD: {
-                return {
-                    borderRadius: theme.border.radius[8],
-                };
-            }
-            case exports.IToastBorderSize.LG: {
-                return {
-                    borderRadius: theme.border.radius[16],
-                };
-            }
-            case exports.IToastBorderSize.XL: {
-                return {
-                    borderRadius: theme.border.radius[32],
-                };
-            }
-            default: {
-                return {
-                    borderRadius: theme.border.radius[8],
-                };
-            }
+            case exports.IToastBorderSize.XS:
+                return { borderRadius: theme.border.radius[4] };
+            case exports.IToastBorderSize.SM:
+                return { borderRadius: theme.border.radius[6] };
+            case exports.IToastBorderSize.LG:
+                return { borderRadius: theme.border.radius[16] };
+            case exports.IToastBorderSize.XL:
+                return { borderRadius: theme.border.radius[32] };
+            case exports.IToastBorderSize.MD:
+            default:
+                return { borderRadius: theme.border.radius[8] };
         }
     };
-    var getToastPosition = function (_a) {
-        var position = _a.position, _b = _a.bottom, bottom = _b === void 0 ? '100px' : _b; _a.theme;
+    const getToastPosition = ({ position = exports.IToastPosition.BOTTOM_CENTER, theme, }) => {
         switch (position) {
             case exports.IToastPosition.BOTTOM_CENTER: {
-                return {
-                    left: '50%',
-                    transform: 'translate(-50%, 0)',
-                    bottom: bottom,
-                };
-            }
-            default: {
-                return {
-                    left: '50%',
-                    transform: 'translate(-50%, 0)',
-                    bottom: bottom,
-                };
+                if (ctDesignCommonUtils.isPwa()) {
+                    return { left: 0, right: 0, margin: 'auto' };
+                }
+                return {};
             }
+            case exports.IToastPosition.TOP:
+                return { top: theme.spacing[4], left: theme.spacing[4] };
+            case exports.IToastPosition.BOTTOM:
+            default:
+                return { left: theme.spacing[4], right: 'auto' };
         }
     };
-    var getToastStyles = function (_a) {
-        var borderSize = _a.borderSize, position = _a.position, bottom = _a.bottom, theme = _a.theme;
-        var tooltipPosition = getToastPosition({ position: position, bottom: bottom, theme: theme }) || {};
-        return __assign(__assign({ width: '288px', position: 'fixed', background: theme.color.background.defaultDarkest, padding: '8px 12px', display: 'flex', alignItems: 'center' }, tooltipPosition), getToastBorderSize(borderSize, theme));
-    };
-
-    var StyledToast = styled__default.default.div(function (_a) {
-        var css = _a.css;
-        return (__assign({}, css));
-    });
-
-    var classnamesExports = {};
-    var classnames = {
-      get exports(){ return classnamesExports; },
-      set exports(v){ classnamesExports = v; },
-    };
-
-    /*!
-    	Copyright (c) 2018 Jed Watson.
-    	Licensed under the MIT License (MIT), see
-    	http://jedwatson.github.io/classnames
-    */
-    (function (module) {
-      /* global define */
-
-      (function () {
-
-        var hasOwn = {}.hasOwnProperty;
-        function classNames() {
-          var classes = '';
-          for (var i = 0; i < arguments.length; i++) {
-            var arg = arguments[i];
-            if (arg) {
-              classes = appendClass(classes, parseValue(arg));
-            }
-          }
-          return classes;
-        }
-        function parseValue(arg) {
-          if (typeof arg === 'string' || typeof arg === 'number') {
-            return arg;
-          }
-          if (typeof arg !== 'object') {
-            return '';
-          }
-          if (Array.isArray(arg)) {
-            return classNames.apply(null, arg);
-          }
-          if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-            return arg.toString();
-          }
-          var classes = '';
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes = appendClass(classes, key);
-            }
-          }
-          return classes;
-        }
-        function appendClass(value, newClass) {
-          if (!newClass) {
-            return value;
-          }
-          if (value) {
-            return value + ' ' + newClass;
-          }
-          return value + newClass;
-        }
-        if (module.exports) {
-          classNames.default = classNames;
-          module.exports = classNames;
-        } else {
-          window.classNames = classNames;
-        }
-      })();
-    })(classnames);
-    var classNames = classnamesExports;
 
-    var DEFAULT_ANIMATION_TIME = 400;
-    var DEFAULT_TOAST_CLOSE_TIMEOUT = 2000;
-    var Toast = function (_a) {
-        var _b = _a.borderSize, borderSize = _b === void 0 ? exports.IToastBorderSize.MD : _b, _c = _a.position, position = _c === void 0 ? exports.IToastPosition.BOTTOM_CENTER : _c, bottom = _a.bottom, _d = _a.show, show = _d === void 0 ? true : _d, text = _a.text, prefixComponent = _a.prefixComponent, suffixComponent = _a.suffixComponent, _e = _a.animationDuration, animationDuration = _e === void 0 ? DEFAULT_ANIMATION_TIME : _e, _f = _a.isAutoClose, isAutoClose = _f === void 0 ? true : _f, _g = _a.closeTimeout, closeTimeout = _g === void 0 ? DEFAULT_TOAST_CLOSE_TIMEOUT : _g, _h = _a.css, css = _h === void 0 ? {} : _h, _j = _a.className, className = _j === void 0 ? '' : _j, _k = _a.styleConfig, styleConfig = _k === void 0 ? {} : _k;
-        var theme = ctDesignTheme.useTheme();
-        var prefixContainer = styleConfig.prefixContainer, textTypography = styleConfig.textTypography, toastContainer = styleConfig.toastContainer, suffixContainer = styleConfig.suffixContainer;
-        var _l = react.useState(show), showToast = _l[0], setShowToast = _l[1];
-        var toastStyles = getToastStyles({
-            borderSize: borderSize,
-            position: position,
-            bottom: bottom,
-            theme: theme,
-        });
-        react.useEffect(function () {
-            var id;
-            if (isAutoClose) {
-                id = setTimeout(function () {
-                    setShowToast(false);
-                }, closeTimeout);
+    const DEFAULT_TOAST_CLOSE_TIMEOUT = 2000;
+    const DEFAULT_ANIMATION_TIME = 400;
+    const staticStyles = ctDesignStyleManager.makeStyles((theme) => ({
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            bottom: 30,
+            margin: 'auto',
+            maxWidth: '100%',
+            position: 'absolute',
+            backgroundColor: theme.color.background.defaultDarkest,
+            paddingVertical: theme.spacing[2],
+            paddingHorizontal: theme.spacing[3],
+            flexDirection: 'row',
+            alignSelf: 'center',
+            gap: theme.spacing[2],
+        },
+        prefixContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        textContainer: {
+            display: 'flex',
+            flexDirection: 'row',
+            flex: 1,
+        },
+        suffixContainer: {
+            display: 'flex',
+        },
+    }));
+    const Toast = ({ borderSize = exports.IToastBorderSize.MD, position = exports.IToastPosition.BOTTOM_CENTER, bottomOffset = 30, show = false, text, prefixComponent, suffixComponent, animationDuration = DEFAULT_ANIMATION_TIME, isAutoClose = true, closeTimeout = DEFAULT_TOAST_CLOSE_TIMEOUT, styleConfig, onHide: onToastClose, }) => {
+        const { prefixContainer = [], textTypography = [], toastContainer = [], suffixContainer = [] } = styleConfig || {};
+        const timerRef = react.useRef(null);
+        const [containerStyle, containerController] = ctDesignAnimated.useAnimatedStyles({
+            from: { translateY: +bottomOffset, opacity: 0 },
+            to: { translateY: -bottomOffset, opacity: 1 },
+            config: {
+                duration: animationDuration,
+                immediate: show ? true : false,
+            },
+        }, [show]);
+        const dynamicRootStyles = ctDesignStyleManager.useStyles((theme) => ({
+            root: Object.assign(Object.assign(Object.assign({}, getToastBorderSize(borderSize, theme)), getToastPosition({ position, theme })), { opacity: show ? 1 : 0 }),
+        }), [show, borderSize, position]);
+        const handleTimerClear = () => {
+            if (!timerRef.current)
+                return;
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        };
+        react.useEffect(() => {
+            if (!show) {
+                handleTimerClear();
+                return;
             }
-            return function () {
-                id && clearTimeout(id);
-            };
-        }, []);
-        return (jsxRuntime.jsx(ctDesignPortal.Portal, { children: jsxRuntime.jsx(ctDesignTransition.Transition, __assign({ type: 'fade', slideDirection: 'up', in: showToast, timeout: animationDuration }, { children: jsxRuntime.jsxs(StyledToast, __assign({ css: __assign(__assign({}, toastStyles), ((toastContainer === null || toastContainer === void 0 ? void 0 : toastContainer.css) || css)), className: className }, { children: [prefixComponent && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: classNames('flex flex-middle mr-2', prefixContainer === null || prefixContainer === void 0 ? void 0 : prefixContainer.className), css: prefixContainer === null || prefixContainer === void 0 ? void 0 : prefixContainer.css }, { children: prefixComponent }))), jsxRuntime.jsx(ctDesignTypography.Typography, __assign({ variant: 'B3', color: 'neutral', className: 'p-1', styleConfig: textTypography }, { children: text })), suffixComponent && (jsxRuntime.jsx(ctDesignContainer.Container, __assign({ className: classNames('flex flex-middle ml-auto', suffixContainer === null || suffixContainer === void 0 ? void 0 : suffixContainer.className), css: suffixContainer === null || suffixContainer === void 0 ? void 0 : suffixContainer.css }, { children: suffixComponent })))] })) })) }));
+            containerController.start();
+            if (!isAutoClose)
+                return;
+            timerRef.current = setTimeout(() => {
+                onToastClose === null || onToastClose === void 0 ? void 0 : onToastClose();
+                containerController.start({
+                    to: { opacity: 0, translateY: +bottomOffset },
+                });
+            }, closeTimeout || DEFAULT_TOAST_CLOSE_TIMEOUT);
+            return () => handleTimerClear();
+        }, [show, isAutoClose, closeTimeout, bottomOffset]);
+        return (jsxRuntime.jsx(ctDesignPortal.Portal, { id: 'toast-portal', children: jsxRuntime.jsxs(ctDesignAnimated.Animated.Container, { animated: containerStyle, styleConfig: { root: [staticStyles.root, dynamicRootStyles.root, ...toastContainer] }, children: [prefixComponent && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles.prefixContainer, ...prefixContainer] }, children: prefixComponent })), jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles.textContainer, ...textTypography] }, children: jsxRuntime.jsx(ctDesignTypography.Typography, { variant: ctDesignTypography.TypographyVariant.B3, color: ctDesignTypography.TypographyColor.NEUTRAL, children: text }) }), suffixComponent && (jsxRuntime.jsx(ctDesignContainer.Container, { styleConfig: { root: [staticStyles.suffixContainer, ...suffixContainer] }, children: suffixComponent }))] }) }));
     };
 
     exports.Toast = Toast;