easy-email-pro-kit 0.2.0

package/lib/index.cjs.js

@@ -0,0 +1 @@
+"use strict";var q=Object.defineProperty,z=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var B=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var N=(t,n,r)=>n in t?q(t,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[n]=r,s=(t,n)=>{for(var r in n||(n={}))B.call(n,r)&&N(t,r,n[r]);if(x)for(var r of x(n))R.call(n,r)&&N(t,r,n[r]);return t},g=(t,n)=>z(t,G(n));var P=(t,n)=>{var r={};for(var o in t)B.call(t,o)&&n.indexOf(o)<0&&(r[o]=t[o]);if(t!=null&&x)for(var o of x(t))n.indexOf(o)<0&&R.call(t,o)&&(r[o]=t[o]);return r};var L=(t,n,r)=>(N(t,typeof n!="symbol"?n+"":n,r),r);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("easy-email-pro-core"),p=require("lodash"),e=require("react"),V=require("react-dom/server"),W=require("easy-email-pro-theme"),{Raw:v}=i.components;function Y(t){const{desktop:n,mobile:r}=t,o=i.useEmailRenderContext(),{displayMode:a="desktop-mobile"}=o;return a==="only-desktop"?e.createElement(i.EmailRenderProvider,g(s({},o),{displayMode:"only-desktop"}),e.createElement(e.Fragment,null,e.createElement(n,null))):a==="only-mobile"?e.createElement(e.Fragment,null,e.createElement(v,null,"<!-- htmlmin:ignore --><!--[if !mso]><!--><!-- htmlmin:ignore -->"),e.createElement(i.EmailRenderProvider,g(s({},o),{displayMode:"only-mobile"}),e.createElement(e.Fragment,null,e.createElement(r,null))),e.createElement(v,null,"<!-- htmlmin:ignore --><!--<![endif]--><!-- htmlmin:ignore -->")):e.createElement(e.Fragment,null,e.createElement(i.EmailRenderProvider,g(s({},o),{displayMode:"only-desktop"}),e.createElement(e.Fragment,null,e.createElement(n,null))),e.createElement(v,null,"<!-- htmlmin:ignore --><!--[if !mso]><!--><!-- htmlmin:ignore -->"),e.createElement(i.EmailRenderProvider,g(s({},o),{displayMode:"only-mobile"}),e.createElement(e.Fragment,null,e.createElement(r,null))),e.createElement(v,null,"<!-- htmlmin:ignore --><!--<![endif]--><!-- htmlmin:ignore -->"))}const J="hide-desktop-block",Q="hide-mobile-block",X="hide-desktop-inline-block",Z="hide-mobile-inline-block",K=[i.ElementType.GROUP,i.ElementType.COLUMN,i.ElementType.NAVBAR_LINK];class ee extends i.ResponsivePlugin{constructor(){super(...arguments);L(this,"generateResponsive",r=>{var _;const{mode:o,displayMode:a,node:l,keepEmptyAttributes:m,mergetagsData:b={},children:c,context:d,idx:f,desktopContent:O}=r;let T=O;const y=i.BlockManager.getBlockByType(l.type);if(!y)throw new Error(`${l.type} block is not registered`);const H=l.mobileAttributes&&Object.keys(l.mobileAttributes).some(D=>l.mobileAttributes[D]!==l.attributes[D]),h=K.includes(y.type)?X:J,k=K.includes(y.type)?Z:Q,u=p.get(l,"attributes.css-class")||"";if(a==="only-desktop"){if(u.includes(h))return null;u.includes(k)||p.set(l,"attributes.css-class",i.classnames(u,k))}else if(a==="only-mobile"){if(u.includes(k))return null;u.includes(h)||p.set(l,"attributes.css-class",i.classnames(u,h))}a==="only-mobile"?l.attributes=i.mergeBlock(i.mergeBlock(y.defaultData.attributes,y.defaultData.mobileAttributes),l.attributes):l.attributes=i.mergeBlock(((_=y.defaultData)==null?void 0:_.attributes)||{},l.attributes),l.visible==="desktop"?p.set(l,"attributes.css-class",i.classnames(u,k)):l.visible==="mobile"&&p.set(l,"attributes.css-class",i.classnames(u,h));const U=y.render({mode:o,children:c,context:d,idx:f,node:g(s({},l),{attributes:i.mergeBlock(l.attributes,l.mobileAttributes),mobileAttributes:void 0}),keepEmptyAttributes:m,mergetagsData:b});return H&&(T=e.createElement(e.Fragment,null,e.createElement(Y,{desktop:()=>e.createElement(e.Fragment,null,O),mobile:()=>e.createElement(e.Fragment,null,U)}))),T})}}const I=60,M=60*I,C=24*M;function te(t){const n=Math.floor(t/C),r=Math.floor((t-n*C)/M),o=Math.floor((t-n*C-r*M)/I),a=Math.floor(t-n*C-r*M-o*I);return{day:n<10?"0"+n:n.toString(),hour:r<10?"0"+r:r.toString(),minute:o<10?"0"+o:o.toString(),second:a<10?"0"+a:a.toString()}}const ne=document.createElement("canvas");ne.getContext("2d");const oe=p.flatMap(["padding","margin","border"].map(t=>[`${t}-top`,`${t}-right`,`${t}-bottom`,`${t}-left`]));[...oe];function re(t){const{attributes:n,data:r}=t;let o=r.remainingTime;switch(r.unit){case"minute":o=60*o;break;case"hour":o=60*60*o;break;case"day":o=60*60*24*o}const{day:a,hour:l,minute:m,second:b}=te(o),c=[{unit:"days",value:a},{unit:"hrs",value:l},{unit:"mins",value:m},{unit:"secs",value:b}];return e.createElement("div",{style:{color:n.color}},e.createElement("div",null,e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",paddingBottom:10}},c.map((d,f)=>e.createElement("div",{key:d.unit,style:{display:"flex",alignItems:"center",justifyContent:"center"}},e.createElement("div",{style:{width:50,height:50,lineHeight:"50px",backgroundColor:n["grid-color"],borderRadius:8,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:`0px 4px 13px 4px ${n["shadow-color"]}`,fontSize:24}},e.createElement("div",{style:{height:"100%",overflow:"hidden"}},e.createElement("div",{className:d.unit},d.value))),f!==c.length-1&&e.createElement("div",{key:d.unit,style:{margin:"0px 10px",fontWeight:"bold"}},":")))),e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",paddingBottom:10}},c.map((d,f)=>e.createElement("div",{key:d.unit,style:{display:"flex",alignItems:"center",justifyContent:"center"}},e.createElement("div",{key:d.unit,style:{width:50,display:"flex",alignItems:"center",justifyContent:"center",textTransform:"uppercase",fontSize:14,textAlign:"center"}},d.unit),f!==c.length-1&&e.createElement("div",{style:{margin:"0px 10px",fontWeight:"bold",visibility:"hidden"}},":"))))))}const E={MARKETING_SHOPWINDOW:"marketing-shopwindow",MARKETING_COUNTDOWN:"marketing-countdown"},{Column:$,Image:ie,Raw:le,Section:j,Spacer:ae,ContentEditableBlock:se}=i.components,S={attributes:{color:"#ffffff","padding-top":"20px","padding-bottom":"20px","padding-left":"0px","padding-right":"0px","background-color":"#1A1F25","grid-color":"#12304b","shadow-color":"#000000",src:"http://res.cloudinary.com/dfite2e16/image/upload/v1687491218/easy-email-pro/tfcg6gqhefsasitl4j2u.gif"},data:{remainingTime:24,unit:"hour"}},w=i.createCustomBlock({get name(){return i.t("Countdown")},defaultData:S,void:!0,type:E.MARKETING_COUNTDOWN,create:t=>{const n={type:E.MARKETING_COUNTDOWN,data:s({},S.data),attributes:s({},S.attributes),children:[{type:"text",data:{},attributes:{color:"#ffffff","font-size":"32px",align:"center"},children:[{text:"SUMMER SALE"}]},{type:"text",data:{},attributes:{color:"#ffffff","font-size":"64px",align:"center"},children:[{text:"50% OFF",italic:!0}]}]};return i.mergeBlock(n,t)},category:i.ElementCategory.SECTION,render(t){const{node:n,mode:r}=t,{attributes:o,children:a}=n;if(r==="testing"){const l=V.renderToString(e.createElement(re,{attributes:n.attributes,data:n.data}));return e.createElement(j,{"padding-bottom":o["padding-bottom"],"padding-top":o["padding-top"],"padding-left":o["padding-left"],"padding-right":o["padding-right"],"background-color":o["background-color"]},e.createElement($,null,a.map((m,b)=>i.NodeUtils.isTextElement(m)?e.createElement(se,{key:b,node:m}):null),e.createElement(ae,{height:"20px"}),e.createElement(le,null,l)))}return e.createElement(j,{"padding-bottom":o["padding-bottom"],"padding-top":o["padding-top"],"padding-left":o["padding-left"],"padding-right":o["padding-right"],"background-color":o["background-color"]},e.createElement($,null,e.createElement(ie,g(s({idx:t.idx},t.node.attributes),{children:n.children}))))}});class de extends i.ElementPlugin{generateElement(){i.BlockManager.registerBlocks([w]),p.set(W.ConfigPanelsMap,w.type,w)}}const{Image:ce}=i.components,F={attributes:{align:"center",border:"0",height:"auto","padding-top":"0px","padding-bottom":"0px","padding-left":"0px","padding-right":"0px","border-width":"1px","border-style":"solid","border-color":"#AAAAAA","border-radius":"0px",target:"_blank"},data:{list:[{src:"http://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815911/tceeidvpn9cwtrufgbe3.png"},{src:"http://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815875/mevpkdxft8z6cyjicnd6.png"},{src:"http://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815891/g4qmdcgiyiuyqmdlchuo.png"}]}},A=i.createCustomBlock({get name(){return i.t("Shopwindow")},defaultData:F,void:!0,type:E.MARKETING_SHOPWINDOW,create:t=>{const n={type:E.MARKETING_SHOPWINDOW,data:s({},F.data),attributes:{src:"http://res.cloudinary.com/dwkp0e1yo/image/upload/v1684137604/beacas-test/ypb7jidggmzgscvs5c3t.gif"},children:[]};return i.mergeBlock(n,t)},category:i.ElementCategory.IMAGE,render(t){const{node:n}=t,c=n.attributes,{"border-enabled":r,"border-width":o,"border-style":a,"border-color":l}=c,m=P(c,["border-enabled","border-width","border-style","border-color"]),b=r?`${o||"1px"} ${a||"solid"} ${l||"#AAAAAA"}`:"";return e.createElement(ce,g(s({idx:t.idx},m),{data:n.data,border:b,children:n.children}))}});class me extends i.ElementPlugin{generateElement(){i.BlockManager.registerBlocks([A]),p.set(W.ConfigPanelsMap,A.type,A)}}exports.Countdown=de;exports.MarketingCountdown=w;exports.MarketingShopwindow=A;exports.MarketingType=E;exports.Responsive=ee;exports.Shopwindow=me;

package/lib/index.es.js

@@ -0,0 +1,467 @@
+var ee = Object.defineProperty, te = Object.defineProperties;
+var ne = Object.getOwnPropertyDescriptors;
+var x = Object.getOwnPropertySymbols;
+var F = Object.prototype.hasOwnProperty, W = Object.prototype.propertyIsEnumerable;
+var N = (t, n, r) => n in t ? ee(t, n, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[n] = r, a = (t, n) => {
+  for (var r in n || (n = {}))
+    F.call(n, r) && N(t, r, n[r]);
+  if (x)
+    for (var r of x(n))
+      W.call(n, r) && N(t, r, n[r]);
+  return t;
+}, u = (t, n) => te(t, ne(n));
+var j = (t, n) => {
+  var r = {};
+  for (var o in t)
+    F.call(t, o) && n.indexOf(o) < 0 && (r[o] = t[o]);
+  if (t != null && x)
+    for (var o of x(t))
+      n.indexOf(o) < 0 && W.call(t, o) && (r[o] = t[o]);
+  return r;
+};
+var P = (t, n, r) => (N(t, typeof n != "symbol" ? n + "" : n, r), r);
+import { useEmailRenderContext as oe, EmailRenderProvider as k, components as T, ElementType as I, ResponsivePlugin as re, BlockManager as R, classnames as v, mergeBlock as b, createCustomBlock as q, t as V, ElementCategory as Y, NodeUtils as ie, ElementPlugin as J } from "easy-email-pro-core";
+import { get as le, set as f, flatMap as ae } from "lodash";
+import e from "react";
+import se from "react-dom/server";
+import { ConfigPanelsMap as Q } from "easy-email-pro-theme";
+const { Raw: A } = T;
+function de(t) {
+  const { desktop: n, mobile: r } = t, o = oe(), { displayMode: l = "desktop-mobile" } = o;
+  return l === "only-desktop" ? /* @__PURE__ */ e.createElement(k, u(a({}, o), { displayMode: "only-desktop" }), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(n, null))) : l === "only-mobile" ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(A, null, "<!-- htmlmin:ignore --><!--[if !mso]><!--><!-- htmlmin:ignore -->"), /* @__PURE__ */ e.createElement(k, u(a({}, o), { displayMode: "only-mobile" }), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(r, null))), /* @__PURE__ */ e.createElement(A, null, "<!-- htmlmin:ignore --><!--<![endif]--><!-- htmlmin:ignore -->")) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(k, u(a({}, o), { displayMode: "only-desktop" }), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(n, null))), /* @__PURE__ */ e.createElement(A, null, "<!-- htmlmin:ignore --><!--[if !mso]><!--><!-- htmlmin:ignore -->"), /* @__PURE__ */ e.createElement(k, u(a({}, o), { displayMode: "only-mobile" }), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(r, null))), /* @__PURE__ */ e.createElement(A, null, "<!-- htmlmin:ignore --><!--<![endif]--><!-- htmlmin:ignore -->"));
+}
+const ce = "hide-desktop-block", me = "hide-mobile-block", ue = "hide-desktop-inline-block", pe = "hide-mobile-inline-block", H = [
+  I.GROUP,
+  I.COLUMN,
+  I.NAVBAR_LINK
+];
+class Se extends re {
+  constructor() {
+    super(...arguments);
+    P(this, "generateResponsive", (r) => {
+      var K;
+      const {
+        mode: o,
+        displayMode: l,
+        node: i,
+        keepEmptyAttributes: c,
+        mergetagsData: p = {},
+        children: d,
+        context: s,
+        idx: y,
+        desktopContent: B
+      } = r;
+      let L = B;
+      const g = R.getBlockByType(i.type);
+      if (!g)
+        throw new Error(`${i.type} block is not registered`);
+      const X = i.mobileAttributes && Object.keys(i.mobileAttributes).some(($) => i.mobileAttributes[$] !== i.attributes[$]), E = H.includes(g.type) ? ue : ce, h = H.includes(g.type) ? pe : me, m = le(i, "attributes.css-class") || "";
+      if (l === "only-desktop") {
+        if (m.includes(E))
+          return null;
+        m.includes(h) || f(
+          i,
+          "attributes.css-class",
+          v(m, h)
+        );
+      } else if (l === "only-mobile") {
+        if (m.includes(h))
+          return null;
+        m.includes(E) || f(
+          i,
+          "attributes.css-class",
+          v(m, E)
+        );
+      }
+      l === "only-mobile" ? i.attributes = b(
+        b(
+          g.defaultData.attributes,
+          g.defaultData.mobileAttributes
+        ),
+        i.attributes
+      ) : i.attributes = b(
+        ((K = g.defaultData) == null ? void 0 : K.attributes) || {},
+        i.attributes
+      ), i.visible === "desktop" ? f(
+        i,
+        "attributes.css-class",
+        v(m, h)
+      ) : i.visible === "mobile" && f(
+        i,
+        "attributes.css-class",
+        v(m, E)
+      );
+      const Z = g.render({
+        mode: o,
+        children: d,
+        context: s,
+        idx: y,
+        node: u(a({}, i), {
+          attributes: b(i.attributes, i.mobileAttributes),
+          mobileAttributes: void 0
+        }),
+        keepEmptyAttributes: c,
+        mergetagsData: p
+      });
+      return X && (L = /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+        de,
+        {
+          desktop: () => /* @__PURE__ */ e.createElement(e.Fragment, null, B),
+          mobile: () => /* @__PURE__ */ e.createElement(e.Fragment, null, Z)
+        }
+      ))), L;
+    });
+  }
+}
+const D = 60, w = 60 * D, C = 24 * w;
+function ge(t) {
+  const n = Math.floor(t / C), r = Math.floor((t - n * C) / w), o = Math.floor((t - n * C - r * w) / D), l = Math.floor(t - n * C - r * w - o * D);
+  return {
+    day: n < 10 ? "0" + n : n.toString(),
+    hour: r < 10 ? "0" + r : r.toString(),
+    minute: o < 10 ? "0" + o : o.toString(),
+    second: l < 10 ? "0" + l : l.toString()
+  };
+}
+const be = document.createElement("canvas");
+be.getContext("2d");
+const fe = ae(
+  ["padding", "margin", "border"].map((t) => [
+    `${t}-top`,
+    `${t}-right`,
+    `${t}-bottom`,
+    `${t}-left`
+  ])
+);
+[
+  ...fe
+];
+function ye(t) {
+  const { attributes: n, data: r } = t;
+  let o = r.remainingTime;
+  switch (r.unit) {
+    case "minute":
+      o = 60 * o;
+      break;
+    case "hour":
+      o = 60 * 60 * o;
+      break;
+    case "day":
+      o = 60 * 60 * 24 * o;
+  }
+  const { day: l, hour: i, minute: c, second: p } = ge(o), d = [
+    {
+      unit: "days",
+      value: l
+    },
+    {
+      unit: "hrs",
+      value: i
+    },
+    {
+      unit: "mins",
+      value: c
+    },
+    {
+      unit: "secs",
+      value: p
+    }
+  ];
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      style: {
+        color: n.color
+      }
+    },
+    /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          paddingBottom: 10
+        }
+      },
+      d.map((s, y) => /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          key: s.unit,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            style: {
+              width: 50,
+              height: 50,
+              lineHeight: "50px",
+              backgroundColor: n["grid-color"],
+              borderRadius: 8,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: `0px 4px 13px 4px ${n["shadow-color"]}`,
+              fontSize: 24
+            }
+          },
+          /* @__PURE__ */ e.createElement("div", { style: { height: "100%", overflow: "hidden" } }, /* @__PURE__ */ e.createElement("div", { className: s.unit }, s.value))
+        ),
+        y !== d.length - 1 && /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            key: s.unit,
+            style: { margin: "0px 10px", fontWeight: "bold" }
+          },
+          ":"
+        )
+      ))
+    ), /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          paddingBottom: 10
+        }
+      },
+      d.map((s, y) => /* @__PURE__ */ e.createElement(
+        "div",
+        {
+          key: s.unit,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }
+        },
+        /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            key: s.unit,
+            style: {
+              width: 50,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              textTransform: "uppercase",
+              fontSize: 14,
+              textAlign: "center"
+            }
+          },
+          s.unit
+        ),
+        y !== d.length - 1 && /* @__PURE__ */ e.createElement(
+          "div",
+          {
+            style: {
+              margin: "0px 10px",
+              fontWeight: "bold",
+              visibility: "hidden"
+            }
+          },
+          ":"
+        )
+      ))
+    ))
+  );
+}
+const M = {
+  MARKETING_SHOPWINDOW: "marketing-shopwindow",
+  MARKETING_COUNTDOWN: "marketing-countdown"
+}, { Column: U, Image: Ee, Raw: he, Section: z, Spacer: xe, ContentEditableBlock: ke } = T, S = {
+  attributes: {
+    color: "#ffffff",
+    "padding-top": "20px",
+    "padding-bottom": "20px",
+    "padding-left": "0px",
+    "padding-right": "0px",
+    "background-color": "#1A1F25",
+    "grid-color": "#12304b",
+    "shadow-color": "#000000",
+    src: "http://res.cloudinary.com/dfite2e16/image/upload/v1687491218/easy-email-pro/tfcg6gqhefsasitl4j2u.gif"
+  },
+  data: {
+    remainingTime: 24,
+    unit: "hour"
+  }
+}, O = q({
+  get name() {
+    return V("Countdown");
+  },
+  defaultData: S,
+  void: !0,
+  type: M.MARKETING_COUNTDOWN,
+  create: (t) => {
+    const n = {
+      type: M.MARKETING_COUNTDOWN,
+      data: a({}, S.data),
+      attributes: a({}, S.attributes),
+      children: [
+        {
+          type: "text",
+          data: {},
+          attributes: {
+            color: "#ffffff",
+            "font-size": "32px",
+            align: "center"
+          },
+          children: [
+            {
+              text: "SUMMER SALE"
+            }
+          ]
+        },
+        {
+          type: "text",
+          data: {},
+          attributes: {
+            color: "#ffffff",
+            "font-size": "64px",
+            align: "center"
+          },
+          children: [
+            {
+              text: "50% OFF",
+              italic: !0
+            }
+          ]
+        }
+      ]
+    };
+    return b(n, t);
+  },
+  category: Y.SECTION,
+  render(t) {
+    const { node: n, mode: r } = t, { attributes: o, children: l } = n;
+    if (r === "testing") {
+      const i = se.renderToString(
+        /* @__PURE__ */ e.createElement(ye, { attributes: n.attributes, data: n.data })
+      );
+      return /* @__PURE__ */ e.createElement(
+        z,
+        {
+          "padding-bottom": o["padding-bottom"],
+          "padding-top": o["padding-top"],
+          "padding-left": o["padding-left"],
+          "padding-right": o["padding-right"],
+          "background-color": o["background-color"]
+        },
+        /* @__PURE__ */ e.createElement(U, null, l.map((c, p) => ie.isTextElement(c) ? /* @__PURE__ */ e.createElement(ke, { key: p, node: c }) : null), /* @__PURE__ */ e.createElement(xe, { height: "20px" }), /* @__PURE__ */ e.createElement(he, null, i))
+      );
+    }
+    return /* @__PURE__ */ e.createElement(
+      z,
+      {
+        "padding-bottom": o["padding-bottom"],
+        "padding-top": o["padding-top"],
+        "padding-left": o["padding-left"],
+        "padding-right": o["padding-right"],
+        "background-color": o["background-color"]
+      },
+      /* @__PURE__ */ e.createElement(U, null, /* @__PURE__ */ e.createElement(
+        Ee,
+        u(a({
+          idx: t.idx
+        }, t.node.attributes), {
+          children: n.children
+        })
+      ))
+    );
+  }
+});
+class Oe extends J {
+  generateElement() {
+    R.registerBlocks([O]), f(Q, O.type, O);
+  }
+}
+const { Image: ve } = T, G = {
+  attributes: {
+    align: "center",
+    border: "0",
+    height: "auto",
+    "padding-top": "0px",
+    "padding-bottom": "0px",
+    "padding-left": "0px",
+    "padding-right": "0px",
+    "border-width": "1px",
+    "border-style": "solid",
+    "border-color": "#AAAAAA",
+    "border-radius": "0px",
+    target: "_blank"
+  },
+  data: {
+    list: [
+      {
+        src: "http://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815911/tceeidvpn9cwtrufgbe3.png"
+      },
+      {
+        src: "http://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815875/mevpkdxft8z6cyjicnd6.png"
+      },
+      {
+        src: "http://res.cloudinary.com/dwkp0e1yo/image/upload/v1683815891/g4qmdcgiyiuyqmdlchuo.png"
+      }
+    ]
+  }
+}, _ = q({
+  get name() {
+    return V("Shopwindow");
+  },
+  defaultData: G,
+  void: !0,
+  type: M.MARKETING_SHOPWINDOW,
+  create: (t) => {
+    const n = {
+      type: M.MARKETING_SHOPWINDOW,
+      data: a({}, G.data),
+      attributes: {
+        src: "http://res.cloudinary.com/dwkp0e1yo/image/upload/v1684137604/beacas-test/ypb7jidggmzgscvs5c3t.gif"
+      },
+      children: []
+    };
+    return b(n, t);
+  },
+  category: Y.IMAGE,
+  render(t) {
+    const { node: n } = t, d = n.attributes, {
+      "border-enabled": r,
+      "border-width": o,
+      "border-style": l,
+      "border-color": i
+    } = d, c = j(d, [
+      "border-enabled",
+      "border-width",
+      "border-style",
+      "border-color"
+    ]), p = r ? `${o || "1px"} ${l || "solid"} ${i || "#AAAAAA"}` : "";
+    return /* @__PURE__ */ e.createElement(
+      ve,
+      u(a({
+        idx: t.idx
+      }, c), {
+        data: n.data,
+        border: p,
+        children: n.children
+      })
+    );
+  }
+});
+class _e extends J {
+  generateElement() {
+    R.registerBlocks([_]), f(Q, _.type, _);
+  }
+}
+export {
+  Oe as Countdown,
+  O as MarketingCountdown,
+  _ as MarketingShopwindow,
+  M as MarketingType,
+  Se as Responsive,
+  _e as Shopwindow
+};

package/lib/typings/Elements/index.d.ts

@@ -0,0 +1 @@
+export * from "./marketing";

package/lib/typings/Elements/marketing/Countdown/Countdown.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { MarketingCountdownElement } from "../../../typings";
+export declare function Countdown(props: {
+    attributes: MarketingCountdownElement["attributes"];
+    data: MarketingCountdownElement["data"];
+}): JSX.Element;

package/lib/typings/Elements/marketing/Countdown/Panel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Path } from "slate";
+export declare const Countdown: ({ nodePath }: {
+    nodePath: Path;
+}) => JSX.Element;

package/lib/typings/Elements/marketing/Countdown/element.d.ts

@@ -0,0 +1,3 @@
+import { ElementDefinition } from "easy-email-pro-core";
+import type { MarketingCountdownElement } from "../../../typings";
+export declare const MarketingCountdown: ElementDefinition<MarketingCountdownElement>;

package/lib/typings/Elements/marketing/Countdown/index.d.ts

@@ -0,0 +1,6 @@
+import { ElementPlugin } from "easy-email-pro-core";
+import { MarketingCountdown } from "./element";
+export declare class Countdown extends ElementPlugin {
+    generateElement(): void;
+}
+export { MarketingCountdown };

package/lib/typings/Elements/marketing/Shopwindow/Panel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Path } from "slate";
+export declare const Shopwindow: ({ nodePath }: {
+    nodePath: Path;
+}) => JSX.Element;

package/lib/typings/Elements/marketing/Shopwindow/element.d.ts

@@ -0,0 +1,3 @@
+import { ElementDefinition } from "easy-email-pro-core";
+import { MarketingShopwindowElement } from "../../../typings";
+export declare const MarketingShopwindow: ElementDefinition<MarketingShopwindowElement>;

package/lib/typings/Elements/marketing/Shopwindow/index.d.ts

@@ -0,0 +1,6 @@
+import { ElementPlugin } from "easy-email-pro-core";
+import { MarketingShopwindow } from "./element";
+export declare class Shopwindow extends ElementPlugin {
+    generateElement(): void;
+}
+export { MarketingShopwindow };

package/lib/typings/Elements/marketing/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Countdown";
+export * from "./Shopwindow";

package/lib/typings/Responsive/ResponsiveElement.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ResponsiveElementProps {
+    desktop: React.FC<{
+        children?: React.ReactElement;
+    }>;
+    mobile: React.FC<{
+        children?: React.ReactElement;
+    }>;
+}
+export declare function ResponsiveElement(props: ResponsiveElementProps): JSX.Element;

package/lib/typings/Responsive/index.d.ts

@@ -0,0 +1,8 @@
+import { ResponsivePlugin } from "easy-email-pro-core";
+export declare const HIDE_DESKTOP_BLOCK_CLASS_NAME = "hide-desktop-block";
+export declare const HIDE_MOBILE_BLOCK_CLASS_NAME = "hide-mobile-block";
+export declare const HIDE_DESKTOP_INLINE_BLOCK_CLASS_NAME = "hide-desktop-inline-block";
+export declare const HIDE_MOBILE_INLINE_BLOCK_CLASS_NAME = "hide-mobile-inline-block";
+export declare class Responsive extends ResponsivePlugin {
+    generateResponsive: ResponsivePlugin["generateResponsive"];
+}

package/lib/typings/constants/index.d.ts

@@ -0,0 +1,5 @@
+export declare const MarketingType: {
+    MARKETING_SHOPWINDOW: "marketing-shopwindow";
+    MARKETING_COUNTDOWN: "marketing-countdown";
+};
+export type KitElementType = typeof MarketingType;

package/lib/typings/custom-types.d.ts

@@ -0,0 +1,6 @@
+import { MarketingCountdownElement, MarketingShopwindowElement } from "./typings";
+declare module "easy-email-pro-core" {
+    interface CustomTypes {
+        Element: MarketingCountdownElement | MarketingShopwindowElement;
+    }
+}

package/lib/typings/index.d.ts

@@ -0,0 +1,4 @@
+export { Responsive } from "./Responsive";
+export * from "./Elements";
+export * from "./constants";
+export * from "./typings";

package/lib/typings/typings/index.d.ts

@@ -0,0 +1,40 @@
+import type { KitElementType } from "../constants";
+import { BasicElement, ImageElement } from "easy-email-pro-core";
+export type MarketingCountdownElement = BasicElement<{
+    align?: string;
+    color?: string;
+    "grid-color"?: string;
+    "shadow-color"?: string;
+    "background-color"?: string;
+    "font-family"?: string;
+    "font-size"?: string;
+    "font-style"?: string;
+    "font-weight"?: string;
+    "line-height"?: string;
+    "padding-top"?: string;
+    "padding-bottom"?: string;
+    "padding-left"?: string;
+    "padding-right"?: string;
+    src: string;
+}, {
+    remainingTime: number;
+    unit: "hour" | "day" | "minute" | "second";
+}> & {
+    type: KitElementType["MARKETING_COUNTDOWN"];
+};
+export type MarketingShopwindowElement = BasicElement<Omit<ImageElement["attributes"], "inner-padding"> & {
+    "inner-padding-top"?: string;
+    "inner-padding-bottom"?: string;
+    "inner-padding-left"?: string;
+    "inner-padding-right"?: string;
+    "border-enabled"?: boolean;
+    "border-width"?: string;
+    "border-style"?: string;
+    "border-color"?: string;
+}, {
+    list: Array<{
+        src: string;
+    }>;
+}> & {
+    type: KitElementType["MARKETING_SHOPWINDOW"];
+};

package/lib/typings/utils/animation2gif/animationToGIF.d.ts

@@ -0,0 +1,13 @@
+interface AnimationToGIFOption {
+    totalTime: number;
+    container: HTMLElement;
+    frames?: number;
+    debug?: boolean;
+}
+interface AnimationItem {
+    keyframes: Keyframe[] | PropertyIndexedKeyframes | null;
+    options?: number | KeyframeAnimationOptions;
+    selector: Parameters<Document['querySelector']>[0];
+}
+export declare function animationToGIF(list: AnimationItem[], options: AnimationToGIFOption): Promise<Blob>;
+export {};

package/lib/typings/utils/animation2gif/dom2Svg.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const urlToImage: (url: string) => Promise<HTMLImageElement>;
+export declare const base64ToBlob: (base64: string) => Promise<string>;
+export declare const img2Base64: (source: InstanceType<typeof Image>) => Promise<string>;
+export declare const img2Blob: (img: HTMLImageElement) => Promise<Blob>;
+interface Dom2SvgOptions {
+    width?: number;
+    height?: number;
+    overwrite?: Array<{
+        selector: Parameters<Document["querySelector"]>[0] | "";
+        style?: React.CSSProperties;
+        innerText?: string;
+        innerHTML?: string;
+        attrs?: Record<string, string>;
+    }>;
+    styleText?: string;
+    wrapper?: (content: Element) => Element;
+}
+export declare const dom2Svg: (dom: HTMLElement, option?: Dom2SvgOptions) => Promise<string>;
+export {};

package/lib/typings/utils/animation2gif/generateGif.d.ts

@@ -0,0 +1,8 @@
+import GIF from "gif.js";
+export interface GenerateGifOptions {
+    images: Array<HTMLImageElement>;
+    gif?: GIF.Options;
+    perFrameTime?: number;
+    autoSize?: boolean;
+}
+export declare const generateGif: (options: GenerateGifOptions) => Promise<Blob>;

package/lib/typings/utils/animation2gif/image2Canvas.d.ts

@@ -0,0 +1,4 @@
+export declare const image2Canvas: (img: HTMLImageElement, options?: {
+    width: number;
+    height: number;
+}) => HTMLCanvasElement;

package/lib/typings/utils/animation2gif/index.d.ts

@@ -0,0 +1,3 @@
+export { animationToGIF } from './animationToGIF';
+export { dom2Svg, base64ToBlob, img2Base64, img2Blob, urlToImage } from './dom2Svg';
+export { generateGif } from './generateGif';

package/lib/typings/utils/getCountdownTime.d.ts

@@ -0,0 +1,6 @@
+export declare function getCountdownTime(seconds: number): {
+    day: string;
+    hour: string;
+    minute: string;
+    second: string;
+};

package/lib/typings/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./getCountdownTime";
+export * from "./animation2gif";

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "easy-email-pro-kit",
+  "version": "0.2.0",
+  "description": "",
+  "files": [
+    "lib"
+  ],
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.es.js",
+  "types": "lib/typings/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "dependencies": {
+    "@types/mjml": "^4.7.0",
+    "modern-gif": "^1.1.4"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "scripts": {
+    "build": "vite build && npm run typings",
+    "typings": "tsc --declaration --emitDeclarationOnly --project tsconfig.alias.json && tsc-alias -p tsconfig.alias.json",
+    "lint": "eslint --fix --ext .tsx,.ts src/"
+  }
+}