@useinsider/guido 1.0.3-beta.18f9e49 → 1.0.3-beta.193d365

package/dist/components/organisms/onboarding/OnboardingWrapper.vue2.js

@@ -1,25 +1,24 @@
-import { defineComponent as b, computed as e, onMounted as O, watch as t } from "vue";
-import { usePartner as u } from "../../../composables/usePartner.js";
-import { useEditorStore as v } from "../../../stores/editor.js";
-import { useOnboardingStore as l } from "../../../stores/onboarding.js";
-import { usePreviewStore as y } from "../../../stores/preview.js";
-import S from "./AMPOnboarding.vue.js";
-import h from "./GenericOnboarding.vue.js";
+import { defineComponent as g, computed as e, onMounted as b, watch as t } from "vue";
+import { usePartner as O } from "../../../composables/usePartner.js";
+import { useEditorStore as u } from "../../../stores/editor.js";
+import { useOnboardingStore as v } from "../../../stores/onboarding.js";
+import { usePreviewStore as l } from "../../../stores/preview.js";
+import y from "./AMPOnboarding.vue.js";
+import S from "./GenericOnboarding.vue.js";
 import w from "./NewVersionPopup.vue.js";
 import P from "./TextBlockOnboarding.vue.js";
-import _ from "./VersionHistoryOnboarding.vue.js";
-const F = /* @__PURE__ */ b({
+import h from "./VersionHistoryOnboarding.vue.js";
+const E = /* @__PURE__ */ g({
   __name: "OnboardingWrapper",
-  emits: ["onboarding-finished"],
-  setup(A, { emit: f }) {
-    const o = l(), r = v(), s = y(), { isTestPartner: a } = u(), p = e(() => r.isStripoInitialized), d = e(() => a()), m = [
+  setup(_) {
+    const o = v(), r = u(), s = l(), { isTestPartner: a } = O(), p = e(() => r.isStripoInitialized), d = e(() => a()), m = [
       { type: "newVersionPopup", component: w },
-      { type: "genericOnboarding", component: h },
+      { type: "genericOnboarding", component: S },
       { type: "textBlockOnboarding", component: P },
-      { type: "versionHistoryOnboarding", component: _ },
-      { type: "ampOnboarding", component: S }
-    ], c = (n) => d.value || !p.value ? !1 : n === "newVersionPopup" ? o.shouldShowOnboarding(n) : o.isActive(n), g = e(() => m.filter((n) => c(n.type)));
-    return O(async () => {
+      { type: "versionHistoryOnboarding", component: h },
+      { type: "ampOnboarding", component: y }
+    ], c = (n) => d.value || !p.value ? !1 : n === "newVersionPopup" ? o.shouldShowOnboarding(n) : o.isActive(n), f = e(() => m.filter((n) => c(n.type)));
+    return b(async () => {
       await o.fetchUserModalState();
     }), t(
       () => r.isVersionHistoryOpen,
@@ -36,9 +35,9 @@ const F = /* @__PURE__ */ b({
       (n) => {
         !n && o.isActive("ampOnboarding") && o.close("ampOnboarding");
       }
-    ), { __sfc: !0, emit: f, onboardingStore: o, editorStore: r, previewStore: s, isTestPartner: a, isStripoReady: p, isTestPartnerActive: d, onboardingConfigs: m, shouldShow: c, visibleOnboardings: g };
+    ), { __sfc: !0, onboardingStore: o, editorStore: r, previewStore: s, isTestPartner: a, isStripoReady: p, isTestPartnerActive: d, onboardingConfigs: m, shouldShow: c, visibleOnboardings: f };
   }
 });
 export {
-  F as default
+  E as default
 };

package/dist/composables/usePartner.js

@@ -1,18 +1,22 @@
-import { TEST_PARTNER_LIST as r, DefaultProductType as o, ProductIds as n } from "../enums/defaults.js";
-const i = () => {
+import { ProductIds as n, TEST_PARTNER_LIST as o, DefaultProductType as s } from "../enums/defaults.js";
+const p = () => {
   const e = () => window.location.hostname.split(".")[0] || "";
   return {
     getPartnerName: e,
     getProductType: () => {
-      const t = window.location.pathname.split("/").filter(Boolean)[0] || o;
+      const t = window.location.pathname.split("/").filter(Boolean)[0] || s;
       return n[t] || 0;
     },
     isTestPartner: () => {
       const t = e();
-      return r.includes(t);
+      return o.includes(t);
+    },
+    isUnsubscribePage: () => {
+      var t, r;
+      return ((r = (t = window.GuidoConfig) == null ? void 0 : t.partner) == null ? void 0 : r.productType) === n.unsubscribePages;
     }
   };
 };
 export {
-  i as usePartner
+  p as usePartner
 };

package/dist/config/migrator/index.js

@@ -1,12 +1,11 @@
-import { migrateCheckbox as m } from "./checkboxMigrator.js";
-import { migrateCouponBlock as o } from "./couponBlockMigrator.js";
+import { migrateCheckbox as o } from "./checkboxMigrator.js";
+import { migrateCouponBlock as m } from "./couponBlockMigrator.js";
 import { migrateRadioButton as i } from "./radioButtonMigrator.js";
-import { migrateRecommendation as e } from "./recommendationMigrator.js";
-import { migrateUnsubscribe as a } from "./unsubscribeMigrator.js";
-const s = async (t) => {
+import { migrateUnsubscribe as e } from "./unsubscribeMigrator.js";
+const c = async (t) => {
   let r = t;
-  return r = m(r), r = i(r), r = await a(r), r = o(r), r = e(r), r;
+  return r = o(r), r = i(r), r = await e(r), r = m(r), r;
 };
 export {
-  s as migrate
+  c as migrate
 };

package/dist/enums/defaults.js

@@ -1,6 +1,5 @@
 const e = {
   translationsPath: "window.trans.en",
-  migrationDate: 1759696858,
   emailHeader: {
     senderName: "",
     subject: ""
@@ -15,14 +14,13 @@ const e = {
   features: {
     dynamicContent: !0,
     saveAsTemplate: !0,
-    versionHistory: !0,
-    testMessage: !0
+    versionHistory: !0
   },
   useHeader: !0
 }, t = {
   promotional: 1,
   transactional: 2
-}, a = "email", o = "Guido User", s = t.promotional, n = 2, i = {
+}, a = "email", o = "Guido User", n = t.promotional, s = 2, i = {
   email: 60,
   architect: 49,
   unsubscribePages: 97
@@ -60,10 +58,10 @@ const e = {
 ];
 export {
   e as DefaultGuidoConfig,
-  s as DefaultMessageType,
+  n as DefaultMessageType,
   a as DefaultProductType,
   o as DefaultUsername,
-  n as EditorType,
+  s as EditorType,
   i as ProductIds,
   u as TEST_PARTNER_LIST,
   t as TemplateTypes

package/dist/enums/onboarding.js

@@ -2,8 +2,7 @@ const e = [
   ".service-element.stacked-panel-item.ng-tns-c1014751574-3.level-bottom-0.ng-star-inserted",
   ".service-element.stacked-panel-item.ng-tns-c1014751574-3.level-bottom-1.ng-star-inserted",
   ".service-element.stacked-panel-item.ng-tns-c1014751574-3.level-bottom-2.ng-star-inserted"
-], t = "https://academy.useinsider.com/docs/email-drag-drop-editor";
+];
 export {
-  t as ACADEMY_LINK,
   e as SERVICE_HOVER_SELECTORS
 };

package/dist/extensions/Blocks/Recommendation/block.js

@@ -1,10 +1,7 @@
 import { Block as e, BlockCompositionType as t } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { getDefaultTemplate as o } from "./templates/blockTemplate.js";
+import { getDefaultTemplate as o } from "./template.js";
 const n = "recommendation-block";
-class m extends e {
-  constructor() {
-    super();
-  }
+class c extends e {
   getId() {
     return n;
   }
@@ -26,5 +23,5 @@ class m extends e {
 }
 export {
   n as BLOCK_ID,
-  m as RecommendationBlock
+  c as RecommendationBlock
 };

package/dist/extensions/Blocks/Recommendation/control.js

@@ -1,14 +1,11 @@
 var _ = Object.defineProperty;
-var R = (s, n, e) => n in s ? _(s, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[n] = e;
-var r = (s, n, e) => R(s, typeof n != "symbol" ? n + "" : n, e);
-import { currencyDecimalCounts as l, currencyOperators as c, currencyLocationMaps as h } from "../../../enums/extensions/recommendationBlock.js";
-import { UEAttr as m, ModificationDescription as S } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { CommonControl as g } from "../common-control.js";
-import { useRecommendationExtensionStore as O } from "./store/recommendation.js";
-import { prepareProductRows as p } from "./templates/blockTemplate.js";
-import { DEFAULT_CARD_COMPOSITION as C, getDefaultProducts as E } from "./templates/templateUtils.js";
-import { useDebounceFn as U } from "../../../node_modules/@vueuse/shared/index.js";
-const L = "ui-elements-recommendation-block", t = {
+var R = (o, n, e) => n in o ? _(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
+var r = (o, n, e) => R(o, typeof n != "symbol" ? n + "" : n, e);
+import { currencyDecimalCounts as c, currencyOperators as a, currencyLocationMaps as l } from "../../../enums/extensions/recommendationBlock.js";
+import { UEAttr as d } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { CommonControl as m } from "../common-control.js";
+import { useRecommendationExtensionStore as S } from "./store/recommendation.js";
+const g = "ui-elements-recommendation-block", t = {
   ALGORITHM: "strategy",
   PRODUCT_IDS: "productIds",
   LOCALE: "language",
@@ -24,21 +21,18 @@ const L = "ui-elements-recommendation-block", t = {
   SHUFFLE_PRODUCTS: "shuffleProducts",
   RESPONSIVE: "unresponsive"
 };
-class b extends g {
+class p extends m {
   constructor() {
     super(...arguments);
-    r(this, "store", O());
+    r(this, "store", S());
     r(this, "storeUnsubscription", () => {
     });
     r(this, "addFilterListener", () => {
     });
     r(this, "addFilterButton", null);
-    r(this, "_debouncedRegenerateProductRows", U(() => {
-      this._regenerateProductRows();
-    }, 500));
   }
   getId() {
-    return L;
+    return g;
   }
   getTemplate() {
     return `
@@ -84,22 +78,22 @@ class b extends g {
     });
   }
   _initializeSelectItems() {
-    const { store: e } = this, o = e.getActivePredictiveAlgorithms, i = e.getLanguages, a = {
-      [t.ALGORITHM]: o,
+    const { store: e } = this, s = e.getActivePredictiveAlgorithms, i = e.getLanguages, C = {
+      [t.ALGORITHM]: s,
       [t.LOCALE]: i,
       [t.CURRENCY]: e.currencyList,
-      [t.CURRENCY_LOCATION]: h,
+      [t.CURRENCY_LOCATION]: l,
       [t.CURRENCY_SYMBOL]: e.getCurrencySymbolList,
-      [t.CURRENCY_THOUSAND_SEPARATOR]: c,
-      [t.CURRENCY_DECIMAL_SEPARATOR]: c,
-      [t.CURRENCY_DECIMAL_COUNT]: l,
+      [t.CURRENCY_THOUSAND_SEPARATOR]: a,
+      [t.CURRENCY_DECIMAL_SEPARATOR]: a,
+      [t.CURRENCY_DECIMAL_COUNT]: c,
       [t.PRODUCT_COUNT]: Number(e.recommendationConfigs.size),
       [t.PRODUCT_IN_ROW]: e.recommendationConfigs.cardsInRow,
       [t.SHUFFLE_PRODUCTS]: e.recommendationConfigs.shuffleProducts,
       [t.RESPONSIVE]: !e.recommendationConfigs.unresponsive
     };
-    Object.entries(a).forEach(([u, d]) => {
-      this.api.setUIEAttribute(u, m.SELECTPICKER.items, d);
+    Object.entries(C).forEach(([u, h]) => {
+      this.api.setUIEAttribute(u, d.SELECTPICKER.items, h);
     });
   }
   _getAlgorithms() {
@@ -145,7 +139,7 @@ class b extends g {
       this._GuSelect({
         name: t.CURRENCY_LOCATION,
         placeholder: "Select Currency Location",
-        options: h
+        options: l
       }),
       this._GuLabel({ text: "Currency Symbol" }),
       this._GuSelect({
@@ -157,19 +151,19 @@ class b extends g {
       this._GuSelect({
         name: t.CURRENCY_THOUSAND_SEPARATOR,
         placeholder: "Select Thousand Separator",
-        options: c
+        options: a
       }),
       this._GuLabel({ text: "Decimal Separator" }),
       this._GuSelect({
         name: t.CURRENCY_DECIMAL_SEPARATOR,
         placeholder: "Select Decimal Separator",
-        options: c
+        options: a
       }),
       this._GuLabel({ text: "Decimal Count" }),
       this._GuSelect({
         name: t.CURRENCY_DECIMAL_COUNT,
         placeholder: "Select Decimal Count",
-        options: l
+        options: c
       })
     ])}
         `;
@@ -223,62 +217,39 @@ class b extends g {
       filterSelectionDrawerStatus: !0
     });
   }
-  _onDataChange(e, o) {
-    this.currentNode && (this.store.$patch({
+  _onDataChange(e, s) {
+    this.currentNode && this.store.$patch({
       recommendationConfigs: {
-        [e]: o
+        [e]: s
       }
-    }), this._debouncedRegenerateProductRows());
-  }
-  /**
-   * Get the current card composition from block data attribute or use default
-   */
-  _getCardComposition() {
-    if (!this.currentNode)
-      return C;
-    const e = this.currentNode.querySelector(".ins-recommendation-v3-block-v2");
-    if (!e || !("getAttribute" in e))
-      return C;
-    const o = e.getAttribute("data-card-composition");
-    return o ? o.split(",").filter(Boolean) : C;
-  }
-  _regenerateProductRows() {
-    if (!this.currentNode || !("querySelector" in this.currentNode))
-      return;
-    const e = this.currentNode.querySelector(".ins-recommendation-product-container");
-    if (!e) {
-      console.error("Could not find container table for product rows");
-      return;
-    }
-    const o = this.store.recommendationProducts.length > 0 ? this.store.recommendationProducts : E(), { cardsInRow: i } = this.store.recommendationConfigs, a = this._getCardComposition(), u = p(o, i, a);
-    this.api.getDocumentModifier().modifyHtml(e).setInnerHtml(u).apply(new S("Updated product"));
+    });
   }
-  _onCurrencyConfigChange(e, o) {
+  _onCurrencyConfigChange(e, s) {
     this.currentNode && this.store.$patch({
       recommendationConfigs: {
         currencySettings: {
-          [e]: o
+          [e]: s
         }
       }
     });
   }
   _onCurrencyChange(e) {
-    const [, o] = e.split(".");
+    const [, s] = e.split(".");
     this.store.$patch({
       recommendationConfigs: {
         currencySettings: {
-          name: o,
-          value: o
+          name: s,
+          value: s
         }
       }
     });
   }
   _setProductIdsVisibility() {
-    const { recommendationConfigs: e } = this.store, o = e.strategy === "manualMerchandising";
-    this.api.setVisibility(t.PRODUCT_IDS, o), this.api.setVisibility(`${t.PRODUCT_IDS}_label`, o);
+    const { recommendationConfigs: e } = this.store, s = e.strategy === "manualMerchandising";
+    this.api.setVisibility(t.PRODUCT_IDS, s), this.api.setVisibility(`${t.PRODUCT_IDS}_label`, s);
   }
   _listenToFormUpdates() {
-    var o;
+    var s;
     this.api.onValueChanged(t.ALGORITHM, (i) => {
       this._onDataChange(t.ALGORITHM, i), this._setProductIdsVisibility();
     }), this.api.onValueChanged(t.PRODUCT_IDS, (i) => this._onDataChange(t.PRODUCT_IDS, i.split(",") || [])), this.api.onValueChanged(t.LOCALE, (i) => this._onDataChange(t.LOCALE, i)), this.api.onValueChanged(t.CURRENCY, (i) => this._onCurrencyChange(i)), [
@@ -288,19 +259,19 @@ class b extends g {
       t.CURRENCY_DECIMAL_SEPARATOR,
       t.CURRENCY_DECIMAL_COUNT
     ].forEach((i) => {
-      this.api.onValueChanged(i, (a) => this._onCurrencyConfigChange(i, a));
-    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (o = this.addFilterButton) == null || o.addEventListener("click", this.addFilterListener);
+      this.api.onValueChanged(i, (C) => this._onCurrencyConfigChange(i, C));
+    }), this.api.onValueChanged(t.PRODUCT_COUNT, (i) => this._onDataChange(t.PRODUCT_COUNT, i.toString())), this.api.onValueChanged(t.PRODUCT_IN_ROW, (i) => this._onDataChange(t.PRODUCT_IN_ROW, i)), this.api.onValueChanged(t.SHUFFLE_PRODUCTS, (i) => this._onDataChange(t.SHUFFLE_PRODUCTS, i)), this.api.onValueChanged(t.RESPONSIVE, (i) => this._onDataChange(t.RESPONSIVE, i)), this.addFilterListener = this._onFilterSelectClick.bind(this), this.addFilterButton = this.getContainer().querySelector("#guido__btn-add-filter"), (s = this.addFilterButton) == null || s.addEventListener("click", this.addFilterListener);
   }
   _listenStateUpdates() {
     this.storeUnsubscription = this.store.$subscribe((e) => {
       if ("payload" in e) {
-        const o = e.payload.recommendationConfigs;
-        o && (this.api.updateValues(o), this.store.fetchRecommendationProducts());
+        const s = e.payload.recommendationConfigs;
+        s && (this.api.updateValues(s), this.store.fetchRecommendationProducts());
       }
     });
   }
 }
 export {
-  L as CONTROL_BLOCK_ID,
-  b as RecommendationBlockControl
+  g as CONTROL_BLOCK_ID,
+  p as RecommendationBlockControl
 };

package/dist/extensions/Blocks/Recommendation/extension.js

@@ -1,45 +1,10 @@
 import { ExtensionBuilder as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { RecommendationBlock as r } from "./block.js";
-import { RecommendationCardCompositionControl as t } from "./cardCompositionControl.js";
-import { RecommendationBlockControl as n } from "./control.js";
-import { ButtonAlignControl as d } from "./controls/button/align.js";
-import { ButtonBorderControl as l } from "./controls/button/border.js";
-import { ButtonBorderRadiusControl as m } from "./controls/button/borderRadius.js";
-import { ButtonColorControl as i } from "./controls/button/color.js";
-import { ButtonFitToContentControl as C } from "./controls/button/fitToContent.js";
-import { ButtonFontFamilyControl as a } from "./controls/button/fontFamily.js";
-import { ButtonMarginsControl as e } from "./controls/button/margins.js";
-import { ButtonPaddingsControl as p } from "./controls/button/paddings.js";
-import { ButtonTextControl as f } from "./controls/button/text.js";
-import { ButtonTextSizeControl as c } from "./controls/button/textSize.js";
-import { ButtonTextStyleAndFontColorControl as s } from "./controls/button/textStyleAndFontColor.js";
-import { ImageMarginsControl as g } from "./controls/image/margins.js";
-import { ImageSizeControl as B } from "./controls/image/size.js";
-import { NameAlignControl as P } from "./controls/name/align.js";
-import { NameBackgroundControl as u } from "./controls/name/background.js";
-import { NameColorControl as y } from "./controls/name/color.js";
-import { NameFontFamilyControl as S } from "./controls/name/fontFamily.js";
-import { NamePaddingsControl as F } from "./controls/name/paddings.js";
-import { NameSizeControl as R } from "./controls/name/size.js";
-import { NameStyleControl as N } from "./controls/name/style.js";
-import { OldPriceAlignControl as O } from "./controls/oldPrice/align.js";
-import { OldPriceBackgroundControl as k } from "./controls/oldPrice/background.js";
-import { OldPriceColorControl as x } from "./controls/oldPrice/color.js";
-import { OldPriceFontFamilyControl as z } from "./controls/oldPrice/fontFamily.js";
-import { OldPricePaddingsControl as A } from "./controls/oldPrice/paddings.js";
-import { OldPriceSizeControl as I } from "./controls/oldPrice/size.js";
-import { OldPriceStyleControl as T } from "./controls/oldPrice/style.js";
-import { PriceAlignControl as w } from "./controls/price/align.js";
-import { PriceBackgroundControl as h } from "./controls/price/background.js";
-import { PriceColorControl as M } from "./controls/price/color.js";
-import { PriceFontFamilyControl as b } from "./controls/price/fontFamily.js";
-import { PricePaddingsControl as E } from "./controls/price/paddings.js";
-import { PriceSizeControl as j } from "./controls/price/size.js";
-import { PriceStyleControl as q } from "./controls/price/style.js";
-import { RecommendationIconsRegistry as v } from "./iconsRegistry.js";
-import D from "./recommendation.css.js";
-import { SettingsPanel as G } from "./settingsPanel.js";
-const Io = new o().addBlock(r).withSettingsPanelRegistry(G).addControl(n).addControl(d).addControl(l).addControl(m).addControl(i).addControl(C).addControl(a).addControl(e).addControl(p).addControl(f).addControl(c).addControl(s).addControl(g).addControl(B).addControl(P).addControl(u).addControl(y).addControl(S).addControl(F).addControl(R).addControl(N).addControl(O).addControl(k).addControl(x).addControl(z).addControl(A).addControl(I).addControl(T).addControl(w).addControl(h).addControl(M).addControl(b).addControl(E).addControl(j).addControl(q).addControl(t).addStyles(D).withIconsRegistry(v).build();
+import { RecommendationBlock as t } from "./block.js";
+import { RecommendationBlockControl as e } from "./control.js";
+import { RecommendationIconsRegistry as i } from "./iconsRegistry.js";
+import n from "./recommendation.css.js";
+import { SettingsPanel as r } from "./settingsPanel.js";
+const f = new o().addBlock(t).withSettingsPanelRegistry(r).addControl(e).addStyles(n).withIconsRegistry(i).build();
 export {
-  Io as default
+  f as default
 };

package/dist/extensions/Blocks/Recommendation/settingsPanel.js

@@ -1,117 +1,32 @@
-import { SettingsPanelRegistry as N, SettingsPanelTab as _, SettingsTab as E, ContainerControls as S, TextControls as L } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-import { BLOCK_ID as R } from "./block.js";
-import { COMPOSITION_CONTROL_BLOCK_ID as C } from "./cardCompositionControl.js";
-import { RecommendationBlockId as I, RecommendationControlId as T } from "./constants.js";
-import { CONTROL_BLOCK_ID as e } from "./control.js";
-class G extends N {
-  registerBlockControls(O) {
-    O[R] = [
-      new _(
-        E.SETTINGS,
-        [
-          e,
-          S.EXTERNAL_INDENTS
-        ]
-      ),
-      new _(
-        E.STYLES,
-        [
-          L.TEXT_BLOCK_BACKGROUND_COLOR
-        ]
-      ),
-      new _(
-        "Card Composition",
-        [
-          C
-        ]
-      ).withLabel("Card Composition")
-    ], O[I.NAME] = [
-      new _(
-        E.SETTINGS,
-        [
-          T.NAME_BACKGROUND,
-          T.NAME_COLOR,
-          T.NAME_SIZE,
-          T.NAME_STYLE,
-          T.NAME_FONT_FAMILY
-        ]
-      ),
-      new _(
-        E.STYLES,
-        [
-          T.NAME_ALIGN,
-          T.NAME_PADDINGS
-        ]
-      )
-    ], O[I.PRICE] = [
-      new _(
-        E.SETTINGS,
-        [
-          T.PRICE_BACKGROUND,
-          T.PRICE_COLOR,
-          T.PRICE_SIZE,
-          T.PRICE_STYLE,
-          T.PRICE_FONT_FAMILY
+import { SettingsPanelRegistry as o, SettingsPanelTab as t, SettingsTab as e, ContainerControls as r, TextControls as s } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+import { BLOCK_ID as T } from "./block.js";
+import { CONTROL_BLOCK_ID as i } from "./control.js";
+class a extends o {
+  registerBlockControls(n) {
+    n[T] = [
+      new t(
+        e.SETTINGS,
+        [
+          i,
+          r.EXTERNAL_INDENTS
         ]
       ),
-      new _(
-        E.STYLES,
-        [
-          T.PRICE_ALIGN,
-          T.PRICE_PADDINGS
-        ]
-      )
-    ], O[I.OLD_PRICE] = [
-      new _(
-        E.SETTINGS,
-        [
-          T.OLD_PRICE_BACKGROUND,
-          T.OLD_PRICE_COLOR,
-          T.OLD_PRICE_SIZE,
-          T.OLD_PRICE_STYLE,
-          T.OLD_PRICE_FONT_FAMILY
-        ]
-      ),
-      new _(
-        E.STYLES,
-        [
-          T.OLD_PRICE_ALIGN,
-          T.OLD_PRICE_PADDINGS
-        ]
-      )
-    ], O[I.BUTTON] = [
-      new _(
-        E.SETTINGS,
-        [
-          T.BUTTON_TEXT,
-          T.BUTTON_ALIGN,
-          T.BUTTON_MARGINS,
-          T.BUTTON_PADDINGS
-        ]
-      ),
-      new _(
-        E.STYLES,
-        [
-          T.BUTTON_COLOR,
-          T.BUTTON_FONT_FAMILY,
-          T.BUTTON_TEXT_SIZE,
-          T.BUTTON_TEXT_STYLE_AND_FONT_COLOR,
-          T.BUTTON_FIT_TO_CONTENT,
-          T.BUTTON_BORDER_RADIUS,
-          T.BUTTON_BORDER
-        ]
-      )
-    ], O[I.IMAGE] = [
-      new _(
-        E.SETTINGS,
+      new t(
+        e.STYLES,
         [
-          T.IMAGE_SIZE,
-          T.IMAGE_MARGINS
+          s.TEXT_BLOCK_BACKGROUND_COLOR
         ]
       )
+      // TODO: It'll be opened after the card composition is implemented by Stripo team.
+      // new SettingsPanelTab(
+      //     'Card Composition',
+      //     [
+      //         COMPOSITION_CONTROL_BLOCK_ID,
+      //     ]
+      // ).withLabel('Card Composition'),
     ];
   }
 }
 export {
-  G as SettingsPanel
+  a as SettingsPanel
 };