builder-settings-types 0.0.93 → 0.0.94

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let I=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=A[e[c]&63];return t};function R(c,t){for(const e in c)if(c.hasOwnProperty(e)){const i=c[e];t(e,i)}}const x=class x{constructor(t){this.elementRef=null,this.isHidden=!1,this.id=t.id||I(),this.title=t.title,this.settings=t.settings,this.description=t.description,this.icon=t.icon,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.hideCondition=t.hideCondition,Object.assign(this,t.settings)}static hide(){this.hiddenElements.forEach(t=>{t&&(t.style.display="none")})}static show(){this.hiddenElements.forEach(t=>{t&&(t.style.display="")})}setOnChange(t){return this.onChange=t,R(this.settings,(e,i)=>{i.setOnChange(n=>{t(n),this.updateVisibility()})}),this}hide(){this.elementRef&&(this.elementRef.style.display="none",this.isHidden=!0)}show(){this.elementRef&&(this.elementRef.style.display="",this.isHidden=!1)}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const n=this.settings[i];n instanceof x?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof x?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,x.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group");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");if(i.className="title-section",this.icon){const r=document.createElement("span");r.className="group-icon",r.innerHTML=this.icon,i.appendChild(r)}const n=document.createElement("h3");n.textContent=this.title,i.appendChild(n);const s=document.createElement("div");if(s.className="actions-section",this.description&&this.isCollapsed){const r=document.createElement("span");r.className="info-marker",r.innerHTML=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";let I=(c=21)=>{let t="",e=crypto.getRandomValues(new Uint8Array(c|=0));for(;c--;)t+=A[e[c]&63];return t};function B(c,t){for(const e in c)if(c.hasOwnProperty(e)){const i=c[e];t(e,i)}}const x=class x{constructor(t){this.elementRef=null,this.isHidden=!1,this.custom=!1,this.id=t.id||I(),this.title=t.title,this.settings=t.settings,this.description=t.description,this.icon=t.icon,this.isCollapsed=t.collapsed??!1,this.isMain=t.main??!1,this.custom=t.custom??!1,this.hideCondition=t.hideCondition,this.onBlur=t.onBlur,Object.assign(this,t.settings)}static hide(){this.hiddenElements.forEach(t=>{t&&(t.style.display="none")})}static show(){this.hiddenElements.forEach(t=>{t&&(t.style.display="")})}setOnChange(t){return this.onChange=t,B(this.settings,(e,i)=>{i.setOnChange(n=>{t(n),this.updateVisibility()})}),this}setOnBlur(t){return this.onBlur=t,this}hide(){this.elementRef&&(this.elementRef.style.display="none",this.isHidden=!0)}show(){this.elementRef&&(this.elementRef.style.display="",this.isHidden=!1)}getValues(t){if(t===void 0){const e={};for(const i in this.settings)if(this.settings.hasOwnProperty(i)){const n=this.settings[i];n instanceof x?e[i]=n.getValues():e[i]=n.value}return e}else{const e=this.settings[t];return e?e instanceof x?e.getValues():e.value:void 0}}draw(){const t=document.createElement("div");t.className="setting-group",t.id=`setting-group-${this.id}`,x.hiddenElements.add(t),this.hideCondition&&this.hideCondition()&&(t.style.display="none"),this.isMain&&t.classList.add("main-group");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");if(i.className="title-section",this.icon){const r=document.createElement("span");r.className="group-icon",r.innerHTML=this.icon,i.appendChild(r)}this.custom&&t.classList.add("custom_class");const n=document.createElement("h3");n.textContent=this.title,i.appendChild(n);const s=document.createElement("div");if(s.className="actions-section",this.description&&this.isCollapsed){const r=document.createElement("span");r.className="info-marker",r.innerHTML=`
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" 
             stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
@@ -12,7 +12,7 @@
                 <path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" 
                   stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
               </svg>
-            `,p.title=this.description,s.insertBefore(p,a)}}else{if(!r){const p=document.createElement("div");p.className="setting-group-description",p.textContent=this.description,o.insertBefore(p,o.firstChild)}u&&u.remove()}};if(e.onclick=l,e.onkeydown=r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),l())},Object.keys(this.settings).length>0){for(const r in this.settings)if(this.settings.hasOwnProperty(r)){const u=this.settings[r];o.appendChild(u.draw())}}else{const r=document.createElement("div");r.className="setting-group-empty",r.textContent="No settings in this group",o.appendChild(r)}return e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(o),this.elementRef=t,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"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}};x.hiddenElements=new Set;let v=x;function $(c){switch(c){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class m{constructor(t={}){this.props=t,this.id=t.id||I(),this.value=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const a=document.createElement("div");if(a.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);a.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);a.appendChild(o)}e.appendChild(a)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");this.inputEl=n,n.value=String(t.value||$(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"";const s=a=>{const o=a.target;let l=o.value;switch(t.inputType){case"number":l=Number(o.value);break;case"color":l=o.value;break;case"date":l=o.value;break;case"select":l=o.value;break;case"text":l=o.value;break;case"button":l=o.value;break;default:l=o.value}this.value=l,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)};return n.addEventListener("input",s),n.addEventListener("change",s),t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class y extends m{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 T="<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 S extends y{constructor(t){super({...t,icon:t.icon||T,title:t.title||"Color"}),this.inputType="color",this.detectChange=t.detectChange}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),n=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${n}`}rgbToHex(t){const[e,i,n]=t.split(",").map(a=>parseInt(a.trim()));if(isNaN(e)||isNaN(i)||isNaN(n))return"#000000";const s=a=>{const o=a.toString(16);return o.length===1?"0"+o:o};return`#${s(e)}${s(i)}${s(n)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||T),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const a=p=>{const g=p.value.split(",").map(O=>parseInt(O.trim()));if(g.length!==3||g.some(isNaN))return p.style.border="1px solid red",!1;const[d,C,f]=g,E=d>=0&&d<=255&&C>=0&&C<=255&&f>=0&&f<=255;return p.style.border=E?"":"1px solid red",E},o=document.createElement("div");o.className="color-preview",o.style.backgroundColor=this.value?`rgb(${this.value})`:"";const l=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),h=l.querySelector("input"),r=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),u=r.querySelector("input");return h.oninput=p=>{var d;let g=p.target.value.trim();a(h)&&(this.value=g,(d=this.onChange)==null||d.call(this,g),u.value=this.rgbToHex(g),o.style.backgroundColor=`rgb(${g})`)},u.oninput=p=>{var C,f;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(C=this.onChange)==null||C.call(this,d),(f=this.detectChange)==null||f.call(this,d),h.value=d,o.style.backgroundColor=`rgb(${d})`},u.onchange=p=>{var C,f;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(C=this.onChange)==null||C.call(this,d),(f=this.detectChange)==null||f.call(this,d),h.value=d,o.style.backgroundColor=`rgb(${d})`},s.appendChild(o),s.appendChild(r),s.appendChild(l),t.appendChild(e),t.appendChild(s),this.value&&(h.value=this.value,u.value=this.rgbToHex(this.value),o.style.backgroundColor=`rgb(${this.value})`),t}}class w extends m{constructor(t={}){super(t),this.inputType="number"}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let l=Number(s.value);l<a&&(l=a),l>o&&(l=o),s.value=String(l)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper");const i=e.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const n=document.createElement("span");return n.className="suffix-label",n.textContent=this.props.suffix,e.appendChild(n),e}}class L extends w{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||_,title:t.title||"Opacity"}),this.inputType="number"}}const _=`
+            `,p.title=this.description,s.insertBefore(p,a)}}else{if(!r){const p=document.createElement("div");p.className="setting-group-description",p.textContent=this.description,o.insertBefore(p,o.firstChild)}u&&u.remove()}};if(e.onclick=l,e.onkeydown=r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),l())},Object.keys(this.settings).length>0){for(const r in this.settings)if(this.settings.hasOwnProperty(r)){const u=this.settings[r];o.appendChild(u.draw())}}else{const r=document.createElement("div");r.className="setting-group-empty",r.textContent="No settings in this group",o.appendChild(r)}return e.appendChild(i),e.appendChild(s),t.appendChild(e),t.appendChild(o),this.elementRef=t,this.onBlur&&t.addEventListener("mouseleave",()=>{this.onBlur&&this.onBlur()}),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"))}updateVisibility(){this.elementRef&&this.hideCondition&&(this.elementRef.style.display=this.hideCondition()?"none":"")}toggle(){this.isHidden?this.show():this.hide()}};x.hiddenElements=new Set;let v=x;function $(c){switch(c){case"number":return 0;case"text":return"";case"select":return null;case"color":return"#000000";case"date":return new Date().toISOString().split("T")[0];case"button":return"";default:return""}}class m{constructor(t={}){this.props=t,this.id=t.id||I(),this.value=this.props.default,this.title=t.title||""}destroy(){throw new Error("Method not implemented.")}setOnChange(t){return this.onChange=t,this}setValue(t){this.value=t,this.inputEl&&(this.inputEl.value=String(t)),this.onChange&&this.onChange(t),this.props.detectChange&&this.props.detectChange(t)}createInput(t){t={...this.props.inputProps,...t};const e=document.createElement("div");if(e.className=t.wrapperClassName||"",t.title||t.icon){const a=document.createElement("div");if(a.className="icon-container",t.icon){const o=this.createIcon(t.icon,t.iconClassName);a.appendChild(o)}if(t.title){const o=this.createLabel(t.title,t.labelClassName);a.appendChild(o)}e.appendChild(a)}const i=document.createElement("div");i.className=t.wrapperClassName||"";const n=document.createElement("input");this.inputEl=n,n.value=String(t.value||$(t.inputType)),n.type=t.inputType,n.placeholder=t.placeholder||"",n.className=t.inputClassName||"";const s=a=>{const o=a.target;let l=o.value;switch(t.inputType){case"number":l=Number(o.value);break;case"color":l=o.value;break;case"date":l=o.value;break;case"select":l=o.value;break;case"text":l=o.value;break;case"button":l=o.value;break;default:l=o.value}this.value=l,this.onChange&&this.onChange(this.value),this.props.detectChange&&this.props.detectChange(this.value)};return n.addEventListener("input",s),n.addEventListener("change",s),t.inputCustomizer&&t.inputCustomizer(n),i.appendChild(n),e.appendChild(i),e}createLabel(t,e){const i=document.createElement("span");return i.textContent=t,i.className="input-label "+(e||""),i}createIcon(t,e){const i=document.createElement("span");return i.className="input-icon "+(e||""),i.innerHTML=t,i}}class y extends m{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 T="<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 S extends y{constructor(t){super({...t,icon:t.icon||T,title:t.title||"Color"}),this.inputType="color",this.detectChange=t.detectChange}hexToRgb(t){t=t.replace("#","");const e=parseInt(t.substring(0,2),16),i=parseInt(t.substring(2,4),16),n=parseInt(t.substring(4,6),16);return`${e}, ${i}, ${n}`}rgbToHex(t){const[e,i,n]=t.split(",").map(a=>parseInt(a.trim()));if(isNaN(e)||isNaN(i)||isNaN(n))return"#000000";const s=a=>{const o=a.toString(16);return o.length===1?"0"+o:o};return`#${s(e)}${s(i)}${s(n)}`}draw(){const t=document.createElement("div");t.className="color-setting-wrapper";const e=document.createElement("div");e.className="icon-container";const i=this.createIcon(this.props.icon||T),n=this.createLabel(this.title||"Color");e.appendChild(i),e.appendChild(n);const s=document.createElement("div");s.className="color-input-wrapper";const a=p=>{const g=p.value.split(",").map(O=>parseInt(O.trim()));if(g.length!==3||g.some(isNaN))return p.style.border="1px solid red",!1;const[d,C,f]=g,E=d>=0&&d<=255&&C>=0&&C<=255&&f>=0&&f<=255;return p.style.border=E?"":"1px solid red",E},o=document.createElement("div");o.className="color-preview",o.style.backgroundColor=this.value?`rgb(${this.value})`:"";const l=this.createInput({value:this.value,inputType:"text",inputClassName:"color-text-input"}),h=l.querySelector("input"),r=this.createInput({value:this.value?this.rgbToHex(this.value):"",inputType:this.inputType,inputClassName:"color-picker"}),u=r.querySelector("input");return h.oninput=p=>{var d;let g=p.target.value.trim();a(h)&&(this.value=g,(d=this.onChange)==null||d.call(this,g),u.value=this.rgbToHex(g),o.style.backgroundColor=`rgb(${g})`)},u.oninput=p=>{var C,f;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(C=this.onChange)==null||C.call(this,d),(f=this.detectChange)==null||f.call(this,d),h.value=d,o.style.backgroundColor=`rgb(${d})`},u.onchange=p=>{var C,f;const g=p.target.value,d=this.hexToRgb(g);this.value=d,(C=this.onChange)==null||C.call(this,d),(f=this.detectChange)==null||f.call(this,d),h.value=d,o.style.backgroundColor=`rgb(${d})`},s.appendChild(o),s.appendChild(r),s.appendChild(l),t.appendChild(e),t.appendChild(s),this.value&&(h.value=this.value,u.value=this.rgbToHex(this.value),o.style.backgroundColor=`rgb(${this.value})`),t}}class w extends m{constructor(t={}){super(t),this.inputType="number"}draw(){const t=s=>{this.props.minValue!==void 0&&(s.min=String(this.props.minValue)),this.props.maxValue!==void 0&&(s.max=String(this.props.maxValue)),this.props.className&&s.classList.add(this.props.className),s.addEventListener("input",()=>{const a=this.props.minValue??Number.MIN_SAFE_INTEGER,o=this.props.maxValue??Number.MAX_SAFE_INTEGER;let l=Number(s.value);l<a&&(l=a),l>o&&(l=o),s.value=String(l)})},e=this.createInput({value:this.value,inputType:this.inputType,title:this.props.title,icon:this.props.icon,inputClassName:"number-setting-input "+(this.props.inputClassName||""),wrapperClassName:"number-setting-wrapper "+(this.props.wrapperClassName||""),inputCustomizer:t});if(!this.props.suffix||this.props.suffix==="none")return e;e.classList.add("suffix-wrapper");const i=e.querySelector("input.number-setting-input");i&&(i.style.paddingRight="35px");const n=document.createElement("span");return n.className="suffix-label",n.textContent=this.props.suffix,e.appendChild(n),e}}class L extends w{constructor(t){super({...t,minValue:0,maxValue:100,icon:t.icon||_,title:t.title||"Opacity"}),this.inputType="number"}}const _=`
 			<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M3.69749 15.365C3.54749 15.365 3.40502 15.305 3.30002 15.2C1.77752 13.6775 0.9375 11.6525 0.9375 9.5C0.9375 5.0525 4.5525 1.4375 9 1.4375C11.1525 1.4375 13.1775 2.2775 14.7 3.8C14.805 3.905 14.865 4.0475 14.865 4.1975C14.865 4.3475 14.805 4.49 14.7 4.595L4.09502 15.2C3.99002 15.305 3.84749 15.365 3.69749 15.365ZM9 2.5625C5.175 2.5625 2.0625 5.675 2.0625 9.5C2.0625 11.165 2.64751 12.74 3.71251 13.9925L13.4925 4.2125C12.24 3.1475 10.665 2.5625 9 2.5625Z" fill="#667085"/>
   <path d="M9.00014 17.5623C6.84764 17.5623 4.82266 16.7223 3.30016 15.1998C3.19516 15.0948 3.13513 14.9523 3.13513 14.8023C3.13513 14.6523 3.19516 14.5098 3.30016 14.4048L13.9051 3.79984C14.1226 3.58234 14.4826 3.58234 14.7001 3.79984C16.2226 5.32234 17.0626 7.34734 17.0626 9.49984C17.0626 13.9473 13.4476 17.5623 9.00014 17.5623ZM4.50764 14.7873C5.76014 15.8523 7.33514 16.4373 9.00014 16.4373C12.8251 16.4373 15.9376 13.3248 15.9376 9.49984C15.9376 7.83484 15.3526 6.25984 14.2876 5.00734L4.50764 14.7873Z" fill="#667085"/>
@@ -24,7 +24,7 @@
   <svg xmlns="http://www.w3.org/2000/svg" class="svg-select" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down">
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
-`;class N extends m{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.clickOutsideListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const s=document.createElement("div");if(s.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);s.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);s.appendChild(a)}t.appendChild(s)}else{const s=document.createElement("div");t.appendChild(s)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var s,a;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((s,a)=>{const o=this.createOption(s,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=G,t.appendChild(n),this.optionsListEl=i,this.svgContainer=n,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{this._options.push(...s),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=s=>{var a,o;this.isOpen&&!t.contains(s.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var s,a,o;const n=this._options[e];n&&(this.value=n.value,(s=this.onChange)==null||s.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=n.name,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((h,r)=>{r===e?h.classList.add("selected"):h.classList.remove("selected")}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);i.onclick=n=>{this.buttonEl&&this.selectOption(n,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),super.destroy()}}class B extends m{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
+`;class N extends m{constructor(t={}){if(super(t),this.inputType="select",this._options=[],this.isOpen=!1,this.selectedOptionIndex=null,this.optionsListEl=null,this.svgContainer=null,this.buttonEl=null,this.isLoading=!1,this.container=null,this.clickOutsideListener=null,t.options&&(this._options=[...t.options]),t.getOptions&&this._options.push(...t.getOptions()),t.getOptionsAsync&&(this.isLoading=!0),this.value!==void 0){const e=this._options.findIndex(i=>i.value===this.value);e>=0&&(this.selectedOptionIndex=e)}}createOption(t,e){const i=document.createElement("li");return i.classList.add("select-option"),i.textContent=t.name,i.dataset.index=String(e),this.selectedOptionIndex===e&&i.classList.add("selected"),i}draw(){const t=document.createElement("div");if(t.classList.add("select-container"),this.container=t,this.props.icon||this.props.title){const s=document.createElement("div");if(s.className="icon-container",this.props.icon){const a=this.createIcon(this.props.icon);s.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);s.appendChild(a)}t.appendChild(s)}else{const s=document.createElement("div");t.appendChild(s)}const e=document.createElement("div");e.classList.add("select-button"),this.isLoading?e.classList.add("loading"):e.textContent=this.selectedOptionIndex!==null?this._options[this.selectedOptionIndex].name:this.props.placeholder||"Select an option",e.onclick=()=>{var s,a;this.isLoading||(this.isOpen=!this.isOpen,(s=this.optionsListEl)==null||s.classList.toggle("open",this.isOpen),(a=this.svgContainer)==null||a.classList.toggle("open",this.isOpen))},t.appendChild(e),this.buttonEl=e;const i=document.createElement("ul");i.classList.add("select-options"),this._options.forEach((s,a)=>{const o=this.createOption(s,a);o.onclick=l=>this.selectOption(l,a,e),i.appendChild(o)}),t.appendChild(i);const n=document.createElement("div");return n.classList.add("svg-container"),n.innerHTML=G,t.appendChild(n),this.optionsListEl=i,this.svgContainer=n,this.props.getOptionsAsync&&(this.isLoading=!0,this.updateButtonText(),this.props.getOptionsAsync().then(s=>{this._options.push(...s),this.isLoading=!1,this.updateOptionsList(),this.updateButtonText()}).catch(s=>{console.error("Failed to fetch async options:",s),this.isLoading=!1,this.updateButtonText("Failed to load options")})),this.clickOutsideListener&&document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=s=>{var a,o;this.isOpen&&!t.contains(s.target)&&(this.isOpen=!1,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"))},document.addEventListener("click",this.clickOutsideListener),t}selectOption(t,e,i){var s,a,o;const n=this._options[e];n&&(this.value=n.value,(s=this.onChange)==null||s.call(this,this.value),this.selectedOptionIndex=e,this.isOpen=!1,i.textContent=n.name,(a=this.optionsListEl)==null||a.classList.remove("open"),(o=this.svgContainer)==null||o.classList.remove("open"),this.optionsListEl&&this.optionsListEl.querySelectorAll(".select-option").forEach((h,r)=>{r===e?h.classList.add("selected"):h.classList.remove("selected")}))}updateOptionsList(){if(this.optionsListEl){if(this.optionsListEl.innerHTML="",this._options.length===0){const t=document.createElement("li");t.classList.add("select-option","empty-message"),t.textContent="No options available",this.optionsListEl.appendChild(t);return}this._options.forEach((t,e)=>{const i=this.createOption(t,e);i.onclick=n=>{this.buttonEl&&this.selectOption(n,e,this.buttonEl)},this.optionsListEl.appendChild(i)})}}updateButtonText(t){if(!this.buttonEl)return;if(this.isLoading){this.buttonEl.classList.add("loading"),this.buttonEl.textContent=this.props.loadingText||"Loading options...";return}this.buttonEl.classList.remove("loading","error");let e;t?((t.includes("Failed")||t.includes("Error"))&&this.buttonEl.classList.add("error"),e=t):this.selectedOptionIndex!==null&&this._options[this.selectedOptionIndex]?e=this._options[this.selectedOptionIndex].name:e=this.props.placeholder||"Select an option",this.buttonEl.textContent=e}destroy(){this.clickOutsideListener&&(document.removeEventListener("click",this.clickOutsideListener),this.clickOutsideListener=null),super.destroy()}}class R extends m{constructor(t={}){super(t),this.inputType="button",this.value||(this.value="center")}draw(){const t=document.createElement("div");t.className="align-setting-wrapper";const e=document.createElement("label");e.className="align-setting-label",e.textContent=this.title||"Align",t.appendChild(e);const i=document.createElement("div");return i.className="align-options-container",[{name:"left",icon:`
           <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
             <path d="M10.5 7.5C11.1989 7.5 11.5484 7.5 11.824 7.38582C12.1916 7.23358 12.4836 6.94157 12.6358 6.57402C12.75 6.29837 12.75 5.94891 12.75 5.25C12.75 4.55109 12.75 4.20163 12.6358 3.92598C12.4836 3.55843 12.1916 3.26642 11.824 3.11418C11.5484 3 11.1989 3 10.5 3L4.5 3C3.80109 3 3.45163 3 3.17598 3.11418C2.80843 3.26642 2.51642 3.55843 2.36418 3.92597C2.25 4.20163 2.25 4.55109 2.25 5.25C2.25 5.94891 2.25 6.29837 2.36418 6.57402C2.51642 6.94157 2.80843 7.23358 3.17598 7.38582C3.45163 7.5 3.80109 7.5 4.5 7.5L10.5 7.5Z"
                   stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
@@ -112,7 +112,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
   <path d="M6 5.75H12M9 5.75V13.25M5.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.75H5.85C4.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.35V12.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.25Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
-`;class rt extends v{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new S({default:t.colorDefault??"0, 0, 30"}),opacity:new L({default:t.colorOpacityDefault??100}),fontFamily:new N({title:"Font",icon:at,default:t.fontFamilyDefault??"Satoshi",options:t.fontFamilyOptions??[{name:"Satoshi",value:"Satoshi"},{name:"Arial",value:"Arial"},{name:"Roboto",value:"Roboto"}],getOptions:t.fontFamilyGetOptions,getOptionsAsync:t.fontFamilyGetOptionsAsync}),fontWeight:new N({title:"Weight",icon:ot,default:t.fontWeightDefault??"400",options:t.fontWeightOptions??[{name:"Regular",value:"400"},{name:"Medium",value:"500"},{name:"Bold",value:"600"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new w({title:"Size",icon:lt,default:t.fontSizeDefault??12,suffix:"px"}),align:new B({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",n=this.settings.fontWeight.value??"bold",s=this.settings.fontSize.value??12,a=this.settings.align.value??"left";return`
+`;class rt extends v{constructor(t={}){super({title:t.title||"Typography",collapsed:t.collapsed,hideCondition:t.hideCondition,settings:{color:new S({default:t.colorDefault??"0, 0, 30"}),opacity:new L({default:t.colorOpacityDefault??100}),fontFamily:new N({title:"Font",icon:at,default:t.fontFamilyDefault??"Satoshi",options:t.fontFamilyOptions??[{name:"Satoshi",value:"Satoshi"},{name:"Arial",value:"Arial"},{name:"Roboto",value:"Roboto"}],getOptions:t.fontFamilyGetOptions,getOptionsAsync:t.fontFamilyGetOptionsAsync}),fontWeight:new N({title:"Weight",icon:ot,default:t.fontWeightDefault??"400",options:t.fontWeightOptions??[{name:"Regular",value:"400"},{name:"Medium",value:"500"},{name:"Bold",value:"600"}],getOptions:t.fontWeightGetOptions,getOptionsAsync:t.fontWeightGetOptionsAsync}),fontSize:new w({title:"Size",icon:lt,default:t.fontSizeDefault??12,suffix:"px"}),align:new R({title:"Align",default:t.alignDefault??"center"})}})}getCssCode(){const t=this.settings.color.value??"#000000",e=this.settings.opacity.value??100,i=this.settings.fontFamily.value??"Satoshi",n=this.settings.fontWeight.value??"bold",s=this.settings.fontSize.value??12,a=this.settings.align.value??"left";return`
 				color: ${t};
 				opacity: ${e/100};  
 				font-family: ${i};
@@ -161,4 +161,4 @@
       `:`
         background-color: ${i};
         opacity: ${n/100};
-      `}}exports.AlignSetting=B;exports.BackgroundSettingSet=Ct;exports.BorderSettingSet=nt;exports.ButtonSetting=j;exports.ColorSetting=S;exports.DimensionSetting=q;exports.GapSetting=tt;exports.HeaderTypographySettingSet=rt;exports.HeightSetting=D;exports.MarginSettingGroup=ht;exports.NumberSetting=w;exports.OpacitySetting=L;exports.SelectApiSettings=Q;exports.SelectSetting=N;exports.Setting=m;exports.SettingGroup=v;exports.StringSetting=y;exports.TabsContainerGroup=mt;exports.TabsSettings=et;exports.Toggle=Y;exports.UploadSetting=W;exports.WidthSetting=J;exports.iterateSettings=R;
+      `}}exports.AlignSetting=R;exports.BackgroundSettingSet=Ct;exports.BorderSettingSet=nt;exports.ButtonSetting=j;exports.ColorSetting=S;exports.DimensionSetting=q;exports.GapSetting=tt;exports.HeaderTypographySettingSet=rt;exports.HeightSetting=D;exports.MarginSettingGroup=ht;exports.NumberSetting=w;exports.OpacitySetting=L;exports.SelectApiSettings=Q;exports.SelectSetting=N;exports.Setting=m;exports.SettingGroup=v;exports.StringSetting=y;exports.TabsContainerGroup=mt;exports.TabsSettings=et;exports.Toggle=Y;exports.UploadSetting=W;exports.WidthSetting=J;exports.iterateSettings=B;

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

@@ -1,11 +1,11 @@
-const R = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+const B = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
 let I = (c = 21) => {
   let t = "", e = crypto.getRandomValues(new Uint8Array(c |= 0));
   for (; c--; )
-    t += R[e[c] & 63];
+    t += B[e[c] & 63];
   return t;
 };
-function B(c, t) {
+function R(c, t) {
   for (const e in c)
     if (c.hasOwnProperty(e)) {
       const i = c[e];
@@ -14,7 +14,7 @@ function B(c, t) {
 }
 const x = class x {
   constructor(t) {
-    this.elementRef = null, this.isHidden = !1, this.id = t.id || I(), this.title = t.title, this.settings = t.settings, this.description = t.description, this.icon = t.icon, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.hideCondition = t.hideCondition, Object.assign(this, t.settings);
+    this.elementRef = null, this.isHidden = !1, this.custom = !1, this.id = t.id || I(), this.title = t.title, this.settings = t.settings, this.description = t.description, this.icon = t.icon, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.hideCondition = t.hideCondition, this.onBlur = t.onBlur, Object.assign(this, t.settings);
   }
   static hide() {
     this.hiddenElements.forEach((t) => {
@@ -27,12 +27,15 @@ const x = class x {
     });
   }
   setOnChange(t) {
-    return this.onChange = t, B(this.settings, (e, i) => {
+    return this.onChange = t, R(this.settings, (e, i) => {
       i.setOnChange((n) => {
         t(n), this.updateVisibility();
       });
     }), this;
   }
+  setOnBlur(t) {
+    return this.onBlur = t, this;
+  }
   hide() {
     this.elementRef && (this.elementRef.style.display = "none", this.isHidden = !0);
   }
@@ -63,20 +66,21 @@ const x = class x {
     ), e.setAttribute("tabindex", "0");
     const i = document.createElement("div");
     if (i.className = "title-section", this.icon) {
-      const r = document.createElement("span");
-      r.className = "group-icon", r.innerHTML = this.icon, i.appendChild(r);
+      const h = document.createElement("span");
+      h.className = "group-icon", h.innerHTML = this.icon, i.appendChild(h);
     }
+    this.custom && t.classList.add("custom_class");
     const n = document.createElement("h3");
     n.textContent = this.title, i.appendChild(n);
     const s = document.createElement("div");
     if (s.className = "actions-section", this.description && this.isCollapsed) {
-      const r = document.createElement("span");
-      r.className = "info-marker", r.innerHTML = `
+      const h = document.createElement("span");
+      h.className = "info-marker", h.innerHTML = `
         <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path d="M8 5.33333V8M8 10.6667H8.00667M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z" 
             stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
-      `, r.title = this.description, s.appendChild(r);
+      `, h.title = this.description, s.appendChild(h);
     }
     const a = document.createElement("span");
     a.className = "setting-group-arrow", a.innerHTML = `
@@ -86,20 +90,20 @@ const x = class x {
     `, this.isCollapsed && a.classList.add("rotated"), s.appendChild(a);
     const o = document.createElement("div");
     if (o.className = "setting-group-content", this.isCollapsed && (o.classList.add("collapsed"), e.classList.add("collapsed-view"), a.classList.add("rotated"), t.classList.add("collapsed")), this.isMain && o.classList.add("main-content"), this.description && !this.isCollapsed) {
-      const r = document.createElement("div");
-      r.className = "setting-group-description", r.textContent = this.description, o.appendChild(r);
+      const h = document.createElement("div");
+      h.className = "setting-group-description", h.textContent = this.description, o.appendChild(h);
     }
     const l = () => {
       this.isCollapsed = !this.isCollapsed, o.classList.toggle("collapsed"), e.classList.toggle("collapsed-view"), a.classList.toggle("rotated"), t.classList.toggle("collapsed", this.isCollapsed), e.setAttribute(
         "aria-expanded",
         (!this.isCollapsed).toString()
       );
-      const r = o.querySelector(
+      const h = o.querySelector(
         ".setting-group-description"
       ), u = s.querySelector(".info-marker");
       if (this.description)
         if (this.isCollapsed) {
-          if (r && r.remove(), !u) {
+          if (h && h.remove(), !u) {
             const p = document.createElement("span");
             p.className = "info-marker", p.innerHTML = `
               <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -109,7 +113,7 @@ const x = class x {
             `, p.title = this.description, s.insertBefore(p, a);
           }
         } else {
-          if (!r) {
+          if (!h) {
             const p = document.createElement("div");
             p.className = "setting-group-description", p.textContent = this.description, o.insertBefore(
               p,
@@ -119,19 +123,21 @@ const x = class x {
           u && u.remove();
         }
     };
-    if (e.onclick = l, e.onkeydown = (r) => {
-      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), l());
+    if (e.onclick = l, e.onkeydown = (h) => {
+      (h.key === "Enter" || h.key === " ") && (h.preventDefault(), l());
     }, Object.keys(this.settings).length > 0) {
-      for (const r in this.settings)
-        if (this.settings.hasOwnProperty(r)) {
-          const u = this.settings[r];
+      for (const h in this.settings)
+        if (this.settings.hasOwnProperty(h)) {
+          const u = this.settings[h];
           o.appendChild(u.draw());
         }
     } else {
-      const r = document.createElement("div");
-      r.className = "setting-group-empty", r.textContent = "No settings in this group", o.appendChild(r);
+      const h = document.createElement("div");
+      h.className = "setting-group-empty", h.textContent = "No settings in this group", o.appendChild(h);
     }
-    return e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(o), this.elementRef = t, t;
+    return e.appendChild(i), e.appendChild(s), t.appendChild(e), t.appendChild(o), this.elementRef = t, this.onBlur && t.addEventListener("mouseleave", () => {
+      this.onBlur && this.onBlur();
+    }), t;
   }
   collapse() {
     if (!this.elementRef || this.isCollapsed) return;
@@ -312,24 +318,24 @@ class S extends H {
       value: this.value,
       inputType: "text",
       inputClassName: "color-text-input"
-    }), h = l.querySelector("input"), r = this.createInput({
+    }), r = l.querySelector("input"), h = this.createInput({
       value: this.value ? this.rgbToHex(this.value) : "",
       inputType: this.inputType,
       inputClassName: "color-picker"
-    }), u = r.querySelector("input");
-    return h.oninput = (p) => {
+    }), u = h.querySelector("input");
+    return r.oninput = (p) => {
       var d;
       let g = p.target.value.trim();
-      a(h) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), o.style.backgroundColor = `rgb(${g})`);
+      a(r) && (this.value = g, (d = this.onChange) == null || d.call(this, g), u.value = this.rgbToHex(g), o.style.backgroundColor = `rgb(${g})`);
     }, u.oninput = (p) => {
       var m, f;
       const g = p.target.value, d = this.hexToRgb(g);
-      this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), h.value = d, o.style.backgroundColor = `rgb(${d})`;
+      this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), r.value = d, o.style.backgroundColor = `rgb(${d})`;
     }, u.onchange = (p) => {
       var m, f;
       const g = p.target.value, d = this.hexToRgb(g);
-      this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), h.value = d, o.style.backgroundColor = `rgb(${d})`;
-    }, s.appendChild(o), s.appendChild(r), s.appendChild(l), t.appendChild(e), t.appendChild(s), this.value && (h.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
+      this.value = d, (m = this.onChange) == null || m.call(this, d), (f = this.detectChange) == null || f.call(this, d), r.value = d, o.style.backgroundColor = `rgb(${d})`;
+    }, s.appendChild(o), s.appendChild(h), s.appendChild(l), t.appendChild(e), t.appendChild(s), this.value && (r.value = this.value, u.value = this.rgbToHex(this.value), o.style.backgroundColor = `rgb(${this.value})`), t;
   }
 }
 class w extends C {
@@ -438,8 +444,8 @@ class T extends C {
   selectOption(t, e, i) {
     var s, a, o;
     const n = this._options[e];
-    n && (this.value = n.value, (s = this.onChange) == null || s.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = n.name, (a = this.optionsListEl) == null || a.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((h, r) => {
-      r === e ? h.classList.add("selected") : h.classList.remove("selected");
+    n && (this.value = n.value, (s = this.onChange) == null || s.call(this, this.value), this.selectedOptionIndex = e, this.isOpen = !1, i.textContent = n.name, (a = this.optionsListEl) == null || a.classList.remove("open"), (o = this.svgContainer) == null || o.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(".select-option").forEach((r, h) => {
+      h === e ? r.classList.add("selected") : r.classList.remove("selected");
     }));
   }
   updateOptionsList() {
@@ -689,16 +695,16 @@ class F extends C {
     t.className = "upload-setting-wrapper";
     const e = !!(this.props.title || this.props.icon);
     if (e || t.classList.add("no-label"), e) {
-      const h = document.createElement("div");
-      if (h.className = "icon-title-container", this.props.icon) {
-        const r = this.createIcon(this.props.icon);
-        h.appendChild(r);
+      const r = document.createElement("div");
+      if (r.className = "icon-title-container", this.props.icon) {
+        const h = this.createIcon(this.props.icon);
+        r.appendChild(h);
       }
       if (this.props.title) {
-        const r = this.createLabel(this.props.title);
-        h.appendChild(r);
+        const h = this.createLabel(this.props.title);
+        r.appendChild(h);
       }
-      t.appendChild(h);
+      t.appendChild(r);
     }
     const i = document.createElement("div");
     i.className = "preview-button-container";
@@ -714,19 +720,19 @@ class F extends C {
       <span class="upload-label">Upload</span>
     `;
     const l = document.createElement("input");
-    return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(s), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), t.appendChild(l), n ? this.updatePreviewState(this.value) : this.updatePreviewState(null), a.onclick = (h) => {
-      var r;
-      h.stopPropagation(), this.value = "", this.updatePreviewState(null), (r = this.onChange) == null || r.call(this, "");
+    return l.type = "file", l.accept = "image/*", l.style.display = "none", i.appendChild(s), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), t.appendChild(l), n ? this.updatePreviewState(this.value) : this.updatePreviewState(null), a.onclick = (r) => {
+      var h;
+      r.stopPropagation(), this.value = "", this.updatePreviewState(null), (h = this.onChange) == null || h.call(this, "");
     }, o.onclick = () => {
       l.click();
     }, l.onchange = async () => {
-      var r, u, p;
-      const h = (r = l.files) == null ? void 0 : r[0];
-      if (h)
+      var h, u, p;
+      const r = (h = l.files) == null ? void 0 : h[0];
+      if (r)
         try {
           o.classList.add("loading"), o.disabled = !0;
           const g = new FormData(), d = this.props.formFieldName || "file";
-          g.append(d, h, h.name);
+          g.append(d, r, r.name);
           const m = this.props.uploadUrl;
           if (!m)
             throw new Error("No uploadUrl provided to UploadSetting.");
@@ -797,7 +803,7 @@ const U = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBo
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
 `;
-class rt extends C {
+class ht extends C {
   constructor(t = {}) {
     super(t), this.inputType = "select", this._options = [], this.isOpen = !1, this.selectedOptionIndex = null, this.optionsListEl = null, this.svgContainer = null, this.buttonEl = null, this.isLoading = !1, this.container = null, this.hasInitializedOptions = !1, this.initializeOptions(t), t.default !== void 0 && (this.value = t.default, this.selectedOptionIndex = this._options.findIndex(
       (e) => JSON.stringify(e.value) === JSON.stringify(t.default)
@@ -863,8 +869,8 @@ class rt extends C {
       const o = n.value;
       this.value = o, this.onChange && this.onChange(o), this.detectChangeCallback && this.detectChangeCallback(o), this.selectedOptionIndex = e, this.isOpen = !1, this.updateButtonText(), (s = this.optionsListEl) == null || s.classList.remove("open"), (a = this.svgContainer) == null || a.classList.remove("open"), this.optionsListEl && this.optionsListEl.querySelectorAll(
         ".select-api-radio"
-      ).forEach((h, r) => {
-        h.checked = r === e;
+      ).forEach((r, h) => {
+        r.checked = h === e;
       });
     }
   }
@@ -920,7 +926,7 @@ class rt extends C {
     this.detectChangeCallback = t;
   }
 }
-class ht extends C {
+class rt extends C {
   constructor(t) {
     super(t), this.inputType = "text", this.value = t.default ?? !1;
   }
@@ -1007,10 +1013,10 @@ class ct extends C {
     if (!this.props.suffix || this.props.suffix === "none")
       return i.appendChild(l), i;
     l.classList.add("suffix-wrapper");
-    const h = l.querySelector("input.gap-setting-input");
-    h && (h.style.paddingRight = "35px");
-    const r = document.createElement("span");
-    return r.className = "suffix-label", r.textContent = this.props.suffix, l.appendChild(r), i.appendChild(l), i;
+    const r = l.querySelector("input.gap-setting-input");
+    r && (r.style.paddingRight = "35px");
+    const h = document.createElement("span");
+    return h.className = "suffix-label", h.textContent = this.props.suffix, l.appendChild(h), i.appendChild(l), i;
   }
 }
 class dt extends C {
@@ -1044,8 +1050,8 @@ class dt extends C {
       s instanceof HTMLElement && s.classList.toggle("active", s.textContent === ((a = this.tabs.find((o) => o.id === t)) == null ? void 0 : a.label));
     }), this.contentContainer) {
       const s = this.contentContainer.querySelectorAll(".tab-panel"), a = this.tabs.findIndex((l) => l.id === this.previousTabId), o = this.tabs.findIndex((l) => l.id === t);
-      s.forEach((l, h) => {
-        l instanceof HTMLElement && (h === o ? (l.classList.add("active"), l.classList.remove("slide-left", "slide-right")) : h === a ? (l.classList.remove("active"), l.classList.add(o > a ? "slide-left" : "slide-right")) : l.classList.remove("active", "slide-left", "slide-right"));
+      s.forEach((l, r) => {
+        l instanceof HTMLElement && (r === o ? (l.classList.add("active"), l.classList.remove("slide-left", "slide-right")) : r === a ? (l.classList.remove("active"), l.classList.add(o > a ? "slide-left" : "slide-right")) : l.classList.remove("active", "slide-left", "slide-right"));
       });
     }
     (n = this.onChangeCallback) == null || n.call(this, t);
@@ -1191,9 +1197,9 @@ class k extends C {
   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, h = this.props.maxValue ?? Number.MAX_SAFE_INTEGER;
-        let r = Number(o.value);
-        r < l && (r = l), r > h && (r = h), o.value = String(r);
+        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,
@@ -1220,8 +1226,8 @@ class k extends C {
       if (l.toLowerCase() === "auto")
         this.value = "auto";
       else {
-        const h = Number(l);
-        isNaN(h) || (this.value = h);
+        const r = Number(l);
+        isNaN(r) || (this.value = r);
       }
       this.onChange && this.onChange(this.value);
     }), i;
@@ -1480,15 +1486,15 @@ export {
   gt as MarginSettingGroup,
   w as NumberSetting,
   M as OpacitySetting,
-  rt as SelectApiSettings,
+  ht as SelectApiSettings,
   T as SelectSetting,
   C as Setting,
   v as SettingGroup,
   H as StringSetting,
   mt as TabsContainerGroup,
   dt as TabsSettings,
-  ht as Toggle,
+  rt as Toggle,
   F as UploadSetting,
   lt as WidthSetting,
-  B as iterateSettings
+  R as iterateSettings
 };

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";.setting-group{padding:16px;display:flex;flex-direction:column;width:100%;gap:8px;border:1px solid var(--Gray-200, #eaecf0);border-radius:8px;background:#fff;margin:0 auto;-webkit-user-select:none;user-select:none;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f;position:relative}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group .setting-group{width:100%;padding:12px;border:1px solid #d0d5dd;border-radius:8px;background-color:#fff;box-shadow:none;margin:0}.setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0}.setting-group .setting-group .setting-group-content.collapsed{padding:0}.setting-group .setting-group .setting-group{border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;border:1px solid #eaecf0;padding:8px;width:212px;margin:auto}.setting-group .setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0;box-shadow:none}.setting-group .setting-group.collapsed{padding-bottom:0}.setting-group .setting-group .setting-group-content{padding:0}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title:hover,.setting-group-title:hover .setting-group-arrow{background-color:transparent}.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-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);transition:transform .2s ease;color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;gap:8px;transition:all .3s ease-in-out;opacity:1;padding:0 16px 16px;overflow:visible}.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-bottom:4px;margin-top:4px;background:#f8f8f8;border-radius:8px;width:268px;position:relative}.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;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}.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-title.collapsed-view:hover{border-color:var(--Gray-200, #eaecf0);box-shadow:none;background:#fff;transform:none}.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;transition:transform .2s ease;color:var(--Gray-500, #667085)}.setting-group-title.collapsed-view:hover .setting-group-arrow{background-color:transparent;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;transition:transform .2s ease;color:var(--Gray-500, #667085)}.setting-group-title:hover .setting-group-arrow{background-color:var(--Gray-100, #f2f4f7)}.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}@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)}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:#667085;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;place-content:center;align-items:center;position:relative}.string-setting-input{min-width:114px;max-width:122px;width:100%;max-height:33px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.string-setting-wrapper .string-setting-wrapper{display:block;width:100%}.color-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;place-content:center;align-items:center}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:100%;min-width:114px;max-width:122px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;place-content:center;align-items:center;position:relative}.number-setting-input{min-width:114px;max-width:122px;width:100%;max-height:33px;height:100%;padding:8px;color:#292b2e;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:400;line-height:normal;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box;border-radius:8px}.suffix-label{position:absolute;right:8px;padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-setting-wrapper .number-setting-wrapper{display:block;width:100%}input[type=number]{-moz-appearance:textfield}.select-container{display:grid;grid-template-columns:.7fr 1fr;place-content:center;align-items:center;position:relative;width:100%}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.select-button{place-self:end;max-width:120px;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:var(--color-bg, #fff);cursor:pointer;font-size:14px;font-weight:400;color:#101828;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none;border-color:#7f56d9;box-shadow:0 0 0 4px #7f56d91a}.select-button.has-label{padding-top:0;height:33px}.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}.select-button .select-value{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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 #7f56d9;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:absolute;top:calc(100% + 2px);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;transform:translateY(-8px)}.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:#f4ebff;color:#6941c6;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}.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}.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{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.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:background-color .15s ease,color .15s ease}.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}.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}.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:#7f56d9;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}.select-api-button .select-value{margin-top:6px}.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 #7f56d9;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;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:#f4ebff;color:#6941c6;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:#7f56d9;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:#7f56d9;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 #7f56d9}@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:40px;height:24px}.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:4px;bottom:4px;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}.tabs-settings-container{display:flex;flex-direction:column;width:100%;border-radius:8px;background:transparent;overflow:visible;position:relative;z-index:1}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0;align-self:stretch;background:#f1f3f2;position:relative;z-index:1;border-radius:400px}.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;font-size:12px;font-style:normal;font-weight:500;line-height:20px;transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent;box-shadow:0 0 #10182800;position:relative;z-index:1;transform:translateY(0)}.tab-button:active{transform:translateY(0);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;transform:translateY(-1px)}.tab-button.active:active{transform:translateY(0);box-shadow:0 2px 4px -1px #1018280a}.tab-content{position:relative;overflow:visible;width:100%;z-index:1;margin-top:8px}.tab-panel{position:absolute;width:100%;opacity:0;transform:translate(10px);transition:all .2s cubic-bezier(.4,0,.2,1);pointer-events:none;overflow:visible;z-index:1}.tab-panel.active{opacity:1;transform:translate(0);pointer-events:auto;position:relative;overflow:visible;z-index:1}.tab-panel.active>div{overflow:visible;position:relative;z-index:1}.tab-panel.active>div>div{overflow:visible;position:relative;z-index:1}.tab-panel.slide-left{transform:translate(-10px)}.tab-panel.slide-right{transform:translate(10px)}.tab-panel .select-api-container{overflow:visible;position:relative;z-index:9999}.tab-panel .select-api-dropdown{position:absolute;z-index:10000}.tab-panel .select-api-container *{z-index:9999}.tab-panel .select-api-dropdown *{z-index:10000}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}: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";.setting-group{padding:16px;display:flex;flex-direction:column;width:100%;gap:8px;border:1px solid var(--Gray-200, #eaecf0);border-radius:8px;background:#fff;margin:0 auto;-webkit-user-select:none;user-select:none;box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f;position:relative}.setting-group.collapsed{padding:0;border:none;background:transparent;box-shadow:none}.setting-group .setting-group{width:100%;padding:12px;border:1px solid #d0d5dd;border-radius:8px;background-color:#fff;box-shadow:none;margin:0}.setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0}.setting-group .setting-group .setting-group-content.collapsed{padding:0}.setting-group .setting-group .setting-group{border-radius:8px;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;border:1px solid #eaecf0;padding:8px;width:212px;margin:auto}.setting-group .setting-group .setting-group.collapsed{padding:0;border:none;background:transparent;margin:0;box-shadow:none}.setting-group .setting-group.collapsed{padding-bottom:0}.setting-group .setting-group .setting-group-content{padding:0}.setting-group-title{display:flex;justify-content:space-between;align-items:center;padding:4px 0;cursor:pointer;border-radius:6px}.setting-group-title:hover,.setting-group-title:hover .setting-group-arrow{background-color:transparent}.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-arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;transform:rotate(180deg);transition:transform .2s ease;color:var(--Gray-500, #344054)}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content{display:flex;flex-direction:column;width:100%;gap:8px;transition:all .3s ease-in-out;opacity:1;padding:0 16px 16px;overflow:visible}.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-bottom:4px;margin-top:4px;background:#f8f8f8;border-radius:8px;width:268px;position:relative}.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;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}.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-title.collapsed-view:hover{border-color:var(--Gray-200, #eaecf0);box-shadow:none;background:#fff;transform:none}.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;transition:transform .2s ease;color:var(--Gray-500, #667085)}.setting-group-title.collapsed-view:hover .setting-group-arrow{background-color:transparent;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;transition:transform .2s ease;color:var(--Gray-500, #667085)}.setting-group-title:hover .setting-group-arrow{background-color:var(--Gray-100, #f2f4f7)}.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}@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)}.custom_class{border:0!important;box-shadow:none!important;margin:4px 0!important}.custom_class .setting-group-title{display:none!important}.icon-container{display:flex;align-items:center;gap:4px}.input-icon{display:flex;align-items:center;justify-content:center;color:var(--color-text)}.input-label{color:#667085;font-family:Satoshi;font-size:12px;font-style:normal;font-weight:400;line-height:18px}.input-container{display:inline-flex;align-items:center;position:relative}.with-suffix{flex:1;padding-right:36px}.input-suffix{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none;font-size:.9em}.string-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;place-content:center;align-items:center;position:relative}.string-setting-input{min-width:114px;max-width:122px;width:100%;max-height:33px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.string-setting-wrapper .string-setting-wrapper{display:block;width:100%}.color-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;place-content:center;align-items:center}.color-input-wrapper{position:relative;padding:8px 8px 8px 4px;width:100%;min-width:114px;max-width:122px;height:33px;display:flex;align-items:center;gap:4px;border:1px solid var(--color-border);border-radius:8px;background-color:var(--color-bg)}.color-text-input{border:none;outline:none;width:65px;color:var(--color-input-text);font-size:14px;text-align:center;background:transparent}.color-picker{position:absolute;left:0;top:0;width:25px;height:25px;opacity:0;cursor:pointer}.color-preview{width:25px;height:25px;border-radius:4px}.number-setting-wrapper{display:grid;grid-template-columns:.7fr 1fr;place-content:center;align-items:center;position:relative}.number-setting-input{min-width:114px;max-width:122px;width:100%;max-height:33px;height:100%;padding:8px;color:#292b2e;font-family:Satoshi;font-size:14px;font-style:normal;font-weight:400;line-height:normal;border:1px solid var(--color-border);background:var(--color-bg);box-sizing:border-box;border-radius:8px}.suffix-label{position:absolute;right:8px;padding-left:8px;border-left:1px solid var(--color-divider);font-size:12px;color:var(--color-text)}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number-setting-wrapper .number-setting-wrapper{display:block;width:100%}input[type=number]{-moz-appearance:textfield}.select-container{display:grid;grid-template-columns:.7fr 1fr;place-content:center;align-items:center;position:relative;width:100%}.select-container .icon-container{display:flex;align-items:center;margin-bottom:0}.select-container .icon-container .input-label{color:#667085;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:normal}.select-button{place-self:end;max-width:120px;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:var(--color-bg, #fff);cursor:pointer;font-size:14px;font-weight:400;color:#101828;position:relative;transition:all .2s ease;box-shadow:0 1px 2px #1018280d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-button:hover{border-color:#d0d5dd;box-shadow:0 1px 3px #1018281a}.select-button:focus{outline:none;border-color:#7f56d9;box-shadow:0 0 0 4px #7f56d91a}.select-button.has-label{padding-top:0;height:33px}.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}.select-button .select-value{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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 #7f56d9;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:absolute;top:calc(100% + 2px);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;transform:translateY(-8px)}.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:#f4ebff;color:#6941c6;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}.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}.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{padding:8px 16px;background-color:var(--button-bg, #007bff);color:var(--button-color, #fff);border:none;border-radius:4px;cursor:pointer;font-size:14px}.button-setting:hover{background-color:var(--button-bg-hover, #0056b3)}.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:background-color .15s ease,color .15s ease}.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}.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}.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:#7f56d9;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}.select-api-button .select-value{margin-top:6px}.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 #7f56d9;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;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:#f4ebff;color:#6941c6;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:#7f56d9;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:#7f56d9;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 #7f56d9}@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:40px;height:24px}.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:4px;bottom:4px;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}.tabs-settings-container{display:flex;flex-direction:column;width:100%;border-radius:8px;background:transparent;overflow:visible;position:relative;z-index:1}.tabs-header{width:100%;display:flex;padding:4px;justify-content:center;align-items:center;gap:4px;flex-shrink:0;align-self:stretch;background:#f1f3f2;position:relative;z-index:1;border-radius:400px}.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;font-size:12px;font-style:normal;font-weight:500;line-height:20px;transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid transparent;box-shadow:0 0 #10182800;position:relative;z-index:1;transform:translateY(0)}.tab-button:active{transform:translateY(0);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;transform:translateY(-1px)}.tab-button.active:active{transform:translateY(0);box-shadow:0 2px 4px -1px #1018280a}.tab-content{position:relative;overflow:visible;width:100%;z-index:1;margin-top:8px}.tab-panel{position:absolute;width:100%;opacity:0;transform:translate(10px);transition:all .2s cubic-bezier(.4,0,.2,1);pointer-events:none;overflow:visible;z-index:1}.tab-panel.active{opacity:1;transform:translate(0);pointer-events:auto;position:relative;overflow:visible;z-index:1}.tab-panel.slide-left{transform:translate(-10px)}.tab-panel.slide-right{transform:translate(10px)}.tab-panel .select-api-container{overflow:visible;position:relative;z-index:9999}.tab-panel .select-api-dropdown{position:absolute;z-index:10000}.tab-panel .select-api-container *{z-index:9999}.tab-panel .select-api-dropdown *{z-index:10000}.tab-delete-button{background:transparent;border:none;cursor:pointer;padding:2px 4px}.tab-delete-button svg{width:16px;height:16px}.tabs-add-btn-container{display:flex;justify-content:flex-end}.tabs-add-button{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:14px;color:#667085;transition:transform .15s ease,box-shadow .3s ease}.tabs-add-button:hover{transform:scale(1);box-shadow:0 2px 6px #0000001a}.add-icon{display:flex;align-items:center;width:18px}.add-label{display:inline-block}.bgset-or-label{margin:8px 0;text-align:center;font-weight:500;color:#667085;align-self:center}: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/index.d.ts

@@ -395,16 +395,19 @@ export declare class SettingGroup<T extends Record<string, Setting<any, any> | S
     icon?: string;
     id: string;
     onChange?: ((value: T) => void) | undefined;
+    onBlur?: () => void;
     private isCollapsed;
     private isMain;
     private elementRef;
     private hideCondition?;
     private static hiddenElements;
     private isHidden;
+    private custom;
     constructor(groupProps: SettingGroupProps<T>);
     static hide(): void;
     static show(): void;
     setOnChange(onChange: (value: T) => void): SettingGroup<T>;
+    setOnBlur(onBlur: () => void): SettingGroup<T>;
     hide(): void;
     show(): void;
     getValues<K extends keyof T>(childKey?: K): any;
@@ -424,6 +427,8 @@ export declare type SettingGroupProps<T> = {
     description?: string;
     icon?: string;
     hideCondition?: () => boolean;
+    onBlur?: () => void;
+    custom?: boolean;
 };
 
 export declare interface SettingProps<T> {

package/package.json

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