From 875a1c2386e2eb0b0428553819747077de3f08fe Mon Sep 17 00:00:00 2001
From: sajjad <sajjad.t.dev@gmail.com>
Date: Thu, 28 Mar 2024 02:20:38 -0700
Subject: [PATCH] fix

---
 package.json                          |   4 +-
 src/api.js                            | 185 +++++------
 src/{ => components}/MeshkeeToast.vue | 460 ++++++++++++++------------
 src/main.js                           |  61 +---
 src/theme/_animations.scss            | 194 +++++++----
 src/theme/bootstrap/_variables.scss   |   1 -
 src/theme/bootstrap/index.scss        |   5 -
 src/theme/default/_main.scss          | 241 ++++++++------
 src/theme/default/_variables.scss     |  29 +-
 src/theme/default/index.scss          |   7 +-
 src/theme/sugar/icons.scss            | 118 ++++---
 src/theme/sugar/icons/close-black.svg |   3 +
 src/theme/sugar/icons/close.svg       |   3 +
 src/theme/sugar/icons/error.svg       |  16 +-
 src/theme/sugar/icons/info-1.png      | Bin 142 -> 0 bytes
 src/theme/sugar/icons/info-black.svg  |   4 +
 src/theme/sugar/icons/info.svg        |   8 +-
 src/theme/sugar/icons/success.svg     |   7 +-
 src/theme/sugar/icons/warning.svg     |   4 -
 src/timer.js                          |  24 --
 src/{ => utils}/bus.js                |   4 +-
 src/{ => utils}/helpers.js            |  78 ++---
 src/{ => utils}/positions.js          |  14 +-
 src/utils/timer.js                    |  47 +++
 24 files changed, 843 insertions(+), 674 deletions(-)
 rename src/{ => components}/MeshkeeToast.vue (53%)
 delete mode 100644 src/theme/bootstrap/_variables.scss
 delete mode 100644 src/theme/bootstrap/index.scss
 create mode 100644 src/theme/sugar/icons/close-black.svg
 create mode 100644 src/theme/sugar/icons/close.svg
 delete mode 100644 src/theme/sugar/icons/info-1.png
 create mode 100644 src/theme/sugar/icons/info-black.svg
 delete mode 100644 src/theme/sugar/icons/warning.svg
 delete mode 100644 src/timer.js
 rename src/{ => utils}/bus.js (65%)
 rename src/{ => utils}/helpers.js (53%)
 rename src/{ => utils}/positions.js (94%)
 create mode 100644 src/utils/timer.js

diff --git a/package.json b/package.json
index 019832f..c993cd3 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "meshkeetoast",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/MeshkeeToast.umd.js",
-  "style": "dist/theme-bootstrap.css",
+  "style": "dist/theme-default.css",
   "module": "dist/MeshkeeToast.esm.js",
   "unpkg": "dist/MeshkeeToast.min.js",
   "browser": {
diff --git a/src/api.js b/src/api.js
index 5e4018c..523556d 100644
--- a/src/api.js
+++ b/src/api.js
@@ -1,92 +1,93 @@
-import MeshkeeToast from './MeshkeeToast.vue'
-import { createComponent } from './helpers';
-import eventBus from './bus.js';
-import Positions from './positions.js';
-
-let parentTop = document.querySelector('.v-toast.v-toast--top');
-let parentBottom = document.querySelector('.v-toast.v-toast--bottom');
-
-const correctParent = (position) => {
-    switch (position) {
-        case Positions.TOP:
-        case Positions.TOP_RIGHT:
-        case Positions.TOP_LEFT:
-            return parentTop;
-
-        case Positions.BOTTOM:
-        case Positions.BOTTOM_RIGHT:
-        case Positions.BOTTOM_LEFT:
-            return parentBottom;
-    }
-};
-const setupContainer = () => {
-    // No need to create them, they already exists
-    if (parentTop && parentBottom) return;
-
-    if (!parentTop) {
-        parentTop = document.createElement('div');
-        parentTop.className = 'v-toast v-toast--top';
-    }
-
-    if (!parentBottom) {
-        parentBottom = document.createElement('div');
-        parentBottom.className = 'v-toast v-toast--bottom'
-    }
-
-    const container = document.body;
-    container.appendChild(parentTop);
-    container.appendChild(parentBottom);
-};
-export const useToast = (globalProps = {}) => {
-    return {
-        open(options) {
-            let message = null;
-            if (typeof options === 'string') message = options;
-
-            const defaultProps = {
-                message
-            };
-
-            const propsData = Object.assign({}, defaultProps, globalProps, options);
-            setupContainer();
-            console.log(propsData.position, correctParent(propsData.position ? propsData.position : 'bottom'));
-            const instance = createComponent(MeshkeeToast, propsData, correctParent(propsData.position ? propsData.position : 'bottom'));
-            return {
-                dismiss: instance.dismiss
-            }
-        },
-        clear() {
-            eventBus.emit('toast-clear')
-        },
-        success(message, options = {}) {
-            return this.open(Object.assign({}, {
-                message,
-                type: 'success'
-            }, options))
-        },
-        error(message, options = {}) {
-            return this.open(Object.assign({}, {
-                message,
-                type: 'error'
-            }, options))
-        },
-        info(message, options = {}) {
-            return this.open(Object.assign({}, {
-                message,
-                type: 'info'
-            }, options))
-        },
-        warning(message, options = {}) {
-            return this.open(Object.assign({}, {
-                message,
-                type: 'warning'
-            }, options))
-        },
-        default(message, options = {}) {
-            return this.open(Object.assign({}, {
-                message,
-                type: 'default'
-            }, options))
-        }
-    }
-};
+import MeshkeeToast from './components/MeshkeeToast.vue'
+import { createComponent } from './utils/helpers.js';
+import eventBus from './utils/bus.js';
+import Positions from './utils/positions.js';
+
+let parentTop = document.querySelector('.me-toast.me-toast--top');
+let parentBottom = document.querySelector('.me-toast.me-toast--bottom');
+
+const correctParent = (position) => {
+    switch (position) {
+        case Positions.TOP:
+        case Positions.TOP_RIGHT:
+        case Positions.TOP_LEFT:
+            return parentTop;
+
+        case Positions.BOTTOM:
+        case Positions.BOTTOM_RIGHT:
+        case Positions.BOTTOM_LEFT:
+            return parentBottom;
+    }
+};
+const setupContainer = () => {
+    // No need to create them, they already exists
+    if (parentTop && parentBottom) return;
+
+    if (!parentTop) {
+        parentTop = document.createElement('div');
+        parentTop.className = 'me-toast me-toast--top';
+    }
+
+    if (!parentBottom) {
+        parentBottom = document.createElement('div');
+        parentBottom.className = 'me-toast me-toast--bottom'
+    }
+
+    const container = document.body;
+    container.appendChild(parentTop);
+    container.appendChild(parentBottom);
+};
+export const useToast = (globalProps = {}) => {
+    return {
+        open(options) {
+            let message = null;
+            if (typeof options === 'string') message = options;
+
+            const defaultProps = {
+                message
+            };
+
+            const propsData = Object.assign({}, defaultProps, globalProps, options);
+            setupContainer();
+            const instance = createComponent(MeshkeeToast, propsData, correctParent(propsData.position ? propsData.position : 'bottom'));
+            return {
+                dismiss: instance.dismiss
+            }
+        },
+        clear() {
+            eventBus.emit('toast-clear')
+        },
+        success(title, message, options = {}) {
+            return this.open(Object.assign({}, {
+                title,
+                message,
+                type: 'success',
+                borderColor: '#EDEDED'
+            }, options))
+        },
+        error(title, message, options = {}) {
+            return this.open(Object.assign({}, {
+                title,
+                message,
+                type: 'error',
+                borderColor: '#EDEDED'
+            }, options))
+        },
+        info(title, message, options = {}) {
+            return this.open(Object.assign({}, {
+                title,
+                message,
+                type: 'info'
+            }, options))
+        },
+        preset(title, message, options = {}) {
+            return this.open(Object.assign({}, {
+                title,
+                message,
+                titleColor: 'black',
+                messageColor: 'black',
+                type: 'default'
+            }, options))
+        }
+    }
+};
diff --git a/src/MeshkeeToast.vue b/src/components/MeshkeeToast.vue
similarity index 53%
rename from src/MeshkeeToast.vue
rename to src/components/MeshkeeToast.vue
index ae0d772..e2d7dc2 100644
--- a/src/MeshkeeToast.vue
+++ b/src/components/MeshkeeToast.vue
@@ -1,206 +1,254 @@
-<template>
-    <transition :enter-active-class="transition.enter" :leave-active-class="transition.leave">
-        <div ref="root" role="alert" v-show="isActive" class="v-toast__item"
-            :class="[`v-toast__item--${type}`, `v-toast__item--${direction}`, `v-toast__item--${position}`]"
-            @mouseover="toggleTimer(true)" @mouseleave="toggleTimer(false)" @click="whenClicked">
-            <div :class="['v-toast__icon', `v-toast__icon--${type}-light`]">
-                <div class="v-toast__icon--image"></div>
-            </div>
-            <div class="mx-2 toast__title" v-html="title"></div>
-            <p class="v-toast__text" v-html="message"></p>
-        </div>
-    </transition>
-</template>
-
-<script>
-import { defineComponent } from 'vue';
-import { removeElement } from './helpers.js';
-import Timer from "./timer.js";
-import Positions from './positions.js'
-import eventBus from './bus.js'
-
-export default defineComponent({
-    name: 'Toast',
-    props: {
-        title: {
-            type: String,
-            default: 'توجه'
-        },
-        message: {
-            type: String,
-            required: true
-        },
-        type: {
-            type: String,
-            default: 'success'
-        },
-        position: {
-            type: String,
-            default: Positions.BOTTOM_RIGHT,
-            validator(value) {
-                return Object.values(Positions).includes(value)
-            }
-        },
-        duration: {
-            type: Number,
-            default: 3000
-        },
-        direction: {
-            type: String,
-            default: 'rtl'
-        },
-        dismissible: {
-            type: Boolean,
-            default: true
-        },
-        onDismiss: {
-            type: Function,
-            default: () => {
-            }
-        },
-        onClick: {
-            type: Function,
-            default: () => {
-            }
-        },
-        queue: Boolean,
-        pauseOnHover: {
-            type: Boolean,
-            default: true
-        },
-    },
-    data() {
-        return {
-            isActive: false,
-            parentTop: null,
-            parentBottom: null,
-            isHovered: false,
-        }
-    },
-    computed: {
-        correctParent() {
-            switch (this.position) {
-                case Positions.TOP:
-                case Positions.TOP_RIGHT:
-                case Positions.TOP_LEFT:
-                    return this.parentTop;
-
-                case Positions.BOTTOM:
-                case Positions.BOTTOM_RIGHT:
-                case Positions.BOTTOM_LEFT:
-                    return this.parentBottom;
-            }
-        },
-        transition() {
-            switch (this.position) {
-                case Positions.TOP:
-                case Positions.TOP_RIGHT:
-                case Positions.TOP_LEFT:
-                    return {
-                        enter: 'v-toast--fade-in-down',
-                        leave: 'v-toast--fade-out'
-                    };
-
-                case Positions.BOTTOM:
-                case Positions.BOTTOM_RIGHT:
-                case Positions.BOTTOM_LEFT:
-                    return {
-                        enter: 'v-toast--fade-in-up',
-                        leave: 'v-toast--fade-out'
-                    }
-            }
-        },
-    },
-    methods: {
-        setupContainer() {
-            this.parentTop = document.querySelector('.v-toast.v-toast--top');
-            this.parentBottom = document.querySelector('.v-toast.v-toast--bottom');
-            // No need to create them, they already exists
-            if (this.parentTop && this.parentBottom) return;
-
-            if (!this.parentTop) {
-                this.parentTop = document.createElement('div');
-                this.parentTop.className = 'v-toast v-toast--top';
-            }
-
-            if (!this.parentBottom) {
-                this.parentBottom = document.createElement('div');
-                this.parentBottom.className = 'v-toast v-toast--bottom'
-            }
-
-            const container = document.body;
-            container.appendChild(this.parentTop);
-            container.appendChild(this.parentBottom);
-        },
-
-        shouldQueue() {
-            if (!this.queue) return false;
-
-            return (
-                this.parentTop.childElementCount > 0 ||
-                this.parentBottom.childElementCount > 0
-            )
-        },
-
-        dismiss() {
-            if (this.timer) this.timer.stop();
-            clearTimeout(this.queueTimer);
-            this.isActive = false;
-
-            // Timeout for the animation complete before destroying
-            setTimeout(() => {
-                this.onDismiss.apply(null, arguments);
-
-                const wrapper = this.$refs.root;
-                // unmount the component
-                // removeElement(wrapper);
-            }, 150)
-        },
-
-        showNotice() {
-            if (this.shouldQueue()) {
-                // Call recursively if it should queue
-                this.queueTimer = setTimeout(this.showNotice, 250);
-                return
-            }
-            console.log(this.correctParent);
-            document.querySelector('.v-toast--bottom').insertAdjacentElement('afterbegin', this.$refs.root);
-            this.correctParent.appendChild(this.$refs.root);
-            console.log(this.$refs.root);
-            document.querySelector('.v-toast--bottom').appendChild(this.$refs.root);
-
-            this.$options.elem = this.correctParent;
-
-            this.isActive = true;
-
-            if (this.duration) {
-                this.timer = new Timer(this.dismiss, this.duration);
-            }
-        },
-
-        whenClicked() {
-            if (!this.dismissible) return;
-            this.onClick.apply(null, arguments);
-            this.dismiss()
-        },
-
-        toggleTimer(newVal) {
-            if (!this.pauseOnHover || !this.timer) return;
-            newVal ? this.timer.pause() : this.timer.resume();
-        }
-    },
-    beforeUnmount() {
-        eventBus.off('toast-clear', this.dismiss)
-    },
-    beforeMount() {
-        this.setupContainer()
-    },
-    mounted() {
-        this.showNotice();
-        eventBus.on('toast-clear', this.dismiss)
-    },
-})
-</script>
-<style lang="scss">
-@import './theme/bootstrap';
-</style>
\ No newline at end of file
+<template>
+    <transition :enter-active-class="transition.enter" :leave-active-class="transition.leave">
+        <div ref="root" role="alert" v-show="isActive" :class="[`me-toast__root me-toast__root--${position}`]">
+            <div :class="`me-toast__item--${direction}`">
+                <div @mouseenter="toggleTimer(true)" @mouseleave="toggleTimer(false)"
+                    :class="[`me-toast__item me-toast__item--${type}-light`]">
+                    <div class="me-toast__box">
+                        <div :class="['me-toast__icon', `me-toast__icon--${type}`]">
+                            <div class="me-toast__icon--image"></div>
+                        </div>
+                        <div class="me-toast__title"
+                            :style="`color: ${titleColor};font-family: ${titleFontFamily}; ${direction == 'rtl' ? `border-left: 0.5px dashed ${borderColor};` : `border-right: 0.5px dashed ${borderColor};`}`"
+                            v-html="title">
+                        </div>
+                        <p class="me-toast__message" :style="`color: ${messageColor};font-family: ${messageFontFamily};`"
+                            v-html="message"></p>
+                    </div>
+                    <!-- close button -->
+                    <div class="me-toast__close" @click="whenClicked"></div>
+                </div>
+                <div :class="[`me-toast__progress me-toast__progress--${type}-light`]">
+                    <div ref="progress_bar" :class="[`me-toast__bar me-toast__bar--${type}`]"></div>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { removeElement } from '../utils/helpers.js';
+import Timer from "../utils/timer.js";
+import Positions from '../utils/positions.js'
+import eventBus from '../utils/bus.js';
+
+export default defineComponent({
+    name: 'Toast',
+    props: {
+        title: {
+            type: String,
+            default: 'توجه'
+        },
+        message: {
+            type: String,
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'success'
+        },
+        titleFontFamily: {
+            type: String,
+            default: 'IranYekan-Regular'
+        },
+        messageFontFamily: {
+            type: String,
+            default: 'IranYekan-light'
+        },
+        titleColor: {
+            type: String,
+            default: 'white',
+        },
+        messageColor: {
+            type: String,
+            default: 'white',
+        },
+        borderColor: {
+            type: String,
+            default: '#888888'
+        },
+        position: {
+            type: String,
+            default: Positions.BOTTOM_RIGHT,
+            validator(value) {
+                return Object.values(Positions).includes(value)
+            }
+        },
+        duration: {
+            type: Number,
+            default: 6000
+        },
+        direction: {
+            type: String,
+            default: 'rtl'
+        },
+        dismissible: {
+            type: Boolean,
+            default: true
+        },
+        onDismiss: {
+            type: Function,
+            default: () => {
+            }
+        },
+        onClick: {
+            type: Function,
+            default: () => {
+            }
+        },
+        queue: Boolean,
+        pauseOnHover: {
+            type: Boolean,
+            default: true
+        },
+    },
+    data() {
+        return {
+            isActive: false,
+            parentTop: null,
+            parentBottom: null,
+            isHovered: false,
+            timer: null,
+        }
+    },
+    // watch: {
+    //     'timer.delay': {
+    //         deep: true,
+    //         handler(newVal) {
+    //             console.log(newVal);
+    //             if (!this.timer) return
+    //             console.log(this.timer, (this.timer.delay / this.duration) * 100);
+    //             this.getTimerWidth = 100 - ((this.timer.delay / this.duration) * 100);
+    //         },
+    //     },
+    // },
+    computed: {
+        correctParent() {
+            switch (this.position) {
+                case Positions.TOP:
+                case Positions.TOP_RIGHT:
+                case Positions.TOP_LEFT:
+                    return this.parentTop;
+
+                case Positions.BOTTOM:
+                case Positions.BOTTOM_RIGHT:
+                case Positions.BOTTOM_LEFT:
+                    return this.parentBottom;
+            }
+        },
+        transition() {
+            switch (this.position) {
+                case Positions.TOP:
+                case Positions.TOP_RIGHT:
+                case Positions.TOP_LEFT:
+                    return {
+                        enter: 'me-toast--fade-in-down',
+                        leave: 'me-toast--fade-out'
+                    };
+
+                case Positions.BOTTOM:
+                case Positions.BOTTOM_RIGHT:
+                case Positions.BOTTOM_LEFT:
+                    return {
+                        enter: 'me-toast--fade-in-up',
+                        leave: 'me-toast--fade-out'
+                    }
+            }
+        },
+    },
+    methods: {
+        setupContainer() {
+            this.parentTop = document.querySelector('.me-toast.me-toast--top');
+            this.parentBottom = document.querySelector('.me-toast.me-toast--bottom');
+            // No need to create them, they already exists
+            if (this.parentTop && this.parentBottom) return;
+
+            if (!this.parentTop) {
+                this.parentTop = document.createElement('div');
+                this.parentTop.className = 'me-toast me-toast--top';
+            }
+
+            if (!this.parentBottom) {
+                this.parentBottom = document.createElement('div');
+                this.parentBottom.className = 'me-toast me-toast--bottom'
+            }
+
+            const container = document.body;
+            container.appendChild(this.parentTop);
+            container.appendChild(this.parentBottom);
+        },
+
+        shouldQueue() {
+            if (!this.queue) return false;
+
+            return (
+                this.parentTop.childElementCount > 0 ||
+                this.parentBottom.childElementCount > 0
+            )
+        },
+
+        dismiss() {
+            if (this.timer) this.timer.stop();
+            clearTimeout(this.queueTimer);
+            this.isActive = false;
+
+            // Timeout for the animation complete before destroying
+            setTimeout(() => {
+                this.onDismiss.apply(null, arguments);
+
+                const wrapper = this.$refs.root;
+                // unmount the component
+                removeElement(wrapper);
+            }, 150)
+        },
+
+        showNotice() {
+            if (this.shouldQueue()) {
+                // Call recursively if it should queue
+                this.queueTimer = setTimeout(this.showNotice, 250);
+                return
+            }
+            document.querySelector('.me-toast--bottom').insertAdjacentElement('afterbegin', this.$refs.root);
+            this.correctParent.appendChild(this.$refs.root);
+            document.querySelector('.me-toast--bottom').appendChild(this.$refs.root);
+
+            this.$options.elem = this.correctParent;
+
+            this.isActive = true;
+
+            if (this.duration) {
+                this.timer = new Timer(this.dismiss, this.duration);
+                this.timer.move(this.$refs.progress_bar);
+            }
+        },
+        whenClicked() {
+            if (!this.dismissible) return;
+            this.onClick.apply(null, arguments);
+            this.dismiss()
+        },
+
+        toggleTimer(newVal) {
+            if (!this.pauseOnHover || !this.timer) return;
+            if (newVal) {
+                this.timer.move(this.$refs.progress_bar, true);
+                this.timer.pause();
+            } else {
+                this.timer.move(this.$refs.progress_bar);
+                this.timer.resume();
+            }
+            // newVal ? this.timer.pause();  : this.timer.resume();
+        },
+    },
+    beforeUnmount() {
+        eventBus.off('toast-clear', this.dismiss)
+    },
+    beforeMount() {
+        this.setupContainer()
+    },
+    mounted() {
+        this.showNotice();
+        eventBus.on('toast-clear', this.dismiss)
+    },
+})
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index e442c42..126011e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,51 +1,12 @@
-// Import vue component
-import Vue from 'vue';
-import MeshkeeToast from './MeshkeeToast.vue';
-import { useToast } from './api';
-
-// Vue.prototype.$meshkeeToast = function () {
-//     console.log(324);
-//     return 321;
-// }
-// // Declare install function executed by Vue.use()
-// export function install(Vue) {
-//     console.log(43);
-
-//     if (install.installed) return;
-//     install.installed = true;
-//     Vue.prototype.$meshkeeToast = function () {
-//         console.log(324);
-//         return 321;
-//     }
-//     Vue.component('MeshkeeToast', MeshkeeToast);
-// }
-
-// // Create module definition for Vue.use()
-// const plugin = {
-//     install,
-// };
-
-// // Auto-install when vue is found (eg. in browser via <script> tag)
-// let GlobalVue = null;
-// if (typeof window !== 'undefined') {
-//     GlobalVue = window.Vue;
-// } else if (typeof global !== 'undefined') {
-//     GlobalVue = global.Vue;
-// }
-// console.log(global, GlobalVue);
-// if (GlobalVue) {
-//     GlobalVue.use(plugin);
-// }
-
-// // To allow use as module (npm/webpack/etc.) export component
-// export default MeshkeeToast;
-export default {
-    install(Vue, options) {
-        // Let's register our component globally
-        // https://vuejs.org/v2/guide/components-registration.html
-        Vue.prototype.$meshkeeToast = function () {
-            const { open } = useToast(options);
-            open('Vue');
-        }
-    }
+import { useToast } from './api';
+
+// To allow use as module (npm/webpack/etc.) export component
+export default {
+    install(Vue, options) {
+        // Let's register our component globally
+        // https://vuejs.org/v2/guide/components-registration.html
+        Vue.prototype.$metoast = () => {
+            return new useToast(options);
+        }
+    }
 };
\ No newline at end of file
diff --git a/src/theme/_animations.scss b/src/theme/_animations.scss
index e56035c..9068a61 100644
--- a/src/theme/_animations.scss
+++ b/src/theme/_animations.scss
@@ -1,59 +1,135 @@
-@keyframes fadeOut {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-    }
-}
-
-.v-toast--fade-out {
-    animation-name: fadeOut;
-}
-
-@keyframes fadeInDown {
-    from {
-        opacity: 0;
-        transform: translate3d(0, -100%, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: none;
-    }
-}
-
-.v-toast--fade-in-down {
-    animation-name: fadeInDown;
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translate3d(0, 100%, 0);
-    }
-
-    to {
-        opacity: 1;
-        transform: none;
-    }
-}
-
-.v-toast--fade-in-up {
-    animation-name: fadeInUp;
-}
-
-/**
-   * Vue Transitions
-   */
-
-.fade-enter-active,
-.fade-leave-active {
-    transition: opacity 150ms ease-out;
-}
-
-.fade-enter,
-.fade-leave-to {
-    opacity: 0;
-}
\ No newline at end of file
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+.me-toast--fade-out {
+    animation-name: fadeOut;
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+.me-toast--fade-in-down {
+    animation-name: fadeInDown;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
+
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+.me-toast--fade-in-up {
+    animation-name: fadeInUp;
+}
+
+/**
+   * Meshkeetoast Transitions
+   */
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 150ms ease-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+
+// progress bar
+// @-webkit-keyframes progress {
+//     0% {
+//         width: 0%;
+//     }
+
+//     50% {
+//         width: 50%;
+//     }
+
+//     100% {
+//         width: 100%;
+//     }
+// }
+
+// @-moz-keyframes progress {
+//     0% {
+//         width: 0%;
+//     }
+
+//     50% {
+//         width: 50%;
+//     }
+
+//     100% {
+//         width: 100%;
+//     }
+// }
+
+// @-o-keyframes progress {
+//     0% {
+//         width: 0%;
+//     }
+
+//     50% {
+//         width: 50%;
+//     }
+
+//     100% {
+//         width: 100%;
+//     }
+
+// }
+
+// @keyframes progress {
+//     0% {
+//         width: 0%;
+//     }
+
+//     50% {
+//         width: 50%;
+//     }
+
+//     100% {
+//         width: 100%;
+//     }
+
+// }
+
+// .me-toast__progress {
+//     -webkit-animation-name: progress;
+//     -moz-animation-name: progress;
+//     -o-animation-name: progress;
+//     animation-name: progress;
+//     -webkit-animation: progress 2s linear;
+//     -moz-animation: progress 2s linear;
+//     -o-animation: progress 2s linear;
+//     -ms-animation: progress 2s linear;
+// }
+
+// .me-toast__root:hover>.me-toast__bar {
+//     -webkit-animation-play-state: paused;
+//     animation-play-state: paused;
+// }
\ No newline at end of file
diff --git a/src/theme/bootstrap/_variables.scss b/src/theme/bootstrap/_variables.scss
deleted file mode 100644
index 1c61993..0000000
--- a/src/theme/bootstrap/_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$toast-icons-path: "./theme/sugar/icons" !default;
\ No newline at end of file
diff --git a/src/theme/bootstrap/index.scss b/src/theme/bootstrap/index.scss
deleted file mode 100644
index 338a01c..0000000
--- a/src/theme/bootstrap/index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import '../default/variables';
-@import 'variables';
-@import '../animations';
-@import '../default/main';
-@import '../sugar/icons';
\ No newline at end of file
diff --git a/src/theme/default/_main.scss b/src/theme/default/_main.scss
index cc2204b..2301383 100644
--- a/src/theme/default/_main.scss
+++ b/src/theme/default/_main.scss
@@ -1,95 +1,148 @@
-.v-toast {
-  position: fixed;
-  display: flex;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 2em;
-  overflow: hidden;
-  z-index: 1090;
-  pointer-events: none;
-
-  &__item {
-    display: inline-flex;
-    align-items: center;
-    animation-duration: 150ms;
-    margin: 0.5em 0;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-    border-radius: 0.25em;
-    pointer-events: auto;
-    opacity: 0.92;
-    color: #fff;
-    min-height: 3em;
-    cursor: pointer;
-
-    // Directions
-    &__item--rtl {
-      direction: rtl;
-    }
-
-    &__item--ltr {
-      direction: ltr;
-    }
-
-    // Colors
-    @each $color, $value in $toast-colors {
-
-      &--#{$color} {
-        background-color: $value !important;
-      }
-
-      & .v-toast__icon--#{$color} {
-        background-color: $value;
-      }
-    }
-
-    &--warning {
-      color: #000
-    }
-
-    // Individual toast position
-    &.v-toast__item--top,
-    &.v-toast__item--bottom {
-      align-self: center;
-    }
-
-    &.v-toast__item--top-right,
-    &.v-toast__item--bottom-right {
-      align-self: flex-end;
-    }
-
-    &.v-toast__item--top-left,
-    &.v-toast__item--bottom-left {
-      align-self: flex-start;
-    }
-  }
-
-  &__text {
-    margin: 0;
-    padding: 0.5em 1em;
-    word-break: break-word;
-  }
-
-  &__icon {
-    display: none;
-  }
-
-  // Notice container positions
-  &.v-toast--top {
-    flex-direction: column;
-  }
-
-  &.v-toast--bottom {
-    flex-direction: column-reverse;
-  }
-
-  &.v-toast--custom-parent {
-    position: absolute;
-  }
-
-  @media screen and (max-width: 768px) {
-    padding: 0;
-    position: fixed !important;
-  }
+.me-toast {
+  position: fixed;
+  display: flex;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 2em;
+  overflow: hidden;
+  z-index: 1090;
+  pointer-events: none;
+
+  &__root {
+    display: flex;
+
+    // Individual toast position
+    &.me-toast__root--top,
+    &.me-toast__root--bottom {
+      align-self: center;
+    }
+
+    &.me-toast__root--top-right,
+    &.me-toast__root--bottom-right {
+      align-self: flex-end;
+    }
+
+    &.me-toast__root--top-left,
+    &.me-toast__root--bottom-left {
+      align-self: flex-start;
+    }
+  }
+
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    animation-duration: 150ms;
+    margin: 0.3em 0;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+    border-radius: 0.25em;
+    pointer-events: auto;
+    opacity: 0.92;
+    color: #fff;
+    min-height: 49px;
+    width: 490px;
+    cursor: pointer;
+
+    & .me-toast__box {
+      display: flex;
+      align-items: center;
+      height: 49px;
+    }
+
+    // Directions
+
+    &--rtl {
+      direction: rtl;
+
+      .me-toast__icon {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+
+    }
+
+    &--ltr {
+      direction: ltr;
+
+      .me-toast__icon {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+    }
+
+    // Colors
+    @each $color, $value in $toast-colors {
+
+      &--#{$color} {
+        background-color: $value !important;
+      }
+
+      & .me-toast__icon--#{$color} {
+        background-color: $value;
+      }
+    }
+
+  }
+
+  &__title {
+    font-size: 12px;
+    padding: 0 16px;
+    height: 65%;
+    display: flex;
+    align-items: center;
+  }
+
+  &__message {
+    font-size: 10px;
+    margin-right: 16px;
+    word-break: break-word;
+  }
+
+  &__icon {
+    display: none;
+  }
+
+  // Colors
+  @each $color, $value in $toast-colors {
+
+    &__progress--#{$color} {
+      background: $value !important;
+    }
+
+    .me-toast__bar--#{$color} {
+      background-color: $value ;
+    }
+  }
+
+
+
+  &__progress {
+    width: 490px;
+    border-radius: 12px;
+
+    .me-toast__bar {
+      width: 1%;
+      height: 3px;
+    }
+  }
+
+  // Notice container positions
+  &.me-toast--top {
+    flex-direction: column;
+  }
+
+  &.me-toast--bottom {
+    flex-direction: column-reverse;
+  }
+
+  &.me-toast--custom-parent {
+    position: absolute;
+  }
+
+  @media screen and (max-width: 768px) {
+    padding: 0;
+    position: fixed !important;
+  }
 }
\ No newline at end of file
diff --git a/src/theme/default/_variables.scss b/src/theme/default/_variables.scss
index aa141b1..e9002d9 100644
--- a/src/theme/default/_variables.scss
+++ b/src/theme/default/_variables.scss
@@ -1,14 +1,15 @@
-$toast-colors: (
-    ) !default;
-$toast-colors: map-merge(("success": #32CAD5,
-            "success-light": #32CAD5CC,
-            "info": #E8E8E8,
-            "info-light": #F7F7F7,
-            "warning": #febc22,
-            "warning-light": #febc22,
-            "error": #EE3552,
-            "error-light": #EE3552CC,
-            "default": #000,
-            "default-light": #3E3E3E),
-        $toast-colors
-);
\ No newline at end of file
+$toast-colors: (
+    ) !default;
+$toast-colors: map-merge(("success": #32CAD5,
+            "success-light": #32CAD5CC,
+            "info": #000000,
+            "info-light": #3E3E3E,
+            "warning": #febc22,
+            "warning-light": #febc22,
+            "error": #EE3552,
+            "error-light": #EE3552CC,
+            "default": #E8E8E8,
+            "default-light": #F7F7F7),
+        $toast-colors
+);
+$toast-icons-path: "../sugar/icons" !default;
\ No newline at end of file
diff --git a/src/theme/default/index.scss b/src/theme/default/index.scss
index 96c2888..ef64630 100644
--- a/src/theme/default/index.scss
+++ b/src/theme/default/index.scss
@@ -1,3 +1,4 @@
-@import 'variables';
-@import '../animations';
-@import 'main';
\ No newline at end of file
+@import 'variables';
+@import '../animations';
+@import 'main';
+@import '../sugar/icons';
\ No newline at end of file
diff --git a/src/theme/sugar/icons.scss b/src/theme/sugar/icons.scss
index 3222e78..a7bea27 100644
--- a/src/theme/sugar/icons.scss
+++ b/src/theme/sugar/icons.scss
@@ -1,52 +1,68 @@
-.v-toast {
-    &__item {
-        opacity: 1;
-        min-height: 4em;
-
-        .v-toast__title {
-            font-size: 12px;
-            border-left: 1px dashed #888888;
-            padding-left: 24px;
-        }
-
-        .v-toast__icon {
-            height: 100%;
-            background: #32CAD5CC;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 0 16px;
-        }
-
-        .v-toast__icon--image {
-            display: block;
-            width: 27px;
-            min-width: 27px;
-            height: 27px;
-            background-size: cover !important;
-            background-position: center !important;
-            // background: url(#{$toast-icons-path}/info.svg) no-repeat;
-            background: url('data:image/png;base64,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');
-
-            [dir="rtl"] & {
-                margin-left: unset;
-                margin-right: 1em;
-            }
-        }
-
-        &.v-toast__item--success {
-            .v-toast__icon--image {
-                // background: url(#{$toast-icons-path}/success.svg) no-repeat;
-                background: url('data:image/jpeg;base64,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');
-            }
-        }
-
-        &.v-toast__item--error .v-toast__icon--image {
-            // background: url(#{$toast-icons-path}/error.svg) no-repeat;
-        }
-
-        &.v-toast__item--warning .v-toast__icon--image {
-            // background: url(#{$toast-icons-path}/warning.svg) no-repeat;
-        }
-    }
+.me-toast {
+    &__item {
+        opacity: 1;
+        min-height: 49px;
+
+        .me-toast__icon {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0 7px;
+        }
+
+        .me-toast__icon--image {
+            display: block;
+            width: 27px;
+            min-width: 27px;
+            height: 27px;
+            background-size: contain !important;
+            background-position: center !important;
+
+            [dir="rtl"] & {
+                margin-left: unset;
+                margin-right: 1em;
+            }
+        }
+
+        &.me-toast__item--success-light {
+            .me-toast__icon--image {
+                background: url(#{$toast-icons-path}/success.svg) no-repeat;
+            }
+        }
+
+        &.me-toast__item--error-light {
+            .me-toast__icon--image {
+                background: url(#{$toast-icons-path}/error.svg) no-repeat;
+            }
+        }
+
+        &.me-toast__item--info-light {
+            .me-toast__icon--image {
+                background: url(#{$toast-icons-path}/info.svg) no-repeat;
+            }
+        }
+
+        &.me-toast__item--default-light {
+            .me-toast__icon--image {
+                background: url(#{$toast-icons-path}/info-black.svg) no-repeat;
+            }
+        }
+
+
+        .me-toast__close {
+            display: block;
+            width: 20px;
+            min-width: 20px;
+            height: 17px;
+            margin: 0 15px;
+            background-size: contain !important;
+            background-position: center !important;
+            background: url(#{$toast-icons-path}/close.svg) no-repeat;
+        }
+
+        &.me-toast__item--default-light .me-toast__close {
+            background: url(#{$toast-icons-path}/close-black.svg) no-repeat !important;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/theme/sugar/icons/close-black.svg b/src/theme/sugar/icons/close-black.svg
new file mode 100644
index 0000000..ef1d7d8
--- /dev/null
+++ b/src/theme/sugar/icons/close-black.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.36644 7.99839L15.9245 0.440374C16.0252 0.339619 16.0252 0.176296 15.9245 0.0755417C15.8237 -0.0251806 15.6604 -0.0251806 15.5596 0.0755417L8.00161 7.63356L0.443598 0.0755417C0.341102 -0.023439 0.177779 -0.0206008 0.0787656 0.0818954C-0.0177962 0.181876 -0.0177962 0.340393 0.0787656 0.440374L7.63678 7.99839L0.0787656 15.5564C-0.0237305 15.6554 -0.0265687 15.8187 0.0724443 15.9212C0.171457 16.0237 0.33478 16.0266 0.437277 15.9276C0.439437 15.9255 0.441534 15.9234 0.443598 15.9212L8.00161 8.36322L15.5596 15.9212C15.6621 16.0202 15.8254 16.0174 15.9245 15.9149C16.0211 15.8149 16.0211 15.6564 15.9245 15.5564L8.36644 7.99839Z" fill="black"/>
+</svg>
diff --git a/src/theme/sugar/icons/close.svg b/src/theme/sugar/icons/close.svg
new file mode 100644
index 0000000..a05c133
--- /dev/null
+++ b/src/theme/sugar/icons/close.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.36644 7.99839L15.9245 0.440374C16.0252 0.339619 16.0252 0.176296 15.9245 0.0755417C15.8237 -0.0251806 15.6604 -0.0251806 15.5596 0.0755417L8.00161 7.63356L0.443598 0.0755417C0.341102 -0.023439 0.177779 -0.0206008 0.0787656 0.0818954C-0.0177962 0.181876 -0.0177962 0.340393 0.0787656 0.440374L7.63678 7.99839L0.0787656 15.5564C-0.0237305 15.6554 -0.0265687 15.8187 0.0724443 15.9212C0.171457 16.0237 0.33478 16.0266 0.437277 15.9276C0.439437 15.9255 0.441534 15.9234 0.443598 15.9212L8.00161 8.36322L15.5596 15.9212C15.6621 16.0202 15.8254 16.0174 15.9245 15.9149C16.0211 15.8149 16.0211 15.6564 15.9245 15.5564L8.36644 7.99839Z" fill="white"/>
+</svg>
diff --git a/src/theme/sugar/icons/error.svg b/src/theme/sugar/icons/error.svg
index 8a14a7b..3bec236 100644
--- a/src/theme/sugar/icons/error.svg
+++ b/src/theme/sugar/icons/error.svg
@@ -1,4 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.976 51.976">
-    <path fill="#fff"
-          d="M44.373 7.603c-10.137-10.137-26.632-10.138-36.77 0-10.138 10.138-10.137 26.632 0 36.77s26.632 10.138 36.77 0c10.137-10.138 10.137-26.633 0-36.77zm-8.132 28.638a2 2 0 01-2.828 0l-7.425-7.425-7.778 7.778a2 2 0 11-2.828-2.828l7.778-7.778-7.425-7.425a2 2 0 112.828-2.828l7.425 7.425 7.071-7.071a2 2 0 112.828 2.828l-7.071 7.071 7.425 7.425a2 2 0 010 2.828z"/>
-</svg>
\ No newline at end of file
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_563_165)">
+<path d="M13.8334 2.83883C14.1127 2.29703 14.8873 2.29703 15.1666 2.83883L24.3514 20.6564C24.6087 21.1555 24.2464 21.75 23.6848 21.75H5.31522C4.75364 21.75 4.39127 21.1555 4.64858 20.6564L13.8334 2.83883Z" stroke="white" stroke-width="0.5"/>
+<rect x="14" y="8" width="1" height="9" rx="0.5" fill="white"/>
+<rect x="14" y="18" width="1" height="2" rx="0.5" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_563_165">
+<rect width="26" height="26" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/theme/sugar/icons/info-1.png b/src/theme/sugar/icons/info-1.png
deleted file mode 100644
index 773fbfb05096fc49c2d666851f9a3ee8b1f5bf61..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 142
zcmeAS@N?(olHy`uVBq!ia0vp^j6f{H!3HFK_`(+gDb50q$YKTtZeb8+WSBKa0;H-q
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzOtu_V@L(#+K!W)3=BNYOMbtfk#~uEmm^Cp
i$AXDnYgJD!uI4=v&%AF+<)ZsQ<qV##elF{r5}E+|2qjbi

diff --git a/src/theme/sugar/icons/info-black.svg b/src/theme/sugar/icons/info-black.svg
new file mode 100644
index 0000000..60382c2
--- /dev/null
+++ b/src/theme/sugar/icons/info-black.svg
@@ -0,0 +1,4 @@
+<svg width="1" height="20" viewBox="0 0 1 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1" height="17" rx="0.5" fill="black"/>
+<rect y="18" width="1" height="2" rx="0.5" fill="black"/>
+</svg>
diff --git a/src/theme/sugar/icons/info.svg b/src/theme/sugar/icons/info.svg
index c889597..f1f7d53 100644
--- a/src/theme/sugar/icons/info.svg
+++ b/src/theme/sugar/icons/info.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.999 45.999">
-    <path fill="#fff"
-          d="M39.264 6.736c-8.982-8.981-23.545-8.982-32.528 0-8.982 8.982-8.981 23.545 0 32.528 8.982 8.98 23.545 8.981 32.528 0 8.981-8.983 8.98-23.545 0-32.528zM25.999 33a3 3 0 11-6 0V21a3 3 0 116 0v12zm-3.053-17.128c-1.728 0-2.88-1.224-2.844-2.735-.036-1.584 1.116-2.771 2.879-2.771 1.764 0 2.88 1.188 2.917 2.771-.001 1.511-1.152 2.735-2.952 2.735z"/>
-</svg>
\ No newline at end of file
+<svg width="1" height="20" viewBox="0 0 1 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1" height="17" rx="0.5" fill="white"/>
+<rect y="18" width="1" height="2" rx="0.5" fill="white"/>
+</svg>
diff --git a/src/theme/sugar/icons/success.svg b/src/theme/sugar/icons/success.svg
index 180d7e7..1a7732c 100644
--- a/src/theme/sugar/icons/success.svg
+++ b/src/theme/sugar/icons/success.svg
@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-    <path fill="#fff"
-          d="M26 0C11.664 0 0 11.663 0 26s11.664 26 26 26 26-11.663 26-26S40.336 0 26 0zm14.495 17.329l-16 18a1.997 1.997 0 01-2.745.233l-10-8a2 2 0 012.499-3.124l8.517 6.813L37.505 14.67a2.001 2.001 0 012.99 2.659z"/>
-</svg>
\ No newline at end of file
+<svg width="21" height="11" viewBox="0 0 21 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.9268 0.120905C20.8106 -0.0171521 20.5976 -0.0404273 20.4509 0.0689341L6.79774 10.2571L0.576272 4.55434C0.442354 4.43107 0.22761 4.43339 0.0966553 4.55945C-0.0342994 4.68555 -0.0318861 4.88765 0.102075 5.01092L6.53761 10.9094C6.65955 11.0214 6.85083 11.0307 6.98437 10.9311L20.8716 0.568872C21.0182 0.459511 21.0429 0.258922 20.9268 0.120905Z" fill="white"/>
+</svg>
diff --git a/src/theme/sugar/icons/warning.svg b/src/theme/sugar/icons/warning.svg
deleted file mode 100644
index ee396b0..0000000
--- a/src/theme/sugar/icons/warning.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
-    <path fill="#000"
-          d="M49.466 41.26L29.216 6.85c-.69-1.16-1.89-1.85-3.22-1.85-1.32 0-2.53.69-3.21 1.85L2.536 41.26c-.71 1.2-.72 2.64-.03 3.85.68 1.18 1.89 1.89 3.24 1.89h40.51c1.35 0 2.56-.71 3.23-1.89.7-1.21.69-2.65-.02-3.85zm-25.53-21.405h3.381v3.187l-.724 8.92H24.66l-.725-8.92v-3.187zm2.97 17.344a1.712 1.712 0 01-1.267.543c-.491 0-.914-.181-1.268-.543a1.788 1.788 0 01-.531-1.297c0-.502.176-.935.53-1.297a1.712 1.712 0 011.269-.544c.49 0 .914.181 1.268.544s.53.795.53 1.297c0 .503-.176.934-.53 1.297z"/>
-</svg>
\ No newline at end of file
diff --git a/src/timer.js b/src/timer.js
deleted file mode 100644
index d298105..0000000
--- a/src/timer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export default class Timer {
-    constructor(callback, delay) {
-      this.startedAt = Date.now();
-      this.callback = callback;
-      this.delay = delay;
-  
-      this.timer = setTimeout(callback, delay);
-    }
-  
-    pause() {
-      this.stop();
-      this.delay -= Date.now() - this.startedAt;
-    }
-  
-    resume() {
-      this.stop();
-      this.startedAt = Date.now();
-      this.timer = setTimeout(this.callback, this.delay);
-    }
-  
-    stop() {
-      clearTimeout(this.timer);
-    }
-  }
\ No newline at end of file
diff --git a/src/bus.js b/src/utils/bus.js
similarity index 65%
rename from src/bus.js
rename to src/utils/bus.js
index f6505f0..9903269 100644
--- a/src/bus.js
+++ b/src/utils/bus.js
@@ -1,3 +1,3 @@
-import mitt from 'mitt'
-const eventBus = mitt();
+import mitt from 'mitt'
+const eventBus = mitt();
 export default eventBus;
\ No newline at end of file
diff --git a/src/helpers.js b/src/utils/helpers.js
similarity index 53%
rename from src/helpers.js
rename to src/utils/helpers.js
index e9e1660..19aa637 100644
--- a/src/helpers.js
+++ b/src/utils/helpers.js
@@ -1,48 +1,30 @@
-import Vue from 'vue';
-export const removeElement = (el) => {
-  console.log(el);
-  if (typeof el.remove !== 'undefined') {
-    el.remove()
-  } else {
-    if (el.parentNode) el.parentNode.removeChild(el)
-  }
-}
-
-export const createComponent = (component, props, parentContainer, slots = {}) => {
-  // const vNode = h(component, props, slots)
-  // const container = document.createElement('div');
-  // console.log(parentContainer, container);
-  // container.classList.add('v-toast--pending')
-  // parentContainer.appendChild(container);
-  // h(vNode, container);
-
-  // return vNode.component
-  // return Vue.component('MeshkeeToast', {
-  //   render: (createElement) => {
-  //     return createElement(
-  //       'div',
-  //       { class: { 'v-toast--pending': true } },
-  //       MeshkeeToast
-  //     )
-  //   }
-  // });
-  const toastTpl = Vue.extend({
-    data() {
-      return {
-      }
-    },
-    render(h) {
-      return h(
-        component,
-        {
-          style: this.extStyle,
-          props
-        }
-      )
-    }
-  });
-  let toastVM = new toastTpl();
-  const tpl = toastVM.$mount().$el;
-  parentContainer.appendChild(tpl);
-  return toastVM.$children[0];
-}
+import Vue from 'vue';
+export const removeElement = (el) => {
+  if (typeof el.remove !== 'undefined') {
+    el.remove()
+  } else {
+    if (el.parentNode) el.parentNode.removeChild(el)
+  }
+}
+
+export const createComponent = (component, props, parentContainer, slots = {}) => {
+  const toastTpl = Vue.extend({
+    data() {
+      return {
+      }
+    },
+    render(h) {
+      return h(
+        component,
+        {
+          style: this.extStyle,
+          props
+        }
+      )
+    }
+  });
+  let toastVM = new toastTpl();
+  const tpl = toastVM.$mount().$el;
+  parentContainer.appendChild(tpl);
+  return toastVM.$children[0];
+}
diff --git a/src/positions.js b/src/utils/positions.js
similarity index 94%
rename from src/positions.js
rename to src/utils/positions.js
index 3f0e086..2b082d0 100644
--- a/src/positions.js
+++ b/src/utils/positions.js
@@ -1,8 +1,8 @@
-export default Object.freeze({
-    TOP_RIGHT: 'top-right',
-    TOP: 'top',
-    TOP_LEFT: 'top-left',
-    BOTTOM_RIGHT: 'bottom-right',
-    BOTTOM: 'bottom',
-    BOTTOM_LEFT: 'bottom-left',
+export default Object.freeze({
+    TOP_RIGHT: 'top-right',
+    TOP: 'top',
+    TOP_LEFT: 'top-left',
+    BOTTOM_RIGHT: 'bottom-right',
+    BOTTOM: 'bottom',
+    BOTTOM_LEFT: 'bottom-left',
   })
\ No newline at end of file
diff --git a/src/utils/timer.js b/src/utils/timer.js
new file mode 100644
index 0000000..c858e92
--- /dev/null
+++ b/src/utils/timer.js
@@ -0,0 +1,47 @@
+export default class Timer {
+  constructor(callback, delay) {
+    this.startedAt = Date.now();
+    this.callback = callback;
+    this.delay = delay;
+    this.timer = setTimeout(callback, delay);
+    this.index = 0;
+    this.width = 0;
+    this.widthTimer = null;
+  }
+
+  pause() {
+    this.stop();
+    this.delay -= Date.now() - this.startedAt;
+  }
+
+  resume() {
+    this.stop();
+    this.startedAt = Date.now();
+    this.timer = setTimeout(this.callback, this.delay);
+  }
+
+  stop() {
+    clearTimeout(this.timer);
+  }
+
+  move(elem, stop) {
+    if (stop) {
+      this.index = 0;
+      return clearInterval(this.widthTimer);
+    }
+
+    if (this.index == 0) {
+      this.index = 1;
+      this.widthTimer = setInterval(() => {
+        if (this.width >= 100) {
+          clearInterval(this.widthTimer);
+          this.index = 0;
+        } else {
+          this.width++;
+          elem.style.width = this.width + "%";
+        }
+      }, (this.delay / 100));
+    }
+
+  }
+}
\ No newline at end of file