@useinsider/guido 1.0.3-beta.cc614d6 → 1.0.3-beta.cd0d7f3

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

@@ -1,51 +1,51 @@
-import { IconsRegistry as e } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class t extends e {
+import { IconsRegistry as o } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class n extends o {
   registerIconsSvg(C) {
     C["recommendation-icon"] = `
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M12 6.4C12 6.73137 11.7301 6.99622 11.4011 7.0355C8.92202 7.33143 7 9.44126 7 12C7 14.5587
-                8.92202 16.6686 11.4011 16.9645C11.7301 17.0038 12 17.2686 12 17.6V20.4C12 20.7314 11.7314 21 11.4
-                21H11C10.4477 21 10 20.5523 10 20V19.2422C9.99988 18.3514 8.92291 17.9053 8.29297 18.5352L7.75684
-                19.0713C7.36633 19.4617 6.73328 19.4617 6.34277 19.0713L4.92871 17.6572C4.53829 17.2667 4.53829 16.6337
-                4.92871 16.2432L5.46484 15.707C6.09466 15.0771 5.64858 14.0001 4.75781 14H4C3.44772 14 3 13.5523 3 13L3
-                11C3 10.4477 3.44772 10 4 10H4.75684C5.6476 9.99988 6.09369 8.92291 5.46387 8.29297L4.92871 
-                7.75781C4.53829 7.36731 4.53829 6.73426 4.92871 6.34375L6.34375 4.92871C6.73426 4.53829 
-                7.36731 4.53829 7.75781 4.92871L8.29297
-                5.46387C8.92291 6.09368 9.99988 5.6476 10 4.75684V4C10 3.44772 10.4477 3 11 3L11.4 3C11.7314 3 12
-                3.26863 12 3.6V6.4ZM13 4C13 3.44786 13.4543 2.98773 13.9893 3.12402C14.1732 3.17098 14.3541 3.23174
-                14.5303 3.30469C15.0156 3.50571 15.4567 3.80044 15.8281 4.17187C16.1996 4.54331 16.4943 4.98442 16.6953
-                5.46973C16.7058 5.49498 16.716 5.52033 16.7259 5.54577C16.8279 5.80746 17.0733 5.9917 17.3531
-                6.01625C17.5539 6.03386 17.7542 6.06671 17.9521 6.11523C18.8954 6.34649 19.723 6.91284 20.2793
-                7.70898C20.8354 8.505 21.0827 9.47631 20.9756 10.4414C20.927 10.8782 20.8065 11.3001 20.6231
-                11.6919C20.5322 11.8861 20.5322 12.112 20.6231 12.3062C20.7962 12.6759 20.9122 13.0708 20.9658
-                13.4775C21.0425 14.0595 20.9901 14.6515 20.8125 15.2109C20.6348 15.7703 20.3358 16.2838 19.9375
-                16.7148C19.5393 17.1457 19.0513 17.4839 18.5078 17.7051C18.1381 17.8555 17.7488 17.9484 17.3532
-                17.9829C17.0734 18.0073 16.8281 18.1917 16.7262 18.4535C16.7162 18.4792 16.7059 18.5048 16.6953
-                18.5303C16.4943 19.0156 16.1996 19.4567 15.8281 19.8281C15.4567 20.1996 15.0156 20.4943 14.5303
-                20.6953C14.3541 20.7683 14.1732 20.829 13.9893 20.876C13.4543 21.0123 13 20.5521 13 20V19.7852C13.0001
-                19.3515 13.365 19.0136 13.7656 18.8477C14.0082 18.7471 14.2284 18.5997 14.4141 18.4141C14.5997 18.2284
-                14.7471 18.0082 14.8477 17.7656C14.9482 17.523 15 17.2626 15 17C15 16.7374 14.9482 16.477 14.8477
-                16.2344C14.7471 15.9918 14.5997 15.7716 14.4141 15.5859C14.2284 15.4003 14.0082 15.2529 13.7656
-                15.1523C13.365 14.9864 13.0001 14.6485 13 14.2148V14C13 13.4479 13.4543 12.9877 13.9893 13.124C14.1732
-                13.171 14.3541 13.2317 14.5303 13.3047C15.0156 13.5057 15.4567 13.8004 15.8281 14.1719C16.1996 14.5433
-                16.4943 14.9844 16.6953 15.4697C16.7632 15.6337 16.8195 15.8017 16.8649 15.9725C16.8686 15.9865 16.881
-                15.9963 16.8955 15.9971C17.1886 16.0123 17.4821 15.9631 17.7539 15.8525C18.0256 15.742 18.2696 15.5729
-                18.4688 15.3574C18.6679 15.1419 18.8174 14.8851 18.9063 14.6055C18.995 14.3259 19.0207 14.0301 18.9824
-                13.7393C18.9441 13.4484 18.8427 13.169 18.6846 12.9219C18.5264 12.6747 18.3156 12.4652 18.0674
-                12.3086C17.6579 12.0502 17.2974 11.626 17.3574 11.1455L17.3721 11.0234C17.4406 10.4755 17.949 10.0755
-                18.4629 10.2773C18.5364 10.3062 18.609 10.3373 18.6807 10.3706C18.811 10.4311 18.9714 10.3635 18.9873
-                10.2207C19.0409 9.73814 18.9177 9.25251 18.6396 8.85449C18.3616 8.45652 17.9481 8.1733 17.4766
-                8.05762C17.3327 8.02235 17.1861 8.00292 17.04 8C16.9439 7.99809 16.8572 8.05928 16.8296 8.15143C16.7913
-                8.27967 16.7467 8.40615 16.6953 8.53027C16.4943 9.01558 16.1996 9.45669 15.8281 9.82812C15.4567 10.1996
-                15.0156 10.4943 14.5303 10.6953C14.3541 10.7683 14.1732 10.829 13.9893 10.876C13.4543 11.0123 13 10.5521
-                13 10V9.78516C13.0001 9.35151 13.365 9.01362 13.7656 8.84766C14.0082 8.74715 14.2284 8.59971 14.4141
-                8.41406C14.5997 8.22841 14.7471 8.00817 14.8477 7.76562C14.9482 7.52297 15 7.26264 15 7C15 6.73736
-                14.9482 6.47703 14.8477 6.23437C14.7471 5.99182 14.5997 5.77159 14.4141 5.58594C14.2284 5.40029 14.0082
-                5.25285 13.7656 5.15234C13.365 4.98638 13.0001 4.64849 13 4.21484V4Z" fill="#666666"/>
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d="M10 4.4C10 4.73137 9.73012 4.99622 9.40108 5.0355C6.92202 5.33143 5 7.44126 5 10C5 12.5587 
+                6.92202 14.6686 9.40108 14.9645C9.73012 15.0038 10 15.2686 10 15.6V18.4C10 18.7314 9.73137 19 9.4 
+                19H9C8.44772 19 8 18.5523 8 18V17.2422C7.99988 16.3514 6.92291 15.9053 6.29297 16.5352L5.75684 
+                17.0713C5.36633 17.4617 4.73328 17.4617 4.34277 17.0713L2.92871 15.6572C2.53829 15.2667 2.53829 
+                14.6337 2.92871 14.2432L3.46484 13.707C4.09466 13.0771 3.64858 12.0001 2.75781 12H2C1.44772 12 1 
+                11.5523 1 11L1 9C1 8.44772 1.44772 8 2 8H2.75684C3.6476 7.99988 4.09369 6.92291 3.46387 6.29297L2.92871 
+                5.75781C2.53829 5.36731 2.53829 4.73426 2.92871 4.34375L4.34375 2.92871C4.73426 2.53829 5.36731 2.53829 
+                5.75781 2.92871L6.29297 3.46387C6.92291 4.09368 7.99988 3.6476 8 2.75684V2C8 1.44772 8.44772 1 9 1L9.4 
+                1C9.73137 1 10 1.26863 10 1.6V4.4ZM11 2C11 1.44786 11.4543 0.987733 11.9893 1.12402C12.1732 1.17098 
+                12.3541 1.23174 12.5303 1.30469C13.0156 1.50571 13.4567 1.80044 13.8281 2.17187C14.1996 2.54331 14.4943 
+                2.98442 14.6953 3.46973C14.7058 3.49498 14.716 3.52033 14.7259 3.54577C14.8279 3.80746 15.0733 3.9917 
+                15.3531 4.01625C15.5539 4.03386 15.7542 4.06671 15.9521 4.11523C16.8954 4.34649 17.723 4.91284 18.2793 
+                5.70898C18.8354 6.505 19.0827 7.47631 18.9756 8.44141C18.927 8.87824 18.8065 9.30007 18.6231 
+                9.69186C18.5322 9.88606 18.5322 10.112 18.6231 10.3062C18.7962 10.6759 18.9122 11.0708 18.9658 
+                11.4775C19.0425 12.0595 18.9901 12.6515 18.8125 13.2109C18.6348 13.7703 18.3358 14.2838 17.9375 
+                14.7148C17.5393 15.1457 17.0513 15.4839 16.5078 15.7051C16.1381 15.8555 15.7488 15.9484 15.3532 
+                15.9829C15.0734 16.0073 14.8281 16.1917 14.7262 16.4535C14.7162 16.4792 14.7059 16.5048 14.6953 
+                16.5303C14.4943 17.0156 14.1996 17.4567 13.8281 17.8281C13.4567 18.1996 13.0156 18.4943 12.5303 
+                18.6953C12.3541 18.7683 12.1732 18.829 11.9893 18.876C11.4543 19.0123 11 18.5521 11 18V17.7852C11.0001 
+                17.3515 11.365 17.0136 11.7656 16.8477C12.0082 16.7471 12.2284 16.5997 12.4141 16.4141C12.5997 16.2284 
+                12.7471 16.0082 12.8477 15.7656C12.9482 15.523 13 15.2626 13 15C13 14.7374 12.9482 14.477 12.8477 
+                14.2344C12.7471 13.9918 12.5997 13.7716 12.4141 13.5859C12.2284 13.4003 12.0082 13.2529 11.7656 
+                13.1523C11.365 12.9864 11.0001 12.6485 11 12.2148V12C11 11.4479 11.4543 10.9877 11.9893 11.124C12.1732 
+                11.171 12.3541 11.2317 12.5303 11.3047C13.0156 11.5057 13.4567 11.8004 13.8281 12.1719C14.1996 12.5433 
+                14.4943 12.9844 14.6953 13.4697C14.7632 13.6337 14.8195 13.8017 14.8649 13.9725C14.8686 13.9865 14.881 
+                13.9963 14.8955 13.9971C15.1886 14.0123 15.4821 13.9631 15.7539 13.8525C16.0256 13.742 16.2696 13.5729 
+                16.4688 13.3574C16.6679 13.1419 16.8174 12.8851 16.9063 12.6055C16.995 12.3259 17.0207 12.0301 16.9824 
+                11.7393C16.9441 11.4484 16.8427 11.169 16.6846 10.9219C16.5264 10.6747 16.3156 10.4652 16.0674 
+                10.3086C15.6579 10.0502 15.2974 9.62601 15.3574 9.14551L15.3721 9.02344C15.4406 8.47551 15.949 8.07553 
+                16.4629 8.27734C16.5364 8.30622 16.609 8.33735 16.6807 8.37063C16.811 8.43113 16.9714 8.36352 16.9873 
+                8.2207C17.0409 7.73814 16.9177 7.25251 16.6396 6.85449C16.3616 6.45652 15.9481 6.1733 15.4766 
+                6.05762C15.3327 6.02235 15.1861 6.00292 15.04 6C14.9439 5.99809 14.8572 6.05928 14.8296 6.15143C14.7913 
+                6.27967 14.7467 6.40615 14.6953 6.53027C14.4943 7.01558 14.1996 7.45669 13.8281 7.82812C13.4567 8.19956 
+                13.0156 8.49429 12.5303 8.69531C12.3541 8.76826 12.1732 8.82902 11.9893 8.87598C11.4543 9.01227 
+                11 8.55214 11 8V7.78516C11.0001 7.35151 11.365 7.01362 11.7656 6.84766C12.0082 6.74715 12.2284 6.59971 
+                12.4141 6.41406C12.5997 6.22841 12.7471 6.00817 12.8477 5.76562C12.9482 5.52297 13 5.26264 13 5C13 
+                4.73736 12.9482 4.47703 12.8477 4.23437C12.7471 3.99182 12.5997 3.77159 12.4141 3.58594C12.2284 
+                3.40029 12.0082 3.25285 11.7656 3.15234C11.365 2.98638 11.0001 2.64849 11 2.21484V2Z" 
+                fill="currentColor"/>
             </svg>
         `;
   }
 }
 export {
-  t as RecommendationIconsRegistry
+  n as RecommendationIconsRegistry
 };

package/dist/extensions/Blocks/Recommendation/store/recommendation.js

@@ -133,7 +133,7 @@ const a = c(), d = () => ({
   filterSelectionDrawerStatus: !1,
   filterList: {},
   filterGroup: 1
-}), G = p("recommendationExtension", {
+}), G = p("guidoRecommendationExtension", {
   state: () => d(),
   getters: {
     hasFilters: (e) => !!e.recommendationConfigs.filters.length,

package/dist/extensions/Blocks/common-control.js

@@ -1,78 +1,135 @@
-var u = Object.defineProperty;
-var C = (o, n, E) => n in o ? u(o, n, { enumerable: !0, configurable: !0, writable: !0, value: E }) : o[n] = E;
-var a = (o, n, E) => C(o, typeof n != "symbol" ? n + "" : n, E);
-import { Control as R, UIElementType as $, UEAttr as e } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
-class N extends R {
+var c = Object.defineProperty;
+var I = (a, r, e) => r in a ? c(a, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[r] = e;
+var l = (a, r, e) => I(a, typeof r != "symbol" ? r + "" : r, e);
+import { Control as O, UIElementType as t, UEAttr as $ } from "../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
+class _ extends O {
   constructor() {
     super(...arguments);
-    a(this, "currentNode");
+    l(this, "currentNode");
+    l(this, "lastBlockInstanceId", null);
   }
   getContainer() {
-    var E;
-    return (E = document.querySelector("ui-editor")) == null ? void 0 : E.shadowRoot;
+    var e;
+    return (e = document.querySelector("ui-editor")) == null ? void 0 : e.shadowRoot;
   }
-  onTemplateNodeUpdated(E) {
-    this.currentNode = E;
+  onTemplateNodeUpdated(e) {
+    this.currentNode = e;
   }
-  _GuLabel({ text: E, name: t = "", position: T = "top" }) {
+  onDestroy() {
+    this.lastBlockInstanceId = null;
+  }
+  /**
+   * Gets the config block element from the current node.
+   * @returns The config block element or null if not found
+   */
+  getConfigBlock() {
+    if (!this.currentNode)
+      return null;
+    const e = this.currentNode.closest(".items-block-v2");
+    return e ? e.querySelector("esd-config-block") : null;
+  }
+  /**
+   * Gets the current block instance ID from the config block.
+   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
+   * @returns The block instance ID or null if not found
+   */
+  getBlockInstanceId(e = "data-block-instance-id") {
+    const n = this.getConfigBlock();
+    return n ? n.getAttribute(e) : null;
+  }
+  /**
+   * Handles block instance change detection and syncing.
+   * This is a helper method for controls that need to sync attributes when switching between block instances.
+   * @param syncFunction - Function to call when block instance changes (to sync from attributes)
+   * @param updateUI - Function to call to update the UI (called both on change and when same block)
+   * @param blockInstanceIdAttribute - The attribute name for block instance ID (default: 'data-block-instance-id')
+   * @returns true if block instance changed, false otherwise
+   */
+  handleBlockInstanceChange(e, n, E = "data-block-instance-id") {
+    const o = this.getBlockInstanceId(E);
+    if (!o)
+      return !1;
+    const T = o !== this.lastBlockInstanceId;
+    return T ? (this.currentNode && e(this.currentNode), n(), this.lastBlockInstanceId = o) : n(), T;
+  }
+  _GuLabel({ text: e, name: n = "", position: E = "top" }) {
+    return `
+            <${t.LABEL} 
+                style="${E === "top" ? "margin-bottom: 8px;" : ""}"
+                ${$.LABEL.text}="${e}" 
+                ${$.LABEL.name}="${n || `${e} Label`}">
+            </${t.LABEL}>
+        `;
+  }
+  _GuToggle(e) {
     return `
-            <${$.LABEL} 
-                style="${T === "top" ? "margin-bottom: 8px;" : ""}"
-                ${e.LABEL.text}="${E}" 
-                ${e.LABEL.name}="${t || `${E} Label`}">
-            </${$.LABEL}>
+            <${t.SWITCHER}
+                ${$.SWITCHER.name}="${e}">
+            </${t.SWITCHER}>
         `;
   }
-  _GuToggle(E) {
+  _GuSelectItem({ text: e, value: n }) {
     return `
-            <${$.SWITCHER}
-                ${e.SWITCHER.name}="${E}">
-            </${$.SWITCHER}>
+            <${t.SELECT_ITEM} 
+                ${$.SELECT_ITEM.text}="${e}" 
+                ${$.SELECT_ITEM.value}="${n}">
+            </${t.SELECT_ITEM}>`;
+  }
+  _GuSelect({ name: e, placeholder: n, options: E, className: o = "es-180w" }) {
+    return `
+            <${t.SELECTPICKER}
+                class="${o}"
+                ${$.SELECTPICKER.name}="${e}"
+                ${$.SELECTPICKER.placeholder}="${n}">
+                    ${E.map((T) => this._GuSelectItem(T)).join("")}
+            </${t.SELECTPICKER}>
         `;
   }
-  _GuSelectItem({ text: E, value: t }) {
+  _GuTextInput({ name: e, placeholder: n, className: E = "", disabled: o = !1 }) {
     return `
-            <${$.SELECT_ITEM} 
-                ${e.SELECT_ITEM.text}="${E}" 
-                ${e.SELECT_ITEM.value}="${t}">
-            </${$.SELECT_ITEM}>`;
+            <${t.TEXT}
+                class=${E}
+                ${$.TEXT.name}="${e}"
+                placeholder="${n || e}"
+                ${o ? `${$.TEXT.disabled}="true"` : ""}>
+            </${t.TEXT}>
+        `;
   }
-  _GuSelect({ name: E, placeholder: t, options: T, className: r = "es-180w" }) {
+  _GuCounter({ name: e, maxValue: n, minValue: E = 1, step: o = 1 }) {
     return `
-            <${$.SELECTPICKER}
-                class="${r}"
-                ${e.SELECTPICKER.name}="${E}"
-                ${e.SELECTPICKER.placeholder}="${t}">
-                    ${T.map((O) => this._GuSelectItem(O)).join("")}
-            </${$.SELECTPICKER}>
+            <${t.COUNTER}
+                ${$.COUNTER.name}="${e}"
+                ${$.COUNTER.minValue}="${E}"
+                ${$.COUNTER.maxValue}="${n}"
+                ${$.COUNTER.step}="${o}">
+            </${t.COUNTER}>
         `;
   }
-  _GuTextInput({ name: E, placeholder: t, className: T = "" }) {
+  _GuRadioButtonItem({ text: e, value: n, icon: E }) {
     return `
-            <${$.TEXT}
-                class=${T}
-                ${e.TEXT.name}="${E}"
-                placeholder="${t || E}">
-            </${$.TEXT}>
+            <${t.RADIO_ITEM}
+                ${$.RADIO_ITEM.value}="${n}"
+                ${e ? `${$.RADIO_ITEM.text}="${e}"` : ""}
+                ${E ? `${$.RADIO_ITEM.icon}="${E}"` : ""}>
+            </${t.RADIO_ITEM}>
         `;
   }
-  _GuCounter({ name: E, maxValue: t, minValue: T = 1, step: r = 1 }) {
+  _GuRadioButton({ name: e, buttons: n, id: E = "" }) {
     return `
-            <${$.COUNTER}
-                ${e.COUNTER.name}="${E}"
-                ${e.COUNTER.minValue}="${T}"
-                ${e.COUNTER.maxValue}="${t}"
-                ${e.COUNTER.step}="${r}">
-            </${$.COUNTER}>
+            <${t.RADIO_BUTTONS}
+                ${E ? `id="${E}"` : ""}
+                ${$.RADIO_BUTTONS.name}="${e}">
+                ${n.map((o) => this._GuRadioButtonItem(o)).join("")}
+            </${t.RADIO_BUTTONS}>
         `;
   }
-  _GuButton({ name: E, label: t, id: T = "" }) {
+  _GuButton({ name: e, label: n, id: E = "" }) {
     return `
-            <${$.BUTTON}
-                ${e.BUTTON.name}="${E}"
-                ${T ? `id="${T}"` : ""}
-                ${e.BUTTON.caption}="${t}"}>
-            </${$.BUTTON}>
+            <${t.BUTTON}
+                ${$.BUTTON.name}="${e}"
+                ${E ? `id="${E}"` : ""}
+                ${$.BUTTON.caption}="${n}"}>
+            </${t.BUTTON}>
         `;
   }
   /**
@@ -80,19 +137,26 @@ class N extends R {
    * @param param0
    * @returns It returns a button with an icon.
    */
-  _GuIconButton({ name: E, icon: t, className: T = "" }) {
+  _GuIconButton({ name: e, icon: n, className: E = "" }) {
     return `
-            <${$.BUTTON}
-                class="${T}"
-                ${e.BUTTON.name}="${E}"
-                ${e.BUTTON.icon}="${t}">
-            </${$.BUTTON}>
+            <${t.BUTTON}
+                class="${E}"
+                ${$.BUTTON.name}="${e}"
+                ${$.BUTTON.icon}="${n}">
+            </${t.BUTTON}>
+        `;
+  }
+  _GuOneColumn(e, n = "") {
+    return `
+            <div class="container one-column ${n}">
+                ${e.join("")}
+            </div>
         `;
   }
-  _GuTwoColumns(E) {
+  _GuTwoColumns(e, n = "") {
     return `
-            <div class="checkbox-select-container container two-columns">
-                ${E.join("")}
+            <div class="container two-columns ${n}">
+                ${e.join("")}
             </div>
         `;
   }
@@ -103,82 +167,82 @@ class N extends R {
    * @param itemLabels - Optional array of objects with key and label properties for display
    * @returns HTML string for the orderable control
    */
-  _GuOrderable(E, t) {
-    let T = "";
-    t.forEach((O) => {
-      const L = e.ORDERABLE_ITEM && "name" in e.ORDERABLE_ITEM ? e.ORDERABLE_ITEM.name : "name";
-      T += `
-                <${$.ORDERABLE_ITEM} ${L}="${O.key}">
-                    ${O.content}
-                </${$.ORDERABLE_ITEM}>
+  _GuOrderable(e, n) {
+    let E = "";
+    n.forEach((T) => {
+      const u = $.ORDERABLE_ITEM && "name" in $.ORDERABLE_ITEM ? $.ORDERABLE_ITEM.name : "name";
+      E += `
+                <${t.ORDERABLE_ITEM} ${u}="${T.key}">
+                    ${T.content}
+                </${t.ORDERABLE_ITEM}>
             `;
     });
-    const r = e.ORDERABLE && "name" in e.ORDERABLE ? e.ORDERABLE.name : "name";
+    const o = $.ORDERABLE && "name" in $.ORDERABLE ? $.ORDERABLE.name : "name";
     return `
-            <${$.ORDERABLE} ${r}="${E}">
-                ${T}
-            </${$.ORDERABLE}>
+            <${t.ORDERABLE} ${o}="${e}">
+                ${E}
+            </${t.ORDERABLE}>
         `;
   }
-  _GuNestedControl(E, t) {
+  _GuNestedControl(e, n) {
     return `
-            <${$.NESTED_CONTROL} ${e.NESTED_CONTROL.controlId}="${E}">
-                ${t}
-            </${$.NESTED_CONTROL}>
+            <${t.NESTED_CONTROL} ${$.NESTED_CONTROL.controlId}="${e}">
+                ${n}
+            </${t.NESTED_CONTROL}>
         `;
   }
-  _GuExpandable(E, t) {
+  _GuExpandable(e, n) {
     return `
-            <${$.EXPANDABLE}>
-                <${$.EXPANDABLE_HEADER}>
-                    <${$.LABEL} ${e.LABEL.text}="${E}"></${$.LABEL}>
-                </${$.EXPANDABLE_HEADER}>
-                <${$.EXPANDABLE_CONTENT}>
+            <${t.EXPANDABLE}>
+                <${t.EXPANDABLE_HEADER}>
+                    <${t.LABEL} ${$.LABEL.text}="${e}"></${t.LABEL}>
+                </${t.EXPANDABLE_HEADER}>
+                <${t.EXPANDABLE_CONTENT}>
 
-                    ${t}
+                    ${n}
 
-                </${$.EXPANDABLE_CONTENT}>
-            </${$.EXPANDABLE}>
+                </${t.EXPANDABLE_CONTENT}>
+            </${t.EXPANDABLE}>
         `;
   }
-  _GuColorPicker(E) {
+  _GuColorPicker(e) {
     return `
-            <${$.COLOR}
-                ${e.COLOR.name}="${E}">
-            </${$.COLOR}>
+            <${t.COLOR}
+                ${$.COLOR.name}="${e}">
+            </${t.COLOR}>
         `;
   }
-  _GuFontFamily(E, t = "Select Font") {
+  _GuFontFamily(e, n = "Select Font") {
     return `
-            <${$.FONT_FAMILY_SELECT}
-                ${e.FONT_FAMILY_SELECT.name}="${E}"
-                ${e.FONT_FAMILY_SELECT.placeholder}="${t}">
-            </${$.FONT_FAMILY_SELECT}>
+            <${t.FONT_FAMILY_SELECT}
+                ${$.FONT_FAMILY_SELECT.name}="${e}"
+                ${$.FONT_FAMILY_SELECT.placeholder}="${n}">
+            </${t.FONT_FAMILY_SELECT}>
         `;
   }
-  _GuRadioButtons(E, t) {
-    const T = t.map((r) => `
-                <${$.RADIO_ITEM}
-                    ${e.RADIO_ITEM.text}="${r.text}"
-                    ${e.RADIO_ITEM.value}="${r.value}">
-                </${$.RADIO_ITEM}>
+  _GuRadioButtons(e, n) {
+    const E = n.map((o) => `
+                <${t.RADIO_ITEM}
+                    ${$.RADIO_ITEM.text}="${o.text}"
+                    ${$.RADIO_ITEM.value}="${o.value}">
+                </${t.RADIO_ITEM}>
             `).join("");
     return `
-            <${$.RADIO_BUTTONS}
-                ${e.RADIO_BUTTONS.name}="${E}">
-                ${T}
-            </${$.RADIO_BUTTONS}>
+            <${t.RADIO_BUTTONS}
+                ${$.RADIO_BUTTONS.name}="${e}">
+                ${E}
+            </${t.RADIO_BUTTONS}>
         `;
   }
-  _GuCheckbox(E, t) {
+  _GuCheckbox(e, n) {
     return `
-            <${$.CHECKBOX}
-                ${e.CHECKBOX.name}="${E}"
-                ${e.CHECKBOX.caption}="${t}">
-            </${$.CHECKBOX}>
+            <${t.CHECKBOX}
+                ${$.CHECKBOX.name}="${e}"
+                ${$.CHECKBOX.caption}="${n}">
+            </${t.CHECKBOX}>
         `;
   }
 }
 export {
-  N as CommonControl
+  _ as CommonControl
 };