@selectwin/kit 0.1.197 → 0.1.199

package/dist/SelectCandlestick.js

@@ -0,0 +1,97 @@
+/* empty css           */
+import { CHART_PAD as e, formatCompact as t, useChartSize as n } from "./chartUtils.js";
+import { ChartTooltip as r, useChartTooltip as i } from "./chartTip.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/SelectCandlestick.tsx
+function s({ data: s, height: c = 240, format: l = t, upColor: u = "var(--select-chart-4)", downColor: d = "var(--select-chart-3)", className: f, ...p }) {
+	let { ref: m, width: h } = n(c), g = i(), _ = e, v = Math.max(0, h - _.left - _.right), y = c - _.top - _.bottom, b = _.top + y, x = Math.max(1, ...s.map((e) => e.high)), S = Math.min(x, ...s.map((e) => e.low)), C = (x - S) * .08 || 1, w = S - C, T = x + C, E = (e) => b - (e - w) / (T - w) * y, D = s.length, O = D ? v / D : 0, k = Math.min(O * .5, 18), A = Array.from({ length: 5 }, (e, t) => w + (T - w) * t / 4);
+	return /* @__PURE__ */ o("div", {
+		...p,
+		className: `select-chart-wrap${f ? " " + f : ""}`,
+		ref: m,
+		children: [h > 0 && /* @__PURE__ */ o("svg", {
+			width: h,
+			height: c,
+			className: "select-chart",
+			children: [A.map((e, t) => /* @__PURE__ */ o("g", { children: [/* @__PURE__ */ a("line", {
+				x1: _.left,
+				x2: h - _.right,
+				y1: E(e),
+				y2: E(e),
+				className: t === 0 ? "select-chart__axis" : "select-chart__grid"
+			}), /* @__PURE__ */ a("text", {
+				x: _.left - 8,
+				y: E(e),
+				className: "select-chart__ylabel",
+				dominantBaseline: "middle",
+				textAnchor: "end",
+				children: l(e)
+			})] }, t)), s.map((e, t) => {
+				let n = _.left + O * t + O / 2, r = e.close >= e.open, i = r ? u : d, s = E(Math.max(e.open, e.close)), f = Math.max(1, Math.abs(E(e.open) - E(e.close)));
+				return /* @__PURE__ */ o("g", { children: [
+					/* @__PURE__ */ a("line", {
+						x1: n,
+						x2: n,
+						y1: E(e.high),
+						y2: E(e.low),
+						stroke: i,
+						strokeWidth: 1.5
+					}),
+					/* @__PURE__ */ a("rect", {
+						x: n - k / 2,
+						y: s,
+						width: k,
+						height: f,
+						rx: 2,
+						fill: i,
+						fillOpacity: r ? .9 : .78
+					}),
+					/* @__PURE__ */ a("text", {
+						x: n,
+						y: c - _.bottom + 16,
+						className: "select-chart__xlabel",
+						textAnchor: "middle",
+						children: e.label
+					}),
+					/* @__PURE__ */ a("rect", {
+						x: _.left + O * t,
+						y: _.top,
+						width: O,
+						height: y,
+						fill: "transparent",
+						onMouseEnter: () => g.show({
+							x: n,
+							y: E(e.high),
+							place: E(e.high) < _.top + 64 ? "bottom" : "top",
+							title: e.label,
+							rows: [
+								{
+									label: "Abertura",
+									value: l(e.open),
+									color: i
+								},
+								{
+									label: "Máxima",
+									value: l(e.high)
+								},
+								{
+									label: "Mínima",
+									value: l(e.low)
+								},
+								{
+									label: "Fechamento",
+									value: l(e.close)
+								}
+							]
+						}),
+						onMouseLeave: g.hide
+					})
+				] }, t);
+			})]
+		}), /* @__PURE__ */ a(r, { tip: g.tip })]
+	});
+}
+//#endregion
+export { s as SelectCandlestick };
+
+//# sourceMappingURL=SelectCandlestick.js.map

package/dist/SelectCard.js

@@ -0,0 +1,52 @@
+/* empty css           */
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SelectCard.tsx
+var r = e(function({ title: e, subtitle: r, logo: i, mark: a, banner: o, children: s, footer: c, className: l, ...u }, d) {
+	return /* @__PURE__ */ n("div", {
+		ref: d,
+		...u,
+		className: `select-card${l ? " " + l : ""}`,
+		children: [
+			o && /* @__PURE__ */ t("div", {
+				className: "select-card__banner",
+				children: o
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "select-card__body",
+				children: [
+					i && /* @__PURE__ */ t("div", {
+						className: "select-card__brand",
+						children: i
+					}),
+					/* @__PURE__ */ n("div", {
+						className: "select-card__header",
+						children: [
+							a && /* @__PURE__ */ t("div", {
+								className: "select-card__mark",
+								children: a
+							}),
+							/* @__PURE__ */ t("h1", {
+								className: "select-card__title",
+								children: e
+							}),
+							r && /* @__PURE__ */ t("p", {
+								className: "select-card__subtitle",
+								children: r
+							})
+						]
+					}),
+					s
+				]
+			}),
+			c && /* @__PURE__ */ t("div", {
+				className: "select-card__footer",
+				children: c
+			})
+		]
+	});
+});
+//#endregion
+export { r as SelectCard };
+
+//# sourceMappingURL=SelectCard.js.map

package/dist/SelectCardGrid.js

@@ -0,0 +1,76 @@
+import { SelectListChrome as e, SelectListFooter as t, listChromeShape as n } from "./internal/listChrome.js";
+import { SelectTableEmpty as r } from "./SelectTable.js";
+import { SelectAddCard as i } from "./SelectAddCard.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/SelectCardGrid.tsx
+function s({ items: s, getId: c, renderItem: l, loading: u = !1, skeletonCount: d = 6, empty: f, pagination: p, create: m, minCardWidth: h = "16rem", skeletonCover: g = !1, title: _, help: v, description: y, action: b, filters: x, tools: S }) {
+	let C = !u && s.length === 0 && f != null, { hasTitleRow: w, hasFilters: T } = n({
+		title: _,
+		description: y,
+		action: b,
+		filters: x,
+		tools: S
+	});
+	return /* @__PURE__ */ o("div", {
+		className: "select-cardgrid",
+		children: [
+			(w || T) && /* @__PURE__ */ a("div", {
+				className: "select-cardgrid__chrome",
+				children: /* @__PURE__ */ a(e, {
+					title: _,
+					help: v,
+					description: y,
+					action: b,
+					filters: x,
+					tools: S
+				})
+			}),
+			C ? /* @__PURE__ */ a("div", {
+				className: "select-cardgrid__empty",
+				children: /* @__PURE__ */ a(r, {
+					icon: f.icon,
+					title: f.heading,
+					subtitle: f.text,
+					action: f.action
+				})
+			}) : /* @__PURE__ */ o("div", {
+				className: "select-cardgrid__body",
+				style: { "--select-cardgrid-min": h },
+				children: [u ? Array.from({ length: d }, (e, t) => g ? /* @__PURE__ */ o("div", {
+					className: "select-cardgrid__skel select-cardgrid__skel--cover",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ a("span", { className: "select-skeleton select-cardgrid__skelcover" }),
+						/* @__PURE__ */ o("span", {
+							className: "select-cardgrid__skeltext select-cardgrid__skeltext--padded",
+							children: [/* @__PURE__ */ a("span", { className: "select-skeleton select-cardgrid__skelline" }), /* @__PURE__ */ a("span", { className: "select-skeleton select-cardgrid__skelline select-cardgrid__skelline--short" })]
+						}),
+						/* @__PURE__ */ o("span", {
+							className: "select-cardgrid__skelfoot",
+							children: [/* @__PURE__ */ a("span", { className: "select-skeleton select-cardgrid__skelline select-cardgrid__skelline--tiny" }), /* @__PURE__ */ a("span", { className: "select-skeleton select-cardgrid__skelline select-cardgrid__skelline--tiny" })]
+						})
+					]
+				}, `skeleton-${t}`) : /* @__PURE__ */ o("div", {
+					className: "select-cardgrid__skel",
+					children: [/* @__PURE__ */ a("span", { className: "select-skeleton select-cardgrid__skelthumb" }), /* @__PURE__ */ o("span", {
+						className: "select-cardgrid__skeltext",
+						children: [/* @__PURE__ */ a("span", { className: "select-skeleton select-cardgrid__skelline" }), /* @__PURE__ */ a("span", { className: "select-skeleton select-cardgrid__skelline select-cardgrid__skelline--short" })]
+					})]
+				}, `skeleton-${t}`)) : s.map((e) => /* @__PURE__ */ a("div", {
+					className: "select-cardgrid__item",
+					children: l(e)
+				}, c(e))), !u && m && /* @__PURE__ */ a(i, {
+					label: m.label,
+					description: m.description,
+					onClick: m.onAction,
+					disabled: m.disabled
+				})]
+			}),
+			p && /* @__PURE__ */ a(t, { pagination: p })
+		]
+	});
+}
+//#endregion
+export { s as SelectCardGrid };
+
+//# sourceMappingURL=SelectCardGrid.js.map

package/dist/SelectCertificatePreview.js

@@ -0,0 +1,108 @@
+/* empty css           */
+import { forwardRef as e, useEffect as t, useRef as n, useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/SelectCertificatePreview.tsx
+var s = 960, c = Math.round(s * 210 / 297), l = e(function({ side: e = "front", accent: l, courseTitle: u, subtitle: d, memberName: f = "Nome do aluno", body: p, signatures: m = [], issuedAt: h, verificationCode: g, eyebrow: _, className: v }, y) {
+	let b = n(null), [x, S] = r(.5);
+	t(() => {
+		let e = b.current;
+		if (!e) return;
+		let t = () => {
+			let t = e.clientWidth;
+			t > 0 && S(Math.min(1, t / s));
+		};
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []);
+	let C = e === "front", w = {
+		"--select-cert-accent": l || void 0,
+		height: c * x + 2
+	};
+	return /* @__PURE__ */ a("div", {
+		ref: (e) => {
+			b.current = e, typeof y == "function" ? y(e) : y && (y.current = e);
+		},
+		className: `select-certpreview${v ? " " + v : ""}`,
+		style: w,
+		role: "img",
+		"aria-label": C ? "Prévia da frente do certificado" : "Prévia do verso do certificado",
+		children: /* @__PURE__ */ a("div", {
+			className: "select-certpreview__sheet",
+			style: {
+				width: s,
+				height: c,
+				transform: `scale(${x})`
+			},
+			children: /* @__PURE__ */ o("div", {
+				className: "select-certpreview__frame",
+				children: [
+					/* @__PURE__ */ a("div", {
+						className: "select-certpreview__eyebrow",
+						children: _ ?? (C ? "Certificado de conclusão" : "Verso")
+					}),
+					C && /* @__PURE__ */ o(i, { children: [
+						/* @__PURE__ */ a("div", {
+							className: "select-certpreview__title",
+							children: u
+						}),
+						d ? /* @__PURE__ */ a("div", {
+							className: "select-certpreview__subtitle",
+							children: d
+						}) : null,
+						/* @__PURE__ */ o("div", {
+							className: "select-certpreview__awardee",
+							children: [/* @__PURE__ */ a("span", {
+								className: "select-certpreview__label",
+								children: "Certificamos que"
+							}), /* @__PURE__ */ a("strong", { children: f })]
+						})
+					] }),
+					p ? /* @__PURE__ */ a("p", {
+						className: "select-certpreview__body",
+						children: p
+					}) : null,
+					m.length > 0 && /* @__PURE__ */ a("div", {
+						className: "select-certpreview__signs",
+						children: m.map((e, t) => /* @__PURE__ */ o("div", {
+							className: "select-certpreview__sign",
+							children: [
+								e.imageUrl ? /* @__PURE__ */ a("img", {
+									className: "select-certpreview__signimg",
+									src: e.imageUrl,
+									alt: ""
+								}) : /* @__PURE__ */ a("span", { className: "select-certpreview__signimg" }),
+								/* @__PURE__ */ a("span", { className: "select-certpreview__rule" }),
+								/* @__PURE__ */ a("span", {
+									className: "select-certpreview__signname",
+									children: e.name
+								}),
+								e.role ? /* @__PURE__ */ a("span", {
+									className: "select-certpreview__signrole",
+									children: e.role
+								}) : null
+							]
+						}, t))
+					}),
+					C && /* @__PURE__ */ o("div", {
+						className: "select-certpreview__foot",
+						children: [/* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("span", {
+							className: "select-certpreview__label",
+							children: "Emitido em"
+						}), /* @__PURE__ */ a("div", { children: h ?? "—" })] }), /* @__PURE__ */ o("div", {
+							className: "select-certpreview__code",
+							children: [/* @__PURE__ */ a("span", {
+								className: "select-certpreview__label",
+								children: "Código de verificação"
+							}), /* @__PURE__ */ a("code", { children: g ?? "—" })]
+						})]
+					})
+				]
+			})
+		})
+	});
+});
+//#endregion
+export { l as SelectCertificatePreview };
+
+//# sourceMappingURL=SelectCertificatePreview.js.map

package/dist/SelectChannelPreview.js

@@ -0,0 +1,124 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/SelectChannelPreview.tsx
+function o({ children: e }) {
+	return /* @__PURE__ */ i("div", {
+		className: "select-previewstage",
+		children: e
+	});
+}
+function s(e) {
+	var t, n;
+	let r = e.trim().split(/\s+/).filter(Boolean);
+	return (r.length > 1 ? (((t = r[0]) == null ? void 0 : t[0]) ?? "") + (((n = r[1]) == null ? void 0 : n[0]) ?? "") : e.slice(0, 2)).toUpperCase();
+}
+function c({ variant: e, title: t, subtitle: n, children: r }) {
+	return /* @__PURE__ */ a("div", {
+		className: `select-device select-device--${e}`,
+		children: [/* @__PURE__ */ a("div", {
+			className: "select-device__head",
+			children: [/* @__PURE__ */ i("span", {
+				className: "select-device__avatar",
+				"aria-hidden": "true",
+				children: e === "whatsapp" && t ? s(t) : null
+			}), (t || n) && /* @__PURE__ */ a("span", {
+				className: "select-device__who",
+				children: [t && /* @__PURE__ */ i("span", {
+					className: "select-device__name",
+					children: t
+				}), n && /* @__PURE__ */ i("span", {
+					className: "select-device__sub",
+					children: n
+				})]
+			})]
+		}), /* @__PURE__ */ i("div", {
+			className: "select-device__body",
+			children: r
+		})]
+	});
+}
+function l({ variant: e, media: t, buttons: n, empty: r = !1, backdrop: o = !1, children: s }) {
+	let c = /* @__PURE__ */ a("div", {
+		className: `select-bubble select-bubble--${e}`,
+		children: [
+			t != null && t !== "" && /* @__PURE__ */ i("div", {
+				className: "select-bubble__media",
+				children: t
+			}),
+			r ? /* @__PURE__ */ i("span", {
+				className: "select-bubble__empty",
+				children: s
+			}) : s,
+			n && n.length > 0 && /* @__PURE__ */ i("span", {
+				className: "select-bubble__buttons",
+				children: n.map((e, t) => /* @__PURE__ */ i("span", {
+					className: "select-bubble__button",
+					children: e
+				}, t))
+			})
+		]
+	});
+	return o ? /* @__PURE__ */ i("div", {
+		className: "select-chatbg",
+		children: c
+	}) : c;
+}
+function u({ from: e, subject: t, emptySubject: n = "Sem assunto", device: o = "desktop", srcDoc: s, loading: c = !1, frameTitle: l = "O e-mail" }) {
+	let u = t != null && t !== "" && t !== !1;
+	return /* @__PURE__ */ a("div", {
+		className: `select-mailpreview${o === "mobile" ? " select-mailpreview--mobile" : ""}`,
+		children: [/* @__PURE__ */ a("div", {
+			className: "select-mailpreview__head",
+			children: [((e == null ? void 0 : e.name) || (e == null ? void 0 : e.email)) && /* @__PURE__ */ a("span", {
+				className: "select-mailpreview__from",
+				children: [
+					e.name && /* @__PURE__ */ i("b", { children: e.name }),
+					" ",
+					e.email && /* @__PURE__ */ a(r, { children: [
+						"<",
+						e.email,
+						">"
+					] })
+				]
+			}), /* @__PURE__ */ i("span", {
+				className: `select-mailpreview__subject${u ? "" : " select-mailpreview__subject--empty"}`,
+				children: u ? t : n
+			})]
+		}), c ? /* @__PURE__ */ i("span", { className: "select-skeleton select-mailpreview__loading" }) : s == null ? null : /* @__PURE__ */ i(d, {
+			srcDoc: s,
+			title: l
+		})]
+	});
+}
+function d({ srcDoc: r, title: a }) {
+	let o = t(null), [s, c] = n(null), l = t(null);
+	e(() => () => {
+		var e;
+		return (e = l.current) == null ? void 0 : e.disconnect();
+	}, []);
+	let u = () => {
+		var e, t;
+		let n = (e = o.current) == null ? void 0 : e.contentDocument;
+		if (!(n != null && n.documentElement)) return;
+		let r = Math.max(n.documentElement.scrollHeight, ((t = n.body) == null ? void 0 : t.scrollHeight) ?? 0);
+		r > 0 && c(r);
+	};
+	return /* @__PURE__ */ i("iframe", {
+		ref: o,
+		className: "select-mailpreview__frame",
+		sandbox: "allow-same-origin",
+		title: a,
+		srcDoc: r,
+		style: s ? { height: s } : void 0,
+		onLoad: () => {
+			var e, t;
+			u(), (e = l.current) == null || e.disconnect();
+			let n = (t = o.current) == null || (t = t.contentDocument) == null ? void 0 : t.body;
+			n && typeof ResizeObserver < "u" && (l.current = new ResizeObserver(() => u()), l.current.observe(n));
+		}
+	});
+}
+//#endregion
+export { c as SelectDeviceFrame, u as SelectMailPreview, l as SelectMessageBubble, o as SelectPreviewStage };
+
+//# sourceMappingURL=SelectChannelPreview.js.map

package/dist/SelectChartCard.js

@@ -0,0 +1,50 @@
+/* empty css           */
+import { SelectInfoTip as e } from "./SelectInfoTip.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/SelectChartCard.tsx
+var i = t(function({ title: t, caption: i, action: a, help: o, loading: s = !1, hideValues: c = !1, height: l = 260, flush: u = !1, insight: d, insightTone: f = "neutral", children: p, className: m, ...h }, g) {
+	let _ = l === "auto" ? void 0 : `${l / 16}rem`, v = l === "auto" ? "10rem" : `${l / 16}rem`;
+	return /* @__PURE__ */ r("div", {
+		ref: g,
+		...h,
+		className: `select-chartcard${m ? " " + m : ""}`,
+		children: [
+			(t || a || i) && /* @__PURE__ */ r("div", {
+				className: "select-chartcard__head",
+				children: [/* @__PURE__ */ r("div", {
+					className: "select-chartcard__heading",
+					children: [t && /* @__PURE__ */ r("h3", {
+						className: `select-chartcard__title${o == null ? "" : " select-chartcard__title--help"}`,
+						children: [t, o != null && /* @__PURE__ */ n(e, { content: o })]
+					}), i && /* @__PURE__ */ n("p", {
+						className: "select-chartcard__caption",
+						children: i
+					})]
+				}), a && /* @__PURE__ */ n("div", {
+					className: "select-chartcard__action",
+					children: a
+				})]
+			}),
+			/* @__PURE__ */ n("div", {
+				className: `select-chartcard__body${u ? " select-chartcard__body--flush" : ""}${c ? " is-blurred" : ""}`,
+				style: { minHeight: _ },
+				children: s ? /* @__PURE__ */ n("div", {
+					className: "select-skeleton select-chartcard__skeleton",
+					style: { height: v }
+				}) : p
+			}),
+			d != null && !s && /* @__PURE__ */ n("div", {
+				className: `select-chartcard__insight select-chartcard__insight--${f}`,
+				children: (Array.isArray(d) ? d : [d]).filter((e) => e != null).map((e, t) => /* @__PURE__ */ n("span", {
+					className: "select-chartcard__insightpill",
+					children: e
+				}, t))
+			})
+		]
+	});
+});
+//#endregion
+export { i as SelectChartCard };
+
+//# sourceMappingURL=SelectChartCard.js.map

package/dist/SelectChartLegend.js

@@ -0,0 +1,34 @@
+/* empty css           */
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/SelectChartLegend.tsx
+function n({ items: n, className: r, ...i }) {
+	return /* @__PURE__ */ e("div", {
+		...i,
+		className: `select-chartlegend${r ? " " + r : ""}`,
+		children: /* @__PURE__ */ e("ul", {
+			className: "select-chartlegend__row",
+			children: n.map((n, r) => /* @__PURE__ */ t("li", {
+				className: "select-chartlegend__item",
+				children: [/* @__PURE__ */ t("span", {
+					className: "select-chartlegend__label",
+					children: [n.icon ? /* @__PURE__ */ e("span", {
+						className: "select-chartlegend__icon",
+						"aria-hidden": "true",
+						children: n.icon
+					}) : /* @__PURE__ */ e("span", {
+						className: `select-chartlegend__swatch${n.pattern === "hatch" ? " select-chartlegend__swatch--hatch" : ""}${n.line ? ` select-chartlegend__swatch--line select-chartlegend__swatch--${n.line}` : ""}`,
+						style: { "--swatch": n.color ?? "var(--select-chart-1)" },
+						"aria-hidden": "true"
+					}), n.label]
+				}), n.value != null && /* @__PURE__ */ e("span", {
+					className: "select-chartlegend__value",
+					children: n.value
+				})]
+			}, r))
+		})
+	});
+}
+//#endregion
+export { n as SelectChartLegend };
+
+//# sourceMappingURL=SelectChartLegend.js.map

package/dist/SelectChipInput.js

@@ -0,0 +1,110 @@
+/* empty css           */
+import { useSelectMessages as e } from "./SelectLocale.js";
+import { forwardRef as t, useId as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/SelectChipInput.tsx
+var s = /[\s,;]+/, c = t(function({ label: t, value: c, onChange: l, placeholder: u, hint: d, error: f, disabled: p = !1, max: m, validate: h, mono: g = !1, ariaLabel: _, className: v, ...y }, b) {
+	let x = e(), S = n(), C = n(), w = r(null), [T, E] = i(""), [D, O] = i(void 0), k = m != null && c.length >= m, A = (e) => {
+		let t = e.split(s).map((e) => e.trim()).filter(Boolean);
+		if (t.length === 0) {
+			E(""), O(void 0);
+			return;
+		}
+		let n = [...c];
+		for (let e = 0; e < t.length; e++) {
+			let r = t[e];
+			if (n.includes(r)) continue;
+			if (m != null && n.length >= m) break;
+			let i = h == null ? void 0 : h(r);
+			if (i) {
+				n.length !== c.length && l(n), E(t.slice(e).join(" ")), O(i);
+				return;
+			}
+			n.push(r);
+		}
+		n.length !== c.length && l(n), E(""), O(void 0);
+	}, j = (e) => {
+		e.key === "Enter" || e.key === "," || e.key === ";" || e.key === " " ? T.trim() ? (e.preventDefault(), A(T)) : e.key !== "Enter" && e.preventDefault() : e.key === "Backspace" && T === "" && c.length > 0 && l(c.slice(0, -1));
+	}, M = (e) => {
+		var t;
+		l(c.filter((t) => t !== e)), (t = w.current) == null || t.focus();
+	}, N = D ?? f, P = k && m != null ? x.chipInput.limit(String(m)) : d;
+	return /* @__PURE__ */ o("div", {
+		ref: b,
+		...y,
+		className: `select-field select-chipinput-field${v ? " " + v : ""}`,
+		children: [
+			t != null && /* @__PURE__ */ a("div", {
+				className: "select-field__labelrow",
+				children: /* @__PURE__ */ a("label", {
+					className: "select-field__label",
+					htmlFor: S,
+					children: t
+				})
+			}),
+			/* @__PURE__ */ o("div", {
+				className: `select-chipinput${N ? " select-chipinput--error" : ""}${p ? " select-chipinput--disabled" : ""}`,
+				onClick: () => {
+					var e;
+					return (e = w.current) == null ? void 0 : e.focus();
+				},
+				children: [c.map((e) => /* @__PURE__ */ o("span", {
+					className: `select-chipinput__chip${g ? " select-chipinput__chip--mono" : ""}`,
+					children: [e, !p && /* @__PURE__ */ a("button", {
+						type: "button",
+						className: "select-chipinput__remove",
+						"aria-label": x.common.remove(e),
+						onClick: (t) => {
+							t.stopPropagation(), M(e);
+						},
+						children: /* @__PURE__ */ a("svg", {
+							viewBox: "0 0 24 24",
+							width: "12",
+							height: "12",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ a("path", { d: "M7 7l10 10M17 7 7 17" })
+						})
+					})]
+				}, e)), /* @__PURE__ */ a("input", {
+					ref: w,
+					id: S,
+					className: `select-chipinput__input${g ? " select-chipinput__input--mono" : ""}`,
+					value: T,
+					placeholder: k ? "" : u,
+					disabled: p || k,
+					"aria-label": t == null ? _ : void 0,
+					"aria-invalid": N ? !0 : void 0,
+					"aria-describedby": N || P ? C : void 0,
+					onChange: (e) => {
+						E(e.target.value), D && O(void 0);
+					},
+					onKeyDown: j,
+					onBlur: () => T.trim() && A(T),
+					onPaste: (e) => {
+						let t = e.clipboardData.getData("text");
+						s.test(t.trim()) && (e.preventDefault(), A(`${T} ${t}`));
+					},
+					autoComplete: "off",
+					spellCheck: !1
+				})]
+			}),
+			N ? /* @__PURE__ */ a("p", {
+				className: "select-field__error",
+				id: C,
+				children: N
+			}) : P == null ? null : /* @__PURE__ */ a("p", {
+				className: "select-field__hint",
+				id: C,
+				children: P
+			})
+		]
+	});
+});
+//#endregion
+export { c as SelectChipInput };
+
+//# sourceMappingURL=SelectChipInput.js.map