npm - clipxjs - Versions diffs - 1.2.2 → 1.3.0 - Mend

clipxjs 1.2.2 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/clipx.min.js CHANGED Viewed

@@ -1,8 +1,2 @@
-/*
-    ClipX JS
-    https://clipx.js.org
-    Version: 1.2.0
-    Copyright (c) 2024 Mr Akshay Shinde
-    Licensed under the MIT license
-*/
-(function(t){function e(){this.attach=this.attach.bind(this),this.isProcessing=!1,this.disable={msg:!1,toast:!1},this.customStyles={}}e.prototype.copyText=function(t){if(navigator.clipboard)return navigator.clipboard.writeText(t);if(navigator.permissions)return navigator.permissions.query({name:"clipboard-write"}).then(function(e){if("granted"===e.state||"prompt"===e.state)return navigator.clipboard.writeText(t);throw new Error("Clipboard write permission denied.")});var e=document.createElement("textarea");return e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),Promise.resolve()},e.prototype.cutText=function(t,e){return this.copyText(t).then(function(){e&&(e.value="",e.textContent="")})},e.prototype.copyFromElement=function(t){var e=t.value||t.textContent;return this.copyText(e)},e.prototype.cutFromElement=function(t){var e=t.value||t.textContent;return this.cutText(e,t)},e.prototype.attach=function(t){var e=document.querySelectorAll(t);e.forEach(function(t){t.addEventListener("click",function(){if(!this.isProcessing){this.isProcessing=!0;var e,n=t.getAttribute("data-clipx-target"),o=t.getAttribute("data-clipx-text"),i=t.hasAttribute("data-clipx-cut"),s=t.getAttribute("data-clipx-msg"),a=t.hasAttribute("data-clipx-toast"),r=t.hasAttribute("data-clipx-disable-msg"),c=t.hasAttribute("data-clipx-disable-toast"),l=t.getAttribute("data-clipx-toast-position")||"bottom",p=parseInt(t.getAttribute("data-clipx-duration"),10)||1500;if(n){var d=document.querySelector(n);d&&(e=i?this.cutFromElement(d):this.copyFromElement(d))}else o&&(e=i?this.cutText(o):this.copyText(o));e&&e.then(()=>this.onSuccess(t,s,a,r,c,l,p)).catch(e=>this.onError(t,e)).finally(()=>{this.isProcessing=!1})}}.bind(this))}.bind(this))},e.prototype.onSuccess=function(t,e,n,o,i,s,a){var r=t.textContent,c=e||"Copied !",l="top"===s?"clipx-toast top":"clipx-toast bottom";if(n||o||this.disable.msg||(t.textContent=c),i||this.disable.toast)setTimeout(function(){this.disable.msg||(t.textContent=r)}.bind(this),a);else{var p=document.createElement("div");p.className=l;var d='<svg class="clipx-js-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(0,210,65,1)" fill="currentColor"><path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path></svg>';p.innerHTML=d+c,p.setAttribute("role","alert"),p.setAttribute("aria-live","assertive"),p.style.cssText=this.customStyles.toast||"",document.body.appendChild(p),p.style.opacity=0,setTimeout(()=>p.style.opacity=1,0),setTimeout(function(){p.style.opacity=0,setTimeout(()=>document.body.removeChild(p),500),n||o||this.disable.msg||(t.textContent=r)}.bind(this),a)}},e.prototype.onError=function(t,e){console.error("Failed to cut/copy text: ",e);var n=document.createElement("div");n.className="clipx-toast error";var o='<svg xmlns="http://www.w3.org/2000/svg" class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="rgba(231,0,0,1)" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>';n.innerHTML=o+"Failed to copy!",n.setAttribute("role","alert"),n.setAttribute("aria-live","assertive"),n.style.cssText=this.customStyles.toast||"",document.body.appendChild(n),setTimeout(()=>{n.style.opacity=0,setTimeout(()=>document.body.removeChild(n),500)},1500)},e.prototype.setCustomStyles=function(t){this.customStyles=t},t.clipx=e;var n=document.createElement("style");n.textContent="\n        .clipx-toast {\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n    position: fixed;\n    left: 50%;\n    transform: translateX(-50%);\n    background-color: #fff;\n    color: #363636;\n    padding: 8px 10px;\n    border-radius: 8px;\n    z-index: 9999;\n    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);\n    font-size: 14px;\n    text-align: center;\n    opacity: 0;\n    animation: fadeIn 0.5s ease forwards;\n    transition: opacity 0.5s ease;\n    max-width: 90%; /* Ensure it fits well on smaller screens */\n    width: auto; /* Ensure the width adjusts based on content */\n    display: flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.clipx-toast.top {\n    top: 20px;\n    bottom: auto;\n}\n\n.clipx-toast.bottom {\n    bottom: 20px;\n}\n\n.clipx-toast.error {\n    background-color: #f8d7da;\n    color: #721c24;\n}\n\n@keyframes fadeIn {\n    from {\n        opacity: 0;\n        transform: translateY(10px) translateX(-50%);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0) translateX(-50%);\n    }\n}\n\n@keyframes fadeOut {\n    from {\n        opacity: 1;\n        transform: translateY(0) translateX(-50%);\n    }\n    to {\n        opacity: 0;\n        transform: translateY(10px) translateX(-50%);\n    }\n}",document.head.appendChild(n)})(this);
+/*! ClipX JS v1.3.0 | MIT | https://clipx.js.org */
+!function(){var t=function(){"use strict";var t="undefined"!=typeof document&&document,i="undefined"!=typeof navigator?navigator:{},o=(t,i)=>'<svg class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="'+t+'" aria-hidden="true"><path fill-rule="evenodd" d="'+i+'"/></svg>',e={ok:o("#00d241","M12 2a10 10 0 100 20 10 10 0 000-20zm-1 14.4-4-4 1.4-1.4 2.6 2.6 5.6-5.6L18 9.4z"),err:o("#e70000","M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2zm0-4h-2V7h2z")},r=t=>t&&t.parentNode&&t.parentNode.removeChild(t),s=t=>/^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName),n=t=>s(t)?t.value:t.textContent,a=(t,i,o)=>t.dispatchEvent(o?new CustomEvent(i,{bubbles:!0,detail:o}):new Event(i,{bubbles:!0})),c=(t,i)=>{s(t)?(t.value=i,a(t,"input"),a(t,"change")):t.textContent=i},p=i=>new Promise((o,e)=>{var s=t.activeElement,n=t.createElement("textarea"),a=!1;n.value=i,n.readOnly=!0,n.style.cssText="position:fixed;top:0;opacity:0",t.body.appendChild(n),n.select();try{n.setSelectionRange(0,i.length),a=t.execCommand("copy")}catch(t){}r(n),s&&s.focus&&s.focus(),a?o():e(Error("Copy failed"))}),h={trim:t=>t.trim(),uppercase:t=>t.toUpperCase(),lowercase:t=>t.toLowerCase(),capitalize:t=>t.charAt(0).toUpperCase()+t.slice(1),titlecase:t=>t.toLowerCase().replace(/(^|\s)\S/g,t=>t.toUpperCase()),collapse:t=>t.replace(/\s+/g," "),singleline:t=>t.replace(/\s*[\r\n]+\s*/g," "),striphtml:t=>t.replace(/<[^>]*>/g,"")};function l(){this.disable={msg:!1,toast:!1},this.customStyles={},this.formatters=Object.assign({},h),this._sel=[],this._fn=null,this.t={}}var u=l.prototype;return l.version="1.3.0",u.addFormatter=function(t,i){if("function"!=typeof i)throw new TypeError("Formatter must be a function");return this.formatters[String(t).toLowerCase()]=i,this},u.format=function(t,i){return t=null==t?"":String(t),(Array.isArray(i)?i:String(i||"").split(",")).forEach(i=>{i=String(i).trim().toLowerCase();var o=this.formatters[i];o?t=String(o(t)):i&&console.warn("ClipX: unknown format '"+i+"'")}),t},u.copyText=function(t){return t=null==t?"":String(t),i.clipboard&&i.clipboard.writeText?i.clipboard.writeText(t).catch(()=>p(t)):p(t)},u.cutText=function(t,i){return this.copyText(t).then(()=>{i&&c(i,"")})},u.copyFromElement=function(t,i){var o=this.format(n(t),i);return o?this.copyText(o):Promise.reject(Error("Nothing to copy."))},u.cutFromElement=function(t,i){var o=this.format(n(t),i);return o?this.cutText(o,t):Promise.reject(Error("Nothing to copy."))},u.pasteText=function(){return i.clipboard&&i.clipboard.readText?i.clipboard.readText():Promise.reject(Error("Paste is not supported here."))},u.pasteToElement=function(t,i){return this.pasteText().then(o=>(o=this.format(o,i),c(t,o),o))},u.attach=function(i){return t?(i=i||"[data-clipx-text],[data-clipx-target],[data-clipx-paste]",this._sel.indexOf(i)<0&&this._sel.push(i),this._fn||t.addEventListener("click",this._fn=t=>{var i=t.target;i&&1!=i.nodeType&&(i=i.parentElement),(i=i&&i.closest&&i.closest(this._sel.join(",")))&&this._run(i)}),this):this},u.detach=function(){return this._fn&&t.removeEventListener("click",this._fn),this._fn=null,this._sel=[],this},u._run=function(i){if(!i.__cx){var o,e,r=t=>i.getAttribute("data-clipx-"+t),s=t=>i.hasAttribute("data-clipx-"+t),n=r("format"),a=s("cut"),c="copy",p=parseInt(r("duration"),10);try{if(r("paste")){if(c="paste",!(e=t.querySelector(r("paste"))))throw Error("Paste target not found");o=this.pasteToElement(e,n)}else if(r("target")){if(!(e=t.querySelector(r("target"))))throw Error("Target not found");c=a?"cut":"copy",o=a?this.cutFromElement(e,n):this.copyFromElement(e,n)}else{if(!s("text"))throw Error("Add data-clipx-target, -text or -paste");if(!(e=this.format(r("text"),n)))throw Error("Nothing to copy.");o=this.copyText(e)}}catch(t){return this.onError(i,t)}i.__cx=1,o.then(()=>this.onSuccess(i,r("msg"),s("toast"),s("disable-msg"),s("disable-toast"),r("toast-position")||"bottom",p>0?p:1500,c),t=>this.onError(i,t)).then(()=>{i.__cx=0})}},u.onSuccess=function(t,i,o,e,r,s,n,c){i=i||("paste"==c?"Pasted!":"Copied!"),o||e||this.disable.msg||(void 0===t.__o&&(t.__o=t.innerHTML),t.textContent=i,clearTimeout(t.__t),t.__t=setTimeout(()=>{t.innerHTML=t.__o,t.__o=void 0},n)),r||this.disable.toast||this._toast(i,"ok",s,n),a(t,"clipx:success",{type:c||"copy"})},u.onError=function(t,i){console.error("ClipX:",i),this.disable.toast||this._toast(i&&"Nothing to copy."==i.message?i.message:"Failed to copy!","err","bottom",1500),a(t,"clipx:error",{error:i})},u._toast=function(i,o,s,n){if(!t.getElementById("clipx-js-styles")){var a=t.createElement("style");a.id="clipx-js-styles",a.textContent=".clipx-toast{font:14px system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;position:fixed;left:50%;transform:translateX(-50%);background:#fff;color:#363636;padding:8px 10px;border-radius:8px;z-index:9999;box-shadow:0 3px 10px rgba(0,0,0,.1),0 3px 3px rgba(0,0,0,.05);opacity:0;transition:opacity .3s;max-width:90%;display:flex;align-items:center;gap:5px;pointer-events:none}.clipx-show{opacity:1}.clipx-toast.top{top:20px}.clipx-toast.bottom{bottom:20px}.clipx-toast.error{background:#f8d7da;color:#721c24}@media(prefers-reduced-motion:reduce){.clipx-toast{transition:none}}",(t.head||t.documentElement).appendChild(a)}s="top"==s?"top":"bottom",r(this.t[s]);var c=t.createElement("div"),p=t.createElement("span");c.className="clipx-toast "+s+("err"==o?" error":""),c.setAttribute("role","err"==o?"alert":"status"),c.innerHTML=e[o],p.textContent=i,c.appendChild(p),c.style.cssText=(this.customStyles.toast||"")+";"+("err"==o&&this.customStyles.error||""),t.body.appendChild(c),this.t[s]=c,setTimeout(()=>c.classList.add("clipx-show"),10),setTimeout(()=>{c.classList.remove("clipx-show"),setTimeout(()=>{r(c),this.t[s]==c&&(this.t[s]=null)},300)},n)},u.setCustomStyles=function(t){return this.customStyles=t||{},this},l.ClipX=l,l}();"object"==typeof module&&module.exports&&(module.exports=t),"undefined"!=typeof window&&(window.clipx=window.ClipX=t)}();

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "clipxjs",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "ClipX.js is an ultra-light JavaScript library that simplifies clipboard tasks and enriches user feedback. It offers straightforward copy, cut, and paste capabilities, and built-in toast notifications that you can easily customize, providing a quick and efficient way to handle clipboard and notification needs. ——— The Smarter Clipboard Solution.",
   "main": "src/clipx.js",
   "scripts": {

package/src/clipx.min.js ADDED Viewed

@@ -0,0 +1 @@

package/src/clipx.js DELETED Viewed

@@ -1,283 +0,0 @@
-/*
-    ClipX JS
-    https://clipx.js.org
-    Version: 1.2.0
-    Copyright (c) 2024 Mr Akshay Shinde
-    Licensed under the MIT license
-*/
-(function (global) {
-  // Constructor for the clipx object
-  function clipx() {
-    this.attach = this.attach.bind(this); // Bind the attach method to the instance
-    this.isProcessing = false; // Flag to prevent multiple executions
-    // Global flags to disable specific features
-    this.disable = {
-      msg: false,
-      toast: false,
-    };
-    this.customStyles = {}; // Store custom styles for the toast notifications
-  }
-  // Method to copy text to clipboard
-  clipx.prototype.copyText = function (text) {
-    if (navigator.clipboard) {
-      // Use the Clipboard API if available
-      return navigator.clipboard.writeText(text);
-    } else if (navigator.permissions) {
-      // Check permissions if Clipboard API is not available
-      return navigator.permissions
-        .query({ name: "clipboard-write" })
-        .then(function (permissionStatus) {
-          if (
-            permissionStatus.state === "granted" ||
-            permissionStatus.state === "prompt"
-          ) {
-            return navigator.clipboard.writeText(text);
-          } else {
-            throw new Error("Clipboard write permission denied.");
-          }
-        });
-    } else {
-      // Fallback to using a temporary textarea element for older browsers
-      var textArea = document.createElement("textarea");
-      textArea.value = text;
-      document.body.appendChild(textArea);
-      textArea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textArea);
-      return Promise.resolve();
-    }
-  };
-  // Method to cut (copy and then clear) text from an element
-  clipx.prototype.cutText = function (text, element) {
-    return this.copyText(text).then(function () {
-      if (element) {
-        element.value = ""; // Clear value for input elements
-        element.textContent = ""; // Clear text content for non-input elements
-      }
-    });
-  };
-  // Method to copy text from an element
-  clipx.prototype.copyFromElement = function (element) {
-    var text = element.value || element.textContent; // Get text from input or non-input element
-    return this.copyText(text);
-  };
-  // Method to cut (copy and then clear) text from an element
-  clipx.prototype.cutFromElement = function (element) {
-    var text = element.value || element.textContent; // Get text from input or non-input element
-    return this.cutText(text, element);
-  };
-  // Method to attach event listeners to elements matching the selector
-  clipx.prototype.attach = function (selector) {
-    var elements = document.querySelectorAll(selector);
-    elements.forEach(
-      function (element) {
-        element.addEventListener(
-          "click",
-          function () {
-            if (this.isProcessing) return; // Prevent multiple executions
-            this.isProcessing = true;
-            var targetSelector = element.getAttribute("data-clipx-target");
-            var text = element.getAttribute("data-clipx-text");
-            var cut = element.hasAttribute("data-clipx-cut");
-            var msgType = element.getAttribute("data-clipx-msg");
-            var toastOnly = element.hasAttribute("data-clipx-toast");
-            var disableMsg = element.hasAttribute("data-clipx-disable-msg");
-            var disableToast = element.hasAttribute("data-clipx-disable-toast");
-            var toastPosition =
-              element.getAttribute("data-clipx-toast-position") || "bottom";
-            var contentDuration =
-              parseInt(element.getAttribute("data-clipx-duration"), 10) || 1500;
-            var actionPromise;
-            // Determine the action based on attributes
-            if (targetSelector) {
-              var targetElement = document.querySelector(targetSelector);
-              if (targetElement) {
-                actionPromise = cut
-                  ? this.cutFromElement(targetElement)
-                  : this.copyFromElement(targetElement);
-              }
-            } else if (text) {
-              actionPromise = cut ? this.cutText(text) : this.copyText(text);
-            }
-            if (actionPromise) {
-              actionPromise
-                .then(() =>
-                  this.onSuccess(
-                    element,
-                    msgType,
-                    toastOnly,
-                    disableMsg,
-                    disableToast,
-                    toastPosition,
-                    contentDuration
-                  )
-                )
-                .catch((err) => this.onError(element, err))
-                .finally(() => {
-                  this.isProcessing = false;
-                });
-            }
-          }.bind(this)
-        );
-      }.bind(this)
-    );
-  };
-  // Handle successful copy/cut operation
-  clipx.prototype.onSuccess = function (
-    element,
-    msgType,
-    toastOnly,
-    disableMsg,
-    disableToast,
-    toastPosition,
-    contentDuration
-  ) {
-    var originalText = element.textContent; // Store original text content
-    var customMessage = msgType || "Copied !"; // Use provided message or default to "Copied!"
-    var toastClass =
-      toastPosition === "top" ? "clipx-toast top" : "clipx-toast bottom";
-    if (!toastOnly && !disableMsg && !this.disable.msg) {
-      element.textContent = customMessage; // Update element's text content
-    }
-    if (!disableToast && !this.disable.toast) {
-      var toast = document.createElement("div");
-      toast.className = toastClass;
-      // Insert the success SVG icon along with the custom message
-      var successSVG = `<svg class="clipx-js-svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(0,210,65,1)" fill="currentColor"><path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path></svg>`;
-      toast.innerHTML = successSVG + customMessage;
-      toast.setAttribute("role", "alert");
-      toast.setAttribute("aria-live", "assertive");
-      toast.style.cssText = this.customStyles.toast || ""; // Apply custom styles if any
-      document.body.appendChild(toast);
-      // Fade-in and fade-out animation
-      toast.style.opacity = 0;
-      setTimeout(() => (toast.style.opacity = 1), 0);
-      setTimeout(
-        function () {
-          toast.style.opacity = 0;
-          setTimeout(() => document.body.removeChild(toast), 500);
-          if (!toastOnly && !disableMsg && !this.disable.msg) {
-            element.textContent = originalText; // Restore original text content
-          }
-        }.bind(this),
-        contentDuration
-      );
-    } else {
-      setTimeout(
-        function () {
-          if (!this.disable.msg) {
-            element.textContent = originalText; // Restore original text content
-          }
-        }.bind(this),
-        contentDuration
-      );
-    }
-  };
-  // Handle errors during copy/cut operation
-  clipx.prototype.onError = function (element, err) {
-    console.error("Failed to cut/copy text: ", err);
-    var toast = document.createElement("div");
-    toast.className = "clipx-toast error";
-    // Insert the error SVG icon along with the error message
-    var errorSVG = `<svg xmlns="http://www.w3.org/2000/svg" class="clipx-js-svg-icon" viewBox="0 0 24 24" width="16" height="16" fill="rgba(231,0,0,1)" fill="currentColor"><path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path></svg>`;
-    toast.innerHTML = errorSVG + "Failed to copy!";
-    toast.setAttribute("role", "alert");
-    toast.setAttribute("aria-live", "assertive");
-    toast.style.cssText = this.customStyles.toast || "";
-    document.body.appendChild(toast);
-    setTimeout(() => {
-      toast.style.opacity = 0;
-      setTimeout(() => document.body.removeChild(toast), 500);
-    }, 1500);
-  };
-  // Method to set custom styles for toast notifications
-  clipx.prototype.setCustomStyles = function (styles) {
-    this.customStyles = styles;
-  };
-  // Expose the clipx constructor to the global object
-  global.clipx = clipx;
-  // Add default styles for toast notifications
-  var style = document.createElement("style");
-  style.textContent = `
-        .clipx-toast {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #fff;
-    color: #363636;
-    padding: 8px 10px;
-    border-radius: 8px;
-    z-index: 9999;
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
-    font-size: 14px;
-    text-align: center;
-    opacity: 0;
-    animation: fadeIn 0.5s ease forwards;
-    transition: opacity 0.5s ease;
-    max-width: 90%; /* Ensure it fits well on smaller screens */
-    width: auto; /* Ensure the width adjusts based on content */
-    display: flex;
-    align-items: center;
-    gap: 5px;
-}
-.clipx-toast.top {
-    top: 20px;
-    bottom: auto;
-}
-.clipx-toast.bottom {
-    bottom: 20px;
-}
-.clipx-toast.error {
-    background-color: #f8d7da;
-    color: #721c24;
-}
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px) translateX(-50%);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) translateX(-50%);
-    }
-}
-@keyframes fadeOut {
-    from {
-        opacity: 1;
-        transform: translateY(0) translateX(-50%);
-    }
-    to {
-        opacity: 0;
-        transform: translateY(10px) translateX(-50%);
-    }
-}`;
-  document.head.appendChild(style);
-})(this);