@grapesjs/studio-sdk-plugins 1.0.24 → 1.0.25

package/dist/animationComponent/index.es.js

@@ -1,5 +1,5 @@
-const P = "app.grapesjs.com", z = "app-stage.grapesjs.com", A = [
-  P,
+const T = "app.grapesjs.com", z = "app-stage.grapesjs.com", U = [
+  T,
   z,
   "localhost",
   "127.0.0.1",
@@ -9,82 +9,82 @@ const P = "app.grapesjs.com", z = "app-stage.grapesjs.com", A = [
   // For stackblitz.com demos
   "-sandpack.codesandbox.io"
   // For Sandpack demos
-], B = "license:check:start", V = "license:check:end", F = () => typeof window < "u", O = ({ isDev: t, isStage: n }) => `${t ? "" : `https://${n ? z : P}`}/api`, X = () => {
-  const t = F() && window.location.hostname;
-  return !!t && (A.includes(t) || A.some((n) => t.endsWith(n)));
+], N = "license:check:start", V = "license:check:end", O = () => typeof window < "u", B = ({ isDev: t, isStage: n }) => `${t ? "" : `https://${n ? z : T}`}/api`, F = () => {
+  const t = O() && window.location.hostname;
+  return !!t && (U.includes(t) || U.some((n) => t.endsWith(n)));
 };
-async function M({
+async function X({
   path: t,
   baseApiUrl: n,
   method: e = "GET",
   headers: r = {},
   params: i,
-  body: o
+  body: a
 }) {
-  const c = `${n || O({ isDev: !1, isStage: !1 })}${t}`, l = {
+  const c = `${n || B({ isDev: !1, isStage: !1 })}${t}`, l = {
     method: e,
     headers: {
       "Content-Type": "application/json",
       ...r
     }
   };
-  o && (l.body = JSON.stringify(o));
-  const f = i ? new URLSearchParams(i).toString() : "", a = f ? `?${f}` : "", s = await fetch(`${c}${a}`, l);
-  if (!s.ok)
-    throw new Error(`HTTP error! status: ${s.status}`);
-  return s.json();
+  a && (l.body = JSON.stringify(a));
+  const f = i ? new URLSearchParams(i).toString() : "", s = f ? `?${f}` : "", o = await fetch(`${c}${s}`, l);
+  if (!o.ok)
+    throw new Error(`HTTP error! status: ${o.status}`);
+  return o.json();
 }
-var I = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(I || {});
+var b = /* @__PURE__ */ ((t) => (t.free = "free", t.startup = "startup", t.business = "business", t.enterprise = "enterprise", t))(b || {});
 const L = {
-  [I.free]: 0,
-  [I.startup]: 10,
-  [I.business]: 20,
-  [I.enterprise]: 30
+  [b.free]: 0,
+  [b.startup]: 10,
+  [b.business]: 20,
+  [b.enterprise]: 30
 };
-function W(t) {
+function M(t) {
   const n = t;
   return n.init = (e) => (r) => t(r, e), n;
 }
-const Y = (t) => /* @__PURE__ */ W(t);
-async function $({
+const W = (t) => /* @__PURE__ */ M(t);
+async function Y({
   editor: t,
   plan: n,
   pluginName: e,
   licenseKey: r,
   cleanup: i
 }) {
-  let o = "", m = !1;
-  const c = X(), l = (a) => {
-    console.warn("Cleanup plugin:", e, "Reason:", a), i();
-  }, f = (a = {}) => {
-    var b;
-    const { error: s, sdkLicense: g } = a, p = (b = a.plan) == null ? void 0 : b.category;
-    if (!(g || a.license) || s)
-      l(s || "Invalid license");
-    else if (p) {
-      const C = L[n], U = L[p];
-      C > U && l({ pluginRequiredPlan: n, licensePlan: p });
+  let a = "", m = !1;
+  const c = F(), l = (s) => {
+    console.warn("Cleanup plugin:", e, "Reason:", s), i();
+  }, f = (s = {}) => {
+    var u;
+    const { error: o, sdkLicense: p } = s, d = (u = s.plan) == null ? void 0 : u.category;
+    if (!(p || s.license) || o)
+      l(o || "Invalid license");
+    else if (d) {
+      const C = L[n], E = L[d];
+      C > E && l({ pluginRequiredPlan: n, licensePlan: d });
     }
   };
-  t.on(B, (a) => {
-    o = a == null ? void 0 : a.baseApiUrl, m = !0;
-  }), t.on(V, (a) => {
-    f(a);
+  t.on(N, (s) => {
+    a = s == null ? void 0 : s.baseApiUrl, m = !0;
+  }), t.on(V, (s) => {
+    f(s);
   }), setTimeout(async () => {
     if (!m) {
       if (c) return;
       if (r) {
-        const a = await j({ licenseKey: r, pluginName: e, baseApiUrl: o });
-        a && f(a);
+        const s = await $({ licenseKey: r, pluginName: e, baseApiUrl: a });
+        s && f(s);
       } else
         l("The `licenseKey` option not provided");
     }
   }, 2e3);
 }
-async function j(t) {
+async function $(t) {
   const { licenseKey: n, pluginName: e, baseApiUrl: r } = t;
   try {
-    return (await M({
+    return (await X({
       baseApiUrl: r,
       path: `/sdk/${n || "na"}`,
       method: "POST",
@@ -97,895 +97,900 @@ async function j(t) {
     return console.error("Error during SDK license check:", i), !1;
   }
 }
-const H = (...t) => (n) => t.some((e) => n.is(e));
-var u = /* @__PURE__ */ ((t) => (t.name = "animation-name", t.duration = "animation-duration", t.delay = "animation-delay", t.fillMode = "animation-fill-mode", t))(u || {}), T = /* @__PURE__ */ ((t) => (t.staggerDelay = "--stagger-delay", t))(T || {}), d = /* @__PURE__ */ ((t) => (t.onScroll = "--animation-on-scroll", t.threshold = "--animation-threshold", t.repeat = "--animation-repeat", t))(d || {});
-const y = "animation", v = "animation-group", E = "animation:update", k = "animation-group:update", Z = {
+const j = (...t) => (n) => t.some((e) => n.is(e));
+var y = /* @__PURE__ */ ((t) => (t.name = "animation-name", t.duration = "animation-duration", t.delay = "animation-delay", t.iterationCount = "animation-iteration-count", t.timingFunction = "animation-timing-function", t.fillMode = "animation-fill-mode", t))(y || {}), v = /* @__PURE__ */ ((t) => (t.onScroll = "--animation-on-scroll", t.threshold = "--animation-threshold", t.repeat = "--animation-repeat", t))(v || {});
+const g = "animation", I = "animation-group", A = "animation:update", x = "animation-group:update", P = {
   category: { id: "animations", label: "Animations" },
   select: !0
-}, w = (t) => (t == null ? void 0 : t.type) === y, x = (t) => (t == null ? void 0 : t.type) === v, N = (t) => w(t) || x(t), _ = {
-  isVisible: ({ component: t }) => N(t)
-}, S = {
+}, k = (t) => (t == null ? void 0 : t.getType()) === g, w = (t) => (t == null ? void 0 : t.getType()) === I, Z = (t) => k(t) || w(t), S = {
+  isVisible: ({ component: t }) => k(t)
+}, H = {
   isVisible: ({ component: t }) => w(t)
-}, K = {
-  isVisible: ({ component: t }) => x(t)
-}, D = {
+}, _ = {
+  isVisible: ({ component: t }) => k(t) && w(t == null ? void 0 : t.parent()) ? !1 : Z(t)
+}, R = {
   isVisible: ({ component: t, sector: n }) => {
     var e;
-    return w(t) && x(t == null ? void 0 : t.parent()) ? !1 : N(t) && ((e = n.getProperty(d.onScroll)) == null ? void 0 : e.getValue()) === "true";
+    return k(t) && w(t == null ? void 0 : t.parent()) ? !1 : Z(t) && ((e = n.getProperty(v.onScroll)) == null ? void 0 : e.getValue()) === "true";
   }
 }, G = {
   animation: '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M16.5 14a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13"/><path fill="currentColor" d="M17.14 15.98a8.5 8.5 0 0 1-9.12-9.12 6.5 6.5 0 1 0 9.12 9.12"/><path fill="currentColor" d="M12.64 20.48a8.5 8.5 0 0 1-9.12-9.12 6.5 6.5 0 1 0 9.12 9.12"/></svg>',
   animationGroup: '<svg viewBox="0 0 24 24"><path d="M4 2a2 2 0 0 0-2 2v10h2V4h10V2H4m4 4a2 2 0 0 0-2 2v10h2V8h10V6H8m4 4a2 2 0 0 0-2 2v8c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-8Z"/></svg>'
-}, R = [
-  {
-    id: "bounce",
-    name: "Bounce",
-    css: `@keyframes bounce {
-    0%, 20%, 53%, 80%, to {
-        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
-        transform:translateZ(0)
-    }
-
-    40%, 43% {
-        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
-        transform:translate3d(0, -30px, 0)
+}, K = function(t) {
+  const n = this;
+  let e = null;
+  const r = () => {
+    e == null || e.disconnect(), e = null;
+  }, i = () => {
+    r();
+    const a = n.style;
+    a.animationName = "", requestAnimationFrame(() => {
+      const m = getComputedStyle(n), c = m.getPropertyValue("animation-name").trim(), l = m.getPropertyValue("--animation-on-scroll").trim() !== "false", f = parseFloat(m.getPropertyValue("--animation-threshold").trim()) || 0.2, s = m.getPropertyValue("--animation-repeat").trim() === "true", o = () => {
+        a.animationName = "none", n.offsetWidth, a.animationName = c, a.animationPlayState = "running";
+      };
+      if (!c || c === "none") {
+        a.animationName = "none", a.animationPlayState = "paused";
+        return;
+      }
+      if (!l) {
+        o();
+        return;
+      }
+      a.animationPlayState = "paused", e = new IntersectionObserver(
+        (p) => {
+          p.forEach((d) => {
+            d.isIntersecting && (o(), !s && r());
+          });
+        },
+        { threshold: f }
+      ), e.observe(n);
+    });
+  };
+  n.addEventListener(t.animationUpdateEvent, i), i();
+}, q = (t, n) => {
+  const { Components: e, Blocks: r, Canvas: i } = t, { block: a = {}, animationList: m = [] } = n, c = t.Components.events, l = "Animation", f = Object.values(v), s = Object.values(y);
+  return e.addType(g, {
+    block: a ? {
+      label: l,
+      media: G.animation,
+      content: { type: g },
+      ...P,
+      ...a
+    } : void 0,
+    model: {
+      defaults: {
+        emptyState: !0,
+        name: l,
+        traits: [],
+        script: K,
+        animationUpdateEvent: A,
+        "script-props": ["animationUpdateEvent"],
+        styles: m.map((o) => o.css).join(`
+`)
+      },
+      init() {
+        const { em: o } = this;
+        this.addStyle({
+          [y.name]: "fadeIn",
+          [y.duration]: "1s",
+          [y.fillMode]: "both",
+          ...n.animationStyle,
+          ...this.getStyle()
+        }), this.listenTo(o, c.mount, (p) => {
+          var h;
+          if (p !== this) return;
+          ((h = this.parent()) == null ? void 0 : h.get("type")) !== I || f.forEach((u) => this.removeStyle(u));
+        });
+      }
+    },
+    view: {
+      events: () => ({
+        animationstart: "onAnimationStart",
+        animationend: "onAnimationEnd"
+      }),
+      init() {
+        const { model: o } = this;
+        this.listenTo(o, c.styleUpdate, this.handleStyleChange);
+      },
+      onAnimationStart() {
+        var p;
+        if ((p = this.cmpSpots) != null && p.length) return;
+        const o = i.getSpots({ component: this.model });
+        this.cmpSpots = o, i.removeSpots(o), this.el.ownerDocument.body.style.overflowX = "hidden";
+      },
+      onAnimationEnd() {
+        const o = this.cmpSpots || [];
+        i.spots.add(o), this.cmpSpots = [], this.el.ownerDocument.body.style.overflowX = "";
+      },
+      triggerAnimation() {
+        this.el.dispatchEvent(new CustomEvent(A));
+      },
+      handleStyleChange(o, p) {
+        Object.keys((p == null ? void 0 : p.style) || {}).some((u) => s.includes(u) || f.includes(u)) && this.triggerAnimation();
+      },
+      onRender() {
+        this.triggerAnimation();
+      }
     }
-
-    70% {
-        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
-        transform:translate3d(0, -15px, 0)
+  }), () => {
+    r.remove(g), e.removeType(g);
+  };
+}, J = function(t) {
+  const n = this, e = "--animation-on-scroll", r = "--animation-threshold", i = "--animation-repeat";
+  let a = null;
+  const m = () => {
+    a == null || a.disconnect(), a = null;
+  }, c = () => {
+    m();
+    const l = getComputedStyle(n), f = l.getPropertyValue(e).trim() !== "false", s = parseFloat(l.getPropertyValue(r).trim()) || 0.2, o = l.getPropertyValue(i).trim() === "true", p = () => {
+      Array.from(n.children).forEach((d) => {
+        d instanceof HTMLElement && typeof d.dispatchEvent == "function" && d.dispatchEvent(new CustomEvent(x, { bubbles: !1 }));
+      });
+    };
+    if (!f) {
+      p();
+      return;
     }
-
-    90% {
-        transform:translate3d(0, -4px, 0)
+    a = new IntersectionObserver(
+      (d) => {
+        d.forEach((h) => {
+          h.isIntersecting ? (p(), !o && m()) : o && Array.from(n.children).forEach((u) => {
+            u instanceof HTMLElement && getComputedStyle(u).getPropertyValue(e).trim() !== "false" && (u.style.opacity = "0", u.style.animationPlayState = "paused");
+          });
+        });
+      },
+      { threshold: s }
+    ), a.observe(n);
+  };
+  n.addEventListener(t.animationGroupUpdateEvent, c), c();
+}, Q = (t, n) => {
+  const { Components: e, Blocks: r } = t, { blockGroup: i = {} } = n, a = "Animation Group";
+  return e.addType(I, {
+    block: i ? {
+      label: a,
+      media: G.animationGroup,
+      content: {
+        type: I,
+        components: [
+          { type: g },
+          { type: g },
+          { type: g }
+        ]
+      },
+      ...P,
+      ...i
+    } : void 0,
+    model: {
+      defaults: {
+        name: a,
+        emptyState: !0,
+        traits: [],
+        script: J,
+        animationGroupUpdateEvent: x,
+        "script-props": ["animationGroupUpdateEvent"],
+        droppable: j(g)
+      },
+      init() {
+        this.addStyle({
+          ...n.animationGroupStyle,
+          ...this.getStyle()
+        });
+        const m = this.components();
+        this.listenTo(m, "add remove", this.updateChildrenStaggerStyles), this.updateChildrenStaggerStyles();
+      },
+      updateChildrenStaggerStyles() {
+        this.components().forEach((m, c) => {
+          m.is(g) && m.addStyle(
+            {
+              "--stagger-index": c.toString(),
+              [y.delay]: "calc(var(--stagger-index, 0) * var(--stagger-delay, 0.3s))"
+            },
+            { partial: !0 }
+          );
+        });
+      }
+    },
+    view: {
+      init() {
+        const { model: m } = this;
+        this.listenTo(m, "component:styleUpdate", this.handleStyleChange);
+      },
+      triggerAnimation() {
+        this.el.dispatchEvent(new CustomEvent(x));
+      },
+      handleStyleChange() {
+        this.triggerAnimation(), this.model.updateChildrenStaggerStyles();
+      },
+      onRender() {
+        this.triggerAnimation();
+      }
     }
-}`
-  },
+  }), () => {
+    r.remove(I), e.removeType(I);
+  };
+}, tt = "animationComponent", nt = b.startup, D = [
   {
     id: "flash",
     name: "Flash",
     css: `@keyframes flash {
-    0%, 50%, to {
-        opacity:1
-    }
+      0%, 50%, to {
+          opacity:1
+      }
 
-    25%, 75% {
-        opacity:0
-    }
-}`
+      25%, 75% {
+          opacity:0
+      }
+  }`
   },
   {
     id: "pulse",
     name: "Pulse",
     css: `@keyframes pulse {
-    0% {
-        transform:scaleX(1)
-    }
+      0% {
+          transform:scaleX(1)
+      }
 
-    50% {
-        transform:scale3d(1.05, 1.05, 1.05)
-    }
+      50% {
+          transform:scale3d(1.05, 1.05, 1.05)
+      }
 
-    to {
-        transform:scaleX(1)
-    }
-}`
+      to {
+          transform:scaleX(1)
+      }
+  }`
   },
   {
     id: "shake",
     name: "Shake",
     css: `@keyframes shake {
-    0%, to {
-        transform:translateZ(0)
-    }
+      0%, to {
+          transform:translateZ(0)
+      }
 
-    10%, 30%, 50%, 70%, 90% {
-        transform:translate3d(-10px, 0, 0)
-    }
+      10%, 30%, 50%, 70%, 90% {
+          transform:translate3d(-10px, 0, 0)
+      }
 
-    20%, 40%, 60%, 80% {
-        transform:translate3d(10px, 0, 0)
-    }
-}`
+      20%, 40%, 60%, 80% {
+          transform:translate3d(10px, 0, 0)
+      }
+  }`
   },
   {
     id: "tada",
     name: "Tada",
     css: `@keyframes tada {
-    0% {
-        transform:scaleX(1)
-    }
+      0% {
+          transform:scaleX(1)
+      }
 
-    10%, 20% {
-        transform:scale3d(.9, .9, .9) rotate(-3deg)
-    }
+      10%, 20% {
+          transform:scale3d(.9, .9, .9) rotate(-3deg)
+      }
 
-    30%, 50%, 70%, 90% {
-        transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)
-    }
+      30%, 50%, 70%, 90% {
+          transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)
+      }
 
-    40%, 60%, 80% {
-        transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)
-    }
+      40%, 60%, 80% {
+          transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)
+      }
 
-    to {
-        transform:scaleX(1)
-    }
-}`
+      to {
+          transform:scaleX(1)
+      }
+  }`
   },
   {
     id: "heartBeat",
     name: "Heart Beat",
     css: `@keyframes heartBeat {
-    0% {
-        transform:scale(1)
-    }
+      0% {
+          transform:scale(1)
+      }
 
-    14% {
-        transform:scale(1.3)
-    }
+      14% {
+          transform:scale(1.3)
+      }
 
-    28% {
-        transform:scale(1)
-    }
+      28% {
+          transform:scale(1)
+      }
 
-    42% {
-        transform:scale(1.3)
-    }
+      42% {
+          transform:scale(1.3)
+      }
 
-    70% {
-        transform:scale(1)
-    }
-}`
+      70% {
+          transform:scale(1)
+      }
+  }`
+  },
+  {
+    id: "bounce",
+    name: "Bounce",
+    css: `@keyframes bounce {
+      0%, 20%, 53%, 80%, to {
+          animation-timing-function: cubic-bezier(.215, .61, .355, 1);
+          transform:translateZ(0)
+      }
+
+      40%, 43% {
+          animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+          transform:translate3d(0, -30px, 0)
+      }
+
+      70% {
+          animation-timing-function: cubic-bezier(.755, .05, .855, .06);
+          transform:translate3d(0, -15px, 0)
+      }
+
+      90% {
+          transform:translate3d(0, -4px, 0)
+      }
+  }`
   },
   {
     id: "bounceIn",
     name: "Bounce In",
     css: `@keyframes bounceIn {
-    0%, 20%, 40%, 60%, 80%, to {
-        animation-timing-function:cubic-bezier(.215, .61, .355, 1)
-    }
+      0%, 20%, 40%, 60%, 80%, to {
+          animation-timing-function:cubic-bezier(.215, .61, .355, 1)
+      }
 
-    0% {
-        opacity: 0;
-        transform:scale3d(.3, .3, .3)
-    }
+      0% {
+          opacity: 0;
+          transform:scale3d(.3, .3, .3)
+      }
 
-    20% {
-        transform:scale3d(1.1, 1.1, 1.1)
-    }
+      20% {
+          transform:scale3d(1.1, 1.1, 1.1)
+      }
 
-    40% {
-        transform:scale3d(.9, .9, .9)
-    }
+      40% {
+          transform:scale3d(.9, .9, .9)
+      }
 
-    60% {
-        opacity: 1;
-        transform:scale3d(1.03, 1.03, 1.03)
-    }
+      60% {
+          opacity: 1;
+          transform:scale3d(1.03, 1.03, 1.03)
+      }
 
-    80% {
-        transform:scale3d(.97, .97, .97)
-    }
+      80% {
+          transform:scale3d(.97, .97, .97)
+      }
 
-    to {
-        opacity: 1;
-        transform:scaleX(1)
-    }
-}`
+      to {
+          opacity: 1;
+          transform:scaleX(1)
+      }
+  }`
   },
   {
     id: "bounceInDown",
     name: "Bounce In Down",
     css: `@keyframes bounceInDown {
-    0%, 60%, 75%, 90%, to {
-        animation-timing-function:cubic-bezier(.215, .61, .355, 1)
-    }
+      0%, 60%, 75%, 90%, to {
+          animation-timing-function:cubic-bezier(.215, .61, .355, 1)
+      }
 
-    0% {
-        opacity: 0;
-        transform:translate3d(0, -100%, 0)
-    }
+      0% {
+          opacity: 0;
+          transform:translate3d(0, -100%, 0)
+      }
 
-    60% {
-        opacity: 1;
-        transform:translate3d(0, 25px, 0)
-    }
+      60% {
+          opacity: 1;
+          transform:translate3d(0, 25px, 0)
+      }
 
-    75% {
-        transform:translate3d(0, -10px, 0)
-    }
+      75% {
+          transform:translate3d(0, -10px, 0)
+      }
 
-    90% {
-        transform:translate3d(0, 5px, 0)
-    }
+      90% {
+          transform:translate3d(0, 5px, 0)
+      }
 
-    to {
-        transform:translateZ(0)
-    }
-}`
+      to {
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "bounceInLeft",
     name: "Bounce In Left",
     css: `@keyframes bounceInLeft {
-    0%, 1%, 60%, 75%, 90%, to {
-        animation-timing-function:cubic-bezier(.215, .61, .355, .1)
-    }
+      0%, 1%, 60%, 75%, 90%, to {
+          animation-timing-function:cubic-bezier(.215, .61, .355, .1)
+      }
 
-    0% {
-        opacity: 0;
-    }
+      0% {
+          opacity: 0;
+      }
 
-    1% {
-        transform:translate3d(-100%, 0, 0)
-    }
+      1% {
+          transform:translate3d(-100%, 0, 0)
+      }
 
-    60% {
-        opacity: 1;
-        transform:translate3d(25px, 0, 0)
-    }
+      60% {
+          opacity: 1;
+          transform:translate3d(25px, 0, 0)
+      }
 
-    75% {
-        transform:translate3d(-10px, 0, 0)
-    }
+      75% {
+          transform:translate3d(-10px, 0, 0)
+      }
 
-    90% {
-        transform:translate3d(5px, 0, 0)
-    }
+      90% {
+          transform:translate3d(5px, 0, 0)
+      }
 
-    to {
-        transform:translateZ(0)
-    }
-}`
+      to {
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "bounceInRight",
     name: "Bounce In Right",
     css: `@keyframes bounceInRight {
-    0%, 1%, 60%, 75%, 90%, to {
-        animation-timing-function:cubic-bezier(.215, .61, .355, .1)
-    }
+      0%, 1%, 60%, 75%, 90%, to {
+          animation-timing-function:cubic-bezier(.215, .61, .355, .1)
+      }
 
-    0% {
-        opacity: 0;
-    }
+      0% {
+          opacity: 0;
+      }
 
-    1% {
-        transform:translate3d(100%, 0, 0)
-    }
+      1% {
+          transform:translate3d(100%, 0, 0)
+      }
 
-    60% {
-        opacity: 1;
-        transform:translate3d(-25px, 0, 0)
-    }
+      60% {
+          opacity: 1;
+          transform:translate3d(-25px, 0, 0)
+      }
 
-    75% {
-        transform:translate3d(10px, 0, 0)
-    }
+      75% {
+          transform:translate3d(10px, 0, 0)
+      }
 
-    90% {
-        transform:translate3d(-5px, 0, 0)
-    }
+      90% {
+          transform:translate3d(-5px, 0, 0)
+      }
 
-    to {
-        transform:translateZ(0)
-    }
-}`
+      to {
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "bounceInUp",
     name: "Bounce In Up",
     css: `@keyframes bounceInUp {
-    0%, 60%, 75%, 90%, to {
-        animation-timing-function:cubic-bezier(.215, .61, .355, .1)
-    }
+      0%, 1%, 60%, 75%, 90%, to {
+          animation-timing-function:cubic-bezier(.215, .61, .355, .1)
+      }
 
-    0% {
-        opacity: 0;
-        transform:translate3d(0, 100%, 0)
-    }
+      0% {
+          opacity: 0;
+      }
 
-    60% {
-        opacity: 1;
-        transform:translate3d(0, -20px, 0)
-    }
+      1% {
+          transform:translate3d(0, 100%, 0)
+      }
 
-    75% {
-        transform:translate3d(0, 10px, 0)
-    }
+      60% {
+          opacity: 1;
+          transform:translate3d(0, -20px, 0)
+      }
 
-    90% {
-        transform:translate3d(0, -5px, 0)
-    }
+      75% {
+          transform:translate3d(0, 10px, 0)
+      }
 
-    to {
-        transform:translateZ(0)
-    }
-}`
+      90% {
+          transform:translate3d(0, -5px, 0)
+      }
+
+      to {
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "fadeIn",
     name: "Fade In",
     css: `@keyframes fadeIn {
-    0% {
-        opacity:0
-    }
+      0% {
+          opacity:0
+      }
 
-    to {
-        opacity:1
-    }
-}`
+      to {
+          opacity:1
+      }
+  }`
   },
   {
     id: "fadeInDown",
     name: "Fade In Down",
     css: `@keyframes fadeInDown {
-    0% {
-        opacity: 0;
-    }
+      0% {
+          opacity: 0;
+      }
 
-    1% {
-        transform:translate3d(0, -100%, 0)
-    }
+      1% {
+          transform:translate3d(0, -100%, 0)
+      }
 
-    to {
-        opacity: 1;
-        transform:translateZ(0)
-    }
-}`
+      to {
+          opacity: 1;
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "fadeInLeft",
     name: "Fade In Left",
     css: `@keyframes fadeInLeft {
-    0% {
-        opacity: 0;
-    }
+      0% {
+          opacity: 0;
+      }
 
-    1% {
-        transform:translate3d(-100%, 0, 0)
-    }
+      1% {
+          transform:translate3d(-100%, 0, 0)
+      }
 
-    to {
-        opacity: 1;
-        transform:translateZ(0)
-    }
-}`
+      to {
+          opacity: 1;
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "fadeInRight",
     name: "Fade In Right",
     css: `@keyframes fadeInRight {
-    0% {
-        opacity: 0;
-    }
+      0% {
+          opacity: 0;
+      }
 
-    1% {
-        transform:translate3d(100%, 0, 0)
-    }
+      1% {
+          transform: translate3d(90%, 0, 0)
+      }
 
-    to {
-        opacity: 1;
-        transform:translateZ(0)
-    }
-}`
+      to {
+          opacity: 1;
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "fadeInUp",
     name: "Fade In Up",
     css: `@keyframes fadeInUp {
-    0% {
-        opacity: 0;
-    }
+      0% {
+          opacity: 0;
+      }
 
-    1% {
-        transform:translate3d(0, 100%, 0)
-    }
+      1% {
+          transform:translate3d(0, 100%, 0)
+      }
 
-    to {
-        opacity: 1;
-        transform:translateZ(0)
-    }
-}`
+      to {
+          opacity: 1;
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "flipInX",
     name: "Flip In X",
     css: `@keyframes flipInX {
-    0% {
-        transform: perspective(400px) rotateX(90deg);
-        animation-timing-function: ease-in;
-        opacity:0
-    }
+      0% {
+          transform: perspective(400px) rotateX(90deg);
+          animation-timing-function: ease-in;
+          opacity:0
+      }
 
-    40% {
-        transform: perspective(400px) rotateX(-20deg);
-        animation-timing-function:ease-in
-    }
+      40% {
+          transform: perspective(400px) rotateX(-20deg);
+          animation-timing-function:ease-in
+      }
 
-    60% {
-        transform: perspective(400px) rotateX(10deg);
-        opacity:1
-    }
+      60% {
+          transform: perspective(400px) rotateX(10deg);
+          opacity:1
+      }
 
-    80% {
-        transform:perspective(400px) rotateX(-5deg)
-    }
+      80% {
+          transform:perspective(400px) rotateX(-5deg)
+      }
 
-    to {
-        transform:perspective(400px)
-    }
-}`
+      to {
+          transform:perspective(400px)
+      }
+  }`
   },
   {
     id: "flipInY",
     name: "Flip In Y",
     css: `@keyframes flipInY {
-    0% {
-        transform: perspective(400px) rotateY(90deg);
-        animation-timing-function: ease-in;
-        opacity:0
-    }
+      0% {
+          transform: perspective(400px) rotateY(90deg);
+          animation-timing-function: ease-in;
+          opacity:0
+      }
 
-    40% {
-        transform: perspective(400px) rotateY(-20deg);
-        animation-timing-function:ease-in
-    }
+      40% {
+          transform: perspective(400px) rotateY(-20deg);
+          animation-timing-function:ease-in
+      }
 
-    60% {
-        transform: perspective(400px) rotateY(10deg);
-        opacity:1
-    }
+      60% {
+          transform: perspective(400px) rotateY(10deg);
+          opacity:1
+      }
 
-    80% {
-        transform:perspective(400px) rotateY(-5deg)
-    }
+      80% {
+          transform:perspective(400px) rotateY(-5deg)
+      }
 
-    to {
-        transform:perspective(400px)
-    }
-}`
+      to {
+          transform:perspective(400px)
+      }
+  }`
   },
   {
     id: "rotateIn",
     name: "Rotate In",
     css: `@keyframes rotateIn {
-    0% {
-        transform-origin: center;
-        transform: rotate(-200deg);
-        opacity:0
-    }
+      0% {
+          transform-origin: center;
+          transform: rotate(-200deg);
+          opacity:0
+      }
 
-    to {
-        transform-origin: center;
-        transform: translateZ(0);
-        opacity:1
-    }
-}`
+      to {
+          transform-origin: center;
+          transform: translateZ(0);
+          opacity:1
+      }
+  }`
   },
   {
     id: "rotateInDownLeft",
     name: "Rotate In Down Left",
     css: `@keyframes rotateInDownLeft {
-    0% {
-        transform-origin: left bottom;
-        transform: rotate(-45deg);
-        opacity:0
-    }
+      0% {
+          transform-origin: left bottom;
+          transform: rotate(-45deg);
+          opacity:0
+      }
 
-    to {
-        transform-origin: left bottom;
-        transform: translateZ(0);
-        opacity:1
-    }
-}`
+      to {
+          transform-origin: left bottom;
+          transform: translateZ(0);
+          opacity:1
+      }
+  }`
   },
   {
     id: "rotateInDownRight",
     name: "Rotate In Down Right",
     css: `@keyframes rotateInDownRight {
-    0% {
-        transform-origin: right bottom;
-        transform: rotate(45deg);
-        opacity:0
-    }
+      0% {
+          transform-origin: right bottom;
+          transform: rotate(45deg);
+          opacity:0
+      }
 
-    to {
-        transform-origin: right bottom;
-        transform: translateZ(0);
-        opacity:1
-    }
-}`
+      to {
+          transform-origin: right bottom;
+          transform: translateZ(0);
+          opacity:1
+      }
+  }`
   },
   {
     id: "rotateInUpLeft",
     name: "Rotate In Up Left",
     css: `@keyframes rotateInUpLeft {
-    0% {
-        transform-origin: left bottom;
-        transform: rotate(45deg);
-        opacity:0
-    }
+      0% {
+          opacity: 0
+      }
 
-    to {
-        transform-origin: left bottom;
-        transform: translateZ(0);
-        opacity:1
-    }
-}`
+      1% {
+          transform-origin: left bottom;
+          transform: rotate(45deg);
+      }
+
+      to {
+          transform-origin: left bottom;
+          transform: translateZ(0);
+          opacity:1
+      }
+  }`
   },
   {
     id: "rotateInUpRight",
     name: "Rotate In Up Right",
     css: `@keyframes rotateInUpRight {
-    0% {
-        transform-origin: right bottom;
-        transform: rotate(-90deg);
-        opacity:0
-    }
+      0% {
+          opacity: 0
+      }
 
-    to {
-        transform-origin: right bottom;
-        transform: translateZ(0);
-        opacity:1
-    }
-}`
+      1% {
+          transform-origin: right bottom;
+          transform: rotate(-90deg);
+      }
+
+      to {
+          transform-origin: right bottom;
+          transform: translateZ(0);
+          opacity:1
+      }
+  }`
   },
   {
     id: "slideInDown",
     name: "Slide In Down",
     css: `@keyframes slideInDown {
-    0% {
-        visibility:visible
-    }
+      0% {
+          visibility:visible
+      }
 
-    1% {
-        transform: translate3d(0, -100%, 0);
-    }
+      1% {
+          transform: translate3d(0, -100%, 0);
+      }
 
-    to {
-        transform:translateZ(0)
-    }
-}`
+      to {
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "slideInLeft",
     name: "Slide In Left",
     css: `@keyframes slideInLeft {
-    0% {
-        visibility:visible
-    }
+      0% {
+          visibility:visible
+      }
 
-    1% {
-        transform: translate3d(-100%, 0, 0);
-    }
+      1% {
+          transform: translate3d(-100%, 0, 0);
+      }
 
-    to {
-        transform:translateZ(0)
-    }
-}`
+      to {
+          transform: translateZ(0)
+      }
+  }`
   },
   {
     id: "slideInRight",
     name: "Slide In Right",
     css: `@keyframes slideInRight {
-    0% {
-        visibility:visible
-    }
+      0% {
+          visibility:visible
+      }
 
-    1% {
-        transform: translate3d(100%, 0, 0);
-    }
+      1% {
+          transform: translate3d(100%, 0, 0);
+      }
 
-    to {
-        transform:translateZ(0)
-    }
-}`
+      to {
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "slideInUp",
     name: "Slide In Up",
     css: `@keyframes slideInUp {
-    0% {
-        visibility:visible
-    }
+      0% {
+          visibility:visible
+      }
 
-    1% {
-        transform: translate3d(0, 100%, 0);
-    }
+      1% {
+          transform: translate3d(0, 100%, 0);
+      }
 
-    to {
-        transform:translateZ(0)
-    }
-}`
+      to {
+          transform:translateZ(0)
+      }
+  }`
   },
   {
     id: "zoomIn",
     name: "Zoom In",
     css: `@keyframes zoomIn {
-    0% {
-        opacity: 0;
-        transform:scale3d(.3, .3, .3)
-    }
+      0% {
+          opacity: 0;
+          transform:scale3d(.3, .3, .3)
+      }
 
-    50% {
-        opacity:1
-    }
-}`
+      50% {
+          opacity:1
+      }
+  }`
   },
   {
     id: "zoomInDown",
     name: "Zoom In Down",
     css: `@keyframes zoomInDown {
-    0% {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
-        animation-timing-function:cubic-bezier(.55, .055, .675, .19)
-    }
+      0% {
+          opacity: 0;
+          transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
+          animation-timing-function:cubic-bezier(.55, .055, .675, .19)
+      }
 
-    60% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
-        animation-timing-function:cubic-bezier(.175, .885, .32, 1)
-    }
-}`
+      60% {
+          opacity: 1;
+          transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
+          animation-timing-function:cubic-bezier(.175, .885, .32, 1)
+      }
+  }`
   },
   {
     id: "zoomInLeft",
     name: "Zoom In Left",
     css: `@keyframes zoomInLeft {
-    0% {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
-        animation-timing-function:cubic-bezier(.55, .055, .675, .19)
-    }
+      0% {
+          opacity: 0;
+          transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
+          animation-timing-function:cubic-bezier(.55, .055, .675, .19)
+      }
 
-    60% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
-        animation-timing-function:cubic-bezier(.175, .885, .32, 1)
-    }
-}`
+      60% {
+          opacity: 1;
+          transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
+          animation-timing-function:cubic-bezier(.175, .885, .32, 1)
+      }
+  }`
   },
   {
     id: "zoomInRight",
     name: "Zoom In Right",
     css: `@keyframes zoomInRight {
-    0% {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
-        animation-timing-function:cubic-bezier(.55, .055, .675, .19)
-    }
+      0% {
+          opacity: 0;
+          transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
+          animation-timing-function:cubic-bezier(.55, .055, .675, .19)
+      }
 
-    60% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
-        animation-timing-function:cubic-bezier(.175, .885, .32, 1)
-    }
-}`
+      60% {
+          opacity: 1;
+          transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
+          animation-timing-function:cubic-bezier(.175, .885, .32, 1)
+      }
+  }`
   },
   {
     id: "zoomInUp",
     name: "Zoom In Up",
     css: `@keyframes zoomInUp {
-    0% {
-        opacity: 0;
-        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
-        animation-timing-function:cubic-bezier(.55, .055, .675, .19)
-    }
-
-    60% {
-        opacity: 1;
-        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
-        animation-timing-function:cubic-bezier(.175, .885, .32, 1)
-    }
-}`
-  }
-], q = function(t) {
-  const n = this;
-  let e = null;
-  const r = () => {
-    e == null || e.disconnect(), e = null;
-  }, i = () => {
-    r();
-    const o = n.style;
-    o.animationName = "", requestAnimationFrame(() => {
-      const m = getComputedStyle(n), c = m.getPropertyValue("animation-name").trim(), l = m.getPropertyValue("--animation-on-scroll").trim() !== "false", f = parseFloat(m.getPropertyValue("--animation-threshold").trim()) || 0.2, a = m.getPropertyValue("--animation-repeat").trim() === "true", s = () => {
-        o.animationName = "none", n.offsetWidth, o.animationName = c, o.animationPlayState = "running";
-      };
-      if (!c || c === "none") {
-        o.animationName = "none", o.animationPlayState = "paused";
-        return;
-      }
-      if (!l) {
-        s();
-        return;
+      0% {
+          opacity: 0;
+          animation-timing-function: cubic-bezier(.55, .055, .675, .19);
       }
-      o.animationPlayState = "paused", e = new IntersectionObserver(
-        (g) => {
-          g.forEach((p) => {
-            p.isIntersecting && (s(), !a && r());
-          });
-        },
-        { threshold: f }
-      ), e.observe(n);
-    });
-  };
-  n.addEventListener(t.animationUpdateEvent, i), i();
-}, J = (t, n) => {
-  const { Components: e, Blocks: r, Canvas: i } = t, { block: o = {}, animationList: m = [] } = n, c = "Animation", l = Object.values(d), f = Object.values(u);
-  return e.addType(y, {
-    block: o ? {
-      label: c,
-      media: G.animation,
-      content: { type: y },
-      ...Z,
-      ...o
-    } : void 0,
-    model: {
-      defaults: {
-        emptyState: !0,
-        name: c,
-        traits: [],
-        script: q,
-        animationUpdateEvent: E,
-        "script-props": ["animationUpdateEvent"],
-        styles: m.map((a) => a.css).join(`
-`),
-        style: {
-          [u.name]: "fadeIn",
-          [u.duration]: "1s",
-          [u.delay]: "0s",
-          [u.fillMode]: "both",
-          [d.onScroll]: "true",
-          [d.threshold]: "0.2",
-          [d.repeat]: "false",
-          ...n.animationStyle
-        }
-      },
-      init() {
-        const { em: a } = this;
-        this.listenTo(a, "component:mount", (s) => {
-          var p;
-          if (s !== this) return;
-          ((p = this.parent()) == null ? void 0 : p.get("type")) !== v || l.forEach((h) => this.removeStyle(h));
-        });
-      }
-    },
-    view: {
-      events: () => ({
-        animationstart: "onAnimationStart",
-        animationend: "onAnimationEnd"
-      }),
-      init() {
-        const { model: a } = this;
-        this.listenTo(a, "component:styleUpdate", this.handleStyleChange);
-      },
-      onAnimationStart() {
-        var s;
-        if ((s = this.cmpSpots) != null && s.length) return;
-        const a = i.getSpots({ component: this.model });
-        this.cmpSpots = a, i.removeSpots(a), this.el.ownerDocument.body.style.overflowX = "hidden";
-      },
-      onAnimationEnd() {
-        const a = this.cmpSpots || [];
-        i.spots.add(a), this.cmpSpots = [], this.el.ownerDocument.body.style.overflowX = "";
-      },
-      triggerAnimation() {
-        this.el.dispatchEvent(new CustomEvent(E));
-      },
-      handleStyleChange(a, s) {
-        Object.keys((s == null ? void 0 : s.style) || {}).some((h) => f.includes(h) || l.includes(h)) && this.triggerAnimation();
-      },
-      onRender() {
-        this.triggerAnimation();
-      }
-    }
-  }), () => {
-    r.remove(y), e.removeType(y);
-  };
-}, Q = function(t) {
-  const n = this, e = "--animation-on-scroll", r = "--animation-threshold", i = "--animation-repeat";
-  let o = null;
-  const m = () => {
-    o == null || o.disconnect(), o = null;
-  }, c = () => {
-    m();
-    const l = getComputedStyle(n), f = l.getPropertyValue(e).trim() !== "false", a = parseFloat(l.getPropertyValue(r).trim()) || 0.2, s = l.getPropertyValue(i).trim() === "true", g = () => {
-      Array.from(n.children).forEach((p) => {
-        p instanceof HTMLElement && typeof p.dispatchEvent == "function" && p.dispatchEvent(new CustomEvent(k, { bubbles: !1 }));
-      });
-    };
-    if (!f) {
-      g();
-      return;
-    }
-    o = new IntersectionObserver(
-      (p) => {
-        p.forEach((h) => {
-          h.isIntersecting ? (g(), !s && m()) : s && Array.from(n.children).forEach((b) => {
-            b instanceof HTMLElement && getComputedStyle(b).getPropertyValue(e).trim() !== "false" && (b.style.opacity = "0", b.style.animationPlayState = "paused");
-          });
-        });
-      },
-      { threshold: a }
-    ), o.observe(n);
-  };
-  n.addEventListener(t.animationGroupUpdateEvent, c), c();
-}, tt = (t, n) => {
-  const { Components: e, Blocks: r } = t, { blockGroup: i = {} } = n, o = "Animation Group";
-  return e.addType(v, {
-    block: i ? {
-      label: o,
-      media: G.animationGroup,
-      content: {
-        type: v,
-        components: [
-          { type: y },
-          { type: y },
-          { type: y }
-        ]
-      },
-      ...Z,
-      ...i
-    } : void 0,
-    model: {
-      defaults: {
-        name: o,
-        emptyState: !0,
-        traits: [],
-        script: Q,
-        animationGroupUpdateEvent: k,
-        "script-props": ["animationGroupUpdateEvent"],
-        droppable: H(y),
-        style: {
-          [T.staggerDelay]: "0.3s",
-          [d.onScroll]: "true",
-          [d.threshold]: "0.2",
-          [d.repeat]: "false",
-          ...n.animationGroupStyle
-        }
-      },
-      init() {
-        const m = this.components();
-        this.listenTo(m, "add remove", this.updateChildrenStaggerStyles), this.updateChildrenStaggerStyles();
-      },
-      updateChildrenStaggerStyles() {
-        this.components().forEach((m, c) => {
-          m.is(y) && m.addStyle(
-            {
-              "--stagger-index": c.toString(),
-              [u.delay]: "calc(var(--stagger-index, 0) * var(--stagger-delay, 0s))"
-            },
-            { partial: !0 }
-          );
-        });
+
+      1% {
+          transform: scale3d(.1, .1, .1) translate3d(0, 100%, 0);
       }
-    },
-    view: {
-      init() {
-        const { model: m } = this;
-        this.listenTo(m, "component:styleUpdate", this.handleStyleChange);
-      },
-      triggerAnimation() {
-        this.el.dispatchEvent(new CustomEvent(k));
-      },
-      handleStyleChange() {
-        this.triggerAnimation(), this.model.updateChildrenStaggerStyles();
-      },
-      onRender() {
-        this.triggerAnimation();
+
+      60% {
+          opacity: 1;
+          transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
+          animation-timing-function:cubic-bezier(.175, .885, .32, 1)
       }
-    }
-  }), () => {
-    r.remove(v), e.removeType(v);
-  };
-}, nt = "animationComponent", et = I.startup, at = function(t, n = {}) {
+  }`
+  }
+], et = function(t, n = {}) {
   var i;
-  const e = ((i = n.animations) == null ? void 0 : i.call(n, { items: R })) || R, r = [
-    J(t, { ...n, animationList: e }),
-    tt(t, n)
+  const e = ((i = n.animations) == null ? void 0 : i.call(n, { items: D })) || D, r = [
+    q(t, { ...n, animationList: e }),
+    Q(t, n)
   ];
   t.Styles.addSector("animation", {
     name: "Animation",
@@ -993,7 +998,7 @@ const y = "animation", v = "animation-group", E = "animation:update", k = "anima
       {
         ...S,
         name: "Type",
-        property: u.name,
+        property: y.name,
         type: "select",
         full: !0,
         default: "fadeIn",
@@ -1002,7 +1007,7 @@ const y = "animation", v = "animation-group", E = "animation:update", k = "anima
       {
         ...S,
         name: "Duration",
-        property: u.duration,
+        property: y.duration,
         type: "number",
         units: ["s"],
         min: 0.1,
@@ -1012,31 +1017,42 @@ const y = "animation", v = "animation-group", E = "animation:update", k = "anima
       },
       {
         ...S,
-        name: "Fill Mode",
-        property: u.fillMode,
+        name: "Delay",
+        property: y.delay,
+        type: "number",
+        units: ["s"],
+        min: 0,
+        max: 10,
+        step: 0.1,
+        default: "1s"
+      },
+      {
+        ...S,
+        name: "Iteration Count",
+        property: y.iterationCount,
         type: "select",
-        default: "both",
+        default: "1",
         options: [
-          {
-            name: "None",
-            id: "none"
-          },
-          {
-            name: "Forwards",
-            id: "forwards"
-          },
-          {
-            name: "Backwards",
-            id: "backwards"
-          },
-          {
-            name: "Both",
-            id: "both"
-          }
+          { id: "1", name: "One time" },
+          { id: "infinite", name: "Infinite" }
+        ]
+      },
+      {
+        ...S,
+        name: "Timing",
+        property: y.timingFunction,
+        type: "select",
+        default: "ease",
+        options: [
+          { id: "ease", name: "Ease" },
+          { id: "ease-in", name: "Ease in" },
+          { id: "ease-out", name: "Ease out" },
+          { id: "ease-in-out", name: "Ease in out" },
+          { id: "linear", name: "Linear" }
         ]
       },
       {
-        ...K,
+        ...H,
         name: "Stagger Delay",
         property: "--stagger-delay",
         type: "slider",
@@ -1044,12 +1060,12 @@ const y = "animation", v = "animation-group", E = "animation:update", k = "anima
         min: 0.1,
         max: 5,
         step: 0.1,
-        default: "0.1s"
+        default: "0.3s"
       },
       {
         ..._,
         name: "Animate on Scroll",
-        property: d.onScroll,
+        property: v.onScroll,
         type: "radio",
         default: "true",
         options: [
@@ -1064,9 +1080,9 @@ const y = "animation", v = "animation-group", E = "animation:update", k = "anima
         ]
       },
       {
-        ...D,
+        ...R,
         name: "Scroll Threshold",
-        property: d.threshold,
+        property: v.threshold,
         type: "number",
         full: !0,
         min: 0.1,
@@ -1075,9 +1091,9 @@ const y = "animation", v = "animation-group", E = "animation:update", k = "anima
         default: "0.2"
       },
       {
-        ...D,
+        ...R,
         name: "Repeat on Scroll",
-        property: d.repeat,
+        property: v.repeat,
         type: "radio",
         default: "false",
         options: [
@@ -1092,16 +1108,16 @@ const y = "animation", v = "animation-group", E = "animation:update", k = "anima
         ]
       }
     ]
-  }), $({
+  }), Y({
     editor: t,
     licenseKey: n.licenseKey,
-    plan: et,
-    pluginName: nt,
+    plan: nt,
+    pluginName: tt,
     cleanup: () => {
-      r.forEach((o) => o());
+      r.forEach((a) => a());
     }
   });
-}, ot = Y(at);
+}, at = W(et);
 export {
-  ot as default
+  at as default
 };