bitboss-ui 2.1.119 → 2.1.121

package/dist/index46.js

@@ -1,240 +1,385 @@
-import { defineComponent as j, ref as u, computed as f, toRef as C, watch as Q, createBlock as h, openBlock as m, normalizeClass as Z, withCtx as l, createVNode as E, unref as G, createElementVNode as $, createElementBlock as J, createCommentVNode as W, withDirectives as X, Fragment as Y, mergeProps as ee, withModifiers as s, withKeys as v, vModelText as te, renderSlot as d, nextTick as oe } from "vue";
-import ae from "./index116.js";
-/* empty css         */
-import { last as le } from "./index255.js";
-import { useBaseOptions as ne } from "./index243.js";
-import { useIndexById as re } from "./index246.js";
-import ie from "./index256.js";
-/* empty css         */
-import ue from "./index258.js";
-/* empty css         */
-import se from "./index140.js";
-/* empty css         */
-import de from "./index142.js";
-/* empty css         */
-import { isEmpty as pe } from "./index260.js";
-const ce = { class: "bb-base-tag__input-container" }, fe = ["id", "aria-describedby", "autocomplete", "autofocus", "disabled", "placeholder", "readonly", "required", "onKeydown"], Oe = /* @__PURE__ */ j({
-  __name: "BaseTag",
-  props: {
-    "append:icon": {},
-    ariaDescribedby: {},
-    autocomplete: { default: "off" },
-    autofocus: {},
-    comma: { type: Boolean },
-    clearable: { type: Boolean },
-    compact: { type: Boolean },
-    disabled: { type: Boolean },
-    divider: { default: "Enter" },
-    hasErrors: { type: Boolean },
-    id: {},
-    loading: { type: Boolean },
-    max: {},
-    modelValue: {},
-    multiple: { type: Boolean, default: !0 },
-    name: {},
-    placeholder: {},
-    "prepend:icon": {},
-    readonly: { type: Boolean },
-    required: { type: Boolean }
-  },
-  emits: ["blur", "change", "click", "duplicate", "focus", "inactive", "input", "keydown", "keyup", "update:modelValue"],
-  setup(I, { emit: L }) {
-    const t = I, a = L;
-    if (t.multiple && !Array.isArray(t.modelValue))
-      throw new Error('Multiple is set to "true" but modelValue is not an array.');
-    const y = u(null), O = u(null), k = u(null), B = u(null), n = f(
-      () => t.comma ? k.value : B.value
-    ), p = u(null), D = () => {
-      p.value instanceof HTMLInputElement && p.value.focus();
-    }, o = u(""), r = f(() => A.value.filter((e) => e.selected)), { data: V, get: T } = re({
-      items: C(t, "modelValue")
-    }), { options: A } = ne({
-      disabled: C(t, "disabled"),
-      items: f(() => [].concat(t.modelValue)),
-      itemText: void 0,
-      itemValue: void 0,
-      max: t.max,
-      selectable: !0,
-      selectedIndexedByHash: V
-    }), w = () => {
-      if (t.multiple) {
-        o.value = "";
-        return;
-      }
-      let e;
-      r.value && (e = le(r.value)), o.value = e?.text || "";
-    }, H = async (e) => {
-      if (t.multiple) {
-        const i = { ...V.value };
-        delete i[e.valueHash], a("update:modelValue", Object.values(i));
-      } else
-        a("update:modelValue", null);
-      D();
-    };
-    Q(
-      () => t.modelValue,
-      async () => {
-        w();
-      }
-    );
-    const b = u(!1), K = () => {
-      b.value = !0;
-    }, q = () => {
-      b.value = !1, a("inactive");
-    }, g = f(() => !(t.readonly || t.disabled || !n.value && t.multiple)), M = (e) => {
-      g.value && (!t.multiple || o.value || (e.preventDefault(), r.value.length && n.value?.focusPrevious()));
-    }, N = (e) => {
-      g.value && (!t.multiple || o.value || (e.preventDefault(), r.value.length && n.value?.focusNext()));
-    }, _ = async () => {
-      !g.value || o.value || !r.value.length || (n.value?.getHighlighted() && n.value.confirmOption(), await oe(), n.value?.focusPrevious());
-    }, P = () => {
-      n.value?.blur();
-    }, z = async (e) => {
-      if (a("keydown", e), t.readonly || t.disabled) {
-        e.preventDefault();
-        return;
-      }
-      if (/^[A-Za-z0-9]$/.test(e.key) && n.value?.blur(), e.key === t.divider || e.key === "Unidentified" && o.value.includes(t.divider)) {
-        if (t.divider.length === 1 && o.value.includes(t.divider)) {
-          const i = o.value.split(t.divider)[0];
-          if (i)
-            o.value = i;
-          else {
-            o.value = "";
-            return;
-          }
-        }
-        if (!o.value) {
-          a("keydown", e);
-          return;
-        }
-        if (e.preventDefault(), T(o.value))
-          a("duplicate", o.value), o.value = "";
-        else {
-          if (t.max && r.value.length >= t.max)
-            return;
-          t.multiple ? a("update:modelValue", t.modelValue.concat(o.value)) : a("update:modelValue", o.value);
-        }
-      }
-    }, F = (e) => {
-      a("focus", e), K(), document.addEventListener("click", c), document.addEventListener("focusin", c);
-    }, S = (e) => {
-      a("click", e), !(t.disabled || t.readonly) && p.value instanceof HTMLElement && p.value.focus();
-    }, c = async (e) => {
-      if (e.target instanceof Node && y.value && !y.value.$el.contains(e.target)) {
-        q(), document.removeEventListener("click", c), document.removeEventListener("focusin", c), w();
-        return;
-      }
-    }, U = {
-      onBlur: (e) => a("blur", e),
-      onChange: (e) => a("change", e),
-      onKeyup: (e) => a("keyup", e),
-      onInput: (e) => a("input", e)
-    }, x = () => {
-      let e = null;
-      t.multiple && (e = []), a("update:modelValue", e);
-    };
-    return (e, i) => (m(), h(de, {
-      ref_key: "outerContainer",
-      ref: y,
-      class: Z({
-        "bb-base-tag": !0,
-        "bb-base-tag--active": b.value,
-        "bb-base-tag--disabled": e.disabled,
-        "bb-base-tag--loading": e.loading,
-        "bb-base-tag--errors": e.hasErrors,
-        "bb-base-tag--readonly": e.readonly,
-        "bb-base-tag--compact": e.compact
-      }),
-      onClick: S
-    }, {
-      "prepend-outer": l(() => [
-        d(e.$slots, "prepend-outer")
-      ]),
-      "append-outer": l(() => [
-        d(e.$slots, "append-outer")
-      ]),
-      default: l(() => [
-        E(se, {
-          ref_key: "innerContainer",
-          ref: O,
-          "append:icon": t["append:icon"],
-          clearable: e.clearable && !G(pe)(e.modelValue),
-          "prepend:icon": t["prepend:icon"],
-          "prevent-focus": !0,
-          "onClick:clear": x
-        }, {
-          prepend: l(() => [
-            d(e.$slots, "prepend")
-          ]),
-          prefix: l(() => [
-            d(e.$slots, "prefix")
-          ]),
-          append: l(() => [
-            d(e.$slots, "append")
-          ]),
-          suffix: l(() => [
-            d(e.$slots, "suffix")
-          ]),
-          default: l(() => [
-            E(ae, { tag: "span" }, {
-              default: l(() => [
-                $("span", ce, [
-                  e.multiple ? (m(), J(Y, { key: 0 }, [
-                    e.comma ? (m(), h(ue, {
-                      key: 0,
-                      ref_key: "commaBox",
-                      ref: k,
-                      options: r.value
-                    }, null, 8, ["options"])) : (m(), h(ie, {
-                      key: 1,
-                      ref_key: "chipsBox",
-                      ref: B,
-                      options: r.value,
-                      "onOption:unselected": H
-                    }, null, 8, ["options"]))
-                  ], 64)) : W("", !0),
-                  X($("input", ee({
-                    id: e.id,
-                    ref_key: "input",
-                    ref: p
-                  }, U, {
-                    "onUpdate:modelValue": i[0] || (i[0] = (R) => o.value = R),
-                    "aria-describedby": e.ariaDescribedby,
-                    autocomplete: e.autocomplete,
-                    autofocus: e.autofocus,
-                    class: "bb-base-tag__text-input",
-                    disabled: e.disabled,
-                    enterkeyhint: "done",
-                    placeholder: e.placeholder,
-                    readonly: e.readonly,
-                    required: e.required && (!e.multiple || !e.modelValue.length),
-                    size: "1",
-                    style: { "--characters": o.value.length },
-                    type: "text",
-                    onFocus: s(F, ["stop"]),
-                    onKeydown: [
-                      s(z, ["stop"]),
-                      v(s(_, ["stop"]), ["delete"]),
-                      v(s(M, ["stop"]), ["left"]),
-                      v(s(P, ["stop", "prevent"]), ["esc"]),
-                      v(s(N, ["stop"]), ["right"])
-                    ]
-                  }), null, 16, fe), [
-                    [te, o.value]
-                  ])
-                ])
-              ]),
-              _: 1
-            })
-          ]),
-          _: 3
-        }, 8, ["append:icon", "clearable", "prepend:icon"])
-      ]),
-      _: 3
-    }, 8, ["class"]));
-  }
+import { useLocale as e } from "./index42.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onMounted as l, onUnmounted as u, openBlock as d, ref as f, renderList as p, unref as m, watch as ee } from "vue";
+//#region src/components/BaseColorInput/ColorPalette.vue?vue&type=script&setup=true&lang.ts
+var te = ["aria-label"], ne = { class: "bb-color-palette__controls" }, re = { class: "bb-color-palette__preview-wrap" }, ie = { class: "bb-color-palette__sliders" }, ae = ["aria-label", "aria-valuenow"], oe = ["aria-label", "aria-valuenow"], se = ["aria-label", "disabled"], ce = {
+	key: 0,
+	class: "bb-color-palette__swatches"
+}, le = [
+	"aria-label",
+	"aria-pressed",
+	"onClick"
+], h = /* @__PURE__ */ o({
+	__name: "ColorPalette",
+	props: {
+		modelValue: {},
+		alpha: {
+			type: Boolean,
+			default: !1
+		},
+		picker: {
+			type: Boolean,
+			default: !1
+		},
+		swatches: { type: [Boolean, Array] }
+	},
+	emits: ["update:modelValue"],
+	setup(o, { expose: h, emit: ue }) {
+		function g(e, t, n) {
+			let r = (r) => {
+				let i = (r + e / 60) % 6;
+				return n - n * t * Math.max(Math.min(i, 4 - i, 1), 0);
+			};
+			return [
+				Math.round(r(5) * 255),
+				Math.round(r(3) * 255),
+				Math.round(r(1) * 255)
+			];
+		}
+		function _(e, t, n) {
+			let r = e / 255, i = t / 255, a = n / 255, o = Math.max(r, i, a), s = o - Math.min(r, i, a), c = o === 0 ? 0 : s / o, l = o, u = 0;
+			return s !== 0 && (u = o === r ? ((i - a) / s + (i < a ? 6 : 0)) / 6 : o === i ? ((a - r) / s + 2) / 6 : ((r - i) / s + 4) / 6), [
+				u * 360,
+				c,
+				l
+			];
+		}
+		function v(e) {
+			let t = e.replace(/^#/, "");
+			return t.length === 3 ? [
+				parseInt(t[0] + t[0], 16),
+				parseInt(t[1] + t[1], 16),
+				parseInt(t[2] + t[2], 16),
+				1
+			] : t.length === 6 ? [
+				parseInt(t.slice(0, 2), 16),
+				parseInt(t.slice(2, 4), 16),
+				parseInt(t.slice(4, 6), 16),
+				1
+			] : t.length === 8 ? [
+				parseInt(t.slice(0, 2), 16),
+				parseInt(t.slice(2, 4), 16),
+				parseInt(t.slice(4, 6), 16),
+				parseInt(t.slice(6, 8), 16) / 255
+			] : [
+				0,
+				0,
+				0,
+				1
+			];
+		}
+		function y(e) {
+			return Math.round(Math.max(0, Math.min(255, e))).toString(16).padStart(2, "0");
+		}
+		function de(e, t, n, r, i) {
+			let a = `#${y(e)}${y(t)}${y(n)}`;
+			return i ? a + y(r * 255) : a;
+		}
+		let fe = [
+			[
+				"#FFCDD2",
+				"#EF9A9A",
+				"#F44336",
+				"#D32F2F",
+				"#B71C1C"
+			],
+			[
+				"#FFE0B2",
+				"#FFCC80",
+				"#FF9800",
+				"#F57C00",
+				"#E65100"
+			],
+			[
+				"#FFF9C4",
+				"#FFF59D",
+				"#FFEB3B",
+				"#FBC02D",
+				"#F57F17"
+			],
+			[
+				"#C8E6C9",
+				"#A5D6A7",
+				"#4CAF50",
+				"#388E3C",
+				"#1B5E20"
+			],
+			[
+				"#BBDEFB",
+				"#90CAF9",
+				"#2196F3",
+				"#1976D2",
+				"#0D47A1"
+			],
+			[
+				"#E1BEE7",
+				"#CE93D8",
+				"#9C27B0",
+				"#7B1FA2",
+				"#4A148C"
+			]
+		], b = o, pe = ue, { t: x } = e(), S = f(0), C = f(1), w = f(1), T = f(1), E = n(() => {
+			let [e, t, n] = g(S.value, C.value, w.value);
+			return de(e, t, n, T.value, b.alpha);
+		}), me = n(() => {
+			let [e, t, n] = g(S.value, C.value, w.value);
+			return b.alpha ? `rgba(${e},${t},${n},${T.value})` : `rgb(${e},${t},${n})`;
+		}), he = n(() => !!b.swatches), ge = n(() => Array.isArray(b.swatches) ? b.swatches : fe), D = f(null), O = f(null), k = f(null), A = f(null), j = f(null), M = f(null), N = f(null), P = () => {
+			let e = O.value;
+			if (!e || e.width === 0 || e.height === 0) return;
+			let t = e.getContext("2d");
+			if (!t) return;
+			let [n, r, i] = g(S.value, 1, 1), a = t.createLinearGradient(0, 0, e.width, 0);
+			a.addColorStop(0, "#ffffff"), a.addColorStop(1, `rgb(${n},${r},${i})`), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height);
+			let o = t.createLinearGradient(0, 0, 0, e.height);
+			o.addColorStop(0, "rgba(0,0,0,0)"), o.addColorStop(1, "rgba(0,0,0,1)"), t.fillStyle = o, t.fillRect(0, 0, e.width, e.height);
+		}, _e = () => {
+			let e = k.value;
+			if (!e || e.width === 0 || e.height === 0) return;
+			let t = e.getContext("2d");
+			if (!t) return;
+			let n = t.createLinearGradient(0, 0, e.width, 0);
+			for (let e = 0; e <= 6; e++) n.addColorStop(e / 6, `hsl(${e * 60},100%,50%)`);
+			t.fillStyle = n, t.fillRect(0, 0, e.width, e.height);
+		}, F = () => {
+			let e = A.value;
+			if (!e || e.width === 0 || e.height === 0) return;
+			let t = e.getContext("2d");
+			if (!t) return;
+			t.clearRect(0, 0, e.width, e.height);
+			let [n, r, i] = g(S.value, C.value, w.value), a = t.createLinearGradient(0, 0, e.width, 0);
+			a.addColorStop(0, `rgba(${n},${r},${i},0)`), a.addColorStop(1, `rgba(${n},${r},${i},1)`), t.fillStyle = a, t.fillRect(0, 0, e.width, e.height);
+		}, ve = () => {
+			P(), _e(), b.alpha && F();
+		}, I = null, L = (e) => {
+			e.width = e.offsetWidth, e.height = e.offsetHeight;
+		}, R = () => {
+			let e = O.value, t = k.value;
+			!e || !t || e.offsetWidth === 0 || (L(e), L(t), b.alpha && A.value && L(A.value), ve());
+		};
+		l(() => {
+			I = new ResizeObserver(R), O.value && I.observe(O.value), z(b.modelValue), R();
+		}), u(() => {
+			I?.disconnect();
+		});
+		let z = (e) => {
+			if (e) try {
+				let [t, n, r, i] = v(e), [a, o, s] = _(t, n, r);
+				o > .01 && (S.value = a), C.value = o, w.value = s, T.value = i;
+			} catch {}
+		};
+		ee(() => b.modelValue, (e) => {
+			!e || e === E.value || (z(e), P(), b.alpha && F());
+		});
+		let B = () => pe("update:modelValue", E.value), V = f(!1), H = (e) => {
+			let t = j.value;
+			if (!t) return {
+				s: C.value,
+				v: w.value
+			};
+			let n = t.getBoundingClientRect();
+			return {
+				s: Math.max(0, Math.min(1, (e.clientX - n.left) / n.width)),
+				v: Math.max(0, Math.min(1, 1 - (e.clientY - n.top) / n.height))
+			};
+		}, ye = (e) => {
+			j.value?.setPointerCapture(e.pointerId), V.value = !0;
+			let { s: t, v: n } = H(e);
+			C.value = t, w.value = n, b.alpha && F(), B();
+		}, be = (e) => {
+			if (!V.value) return;
+			let { s: t, v: n } = H(e);
+			C.value = t, w.value = n, b.alpha && F(), B();
+		}, U = (e) => {
+			j.value?.releasePointerCapture(e.pointerId), V.value = !1;
+		}, xe = (e) => {
+			let t = e.shiftKey ? .05 : .01;
+			switch (e.key) {
+				case "ArrowLeft":
+					C.value = Math.max(0, C.value - t);
+					break;
+				case "ArrowRight":
+					C.value = Math.min(1, C.value + t);
+					break;
+				case "ArrowUp":
+					w.value = Math.min(1, w.value + t);
+					break;
+				case "ArrowDown":
+					w.value = Math.max(0, w.value - t);
+					break;
+				default: return;
+			}
+			b.alpha && F(), B(), e.preventDefault();
+		}, W = f(!1), G = (e) => {
+			let t = M.value;
+			if (!t) return S.value;
+			let n = t.getBoundingClientRect();
+			return Math.max(0, Math.min(360, (e.clientX - n.left) / n.width * 360));
+		}, Se = (e) => {
+			M.value?.setPointerCapture(e.pointerId), W.value = !0, S.value = G(e), P(), b.alpha && F(), B();
+		}, Ce = (e) => {
+			W.value && (S.value = G(e), P(), b.alpha && F(), B());
+		}, K = (e) => {
+			M.value?.releasePointerCapture(e.pointerId), W.value = !1;
+		}, we = (e) => {
+			let t = e.shiftKey ? 10 : 1;
+			switch (e.key) {
+				case "ArrowLeft":
+					S.value = Math.max(0, S.value - t);
+					break;
+				case "ArrowRight":
+					S.value = Math.min(360, S.value + t);
+					break;
+				default: return;
+			}
+			P(), b.alpha && F(), B(), e.preventDefault();
+		}, q = f(!1), J = (e) => {
+			let t = N.value;
+			if (!t) return T.value;
+			let n = t.getBoundingClientRect();
+			return Math.max(0, Math.min(1, (e.clientX - n.left) / n.width));
+		}, Te = (e) => {
+			N.value?.setPointerCapture(e.pointerId), q.value = !0, T.value = J(e), B();
+		}, Ee = (e) => {
+			q.value && (T.value = J(e), B());
+		}, Y = (e) => {
+			N.value?.releasePointerCapture(e.pointerId), q.value = !1;
+		}, De = (e) => {
+			let t = e.shiftKey ? .05 : .01;
+			switch (e.key) {
+				case "ArrowLeft":
+					T.value = Math.max(0, T.value - t);
+					break;
+				case "ArrowRight":
+					T.value = Math.min(1, T.value + t);
+					break;
+				default: return;
+			}
+			B(), e.preventDefault();
+		}, X = "EyeDropper" in window, Z = f(!1), Oe = async () => {
+			if (X) try {
+				Z.value = !0, $((await new window.EyeDropper().open()).sRGBHex);
+			} catch {} finally {
+				Z.value = !1;
+			}
+		}, Q = (e) => E.value.slice(0, 7).toLowerCase() === e.slice(0, 7).toLowerCase(), $ = (e) => {
+			let [t, n, r, i] = v(e), [a, o, s] = _(t, n, r);
+			o > .01 && (S.value = a), C.value = o, w.value = s, T.value = i, P(), b.alpha && F(), B();
+		};
+		return h({ el: D }), (e, n) => (d(), i("div", {
+			ref_key: "pickerRef",
+			ref: D,
+			class: "bb-color-palette"
+		}, [
+			a("div", {
+				ref_key: "canvasWrapRef",
+				ref: j,
+				class: "bb-color-palette__canvas-wrap",
+				role: "application",
+				tabindex: "0",
+				"aria-label": m(x)("colorInput.mainCanvasDesc").value,
+				onPointerdown: ye,
+				onPointermove: be,
+				onPointerup: U,
+				onPointercancel: U,
+				onKeydown: xe
+			}, [a("canvas", {
+				ref_key: "mainCanvasRef",
+				ref: O,
+				class: "bb-color-palette__canvas",
+				"aria-hidden": "true"
+			}, null, 512), a("div", {
+				class: "bb-color-palette__canvas-thumb",
+				style: c({
+					left: `${C.value * 100}%`,
+					top: `${(1 - w.value) * 100}%`
+				}),
+				"aria-hidden": "true"
+			}, null, 4)], 40, te),
+			a("div", ne, [
+				a("div", re, [a("div", {
+					class: s(["bb-color-palette__preview", { "bb-color-palette__preview--alpha": e.alpha }]),
+					style: c({ "--bb-picker-preview-color": me.value })
+				}, null, 6)]),
+				a("div", ie, [a("div", {
+					ref_key: "hueWrapRef",
+					ref: M,
+					class: "bb-color-palette__slider-wrap",
+					role: "slider",
+					tabindex: "0",
+					"aria-label": m(x)("colorInput.hueCanvasDesc").value,
+					"aria-valuenow": Math.round(S.value),
+					"aria-valuemin": "0",
+					"aria-valuemax": "360",
+					onPointerdown: Se,
+					onPointermove: Ce,
+					onPointerup: K,
+					onPointercancel: K,
+					onKeydown: we
+				}, [a("canvas", {
+					ref_key: "hueCanvasRef",
+					ref: k,
+					class: "bb-color-palette__slider-track",
+					"aria-hidden": "true"
+				}, null, 512), a("div", {
+					class: "bb-color-palette__slider-thumb",
+					style: c({ left: `${S.value / 360 * 100}%` }),
+					"aria-hidden": "true"
+				}, null, 4)], 40, ae), e.alpha ? (d(), i("div", {
+					key: 0,
+					ref_key: "alphaWrapRef",
+					ref: N,
+					class: "bb-color-palette__slider-wrap bb-color-palette__slider-wrap--alpha",
+					role: "slider",
+					tabindex: "0",
+					"aria-label": m(x)("colorInput.alphaSliderDesc").value,
+					"aria-valuenow": Math.round(T.value * 100),
+					"aria-valuemin": "0",
+					"aria-valuemax": "100",
+					onPointerdown: Te,
+					onPointermove: Ee,
+					onPointerup: Y,
+					onPointercancel: Y,
+					onKeydown: De
+				}, [a("canvas", {
+					ref_key: "alphaCanvasRef",
+					ref: A,
+					class: "bb-color-palette__slider-track",
+					"aria-hidden": "true"
+				}, null, 512), a("div", {
+					class: "bb-color-palette__slider-thumb",
+					style: c({ left: `${T.value * 100}%` }),
+					"aria-hidden": "true"
+				}, null, 4)], 40, oe)) : r("", !0)]),
+				e.picker && X ? (d(), i("button", {
+					key: 0,
+					class: "bb-color-palette__eyedropper",
+					type: "button",
+					"aria-label": m(x)("colorInput.eyeDropper").value,
+					disabled: Z.value || void 0,
+					onClick: Oe
+				}, n[0] ||= [a("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "currentColor",
+					"aria-hidden": "true"
+				}, [a("path", { d: "M20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L13.71,3.71L12.29,5.12L13.41,6.24L3,16.59V21H7.41L17.76,10.59L18.88,11.71L20.29,10.29L18.88,8.88L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63M6.58,19H5V17.42L13.29,9.12L14.88,10.71L6.58,19Z" })], -1)], 8, se)) : r("", !0)
+			]),
+			he.value ? (d(), i("div", ce, [(d(!0), i(t, null, p(ge.value, (e, n) => (d(), i("div", {
+				key: n,
+				class: "bb-color-palette__swatch-group"
+			}, [(d(!0), i(t, null, p(e, (e) => (d(), i("button", {
+				key: e,
+				class: s(["bb-color-palette__swatch", { "bb-color-palette__swatch--active": Q(e) }]),
+				style: c({ background: e }),
+				"aria-label": e,
+				"aria-pressed": Q(e),
+				type: "button",
+				onClick: (t) => $(e)
+			}, null, 14, le))), 128))]))), 128))])) : r("", !0)
+		], 512));
+	}
 });
-export {
-  Oe as default
-};
+//#endregion
+export { h as default };