@feedmepos/mf-brand-app-builder 0.5.17 → 0.5.18

package/dist/ColorPicker-BsSFgHSF.js

@@ -0,0 +1,156 @@
+import { defineComponent as x, ref as f, watch as w, resolveComponent as m, openBlock as y, createBlock as h, withCtx as d, createVNode as i, createTextVNode as F, createElementVNode as t, createElementBlock as C, Fragment as B, renderList as V, normalizeClass as $, normalizeStyle as k, toDisplayString as P, computed as S, unref as D } from "vue";
+import { K as E } from "./ColorPicker-CHzKbuCD.js";
+const L = { class: "grid grid-cols-4 place-items-center items-start gap-16 flex-wrap pb-24" }, N = { class: "flex flex-col items-center" }, z = ["onClick"], K = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary text-center" }, R = { class: "w-full flex gap-8 justify-end items-center" }, T = /* @__PURE__ */ x({
+  __name: "LinkBrandkitColor",
+  props: {
+    color: {}
+  },
+  emits: ["update"],
+  setup(v, { emit: n }) {
+    const p = v, l = f(p.color);
+    w(
+      () => p.color,
+      (o) => {
+        l.value = o;
+      }
+    );
+    const a = f(!1), b = n, s = [
+      "--brand-color-primary",
+      "--brand-color-secondary",
+      "--brand-color-accent",
+      "--brand-color-background-base",
+      "--brand-color-background-elevated",
+      "--brand-color-neutral-light",
+      "--brand-color-neutral-mid",
+      "--brand-color-neutral-dark",
+      "--brand-color-typo-on-primary",
+      "--brand-color-typo-primary",
+      "--brand-color-typo-secondary",
+      "--brand-color-typo-tertiary",
+      "--brand-color-status-success",
+      "--brand-color-status-warning",
+      "--brand-color-status-error",
+      "--brand-color-status-info"
+    ];
+    return (o, e) => {
+      const u = m("FmButton"), c = m("FmDialog");
+      return y(), h(c, {
+        modelValue: a.value,
+        "onUpdate:modelValue": e[2] || (e[2] = (r) => a.value = r),
+        "dismiss-away": ""
+      }, {
+        "dialog-button": d(() => [
+          i(u, {
+            variant: "plain",
+            icon: "link"
+          })
+        ]),
+        "dialog-header": d(() => e[3] || (e[3] = [
+          F(" Link with brandkit color ")
+        ])),
+        default: d(() => [
+          t("div", L, [
+            (y(), C(B, null, V(s, (r) => {
+              var g, _;
+              return t("div", N, [
+                t("div", {
+                  onClick: (q) => l.value = r,
+                  class: $(["p-[2px] border-1 rounded-sm", {
+                    "border-fm-color-primary": (g = l.value) == null ? void 0 : g.includes(r),
+                    "border-fm-color-neutral-gray-200": !((_ = l.value) != null && _.includes(r))
+                  }])
+                }, [
+                  t("div", {
+                    class: "h-[40px] aspect-square cursor-pointer",
+                    style: k({ backgroundColor: `var(${r})` })
+                  }, null, 4)
+                ], 10, z),
+                t("div", K, P(r.replace("--brand-color-", "").replace(/-/g, " ")), 1)
+              ]);
+            }), 64))
+          ])
+        ]),
+        "dialog-footer": d(() => [
+          t("div", R, [
+            i(u, {
+              variant: "secondary",
+              label: "Close",
+              onClick: e[0] || (e[0] = (r) => a.value = !1)
+            }),
+            i(u, {
+              label: "Confirm",
+              onClick: e[1] || (e[1] = (r) => (b("update", `var(${l.value})`), a.value = !1))
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), U = { class: "flex items-center gap-8" }, j = { class: "shadow-lg rounded-lg p-8" }, A = /* @__PURE__ */ x({
+  __name: "ColorPicker",
+  props: {
+    context: {}
+  },
+  setup(v) {
+    const n = v, p = f(), l = async (s) => {
+      await n.context.node.input(s);
+    }, a = (s) => {
+      navigator.clipboard.writeText(s);
+    }, b = S(() => n.context._value.startsWith("var") ? getComputedStyle(document.documentElement).getPropertyValue(
+      n.context._value.slice(
+        4,
+        n.context._value.length - 1
+      )
+    ).trim() : n.context._value);
+    return (s, o) => {
+      const e = m("FmButton"), u = m("FmPopover");
+      return y(), C("div", U, [
+        i(u, null, {
+          "popover-button": d(() => [
+            t("div", {
+              ref_key: "elRef",
+              ref: p,
+              class: "w-[50px] h-[25px] relative border border-gray-400 rounded overflow-hidden"
+            }, [
+              o[3] || (o[3] = t("div", { class: "absolute inset-0 bg-checkerboard" }, null, -1)),
+              t("div", {
+                class: "absolute inset-0",
+                style: k({ backgroundColor: s.context._value })
+              }, null, 4)
+            ], 512)
+          ]),
+          default: d(() => [
+            t("div", j, [
+              i(D(E), {
+                copy: a,
+                onColorCopy: o[0] || (o[0] = (c) => a(c.cssColor)),
+                "default-format": "hex",
+                color: b.value,
+                "visible-formats": ["hex"],
+                onColorChange: o[1] || (o[1] = (c) => l(c.cssColor))
+              }, {
+                "copy-button": d(() => [
+                  i(e, {
+                    class: "w-full h-32",
+                    variant: "secondary",
+                    icon: "content_copy"
+                  })
+                ]),
+                _: 1
+              }, 8, ["color"])
+            ])
+          ]),
+          _: 1
+        }),
+        i(T, {
+          color: n.context._value,
+          onUpdate: o[2] || (o[2] = (c) => l(c))
+        }, null, 8, ["color"])
+      ]);
+    };
+  }
+});
+export {
+  A as default
+};

package/dist/ColorPicker-CHzKbuCD.js

@@ -0,0 +1,543 @@
+import { defineComponent as fe, ref as A, reactive as pe, computed as q, watch as ve, onMounted as de, onBeforeUnmount as me, openBlock as y, createElementBlock as $, createElementVNode as h, renderSlot as L, createTextVNode as G, createCommentVNode as Z, Fragment as ge, renderList as be, toDisplayString as we } from "vue";
+function E(e, n, o) {
+  return Math.max(n, Math.min(e, o));
+}
+function xe(e, n) {
+  if (typeof e == "string" || typeof n == "string")
+    return e === n;
+  for (const o in e)
+    if (e[o] !== n[o])
+      return !1;
+  return !0;
+}
+function F(e) {
+  const n = [], o = e.length > 5 ? 2 : 1;
+  for (let l = 1; l < e.length; l += o) {
+    const a = e.substring(l, l + o).repeat(o % 2 + 1), f = parseInt(a, 16);
+    n.push(l === 3 * o + 1 ? f / 255 : f);
+  }
+  return n.length === 3 && n.push(1), {
+    r: n[0],
+    g: n[1],
+    b: n[2],
+    a: n[3]
+  };
+}
+function ee(e) {
+  const n = e.l / 100, o = n + e.s / 100 * Math.min(n, 1 - n), l = o === 0 ? 0 : 200 * (1 - n / o);
+  return {
+    h: e.h,
+    s: l,
+    v: o * 100,
+    a: e.a
+  };
+}
+function S(e) {
+  let n = e.h % 360;
+  n < 0 && (n += 360);
+  const o = e.s / 100, l = e.l / 100;
+  return {
+    r: V(0, n, o, l) * 255,
+    g: V(8, n, o, l) * 255,
+    b: V(4, n, o, l) * 255,
+    a: e.a
+  };
+}
+function V(e, n, o, l) {
+  const a = (e + n / 30) % 12, f = o * Math.min(l, 1 - l);
+  return l - f * Math.max(-1, Math.min(a - 3, 9 - a, 1));
+}
+function te(e) {
+  const n = e.s / 100, o = e.v / 100, l = o * (1 - n / 2);
+  return {
+    h: e.h,
+    s: l === 0 || l === 1 ? 0 : (o - l) / Math.min(l, 1 - l) * 100,
+    l: l * 100,
+    a: e.a
+  };
+}
+function ne(e) {
+  return {
+    h: e.h,
+    w: e.v * (100 - e.s) / 100,
+    b: 100 - e.v,
+    a: e.a
+  };
+}
+function N(e) {
+  return S(te(e));
+}
+function k(e) {
+  const n = e.w / 100, o = e.b / 100;
+  let l, a;
+  const f = n + o;
+  return f >= 1 ? (l = 0, a = n / f) : (a = 1 - o, l = (1 - n / a) * 100), {
+    h: e.h,
+    s: l,
+    v: a * 100,
+    a: e.a
+  };
+}
+function j(e) {
+  const { r: n, g: o, b: l, a } = e, f = Math.min(n, o, l), d = Math.max(n, o, l), u = d - f, v = (d + f) / 2;
+  let m = 0;
+  u !== 0 && (d === n ? m = (o - l) / u + (o < l ? 6 : 0) : d === o ? m = (l - n) / u + 2 : d === l && (m = (n - o) / u + 4), m *= 60);
+  let p = 0;
+  return v !== 0 && v !== 255 && (p = (d - v) / Math.min(v, 255 - v)), {
+    h: m,
+    s: p * 100,
+    l: v / 255 * 100,
+    a
+  };
+}
+function T(e) {
+  return "#" + Object.values(e).map((n, o) => Math.round(o === 3 ? n * 255 : n).toString(16).padStart(2, "0")).join("");
+}
+function C(e) {
+  return ne(ee(j(e)));
+}
+const ye = {
+  hex: {
+    hex: (e) => e,
+    hsl: (e) => j(F(e)),
+    hsv: (e) => k(C(F(e))),
+    hwb: (e) => C(F(e)),
+    rgb: F
+  },
+  hsl: {
+    hex: (e) => T(S(e)),
+    hsl: (e) => e,
+    hsv: ee,
+    hwb: (e) => C(S(e)),
+    rgb: S
+  },
+  hsv: {
+    hex: (e) => T(N(e)),
+    hsl: te,
+    hsv: (e) => e,
+    hwb: ne,
+    rgb: N
+  },
+  hwb: {
+    hex: (e) => T(N(k(e))),
+    hsl: (e) => j(N(k(e))),
+    hsv: k,
+    hwb: (e) => e,
+    rgb: (e) => N(k(e))
+  },
+  rgb: {
+    hex: T,
+    hsl: j,
+    hsv: (e) => k(C(e)),
+    hwb: C,
+    rgb: (e) => e
+  }
+};
+function $e(e, n, o) {
+  return ye[e][n](o);
+}
+function ke(e, n) {
+  const o = e.toFixed(n);
+  return o.includes(".") ? o.replace(/\.?0+$/, "") : o;
+}
+const Me = {
+  deg: 1,
+  grad: 0.9,
+  rad: 180 / Math.PI,
+  turn: 360
+}, O = {
+  from(e) {
+    return e.endsWith("%") ? M.from(e, { referenceValue: 1 }) : w.from(e, { min: 0, max: 1 });
+  },
+  to(e) {
+    return w.to(e);
+  }
+}, J = {
+  from(e) {
+    const n = e.match(/deg|g?rad|turn$/);
+    if (n === null)
+      return w.from(e);
+    const o = n[0];
+    return w.from(e.slice(0, -o.length)) * Me[o];
+  },
+  to(e) {
+    return w.to(e);
+  }
+}, w = {
+  from(e, { min: n = Number.NEGATIVE_INFINITY, max: o = Number.POSITIVE_INFINITY } = {}) {
+    return e.endsWith(".") ? NaN : E(Number(e), n, o);
+  },
+  to(e) {
+    return ke(e, 2);
+  }
+}, M = {
+  from(e, { referenceValue: n = 100, min: o = 0, max: l = 100 } = {}) {
+    return e.endsWith("%") ? w.from(e.slice(0, -1), { min: o, max: l }) * n / 100 : NaN;
+  },
+  to(e) {
+    return w.to(e) + "%";
+  }
+}, _ = {
+  from(e) {
+    return e.endsWith("%") ? M.from(e, { referenceValue: 255 }) : w.from(e, { min: 0, max: 255 });
+  },
+  to(e) {
+    return w.to(e);
+  }
+}, Ne = {
+  hsl: {
+    h: J,
+    s: M,
+    l: M
+  },
+  hwb: {
+    h: J,
+    w: M,
+    b: M
+  },
+  rgb: {
+    r: _,
+    g: _,
+    b: _
+  }
+};
+function D(e, n) {
+  return Ne[e][n];
+}
+function z({ format: e, color: n }, o) {
+  if (e === "hex")
+    return o && [5, 9].includes(n.length) ? n.substring(0, n.length - (n.length - 1) / 4) : n;
+  const l = Object.entries(n).slice(0, o ? 3 : 4).map(([a, f]) => {
+    const d = a === "a" ? O : D(e, a);
+    return (a === "a" ? "/ " : "") + d.to(f);
+  });
+  return `${e}(${l.join(" ")})`;
+}
+function re(e) {
+  return /^#(?:(?:[A-F0-9]{2}){3,4}|[A-F0-9]{3,4})$/i.test(e);
+}
+function Ce(e) {
+  return "r" in e ? "rgb" : "w" in e ? "hwb" : "v" in e ? "hsv" : "s" in e ? "hsl" : null;
+}
+const Q = {
+  hsl: ["h", "s", "l", "a"],
+  hwb: ["h", "w", "b", "a"],
+  rgb: ["r", "g", "b", "a"]
+};
+function Ee(e) {
+  if (typeof e != "string") {
+    const u = Ce(e);
+    return u === null ? null : { format: u, color: e };
+  }
+  if (e.startsWith("#"))
+    return re(e) ? { format: "hex", color: e } : null;
+  if (!e.includes("(")) {
+    const u = document.createElement("canvas").getContext("2d");
+    u.fillStyle = e;
+    const v = u.fillStyle;
+    return v === "#000000" && e !== "black" ? null : { format: "hex", color: v };
+  }
+  const [n, o] = e.split("("), l = n.substring(0, 3);
+  if (!(l in Q))
+    return null;
+  const a = o.replace(/[,/)]/g, " ").replace(/\s+/g, " ").trim().split(" ");
+  a.length === 3 && a.push("1");
+  const f = Q[l], d = Object.fromEntries(f.map((u, v) => {
+    const m = u === "a" ? O : D(l, u);
+    return [
+      u,
+      m.from(a[v])
+    ];
+  }));
+  return { format: l, color: d };
+}
+function Ie(e, n, o) {
+  const l = e.getBoundingClientRect(), a = n - l.left, f = o - l.top;
+  return {
+    x: l.width === 0 ? 0 : E(a / l.width * 100, 0, 100),
+    y: l.height === 0 ? 0 : E((1 - f / l.height) * 100, 0, 100)
+  };
+}
+const Ae = { class: "vacp-range-input-group" }, Le = ["for"], Fe = { class: "vacp-range-input-label-text vacp-range-input-label-text--hue" }, Te = ["id", "value"], Se = ["for"], je = { class: "vacp-range-input-label-text vacp-range-input-label-text--alpha" }, Oe = ["id", "value"], De = { class: "vacp-color-inputs" }, He = { class: "vacp-color-input-group" }, Pe = ["for"], Ve = ["id", "value"], _e = ["id", "for", "onInput"], ze = { class: "vacp-color-input-label-text" }, Ke = ["id", "value", "onInput"], Be = /* @__PURE__ */ fe({
+  __name: "ColorPicker",
+  props: {
+    color: { default: "#ffffffff" },
+    copy: { type: Function, default: void 0 },
+    id: { default: "color-picker" },
+    visibleFormats: { default: () => ["hex", "hsl", "hwb", "rgb"] },
+    defaultFormat: { default: "hsl" },
+    alphaChannel: { default: "show" }
+  },
+  emits: ["color-change", "color-copy"],
+  setup(e, { expose: n, emit: o }) {
+    const l = ["hex", "hsl", "hsv", "hwb", "rgb"], a = e, f = o;
+    n({
+      copyColor: U
+    });
+    const d = A(null), u = A(null), v = A(null);
+    let m = !1;
+    const p = A(a.visibleFormats.includes(a.defaultFormat) ? a.defaultFormat : a.visibleFormats[0]), i = pe({
+      hex: "#ffffffff",
+      hsl: { h: 0, s: 0, l: 100, a: 1 },
+      hsv: { h: 0, s: 0, v: 100, a: 1 },
+      hwb: { h: 0, w: 100, b: 0, a: 1 },
+      rgb: { r: 255, g: 255, b: 255, a: 1 }
+    }), oe = q(function() {
+      const r = p.value, t = i[r];
+      return r.split("").map((s) => {
+        const c = t[s];
+        return {
+          value: D(r, s).to(c),
+          channel: s,
+          label: s.toUpperCase()
+        };
+      }).concat(a.alphaChannel === "show" ? [{
+        value: O.to(t.a),
+        channel: "a",
+        label: "Alpha"
+      }] : []);
+    }), le = q(function() {
+      return a.alphaChannel === "hide" && [5, 9].includes(i.hex.length) ? i.hex.substring(0, i.hex.length - (i.hex.length - 1) / 4) : i.hex;
+    });
+    ve(() => a.color, W), de(function() {
+      document.addEventListener("mousemove", H, { passive: !1 }), document.addEventListener("touchmove", P, { passive: !1 }), document.addEventListener("mouseup", I), document.addEventListener("touchend", I), W(a.color);
+    }), me(function() {
+      document.removeEventListener("mousemove", H), document.removeEventListener("touchmove", P), document.removeEventListener("mouseup", I), document.removeEventListener("touchend", I);
+    });
+    function ae() {
+      const r = (a.visibleFormats.findIndex((t) => t === p.value) + 1) % a.visibleFormats.length;
+      p.value = a.visibleFormats[r];
+    }
+    function se(r) {
+      m = !0, H(r);
+    }
+    function ce(r) {
+      m = !0, P(r);
+    }
+    function I() {
+      m = !1;
+    }
+    function H(r) {
+      r.buttons !== 1 || m === !1 || !(u.value instanceof HTMLElement) || K(u.value, r.clientX, r.clientY);
+    }
+    function P(r) {
+      if (m === !1 || !(u.value instanceof HTMLElement))
+        return;
+      r.preventDefault();
+      const t = r.touches[0];
+      K(u.value, t.clientX, t.clientY);
+    }
+    function K(r, t, s) {
+      const c = Ie(r, t, s), g = Object.assign({}, i.hsv);
+      g.s = c.x, g.v = c.y, x("hsv", g);
+    }
+    function ie(r) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(r.key))
+        return;
+      r.preventDefault();
+      const t = ["ArrowLeft", "ArrowDown"].includes(r.key) ? -1 : 1, s = ["ArrowLeft", "ArrowRight"].includes(r.key) ? "s" : "v", c = r.shiftKey ? 10 : 1, g = i.hsv[s] + t * c, b = Object.assign({}, i.hsv);
+      b[s] = E(g, 0, 100), x("hsv", b);
+    }
+    function W(r) {
+      const t = Ee(r);
+      t !== null && x(t.format, t.color);
+    }
+    function B(r, t) {
+      const s = r.currentTarget, c = Object.assign({}, i.hsv);
+      c[t] = Number(s.value), x("hsv", c);
+    }
+    function ue(r) {
+      const t = r.target;
+      re(t.value) && x("hex", t.value);
+    }
+    function R(r, t) {
+      const s = r.target, c = p.value, g = Object.assign({}, i[c]), b = (t === "a" ? O : D(c, t)).from(s.value);
+      Number.isNaN(b) || b === void 0 || (g[t] = b, x(c, g));
+    }
+    function x(r, t) {
+      let s = t;
+      if (a.alphaChannel === "hide")
+        if (typeof t != "string")
+          t.a = 1, s = t;
+        else if ([5, 9].includes(t.length)) {
+          const c = (t.length - 1) / 4;
+          s = t.substring(0, t.length - c) + "f".repeat(c);
+        } else [4, 7].includes(t.length) && (s = t + "f".repeat((t.length - 1) / 3));
+      if (!xe(i[r], s)) {
+        i[r] = s;
+        for (const c of l)
+          c !== r && (i[c] = $e(r, c, s));
+        f("color-change", Y());
+      }
+      d.value instanceof HTMLElement && u.value instanceof HTMLElement && v.value instanceof HTMLElement && he(d.value, u.value, v.value);
+    }
+    async function U() {
+      const r = i[p.value], t = a.alphaChannel === "hide", s = z({ color: r, format: p.value }, t);
+      await (a.copy ? a.copy : window.navigator.clipboard.writeText)(s), f("color-copy", Y());
+    }
+    function he(r, t, s) {
+      const c = z({ format: "hsl", color: i.hsl }, !0);
+      r.style.setProperty("--vacp-color", c), t.style.position = "relative", t.style.backgroundColor = `hsl(${i.hsl.h} 100% 50%)`, t.style.backgroundImage = "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent)", s.style.boxSizing = "border-box", s.style.position = "absolute", s.style.left = `${i.hsv.s}%`, s.style.bottom = `${i.hsv.v}%`;
+    }
+    function Y() {
+      const r = a.alphaChannel === "hide", t = z({ color: i[p.value], format: p.value }, r);
+      return {
+        colors: i,
+        cssColor: t
+      };
+    }
+    function X(r) {
+      if (!["ArrowUp", "ArrowRight", "ArrowDown", "ArrowLeft"].includes(r.key) || !r.shiftKey)
+        return;
+      const t = r.currentTarget, s = Number(t.step), c = ["ArrowLeft", "ArrowDown"].includes(r.key) ? -1 : 1, g = Number(t.value) + c * s * 10, b = E(g, Number(t.min), Number(t.max));
+      t.value = String(b - c * s);
+    }
+    return (r, t) => (y(), $("div", {
+      ref_key: "colorPicker",
+      ref: d,
+      class: "vacp-color-picker"
+    }, [
+      h("div", {
+        ref_key: "colorSpace",
+        ref: u,
+        class: "vacp-color-space",
+        onMousedown: se,
+        onTouchstart: ce
+      }, [
+        h("div", {
+          ref_key: "thumb",
+          ref: v,
+          class: "vacp-color-space-thumb",
+          tabindex: "0",
+          "aria-label": "Color space thumb",
+          onKeydown: ie
+        }, null, 544)
+      ], 544),
+      h("div", Ae, [
+        h("label", {
+          class: "vacp-range-input-label vacp-range-input-label--hue",
+          for: `${r.id}-hue-slider`
+        }, [
+          h("span", Fe, [
+            L(r.$slots, "hue-range-input-label", {}, () => [
+              t[2] || (t[2] = G("Hue"))
+            ])
+          ]),
+          h("input", {
+            id: `${r.id}-hue-slider`,
+            class: "vacp-range-input vacp-range-input--hue",
+            value: i.hsv.h,
+            type: "range",
+            min: "0",
+            max: "360",
+            step: "1",
+            onKeydownPassive: X,
+            onInput: t[0] || (t[0] = (s) => B(s, "h"))
+          }, null, 40, Te)
+        ], 8, Le),
+        r.alphaChannel === "show" ? (y(), $("label", {
+          key: 0,
+          class: "vacp-range-input-label vacp-range-input-label--alpha",
+          for: `${r.id}-alpha-slider`
+        }, [
+          h("span", je, [
+            L(r.$slots, "alpha-range-input-label", {}, () => [
+              t[3] || (t[3] = G("Alpha"))
+            ])
+          ]),
+          h("input", {
+            id: `${r.id}-alpha-slider`,
+            class: "vacp-range-input vacp-range-input--alpha",
+            value: i.hsv.a,
+            type: "range",
+            min: "0",
+            max: "1",
+            step: "0.01",
+            onKeydownPassive: X,
+            onInput: t[1] || (t[1] = (s) => B(s, "a"))
+          }, null, 40, Oe)
+        ], 8, Se)) : Z("", !0)
+      ]),
+      h("button", {
+        class: "vacp-copy-button",
+        type: "button",
+        onClick: U
+      }, [
+        L(r.$slots, "copy-button", {}, () => [
+          t[4] || (t[4] = h("span", { class: "vacp-visually-hidden" }, "Copy color", -1)),
+          t[5] || (t[5] = h("svg", {
+            class: "vacp-icon",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 32 32"
+          }, [
+            h("path", {
+              d: "M25.313 28v-18.688h-14.625v18.688h14.625zM25.313 6.688c1.438 0 2.688 1.188 2.688 2.625v18.688c0 1.438-1.25 2.688-2.688 2.688h-14.625c-1.438 0-2.688-1.25-2.688-2.688v-18.688c0-1.438 1.25-2.625 2.688-2.625h14.625zM21.313 1.313v2.688h-16v18.688h-2.625v-18.688c0-1.438 1.188-2.688 2.625-2.688h16z",
+              fill: "currentColor"
+            })
+          ], -1))
+        ])
+      ]),
+      h("div", De, [
+        h("div", He, [
+          p.value === "hex" ? (y(), $("label", {
+            key: 0,
+            class: "vacp-color-input-label",
+            for: `${r.id}-color-hex`
+          }, [
+            t[6] || (t[6] = h("span", { class: "vacp-color-input-label-text" }, " Hex ", -1)),
+            h("input", {
+              id: `${r.id}-color-hex`,
+              class: "vacp-color-input",
+              type: "text",
+              value: le.value,
+              onInput: ue
+            }, null, 40, Ve)
+          ], 8, Pe)) : (y(!0), $(ge, { key: 1 }, be(oe.value, ({ value: s, channel: c, label: g }) => (y(), $("label", {
+            id: `${r.id}-color-${p.value}-${c}-label`,
+            key: `${r.id}-color-${p.value}-${c}-label`,
+            class: "vacp-color-input-label",
+            for: `${r.id}-color-${p.value}-${c}`,
+            onInput: (b) => R(b, c)
+          }, [
+            h("span", ze, we(g), 1),
+            h("input", {
+              id: `${r.id}-color-${p.value}-${c}`,
+              class: "vacp-color-input",
+              type: "text",
+              value: s,
+              onInput: (b) => R(b, c)
+            }, null, 40, Ke)
+          ], 40, _e))), 128))
+        ]),
+        r.visibleFormats.length > 1 ? (y(), $("button", {
+          key: 0,
+          class: "vacp-format-switch-button",
+          type: "button",
+          onClick: ae
+        }, [
+          L(r.$slots, "format-switch-button", {}, () => [
+            t[7] || (t[7] = h("span", { class: "vacp-visually-hidden" }, "Switch format", -1)),
+            t[8] || (t[8] = h("svg", {
+              class: "vacp-icon",
+              "aria-hidden": "true",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "16",
+              height: "15"
+            }, [
+              h("path", {
+                d: "M8 15l5-5-1-1-4 2-4-2-1 1zm4-9l1-1-5-5-5 5 1 1 4-2z",
+                fill: "currentColor"
+              })
+            ], -1))
+          ])
+        ])) : Z("", !0)
+      ])
+    ], 512));
+  }
+});
+export {
+  Be as K
+};