@builder.io/sdk-react 2.0.8 → 2.0.12

package/lib/edge/blocks-e0e60319.js

@@ -0,0 +1,833 @@
+import { jsx as a, Fragment as h, jsxs as P } from "react/jsx-runtime";
+import { createContext as F, useState as O, useEffect as w, useRef as V, useContext as N } from "react";
+import { BuilderContext as M } from "./blocks-exports.mjs";
+import { TARGET as x, checkIsDefined as R, isPreviewing as Z, isEditing as T } from "./server-entry-84c3cdd6.js";
+import { evaluate as A, set as q } from "./evaluate-6408d64d.js";
+import { getClassPropName as J } from "./get-class-prop-name-d005a2bb.js";
+import { DynamicRenderer as Q } from "./dynamic-renderer-8b343325.js";
+const L = (e) => JSON.parse(JSON.stringify(e)), G = F({ registeredComponents: {} });
+function X(e) {
+  var n;
+  return {
+    ...(n = e.component) == null ? void 0 : n.options,
+    ...e.options
+  };
+}
+function Y(e, ...n) {
+  const t = Object.assign({}, e);
+  for (const r of n)
+    delete t[r];
+  return t;
+}
+function I(e) {
+  if (e === null || typeof e != "object")
+    return e;
+  if (Array.isArray(e))
+    return e.map((t) => I(t));
+  if (e["@type"] === "@builder.io/sdk:Element")
+    return e;
+  const n = {};
+  for (const t in e)
+    t !== "meta" && Object.prototype.hasOwnProperty.call(e, t) && (n[t] = I(e[t]));
+  return n;
+}
+const ee = ["svelte", "vue", "angular", "qwik", "solid"].includes(x), te = (e) => {
+  if (ee) {
+    const n = L(e);
+    return {
+      ...n,
+      properties: {
+        ...n.properties
+      },
+      actions: {
+        ...n.actions
+      }
+    };
+  } else {
+    const n = I(Y(e, "children", "meta"));
+    return {
+      ...n,
+      properties: {
+        ...n.properties
+      },
+      actions: {
+        ...n.actions
+      },
+      children: e.children,
+      meta: e.meta
+    };
+  }
+}, ne = ({
+  block: e,
+  context: n,
+  localState: t,
+  rootState: r,
+  rootSetState: o
+}) => {
+  if (!e.bindings)
+    return e;
+  const s = te(e);
+  for (const l in e.bindings) {
+    const u = e.bindings[l], f = A({
+      code: u,
+      localState: t,
+      rootState: r,
+      rootSetState: o,
+      context: n,
+      enableCache: !0
+    });
+    q(s, l, f);
+  }
+  return s;
+};
+function oe({
+  block: e,
+  context: n,
+  shouldEvaluateBindings: t,
+  localState: r,
+  rootState: o,
+  rootSetState: s
+}) {
+  const l = e;
+  return t ? ne({
+    block: l,
+    localState: r,
+    rootState: o,
+    rootSetState: s,
+    context: n
+  }) : l;
+}
+const b = (e) => e ? e.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase() : "";
+function re(e, n, t = {}) {
+  let r, o, s, l = null, u = 0;
+  const f = function() {
+    u = t.leading === !1 ? 0 : Date.now(), l = null, s = e.apply(r, o), l || (r = o = null);
+  };
+  return function() {
+    const c = Date.now();
+    !u && t.leading === !1 && (u = c);
+    const m = n - (c - u);
+    return r = this, o = arguments, m <= 0 || m > n ? (l && (clearTimeout(l), l = null), u = c, s = e.apply(r, o), l || (r = o = null)) : !l && t.trailing !== !1 && (l = setTimeout(f, m)), s;
+  };
+}
+function S(e, ...n) {
+  const t = Object(e);
+  for (let r = 1; r < arguments.length; r++) {
+    const o = arguments[r];
+    if (o != null)
+      for (const s in o)
+        Object.prototype.hasOwnProperty.call(o, s) && (t[s] = o[s]);
+  }
+  return t;
+}
+function se(e) {
+  for (const n of e)
+    switch (n.trigger) {
+      case "pageLoad":
+        ce(n);
+        break;
+      case "scrollInView":
+        ie(n);
+        break;
+    }
+}
+function j(e) {
+  console.warn(`Cannot animate element: element with ID ${e} not found!`);
+}
+function H(e, n) {
+  const t = le(e), r = getComputedStyle(n), o = e.steps[0].styles, s = e.steps[e.steps.length - 1].styles, l = [o, s];
+  for (const u of l)
+    for (const f of t)
+      f in u || (u[f] = r[f]);
+}
+function le(e) {
+  const n = [];
+  for (const t of e.steps)
+    for (const r in t.styles)
+      n.indexOf(r) === -1 && n.push(r);
+  return n;
+}
+function ce(e) {
+  const n = Array.prototype.slice.call(document.getElementsByClassName(e.elementId || e.id || ""));
+  if (!n.length) {
+    j(e.elementId || e.id || "");
+    return;
+  }
+  Array.from(n).forEach((t) => {
+    H(e, t), t.style.transition = "none", t.style.transitionDelay = "0", S(t.style, e.steps[0].styles), setTimeout(() => {
+      t.style.transition = `all ${e.duration}s ${b(e.easing)}`, e.delay && (t.style.transitionDelay = e.delay + "s"), S(t.style, e.steps[1].styles), setTimeout(() => {
+        t.style.transition = "", t.style.transitionDelay = "";
+      }, (e.delay || 0) * 1e3 + e.duration * 1e3 + 100);
+    });
+  });
+}
+function ie(e) {
+  const n = Array.prototype.slice.call(document.getElementsByClassName(e.elementId || e.id || ""));
+  if (!n.length) {
+    j(e.elementId || e.id || "");
+    return;
+  }
+  Array.from(n).forEach((t) => {
+    H(e, t);
+    let r = !1, o = !1;
+    function s() {
+      !r && u(t) ? (r = !0, o = !0, setTimeout(() => {
+        S(t.style, e.steps[1].styles), e.repeat || document.removeEventListener("scroll", l), setTimeout(() => {
+          o = !1, e.repeat || (t.style.transition = "", t.style.transitionDelay = "");
+        }, (e.duration + (e.delay || 0)) * 1e3 + 100);
+      })) : e.repeat && r && !o && !u(t) && (r = !1, S(t.style, e.steps[0].styles));
+    }
+    const l = re(s, 200, {
+      leading: !1
+    });
+    function u(m) {
+      const g = m.getBoundingClientRect(), k = window.innerHeight, i = (e.thresholdPercent || 0) / 100 * k;
+      return g.bottom > i && g.top < k - i;
+    }
+    const f = e.steps[0].styles;
+    function c() {
+      S(t.style, f);
+    }
+    c(), setTimeout(() => {
+      t.style.transition = `all ${e.duration}s ${b(e.easing)}`, e.delay && (t.style.transitionDelay = e.delay + "s");
+    }), document.addEventListener("scroll", l, {
+      capture: !0,
+      passive: !0
+    }), s();
+  });
+}
+const U = (e) => Object.entries(e).map(([t, r]) => {
+  if (typeof r == "string")
+    return `${b(t)}: ${r};`;
+}).filter(R), ae = (e) => U(e).join(`
+`), C = ({
+  mediaQuery: e,
+  className: n,
+  styles: t
+}) => {
+  const r = `.${n} {
+    ${ae(t)}
+  }`;
+  return e ? `${e} {
+      ${r}
+    }` : r;
+};
+function ue({
+  style: e
+}) {
+  return e;
+}
+const de = ({
+  block: e,
+  context: n
+}) => fe(ue({
+  style: e.style || {},
+  context: n,
+  block: e
+}));
+function fe(e) {
+  switch (x) {
+    case "svelte":
+    case "vue":
+    case "solid":
+    case "angular":
+      return U(e).join(" ");
+    case "qwik":
+    case "reactNative":
+    case "react":
+    case "rsc":
+      return e;
+  }
+}
+const me = ({
+  block: e,
+  registeredComponents: n
+}) => {
+  var o;
+  const t = (o = e.component) == null ? void 0 : o.name;
+  if (!t)
+    return null;
+  const r = n[t];
+  if (r)
+    return r;
+  console.warn(`
+      Could not find a registered component named "${t}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+}, pe = ({
+  block: e,
+  context: n
+}) => {
+  const {
+    repeat: t,
+    ...r
+  } = e;
+  if (!(t != null && t.collection))
+    return;
+  const o = A({
+    code: t.collection,
+    localState: n.localState,
+    rootState: n.rootState,
+    rootSetState: n.rootSetState,
+    context: n.context,
+    enableCache: !0
+  });
+  if (!Array.isArray(o))
+    return;
+  const s = t.collection.split(".").pop(), l = t.itemName || (s ? s + "Item" : "item");
+  return o.map((f, c) => ({
+    context: {
+      ...n,
+      localState: {
+        ...n.localState,
+        $index: c,
+        $item: f,
+        [l]: f,
+        [`$${l}Index`]: c
+      }
+    },
+    block: r
+  }));
+}, he = (e, n) => {
+  var t;
+  return (t = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && t.builderLinkComponent ? {
+    builderLinkComponent: n
+  } : {};
+}, ye = (e, n) => {
+  var t;
+  return (t = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && t.builderComponents ? {
+    builderComponents: n
+  } : {};
+}, ge = (e, n) => {
+  var t;
+  return (t = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && t.builderBlock ? {
+    builderBlock: n
+  } : {};
+}, ke = (e, n) => {
+  var t;
+  return (t = e == null ? void 0 : e.shouldReceiveBuilderProps) != null && t.builderContext ? {
+    builderContext: n
+  } : {};
+}, z = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200
+  }
+}, D = (e, n = z) => `@media (max-width: ${n[e].max}px)`, Se = ({
+  small: e,
+  medium: n
+}) => {
+  const t = L(z);
+  if (!e || !n)
+    return t;
+  const r = Math.floor(e / 2);
+  t.small = {
+    max: e,
+    min: r,
+    default: r + 1
+  };
+  const o = t.small.max + 1;
+  t.medium = {
+    max: n,
+    min: o,
+    default: o + 1
+  };
+  const s = t.medium.max + 1;
+  return t.large = {
+    max: 2e3,
+    // TODO: decide upper limit
+    min: s,
+    default: s + 1
+  }, t;
+};
+function Ce(e) {
+  return /* @__PURE__ */ a(
+    "style",
+    {
+      dangerouslySetInnerHTML: { __html: e.styles },
+      "data-id": e.id,
+      nonce: e.nonce
+    }
+  );
+}
+function xe(e) {
+  function n() {
+    const r = e.block;
+    return R(r.hide) ? !r.hide : R(r.show) ? r.show : !0;
+  }
+  function t() {
+    var y, W, $;
+    const r = e.block, o = r.responsiveStyles, s = e.context.content, l = Se(
+      ((y = s == null ? void 0 : s.meta) == null ? void 0 : y.breakpoints) || {}
+    ), u = o == null ? void 0 : o.large, f = o == null ? void 0 : o.medium, c = o == null ? void 0 : o.small, m = r.id;
+    if (!m)
+      return "";
+    const g = u ? C({
+      className: m,
+      styles: u
+    }) : "", k = f ? C({
+      className: m,
+      styles: f,
+      mediaQuery: D(
+        "medium",
+        l
+      )
+    }) : "", d = c ? C({
+      className: m,
+      styles: c,
+      mediaQuery: D(
+        "small",
+        l
+      )
+    }) : "", i = r.animations && r.animations.find((B) => B.trigger === "hover");
+    let p = "";
+    if (i) {
+      const B = (($ = (W = i.steps) == null ? void 0 : W[1]) == null ? void 0 : $.styles) || {};
+      p = C({
+        className: `${m}:hover`,
+        styles: {
+          ...B,
+          transition: `all ${i.duration}s ${b(
+            i.easing
+          )}`,
+          transitionDelay: i.delay ? `${i.delay}s` : "0s"
+        }
+      }) || "";
+    }
+    return [
+      g,
+      k,
+      d,
+      p
+    ].join(" ");
+  }
+  return /* @__PURE__ */ a(h, { children: t() && n() ? /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(
+    Ce,
+    {
+      id: "builderio-block",
+      styles: t(),
+      nonce: e.context.nonce
+    }
+  ) }) : null });
+}
+function be(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}
+const ve = (e) => `on${be(e)}`, Be = (e, n) => (t) => A({
+  code: e,
+  context: n.context,
+  localState: n.localState,
+  rootState: n.rootState,
+  rootSetState: n.rootSetState,
+  event: t,
+  isExpression: !1,
+  enableCache: !0
+});
+function K(e) {
+  var r;
+  const n = {}, t = (r = e.block.actions) != null ? r : {};
+  for (const o in t) {
+    if (!t.hasOwnProperty(o))
+      continue;
+    const s = t[o];
+    let l = ve(o);
+    if (e.stripPrefix)
+      switch (x) {
+        case "vue":
+          l = l.replace("v-on:", "");
+          break;
+        case "svelte":
+          l = l.replace("on:", "");
+          break;
+      }
+    n[l] = Be(s, e);
+  }
+  return n;
+}
+function Pe({
+  properties: e
+}) {
+  return e;
+}
+const we = (e) => ({
+  href: e.href
+});
+function E({
+  block: e,
+  context: n
+}) {
+  var r;
+  const t = {
+    ...we(e),
+    ...e.properties,
+    "builder-id": e.id,
+    style: de({
+      block: e,
+      context: n
+    }),
+    [J()]: [e.id, "builder-block", e.class, (r = e.properties) == null ? void 0 : r.class].filter(Boolean).join(" ")
+  };
+  return Pe({
+    properties: t,
+    context: n,
+    block: e
+  });
+}
+function Re(e) {
+  return /* @__PURE__ */ a(
+    Q,
+    {
+      TagName: e.Wrapper,
+      attributes: E({
+        block: e.block,
+        context: e.context
+      }),
+      actionAttributes: K({
+        block: e.block,
+        rootState: e.context.rootState,
+        rootSetState: e.context.rootSetState,
+        localState: e.context.localState,
+        context: e.context.context,
+        stripPrefix: !0
+      }),
+      children: e.children
+    }
+  );
+}
+function Ie(e) {
+  function n() {
+    return e.includeBlockProps ? {
+      ...E({
+        block: e.block,
+        context: e.context
+      }),
+      ...K({
+        block: e.block,
+        rootState: e.context.rootState,
+        rootSetState: e.context.rootSetState,
+        localState: e.context.localState,
+        context: e.context.context
+      })
+    } : {};
+  }
+  return /* @__PURE__ */ a(e.Wrapper, { ...e.wrapperProps, attributes: n(), children: e.children });
+}
+const Oe = ({
+  componentOptions: e,
+  builderBlock: n,
+  context: t,
+  componentRef: r,
+  includeBlockProps: o,
+  isInteractive: s,
+  contextValue: l
+}) => {
+  const u = {
+    ...e,
+    /**
+     * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
+     * component itself directly. Otherwise, they are provided to the wrapper element.
+     */
+    ...o ? {
+      attributes: E({
+        block: n,
+        context: l
+      })
+    } : {}
+  };
+  return s ? {
+    Wrapper: r,
+    block: n,
+    context: t,
+    wrapperProps: e,
+    includeBlockProps: o
+  } : u;
+};
+function _(e) {
+  var r;
+  const [n, t] = O(
+    () => e.isInteractive ? Ie : e.componentRef
+  );
+  return /* @__PURE__ */ a(h, { children: e.componentRef ? /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(
+    n,
+    {
+      ...Oe({
+        componentOptions: e.componentOptions,
+        builderBlock: e.builderBlock,
+        context: e.context,
+        componentRef: e.componentRef,
+        linkComponent: e.linkComponent,
+        includeBlockProps: e.includeBlockProps,
+        isInteractive: e.isInteractive,
+        contextValue: e.context
+      }),
+      children: (r = e.blockChildren) == null ? void 0 : r.map((o) => /* @__PURE__ */ a(
+        v,
+        {
+          block: o,
+          context: e.context,
+          registeredComponents: e.registeredComponents,
+          linkComponent: e.linkComponent
+        },
+        o.id
+      ))
+    }
+  ) }) : null });
+}
+function Ae(e) {
+  const [n, t] = O(() => e.repeatContext);
+  return /* @__PURE__ */ a(M.Provider, { value: n, children: /* @__PURE__ */ a(
+    v,
+    {
+      block: e.block,
+      context: n,
+      registeredComponents: e.registeredComponents,
+      linkComponent: e.linkComponent
+    }
+  ) });
+}
+function v(e) {
+  var m, g, k;
+  function n() {
+    return pe({
+      block: e.block,
+      context: e.context
+    });
+  }
+  const [t, r] = O(() => ({
+    value: null,
+    update: !1
+  }));
+  function o() {
+    var i;
+    if (t.value && !t.update && !Z())
+      return t.value;
+    const d = (i = e.block.repeat) != null && i.collection ? e.block : oe({
+      block: e.block,
+      localState: e.context.localState,
+      rootState: e.context.rootState,
+      rootSetState: e.context.rootSetState,
+      context: e.context.context,
+      shouldEvaluateBindings: !0
+    });
+    return t.value = d, t.update = !1, d;
+  }
+  function s() {
+    return me({
+      block: o(),
+      registeredComponents: e.registeredComponents
+    });
+  }
+  function l() {
+    var i;
+    return e.block.tagName === "a" || ((i = o().properties) == null ? void 0 : i.href) || o().href ? e.linkComponent || "a" : e.block.tagName || "div";
+  }
+  function u() {
+    var p, y;
+    if ((p = e.block.repeat) != null && p.collection)
+      return !!((y = n == null ? void 0 : n()) != null && y.length);
+    const d = "hide" in o() ? o().hide : !1;
+    return ("show" in o() ? o().show : !0) && !d;
+  }
+  function f() {
+    var i, p;
+    return !((i = s == null ? void 0 : s()) != null && i.component) && !n() ? (p = o().children) != null ? p : [] : [];
+  }
+  function c() {
+    var d, i, p, y;
+    return {
+      blockChildren: (d = o().children) != null ? d : [],
+      componentRef: (i = s == null ? void 0 : s()) == null ? void 0 : i.component,
+      componentOptions: {
+        ...X(o()),
+        ...ge(s(), o()),
+        ...ke(s(), e.context),
+        ...he(s(), e.linkComponent),
+        ...ye(
+          s(),
+          e.registeredComponents
+        )
+      },
+      context: e.context,
+      linkComponent: e.linkComponent,
+      registeredComponents: e.registeredComponents,
+      builderBlock: o(),
+      includeBlockProps: ((p = s == null ? void 0 : s()) == null ? void 0 : p.noWrap) === !0,
+      isInteractive: !((y = s == null ? void 0 : s()) != null && y.isRSC && x === "rsc")
+    };
+  }
+  return w(() => {
+    const d = o().id, i = o().animations;
+    i && d && se(
+      i.map((p) => ({
+        ...p,
+        elementId: d
+      }))
+    );
+  }, []), w(() => {
+    t.update = !0;
+  }), /* @__PURE__ */ a(h, { children: u() ? /* @__PURE__ */ P(h, { children: [
+    /* @__PURE__ */ a(xe, { block: o(), context: e.context }),
+    (m = s == null ? void 0 : s()) != null && m.noWrap ? /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(
+      _,
+      {
+        componentRef: c().componentRef,
+        componentOptions: c().componentOptions,
+        blockChildren: c().blockChildren,
+        context: c().context,
+        registeredComponents: c().registeredComponents,
+        linkComponent: c().linkComponent,
+        builderBlock: c().builderBlock,
+        includeBlockProps: c().includeBlockProps,
+        isInteractive: c().isInteractive
+      }
+    ) }) : /* @__PURE__ */ a(h, { children: n() ? /* @__PURE__ */ a(h, { children: (k = n()) == null ? void 0 : k.map((d, i) => /* @__PURE__ */ a(
+      Ae,
+      {
+        repeatContext: d.context,
+        block: d.block,
+        registeredComponents: e.registeredComponents,
+        linkComponent: e.linkComponent
+      },
+      i
+    )) }) : /* @__PURE__ */ P(
+      Re,
+      {
+        Wrapper: l(),
+        block: o(),
+        context: e.context,
+        children: [
+          /* @__PURE__ */ a(
+            _,
+            {
+              componentRef: c().componentRef,
+              componentOptions: c().componentOptions,
+              blockChildren: c().blockChildren,
+              context: c().context,
+              registeredComponents: c().registeredComponents,
+              linkComponent: c().linkComponent,
+              builderBlock: c().builderBlock,
+              includeBlockProps: c().includeBlockProps,
+              isInteractive: c().isInteractive
+            }
+          ),
+          (g = f()) == null ? void 0 : g.map((d) => /* @__PURE__ */ a(
+            v,
+            {
+              block: d,
+              registeredComponents: e.registeredComponents,
+              linkComponent: e.linkComponent,
+              context: e.context
+            },
+            d.id
+          ))
+        ]
+      }
+    ) })
+  ] }) : null });
+}
+function Ee(e) {
+  const n = V(null);
+  function t() {
+    var s;
+    return "builder-blocks" + ((s = e.blocks) != null && s.length ? "" : " no-blocks");
+  }
+  function r() {
+    var s, l;
+    T() && !((s = e.blocks) != null && s.length) && ((l = window.parent) == null || l.postMessage(
+      {
+        type: "builder.clickEmptyBlocks",
+        data: {
+          parentElementId: e.parent,
+          dataPath: e.path
+        }
+      },
+      "*"
+    ));
+  }
+  function o() {
+    var s, l;
+    T() && !((s = e.blocks) != null && s.length) && ((l = window.parent) == null || l.postMessage(
+      {
+        type: "builder.hoverEmptyBlocks",
+        data: {
+          parentElementId: e.parent,
+          dataPath: e.path
+        }
+      },
+      "*"
+    ));
+  }
+  return w(() => {
+  }, []), /* @__PURE__ */ P(h, { children: [
+    /* @__PURE__ */ a(
+      e.BlocksWrapper,
+      {
+        ref: n,
+        className: t() + " props-blocks-wrapper-51ef31b4",
+        "builder-path": e.path,
+        "builder-parent-id": e.parent,
+        style: e.styleProp,
+        onClick: (s) => r(),
+        onMouseEnter: (s) => o(),
+        onKeyPress: (s) => r(),
+        ...e.BlocksWrapperProps,
+        children: e.children
+      }
+    ),
+    /* @__PURE__ */ a("style", { children: `.props-blocks-wrapper-51ef31b4 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}` })
+  ] });
+}
+function We(e) {
+  var r, o, s;
+  const n = N(M), t = N(G);
+  return /* @__PURE__ */ a(
+    Ee,
+    {
+      blocks: e.blocks,
+      parent: e.parent,
+      path: e.path,
+      styleProp: e.styleProp,
+      BlocksWrapper: ((r = e.context) == null ? void 0 : r.BlocksWrapper) || n.BlocksWrapper,
+      BlocksWrapperProps: ((o = e.context) == null ? void 0 : o.BlocksWrapperProps) || n.BlocksWrapperProps,
+      children: e.blocks ? /* @__PURE__ */ a(h, { children: (s = e.blocks) == null ? void 0 : s.map((l) => /* @__PURE__ */ a(
+        v,
+        {
+          block: l,
+          linkComponent: e.linkComponent,
+          context: e.context || n,
+          registeredComponents: e.registeredComponents || t.registeredComponents
+        },
+        l.id
+      )) }) : null
+    }
+  );
+}
+const je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: We
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  v as Block,
+  We as Blocks,
+  G as ComponentsContext,
+  Ce as InlinedStyles,
+  je as blocks,
+  L as fastClone,
+  Se as getSizesForBreakpoints,
+  fe as mapStyleObjToStrIfNeeded,
+  ce as triggerAnimation
+};