@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system110.js

@@ -1,510 +1,209 @@
-import { Teleport as e, Transition as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as ee, createVNode as s, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as te, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, vShow as g, watch as _, withCtx as ne, withDirectives as re, withModifiers as ie } from "vue";
-//#region src/components/BImage/BImage.vue?vue&type=script&setup=true&lang.ts
-var ae = ["src", "alt"], oe = {
+import { useComponentId as e } from "./design-system10.js";
+import { useValidationField as t } from "./design-system104.js";
+import { BFormContextKey as n } from "./design-system105.js";
+import { BFormLayout as r, BFormRequiredMark as i, BFormValidateStatus as a, BFormValidateTrigger as o } from "./design-system106.js";
+import { computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, defineComponent as f, inject as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderSlot as v, toDisplayString as y, watch as b } from "vue";
+//#region src/components/BForm/BFormItem.vue?vue&type=script&setup=true&lang.ts
+var x = ["data-form-field", "aria-labelledby"], S = ["id", "for"], C = {
+	key: 0,
+	class: "b-form-item__required-mark",
+	"aria-hidden": "true"
+}, w = {
 	key: 1,
-	class: "b-image__placeholder",
+	class: "b-form-item__optional-mark"
+}, T = {
+	key: 2,
+	class: "b-form-item__colon",
+	"aria-hidden": "true"
+}, E = ["title"], D = { class: "b-form-item__control" }, O = { class: "b-form-item__control-input" }, k = {
+	key: 0,
+	class: "b-form-item__feedback-icon"
+}, ee = {
+	key: 0,
+	viewBox: "64 64 896 896",
+	width: "14",
+	height: "14",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, te = {
+	key: 1,
+	viewBox: "64 64 896 896",
+	width: "14",
+	height: "14",
+	fill: "currentColor",
+	"aria-hidden": "true"
+}, A = {
+	key: 2,
+	viewBox: "64 64 896 896",
+	width: "14",
+	height: "14",
+	fill: "currentColor",
 	"aria-hidden": "true"
-}, v = [
-	"src",
-	"alt",
-	"width",
-	"height",
-	"loading",
-	"crossorigin",
-	"decoding",
-	"referrerpolicy"
-], se = ["aria-label"], ce = ["aria-label"], le = ["aria-label"], ue = { class: "b-image-preview__body" }, y = ["src", "alt"], b = ["aria-pressed"], x = ["aria-pressed"], S = ["disabled"], C = {
-	class: "b-image-preview__scale",
-	"aria-live": "polite",
-	"aria-atomic": "true"
-}, de = ["disabled"], w = /* @__PURE__ */ c({
-	__name: "BImage",
+}, j = {
+	key: 3,
+	class: "b-form-item__loading-icon"
+}, M = ["id"], N = {
+	key: 1,
+	class: "b-form-item__extra"
+}, P = /* @__PURE__ */ f({
+	__name: "BFormItem",
 	props: {
-		src: { default: void 0 },
-		alt: { default: "" },
-		width: { default: void 0 },
-		height: { default: void 0 },
-		fallback: { default: void 0 },
-		placeholder: {
+		label: {},
+		name: {},
+		schema: {},
+		required: {
 			type: Boolean,
 			default: !1
 		},
-		placeholderSrc: { default: void 0 },
-		preview: {
-			type: Boolean,
-			default: !0
+		validateStatus: {},
+		help: {},
+		extra: {},
+		colon: {
+			type: [Boolean, null],
+			default: null
 		},
-		mask: {
+		labelAlign: {},
+		labelWidth: {},
+		hidden: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		previewSrc: { default: void 0 },
-		previewVisible: {
+		noStyle: {
 			type: Boolean,
-			default: void 0
+			default: !1
 		},
-		scaleStep: { default: .5 },
-		minScale: { default: 1 },
-		maxScale: { default: 50 },
-		movable: {
+		hasFeedback: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		loading: { default: void 0 },
-		crossOrigin: { default: void 0 },
-		decoding: { default: void 0 },
-		referrerPolicy: { default: void 0 }
+		validateTrigger: {},
+		tooltip: {},
+		layout: {}
 	},
-	emits: [
-		"error",
-		"update:previewVisible",
-		"transform"
-	],
-	setup(c, { emit: w }) {
-		let T = c, E = w, D = p("loading"), O = p(!1);
-		function fe() {
-			D.value = "loaded";
-		}
-		function pe(e) {
-			T.fallback && !O.value ? (O.value = !0, D.value = "loading") : D.value = "error", E("error", e);
-		}
-		let me = n(() => O.value && T.fallback ? T.fallback : T.src);
-		_(() => T.src, () => {
-			D.value = "loading", O.value = !1;
-		});
-		let k = n(() => T.placeholderSrc && D.value === "loading"), A = n(() => {
-			let e = {};
-			return T.width != null && (e.width = typeof T.width == "number" ? `${T.width}px` : T.width), T.height != null && (e.height = typeof T.height == "number" ? `${T.height}px` : T.height), e;
-		}), j = n(() => T.preview && T.mask && D.value === "loaded"), M = p(!1), N = n(() => T.previewVisible !== void 0), P = n(() => N.value ? T.previewVisible : M.value);
-		function F() {
-			T.preview && (N.value ? E("update:previewVisible", !0) : M.value = !0, l(() => {
-				De();
-			}));
-		}
-		function I() {
-			N.value ? E("update:previewVisible", !1) : M.value = !1, l(() => {
-				Z.value?.focus();
-			});
-		}
-		let L = p(1), R = p(0), z = p(!1), B = p(!1), V = p(0), H = p(0);
-		function he() {
-			return {
-				scale: L.value,
-				rotate: R.value,
-				flipX: z.value,
-				flipY: B.value,
-				x: V.value,
-				y: H.value
-			};
-		}
-		function U(e) {
-			E("transform", {
-				transform: he(),
-				action: e
-			});
-		}
-		function W() {
-			L.value = 1, R.value = 0, z.value = !1, B.value = !1, V.value = 0, H.value = 0;
-		}
-		function ge() {
-			W(), U("reset");
-		}
-		function _e() {
-			let e = L.value + T.scaleStep;
-			L.value = Math.min(e, T.maxScale), U("zoomIn");
-		}
-		function ve() {
-			let e = L.value - T.scaleStep;
-			L.value = Math.max(e, T.minScale), U("zoomOut");
-		}
-		function ye() {
-			R.value -= 90, U("rotateLeft");
-		}
-		function be() {
-			R.value += 90, U("rotateRight");
-		}
-		function xe() {
-			z.value = !z.value, U("flipX");
-		}
-		function Se() {
-			B.value = !B.value, U("flipY");
-		}
-		let Ce = n(() => {
-			let e = [];
-			return e.push(`translate(${V.value}px, ${H.value}px)`), e.push(`scale(${z.value ? -1 : 1}, ${B.value ? -1 : 1})`), e.push(`scale(${L.value})`), e.push(`rotate(${R.value}deg)`), e.join(" ");
+	setup(f, { expose: P }) {
+		let F = p(n, void 0), { componentUID: I } = e(), L = s(() => `b-form-item-${f.name ? f.name + "-" : ""}${I.value}`), R = s(() => {
+			if (f.name && F?.model) return F.model[f.name];
+		}), z = _(R.value);
+		b(R, (e) => {
+			z.value = e;
 		});
-		_(P, (e) => {
-			e && W();
+		let B = f.name && f.schema ? t(f.name, z, f.schema) : void 0, V = s(() => {
+			if (f.validateTrigger) return Array.isArray(f.validateTrigger) ? f.validateTrigger : [f.validateTrigger];
+			let e = F?.validateTrigger ?? o.Change;
+			return Array.isArray(e) ? e : [e];
+		}), H = () => {
+			B && V.value.includes(o.Blur) && (B.markTouched(), B.validate());
+		}, U = () => {
+			B && V.value.includes(o.Change) && B.validate();
+		};
+		b(R, () => {
+			U();
 		});
-		let we = n(() => T.previewSrc || T.src), G = p(!1), K = p(0), q = p(0), J = p(0), Y = p(0);
-		function Te(e) {
-			if (!T.movable) return;
-			let t = e.target;
-			t.closest(".b-image-preview__toolbar") || t.closest(".b-image-preview__close") || (G.value = !0, K.value = e.clientX, q.value = e.clientY, J.value = V.value, Y.value = H.value, e.currentTarget?.setPointerCapture(e.pointerId), U("dragStart"));
-		}
-		function Ee(e) {
-			if (!G.value) return;
-			let t = e.clientX - K.value, n = e.clientY - q.value;
-			V.value = J.value + t, H.value = Y.value + n;
-		}
-		function X() {
-			G.value && (G.value = !1, U("dragEnd"));
-		}
-		let Z = p(null), Q = p(null);
-		function De() {
-			l(() => {
-				if (!Q.value) return;
-				let e = Q.value.querySelectorAll("button, [tabindex]:not([tabindex=\"-1\"])");
-				e.length > 0 && e[0].focus();
-			});
-		}
-		function Oe(e) {
-			if (e.key === "Escape") {
-				e.stopPropagation(), I();
-				return;
+		let W = s(() => {
+			if (f.validateStatus) return f.validateStatus;
+			if (B) {
+				if (B.errors.value.length > 0) return a.Error;
+				if (B.touched.value && B.isValid.value) return a.Success;
 			}
-			if (e.key === "Tab" && Q.value) {
-				let t = Array.from(Q.value.querySelectorAll("button, [tabindex]:not([tabindex=\"-1\"])"));
-				if (t.length === 0) return;
-				let n = t[0], r = t[t.length - 1];
-				e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
+		}), G = s(() => f.layout === void 0 ? F?.layout === void 0 ? r.Horizontal : F.layout : f.layout), K = s(() => f.labelAlign === void 0 ? F?.labelAlign === void 0 ? "right" : F.labelAlign : f.labelAlign), q = s(() => f.colon === null ? F?.colon === void 0 ? !0 : F.colon : f.colon), J = s(() => f.labelWidth ?? F?.labelWidth), Y = s(() => F?.disabled ?? !1), X = s(() => !!(f.required || f.schema && (!f.schema.safeParse(void 0).success || !f.schema.safeParse("").success))), Z = s(() => q.value && G.value === "horizontal"), Q = s(() => {
+			let e = F?.requiredMark ?? !0;
+			return e === !1 || e === i.Optional ? !1 : X.value;
+		}), ne = s(() => (F?.requiredMark ?? !0) === i.Optional && !X.value), $ = s(() => {
+			if (f.help !== void 0) return f.help;
+			if (B && B.errors.value.length > 0) return B.errors.value[0];
+		}), re = s(() => [
+			"b-form-item",
+			`b-form-item--${G.value}`,
+			{
+				"b-form-item--has-error": W.value === a.Error,
+				"b-form-item--has-warning": W.value === a.Warning,
+				"b-form-item--has-success": W.value === a.Success,
+				"b-form-item--validating": W.value === a.Validating,
+				"b-form-item--has-feedback": f.hasFeedback,
+				"b-form-item--hidden": f.hidden,
+				"b-form-item--no-style": f.noStyle,
+				"b-form-item--required": Q.value
 			}
-		}
-		function $(e) {
-			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), F());
-		}
-		_(P, (e) => {
-			typeof document > "u" || (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "");
-		}), te(() => {
-			typeof document < "u" && (document.body.style.overflow = "");
+		]), ie = s(() => {
+			let e = {};
+			return J.value && (e.width = J.value, e.flexShrink = "0"), e;
 		});
-		function ke(e) {
-			if (e.preventDefault(), e.deltaY < 0) {
-				let e = L.value + T.scaleStep;
-				L.value = Math.min(e, T.maxScale);
-			} else {
-				let e = L.value - T.scaleStep;
-				L.value = Math.max(e, T.minScale);
-			}
-			U("wheel");
-		}
-		function Ae(e) {
-			let t = e.target;
-			if (t.tagName !== "BUTTON") return;
-			let n = t.closest(".b-image-preview__toolbar");
-			if (!n) return;
-			let r = Array.from(n.querySelectorAll("button:not(:disabled)")), i = r.indexOf(t), a = -1;
-			e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), a = (i + 1) % r.length) : e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), a = (i - 1 + r.length) % r.length) : e.key === "Home" ? (e.preventDefault(), a = 0) : e.key === "End" && (e.preventDefault(), a = r.length - 1), a >= 0 && r[a].focus();
-		}
-		return (n, l) => (f(), a("div", {
-			class: u(["b-image", {
-				"b-image--error": D.value === "error" && !c.fallback,
-				"b-image--preview": c.preview
-			}]),
-			style: d(A.value)
+		return P({
+			validate: B?.validate ?? (() => !0),
+			reset: B?.reset ?? (() => {}),
+			errors: B?.errors ?? s(() => []),
+			isValid: B?.isValid ?? s(() => !0),
+			dirty: B?.dirty ?? s(() => !1),
+			touched: B?.touched ?? s(() => !1),
+			handleBlur: H
+		}), (e, t) => f.noStyle ? v(e.$slots, "default", {
+			key: 1,
+			id: L.value,
+			status: W.value,
+			disabled: Y.value,
+			onBlur: H
+		}, void 0, !0) : (g(), l("div", {
+			key: 0,
+			class: m(re.value),
+			"data-form-field": f.name,
+			role: "group",
+			"aria-labelledby": f.label ? `${L.value}-label` : void 0
+		}, [f.label || e.$slots.label ? (g(), l("div", {
+			key: 0,
+			class: m(["b-form-item__label", [`b-form-item__label--${K.value}`]]),
+			style: h(ie.value)
+		}, [u("label", {
+			id: `${L.value}-label`,
+			for: L.value
 		}, [
-			k.value ? (f(), a("img", {
-				key: 0,
-				class: "b-image__progressive-placeholder",
-				src: c.placeholderSrc,
-				alt: c.alt,
-				"aria-hidden": "true"
-			}, null, 8, ae)) : i("", !0),
-			(c.placeholder || n.$slots.placeholder) && D.value === "loading" && !c.placeholderSrc ? (f(), a("div", oe, [m(n.$slots, "placeholder", {}, () => [l[0] ||= o("div", { class: "b-image__placeholder-shimmer" }, null, -1)])])) : i("", !0),
-			re(o("img", {
-				class: "b-image__img",
-				src: me.value,
-				alt: c.alt,
-				width: typeof c.width == "number" ? c.width : void 0,
-				height: typeof c.height == "number" ? c.height : void 0,
-				loading: c.loading,
-				crossorigin: c.crossOrigin,
-				decoding: c.decoding,
-				referrerpolicy: c.referrerPolicy,
-				onLoad: fe,
-				onError: pe
-			}, null, 40, v), [[g, D.value !== "loading" || !c.placeholder && !n.$slots.placeholder && !c.placeholderSrc]]),
-			j.value ? (f(), a("div", {
-				key: 2,
-				ref_key: "triggerRef",
-				ref: Z,
-				class: "b-image__mask",
-				role: "button",
-				tabindex: "0",
-				"aria-label": `Preview image${c.alt ? ": " + c.alt : ""}`,
-				onClick: F,
-				onKeydown: $
-			}, [m(n.$slots, "preview-mask", {}, () => [l[1] ||= o("span", {
-				class: "b-image__mask-text",
+			Q.value ? (g(), l("span", C, "*")) : c("", !0),
+			v(e.$slots, "label", {}, () => [d(y(f.label), 1)], !0),
+			ne.value ? (g(), l("span", w, "(optional)")) : c("", !0),
+			Z.value ? (g(), l("span", T, ":")) : c("", !0)
+		], 8, S), f.tooltip ? (g(), l("span", {
+			key: 0,
+			class: "b-form-item__tooltip",
+			title: f.tooltip,
+			role: "img",
+			"aria-label": "Help"
+		}, [...t[0] ||= [u("svg", {
+			viewBox: "64 64 896 896",
+			width: "14",
+			height: "14",
+			fill: "currentColor",
+			"aria-hidden": "true"
+		}, [
+			u("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }),
+			u("path", { d: "M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.4-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7c0-19.7 12.4-37.7 30.9-44.8 59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3z" }),
+			u("path", { d: "M512 732a40 40 0 100-80 40 40 0 000 80z" })
+		], -1)]], 8, E)) : c("", !0)], 6)) : c("", !0), u("div", D, [
+			u("div", O, [v(e.$slots, "default", {
+				id: L.value,
+				status: W.value,
+				disabled: Y.value,
+				onBlur: H
+			}, void 0, !0), f.hasFeedback && W.value ? (g(), l("span", k, [W.value === "success" ? (g(), l("svg", ee, [...t[1] ||= [u("path", { d: "M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" }, null, -1)]])) : W.value === "error" ? (g(), l("svg", te, [...t[2] ||= [u("path", { d: "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L512 449.8 295.9 191.7c-3-3.6-7.5-5.7-12.3-5.7H204c-6.8 0-10.5 7.9-6.1 13.1L460.2 512 197.8 824.9A7.95 7.95 0 00204 838h79.8c4.7 0 9.2-2.1 12.3-5.7L512 574.1l216.2 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z" }, null, -1)]])) : W.value === "warning" ? (g(), l("svg", A, [...t[3] ||= [u("path", { d: "M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8z" }, null, -1), u("path", { d: "M955.7 856l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48z" }, null, -1)]])) : W.value === "validating" ? (g(), l("span", j, [...t[4] ||= [u("svg", {
+				viewBox: "0 0 1024 1024",
+				width: "14",
+				height: "14",
+				fill: "currentColor",
 				"aria-hidden": "true"
-			}, [o("svg", {
-				class: "b-image__mask-icon",
-				viewBox: "0 0 24 24",
-				fill: "none",
-				stroke: "currentColor",
-				"stroke-width": "2",
-				"stroke-linecap": "round",
-				"stroke-linejoin": "round",
-				"aria-hidden": "true",
-				focusable: "false"
-			}, [o("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), o("circle", {
-				cx: "12",
-				cy: "12",
-				r: "3"
-			})]), ee(" Preview ")], -1)])], 40, se)) : c.preview && !c.mask && D.value === "loaded" ? (f(), a("div", {
-				key: 3,
-				ref_key: "triggerRef",
-				ref: Z,
-				class: "b-image__click-target",
-				role: "button",
-				tabindex: "0",
-				"aria-label": `Preview image${c.alt ? ": " + c.alt : ""}`,
-				onClick: F,
-				onKeydown: $
-			}, null, 40, ce)) : i("", !0),
-			(f(), r(e, { to: "body" }, [s(t, { name: "b-image-preview" }, {
-				default: ne(() => [P.value ? (f(), a("div", {
-					key: 0,
-					ref_key: "overlayRef",
-					ref: Q,
-					class: u(["b-image-preview", { "b-image-preview--dragging": G.value }]),
-					role: "dialog",
-					"aria-modal": "true",
-					"aria-label": `Image preview${c.alt ? ": " + c.alt : ""}`,
-					onKeydown: Oe,
-					onWheel: ie(ke, ["prevent"]),
-					onPointerdown: Te,
-					onPointermove: Ee,
-					onPointerup: X,
-					onPointercancel: X
-				}, [
-					o("div", {
-						class: "b-image-preview__backdrop",
-						onClick: I
-					}),
-					o("button", {
-						class: "b-image-preview__close",
-						type: "button",
-						"aria-label": "Close preview",
-						onClick: I
-					}, [...l[2] ||= [o("svg", {
-						viewBox: "0 0 24 24",
-						fill: "none",
-						stroke: "currentColor",
-						"stroke-width": "2",
-						"stroke-linecap": "round",
-						"stroke-linejoin": "round",
-						"aria-hidden": "true",
-						focusable: "false"
-					}, [o("line", {
-						x1: "18",
-						y1: "6",
-						x2: "6",
-						y2: "18"
-					}), o("line", {
-						x1: "6",
-						y1: "6",
-						x2: "18",
-						y2: "18"
-					})], -1)]]),
-					o("div", ue, [o("img", {
-						class: "b-image-preview__img",
-						src: we.value,
-						alt: c.alt,
-						style: d({ transform: Ce.value }),
-						draggable: "false"
-					}, null, 12, y)]),
-					o("div", {
-						class: "b-image-preview__toolbar",
-						role: "toolbar",
-						"aria-label": "Image preview controls",
-						onKeydown: Ae
-					}, [
-						o("button", {
-							type: "button",
-							"aria-label": "Flip horizontal",
-							"aria-pressed": z.value,
-							onClick: xe
-						}, [...l[3] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [
-							o("path", { d: "M8 3H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h3" }),
-							o("path", { d: "M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3" }),
-							o("line", {
-								x1: "12",
-								y1: "1",
-								x2: "12",
-								y2: "23",
-								"stroke-dasharray": "2 2"
-							})
-						], -1)]], 8, b),
-						o("button", {
-							type: "button",
-							"aria-label": "Flip vertical",
-							"aria-pressed": B.value,
-							onClick: Se
-						}, [...l[4] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [
-							o("path", { d: "M3 8V5a2 2 0 0 1 2-2h14c1.1 0 2 .9 2 2v3" }),
-							o("path", { d: "M3 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3" }),
-							o("line", {
-								x1: "1",
-								y1: "12",
-								x2: "23",
-								y2: "12",
-								"stroke-dasharray": "2 2"
-							})
-						], -1)]], 8, x),
-						o("button", {
-							type: "button",
-							"aria-label": "Rotate left",
-							onClick: ye
-						}, [...l[5] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [o("polyline", { points: "1 4 1 10 7 10" }), o("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })], -1)]]),
-						o("button", {
-							type: "button",
-							"aria-label": "Rotate right",
-							onClick: be
-						}, [...l[6] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [o("polyline", { points: "23 4 23 10 17 10" }), o("path", { d: "M20.49 15a9 9 0 1 1-2.13-9.36L23 10" })], -1)]]),
-						o("button", {
-							type: "button",
-							"aria-label": "Zoom out",
-							disabled: L.value <= c.minScale,
-							onClick: ve
-						}, [...l[7] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [
-							o("circle", {
-								cx: "11",
-								cy: "11",
-								r: "8"
-							}),
-							o("line", {
-								x1: "21",
-								y1: "21",
-								x2: "16.65",
-								y2: "16.65"
-							}),
-							o("line", {
-								x1: "8",
-								y1: "11",
-								x2: "14",
-								y2: "11"
-							})
-						], -1)]], 8, S),
-						o("span", C, h(Math.round(L.value * 100)) + "% ", 1),
-						o("button", {
-							type: "button",
-							"aria-label": "Zoom in",
-							disabled: L.value >= c.maxScale,
-							onClick: _e
-						}, [...l[8] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [
-							o("circle", {
-								cx: "11",
-								cy: "11",
-								r: "8"
-							}),
-							o("line", {
-								x1: "21",
-								y1: "21",
-								x2: "16.65",
-								y2: "16.65"
-							}),
-							o("line", {
-								x1: "11",
-								y1: "8",
-								x2: "11",
-								y2: "14"
-							}),
-							o("line", {
-								x1: "8",
-								y1: "11",
-								x2: "14",
-								y2: "11"
-							})
-						], -1)]], 8, de),
-						o("button", {
-							type: "button",
-							"aria-label": "Reset to original size",
-							onClick: ge
-						}, [...l[9] ||= [o("svg", {
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
-							"aria-hidden": "true",
-							focusable: "false"
-						}, [o("rect", {
-							x: "3",
-							y: "3",
-							width: "18",
-							height: "18",
-							rx: "2",
-							ry: "2"
-						}), o("text", {
-							x: "12",
-							y: "16",
-							"text-anchor": "middle",
-							fill: "currentColor",
-							stroke: "none",
-							"font-size": "10",
-							"font-weight": "600",
-							"font-family": "system-ui"
-						}, " 1:1 ")], -1)]])
-					], 32)
-				], 42, le)) : i("", !0)]),
-				_: 1
-			})]))
-		], 6));
+			}, [u("path", { d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.3 199.3 0 19.9-16.1 36-36 36z" })], -1)]])) : c("", !0)])) : c("", !0)]),
+			$.value || e.$slots.help ? (g(), l("div", {
+				key: 0,
+				class: m(["b-form-item__help", {
+					"b-form-item__help--error": W.value === "error",
+					"b-form-item__help--warning": W.value === "warning"
+				}]),
+				id: `${L.value}-help`,
+				role: "alert",
+				"aria-live": "polite"
+			}, [v(e.$slots, "help", {}, () => [d(y($.value), 1)], !0)], 10, M)) : c("", !0),
+			f.extra || e.$slots.extra ? (g(), l("div", N, [v(e.$slots, "extra", {}, () => [d(y(f.extra), 1)], !0)])) : c("", !0)
+		])], 10, x));
 	}
 });
 //#endregion
-export { w as default };
+export { P as default };
 
 //# sourceMappingURL=design-system110.js.map