@memobit/libs 3.0.0 → 3.1.0

package/dist/components/ControlPanel/ControlPanelFilter.js

@@ -0,0 +1,386 @@
+import { Icon as g } from "../Icon/Icon2.js";
+import { Button as C } from "../Button/Button2.js";
+import { Chip as A } from "../Chip/Chip2.js";
+import { InputNumber as b } from "../InputNumber/InputNumber2.js";
+import { InputText as k } from "../InputText/InputText2.js";
+import { DatePicker as w } from "../DatePicker/DatePicker2.js";
+import { Dropdown as R } from "../Dropdown/Dropdown2.js";
+import { InputDate as E } from "../InputDate/InputDate2.js";
+import { InputSearch as I } from "../InputSearch/InputSearch2.js";
+import { Rating as L } from "../Rating/Rating2.js";
+import { DEFAULT_DATE_RANGE_PRESETS as M } from "./ControlPanel.types.js";
+import { useEffect as P, useRef as T, useState as N } from "react";
+import { jsx as n, jsxs as _ } from "react/jsx-runtime";
+var V = 3, D = (e) => Array.isArray(e) ? e : e == null || typeof e == "boolean" ? [] : [e], S = (e) => e.every((r) => typeof r == "number") ? e : e.map(String), x = 2, j = (e) => {
+  const r = e.options ?? [];
+  return D(e.value).map((o) => r.find((t) => t.value === o)?.label ?? String(o));
+}, H = (e) => {
+  const { type: r, value: o } = e;
+  if (o == null || o === "") return;
+  if (r === "checkbox") return o === !0 ? "On" : void 0;
+  if (r === "range") {
+    const [s, d] = Array.isArray(o) ? o : [];
+    return s === void 0 && d === void 0 ? void 0 : s === void 0 ? `≤ ${d}` : d === void 0 ? `≥ ${s}` : `${s} – ${d}`;
+  }
+  if (r === "date-range") {
+    const [s, d] = Array.isArray(o) ? o : [];
+    return !s && !d ? void 0 : s ? d ? `${s} → ${d}` : `from ${s}` : `until ${d}`;
+  }
+  if (r === "rating") return typeof o == "number" && o > 0 ? String(o) : void 0;
+  if (r === "text" || r === "search" || r === "date" || r === "number") return String(o);
+  const t = j(e);
+  if (t.length !== 0)
+    return t.length <= x ? t.join(", ") : `${t.slice(0, x).join(", ")} +${t.length - x}`;
+}, ne = ({ filter: e, collapsible: r = !1, onChange: o }) => {
+  const t = r && e.type !== "checkbox", [s, d] = N(e.defaultExpanded ?? !1), a = e.summary ?? H(e), i = /* @__PURE__ */ _("span", {
+    className: `control-panel__filter-title${e.isActive ? " control-panel__filter-title--active" : ""}`,
+    children: [
+      e.isActive && /* @__PURE__ */ n("span", { className: "control-panel__filter-active-dot" }),
+      e.icon && /* @__PURE__ */ n(g, { name: e.icon }),
+      e.label
+    ]
+  });
+  return /* @__PURE__ */ _("div", {
+    className: [
+      "control-panel__filter",
+      e.type === "checkbox" ? "control-panel__filter--checkbox" : "",
+      t ? "control-panel__filter--collapsible" : "",
+      t && !s ? "control-panel__filter--collapsed" : ""
+    ].filter(Boolean).join(" "),
+    children: [t ? /* @__PURE__ */ _("button", {
+      className: "control-panel__filter-toggle",
+      type: "button",
+      onClick: () => d((l) => !l),
+      children: [
+        i,
+        !s && a && /* @__PURE__ */ n("span", {
+          className: "control-panel__filter-summary",
+          children: a
+        }),
+        /* @__PURE__ */ n("span", {
+          className: "control-panel__filter-caret",
+          children: /* @__PURE__ */ n(g, { name: s ? "caret-up" : "caret-down" })
+        })
+      ]
+    }) : e.type !== "checkbox" && i, (!t || s) && /* @__PURE__ */ n(B, {
+      filter: e,
+      onChange: o
+    })]
+  });
+}, U = ({ placeholder: e, value: r, onChange: o }) => {
+  const [t, s] = N(r), d = T(r);
+  return P(() => {
+    r !== d.current && (d.current = r, s(r));
+  }, [r]), /* @__PURE__ */ n(I, {
+    className: "control-panel__filter-search",
+    onChange: (a) => {
+      d.current = a, s(a), o(a);
+    },
+    placeholder: e,
+    value: t
+  });
+}, B = ({ filter: e, onChange: r }) => {
+  const o = D(e.value), t = e.options ?? [], [s, d] = N("");
+  if (e.type === "checkbox") return /* @__PURE__ */ n(A, {
+    count: e.count,
+    selected: e.value === !0,
+    onClick: () => r({
+      filterId: e.id,
+      type: e.type,
+      value: e.value !== !0
+    }),
+    children: e.label
+  });
+  if (e.type === "date") return /* @__PURE__ */ n(E, {
+    min: e.minDate,
+    max: e.maxDate,
+    value: typeof e.value == "string" ? e.value : "",
+    onChange: (a) => r({
+      filterId: e.id,
+      type: e.type,
+      value: a ?? null
+    })
+  });
+  if (e.type === "text") return /* @__PURE__ */ n("div", {
+    className: "control-panel__filter-text",
+    children: /* @__PURE__ */ n(k, {
+      onChange: (a) => r({
+        filterId: e.id,
+        type: e.type,
+        value: a
+      }),
+      placeholder: e.placeholder,
+      value: typeof e.value == "string" ? e.value : ""
+    })
+  });
+  if (e.type === "search") return /* @__PURE__ */ n(U, {
+    placeholder: e.placeholder,
+    value: typeof e.value == "string" ? e.value : "",
+    onChange: (a) => r({
+      filterId: e.id,
+      type: e.type,
+      value: a
+    })
+  });
+  if (e.type === "number") return /* @__PURE__ */ n("div", {
+    className: "control-panel__filter-number",
+    children: /* @__PURE__ */ n(b, {
+      min: e.min,
+      max: e.max,
+      step: e.step,
+      placeholder: e.placeholder,
+      value: typeof e.value == "number" ? e.value : void 0,
+      onChange: (a) => r({
+        filterId: e.id,
+        type: e.type,
+        value: a ?? null
+      })
+    })
+  });
+  if (e.type === "rating") return /* @__PURE__ */ n(L, {
+    selectable: !0,
+    icon: e.ratingIcon ?? "star",
+    maxRate: e.maxRate ?? 10,
+    rating: typeof e.value == "number" ? e.value : 0,
+    variant: e.ratingVariant ?? "warning",
+    onSelect: (a) => r({
+      filterId: e.id,
+      type: e.type,
+      value: a
+    })
+  });
+  if (e.type === "range") {
+    const a = Array.isArray(e.value) ? e.value : [], i = a[0], l = a[1], m = i !== void 0 && l !== void 0 && i > l, p = (u, v) => r({
+      filterId: e.id,
+      type: e.type,
+      value: [u, v]
+    });
+    return /* @__PURE__ */ _("div", {
+      className: "control-panel__filter-range",
+      children: [
+        /* @__PURE__ */ n(b, {
+          min: e.min,
+          max: e.max,
+          step: e.step,
+          placeholder: "Min",
+          value: i,
+          error: m ? "Min exceeds max" : void 0,
+          onChange: (u) => p(u, l)
+        }),
+        /* @__PURE__ */ n("span", {
+          className: "control-panel__filter-range-sep",
+          children: "—"
+        }),
+        /* @__PURE__ */ n(b, {
+          min: e.min,
+          max: e.max,
+          step: e.step,
+          placeholder: "Max",
+          value: l,
+          error: m ? "Max is below min" : void 0,
+          onChange: (u) => p(i, u)
+        })
+      ]
+    });
+  }
+  if (e.type === "date-range") {
+    const a = Array.isArray(e.value) ? e.value : [], i = a[0] || void 0, l = a[1] || void 0, m = e.presets ?? M, p = (c) => {
+      if (!c) return;
+      const [h, y, $] = c.split("-").map(Number);
+      return new Date(h, y - 1, $);
+    }, u = (c) => `${c.getFullYear()}-${String(c.getMonth() + 1).padStart(2, "0")}-${String(c.getDate()).padStart(2, "0")}`, v = (c, h) => r({
+      filterId: e.id,
+      type: e.type,
+      value: [c ?? "", h ?? ""]
+    }), f = (c) => {
+      const h = e.maxDate ? p(e.maxDate) : /* @__PURE__ */ new Date();
+      if (!h) return;
+      const y = new Date(h);
+      y.setDate(y.getDate() - c), v(u(y), u(h));
+    };
+    return /* @__PURE__ */ _("div", {
+      className: "control-panel__filter-date-range",
+      children: [m.length > 0 && /* @__PURE__ */ n("div", {
+        className: "control-panel__filter-date-presets",
+        children: m.map((c) => /* @__PURE__ */ n(C, {
+          size: "small",
+          variant: "default",
+          onClick: () => f(c.days),
+          children: c.label
+        }, c.days))
+      }), /* @__PURE__ */ n(w, {
+        mode: "range",
+        minDate: p(e.minDate),
+        maxDate: p(e.maxDate),
+        placeholder: e.placeholder ?? "Select range",
+        value: i && l ? {
+          start: p(i),
+          end: p(l)
+        } : void 0,
+        onChange: (c) => {
+          if (c && typeof c == "object" && !Array.isArray(c) && "start" in c) {
+            v(u(c.start), u(c.end));
+            return;
+          }
+          v(void 0, void 0);
+        }
+      })]
+    });
+  }
+  if (e.type === "dropdown")
+    return !e.multiple && t.length > 0 && t.length <= V ? /* @__PURE__ */ n("div", {
+      className: `control-panel__filter-list ${e.inline ? "control-panel__filter-list--inline" : ""}`,
+      children: t.map((a) => {
+        const i = e.value === a.value;
+        return /* @__PURE__ */ n("div", {
+          className: `control-panel__filter-radio ${i ? "control-panel__filter-radio--selected" : ""}`,
+          children: /* @__PURE__ */ _("label", {
+            className: "control-panel__filter-radio-label",
+            children: [
+              /* @__PURE__ */ n("input", {
+                checked: i,
+                className: "control-panel__filter-radio-input",
+                name: e.id,
+                onChange: () => r({
+                  filterId: e.id,
+                  type: e.type,
+                  value: a.value,
+                  option: a,
+                  options: [a]
+                }),
+                type: "radio",
+                value: a.value
+              }),
+              a.color && /* @__PURE__ */ n("span", {
+                className: "control-panel__filter-swatch",
+                style: { backgroundColor: a.color }
+              }),
+              a.icon && /* @__PURE__ */ n(g, { name: a.icon }),
+              /* @__PURE__ */ n("span", {
+                className: "control-panel__filter-label",
+                children: a.label
+              }),
+              a.count !== void 0 && /* @__PURE__ */ n("span", {
+                className: "control-panel__filter-count",
+                children: a.count
+              })
+            ]
+          })
+        }, a.value);
+      })
+    }) : /* @__PURE__ */ n(R, {
+      className: "control-panel__filter-dropdown",
+      multiple: e.multiple,
+      name: e.id,
+      onChange: (a) => {
+        const i = Array.isArray(a) ? a : a ? [a] : [];
+        r({
+          filterId: e.id,
+          type: e.type,
+          value: Array.isArray(a) ? S(a.map((l) => l.value)) : a?.value ?? null,
+          option: Array.isArray(a) ? null : a,
+          options: i
+        });
+      },
+      options: t,
+      placeholder: e.placeholder,
+      searchable: e.searchable ?? !1,
+      selectedCountDisplay: "inline",
+      usePortal: !1,
+      value: typeof e.value == "boolean" ? null : e.value
+    });
+  if (e.type === "chips") {
+    const a = s.trim().toLowerCase(), i = e.searchable && a ? t.filter((l) => l.label.toLowerCase().includes(a)) : t;
+    return /* @__PURE__ */ _("div", {
+      className: "control-panel__filter-chips-wrap",
+      children: [e.searchable && t.length > 0 && /* @__PURE__ */ n(I, {
+        className: "control-panel__filter-chip-search",
+        value: s,
+        onChange: d,
+        placeholder: e.placeholder ?? "Filter..."
+      }), /* @__PURE__ */ n("div", {
+        className: "control-panel__filter-chips",
+        style: e.maxHeight !== void 0 ? {
+          maxHeight: typeof e.maxHeight == "number" ? `${e.maxHeight}px` : e.maxHeight,
+          overflowY: "auto"
+        } : void 0,
+        children: i.map((l) => {
+          const m = o.includes(l.value);
+          return /* @__PURE__ */ _(A, {
+            color: l.color,
+            count: l.count,
+            disabled: l.disabled,
+            icon: l.icon,
+            title: l.tooltip,
+            selected: m,
+            onClick: () => {
+              if (l.disabled) return;
+              const p = e.multiple === !1, u = p ? m ? [] : [l.value] : m ? o.filter((v) => v !== l.value) : [...o, l.value];
+              r({
+                filterId: e.id,
+                type: e.type,
+                value: p ? u[0] ?? null : S(u),
+                option: l,
+                options: t.filter((v) => u.includes(v.value))
+              });
+            },
+            children: [l.imageUrl && /* @__PURE__ */ n("img", {
+              className: "control-panel__filter-chip-avatar",
+              src: l.imageUrl,
+              alt: ""
+            }), l.label]
+          }, l.value);
+        })
+      })]
+    });
+  }
+  return /* @__PURE__ */ n("div", {
+    className: `control-panel__filter-list ${e.inline ? "control-panel__filter-list--inline" : ""}`,
+    children: t.map((a) => {
+      const i = e.value === a.value;
+      return /* @__PURE__ */ n("div", {
+        className: `control-panel__filter-radio ${i ? "control-panel__filter-radio--selected" : ""} ${a.disabled ? "control-panel__filter-radio--disabled" : ""}`,
+        title: a.tooltip,
+        children: /* @__PURE__ */ _("label", {
+          className: "control-panel__filter-radio-label",
+          children: [
+            /* @__PURE__ */ n("input", {
+              checked: i,
+              className: "control-panel__filter-radio-input",
+              disabled: a.disabled,
+              name: e.id,
+              onChange: () => r({
+                filterId: e.id,
+                type: e.type,
+                value: a.value,
+                option: a,
+                options: [a]
+              }),
+              type: "radio",
+              value: a.value
+            }),
+            a.color && /* @__PURE__ */ n("span", {
+              className: "control-panel__filter-swatch",
+              style: { backgroundColor: a.color }
+            }),
+            a.icon && /* @__PURE__ */ n(g, {
+              className: "control-panel__filter-icon",
+              name: a.icon
+            }),
+            /* @__PURE__ */ n("span", {
+              className: "control-panel__filter-label",
+              children: a.label
+            }),
+            a.count !== void 0 && /* @__PURE__ */ n("span", {
+              className: "control-panel__filter-count",
+              children: a.count
+            })
+          ]
+        })
+      }, a.value);
+    })
+  });
+};
+export {
+  ne as ControlPanelFilterItem
+};

package/dist/components/ControlPanel/ControlPanelNav.js

@@ -0,0 +1,74 @@
+import { Icon as d } from "../Icon/Icon2.js";
+import "react";
+import { jsx as l, jsxs as t } from "react/jsx-runtime";
+var C = ({ navigation: n, onNavigate: e }) => {
+  const c = n.some((a) => (a.children?.length ?? 0) > 0);
+  return /* @__PURE__ */ l("nav", {
+    className: "control-panel__nav",
+    children: n.map((a) => _(a, c, e))
+  });
+};
+function _(n, e, c, a = 0) {
+  const p = n.children ?? [], r = p.length > 0, s = n.isOpen ?? !1, h = [
+    "control-panel__nav-item",
+    n.isActive ? "control-panel__nav-item--active" : "",
+    n.dimmed ? "control-panel__nav-item--dimmed" : "",
+    r ? "control-panel__nav-item--has-children" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ t("div", {
+    className: "control-panel__nav-node",
+    children: [/* @__PURE__ */ t("div", {
+      className: "control-panel__nav-row",
+      style: { "--control-panel-nav-depth": a },
+      children: [e && (r ? /* @__PURE__ */ l("button", {
+        className: `control-panel__nav-toggle${s ? " control-panel__nav-toggle--open" : ""}`,
+        onClick: (o) => {
+          o.stopPropagation(), n.onOpenChange?.(!s, n);
+        },
+        type: "button",
+        children: /* @__PURE__ */ l(d, { name: "caret-right" })
+      }) : /* @__PURE__ */ l("span", { className: "control-panel__nav-toggle-placeholder" })), /* @__PURE__ */ t("button", {
+        className: h,
+        onClick: () => {
+          if (n.onClick) {
+            n.onClick(), c?.();
+            return;
+          }
+          r && n.onOpenChange?.(!s, n);
+        },
+        type: "button",
+        children: [
+          n.icon ? /* @__PURE__ */ l("span", {
+            className: "control-panel__nav-icon",
+            style: n.color ? { color: n.color } : void 0,
+            children: /* @__PURE__ */ l(d, { name: n.icon })
+          }) : n.color && /* @__PURE__ */ l("span", {
+            className: "control-panel__nav-dot",
+            style: { backgroundColor: n.color }
+          }),
+          /* @__PURE__ */ l("span", {
+            className: "control-panel__nav-label",
+            children: n.label
+          }),
+          n.count !== void 0 && /* @__PURE__ */ l("span", {
+            className: "control-panel__nav-count",
+            children: n.count
+          }),
+          n.badges && n.badges.length > 0 && /* @__PURE__ */ l("span", {
+            className: "control-panel__nav-badges",
+            children: n.badges.map((o, i) => /* @__PURE__ */ l("span", {
+              className: `control-panel__nav-badge control-panel__nav-badge--${o.variant}`,
+              children: o.count
+            }, i))
+          })
+        ]
+      })]
+    }), r && /* @__PURE__ */ l("div", {
+      className: `control-panel__nav-children${s ? " control-panel__nav-children--open" : ""}`,
+      children: p.map((o) => _(o, e, c, a + 1))
+    })]
+  }, n.id);
+}
+export {
+  C as ControlPanelNav
+};

package/dist/components/ControlPanel/ControlPanelOptions.js

@@ -0,0 +1,197 @@
+import { Icon as p } from "../Icon/Icon2.js";
+import { Button as y } from "../Button/Button2.js";
+import { Tooltip as I } from "../Tooltip/Tooltip2.js";
+import { Separator as u } from "../Separator/Separator2.js";
+import { Chip as f } from "../Chip/Chip2.js";
+import { Slider as G } from "../Slider/Slider2.js";
+import k from "react";
+import { Fragment as _, jsx as e, jsxs as c } from "react/jsx-runtime";
+var $ = [{
+  value: "cards",
+  label: "Grid",
+  icon: "grid"
+}, {
+  value: "table",
+  label: "Table",
+  icon: "table"
+}], C = {
+  value: "gallery",
+  label: "Gallery",
+  icon: "gallery"
+}, W = ({ normalizedOptionGroups: b, onOptionChange: m, viewToggle: r, onViewToggleComplete: S, groupBy: s, visibleColumns: i }) => /* @__PURE__ */ c("div", {
+  className: "control-panel__options",
+  children: [
+    /* @__PURE__ */ e("div", {
+      className: "control-panel__options-header",
+      children: /* @__PURE__ */ e("span", {
+        className: "control-panel__options-heading",
+        children: "Options"
+      })
+    }),
+    r && /* @__PURE__ */ e("div", {
+      className: "control-panel__option control-panel__option--view-toggle",
+      children: /* @__PURE__ */ e("div", {
+        className: "control-panel__option-view-toggle",
+        children: (r.options ?? [...$, ...r.showGallery ? [C] : []]).map((n) => /* @__PURE__ */ e(y, {
+          icon: n.icon,
+          size: "small",
+          variant: r.value === n.value ? "info" : "default",
+          onClick: () => {
+            r.onChange(n.value), S?.();
+          },
+          children: n.label
+        }, n.value))
+      })
+    }),
+    s && s.options.length > 0 && /* @__PURE__ */ c(_, { children: [r && /* @__PURE__ */ e(u, { spacing: 0 }), /* @__PURE__ */ c("div", {
+      className: "control-panel__option control-panel__option--group-by",
+      children: [/* @__PURE__ */ e("span", {
+        className: "control-panel__filter-title",
+        children: "Group by"
+      }), /* @__PURE__ */ e("div", {
+        className: "control-panel__filter-chips",
+        children: s.options.map((n) => {
+          const t = s.value === n.value;
+          return /* @__PURE__ */ e(f, {
+            selected: t,
+            onClick: () => s.onChange(t ? null : n.value),
+            children: n.label
+          }, n.value);
+        })
+      })]
+    })] }),
+    i && /* @__PURE__ */ c(_, { children: [(r || s && s.options.length > 0) && /* @__PURE__ */ e(u, { spacing: 0 }), /* @__PURE__ */ c("div", {
+      className: "control-panel__option control-panel__option--chips",
+      children: [/* @__PURE__ */ e("span", {
+        className: "control-panel__filter-title",
+        children: "Visible columns"
+      }), /* @__PURE__ */ e("div", {
+        className: "control-panel__filter-chips",
+        children: i.options.map((n) => {
+          const t = i.value.includes(n.value);
+          return /* @__PURE__ */ e(f, {
+            selected: t,
+            onClick: () => {
+              const l = t ? i.value.filter((o) => o !== n.value) : [...i.value, n.value];
+              i.onChange(l);
+            },
+            children: n.label
+          }, n.value);
+        })
+      })]
+    })] }),
+    b.length > 0 && (r || s || i) && /* @__PURE__ */ e(u, { spacing: 0 }),
+    b.map((n, t) => /* @__PURE__ */ c("div", {
+      className: "control-panel__option-group",
+      children: [n.label && /* @__PURE__ */ e("span", {
+        className: "control-panel__option-group-label",
+        children: n.label
+      }), n.options.map((l, o) => {
+        const N = o > 0 ? n.options[o - 1] : void 0, x = !!N && N.type !== l.type;
+        return /* @__PURE__ */ c(k.Fragment, { children: [x && /* @__PURE__ */ e(u, { spacing: 0 }), /* @__PURE__ */ c("div", {
+          className: `control-panel__option control-panel__option--${l.type}`,
+          children: [
+            l.type === "checkbox" && /* @__PURE__ */ e(f, {
+              icon: l.icon,
+              selected: l.value ?? !1,
+              onClick: () => m?.({
+                optionId: l.id,
+                value: !(l.value ?? !1)
+              }),
+              children: l.label
+            }),
+            l.type === "radio" && /* @__PURE__ */ c(_, { children: [l.label && /* @__PURE__ */ e("span", {
+              className: "control-panel__filter-title",
+              children: l.label
+            }), /* @__PURE__ */ e("div", {
+              className: `control-panel__filter-list ${l.inline ? "control-panel__filter-list--inline" : ""}`,
+              children: l.options.map((a) => {
+                const d = l.value === a.value, h = () => m?.({
+                  optionId: l.id,
+                  value: a.value
+                }), v = /* @__PURE__ */ e("div", {
+                  className: `control-panel__filter-radio ${d ? "control-panel__filter-radio--selected" : ""} ${a.disabled ? "control-panel__filter-radio--disabled" : ""}`,
+                  children: /* @__PURE__ */ c("label", {
+                    className: "control-panel__filter-radio-label",
+                    children: [
+                      /* @__PURE__ */ e("input", {
+                        checked: d,
+                        className: "control-panel__filter-radio-input",
+                        disabled: a.disabled,
+                        name: `control-panel-option-${l.id}`,
+                        onChange: h,
+                        onClick: () => {
+                          a.disabled || d && h();
+                        },
+                        type: "radio",
+                        value: a.value
+                      }),
+                      a.icon && /* @__PURE__ */ e(p, { name: a.icon }),
+                      /* @__PURE__ */ e("span", {
+                        className: "control-panel__filter-label",
+                        children: a.label
+                      })
+                    ]
+                  })
+                });
+                return a.title ? /* @__PURE__ */ e(I, {
+                  title: a.title,
+                  children: v
+                }, a.value) : /* @__PURE__ */ e(k.Fragment, { children: v }, a.value);
+              })
+            })] }),
+            l.type === "slider" && /* @__PURE__ */ c(_, { children: [l.label && /* @__PURE__ */ c("span", {
+              className: "control-panel__filter-title",
+              children: [
+                l.icon && /* @__PURE__ */ e(p, { name: l.icon }),
+                l.label,
+                l.showValue !== !1 && /* @__PURE__ */ c("span", {
+                  className: "control-panel__option-slider-value",
+                  children: [l.value, l.unit ?? ""]
+                })
+              ]
+            }), /* @__PURE__ */ e(G, {
+              min: l.min,
+              max: l.max,
+              step: l.step,
+              value: l.value,
+              onChange: (a) => m?.({
+                optionId: l.id,
+                value: a
+              }),
+              showValues: !1,
+              thin: !0
+            })] }),
+            l.type === "chips" && /* @__PURE__ */ c(_, { children: [l.label && /* @__PURE__ */ e("span", {
+              className: "control-panel__filter-title",
+              children: l.label
+            }), /* @__PURE__ */ e("div", {
+              className: "control-panel__filter-chips",
+              children: l.options.map((a) => {
+                const d = l.value.includes(a.value);
+                return /* @__PURE__ */ e(f, {
+                  disabled: a.disabled,
+                  icon: a.icon,
+                  title: a.title,
+                  selected: d,
+                  onClick: () => {
+                    if (a.disabled) return;
+                    const h = d ? l.value.filter((v) => v !== a.value) : [...l.value, a.value];
+                    m?.({
+                      optionId: l.id,
+                      value: h
+                    });
+                  },
+                  children: a.label
+                }, a.value);
+              })
+            })] })
+          ]
+        })] }, l.id);
+      })]
+    }, n.id ?? n.label ?? t))
+  ]
+});
+export {
+  W as ControlPanelOptions
+};

package/dist/components/CopyButton/CopyButton.css

@@ -0,0 +1 @@
+.copy-button--icon-only{aspect-ratio:1;justify-content:center}