From a94c9517198525d3791f570c55e6f87c9fe0d823 Mon Sep 17 00:00:00 2001
From: hemengke <23536175@qq.com>
Date: Sun, 25 Aug 2024 11:35:39 +0800
Subject: [PATCH 1/8] feat: refactor css modules to global BEM class

---
 README.md                                     | 19 +++--
 example/src/main.tsx                          |  1 +
 example/src/page/api/api.tsx                  |  2 +-
 example/src/page/example/example.tsx          | 10 ++-
 .../page/getting-started/getting-started.tsx  |  1 +
 example/src/page/theme/theme.tsx              |  6 ++
 package.json                                  | 29 +++++--
 postcss.config.js                             | 17 ----
 rollup.config.mjs                             |  9 ---
 src/component/toast-message.tsx               | 36 ++++-----
 src/index.tsx                                 |  7 +-
 src/style.css                                 | 64 ---------------
 src/style.scss                                | 80 +++++++++++++++++++
 src/theme/blue-dusk.css                       |  2 +-
 src/theme/chroma.css                          | 11 ++-
 src/theme/dark-edge.css                       |  2 +-
 src/theme/dark.css                            |  2 +-
 src/theme/failure.css                         |  2 +-
 src/theme/frosted-glass.css                   |  4 +-
 src/theme/info.css                            |  2 +-
 src/theme/light-edge.css                      |  2 +-
 src/theme/light.css                           |  2 +-
 src/theme/moonlight.css                       |  2 +-
 src/theme/ocean-wave.css                      |  2 +-
 src/theme/pink-dawn.css                       |  2 +-
 src/theme/plain.css                           |  2 +-
 src/theme/success.css                         |  2 +-
 src/theme/sunset.css                          |  2 +-
 src/theme/theme-classnames.json               |  1 -
 src/theme/warning.css                         |  2 +-
 src/type.d.ts                                 |  1 -
 src/type/common.ts                            |  1 +
 yarn.lock                                     | 34 ++++++++
 33 files changed, 211 insertions(+), 150 deletions(-)
 delete mode 100644 src/style.css
 create mode 100644 src/style.scss
 delete mode 100644 src/theme/theme-classnames.json
 delete mode 100644 src/type.d.ts

diff --git a/README.md b/README.md
index b04ee84..79d8540 100644
--- a/README.md
+++ b/README.md
@@ -15,6 +15,7 @@ Elevate your React applications with ultra-sleek toast notifications! With React
 </p>
 
 ## Table of Contents
+
 - [Installation](#Installation)
 - [Usage](#Usage)
 - [Key Features](#Key-Features)
@@ -24,37 +25,35 @@ Elevate your React applications with ultra-sleek toast notifications! With React
 - [License](#License)
 
 <a name="Installation"></a>
+
 ## Installation 📦
 
 Get started in seconds!
 
-
-
 ```bash
 npm install react-simple-toasts
 ```
 
 <a name="Usage"></a>
+
 ## Usage 💡
 
 Integrate with ease. Customize with flair.
 
 ```jsx
 import toast, { toastConfig } from 'react-simple-toasts';
+import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 
 toastConfig({ theme: 'dark' });
 
 function MyComponent() {
-  return (
-    <button onClick={() => toast('Your toast is ready! 🍞')}>
-      Show Toast
-    </button>
-  );
+  return <button onClick={() => toast('Your toast is ready! 🍞')}>Show Toast</button>;
 }
 ```
 
 <a name="Key-Features"></a>
+
 ## Key Features 🌟
 
 - **Ease of Use**: Set up in minutes, not hours!
@@ -64,31 +63,37 @@ function MyComponent() {
 - **Multi-Toast Control**: Manage multiple notifications effortlessly.
 
 <a name="Themes"></a>
+
 ## Themes 🎨
 
 Your style, your toast. Choose from built-in themes or create your own.
 
 ### Standard Theme
+
 <p align="center">
   <img src="https://raw.githubusercontent.com/almond-bongbong/react-simple-toasts/master/docs/theme_standard.gif" alt="standard theme showcase" />
 </p>
 
 ### Creative Theme
+
 <p align="center">
   <img src="https://raw.githubusercontent.com/almond-bongbong/react-simple-toasts/master/docs/theme_creative.gif" alt="creative theme showcase" />
 </p>
 
 <a name="Documentation"></a>
+
 ## Documentation 📘
 
 Explore full [documentation](https://almond-bongbong.github.io/react-simple-toasts/) for in-depth guides, examples, and API details.
 
 <a name="Contribute"></a>
+
 ## Contribute 🤝
 
 Join our growing community! [Star us on GitHub](https://github.com/almond-bongbong/react-simple-toasts/stargazers) and contribute to making React Simple Toasts better.
 
 <a name="License"></a>
+
 ## License 📜
 
 React Simple Toasts is MIT licensed.
diff --git a/example/src/main.tsx b/example/src/main.tsx
index 9342142..74128c4 100644
--- a/example/src/main.tsx
+++ b/example/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import App from './app';
 import './index.css';
 import { toastConfig } from 'react-simple-toasts';
+import 'react-simple-toasts/dist/style.css';
 
 import.meta.globEager('/node_modules/react-simple-toasts/dist/theme/*.css');
 
diff --git a/example/src/page/api/api.tsx b/example/src/page/api/api.tsx
index 80670da..ca8dc6f 100644
--- a/example/src/page/api/api.tsx
+++ b/example/src/page/api/api.tsx
@@ -18,7 +18,7 @@ function Api() {
         </p>
         <div className={styles.code}>
           <CommonHighlighter>{`import toast from 'react-simple-toasts';
-
+import 'react-simple-toasts/dist/style.css';
 export function MyComponent() {
   return (
     <button onClick={() => toast('Hello, world!')}>
diff --git a/example/src/page/example/example.tsx b/example/src/page/example/example.tsx
index de794c0..0fb92b1 100644
--- a/example/src/page/example/example.tsx
+++ b/example/src/page/example/example.tsx
@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
 import styles from './example.module.css';
 import CommonHighlighter from '../../component/common-highlighter';
 import Button from '../../component/button';
-import MyMessage from '../../component/example/my-message';
 
 function Example() {
   const [position, setPosition] = useState<ToastPosition>('bottom-center');
@@ -23,6 +22,7 @@ function Example() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast, { toastConfig } from 'react-simple-toasts';
+import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 
 toastConfig({
@@ -55,7 +55,7 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
-
+import 'react-simple-toasts/dist/style.css';
 toast('Hello, World!', 1000);
 
 // OR
@@ -85,6 +85,7 @@ toast('Hello, World!', { duration: 1000 })`}</CommonHighlighter>
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 import 'react-simple-toasts/dist/theme/light.css';
 
@@ -143,6 +144,7 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 import 'my-style.css';
 
 export default function App() {
@@ -367,6 +369,7 @@ toast('Synchronizing...', { loading: taskPromise });`}</CommonHighlighter>
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/info.css';
 import 'react-simple-toasts/dist/theme/success.css';
 
@@ -415,6 +418,7 @@ taskPromise.then(() =>
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast, { Toast } from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 
 export default function App() {
   const handleShowClick = () => {
@@ -454,6 +458,7 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast, { Toast } from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 
 export default function App() {
   const [infiniteToast, setInfiniteToast] = useState<Toast | null>(null);
@@ -520,6 +525,7 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 
 export default function App() {
   const handleClick = () => {
diff --git a/example/src/page/getting-started/getting-started.tsx b/example/src/page/getting-started/getting-started.tsx
index 7199805..4e40baa 100644
--- a/example/src/page/getting-started/getting-started.tsx
+++ b/example/src/page/getting-started/getting-started.tsx
@@ -30,6 +30,7 @@ yarn add react-simple-toasts`}</CommonHighlighter>
           <CommonHighlighter>
             {`import React from 'react';
 import toast, { toastConfig } from 'react-simple-toasts';
+import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css'; // import the desired theme
 
 // specify the theme in toastConfig
diff --git a/example/src/page/theme/theme.tsx b/example/src/page/theme/theme.tsx
index d3d0c2d..8b7a8e3 100644
--- a/example/src/page/theme/theme.tsx
+++ b/example/src/page/theme/theme.tsx
@@ -30,6 +30,7 @@ function Theme() {
         </div>
         <div className={styles.code}>
           <CommonHighlighter>{`import toast from 'react-simple-toasts';
+import 'react-simple-toasts/dist/style.css';
 
 export default function App() {
   return (
@@ -88,6 +89,7 @@ export default function App() {
 
         <div className={styles.code}>
           <CommonHighlighter>{`import toast, { Themes } from 'react-simple-toasts';
+          import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css'; // Import the 'dark' theme CSS
 
 export default function App() {
@@ -119,6 +121,7 @@ export default function App() {
           <p>You can directly specify a theme when calling the toast function.</p>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 
 export default function App() {
@@ -144,6 +147,7 @@ toastConfig({
             <br />
             <br />
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 
 export default function App() {
   return (
@@ -163,6 +167,7 @@ export default function App() {
           </p>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 
 const darkToast = createToast({ theme: 'dark' });
@@ -206,6 +211,7 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
+            import 'react-simple-toasts/dist/style.css';
 import './my-style.css';
 
 export default function App() {
diff --git a/package.json b/package.json
index 3826f7d..0514f26 100644
--- a/package.json
+++ b/package.json
@@ -9,15 +9,28 @@
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./style.css.map": "./dist/style.css.map",
+    "./dist/style.css": "./dist/style.css",
+    "./dist/style.css.map": "./dist/style.css.map"
+  },
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watch",
-    "prebuild:theme": "rm -rf src/theme/theme-classnames.json",
     "build:theme": "postcss src/theme/*.css -d dist/theme --env theme",
-    "prebuild": "yarn build:theme",
+    "build:sass": "sass src/style.scss dist/style.css",
+    "postbuild:sass": "postcss dist/style.css --use autoprefixer -m -o dist/style.css",
+    "prebuild": "yarn build:theme && yarn build:sass",
     "build": "rollup -c",
     "start:theme": "postcss src/theme/*.css -d dist/theme --env theme --watch",
-    "start": "concurrently \"rollup -c -w\" \"yarn start:theme\"",
+    "start:sass": "sass src/style.scss dist/style.css --watch",
+    "start": "concurrently \"rollup -c -w\" \"yarn start:theme\" \"yarn start:sass\"",
     "predeploy": "cd example && yarn install && yarn build",
     "deploy": "gh-pages -d example/build"
   },
@@ -57,15 +70,13 @@
     "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.23",
     "postcss-cli": "^10.1.0",
-    "postcss-modules": "^6.0.0",
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^3.10.0",
-    "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.34.1",
+    "sass": "^1.56.1",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4"
   },
@@ -75,7 +86,9 @@
   "engines": {
     "node": ">=16.17.0 <=20.x"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "keywords": [
     "react",
     "toast",
@@ -87,4 +100,4 @@
     "react-toastify"
   ],
   "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447"
-}
\ No newline at end of file
+}
diff --git a/postcss.config.js b/postcss.config.js
index 6935434..9168227 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,3 @@
-const fs = require('fs');
-
 const config = ({ env }) => {
   const isThemeEnv = env === 'theme';
 
@@ -7,21 +5,6 @@ const config = ({ env }) => {
 
   return {
     map: false,
-    plugins: [
-      require('postcss-modules')({
-        getJSON: (cssFileName, json) => {
-          const path = require('path');
-          const jsonFile = path.resolve('./src/theme/theme-classnames.json');
-          const savedJsonFile = fs.existsSync(jsonFile) ? fs.readFileSync(jsonFile, 'utf8') : null;
-          const savedJson = JSON.parse(savedJsonFile);
-          const newJson = {
-            ...savedJson,
-            ...json,
-          };
-          fs.writeFileSync(jsonFile, JSON.stringify(newJson));
-        },
-      }),
-    ],
   };
 };
 
diff --git a/rollup.config.mjs b/rollup.config.mjs
index ae4f6b7..b23de32 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -3,10 +3,8 @@ import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import typescript from 'rollup-plugin-typescript2';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
-import postcss from 'rollup-plugin-postcss';
 import eslint from '@rollup/plugin-eslint';
 import json from '@rollup/plugin-json';
-import autoprefixer from 'autoprefixer';
 import terser from '@rollup/plugin-terser';
 
 import pkg from './package.json' assert { type: 'json' };
@@ -45,13 +43,6 @@ export default {
     }),
     commonjs({ include: 'node_modules/**' }),
     json(),
-    postcss({
-      extract: false,
-      modules: true,
-      sourceMap: false,
-      use: ['sass'],
-      plugins: [autoprefixer()],
-    }),
     terser(),
   ],
 };
diff --git a/src/component/toast-message.tsx b/src/component/toast-message.tsx
index c1cf6e0..8fb4c26 100644
--- a/src/component/toast-message.tsx
+++ b/src/component/toast-message.tsx
@@ -1,25 +1,24 @@
 import React, { ReactElement, ReactNode, useRef, useState } from 'react';
-import styles from '../style.css';
 import { ToastEnterEvent, ToastOptions } from '../type/common';
 import { ToastPosition } from '../lib/constants';
-import moduleClassNames from '../theme/theme-classnames.json';
 import useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect';
 import { classes, rgbToRgba } from '../lib/utils';
 
 interface LoadingProps {
   color?: string;
+  children?: ReactNode
 }
 
-function Loading({ color }: LoadingProps) {
+function Loading({ color, children }: LoadingProps) {
   const translucentColor = color && rgbToRgba(color, 0.3);
 
   return (
-    <span className={styles['spinner-wrap']}>
+    <span className={'toast__spinner-wrap'}>
       <span
-        className={styles.spinner}
+        className={'toast__spinner'}
         style={{ border: `2px solid ${translucentColor}`, borderTopColor: color }}
       >
-        loading
+        {children || 'loading'}
       </span>
     </span>
   );
@@ -28,7 +27,7 @@ function Loading({ color }: LoadingProps) {
 export interface ToastMessageProps
   extends Pick<
     ToastOptions,
-    'className' | 'clickable' | 'position' | 'render' | 'theme' | 'onClick'
+    'className' | 'clickable' | 'position' | 'render' | 'theme' | 'onClick' | 'loadingText'
   > {
   id: number;
   message: ReactNode;
@@ -57,6 +56,7 @@ function ToastMessage({
   baseOffsetY,
   zIndex,
   loading,
+  loadingText,
   onClick,
   _onEnter,
 }: ToastMessageProps): ReactElement {
@@ -136,19 +136,19 @@ function ToastMessage({
   }, [loading]);
 
   const messageClassNames = classes(
-    styles['toast-message'],
-    styles[position || 'bottom-center'],
-    moduleClassNames[`toast-${theme}-wrapper`],
-    isEnter ? 'toast-enter-active' : '',
-    isExit ? 'toast-exit-active' : '',
-    localLoading ? styles['loading'] : '',
+    'toast__message',
+    `toast__message--${position || 'bottom-center'}`,
+    `toast__${theme}-wrapper`,
+    isEnter ? 'toast__message--enter-active' : '',
+    isExit ? 'toast__message--exit-active' : '',
+    localLoading ? 'toast__message--loading' : '',
   );
 
   const contentClassNames = classes(
-    styles['toast-content'],
-    clickable ? styles['clickable'] : '',
-    !render && moduleClassNames[`toast-${theme}`],
-    !render && theme ? styles['toast-theme-content'] : '',
+    'toast__content',
+    clickable ? 'toast__content--clickable' : '',
+    !render ? `toast__${theme}` : '',
+    !render && theme ? 'toast__theme-content' : '',
     theme || '',
     className,
   );
@@ -162,7 +162,7 @@ function ToastMessage({
   return (
     <div ref={messageDOM} id={id.toString()} className={messageClassNames} style={messageStyle}>
       <div className={contentClassNames} {...(clickable && clickableProps)}>
-        {localLoading && <Loading color={loadingColor} />}
+        {localLoading && <Loading color={loadingColor}>{loadingText}</Loading>}
         {render ? render(message) : message}
       </div>
     </div>
diff --git a/src/index.tsx b/src/index.tsx
index e1183e7..27fe54d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,4 @@
 import React, { cloneElement, Fragment, ReactNode, SyntheticEvent } from 'react';
-import styles from './style.css';
 import { addRootElement, createElement } from './lib/generateElement';
 import { render as reactRender } from './lib/react-render';
 import { createId, isBrowser, reverse } from './lib/utils';
@@ -21,9 +20,9 @@ import { isToastUpdateOptions } from './lib/type-guard';
 let toastComponentList: ToastComponent[] = [];
 
 const init = () => {
-  const toastContainer = isBrowser() && document.getElementById(styles['toast_container']);
+  const toastContainer = isBrowser() && document.getElementById('#toast__container');
   if (isBrowser() && !toastContainer) {
-    addRootElement(createElement(styles['toast_container']));
+    addRootElement(createElement('#toast__container'));
   }
   if (!toastComponentList || !Array.isArray(toastComponentList)) {
     toastComponentList = [];
@@ -124,7 +123,7 @@ function ToastContainer() {
 
 const renderDOM = () => {
   if (!isBrowser()) return;
-  const toastContainer = document.getElementById(styles['toast_container']);
+  const toastContainer = document.getElementById('#toast__container');
   if (!toastContainer) return;
 
   reactRender(<ToastContainer />, toastContainer);
diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index b0988ee..0000000
--- a/src/style.css
+++ /dev/null
@@ -1,64 +0,0 @@
-#toast_container * {
-  box-sizing: border-box;
-}
-.toast-message {
-  opacity: 0;
-  position: fixed;
-  z-index: 1000;
-  width: max-content;
-  max-width: 90%;
-  transition: opacity 0.3s, transform 0.3s;
-}
-.top-center,
-.bottom-center,
-.center {
-  left: 50%;
-}
-.toast-message:global(.toast-enter-active),
-.toast-message:global(.toast-appear-active) {
-  opacity: 1;
-}
-.toast-message:global(.toast-exit-active) {
-  opacity: 0;
-}
-.toast-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.toast-theme-content {
-  transition: all 0.2s;
-}
-.clickable {
-  cursor: pointer;
-}
-.loading .spinner-wrap {
-  visibility: visible;
-  opacity: 1;
-  width: 1.1em;
-  margin-right: 12px;
-}
-.spinner-wrap {
-  display: inline-block;
-  visibility: hidden;
-  opacity: 0;
-  width: 0;
-  margin-right: 0;
-}
-.spinner {
-  display: block;
-  overflow: hidden;
-  width: 1.1em;
-  height: 1.1em;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  border-top-color: #fff;
-  vertical-align: middle;
-  text-indent: -99999px;
-  animation: spin 1s ease-in-out infinite;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/style.scss b/src/style.scss
new file mode 100644
index 0000000..eec781a
--- /dev/null
+++ b/src/style.scss
@@ -0,0 +1,80 @@
+#toast__container {
+  * {
+    box-sizing: border-box;
+  }
+}
+
+.toast {
+  &__message {
+    opacity: 0;
+    position: fixed;
+    z-index: 1000;
+    width: max-content;
+    max-width: 90%;
+    transition: opacity 0.3s, transform 0.3s;
+
+    &--top-center,
+    &--bottom-center,
+    &--center {
+      left: 50%;
+    }
+
+    &--enter-active,
+    &--appear-active {
+      opacity: 1;
+    }
+
+    &--exit-active {
+      opacity: 0;
+    }
+
+    &--loading {
+      .toast__spinner-wrap {
+        visibility: visible;
+        opacity: 1;
+        width: 1.1em;
+        margin-right: 12px;
+      }
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--clickable {
+      cursor: pointer;
+    }
+  }
+
+  &__theme-content {
+    transition: all 0.2s;
+  }
+
+  &__spinner-wrap {
+    display: inline-block;
+    visibility: hidden;
+    opacity: 0;
+    width: 0;
+    margin-right: 0;
+  }
+
+  &__spinner {
+    display: block;
+    overflow: hidden;
+    width: 1.1em;
+    height: 1.1em;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: #fff;
+    text-indent: -99999px;
+    animation: toast_spinner-spin 1s ease-in-out infinite;
+  }
+}
+
+@keyframes toast_spinner-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/theme/blue-dusk.css b/src/theme/blue-dusk.css
index c966bdf..ed9eb75 100644
--- a/src/theme/blue-dusk.css
+++ b/src/theme/blue-dusk.css
@@ -1,4 +1,4 @@
-.toast-blue-dusk {
+.toast__blue-dusk {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/theme/chroma.css b/src/theme/chroma.css
index 0f40837..b3026af 100644
--- a/src/theme/chroma.css
+++ b/src/theme/chroma.css
@@ -1,10 +1,17 @@
-.toast-chroma {
+.toast__chroma {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
   color: #fff;
   text-align: center;
-  background: linear-gradient(135deg, #E63946 0%, #F4A261 25%, #F4E76E 50%, #52B788 75%, #5E60CE 100%);
+  background: linear-gradient(
+    135deg,
+    #e63946 0%,
+    #f4a261 25%,
+    #f4e76e 50%,
+    #52b788 75%,
+    #5e60ce 100%
+  );
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
 }
diff --git a/src/theme/dark-edge.css b/src/theme/dark-edge.css
index 778ee07..88a945d 100644
--- a/src/theme/dark-edge.css
+++ b/src/theme/dark-edge.css
@@ -1,4 +1,4 @@
-.toast-dark-edge {
+.toast__dark-edge {
   overflow: hidden;
   min-width: 200px;
   padding: 12px 22px;
diff --git a/src/theme/dark.css b/src/theme/dark.css
index 7e249ea..3bc7e8e 100644
--- a/src/theme/dark.css
+++ b/src/theme/dark.css
@@ -1,4 +1,4 @@
-.toast-dark {
+.toast__dark {
   overflow: hidden;
   min-width: 200px;
   padding: 12px 22px;
diff --git a/src/theme/failure.css b/src/theme/failure.css
index 0e415ce..4ddb2ce 100644
--- a/src/theme/failure.css
+++ b/src/theme/failure.css
@@ -1,4 +1,4 @@
-.toast-failure {
+.toast__failure {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/theme/frosted-glass.css b/src/theme/frosted-glass.css
index 19a333c..f19cd5b 100644
--- a/src/theme/frosted-glass.css
+++ b/src/theme/frosted-glass.css
@@ -1,9 +1,9 @@
-.toast-frosted-glass {
+.toast__frosted-glass {
   min-width: 200px;
   padding: 10px 20px;
   text-align: center;
 }
-body .toast-frosted-glass-wrapper {
+body .toast__frosted-glass-wrapper {
   border-radius: 2px;
   box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
   border: 1px solid rgba(255, 255, 255, 0.3);
diff --git a/src/theme/info.css b/src/theme/info.css
index 21697b1..a4458e5 100644
--- a/src/theme/info.css
+++ b/src/theme/info.css
@@ -1,4 +1,4 @@
-.toast-info {
+.toast__info {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/theme/light-edge.css b/src/theme/light-edge.css
index 1adeed3..0058b75 100644
--- a/src/theme/light-edge.css
+++ b/src/theme/light-edge.css
@@ -1,4 +1,4 @@
-.toast-light-edge {
+.toast__light-edge {
   overflow: hidden;
   min-width: 200px;
   padding: 12px 22px;
diff --git a/src/theme/light.css b/src/theme/light.css
index 6f3e2ed..e7ecac3 100644
--- a/src/theme/light.css
+++ b/src/theme/light.css
@@ -1,4 +1,4 @@
-.toast-light {
+.toast__light {
   overflow: hidden;
   min-width: 200px;
   padding: 12px 22px;
diff --git a/src/theme/moonlight.css b/src/theme/moonlight.css
index d137aa9..46eba0a 100644
--- a/src/theme/moonlight.css
+++ b/src/theme/moonlight.css
@@ -1,4 +1,4 @@
-.toast-moonlight {
+.toast__moonlight {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/theme/ocean-wave.css b/src/theme/ocean-wave.css
index 4040b3e..5472ec0 100644
--- a/src/theme/ocean-wave.css
+++ b/src/theme/ocean-wave.css
@@ -1,4 +1,4 @@
-.toast-ocean-wave {
+.toast__ocean-wave {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/theme/pink-dawn.css b/src/theme/pink-dawn.css
index aaf604d..0ad48b2 100644
--- a/src/theme/pink-dawn.css
+++ b/src/theme/pink-dawn.css
@@ -1,4 +1,4 @@
-.toast-pink-dawn {
+.toast__pink-dawn {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/theme/plain.css b/src/theme/plain.css
index 74bba59..04c4121 100644
--- a/src/theme/plain.css
+++ b/src/theme/plain.css
@@ -1,4 +1,4 @@
-.toast-plain {
+.toast__plain {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/theme/success.css b/src/theme/success.css
index 896f531..e91a41d 100644
--- a/src/theme/success.css
+++ b/src/theme/success.css
@@ -1,4 +1,4 @@
-.toast-success {
+.toast__success {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/theme/sunset.css b/src/theme/sunset.css
index 8185ae1..ca8562a 100644
--- a/src/theme/sunset.css
+++ b/src/theme/sunset.css
@@ -1,4 +1,4 @@
-.toast-sunset {
+.toast__sunset {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/theme/theme-classnames.json b/src/theme/theme-classnames.json
deleted file mode 100644
index e65eb54..0000000
--- a/src/theme/theme-classnames.json
+++ /dev/null
@@ -1 +0,0 @@
-{"toast-chroma":"_toast-chroma_1u0sn_1","toast-dark":"_toast-dark_1uck5_1","toast-blue-dusk":"_toast-blue-dusk_pnidt_1","toast-light":"_toast-light_1t8t0_1","toast-info":"_toast-info_v91zz_1","toast-pink-dawn":"_toast-pink-dawn_13jqk_1","toast-failure":"_toast-failure_1xuna_1","toast-frosted-glass":"_toast-frosted-glass_lv9sk_1","toast-frosted-glass-wrapper":"_toast-frosted-glass-wrapper_lv9sk_6","toast-plain":"_toast-plain_11plr_1","toast-success":"_toast-success_1dljs_1","toast-ocean-wave":"_toast-ocean-wave_1cgng_1","toast-warning":"_toast-warning_ohu7r_1","toast-pastel-success":"_toast-pastel-success_wcv2f_1","toast-pastel-failure":"_toast-pastel-failure_1y78w_1","toast-pastel-info":"_toast-pastel-info_1jnr3_1","toast-pastel-warning":"_toast-pastel-warning_j52d2_1","toast-galaxy":"_toast-galaxy_hey4v_1","toast-sunset":"_toast-sunset_1tanv_1","toast-moonlight":"_toast-moonlight_128j9_1","toast-dark-edge":"_toast-dark-edge_z8drx_1","toast-light-edge":"_toast-light-edge_8cluo_1"}
\ No newline at end of file
diff --git a/src/theme/warning.css b/src/theme/warning.css
index 5894b3d..d3b6345 100644
--- a/src/theme/warning.css
+++ b/src/theme/warning.css
@@ -1,4 +1,4 @@
-.toast-warning {
+.toast__warning {
   min-width: 200px;
   padding: 10px 20px;
   border-radius: 5px;
diff --git a/src/type.d.ts b/src/type.d.ts
deleted file mode 100644
index 35306c6..0000000
--- a/src/type.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module '*.css';
diff --git a/src/type/common.ts b/src/type/common.ts
index c5dd2ec..614be2b 100644
--- a/src/type/common.ts
+++ b/src/type/common.ts
@@ -19,6 +19,7 @@ export interface ToastOptions {
   theme?: Theme | string | null;
   zIndex?: number | null;
   loading?: boolean | Promise<unknown>;
+  loadingText?: ReactNode;
   onClick?: ToastClickHandler;
   onClose?: () => void;
   onCloseStart?: () => void;
diff --git a/yarn.lock b/yarn.lock
index 6868254..53b850f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2246,6 +2246,21 @@ char-regex@^1.0.2:
   resolved "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chokidar@^3.3.0:
   version "3.5.3"
   resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"
@@ -3615,6 +3630,11 @@ ignore@^5.1.1, ignore@^5.2.0:
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immutable@^4.0.0:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
+
 import-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz"
@@ -5832,6 +5852,15 @@ safe-regex-test@^1.0.0:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.56.1:
+  version "1.77.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.8.tgz#9f18b449ea401759ef7ec1752a16373e296b52bd"
+  integrity sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 saxes@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz"
@@ -5938,6 +5967,11 @@ smob@^1.0.0:
   resolved "https://registry.npmjs.org/smob/-/smob-1.4.0.tgz"
   integrity sha512-MqR3fVulhjWuRNSMydnTlweu38UhQ0HXM4buStD/S3mc/BzX3CuM9OmhyQpmtYCvoYdl5ris6TI0ZqH355Ymqg==
 
+"source-map-js@>=0.6.2 <2.0.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
+  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
+
 source-map-js@^1.0.1, source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"

From e2463f3e9f02f377627f2f17b43b9c174aee7e1a Mon Sep 17 00:00:00 2001
From: hemengke <23536175@qq.com>
Date: Sun, 25 Aug 2024 12:35:48 +0800
Subject: [PATCH 2/8] feat: replace fixed 300ms exit timeout with
 `onTransitonEnd`

---
 src/component/toast-message.tsx | 21 +++++++++++++++-----
 src/index.tsx                   | 34 ++++++++++++++++++++++++---------
 src/type/common.ts              |  4 ++++
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/src/component/toast-message.tsx b/src/component/toast-message.tsx
index 8fb4c26..1667511 100644
--- a/src/component/toast-message.tsx
+++ b/src/component/toast-message.tsx
@@ -6,7 +6,7 @@ import { classes, rgbToRgba } from '../lib/utils';
 
 interface LoadingProps {
   color?: string;
-  children?: ReactNode
+  children: ReactNode
 }
 
 function Loading({ color, children }: LoadingProps) {
@@ -18,7 +18,7 @@ function Loading({ color, children }: LoadingProps) {
         className={'toast__spinner'}
         style={{ border: `2px solid ${translucentColor}`, borderTopColor: color }}
       >
-        {children || 'loading'}
+        {children}
       </span>
     </span>
   );
@@ -31,6 +31,7 @@ export interface ToastMessageProps
   > {
   id: number;
   message: ReactNode;
+  onClose: () => void
   isExit?: boolean;
   offsetX?: string;
   offsetY?: string;
@@ -41,6 +42,11 @@ export interface ToastMessageProps
   _onEnter?: (e: ToastEnterEvent) => void;
 }
 
+const TransitionClassNames = {
+  enter: 'toast__message--enter-active',
+  exit: 'toast__message--exit-active',
+}
+
 function ToastMessage({
   id,
   message,
@@ -58,6 +64,7 @@ function ToastMessage({
   loading,
   loadingText,
   onClick,
+  onClose,
   _onEnter,
 }: ToastMessageProps): ReactElement {
   const messageDOM = useRef<HTMLDivElement>(null);
@@ -139,8 +146,8 @@ function ToastMessage({
     'toast__message',
     `toast__message--${position || 'bottom-center'}`,
     `toast__${theme}-wrapper`,
-    isEnter ? 'toast__message--enter-active' : '',
-    isExit ? 'toast__message--exit-active' : '',
+    isEnter ? TransitionClassNames.enter : '',
+    isExit ? TransitionClassNames.exit : '',
     localLoading ? 'toast__message--loading' : '',
   );
 
@@ -160,7 +167,11 @@ function ToastMessage({
   };
 
   return (
-    <div ref={messageDOM} id={id.toString()} className={messageClassNames} style={messageStyle}>
+    <div ref={messageDOM} id={id.toString()} className={messageClassNames} style={messageStyle} onTransitionEnd={() => {
+      if(messageClassNames.includes(TransitionClassNames.exit)) {
+        onClose();
+      }
+    }}>
       <div className={contentClassNames} {...(clickable && clickableProps)}>
         {localLoading && <Loading color={loadingColor}>{loadingText}</Loading>}
         {render ? render(message) : message}
diff --git a/src/index.tsx b/src/index.tsx
index 27fe54d..f71c1db 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -29,6 +29,10 @@ const init = () => {
   }
 };
 
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {}
+
 const defaultOptions: Required<ConfigArgs> = {
   duration: 3000,
   className: '',
@@ -42,6 +46,10 @@ const defaultOptions: Required<ConfigArgs> = {
   isReversedOrder: false,
   theme: null,
   zIndex: null,
+  loadingText: 'loading',
+  onClick: noop,
+  onCloseStart: noop,
+  onClose: noop,
 };
 
 const isValidPosition = (position: ToastPosition): boolean => {
@@ -71,6 +79,10 @@ export const toastConfig = (options: ConfigArgs) => {
   if (options.offsetX != null) defaultOptions.offsetX = options.offsetX;
   if (options.offsetY != null) defaultOptions.offsetY = options.offsetY;
   if (options.gap != null) defaultOptions.gap = options.gap;
+  if (options.loadingText) defaultOptions.loadingText = options.loadingText;
+  if (options.onClick) defaultOptions.onClick = options.onClick;
+  if (options.onCloseStart) defaultOptions.onCloseStart = options.onCloseStart;
+  if (options.onClose) defaultOptions.onClose = options.onClose;
 };
 
 function ToastContainer() {
@@ -141,12 +153,6 @@ function closeToast(id: number, options: Pick<ToastOptions, 'onClose' | 'onClose
   }
   options.onCloseStart?.();
   renderDOM();
-
-  setTimeout(() => {
-    toastComponentList = toastComponentList.filter((t) => t.id !== id);
-    options.onClose?.();
-    renderDOM();
-  }, 300);
 }
 
 function renderToast(
@@ -181,10 +187,11 @@ function renderToast(
     render = defaultOptions.render,
     theme = defaultOptions.theme,
     zIndex = defaultOptions.zIndex,
+    onClick = defaultOptions.onClick,
+    onClose = defaultOptions.onClose,
+    onCloseStart = defaultOptions.onCloseStart,
+    loadingText = defaultOptions.loadingText,
     loading,
-    onClick = undefined,
-    onClose = undefined,
-    onCloseStart = undefined,
   } = options || {};
   const durationTime = duration === undefined ? defaultOptions.duration : duration;
   const closeOptions = { onClose, onCloseStart };
@@ -205,6 +212,12 @@ function renderToast(
     onClick?.(e);
   };
 
+  const handleClose = () => {
+    toastComponentList = toastComponentList.filter((t) => t.id !== id);
+    onClose?.();
+    renderDOM();
+  }
+
   const startCloseTimer = (duration = durationTime, callback?: () => void) => {
     if (duration === null || duration === 0 || duration > SET_TIMEOUT_MAX) return;
     if (closeTimer) {
@@ -240,7 +253,9 @@ function renderToast(
         theme={theme}
         zIndex={zIndex || undefined}
         loading={loading}
+        loadingText={loadingText}
         onClick={handleClick}
+        onClose={handleClose}
       />
     ),
   };
@@ -295,6 +310,7 @@ function renderToast(
             theme={finalTheme}
             loading={finalLoading}
             onClick={handleClick}
+            onClose={handleClose}
           />
         );
       }
diff --git a/src/type/common.ts b/src/type/common.ts
index 614be2b..615fe3d 100644
--- a/src/type/common.ts
+++ b/src/type/common.ts
@@ -38,6 +38,10 @@ export type ConfigArgs = Pick<
   | 'theme'
   | 'zIndex'
   | 'isReversedOrder'
+  | 'onClick'
+  | 'onCloseStart'
+  | 'onClose'
+  | 'loadingText'
 > & {
   offsetX?: number;
   offsetY?: number;

From 0db6acb8419e0bdc7e2468478ab8a23d7c128178 Mon Sep 17 00:00:00 2001
From: hemengke <23536175@qq.com>
Date: Sun, 25 Aug 2024 12:52:25 +0800
Subject: [PATCH 3/8] wip: tests

---
 __tests__/create-toast.test.tsx | 4 ++--
 __tests__/toast.test.tsx        | 9 ++++-----
 src/component/toast-message.tsx | 4 ++--
 src/index.tsx                   | 2 +-
 4 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/__tests__/create-toast.test.tsx b/__tests__/create-toast.test.tsx
index 0debffd..b0841a8 100644
--- a/__tests__/create-toast.test.tsx
+++ b/__tests__/create-toast.test.tsx
@@ -57,14 +57,14 @@ describe('createToast', () => {
     await act(() => myToast(TOAST_TEXT));
 
     const toastElement = screen.getByText(TOAST_TEXT);
-    expect(toastElement.parentElement).toHaveClass(POSITION);
+    expect(toastElement.parentElement).toHaveClass(`toast__message--${POSITION}`);
 
     const TOAST_TEXT_2 = generateMessage();
     const POSITION_2 = ToastPosition.BOTTOM_RIGHT;
     await act(() => myToast(TOAST_TEXT_2, { position: POSITION_2 }));
 
     const overridenPositionToastElement = screen.getByText(TOAST_TEXT_2);
-    expect(overridenPositionToastElement.parentElement).toHaveClass(POSITION_2);
+    expect(overridenPositionToastElement.parentElement).toHaveClass(`toast__message--${POSITION_2}`);
   });
 
   it('allows creating custom toast instances with specified clickClosable and overriding clickClosable', async () => {
diff --git a/__tests__/toast.test.tsx b/__tests__/toast.test.tsx
index 7f59a98..16dad7e 100644
--- a/__tests__/toast.test.tsx
+++ b/__tests__/toast.test.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { act, render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
-import themeModuleClassNames from '../src/theme/theme-classnames.json';
 import toast, { toast as toastNamed } from '../src';
 import { generateMessage } from '../src/lib/utils';
 
-const EXIT_ANIMATION_DURATION = 320;
+const EXIT_ANIMATION_DURATION = 300;
 
 describe('toast', () => {
   it('renders a toast when the show button is clicked', async () => {
@@ -161,7 +160,7 @@ describe('toast', () => {
     await act(() => toast(TOAST_TEXT, { theme: 'light' }));
     const toastElement = screen.getByText(TOAST_TEXT);
 
-    expect(toastElement).toHaveClass(themeModuleClassNames['toast-light']);
+    expect(toastElement).toHaveClass('toast__light');
   });
 
   it('applies the specified zIndex to the toast', async () => {
@@ -198,7 +197,7 @@ describe('toast', () => {
 
   it('applies theme class to toast when theme is specified and does not apply it when theme is not specified', async () => {
     const TOAST_TEXT = generateMessage();
-    const toastContentClassName = 'toast-theme-content';
+    const toastContentClassName = ' toast__content toast__theme-content';
     await act(() => toast(TOAST_TEXT, { theme: 'dark' }));
 
     const toastDOM = screen.getByText(TOAST_TEXT);
@@ -261,7 +260,7 @@ describe('toast', () => {
   it('should retain the theme when updating the toast with an options object', async () => {
     const TOAST_TEXT = generateMessage();
     const UPDATED_TEXT = generateMessage();
-    const toastContentClassName = 'toast-theme-content';
+    const toastContentClassName = 'toast__theme-content';
 
     const toastInstance = await act(() => toast(TOAST_TEXT, { theme: 'dark' }));
 
diff --git a/src/component/toast-message.tsx b/src/component/toast-message.tsx
index 1667511..c9882ff 100644
--- a/src/component/toast-message.tsx
+++ b/src/component/toast-message.tsx
@@ -154,8 +154,8 @@ function ToastMessage({
   const contentClassNames = classes(
     'toast__content',
     clickable ? 'toast__content--clickable' : '',
-    !render ? `toast__${theme}` : '',
-    !render && theme ? 'toast__theme-content' : '',
+    !render && theme ? `toast__${theme}` : '',
+    !render ? 'toast__theme-content' : '',
     theme || '',
     className,
   );
diff --git a/src/index.tsx b/src/index.tsx
index f71c1db..aafa76f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -214,8 +214,8 @@ function renderToast(
 
   const handleClose = () => {
     toastComponentList = toastComponentList.filter((t) => t.id !== id);
-    onClose?.();
     renderDOM();
+    onClose?.();
   }
 
   const startCloseTimer = (duration = durationTime, callback?: () => void) => {

From 9d82b4bdc384b7e7963d240ca802c9fcc013a5a7 Mon Sep 17 00:00:00 2001
From: cmlee <bal.dongdongdong@gmail.com>
Date: Mon, 26 Aug 2024 21:16:02 +0900
Subject: [PATCH 4/8] :art: Fix indent

---
 example/src/page/example/example.tsx |  12 +-
 example/src/page/theme/theme.tsx     |  10 +-
 yarn.lock                            | 609 +--------------------------
 3 files changed, 20 insertions(+), 611 deletions(-)

diff --git a/example/src/page/example/example.tsx b/example/src/page/example/example.tsx
index 0fb92b1..5ef3525 100644
--- a/example/src/page/example/example.tsx
+++ b/example/src/page/example/example.tsx
@@ -85,7 +85,7 @@ toast('Hello, World!', { duration: 1000 })`}</CommonHighlighter>
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 import 'react-simple-toasts/dist/theme/light.css';
 
@@ -144,7 +144,7 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 import 'my-style.css';
 
 export default function App() {
@@ -369,7 +369,7 @@ toast('Synchronizing...', { loading: taskPromise });`}</CommonHighlighter>
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/info.css';
 import 'react-simple-toasts/dist/theme/success.css';
 
@@ -418,7 +418,7 @@ taskPromise.then(() =>
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast, { Toast } from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 
 export default function App() {
   const handleShowClick = () => {
@@ -458,7 +458,7 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast, { Toast } from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 
 export default function App() {
   const [infiniteToast, setInfiniteToast] = useState<Toast | null>(null);
@@ -525,7 +525,7 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 
 export default function App() {
   const handleClick = () => {
diff --git a/example/src/page/theme/theme.tsx b/example/src/page/theme/theme.tsx
index 8b7a8e3..4c6e42d 100644
--- a/example/src/page/theme/theme.tsx
+++ b/example/src/page/theme/theme.tsx
@@ -89,7 +89,7 @@ export default function App() {
 
         <div className={styles.code}>
           <CommonHighlighter>{`import toast, { Themes } from 'react-simple-toasts';
-          import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css'; // Import the 'dark' theme CSS
 
 export default function App() {
@@ -121,7 +121,7 @@ export default function App() {
           <p>You can directly specify a theme when calling the toast function.</p>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 
 export default function App() {
@@ -147,7 +147,7 @@ toastConfig({
             <br />
             <br />
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 
 export default function App() {
   return (
@@ -167,7 +167,7 @@ export default function App() {
           </p>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 
 const darkToast = createToast({ theme: 'dark' });
@@ -211,7 +211,7 @@ export default function App() {
           </div>
           <div className={styles.code}>
             <CommonHighlighter>{`import toast from 'react-simple-toasts';
-            import 'react-simple-toasts/dist/style.css';
+import 'react-simple-toasts/dist/style.css';
 import './my-style.css';
 
 export default function App() {
diff --git a/yarn.lock b/yarn.lock
index 53b850f..34b138b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1604,21 +1604,6 @@
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz"
   integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
 
-"@types/fs-extra@^8.0.1":
-  version "8.1.2"
-  resolved "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.2.tgz"
-  integrity sha512-SvSrYXfWSc7R4eqnOzbQF4TZmfpNSM9FrSWLU3EUnWBuyZqNBOrv1B1JA3byUDPUl9z4Ab3jeZG2eDdySlgNMg==
-  dependencies:
-    "@types/node" "*"
-
-"@types/glob@^7.1.1":
-  version "7.2.0"
-  resolved "https://registry.npmjs.org/@types/glob/-/glob-7.2.0.tgz"
-  integrity sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==
-  dependencies:
-    "@types/minimatch" "*"
-    "@types/node" "*"
-
 "@types/graceful-fs@^4.1.3":
   version "4.1.6"
   resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz"
@@ -1672,11 +1657,6 @@
   resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.12.tgz"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
 
-"@types/minimatch@*":
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz"
-  integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
-
 "@types/node@*":
   version "18.16.2"
   resolved "https://registry.npmjs.org/@types/node/-/node-18.16.2.tgz"
@@ -2334,11 +2314,6 @@ colord@^2.9.1:
   resolved "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz"
   integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
 
-colorette@^1.1.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz"
-  integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
-
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
@@ -2366,13 +2341,6 @@ concat-map@0.0.1:
   resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-concat-with-sourcemaps@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz"
-  integrity sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==
-  dependencies:
-    source-map "^0.6.1"
-
 concurrently@^8.2.0:
   version "8.2.0"
   resolved "https://registry.npmjs.org/concurrently/-/concurrently-8.2.0.tgz"
@@ -2437,17 +2405,6 @@ css-declaration-sorter@^6.3.1:
   resolved "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz"
   integrity sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==
 
-css-select@^4.1.3:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz"
-  integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
-  dependencies:
-    boolbase "^1.0.0"
-    css-what "^6.0.1"
-    domhandler "^4.3.1"
-    domutils "^2.8.0"
-    nth-check "^2.0.1"
-
 css-select@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz"
@@ -2459,14 +2416,6 @@ css-select@^5.1.0:
     domutils "^3.0.1"
     nth-check "^2.0.1"
 
-css-tree@^1.1.2, css-tree@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz"
-  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
-  dependencies:
-    mdn-data "2.0.14"
-    source-map "^0.6.1"
-
 css-tree@^2.2.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz"
@@ -2483,7 +2432,7 @@ css-tree@~2.2.0:
     mdn-data "2.0.28"
     source-map-js "^1.0.1"
 
-css-what@^6.0.1, css-what@^6.1.0:
+css-what@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
@@ -2498,41 +2447,6 @@ cssesc@^3.0.0:
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssnano-preset-default@^5.2.14:
-  version "5.2.14"
-  resolved "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.2.14.tgz"
-  integrity sha512-t0SFesj/ZV2OTylqQVOrFgEh5uanxbO6ZAdeCrNsUQ6fVuXwYTxJPNAGvGTxHbD68ldIJNec7PyYZDBrfDQ+6A==
-  dependencies:
-    css-declaration-sorter "^6.3.1"
-    cssnano-utils "^3.1.0"
-    postcss-calc "^8.2.3"
-    postcss-colormin "^5.3.1"
-    postcss-convert-values "^5.1.3"
-    postcss-discard-comments "^5.1.2"
-    postcss-discard-duplicates "^5.1.0"
-    postcss-discard-empty "^5.1.1"
-    postcss-discard-overridden "^5.1.0"
-    postcss-merge-longhand "^5.1.7"
-    postcss-merge-rules "^5.1.4"
-    postcss-minify-font-values "^5.1.0"
-    postcss-minify-gradients "^5.1.1"
-    postcss-minify-params "^5.1.4"
-    postcss-minify-selectors "^5.2.1"
-    postcss-normalize-charset "^5.1.0"
-    postcss-normalize-display-values "^5.1.0"
-    postcss-normalize-positions "^5.1.1"
-    postcss-normalize-repeat-style "^5.1.1"
-    postcss-normalize-string "^5.1.0"
-    postcss-normalize-timing-functions "^5.1.0"
-    postcss-normalize-unicode "^5.1.1"
-    postcss-normalize-url "^5.1.0"
-    postcss-normalize-whitespace "^5.1.1"
-    postcss-ordered-values "^5.1.3"
-    postcss-reduce-initial "^5.1.2"
-    postcss-reduce-transforms "^5.1.0"
-    postcss-svgo "^5.1.0"
-    postcss-unique-selectors "^5.1.1"
-
 cssnano-preset-default@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.0.1.tgz"
@@ -2568,25 +2482,11 @@ cssnano-preset-default@^6.0.1:
     postcss-svgo "^6.0.0"
     postcss-unique-selectors "^6.0.0"
 
-cssnano-utils@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz"
-  integrity sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==
-
 cssnano-utils@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.0.tgz"
   integrity sha512-Z39TLP+1E0KUcd7LGyF4qMfu8ZufI0rDzhdyAMsa/8UyNUU8wpS0fhdBxbQbv32r64ea00h4878gommRVg2BHw==
 
-cssnano@^5.0.1:
-  version "5.1.15"
-  resolved "https://registry.npmjs.org/cssnano/-/cssnano-5.1.15.tgz"
-  integrity sha512-j+BKgDcLDQA+eDifLx0EO4XSA56b7uut3BQFH+wbSaSTuGLuiyTa/wbRYthUXX8LC9mLg+WWKe8h+qJuwTAbHw==
-  dependencies:
-    cssnano-preset-default "^5.2.14"
-    lilconfig "^2.0.3"
-    yaml "^1.10.2"
-
 cssnano@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/cssnano/-/cssnano-6.0.1.tgz"
@@ -2595,13 +2495,6 @@ cssnano@^6.0.1:
     cssnano-preset-default "^6.0.1"
     lilconfig "^2.1.0"
 
-csso@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz"
-  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
-  dependencies:
-    css-tree "^1.1.2"
-
 csso@^5.0.5:
   version "5.0.5"
   resolved "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz"
@@ -2752,15 +2645,6 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
   resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
-dom-serializer@^1.0.1:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz"
-  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
-  dependencies:
-    domelementtype "^2.0.1"
-    domhandler "^4.2.0"
-    entities "^2.0.0"
-
 dom-serializer@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz"
@@ -2770,7 +2654,7 @@ dom-serializer@^2.0.0:
     domhandler "^5.0.2"
     entities "^4.2.0"
 
-domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
+domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
@@ -2782,13 +2666,6 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
-domhandler@^4.2.0, domhandler@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz"
-  integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
-  dependencies:
-    domelementtype "^2.2.0"
-
 domhandler@^5.0.2, domhandler@^5.0.3:
   version "5.0.3"
   resolved "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz"
@@ -2796,15 +2673,6 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
-domutils@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz"
-  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
-  dependencies:
-    dom-serializer "^1.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
-
 domutils@^3.0.1:
   version "3.1.0"
   resolved "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz"
@@ -2834,11 +2702,6 @@ emoji-regex@^8.0.0:
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-entities@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz"
-  integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
-
 entities@^4.2.0, entities@^4.4.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
@@ -3093,11 +2956,6 @@ estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
-estree-walker@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz"
-  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
-
 estree-walker@^2.0.1, estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
@@ -3108,11 +2966,6 @@ esutils@^2.0.2:
   resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-eventemitter3@^4.0.4:
-  version "4.0.7"
-  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz"
-  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
-
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz"
@@ -3149,7 +3002,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-glob@^3.0.3, fast-glob@^3.2.11, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz"
   integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@@ -3328,13 +3181,6 @@ functions-have-names@^1.2.2, functions-have-names@^1.2.3:
   resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
-generic-names@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/generic-names/-/generic-names-4.0.0.tgz"
-  integrity sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==
-  dependencies:
-    loader-utils "^3.2.0"
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
@@ -3446,20 +3292,6 @@ globalthis@^1.0.3:
   dependencies:
     define-properties "^1.1.3"
 
-globby@10.0.1:
-  version "10.0.1"
-  resolved "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz"
-  integrity sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    array-union "^2.1.0"
-    dir-glob "^3.0.1"
-    fast-glob "^3.0.3"
-    glob "^7.1.3"
-    ignore "^5.1.1"
-    merge2 "^1.2.3"
-    slash "^3.0.0"
-
 globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
@@ -3608,16 +3440,6 @@ iconv-lite@0.6.3:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
-icss-replace-symbols@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz"
-  integrity sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==
-
-icss-utils@^5.0.0, icss-utils@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz"
-  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
-
 identity-obj-proxy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz"
@@ -3625,7 +3447,7 @@ identity-obj-proxy@^3.0.0:
   dependencies:
     harmony-reflect "^1.4.6"
 
-ignore@^5.1.1, ignore@^5.2.0:
+ignore@^5.2.0:
   version "5.2.4"
   resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
@@ -3635,13 +3457,6 @@ immutable@^4.0.0:
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
   integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
 
-import-cwd@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz"
-  integrity sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==
-  dependencies:
-    import-from "^3.0.0"
-
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
@@ -3650,13 +3465,6 @@ import-fresh@^3.0.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/import-from/-/import-from-3.0.0.tgz"
-  integrity sha512-CiuXOFFSzkU5x/CR0+z7T91Iht4CXgfCxVOFRhh2Zyhg5wOpWvvDLQUsWl+gcN+QscYBjez8hDCt85O7RLDttQ==
-  dependencies:
-    resolve-from "^5.0.0"
-
 import-local@^3.0.2:
   version "3.1.0"
   resolved "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz"
@@ -3828,11 +3636,6 @@ is-path-inside@^3.0.3:
   resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
-is-plain-object@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz"
-  integrity sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==
-
 is-potential-custom-element-name@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz"
@@ -4474,7 +4277,7 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-lilconfig@^2.0.3, lilconfig@^2.0.5, lilconfig@^2.1.0:
+lilconfig@^2.0.5, lilconfig@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
@@ -4484,11 +4287,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
-loader-utils@^3.2.0:
-  version "3.2.1"
-  resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz"
-  integrity sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==
-
 locate-path@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz"
@@ -4503,11 +4301,6 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash.camelcase@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz"
-  integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
-
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz"
@@ -4580,11 +4373,6 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
-mdn-data@2.0.14:
-  version "2.0.14"
-  resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz"
-  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
-
 mdn-data@2.0.28:
   version "2.0.28"
   resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz"
@@ -4600,7 +4388,7 @@ merge-stream@^2.0.0:
   resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.2.3, merge2@^1.3.0, merge2@^1.4.1:
+merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
@@ -4694,11 +4482,6 @@ normalize-range@^0.1.2:
   resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
-normalize-url@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz"
-  integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
-
 npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz"
@@ -4824,11 +4607,6 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
-p-finally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz"
-  integrity sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==
-
 p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz"
@@ -4857,21 +4635,6 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
-p-queue@^6.6.2:
-  version "6.6.2"
-  resolved "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz"
-  integrity sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==
-  dependencies:
-    eventemitter3 "^4.0.4"
-    p-timeout "^3.2.0"
-
-p-timeout@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz"
-  integrity sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==
-  dependencies:
-    p-finally "^1.0.0"
-
 p-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz"
@@ -4946,11 +4709,6 @@ pify@^2.0.0, pify@^2.3.0:
   resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
-pify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/pify/-/pify-5.0.0.tgz"
-  integrity sha512-eW/gHNMlxdSP6dmG6uJip6FXN0EQBwm2clYYd8Wul42Cwu/DK8HEftzsapcNdYe2MfLiIwZqsDk2RDEsTE79hA==
-
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz"
@@ -4975,14 +4733,6 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-postcss-calc@^8.2.3:
-  version "8.2.4"
-  resolved "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz"
-  integrity sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==
-  dependencies:
-    postcss-selector-parser "^6.0.9"
-    postcss-value-parser "^4.2.0"
-
 postcss-calc@^9.0.0:
   version "9.0.1"
   resolved "https://registry.npmjs.org/postcss-calc/-/postcss-calc-9.0.1.tgz"
@@ -5009,16 +4759,6 @@ postcss-cli@^10.1.0:
     slash "^5.0.0"
     yargs "^17.0.0"
 
-postcss-colormin@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.3.1.tgz"
-  integrity sha512-UsWQG0AqTFQmpBegeLLc1+c3jIqBNB0zlDGRWR+dQ3pRKJL1oeMzyqmH3o2PIfn9MBdNrVPWhDbT769LxCTLJQ==
-  dependencies:
-    browserslist "^4.21.4"
-    caniuse-api "^3.0.0"
-    colord "^2.9.1"
-    postcss-value-parser "^4.2.0"
-
 postcss-colormin@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.0.0.tgz"
@@ -5029,14 +4769,6 @@ postcss-colormin@^6.0.0:
     colord "^2.9.1"
     postcss-value-parser "^4.2.0"
 
-postcss-convert-values@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.1.3.tgz"
-  integrity sha512-82pC1xkJZtcJEfiLw6UXnXVXScgtBrjlO5CBmuDQc+dlb88ZYheFsjTn40+zBVi3DkfF7iezO0nJUPLcJK3pvA==
-  dependencies:
-    browserslist "^4.21.4"
-    postcss-value-parser "^4.2.0"
-
 postcss-convert-values@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.0.0.tgz"
@@ -5045,54 +4777,26 @@ postcss-convert-values@^6.0.0:
     browserslist "^4.21.4"
     postcss-value-parser "^4.2.0"
 
-postcss-discard-comments@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz"
-  integrity sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==
-
 postcss-discard-comments@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.0.tgz"
   integrity sha512-p2skSGqzPMZkEQvJsgnkBhCn8gI7NzRH2683EEjrIkoMiwRELx68yoUJ3q3DGSGuQ8Ug9Gsn+OuDr46yfO+eFw==
 
-postcss-discard-duplicates@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz"
-  integrity sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==
-
 postcss-discard-duplicates@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.0.tgz"
   integrity sha512-bU1SXIizMLtDW4oSsi5C/xHKbhLlhek/0/yCnoMQany9k3nPBq+Ctsv/9oMmyqbR96HYHxZcHyK2HR5P/mqoGA==
 
-postcss-discard-empty@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz"
-  integrity sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==
-
 postcss-discard-empty@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.0.tgz"
   integrity sha512-b+h1S1VT6dNhpcg+LpyiUrdnEZfICF0my7HAKgJixJLW7BnNmpRH34+uw/etf5AhOlIhIAuXApSzzDzMI9K/gQ==
 
-postcss-discard-overridden@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz"
-  integrity sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==
-
 postcss-discard-overridden@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.0.tgz"
   integrity sha512-4VELwssYXDFigPYAZ8vL4yX4mUepF/oCBeeIT4OXsJPYOtvJumyz9WflmJWTfDwCUcpDR+z0zvCWBXgTx35SVw==
 
-postcss-load-config@^3.0.0:
-  version "3.1.4"
-  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz"
-  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
-  dependencies:
-    lilconfig "^2.0.5"
-    yaml "^1.10.2"
-
 postcss-load-config@^4.0.0:
   version "4.0.1"
   resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz"
@@ -5101,14 +4805,6 @@ postcss-load-config@^4.0.0:
     lilconfig "^2.0.5"
     yaml "^2.1.1"
 
-postcss-merge-longhand@^5.1.7:
-  version "5.1.7"
-  resolved "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz"
-  integrity sha512-YCI9gZB+PLNskrK0BB3/2OzPnGhPkBEwmwhfYk1ilBHYVAZB7/tkTHFBAnCrvBBOmeYyMYw3DMjT55SyxMBzjQ==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-    stylehacks "^5.1.1"
-
 postcss-merge-longhand@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.0.tgz"
@@ -5117,16 +4813,6 @@ postcss-merge-longhand@^6.0.0:
     postcss-value-parser "^4.2.0"
     stylehacks "^6.0.0"
 
-postcss-merge-rules@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.1.4.tgz"
-  integrity sha512-0R2IuYpgU93y9lhVbO/OylTtKMVcHb67zjWIfCiKR9rWL3GUk1677LAqD/BcHizukdZEjT8Ru3oHRoAYoJy44g==
-  dependencies:
-    browserslist "^4.21.4"
-    caniuse-api "^3.0.0"
-    cssnano-utils "^3.1.0"
-    postcss-selector-parser "^6.0.5"
-
 postcss-merge-rules@^6.0.1:
   version "6.0.1"
   resolved "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.0.1.tgz"
@@ -5137,13 +4823,6 @@ postcss-merge-rules@^6.0.1:
     cssnano-utils "^4.0.0"
     postcss-selector-parser "^6.0.5"
 
-postcss-minify-font-values@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-5.1.0.tgz"
-  integrity sha512-el3mYTgx13ZAPPirSVsHqFzl+BBBDrXvbySvPGFnQcTI4iNslrPaFq4muTkLZmKlGk4gyFAYUBMH30+HurREyA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-minify-font-values@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.0.0.tgz"
@@ -5151,15 +4830,6 @@ postcss-minify-font-values@^6.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-minify-gradients@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.1.1.tgz"
-  integrity sha512-VGvXMTpCEo4qHTNSa9A0a3D+dxGFZCYwR6Jokk+/3oB6flu2/PnPXAh2x7x52EkY5xlIHLm+Le8tJxe/7TNhzw==
-  dependencies:
-    colord "^2.9.1"
-    cssnano-utils "^3.1.0"
-    postcss-value-parser "^4.2.0"
-
 postcss-minify-gradients@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.0.tgz"
@@ -5169,15 +4839,6 @@ postcss-minify-gradients@^6.0.0:
     cssnano-utils "^4.0.0"
     postcss-value-parser "^4.2.0"
 
-postcss-minify-params@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.1.4.tgz"
-  integrity sha512-+mePA3MgdmVmv6g+30rn57USjOGSAyuxUmkfiWpzalZ8aiBkdPYjXWtHuwJGm1v5Ojy0Z0LaSYhHaLJQB0P8Jw==
-  dependencies:
-    browserslist "^4.21.4"
-    cssnano-utils "^3.1.0"
-    postcss-value-parser "^4.2.0"
-
 postcss-minify-params@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.0.0.tgz"
@@ -5187,13 +4848,6 @@ postcss-minify-params@^6.0.0:
     cssnano-utils "^4.0.0"
     postcss-value-parser "^4.2.0"
 
-postcss-minify-selectors@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-5.2.1.tgz"
-  integrity sha512-nPJu7OjZJTsVUmPdm2TcaiohIwxP+v8ha9NehQ2ye9szv4orirRU3SDdtUmKH+10nzn0bAyOXZ0UEr7OpvLehg==
-  dependencies:
-    postcss-selector-parser "^6.0.5"
-
 postcss-minify-selectors@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.0.tgz"
@@ -5201,79 +4855,11 @@ postcss-minify-selectors@^6.0.0:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-modules-extract-imports@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz"
-  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
-
-postcss-modules-local-by-default@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz"
-  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
-  dependencies:
-    icss-utils "^5.0.0"
-    postcss-selector-parser "^6.0.2"
-    postcss-value-parser "^4.1.0"
-
-postcss-modules-scope@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz"
-  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
-  dependencies:
-    postcss-selector-parser "^6.0.4"
-
-postcss-modules-values@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz"
-  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
-  dependencies:
-    icss-utils "^5.0.0"
-
-postcss-modules@^4.0.0:
-  version "4.3.1"
-  resolved "https://registry.npmjs.org/postcss-modules/-/postcss-modules-4.3.1.tgz"
-  integrity sha512-ItUhSUxBBdNamkT3KzIZwYNNRFKmkJrofvC2nWab3CPKhYBQ1f27XXh1PAPE27Psx58jeelPsxWB/+og+KEH0Q==
-  dependencies:
-    generic-names "^4.0.0"
-    icss-replace-symbols "^1.1.0"
-    lodash.camelcase "^4.3.0"
-    postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.0"
-    postcss-modules-scope "^3.0.0"
-    postcss-modules-values "^4.0.0"
-    string-hash "^1.1.1"
-
-postcss-modules@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.npmjs.org/postcss-modules/-/postcss-modules-6.0.0.tgz"
-  integrity sha512-7DGfnlyi/ju82BRzTIjWS5C4Tafmzl3R79YP/PASiocj+aa6yYphHhhKUOEoXQToId5rgyFgJ88+ccOUydjBXQ==
-  dependencies:
-    generic-names "^4.0.0"
-    icss-utils "^5.1.0"
-    lodash.camelcase "^4.3.0"
-    postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.0"
-    postcss-modules-scope "^3.0.0"
-    postcss-modules-values "^4.0.0"
-    string-hash "^1.1.1"
-
-postcss-normalize-charset@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz"
-  integrity sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==
-
 postcss-normalize-charset@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.0.tgz"
   integrity sha512-cqundwChbu8yO/gSWkuFDmKrCZ2vJzDAocheT2JTd0sFNA4HMGoKMfbk2B+J0OmO0t5GUkiAkSM5yF2rSLUjgQ==
 
-postcss-normalize-display-values@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-5.1.0.tgz"
-  integrity sha512-WP4KIM4o2dazQXWmFaqMmcvsKmhdINFblgSeRgn8BJ6vxaMyaJkwAzpPpuvSIoG/rmX3M+IrRZEz2H0glrQNEA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-display-values@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.0.tgz"
@@ -5281,13 +4867,6 @@ postcss-normalize-display-values@^6.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-positions@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-5.1.1.tgz"
-  integrity sha512-6UpCb0G4eofTCQLFVuI3EVNZzBNPiIKcA1AKVka+31fTVySphr3VUgAIULBhxZkKgwLImhzMR2Bw1ORK+37INg==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-positions@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.0.tgz"
@@ -5295,13 +4874,6 @@ postcss-normalize-positions@^6.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-repeat-style@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-5.1.1.tgz"
-  integrity sha512-mFpLspGWkQtBcWIRFLmewo8aC3ImN2i/J3v8YCFUwDnPu3Xz4rLohDO26lGjwNsQxB3YF0KKRwspGzE2JEuS0g==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-repeat-style@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.0.tgz"
@@ -5309,13 +4881,6 @@ postcss-normalize-repeat-style@^6.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-string@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-5.1.0.tgz"
-  integrity sha512-oYiIJOf4T9T1N4i+abeIc7Vgm/xPCGih4bZz5Nm0/ARVJ7K6xrDlLwvwqOydvyL3RHNf8qZk6vo3aatiw/go3w==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-string@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.0.tgz"
@@ -5323,13 +4888,6 @@ postcss-normalize-string@^6.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-timing-functions@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-5.1.0.tgz"
-  integrity sha512-DOEkzJ4SAXv5xkHl0Wa9cZLF3WCBhF3o1SKVxKQAa+0pYKlueTpCgvkFAHfk+Y64ezX9+nITGrDZeVGgITJXjg==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-timing-functions@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.0.tgz"
@@ -5337,14 +4895,6 @@ postcss-normalize-timing-functions@^6.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-unicode@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-5.1.1.tgz"
-  integrity sha512-qnCL5jzkNUmKVhZoENp1mJiGNPcsJCs1aaRmURmeJGES23Z/ajaln+EPTD+rBeNkSryI+2WTdW+lwcVdOikrpA==
-  dependencies:
-    browserslist "^4.21.4"
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-unicode@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.0.0.tgz"
@@ -5353,14 +4903,6 @@ postcss-normalize-unicode@^6.0.0:
     browserslist "^4.21.4"
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-url@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.1.0.tgz"
-  integrity sha512-5upGeDO+PVthOxSmds43ZeMeZfKH+/DKgGRD7TElkkyS46JXAUhMzIKiCa7BabPeIy3AQcTkXwVVN7DbqsiCew==
-  dependencies:
-    normalize-url "^6.0.1"
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-url@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.0.tgz"
@@ -5368,13 +4910,6 @@ postcss-normalize-url@^6.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-whitespace@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-5.1.1.tgz"
-  integrity sha512-83ZJ4t3NUDETIHTa3uEg6asWjSBYL5EdkVB0sDncx9ERzOKBVJIUeDO9RyA9Zwtig8El1d79HBp0JEi8wvGQnA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-whitespace@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.0.tgz"
@@ -5382,14 +4917,6 @@ postcss-normalize-whitespace@^6.0.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-ordered-values@^5.1.3:
-  version "5.1.3"
-  resolved "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-5.1.3.tgz"
-  integrity sha512-9UO79VUhPwEkzbb3RNpqqghc6lcYej1aveQteWY+4POIwlqkYE21HKWaLDF6lWNuqCobEAyTovVhtI32Rbv2RQ==
-  dependencies:
-    cssnano-utils "^3.1.0"
-    postcss-value-parser "^4.2.0"
-
 postcss-ordered-values@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.0.tgz"
@@ -5398,14 +4925,6 @@ postcss-ordered-values@^6.0.0:
     cssnano-utils "^4.0.0"
     postcss-value-parser "^4.2.0"
 
-postcss-reduce-initial@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz"
-  integrity sha512-dE/y2XRaqAi6OvjzD22pjTUQ8eOfc6m/natGHgKFBK9DxFmIm69YmaRVQrGgFlEfc1HePIurY0TmDeROK05rIg==
-  dependencies:
-    browserslist "^4.21.4"
-    caniuse-api "^3.0.0"
-
 postcss-reduce-initial@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.0.0.tgz"
@@ -5414,13 +4933,6 @@ postcss-reduce-initial@^6.0.0:
     browserslist "^4.21.4"
     caniuse-api "^3.0.0"
 
-postcss-reduce-transforms@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-5.1.0.tgz"
-  integrity sha512-2fbdbmgir5AvpW9RLtdONx1QoYG2/EtqpNQbFASDlixBbAYuTcJ0dECwlqNqH7VbaUnEnh8SrxOe2sRIn24XyQ==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-reduce-transforms@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.0.tgz"
@@ -5444,7 +4956,7 @@ postcss-selector-parser@^6.0.11:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.9:
+postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5:
   version "6.0.11"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz"
   integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
@@ -5452,14 +4964,6 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-svgo@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz"
-  integrity sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-    svgo "^2.7.0"
-
 postcss-svgo@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.0.tgz"
@@ -5468,13 +4972,6 @@ postcss-svgo@^6.0.0:
     postcss-value-parser "^4.2.0"
     svgo "^3.0.2"
 
-postcss-unique-selectors@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.1.1.tgz"
-  integrity sha512-5JiODlELrz8L2HwxfPnhOWZYWDxVHWL83ufOv84NrcgipI7TaeRsatAhK4Tr2/ZiYldpK/wBvw5BD3qfaK96GA==
-  dependencies:
-    postcss-selector-parser "^6.0.5"
-
 postcss-unique-selectors@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.0.tgz"
@@ -5482,7 +4979,7 @@ postcss-unique-selectors@^6.0.0:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -5534,11 +5031,6 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz"
   integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
 
-promise.series@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz"
-  integrity sha512-VWQJyU2bcDTgZw8kpfBpB/ejZASlCrzwz5f2hjb/zlujOEB4oeiAhHygAWq8ubsX2GVkD4kCU5V2dwOTaCY5EQ==
-
 prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz"
@@ -5724,7 +5216,7 @@ resolve.exports@^2.0.0:
   resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.2.tgz"
   integrity sha512-X2UW6Nw3n/aMgDVy+0rSqgHlv39WZAlZrXCdnbyEiKm17DSqHX4MmQMaST3FbeWR5FTuRcUwYAziZajji0Y7mg==
 
-resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.1:
+resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.1:
   version "1.22.2"
   resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz"
   integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==
@@ -5754,41 +5246,11 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup-plugin-copy@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-copy/-/rollup-plugin-copy-3.4.0.tgz"
-  integrity sha512-rGUmYYsYsceRJRqLVlE9FivJMxJ7X6jDlP79fmFkL8sJs7VVMSVyA2yfyL+PGyO/vJs4A87hwhgVfz61njI+uQ==
-  dependencies:
-    "@types/fs-extra" "^8.0.1"
-    colorette "^1.1.0"
-    fs-extra "^8.1.0"
-    globby "10.0.1"
-    is-plain-object "^3.0.0"
-
 rollup-plugin-peer-deps-external@^2.2.4:
   version "2.2.4"
   resolved "https://registry.npmjs.org/rollup-plugin-peer-deps-external/-/rollup-plugin-peer-deps-external-2.2.4.tgz"
   integrity sha512-AWdukIM1+k5JDdAqV/Cxd+nejvno2FVLVeZ74NKggm3Q5s9cbbcOgUPGdbxPi4BXu7xGaZ8HG12F+thImYu/0g==
 
-rollup-plugin-postcss@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-4.0.2.tgz"
-  integrity sha512-05EaY6zvZdmvPUDi3uCcAQoESDcYnv8ogJJQRp6V5kZ6J6P7uAVJlrTZcaaA20wTH527YTnKfkAoPxWI/jPp4w==
-  dependencies:
-    chalk "^4.1.0"
-    concat-with-sourcemaps "^1.1.0"
-    cssnano "^5.0.1"
-    import-cwd "^3.0.0"
-    p-queue "^6.6.2"
-    pify "^5.0.0"
-    postcss-load-config "^3.0.0"
-    postcss-modules "^4.0.0"
-    promise.series "^0.2.0"
-    resolve "^1.19.0"
-    rollup-pluginutils "^2.8.2"
-    safe-identifier "^0.4.2"
-    style-inject "^0.3.0"
-
 rollup-plugin-typescript2@^0.34.1:
   version "0.34.1"
   resolved "https://registry.npmjs.org/rollup-plugin-typescript2/-/rollup-plugin-typescript2-0.34.1.tgz"
@@ -5800,13 +5262,6 @@ rollup-plugin-typescript2@^0.34.1:
     semver "^7.3.7"
     tslib "^2.4.0"
 
-rollup-pluginutils@^2.8.2:
-  version "2.8.2"
-  resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz"
-  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
-  dependencies:
-    estree-walker "^0.6.1"
-
 rollup@^3.10.0:
   version "3.21.0"
   resolved "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz"
@@ -5833,11 +5288,6 @@ safe-buffer@^5.1.0:
   resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-identifier@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.npmjs.org/safe-identifier/-/safe-identifier-0.4.2.tgz"
-  integrity sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==
-
 safe-regex-test@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz"
@@ -6008,11 +5458,6 @@ sprintf-js@~1.0.2:
   resolved "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz"
   integrity sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==
 
-stable@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz"
-  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
-
 stack-utils@^2.0.3:
   version "2.0.6"
   resolved "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz"
@@ -6027,11 +5472,6 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
-string-hash@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz"
-  integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
-
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz"
@@ -6126,19 +5566,6 @@ strip-outer@^1.0.1:
   dependencies:
     escape-string-regexp "^1.0.2"
 
-style-inject@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz"
-  integrity sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==
-
-stylehacks@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz"
-  integrity sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==
-  dependencies:
-    browserslist "^4.21.4"
-    postcss-selector-parser "^6.0.4"
-
 stylehacks@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-6.0.0.tgz"
@@ -6173,19 +5600,6 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-svgo@^2.7.0:
-  version "2.8.0"
-  resolved "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz"
-  integrity sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==
-  dependencies:
-    "@trysound/sax" "0.2.0"
-    commander "^7.2.0"
-    css-select "^4.1.3"
-    css-tree "^1.1.3"
-    csso "^4.2.0"
-    picocolors "^1.0.0"
-    stable "^0.1.8"
-
 svgo@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/svgo/-/svgo-3.0.2.tgz"
@@ -6566,11 +5980,6 @@ yallist@^4.0.0:
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.2:
-  version "1.10.2"
-  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
-  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
-
 yaml@^2.1.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz"

From f7be1c67b2a6546782e01372ab34329dea4fd2d8 Mon Sep 17 00:00:00 2001
From: cmlee <bal.dongdongdong@gmail.com>
Date: Mon, 26 Aug 2024 22:30:41 +0900
Subject: [PATCH 5/8] :white_check_mark: Fix tests

---
 __tests__/create-toast.test.tsx | 28 ++++++-----
 __tests__/toast.test.tsx        | 82 ++++++++++++++++++++-------------
 src/component/toast-message.tsx | 24 ++++++----
 src/index.tsx                   |  5 +-
 4 files changed, 83 insertions(+), 56 deletions(-)

diff --git a/__tests__/create-toast.test.tsx b/__tests__/create-toast.test.tsx
index b0841a8..837f75d 100644
--- a/__tests__/create-toast.test.tsx
+++ b/__tests__/create-toast.test.tsx
@@ -1,9 +1,11 @@
 import { createToast } from '../src';
 import { ToastPosition } from '../src/lib/constants';
-import { act, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { act, fireEvent, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import { generateMessage } from '../src/lib/utils';
 
-const EXIT_ANIMATION_DURATION = 310;
+const EXIT_ANIMATION_DURATION = 300;
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 describe('createToast', () => {
   it('allows creating custom toast instances with specified classNames and overriding className', async () => {
@@ -27,25 +29,27 @@ describe('createToast', () => {
 
   it('allows creating custom toast instances with specified durations and overriding duration', async () => {
     const TOAST_TEXT = generateMessage();
-    const DURATION = 1000;
+    const DURATION = 500;
     const myToast = createToast({
       duration: DURATION,
     });
     await act(() => myToast(TOAST_TEXT));
 
     const toastElement = screen.getByText(TOAST_TEXT);
-    await waitForElementToBeRemoved(toastElement, {
-      timeout: DURATION + EXIT_ANIMATION_DURATION,
-    });
+    await waitFor(() => delay(DURATION + EXIT_ANIMATION_DURATION));
+    fireEvent.transitionEnd(toastElement);
+
+    expect(toastElement).not.toBeInTheDocument();
 
     const TOAST_TEXT_2 = generateMessage();
-    const DURATION_2 = 500;
+    const DURATION_2 = 300;
     await act(() => myToast(TOAST_TEXT_2, { duration: DURATION_2 }));
 
     const toastElement2 = screen.getByText(TOAST_TEXT_2);
-    await waitForElementToBeRemoved(toastElement2, {
-      timeout: DURATION_2 + EXIT_ANIMATION_DURATION,
-    });
+    await waitFor(() => delay(DURATION_2 + EXIT_ANIMATION_DURATION));
+    fireEvent.transitionEnd(toastElement2);
+
+    expect(toastElement2).not.toBeInTheDocument();
   });
 
   it('allows creating custom toast instances with specified positions and overriding position', async () => {
@@ -64,7 +68,9 @@ describe('createToast', () => {
     await act(() => myToast(TOAST_TEXT_2, { position: POSITION_2 }));
 
     const overridenPositionToastElement = screen.getByText(TOAST_TEXT_2);
-    expect(overridenPositionToastElement.parentElement).toHaveClass(`toast__message--${POSITION_2}`);
+    expect(overridenPositionToastElement.parentElement).toHaveClass(
+      `toast__message--${POSITION_2}`,
+    );
   });
 
   it('allows creating custom toast instances with specified clickClosable and overriding clickClosable', async () => {
diff --git a/__tests__/toast.test.tsx b/__tests__/toast.test.tsx
index 16dad7e..f05e248 100644
--- a/__tests__/toast.test.tsx
+++ b/__tests__/toast.test.tsx
@@ -1,10 +1,12 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
-import { act, render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import toast, { toast as toastNamed } from '../src';
 import { generateMessage } from '../src/lib/utils';
 
 const EXIT_ANIMATION_DURATION = 300;
 
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 describe('toast', () => {
   it('renders a toast when the show button is clicked', async () => {
     const TOAST_TEXT = generateMessage();
@@ -26,9 +28,11 @@ describe('toast', () => {
     await act(() => toast(TOAST_TEXT, DURATION));
 
     const toastElement = screen.getByText(TOAST_TEXT);
-    await waitForElementToBeRemoved(toastElement, {
-      timeout: DURATION + EXIT_ANIMATION_DURATION,
-    });
+
+    await waitFor(() => delay(DURATION + EXIT_ANIMATION_DURATION));
+    fireEvent.transitionEnd(toastElement);
+
+    expect(toastElement).not.toBeInTheDocument();
   });
 
   it('renders toast with infinite duration until manually closed', async () => {
@@ -37,9 +41,11 @@ describe('toast', () => {
 
     const toastElement = screen.getByText(TOAST_TEXT);
     await act(() => infiniteToast.close());
-    await waitForElementToBeRemoved(toastElement, {
-      timeout: EXIT_ANIMATION_DURATION,
-    });
+
+    await act(() => delay(EXIT_ANIMATION_DURATION));
+    fireEvent.transitionEnd(toastElement);
+
+    expect(toastElement).not.toBeInTheDocument();
   });
 
   it('renders and removes toast based on specified duration in options', async () => {
@@ -48,9 +54,10 @@ describe('toast', () => {
     await act(() => toast(TOAST_TEXT, { duration: DURATION }));
 
     const toastElement = screen.getByText(TOAST_TEXT);
-    await waitForElementToBeRemoved(toastElement, {
-      timeout: DURATION + EXIT_ANIMATION_DURATION,
-    });
+    await waitFor(() => delay(DURATION + EXIT_ANIMATION_DURATION));
+    fireEvent.transitionEnd(toastElement);
+
+    expect(toastElement).not.toBeInTheDocument();
   });
 
   it('applies custom className to toast container', async () => {
@@ -69,9 +76,10 @@ describe('toast', () => {
     const toastDOM = screen.getByText(TOAST_TEXT);
     await act(() => toastDOM.click());
 
-    await waitForElementToBeRemoved(toastDOM, {
-      timeout: EXIT_ANIMATION_DURATION,
-    });
+    await waitFor(() => delay(EXIT_ANIMATION_DURATION));
+    fireEvent.transitionEnd(toastDOM);
+
+    expect(toastDOM).not.toBeInTheDocument();
   });
 
   it('renders toast with specified position', async () => {
@@ -79,25 +87,26 @@ describe('toast', () => {
     await act(() => toast(TOAST_TEXT, { position: 'top-center' }));
     const toastDOM1 = screen.getByText(TOAST_TEXT);
 
-    expect(toastDOM1.parentElement).toHaveClass('top-center');
+    expect(toastDOM1.parentElement).toHaveClass('toast__message--top-center');
   });
 
   it('limits visible toasts based on maxVisibleToasts', async () => {
     const TOAST_TEXT = generateMessage();
+    const DURATION = 500;
+
     await act(() => {
-      toast(TOAST_TEXT);
-      toast(TOAST_TEXT, { maxVisibleToasts: 1 });
+      toast(TOAST_TEXT, DURATION);
+      toast(TOAST_TEXT, { duration: DURATION, maxVisibleToasts: 1 });
     });
 
-    await waitFor(
-      () => {
-        const toasts = screen.getAllByText(TOAST_TEXT);
-        expect(toasts.length).toBe(1);
-      },
-      {
-        timeout: EXIT_ANIMATION_DURATION,
-      },
-    );
+    const toastDOM = screen.getAllByText(TOAST_TEXT);
+
+    toastDOM.forEach((toast) => {
+      fireEvent.transitionEnd(toast);
+    });
+
+    const toasts = screen.getAllByText(TOAST_TEXT);
+    expect(toasts.length).toBe(1);
   });
 
   it('renders custom toast content with render prop', async () => {
@@ -121,12 +130,17 @@ describe('toast', () => {
 
   it('calls onCloseStart and onClose when toast is clicked with clickClosable set to true', async () => {
     const TOAST_TEXT = generateMessage();
+    const DURATION = 500;
     const onCloseStart = jest.fn();
     const onClose = jest.fn();
-    await act(() => toast(TOAST_TEXT, { onCloseStart, onClose, clickClosable: true }));
+    await act(() =>
+      toast(TOAST_TEXT, { onCloseStart, onClose, clickClosable: true, duration: DURATION }),
+    );
 
     const toastDOM = screen.getByText(TOAST_TEXT);
     await act(() => toastDOM.click());
+    fireEvent.transitionEnd(toastDOM);
+
     expect(onCloseStart).toHaveBeenCalled();
     await waitFor(() => expect(onClose).toHaveBeenCalled());
   });
@@ -140,9 +154,10 @@ describe('toast', () => {
     toastInstance.updateDuration(NEW_DURATION);
     const toastElement = screen.getByText(TOAST_TEXT);
 
-    await waitForElementToBeRemoved(toastElement, {
-      timeout: NEW_DURATION + EXIT_ANIMATION_DURATION,
-    });
+    await act(() => delay(NEW_DURATION));
+    fireEvent.transitionEnd(toastElement);
+
+    expect(toastElement).not.toBeInTheDocument();
   });
 
   it('updates the content of the displayed toast', async () => {
@@ -181,9 +196,10 @@ describe('toast', () => {
     );
     const toastElement = screen.getByText(TOAST_TEXT);
     await act(() => toastElement.click());
-    await waitForElementToBeRemoved(toastElement, {
-      timeout: EXIT_ANIMATION_DURATION,
-    });
+    await waitFor(() => delay(EXIT_ANIMATION_DURATION));
+    fireEvent.transitionEnd(toastElement);
+
+    expect(toastElement).not.toBeInTheDocument();
   });
 
   it('renders second toast upper than first toast when isReversedOrder set to true', async () => {
@@ -197,7 +213,7 @@ describe('toast', () => {
 
   it('applies theme class to toast when theme is specified and does not apply it when theme is not specified', async () => {
     const TOAST_TEXT = generateMessage();
-    const toastContentClassName = ' toast__content toast__theme-content';
+    const toastContentClassName = 'toast__content toast__theme-content';
     await act(() => toast(TOAST_TEXT, { theme: 'dark' }));
 
     const toastDOM = screen.getByText(TOAST_TEXT);
diff --git a/src/component/toast-message.tsx b/src/component/toast-message.tsx
index c9882ff..ab964d2 100644
--- a/src/component/toast-message.tsx
+++ b/src/component/toast-message.tsx
@@ -6,7 +6,7 @@ import { classes, rgbToRgba } from '../lib/utils';
 
 interface LoadingProps {
   color?: string;
-  children: ReactNode
+  children: ReactNode;
 }
 
 function Loading({ color, children }: LoadingProps) {
@@ -31,7 +31,7 @@ export interface ToastMessageProps
   > {
   id: number;
   message: ReactNode;
-  onClose: () => void
+  onClose: () => void;
   isExit?: boolean;
   offsetX?: string;
   offsetY?: string;
@@ -45,7 +45,7 @@ export interface ToastMessageProps
 const TransitionClassNames = {
   enter: 'toast__message--enter-active',
   exit: 'toast__message--exit-active',
-}
+};
 
 function ToastMessage({
   id,
@@ -155,7 +155,7 @@ function ToastMessage({
     'toast__content',
     clickable ? 'toast__content--clickable' : '',
     !render && theme ? `toast__${theme}` : '',
-    !render ? 'toast__theme-content' : '',
+    !render && theme ? 'toast__theme-content' : '',
     theme || '',
     className,
   );
@@ -167,11 +167,17 @@ function ToastMessage({
   };
 
   return (
-    <div ref={messageDOM} id={id.toString()} className={messageClassNames} style={messageStyle} onTransitionEnd={() => {
-      if(messageClassNames.includes(TransitionClassNames.exit)) {
-        onClose();
-      }
-    }}>
+    <div
+      ref={messageDOM}
+      id={id.toString()}
+      className={messageClassNames}
+      style={messageStyle}
+      onTransitionEnd={() => {
+        if (messageClassNames.includes(TransitionClassNames.exit)) {
+          onClose();
+        }
+      }}
+    >
       <div className={contentClassNames} {...(clickable && clickableProps)}>
         {localLoading && <Loading color={loadingColor}>{loadingText}</Loading>}
         {render ? render(message) : message}
diff --git a/src/index.tsx b/src/index.tsx
index aafa76f..df08066 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -29,9 +29,8 @@ const init = () => {
   }
 };
 
-
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {}
+const noop = () => {};
 
 const defaultOptions: Required<ConfigArgs> = {
   duration: 3000,
@@ -216,7 +215,7 @@ function renderToast(
     toastComponentList = toastComponentList.filter((t) => t.id !== id);
     renderDOM();
     onClose?.();
-  }
+  };
 
   const startCloseTimer = (duration = durationTime, callback?: () => void) => {
     if (duration === null || duration === 0 || duration > SET_TIMEOUT_MAX) return;

From aaf489abfd35b03251e45653dc416cb72fe5baa8 Mon Sep 17 00:00:00 2001
From: hemengke <23536175@qq.com>
Date: Tue, 27 Aug 2024 17:00:54 +0800
Subject: [PATCH 6/8] feat: patch-friendly

---
 package.json      |  1 -
 rollup.config.mjs |  2 --
 yarn.lock         | 63 ++---------------------------------------------
 3 files changed, 2 insertions(+), 64 deletions(-)

diff --git a/package.json b/package.json
index 0514f26..721981f 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,6 @@
     "@rollup/plugin-eslint": "^9.0.4",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^23.1.5",
diff --git a/rollup.config.mjs b/rollup.config.mjs
index b23de32..14be219 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -5,7 +5,6 @@ import typescript from 'rollup-plugin-typescript2';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import eslint from '@rollup/plugin-eslint';
 import json from '@rollup/plugin-json';
-import terser from '@rollup/plugin-terser';
 
 import pkg from './package.json' assert { type: 'json' };
 
@@ -43,6 +42,5 @@ export default {
     }),
     commonjs({ include: 'node_modules/**' }),
     json(),
-    terser(),
   ],
 };
diff --git a/yarn.lock b/yarn.lock
index 34b138b..5866628 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1374,14 +1374,6 @@
   resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
-"@jridgewell/source-map@^0.3.3":
-  version "0.3.5"
-  resolved "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz"
-  integrity sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==
-  dependencies:
-    "@jridgewell/gen-mapping" "^0.3.0"
-    "@jridgewell/trace-mapping" "^0.3.9"
-
 "@jridgewell/sourcemap-codec@1.4.14":
   version "1.4.14"
   resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz"
@@ -1468,15 +1460,6 @@
     is-module "^1.0.0"
     resolve "^1.22.1"
 
-"@rollup/plugin-terser@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.npmjs.org/@rollup/plugin-terser/-/plugin-terser-0.4.3.tgz"
-  integrity sha512-EF0oejTMtkyhrkwCdg0HJ0IpkcaVg1MMSf2olHb2Jp+1mnLM04OhjpJWGma4HobiDTF0WCyViWuvadyE9ch2XA==
-  dependencies:
-    serialize-javascript "^6.0.1"
-    smob "^1.0.0"
-    terser "^5.17.4"
-
 "@rollup/pluginutils@^4.1.2":
   version "4.2.1"
   resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz"
@@ -1846,7 +1829,7 @@ acorn-walk@^8.0.2:
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
 
-acorn@^8.1.0, acorn@^8.8.0, acorn@^8.8.1, acorn@^8.8.2:
+acorn@^8.1.0, acorn@^8.8.0, acorn@^8.8.1:
   version "8.8.2"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
@@ -2321,7 +2304,7 @@ combined-stream@^1.0.8:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.18.0, commander@^2.20.0:
+commander@^2.18.0:
   version "2.20.3"
   resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -5073,13 +5056,6 @@ queue-microtask@^1.2.2:
   resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-randombytes@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz"
-  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
-  dependencies:
-    safe-buffer "^5.1.0"
-
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
@@ -5283,11 +5259,6 @@ rxjs@^7.8.1:
   dependencies:
     tslib "^2.1.0"
 
-safe-buffer@^5.1.0:
-  version "5.2.1"
-  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
 safe-regex-test@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz"
@@ -5342,13 +5313,6 @@ semver@^7.3.5, semver@^7.3.7:
   dependencies:
     lru-cache "^6.0.0"
 
-serialize-javascript@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.1.tgz"
-  integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
-  dependencies:
-    randombytes "^2.1.0"
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz"
@@ -5412,11 +5376,6 @@ slash@^5.0.0:
   resolved "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz"
   integrity sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==
 
-smob@^1.0.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/smob/-/smob-1.4.0.tgz"
-  integrity sha512-MqR3fVulhjWuRNSMydnTlweu38UhQ0HXM4buStD/S3mc/BzX3CuM9OmhyQpmtYCvoYdl5ris6TI0ZqH355Ymqg==
-
 "source-map-js@>=0.6.2 <2.0.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
@@ -5435,14 +5394,6 @@ source-map-support@0.5.13:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@~0.5.20:
-  version "0.5.21"
-  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz"
-  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
-  dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
-
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
@@ -5617,16 +5568,6 @@ symbol-tree@^3.2.4:
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-terser@^5.17.4:
-  version "5.19.4"
-  resolved "https://registry.npmjs.org/terser/-/terser-5.19.4.tgz"
-  integrity sha512-6p1DjHeuluwxDXcuT9VR8p64klWJKo1ILiy19s6C9+0Bh2+NWTX6nD9EPppiER4ICkHDVB1RkVpin/YW2nQn/g==
-  dependencies:
-    "@jridgewell/source-map" "^0.3.3"
-    acorn "^8.8.2"
-    commander "^2.20.0"
-    source-map-support "~0.5.20"
-
 test-exclude@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/test-exclude/-/test-exclude-6.0.0.tgz"

From 3c971e9041a8d53fbb47cc0ae530c04c5f19cf59 Mon Sep 17 00:00:00 2001
From: hemengke <23536175@qq.com>
Date: Wed, 28 Aug 2024 10:07:05 +0800
Subject: [PATCH 7/8] fix: onCloseStart trigger timing is not stable

---
 src/component/toast-message.tsx | 16 +++++++++++-----
 src/index.tsx                   | 24 ++++++++++--------------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/component/toast-message.tsx b/src/component/toast-message.tsx
index ab964d2..6e84376 100644
--- a/src/component/toast-message.tsx
+++ b/src/component/toast-message.tsx
@@ -25,13 +25,12 @@ function Loading({ color, children }: LoadingProps) {
 }
 
 export interface ToastMessageProps
-  extends Pick<
-    ToastOptions,
-    'className' | 'clickable' | 'position' | 'render' | 'theme' | 'onClick' | 'loadingText'
-  > {
+  extends Required<Pick<
+  ToastOptions,
+  'className' | 'clickable' | 'position' | 'render' | 'theme' | 'onClick' | 'loadingText' | 'onClose' | 'onCloseStart'
+>> {
   id: number;
   message: ReactNode;
-  onClose: () => void;
   isExit?: boolean;
   offsetX?: string;
   offsetY?: string;
@@ -65,6 +64,7 @@ function ToastMessage({
   loadingText,
   onClick,
   onClose,
+  onCloseStart,
   _onEnter,
 }: ToastMessageProps): ReactElement {
   const messageDOM = useRef<HTMLDivElement>(null);
@@ -142,6 +142,12 @@ function ToastMessage({
     setLocalLoading(!!loading);
   }, [loading]);
 
+  useIsomorphicLayoutEffect(() => {
+    if (isExit) {
+      onCloseStart();
+    }
+  }, [isExit]);
+
   const messageClassNames = classes(
     'toast__message',
     `toast__message--${position || 'bottom-center'}`,
diff --git a/src/index.tsx b/src/index.tsx
index df08066..0ef271c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -145,12 +145,11 @@ export const clearToasts = () => {
   renderDOM();
 };
 
-function closeToast(id: number, options: Pick<ToastOptions, 'onClose' | 'onCloseStart'>) {
+function closeToast(id: number) {
   const index = toastComponentList.findIndex((t) => t.id === id);
   if (toastComponentList[index]) {
     toastComponentList[index].isExit = true;
   }
-  options.onCloseStart?.();
   renderDOM();
 }
 
@@ -193,7 +192,6 @@ function renderToast(
     loading,
   } = options || {};
   const durationTime = duration === undefined ? defaultOptions.duration : duration;
-  const closeOptions = { onClose, onCloseStart };
 
   if (!isValidPosition(position)) {
     return dummyReturn;
@@ -206,7 +204,7 @@ function renderToast(
       if (closeTimer) {
         clearTimeout(closeTimer);
       }
-      closeToast(id, closeOptions);
+      closeToast(id);
     }
     onClick?.(e);
   };
@@ -217,19 +215,14 @@ function renderToast(
     onClose?.();
   };
 
-  const startCloseTimer = (duration = durationTime, callback?: () => void) => {
+
+  const startCloseTimer = (duration = durationTime) => {
     if (duration === null || duration === 0 || duration > SET_TIMEOUT_MAX) return;
     if (closeTimer) {
       clearTimeout(closeTimer);
     }
     closeTimer = window.setTimeout(() => {
-      closeToast(id, {
-        ...closeOptions,
-        onCloseStart: () => {
-          callback?.();
-          closeOptions.onClose?.();
-        },
-      });
+      closeToast(id);
     }, duration);
   };
 
@@ -255,6 +248,7 @@ function renderToast(
         loadingText={loadingText}
         onClick={handleClick}
         onClose={handleClose}
+        onCloseStart={onCloseStart}
       />
     ),
   };
@@ -264,14 +258,14 @@ function renderToast(
   if (maxVisibleToasts) {
     const toastsToRemove = toastComponentList.length - maxVisibleToasts;
     for (let i = 0; i < toastsToRemove; i++) {
-      closeToast(toastComponentList[i].id, closeOptions);
+      closeToast(toastComponentList[i].id);
     }
   }
 
   renderDOM();
 
   return {
-    close: () => closeToast(id, closeOptions),
+    close: () => closeToast(id),
     updateDuration: (newDuration = durationTime) => {
       startCloseTimer(newDuration);
     },
@@ -308,8 +302,10 @@ function renderToast(
             render={render}
             theme={finalTheme}
             loading={finalLoading}
+            loadingText={loadingText}
             onClick={handleClick}
             onClose={handleClose}
+            onCloseStart={onCloseStart}
           />
         );
       }

From 5c335a1a6c43134118cacfa9875d470e78b30843 Mon Sep 17 00:00:00 2001
From: hemengke <23536175@qq.com>
Date: Wed, 28 Aug 2024 10:28:11 +0800
Subject: [PATCH 8/8] fix: update nonexistent toast bug

---
 .vscode/settings.json |  5 +++++
 src/index.tsx         | 25 +++++++++++++------------
 2 files changed, 18 insertions(+), 12 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..ff97a21
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}
diff --git a/src/index.tsx b/src/index.tsx
index 0ef271c..0739f47 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -215,7 +215,6 @@ function renderToast(
     onClose?.();
   };
 
-
   const startCloseTimer = (duration = durationTime) => {
     if (duration === null || duration === 0 || duration > SET_TIMEOUT_MAX) return;
     if (closeTimer) {
@@ -273,12 +272,13 @@ function renderToast(
       messageOrOptions: ReactNode | ToastUpdateOptions,
       updateDuration?: ToastOptions['duration'],
     ) => {
-      const index = toastComponentList.findIndex((t) => t.id === id);
-      const newDuration = isToastUpdateOptions(messageOrOptions)
-        ? messageOrOptions.duration
-        : updateDuration;
+      const toast = toastComponentList.find((t) => t.id === id && !t.isExit);
+
+      if (toast) {
+        const newDuration = isToastUpdateOptions(messageOrOptions)
+          ? messageOrOptions.duration
+          : updateDuration;
 
-      if (toastComponentList[index]) {
         const finalMessage =
           (isToastUpdateOptions(messageOrOptions) ? messageOrOptions.message : messageOrOptions) ??
           message;
@@ -289,8 +289,8 @@ function renderToast(
           ? messageOrOptions.theme || theme
           : theme;
 
-        toastComponentList[index].message = finalMessage;
-        toastComponentList[index].component = (
+        toast.message = finalMessage;
+        toast.component = (
           <ToastMessage
             id={id}
             message={finalMessage}
@@ -308,11 +308,12 @@ function renderToast(
             onCloseStart={onCloseStart}
           />
         );
-      }
-      renderDOM();
 
-      if (newDuration !== undefined) {
-        startCloseTimer(newDuration);
+        renderDOM();
+
+        if (newDuration !== undefined) {
+          startCloseTimer(newDuration);
+        }
       }
     },
   };