builder-settings-types 0.0.252 → 0.0.254

package/dist/builder-settings-types.cjs.js

@@ -70,7 +70,7 @@
         font-weight: 500;
         cursor: pointer;
         transition: all 0.2s;
-      `,o.addEventListener("mouseenter",()=>{o.style.backgroundColor="#f9fafb",o.style.borderColor="#9ca3af"}),o.addEventListener("mouseleave",()=>{o.style.backgroundColor="white",o.style.borderColor="#d1d5db"}),l.addEventListener("mouseenter",()=>{l.style.backgroundColor="#dc2626"}),l.addEventListener("mouseleave",()=>{l.style.backgroundColor="#ef4444"});const r=()=>{e.style.opacity="0",i.style.transform="scale(0.95)",setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},200)};o.addEventListener("click",()=>{r(),t(!1)}),l.addEventListener("click",()=>{r(),t(!0)}),e.addEventListener("click",d=>{d.target===e&&(r(),t(!1))});const h=d=>{d.key==="Escape"&&(r(),t(!1),document.removeEventListener("keydown",h))};document.addEventListener("keydown",h),a.appendChild(o),a.appendChild(l),i.appendChild(s),i.appendChild(n),i.appendChild(a),e.appendChild(i),document.body.appendChild(e),requestAnimationFrame(()=>{e.style.opacity="1",i.style.transform="scale(1)"}),setTimeout(()=>l.focus(),100)})}getNextIndexFromPrefix(t){const e=Object.keys(this.settings).filter(i=>i.startsWith(t)).map(i=>{const s=Number(i.slice(t.length));return Number.isFinite(s)?s:-1}).filter(i=>i>=0);return e.length?Math.max(...e)+1:0}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const a=t[n],o=e[n];JSON.stringify(a)!==JSON.stringify(o)&&(i[n]={from:a,to:o})}),i}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];g(s)?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?g(e)?e.getValues():e.value:void 0}}getValuesForJson(t){if(t===void 0){if(this.includeGetJson===!1)return null;const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(g(s))e[i]=s.getValuesForJson();else{const n=s;n.includeGetJson===!1?e[i]=null:e[i]=n.value}}return e}else{const e=this.settings[t];if(!e)return;if(g(e))return e.includeGetJson===!1?null:e.getValuesForJson();{const i=e;return i.includeGetJson===!1?null:i.value}}}getDefaultValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(g(s))e[i]=s.getDefaultValues();else{const n=s;e[i]=n.default!==void 0?n.default:n.value}}return e}else{const e=this.settings[t];if(!e)return;if(g(e))return e.getDefaultValues();const i=e;return i.default!==void 0?i.default:i.value}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,V.hiddenElements.add(t),this.isMain&&t.classList.add("main-group"),this.custom&&t.classList.add("custom_class"),k(t,this.nestingLevel);const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");i.className="title-section";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="actions-section";const a=document.createElement("span");a.className="setting-group-arrow",a.innerHTML=`
+      `,o.addEventListener("mouseenter",()=>{o.style.backgroundColor="#f9fafb",o.style.borderColor="#9ca3af"}),o.addEventListener("mouseleave",()=>{o.style.backgroundColor="white",o.style.borderColor="#d1d5db"}),l.addEventListener("mouseenter",()=>{l.style.backgroundColor="#dc2626"}),l.addEventListener("mouseleave",()=>{l.style.backgroundColor="#ef4444"});const r=()=>{e.style.opacity="0",i.style.transform="scale(0.95)",setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},200)};o.addEventListener("click",()=>{r(),t(!1)}),l.addEventListener("click",()=>{r(),t(!0)}),e.addEventListener("click",d=>{d.target===e&&(r(),t(!1))});const h=d=>{d.key==="Escape"&&(r(),t(!1),document.removeEventListener("keydown",h))};document.addEventListener("keydown",h),a.appendChild(o),a.appendChild(l),i.appendChild(s),i.appendChild(n),i.appendChild(a),e.appendChild(i),document.body.appendChild(e),requestAnimationFrame(()=>{e.style.opacity="1",i.style.transform="scale(1)"}),setTimeout(()=>l.focus(),100)})}getNextIndexFromPrefix(t){const e=Object.keys(this.settings).filter(i=>i.startsWith(t)).map(i=>{const s=Number(i.slice(t.length));return Number.isFinite(s)?s:-1}).filter(i=>i>=0);return e.length?Math.max(...e)+1:0}calculateChanges(t,e){const i={};return new Set([...Object.keys(t),...Object.keys(e)]).forEach(n=>{const a=t[n],o=e[n];JSON.stringify(a)!==JSON.stringify(o)&&(i[n]={from:a,to:o})}),i}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];g(s)?e[i]=s.getValues():e[i]=s.value}return e}else{const e=this.settings[t];return e?g(e)?e.getValues():e.value:void 0}}getValuesForJson(t){if(t===void 0){if(this.includeGetJson===!1)return null;const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(g(s)){const n=s.getValuesForJson();n!==null&&(e[i]=n)}else{const n=s;n.includeGetJson!==!1&&(e[i]=n.value)}}return e}else{const e=this.settings[t];if(!e)return;if(g(e))return e.includeGetJson===!1?null:e.getValuesForJson();{const i=e;return i.includeGetJson===!1?null:i.value}}}getDefaultValues(t){if(t===void 0){const e={};for(const i in this.settings)if(Object.prototype.hasOwnProperty.call(this.settings,i)){const s=this.settings[i];if(g(s))e[i]=s.getDefaultValues();else{const n=s;e[i]=n.default!==void 0?n.default:n.value}}return e}else{const e=this.settings[t];if(!e)return;if(g(e))return e.getDefaultValues();const i=e;return i.default!==void 0?i.default:i.value}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,V.hiddenElements.add(t),this.isMain&&t.classList.add("main-group"),this.custom&&t.classList.add("custom_class"),k(t,this.nestingLevel);const e=document.createElement("div");e.className="setting-group-title",this.isCollapsed&&e.classList.add("collapsed-view"),e.setAttribute("role","button"),e.setAttribute("aria-expanded",(!this.isCollapsed).toString()),e.setAttribute("tabindex","0");const i=document.createElement("div");i.className="title-section";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="actions-section";const a=document.createElement("span");a.className="setting-group-arrow",a.innerHTML=`
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
@@ -79,7 +79,7 @@
          xmlns="http://www.w3.org/2000/svg">
       <path d="M8 3.333v9.334M3.333 8h9.334" stroke="currentColor"
             stroke-width="1.5" stroke-linecap="round"/>
-    </svg>`;h.innerHTML=`${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel??"Add"}</span>`,h.addEventListener("click",u=>{u.stopPropagation(),u.preventDefault();const b=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),y=this.addItemCfg.createItem(b);if(O(y)){const E=`${this.addItemCfg.keyPrefix}${b}`;this.addSetting(E,y)}}),o.appendChild(h)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,P.trackElement(t),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}getJson(){return JSON.stringify(this.getValuesForJson(),null,2)}setJson(t){try{const e=JSON.parse(t);let i=e;const s=Object.keys(this.settings),n=Object.keys(e);if(!s.some(o=>n.includes(o))&&n.length===1){const o=n[0];i=e[o]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};V.hiddenElements=new Set;let v=V;function U(c){return new H(c)}class H extends v{constructor(t){super(t);const e=Object.keys(this.settings)[0];this.activeTabId=e||""}getActiveTabId(){return this.activeTabId}switchToTab(t){this.settings[t]&&(this.activeTabId=t,this.updateTabUI())}updateTabUI(){if(!this.tabsContainer||!this.contentContainers)return;this.tabsContainer.querySelectorAll(".tab-button").forEach(e=>{e.getAttribute("data-tab-id")===this.activeTabId?e.classList.add("active"):e.classList.remove("active")}),Object.entries(this.contentContainers).forEach(([e,i])=>{e===this.activeTabId?i.classList.add("active"):i.classList.remove("active")})}draw(){const t=super.draw();t.classList.add("tabs-settings-container");const e=t.querySelector(".setting-group-content");if(!e)return t;e.innerHTML="";const i=document.createElement("div");i.className="tabs-title";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="tabs-header",this.tabsContainer=n;const a=document.createElement("div");if(a.className="tab-content",this.contentContainers={},Object.keys(this.settings).forEach((o,l)=>{const r=document.createElement("button");r.className="tab-button",r.type="button",r.setAttribute("data-tab-id",o),r.textContent=o,r.addEventListener("click",()=>this.switchToTab(o)),n.appendChild(r);const h=document.createElement("div");h.className="tab-panel",this.contentContainers[o]=h;const d=this.settings[o];d&&(g(d)&&typeof d.setNestingLevel=="function"&&d.setNestingLevel(this.getNestingLevel()+1),h.appendChild(d.draw())),a.appendChild(h),l===0&&!this.activeTabId&&(this.activeTabId=o)}),e.appendChild(i),e.appendChild(n),e.appendChild(a),!this.activeTabId){const o=Object.keys(this.settings)[0];this.activeTabId=o||""}return this.updateTabUI(),t}}function B(c){return new v(c)}function J(c){return c}class $ extends p{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const q="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class m extends ${constructor(t){super({...t,icon:t.icon||q,title:t.title||"Color",default:t.default?m.normalizeColorValue(t.default):"#000000"}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=t.detectChange}static normalizeColorValue(t){return t.startsWith("#")?m.normalizeHexValue(t):t.includes(",")?m.rgbToHexStatic(t):m.normalizeHexValue(t)}static normalizeHexValue(t){return t=t.replace("#",""),t.length===3&&(t=t.split("").map(e=>e+e).join("")),t.length!==6?(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000"):/^[0-9A-Fa-f]{6}$/.test(t)?`#${t.toLowerCase()}`:(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000")}static rgbToHexStatic(t){const e=t.split(",").map(h=>parseInt(h.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "#000000"`),"#000000";const[i,s,n]=e,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n)),r=h=>{const d=h.toString(16);return d.length===1?"0"+d:d};return`#${r(a)}${r(o)}${r(l)}`}setValue(t){if(t===void 0){this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000");return}if(typeof t=="string"){const e=m.normalizeColorValue(t);this.value=e,this.colorInputEl&&(this.colorInputEl.value=e),this.textInputEl&&(this.textInputEl.value=e),this.onChange&&this.onChange(e),this.props.detectChange&&this.props.detectChange(e)}else this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000")}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}draw(){const t=document.createElement("div");if(t.className="color-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const l=document.createElement("div");if(l.className="icon-container",this.props.icon){const r=document.createElement("span");r.className="input-icon",r.innerHTML=this.props.icon,l.appendChild(r)}if(this.props.title){const r=document.createElement("span");r.className="input-label",r.textContent=this.props.title,l.appendChild(r)}t.appendChild(l)}const e=document.createElement("div");e.className="color-input-wrapper";const i=l=>{const r=l.value.trim();if(!r)return e.classList.remove("error"),!0;const d=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(r);return d?e.classList.remove("error"):e.classList.add("error"),d},s=document.createElement("input");s.type="color",s.className="color-picker",s.value=this.value||"#000000",s.setAttribute("aria-label","Choose color"),s.setAttribute("title","Click to open color picker"),this.getDataPropsPath()&&s.setAttribute("data-test-id",this.getDataPropsPath()),this.colorInputEl=s;const n=document.createElement("div");n.className="color-preview";const a=this.value||"#000000";n.style.backgroundColor=a;const o=document.createElement("input");return o.type="text",o.className="color-text-input",o.value=this.value||"",o.placeholder="#000000",o.setAttribute("pattern","#[0-9A-Fa-f]{6}"),o.setAttribute("title","Enter a hex color value (e.g., #ff0000)"),o.setAttribute("aria-label","Hex color value"),o.setAttribute("maxlength","7"),this.getDataPropsPath()&&o.setAttribute("data-test-id",`${this.getDataPropsPath()}_text`),this.textInputEl=o,this.textInputEl.addEventListener("input",l=>{var h,d;let r=l.target.value.trim();if(this.textInputEl&&i(this.textInputEl)){const u=m.normalizeColorValue(r);this.value=u,(h=this.onChange)==null||h.call(this,u),(d=this.detectChange)==null||d.call(this,u),this.colorInputEl&&(this.colorInputEl.value=u),n.style.backgroundColor=u}}),this.colorInputEl.addEventListener("input",l=>{var d,u;const r=l.target.value,h=m.normalizeColorValue(r);this.value=h,(d=this.onChange)==null||d.call(this,h),(u=this.detectChange)==null||u.call(this,h),this.textInputEl&&(this.textInputEl.value=h),n.style.backgroundColor=h,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",l=>{var d,u;const r=l.target.value,h=m.normalizeColorValue(r);this.value=h,(d=this.onChange)==null||d.call(this,h),(u=this.detectChange)==null||u.call(this,h),this.textInputEl&&(this.textInputEl.value=h),n.style.backgroundColor=h}),e.appendChild(s),e.appendChild(n),e.appendChild(o),t.appendChild(e),this.element=t,t}getElement(){return this.element}getNormalizedValue(){return this.value?m.normalizeColorValue(this.value):"#000000"}isValidHex(){return this.value?/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value):!1}toRgb(){return this.isValidHex()?this.hexToRgb(this.value):"0, 0, 0"}}const Z=`
+    </svg>`;h.innerHTML=`${d}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel??"Add"}</span>`,h.addEventListener("click",u=>{u.stopPropagation(),u.preventDefault();const b=this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix),y=this.addItemCfg.createItem(b);if(O(y)){const E=`${this.addItemCfg.keyPrefix}${b}`;this.addSetting(E,y)}}),o.appendChild(h)}return e.appendChild(i),e.appendChild(n),t.appendChild(e),t.appendChild(o),this.elementRef=t,P.trackElement(t),setTimeout(()=>{this.updateNestingStyles()},0),this.pendingBlurHandler&&(this.pendingBlurHandler=null),t}collapse(){if(!this.elementRef||this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!0,t.classList.add("collapsed"),e.classList.add("rotated"),i.setAttribute("aria-expanded","false"))}expand(){if(!this.elementRef||!this.isCollapsed)return;const t=this.elementRef.querySelector(".setting-group-content"),e=this.elementRef.querySelector(".setting-group-arrow"),i=this.elementRef.querySelector(".setting-group-title");t&&e&&i&&(this.isCollapsed=!1,t.classList.remove("collapsed"),e.classList.remove("rotated"),i.setAttribute("aria-expanded","true"))}getJson(){return JSON.stringify(this.getValuesForJson(),null,2)}setJson(t){try{const e=JSON.parse(t);let i=e;const s=Object.keys(this.settings),n=Object.keys(e);if(!s.some(o=>n.includes(o))&&n.length===1){const o=n[0];i=e[o]}this.setValue(i)}catch(e){throw console.error("Invalid JSON provided to setJson:",e),new Error("Invalid JSON format")}}};V.hiddenElements=new Set;let v=V;function U(c){return new T(c)}class T extends v{constructor(t){super(t);const e=Object.keys(this.settings)[0];this.activeTabId=e||""}getActiveTabId(){return this.activeTabId}switchToTab(t){this.settings[t]&&(this.activeTabId=t,this.updateTabUI())}updateTabUI(){if(!this.tabsContainer||!this.contentContainers)return;this.tabsContainer.querySelectorAll(".tab-button").forEach(e=>{e.getAttribute("data-tab-id")===this.activeTabId?e.classList.add("active"):e.classList.remove("active")}),Object.entries(this.contentContainers).forEach(([e,i])=>{e===this.activeTabId?i.classList.add("active"):i.classList.remove("active")})}draw(){const t=super.draw();t.classList.add("tabs-settings-container");const e=t.querySelector(".setting-group-content");if(!e)return t;e.innerHTML="";const i=document.createElement("div");i.className="tabs-title";const s=document.createElement("h3");s.textContent=this.title,i.appendChild(s);const n=document.createElement("div");n.className="tabs-header",this.tabsContainer=n;const a=document.createElement("div");if(a.className="tab-content",this.contentContainers={},Object.keys(this.settings).forEach((o,l)=>{const r=document.createElement("button");r.className="tab-button",r.type="button",r.setAttribute("data-tab-id",o),r.textContent=o,r.addEventListener("click",()=>this.switchToTab(o)),n.appendChild(r);const h=document.createElement("div");h.className="tab-panel",this.contentContainers[o]=h;const d=this.settings[o];d&&(g(d)&&typeof d.setNestingLevel=="function"&&d.setNestingLevel(this.getNestingLevel()+1),h.appendChild(d.draw())),a.appendChild(h),l===0&&!this.activeTabId&&(this.activeTabId=o)}),e.appendChild(i),e.appendChild(n),e.appendChild(a),!this.activeTabId){const o=Object.keys(this.settings)[0];this.activeTabId=o||""}return this.updateTabUI(),t}}function B(c){return new v(c)}function J(c){return c}class $ extends p{constructor(t={}){super(t),this.inputType="text",t.onChange&&this.setOnChange(t.onChange)}draw(){const t=e=>{this.props.maxLength!==void 0&&(e.maxLength=this.props.maxLength),this.props.className&&e.classList.add(this.props.className)};return this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,placeholder:this.props.placeholder,icon:this.props.icon,inputClassName:"string-setting-input "+(this.props.inputClassName||""),wrapperClassName:"string-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t})}}const q="<svg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'><path d='M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z' stroke='#667085' stroke-linecap='round' stroke-linejoin='round'/></svg>";class m extends ${constructor(t){super({...t,icon:t.icon||q,title:t.title||"Color",default:t.default?m.normalizeColorValue(t.default):"#000000"}),this.inputType="color",this.element=null,this.colorInputEl=null,this.textInputEl=null,this.detectChange=t.detectChange}static normalizeColorValue(t){return t.startsWith("#")?m.normalizeHexValue(t):t.includes(",")?m.rgbToHexStatic(t):m.normalizeHexValue(t)}static normalizeHexValue(t){return t=t.replace("#",""),t.length===3&&(t=t.split("").map(e=>e+e).join("")),t.length!==6?(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000"):/^[0-9A-Fa-f]{6}$/.test(t)?`#${t.toLowerCase()}`:(console.warn(`Invalid hex value "${t}", using default "#000000"`),"#000000")}static rgbToHexStatic(t){const e=t.split(",").map(h=>parseInt(h.trim()));if(e.length!==3||e.some(isNaN))return console.warn(`Invalid RGB value "${t}", using default "#000000"`),"#000000";const[i,s,n]=e,a=Math.max(0,Math.min(255,i)),o=Math.max(0,Math.min(255,s)),l=Math.max(0,Math.min(255,n)),r=h=>{const d=h.toString(16);return d.length===1?"0"+d:d};return`#${r(a)}${r(o)}${r(l)}`}setValue(t){if(t===void 0){this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000");return}if(typeof t=="string"){const e=m.normalizeColorValue(t);this.value=e,this.colorInputEl&&(this.colorInputEl.value=e),this.textInputEl&&(this.textInputEl.value=e),this.onChange&&this.onChange(e),this.props.detectChange&&this.props.detectChange(e)}else this.value="#000000",this.colorInputEl&&(this.colorInputEl.value="#000000"),this.textInputEl&&(this.textInputEl.value="#000000"),this.onChange&&this.onChange("#000000"),this.props.detectChange&&this.props.detectChange("#000000")}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),s=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${s}`}draw(){const t=document.createElement("div");if(t.className="color-setting-wrapper "+(this.props.wrapperClassName||""),this.props.title||this.props.icon){const l=document.createElement("div");if(l.className="icon-container",this.props.icon){const r=document.createElement("span");r.className="input-icon",r.innerHTML=this.props.icon,l.appendChild(r)}if(this.props.title){const r=document.createElement("span");r.className="input-label",r.textContent=this.props.title,l.appendChild(r)}t.appendChild(l)}const e=document.createElement("div");e.className="color-input-wrapper";const i=l=>{const r=l.value.trim();if(!r)return e.classList.remove("error"),!0;const d=/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(r);return d?e.classList.remove("error"):e.classList.add("error"),d},s=document.createElement("input");s.type="color",s.className="color-picker",s.value=this.value||"#000000",s.setAttribute("aria-label","Choose color"),s.setAttribute("title","Click to open color picker"),this.getDataPropsPath()&&s.setAttribute("data-test-id",this.getDataPropsPath()),this.colorInputEl=s;const n=document.createElement("div");n.className="color-preview";const a=this.value||"#000000";n.style.backgroundColor=a;const o=document.createElement("input");return o.type="text",o.className="color-text-input",o.value=this.value||"",o.placeholder="#000000",o.setAttribute("pattern","#[0-9A-Fa-f]{6}"),o.setAttribute("title","Enter a hex color value (e.g., #ff0000)"),o.setAttribute("aria-label","Hex color value"),o.setAttribute("maxlength","7"),this.getDataPropsPath()&&o.setAttribute("data-test-id",`${this.getDataPropsPath()}_text`),this.textInputEl=o,this.textInputEl.addEventListener("input",l=>{var h,d;let r=l.target.value.trim();if(this.textInputEl&&i(this.textInputEl)){const u=m.normalizeColorValue(r);this.value=u,(h=this.onChange)==null||h.call(this,u),(d=this.detectChange)==null||d.call(this,u),this.colorInputEl&&(this.colorInputEl.value=u),n.style.backgroundColor=u}}),this.colorInputEl.addEventListener("input",l=>{var d,u;const r=l.target.value,h=m.normalizeColorValue(r);this.value=h,(d=this.onChange)==null||d.call(this,h),(u=this.detectChange)==null||u.call(this,h),this.textInputEl&&(this.textInputEl.value=h),n.style.backgroundColor=h,e.classList.remove("error")}),this.colorInputEl.addEventListener("change",l=>{var d,u;const r=l.target.value,h=m.normalizeColorValue(r);this.value=h,(d=this.onChange)==null||d.call(this,h),(u=this.detectChange)==null||u.call(this,h),this.textInputEl&&(this.textInputEl.value=h),n.style.backgroundColor=h}),e.appendChild(s),e.appendChild(n),e.appendChild(o),t.appendChild(e),this.element=t,t}getElement(){return this.element}getNormalizedValue(){return this.value?m.normalizeColorValue(this.value):"#000000"}isValidHex(){return this.value?/^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(this.value):!1}toRgb(){return this.isValidHex()?this.hexToRgb(this.value):"0, 0, 0"}}const Z=`
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M8.99999 15.8542C9.79613 16.5667 10.8475 17 12 17C14.4853 17 16.5 14.9853 16.5 12.5C16.5 10.4248 15.0953 8.67769 13.1849 8.15763M4.81513 8.15762C2.9047 8.67768 1.5 10.4248 1.5 12.5C1.5 14.9853 3.51472 17 6 17C8.48528 17 10.5 14.9853 10.5 12.5C10.5 11.9146 10.3882 11.3554 10.1849 10.8424M13.5 6.5C13.5 8.98528 11.4853 11 9 11C6.51472 11 4.5 8.98528 4.5 6.5C4.5 4.01472 6.51472 2 9 2C11.4853 2 13.5 4.01472 13.5 6.5Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
   <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
@@ -155,7 +155,7 @@
   <!-- Top-left dot -->
   <circle cx="6.7" cy="6.7" r="1.5" fill="#02CC59" opacity="0.3"/>
 </svg>
-`;class T extends p{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,this.errorContainer=null,this.messageListener=null,this.loadingSpinner=null,this.props.delete===void 0&&(this.props.delete=!0),this.props.maxFileSizeMB===void 0&&(this.props.maxFileSizeMB=5),!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl),this.setupMessageListener()}setupMessageListener(){this.messageListener=t=>{var e;if(t.data&&t.data.type==="FILE_MANAGER_IMAGE_SELECTED"&&t.data.settingId===this.id){const i=t.data.imageUrl;i&&typeof i=="string"&&(this.value=i,this.updatePreviewState(i),(e=this.onChange)==null||e.call(this,i),this.hideError())}},window.addEventListener("message",this.messageListener)}cleanupMessageListener(){this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null)}setValue(t){super.setValue(t),this.previewWrapper&&this.previewEl&&this.updatePreviewState(t)}destroy(){this.cleanupMessageListener()}showError(t){this.errorContainer&&(this.errorContainer.textContent=t,this.errorContainer.style.display="block",setTimeout(()=>{this.errorContainer&&(this.errorContainer.style.display="none")},5e3))}hideError(){this.errorContainer&&(this.errorContainer.style.display="none")}showLoading(){!this.previewWrapper||!this.loadingSpinner||(this.previewWrapper.classList.add("loading"),this.previewWrapper.style.display="flex",this.loadingSpinner.style.display="block",this.previewEl&&(this.previewEl.style.display="none"))}hideLoading(){!this.previewWrapper||!this.loadingSpinner||(this.previewWrapper.classList.remove("loading"),this.loadingSpinner.style.display="none")}validateFileSize(t){const e=(this.props.maxFileSizeMB||5)*1024*1024;if(t.size>e){const i=this.props.maxFileSizeMB||5,s=(t.size/(1024*1024)).toFixed(1);return this.showError(`File size (${s}MB) exceeds maximum limit of ${i}MB`),!1}return!0}updatePreviewState(t=null){if(!this.previewWrapper||!this.previewEl)return;const e=this.previewWrapper.parentElement,i=e==null?void 0:e.querySelector(".upload-button"),s=e==null?void 0:e.querySelector(".preview-placeholder");if(t&&t!==""){this.showLoading(),s&&s instanceof HTMLElement&&(s.style.display="none"),e&&e.classList.remove("no-image"),i&&(i.innerHTML=`
+`;class H extends p{constructor(t={}){super(t),this.inputType="button",this.previewWrapper=null,this.previewEl=null,this.emptyStateEl=null,this.errorContainer=null,this.messageListener=null,this.loadingSpinner=null,this.props.delete===void 0&&(this.props.delete=!0),this.props.maxFileSizeMB===void 0&&(this.props.maxFileSizeMB=5),!this.value&&t.defaultUrl&&t.defaultUrl!==""&&(this.value=t.defaultUrl),this.setupMessageListener()}setupMessageListener(){this.messageListener=t=>{var e;if(t.data&&t.data.type==="FILE_MANAGER_IMAGE_SELECTED"&&t.data.settingId===this.id){const i=t.data.imageUrl;i&&typeof i=="string"&&(this.value=i,this.updatePreviewState(i),(e=this.onChange)==null||e.call(this,i),this.hideError())}},window.addEventListener("message",this.messageListener)}cleanupMessageListener(){this.messageListener&&(window.removeEventListener("message",this.messageListener),this.messageListener=null)}setValue(t){super.setValue(t),this.previewWrapper&&this.previewEl&&this.updatePreviewState(t)}destroy(){this.cleanupMessageListener()}showError(t){this.errorContainer&&(this.errorContainer.textContent=t,this.errorContainer.style.display="block",setTimeout(()=>{this.errorContainer&&(this.errorContainer.style.display="none")},5e3))}hideError(){this.errorContainer&&(this.errorContainer.style.display="none")}showLoading(){!this.previewWrapper||!this.loadingSpinner||(this.previewWrapper.classList.add("loading"),this.previewWrapper.style.display="flex",this.loadingSpinner.style.display="block",this.previewEl&&(this.previewEl.style.display="none"))}hideLoading(){!this.previewWrapper||!this.loadingSpinner||(this.previewWrapper.classList.remove("loading"),this.loadingSpinner.style.display="none")}validateFileSize(t){const e=(this.props.maxFileSizeMB||5)*1024*1024;if(t.size>e){const i=this.props.maxFileSizeMB||5,s=(t.size/(1024*1024)).toFixed(1);return this.showError(`File size (${s}MB) exceeds maximum limit of ${i}MB`),!1}return!0}updatePreviewState(t=null){if(!this.previewWrapper||!this.previewEl)return;const e=this.previewWrapper.parentElement,i=e==null?void 0:e.querySelector(".upload-button"),s=e==null?void 0:e.querySelector(".preview-placeholder");if(t&&t!==""){this.showLoading(),s&&s instanceof HTMLElement&&(s.style.display="none"),e&&e.classList.remove("no-image"),i&&(i.innerHTML=`
           <span class="upload-icon">${I}</span>
           <span class="upload-label">Replace</span>
         `);const n=()=>{this.hideLoading(),this.previewWrapper.classList.add("has-image"),this.previewEl.style.display="block",this.previewEl.removeEventListener("load",n),this.previewEl.removeEventListener("error",a)},a=()=>{this.hideLoading(),this.showError("Failed to load image. Please try again."),this.previewWrapper.classList.remove("has-image"),this.previewEl.style.display="none",this.previewWrapper.style.display="none",s&&s instanceof HTMLElement&&(s.style.display="block"),e&&e.classList.add("no-image"),this.previewEl.removeEventListener("load",n),this.previewEl.removeEventListener("error",a)};this.previewEl.addEventListener("load",n),this.previewEl.addEventListener("error",a),this.previewEl.src=t}else this.hideLoading(),this.previewWrapper.classList.remove("has-image"),this.previewEl.src="",this.previewEl.style.display="none",this.previewWrapper.style.display="none",s&&s instanceof HTMLElement&&(s.style.display="block"),e&&e.classList.add("no-image"),i&&(i.innerHTML=`
@@ -179,14 +179,14 @@
         .toggle-switch .toggle-slider {
           background-color: ${h};
         }
-      `,document.head.appendChild(l)}return i.appendChild(s),i.appendChild(n),t.appendChild(i),t}setDetectChange(t){this.detectChangeCallback=t}}const pt=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      `,document.head.appendChild(l)}if(i.appendChild(s),i.appendChild(n),t.appendChild(i),this.props.description){t.classList.add("toggle-has-description");const l=document.createElement("p");l.className="toggle-description",l.textContent=this.props.description,t.appendChild(l)}return t}setDetectChange(t){this.detectChangeCallback=t}}const pt=`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3334 5.99996H2.66675M13.3334 9.99996H2.66675M5.33341 12.6666V3.33329M10.6667 12.6666V3.33329" stroke="#667085" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;class gt extends p{constructor(t={}){t.rowGap=t.rowGap??!0,t.columnGap=t.columnGap??!0,t.title=t.title??"Gap",t.icon=t.icon??pt,t.suffix=t.suffix??"px",t.minValue=t.minValue??0,super(t),this.inputType="number",this.inputValues={},this.mobileValue=t.mobile,this.value=this.validateValue(t.default??0),t.rowGap&&(this.inputValues.row=this.value),t.columnGap&&(this.inputValues.column=this.value)}draw(){const t=document.createElement("div");t.className=`setting-container ${this.props.className||""}`,t.id=this.id;const e=document.createElement("div");e.className="setting-label-input-wrapper";const i=document.createElement("label");i.className="setting-label",i.setAttribute("for",this.id+"-input");const s=document.createElement("span");if(s.textContent=this.props.title??"Gap",i.appendChild(s),this.props.icon){const o=document.createElement("span");o.className="setting-icon",o.innerHTML=this.props.icon,i.insertBefore(o,s)}const n=document.createElement("div");n.className=`setting-input-wrapper ${this.props.wrapperClassName||""}`,n.classList.add("gap-setting-wrapper");const a=document.createElement("div");return a.className="gap-inputs-container",this.props.rowGap&&a.appendChild(this.createGapInput("row","Row")),this.props.columnGap&&a.appendChild(this.createGapInput("column","Col")),n.appendChild(a),e.appendChild(i),e.appendChild(n),t.appendChild(e),t}createGapInput(t,e){const i=document.createElement("div");i.className="gap-input-wrapper";const s=document.createElement("input");if(s.type="number",s.className=`gap-input gap-${t}-input ${this.props.inputClassName||""}`,s.id=`${this.id}-${t}-input`,s.min=String(this.props.minValue??0),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),s.step=String(this.props.step??1),s.value=String(this.inputValues[t]??this.value),s.title=e,this.getDataPropsPath()&&s.setAttribute("data-test-id",`${this.getDataPropsPath()}_${t}`),s.addEventListener("input",n=>{const a=n.target;let o=parseFloat(a.value);o=this.validateValue(o),String(o)!==a.value&&(a.value=String(o)),this.inputValues[t]=o,this.setValue(o)}),s.addEventListener("blur",n=>{var l,r;const a=n.target;let o=parseFloat(a.value);o=this.validateValue(o),String(o)!==a.value&&(a.value=String(o),this.inputValues[t]=o,this.setValue(o)),(r=(l=this.props).onBlur)==null||r.call(l)}),i.appendChild(s),this.props.suffix&&this.props.suffix!=="none"){const n=document.createElement("span");n.className="gap-suffix",n.textContent=this.props.suffix,i.appendChild(n),s.style.paddingRight="30px"}return i}validateValue(t){(t==null||isNaN(t))&&(t=this.props.default??0);const e=this.props.minValue??Number.MIN_SAFE_INTEGER,i=this.props.maxValue??Number.MAX_SAFE_INTEGER;let s=Number(t);return s<e&&(s=e),s>i&&(s=i),s}getMobileValue(){return this.mobileValue}setMobileValue(t){this.mobileValue=t,t!==void 0&&this.setValue(t)}}const mt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 <path d="M2.25 11.75H15.75M5.85 2.75H12.15C13.4101 2.75 14.0402 2.75 14.5215 2.99524C14.9448 3.21095 15.289 3.55516 15.5048 3.97852C15.75 4.45982 15.75 5.08988 15.75 6.35V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V6.35C2.25 5.08988 2.25 4.45982 2.49524 3.97852C2.71095 3.55516 3.05516 3.21095 3.47852 2.99524C3.95982 2.75 4.58988 2.75 5.85 2.75Z" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`;class ft extends f{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||mt,title:t.title||"Margin Bottom",default:t.default??20,wrapperClassName:"margin-bottom-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}const vt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
 <path d="M15.75 7.25H2.25m9.9 9h-6.3c-1.26 0-1.89 0-2.371-.245a2.25 2.25 0 0 1-.984-.983c-.245-.482-.245-1.112-.245-2.372v-6.3c0-1.26 0-1.89.245-2.371a2.25 2.25 0 0 1 .984-.984c.48-.245 1.11-.245 2.371-.245h6.3c1.26 0 1.89 0 2.371.245.424.216.768.56.984.984.245.48.245 1.11.245 2.371v6.3c0 1.26 0 1.89-.245 2.371-.216.424-.56.768-.984.984-.48.245-1.11.245-2.371.245"
  stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`;class Ct extends f{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||vt,title:t.title||"Margin Top",default:t.default??20,wrapperClassName:"margin-top-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}class wt extends p{constructor(t){super(t),this.inputType={},this.container=null,this.defaultLanguage="",this.uploadSettings=new Map,t.default?this.value={...t.default}:this.value||(this.value={}),this.defaultLanguage=t.languages.includes(p.DefaultLanguage)?p.DefaultLanguage:t.languages[0];const e=t.defaultValue||`Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;t.languages.forEach(i=>{var s,n;i in(this.value||{})||(this.value||(this.value={}),i===this.defaultLanguage&&e?this.value[i]=((s=t.default)==null?void 0:s[i])||e:this.value[i]=((n=t.default)==null?void 0:n[i])||"")})}capitalizeFirstLetter(t){return String(t).charAt(0).toUpperCase()+String(t).slice(1)}measureTextWidth(t,e){this.textMeasureCanvas||(this.textMeasureCanvas=document.createElement("canvas"));const i=this.textMeasureCanvas.getContext("2d");if(!i)return t.length*10;const s=`${e.fontStyle} ${e.fontWeight} ${e.fontSize} ${e.fontFamily}`.trim();return i.font=s,i.measureText(t).width}adaptPlaceholderToSingleLine(t,e){const i=window.getComputedStyle(t),s=parseFloat(i.paddingLeft)||0,n=parseFloat(i.paddingRight)||0,a=parseFloat(i.borderLeftWidth)||0,o=parseFloat(i.borderRightWidth)||0,l=Math.max(0,t.clientWidth-s-n-a-o);if(l<=0){t.placeholder=e;return}if(this.measureTextWidth(e,i)<=l){t.placeholder=e;return}const h="...";let d=0,u=e.length,b=0;for(;d<=u;){const E=Math.floor((d+u)/2),R=e.slice(0,E).trimEnd()+h;this.measureTextWidth(R,i)<=l?(b=E,d=E+1):u=E-1}const y=e.slice(0,b).trimEnd()+h;t.placeholder=y}autosizeTextarea(t,e=3){t.style.height="auto";const i=window.getComputedStyle(t),s=parseFloat(i.lineHeight)||20,n=parseFloat(i.paddingTop)+parseFloat(i.paddingBottom),a=parseFloat(i.borderTopWidth)+parseFloat(i.borderBottomWidth),o=s*e+n+a,l=Math.min(t.scrollHeight||44,o);t.style.height=`${l}px`,t.scrollHeight>o?t.style.overflowY="auto":t.style.overflowY="hidden"}createTextareaRow(t,e){const i=document.createElement("div");i.classList.add("simple-multi-language-row");const s=document.createElement("label");if(s.classList.add("simple-language-label"),s.textContent=t.toUpperCase(),s.setAttribute("for",`textarea-${t}`),i.appendChild(s),this.props.multiImg){const n=new T({defaultUrl:e||"",title:"",id:`${this.id}_upload_${t}`});n.setOnChange(o=>{this.updateLanguageValue(t,o),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(o)}),this.uploadSettings.set(t,n);const a=n.draw();a.classList.add("simple-language-upload"),i.appendChild(a)}else{const n=document.createElement("textarea");n.id=`textarea-${t}`,n.classList.add("simple-language-textarea"),n.value=e||"",n.rows=1,n.style.overflowY="hidden";let a=this.props.placeholder||"Enter text in {language}...";a.includes("{language}")&&(a=a.replace("{language}",t.toUpperCase())),n.setAttribute("data-full-placeholder",a),this.adaptPlaceholderToSingleLine(n,a),this.getDataPropsPath()&&n.setAttribute("data-test-id",`${this.getDataPropsPath()}_${t}`),n.addEventListener("input",l=>{const r=l.target;this.updateLanguageValue(t,r.value),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(r.value),this.autosizeTextarea(r,3);const h=n.getAttribute("data-full-placeholder")||"";h&&this.adaptPlaceholderToSingleLine(n,h)}),i.appendChild(n),(l=>(typeof queueMicrotask=="function"?queueMicrotask:r=>setTimeout(r,0))(l))(()=>{this.autosizeTextarea(n,3);const l=n.getAttribute("data-full-placeholder")||"";l&&this.adaptPlaceholderToSingleLine(n,l)})}return i}updateLanguageValue(t,e){this.value||(this.value={});const i={...this.value,[t]:e};this.setValue(i)}updateOtherLanguagePlaceholders(t){this.container&&this.props.languages.forEach(e=>{var s,n;if(e===this.defaultLanguage)return;const i=(s=this.container)==null?void 0:s.querySelector(`#textarea-${e}`);if(i&&(!i.value||i.value.trim()==="")){const a=t||((n=this.props.placeholder)==null?void 0:n.replace("{language}",e.toUpperCase()))||`Enter text in ${e.toUpperCase()}...`;i.setAttribute("data-full-placeholder",a),this.adaptPlaceholderToSingleLine(i,a)}})}draw(){const t=document.createElement("div");if(t.classList.add("simple-multi-language-wrapper"),this.props.title){const s=document.createElement("div");s.classList.add("simple-multi-language-title"),s.textContent=this.props.title,t.appendChild(s)}const e=document.createElement("div");e.classList.add("simple-multi-language-content"),this.props.languages.forEach(s=>{var o;const n=((o=this.value)==null?void 0:o[s])||"",a=this.createTextareaRow(s,n);e.appendChild(a)}),t.appendChild(e),this.container=t;const i=()=>{if(!this.container)return;this.container.querySelectorAll(".simple-language-textarea").forEach(n=>{const a=n.getAttribute("data-full-placeholder")||"";a&&this.adaptPlaceholderToSingleLine(n,a)})};return window.addEventListener("resize",i),t}setValue(t){super.setValue(t),this.container&&this.props.languages.forEach(e=>{var i;if(this.props.multiImg){const s=this.uploadSettings.get(e);s&&s.setValue((t==null?void 0:t[e])||"")}else{const s=(i=this.container)==null?void 0:i.querySelector(`#textarea-${e}`);s&&(s.value=(t==null?void 0:t[e])||"")}})}}class bt extends p{constructor(t={}){super(t),this.inputType="select";const e=[{name:"None",value:"none"},{name:"Fade",value:"fade 1.5s ease-in-out infinite"},{name:"Slide",value:"slide 1.5s ease-in-out infinite"},{name:"Zoom",value:"zoom 1.5s ease-in-out infinite"},{name:"Bounce",value:"bounce 1.5s ease-in-out infinite"},{name:"Pulse",value:"pulse 1.5s ease-in-out infinite"}];this.selectSetting=new S({title:this.title||"Animation",options:e,default:this.props.default||"none"}),this.selectSetting.onChange=i=>{var s;this.value=i,(s=this.onChange)==null||s.call(this,i)}}draw(){return this.selectSetting.draw()}destroy(){this.selectSetting.destroy(),super.destroy()}}const Et=`
+</svg>`;class Ct extends f{constructor(t={}){super({...t,minValue:t.minValue??0,maxValue:t.maxValue??1e3,icon:t.icon||vt,title:t.title||"Margin Top",default:t.default??20,wrapperClassName:"margin-top-wrapper "+(t.wrapperClassName||"")}),this.inputType="number"}}class wt extends p{constructor(t){super(t),this.inputType={},this.container=null,this.defaultLanguage="",this.uploadSettings=new Map,t.default?this.value={...t.default}:this.value||(this.value={}),this.defaultLanguage=t.languages.includes(p.DefaultLanguage)?p.DefaultLanguage:t.languages[0];const e=t.defaultValue||`Enter text in ${this.capitalizeFirstLetter(this.defaultLanguage)}`;t.languages.forEach(i=>{var s,n;i in(this.value||{})||(this.value||(this.value={}),i===this.defaultLanguage&&e?this.value[i]=((s=t.default)==null?void 0:s[i])||e:this.value[i]=((n=t.default)==null?void 0:n[i])||"")})}capitalizeFirstLetter(t){return String(t).charAt(0).toUpperCase()+String(t).slice(1)}measureTextWidth(t,e){this.textMeasureCanvas||(this.textMeasureCanvas=document.createElement("canvas"));const i=this.textMeasureCanvas.getContext("2d");if(!i)return t.length*10;const s=`${e.fontStyle} ${e.fontWeight} ${e.fontSize} ${e.fontFamily}`.trim();return i.font=s,i.measureText(t).width}adaptPlaceholderToSingleLine(t,e){const i=window.getComputedStyle(t),s=parseFloat(i.paddingLeft)||0,n=parseFloat(i.paddingRight)||0,a=parseFloat(i.borderLeftWidth)||0,o=parseFloat(i.borderRightWidth)||0,l=Math.max(0,t.clientWidth-s-n-a-o);if(l<=0){t.placeholder=e;return}if(this.measureTextWidth(e,i)<=l){t.placeholder=e;return}const h="...";let d=0,u=e.length,b=0;for(;d<=u;){const E=Math.floor((d+u)/2),R=e.slice(0,E).trimEnd()+h;this.measureTextWidth(R,i)<=l?(b=E,d=E+1):u=E-1}const y=e.slice(0,b).trimEnd()+h;t.placeholder=y}autosizeTextarea(t,e=3){t.style.height="auto";const i=window.getComputedStyle(t),s=parseFloat(i.lineHeight)||20,n=parseFloat(i.paddingTop)+parseFloat(i.paddingBottom),a=parseFloat(i.borderTopWidth)+parseFloat(i.borderBottomWidth),o=s*e+n+a,l=Math.min(t.scrollHeight||44,o);t.style.height=`${l}px`,t.scrollHeight>o?t.style.overflowY="auto":t.style.overflowY="hidden"}createTextareaRow(t,e){const i=document.createElement("div");i.classList.add("simple-multi-language-row");const s=document.createElement("label");if(s.classList.add("simple-language-label"),s.textContent=t.toUpperCase(),s.setAttribute("for",`textarea-${t}`),i.appendChild(s),this.props.multiImg){const n=new H({defaultUrl:e||"",title:"",id:`${this.id}_upload_${t}`});n.setOnChange(o=>{this.updateLanguageValue(t,o),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(o)}),this.uploadSettings.set(t,n);const a=n.draw();a.classList.add("simple-language-upload"),i.appendChild(a)}else{const n=document.createElement("textarea");n.id=`textarea-${t}`,n.classList.add("simple-language-textarea"),n.value=e||"",n.rows=1,n.style.overflowY="hidden";let a=this.props.placeholder||"Enter text in {language}...";a.includes("{language}")&&(a=a.replace("{language}",t.toUpperCase())),n.setAttribute("data-full-placeholder",a),this.adaptPlaceholderToSingleLine(n,a),this.getDataPropsPath()&&n.setAttribute("data-test-id",`${this.getDataPropsPath()}_${t}`),n.addEventListener("input",l=>{const r=l.target;this.updateLanguageValue(t,r.value),t===this.defaultLanguage&&this.updateOtherLanguagePlaceholders(r.value),this.autosizeTextarea(r,3);const h=n.getAttribute("data-full-placeholder")||"";h&&this.adaptPlaceholderToSingleLine(n,h)}),i.appendChild(n),(l=>(typeof queueMicrotask=="function"?queueMicrotask:r=>setTimeout(r,0))(l))(()=>{this.autosizeTextarea(n,3);const l=n.getAttribute("data-full-placeholder")||"";l&&this.adaptPlaceholderToSingleLine(n,l)})}return i}updateLanguageValue(t,e){this.value||(this.value={});const i={...this.value,[t]:e};this.setValue(i)}updateOtherLanguagePlaceholders(t){this.container&&this.props.languages.forEach(e=>{var s,n;if(e===this.defaultLanguage)return;const i=(s=this.container)==null?void 0:s.querySelector(`#textarea-${e}`);if(i&&(!i.value||i.value.trim()==="")){const a=t||((n=this.props.placeholder)==null?void 0:n.replace("{language}",e.toUpperCase()))||`Enter text in ${e.toUpperCase()}...`;i.setAttribute("data-full-placeholder",a),this.adaptPlaceholderToSingleLine(i,a)}})}draw(){const t=document.createElement("div");if(t.classList.add("simple-multi-language-wrapper"),this.props.title){const s=document.createElement("div");s.classList.add("simple-multi-language-title"),s.textContent=this.props.title,t.appendChild(s)}const e=document.createElement("div");e.classList.add("simple-multi-language-content"),this.props.languages.forEach(s=>{var o;const n=((o=this.value)==null?void 0:o[s])||"",a=this.createTextareaRow(s,n);e.appendChild(a)}),t.appendChild(e),this.container=t;const i=()=>{if(!this.container)return;this.container.querySelectorAll(".simple-language-textarea").forEach(n=>{const a=n.getAttribute("data-full-placeholder")||"";a&&this.adaptPlaceholderToSingleLine(n,a)})};return window.addEventListener("resize",i),t}setValue(t){super.setValue(t),this.container&&this.props.languages.forEach(e=>{var i;if(this.props.multiImg){const s=this.uploadSettings.get(e);s&&s.setValue((t==null?void 0:t[e])||"")}else{const s=(i=this.container)==null?void 0:i.querySelector(`#textarea-${e}`);if(s){s.value=(t==null?void 0:t[e])||"",this.autosizeTextarea(s,3);const n=s.getAttribute("data-full-placeholder")||"";n&&this.adaptPlaceholderToSingleLine(s,n)}}})}}class bt extends p{constructor(t={}){super(t),this.inputType="select";const e=[{name:"None",value:"none"},{name:"Fade",value:"fade 1.5s ease-in-out infinite"},{name:"Slide",value:"slide 1.5s ease-in-out infinite"},{name:"Zoom",value:"zoom 1.5s ease-in-out infinite"},{name:"Bounce",value:"bounce 1.5s ease-in-out infinite"},{name:"Pulse",value:"pulse 1.5s ease-in-out infinite"}];this.selectSetting=new S({title:this.title||"Animation",options:e,default:this.props.default||"none"}),this.selectSetting.onChange=i=>{var s;this.value=i,(s=this.onChange)==null||s.call(this,i)}}draw(){return this.selectSetting.draw()}destroy(){this.selectSetting.destroy(),super.destroy()}}const Et=`
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
@@ -216,7 +216,7 @@
 				font-weight: ${i};
 				font-size: ${s}px;
 				text-align: ${n};
-			`}}class L extends p{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,r=this.props.maxValue??Number.MAX_SAFE_INTEGER;let h=Number(o.value);h<l&&(h=l),h>r&&(h=r),o.value=String(h)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const s=i.querySelector("input.number-setting-input");s&&(s.style.paddingRight="35px");const n=document.createElement("span");n.className="suffix-label",n.textContent=this.props.suffix,i.appendChild(n);const a=i.querySelector("input");return a&&(a.oninput=o=>{const l=o.target.value.trim();if(l.toLowerCase()==="auto")this.value="auto";else{const r=Number(l);isNaN(r)||(this.value=r)}this.onChange&&this.onChange(this.value)}),i}}class Vt extends v{constructor(t){super({title:"Margins",collapsed:t==null?void 0:t.collapsed,settings:{marginTop:new L({title:"Top",icon:It,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new L({title:"Right",icon:Nt,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new L({title:"Bottom",icon:Ot,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new L({title:"Left",icon:Ht,suffix:"px",default:(t==null?void 0:t.marginLeft)??0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,s=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
+			`}}class L extends p{constructor(t){super({...t,default:t.default!==void 0?t.default:"auto"}),this.inputType="number",this.value=t.default!==void 0?t.default:"auto"}draw(){const t=this.value==="auto"?"text":"number",e=o=>{this.value!=="auto"&&(this.props.minValue!==void 0&&(o.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(o.max=String(this.props.maxValue)),this.props.className&&o.classList.add(this.props.className),o.addEventListener("input",()=>{const l=this.props.minValue??Number.MIN_SAFE_INTEGER,r=this.props.maxValue??Number.MAX_SAFE_INTEGER;let h=Number(o.value);h<l&&(h=l),h>r&&(h=r),o.value=String(h)}))},i=this.createInput({value:this.value,inputType:t,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:e,placeholder:this.value==="auto"?"auto":""});if(!this.props.suffix||this.props.suffix==="none")return i;i.classList.add("suffix-wrapper");const s=i.querySelector("input.number-setting-input");s&&(s.style.paddingRight="35px");const n=document.createElement("span");n.className="suffix-label",n.textContent=this.props.suffix,i.appendChild(n);const a=i.querySelector("input");return a&&(a.oninput=o=>{const l=o.target.value.trim();if(l.toLowerCase()==="auto")this.value="auto";else{const r=Number(l);isNaN(r)||(this.value=r)}this.onChange&&this.onChange(this.value)}),i}}class Vt extends v{constructor(t){super({title:"Margins",collapsed:t==null?void 0:t.collapsed,settings:{marginTop:new L({title:"Top",icon:It,suffix:"px",default:(t==null?void 0:t.marginTop)??"auto"}),marginRight:new L({title:"Right",icon:Nt,suffix:"px",default:(t==null?void 0:t.marginRight)??0}),marginBottom:new L({title:"Bottom",icon:Ot,suffix:"px",default:(t==null?void 0:t.marginBottom)??0}),marginLeft:new L({title:"Left",icon:Tt,suffix:"px",default:(t==null?void 0:t.marginLeft)??0})}})}getCssCode(){const t=typeof this.settings.marginTop.value=="number"?`${this.settings.marginTop.value}px`:this.settings.marginTop.value,e=typeof this.settings.marginRight.value=="number"?`${this.settings.marginRight.value}px`:this.settings.marginRight.value,i=typeof this.settings.marginBottom.value=="number"?`${this.settings.marginBottom.value}px`:this.settings.marginBottom.value,s=typeof this.settings.marginLeft.value=="number"?`${this.settings.marginLeft.value}px`:this.settings.marginLeft.value;return`
       margin-top: ${t};
       margin-right: ${e};
       margin-bottom: ${i};
@@ -227,13 +227,13 @@
   <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 16.25H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M15.75 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>`,Ot=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M2.25 2.75H2.2575M2.25 9.5H2.2575M2.25 12.875H2.2575M2.25 6.125H2.2575M5.625 2.75H5.6325M5.625 9.5H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`,Ht=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
+</svg>`,Tt=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M5.625 2.75H5.6325M5.625 9.5H5.6325M5.625 16.25H5.6325M12.375 2.75H12.3825M12.375 9.5H12.3825M12.375 16.25H12.3825M9 2.75H9.0075M9 9.5H9.0075M9 16.25H9.0075M9 12.875H9.0075M9 6.125H9.0075M15.75 2.75H15.7575M15.75 9.5H15.7575M15.75 16.25H15.7575M15.75 12.875H15.7575M15.75 6.125H15.7575M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`;class Tt extends v{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,settings:{backgroundImage:new T({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new D({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new C({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[s,n,a]=i;e.innerHTML="",e.appendChild(s),e.appendChild(n);const o=document.createElement("div");return o.className="bgset-or-label",o.textContent="OR",e.appendChild(o),e.appendChild(a),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"#000000";return t?`
+</svg>`;class Ht extends v{constructor(t){super({title:"Background Image",collapsed:t==null?void 0:t.collapsed,settings:{backgroundImage:new H({...t==null?void 0:t.uploadProps,default:(t==null?void 0:t.backgroundImage)??""}),opacity:new D({default:(t==null?void 0:t.opacity)??100}),backgroundColor:new C({default:(t==null?void 0:t.backgroundColor)??"0, 0, 30"})}})}draw(){const t=super.draw(),e=t.querySelector(".setting-group-content");if(!e)return t;const i=Array.from(e.children),[s,n,a]=i;e.innerHTML="",e.appendChild(s),e.appendChild(n);const o=document.createElement("div");return o.className="bgset-or-label",o.textContent="OR",e.appendChild(o),e.appendChild(a),t}getCssCode(){const t=this.settings.backgroundImage.value||"",e=this.settings.opacity.value??100,i=this.settings.backgroundColor.value||"#000000";return t?`
         background-image: url("${t}");
         background-size: cover;
         background-position: center;
         opacity: ${e/100};
       `:`
         background-color: ${i};
-      `}}exports.AlignSetting=F;exports.AnimationSetting=bt;exports.BackgroundSettingSet=Tt;exports.BorderSettingSet=yt;exports.ButtonSetting=Q;exports.ColorSetting=m;exports.ColorWithOpacitySetting=C;exports.DimensionSetting=tt;exports.GapSetting=gt;exports.HeaderTypographySettingSet=St;exports.HeightSetting=ot;exports.HtmlSetting=K;exports.MarginBottomSetting=ft;exports.MarginSettingGroup=Vt;exports.MarginTopSetting=Ct;exports.MultiLanguageSetting=wt;exports.NumberSetting=f;exports.OpacitySetting=D;exports.SelectApiSettings=dt;exports.SelectSetting=S;exports.Setting=p;exports.SettingGroup=v;exports.StringSetting=$;exports.TabSettingGroup=H;exports.TabsSettingGroup=H;exports.Toggle=ut;exports.UploadSetting=T;exports.WidthSetting=rt;exports.asSettingGroupWithSettings=J;exports.createSettingGroup=B;exports.createTabSettingGroup=U;exports.isSetting=w;exports.isSettingChild=O;exports.isSettingGroup=g;exports.iterateSettings=x;
+      `}}exports.AlignSetting=F;exports.AnimationSetting=bt;exports.BackgroundSettingSet=Ht;exports.BorderSettingSet=yt;exports.ButtonSetting=Q;exports.ColorSetting=m;exports.ColorWithOpacitySetting=C;exports.DimensionSetting=tt;exports.GapSetting=gt;exports.HeaderTypographySettingSet=St;exports.HeightSetting=ot;exports.HtmlSetting=K;exports.MarginBottomSetting=ft;exports.MarginSettingGroup=Vt;exports.MarginTopSetting=Ct;exports.MultiLanguageSetting=wt;exports.NumberSetting=f;exports.OpacitySetting=D;exports.SelectApiSettings=dt;exports.SelectSetting=S;exports.Setting=p;exports.SettingGroup=v;exports.StringSetting=$;exports.TabSettingGroup=T;exports.TabsSettingGroup=T;exports.Toggle=ut;exports.UploadSetting=H;exports.WidthSetting=rt;exports.asSettingGroupWithSettings=J;exports.createSettingGroup=B;exports.createTabSettingGroup=U;exports.isSetting=w;exports.isSettingChild=O;exports.isSettingGroup=g;exports.iterateSettings=x;

package/dist/builder-settings-types.es.js

@@ -651,11 +651,12 @@ const V = class V {
       for (const i in this.settings)
         if (Object.prototype.hasOwnProperty.call(this.settings, i)) {
           const s = this.settings[i];
-          if (g(s))
-            e[i] = s.getValuesForJson();
-          else {
+          if (g(s)) {
+            const n = s.getValuesForJson();
+            n !== null && (e[i] = n);
+          } else {
             const n = s;
-            n.includeGetJson === !1 ? e[i] = null : e[i] = n.value;
+            n.includeGetJson !== !1 && (e[i] = n.value);
           }
         }
       return e;
@@ -1935,7 +1936,12 @@ class kt extends p {
         }
       `, document.head.appendChild(l);
     }
-    return i.appendChild(s), i.appendChild(n), t.appendChild(i), t;
+    if (i.appendChild(s), i.appendChild(n), t.appendChild(i), this.props.description) {
+      t.classList.add("toggle-has-description");
+      const l = document.createElement("p");
+      l.className = "toggle-description", l.textContent = this.props.description, t.appendChild(l);
+    }
+    return t;
   }
   setDetectChange(t) {
     this.detectChangeCallback = t;
@@ -2169,7 +2175,11 @@ class St extends p {
         const s = (i = this.container) == null ? void 0 : i.querySelector(
           `#textarea-${e}`
         );
-        s && (s.value = (t == null ? void 0 : t[e]) || "");
+        if (s) {
+          s.value = (t == null ? void 0 : t[e]) || "", this.autosizeTextarea(s, 3);
+          const n = s.getAttribute("data-full-placeholder") || "";
+          n && this.adaptPlaceholderToSingleLine(s, n);
+        }
       }
     });
   }

package/dist/index.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.cdnfonts.com/css/satoshi";:root{--color-text: #1d2939;--color-text-secondary: #667085;--color-text-muted: #98a2b3;--color-border: #e4e7ec;--color-border-hover: #d0d5dd;--color-bg: #fff;--color-bg-hover: #f9fafb;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--transition-fast: .15s ease;--transition-normal: .3s ease}.icon-container{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs)}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);flex-shrink:0;width:18px;height:18px;transition:color var(--transition-fast)}.input-label{color:var(--color-text-secondary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:1.4;transition:color var(--transition-fast)}.input-container{display:inline-flex;align-items:center;position:relative;width:100%}.input-wrapper{position:relative;width:100%;min-width:0}.base-input{width:100%;height:36px;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md);font-weight:400;line-height:1.4;transition:all var(--transition-fast);outline:none}.base-input::placeholder{color:var(--color-text-muted)}.base-input:hover{border-color:var(--color-border-hover);background:var(--color-bg-hover)}.base-input:focus{border-color:var(--color-border-focus);background:var(--color-bg-focus)}.base-input:disabled{background:#f9fafb;color:var(--color-text-muted);cursor:not-allowed;opacity:.7}.with-suffix{padding-right:44px}.input-suffix{position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.with-prefix{padding-left:44px}.input-prefix{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.setting-item{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);align-items:center;min-height:40px;padding:var(--space-sm) 0}.setting-item.full-width{grid-template-columns:1fr}.setting-item.stacked{grid-template-columns:1fr;gap:var(--space-xs);align-items:stretch}.setting-item-label{display:flex;align-items:center;gap:var(--space-xs);min-width:0}.setting-item-control{min-width:0;justify-self:end}.setting-item.stacked .setting-item-control{max-width:none;justify-self:stretch}.input-error{border-color:#f04438!important;background:#fff4f4!important;color:#f04438!important}.input-error:focus{border-color:#f04438!important;box-shadow:0 0 0 4px #f044381a!important}.error-message{color:#f04438;font-size:var(--font-size-xs);margin-top:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs)}.input-success{border-color:#02cc59!important;background:#f0fdf4!important}.input-success:focus{border-color:#02cc59!important}.input-loading{position:relative;color:var(--color-text-muted);background:#f9fafb;pointer-events:none}.input-loading:after{content:"";position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid var(--color-border-focus);border-radius:50%;animation:spin 1s linear infinite}.setting-group .setting-group .setting-item{min-height:36px;padding:6px 0}.setting-group .setting-group .base-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .input-label{font-size:11px}.setting-group .setting-group .setting-group .setting-item{min-height:32px;padding:4px 0}.setting-group .setting-group .setting-group .base-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .input-label{font-size:10px}@media (max-width: 480px){.setting-item{grid-template-columns:1fr;gap:var(--space-xs)}.setting-item-control{max-width:none;justify-self:stretch}.base-input{font-size:var(--font-size-md)}}@media (prefers-color-scheme: dark){:root{--color-text: #f9fafb;--color-text-secondary: #d0d5dd;--color-text-muted: #667085;--color-border: #344054;--color-border-hover: #475467;--color-bg: #1d2939;--color-bg-hover: #344054}}.base-input:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.compact .setting-item{min-height:32px;padding:4px 0}.compact .base-input{height:32px;padding:6px 10px;font-size:13px}.compact .input-label{font-size:11px}@media (prefers-contrast: high){.base-input{border-width:2px}.base-input:focus{border-width:3px}}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.string-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.string-setting-wrapper .string-setting-wrapper{display:block;width:100%}.color-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-input-wrapper{position:relative;width:100%;justify-self:end}.color-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-text-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.color-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid var(--color-border, #e4e7ec);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none;background-color:#fff}.color-preview:hover{transform:translateY(-50%) scale(1.05)}.setting-group .setting-group .color-setting-wrapper{min-height:36px}.setting-group .setting-group .color-input-wrapper{max-width:120px}.setting-group .setting-group .color-text-input{height:32px;padding:6px 10px 6px 32px;font-size:13px}.setting-group .setting-group .color-preview,.setting-group .setting-group .color-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .setting-group .color-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-input-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-text-input{height:28px;padding:4px 8px 4px 28px;font-size:12px}.setting-group .setting-group .setting-group .color-preview,.setting-group .setting-group .setting-group .color-picker{left:4px;width:16px;height:16px}.color-input-wrapper.error .color-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-input-wrapper.error .color-text-input:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.color-input-wrapper.disabled .color-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker:focus-visible+.color-preview{outline-offset:2px}.color-with-opacity-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-with-opacity-controls-wrapper{display:grid;grid-template-columns:1fr;gap:var(--space-sm, 8px);justify-self:end;width:100%}.color-with-opacity-input-wrapper,.color-with-opacity-opacity-wrapper{position:relative;width:100%}.color-with-opacity-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-with-opacity-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-with-opacity-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-with-opacity-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid var(--color-border, #e4e7ec);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none;background-color:#fff;cursor:pointer;overflow:hidden}.color-with-opacity-preview:hover{transform:translateY(-50%) scale(1.05)}.color-with-opacity-preview:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;z-index:-1}.color-with-opacity-opacity-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:20px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-with-opacity-opacity-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-opacity-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-opacity-suffix{position:absolute;right:var(--space-sm, 8px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.color-with-opacity-opacity-input::-webkit-inner-spin-button,.color-with-opacity-opacity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-with-opacity-opacity-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:120px}.setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .color-with-opacity-opacity-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .color-with-opacity-text-input{padding-left:32px}.setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .color-with-opacity-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:11px}.setting-group .setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .color-with-opacity-text-input{padding-left:28px}.setting-group .setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .setting-group .color-with-opacity-picker{left:4px;width:16px;height:16px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:10px}.color-with-opacity-input-wrapper.error .color-with-opacity-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-with-opacity-input-wrapper.disabled .color-with-opacity-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.html-setting-wrapper{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.html-setting-wrapper .icon-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.html-setting-wrapper .icon-container label{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0}.html-setting-wrapper .icon-container img{width:20px;height:20px;object-fit:contain}.html-setting-textarea{width:100%;min-height:120px;padding:12px;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;line-height:1.4;border-radius:8px;color:var(--Gray-900, #101828);border:1px solid var(--Gray-300, #d0d5dd);background:var(--Base-White, #fff);resize:vertical;min-width:0;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease}.html-setting-textarea:focus{outline:none}.html-setting-textarea::placeholder{color:var(--Gray-500, #667085);font-style:italic}.html-setting-textarea:disabled{background-color:var(--Gray-50, #f9fafb);color:var(--Gray-500, #667085);cursor:not-allowed}@media (max-width: 768px){.html-setting-textarea{font-size:12px;padding:10px;min-height:100px}}.html-setting-textarea::-webkit-scrollbar{width:8px}.html-setting-textarea::-webkit-scrollbar-track{background:var(--Gray-100, #f2f4f7);border-radius:4px}.html-setting-textarea::-webkit-scrollbar-thumb{background-color:var(--Gray-300, #d0d5dd);border-radius:4px;border:2px solid transparent;background-clip:content-box}.html-setting-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--Gray-400, #98a2b3)}.html-setting-textarea{scrollbar-width:thin;scrollbar-color:var(--Gray-300, #d0d5dd) var(--Gray-100, #f2f4f7)}.html-setting-textarea[data-syntax=html]{font-family:Monaco,Menlo,Ubuntu Mono,Courier New,monospace;-moz-tab-size:2;tab-size:2}.number-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.number-setting-input-container{position:relative;width:100%;justify-self:end}.number-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.number-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.number-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.number-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.number-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.suffix-label{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.number-setting-input::-webkit-inner-spin-button,.number-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .number-setting-wrapper{min-height:36px}.setting-group .setting-group .number-setting-input-container{max-width:120px}.setting-group .setting-group .number-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .suffix-label{right:10px;font-size:11px}.setting-group .setting-group .setting-group .number-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .number-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .number-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .suffix-label{right:8px;font-size:10px}.number-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.number-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.number-setting-input:focus-visible{outline-offset:2px}.opacity-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.icon-container{display:flex;align-items:center;gap:var(--space-sm, 8px)}.input-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted, #98a2b3)}.input-icon svg{width:16px;height:16px}.input-label{color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:500;line-height:1.4}.opacity-setting-input-container{position:relative;width:100%;justify-self:end}.opacity-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.opacity-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.opacity-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.opacity-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.opacity-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.opacity-suffix{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.opacity-setting-input::-webkit-inner-spin-button,.opacity-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.opacity-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .opacity-setting-input-container{max-width:120px}.setting-group .setting-group .opacity-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .opacity-suffix{right:10px;font-size:11px}.setting-group .setting-group .setting-group .opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .opacity-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .opacity-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .opacity-suffix{right:8px;font-size:10px}.opacity-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.opacity-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.opacity-setting-input:focus-visible{outline-offset:2px}.select-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;position:relative;width:100%;min-height:40px;z-index:1}.select-container .select-options{position:fixed;z-index:99999;max-width:300px;min-width:200px}.setting-group .select-container,.tab-content .select-container,.tabs-settings-container .select-container{position:relative;z-index:1}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:var(--color-text-secondary, #667085);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm, 12px);font-style:normal;font-weight:400;line-height:1.4}.select-button{place-self:end;max-width:140px;width:100%;height:36px;min-height:36px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 var(--space-md, 12px);border-radius:var(--radius-lg, 8px);border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);cursor:pointer;font-size:var(--font-size-md, 14px);font-weight:400;color:var(--color-text, #1d2939);position:relative;transition:all var(--transition-fast, .15s ease);box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.select-button:hover{border-color:var(--color-border-hover, #d0d5dd);box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none}.select-button.has-label{padding-top:0;height:36px}.select-button .select-label{position:absolute;top:8px;left:16px;color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-button .select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.select-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #02cc59;border-radius:50%;animation:select-spin 1s linear infinite;z-index:2}@keyframes select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-options{display:none;position:fixed!important;z-index:99999!important;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px);min-width:200px;max-width:300px}.select-options.open{display:flex;opacity:1;transform:translateY(0);animation:select-fade-in .2s ease forwards}@keyframes select-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-option:hover{background:#f9fafb}.select-option.selected{background:#b6dfc8;color:#344054;font-weight:400}.svg-container{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:none;z-index:1}.svg-container .svg-select{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select{transform:rotate(180deg)}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.setting-group .setting-group .select-container{min-height:36px}.setting-group .setting-group .select-button{height:32px;min-height:32px;max-width:120px;font-size:13px;padding:0 32px 0 10px}.setting-group .setting-group .select-container .icon-container .input-label{font-size:11px}.setting-group .setting-group .setting-group .select-container{min-height:32px}.setting-group .setting-group .setting-group .select-button{height:28px;min-height:28px;max-width:100px;font-size:12px;padding:0 28px 0 8px}.setting-group .setting-group .setting-group .select-container .icon-container .input-label{font-size:10px}.setting-group .setting-group .svg-container,.setting-group .setting-group .setting-group .svg-container{right:8px;width:16px;height:16px}.setting-group .setting-group .svg-container .svg-select,.setting-group .setting-group .setting-group .svg-container .svg-select{width:12px;height:12px}.align-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px;justify-self:flex-end}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.button-setting{display:flex;height:30px;min-width:64px;padding:0;justify-content:center;align-items:center;gap:8px;flex:1 0 0;border:1px solid rgba(145,158,171,.32);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.01em;text-align:center}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center;z-index:1}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{transform:translate(-.25rem);width:24px;height:24px;background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#667085;z-index:1;border-radius:4px;transition:all .2s ease}.dimension-lock-icon:hover{background-color:#f5f5f5;transform:translate(-.25rem) scale(1.1)}.dimension-setting-container.aspect-locked .dimension-lock-icon{color:#02cc59;background-color:#02cc591a;box-shadow:0 0 0 1px #02cc5933}.dimension-setting-container.aspect-locked .dimension-bracket:before,.dimension-setting-container.aspect-locked .dimension-bracket:after{filter:hue-rotate(210deg) saturate(2)}@media (max-width: 480px){.dimension-bracket{right:100px}}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;gap:8px;width:100%}.icon-title-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.icon-title-container .input-label{color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500}.preview-button-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;width:100%;gap:12px;border-radius:12px}.preview-button-container.no-image{justify-content:center}.preview-button-container.no-image .preview-placeholder{display:none}.preview-button-container.no-image .upload-button{width:100%;min-width:140px;flex-grow:1;margin:0 auto}.no-image .preview-placeholder{display:none!important}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#d3d3d3;flex-shrink:0;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;background-position:center;background-size:146.165% 100%;background-repeat:no-repeat}.preview-wrapper.has-image .upload-preview{display:block;object-fit:contain;padding:2px}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .empty-state{display:none}.upload-button{width:100%;height:40px;display:flex;padding:5px 4px;flex-direction:row;align-items:center;gap:4px;border-radius:12px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;flex-grow:0;justify-content:center;min-width:90px}.preview-wrapper:not(.has-image)+.upload-button{flex-grow:0}.upload-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.upload-icon{display:flex;align-items:center;justify-content:center}.upload-label{font-size:12px;font-weight:500;color:#344054}.delete-button{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;position:absolute;right:4px;top:4px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease;z-index:2}.delete-button svg{width:14px;height:14px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.upload-setting-wrapper.no-label .preview-button-container{grid-row:1}.preview-placeholder{display:flex;justify-content:center;align-items:center;width:91px;height:71px;border-radius:4px;background-color:#f2f4f7;flex-shrink:0}.preview-button-container:not(:has(.preview-wrapper.has-image)) .preview-placeholder{display:flex}.upload-setting-wrapper .error-message{color:#f04438;font-size:12px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.4;margin-top:4px;margin-bottom:8px;padding:8px 12px;background-color:#fff4f4;border:1px solid #fecdca;border-radius:6px;display:none;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.upload-setting-wrapper .error-message:before{content:"⚠️";margin-right:6px}.preview-wrapper.loading{display:flex;align-items:center;justify-content:center;background-color:#f9fafb}.preview-wrapper.loading .upload-preview{display:none}.loading-spinner{width:29px;height:29px;display:flex;align-items:center;justify-content:center;animation:spin 1s linear infinite}.loading-spinner svg{width:100%;height:100%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.height-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.select-api-container{display:grid;grid-template-columns:1fr;place-content:center;align-items:center;position:relative;width:100%}.select-api-button{width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:#fff;cursor:pointer;color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:normal;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:40px!important}.select-api-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-api-button:focus{outline:none;border-color:#b6dfc8;box-shadow:0 0 0 4px #7f56d91a}.select-api-button .select-label{position:absolute;top:2px;color:#667085;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:400;line-height:normal;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-api-button .select-value{margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.select-api-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-api-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #02CC59;border-radius:50%;animation:select-api-spin 1s linear infinite;z-index:2}.select-api-button.has-label.loading{padding-left:36px!important}.select-api-button.has-label.loading .select-value{padding-left:0}.select-api-button.has-label.loading:before{top:18px;left:10px}@keyframes select-api-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-api-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-api-options{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:100;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-8px)}.select-api-options.open{display:flex;opacity:1;transform:translateY(0)}.select-api-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-api-option:hover{background:#f9fafb}.select-api-option.selected{background:#b6dfc8;color:#344054;font-weight:500}.select-api-option.disabled{opacity:.6;cursor:not-allowed;color:#6e7891}.select-api-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid #e4e7ec;background:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0;cursor:pointer}.select-api-radio:checked{border-color:#02cc59;background:#fff;position:relative}.select-api-radio:checked:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#02cc59;border-radius:50%}.svg-container{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;pointer-events:none}.svg-container .svg-select-api{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select-api{transform:rotate(180deg)}.select-api-container .icon-container{display:none}.select-api-options::-webkit-scrollbar{width:6px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-api-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.select-api-option.empty-message:hover{background:transparent}.select-api-option:focus{outline:none;box-shadow:0 0 0 2px #b6dfc8}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-api-options.open{display:flex;animation:fadeIn .2s ease forwards}.select-api-button.has-label{height:48px}.toggle-setting-container{display:flex;justify-content:space-between;align-items:center;padding-left:3px;padding-right:3px}.toggle-label{color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.toggle-switch{position:relative;display:inline-block;width:36px;height:20px;padding:2px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e4e7ec;transition:.4s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:#02cc59}input:focus+.toggle-slider{box-shadow:0 0 1px #02cc59}input:checked+.toggle-slider:before{transform:translate(16px)}.toggle-with-icon .toggle-label{display:flex;align-items:center;gap:8px}.toggle-icon{display:flex;align-items:center;justify-content:center;color:#667085}.gap-settings-container{display:flex;flex-direction:column;gap:12px;width:100%}.gap-settings-title{font-size:14px;font-weight:500;color:#344054;margin-bottom:4px}.gap-input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%}.gap-label-container{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.gap-setting-icon{display:flex;align-items:center;justify-content:center;font-size:16px;color:#667085}.gap-setting-icon svg{width:16px;height:16px}.gap-input-label{font-size:13px;color:#667085}.gap-setting-inner-wrapper{position:relative;display:grid;grid-template-columns:1fr;place-content:center;align-items:center;width:120px}.gap-setting-input{width:100%;padding:8px;font-size:14px;border-radius:8px;color:#292b2e;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative}.suffix-label{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}.gap-setting-input::-webkit-outer-spin-button,.gap-setting-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-setting-input[type=number]{-moz-appearance:textfield}.margin-bottom-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-bottom-wrapper .setting-icon svg{width:18px;height:19px}.margin-bottom-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-bottom-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.margin-top-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-top-wrapper .setting-icon svg{width:18px;height:19px}.margin-top-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-top-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.simple-multi-language-wrapper{display:flex;flex-direction:column;width:100%}.simple-multi-language-title{color:#000;font-weight:700;font-size:14px;margin-bottom:8px}.simple-multi-language-content{display:flex;flex-direction:column;gap:12px;width:100%}.simple-multi-language-row{display:flex;flex-direction:column;gap:6px}.simple-language-label{font-size:12px;font-weight:500;color:var(--color-input-text);text-transform:uppercase;letter-spacing:.5px}.simple-language-textarea{width:100%;min-height:0;padding:12px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);font-family:inherit;resize:none;line-height:1.4;overflow-y:hidden;box-sizing:border-box}.simple-language-textarea:focus{outline:none;border-color:var(--color-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.simple-language-textarea::placeholder{color:var(--color-text-muted, #6c757d);white-space:nowrap;text-overflow:ellipsis}.simple-language-textarea:placeholder-shown{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 640px){.simple-multi-language-row{gap:4px}.simple-language-label{font-size:11px}.simple-language-textarea{min-height:0;padding:8px;font-size:13px}}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}.settings-container,.main-settings-container,[data-settings-container]{height:auto;min-height:auto;overflow:visible;flex-shrink:0}.container,.wrapper,.main-wrapper{height:auto!important;min-height:auto!important;max-height:none!important;overflow:visible!important}:root{--sg-spacing-0: 16px;--sg-spacing-1: 12px;--sg-spacing-2: 8px;--sg-spacing-3: 6px;--sg-border-0: #eaecf0;--sg-border-1: #d0d5dd;--sg-border-2: #e5e7eb;--sg-border-3: #f2f4f7;--sg-bg-0: #fff;--sg-bg-1: #fff;--sg-bg-2: #fff;--sg-bg-3: #fff;--sg-shadow-0: 0px 1px 3px rgba(16, 24, 40, .1), 0px 1px 2px rgba(16, 24, 40, .06);--sg-shadow-1: 0px 1px 2px rgba(16, 24, 40, .05);--sg-shadow-2: 0px 1px 1px rgba(16, 24, 40, .04);--sg-shadow-3: none}.setting-group{display:flex;flex-direction:column;width:100%;gap:8px;border-radius:8px;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;max-width:100%;box-sizing:border-box}.setting-group[data-nesting-level="0"]{padding:var(--sg-spacing-0);border:1px solid var(--sg-border-0);background:var(--sg-bg-0);box-shadow:var(--sg-shadow-0);border-radius:8px}.setting-group[data-nesting-level="1"]{padding:var(--sg-spacing-1);border:1px solid var(--sg-border-1);background:var(--sg-bg-1);box-shadow:var(--sg-shadow-1);border-radius:6px}.setting-group[data-nesting-level="2"]{padding:var(--sg-spacing-2);border:1px solid var(--sg-border-2);background:var(--sg-bg-2);box-shadow:var(--sg-shadow-2);border-radius:4px}.setting-group[data-nesting-level="3"],.setting-group[data-nesting-level="4"],.setting-group[data-nesting-level="5"]{padding:var(--sg-spacing-3);border:1px solid var(--sg-border-3);background:var(--sg-bg-3);box-shadow:var(--sg-shadow-3);border-radius:4px}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group[data-nesting-level="0"] .setting-group-content{padding:0 8px 8px;gap:8px}.setting-group[data-nesting-level="1"] .setting-group-content{padding:0 8px 8px;gap:6px}.setting-group[data-nesting-level="2"] .setting-group-content{padding:0 8px 8px;gap:4px}.setting-group[data-nesting-level="3"] .setting-group-content,.setting-group[data-nesting-level="4"] .setting-group-content,.setting-group[data-nesting-level="5"] .setting-group-content{padding:0 6px 6px;gap:3px}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title h3{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group[data-nesting-level="1"] .setting-group-title h3{font-size:13px;font-weight:500}.setting-group[data-nesting-level="2"] .setting-group-title h3{font-size:12px;font-weight:500}.setting-group[data-nesting-level="3"] .setting-group-title h3,.setting-group[data-nesting-level="4"] .setting-group-title h3,.setting-group[data-nesting-level="5"] .setting-group-title h3{font-size:11px;font-weight:500}.setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;opacity:1;overflow:visible;max-width:100%;box-sizing:border-box}.setting-group-content.collapsed{opacity:0;margin:0;padding:0;pointer-events:none;display:none}.setting-group.main-group{padding:16px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5);box-shadow:none;margin-top:4px;background:#f8f8f8;border-radius:8px;width:100%;position:relative;margin-bottom:8px;max-height:none;overflow:visible;max-width:100%;box-sizing:border-box;height:auto;min-height:auto;flex-shrink:0}.setting-group.main-group.collapsed{padding:0;background:transparent!important;border:none;box-shadow:none;margin:0}.setting-group.main-group.collapsed .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;margin-bottom:8px;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group.main-group .setting-group-title h3{color:#344054;font-family:Satoshi;font-size:14px;font-weight:700;line-height:20px}.setting-group-content.main-content{width:100%;background:#f8f8f8;border:0;box-shadow:none;padding:0;height:auto;min-height:auto;overflow:visible;flex-shrink:0}.setting-divider{height:1px;width:100%;background-color:#f2f4f7;margin:4px 0}.setting-group-content>*:last-child{margin-bottom:0}.setting-group.active{border-color:#d6bbfb;box-shadow:0 0 0 4px #7f56d91a}.setting-group-empty{color:#667085;font-size:13px;font-style:italic;padding:12px 0;text-align:center}.setting-group-title.collapsed-view{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;height:36px;border-radius:8px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);margin-bottom:0;position:relative;overflow:hidden;cursor:pointer}.setting-group.main-group .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group:not(.main-group) .setting-group-title.collapsed-view{height:36px;background:#fff;border:1px solid var(--Gray-200, #eaecf0);padding:14px}.setting-group-title .title-section{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.setting-group-title .group-icon{display:flex;justify-content:center;align-items:center;color:var(--Gray-500, #667085);flex-shrink:0;width:20px;height:20px}.setting-group-title.collapsed-view h3{color:#344054;font-family:Satoshi;font-size:14px;font-weight:700;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-title.collapsed-view .group-badge{display:flex;padding:2px 8px;justify-content:center;align-items:center;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-size:12px;font-weight:500;line-height:18px;margin-left:8px}.setting-group-title .actions-section{display:flex;align-items:center;gap:8px;margin-left:12px}.setting-group-title.collapsed-view .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow.rotated{transform:rotate(0)}.setting-group-title.collapsed-view .info-marker{width:16px;height:16px;color:var(--Gray-400, #98a2b3);cursor:help}.setting-group-description{color:#667085;font-size:13px;margin-bottom:8px;line-height:1.4}@media (max-width: 768px){.setting-group-title.collapsed-view{padding:10px 12px}.setting-group-title .title-section{gap:8px}.setting-group-title.collapsed-view .group-badge{display:none}}@media (max-width: 480px){.setting-group-title.collapsed-view h3{font-size:13px}.setting-group-title.collapsed-view .setting-group-arrow{width:24px;height:24px}.setting-group-title.collapsed-view{padding:0 10px}}.setting-group-title.collapsed-view.striped:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--Primary-100, #f4ebff);border-radius:4px 0 0 4px}.setting-group.custom-container{border:none;box-shadow:none;margin:4px 0;padding:0;background:transparent}.setting-group.custom-container>.setting-group-title{display:none}.sg-add-button-bottom{display:flex;height:30px;min-width:64px;padding:6px 12px;justify-content:center;align-items:center;flex:1 0 0;border:1px solid rgba(145,158,171,.32);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.01em;text-align:center}.sg-add-button-bottom:hover{background:#eee}.setting-group.custom-container .setting-group-content{padding:0}.custom_class{border:0!important;box-shadow:none!important;margin:4px 0!important}.custom_class>.setting-group-title{display:none!important}.custom_class .setting-group-content{padding:0!important}.setting-group-title:focus-visible{outline:2px solid #02cc59;outline-offset:2px}.setting-group::-webkit-scrollbar,.setting-group-content::-webkit-scrollbar{width:8px;height:8px}.setting-group::-webkit-scrollbar-track,.setting-group-content::-webkit-scrollbar-track{background:#f0f2f4;border-radius:4px}.setting-group::-webkit-scrollbar-thumb,.setting-group-content::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:4px;border:2px solid transparent;background-clip:content-box}.setting-group::-webkit-scrollbar-thumb:hover,.setting-group-content::-webkit-scrollbar-thumb:hover{background-color:#98a2b3}.setting-group,.setting-group-content{scrollbar-width:thin;scrollbar-color:#c2c9d6 #f0f2f4}.tabs-settings-container{display:flex;flex-direction:column;width:100%;border-radius:8px;background:transparent;overflow:hidden;position:relative;z-index:1;max-width:100%;box-sizing:border-box}.tabs-settings-container.main-group{background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px #1018280d}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;align-self:stretch;flex-shrink:0;background:#f1f3f2;position:relative;z-index:1;border-radius:400px;margin-bottom:8px}.tabs-header.main-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:8px;margin-bottom:0}.tab-button{display:flex;padding:4px 12px;justify-content:center;align-items:center;background-color:transparent;gap:8px;flex:1 0 0;border-radius:400px;color:#000000b3;font-family:Satoshi,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border:1px solid transparent;box-shadow:0 0 #10182800;position:relative;z-index:1;cursor:pointer;transition:all .2s ease;outline:none}.tab-button:active{box-shadow:0 1px 2px -1px #10182805}.tab-button.active{color:#000;font-weight:700;border-radius:400px;background:#fff;box-shadow:0 4px 8px -2px #1018280a}.tab-button.active:active{box-shadow:0 2px 4px -1px #1018280a}.tab-button:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}.tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.tab-icon svg{width:100%;height:100%}.tab-content{position:relative;overflow:hidden;width:100%;z-index:1;margin-top:8px;max-width:100%;box-sizing:border-box;animation:fadeIn .2s ease-in-out}.tab-panel{display:grid;gap:8px;position:absolute;width:100%;opacity:0;pointer-events:none;overflow:hidden;z-index:1;max-width:100%;box-sizing:border-box}.tab-panel.active{opacity:1;pointer-events:auto;position:relative;overflow:hidden;z-index:1;max-width:100%;box-sizing:border-box}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.tabs-header{padding:3px}.tab-button{padding:3px 8px;font-size:11px}}@media (max-width: 480px){.tab-button{padding:2px 6px;font-size:10px}.tab-icon{width:14px;height:14px}}.tab-content>.setting-group{margin-bottom:12px}.tab-content>.setting-group:last-child{margin-bottom:0}.tabs-settings-container.main-group .setting-group-content{border-top:none;border-radius:0 0 8px 8px}.setting-group.main-group.collapsed .tabs-header,.setting-group.main-group.collapsed .setting-group,.setting-group .setting-group.collapsed .tabs-header,.tabs-settings-container.collapsed .tabs-header,.tabs-settings-container.collapsed .tab-content{display:none}:root{--color-border: #d5dce5;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Satoshi,sans-serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}
+@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";@import"https://fonts.cdnfonts.com/css/satoshi";:root{--color-text: #1d2939;--color-text-secondary: #667085;--color-text-muted: #98a2b3;--color-border: #e4e7ec;--color-border-hover: #d0d5dd;--color-bg: #fff;--color-bg-hover: #f9fafb;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-md: 14px;--font-size-lg: 16px;--transition-fast: .15s ease;--transition-normal: .3s ease}.icon-container{display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs)}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);flex-shrink:0;width:18px;height:18px;transition:color var(--transition-fast)}.input-label{color:var(--color-text-secondary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:400;line-height:1.4;transition:color var(--transition-fast)}.input-container{display:inline-flex;align-items:center;position:relative;width:100%}.input-wrapper{position:relative;width:100%;min-width:0}.base-input{width:100%;height:36px;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg);color:var(--color-text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md);font-weight:400;line-height:1.4;transition:all var(--transition-fast);outline:none}.base-input::placeholder{color:var(--color-text-muted)}.base-input:hover{border-color:var(--color-border-hover);background:var(--color-bg-hover)}.base-input:focus{border-color:var(--color-border-focus);background:var(--color-bg-focus)}.base-input:disabled{background:#f9fafb;color:var(--color-text-muted);cursor:not-allowed;opacity:.7}.with-suffix{padding-right:44px}.input-suffix{position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.with-prefix{padding-left:44px}.input-prefix{position:absolute;left:var(--space-md);top:50%;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none;font-size:var(--font-size-sm);font-weight:500;z-index:1}.setting-item{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);align-items:center;min-height:40px;padding:var(--space-sm) 0}.setting-item.full-width{grid-template-columns:1fr}.setting-item.stacked{grid-template-columns:1fr;gap:var(--space-xs);align-items:stretch}.setting-item-label{display:flex;align-items:center;gap:var(--space-xs);min-width:0}.setting-item-control{min-width:0;justify-self:end}.setting-item.stacked .setting-item-control{max-width:none;justify-self:stretch}.input-error{border-color:#f04438!important;background:#fff4f4!important;color:#f04438!important}.input-error:focus{border-color:#f04438!important;box-shadow:0 0 0 4px #f044381a!important}.error-message{color:#f04438;font-size:var(--font-size-xs);margin-top:var(--space-xs);display:flex;align-items:center;gap:var(--space-xs)}.input-success{border-color:#02cc59!important;background:#f0fdf4!important}.input-success:focus{border-color:#02cc59!important}.input-loading{position:relative;color:var(--color-text-muted);background:#f9fafb;pointer-events:none}.input-loading:after{content:"";position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid var(--color-border-focus);border-radius:50%;animation:spin 1s linear infinite}.setting-group .setting-group .setting-item{min-height:36px;padding:6px 0}.setting-group .setting-group .base-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .input-label{font-size:11px}.setting-group .setting-group .setting-group .setting-item{min-height:32px;padding:4px 0}.setting-group .setting-group .setting-group .base-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .input-label{font-size:10px}@media (max-width: 480px){.setting-item{grid-template-columns:1fr;gap:var(--space-xs)}.setting-item-control{max-width:none;justify-self:stretch}.base-input{font-size:var(--font-size-md)}}@media (prefers-color-scheme: dark){:root{--color-text: #f9fafb;--color-text-secondary: #d0d5dd;--color-text-muted: #667085;--color-border: #344054;--color-border-hover: #475467;--color-bg: #1d2939;--color-bg-hover: #344054}}.base-input:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.compact .setting-item{min-height:32px;padding:4px 0}.compact .base-input{height:32px;padding:6px 10px;font-size:13px}.compact .input-label{font-size:11px}@media (prefers-contrast: high){.base-input{border-width:2px}.base-input:focus{border-width:3px}}.string-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.string-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.string-setting-wrapper .string-setting-wrapper{display:block;width:100%}.color-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-input-wrapper{position:relative;width:100%;justify-self:end}.color-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-text-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.color-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid var(--color-border, #e4e7ec);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none;background-color:#fff}.color-preview:hover{transform:translateY(-50%) scale(1.05)}.setting-group .setting-group .color-setting-wrapper{min-height:36px}.setting-group .setting-group .color-input-wrapper{max-width:120px}.setting-group .setting-group .color-text-input{height:32px;padding:6px 10px 6px 32px;font-size:13px}.setting-group .setting-group .color-preview,.setting-group .setting-group .color-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .setting-group .color-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-input-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-text-input{height:28px;padding:4px 8px 4px 28px;font-size:12px}.setting-group .setting-group .setting-group .color-preview,.setting-group .setting-group .setting-group .color-picker{left:4px;width:16px;height:16px}.color-input-wrapper.error .color-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-input-wrapper.error .color-text-input:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.color-input-wrapper.disabled .color-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-picker:focus-visible+.color-preview{outline-offset:2px}.color-with-opacity-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.color-with-opacity-controls-wrapper{display:grid;grid-template-columns:1fr;gap:var(--space-sm, 8px);justify-self:end;width:100%}.color-with-opacity-input-wrapper,.color-with-opacity-opacity-wrapper{position:relative;width:100%}.color-with-opacity-text-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-left:36px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-with-opacity-text-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-text-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-text-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.color-with-opacity-picker{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;opacity:0;cursor:pointer;z-index:2}.color-with-opacity-preview{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:var(--radius-sm, 4px);border:1px solid var(--color-border, #e4e7ec);flex-shrink:0;transition:transform var(--transition-fast, .15s ease);pointer-events:none;background-color:#fff;cursor:pointer;overflow:hidden}.color-with-opacity-preview:hover{transform:translateY(-50%) scale(1.05)}.color-with-opacity-preview:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0px;z-index:-1}.color-with-opacity-opacity-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:20px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none;text-align:center}.color-with-opacity-opacity-input::placeholder{color:var(--color-text-muted, #98a2b3)}.color-with-opacity-opacity-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.color-with-opacity-opacity-suffix{position:absolute;right:var(--space-sm, 8px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.color-with-opacity-opacity-input::-webkit-inner-spin-button,.color-with-opacity-opacity-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.color-with-opacity-opacity-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:120px}.setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .color-with-opacity-opacity-input{height:32px;padding:6px 10px;font-size:13px}.setting-group .setting-group .color-with-opacity-text-input{padding-left:32px}.setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .color-with-opacity-picker{left:6px;width:18px;height:18px}.setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:11px}.setting-group .setting-group .setting-group .color-with-opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .color-with-opacity-controls-wrapper{max-width:100px}.setting-group .setting-group .setting-group .color-with-opacity-input-wrapper,.setting-group .setting-group .setting-group .color-with-opacity-opacity-wrapper{width:100%}.setting-group .setting-group .setting-group .color-with-opacity-text-input,.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{height:28px;padding:4px 8px;font-size:12px}.setting-group .setting-group .setting-group .color-with-opacity-text-input{padding-left:28px}.setting-group .setting-group .setting-group .color-with-opacity-preview,.setting-group .setting-group .setting-group .color-with-opacity-picker{left:4px;width:16px;height:16px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-input{padding-right:20px}.setting-group .setting-group .setting-group .color-with-opacity-opacity-suffix{right:8px;font-size:10px}.color-with-opacity-input-wrapper.error .color-with-opacity-text-input{border-color:#f04438;background:#fff4f4;color:#f04438}.color-with-opacity-input-wrapper.disabled .color-with-opacity-text-input{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.html-setting-wrapper{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.html-setting-wrapper .icon-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.html-setting-wrapper .icon-container label{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0}.html-setting-wrapper .icon-container img{width:20px;height:20px;object-fit:contain}.html-setting-textarea{width:100%;min-height:120px;padding:12px;font-size:13px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;line-height:1.4;border-radius:8px;color:var(--Gray-900, #101828);border:1px solid var(--Gray-300, #d0d5dd);background:var(--Base-White, #fff);resize:vertical;min-width:0;box-sizing:border-box;transition:border-color .2s ease,box-shadow .2s ease}.html-setting-textarea:focus{outline:none}.html-setting-textarea::placeholder{color:var(--Gray-500, #667085);font-style:italic}.html-setting-textarea:disabled{background-color:var(--Gray-50, #f9fafb);color:var(--Gray-500, #667085);cursor:not-allowed}@media (max-width: 768px){.html-setting-textarea{font-size:12px;padding:10px;min-height:100px}}.html-setting-textarea::-webkit-scrollbar{width:8px}.html-setting-textarea::-webkit-scrollbar-track{background:var(--Gray-100, #f2f4f7);border-radius:4px}.html-setting-textarea::-webkit-scrollbar-thumb{background-color:var(--Gray-300, #d0d5dd);border-radius:4px;border:2px solid transparent;background-clip:content-box}.html-setting-textarea::-webkit-scrollbar-thumb:hover{background-color:var(--Gray-400, #98a2b3)}.html-setting-textarea{scrollbar-width:thin;scrollbar-color:var(--Gray-300, #d0d5dd) var(--Gray-100, #f2f4f7)}.html-setting-textarea[data-syntax=html]{font-family:Monaco,Menlo,Ubuntu Mono,Courier New,monospace;-moz-tab-size:2;tab-size:2}.number-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.number-setting-input-container{position:relative;width:100%;justify-self:end}.number-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.number-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.number-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.number-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.number-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.suffix-label{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.number-setting-input::-webkit-inner-spin-button,.number-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .number-setting-wrapper{min-height:36px}.setting-group .setting-group .number-setting-input-container{max-width:120px}.setting-group .setting-group .number-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .suffix-label{right:10px;font-size:11px}.setting-group .setting-group .setting-group .number-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .number-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .number-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .suffix-label{right:8px;font-size:10px}.number-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.number-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.number-setting-input:focus-visible{outline-offset:2px}.opacity-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;min-height:40px}.icon-container{display:flex;align-items:center;gap:var(--space-sm, 8px)}.input-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted, #98a2b3)}.input-icon svg{width:16px;height:16px}.input-label{color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:500;line-height:1.4}.opacity-setting-input-container{position:relative;width:100%;justify-self:end}.opacity-setting-input{width:100%;height:36px;padding:var(--space-sm, 8px) var(--space-md, 12px);padding-right:44px;color:var(--color-text, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-md, 14px);font-weight:400;line-height:1.4;border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);box-sizing:border-box;border-radius:var(--radius-lg, 8px);transition:all var(--transition-fast, .15s ease);outline:none}.opacity-setting-input::placeholder{color:var(--color-text-muted, #98a2b3)}.opacity-setting-input:hover{border-color:var(--color-border-hover, #d0d5dd);background:var(--color-bg-hover, #f9fafb)}.opacity-setting-input:focus{background:var(--color-bg-focus, rgba(2, 204, 89, .05))}.opacity-setting-input:disabled{background:#f9fafb;color:var(--color-text-muted, #98a2b3);cursor:not-allowed;opacity:.7}.opacity-suffix{position:absolute;right:var(--space-md, 12px);top:50%;transform:translateY(-50%);color:var(--color-text-muted, #98a2b3);font-size:var(--font-size-sm, 12px);font-weight:500;pointer-events:none;z-index:1}.opacity-setting-input::-webkit-inner-spin-button,.opacity-setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.opacity-setting-input[type=number]{-moz-appearance:textfield}.setting-group .setting-group .opacity-setting-wrapper{min-height:36px}.setting-group .setting-group .opacity-setting-input-container{max-width:120px}.setting-group .setting-group .opacity-setting-input{height:32px;padding:6px 36px 6px 10px;font-size:13px}.setting-group .setting-group .opacity-suffix{right:10px;font-size:11px}.setting-group .setting-group .setting-group .opacity-setting-wrapper{min-height:32px}.setting-group .setting-group .setting-group .opacity-setting-input-container{max-width:100px}.setting-group .setting-group .setting-group .opacity-setting-input{height:28px;padding:4px 32px 4px 8px;font-size:12px}.setting-group .setting-group .setting-group .opacity-suffix{right:8px;font-size:10px}.opacity-setting-input.error{border-color:#f04438;background:#fff4f4;color:#f04438}.opacity-setting-input.error:focus{border-color:#f04438;box-shadow:0 0 0 4px #f044381a}.opacity-setting-input:focus-visible{outline-offset:2px}.select-container{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md, 12px);align-items:center;position:relative;width:100%;min-height:40px;z-index:1}.select-container .select-options{position:fixed;z-index:99999;max-width:300px;min-width:200px}.setting-group .select-container,.tab-content .select-container,.tabs-settings-container .select-container{position:relative;z-index:1}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:var(--color-text-secondary, #667085);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:var(--font-size-sm, 12px);font-style:normal;font-weight:400;line-height:1.4}.select-button{place-self:end;max-width:140px;width:100%;height:36px;min-height:36px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 var(--space-md, 12px);border-radius:var(--radius-lg, 8px);border:1px solid var(--color-border, #e4e7ec);background:var(--color-bg, #fff);cursor:pointer;font-size:var(--font-size-md, 14px);font-weight:400;color:var(--color-text, #1d2939);position:relative;transition:all var(--transition-fast, .15s ease);box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif}.select-button:hover{border-color:var(--color-border-hover, #d0d5dd);box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none}.select-button.has-label{padding-top:0;height:36px}.select-button .select-label{position:absolute;top:8px;left:16px;color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:18px;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-button .select-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.select-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #02cc59;border-radius:50%;animation:select-spin 1s linear infinite;z-index:2}@keyframes select-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-options{display:none;position:fixed!important;z-index:99999!important;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;transform:translateY(-8px);min-width:200px;max-width:300px}.select-options.open{display:flex;opacity:1;transform:translateY(0);animation:select-fade-in .2s ease forwards}@keyframes select-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-option:hover{background:#f9fafb}.select-option.selected{background:#b6dfc8;color:#344054;font-weight:400}.svg-container{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:none;z-index:1}.svg-container .svg-select{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select{transform:rotate(180deg)}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.setting-group .setting-group .select-container{min-height:36px}.setting-group .setting-group .select-button{height:32px;min-height:32px;max-width:120px;font-size:13px;padding:0 32px 0 10px}.setting-group .setting-group .select-container .icon-container .input-label{font-size:11px}.setting-group .setting-group .setting-group .select-container{min-height:32px}.setting-group .setting-group .setting-group .select-button{height:28px;min-height:28px;max-width:100px;font-size:12px;padding:0 28px 0 8px}.setting-group .setting-group .setting-group .select-container .icon-container .input-label{font-size:10px}.setting-group .setting-group .svg-container,.setting-group .setting-group .setting-group .svg-container{right:8px;width:16px;height:16px}.setting-group .setting-group .svg-container .svg-select,.setting-group .setting-group .setting-group .svg-container .svg-select{width:12px;height:12px}.align-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.align-setting-label{font-size:12px;color:var(--color-text)}.align-options-container{width:120px;color:#0006;background-color:#f5f6f7;border-radius:9999px;padding:4px 13px;display:flex;gap:8px;justify-self:flex-end}.align-option-button{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;cursor:pointer;border-radius:50%;transition:background-color .2s,color .2s}.align-option-button:hover{background-color:#fff}.align-option-button.selected{background-color:var(--color-white);color:var(--color-black)}.button-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.button-setting{display:flex;height:30px;min-width:64px;padding:0;justify-content:center;align-items:center;gap:8px;flex:1 0 0;border:1px solid rgba(145,158,171,.32);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.01em;text-align:center}.dimension-setting-container{display:flex;flex-direction:column;gap:8px;position:relative;width:100%}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center;z-index:1}.dimension-bracket:before{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 1H5C2.79086 1 1 2.79086 1 5V15' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;top:0;right:1px}.dimension-bracket:after{content:"";position:absolute;width:13px;height:14px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'><path d='M14 14H5C2.79086 14 1 12.2091 1 10V4.76837e-07' stroke='%23667085'/></svg>") no-repeat center center;background-size:contain;bottom:0;right:1px}.dimension-lock-icon{transform:translate(-.25rem);width:24px;height:24px;background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:#667085;z-index:1;border-radius:4px;transition:all .2s ease}.dimension-lock-icon:hover{background-color:#f5f5f5;transform:translate(-.25rem) scale(1.1)}.dimension-setting-container.aspect-locked .dimension-lock-icon{color:#02cc59;background-color:#02cc591a;box-shadow:0 0 0 1px #02cc5933}.dimension-setting-container.aspect-locked .dimension-bracket:before,.dimension-setting-container.aspect-locked .dimension-bracket:after{filter:hue-rotate(210deg) saturate(2)}@media (max-width: 480px){.dimension-bracket{right:100px}}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;gap:8px;width:100%}.icon-title-container{display:flex;align-items:center;gap:8px;margin-bottom:4px}.icon-title-container .input-label{color:#344054;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500}.preview-button-container{display:flex;justify-content:space-between;align-items:center;align-self:stretch;width:100%;gap:12px;border-radius:12px}.preview-button-container.no-image{justify-content:center}.preview-button-container.no-image .preview-placeholder{display:none}.preview-button-container.no-image .upload-button{width:100%;min-width:140px;flex-grow:1;margin:0 auto}.no-image .preview-placeholder{display:none!important}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#d3d3d3;flex-shrink:0;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;background-position:center;background-size:146.165% 100%;background-repeat:no-repeat}.preview-wrapper.has-image .upload-preview{display:block;object-fit:contain;padding:2px}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#d3d3d3}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .empty-state{display:none}.upload-button{width:100%;height:40px;display:flex;padding:5px 4px;flex-direction:row;align-items:center;gap:4px;border-radius:12px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;flex-grow:0;justify-content:center;min-width:90px}.preview-wrapper:not(.has-image)+.upload-button{flex-grow:0}.upload-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.upload-icon{display:flex;align-items:center;justify-content:center}.upload-label{font-size:12px;font-weight:500;color:#344054}.delete-button{display:flex;width:24px;height:24px;padding:4px;justify-content:center;align-items:center;position:absolute;right:4px;top:4px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease;z-index:2}.delete-button svg{width:14px;height:14px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.upload-setting-wrapper.no-label .preview-button-container{grid-row:1}.preview-placeholder{display:flex;justify-content:center;align-items:center;width:91px;height:71px;border-radius:4px;background-color:#f2f4f7;flex-shrink:0}.preview-button-container:not(:has(.preview-wrapper.has-image)) .preview-placeholder{display:flex}.upload-setting-wrapper .error-message{color:#f04438;font-size:12px;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.4;margin-top:4px;margin-bottom:8px;padding:8px 12px;background-color:#fff4f4;border:1px solid #fecdca;border-radius:6px;display:none;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.upload-setting-wrapper .error-message:before{content:"⚠️";margin-right:6px}.preview-wrapper.loading{display:flex;align-items:center;justify-content:center;background-color:#f9fafb}.preview-wrapper.loading .upload-preview{display:none}.loading-spinner{width:29px;height:29px;display:flex;align-items:center;justify-content:center;animation:spin 1s linear infinite}.loading-spinner svg{width:100%;height:100%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.height-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.height-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.height-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.height-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.width-setting-wrapper{display:flex;align-items:center;justify-content:space-between;gap:2px}.width-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:120px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.width-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.width-setting .number-setting{width:100%}.select-api-container{display:grid;grid-template-columns:1fr;place-content:center;align-items:center;position:relative;width:100%}.select-api-button{width:100%;height:33px;min-height:33px;display:flex;align-items:center;justify-content:flex-start;padding:0 40px 0 16px;border-radius:8px;border:1px solid var(--color-border, #e4e7ec);background:#fff;cursor:pointer;color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:normal;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:40px!important}.select-api-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-api-button:focus{outline:none;border-color:#b6dfc8;box-shadow:0 0 0 4px #7f56d91a}.select-api-button .select-label{position:absolute;top:2px;color:#667085;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:400;line-height:normal;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%}.select-api-button .select-value{margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.select-api-button.loading{position:relative;color:#6e7891;background-color:#f9fafb;pointer-events:none;padding-left:36px!important}.select-api-button.loading:before{content:"";position:absolute;left:10px;top:25%;transform:translateY(-50%);width:16px;height:16px;border:2px solid #e4e7ec;border-top:2px solid #02CC59;border-radius:50%;animation:select-api-spin 1s linear infinite;z-index:2}.select-api-button.has-label.loading{padding-left:36px!important}.select-api-button.has-label.loading .select-value{padding-left:0}.select-api-button.has-label.loading:before{top:18px;left:10px}@keyframes select-api-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.select-api-button.error{border-color:#f04438;color:#f04438;background-color:#fff4f4}.select-api-options{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style-type:none;z-index:100;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid #e4e7ec;background:#fff;border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;transition:opacity .2s ease,transform .2s ease;opacity:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateY(-8px)}.select-api-options.open{display:flex;opacity:1;transform:translateY(0)}.select-api-option{padding:10px 12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#344054;border-radius:6px;transition:background-color .15s ease;font-size:14px}.select-api-option:hover{background:#f9fafb}.select-api-option.selected{background:#b6dfc8;color:#344054;font-weight:500}.select-api-option.disabled{opacity:.6;cursor:not-allowed;color:#6e7891}.select-api-radio{width:18px;height:18px;border-radius:50%;border:1.5px solid #e4e7ec;background:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;margin:0;cursor:pointer}.select-api-radio:checked{border-color:#02cc59;background:#fff;position:relative}.select-api-radio:checked:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;background:#02cc59;border-radius:50%}.svg-container{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;pointer-events:none}.svg-container .svg-select-api{stroke:#667085;transition:transform .3s ease;width:16px;height:16px}.svg-container.open .svg-select-api{transform:rotate(180deg)}.select-api-container .icon-container{display:none}.select-api-options::-webkit-scrollbar{width:6px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#e4e7ec;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb:hover{background:#d0d5dd}.select-api-option.empty-message{text-align:center;color:#6e7891;font-style:italic;cursor:default;justify-content:center}.select-api-option.empty-message:hover{background:transparent}.select-api-option:focus{outline:none;box-shadow:0 0 0 2px #b6dfc8}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.select-api-options.open{display:flex;animation:fadeIn .2s ease forwards}.select-api-button.has-label{height:48px}.toggle-setting-container{display:flex;justify-content:space-between;align-items:center;padding-left:3px;padding-right:3px;flex-wrap:wrap}.toggle-label{color:#344054;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:500;line-height:20px}.toggle-switch{position:relative;display:inline-block;width:36px;height:20px;padding:2px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e4e7ec;transition:.4s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-slider{background-color:#02cc59}input:focus+.toggle-slider{box-shadow:0 0 1px #02cc59}input:checked+.toggle-slider:before{transform:translate(16px)}.toggle-with-icon .toggle-label{display:flex;align-items:center;gap:8px}.toggle-icon{display:flex;align-items:center;justify-content:center;color:#667085}.toggle-description{color:#637381;width:100%;margin:8px 0 0;font-size:12px;line-height:16px}.toggle-setting-container.toggle-has-description{border:1px dashed #919EAB66;border-radius:12px;padding:12px 8px;box-sizing:border-box}.gap-settings-container{display:flex;flex-direction:column;gap:12px;width:100%}.gap-settings-title{font-size:14px;font-weight:500;color:#344054;margin-bottom:4px}.gap-input-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;width:100%}.gap-label-container{display:flex;flex-direction:row;align-items:center;gap:8px;flex:1}.gap-setting-icon{display:flex;align-items:center;justify-content:center;font-size:16px;color:#667085}.gap-setting-icon svg{width:16px;height:16px}.gap-input-label{font-size:13px;color:#667085}.gap-setting-inner-wrapper{position:relative;display:grid;grid-template-columns:1fr;place-content:center;align-items:center;width:120px}.gap-setting-input{width:100%;padding:8px;font-size:14px;border-radius:8px;color:#292b2e;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box}.suffix-wrapper{position:relative}.suffix-label{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}.gap-setting-input::-webkit-outer-spin-button,.gap-setting-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gap-setting-input[type=number]{-moz-appearance:textfield}.margin-bottom-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-bottom-wrapper .setting-icon svg{width:18px;height:19px}.margin-bottom-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-bottom-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.margin-top-wrapper{display:grid;grid-template-columns:1fr auto;gap:auto}.margin-top-wrapper .setting-icon svg{width:18px;height:19px}.margin-top-wrapper .number-setting-input{background:#fff;min-width:95px;width:95px;padding:8px;border-radius:8px;border:1px solid #D0D5DD;font-size:14px;color:#292b2e}.margin-top-wrapper .setting-title{color:#667085;font-family:Inter,sans-serif;font-size:12px;font-weight:400;line-height:18px}.simple-multi-language-wrapper{display:flex;flex-direction:column;width:100%}.simple-multi-language-title{color:#000;font-weight:700;font-size:14px;margin-bottom:8px}.simple-multi-language-content{display:flex;flex-direction:column;gap:12px;width:100%}.simple-multi-language-row{display:flex;flex-direction:column;gap:6px}.simple-language-label{font-size:12px;font-weight:500;color:var(--color-input-text);text-transform:uppercase;letter-spacing:.5px}.simple-language-textarea{width:100%;min-height:0;padding:12px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg);font-family:inherit;resize:none;line-height:1.4;overflow-y:hidden;box-sizing:border-box}.simple-language-textarea:focus{outline:none;border-color:var(--color-primary, #007bff);box-shadow:0 0 0 2px #007bff40}.simple-language-textarea::placeholder{color:var(--color-text-muted, #6c757d);white-space:nowrap;text-overflow:ellipsis}.simple-language-textarea:placeholder-shown{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 640px){.simple-multi-language-row{gap:4px}.simple-language-label{font-size:11px}.simple-language-textarea{min-height:0;padding:8px;font-size:13px}}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}.settings-container,.main-settings-container,[data-settings-container]{height:auto;min-height:auto;overflow:visible;flex-shrink:0}.container,.wrapper,.main-wrapper{height:auto!important;min-height:auto!important;max-height:none!important;overflow:visible!important}:root{--sg-spacing-0: 16px;--sg-spacing-1: 12px;--sg-spacing-2: 8px;--sg-spacing-3: 6px;--sg-border-0: #eaecf0;--sg-border-1: #d0d5dd;--sg-border-2: #e5e7eb;--sg-border-3: #f2f4f7;--sg-bg-0: #fff;--sg-bg-1: #fff;--sg-bg-2: #fff;--sg-bg-3: #fff;--sg-shadow-0: 0px 1px 3px rgba(16, 24, 40, .1), 0px 1px 2px rgba(16, 24, 40, .06);--sg-shadow-1: 0px 1px 2px rgba(16, 24, 40, .05);--sg-shadow-2: 0px 1px 1px rgba(16, 24, 40, .04);--sg-shadow-3: none}.setting-group{display:flex;flex-direction:column;width:100%;gap:8px;border-radius:8px;margin:0 auto;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;max-width:100%;box-sizing:border-box}.setting-group[data-nesting-level="0"]{padding:var(--sg-spacing-0);border:1px solid var(--sg-border-0);background:var(--sg-bg-0);box-shadow:var(--sg-shadow-0);border-radius:8px}.setting-group[data-nesting-level="1"]{padding:var(--sg-spacing-1);border:1px solid var(--sg-border-1);background:var(--sg-bg-1);box-shadow:var(--sg-shadow-1);border-radius:6px}.setting-group[data-nesting-level="2"]{padding:var(--sg-spacing-2);border:1px solid var(--sg-border-2);background:var(--sg-bg-2);box-shadow:var(--sg-shadow-2);border-radius:4px}.setting-group[data-nesting-level="3"],.setting-group[data-nesting-level="4"],.setting-group[data-nesting-level="5"]{padding:var(--sg-spacing-3);border:1px solid var(--sg-border-3);background:var(--sg-bg-3);box-shadow:var(--sg-shadow-3);border-radius:4px}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group[data-nesting-level="0"] .setting-group-content{padding:0 8px 8px;gap:8px}.setting-group[data-nesting-level="1"] .setting-group-content{padding:0 8px 8px;gap:6px}.setting-group[data-nesting-level="2"] .setting-group-content{padding:0 8px 8px;gap:4px}.setting-group[data-nesting-level="3"] .setting-group-content,.setting-group[data-nesting-level="4"] .setting-group-content,.setting-group[data-nesting-level="5"] .setting-group-content{padding:0 6px 6px;gap:3px}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title h3{color:var(--Gray-800, #1d2939);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;font-weight:500;line-height:20px;margin:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group[data-nesting-level="1"] .setting-group-title h3{font-size:13px;font-weight:500}.setting-group[data-nesting-level="2"] .setting-group-title h3{font-size:12px;font-weight:500}.setting-group[data-nesting-level="3"] .setting-group-title h3,.setting-group[data-nesting-level="4"] .setting-group-title h3,.setting-group[data-nesting-level="5"] .setting-group-title h3{font-size:11px;font-weight:500}.setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;opacity:1;overflow:visible;max-width:100%;box-sizing:border-box}.setting-group-content.collapsed{opacity:0;margin:0;padding:0;pointer-events:none;display:none}.setting-group.main-group{padding:16px;border:none;border-bottom:1px solid var(--Border-default, #d5dce5);box-shadow:none;margin-top:4px;background:#f8f8f8;border-radius:8px;width:100%;position:relative;margin-bottom:8px;max-height:none;overflow:visible;max-width:100%;box-sizing:border-box;height:auto;min-height:auto;flex-shrink:0}.setting-group.main-group.collapsed{padding:0;background:transparent!important;border:none;box-shadow:none;margin:0}.setting-group.main-group.collapsed .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;margin-bottom:8px;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group.main-group .setting-group-title h3{color:#344054;font-family:Satoshi;font-size:14px;font-weight:700;line-height:20px}.setting-group-content.main-content{width:100%;background:#f8f8f8;border:0;box-shadow:none;padding:0;height:auto;min-height:auto;overflow:visible;flex-shrink:0}.setting-divider{height:1px;width:100%;background-color:#f2f4f7;margin:4px 0}.setting-group-content>*:last-child{margin-bottom:0}.setting-group.active{border-color:#d6bbfb;box-shadow:0 0 0 4px #7f56d91a}.setting-group-empty{color:#667085;font-size:13px;font-style:italic;padding:12px 0;text-align:center}.setting-group-title.collapsed-view{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;height:36px;border-radius:8px;border:1px solid var(--Gray-200, #eaecf0);background:var(--Base-White, #fff);margin-bottom:0;position:relative;overflow:hidden;cursor:pointer}.setting-group.main-group .setting-group-title.collapsed-view{height:55px;background:#f8f8f8;border:none;border-bottom:1px solid var(--Border-default, #d5dce5)}.setting-group:not(.main-group) .setting-group-title.collapsed-view{height:36px;background:#fff;border:1px solid var(--Gray-200, #eaecf0);padding:14px}.setting-group-title .title-section{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.setting-group-title .group-icon{display:flex;justify-content:center;align-items:center;color:var(--Gray-500, #667085);flex-shrink:0;width:20px;height:20px}.setting-group-title.collapsed-view h3{color:#344054;font-family:Satoshi;font-size:14px;font-weight:700;line-height:20px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.setting-group-title.collapsed-view .group-badge{display:flex;padding:2px 8px;justify-content:center;align-items:center;border-radius:16px;background:var(--Gray-100, #f2f4f7);color:var(--Gray-700, #344054);font-size:12px;font-weight:500;line-height:18px;margin-left:8px}.setting-group-title .actions-section{display:flex;align-items:center;gap:8px;margin-left:12px}.setting-group-title.collapsed-view .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;color:var(--Gray-500, #667085)}.setting-group-title .setting-group-arrow.rotated{transform:rotate(0)}.setting-group-title.collapsed-view .info-marker{width:16px;height:16px;color:var(--Gray-400, #98a2b3);cursor:help}.setting-group-description{color:#667085;font-size:13px;margin-bottom:8px;line-height:1.4}@media (max-width: 768px){.setting-group-title.collapsed-view{padding:10px 12px}.setting-group-title .title-section{gap:8px}.setting-group-title.collapsed-view .group-badge{display:none}}@media (max-width: 480px){.setting-group-title.collapsed-view h3{font-size:13px}.setting-group-title.collapsed-view .setting-group-arrow{width:24px;height:24px}.setting-group-title.collapsed-view{padding:0 10px}}.setting-group-title.collapsed-view.striped:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--Primary-100, #f4ebff);border-radius:4px 0 0 4px}.setting-group.custom-container{border:none;box-shadow:none;margin:4px 0;padding:0;background:transparent}.setting-group.custom-container>.setting-group-title{display:none}.sg-add-button-bottom{display:flex;height:30px;min-width:64px;padding:6px 12px;justify-content:center;align-items:center;flex:1 0 0;border:1px solid rgba(145,158,171,.32);border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;line-height:20px;letter-spacing:.01em;text-align:center}.sg-add-button-bottom:hover{background:#eee}.setting-group.custom-container .setting-group-content{padding:0}.custom_class{border:0!important;box-shadow:none!important;margin:4px 0!important}.custom_class>.setting-group-title{display:none!important}.custom_class .setting-group-content{padding:0!important}.setting-group-title:focus-visible{outline:2px solid #02cc59;outline-offset:2px}.setting-group::-webkit-scrollbar,.setting-group-content::-webkit-scrollbar{width:8px;height:8px}.setting-group::-webkit-scrollbar-track,.setting-group-content::-webkit-scrollbar-track{background:#f0f2f4;border-radius:4px}.setting-group::-webkit-scrollbar-thumb,.setting-group-content::-webkit-scrollbar-thumb{background-color:#c2c9d6;border-radius:4px;border:2px solid transparent;background-clip:content-box}.setting-group::-webkit-scrollbar-thumb:hover,.setting-group-content::-webkit-scrollbar-thumb:hover{background-color:#98a2b3}.setting-group,.setting-group-content{scrollbar-width:thin;scrollbar-color:#c2c9d6 #f0f2f4}.tabs-settings-container{display:flex;flex-direction:column;width:100%;border-radius:8px;background:transparent;overflow:hidden;position:relative;z-index:1;max-width:100%;box-sizing:border-box}.tabs-settings-container.main-group{background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px #1018280d}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;align-self:stretch;flex-shrink:0;background:#f1f3f2;position:relative;z-index:1;border-radius:400px;margin-bottom:8px}.tabs-header.main-header{background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:8px;margin-bottom:0}.tab-button{display:flex;padding:4px 12px;justify-content:center;align-items:center;background-color:transparent;gap:8px;flex:1 0 0;border-radius:400px;color:#000000b3;font-family:Satoshi,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:12px;font-style:normal;font-weight:500;line-height:20px;border:1px solid transparent;box-shadow:0 0 #10182800;position:relative;z-index:1;cursor:pointer;transition:all .2s ease;outline:none}.tab-button:active{box-shadow:0 1px 2px -1px #10182805}.tab-button.active{color:#000;font-weight:700;border-radius:400px;background:#fff;box-shadow:0 4px 8px -2px #1018280a}.tab-button.active:active{box-shadow:0 2px 4px -1px #1018280a}.tab-button:focus-visible{outline:2px solid #7c3aed;outline-offset:2px}.tab-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.tab-icon svg{width:100%;height:100%}.tab-content{position:relative;overflow:hidden;width:100%;z-index:1;margin-top:8px;max-width:100%;box-sizing:border-box;animation:fadeIn .2s ease-in-out}.tab-panel{display:grid;gap:8px;position:absolute;width:100%;opacity:0;pointer-events:none;overflow:hidden;z-index:1;max-width:100%;box-sizing:border-box}.tab-panel.active{opacity:1;pointer-events:auto;position:relative;overflow:hidden;z-index:1;max-width:100%;box-sizing:border-box}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.tabs-header{padding:3px}.tab-button{padding:3px 8px;font-size:11px}}@media (max-width: 480px){.tab-button{padding:2px 6px;font-size:10px}.tab-icon{width:14px;height:14px}}.tab-content>.setting-group{margin-bottom:12px}.tab-content>.setting-group:last-child{margin-bottom:0}.tabs-settings-container.main-group .setting-group-content{border-top:none;border-radius:0 0 8px 8px}.setting-group.main-group.collapsed .tabs-header,.setting-group.main-group.collapsed .setting-group,.setting-group .setting-group.collapsed .tabs-header,.tabs-settings-container.collapsed .tabs-header,.tabs-settings-container.collapsed .tab-content{display:none}:root{--color-border: #d5dce5;--color-bg: #f8f8f8;--color-border-secondary: #eaecf0;--color-text: #667085;--color-title: #344054;--color-input-text: #292b2e;--color-white: #fff;--color-black: #000;--color-divider: #dcdcdc;--color-btn-text: #4b4b4b;--color-bg-icon: #f2f4f7}*{padding:0;margin:0;border:none}*,*:before,*:after{box-sizing:border-box}a,a:link,a:visited,a:hover{text-decoration:none}body{font-family:Satoshi,sans-serif;font-weight:400;font-size:12px;line-height:18px}aside,nav,footer,header,section,main{display:block}h1,h2,h3,h4,h5,h6,p{font-size:inherit;font-weight:inherit}ul,ul li{list-style:none}img{vertical-align:top}img,svg{max-width:100%;height:auto}address{font-style:normal}input::-ms-clear{display:none}button,input[type=submit]{display:inline-block;box-shadow:none;background-color:transparent;background:none;cursor:pointer}input:focus,input:active,button:focus,button:active{outline:none}button::-moz-focus-inner{padding:0;border:0}label{cursor:pointer}legend{display:block}

package/dist/settings/toggle-settings/toggleSettings.d.ts

@@ -10,6 +10,7 @@ export interface ToggleSettingProps extends SettingProps<string> {
     options?: ToggleValue[];
     activeColor?: string;
     inactiveColor?: string;
+    description?: string;
     detectChange?: (value: string | undefined) => void;
 }
 export declare class Toggle extends Setting<string, ToggleSettingProps> {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "builder-settings-types",
   "description": "builder settings",
-  "version": "0.0.252",
+  "version": "0.0.254",
   "type": "module",
   "main": "dist/builder-settings-types.cjs.js",
   "module": "dist/builder-settings-types.es.js",