builder-settings-types 0.0.279 → 0.0.280

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.
@@ -15,10 +15,10 @@ function J(c, t) {
15
15
  const e = Math.min(Math.max(t, 0), 5);
16
16
  c.setAttribute("data-nesting-level", e.toString()), e > 0 ? c.style.setProperty("--visual-indent", `${e * 2}px`) : (c.style.removeProperty("--visual-indent"), c.style.marginLeft = "");
17
17
  }
18
- function tt(c, t = 0) {
18
+ function et(c, t = 0) {
19
19
  c.querySelectorAll(":scope > .setting-group-content > .setting-group").forEach((i) => {
20
20
  const s = i, n = t + 1;
21
- J(s, n), tt(s, n);
21
+ J(s, n), et(s, n);
22
22
  });
23
23
  }
24
24
  const Ct = {
@@ -111,7 +111,7 @@ class yt {
111
111
  this.observer && (this.observer.disconnect(), this.observer = void 0), this.observedElements.clear();
112
112
  }
113
113
  }
114
- const nt = new yt();
114
+ const ot = new yt();
115
115
  function X(c) {
116
116
  if (c === null || typeof c != "object") return c;
117
117
  if (c instanceof Date) return new Date(c.getTime());
@@ -233,14 +233,14 @@ class w {
233
233
  return i.className = "input-icon " + (e || ""), i.innerHTML = t, i;
234
234
  }
235
235
  }
236
- function R(c) {
236
+ function D(c) {
237
237
  return c instanceof w;
238
238
  }
239
239
  function L(c) {
240
240
  return c instanceof T;
241
241
  }
242
- function ot(c) {
243
- return R(c) || L(c);
242
+ function at(c) {
243
+ return D(c) || L(c);
244
244
  }
245
245
  function j(c, t) {
246
246
  for (const e in c)
@@ -249,7 +249,7 @@ function j(c, t) {
249
249
  t(e, i);
250
250
  }
251
251
  }
252
- const K = class K {
252
+ const Y = class Y {
253
253
  constructor(t) {
254
254
  this.elementRef = null, this.isHidden = !1, this.custom = !1, this.initialValues = {}, this.changeTimeout = null, this.isHandlingChange = !1, this.changeHandlers = /* @__PURE__ */ new Set(), this.blurTimeout = null, this.lastChangeTime = 0, this.handleBlur = () => {
255
255
  }, this.pendingBlurHandler = null, this.originalDefaultValues = {}, this.nestingLevel = 0, this.dataPropsPath = "", this.hide = !1, this.id = t.id || ht(), this.title = t.title, this.settings = t.settings, this.isCollapsed = t.collapsed ?? !1, this.isMain = t.main ?? !1, this.custom = t.custom ?? !1, this.nestingLevel = 0, this.includeGetJson = t.includeGetJson ?? !0, this.addItemCfg = t.addItem, this.deleteItemCfg = t.deleteItem, this.dataProps = t.dataProps, this.dataPropsPath = t.dataProps || "", this.hide = t.hide ?? !1, Object.assign(this, t.settings), this.initialValues = this.getValues(), this.originalDefaultValues = this.getDefaultValues(), this.propagateNestingLevel(), this.propagateDataPropsPath();
@@ -275,11 +275,11 @@ const K = class K {
275
275
  propagateDataPropsPath() {
276
276
  j(this.settings, (t, e) => {
277
277
  const i = String(t), s = this.dataPropsPath ? `${this.dataPropsPath}_${i}` : i;
278
- (L(e) || R(e) && typeof e.setDataPropsPath == "function") && e.setDataPropsPath(s);
278
+ (L(e) || D(e) && typeof e.setDataPropsPath == "function") && e.setDataPropsPath(s);
279
279
  });
280
280
  }
281
281
  updateNestingStyles() {
282
- this.elementRef && (J(this.elementRef, this.nestingLevel), tt(this.elementRef, this.nestingLevel));
282
+ this.elementRef && (J(this.elementRef, this.nestingLevel), et(this.elementRef, this.nestingLevel));
283
283
  }
284
284
  forceChildUIRefresh() {
285
285
  Object.entries(this.settings).forEach(([t, e]) => {
@@ -355,7 +355,7 @@ const K = class K {
355
355
  setMobileValues(t) {
356
356
  !t || typeof t != "object" || (Object.entries(t).forEach(([e, i]) => {
357
357
  const s = this.settings[e];
358
- s && (L(s) || R(s)) && typeof s.setMobileValue == "function" && s.setMobileValue(i);
358
+ s && (L(s) || D(s)) && typeof s.setMobileValue == "function" && s.setMobileValue(i);
359
359
  }), this.setValue(t), this.onChange && this.onChange(this.getValues()));
360
360
  }
361
361
  getMobileValues(t) {
@@ -398,7 +398,7 @@ const K = class K {
398
398
  const o = this.getValues();
399
399
  this.initialValues = o, t(o);
400
400
  }), this.changeHandlers.add(() => t(this.getValues()));
401
- else if (R(s)) {
401
+ else if (D(s)) {
402
402
  const o = () => e();
403
403
  this.changeHandlers.add(o), s.setOnChange(o);
404
404
  } else {
@@ -421,10 +421,10 @@ const K = class K {
421
421
  const o = i.slice(this.addItemCfg.keyPrefix.length), a = Number(o);
422
422
  if (Number.isFinite(a)) {
423
423
  const l = this.addItemCfg.createItem(a);
424
- ot(l) && (this.addSetting(i, l), n = l);
424
+ at(l) && (this.addSetting(i, l), n = l);
425
425
  }
426
426
  }
427
- n && (L(n) || R(n)) && typeof n.setValue == "function" && n.setValue(s);
427
+ n && (L(n) || D(n)) && typeof n.setValue == "function" && n.setValue(s);
428
428
  }), setTimeout(() => {
429
429
  this.forceChildUIRefresh();
430
430
  }, 0);
@@ -438,7 +438,7 @@ const K = class K {
438
438
  const s = this.getValues();
439
439
  this.initialValues = s, (n = this.onChange) == null || n.call(this, s), this.updateVisibility();
440
440
  };
441
- L(t) ? t.setOnChange(() => e()) : R(t) ? t.setOnChange(() => e()) : (i = t.setOnChange) == null || i.call(t, () => e());
441
+ L(t) ? t.setOnChange(() => e()) : D(t) ? t.setOnChange(() => e()) : (i = t.setOnChange) == null || i.call(t, () => e());
442
442
  }
443
443
  addSetting(t, e) {
444
444
  var s, n;
@@ -454,7 +454,7 @@ const K = class K {
454
454
  p && t.startsWith(p) && this.addDeleteButtonToElement(a, t);
455
455
  }
456
456
  const r = o.querySelector(".sg-add-button-bottom");
457
- r ? o.insertBefore(a, r) : o.appendChild(a), nt.trackElement(a), J(a, this.nestingLevel + 1), tt(a, this.nestingLevel + 1);
457
+ r ? o.insertBefore(a, r) : o.appendChild(a), ot.trackElement(a), J(a, this.nestingLevel + 1), et(a, this.nestingLevel + 1);
458
458
  const h = a.style.display;
459
459
  a.style.display = "none", a.offsetHeight, a.style.display = h, this.updateNestingStyles();
460
460
  }
@@ -705,7 +705,7 @@ const K = class K {
705
705
  }
706
706
  draw() {
707
707
  const t = document.createElement("div");
708
- t.className = "setting-group", t.id = `setting-group-${this.id}`, K.hiddenElements.add(t), this.hide && (t.style.display = "none"), this.isMain && t.classList.add("main-group"), this.custom && t.classList.add("custom_class"), J(t, this.nestingLevel);
708
+ t.className = "setting-group", t.id = `setting-group-${this.id}`, Y.hiddenElements.add(t), this.hide && (t.style.display = "none"), this.isMain && t.classList.add("main-group"), this.custom && t.classList.add("custom_class"), J(t, this.nestingLevel);
709
709
  const e = document.createElement("div");
710
710
  e.className = "setting-group-title", this.isCollapsed && e.classList.add("collapsed-view"), e.setAttribute("role", "button"), e.setAttribute(
711
711
  "aria-expanded",
@@ -761,13 +761,13 @@ const K = class K {
761
761
  h.innerHTML = `${p}<span style="margin-left:4px;">${this.addItemCfg.buttonLabel ?? "Add"}</span>`, h.addEventListener("click", (d) => {
762
762
  d.stopPropagation(), d.preventDefault();
763
763
  const u = this.getNextIndexFromPrefix(this.addItemCfg.keyPrefix), g = this.addItemCfg.createItem(u);
764
- if (ot(g)) {
764
+ if (at(g)) {
765
765
  const m = `${this.addItemCfg.keyPrefix}${u}`;
766
766
  this.addSetting(m, g);
767
767
  }
768
768
  }), a.appendChild(h);
769
769
  }
770
- return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, nt.trackElement(t), setTimeout(() => {
770
+ return e.appendChild(i), e.appendChild(n), t.appendChild(e), t.appendChild(a), this.elementRef = t, ot.trackElement(t), setTimeout(() => {
771
771
  this.updateNestingStyles();
772
772
  }, 0), this.pendingBlurHandler && (this.pendingBlurHandler = null), t;
773
773
  }
@@ -809,8 +809,8 @@ const K = class K {
809
809
  }
810
810
  }
811
811
  };
812
- K.hiddenElements = /* @__PURE__ */ new Set();
813
- let T = K;
812
+ Y.hiddenElements = /* @__PURE__ */ new Set();
813
+ let T = Y;
814
814
  function ae(c) {
815
815
  return new bt(c);
816
816
  }
@@ -1001,14 +1001,14 @@ const kt = `
1001
1001
  <path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
1002
1002
  <path d="M9 1V17C4.58172 17 1 13.4183 1 9C1 4.58172 4.58172 1 9 1Z" fill="#667085" stroke="#667085" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
1003
1003
  </svg>`;
1004
- class P extends w {
1004
+ class R extends w {
1005
1005
  constructor(t = {}) {
1006
1006
  super({
1007
1007
  ...t,
1008
1008
  icon: t.icon || kt,
1009
1009
  title: t.title || "Color & Opacity",
1010
1010
  default: t.default || "#000000FF"
1011
- }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.opacityInputEl = null, this.colorPreviewEl = null, this.detectChange = t.detectChange, this.value && (this.value = P.normalizeHexWithOpacity(this.value));
1011
+ }), this.inputType = "color", this.element = null, this.colorInputEl = null, this.textInputEl = null, this.opacityInputEl = null, this.colorPreviewEl = null, this.detectChange = t.detectChange, this.value && (this.value = R.normalizeHexWithOpacity(this.value));
1012
1012
  }
1013
1013
  static normalizeHexWithOpacity(t) {
1014
1014
  return t = t.replace("#", ""), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), t.length === 6 && (t = t + "FF"), t.length === 8 && /^[0-9A-Fa-f]{8}$/.test(t) ? `#${t.toUpperCase()}` : (console.warn(`Invalid hex value "${t}", using default "#000000FF"`), "#000000FF");
@@ -1026,7 +1026,7 @@ class P extends w {
1026
1026
  return `#${i}${n}`;
1027
1027
  }
1028
1028
  setValue(t) {
1029
- t === void 0 || t === "" ? this.value = "#000000FF" : this.value = P.normalizeHexWithOpacity(t), this.updateInputElements(), this.updateColorPreview(), this.onChange && this.onChange(this.value), this.detectChange && this.detectChange(this.value);
1029
+ t === void 0 || t === "" ? this.value = "#000000FF" : this.value = R.normalizeHexWithOpacity(t), this.updateInputElements(), this.updateColorPreview(), this.onChange && this.onChange(this.value), this.detectChange && this.detectChange(this.value);
1030
1030
  }
1031
1031
  updateInputElements() {
1032
1032
  this.value && (this.colorInputEl && (this.colorInputEl.value = this.getRgbColor()), this.textInputEl && (this.textInputEl.value = this.value), this.opacityInputEl && (this.opacityInputEl.value = this.getOpacityPercent().toString()));
@@ -1037,7 +1037,7 @@ class P extends w {
1037
1037
  this.colorPreviewEl.style.backgroundColor = `rgba(${s}, ${n}, ${o}, ${e})`;
1038
1038
  }
1039
1039
  handleColorChange(t) {
1040
- const e = this.getOpacityPercent(), i = P.combineColorOpacity(
1040
+ const e = this.getOpacityPercent(), i = R.combineColorOpacity(
1041
1041
  t,
1042
1042
  e
1043
1043
  );
@@ -1048,7 +1048,7 @@ class P extends w {
1048
1048
  return e || i ? (this.setValue(t), !0) : !1;
1049
1049
  }
1050
1050
  handleOpacityChange(t) {
1051
- const e = this.getRgbColor(), i = Math.max(0, Math.min(100, t)), s = P.combineColorOpacity(
1051
+ const e = this.getRgbColor(), i = Math.max(0, Math.min(100, t)), s = R.combineColorOpacity(
1052
1052
  e,
1053
1053
  i
1054
1054
  );
@@ -1245,7 +1245,7 @@ const It = `
1245
1245
  <polyline points="6 9 12 15 18 9"></polyline>
1246
1246
  </svg>
1247
1247
  `;
1248
- class et extends w {
1248
+ class it extends w {
1249
1249
  constructor(t = {}) {
1250
1250
  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, this.resizeListener = null, t.options && (this._options = [...t.options]), t.getOptions && this._options.push(...t.getOptions()), t.getOptionsAsync && (this.isLoading = !0), this.value !== void 0) {
1251
1251
  const e = this._options.findIndex((i) => i.value === this.value);
@@ -1300,9 +1300,6 @@ class et extends w {
1300
1300
  this.isOpen && this.checkDropdownPosition();
1301
1301
  }, window.addEventListener("resize", this.resizeListener), t;
1302
1302
  }
1303
- /**
1304
- * Check if dropdown should be positioned above the button
1305
- */
1306
1303
  checkDropdownPosition() {
1307
1304
  if (!this.optionsListEl || !this.buttonEl || !this.container) return;
1308
1305
  const t = this.buttonEl.getBoundingClientRect();
@@ -1323,9 +1320,6 @@ class et extends w {
1323
1320
  r === e ? l.classList.add("selected") : l.classList.remove("selected");
1324
1321
  }));
1325
1322
  }
1326
- /**
1327
- * Clean up dropdown positioning when closed
1328
- */
1329
1323
  cleanupDropdownPosition() {
1330
1324
  this.optionsListEl && (this.optionsListEl.style.position = "", this.optionsListEl.style.top = "", this.optionsListEl.style.bottom = "", this.optionsListEl.style.left = "", this.optionsListEl.style.right = "", this.optionsListEl.style.width = "");
1331
1325
  }
@@ -1561,7 +1555,7 @@ const Vt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewB
1561
1555
  <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="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
1562
1556
  </svg>`, Tt = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
1563
1557
  <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="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
1564
- </svg>`, Y = `
1558
+ </svg>`, Q = `
1565
1559
  <svg xmlns="http://www.w3.org/2000/svg" width="15" height="16" viewBox="0 0 15 16" fill="none">
1566
1560
  <path d="M5 10.5L7.5 8M7.5 8L10 10.5M7.5 8V13.625M12.5 10.9643C13.2634 10.3338 13.75 9.37996 13.75 8.3125C13.75 6.41402 12.211 4.875 10.3125 4.875C10.1759 4.875 10.0482 4.80375 9.97882 4.68609C9.16379 3.30302 7.65902 2.375 5.9375 2.375C3.34867 2.375 1.25 4.47367 1.25 7.0625C1.25 8.35381 1.77215 9.52317 2.61684 10.371" stroke="#475467" stroke-linecap="round" stroke-linejoin="round"/>
1567
1561
  </svg>
@@ -1647,7 +1641,7 @@ class pt extends w {
1647
1641
  );
1648
1642
  if (t && t !== "") {
1649
1643
  this.showLoading(), s && s instanceof HTMLElement && (s.style.display = "none"), e && e.classList.remove("no-image"), i && (i.innerHTML = `
1650
- <span class="upload-icon">${Y}</span>
1644
+ <span class="upload-icon">${Q}</span>
1651
1645
  <span class="upload-label">Replace</span>
1652
1646
  `);
1653
1647
  const n = () => {
@@ -1658,7 +1652,7 @@ class pt extends w {
1658
1652
  this.previewEl.addEventListener("load", n), this.previewEl.addEventListener("error", o), this.previewEl.src = t;
1659
1653
  } else
1660
1654
  this.hideLoading(), this.previewWrapper.classList.remove("has-image"), this.previewEl.src = "", this.previewEl.style.display = "none", this.previewWrapper.style.display = "none", s && s instanceof HTMLElement && (s.style.display = "block"), e && e.classList.add("no-image"), i && (i.innerHTML = `
1661
- <span class="upload-icon">${Y}</span>
1655
+ <span class="upload-icon">${Q}</span>
1662
1656
  <span class="upload-label">Upload</span>
1663
1657
  `);
1664
1658
  }
@@ -1701,7 +1695,7 @@ class pt extends w {
1701
1695
  this.previewWrapper.appendChild(this.previewEl);
1702
1696
  const o = document.createElement("button");
1703
1697
  return o.className = "upload-button", this.getDataPropsPath() && o.setAttribute("data-test-id", this.getDataPropsPath()), o.innerHTML = `
1704
- <span class="upload-icon">${Y}</span>
1698
+ <span class="upload-icon">${Q}</span>
1705
1699
  <span class="upload-label">Upload</span>
1706
1700
  `, i.appendChild(n), i.appendChild(this.previewWrapper), i.appendChild(o), t.appendChild(i), s ? this.updatePreviewState(this.value) : this.updatePreviewState(null), o.onclick = () => {
1707
1701
  window.postMessage(
@@ -2205,7 +2199,7 @@ class ye extends w {
2205
2199
  { name: "Bounce", value: "bounce 1.5s ease-in-out infinite" },
2206
2200
  { name: "Pulse", value: "pulse 1.5s ease-in-out infinite" }
2207
2201
  ];
2208
- this.selectSetting = new et({
2202
+ this.selectSetting = new it({
2209
2203
  title: this.title || "Animation",
2210
2204
  options: e,
2211
2205
  default: this.props.default || "none"
@@ -2221,7 +2215,7 @@ class ye extends w {
2221
2215
  this.selectSetting.destroy(), super.destroy();
2222
2216
  }
2223
2217
  }
2224
- const Ut = (c, t) => {
2218
+ const Gt = (c, t) => {
2225
2219
  let e = !1, i = 0, s = 0, n = 0, o = 0;
2226
2220
  const a = (h) => {
2227
2221
  if (h.target.closest("button")) return;
@@ -2237,7 +2231,7 @@ const Ut = (c, t) => {
2237
2231
  e = !1, document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", r), document.body.style.userSelect = "";
2238
2232
  };
2239
2233
  c.addEventListener("mousedown", a);
2240
- }, U = (c) => {
2234
+ }, G = (c) => {
2241
2235
  if (!c) return null;
2242
2236
  let t = c.trim();
2243
2237
  return !t.startsWith("#") || (t = t.slice(1), t.length === 3 && (t = t.split("").map((e) => e + e).join("")), !/^[0-9a-fA-F]{6}$/.test(t)) ? null : `#${t.toUpperCase()}`;
@@ -2248,7 +2242,7 @@ const Ut = (c, t) => {
2248
2242
  g: parseInt(e.slice(2, 4), 16),
2249
2243
  b: parseInt(e.slice(4, 6), 16)
2250
2244
  };
2251
- }, $ = (c) => {
2245
+ }, H = (c) => {
2252
2246
  const { r: t, g: e, b: i } = S(c), s = t / 255, n = e / 255, o = i / 255, a = Math.max(s, n, o), l = Math.min(s, n, o), r = a - l;
2253
2247
  let h = 0;
2254
2248
  r !== 0 && (a === s ? h = (n - o) / r % 6 : a === n ? h = (o - s) / r + 2 : h = (s - n) / r + 4), h < 0 && (h += 6);
@@ -2262,7 +2256,7 @@ const Ut = (c, t) => {
2262
2256
  Math.round((l + o) * 255),
2263
2257
  Math.round((r + o) * 255)
2264
2258
  );
2265
- }, Gt = (c, t, e) => {
2259
+ }, Ut = (c, t, e) => {
2266
2260
  const i = e * (1 - t / 2), s = i === 0 || i === 1 ? 0 : (e - i) / Math.min(i, 1 - i);
2267
2261
  return { hue: c, sat: s, lightness: i };
2268
2262
  }, Z = (c, t, e) => {
@@ -2305,7 +2299,7 @@ const Ut = (c, t) => {
2305
2299
  return `rgba(${n}, ${o}, ${a}, ${e})`;
2306
2300
  }
2307
2301
  }
2308
- const i = U(c);
2302
+ const i = G(c);
2309
2303
  if (i) {
2310
2304
  const { r: s, g: n, b: o } = S(i);
2311
2305
  return `rgba(${s}, ${n}, ${o}, ${e})`;
@@ -2342,7 +2336,7 @@ const Ut = (c, t) => {
2342
2336
  /^[a-zA-Z]+$/
2343
2337
  ].some((e) => e.test(c.trim())), Wt = (c) => {
2344
2338
  if (typeof document > "u")
2345
- return ut(c) || !!U(c);
2339
+ return ut(c) || !!G(c);
2346
2340
  const t = document.createElement("div");
2347
2341
  return t.style.color = c, t.style.color !== "";
2348
2342
  }, gt = (c) => {
@@ -2381,8 +2375,8 @@ const Ut = (c, t) => {
2381
2375
  opacity: Math.round(l * 100)
2382
2376
  };
2383
2377
  }
2384
- return { color: U(t) || t, position: 0, opacity: 100 };
2385
- }, at = (c) => {
2378
+ return { color: G(t) || t, position: 0, opacity: 100 };
2379
+ }, lt = (c) => {
2386
2380
  const t = [];
2387
2381
  let e = "", i = 0;
2388
2382
  for (let s = 0; s < c.length; s++) {
@@ -2396,7 +2390,7 @@ const Ut = (c, t) => {
2396
2390
  e += n;
2397
2391
  }
2398
2392
  return e.trim() && t.push(e.trim()), t;
2399
- }, lt = (c, t) => {
2393
+ }, rt = (c, t) => {
2400
2394
  const e = new RegExp(`${t}\\s*\\(`, "i"), i = c.match(e);
2401
2395
  if (!i) return null;
2402
2396
  const s = i.index + i[0].length;
@@ -2417,7 +2411,7 @@ const Ut = (c, t) => {
2417
2411
  "contain",
2418
2412
  "cover"
2419
2413
  ].includes(t) ? !1 : /^#[0-9a-f]{3,8}$/i.test(t) || /^rgb/i.test(c) || /^hsl/i.test(c) || zt(t);
2420
- }, rt = (c) => {
2414
+ }, ct = (c) => {
2421
2415
  const t = [];
2422
2416
  return c.forEach((e, i) => {
2423
2417
  const s = e.trim();
@@ -2428,7 +2422,7 @@ const Ut = (c, t) => {
2428
2422
  const l = gt(n);
2429
2423
  l.position = Math.max(0, Math.min(100, Math.round(o))), t.push(l);
2430
2424
  }), t;
2431
- }, A = (c) => {
2425
+ }, $ = (c) => {
2432
2426
  const t = c.stops && c.stops.length ? c.stops : [{ color: "#000000", position: 0, opacity: 100 }];
2433
2427
  return {
2434
2428
  type: c.type && ["linear", "radial", "solid"].includes(c.type) ? c.type : "linear",
@@ -2439,15 +2433,15 @@ const Ut = (c, t) => {
2439
2433
  opacity: e.opacity === void 0 || Number.isNaN(e.opacity) ? 100 : e.opacity
2440
2434
  }))
2441
2435
  };
2442
- }, H = (c) => {
2436
+ }, P = (c) => {
2443
2437
  const t = c.replace(/;$/, "").trim();
2444
2438
  if (Wt(t)) {
2445
2439
  const s = gt(t);
2446
- return A({ type: "solid", angle: 0, stops: [s] });
2440
+ return $({ type: "solid", angle: 0, stops: [s] });
2447
2441
  }
2448
- const e = lt(t, "linear-gradient");
2442
+ const e = rt(t, "linear-gradient");
2449
2443
  if (e) {
2450
- const s = at(e);
2444
+ const s = lt(e);
2451
2445
  let n = 90, o = s;
2452
2446
  const a = s[0];
2453
2447
  if (a.includes("deg")) {
@@ -2463,13 +2457,13 @@ const Ut = (c, t) => {
2463
2457
  "to top right": 45,
2464
2458
  "to top left": 315
2465
2459
  }[a] ?? 90, o = s.slice(1));
2466
- const l = rt(o);
2467
- return l.length ? A({ type: "linear", angle: n, stops: l }) : null;
2460
+ const l = ct(o);
2461
+ return l.length ? $({ type: "linear", angle: n, stops: l }) : null;
2468
2462
  }
2469
- const i = lt(t, "radial-gradient");
2463
+ const i = rt(t, "radial-gradient");
2470
2464
  if (i) {
2471
- const s = at(i), n = s[0] && !qt(s[0]) ? s.slice(1) : s, o = rt(n);
2472
- return o.length ? A({ type: "radial", angle: 0, stops: o }) : null;
2465
+ const s = lt(i), n = s[0] && !qt(s[0]) ? s.slice(1) : s, o = ct(n);
2466
+ return o.length ? $({ type: "radial", angle: 0, stops: o }) : null;
2473
2467
  }
2474
2468
  return null;
2475
2469
  }, N = (c) => {
@@ -2481,7 +2475,7 @@ const Ut = (c, t) => {
2481
2475
  (e) => `${dt(e.color, e.opacity ?? 100)} ${e.position}%`
2482
2476
  ).join(", ");
2483
2477
  return c.type === "radial" ? `radial-gradient(circle, ${t})` : `linear-gradient(${c.angle}deg, ${t})`;
2484
- }, Q = (c) => {
2478
+ }, tt = (c) => {
2485
2479
  if (c.type === "solid") {
2486
2480
  const t = c.stops[0];
2487
2481
  return t ? t.color.replace("#", "").toUpperCase() : "Color";
@@ -2497,8 +2491,8 @@ const Ut = (c, t) => {
2497
2491
  static normalizeList(t) {
2498
2492
  const e = /* @__PURE__ */ new Set(), i = [];
2499
2493
  return t.forEach((s) => {
2500
- let n = U(s);
2501
- n || H(s) && (n = s), n && (e.has(n) || (e.add(n), i.push(n)));
2494
+ let n = G(s);
2495
+ n || P(s) && (n = s), n && (e.has(n) || (e.add(n), i.push(n)));
2502
2496
  }), i.slice(0, this.MAX_COLORS);
2503
2497
  }
2504
2498
  static ensureLoaded() {
@@ -2541,11 +2535,11 @@ const Ut = (c, t) => {
2541
2535
  }
2542
2536
  static addColor(t, e) {
2543
2537
  if (!t) return;
2544
- let i = U(t), s = "solid";
2538
+ let i = G(t), s = "solid";
2545
2539
  if (i)
2546
2540
  s = "solid";
2547
2541
  else {
2548
- const l = H(t);
2542
+ const l = P(t);
2549
2543
  l && (i = t, s = l.type === "solid" ? "solid" : "gradient");
2550
2544
  }
2551
2545
  if (!i) return;
@@ -2554,8 +2548,8 @@ const Ut = (c, t) => {
2554
2548
  }
2555
2549
  };
2556
2550
  q.STORAGE_KEY = "settingsLib_recentColors", q.MAX_COLORS = 12, q.colors = null;
2557
- let B = q;
2558
- const it = (c, t) => {
2551
+ let A = q;
2552
+ const st = (c, t) => {
2559
2553
  const e = document.createElement("div");
2560
2554
  e.className = "color-picker-recent-section";
2561
2555
  const i = document.createElement("div");
@@ -2566,7 +2560,7 @@ const it = (c, t) => {
2566
2560
  n.className = "color-picker-recent-placeholder", n.textContent = "No recent colors yet", e.appendChild(i), e.appendChild(s), e.appendChild(n);
2567
2561
  const o = () => {
2568
2562
  s.innerHTML = "";
2569
- const a = B.getColors(t);
2563
+ const a = A.getColors(t);
2570
2564
  if (a.length === 0) {
2571
2565
  s.style.display = "none", n.style.display = "block";
2572
2566
  return;
@@ -2624,7 +2618,7 @@ class Xt {
2624
2618
  const i = document.createElement("span");
2625
2619
  i.textContent = "Color";
2626
2620
  const s = document.createElement("button");
2627
- s.className = "color-picker-close", s.innerHTML = mt, s.addEventListener("click", () => this.close(!0)), e.appendChild(i), e.appendChild(s), Ut(e, t);
2621
+ s.className = "color-picker-close", s.innerHTML = mt, s.addEventListener("click", () => this.close(!0)), e.appendChild(i), e.appendChild(s), Gt(e, t);
2628
2622
  const n = document.createElement("div");
2629
2623
  n.className = "color-picker-area", this.colorArea = n;
2630
2624
  const o = document.createElement("div");
@@ -2641,9 +2635,9 @@ class Xt {
2641
2635
  p.className = "color-picker-opacity", this.opacitySlider = p;
2642
2636
  const d = document.createElement("div");
2643
2637
  d.className = "color-picker-opacity-marker", this.opacityMarker = d, p.appendChild(d);
2644
- const u = it((D) => {
2645
- var G;
2646
- this.setColor(D), (G = this.onChange) == null || G.call(this, D, this.currentOpacity);
2638
+ const u = st((B) => {
2639
+ var U;
2640
+ this.setColor(B), (U = this.onChange) == null || U.call(this, B, this.currentOpacity);
2647
2641
  }, this.recentScope);
2648
2642
  this.recentSectionRefresh = u.refresh;
2649
2643
  const g = document.createElement("div");
@@ -2661,7 +2655,7 @@ class Xt {
2661
2655
  const O = document.createElement("div");
2662
2656
  O.className = "color-picker-input-container";
2663
2657
  const k = document.createElement("button");
2664
- return k.className = "color-picker-copy-inside", k.textContent = "Copy", O.appendChild(E), O.appendChild(k), g.appendChild(m), g.appendChild(O), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(p), t.appendChild(u.container), t.appendChild(g), t.addEventListener("click", (D) => D.stopPropagation()), this.bind(n, r, p, E, m, k, l), t;
2658
+ return k.className = "color-picker-copy-inside", k.textContent = "Copy", O.appendChild(E), O.appendChild(k), g.appendChild(m), g.appendChild(O), t.appendChild(e), t.appendChild(n), t.appendChild(a), t.appendChild(p), t.appendChild(u.container), t.appendChild(g), t.addEventListener("click", (B) => B.stopPropagation()), this.bind(n, r, p, E, m, k, l), t;
2665
2659
  }
2666
2660
  createBackdrop() {
2667
2661
  const t = document.createElement("div");
@@ -2733,17 +2727,17 @@ class Xt {
2733
2727
  setColor(t) {
2734
2728
  var o;
2735
2729
  this.currentColor = t;
2736
- const { h: e, s: i, v: s } = $(t), n = e >= 360 ? e % 360 : e;
2730
+ const { h: e, s: i, v: s } = H(t), n = e >= 360 ? e % 360 : e;
2737
2731
  this.hueMarker.style.left = `${n / 360 * 100}%`, this.colorMarker.style.left = `${i * 100}%`, this.colorMarker.style.top = `${(1 - s) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${n}, 100%, 50%))`, this.syncInput(), this.updateOpacityBg(), (o = this.onChange) == null || o.call(this, t, this.currentOpacity);
2738
2732
  }
2739
2733
  syncInput() {
2740
- const t = this.select.value, { h: e, s: i, v: s } = $(this.currentColor);
2734
+ const t = this.select.value, { h: e, s: i, v: s } = H(this.currentColor);
2741
2735
  if (t === "hex") this.input.value = this.currentColor;
2742
2736
  else if (t === "rgb") {
2743
2737
  const { r: n, g: o, b: a } = S(this.currentColor);
2744
2738
  this.input.value = `rgb(${n}, ${o}, ${a})`;
2745
2739
  } else {
2746
- const { hue: n, sat: o, lightness: a } = Gt(e, i, s);
2740
+ const { hue: n, sat: o, lightness: a } = Ut(e, i, s);
2747
2741
  this.input.value = `hsl(${Math.round(n)}, ${Math.round(
2748
2742
  o * 100
2749
2743
  )}%, ${Math.round(a * 100)}%)`;
@@ -2778,7 +2772,7 @@ class Xt {
2778
2772
  open(t, e, i) {
2779
2773
  var E;
2780
2774
  this.currentColor = t, this.currentOpacity = i ?? 100, this.syncInput();
2781
- const { h: s, s: n, v: o } = $(t);
2775
+ const { h: s, s: n, v: o } = H(t);
2782
2776
  this.hueMarker.style.left = `${s / 360 * 100}%`, this.colorMarker.style.left = `${n * 100}%`, this.colorMarker.style.top = `${(1 - o) * 100}%`, this.colorArea.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${s}, 100%, 50%))`, this.updateOpacityBg(), this.opacityMarker.style.left = `${this.currentOpacity}%`, (E = this.recentSectionRefresh) == null || E.call(this), this.isOpen = !0, this.backdrop.style.display = "block", this.backdrop.parentElement || document.body.appendChild(this.backdrop), this.element.style.display = "block", this.element.style.position = "fixed", this.element.style.zIndex = "10002", this.element.style.left = "-9999px", this.element.style.top = "0px", this.element.parentElement || document.body.appendChild(this.element);
2783
2777
  const a = this.element.offsetWidth, l = this.element.offsetHeight, r = e.getBoundingClientRect(), h = window.innerWidth, p = window.innerHeight, d = 16;
2784
2778
  let u = r.right + 8, g = r.top;
@@ -2789,7 +2783,7 @@ class Xt {
2789
2783
  }
2790
2784
  close(t) {
2791
2785
  var e;
2792
- this.isOpen && (this.isOpen = !1, this.backdrop.style.display = "none", this.element.style.display = "none", document.removeEventListener("click", this.outsideClick, !0), document.removeEventListener("keydown", this.keyDown, !0), t && this.recentScope !== "gradient" && (B.addColor(this.currentColor, this.recentScope), (e = this.recentSectionRefresh) == null || e.call(this)));
2786
+ this.isOpen && (this.isOpen = !1, this.backdrop.style.display = "none", this.element.style.display = "none", document.removeEventListener("click", this.outsideClick, !0), document.removeEventListener("keydown", this.keyDown, !0), t && this.recentScope !== "gradient" && (A.addColor(this.currentColor, this.recentScope), (e = this.recentSectionRefresh) == null || e.call(this)));
2793
2787
  }
2794
2788
  getElement() {
2795
2789
  return this.element;
@@ -2830,7 +2824,7 @@ class Zt {
2830
2824
  </div>
2831
2825
  </div>
2832
2826
  `;
2833
- const e = it((i) => {
2827
+ const e = st((i) => {
2834
2828
  this.applyRecentColor(i);
2835
2829
  }, this.recentScope);
2836
2830
  return this.recentSectionRefresh = e.refresh, t.appendChild(e.container), t;
@@ -2854,7 +2848,7 @@ class Zt {
2854
2848
  ".color-picker-color-input"
2855
2849
  ), r = this.container.querySelector(
2856
2850
  ".color-picker-copy-inside"
2857
- ), { h, s: p, v: d } = $(this.currentColor);
2851
+ ), { h, s: p, v: d } = H(this.currentColor);
2858
2852
  s.style.left = `${h / 360 * 100}%`, e.style.left = `${p * 100}%`, e.style.top = `${(1 - d) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${h}, 100%, 50%))`, o.style.left = `${this.currentOpacity}%`, this.updateOpacityBackground(n), this.updateColorInput(a, l), this.setupColorAreaEvents(t, e, s), this.setupHueSliderEvents(
2859
2853
  i,
2860
2854
  s,
@@ -2882,7 +2876,7 @@ class Zt {
2882
2876
  e.value = `rgb(${s.r}, ${s.g}, ${s.b})`;
2883
2877
  break;
2884
2878
  case "hsl":
2885
- const { h: n, s: o, v: a } = $(this.currentColor), l = a * (1 - o / 2), r = l === 0 || l === 1 ? 0 : (a - l) / Math.min(l, 1 - l);
2879
+ const { h: n, s: o, v: a } = H(this.currentColor), l = a * (1 - o / 2), r = l === 0 || l === 1 ? 0 : (a - l) / Math.min(l, 1 - l);
2886
2880
  e.value = `hsl(${Math.round(n)}, ${Math.round(
2887
2881
  r * 100
2888
2882
  )}%, ${Math.round(l * 100)}%)`;
@@ -2903,7 +2897,7 @@ class Zt {
2903
2897
  }
2904
2898
  commitRecentColor() {
2905
2899
  var t;
2906
- B.addColor(this.currentColor, this.recentScope), (t = this.recentSectionRefresh) == null || t.call(this);
2900
+ A.addColor(this.currentColor, this.recentScope), (t = this.recentSectionRefresh) == null || t.call(this);
2907
2901
  }
2908
2902
  setupColorAreaEvents(t, e, i) {
2909
2903
  const s = (n) => {
@@ -2990,7 +2984,7 @@ class Zt {
2990
2984
  }
2991
2985
  parseHexInput(t) {
2992
2986
  const e = t.startsWith("#") ? t : `#${t}`;
2993
- return U(e);
2987
+ return G(e);
2994
2988
  }
2995
2989
  parseRgbInput(t) {
2996
2990
  const e = t.match(
@@ -3033,7 +3027,7 @@ class Zt {
3033
3027
  ".color-picker-hue-marker"
3034
3028
  ), s = this.container.querySelector(
3035
3029
  ".color-picker-opacity"
3036
- ), { h: n, s: o, v: a } = $(this.currentColor);
3030
+ ), { h: n, s: o, v: a } = H(this.currentColor);
3037
3031
  i.style.left = `${n / 360 * 100}%`, e.style.left = `${o * 100}%`, e.style.top = `${(1 - a) * 100}%`, t.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${n}, 100%, 50%))`, this.updateOpacityBackground(s);
3038
3032
  }
3039
3033
  triggerChange() {
@@ -3058,7 +3052,7 @@ class Zt {
3058
3052
  ".color-picker-format-select"
3059
3053
  ), r = this.container.querySelector(
3060
3054
  ".color-picker-color-input"
3061
- ), { h, s: p, v: d } = $(t), u = h >= 360 ? h % 360 : h;
3055
+ ), { h, s: p, v: d } = H(t), u = h >= 360 ? h % 360 : h;
3062
3056
  n.style.left = `${u / 360 * 100}%`, s.style.left = `${p * 100}%`, s.style.top = `${(1 - d) * 100}%`, i.style.background = `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${u}, 100%, 50%))`, o.style.left = `${e}%`, this.updateOpacityBackground(a), this.updateColorInput(l, r);
3063
3057
  }
3064
3058
  }
@@ -3098,11 +3092,11 @@ const V = class V extends w {
3098
3092
  defaultValue() {
3099
3093
  const t = this.originalDefault;
3100
3094
  if (typeof t == "string") {
3101
- const i = H(t);
3095
+ const i = P(t);
3102
3096
  if (i)
3103
- return A(i);
3097
+ return $(i);
3104
3098
  }
3105
- return A(t && typeof t == "object" ? t : {
3099
+ return $(t && typeof t == "object" ? t : {
3106
3100
  type: "linear",
3107
3101
  angle: 90,
3108
3102
  stops: [
@@ -3114,7 +3108,7 @@ const V = class V extends w {
3114
3108
  setValue(t) {
3115
3109
  var i, s;
3116
3110
  let e = null;
3117
- typeof t == "string" ? e = H(t) : t && typeof t == "object" && (e = A(t)), e || (e = this.defaultValue()), this.value = e, this.updateUI(), this.isPopoverOpen && this.refreshPopoverContent(), (i = this.onChange) == null || i.call(this, this.value), (s = this.detectChange) == null || s.call(this, this.value), this.pendingSolidColor = null;
3111
+ typeof t == "string" ? e = P(t) : t && typeof t == "object" && (e = $(t)), e || (e = this.defaultValue()), this.value = e, this.updateUI(), this.isPopoverOpen && this.refreshPopoverContent(), (i = this.onChange) == null || i.call(this, this.value), (s = this.detectChange) == null || s.call(this, this.value), this.pendingSolidColor = null;
3118
3112
  }
3119
3113
  updateUI() {
3120
3114
  if (this.previewEl && this.value)
@@ -3123,7 +3117,7 @@ const V = class V extends w {
3123
3117
  this.previewEl.style.background = dt(t.color, e);
3124
3118
  } else
3125
3119
  this.previewEl.style.background = N(this.value);
3126
- this.inputEl && this.value && !this.isEditing && (this.inputEl.value = Q(this.value));
3120
+ this.inputEl && this.value && !this.isEditing && (this.inputEl.value = tt(this.value));
3127
3121
  }
3128
3122
  cssForTextValue() {
3129
3123
  return this.value ? {
@@ -3145,10 +3139,10 @@ const V = class V extends w {
3145
3139
  const e = document.createElement("div");
3146
3140
  return e.className = "gradient-input-wrapper", this.previewEl = document.createElement("div"), this.previewEl.className = "gradient-mini-preview", this.previewEl.style.background = this.value ? N(this.value) : "linear-gradient(90deg, #a84b4b 0%, #786666 100%)", this.previewEl.addEventListener("mousedown", (i) => {
3147
3141
  i.preventDefault(), i.stopPropagation(), this.openPopover();
3148
- }), this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "gradient-text-input", this.inputEl.placeholder = "Enter gradient CSS or paste color...", this.inputEl.value = this.value ? Q(this.value) : "", this.inputEl.readOnly = !1, this.inputEl.addEventListener("focus", () => {
3142
+ }), this.inputEl = document.createElement("input"), this.inputEl.type = "text", this.inputEl.className = "gradient-text-input", this.inputEl.placeholder = "Enter gradient CSS or paste color...", this.inputEl.value = this.value ? tt(this.value) : "", this.inputEl.readOnly = !1, this.inputEl.addEventListener("focus", () => {
3149
3143
  this.isEditing = !0, this.value && (this.inputEl.value = N(this.value));
3150
3144
  }), this.inputEl.addEventListener("blur", () => {
3151
- this.isEditing = !1, this.value && (this.inputEl.value = Q(this.value));
3145
+ this.isEditing = !1, this.value && (this.inputEl.value = tt(this.value));
3152
3146
  }), this.inputEl.addEventListener(
3153
3147
  "paste",
3154
3148
  (i) => this.handlePaste(i)
@@ -3210,7 +3204,7 @@ const V = class V extends w {
3210
3204
  initialOpacity: e.opacity ?? 100,
3211
3205
  onColorChange: (s, n) => {
3212
3206
  if (this.value) {
3213
- const o = H(s);
3207
+ const o = P(s);
3214
3208
  if (o && o.type !== "solid") {
3215
3209
  this.value = o, this.switchType(o.type);
3216
3210
  return;
@@ -3265,8 +3259,8 @@ const V = class V extends w {
3265
3259
  d.type = "button", d.className = "gradient-add-stop", d.textContent = "+", h.appendChild(p), h.appendChild(d);
3266
3260
  const u = document.createElement("div");
3267
3261
  u.className = "gradient-stops", t.appendChild(h), t.appendChild(u), this.updateStopsList(u);
3268
- const g = it((m) => {
3269
- const f = H(m);
3262
+ const g = st((m) => {
3263
+ const f = P(m);
3270
3264
  f && (this.value = f, this.switchType(f.type), this.updateUI(), this.triggerChange());
3271
3265
  }, "all");
3272
3266
  this.recentGradientRefresh = g.refresh, t.appendChild(g.container), d.addEventListener("click", () => {
@@ -3318,7 +3312,7 @@ const V = class V extends w {
3318
3312
  (n, o) => n.position - o.position
3319
3313
  );
3320
3314
  i.forEach((n, o) => {
3321
- var G, st;
3315
+ var U, nt;
3322
3316
  const a = this.value.stops.findIndex(
3323
3317
  (v, b) => v.position === n.position && v.color === n.color && v.opacity === n.opacity && this.value.stops.slice(0, b).filter(
3324
3318
  (x) => x.position === n.position && x.color === n.color && x.opacity === n.opacity
@@ -3340,7 +3334,7 @@ const V = class V extends w {
3340
3334
  const m = document.createElement("button");
3341
3335
  m.type = "button", m.className = "gstop-color-copy", m.textContent = "Copy", d.appendChild(u), d.appendChild(g), d.appendChild(m);
3342
3336
  const f = document.createElement("button");
3343
- f.type = "button", f.className = "gstop-del", f.innerHTML = Jt, f.disabled = (((st = (G = this.value) == null ? void 0 : G.stops) == null ? void 0 : st.length) || 0) <= 2, r.appendChild(h), r.appendChild(d), r.appendChild(f), e.appendChild(r);
3337
+ f.type = "button", f.className = "gstop-del", f.innerHTML = Jt, f.disabled = (((nt = (U = this.value) == null ? void 0 : U.stops) == null ? void 0 : nt.length) || 0) <= 2, r.appendChild(h), r.appendChild(d), r.appendChild(f), e.appendChild(r);
3344
3338
  const C = document.createElement("span");
3345
3339
  C.className = "gstop-opacity-label", C.textContent = "Opacity";
3346
3340
  const y = document.createElement("div");
@@ -3354,7 +3348,7 @@ const V = class V extends w {
3354
3348
  );
3355
3349
  const k = document.createElement("span");
3356
3350
  k.className = "gstop-opacity-value", k.textContent = `${n.opacity ?? 100}%`, y.appendChild(E), y.appendChild(k);
3357
- const D = new Xt((v, b) => {
3351
+ const B = new Xt((v, b) => {
3358
3352
  g.value = v.replace("#", "").toUpperCase(), u.style.backgroundColor = v, this.value.stops[l].color = v, b !== void 0 && (this.value.stops[l].opacity = b, E.value = String(b), k.textContent = `${b}%`);
3359
3353
  const x = S(v);
3360
3354
  E.style.setProperty(
@@ -3366,7 +3360,7 @@ const V = class V extends w {
3366
3360
  ), this.updateUI(), this.triggerChange();
3367
3361
  }, "solid");
3368
3362
  g.addEventListener("click", (v) => {
3369
- v.preventDefault(), v.stopPropagation(), D.open(n.color, g, n.opacity ?? 100);
3363
+ v.preventDefault(), v.stopPropagation(), B.open(n.color, g, n.opacity ?? 100);
3370
3364
  }), g.addEventListener("input", () => {
3371
3365
  const v = g.value.trim(), b = v.startsWith("#") ? v : `#${v}`;
3372
3366
  if (/^#[0-9A-Fa-f]{6}$/.test(b)) {
@@ -3484,13 +3478,13 @@ const V = class V extends w {
3484
3478
  if (!(!this.popoverEl || !this.isPopoverOpen)) {
3485
3479
  if (this.isPopoverOpen = !1, this.popoverEl.style.display = "none", document.removeEventListener("click", this.onBackgroundClick, !0), document.removeEventListener("keydown", this.handlePopoverKeydown, !0), this.commitPendingSolidColor(), this.value && this.value.type !== "solid") {
3486
3480
  const t = N(this.value);
3487
- B.addColor(t, "gradient");
3481
+ A.addColor(t, "gradient");
3488
3482
  }
3489
3483
  this.previewUpdateTimeout && (clearTimeout(this.previewUpdateTimeout), this.previewUpdateTimeout = null), V.openInstance === this && (V.openInstance = null);
3490
3484
  }
3491
3485
  }
3492
3486
  commitPendingSolidColor() {
3493
- this.pendingSolidColor && (this.solidPicker ? this.solidPicker.commitRecentColor() : B.addColor(this.pendingSolidColor, "solid"), this.pendingSolidColor = null);
3487
+ this.pendingSolidColor && (this.solidPicker ? this.solidPicker.commitRecentColor() : A.addColor(this.pendingSolidColor, "solid"), this.pendingSolidColor = null);
3494
3488
  }
3495
3489
  handlePaste(t) {
3496
3490
  var i;
@@ -3503,7 +3497,7 @@ const V = class V extends w {
3503
3497
  this.parseAndSet(e.value);
3504
3498
  }
3505
3499
  parseAndSet(t) {
3506
- const e = H(t.trim());
3500
+ const e = P(t.trim());
3507
3501
  e && this.setValue(e);
3508
3502
  }
3509
3503
  triggerChange() {
@@ -3527,7 +3521,7 @@ const V = class V extends w {
3527
3521
  }
3528
3522
  };
3529
3523
  V.openInstance = null;
3530
- let ct = V;
3524
+ let K = V;
3531
3525
  const Kt = `
3532
3526
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="19" viewBox="0 0 18 19" fill="none">
3533
3527
  <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"/>
@@ -3549,8 +3543,9 @@ class Ee extends T {
3549
3543
  default: (t == null ? void 0 : t.size) ?? 0,
3550
3544
  suffix: "px"
3551
3545
  }),
3552
- color: new P({
3553
- default: (t == null ? void 0 : t.color) ?? "0, 0, 30"
3546
+ color: new K({
3547
+ title: "Border Color",
3548
+ default: (t == null ? void 0 : t.color) || "#000000"
3554
3549
  }),
3555
3550
  radius: new I({
3556
3551
  title: "Radius",
@@ -3561,15 +3556,20 @@ class Ee extends T {
3561
3556
  }
3562
3557
  });
3563
3558
  }
3564
- /**
3565
- * Optional helper to generate CSS from the current settings.
3566
- */
3559
+ getValues() {
3560
+ const t = super.getValues(), e = this.settings.color.getValue();
3561
+ return {
3562
+ ...t,
3563
+ color: e ? `${e} 1` : t.color
3564
+ };
3565
+ }
3567
3566
  getCssCode() {
3568
- const t = this.settings.color.value ?? "#000000", e = this.settings.radius.value ?? 0, i = this.settings.size.value ?? 0;
3567
+ const t = this.settings.color.getValue() ?? "#000000", e = this.settings.radius.value ?? 0, i = this.settings.size.value ?? 0;
3569
3568
  return `
3570
- border-color: ${t};
3569
+ border-image: ${t} 1;
3571
3570
  border-width: ${i}px;
3572
3571
  border-radius: ${e}px;
3572
+ border-style: solid;
3573
3573
  `;
3574
3574
  }
3575
3575
  }
@@ -3594,10 +3594,11 @@ class be extends T {
3594
3594
  collapsed: i.collapsed,
3595
3595
  settings: (() => {
3596
3596
  const s = {
3597
- color: new P({
3598
- default: i.colorDefault ?? "0, 0, 30"
3597
+ color: new K({
3598
+ title: "Color",
3599
+ default: i.colorDefault ?? "#001E1E"
3599
3600
  }),
3600
- fontFamily: new et({
3601
+ fontFamily: new it({
3601
3602
  title: "Font",
3602
3603
  icon: Qt,
3603
3604
  default: i.fontFamilyDefault ?? "Satoshi",
@@ -3610,7 +3611,7 @@ class be extends T {
3610
3611
  getOptions: i.fontFamilyGetOptions,
3611
3612
  getOptionsAsync: i.fontFamilyGetOptionsAsync
3612
3613
  }),
3613
- fontWeight: new et({
3614
+ fontWeight: new it({
3614
3615
  title: "Weight",
3615
3616
  icon: te,
3616
3617
  default: i.fontWeightDefault ?? "400",
@@ -3642,7 +3643,7 @@ class be extends T {
3642
3643
  }
3643
3644
  getCssCode() {
3644
3645
  var o;
3645
- const t = this.settings.color.value ?? "#000000", e = this.settings.fontFamily.value ?? "Satoshi", i = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, n = ((o = this.settings.align) == null ? void 0 : o.value) ?? "left";
3646
+ const t = this.settings.color.getValue() ?? "#000000", e = this.settings.fontFamily.value ?? "Satoshi", i = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, n = ((o = this.settings.align) == null ? void 0 : o.value) ?? "left";
3646
3647
  return `
3647
3648
  color: ${t};
3648
3649
  font-family: ${e};
@@ -3651,6 +3652,18 @@ class be extends T {
3651
3652
  text-align: ${n};
3652
3653
  `;
3653
3654
  }
3655
+ getTextGradientCss() {
3656
+ var a;
3657
+ const t = this.settings.color.getCSSForText(), e = this.settings.fontFamily.value ?? "Satoshi", i = this.settings.fontWeight.value ?? "bold", s = this.settings.fontSize.value ?? 12, n = ((a = this.settings.align) == null ? void 0 : a.value) ?? "left";
3658
+ return `
3659
+ ${Object.entries(t).map(([l, r]) => `${l}: ${r};`).join(`
3660
+ `)}
3661
+ font-family: ${e};
3662
+ font-weight: ${i};
3663
+ font-size: ${s}px;
3664
+ text-align: ${n};
3665
+ `;
3666
+ }
3654
3667
  }
3655
3668
  class _ extends w {
3656
3669
  constructor(t) {
@@ -3763,7 +3776,7 @@ class xe extends T {
3763
3776
  opacity: new St({
3764
3777
  default: (t == null ? void 0 : t.opacity) ?? 100
3765
3778
  }),
3766
- backgroundColor: new P({
3779
+ backgroundColor: new R({
3767
3780
  default: (t == null ? void 0 : t.backgroundColor) ?? "0, 0, 30"
3768
3781
  })
3769
3782
  }
@@ -3796,10 +3809,10 @@ export {
3796
3809
  Ee as BorderSettingSet,
3797
3810
  ce as ButtonSetting,
3798
3811
  M as ColorSetting,
3799
- P as ColorWithOpacitySetting,
3812
+ R as ColorWithOpacitySetting,
3800
3813
  he as DimensionSetting,
3801
3814
  me as GapSetting,
3802
- ct as GradientSetting,
3815
+ K as GradientSetting,
3803
3816
  be as HeaderTypographySettingSet,
3804
3817
  pe as HeightSetting,
3805
3818
  re as HtmlSetting,
@@ -3810,7 +3823,7 @@ export {
3810
3823
  I as NumberSetting,
3811
3824
  St as OpacitySetting,
3812
3825
  ue as SelectApiSettings,
3813
- et as SelectSetting,
3826
+ it as SelectSetting,
3814
3827
  w as Setting,
3815
3828
  T as SettingGroup,
3816
3829
  xt as StringSetting,
@@ -3822,8 +3835,8 @@ export {
3822
3835
  le as asSettingGroupWithSettings,
3823
3836
  wt as createSettingGroup,
3824
3837
  ae as createTabSettingGroup,
3825
- R as isSetting,
3826
- ot as isSettingChild,
3838
+ D as isSetting,
3839
+ at as isSettingChild,
3827
3840
  L as isSettingGroup,
3828
3841
  j as iterateSettings
3829
3842
  };