builder-settings-types 0.0.72 → 0.0.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/builder-settings-types.cjs.js +4 -4
  2. package/dist/builder-settings-types.es.js +5 -5
  3. package/dist/index.css +1 -1
  4. package/package.json +1 -1
package/dist/builder-settings-types.cjs.js CHANGED
@@ -65,13 +65,13 @@
65
65
  <span class="upload-label">Replace</span>
66
66
  `),this.previewEl.src=t,this.previewWrapper.classList.add("has-image")}else this.previewEl.style.display="none",this.emptyStateEl.style.display="block",this.previewEl.src="",this.previewWrapper.classList.remove("has-image")}draw(){const t=document.createElement("div");t.className="upload-setting-wrapper",this.previewWrapper=document.createElement("div"),this.previewWrapper.className="preview-wrapper";const e=document.createElement("div");if(e.className="icon-title-container",this.props.icon){const a=this.createIcon(this.props.icon);e.appendChild(a)}if(this.props.title){const a=this.createLabel(this.props.title);e.appendChild(a)}t.appendChild(e),this.emptyStateEl=document.createElement("div"),this.emptyStateEl.className="empty-state",this.emptyStateEl.innerHTML=G,this.previewEl=document.createElement("img"),this.previewEl.className="upload-preview",this.value&&this.value!==""?this.updatePreviewState(this.value):this.updatePreviewState(null);const n=document.createElement("button");n.className="delete-button",n.type="button",n.title="Delete image",n.innerHTML=F,this.previewWrapper.appendChild(this.emptyStateEl),this.previewWrapper.appendChild(this.previewEl),this.previewWrapper.appendChild(n);const s=document.createElement("button");s.className="upload-button",s.innerHTML=`
67
67
  <span class="upload-icon">${L}</span>
68
- <span class="upload-label">Upload</span>
68
+ <span class="upload-label">Replace</span>
69
69
  `,n.onclick=a=>{var l;a.stopPropagation(),this.value="",this.updatePreviewState(null),(l=this.onChange)==null||l.call(this,""),t.style.gridTemplateColumns="1fr",s.innerHTML=`
70
70
  <span class="upload-icon">${L}</span>
71
71
  <span class="upload-label">Upload</span>
72
- `};const o=document.createElement("input");return o.type="file",o.accept="image/*",o.style.display="none",s.onclick=()=>{o.click()},o.onchange=async()=>{var l,c,u;const a=(l=o.files)==null?void 0:l[0];if(a)try{const v=new FormData,m=this.props.formFieldName||"file";v.append(m,a,a.name);const h=this.props.uploadUrl;if(!h)throw new Error("No uploadUrl provided to UploadSetting.");const p=this.props.requestMethod||"POST",f={...this.props.requestHeaders||{}},b=await(await fetch(h,{method:p,body:v,headers:f})).json();let w;if(this.props.parseResponse)w=this.props.parseResponse(b);else if(w=(c=b==null?void 0:b.data)==null?void 0:c.url,!w)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=w,this.updatePreviewState(w),(u=this.onChange)==null||u.call(this,w)}catch(v){console.error("Error uploading file:",v),this.updatePreviewState(null)}},t.appendChild(this.previewWrapper),t.appendChild(s),t.appendChild(o),t}}class U extends d{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new C({title:"Height",default:this.value,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:Z}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const Z=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
72
+ `};const o=document.createElement("input");return o.type="file",o.accept="image/*",o.style.display="none",s.onclick=()=>{o.click()},o.onchange=async()=>{var l,c,u;const a=(l=o.files)==null?void 0:l[0];if(a)try{const v=new FormData,m=this.props.formFieldName||"file";v.append(m,a,a.name);const h=this.props.uploadUrl;if(!h)throw new Error("No uploadUrl provided to UploadSetting.");const p=this.props.requestMethod||"POST",f={...this.props.requestHeaders||{}},b=await(await fetch(h,{method:p,body:v,headers:f})).json();let w;if(this.props.parseResponse)w=this.props.parseResponse(b);else if(w=(c=b==null?void 0:b.data)==null?void 0:c.url,!w)throw new Error("No URL found in response. Provide a parseResponse if needed.");this.value=w,this.updatePreviewState(w),(u=this.onChange)==null||u.call(this,w)}catch(v){console.error("Error uploading file:",v),this.updatePreviewState(null)}},t.appendChild(this.previewWrapper),t.appendChild(s),t.appendChild(o),t}}class Z extends d{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new C({title:"Height",default:this.value,suffix:"px",minValue:t.minHeight??1,maxValue:t.maxHeight,icon:z}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const z=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
73
73
  <path d="M9 14L9 5M9 14L6.75 12.5M9 14L11.25 12.5M9 5L6.75 6.5M9 5L11.25 6.5M15.75 2.75H2.25M15.75 16.25H2.25" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
74
- </svg>`;class z extends d{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new C({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??0,maxValue:t.maxWidth,icon:q}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const q=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
74
+ </svg>`;class U extends d{constructor(t={}){super(t),this.inputType="number",this.value=this.value??100,this.numberSetting=new C({title:"Width",default:this.value,suffix:"px",minValue:t.minWidth??0,maxValue:t.maxWidth,icon:q}),this.numberSetting.setOnChange(e=>{var i;isNaN(e)||e<1||(this.value=e,(i=this.onChange)==null||i.call(this,this.value))})}draw(){return this.numberSetting.draw()}}const q=`<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
75
75
  <path d="M4.5 9.5H13.5M4.5 9.5L6 7.25M4.5 9.5L6 11.75M13.5 9.5L12 7.25M13.5 9.5L12 11.75M15.75 16.25V2.75M2.25 16.25V2.75" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
76
76
  </svg>`,D=`
77
77
  <svg xmlns="http://www.w3.org/2000/svg" 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">
@@ -151,4 +151,4 @@
151
151
  `:`
152
152
  background-color: ${i};
153
153
  opacity: ${n/100};
154
- `}}exports.AlignSetting=T;exports.BackgroundSettingSet=ct;exports.BorderSettingSet=Q;exports.ButtonSetting=j;exports.ColorSetting=E;exports.DimensionSetting=A;exports.HeaderTypographySettingSet=et;exports.HeightSetting=U;exports.MarginSettingGroup=it;exports.NumberSetting=C;exports.OpacitySetting=M;exports.SelectApiSettings=P;exports.SelectSetting=S;exports.Setting=d;exports.SettingGroup=g;exports.StringSetting=k;exports.TabsContainerGroup=rt;exports.UploadSetting=O;exports.WidthSetting=z;exports.iterateSettings=V;
154
+ `}}exports.AlignSetting=T;exports.BackgroundSettingSet=ct;exports.BorderSettingSet=Q;exports.ButtonSetting=j;exports.ColorSetting=E;exports.DimensionSetting=A;exports.HeaderTypographySettingSet=et;exports.HeightSetting=Z;exports.MarginSettingGroup=it;exports.NumberSetting=C;exports.OpacitySetting=M;exports.SelectApiSettings=P;exports.SelectSetting=S;exports.Setting=d;exports.SettingGroup=g;exports.StringSetting=k;exports.TabsContainerGroup=rt;exports.UploadSetting=O;exports.WidthSetting=U;exports.iterateSettings=V;
package/dist/builder-settings-types.es.js CHANGED
@@ -503,7 +503,7 @@ class _ extends u {
503
503
  const s = document.createElement("button");
504
504
  s.className = "upload-button", s.innerHTML = `
505
505
  <span class="upload-icon">${E}</span>
506
- <span class="upload-label">Upload</span>
506
+ <span class="upload-label">Replace</span>
507
507
  `, n.onclick = (a) => {
508
508
  var l;
509
509
  a.stopPropagation(), this.value = "", this.updatePreviewState(null), (l = this.onChange) == null || l.call(this, ""), t.style.gridTemplateColumns = "1fr", s.innerHTML = `
@@ -651,7 +651,7 @@ const z = `
651
651
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
652
652
  <path d="M5.625 9.5H5.6325M12.375 9.5H12.3825M9 9.5H9.0075M9 12.875H9.0075M9 6.125H9.0075M2.25 6.35L2.25 12.65C2.25 13.9101 2.25 14.5402 2.49524 15.0215C2.71095 15.4448 3.05516 15.789 3.47852 16.0048C3.95982 16.25 4.58988 16.25 5.85 16.25H12.15C13.4101 16.25 14.0402 16.25 14.5215 16.0048C14.9448 15.789 15.289 15.4448 15.5048 15.0215C15.75 14.5402 15.75 13.9101 15.75 12.65V6.35C15.75 5.08988 15.75 4.45982 15.5048 3.97852C15.289 3.55516 14.9448 3.21095 14.5215 2.99524C14.0402 2.75 13.4101 2.75 12.15 2.75L5.85 2.75C4.58988 2.75 3.95982 2.75 3.47852 2.99524C3.05516 3.21095 2.71095 3.55516 2.49524 3.97852C2.25 4.45982 2.25 5.08988 2.25 6.35Z" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
653
653
  </svg>
654
- `, U = `
654
+ `, q = `
655
655
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
656
656
  <path d="M6 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.35V6.5M6 16.25H5.85C4.58988 16.25 3.95982 16.25 3.47852 16.0048C3.05516 15.789 2.71095 15.4448 2.49524 15.0215C2.25 14.5402 2.25 13.9101 2.25 12.65V12.5M15.75 6.5V6.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.75H12M15.75 12.5V12.65C15.75 13.9101 15.75 14.5402 15.5048 15.0215C15.289 15.4448 14.9448 15.789 14.5215 16.0048C14.0402 16.25 13.4101 16.25 12.15 16.25H12" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
657
657
  </svg>
@@ -664,7 +664,7 @@ class ot extends C {
664
664
  settings: {
665
665
  size: new w({
666
666
  title: "Size",
667
- icon: U,
667
+ icon: q,
668
668
  default: (t == null ? void 0 : t.size) ?? 0,
669
669
  suffix: "px"
670
670
  }),
@@ -698,7 +698,7 @@ class ot extends C {
698
698
  `;
699
699
  }
700
700
  }
701
- const q = `
701
+ const U = `
702
702
  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" viewBox="0 0 14 13" fill="none">
703
703
  <path d="M1 2.75C1 2.05109 1 1.70163 1.11418 1.42597C1.26642 1.05843 1.55843 0.766422 1.92597 0.614181C2.20163 0.5 2.55109 0.5 3.25 0.5H10.75C11.4489 0.5 11.7984 0.5 12.074 0.614181C12.4416 0.766422 12.7336 1.05843 12.8858 1.42597C13 1.70163 13 2.05109 13 2.75M4.75 12.5H9.25M7 0.5V12.5" stroke="#667085" stroke-linecap="round" stroke-linejoin="round"/>
704
704
  </svg>
@@ -725,7 +725,7 @@ class at extends C {
725
725
  }),
726
726
  fontFamily: new N({
727
727
  title: "Font",
728
- icon: q,
728
+ icon: U,
729
729
  default: t.fontFamilyDefault ?? "Satoshi",
730
730
  options: t.fontFamilyOptions ?? [
731
731
  { name: "Satoshi", value: "Satoshi" },
package/dist/index.css CHANGED
@@ -1 +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;max-width:268px;gap:8px;border:1px solid #D0D5DD;border-radius:8px;background:#f8f8f8;width:100%;margin:auto;-webkit-user-select:none;user-select:none;box-shadow:0 1px 2px #1018280d}.setting-group .setting-group{width:100%;padding:8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;border-radius:8px;border-bottom:solid 1px var(--color-border);background-color:var(--color-white);box-shadow:0 1px 2px #1018280d}.setting-group-title{display:flex;justify-content:space-between;align-items:center;align-self:stretch}.setting-group-title h3{color:#344054;font-family:Satoshi,sans-serif;font-size:14px;font-weight:700;line-height:20px}.setting-group-arrow{transform:rotate(180deg);display:flex;cursor:pointer;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content.collapsed{max-height:0;display:none}.setting-group-content{display:flex;padding:8px;flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-radius:8px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.main-content{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-radius:8px;background:#f8f8f8;border:0;box-shadow:none;padding:0}.main-group{border:0;border-bottom:1px solid #D0D5DD}.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:var(--color-text)}.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:1fr 1fr;place-content:center;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.color-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)}.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:1fr 1fr;place-content:center;align-items:center;position:relative}.number-setting-input{width:120px;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-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}input[type=number]{-moz-appearance:textfield}.select-container{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center;position:relative}.select-button{width:120px;height:33px;display:flex;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;font-size:13px;font-weight:400;color:#292b2e;position:relative;text-align:center}.select-options{display:none;position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;margin:4px 0 0;list-style-type:none;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;z-index:10;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid rgba(208,213,221,1);background:#fff;padding:4px 0;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.select-options.open{display:flex;padding:4px}.select-option{padding:12px;width:100%;display:flex;align-items:center;cursor:pointer;color:#292b2e;border-radius:8px}.select-option:hover{background:#eaecf0}.svg-container{position:absolute;right:8px;top:50%;transform:translateY(-7px) rotate(0);transition:transform .3s ease-out;cursor:pointer}.svg-container svg{transition:transform .3s ease-out}.select-options::-webkit-scrollbar{width:10px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#eaecf0;border-radius:8px;border:2px solid transparent;background-clip:content-box}.select-options::-webkit-scrollbar-thumb:hover{background:#555}.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}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.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{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;align-items:center;width:100%}.icon-title-container{grid-column:1 / 2;grid-row:1 / 2}.preview-wrapper,.upload-button{grid-row:2 / 3;display:inline-flex;align-items:center;gap:10px}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#f2f4f7;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;object-fit:contain;padding:3px}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .upload-preview{display:block}.preview-wrapper.has-image .empty-state{display:none}.upload-button{display:inline-flex;align-items:center;gap:4px;padding:5px 4px;background-color:var(--color-white);border:1px solid var(--color-border-secondary);border-radius:12px;cursor:pointer;max-height:40px;transition:transform .15s ease,box-shadow .15s ease}.preview-wrapper:not(.has-image)~.upload-button{width:100%;justify-content:center}.upload-icon{padding:7px 8px 8px 7px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-icon);border-radius:28px}.upload-label{display:inline-block;font-size:12px;font-weight:600;color:var(--color-btn-text);transition:transform .15s ease}.upload-button:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}.delete-button{display:flex;width:28px;height:28px;padding:6px;justify-content:center;align-items:center;gap:8px;position:absolute;left:60px;top:3px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease}.delete-button svg{width:16px;height:16px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.preview-wrapper:not(.has-image) .delete-button{display:none}.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:48px;display:flex;align-items:end;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:#fff;cursor:pointer;font-size:13px;font-weight:400;color:#292b2e;position:relative;text-align:center;font-weight:700}.select-api-options{display:none;position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;margin:4px 0 0;list-style-type:none;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;z-index:10;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid rgba(208,213,221,1);background:#fff;padding:4px 0;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.select-api-options.open{display:flex;padding:4px}.select-api-option{padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#292b2e;border-radius:8px}.select-api-option:hover{background:#eaecf0}.svg-container{position:absolute;right:8px;top:45%;transform:translateY(-7px) rotate(0);transition:transform .3s ease-out;cursor:pointer}.svg-container svg{width:20px;height:20px;transition:transform .3s ease-out}.svg-container.open svg{transform:rotate(180deg)}.select-api-options::-webkit-scrollbar{width:10px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#eaecf0;border-radius:8px;border:2px solid transparent;background-clip:content-box}.select-api-options::-webkit-scrollbar-thumb:hover{background:#555}.select-api-radio{width:16px;height:16px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-bg)}.select-api-container .icon-container .input-label{position:absolute;top:18%;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:normal;transform:translate(13%);color:#667085;z-index:10}.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,textarea,button,select{display:flex;align-items:center;justify-content:center;max-height:33px;font-family:Satoshi,sans-serif;font-size:inherit;color:inherit;background-color:transparent}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}
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 8px;display:flex;flex-direction:column;max-width:268px;gap:8px;border:1px solid #D0D5DD;border-radius:8px;background:#f8f8f8;width:100%;margin:auto;-webkit-user-select:none;user-select:none;box-shadow:0 1px 2px #1018280d}.setting-group .setting-group{width:100%;padding:8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;border-radius:8px;border-bottom:solid 1px var(--color-border);background-color:var(--color-white);box-shadow:0 1px 2px #1018280d}.setting-group-title{display:flex;justify-content:space-between;align-items:center;align-self:stretch}.setting-group-title h3{color:#344054;font-family:Satoshi,sans-serif;font-size:14px;font-weight:700;line-height:20px}.setting-group-arrow{transform:rotate(180deg);display:flex;cursor:pointer;transition:transform .3s ease-in-out}.setting-group-arrow.rotated{transform:rotate(0)}.setting-group-content.collapsed{max-height:0;display:none}.setting-group-content{display:flex;padding:4px;flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-radius:8px;border:1px solid #EAECF0;background:#fff;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.main-content{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:8px;align-self:stretch;border-radius:8px;background:#f8f8f8;border:0;box-shadow:none;padding:0}.main-group{border:0;border-bottom:1px solid #D0D5DD}.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:var(--color-text)}.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:1fr 1fr;place-content:center;align-items:center}.string-setting-input{max-width:120px;padding:8px;font-size:14px;border-radius:8px;color:var(--color-input-text);border:1px solid var(--color-border);background:var(--color-bg)}.color-setting-wrapper{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center}.color-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)}.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:1fr 1fr;place-content:center;align-items:center;position:relative}.number-setting-input{width:120px;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-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}input[type=number]{-moz-appearance:textfield}.select-container{display:grid;grid-template-columns:1fr 1fr;place-content:center;align-items:center;position:relative}.select-button{width:120px;height:33px;display:flex;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg);cursor:pointer;font-size:13px;font-weight:400;color:#292b2e;position:relative;text-align:center}.select-options{display:none;position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;margin:4px 0 0;list-style-type:none;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;z-index:10;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid rgba(208,213,221,1);background:#fff;padding:4px 0;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.select-options.open{display:flex;padding:4px}.select-option{padding:12px;width:100%;display:flex;align-items:center;cursor:pointer;color:#292b2e;border-radius:8px}.select-option:hover{background:#eaecf0}.svg-container{position:absolute;right:8px;top:50%;transform:translateY(-7px) rotate(0);transition:transform .3s ease-out;cursor:pointer}.svg-container svg{transition:transform .3s ease-out}.select-options::-webkit-scrollbar{width:10px}.select-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-options::-webkit-scrollbar-thumb{background:#eaecf0;border-radius:8px;border:2px solid transparent;background-clip:content-box}.select-options::-webkit-scrollbar-thumb:hover{background:#555}.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}.dimension-bracket{width:18px;height:42px;position:absolute;top:16px;right:122px;display:flex;align-items:center;justify-content:center}.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{width:24px;height:24px;background:none;cursor:pointer;display:inline-flex;align-items:center;color:#667085;z-index:1}.dimension-lock-icon:hover{color:#000}.upload-setting-wrapper{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:10px;align-items:center;width:100%}.icon-title-container{grid-column:1 / 2;grid-row:1 / 2}.preview-wrapper,.upload-button{grid-row:2 / 3;display:inline-flex;align-items:center;gap:10px}.preview-wrapper{position:relative;width:91px;height:71px;border-radius:4px;overflow:hidden;background-color:#f2f4f7;display:none}.preview-wrapper.has-image{display:block}.upload-preview{width:100%;height:100%;object-fit:cover;border-radius:4px;display:none;object-fit:contain;padding:3px}.empty-state{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.empty-state svg{width:100%;height:100%}.preview-wrapper.has-image .upload-preview{display:block}.preview-wrapper.has-image .empty-state{display:none}.upload-button{display:inline-flex;align-items:center;padding:5px 4px;background-color:var(--color-white);border:1px solid var(--color-border-secondary);border-radius:12px;cursor:pointer;max-height:40px;transition:transform .15s ease,box-shadow .15s ease}.preview-wrapper:not(.has-image)~.upload-button{width:100%;justify-content:center}.upload-icon{padding:7px 8px 8px 7px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-icon);border-radius:28px}.upload-label{display:inline-block;font-size:12px;font-weight:600;color:var(--color-btn-text);transition:transform .15s ease}.upload-button:hover{transform:scale(1.02);box-shadow:0 2px 6px #0000001a}.delete-button{display:flex;width:28px;height:28px;padding:6px;justify-content:center;align-items:center;gap:8px;position:absolute;left:60px;top:3px;background:#fff;border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:background-color .2s ease}.delete-button svg{width:16px;height:16px;flex-shrink:0}.delete-button:hover{background-color:#f3f4f6}.preview-wrapper:not(.has-image) .delete-button{display:none}.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:48px;display:flex;align-items:end;padding:8px;border-radius:8px;border:1px solid var(--color-border);background:#fff;cursor:pointer;font-size:13px;font-weight:400;color:#292b2e;position:relative;text-align:center;font-weight:700}.select-api-options{display:none;position:absolute;top:100%;left:0;right:0;max-height:200px;overflow-y:auto;margin:4px 0 0;list-style-type:none;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;z-index:10;flex-direction:column;color:#101828;align-items:flex-start;border:1px solid rgba(208,213,221,1);background:#fff;padding:4px 0;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808}.select-api-options.open{display:flex;padding:4px}.select-api-option{padding:12px;width:100%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:#292b2e;border-radius:8px}.select-api-option:hover{background:#eaecf0}.svg-container{position:absolute;right:8px;top:45%;transform:translateY(-7px) rotate(0);transition:transform .3s ease-out;cursor:pointer}.svg-container svg{width:20px;height:20px;transition:transform .3s ease-out}.svg-container.open svg{transform:rotate(180deg)}.select-api-options::-webkit-scrollbar{width:10px}.select-api-options::-webkit-scrollbar-track{background:transparent;border-radius:8px}.select-api-options::-webkit-scrollbar-thumb{background:#eaecf0;border-radius:8px;border:2px solid transparent;background-clip:content-box}.select-api-options::-webkit-scrollbar-thumb:hover{background:#555}.select-api-radio{width:16px;height:16px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-bg)}.select-api-container .icon-container .input-label{position:absolute;top:18%;font-family:Inter;font-size:12px;font-style:normal;font-weight:400;line-height:normal;transform:translate(13%);color:#667085;z-index:10}.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,textarea,button,select{display:flex;align-items:center;justify-content:center;max-height:33px;font-family:Satoshi,sans-serif;font-size:inherit;color:inherit;background-color:transparent}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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "builder-settings-types",
3
3
  "description": "builder settings",
4
- "version": "0.0.72",
4
+ "version": "0.0.74",
5
5
  "type": "module",
6
6
  "main": "dist/builder-settings-types.cjs.js",
7
7
  "module": "dist/builder-settings-types.es.js",