v0.0.7, fix minor frontend labels bugs

README.md

@@ -6,7 +6,7 @@ tags:
 - textbox
 - editing
 - color
-title: gradio_highlightedtextbox v0.0.6
+title: gradio_highlightedtextbox v0.0.7
 colorFrom: indigo
 colorTo: green
 sdk: docker

src/backend/gradio_highlightedtextbox/templates/component/index.js

@@ -14,7 +14,7 @@ const {
   insert: fe,
   safe_not_equal: rl,
   set_data: Ue,
-  space: Fe,
+  space: He,
   text: Xe,
   toggle_class: V,
   transition_in: ul,
@@ -34,25 +34,26 @@ function lt(l) {
     _[f] = nt(tt(l, r, f));
   return {
     c() {
-      e = ce("span"), e.textContent = "·", t = Fe(), n = ce("div"), i = ce("span"), s = Xe(
+      e = ce("span"), e.textContent = "·", t = He(), n = ce("div"), i = ce("span"), s = Xe(
         /*legend_label*/
         l[3]
-      ), o = Fe();
+      ), o = He();
       for (let f = 0; f < _.length; f += 1)
         _[f].c();
-      U(e, "class", "legend-separator svelte-deja93"), V(e, "hide", !/*show_legend*/
-      l[1]), V(
+      U(e, "class", "legend-separator svelte-vm3q5z"), V(e, "hide", !/*show_legend*/
+      l[1] || !/*show_label*/
+      l[0]), V(
         e,
         "has-info",
         /*info*/
         l[5] != null
-      ), U(i, "class", "svelte-deja93"), V(i, "hide", !/*show_legend_label*/
+      ), U(i, "class", "svelte-vm3q5z"), V(i, "hide", !/*show_legend_label*/
       l[2]), V(
         i,
         "has-info",
         /*info*/
         l[5] != null
-      ), U(n, "class", "category-legend svelte-deja93"), U(n, "data-testid", "highlighted-text:category-legend"), V(n, "hide", !/*show_legend*/
+      ), U(n, "class", "category-legend svelte-vm3q5z"), U(n, "data-testid", "highlighted-text:category-legend"), V(n, "hide", !/*show_legend*/
       l[1]);
     },
     m(f, a) {
@@ -61,9 +62,10 @@ function lt(l) {
         _[u] && _[u].m(n, null);
     },
     p(f, a) {
-      if (a & /*show_legend*/
-      2 && V(e, "hide", !/*show_legend*/
-      f[1]), a & /*info*/
+      if (a & /*show_legend, show_label*/
+      3 && V(e, "hide", !/*show_legend*/
+      f[1] || !/*show_label*/
+      f[0]), a & /*info*/
       32 && V(
         e,
         "has-info",
@@ -82,8 +84,8 @@ function lt(l) {
         "has-info",
         /*info*/
         f[5] != null
-      ), a & /*Object, _color_map*/
-      16) {
+      ), a & /*Object, _color_map, info*/
+      48) {
         r = et(Object.entries(
           /*_color_map*/
           f[4]
@@ -113,8 +115,13 @@ function nt(l) {
   ), n, i, s;
   return {
     c() {
-      e = ce("div"), n = Xe(t), i = Fe(), U(e, "class", "category-label svelte-deja93"), U(e, "style", s = "background-color:" + /*color*/
-      l[9].secondary);
+      e = ce("div"), n = Xe(t), i = He(), U(e, "class", "category-label svelte-vm3q5z"), U(e, "style", s = "background-color:" + /*color*/
+      l[9].secondary), V(
+        e,
+        "has-info",
+        /*info*/
+        l[5] != null
+      );
     },
     m(o, r) {
       fe(o, e, r), se(e, n), se(e, i);
@@ -124,7 +131,13 @@ function nt(l) {
       16 && t !== (t = /*category*/
       o[8] + "") && Ue(n, t), r & /*_color_map*/
       16 && s !== (s = "background-color:" + /*color*/
-      o[9].secondary) && U(e, "style", s);
+      o[9].secondary) && U(e, "style", s), r & /*info*/
+      32 && V(
+        e,
+        "has-info",
+        /*info*/
+        o[5] != null
+      );
     },
     d(o) {
       o && oe(e);
@@ -138,7 +151,7 @@ function it(l) {
       e = ce("div"), t = Xe(
         /*info*/
         l[5]
-      ), U(e, "class", "title-with-highlights-info svelte-deja93");
+      ), U(e, "class", "title-with-highlights-info svelte-vm3q5z");
     },
     m(n, i) {
       fe(n, e, i), se(e, t);
@@ -177,14 +190,14 @@ function ml(l) {
   );
   return {
     c() {
-      e = ce("div"), t = ce("span"), f && f.c(), n = Fe(), a && a.c(), s = Fe(), u && u.c(), o = ol(), U(t, "data-testid", "block-info"), U(t, "class", "svelte-deja93"), V(t, "sr-only", !/*show_label*/
+      e = ce("div"), t = ce("span"), f && f.c(), n = He(), a && a.c(), s = He(), u && u.c(), o = ol(), U(t, "data-testid", "block-info"), U(t, "class", "svelte-vm3q5z"), V(t, "sr-only", !/*show_label*/
       l[0]), V(t, "hide", !/*show_label*/
       l[0]), V(
         t,
         "has-info",
         /*info*/
         l[5] != null
-      ), U(e, "class", "title-container svelte-deja93");
+      ), U(e, "class", "title-container svelte-vm3q5z");
     },
     m(c, m) {
       fe(c, e, m), se(e, t), f && f.m(t, null), se(e, n), a && a.m(e, null), fe(c, s, m), u && u.m(c, m), fe(c, o, m), r = !0;
@@ -251,7 +264,7 @@ function hl(l, e, t) {
     n
   ];
 }
-class gl extends nl {
+class bl extends nl {
   constructor(e) {
     super(), _l(this, e, hl, ml, rl, {
       show_label: 0,
@@ -264,7 +277,7 @@ class gl extends nl {
   }
 }
 const {
-  SvelteComponent: bl,
+  SvelteComponent: gl,
   append: wl,
   attr: te,
   detach: kl,
@@ -291,7 +304,7 @@ function Cl(l) {
     }
   };
 }
-class ql extends bl {
+class ql extends gl {
   constructor(e) {
     super(), vl(this, e, null, Cl, yl, {});
   }
@@ -302,19 +315,19 @@ const {
   attr: re,
   detach: Ll,
   init: Sl,
-  insert: jl,
+  insert: Fl,
   noop: Oe,
-  safe_not_equal: Fl,
+  safe_not_equal: Hl,
   svg_element: Re
 } = window.__gradio__svelte__internal;
-function Hl(l) {
+function Ml(l) {
   let e, t, n;
   return {
     c() {
       e = Re("svg"), t = Re("path"), n = Re("path"), re(t, "fill", "currentColor"), re(t, "d", "M28 10v18H10V10h18m0-2H10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2Z"), re(n, "fill", "currentColor"), re(n, "d", "M4 18H2V4a2 2 0 0 1 2-2h14v2H4Z"), re(e, "xmlns", "http://www.w3.org/2000/svg"), re(e, "viewBox", "0 0 33 33"), re(e, "color", "currentColor");
     },
     m(i, s) {
-      jl(i, e, s), ot(e, t), ot(e, n);
+      Fl(i, e, s), ot(e, t), ot(e, n);
     },
     p: Oe,
     i: Oe,
@@ -324,26 +337,26 @@ function Hl(l) {
     }
   };
 }
-class Ml extends Tl {
+class jl extends Tl {
   constructor(e) {
-    super(), Sl(this, e, null, Hl, Fl, {});
+    super(), Sl(this, e, null, Ml, Hl, {});
   }
 }
-function ze() {
+function Ae() {
 }
 const Nl = (l) => l;
 function Vl(l, e) {
   return l != l ? e == e : l !== e || l && typeof l == "object" || typeof l == "function";
 }
 const Dt = typeof window < "u";
-let ft = Dt ? () => window.performance.now() : () => Date.now(), It = Dt ? (l) => requestAnimationFrame(l) : ze;
+let ft = Dt ? () => window.performance.now() : () => Date.now(), It = Dt ? (l) => requestAnimationFrame(l) : Ae;
 const qe = /* @__PURE__ */ new Set();
 function Wt(l) {
   qe.forEach((e) => {
     e.c(l) || (qe.delete(e), e.f());
   }), qe.size !== 0 && It(Wt);
 }
-function Al(l) {
+function zl(l) {
   let e;
   return qe.size === 0 && It(Wt), {
     promise: new Promise((t) => {
@@ -354,7 +367,7 @@ function Al(l) {
     }
   };
 }
-function zl(l, { delay: e = 0, duration: t = 400, easing: n = Nl } = {}) {
+function Al(l, { delay: e = 0, duration: t = 400, easing: n = Nl } = {}) {
   const i = +getComputedStyle(l).opacity;
   return {
     delay: e,
@@ -364,7 +377,7 @@ function zl(l, { delay: e = 0, duration: t = 400, easing: n = Nl } = {}) {
   };
 }
 const ve = [];
-function Bl(l, e = ze) {
+function Bl(l, e = Ae) {
   let t;
   const n = /* @__PURE__ */ new Set();
   function i(r) {
@@ -382,9 +395,9 @@ function Bl(l, e = ze) {
   function s(r) {
     i(r(l));
   }
-  function o(r, _ = ze) {
+  function o(r, _ = Ae) {
     const f = [r, _];
-    return n.add(f), n.size === 1 && (t = e(i, s) || ze), r(l), () => {
+    return n.add(f), n.size === 1 && (t = e(i, s) || Ae), r(l), () => {
       n.delete(f), n.size === 0 && t && (t(), t = null);
     };
   }
@@ -417,7 +430,7 @@ function _t(l, e = {}) {
   function y(T, L = {}) {
     a = T;
     const C = _ = {};
-    return l == null || L.hard || S.stiffness >= 1 && S.damping >= 1 ? (m = !0, o = ft(), f = T, t.set(l = a), Promise.resolve()) : (L.soft && (c = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), u = 0), r || (o = ft(), m = !1, r = Al((d) => {
+    return l == null || L.hard || S.stiffness >= 1 && S.damping >= 1 ? (m = !0, o = ft(), f = T, t.set(l = a), Promise.resolve()) : (L.soft && (c = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), u = 0), r || (o = ft(), m = !1, r = zl((d) => {
       if (m)
         return m = !1, r = null, !1;
       u = Math.min(u + c, 1);
@@ -426,8 +439,8 @@ function _t(l, e = {}) {
         opts: S,
         settled: !0,
         dt: (d - o) * 60 / 1e3
-      }, F = Ie(p, f, l, a);
-      return o = d, f = l, t.set(l = F), p.settled && (r = null), !p.settled;
+      }, H = Ie(p, f, l, a);
+      return o = d, f = l, t.set(l = H), p.settled && (r = null), !p.settled;
     })), new Promise((d) => {
       r.promise.then(() => {
         C === _ && d();
@@ -826,7 +839,7 @@ const {
   create_in_transition: Wl,
   destroy_component: Je,
   detach: me,
-  element: He,
+  element: Me,
   empty: Ul,
   group_outros: Xt,
   init: Xl,
@@ -837,9 +850,9 @@ const {
   run_all: Yl,
   safe_not_equal: Gl,
   set_data: Jl,
-  space: gt,
+  space: bt,
   text: Kl,
-  toggle_class: bt,
+  toggle_class: gt,
   transition_in: ne,
   transition_out: de
 } = window.__gradio__svelte__internal, { beforeUpdate: Ql, afterUpdate: xl, createEventDispatcher: $l } = window.__gradio__svelte__internal;
@@ -903,9 +916,9 @@ function wt(l) {
 }
 function tn(l) {
   let e, t, n, i, s;
-  return t = new Ml({}), {
+  return t = new jl({}), {
     c() {
-      e = He("button"), Ge(t.$$.fragment), B(e, "aria-label", "Copy"), B(e, "aria-roledescription", "Copy text"), B(e, "class", "svelte-14ssfqr");
+      e = Me("button"), Ge(t.$$.fragment), B(e, "aria-label", "Copy"), B(e, "aria-roledescription", "Copy text"), B(e, "class", "svelte-14ssfqr");
     },
     m(o, r) {
       he(o, e, r), Ke(t, e, null), n = !0, i || (s = G(
@@ -931,7 +944,7 @@ function ln(l) {
   let e, t, n, i;
   return t = new ql({}), {
     c() {
-      e = He("button"), Ge(t.$$.fragment), B(e, "aria-label", "Copied"), B(e, "aria-roledescription", "Text copied"), B(e, "class", "svelte-14ssfqr");
+      e = Me("button"), Ge(t.$$.fragment), B(e, "aria-label", "Copied"), B(e, "aria-roledescription", "Text copied"), B(e, "class", "svelte-14ssfqr");
     },
     m(s, o) {
       he(s, e, o), Ke(t, e, null), i = !0;
@@ -939,7 +952,7 @@ function ln(l) {
     p: Yt,
     i(s) {
       i || (ne(t.$$.fragment, s), s && (n || Ye(() => {
-        n = Wl(e, zl, { duration: 300 }), n.start();
+        n = Wl(e, Al, { duration: 300 }), n.start();
       })), i = !0);
     },
     o(s) {
@@ -954,7 +967,7 @@ function nn(l) {
   let e, t, n;
   return {
     c() {
-      e = He("div"), B(e, "class", "textfield svelte-14ssfqr"), B(e, "data-testid", "highlighted-textbox"), B(e, "contenteditable", "true"), /*el_text*/
+      e = Me("div"), B(e, "class", "textfield svelte-14ssfqr"), B(e, "data-testid", "highlighted-textbox"), B(e, "contenteditable", "true"), /*el_text*/
       (l[11] === void 0 || /*marked_el_text*/
       l[9] === void 0) && Ye(() => (
         /*div_input_handler_1*/
@@ -1035,7 +1048,7 @@ function sn(l) {
   let e, t, n;
   return {
     c() {
-      e = He("div"), B(e, "class", "textfield svelte-14ssfqr"), B(e, "data-testid", "highlighted-textbox"), B(e, "contenteditable", "false"), /*el_text*/
+      e = Me("div"), B(e, "class", "textfield svelte-14ssfqr"), B(e, "data-testid", "highlighted-textbox"), B(e, "contenteditable", "false"), /*el_text*/
       (l[11] === void 0 || /*marked_el_text*/
       l[9] === void 0) && Ye(() => (
         /*div_input_handler*/
@@ -1070,16 +1083,12 @@ function sn(l) {
 }
 function on(l) {
   let e, t, n, i, s;
-  t = new gl({
+  t = new bl({
     props: {
       show_label: (
         /*show_label*/
         l[3]
       ),
-      info: (
-        /*info*/
-        l[2]
-      ),
       show_legend: (
         /*show_legend*/
         l[4]
@@ -1096,6 +1105,10 @@ function on(l) {
         /*_color_map*/
         l[12]
       ),
+      info: (
+        /*info*/
+        l[2]
+      ),
       $$slots: { default: [en] },
       $$scope: { ctx: l }
     }
@@ -1113,7 +1126,7 @@ function on(l) {
   let _ = r(l), f = _(l);
   return {
     c() {
-      e = He("label"), Ge(t.$$.fragment), n = gt(), o && o.c(), i = gt(), f.c(), B(e, "class", "svelte-14ssfqr"), bt(
+      e = Me("label"), Ge(t.$$.fragment), n = bt(), o && o.c(), i = bt(), f.c(), B(e, "class", "svelte-14ssfqr"), gt(
         e,
         "container",
         /*container*/
@@ -1127,9 +1140,7 @@ function on(l) {
       const c = {};
       u[0] & /*show_label*/
       8 && (c.show_label = /*show_label*/
-      a[3]), u[0] & /*info*/
-      4 && (c.info = /*info*/
-      a[2]), u[0] & /*show_legend*/
+      a[3]), u[0] & /*show_legend*/
       16 && (c.show_legend = /*show_legend*/
       a[4]), u[0] & /*show_legend_label*/
       32 && (c.show_legend_label = /*show_legend_label*/
@@ -1137,14 +1148,16 @@ function on(l) {
       2 && (c.legend_label = /*legend_label*/
       a[1]), u[0] & /*_color_map*/
       4096 && (c._color_map = /*_color_map*/
-      a[12]), u[0] & /*label*/
+      a[12]), u[0] & /*info*/
+      4 && (c.info = /*info*/
+      a[2]), u[0] & /*label*/
       1 | u[1] & /*$$scope*/
       512 && (c.$$scope = { dirty: u, ctx: a }), t.$set(c), /*show_copy_button*/
       a[7] ? o ? (o.p(a, u), u[0] & /*show_copy_button*/
       128 && ne(o, 1)) : (o = wt(a), o.c(), ne(o, 1), o.m(e, i)) : o && (Xt(), de(o, 1, 1, () => {
         o = null;
       }), Ut()), _ === (_ = r(a)) && f ? f.p(a, u) : (f.d(1), f = _(a), f && (f.c(), f.m(e, null))), (!s || u[0] & /*container*/
-      64) && bt(
+      64) && gt(
         e,
         "container",
         /*container*/
@@ -1174,37 +1187,37 @@ function fn(l) {
 }
 function an(l, e, t) {
   const n = typeof document < "u";
-  let { value: i = [] } = e, { value_is_output: s = !1 } = e, { label: o } = e, { legend_label: r } = e, { info: _ = void 0 } = e, { show_label: f = !0 } = e, { show_legend: a = !1 } = e, { show_legend_label: u = !1 } = e, { container: c = !0 } = e, { color_map: m = {} } = e, { show_copy_button: y = !1 } = e, { disabled: S } = e, T, L = "", C = "", d, p = !m || Object.keys(m).length === 0 ? {} : m, F = {}, g = !1, R;
+  let { value: i = [] } = e, { value_is_output: s = !1 } = e, { label: o } = e, { legend_label: r } = e, { info: _ = void 0 } = e, { show_label: f = !0 } = e, { show_legend: a = !1 } = e, { show_legend_label: u = !1 } = e, { container: c = !0 } = e, { color_map: m = {} } = e, { show_copy_button: y = !1 } = e, { disabled: S } = e, T, L = "", C = "", d, p = !m || Object.keys(m).length === 0 ? {} : m, H = {}, b = !1, R;
   function Q() {
     for (let h in p)
-      i.map(([N, M]) => M).includes(h) || delete p[h];
+      i.map(([N, j]) => j).includes(h) || delete p[h];
     if (i.length > 0) {
       for (let [h, N] of i)
         if (N !== null && !(N in p)) {
-          let M = Pl(Object.keys(p).length);
-          p[N] = M;
+          let j = Pl(Object.keys(p).length);
+          p[N] = j;
         }
     }
-    t(12, F = Zl(p, n, d));
+    t(12, H = Zl(p, n, d));
   }
   function E(h) {
-    console.log(i), console.log(F), i.length > 0 && h && (t(11, L = i.map(([N, M]) => N).join(" ")), t(9, C = i.map(([N, M]) => M !== null ? `<mark class="hl ${M}" style="background-color:${F[M].secondary}">${N}</mark>` : N).join(" ") + " "));
+    i.length > 0 && h && (t(11, L = i.map(([N, j]) => N).join(" ")), t(9, C = i.map(([N, j]) => j !== null ? `<mark class="hl ${j}" style="background-color:${H[j].secondary}">${N}</mark>` : N).join(" ") + " "));
   }
   const P = $l();
   Ql(() => {
     T && T.offsetHeight + T.scrollTop > T.scrollHeight - 100;
   });
   function X() {
-    P("change", C), s || P("input"), A();
+    P("change", C), s || P("input"), z();
   }
   xl(() => {
     Q(), E(s), t(17, s = !1);
   });
-  function ge() {
-    let h = [], N = "", M = null, ee = !1, ke = "";
+  function be() {
+    let h = [], N = "", j = null, ee = !1, ke = "";
     for (let ae = 0; ae < C.length; ae++) {
       let _e = C[ae];
-      _e === "<" ? (ee = !0, N && h.push([N, M]), N = "", M = null) : _e === ">" ? (ee = !1, ke.startsWith("mark") && (M = fn([
+      _e === "<" ? (ee = !0, N && h.push([N, j]), N = "", j = null) : _e === ">" ? (ee = !1, ke.startsWith("mark") && (j = fn([
         ke,
         "access",
         (Y) => Y.match,
@@ -1214,42 +1227,42 @@ function an(l, e, t) {
         (Y) => Y[1]
       ]) || null), ke = "") : ee ? ke += _e : N += _e;
     }
-    N && h.push([N, M]), t(16, i = h);
+    N && h.push([N, j]), t(16, i = h);
   }
   async function D() {
     "clipboard" in navigator && (await navigator.clipboard.writeText(L), x());
   }
   function x() {
-    t(13, g = !0), R && clearTimeout(R), R = setTimeout(
+    t(13, b = !0), R && clearTimeout(R), R = setTimeout(
       () => {
-        t(13, g = !1);
+        t(13, b = !1);
       },
       1e3
     );
   }
-  function A() {
+  function z() {
     const h = window.getSelection(), N = h.anchorOffset;
     if (h.rangeCount > 0) {
-      var M = h.getRangeAt(0).commonAncestorContainer.parentElement;
-      if (M && M.tagName.toLowerCase() === "mark") {
-        const tl = M.textContent;
-        var ee = M.parentElement, ke = document.createTextNode(tl);
-        ee.replaceChild(ke, M), t(9, C = ee.innerHTML);
+      var j = h.getRangeAt(0).commonAncestorContainer.parentElement;
+      if (j && j.tagName.toLowerCase() === "mark") {
+        const tl = j.textContent;
+        var ee = j.parentElement, ke = document.createTextNode(tl);
+        ee.replaceChild(ke, j), t(9, C = ee.innerHTML);
         var ae = document.createRange(), _e = window.getSelection();
         const ll = N + Rl(ee);
         var Y = Dl(ee, ll);
         ae.setStart(Y.node, Y.offset), ae.setEnd(Y.node, Y.offset), _e.removeAllRanges(), _e.addRange(ae);
       }
     }
-    ge(), P("change", C);
+    be(), P("change", C);
   }
-  function be(h) {
+  function ge(h) {
     pe.call(this, l, h);
   }
-  function b(h) {
+  function g(h) {
     pe.call(this, l, h);
   }
-  function Me(h) {
+  function je(h) {
     pe.call(this, l, h);
   }
   function Ne(h) {
@@ -1295,16 +1308,16 @@ function an(l, e, t) {
     C,
     T,
     L,
-    F,
-    g,
+    H,
+    b,
     D,
-    A,
+    z,
     i,
     s,
     m,
-    be,
-    b,
-    Me,
+    ge,
+    g,
+    je,
     Ne,
     we,
     Ee,
@@ -1348,13 +1361,13 @@ const {
   detach: dn,
   element: mn,
   get_all_dirty_from_scope: hn,
-  get_slot_changes: gn,
-  get_spread_update: bn,
+  get_slot_changes: bn,
+  get_spread_update: gn,
   init: wn,
   insert: kn,
   safe_not_equal: vn,
   set_dynamic_element_data: kt,
-  set_style: z,
+  set_style: A,
   toggle_class: le,
   transition_in: Gt,
   transition_out: Jt,
@@ -1413,7 +1426,7 @@ function yn(l) {
         l[5] === "focus"
       ), le(e, "hide-container", !/*explicit_call*/
       l[8] && !/*container*/
-      l[9]), z(
+      l[9]), A(
         e,
         "height",
         /*get_dimension*/
@@ -1421,7 +1434,7 @@ function yn(l) {
           /*height*/
           l[0]
         )
-      ), z(e, "width", typeof /*width*/
+      ), A(e, "width", typeof /*width*/
       l[1] == "number" ? `calc(min(${/*width*/
       l[1]}px, 100%))` : (
         /*get_dimension*/
@@ -1429,23 +1442,23 @@ function yn(l) {
           /*width*/
           l[1]
         )
-      )), z(
+      )), A(
         e,
         "border-style",
         /*variant*/
         l[4]
-      ), z(
+      ), A(
         e,
         "overflow",
         /*allow_overflow*/
         l[11] ? "visible" : "hidden"
-      ), z(
+      ), A(
         e,
         "flex-grow",
         /*scale*/
         l[12]
-      ), z(e, "min-width", `calc(min(${/*min_width*/
-      l[13]}px, 100%))`), z(e, "border-width", "var(--block-border-width)");
+      ), A(e, "min-width", `calc(min(${/*min_width*/
+      l[13]}px, 100%))`), A(e, "border-width", "var(--block-border-width)");
     },
     m(_, f) {
       kn(_, e, f), s && s.m(e, null), n = !0;
@@ -1458,7 +1471,7 @@ function yn(l) {
         _,
         /*$$scope*/
         _[17],
-        n ? gn(
+        n ? bn(
           i,
           /*$$scope*/
           _[17],
@@ -1472,7 +1485,7 @@ function yn(l) {
       ), kt(
         /*tag*/
         _[14]
-      )(e, r = bn(o, [
+      )(e, r = gn(o, [
         (!n || f & /*test_id*/
         128) && { "data-testid": (
           /*test_id*/
@@ -1504,7 +1517,7 @@ function yn(l) {
       ), le(e, "hide-container", !/*explicit_call*/
       _[8] && !/*container*/
       _[9]), f & /*height*/
-      1 && z(
+      1 && A(
         e,
         "height",
         /*get_dimension*/
@@ -1513,7 +1526,7 @@ function yn(l) {
           _[0]
         )
       ), f & /*width*/
-      2 && z(e, "width", typeof /*width*/
+      2 && A(e, "width", typeof /*width*/
       _[1] == "number" ? `calc(min(${/*width*/
       _[1]}px, 100%))` : (
         /*get_dimension*/
@@ -1522,25 +1535,25 @@ function yn(l) {
           _[1]
         )
       )), f & /*variant*/
-      16 && z(
+      16 && A(
         e,
         "border-style",
         /*variant*/
         _[4]
       ), f & /*allow_overflow*/
-      2048 && z(
+      2048 && A(
         e,
         "overflow",
         /*allow_overflow*/
         _[11] ? "visible" : "hidden"
       ), f & /*scale*/
-      4096 && z(
+      4096 && A(
         e,
         "flex-grow",
         /*scale*/
         _[12]
       ), f & /*min_width*/
-      8192 && z(e, "min-width", `calc(min(${/*min_width*/
+      8192 && A(e, "min-width", `calc(min(${/*min_width*/
       _[13]}px, 100%))`);
     },
     i(_) {
@@ -1583,16 +1596,16 @@ function Cn(l) {
 }
 function qn(l, e, t) {
   let { $$slots: n = {}, $$scope: i } = e, { height: s = void 0 } = e, { width: o = void 0 } = e, { elem_id: r = "" } = e, { elem_classes: _ = [] } = e, { variant: f = "solid" } = e, { border_mode: a = "base" } = e, { padding: u = !0 } = e, { type: c = "normal" } = e, { test_id: m = void 0 } = e, { explicit_call: y = !1 } = e, { container: S = !0 } = e, { visible: T = !0 } = e, { allow_overflow: L = !0 } = e, { scale: C = null } = e, { min_width: d = 0 } = e, p = c === "fieldset" ? "fieldset" : "div";
-  const F = (g) => {
-    if (g !== void 0) {
-      if (typeof g == "number")
-        return g + "px";
-      if (typeof g == "string")
-        return g;
+  const H = (b) => {
+    if (b !== void 0) {
+      if (typeof b == "number")
+        return b + "px";
+      if (typeof b == "string")
+        return b;
     }
   };
-  return l.$$set = (g) => {
-    "height" in g && t(0, s = g.height), "width" in g && t(1, o = g.width), "elem_id" in g && t(2, r = g.elem_id), "elem_classes" in g && t(3, _ = g.elem_classes), "variant" in g && t(4, f = g.variant), "border_mode" in g && t(5, a = g.border_mode), "padding" in g && t(6, u = g.padding), "type" in g && t(16, c = g.type), "test_id" in g && t(7, m = g.test_id), "explicit_call" in g && t(8, y = g.explicit_call), "container" in g && t(9, S = g.container), "visible" in g && t(10, T = g.visible), "allow_overflow" in g && t(11, L = g.allow_overflow), "scale" in g && t(12, C = g.scale), "min_width" in g && t(13, d = g.min_width), "$$scope" in g && t(17, i = g.$$scope);
+  return l.$$set = (b) => {
+    "height" in b && t(0, s = b.height), "width" in b && t(1, o = b.width), "elem_id" in b && t(2, r = b.elem_id), "elem_classes" in b && t(3, _ = b.elem_classes), "variant" in b && t(4, f = b.variant), "border_mode" in b && t(5, a = b.border_mode), "padding" in b && t(6, u = b.padding), "type" in b && t(16, c = b.type), "test_id" in b && t(7, m = b.test_id), "explicit_call" in b && t(8, y = b.explicit_call), "container" in b && t(9, S = b.container), "visible" in b && t(10, T = b.visible), "allow_overflow" in b && t(11, L = b.allow_overflow), "scale" in b && t(12, C = b.scale), "min_width" in b && t(13, d = b.min_width), "$$scope" in b && t(17, i = b.$$scope);
   }, [
     s,
     o,
@@ -1609,7 +1622,7 @@ function qn(l, e, t) {
     C,
     d,
     p,
-    F,
+    H,
     c,
     i,
     n
@@ -1649,11 +1662,11 @@ const {
   attr: q,
   component_subscribe: vt,
   detach: Sn,
-  element: jn,
-  init: Fn,
-  insert: Hn,
+  element: Fn,
+  init: Hn,
+  insert: Mn,
   noop: pt,
-  safe_not_equal: Mn,
+  safe_not_equal: jn,
   set_style: Ve,
   svg_element: W,
   toggle_class: yt
@@ -1662,7 +1675,7 @@ function Vn(l) {
   let e, t, n, i, s, o, r, _, f, a, u, c;
   return {
     c() {
-      e = jn("div"), t = W("svg"), n = W("g"), i = W("path"), s = W("path"), o = W("path"), r = W("path"), _ = W("g"), f = W("path"), a = W("path"), u = W("path"), c = W("path"), q(i, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), q(i, "fill", "#FF7C00"), q(i, "fill-opacity", "0.4"), q(i, "class", "svelte-43sxxs"), q(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), q(s, "fill", "#FF7C00"), q(s, "class", "svelte-43sxxs"), q(o, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), q(o, "fill", "#FF7C00"), q(o, "fill-opacity", "0.4"), q(o, "class", "svelte-43sxxs"), q(r, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), q(r, "fill", "#FF7C00"), q(r, "class", "svelte-43sxxs"), Ve(n, "transform", "translate(" + /*$top*/
+      e = Fn("div"), t = W("svg"), n = W("g"), i = W("path"), s = W("path"), o = W("path"), r = W("path"), _ = W("g"), f = W("path"), a = W("path"), u = W("path"), c = W("path"), q(i, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), q(i, "fill", "#FF7C00"), q(i, "fill-opacity", "0.4"), q(i, "class", "svelte-43sxxs"), q(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), q(s, "fill", "#FF7C00"), q(s, "class", "svelte-43sxxs"), q(o, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), q(o, "fill", "#FF7C00"), q(o, "fill-opacity", "0.4"), q(o, "class", "svelte-43sxxs"), q(r, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), q(r, "fill", "#FF7C00"), q(r, "class", "svelte-43sxxs"), Ve(n, "transform", "translate(" + /*$top*/
       l[1][0] + "px, " + /*$top*/
       l[1][1] + "px)"), q(f, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), q(f, "fill", "#FF7C00"), q(f, "fill-opacity", "0.4"), q(f, "class", "svelte-43sxxs"), q(a, "d", "M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"), q(a, "fill", "#FF7C00"), q(a, "class", "svelte-43sxxs"), q(u, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), q(u, "fill", "#FF7C00"), q(u, "fill-opacity", "0.4"), q(u, "class", "svelte-43sxxs"), q(c, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), q(c, "fill", "#FF7C00"), q(c, "class", "svelte-43sxxs"), Ve(_, "transform", "translate(" + /*$bottom*/
       l[2][0] + "px, " + /*$bottom*/
@@ -1674,7 +1687,7 @@ function Vn(l) {
       );
     },
     m(m, y) {
-      Hn(m, e, y), I(e, t), I(t, n), I(n, i), I(n, s), I(n, o), I(n, r), I(t, _), I(_, f), I(_, a), I(_, u), I(_, c);
+      Mn(m, e, y), I(e, t), I(t, n), I(n, i), I(n, s), I(n, o), I(n, r), I(t, _), I(_, f), I(_, a), I(_, u), I(_, c);
     },
     p(m, [y]) {
       y & /*$top*/
@@ -1698,7 +1711,7 @@ function Vn(l) {
     }
   };
 }
-function An(l, e, t) {
+function zn(l, e, t) {
   let n, i, { margin: s = !0 } = e;
   const o = _t([0, 0]);
   vt(l, o, (c) => t(1, n = c));
@@ -1718,9 +1731,9 @@ function An(l, e, t) {
     "margin" in c && t(0, s = c.margin);
   }, [s, n, i, o, r];
 }
-class zn extends Ln {
+class An extends Ln {
   constructor(e) {
-    super(), Fn(this, e, An, Vn, Mn, { margin: 0 });
+    super(), Hn(this, e, zn, Vn, jn, { margin: 0 });
   }
 }
 const {
@@ -1748,7 +1761,7 @@ const {
   set_data: O,
   set_style: ie,
   space: K,
-  text: j,
+  text: F,
   toggle_class: Z,
   transition_in: Te,
   transition_out: Le,
@@ -1779,7 +1792,7 @@ function Jn(l) {
   );
   return {
     c() {
-      e = $("span"), n = j(t), i = K(), r && r.c(), J(e, "class", "error svelte-1txqlrd");
+      e = $("span"), n = F(t), i = K(), r && r.c(), J(e, "class", "error svelte-1txqlrd");
     },
     m(_, f) {
       v(_, e, f), ue(e, n), v(_, i, f), r && r.m(_, f), s = !0;
@@ -1846,7 +1859,7 @@ function Kn(l) {
   }
   let c = u(l), m = c && c(l), y = (
     /*timer*/
-    l[5] && Ht(l)
+    l[5] && Mt(l)
   );
   const S = [ni, li], T = [];
   function L(d, p) {
@@ -1883,7 +1896,7 @@ function Kn(l) {
       d[8] === "default" && /*show_eta_bar*/
       d[18] && /*show_progress*/
       d[6] === "full" ? a ? a.p(d, p) : (a = St(d), a.c(), a.m(e.parentNode, e)) : a && (a.d(1), a = null), c === (c = u(d)) && m ? m.p(d, p) : (m && m.d(1), m = c && c(d), m && (m.c(), m.m(t, n))), /*timer*/
-      d[5] ? y ? y.p(d, p) : (y = Ht(d), y.c(), y.m(t, null)) : y && (y.d(1), y = null), (!f || p[0] & /*variant*/
+      d[5] ? y ? y.p(d, p) : (y = Mt(d), y.c(), y.m(t, null)) : y && (y.d(1), y = null), (!f || p[0] & /*variant*/
       256) && Z(
         t,
         "meta-text-center",
@@ -1896,9 +1909,9 @@ function Kn(l) {
         /*variant*/
         d[8] === "default"
       );
-      let F = s;
-      s = L(d), s === F ? ~s && T[s].p(d, p) : (o && (xt(), Le(T[F], 1, 1, () => {
-        T[F] = null;
+      let H = s;
+      s = L(d), s === H ? ~s && T[s].p(d, p) : (o && (xt(), Le(T[H], 1, 1, () => {
+        T[H] = null;
       }), Kt()), ~s ? (o = T[s], o ? o.p(d, p) : (o = T[s] = S[s](d), o.c()), Te(o, 1), o.m(r.parentNode, r)) : o = null), /*timer*/
       d[5] ? C && (C.d(1), C = null) : C ? C.p(d, p) : (C = Et(d), C.c(), C.m(_.parentNode, _));
     },
@@ -1937,7 +1950,7 @@ function Qn(l) {
   let e;
   return {
     c() {
-      e = j("processing |");
+      e = F("processing |");
     },
     m(t, n) {
       v(t, e, n);
@@ -1955,10 +1968,10 @@ function xn(l) {
   ), n, i, s, o;
   return {
     c() {
-      e = j("queue: "), n = j(t), i = j("/"), s = j(
+      e = F("queue: "), n = F(t), i = F("/"), s = F(
         /*queue_size*/
         l[3]
-      ), o = j(" |");
+      ), o = F(" |");
     },
     m(r, _) {
       v(r, e, _), v(r, n, _), v(r, i, _), v(r, s, _), v(r, o, _);
@@ -1984,7 +1997,7 @@ function $n(l) {
     l[7]
   ), n = [];
   for (let i = 0; i < t.length; i += 1)
-    n[i] = Ft(Lt(l, t, i));
+    n[i] = Ht(Lt(l, t, i));
   return {
     c() {
       for (let i = 0; i < n.length; i += 1)
@@ -2006,7 +2019,7 @@ function $n(l) {
         let o;
         for (o = 0; o < t.length; o += 1) {
           const r = Lt(i, t, o);
-          n[o] ? n[o].p(r, s) : (n[o] = Ft(r), n[o].c(), n[o].m(e.parentNode, e));
+          n[o] ? n[o].p(r, s) : (n[o] = Ht(r), n[o].c(), n[o].m(e.parentNode, e));
         }
         for (; o < n.length; o += 1)
           n[o].d(1);
@@ -2018,7 +2031,7 @@ function $n(l) {
     }
   };
 }
-function jt(l) {
+function Ft(l) {
   let e, t = (
     /*p*/
     l[38].unit + ""
@@ -2032,7 +2045,7 @@ function jt(l) {
   let _ = r(l), f = _(l);
   return {
     c() {
-      f.c(), e = K(), n = j(t), i = j(" | "), o = j(s);
+      f.c(), e = K(), n = F(t), i = F(" | "), o = F(s);
     },
     m(a, u) {
       f.m(a, u), v(a, e, u), v(a, n, u), v(a, i, u), v(a, o, u);
@@ -2054,7 +2067,7 @@ function ei(l) {
   ) + "", t;
   return {
     c() {
-      t = j(e);
+      t = F(e);
     },
     m(n, i) {
       v(n, t, i);
@@ -2081,7 +2094,7 @@ function ti(l) {
   ) + "", s;
   return {
     c() {
-      t = j(e), n = j("/"), s = j(i);
+      t = F(e), n = F("/"), s = F(i);
     },
     m(o, r) {
       v(o, t, r), v(o, n, r), v(o, s, r);
@@ -2102,10 +2115,10 @@ function ti(l) {
     }
   };
 }
-function Ft(l) {
+function Ht(l) {
   let e, t = (
     /*p*/
-    l[38].index != null && jt(l)
+    l[38].index != null && Ft(l)
   );
   return {
     c() {
@@ -2116,14 +2129,14 @@ function Ft(l) {
     },
     p(n, i) {
       /*p*/
-      n[38].index != null ? t ? t.p(n, i) : (t = jt(n), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
+      n[38].index != null ? t ? t.p(n, i) : (t = Ft(n), t.c(), t.m(e.parentNode, e)) : t && (t.d(1), t = null);
     },
     d(n) {
       n && k(e), t && t.d(n);
     }
   };
 }
-function Ht(l) {
+function Mt(l) {
   let e, t = (
     /*eta*/
     l[0] ? `/${/*formatted_eta*/
@@ -2131,10 +2144,10 @@ function Ht(l) {
   ), n, i;
   return {
     c() {
-      e = j(
+      e = F(
         /*formatted_timer*/
         l[20]
-      ), n = j(t), i = j("s");
+      ), n = F(t), i = F("s");
     },
     m(s, o) {
       v(s, e, o), v(s, n, o), v(s, i, o);
@@ -2157,7 +2170,7 @@ function Ht(l) {
 }
 function li(l) {
   let e, t;
-  return e = new zn({
+  return e = new An({
     props: { margin: (
       /*variant*/
       l[8] === "default"
@@ -2190,7 +2203,7 @@ function ni(l) {
   let e, t, n, i, s, o = `${/*last_progress_level*/
   l[15] * 100}%`, r = (
     /*progress*/
-    l[7] != null && Mt(l)
+    l[7] != null && jt(l)
   );
   return {
     c() {
@@ -2201,7 +2214,7 @@ function ni(l) {
     },
     p(_, f) {
       /*progress*/
-      _[7] != null ? r ? r.p(_, f) : (r = Mt(_), r.c(), r.m(t, null)) : r && (r.d(1), r = null), f[0] & /*last_progress_level*/
+      _[7] != null ? r ? r.p(_, f) : (r = jt(_), r.c(), r.m(t, null)) : r && (r.d(1), r = null), f[0] & /*last_progress_level*/
       32768 && o !== (o = `${/*last_progress_level*/
       _[15] * 100}%`) && ie(s, "width", o);
     },
@@ -2212,7 +2225,7 @@ function ni(l) {
     }
   };
 }
-function Mt(l) {
+function jt(l) {
   let e, t = Be(
     /*progress*/
     l[7]
@@ -2266,10 +2279,10 @@ function Nt(l) {
     l[14][
       /*i*/
       l[40]
-    ] != null && At()
+    ] != null && zt()
   ), _ = (
     /*progress_level*/
-    l[14] != null && zt(l)
+    l[14] != null && At(l)
   );
   return {
     c() {
@@ -2286,8 +2299,8 @@ function Nt(l) {
       f[14][
         /*i*/
         f[40]
-      ] != null ? r || (r = At(), r.c(), r.m(n.parentNode, n)) : r && (r.d(1), r = null), /*progress_level*/
-      f[14] != null ? _ ? _.p(f, a) : (_ = zt(f), _.c(), _.m(i.parentNode, i)) : _ && (_.d(1), _ = null);
+      ] != null ? r || (r = zt(), r.c(), r.m(n.parentNode, n)) : r && (r.d(1), r = null), /*progress_level*/
+      f[14] != null ? _ ? _.p(f, a) : (_ = At(f), _.c(), _.m(i.parentNode, i)) : _ && (_.d(1), _ = null);
     },
     d(f) {
       f && (k(e), k(t), k(n), k(i)), s && s.d(f), o && o.d(f), r && r.d(f), _ && _.d(f);
@@ -2298,7 +2311,7 @@ function ii(l) {
   let e;
   return {
     c() {
-      e = j(" /");
+      e = F(" /");
     },
     m(t, n) {
       v(t, e, n);
@@ -2315,7 +2328,7 @@ function Vt(l) {
   ), t;
   return {
     c() {
-      t = j(e);
+      t = F(e);
     },
     m(n, i) {
       v(n, t, i);
@@ -2330,11 +2343,11 @@ function Vt(l) {
     }
   };
 }
-function At(l) {
+function zt(l) {
   let e;
   return {
     c() {
-      e = j("-");
+      e = F("-");
     },
     m(t, n) {
       v(t, e, n);
@@ -2344,7 +2357,7 @@ function At(l) {
     }
   };
 }
-function zt(l) {
+function At(l) {
   let e = (100 * /*progress_level*/
   (l[14][
     /*i*/
@@ -2352,7 +2365,7 @@ function zt(l) {
   ] || 0)).toFixed(1) + "", t, n;
   return {
     c() {
-      t = j(e), n = j("%");
+      t = F(e), n = F("%");
     },
     m(i, s) {
       v(i, t, s), v(i, n, s);
@@ -2405,7 +2418,7 @@ function Et(l) {
   let e, t;
   return {
     c() {
-      e = $("p"), t = j(
+      e = $("p"), t = F(
         /*loading_text*/
         l[9]
       ), J(e, "class", "loading svelte-1txqlrd");
@@ -2537,31 +2550,31 @@ function si(l) {
     }
   };
 }
-let Ae = [], De = !1;
+let ze = [], De = !1;
 async function oi(l, e = !0) {
   if (!(window.__gradio_mode__ === "website" || window.__gradio_mode__ !== "app" && e !== !0)) {
-    if (Ae.push(l), !De)
+    if (ze.push(l), !De)
       De = !0;
     else
       return;
     await Xn(), requestAnimationFrame(() => {
       let t = [0, 0];
-      for (let n = 0; n < Ae.length; n++) {
-        const s = Ae[n].getBoundingClientRect();
+      for (let n = 0; n < ze.length; n++) {
+        const s = ze[n].getBoundingClientRect();
         (n === 0 || s.top + window.scrollY <= t[0]) && (t[0] = s.top + window.scrollY, t[1] = n);
       }
-      window.scrollTo({ top: t[0] - 20, behavior: "smooth" }), De = !1, Ae = [];
+      window.scrollTo({ top: t[0] - 20, behavior: "smooth" }), De = !1, ze = [];
     });
   }
 }
 function fi(l, e, t) {
-  let n, { $$slots: i = {}, $$scope: s } = e, { i18n: o } = e, { eta: r = null } = e, { queue_position: _ } = e, { queue_size: f } = e, { status: a } = e, { scroll_to_output: u = !1 } = e, { timer: c = !0 } = e, { show_progress: m = "full" } = e, { message: y = null } = e, { progress: S = null } = e, { variant: T = "default" } = e, { loading_text: L = "Loading..." } = e, { absolute: C = !0 } = e, { translucent: d = !1 } = e, { border: p = !1 } = e, { autoscroll: F } = e, g, R = !1, Q = 0, E = 0, P = null, X = null, ge = 0, D = null, x, A = null, be = !0;
-  const b = () => {
-    t(0, r = t(26, P = t(19, we = null))), t(24, Q = performance.now()), t(25, E = 0), R = !0, Me();
+  let n, { $$slots: i = {}, $$scope: s } = e, { i18n: o } = e, { eta: r = null } = e, { queue_position: _ } = e, { queue_size: f } = e, { status: a } = e, { scroll_to_output: u = !1 } = e, { timer: c = !0 } = e, { show_progress: m = "full" } = e, { message: y = null } = e, { progress: S = null } = e, { variant: T = "default" } = e, { loading_text: L = "Loading..." } = e, { absolute: C = !0 } = e, { translucent: d = !1 } = e, { border: p = !1 } = e, { autoscroll: H } = e, b, R = !1, Q = 0, E = 0, P = null, X = null, be = 0, D = null, x, z = null, ge = !0;
+  const g = () => {
+    t(0, r = t(26, P = t(19, we = null))), t(24, Q = performance.now()), t(25, E = 0), R = !0, je();
   };
-  function Me() {
+  function je() {
     requestAnimationFrame(() => {
-      t(25, E = (performance.now() - Q) / 1e3), R && Me();
+      t(25, E = (performance.now() - Q) / 1e3), R && je();
     });
   }
   function Ne() {
@@ -2573,29 +2586,29 @@ function fi(l, e, t) {
   let we = null;
   function Ee(w) {
     Ct[w ? "unshift" : "push"](() => {
-      A = w, t(16, A), t(7, S), t(14, D), t(15, x);
+      z = w, t(16, z), t(7, S), t(14, D), t(15, x);
     });
   }
   function Pe(w) {
     Ct[w ? "unshift" : "push"](() => {
-      g = w, t(13, g);
+      b = w, t(13, b);
     });
   }
   return l.$$set = (w) => {
-    "i18n" in w && t(1, o = w.i18n), "eta" in w && t(0, r = w.eta), "queue_position" in w && t(2, _ = w.queue_position), "queue_size" in w && t(3, f = w.queue_size), "status" in w && t(4, a = w.status), "scroll_to_output" in w && t(21, u = w.scroll_to_output), "timer" in w && t(5, c = w.timer), "show_progress" in w && t(6, m = w.show_progress), "message" in w && t(22, y = w.message), "progress" in w && t(7, S = w.progress), "variant" in w && t(8, T = w.variant), "loading_text" in w && t(9, L = w.loading_text), "absolute" in w && t(10, C = w.absolute), "translucent" in w && t(11, d = w.translucent), "border" in w && t(12, p = w.border), "autoscroll" in w && t(23, F = w.autoscroll), "$$scope" in w && t(28, s = w.$$scope);
+    "i18n" in w && t(1, o = w.i18n), "eta" in w && t(0, r = w.eta), "queue_position" in w && t(2, _ = w.queue_position), "queue_size" in w && t(3, f = w.queue_size), "status" in w && t(4, a = w.status), "scroll_to_output" in w && t(21, u = w.scroll_to_output), "timer" in w && t(5, c = w.timer), "show_progress" in w && t(6, m = w.show_progress), "message" in w && t(22, y = w.message), "progress" in w && t(7, S = w.progress), "variant" in w && t(8, T = w.variant), "loading_text" in w && t(9, L = w.loading_text), "absolute" in w && t(10, C = w.absolute), "translucent" in w && t(11, d = w.translucent), "border" in w && t(12, p = w.border), "autoscroll" in w && t(23, H = w.autoscroll), "$$scope" in w && t(28, s = w.$$scope);
   }, l.$$.update = () => {
     l.$$.dirty[0] & /*eta, old_eta, timer_start, eta_from_start*/
     218103809 && (r === null && t(0, r = P), r != null && P !== r && (t(27, X = (performance.now() - Q) / 1e3 + r), t(19, we = X.toFixed(1)), t(26, P = r))), l.$$.dirty[0] & /*eta_from_start, timer_diff*/
-    167772160 && t(17, ge = X === null || X <= 0 || !E ? null : Math.min(E / X, 1)), l.$$.dirty[0] & /*progress*/
-    128 && S != null && t(18, be = !1), l.$$.dirty[0] & /*progress, progress_level, progress_bar, last_progress_level*/
+    167772160 && t(17, be = X === null || X <= 0 || !E ? null : Math.min(E / X, 1)), l.$$.dirty[0] & /*progress*/
+    128 && S != null && t(18, ge = !1), l.$$.dirty[0] & /*progress, progress_level, progress_bar, last_progress_level*/
     114816 && (S != null ? t(14, D = S.map((w) => {
       if (w.index != null && w.length != null)
         return w.index / w.length;
       if (w.progress != null)
         return w.progress;
-    })) : t(14, D = null), D ? (t(15, x = D[D.length - 1]), A && (x === 0 ? t(16, A.style.transition = "0", A) : t(16, A.style.transition = "150ms", A))) : t(15, x = void 0)), l.$$.dirty[0] & /*status*/
-    16 && (a === "pending" ? b() : Ne()), l.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
-    10493968 && g && u && (a === "pending" || a === "complete") && oi(g, F), l.$$.dirty[0] & /*status, message*/
+    })) : t(14, D = null), D ? (t(15, x = D[D.length - 1]), z && (x === 0 ? t(16, z.style.transition = "0", z) : t(16, z.style.transition = "150ms", z))) : t(15, x = void 0)), l.$$.dirty[0] & /*status*/
+    16 && (a === "pending" ? g() : Ne()), l.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
+    10493968 && b && u && (a === "pending" || a === "complete") && oi(b, H), l.$$.dirty[0] & /*status, message*/
     4194320, l.$$.dirty[0] & /*timer_diff*/
     33554432 && t(20, n = E.toFixed(1));
   }, [
@@ -2612,17 +2625,17 @@ function fi(l, e, t) {
     C,
     d,
     p,
-    g,
+    b,
     D,
     x,
-    A,
-    ge,
+    z,
     be,
+    ge,
     we,
     n,
     u,
     y,
-    F,
+    H,
     Q,
     E,
     P,
@@ -2674,17 +2687,17 @@ const {
   create_component: Qe,
   destroy_component: xe,
   detach: ci,
-  flush: H,
+  flush: M,
   get_spread_object: di,
   get_spread_update: mi,
   group_outros: hi,
-  init: gi,
-  insert: bi,
+  init: bi,
+  insert: gi,
   mount_component: $e,
   safe_not_equal: wi,
   space: ki,
   transition_in: Ce,
-  transition_out: je
+  transition_out: Fe
 } = window.__gradio__svelte__internal;
 function Rt(l) {
   let e, t;
@@ -2735,7 +2748,7 @@ function Rt(l) {
       t || (Ce(e.$$.fragment, s), t = !0);
     },
     o(s) {
-      je(e.$$.fragment, s), t = !1;
+      Fe(e.$$.fragment, s), t = !1;
     },
     d(s) {
       xe(e, s);
@@ -2827,12 +2840,12 @@ function vi(l) {
         o && o.c(), e = ki(), Qe(t.$$.fragment);
       },
       m(a, u) {
-        o && o.m(a, u), bi(a, e, u), $e(t, a, u), s = !0;
+        o && o.m(a, u), gi(a, e, u), $e(t, a, u), s = !0;
       },
       p(a, u) {
         /*loading_status*/
         a[17] ? o ? (o.p(a, u), u & /*loading_status*/
-        131072 && Ce(o, 1)) : (o = Rt(a), o.c(), Ce(o, 1), o.m(e.parentNode, e)) : o && (hi(), je(o, 1, 1, () => {
+        131072 && Ce(o, 1)) : (o = Rt(a), o.c(), Ce(o, 1), o.m(e.parentNode, e)) : o && (hi(), Fe(o, 1, 1, () => {
           o = null;
         }), ui());
         const c = {};
@@ -2866,7 +2879,7 @@ function vi(l) {
         s || (Ce(o), Ce(t.$$.fragment, a), s = !0);
       },
       o(a) {
-        je(o), je(t.$$.fragment, a), s = !1;
+        Fe(o), Fe(t.$$.fragment, a), s = !1;
       },
       d(a) {
         a && ci(e), o && o.d(a), xe(t, a);
@@ -2934,7 +2947,7 @@ function pi(l) {
       t || (Ce(e.$$.fragment, n), t = !0);
     },
     o(n) {
-      je(e.$$.fragment, n), t = !1;
+      Fe(e.$$.fragment, n), t = !1;
     },
     d(n) {
       xe(e, n);
@@ -2942,21 +2955,21 @@ function pi(l) {
   };
 }
 function yi(l, e, t) {
-  let { gradio: n } = e, { label: i = "Highlighted Textbox" } = e, { legend_label: s = "Highlights:" } = e, { info: o = void 0 } = e, { elem_id: r = "" } = e, { elem_classes: _ = [] } = e, { visible: f = !0 } = e, { value: a } = e, { show_label: u } = e, { show_legend: c } = e, { show_legend_label: m } = e, { color_map: y = {} } = e, { container: S = !0 } = e, { scale: T = null } = e, { min_width: L = void 0 } = e, { show_copy_button: C = !1 } = e, { loading_status: d = void 0 } = e, { value_is_output: p = !1 } = e, { combine_adjacent: F = !1 } = e, { interactive: g = !0 } = e;
+  let { gradio: n } = e, { label: i = "Highlighted Textbox" } = e, { legend_label: s = "Highlights:" } = e, { info: o = void 0 } = e, { elem_id: r = "" } = e, { elem_classes: _ = [] } = e, { visible: f = !0 } = e, { value: a } = e, { show_label: u } = e, { show_legend: c } = e, { show_legend_label: m } = e, { color_map: y = {} } = e, { container: S = !0 } = e, { scale: T = null } = e, { min_width: L = void 0 } = e, { show_copy_button: C = !1 } = e, { loading_status: d = void 0 } = e, { value_is_output: p = !1 } = e, { combine_adjacent: H = !1 } = e, { interactive: b = !0 } = e;
   const R = !1, Q = !0;
-  function E(b) {
-    a = b, t(0, a), t(19, F);
+  function E(g) {
+    a = g, t(0, a), t(19, H);
   }
-  function P(b) {
-    p = b, t(2, p);
+  function P(g) {
+    p = g, t(2, p);
   }
-  const X = () => n.dispatch("change"), ge = () => n.dispatch("input"), D = () => n.dispatch("submit"), x = () => n.dispatch("blur"), A = (b) => n.dispatch("select", b.detail), be = () => n.dispatch("focus");
-  return l.$$set = (b) => {
-    "gradio" in b && t(3, n = b.gradio), "label" in b && t(4, i = b.label), "legend_label" in b && t(5, s = b.legend_label), "info" in b && t(6, o = b.info), "elem_id" in b && t(7, r = b.elem_id), "elem_classes" in b && t(8, _ = b.elem_classes), "visible" in b && t(9, f = b.visible), "value" in b && t(0, a = b.value), "show_label" in b && t(10, u = b.show_label), "show_legend" in b && t(11, c = b.show_legend), "show_legend_label" in b && t(12, m = b.show_legend_label), "color_map" in b && t(1, y = b.color_map), "container" in b && t(13, S = b.container), "scale" in b && t(14, T = b.scale), "min_width" in b && t(15, L = b.min_width), "show_copy_button" in b && t(16, C = b.show_copy_button), "loading_status" in b && t(17, d = b.loading_status), "value_is_output" in b && t(2, p = b.value_is_output), "combine_adjacent" in b && t(19, F = b.combine_adjacent), "interactive" in b && t(18, g = b.interactive);
+  const X = () => n.dispatch("change"), be = () => n.dispatch("input"), D = () => n.dispatch("submit"), x = () => n.dispatch("blur"), z = (g) => n.dispatch("select", g.detail), ge = () => n.dispatch("focus");
+  return l.$$set = (g) => {
+    "gradio" in g && t(3, n = g.gradio), "label" in g && t(4, i = g.label), "legend_label" in g && t(5, s = g.legend_label), "info" in g && t(6, o = g.info), "elem_id" in g && t(7, r = g.elem_id), "elem_classes" in g && t(8, _ = g.elem_classes), "visible" in g && t(9, f = g.visible), "value" in g && t(0, a = g.value), "show_label" in g && t(10, u = g.show_label), "show_legend" in g && t(11, c = g.show_legend), "show_legend_label" in g && t(12, m = g.show_legend_label), "color_map" in g && t(1, y = g.color_map), "container" in g && t(13, S = g.container), "scale" in g && t(14, T = g.scale), "min_width" in g && t(15, L = g.min_width), "show_copy_button" in g && t(16, C = g.show_copy_button), "loading_status" in g && t(17, d = g.loading_status), "value_is_output" in g && t(2, p = g.value_is_output), "combine_adjacent" in g && t(19, H = g.combine_adjacent), "interactive" in g && t(18, b = g.interactive);
   }, l.$$.update = () => {
     l.$$.dirty & /*color_map*/
     2 && !y && Object.keys(y).length && t(1, y), l.$$.dirty & /*value, combine_adjacent*/
-    524289 && a && F && t(0, a = Ol(a, "equal"));
+    524289 && a && H && t(0, a = Ol(a, "equal"));
   }, [
     a,
     y,
@@ -2976,23 +2989,23 @@ function yi(l, e, t) {
     L,
     C,
     d,
-    g,
-    F,
+    b,
+    H,
     R,
     Q,
     E,
     P,
     X,
-    ge,
+    be,
     D,
     x,
-    A,
-    be
+    z,
+    ge
   ];
 }
 class Ci extends _i {
   constructor(e) {
-    super(), gi(this, e, yi, pi, wi, {
+    super(), bi(this, e, yi, pi, wi, {
       gradio: 3,
       label: 4,
       legend_label: 5,
@@ -3021,121 +3034,121 @@ class Ci extends _i {
     return this.$$.ctx[3];
   }
   set gradio(e) {
-    this.$$set({ gradio: e }), H();
+    this.$$set({ gradio: e }), M();
   }
   get label() {
     return this.$$.ctx[4];
   }
   set label(e) {
-    this.$$set({ label: e }), H();
+    this.$$set({ label: e }), M();
   }
   get legend_label() {
     return this.$$.ctx[5];
   }
   set legend_label(e) {
-    this.$$set({ legend_label: e }), H();
+    this.$$set({ legend_label: e }), M();
   }
   get info() {
     return this.$$.ctx[6];
   }
   set info(e) {
-    this.$$set({ info: e }), H();
+    this.$$set({ info: e }), M();
   }
   get elem_id() {
     return this.$$.ctx[7];
   }
   set elem_id(e) {
-    this.$$set({ elem_id: e }), H();
+    this.$$set({ elem_id: e }), M();
   }
   get elem_classes() {
     return this.$$.ctx[8];
   }
   set elem_classes(e) {
-    this.$$set({ elem_classes: e }), H();
+    this.$$set({ elem_classes: e }), M();
   }
   get visible() {
     return this.$$.ctx[9];
   }
   set visible(e) {
-    this.$$set({ visible: e }), H();
+    this.$$set({ visible: e }), M();
   }
   get value() {
     return this.$$.ctx[0];
   }
   set value(e) {
-    this.$$set({ value: e }), H();
+    this.$$set({ value: e }), M();
   }
   get show_label() {
     return this.$$.ctx[10];
   }
   set show_label(e) {
-    this.$$set({ show_label: e }), H();
+    this.$$set({ show_label: e }), M();
   }
   get show_legend() {
     return this.$$.ctx[11];
   }
   set show_legend(e) {
-    this.$$set({ show_legend: e }), H();
+    this.$$set({ show_legend: e }), M();
   }
   get show_legend_label() {
     return this.$$.ctx[12];
   }
   set show_legend_label(e) {
-    this.$$set({ show_legend_label: e }), H();
+    this.$$set({ show_legend_label: e }), M();
   }
   get color_map() {
     return this.$$.ctx[1];
   }
   set color_map(e) {
-    this.$$set({ color_map: e }), H();
+    this.$$set({ color_map: e }), M();
   }
   get container() {
     return this.$$.ctx[13];
   }
   set container(e) {
-    this.$$set({ container: e }), H();
+    this.$$set({ container: e }), M();
   }
   get scale() {
     return this.$$.ctx[14];
   }
   set scale(e) {
-    this.$$set({ scale: e }), H();
+    this.$$set({ scale: e }), M();
   }
   get min_width() {
     return this.$$.ctx[15];
   }
   set min_width(e) {
-    this.$$set({ min_width: e }), H();
+    this.$$set({ min_width: e }), M();
   }
   get show_copy_button() {
     return this.$$.ctx[16];
   }
   set show_copy_button(e) {
-    this.$$set({ show_copy_button: e }), H();
+    this.$$set({ show_copy_button: e }), M();
   }
   get loading_status() {
     return this.$$.ctx[17];
   }
   set loading_status(e) {
-    this.$$set({ loading_status: e }), H();
+    this.$$set({ loading_status: e }), M();
   }
   get value_is_output() {
     return this.$$.ctx[2];
   }
   set value_is_output(e) {
-    this.$$set({ value_is_output: e }), H();
+    this.$$set({ value_is_output: e }), M();
   }
   get combine_adjacent() {
     return this.$$.ctx[19];
   }
   set combine_adjacent(e) {
-    this.$$set({ combine_adjacent: e }), H();
+    this.$$set({ combine_adjacent: e }), M();
   }
   get interactive() {
     return this.$$.ctx[18];
   }
   set interactive(e) {
-    this.$$set({ interactive: e }), H();
+    this.$$set({ interactive: e }), M();
   }
   get autofocus() {
     return this.$$.ctx[20];

src/backend/gradio_highlightedtextbox/templates/component/style.css

@@ -1 +1 @@
-span.has-info.svelte-deja93{margin-bottom:var(--spacing-xs)}span.svelte-deja93:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-deja93{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-deja93{margin:0;height:0}.category-legend.svelte-deja93{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);color:#000}.category-label.svelte-deja93{border-radius:var(--radius-xs);padding-right:var(--size-2);padding-left:var(--size-2);font-weight:var(--weight-semibold)}.title-container.svelte-deja93{display:flex}.legend-separator.svelte-deja93{margin:0 var(--spacing-md) 0 var(--spacing-md)}.title-with-highlights-info.svelte-deja93{margin-bottom:var(--spacing-xs);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}.dropdown-arrow.svelte-145leq6{fill:currentColor}label.svelte-14ssfqr{display:block;width:100%}button.svelte-14ssfqr{display:flex;position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);align-items:center;box-shadow:var(--shadow-drop);border:1px solid var(--color-border-primary);border-top:none;border-right:none;border-radius:var(--block-label-right-radius);background:var(--block-label-background-fill);padding:5px;width:22px;height:22px;overflow:hidden;color:var(--block-label-color);font:var(--font-sans);font-size:var(--button-small-text-size)}.container.svelte-14ssfqr{display:flex;flex-direction:column;gap:var(--spacing-sm)}.textfield.svelte-14ssfqr{box-sizing:border-box;outline:none!important;box-shadow:var(--input-shadow);padding:var(--input-padding);border-radius:var(--radius-md);background:var(--input-background-fill);background-color:transparent;font-weight:var(--input-text-weight);font-size:var(--input-text-size);width:100%;line-height:var(--line-sm);word-break:break-word;border:var(--input-border-width) solid var(--input-border-color);cursor:text}.textfield.svelte-14ssfqr:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}mark{border-radius:3px}.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1txqlrd.svelte-1txqlrd{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1txqlrd.svelte-1txqlrd{top:0;right:0;left:0}.wrap.default.svelte-1txqlrd.svelte-1txqlrd{top:0;right:0;bottom:0;left:0}.hide.svelte-1txqlrd.svelte-1txqlrd{opacity:0;pointer-events:none}.generating.svelte-1txqlrd.svelte-1txqlrd{animation:svelte-1txqlrd-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent}.translucent.svelte-1txqlrd.svelte-1txqlrd{background:none}@keyframes svelte-1txqlrd-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1txqlrd.svelte-1txqlrd{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1txqlrd.svelte-1txqlrd{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1txqlrd.svelte-1txqlrd{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1txqlrd.svelte-1txqlrd{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1txqlrd.svelte-1txqlrd{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1txqlrd.svelte-1txqlrd{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1txqlrd.svelte-1txqlrd{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1txqlrd.svelte-1txqlrd{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1txqlrd.svelte-1txqlrd{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1txqlrd .progress-text.svelte-1txqlrd{background:var(--block-background-fill)}.border.svelte-1txqlrd.svelte-1txqlrd{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}
+span.has-info.svelte-vm3q5z{margin-bottom:var(--spacing-xs)}span.svelte-vm3q5z:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-vm3q5z{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-vm3q5z{display:none!important}.category-legend.svelte-vm3q5z{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);color:#000}.category-label.svelte-vm3q5z{border-radius:var(--radius-xs);padding-right:var(--size-2);padding-left:var(--size-2);font-weight:var(--weight-semibold)}.category-label.has-info.svelte-vm3q5z{margin-bottom:var(--spacing-xs)}.category-label.svelte-vm3q5z:not(.has-info){margin-bottom:var(--spacing-lg)}.title-container.svelte-vm3q5z{display:flex}.legend-separator.svelte-vm3q5z{margin:0 var(--spacing-md) 0 var(--spacing-md)}.title-with-highlights-info.svelte-vm3q5z{margin-bottom:var(--spacing-xs);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}.dropdown-arrow.svelte-145leq6{fill:currentColor}label.svelte-14ssfqr{display:block;width:100%}button.svelte-14ssfqr{display:flex;position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);align-items:center;box-shadow:var(--shadow-drop);border:1px solid var(--color-border-primary);border-top:none;border-right:none;border-radius:var(--block-label-right-radius);background:var(--block-label-background-fill);padding:5px;width:22px;height:22px;overflow:hidden;color:var(--block-label-color);font:var(--font-sans);font-size:var(--button-small-text-size)}.container.svelte-14ssfqr{display:flex;flex-direction:column;gap:var(--spacing-sm)}.textfield.svelte-14ssfqr{box-sizing:border-box;outline:none!important;box-shadow:var(--input-shadow);padding:var(--input-padding);border-radius:var(--radius-md);background:var(--input-background-fill);background-color:transparent;font-weight:var(--input-text-weight);font-size:var(--input-text-size);width:100%;line-height:var(--line-sm);word-break:break-word;border:var(--input-border-width) solid var(--input-border-color);cursor:text}.textfield.svelte-14ssfqr:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus)}mark{border-radius:3px}.block.svelte-1t38q2d{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-1t38q2d{border-color:var(--color-accent)}.padded.svelte-1t38q2d{padding:var(--block-padding)}.hidden.svelte-1t38q2d{display:none}.hide-container.svelte-1t38q2d{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-lpi64a{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-lpi64a{opacity:.5;box-shadow:none}button[disabled].svelte-lpi64a:hover{cursor:not-allowed}.padded.svelte-lpi64a{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-lpi64a:hover,button.highlight.svelte-lpi64a{cursor:pointer;color:var(--color-accent)}.padded.svelte-lpi64a:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-lpi64a{padding:0 1px;font-size:10px}div.svelte-lpi64a{padding:2px;display:flex;align-items:flex-end}.small.svelte-lpi64a{width:14px;height:14px}.large.svelte-lpi64a{width:22px;height:22px}.pending.svelte-lpi64a{animation:svelte-lpi64a-flash .5s infinite}@keyframes svelte-lpi64a-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-lpi64a{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-ipfyu7{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;padding-bottom:var(--spacing-xl);color:var(--block-label-text-color);flex-shrink:0;width:95%}.show_border.svelte-ipfyu7{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-1txqlrd.svelte-1txqlrd{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-top);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden;pointer-events:none}.wrap.center.svelte-1txqlrd.svelte-1txqlrd{top:0;right:0;left:0}.wrap.default.svelte-1txqlrd.svelte-1txqlrd{top:0;right:0;bottom:0;left:0}.hide.svelte-1txqlrd.svelte-1txqlrd{opacity:0;pointer-events:none}.generating.svelte-1txqlrd.svelte-1txqlrd{animation:svelte-1txqlrd-pulse 2s cubic-bezier(.4,0,.6,1) infinite;border:2px solid var(--color-accent);background:transparent}.translucent.svelte-1txqlrd.svelte-1txqlrd{background:none}@keyframes svelte-1txqlrd-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-1txqlrd.svelte-1txqlrd{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-1txqlrd.svelte-1txqlrd{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-1txqlrd.svelte-1txqlrd{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-1txqlrd.svelte-1txqlrd{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-1txqlrd.svelte-1txqlrd{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-1txqlrd.svelte-1txqlrd{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-1txqlrd.svelte-1txqlrd{position:absolute;top:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-1txqlrd.svelte-1txqlrd{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-1txqlrd.svelte-1txqlrd{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-1txqlrd .progress-text.svelte-1txqlrd{background:var(--block-background-fill)}.border.svelte-1txqlrd.svelte-1txqlrd{border:1px solid var(--border-color-primary)}.toast-body.svelte-solcu7{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-solcu7{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-solcu7{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-solcu7{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-solcu7{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-title.svelte-solcu7{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm);text-transform:capitalize}.toast-title.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-title.error.svelte-solcu7{color:var(--color-red-50)}.toast-title.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-title.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-title.info.svelte-solcu7{color:var(--color-grey-50)}.toast-close.svelte-solcu7{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-close.error.svelte-solcu7{color:var(--color-red-500)}.toast-close.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-close.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-close.info.svelte-solcu7{color:var(--color-grey-500)}.toast-text.svelte-solcu7{font-size:var(--text-lg)}.toast-text.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-text.error.svelte-solcu7{color:var(--color-red-50)}.toast-text.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-solcu7{color:var(--color-yellow-50)}.toast-text.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-text.info.svelte-solcu7{color:var(--color-grey-50)}.toast-details.svelte-solcu7{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-solcu7{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-solcu7{color:var(--color-red-700)}.dark .toast-icon.error.svelte-solcu7{color:var(--color-red-500)}.toast-icon.warning.svelte-solcu7{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-solcu7{color:var(--color-yellow-500)}.toast-icon.info.svelte-solcu7{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-solcu7{color:var(--color-grey-500)}@keyframes svelte-solcu7-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-solcu7{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-solcu7-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-solcu7{background:var(--color-red-700)}.dark .timer.error.svelte-solcu7{background:var(--color-red-500)}.timer.warning.svelte-solcu7{background:var(--color-yellow-700)}.dark .timer.warning.svelte-solcu7{background:var(--color-yellow-500)}.timer.info.svelte-solcu7{background:var(--color-grey-700)}.dark .timer.info.svelte-solcu7{background:var(--color-grey-500)}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}

src/frontend/BlockTitleWithHighlights.svelte

@@ -19,7 +19,7 @@
     {#if Object.keys(_color_map).length !== 0}
         <span
             class="legend-separator"
-            class:hide={!show_legend}
+            class:hide={!show_legend || !show_label}
             class:has-info={info != null}
         >
         ·
@@ -34,7 +34,7 @@
             </span>
             {#each Object.entries(_color_map) as [category, color], i}
                 <!-- svelte-ignore a11y-no-static-element-interactions -->
-                <div class="category-label" style={"background-color:" + color.secondary}>
+                <div class="category-label" style={"background-color:" + color.secondary} class:has-info={info != null}>
                     {category}
                 </div>
             {/each}
@@ -70,8 +70,7 @@
 	}
 
 	.hide {
-		margin: 0;
-		height: 0;
+		display: none !important;
 	}
 
     .category-legend {
@@ -88,6 +87,13 @@
 		font-weight: var(--weight-semibold);
 	}
 
+    .category-label.has-info {
+		margin-bottom: var(--spacing-xs);
+	}
+	.category-label:not(.has-info) {
+		margin-bottom: var(--spacing-lg);
+	}
+
 	.title-container {
         display: flex;
     }

src/frontend/HighlightedTextbox.svelte

@@ -54,8 +54,6 @@
 	}
 
 	function set_text_from_value(as_output: boolean): void {
-		console.log(value)
-		console.log(_color_map)
 		if (value.length > 0 && as_output) {
 			el_text = value.map(([text, _]) => text).join(" ");
 			marked_el_text = value.map(([text, category]) => {
@@ -178,7 +176,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events-->
 <label class:container>
-	<BlockTitleWithHighlights {show_label} {info} {show_legend} {show_legend_label} {legend_label} {_color_map}>{label}</BlockTitleWithHighlights>
+	<BlockTitleWithHighlights {show_label} {show_legend} {show_legend_label} {legend_label} {_color_map} {info}>{label}</BlockTitleWithHighlights>
 	{#if show_copy_button}
 		{#if copied}
 			<button

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_highlightedtextbox"
-version = "0.0.6"
+version = "0.0.7"
 description = "Editable Gradio textarea supporting highlighting"
 readme = "README.md"
 license = "mit"
@@ -39,7 +39,7 @@ dev = ["build", "twine"]
 space = "https://huggingface.co/spaces/gsarti/gradio_highlightedtextbox"
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_highlightedtextbox/templates", "*.pyi", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates"]
+artifacts = ["/backend/gradio_highlightedtextbox/templates", "*.pyi", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_highlightedtextbox"]