@7pmlabs/design-system 1.0.10 → 2.0.0

package/dist/design-system180.js

@@ -1,91 +1,465 @@
-import e from "./design-system179.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, openBlock as u, renderList as d, renderSlot as f } from "vue";
-//#region src/components/BSkeleton/BSkeleton.vue?vue&type=script&setup=true&lang.ts
-var p = {
+import { BCommonSize as e } from "./design-system3.js";
+import { useComponentId as t } from "./design-system10.js";
+import { BSelectMode as n, BSelectPlacement as r, BSelectStatus as i, BSelectVariant as a } from "./design-system179.js";
+import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as ee, defineComponent as d, mergeModels as f, mergeProps as te, nextTick as p, normalizeClass as m, normalizeStyle as ne, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as re, useCssVars as ie, useModel as ae, watch as x, withModifiers as S } from "vue";
+//#region src/components/BSelect/BSelect.vue?vue&type=script&setup=true&lang.ts
+var oe = [
+	"tabindex",
+	"aria-expanded",
+	"aria-controls",
+	"aria-activedescendant",
+	"aria-label",
+	"aria-disabled"
+], se = { class: "b:truncate" }, ce = ["aria-label", "onClick"], le = [
+	"value",
+	"placeholder",
+	"disabled",
+	"aria-label"
+], ue = {
 	key: 0,
-	class: "b-skeleton__header"
-}, m = { class: "b-skeleton__content" }, h = {
+	class: "b-select__value b:flex-1 b:truncate b:text-[color:var(--b-select-color)]"
+}, de = {
 	key: 1,
-	class: "b-skeleton__paragraph",
+	class: "b-select__placeholder b:flex-1 b:truncate b:text-[var(--b-select-placeholder-color)]"
+}, fe = [
+	"value",
+	"disabled",
+	"aria-label"
+], pe = {
+	key: 3,
+	class: "b-select__loading b:ml-1 b:flex b:shrink-0 b:animate-spin b:items-center b:text-zinc-400",
 	"aria-hidden": "true"
-}, g = /* @__PURE__ */ s({
-	__name: "BSkeleton",
-	props: {
-		active: {
+}, me = [
+	"id",
+	"aria-multiselectable",
+	"aria-label"
+], he = {
+	key: 0,
+	class: "b:p-1"
+}, ge = [
+	"id",
+	"data-active",
+	"aria-selected",
+	"aria-disabled",
+	"onMousedown",
+	"onMouseenter"
+], _e = { class: "b:flex b:items-center b:justify-between" }, ve = {
+	key: 0,
+	class: "b:ml-2 b:h-3 b:w-3 b:text-[var(--b-select-active-border-color)]",
+	viewBox: "0 0 12 12",
+	fill: "none",
+	"aria-hidden": "true"
+}, ye = {
+	key: 1,
+	class: "b-select__empty b:px-4 b:py-6 b:text-center b:text-sm b:text-zinc-400"
+}, C = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "BSelect",
+	props: /* @__PURE__ */ f({
+		options: { default: () => [] },
+		size: { default: () => e.Medium },
+		variant: { default: () => a.Outlined },
+		disabled: { type: Boolean },
+		status: {},
+		placeholder: {},
+		mode: {},
+		defaultActiveFirstOption: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
-		avatar: {
-			type: [Boolean, Object],
+		allowClear: {
+			type: Boolean,
 			default: !1
 		},
-		loading: {
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		showSearch: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		paragraph: {
-			type: [Boolean, Object],
+		popupMatchSelectWidth: {
+			type: [Boolean, Number],
 			default: !0
 		},
-		round: {
+		listHeight: { default: 256 },
+		loading: {
 			type: Boolean,
 			default: !1
 		},
-		title: {
-			type: [Boolean, Object],
+		maxTagCount: {},
+		maxCount: {},
+		placement: { default: () => r.BottomLeft },
+		notFoundContent: { default: "No data" },
+		fieldNames: {},
+		filterOption: {
+			type: [Boolean, Function],
 			default: !0
-		}
-	},
-	setup(s) {
-		let g = n(() => s.avatar !== !1 && s.avatar != null), _ = n(() => s.title !== !1 && s.title != null), v = n(() => s.paragraph !== !1 && s.paragraph != null), y = n(() => typeof s.avatar == "object" && s.avatar !== null ? s.avatar : {}), b = n(() => typeof s.title == "object" && s.title !== null ? s.title : {}), x = n(() => typeof s.paragraph == "object" && s.paragraph !== null ? s.paragraph : {}), S = n(() => T(b.value.width)), C = n(() => {
-			let e = x.value.rows;
-			return typeof e == "number" && e > 0 ? Math.floor(e) : 3;
-		}), w = n(() => {
-			let e = x.value.width, t = C.value, n = [];
-			for (let r = 0; r < t; r += 1) if (Array.isArray(e)) {
-				let t = e[r];
-				n.push(T(t) ?? "");
-			} else if (r === t - 1) {
-				let t = T(e);
-				n.push(t ?? "61%");
-			} else n.push("");
-			return n;
+		},
+		tokenSeparators: {},
+		labelInValue: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ f([
+		"change",
+		"select",
+		"deselect",
+		"focus",
+		"blur",
+		"clear",
+		"openChange",
+		"search",
+		"popupScroll",
+		"inputKeyDown"
+	], ["update:modelValue"]),
+	setup(r, { expose: d, emit: f }) {
+		ie((e) => ({ a174b70c: be.value }));
+		let C = re(), w = f, T = ae(r, "modelValue"), { componentUID: E } = t(), be = s(() => `--b-select-anchor-${E.value}`), D = s(() => `b-select-listbox-${E.value}`), O = g(null), k = g(null), A = g(null), j = g(!1), M = g(-1), N = g(""), xe = s(() => r.fieldNames?.label ?? "label"), P = s(() => r.fieldNames?.value ?? "value"), Se = s(() => r.fieldNames?.options ?? "options"), F = s(() => r.mode === n.Multiple || r.mode === n.Tags ? !0 : r.showSearch), I = (e) => {
+			let t = e, n = t[xe.value], r = t[P.value];
+			return String(n ?? r ?? "");
+		}, L = (e) => e[P.value], R = s(() => {
+			let e = [];
+			for (let t of r.options) {
+				let n = t[Se.value];
+				if (n && Array.isArray(n)) for (let t of n) e.push(t);
+				else e.push(t);
+			}
+			return e;
+		}), z = s(() => {
+			if (!N.value || !F.value || r.filterOption === !1) return R.value;
+			if (typeof r.filterOption == "function") return R.value.filter((e) => r.filterOption(N.value, e));
+			let e = N.value.toLowerCase();
+			return R.value.filter((t) => I(t).toLowerCase().includes(e));
+		}), B = s(() => T.value == null ? [] : Array.isArray(T.value) ? T.value : [T.value]), V = s(() => B.value.map((e) => R.value.find((t) => L(t) === e)).filter(Boolean)), H = s(() => U.value || V.value.length === 0 ? "" : I(V.value[0])), U = s(() => r.mode === n.Multiple || r.mode === n.Tags), Ce = s(() => r.maxTagCount == null || r.maxTagCount === "responsive" ? V.value : V.value.slice(0, r.maxTagCount)), W = s(() => r.maxTagCount == null || r.maxTagCount === "responsive" ? 0 : Math.max(0, V.value.length - r.maxTagCount)), G = (e) => B.value.includes(L(e)), K = () => {
+			j.value || A.value?.showPopover();
+		}, q = () => {
+			j.value && A.value?.hidePopover();
+		}, we = ({ newState: e }) => {
+			let t = e === "open";
+			j.value = t, w("openChange", t), t ? (r.defaultActiveFirstOption && z.value.length > 0 && (M.value = 0), p(() => {
+				F.value && k.value?.focus();
+			})) : (M.value = -1, N.value = "");
+		}, Te = (e) => {
+			if (e.disabled) return;
+			let t = L(e);
+			T.value = t, w("select", t, e), w("change", t, e), q(), p(() => O.value?.focus());
+		}, J = (e) => {
+			if (e.disabled) return;
+			let t = L(e), n = B.value.slice();
+			if (n.includes(t)) {
+				let r = n.filter((e) => e !== t);
+				T.value = r, w("deselect", t, e), w("change", r, r.map((e) => R.value.find((t) => L(t) === e)).filter(Boolean));
+			} else {
+				if (r.maxCount != null && n.length >= r.maxCount) return;
+				let i = [...n, t];
+				T.value = i, w("select", t, e), w("change", i, i.map((e) => R.value.find((t) => L(t) === e)).filter(Boolean));
+			}
+			N.value = "", p(() => k.value?.focus());
+		}, Y = (e) => {
+			U.value ? J(e) : Te(e);
+		}, X = (e) => {
+			let t = R.value.find((t) => L(t) === e), n = B.value.filter((t) => t !== e);
+			T.value = n, t && w("deselect", e, t), w("change", n, n.map((e) => R.value.find((t) => L(t) === e)).filter(Boolean));
+		}, Ee = (e) => {
+			e.stopPropagation(), U.value ? T.value = [] : T.value = void 0, N.value = "", w("clear"), w("change", U.value ? [] : void 0, []);
+		}, De = () => {
+			r.disabled || (j.value ? q() : K());
+		}, Z = (e) => {
+			w("focus", e);
+		}, Q = (e) => {
+			let t = e.relatedTarget;
+			A.value?.contains(t) || O.value?.contains(t) || (w("blur", e), q());
+		}, Oe = (e) => {
+			let t = e.target;
+			if (N.value = t.value, w("search", t.value), r.mode === n.Tags && r.tokenSeparators) {
+				let e = r.tokenSeparators;
+				for (let n of e) if (t.value.includes(n)) {
+					let n = t.value.split(RegExp(`[${e.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("")}]`));
+					for (let e of n) {
+						let t = e.trim();
+						if (t && !B.value.includes(t)) {
+							let e = R.value.find((e) => L(e) === t || I(e) === t);
+							if (e) J(e);
+							else {
+								let e = [...B.value.slice(), t];
+								T.value = e, w("select", t, {
+									value: t,
+									label: t
+								}), w("change", e, e.map((e) => R.value.find((t) => L(t) === e) ?? {
+									value: e,
+									label: String(e)
+								}));
+							}
+						}
+					}
+					N.value = "";
+					break;
+				}
+			}
+			j.value || K(), M.value = r.defaultActiveFirstOption ? 0 : -1;
+		}, $ = (e) => {
+			switch (w("inputKeyDown", e), e.key) {
+				case "ArrowDown": {
+					if (e.preventDefault(), !j.value) {
+						K();
+						return;
+					}
+					let t = z.value, n = M.value + 1;
+					for (let e = 0; e < t.length; e++) {
+						let r = (n + e) % t.length;
+						if (!t[r].disabled) {
+							M.value = r;
+							break;
+						}
+					}
+					break;
+				}
+				case "ArrowUp": {
+					if (e.preventDefault(), !j.value) {
+						K();
+						return;
+					}
+					let t = z.value, n = M.value - 1;
+					for (let e = 0; e < t.length; e++) {
+						let r = ((n - e) % t.length + t.length) % t.length;
+						if (!t[r].disabled) {
+							M.value = r;
+							break;
+						}
+					}
+					break;
+				}
+				case "Enter":
+					if (e.preventDefault(), j.value && M.value >= 0) {
+						let e = z.value[M.value];
+						e && !e.disabled && Y(e);
+					} else j.value || K();
+					break;
+				case " ":
+					if (!F.value || !N.value) {
+						if (e.preventDefault(), !j.value) K();
+						else if (M.value >= 0) {
+							let e = z.value[M.value];
+							e && !e.disabled && Y(e);
+						}
+					}
+					break;
+				case "Escape":
+					e.preventDefault(), q(), O.value?.focus();
+					break;
+				case "Backspace":
+					if (U.value && !N.value && B.value.length > 0) {
+						let e = B.value[B.value.length - 1];
+						X(e);
+					}
+					break;
+				case "Tab":
+					j.value && q();
+					break;
+			}
+		}, ke = (e) => {
+			w("popupScroll", e);
+		};
+		x(M, () => {
+			p(() => {
+				(A.value?.querySelector("[data-active=\"true\"]"))?.scrollIntoView({ block: "nearest" });
+			});
+		}), x(() => r.open, (e) => {
+			e === !0 && !j.value ? K() : e === !1 && j.value && q();
 		});
-		function T(e) {
-			if (e != null) return typeof e == "number" ? `${e}px` : e;
-		}
-		let E = n(() => ["b-skeleton", {
-			"b-skeleton--active": s.active,
-			"b-skeleton--with-avatar": g.value,
-			"b-skeleton--round": s.round
-		}]);
-		return (n, b) => s.loading ? (u(), i("div", {
-			key: 0,
-			class: c(E.value),
-			role: "status",
-			"aria-live": "polite",
-			"aria-label": "Loading"
-		}, [g.value ? (u(), i("div", p, [o(e, {
-			active: s.active || y.value.active,
-			shape: y.value.shape,
-			size: y.value.size
-		}, null, 8, [
-			"active",
-			"shape",
-			"size"
-		])])) : r("", !0), a("div", m, [_.value ? (u(), i("h3", {
-			key: 0,
-			class: "b-skeleton__title",
-			style: l(S.value ? { width: S.value } : void 0),
-			"aria-hidden": "true"
-		}, null, 4)) : r("", !0), v.value ? (u(), i("ul", h, [(u(!0), i(t, null, d(w.value, (e, t) => (u(), i("li", {
-			key: t,
-			class: "b-skeleton__paragraph-row",
-			style: l(e ? { width: e } : void 0)
-		}, null, 4))), 128))])) : r("", !0)])], 2)) : f(n.$slots, "default", { key: 1 });
+		let Ae = s(() => !r.allowClear || r.disabled ? !1 : U.value ? B.value.length > 0 : T.value != null && T.value !== "");
+		return d({
+			focus: () => O.value?.focus(),
+			blur: () => O.value?.blur()
+		}), (t, n) => (h(), l("div", { class: m(["b-select b:relative b:inline-flex b:w-full", { "b-select--disabled": r.disabled }]) }, [u("div", te({
+			ref_key: "selectorRef",
+			ref: O
+		}, b(C), {
+			class: ["b-select__selector b:box-border b:flex b:w-full b:cursor-pointer b:items-center b:gap-1 b:transition-all b:outline-none", [
+				{
+					"b:min-h-6 b:px-2 b:text-sm": r.size === b(e).Small,
+					"b:min-h-8 b:px-3 b:text-sm": r.size === b(e).Medium,
+					"b:min-h-10 b:px-3 b:text-base": r.size === b(e).Large
+				},
+				{
+					"b:rounded-lg b:border-1 b:border-[var(--b-select-border-color)] b:bg-[var(--b-select-selector-bg)] b:hover:not-disabled:border-[var(--b-select-hover-border-color)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]": r.variant === b(a).Outlined,
+					"b:rounded-lg b:border-1 b:border-transparent b:bg-[var(--b-select-filled-bg)] b:hover:not-disabled:bg-[var(--b-select-filled-bg)] b:focus:not-disabled:border-[var(--b-select-active-border-color)] b:focus:not-disabled:bg-[var(--b-select-selector-bg)] b:focus:not-disabled:shadow-[0_0_0_2px_var(--b-select-active-outline-color)]": r.variant === b(a).Filled,
+					"b:rounded-lg b:border-1 b:border-transparent b:bg-transparent": r.variant === b(a).Borderless
+				},
+				{
+					"b:border-red-500! b:hover:not-disabled:border-red-400! b:focus:not-disabled:border-red-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]!": r.status === b(i).Error,
+					"b:border-yellow-500! b:hover:not-disabled:border-yellow-400! b:focus:not-disabled:border-yellow-500! b:focus:not-disabled:shadow-[0_0_0_2px_rgba(255,215,5,0.1)]!": r.status === b(i).Warning
+				},
+				{ "b:cursor-not-allowed b:opacity-40": r.disabled },
+				{ "b-select__selector--open": j.value }
+			]],
+			tabindex: r.disabled ? -1 : 0,
+			role: "combobox",
+			"aria-expanded": j.value,
+			"aria-controls": j.value ? D.value : void 0,
+			"aria-activedescendant": j.value && M.value >= 0 ? `${D.value}-option-${M.value}` : void 0,
+			"aria-haspopup": "listbox",
+			"aria-label": r.placeholder ?? "Select",
+			"aria-disabled": r.disabled ?? !1,
+			onClick: De,
+			onFocus: Z,
+			onBlur: Q,
+			onKeydown: $
+		}), [
+			U.value ? (h(), l(o, { key: 0 }, [
+				(h(!0), l(o, null, _(Ce.value, (t) => (h(), l("span", {
+					key: L(t),
+					class: m(["b-select__tag b:inline-flex b:max-w-full b:items-center b:gap-0.5 b:rounded b:border-1 b:border-[var(--b-select-multiple-item-border-color)] b:bg-[var(--b-select-multiple-item-bg)] b:leading-none", [{
+						"b:h-4 b:px-1 b:text-xs": r.size === b(e).Small,
+						"b:h-6 b:px-1.5 b:text-xs": r.size === b(e).Medium,
+						"b:h-8 b:px-2 b:text-sm": r.size === b(e).Large
+					}]])
+				}, [u("span", se, y(I(t)), 1), u("button", {
+					type: "button",
+					class: "b-select__tag-close b:ml-0.5 b:flex b:h-3.5 b:w-3.5 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-transparent b:text-[10px] b:text-zinc-400 b:hover:bg-zinc-200 b:hover:text-zinc-600",
+					"aria-label": `Remove ${I(t)}`,
+					tabindex: "-1",
+					onClick: S((e) => X(L(t)), ["stop"]),
+					onMousedown: n[0] ||= S(() => {}, ["prevent"])
+				}, [...n[2] ||= [u("svg", {
+					"aria-hidden": "true",
+					width: "8",
+					height: "8",
+					viewBox: "0 0 8 8",
+					fill: "none"
+				}, [u("path", {
+					d: "M1 1l6 6M7 1L1 7",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"stroke-linecap": "round"
+				})], -1)]], 40, ce)], 2))), 128)),
+				W.value > 0 ? (h(), l("span", {
+					key: 0,
+					class: m(["b-select__tag b-select__tag--count b:relative b:z-1 b:inline-flex b:shrink-0 b:items-center b:rounded b:bg-[var(--b-select-multiple-count-bg)] b:px-1.5 b:text-xs b:leading-none b:text-[var(--b-select-multiple-count-color)]", [{
+						"b:h-4": r.size === b(e).Small,
+						"b:h-6": r.size === b(e).Medium,
+						"b:h-8": r.size === b(e).Large
+					}]])
+				}, " +" + y(W.value), 3)) : c("", !0),
+				u("input", {
+					ref_key: "searchInputRef",
+					ref: k,
+					class: "b-select__search b:min-w-4 b:flex-1 b:border-none b:bg-transparent b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]",
+					value: N.value,
+					placeholder: B.value.length === 0 ? r.placeholder : void 0,
+					disabled: r.disabled,
+					"aria-label": r.placeholder ?? "Search options",
+					autocomplete: "off",
+					onInput: Oe,
+					onKeydown: $,
+					onFocus: Z,
+					onBlur: Q
+				}, null, 40, le)
+			], 64)) : (h(), l(o, { key: 1 }, [H.value && !N.value ? (h(), l("span", ue, [v(t.$slots, "selectedLabel", { option: V.value[0] }, () => [ee(y(H.value), 1)], !0)])) : !N.value && !H.value ? (h(), l("span", de, y(r.placeholder), 1)) : c("", !0), F.value ? (h(), l("input", {
+				key: 2,
+				ref_key: "searchInputRef",
+				ref: k,
+				class: m(["b-select__search b:absolute b:inset-0 b:w-full b:border-none b:bg-transparent b:px-3 b:text-sm b:outline-none b:placeholder:text-[var(--b-select-placeholder-color)]", { "b:opacity-0": !j.value }]),
+				value: N.value,
+				disabled: r.disabled,
+				"aria-label": r.placeholder ?? "Search options",
+				autocomplete: "off",
+				tabindex: "-1",
+				onInput: Oe,
+				onKeydown: $
+			}, null, 42, fe)) : c("", !0)], 64)),
+			Ae.value ? (h(), l("button", {
+				key: 2,
+				type: "button",
+				class: "b-select__clear b:z-1 b:flex b:h-4 b:w-4 b:shrink-0 b:cursor-pointer b:items-center b:justify-center b:rounded-full b:border-none b:bg-[var(--b-select-clear-bg)] b:text-xs b:text-zinc-400 b:hover:text-zinc-600",
+				"aria-label": "Clear selection",
+				tabindex: "-1",
+				onClick: Ee,
+				onMousedown: n[1] ||= S(() => {}, ["prevent"])
+			}, [...n[3] ||= [u("svg", {
+				"aria-hidden": "true",
+				width: "8",
+				height: "8",
+				viewBox: "0 0 8 8",
+				fill: "none"
+			}, [u("path", {
+				d: "M1 1l6 6M7 1L1 7",
+				stroke: "currentColor",
+				"stroke-width": "1.5",
+				"stroke-linecap": "round"
+			})], -1)]], 32)) : c("", !0),
+			u("span", {
+				class: m(["b-select__arrow b:ml-auto b:flex b:shrink-0 b:items-center b:text-zinc-400 b:transition-transform b:duration-200", { "b:rotate-180": j.value }]),
+				"aria-hidden": "true"
+			}, [...n[4] ||= [u("svg", {
+				width: "12",
+				height: "12",
+				viewBox: "0 0 12 12",
+				fill: "none"
+			}, [u("path", {
+				d: "M2.5 4.5L6 8L9.5 4.5",
+				stroke: "currentColor",
+				"stroke-width": "1.5",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			})], -1)]], 2),
+			r.loading ? (h(), l("span", pe, [...n[5] ||= [u("svg", {
+				width: "14",
+				height: "14",
+				viewBox: "0 0 14 14",
+				fill: "none"
+			}, [u("circle", {
+				cx: "7",
+				cy: "7",
+				r: "5.5",
+				stroke: "currentColor",
+				"stroke-width": "1.5",
+				"stroke-dasharray": "24",
+				"stroke-linecap": "round"
+			})], -1)]])) : c("", !0)
+		], 16, oe), u("div", {
+			ref_key: "menuRef",
+			ref: A,
+			id: D.value,
+			class: m(["b-select__dropdown b:overflow-auto b:rounded-lg b:bg-[var(--b-select-selector-bg)] b:shadow-lg", { "b:w-[anchor-size(width)]": r.popupMatchSelectWidth === !0 }]),
+			style: ne([typeof r.popupMatchSelectWidth == "number" ? { width: `${r.popupMatchSelectWidth}px` } : void 0, { maxHeight: `${r.listHeight}px` }]),
+			popover: "",
+			role: "listbox",
+			"aria-multiselectable": U.value || void 0,
+			"aria-label": r.placeholder ?? "Options",
+			onToggle: we,
+			onScroll: ke
+		}, [z.value.length > 0 ? (h(), l("div", he, [(h(!0), l(o, null, _(z.value, (e, r) => (h(), l("div", {
+			key: L(e),
+			id: `${D.value}-option-${r}`,
+			class: m(["b-select__option b:cursor-pointer b:rounded-md b:px-[var(--b-select-option-padding-x)] b:py-[var(--b-select-option-padding-y)] b:text-[length:var(--b-select-option-font-size)] b:leading-[var(--b-select-option-line-height)] b:transition-colors", [{
+				"b:bg-[var(--b-select-option-active-bg)]": r === M.value && !e.disabled,
+				"b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)] b:text-[color:var(--b-select-option-selected-color)]": G(e) && r !== M.value,
+				"b:bg-[var(--b-select-option-selected-bg)] b:font-[var(--b-select-option-selected-font-weight)]": G(e) && r === M.value,
+				"b:cursor-not-allowed b:opacity-40": e.disabled,
+				"b:hover:bg-[var(--b-select-option-active-bg)]": !e.disabled && r !== M.value && !G(e)
+			}]]),
+			"data-active": r === M.value,
+			"aria-selected": G(e),
+			"aria-disabled": e.disabled ?? !1,
+			role: "option",
+			onMousedown: S((t) => Y(e), ["prevent"]),
+			onMouseenter: (e) => M.value = r
+		}, [v(t.$slots, "option", {
+			option: e,
+			index: r,
+			selected: G(e)
+		}, () => [u("span", _e, [u("span", null, y(I(e)), 1), U.value && G(e) ? (h(), l("svg", ve, [...n[6] ||= [u("path", {
+			d: "M2 6L5 9L10 3",
+			stroke: "currentColor",
+			"stroke-width": "1.5",
+			"stroke-linecap": "round",
+			"stroke-linejoin": "round"
+		}, null, -1)]])) : c("", !0)])], !0)], 42, ge))), 128))])) : r.notFoundContent === null ? c("", !0) : (h(), l("div", ye, y(r.notFoundContent), 1))], 46, me)], 2));
 	}
 });
 //#endregion
-export { g as default };
+export { C as default };
 
 //# sourceMappingURL=design-system180.js.map