@unoff/ui 1.21.1 → 1.21.3

package/dist/components/inputs/multiple-slider/MultipleSlider.js

@@ -1,20 +1,20 @@
 import '../../../assets/MultipleSlider.css';
-import { jsxs as I, jsx as g } from "react/jsx-runtime";
+import { jsx as m, jsxs as y } from "react/jsx-runtime";
 import T from "react";
 import { r as f } from "../../../do-map-2nhWP1KI.js";
-import { t as E } from "../../../do-classnames-DSDFCvzy.js";
+import { t as I } from "../../../do-classnames-DSDFCvzy.js";
 import w from "../../tags/icon-chip/IconChip.js";
-import D from "../../tags/chip/Chip.js";
-import F from "../../actions/knob/Knob.js";
-const M = (h, e, i, l = "LINEAR") => {
+import A from "../../tags/chip/Chip.js";
+import E from "../../actions/knob/Knob.js";
+const F = (h, e, a, o = "LINEAR") => {
   let t = 1;
-  const p = {};
+  const c = {};
   return h.map((r) => {
-    p[r] = l !== "NONE" ? parseFloat(f(A(l, t), 0, 1, e, i).toFixed(1)) : r, t -= 1 / (h.length - 1), t < 0.01 && (t = 0);
-  }), p;
-}, A = (h, e) => {
-  var i;
-  const l = {
+    c[r] = o !== "NONE" ? parseFloat(f(D(o, t), 0, 1, e, a).toFixed(1)) : r, t -= 1 / (h.length - 1), t < 0.01 && (t = 0);
+  }), c;
+}, D = (h, e) => {
+  var a;
+  const o = {
     LINEAR: (t) => t,
     EASEIN_SINE: (t) => Math.pow(t, 1.2),
     EASEOUT_SINE: (t) => 1 - Math.pow(1 - t, 1.2),
@@ -26,74 +26,74 @@ const M = (h, e, i, l = "LINEAR") => {
     EASEOUT_CUBIC: (t) => Math.sin(t * Math.PI / 2),
     EASEINOUT_CUBIC: (t) => -(Math.cos(Math.PI * t) - 1) / 2
   };
-  return (i = l[h ?? "LINEAR"]) == null ? void 0 : i.call(l, e);
-}, _ = (h, e, i, l, t, p = 1) => {
-  const r = [], a = i ? p * 10 : p;
-  Object.entries(h).sort((c, u) => c[1] - u[1]).forEach((c) => {
-    r.push(c[0]);
+  return (a = o[h ?? "LINEAR"]) == null ? void 0 : a.call(o, e);
+}, _ = (h, e, a, o, t, c = 1) => {
+  const r = [], n = a ? c * 10 : c;
+  Object.entries(h).sort((d, u) => d[1] - u[1]).forEach((d) => {
+    r.push(d[0]);
   });
-  const n = r.indexOf(
+  const i = r.indexOf(
     e.dataset.id
-  ), o = h, s = o[r[n]];
-  return s + a <= l ? o[r[n]] = l : s + a >= t ? o[r[n]] = t : o[r[n]] = o[r[n]] + a, {
-    scale: o
+  ), l = h, s = l[r[i]];
+  return s + n <= o ? l[r[i]] = o : s + n >= t ? l[r[i]] = t : l[r[i]] = l[r[i]] + n, {
+    scale: l
   };
-}, N = (h, e, i, l, t, p = 1) => {
-  const r = [], a = i ? p * 10 : p;
-  Object.entries(h).sort((c, u) => c[1] - u[1]).forEach((c) => {
-    r.push(c[0]);
+}, N = (h, e, a, o, t, c = 1) => {
+  const r = [], n = a ? c * 10 : c;
+  Object.entries(h).sort((d, u) => d[1] - u[1]).forEach((d) => {
+    r.push(d[0]);
   });
-  const n = r.indexOf(
+  const i = r.indexOf(
     e.dataset.id
-  ), o = h, s = o[r[n]];
-  return s - a <= l ? o[r[n]] = l : s - a >= t ? o[r[n]] = t : o[r[n]] = o[r[n]] - a, {
-    scale: o
+  ), l = h, s = l[r[i]];
+  return s - n <= o ? l[r[i]] = o : s - n >= t ? l[r[i]] = t : l[r[i]] = l[r[i]] - n, {
+    scale: l
   };
 }, O = (h) => {
   const e = Math.floor(Math.abs(h)).toString().length;
   return Math.pow(10, e - 1);
 }, L = (h, e) => {
-  const i = Object.entries(h).map(([a, n]) => ({
-    index: parseFloat(a),
-    value: n
-  })).filter((a) => a.index > 0), l = Math.min(...i.map((a) => a.index)), t = O(l), p = i.filter(
-    (a) => a.index !== parseFloat(e.dataset.id)
-  ), r = p.reduce(
-    (a, n, o) => {
-      const s = Math.max(1, o + 1) * t;
-      return a[s] = p[o].value, a;
+  const a = Object.entries(h).map(([n, i]) => ({
+    index: parseFloat(n),
+    value: i
+  })).filter((n) => n.index > 0), o = Math.min(...a.map((n) => n.index)), t = O(o), c = a.filter(
+    (n) => n.index !== parseFloat(e.dataset.id)
+  ), r = c.reduce(
+    (n, i, l) => {
+      const s = Math.max(1, l + 1) * t;
+      return n[s] = c[l].value, n;
     },
     {}
   );
   return {
     scale: r,
-    stops: Object.keys(r).map((a) => parseFloat(a)),
+    stops: Object.keys(r).map((n) => parseFloat(n)),
     min: Math.min(...Object.values(r)),
     max: Math.max(...Object.values(r))
   };
 }, C = (h) => {
   const e = Math.floor(Math.abs(h)).toString().length;
   return Math.pow(10, e - 1);
-}, K = (h, e, i, l) => {
-  const t = Object.entries(e).map(([s, c]) => ({
+}, K = (h, e, a, o) => {
+  const t = Object.entries(e).map(([s, d]) => ({
     index: Math.max(1, parseFloat(s)),
-    value: c
-  })).filter((s) => s.index > 0), p = C(Math.min(...t.map((s) => s.index))), r = t[0].value > t[t.length - 1].value, a = h.target, n = parseFloat(
-    f(h.layerX, 0, a.offsetWidth, i, l).toFixed(1)
+    value: d
+  })).filter((s) => s.index > 0), c = C(Math.min(...t.map((s) => s.index))), r = t[0].value > t[t.length - 1].value, n = h.target, i = parseFloat(
+    f(h.layerX, 0, n.offsetWidth, a, o).toFixed(1)
   );
   t.push({
-    index: Math.max(...t.map((s) => s.index)) + p,
-    value: n
-  }), t.sort((s, c) => r ? c.value - s.value : s.value - c.value);
-  const o = t.reduce(
-    (s, c, u) => (s[(u + 1) * p] = c.value, s),
+    index: Math.max(...t.map((s) => s.index)) + c,
+    value: i
+  }), t.sort((s, d) => r ? d.value - s.value : s.value - d.value);
+  const l = t.reduce(
+    (s, d, u) => (s[(u + 1) * c] = d.value, s),
     {}
   );
   return {
-    scale: o,
-    stops: Object.keys(o).map((s) => parseFloat(s)),
-    min: Math.min(...Object.values(o)),
-    max: Math.max(...Object.values(o))
+    scale: l,
+    stops: Object.keys(l).map((s) => parseFloat(s)),
+    min: Math.min(...Object.values(l)),
+    max: Math.max(...Object.values(l))
   };
 };
 class H extends T.Component {
@@ -104,10 +104,8 @@ class H extends T.Component {
       min: 0,
       max: 100
     },
-    colors: {
-      min: "white",
-      max: "white"
-    },
+    hasProgressBar: !1,
+    hasPadding: !0,
     isBlocked: !1,
     isNew: !1
   };
@@ -118,186 +116,202 @@ class H extends T.Component {
     };
   }
   // Handlers
-  validHandler = (e, i) => {
-    const { scale: l, onChange: t, range: p } = this.props, r = p.step || 0.1, a = l ?? {}, n = i.target;
-    if (n.value !== "") {
-      let o = parseFloat(n.value);
-      o = Math.round(o / r) * r, o > parseFloat(n.max) ? o = parseFloat(n.max) : o < parseFloat(n.min) && (o = parseFloat(n.min));
+  validHandler = (e, a) => {
+    const { scale: o, onChange: t, range: c } = this.props, r = c.step || 0.1, n = o ?? {}, i = a.target;
+    if (i.value !== "") {
+      let l = parseFloat(i.value);
+      l = Math.round(l / r) * r, l > parseFloat(i.max) ? l = parseFloat(i.max) : l < parseFloat(i.min) && (l = parseFloat(i.min));
       const s = r.toString().split(".")[1]?.length || 0;
-      a[e] = parseFloat(o.toFixed(s)), t("TYPED", {
-        scale: a
+      n[e] = parseFloat(l.toFixed(s)), t("TYPED", {
+        scale: n
       });
     }
   };
   // Direct Actions
   onGrab = (e) => {
     e.stopPropagation();
-    const i = e.currentTarget, l = i.parentElement, t = e.clientX - e.currentTarget.getBoundingClientRect().left - e.currentTarget.getBoundingClientRect().width / 2, p = l.getBoundingClientRect(), r = p.width, a = l.parentElement, n = Array.from(l.children);
+    const a = e.currentTarget, o = a.parentElement, t = e.clientX - e.currentTarget.getBoundingClientRect().left - e.currentTarget.getBoundingClientRect().width / 2, c = o.getBoundingClientRect(), r = c.width, n = o.parentElement, i = Array.from(
+      o.children
+    ).filter((s) => s.dataset.id !== void 0);
     this.setState({
-      activeKnobId: i.dataset.id || null
+      activeKnobId: a.dataset.id || null
     });
-    const o = (s) => {
-      const { range: c, onChange: u } = this.props, d = {};
-      n.forEach(
-        (m) => d[m.dataset.id] = parseFloat(
+    const l = (s) => {
+      const { range: d, onChange: u } = this.props, p = {};
+      i.forEach(
+        (g) => p[g.dataset.id] = parseFloat(
           f(
-            parseFloat(m.style.left.replace("%", "")),
+            parseFloat(g.style.left.replace("%", "")),
             0,
             100,
-            c.min,
-            c.max
+            d.min,
+            d.max
           ).toFixed(1)
         )
       ), u(s, {
-        scale: d
+        scale: p
       });
     };
-    i.style.zIndex = "2", document.onmousemove = (s) => this.onSlide(
+    a.style.zIndex = "2", document.onmousemove = (s) => this.onSlide(
       s,
-      a,
-      l,
       n,
+      o,
       i,
+      a,
       t,
       r,
-      p,
-      (c) => o(c)
-    ), document.onmouseup = () => this.onRelease(n, i, (s) => o(s));
+      c,
+      (d) => l(d)
+    ), document.onmouseup = () => this.onRelease(i, a, (s) => l(s));
   };
-  onSlide = (e, i, l, t, p, r, a, n, o) => {
-    const { min: s, max: c, step: u = 0.1 } = this.props.range;
-    let d = e.clientX - n.left - r;
-    if (d <= 0 ? d = 0 : d >= a && (d = a), p === l.firstChild && e.shiftKey)
+  onSlide = (e, a, o, t, c, r, n, i, l) => {
+    const { min: s, max: d, step: u = 0.1 } = this.props.range;
+    let p = e.clientX - i.left - r;
+    if (p <= 0 ? p = 0 : p >= n && (p = n), c === o.firstChild && e.shiftKey)
       return this.distributeStops(
         "MIN",
-        parseFloat(f(d, 0, a, s, c).toFixed(1)),
+        parseFloat(f(p, 0, n, s, d).toFixed(1)),
         t
       );
-    if (p === l.lastChild && e.shiftKey)
+    if (c === o.lastChild && e.shiftKey)
       return this.distributeStops(
         "MAX",
-        parseFloat(f(d, 0, a, s, c).toFixed(1)),
+        parseFloat(f(p, 0, n, s, d).toFixed(1)),
         t
       );
     if (e.ctrlKey || e.metaKey)
-      if (d < p.offsetLeft - l.firstChild.offsetLeft || d > a - l.lastChild.offsetLeft + p.offsetLeft)
-        d = p.offsetLeft;
+      if (p < c.offsetLeft - o.firstChild.offsetLeft || p > n - o.lastChild.offsetLeft + c.offsetLeft)
+        p = c.offsetLeft;
       else
         return this.linkStops(
-          parseFloat(f(d, 0, a, s, c).toFixed(1)),
-          p,
+          parseFloat(f(p, 0, n, s, d).toFixed(1)),
+          c,
           t
         );
     e.ctrlKey === !1 && e.metaKey === !1 && e.shiftKey === !1 && this.setState({
       isTooltipDisplay: Array(t.length).fill(!1)
     });
-    const m = f(d, 0, a, s, c), y = Math.round(m / u) * u, S = u.toString().split(".")[1]?.length || 0;
+    const g = f(p, 0, n, s, d), x = Math.round(g / u) * u, S = u.toString().split(".")[1]?.length || 0;
     if (u >= 1) {
-      const x = parseFloat(
+      const v = parseFloat(
         f(
-          parseFloat(p.style.left.replace("%", "")),
+          parseFloat(c.style.left.replace("%", "")),
           0,
           100,
           s,
-          c
+          d
         ).toFixed(S)
-      ), b = parseFloat(y.toFixed(S));
-      if (x !== b) {
-        const v = f(y, s, c, 0, 100);
-        p.style.left = v.toFixed(S) + "%", requestAnimationFrame(() => {
-          p.focus();
-        }), o("UPDATING");
+      ), b = parseFloat(x.toFixed(S));
+      if (v !== b) {
+        const M = f(x, s, d, 0, 100);
+        c.style.left = M.toFixed(S) + "%", requestAnimationFrame(() => {
+          c.focus();
+        }), l("UPDATING");
       }
     } else {
-      const x = f(y, s, c, 0, 100);
-      p.style.left = x.toFixed(S) + "%", requestAnimationFrame(() => {
-        p.focus();
-      }), o("UPDATING");
+      const v = f(x, s, d, 0, 100);
+      c.style.left = v.toFixed(S) + "%", requestAnimationFrame(() => {
+        c.focus();
+      }), l("UPDATING");
     }
     document.body.style.cursor = "ew-resize";
   };
-  onRelease = (e, i, l) => {
-    document.onmousemove = null, document.onmouseup = null, i.onmouseup = null, i.style.zIndex = "1", this.setState({
+  onRelease = (e, a, o) => {
+    document.onmousemove = null, document.onmouseup = null, a.onmouseup = null, a.style.zIndex = "1", this.setState({
       activeKnobId: null
     }), requestAnimationFrame(() => {
-      i.focus();
+      a.focus();
     }), this.setState({
       isTooltipDisplay: Array(e.length).fill(!1)
-    }), l("RELEASED"), document.body.style.cursor = "";
+    }), o("RELEASED"), document.body.style.cursor = "";
   };
   onAdd = (e) => {
-    const { scale: i, onChange: l } = this.props, { min: t, max: p } = this.props.range, r = K(e.nativeEvent, i, t, p);
-    l("SHIFTED", r, "ADD_STOP");
+    const { scale: a, onChange: o } = this.props, { min: t, max: c } = this.props.range, r = K(e.nativeEvent, a, t, c);
+    o("SHIFTED", r, "ADD_STOP");
   };
   onDelete = (e) => {
-    const { scale: i, onChange: l } = this.props, t = L(i, e);
-    l("SHIFTED", t, "DELETE_STOP");
+    const { scale: a, onChange: o } = this.props, t = L(a, e);
+    o("SHIFTED", t, "DELETE_STOP");
   };
-  onShiftRight = (e, i) => {
-    const { scale: l, onChange: t } = this.props, { min: p, max: r, step: a = 1 } = this.props.range, n = _(l, e, i, p, r, a);
-    t("SHIFTED", n), requestAnimationFrame(() => {
-      const o = e.closest(".multiple-slider__range");
-      if (o) {
-        const s = o.querySelector(
+  onShiftRight = (e, a) => {
+    const { scale: o, onChange: t } = this.props, { min: c, max: r, step: n = 1 } = this.props.range, i = _(o, e, a, c, r, n);
+    t("SHIFTED", i), requestAnimationFrame(() => {
+      const l = e.closest(".multiple-slider__range");
+      if (l) {
+        const s = l.querySelector(
           `[data-id="${e.dataset.id}"]`
         );
         s instanceof HTMLElement && s.focus();
       }
     });
   };
-  onShiftLeft = (e, i) => {
-    const { scale: l, onChange: t } = this.props, { min: p, max: r, step: a = 1 } = this.props.range, n = N(l, e, i, p, r, a);
-    t("SHIFTED", n), requestAnimationFrame(() => {
-      const o = e.closest(".multiple-slider__range");
-      if (o) {
-        const s = o.querySelector(
+  onShiftLeft = (e, a) => {
+    const { scale: o, onChange: t } = this.props, { min: c, max: r, step: n = 1 } = this.props.range, i = N(o, e, a, c, r, n);
+    t("SHIFTED", i), requestAnimationFrame(() => {
+      const l = e.closest(".multiple-slider__range");
+      if (l) {
+        const s = l.querySelector(
           `[data-id="${e.dataset.id}"]`
         );
         s instanceof HTMLElement && s.focus();
       }
     });
   };
-  distributeStops = (e, i, l) => {
-    const { scale: t, distributionEasing: p, onChange: r, range: a } = this.props, { min: n, max: o, step: s = 0.1 } = a, c = Math.round(i / s) * s, u = s.toString().split(".")[1]?.length || 0;
+  distributeStops = (e, a, o) => {
+    const { scale: t, distributionEasing: c, onChange: r, range: n } = this.props, { min: i, max: l, step: s = 0.1 } = n, d = Math.round(a / s) * s, u = s.toString().split(".")[1]?.length || 0;
     e === "MIN" ? r("UPDATING", {
-      scale: M(
-        Object.entries(t).sort((d, m) => m[1] - d[1]).map((d) => parseFloat(d[0])),
-        parseFloat(c.toFixed(u)),
-        Math.max(...Object.values(t)) ?? o,
-        p
+      scale: F(
+        Object.entries(t).sort((p, g) => g[1] - p[1]).map((p) => parseFloat(p[0])),
+        parseFloat(d.toFixed(u)),
+        Math.max(...Object.values(t)) ?? l,
+        c
       )
     }) : e === "MAX" && r("UPDATING", {
-      scale: M(
-        Object.entries(t).sort((d, m) => m[1] - d[1]).map((d) => parseFloat(d[0])),
-        Math.min(...Object.values(t)) ?? n,
-        parseFloat(c.toFixed(u)),
-        p
+      scale: F(
+        Object.entries(t).sort((p, g) => g[1] - p[1]).map((p) => parseFloat(p[0])),
+        Math.min(...Object.values(t)) ?? i,
+        parseFloat(d.toFixed(u)),
+        c
       )
     }), this.setState({
-      isTooltipDisplay: Array(l.length).fill(!0)
+      isTooltipDisplay: Array(o.length).fill(!0)
     }), document.body.style.cursor = "ew-resize";
   };
-  linkStops = (e, i, l) => {
-    const { scale: t, onChange: p, range: r } = this.props, { step: a = 0.1 } = r, n = t, o = Math.round(e / a) * a, s = a.toString().split(".")[1]?.length || 0;
-    l.filter((c) => c !== i).forEach((c) => {
-      const u = n[c.dataset.id] - n[i.dataset.id] + o, d = Math.round(u / a) * a;
-      n[c.dataset.id] = parseFloat(
-        d.toFixed(s)
+  linkStops = (e, a, o) => {
+    const { scale: t, onChange: c, range: r } = this.props, { step: n = 0.1 } = r, i = t, l = Math.round(e / n) * n, s = n.toString().split(".")[1]?.length || 0;
+    o.filter((d) => d !== a).forEach((d) => {
+      const u = i[d.dataset.id] - i[a.dataset.id] + l, p = Math.round(u / n) * n;
+      i[d.dataset.id] = parseFloat(
+        p.toFixed(s)
       );
-    }), n[i.dataset.id] = parseFloat(
-      o.toFixed(s)
+    }), i[a.dataset.id] = parseFloat(
+      l.toFixed(s)
     ), this.setState({
-      isTooltipDisplay: this.state.isTooltipDisplay.fill(!0)
-    }), p("UPDATING", {
-      scale: n
+      isTooltipDisplay: Array(o.length).fill(!0)
+    }), c("UPDATING", {
+      scale: i
     }), document.body.style.cursor = "ew-resize";
   };
   // Templates
+  Progress = () => {
+    const { scale: e, range: a, hasProgressBar: o } = this.props;
+    if (!o) return null;
+    const t = Object.values(e).sort((n, i) => n - i);
+    if (t.length < 2) return null;
+    const c = f(t[0], a.min, a.max, 0, 100), r = f(t[t.length - 1], a.min, a.max, 0, 100);
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        className: "multiple-slider__progress",
+        style: { left: `${c}%`, width: `${r - c}%` }
+      }
+    );
+  };
   Status = () => {
-    const { warning: e, isBlocked: i, isNew: l } = this.props;
-    if (e || i || l)
-      return /* @__PURE__ */ I("div", { className: "multiple-slider__status", children: [
-        e !== void 0 && /* @__PURE__ */ g(
+    const { warning: e, isBlocked: a, isNew: o } = this.props;
+    if (e || a || o)
+      return /* @__PURE__ */ y("div", { className: "multiple-slider__status", children: [
+        e !== void 0 && /* @__PURE__ */ m(
           w,
           {
             iconType: "PICTO",
@@ -307,127 +321,142 @@ class H extends T.Component {
             type: e.type
           }
         ),
-        (i || l) && /* @__PURE__ */ g(
-          D,
+        (a || o) && /* @__PURE__ */ m(
+          A,
           {
             isSolo: !0,
-            action: i ? this.props.onUnblock : void 0,
-            children: l ? "New" : "Pro"
+            action: a ? this.props.onUnblock : void 0,
+            children: o ? "New" : "Pro"
           }
         )
       ] });
   };
   Edit = () => {
-    const { scale: e, range: i, colors: l, tips: t, isBlocked: p } = this.props, { isTooltipDisplay: r } = this.state;
-    return /* @__PURE__ */ g(
+    const { scale: e, range: a, colors: o, tips: t, isBlocked: c } = this.props, { isTooltipDisplay: r } = this.state;
+    return /* @__PURE__ */ y(
       "div",
       {
-        className: E([
+        className: I([
           "multiple-slider__range",
-          p && "multiple-slider__range--blocked"
+          c && "multiple-slider__range--blocked"
         ]),
         style: {
-          background: `linear-gradient(90deg, ${l.min}, ${l.max})`
+          background: o !== void 0 ? `linear-gradient(90deg, ${o.min}, ${o.max})` : void 0
         },
         role: "presentation",
-        children: Object.entries(e).sort((a, n) => a[1] - n[1]).map((a, n, o) => /* @__PURE__ */ g(
-          F,
-          {
-            id: a[0],
-            shortId: a[0],
-            value: a[1],
-            offset: f(a[1], i.min, i.max, 0, 100),
-            min: i.min.toString(),
-            max: i.max.toString(),
-            helper: n === 0 || n === o.length - 1 ? {
-              label: t.minMax,
-              type: "MULTI_LINE"
-            } : void 0,
-            canBeTyped: !0,
-            isDisplayed: r[n],
-            isBlocked: p,
-            style: {
-              pointerEvents: this.state.activeKnobId && this.state.activeKnobId !== a[0] || p ? "none" : "auto"
-            },
-            onShiftRight: (s) => {
-              this.onShiftRight(s.target, s.shiftKey);
-            },
-            onShiftLeft: (s) => {
-              this.onShiftLeft(s.target, s.shiftKey);
+        children: [
+          /* @__PURE__ */ m(this.Progress, {}),
+          Object.entries(e).sort((n, i) => n[1] - i[1]).map((n, i, l) => /* @__PURE__ */ m(
+            E,
+            {
+              id: n[0],
+              shortId: n[0],
+              value: n[1],
+              offset: f(n[1], a.min, a.max, 0, 100),
+              min: a.min.toString(),
+              max: a.max.toString(),
+              helper: i === 0 || i === l.length - 1 ? {
+                label: t.minMax,
+                type: "MULTI_LINE"
+              } : void 0,
+              canBeTyped: !0,
+              isDisplayed: r[i],
+              isBlocked: c,
+              style: {
+                pointerEvents: this.state.activeKnobId && this.state.activeKnobId !== n[0] || c ? "none" : "auto"
+              },
+              onShiftRight: (s) => {
+                this.onShiftRight(s.target, s.shiftKey);
+              },
+              onShiftLeft: (s) => {
+                this.onShiftLeft(s.target, s.shiftKey);
+              },
+              onMouseDown: (s) => {
+                this.onGrab(s), s.target.focus();
+              },
+              onValidStopValue: (s, d) => this.validHandler(s, d),
+              "aria-valuenow": n[1]
             },
-            onMouseDown: (s) => {
-              this.onGrab(s), s.target.focus();
-            },
-            onValidStopValue: (s, c) => this.validHandler(s, c),
-            "aria-valuenow": a[1]
-          },
-          a[0]
-        ))
+            n[0]
+          ))
+        ]
       }
     );
   };
   FullyEdit = () => {
-    const { scale: e, stops: i, range: l, colors: t, tips: p, isBlocked: r } = this.props, { isTooltipDisplay: a } = this.state;
-    return /* @__PURE__ */ g(
+    const { scale: e, stops: a, range: o, colors: t, tips: c, isBlocked: r } = this.props, { isTooltipDisplay: n } = this.state;
+    return /* @__PURE__ */ y(
       "div",
       {
-        className: E([
+        className: I([
           "multiple-slider__range",
-          i.list.length < (i.max ?? 1 / 0) && !r && "multiple-slider__range--add",
-          i.list.length === (i.max ?? 1 / 0) && "multiple-slider__range--not-allowed",
+          a.list.length < (a.max ?? 1 / 0) && !r && "multiple-slider__range--add",
+          a.list.length === (a.max ?? 1 / 0) && "multiple-slider__range--not-allowed",
           r && "multiple-slider__range--blocked"
         ]),
         style: {
-          background: `linear-gradient(90deg, ${t.min}, ${t.max})`
+          background: t !== void 0 ? `linear-gradient(90deg, ${t.min}, ${t.max})` : void 0
         },
-        onMouseDown: (n) => i.list.length < (i.max ?? 1 / 0) && this.onAdd(n),
-        children: Object.entries(e).sort((n, o) => n[1] - o[1]).map((n, o, s) => /* @__PURE__ */ g(
-          F,
-          {
-            id: n[0],
-            shortId: n[0],
-            value: n[1],
-            offset: f(n[1], l.min, l.max, 0, 100),
-            min: l.min.toString(),
-            max: l.max.toString(),
-            helper: o === 0 || o === s.length - 1 ? {
-              label: p.minMax,
-              type: "MULTI_LINE"
-            } : void 0,
-            canBeTyped: !0,
-            isDisplayed: a[o],
-            isBlocked: r,
-            style: {
-              pointerEvents: this.state.activeKnobId && this.state.activeKnobId !== n[0] || r ? "none" : "auto"
-            },
-            onShiftRight: (c) => {
-              this.onShiftRight(c.target, c.shiftKey);
-            },
-            onShiftLeft: (c) => {
-              this.onShiftLeft(c.target, c.shiftKey);
-            },
-            onDelete: (c) => {
-              i.list.length > (i.min ?? 1 / 0) && this.onDelete(c.target);
-            },
-            onMouseDown: (c) => {
-              this.onGrab(c), c.target.focus();
+        onMouseDown: (i) => a.list.length < (a.max ?? 1 / 0) && this.onAdd(i),
+        children: [
+          /* @__PURE__ */ m(this.Progress, {}),
+          Object.entries(e).sort((i, l) => i[1] - l[1]).map((i, l, s) => /* @__PURE__ */ m(
+            E,
+            {
+              id: i[0],
+              shortId: i[0],
+              value: i[1],
+              offset: f(i[1], o.min, o.max, 0, 100),
+              min: o.min.toString(),
+              max: o.max.toString(),
+              helper: l === 0 || l === s.length - 1 ? {
+                label: c.minMax,
+                type: "MULTI_LINE"
+              } : void 0,
+              canBeTyped: !0,
+              isDisplayed: n[l],
+              isBlocked: r,
+              style: {
+                pointerEvents: this.state.activeKnobId && this.state.activeKnobId !== i[0] || r ? "none" : "auto"
+              },
+              onShiftRight: (d) => {
+                this.onShiftRight(d.target, d.shiftKey);
+              },
+              onShiftLeft: (d) => {
+                this.onShiftLeft(d.target, d.shiftKey);
+              },
+              onDelete: (d) => {
+                a.list.length > (a.min ?? 1 / 0) && this.onDelete(d.target);
+              },
+              onMouseDown: (d) => {
+                this.onGrab(d), d.target.focus();
+              },
+              onValidStopValue: (d, u) => this.validHandler(d, u),
+              "aria-valuenow": i[1]
             },
-            onValidStopValue: (c, u) => this.validHandler(c, u),
-            "aria-valuenow": n[1]
-          },
-          n[0]
-        ))
+            i[0]
+          ))
+        ]
       }
     );
   };
   // Render
   render() {
-    const { type: e } = this.props;
-    return /* @__PURE__ */ I("div", { className: "multiple-slider", children: [
-      e === "EDIT" && /* @__PURE__ */ g(this.Edit, {}),
-      e === "FULLY_EDIT" && /* @__PURE__ */ g(this.FullyEdit, {}),
-      this.Status()
-    ] });
+    const { type: e, hasPadding: a } = this.props;
+    return /* @__PURE__ */ y(
+      "div",
+      {
+        className: I([
+          "multiple-slider",
+          !a && "multiple-slider--no-padding"
+        ]),
+        children: [
+          e === "EDIT" && /* @__PURE__ */ m(this.Edit, {}),
+          e === "FULLY_EDIT" && /* @__PURE__ */ m(this.FullyEdit, {}),
+          this.Status()
+        ]
+      }
+    );
   }
 }
 export {