@useinsider/guido 3.8.2 → 3.9.0-beta.0f09763

package/dist/extensions/Blocks/Recommendation/templates/utils.js

@@ -1,101 +1,148 @@
-import { ATTR_CUSTOM_PREFIX as c, PRODUCT_ATTRIBUTE_PREFIX as l, ATTR_PRODUCT_IMAGE as b, ATTR_PRODUCT_NAME as T, ATTR_PRODUCT_OLD_PRICE as g, ATTR_PRODUCT_PRICE as _, ATTR_PRODUCT_OMNIBUS_PRICE as f, ATTR_PRODUCT_OMNIBUS_DISCOUNT as p, ATTR_PRODUCT_BUTTON as m } from "../constants/selectors.js";
-function U(t) {
-  return t.replace(/_/g, " ").replace(/\b\w/g, (n) => n.toUpperCase());
-}
-function S(t) {
-  const n = Array.isArray(t) ? t[t.length - 1] : t;
-  if (typeof n == "string")
-    return n;
-  if (typeof n == "number")
-    return String(n);
-}
-function C(t, n) {
-  const e = Object.values(n).find((o) => o.attributeName === t);
-  return (e == null ? void 0 : e.type) === "defaultAttribute";
-}
-function E(t, n) {
-  return C(t, n) ? t : `${l}${t}`;
-}
-function M(t) {
-  const n = t.startsWith(l) ? t.substring(l.length) : t;
-  return `${c}${n}`;
-}
-const P = Symbol("customCellHtml");
-function k(t, n, e = {}) {
-  const o = t[P];
+import { ATTR_PRODUCT_PRICE as c, ATTR_PRODUCT_OLD_PRICE as l, ATTR_CUSTOM_PREFIX as a, PRODUCT_ATTRIBUTE_PREFIX as u, ATTR_PRODUCT_IMAGE as f, ATTR_PRODUCT_NAME as T, ATTR_PRODUCT_OMNIBUS_PRICE as C, ATTR_PRODUCT_OMNIBUS_DISCOUNT as p, ATTR_PRODUCT_BUTTON as _ } from "../constants/selectors.js";
+import { useRecommendationExtensionStore as D } from "../store/recommendation.js";
+import { formatPrice as O } from "../utils/priceFormatter.js";
+function E() {
+  const t = D(), { currencySettings: e } = t.recommendationConfigs;
+  return {
+    code: e.value,
+    symbol: e.symbol,
+    alignment: e.alignment === "0" ? "before" : "after",
+    decimalCount: parseInt(e.decimalCount) || 2,
+    decimalSeparator: e.decimalSeparator,
+    thousandSeparator: e.thousandSeparator
+  };
+}
+function m(t, e = "price") {
+  const n = E(), o = t[e], r = (o == null ? void 0 : o[n.code]) ?? Object.values(o ?? {})[0] ?? 0;
+  return O({
+    price: r,
+    currency: n
+  });
+}
+function Y(t) {
+  return m(t, "price") === m(t, "original_price");
+}
+function I(t) {
+  return t.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase());
+}
+function G(t) {
+  const e = t.indexOf(c), n = t.indexOf(l), o = n !== -1 && (e === -1 || n < e);
+  return {
+    originalFirst: o,
+    anchor: o ? l : c,
+    skip: o ? c : l
+  };
+}
+function $(t) {
+  const e = Array.isArray(t) ? t[t.length - 1] : t;
+  if (typeof e == "string")
+    return e;
+  if (typeof e == "number")
+    return String(e);
+}
+function h(t, e) {
+  const n = Object.values(e).find((o) => o.attributeName === t);
+  return (n == null ? void 0 : n.type) === "defaultAttribute";
+}
+function L(t, e) {
+  return h(t, e) ? t : `${u}${t}`;
+}
+function j(t) {
+  const e = t.startsWith(u) ? t.substring(u.length) : t;
+  return `${a}${e}`;
+}
+const x = Symbol("customCellHtml");
+function z(t, e, n = {}) {
+  const o = t[x];
   if (!o)
     return { ...t };
-  const s = { ...t };
-  return n.filter((r) => r.startsWith(c) && !s[r]).forEach((r) => {
-    const i = r.substring(c.length), a = U(i), y = E(i, e), R = C(i, e);
-    s[r] = (d, A) => {
-      var u;
-      const D = R ? d[i] : (u = d.product_attributes) == null ? void 0 : u[i], O = S(D) ?? a;
-      return o(y, O, A);
+  const r = { ...t };
+  return e.filter((s) => s.startsWith(a) && !r[s]).forEach((s) => {
+    const i = s.substring(a.length), d = I(i), S = L(i, n), A = h(i, n);
+    r[s] = (g, R) => {
+      var b;
+      const P = A ? g[i] : (b = g.product_attributes) == null ? void 0 : b[i], U = $(P) ?? d;
+      return o(S, U, R);
     };
-  }), s;
+  }), r;
+}
+function V(t, e) {
+  var n, o, r, s, i;
+  return {
+    cellPadding: e.cellPadding,
+    cardBackgroundColor: e.cardBackgroundColor,
+    cellBackgroundColor: (n = e.cellBackgroundColors) == null ? void 0 : n[t],
+    cellAlignment: (o = e.cellAlignments) == null ? void 0 : o[t],
+    cellClasses: (r = e.cellClasses) == null ? void 0 : r[t],
+    omnibusText: (s = e.omnibusTexts) == null ? void 0 : s[t],
+    styleTemplate: (i = e.styleTemplates) == null ? void 0 : i[t]
+  };
 }
-const x = {
+const X = {
   TITLE: "You May Also Like!"
-}, v = [
-  b,
-  T,
-  g,
-  _,
+}, K = [
   f,
+  T,
+  l,
+  c,
+  C,
   p,
-  m
-], F = {
-  [b]: !0,
+  _
+], q = {
+  [f]: !0,
   [T]: !0,
-  [_]: !0,
-  [g]: !0,
-  [f]: !1,
+  [c]: !0,
+  [l]: !0,
+  [C]: !1,
   [p]: !1,
-  [m]: !0
-}, I = 10;
-function $(t = I) {
+  [_]: !0
+}, B = 10;
+function k(t = B) {
   return `
     <tr>
         <td class="spacer" style="height: ${t}px;"></td>
     </tr>
 `;
 }
-const L = $();
-function w(t, n) {
-  return n ? n.pStyle ?? "" : t;
+const v = k();
+function w(t, e) {
+  return e ? e.pStyle ?? "" : t;
 }
-function W(t, n, e) {
-  const o = w(n.pStyle, e), s = e ? e.openTags ?? "" : n.openTags, r = e ? e.closeTags ?? "" : n.closeTags;
-  return `<p contenteditable="false" style="${o}">${s}${t}${r}</p>`;
+function J(t, e, n) {
+  const o = w(e.pStyle, n), r = n ? n.openTags ?? "" : e.openTags, s = n ? n.closeTags ?? "" : e.closeTags;
+  return `<p contenteditable="false" style="${o}">${r}${t}${s}</p>`;
 }
-function H(t, n) {
-  const e = [];
-  return t && e.push(t), n && e.push(`background-color: ${n};`), e.join(" ");
+function Q(t, e) {
+  const n = [];
+  return t && n.push(t), e && n.push(`background-color: ${e};`), n.join(" ");
 }
-function Y(t) {
-  return t ? ` style="background-color: ${t};"` : "";
+function N(t) {
+  return t ? ` background-color: ${t};` : "";
+}
+function Z(t) {
+  const e = N(t);
+  return e ? ` style="${e.trim()}"` : "";
 }
-function G(t, n = "") {
+function tt(t, e = "") {
   return {
-    before: (t == null ? void 0 : t.before) ?? n,
+    before: (t == null ? void 0 : t.before) ?? e,
     after: (t == null ? void 0 : t.after) ?? ""
   };
 }
-function z(t, n) {
-  return `${(n == null ? void 0 : n.openTags) ?? ""}${t}${(n == null ? void 0 : n.closeTags) ?? ""}`;
+function et(t, e) {
+  return `${(e == null ? void 0 : e.openTags) ?? ""}${t}${(e == null ? void 0 : e.closeTags) ?? ""}`;
 }
-function X(t) {
+function nt(t) {
   return t != null && t.buttonFitToContainer ? "es-button-border es-fw" : "es-button-border";
 }
-const j = "display: block; max-width: 100%; height: auto;", V = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79);", K = "color: rgb(56, 118, 29); background: rgb(217, 234, 211); font-family: arial, 'helvetica neue', helvetica, sans-serif; font-size: 16px; font-weight: normal; line-height: 120%; mso-border-alt: 10px solid rgb(217, 234, 211); mso-padding-alt: 0;", h = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
-function q(t) {
-  return !t || typeof t != "string" || t.trim() === "" ? h : t.startsWith("http://") ? t.replace("http://", "https://") : t;
+const ot = "display: block; max-width: 100%; height: auto;", rt = "border-width: 1px; background: rgb(217, 234, 211); border-color: rgb(106, 168, 79);", st = "color: rgb(56, 118, 29); background: rgb(217, 234, 211); font-family: arial, 'helvetica neue', helvetica, sans-serif; font-size: 16px; font-weight: normal; line-height: 120%; mso-border-alt: 10px solid rgb(217, 234, 211); mso-padding-alt: 0;", y = "https://email-static.useinsider.com/stripo/modules/email-recommendation-v3/assets/images/image-placeholder.png";
+function it(t) {
+  return !t || typeof t != "string" || t.trim() === "" ? y : t.startsWith("http://") ? t.replace("http://", "https://") : t;
 }
-function B(t) {
+function F(t) {
   return {
     name: "Product Name",
-    image_url: h,
+    image_url: y,
     price: { USD: 18 },
     original_price: { USD: 20 },
     discount: { USD: 2 },
@@ -107,19 +154,19 @@ function B(t) {
     category: []
   };
 }
-function J(t = 6) {
+function ct(t = 6) {
   return Array.from(
     { length: t },
-    (n, e) => B(String(e + 1))
+    (e, n) => F(String(n + 1))
   );
 }
-function Q(t = "grid", n) {
-  const e = t === "list" ? `
-        data-layout="list"` : "", o = n ? ` ${n}` : "";
+function lt(t = "grid", e) {
+  const n = t === "list" ? `
+        data-layout="list"` : "", o = e ? ` ${e}` : "";
   return `
     <td
         align="left"
-        class="${`recommendation-block-v2 esd-block-recommendation-v3-block es-p20${t === "list" ? " es-m-p0 ins-recommendation-list-layout" : ""}${o}`}"${e}>
+        class="${`recommendation-block-v2 esd-block-recommendation-v3-block es-p20${t === "list" ? " es-m-p0 ins-recommendation-list-layout" : ""}${o}`}"${n}>
         <table width="100%" cellpadding="0" cellspacing="0" border="0">
             <tr>
                 <td align="center">
@@ -151,7 +198,7 @@ function Q(t = "grid", n) {
                                     </table>
                                 </td>
                             </tr>
-                            ${L}
+                            ${v}
                             <tr>
                                 <td>
                                     <table
@@ -190,31 +237,37 @@ function Q(t = "grid", n) {
 `;
 }
 export {
-  P as CUSTOM_CELL_HTML,
-  x as DEFAULTS,
-  K as DEFAULT_BUTTON_ANCHOR_STYLE,
-  V as DEFAULT_BUTTON_BORDER_STYLE,
-  v as DEFAULT_CARD_COMPOSITION,
-  F as DEFAULT_CARD_VISIBILITY,
-  j as DEFAULT_IMG_STYLE,
-  I as DEFAULT_ROW_SPACING_PX,
-  h as PLACEHOLDER_IMAGE,
-  k as buildElementRenderer,
-  $ as buildSpacer,
-  Y as cellBgStyleAttr,
-  Q as createBlockTemplate,
-  J as getDefaultProducts,
-  C as isDefaultAttribute,
-  z as renderButtonLabel,
-  W as renderStyledParagraph,
-  X as resolveButtonBorderClass,
-  G as resolveOmnibusText,
+  x as CUSTOM_CELL_HTML,
+  X as DEFAULTS,
+  st as DEFAULT_BUTTON_ANCHOR_STYLE,
+  rt as DEFAULT_BUTTON_BORDER_STYLE,
+  K as DEFAULT_CARD_COMPOSITION,
+  q as DEFAULT_CARD_VISIBILITY,
+  ot as DEFAULT_IMG_STYLE,
+  B as DEFAULT_ROW_SPACING_PX,
+  y as PLACEHOLDER_IMAGE,
+  N as bgColorFragment,
+  V as buildCellOptions,
+  z as buildElementRenderer,
+  k as buildSpacer,
+  Z as cellBgStyleAttr,
+  lt as createBlockTemplate,
+  m as formatProductPrice,
+  E as getCurrentCurrencyConfig,
+  ct as getDefaultProducts,
+  h as isDefaultAttribute,
+  Y as isSamePrice,
+  et as renderButtonLabel,
+  J as renderStyledParagraph,
+  nt as resolveButtonBorderClass,
+  G as resolveInlinePriceOrder,
+  tt as resolveOmnibusText,
   w as resolvePStyle,
-  E as resolveProductAttrValue,
-  H as resolveSegmentBgStyle,
-  q as sanitizeImageUrl,
-  L as spacer,
-  M as toCustomCompositionKey,
-  U as toDisplayName,
-  S as toDisplayableAttributeValue
+  L as resolveProductAttrValue,
+  Q as resolveSegmentBgStyle,
+  it as sanitizeImageUrl,
+  v as spacer,
+  j as toCustomCompositionKey,
+  I as toDisplayName,
+  $ as toDisplayableAttributeValue
 };

package/dist/extensions/Blocks/controlFactories.js

@@ -1,6 +1,6 @@
-import { TextAlignBuiltInControl as a, TextColorBuiltInControl as g, TextSizeBuiltInControl as x, TextStyleBuiltInControl as f, TextFontFamilyBuiltInControl as C, ButtonBackgroundColorBuiltInControl as T, TextPaddingsBuiltInControl as B, ImageSizeBuiltInControl as I, ImageMarginsBuiltInControl as y, ButtonAlignBuiltInControl as m, ButtonBorderBuiltInControl as S, ButtonBorderRadiusBuiltInControl as A, ButtonColorBuiltInControl as b, ButtonFontFamilyBuiltInControl as N, ButtonMarginsBuiltInControl as q, ButtonPaddingsBuiltInControl as $, ButtonTextBuiltInControl as k, ButtonTextSizeBuiltInControl as p, ButtonTextStyleAndFontColorBuiltInControl as F, ButtonFitToContainerBuiltInControl as h, TextLineSpacingBuiltInControl as M } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-const z = "buttonTextStyleForm";
-function P(o, n, r) {
+import { TextAlignBuiltInControl as a, TextColorBuiltInControl as g, TextSizeBuiltInControl as f, TextStyleBuiltInControl as x, TextFontFamilyBuiltInControl as C, ButtonBackgroundColorBuiltInControl as T, TextPaddingsBuiltInControl as B, ImageSizeBuiltInControl as m, ImageMarginsBuiltInControl as y, ButtonAlignBuiltInControl as I, ButtonBorderBuiltInControl as S, ButtonBorderRadiusBuiltInControl as A, ButtonColorBuiltInControl as b, ButtonFontFamilyBuiltInControl as N, ButtonMarginsBuiltInControl as q, ButtonPaddingsBuiltInControl as $, ButtonTextBuiltInControl as k, ButtonTextSizeBuiltInControl as p, ButtonTextStyleAndFontColorBuiltInControl as h, ButtonFitToContainerBuiltInControl as F, TextLineSpacingBuiltInControl as M } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+const R = "buttonTextStyleForm", _ = "backgroundColor", E = /* @__PURE__ */ new Set(["", "transparent", "rgba(0, 0, 0, 0)"]);
+function z(o, n, r) {
   return class extends a {
     getId() {
       return o;
@@ -13,7 +13,7 @@ function P(o, n, r) {
     }
   };
 }
-function _(o, n, r) {
+function v(o, n, r) {
   return class extends g {
     getId() {
       return o;
@@ -26,8 +26,8 @@ function _(o, n, r) {
     }
   };
 }
-function v(o, n, r) {
-  return class extends x {
+function P(o, n, r) {
+  return class extends f {
     getId() {
       return o;
     }
@@ -39,8 +39,8 @@ function v(o, n, r) {
     }
   };
 }
-function L(o, n, r) {
-  return class extends f {
+function D(o, n, r) {
+  return class extends x {
     getId() {
       return o;
     }
@@ -52,7 +52,7 @@ function L(o, n, r) {
     }
   };
 }
-function R(o, n, r) {
+function K(o, n, r) {
   return class extends C {
     getId() {
       return o;
@@ -65,7 +65,7 @@ function R(o, n, r) {
     }
   };
 }
-function O(o, n, r) {
+function L(o, n, r) {
   return class extends T {
     getId() {
       return o;
@@ -76,9 +76,28 @@ function O(o, n, r) {
       const t = e.closest(r);
       return t ? t.querySelectorAll(`[esd-extension-block-id="${n}"]`) : [];
     }
+    /**
+     * Mirrors the picked background onto each target cell as an INLINE style.
+     *
+     * Stripo's built-in applies the background as a stylesheet rule, not inline. On
+     * regeneration we re-bake the captured color inline (cellBgStyleAttr); inline then
+     * outranks Stripo's rule in the cascade, so a later re-edit silently has no effect
+     * (SD-143023). Writing the inline here keeps it the single source of truth and in
+     * sync on every edit. Merged into the parent control's single patch (no extra apply).
+     */
+    getAdditionalModifications(e) {
+      const t = this.getTargetNodes(e);
+      if (!t.length)
+        return;
+      const s = this.api.getValues()[_], i = !s || E.has(s), c = this.api.getDocumentModifier();
+      return t.forEach((u) => {
+        const l = c.modifyHtml(u);
+        i ? l.removeStyle("background-color") : l.setStyle("background-color", s);
+      }), c;
+    }
   };
 }
-function Y(o, n, r) {
+function U(o, n, r) {
   return class extends B {
     getId() {
       return o;
@@ -91,7 +110,7 @@ function Y(o, n, r) {
     }
   };
 }
-function w(o, n, r) {
+function Y(o, n, r) {
   return class extends M {
     getId() {
       return o;
@@ -101,8 +120,8 @@ function w(o, n, r) {
     }
   };
 }
-function D(o, n, r = ".ins-recommendation-product-container") {
-  return class extends m {
+function w(o, n, r = ".ins-recommendation-product-container") {
+  return class extends I {
     getId() {
       return o;
     }
@@ -112,7 +131,7 @@ function D(o, n, r = ".ins-recommendation-product-container") {
     }
   };
 }
-function H(o, n, r = ".ins-recommendation-product-container") {
+function G(o, n, r = ".ins-recommendation-product-container") {
   return class extends b {
     getId() {
       return o;
@@ -123,7 +142,7 @@ function H(o, n, r = ".ins-recommendation-product-container") {
     }
   };
 }
-function K(o, n, r = ".ins-recommendation-product-container") {
+function H(o, n, r = ".ins-recommendation-product-container") {
   return class extends S {
     getId() {
       return o;
@@ -134,7 +153,7 @@ function K(o, n, r = ".ins-recommendation-product-container") {
     }
   };
 }
-function U(o, n, r = ".ins-recommendation-product-container") {
+function V(o, n, r = ".ins-recommendation-product-container") {
   return class extends A {
     getId() {
       return o;
@@ -145,7 +164,7 @@ function U(o, n, r = ".ins-recommendation-product-container") {
     }
   };
 }
-function V(o, n, r = ".ins-recommendation-product-container") {
+function W(o, n, r = ".ins-recommendation-product-container") {
   return class extends N {
     getId() {
       return o;
@@ -156,7 +175,7 @@ function V(o, n, r = ".ins-recommendation-product-container") {
     }
   };
 }
-function W(o, n, r = ".ins-recommendation-product-container") {
+function X(o, n, r = ".ins-recommendation-product-container") {
   return class extends q {
     getId() {
       return o;
@@ -167,7 +186,7 @@ function W(o, n, r = ".ins-recommendation-product-container") {
     }
   };
 }
-function X(o, n, r = ".ins-recommendation-product-container") {
+function j(o, n, r = ".ins-recommendation-product-container") {
   return class extends $ {
     getId() {
       return o;
@@ -178,7 +197,7 @@ function X(o, n, r = ".ins-recommendation-product-container") {
     }
   };
 }
-function j(o, n, r = ".ins-recommendation-product-container") {
+function J(o, n, r = ".ins-recommendation-product-container") {
   return class extends k {
     getId() {
       return o;
@@ -189,7 +208,7 @@ function j(o, n, r = ".ins-recommendation-product-container") {
     }
   };
 }
-function G(o, n, r = ".ins-recommendation-product-container") {
+function Q(o, n, r = ".ins-recommendation-product-container") {
   return class extends p {
     getId() {
       return o;
@@ -200,8 +219,8 @@ function G(o, n, r = ".ins-recommendation-product-container") {
     }
   };
 }
-function J(o, n, r) {
-  return class extends F {
+function Z(o, n, r) {
+  return class extends h {
     getId() {
       return o;
     }
@@ -223,21 +242,21 @@ function J(o, n, r) {
       const t = e.closest(r);
       if (!t)
         return;
-      const i = t.querySelectorAll(`[esd-extension-block-id="${n}"] a.es-button`);
-      if (!i.length)
+      const s = t.querySelectorAll(`[esd-extension-block-id="${n}"] a.es-button`);
+      if (!s.length)
         return;
-      const s = this.api.getValues()[z];
-      if (!s)
+      const i = this.api.getValues()[R];
+      if (!i)
         return;
-      const u = s.bold ? "bold" : "normal", c = s.italic ? "italic" : "normal", l = this.api.getDocumentModifier();
-      return i.forEach((d) => {
-        l.modifyHtml(d).setStyle("font-weight", u).setStyle("font-style", c);
+      const c = i.bold ? "bold" : "normal", u = i.italic ? "italic" : "normal", l = this.api.getDocumentModifier();
+      return s.forEach((d) => {
+        l.modifyHtml(d).setStyle("font-weight", c).setStyle("font-style", u);
       }), l;
     }
   };
 }
-function Q(o, n, r) {
-  return class extends h {
+function tt(o, n, r) {
+  return class extends F {
     getId() {
       return o;
     }
@@ -247,8 +266,8 @@ function Q(o, n, r) {
     }
   };
 }
-function Z(o, n, r) {
-  return class extends I {
+function et(o, n, r) {
+  return class extends m {
     getId() {
       return o;
     }
@@ -262,7 +281,7 @@ function Z(o, n, r) {
     }
   };
 }
-function tt(o, n, r) {
+function nt(o, n, r) {
   return class extends y {
     getId() {
       return o;
@@ -278,25 +297,25 @@ function tt(o, n, r) {
   };
 }
 export {
-  D as createButtonAlignControl,
-  K as createButtonBorderControl,
-  U as createButtonBorderRadiusControl,
-  H as createButtonColorControl,
-  Q as createButtonFitToContainerControl,
-  V as createButtonFontFamilyControl,
-  W as createButtonMarginsControl,
-  X as createButtonPaddingsControl,
-  j as createButtonTextControl,
-  G as createButtonTextSizeControl,
-  J as createButtonTextStyleAndFontColorControl,
-  tt as createImageMarginsControl,
-  Z as createImageSizeControl,
-  Y as createPaddingsControl,
-  P as createTextAlignControl,
-  O as createTextBackgroundColorControl,
-  _ as createTextColorControl,
-  R as createTextFontFamilyControl,
-  w as createTextLineSpacingControl,
-  v as createTextSizeControl,
-  L as createTextStyleControl
+  w as createButtonAlignControl,
+  H as createButtonBorderControl,
+  V as createButtonBorderRadiusControl,
+  G as createButtonColorControl,
+  tt as createButtonFitToContainerControl,
+  W as createButtonFontFamilyControl,
+  X as createButtonMarginsControl,
+  j as createButtonPaddingsControl,
+  J as createButtonTextControl,
+  Q as createButtonTextSizeControl,
+  Z as createButtonTextStyleAndFontColorControl,
+  nt as createImageMarginsControl,
+  et as createImageSizeControl,
+  U as createPaddingsControl,
+  z as createTextAlignControl,
+  L as createTextBackgroundColorControl,
+  v as createTextColorControl,
+  K as createTextFontFamilyControl,
+  Y as createTextLineSpacingControl,
+  P as createTextSizeControl,
+  D as createTextStyleControl
 };