@forte-ui/react 1.0.0-alpha.1

package/dist/NavigationMenu-BayQkUUb.js

@@ -0,0 +1,209 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { NavigationMenu as i } from "@base-ui/react/navigation-menu";
+import './styles/NavigationMenu.css';var a = {
+	root: "_root_1qbn7_7",
+	list: "_list_1qbn7_103",
+	item: "_item_1qbn7_128",
+	trigger: "_trigger_1qbn7_56",
+	link: "_link_1qbn7_144",
+	linkTitle: "_linkTitle_1qbn7_261",
+	linkDescription: "_linkDescription_1qbn7_268",
+	icon: "_icon_1qbn7_292",
+	backdrop: "_backdrop_1qbn7_340",
+	positioner: "_positioner_1qbn7_375",
+	popup: "_popup_1qbn7_8",
+	arrow: "_arrow_1qbn7_527",
+	arrowSvg: "_arrowSvg_1qbn7_738",
+	arrowFill: "_arrowFill_1qbn7_745",
+	arrowBorder: "_arrowBorder_1qbn7_755",
+	viewport: "_viewport_1qbn7_772",
+	content: "_content_1qbn7_465"
+}, o = t.createContext("horizontal");
+function s(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		style: {
+			display: "block",
+			...e.style
+		},
+		children: /* @__PURE__ */ n("path", { d: "m3.5 6 4.5 4.5L12.5 6" })
+	});
+}
+function c(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		style: {
+			display: "block",
+			...e.style
+		},
+		children: /* @__PURE__ */ n("path", { d: "m6 3.5 4.5 4.5L6 12.5" })
+	});
+}
+function l({ children: t, orientation: r = "horizontal", className: s, ...c }) {
+	return /* @__PURE__ */ n(o.Provider, {
+		value: r,
+		children: /* @__PURE__ */ n(i.Root, {
+			className: e(a.root, s),
+			"data-forte": "navigation-menu",
+			"data-orientation": r,
+			orientation: r,
+			...c,
+			children: t
+		})
+	});
+}
+var u = t.forwardRef(function({ children: r, className: s, ...c }, l) {
+	let u = t.useContext(o);
+	return /* @__PURE__ */ n(i.List, {
+		ref: l,
+		className: e(a.list, s),
+		"data-forte": "navigation-menu-list",
+		"data-orientation": u,
+		...c,
+		children: r
+	});
+}), d = t.forwardRef(function({ children: t, className: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.Item, {
+		ref: s,
+		className: e(a.item, r),
+		"data-forte": "navigation-menu-item",
+		...o,
+		children: t
+	});
+}), f = t.forwardRef(function({ children: t, className: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.Icon, {
+		ref: s,
+		className: e(a.icon, r),
+		"data-forte": "navigation-menu-icon",
+		...o,
+		children: t
+	});
+}), p = t.forwardRef(function({ children: t, variant: o = "plain", icon: l, className: u, ...d }, p) {
+	return /* @__PURE__ */ r(i.Trigger, {
+		ref: p,
+		className: e(a.trigger, "forte-focus-ring", u),
+		"data-forte": "navigation-menu-trigger",
+		"data-variant": o,
+		...d,
+		children: [t, l === !1 ? null : /* @__PURE__ */ n(f, { children: l ?? n(o === "card" ? c : s, {}) })]
+	});
+}), m = t.forwardRef(function({ children: t, columns: r = 1, className: o, ...s }, c) {
+	return /* @__PURE__ */ n(i.Content, {
+		ref: c,
+		className: e(a.content, o),
+		"data-forte": "navigation-menu-content",
+		"data-columns": r,
+		...s,
+		children: t
+	});
+}), h = t.forwardRef(function({ children: t, variant: r = "card", className: o, ...s }, c) {
+	return /* @__PURE__ */ n(i.Link, {
+		ref: c,
+		className: e(a.link, "forte-focus-ring", o),
+		"data-forte": "navigation-menu-link",
+		"data-variant": r,
+		"data-focus-inset": "",
+		...s,
+		children: t
+	});
+}), g = t.forwardRef(function({ className: t, ...r }, i) {
+	return /* @__PURE__ */ n("span", {
+		ref: i,
+		className: e(a.linkTitle, t),
+		"data-forte": "navigation-menu-link-title",
+		...r
+	});
+}), _ = t.forwardRef(function({ className: t, ...r }, i) {
+	return /* @__PURE__ */ n("span", {
+		ref: i,
+		className: e(a.linkDescription, t),
+		"data-forte": "navigation-menu-link-description",
+		...r
+	});
+}), v = t.forwardRef(function({ side: t = "bottom", align: o = "center", sideOffset: s = 8, alignOffset: c, collisionPadding: l = 8, collisionAvoidance: u, anchor: d, container: f, keepMounted: p, backdrop: m = !1, arrow: h = !1, className: g, positionerClassName: _, ...v }, b) {
+	return /* @__PURE__ */ r(i.Portal, {
+		container: f,
+		keepMounted: p,
+		children: [m ? /* @__PURE__ */ n(i.Backdrop, {
+			className: e(a.backdrop, "forte-scrim"),
+			"data-forte": "navigation-menu-backdrop"
+		}) : null, /* @__PURE__ */ n(i.Positioner, {
+			className: e(a.positioner, _),
+			"data-forte": "navigation-menu-positioner",
+			side: t,
+			align: o,
+			sideOffset: s,
+			alignOffset: c,
+			collisionPadding: l,
+			collisionAvoidance: u,
+			anchor: d,
+			children: /* @__PURE__ */ r(i.Popup, {
+				ref: b,
+				className: e(a.popup, "forte-hc-surface", g),
+				"data-forte": "navigation-menu-popup",
+				...v,
+				children: [h ? /* @__PURE__ */ n(i.Arrow, {
+					className: a.arrow,
+					"data-forte": "navigation-menu-arrow",
+					children: /* @__PURE__ */ n(y, {})
+				}) : null, /* @__PURE__ */ n(i.Viewport, {
+					className: a.viewport,
+					"data-forte": "navigation-menu-viewport"
+				})]
+			})
+		})]
+	});
+});
+function y() {
+	return /* @__PURE__ */ r("svg", {
+		className: a.arrowSvg,
+		viewBox: "0 0 20 10",
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ n("path", {
+			className: a.arrowBorder,
+			d: "M0 10 L10 0 L20 10 Z"
+		}), /* @__PURE__ */ n("path", {
+			className: a.arrowFill,
+			d: "M2.12 10 L10 2.12 L17.88 10 Z"
+		})]
+	});
+}
+var b = {
+	Root: l,
+	List: u,
+	Item: d,
+	Trigger: p,
+	Icon: f,
+	Content: m,
+	Link: h,
+	LinkTitle: g,
+	LinkDescription: _,
+	Popup: v
+};
+//#endregion
+export { h as a, u as c, p as d, d as i, v as l, m as n, _ as o, f as r, g as s, b as t, l as u };

package/dist/NumberField-P55SA8T7.js

@@ -0,0 +1,191 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { NumberField as i } from "@base-ui/react/number-field";
+import './styles/NumberField.css';var a = {
+	root: "_root_1vkac_49",
+	group: "_group_1vkac_11",
+	stepper: "_stepper_1vkac_14",
+	input: "_input_1vkac_13",
+	scrubArea: "_scrubArea_1vkac_15",
+	scrubGrip: "_scrubGrip_1vkac_530",
+	scrubAreaCursor: "_scrubAreaCursor_1vkac_16"
+}, o = typeof process < "u" && process.env.NODE_ENV !== "production";
+function s(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		style: {
+			display: "block",
+			...e.style
+		},
+		children: /* @__PURE__ */ n("path", { d: "M4 8h8" })
+	});
+}
+function c(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		style: {
+			display: "block",
+			...e.style
+		},
+		children: /* @__PURE__ */ n("path", { d: "M8 4v8M4 8h8" })
+	});
+}
+function l(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		children: /* @__PURE__ */ n("path", { d: "M3.5 8h9M6 5.5 3.5 8 6 10.5M10 5.5 12.5 8 10 10.5" })
+	});
+}
+function u(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "26",
+		height: "14",
+		viewBox: "0 0 26 14",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		children: /* @__PURE__ */ n("path", { d: "M3 7 8.5 3v2.5h9V3L23 7l-5.5 4V8.5h-9V11Z" })
+	});
+}
+var d = t.createContext({
+	size: "md",
+	variant: "outline"
+}), f = t.createContext({ direction: "horizontal" }), p = t.forwardRef(function({ size: r = "md", variant: o = "outline", className: s, ...c }, l) {
+	let u = t.useMemo(() => ({
+		size: r,
+		variant: o
+	}), [r, o]);
+	return /* @__PURE__ */ n(d.Provider, {
+		value: u,
+		children: /* @__PURE__ */ n(i.Root, {
+			ref: l,
+			className: e(a.root, s),
+			"data-forte": "number-field",
+			"data-size": r,
+			"data-variant": o,
+			...c
+		})
+	});
+}), m = t.forwardRef(function({ fullWidth: r = !1, className: o, ...s }, c) {
+	let { size: l, variant: u } = t.useContext(d);
+	return /* @__PURE__ */ n(i.Group, {
+		ref: c,
+		className: e(a.group, "forte-focus-ring-within", o),
+		"data-forte": "number-field-group",
+		"data-size": l,
+		"data-variant": u,
+		"data-full-width": r || void 0,
+		...s
+	});
+}), h = t.forwardRef(function({ className: r, ...o }, s) {
+	let { size: c, variant: l } = t.useContext(d);
+	return /* @__PURE__ */ n(i.Input, {
+		ref: s,
+		className: e(a.input, r),
+		"data-forte": "number-field-input",
+		"data-size": c,
+		"data-variant": l,
+		...o
+	});
+});
+function g(t) {
+	return e(a.stepper, "forte-focus-ring", "forte-target", t);
+}
+var _ = t.forwardRef(function({ className: e, children: r, ...a }, o) {
+	let { size: s, variant: l } = t.useContext(d);
+	return /* @__PURE__ */ n(i.Increment, {
+		ref: o,
+		className: g(e),
+		"data-forte": "number-field-increment",
+		"data-size": s,
+		"data-variant": l,
+		"data-focus-inset": "",
+		...a,
+		children: r ?? /* @__PURE__ */ n(c, {})
+	});
+}), v = t.forwardRef(function({ className: e, children: r, ...a }, o) {
+	let { size: c, variant: l } = t.useContext(d);
+	return /* @__PURE__ */ n(i.Decrement, {
+		ref: o,
+		className: g(e),
+		"data-forte": "number-field-decrement",
+		"data-size": c,
+		"data-variant": l,
+		"data-focus-inset": "",
+		...a,
+		children: r ?? /* @__PURE__ */ n(s, {})
+	});
+}), y = t.forwardRef(function({ direction: s = "horizontal", grip: c = !0, cursor: u = !0, className: p, children: m, ...h }, g) {
+	let { size: _, variant: v } = t.useContext(d), y = t.useMemo(() => ({ direction: s }), [s]);
+	return o && u && t.Children.toArray(m).some((e) => t.isValidElement(e) && e.type === b) && console.warn("[forte-ui] NumberField.ScrubArea renders its own ScrubAreaCursor by default. Pass `cursor={false}` alongside your own, or drop yours."), /* @__PURE__ */ n(f.Provider, {
+		value: y,
+		children: /* @__PURE__ */ r(i.ScrubArea, {
+			ref: g,
+			direction: s,
+			className: e(a.scrubArea, p),
+			"data-forte": "number-field-scrub-area",
+			"data-size": _,
+			"data-variant": v,
+			"data-direction": s,
+			...h,
+			children: [
+				m,
+				c ? /* @__PURE__ */ n(l, {
+					className: a.scrubGrip,
+					"data-forte": "number-field-scrub-grip"
+				}) : null,
+				u ? /* @__PURE__ */ n(b, {}) : null
+			]
+		})
+	});
+}), b = t.forwardRef(function({ className: r, children: o, ...s }, c) {
+	let { direction: l } = t.useContext(f);
+	return /* @__PURE__ */ n(i.ScrubAreaCursor, {
+		ref: c,
+		className: e(a.scrubAreaCursor, r),
+		"data-forte": "number-field-scrub-area-cursor",
+		"data-direction": l,
+		...s,
+		children: o ?? /* @__PURE__ */ n(u, {})
+	});
+}), x = {
+	Root: p,
+	Group: m,
+	Input: h,
+	Increment: _,
+	Decrement: v,
+	ScrubArea: y,
+	ScrubAreaCursor: b
+};
+//#endregion
+export { h as a, b as c, _ as i, v as n, p as o, m as r, y as s, x as t };

package/dist/OTPField-CjHvBNSN.js

@@ -0,0 +1,55 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import { t } from "./Separator-DewJBzaJ.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { OTPField as i } from "@base-ui/react/otp-field";
+import './styles/OTPField.css';var a = {
+	root: "_root_1s7w2_17",
+	input: "_input_1s7w2_96",
+	separator: "_separator_1s7w2_20"
+}, o = n.createContext({
+	size: "md",
+	variant: "outline"
+}), s = n.forwardRef(function({ size: t = "md", variant: s = "outline", className: l, children: u, length: d, ...f }, p) {
+	let m = n.useMemo(() => ({
+		size: t,
+		variant: s
+	}), [t, s]);
+	return /* @__PURE__ */ r(o.Provider, {
+		value: m,
+		children: /* @__PURE__ */ r(i.Root, {
+			ref: p,
+			length: d,
+			className: e(a.root, l),
+			"data-forte": "otp-field",
+			"data-size": t,
+			"data-variant": s,
+			...f,
+			children: u ?? Array.from({ length: d }, (e, t) => /* @__PURE__ */ r(c, {}, t))
+		})
+	});
+}), c = n.forwardRef(function({ className: t, ...s }, c) {
+	let { size: l, variant: u } = n.useContext(o);
+	return /* @__PURE__ */ r(i.Input, {
+		ref: c,
+		className: e(a.input, "forte-focus-ring", t),
+		"data-forte": "otp-field-input",
+		"data-size": l,
+		"data-variant": u,
+		...s
+	});
+}), l = n.forwardRef(function({ className: n, decorative: i = !0, ...o }, s) {
+	return /* @__PURE__ */ r(t, {
+		ref: s,
+		decorative: i,
+		className: e(a.separator, n),
+		...o
+	});
+}), u = {
+	Root: s,
+	Input: c,
+	Separator: l
+};
+//#endregion
+export { l as i, c as n, s as r, u as t };

package/dist/Popover-BXhn2Wwt.js

@@ -0,0 +1,142 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Popover as i } from "@base-ui/react/popover";
+import './styles/Popover.css';var a = {
+	trigger: "_trigger_no10z_75",
+	close: "_close_no10z_76",
+	backdrop: "_backdrop_no10z_144",
+	positioner: "_positioner_no10z_177",
+	popup: "_popup_no10z_187",
+	arrow: "_arrow_no10z_228",
+	arrowSvg: "_arrowSvg_no10z_455",
+	arrowFill: "_arrowFill_no10z_462",
+	arrowBorder: "_arrowBorder_no10z_472",
+	title: "_title_no10z_479",
+	description: "_description_no10z_490",
+	footer: "_footer_no10z_513",
+	viewport: "_viewport_no10z_577"
+};
+//#endregion
+//#region src/components/popover/Popover.tsx
+function o(e) {
+	return /* @__PURE__ */ n(i.Root, { ...e });
+}
+var s = t.forwardRef(function({ className: t, render: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		ref: s,
+		render: r,
+		className: e(r === void 0 && a.trigger, "forte-focus-ring", t),
+		"data-forte": "popover-trigger",
+		...o
+	});
+}), c = t.forwardRef(function({ size: t = "md", side: o = "bottom", align: s = "center", sideOffset: c = 8, alignOffset: l, arrowPadding: u, anchor: d, collisionBoundary: f, collisionPadding: p, collisionAvoidance: m, sticky: h, positionMethod: g, disableAnchorTracking: _, backdrop: v = !1, keepMounted: y, container: b, backdropClassName: x, positionerClassName: S, className: C, children: w, ...T }, E) {
+	return /* @__PURE__ */ r(i.Portal, {
+		keepMounted: y,
+		container: b,
+		children: [v ? /* @__PURE__ */ n(i.Backdrop, {
+			className: e(a.backdrop, "forte-scrim", x),
+			"data-forte": "popover-backdrop"
+		}) : null, /* @__PURE__ */ n(i.Positioner, {
+			className: e(a.positioner, S),
+			"data-forte": "popover-positioner",
+			side: o,
+			align: s,
+			sideOffset: c,
+			alignOffset: l,
+			arrowPadding: u,
+			anchor: d,
+			collisionBoundary: f,
+			collisionPadding: p,
+			collisionAvoidance: m,
+			sticky: h,
+			positionMethod: g,
+			disableAnchorTracking: _,
+			children: /* @__PURE__ */ n(i.Popup, {
+				ref: E,
+				className: e(a.popup, "forte-focus-ring", "forte-hc-surface", C),
+				"data-forte": "popover-popup",
+				"data-size": t,
+				...T,
+				children: w
+			})
+		})]
+	});
+}), l = t.forwardRef(function({ className: t, children: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.Arrow, {
+		ref: s,
+		className: e(a.arrow, t),
+		"data-forte": "popover-arrow",
+		...o,
+		children: r ?? /* @__PURE__ */ n(u, {})
+	});
+});
+function u() {
+	return /* @__PURE__ */ r("svg", {
+		className: a.arrowSvg,
+		viewBox: "0 0 20 10",
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ n("path", {
+			className: a.arrowBorder,
+			d: "M0 10 L10 0 L20 10 Z"
+		}), /* @__PURE__ */ n("path", {
+			className: a.arrowFill,
+			d: "M2.12 10 L10 2.12 L17.88 10 Z"
+		})]
+	});
+}
+var d = {
+	Root: o,
+	Trigger: s,
+	Popup: c,
+	Arrow: l,
+	Title: t.forwardRef(function({ className: t, ...r }, o) {
+		return /* @__PURE__ */ n(i.Title, {
+			ref: o,
+			className: e(a.title, t),
+			"data-forte": "popover-title",
+			...r
+		});
+	}),
+	Description: t.forwardRef(function({ className: t, ...r }, o) {
+		return /* @__PURE__ */ n(i.Description, {
+			ref: o,
+			className: e(a.description, t),
+			"data-forte": "popover-description",
+			...r
+		});
+	}),
+	Close: t.forwardRef(function({ iconOnly: t = !1, className: r, render: o, ...s }, c) {
+		return /* @__PURE__ */ n(i.Close, {
+			ref: c,
+			render: o,
+			className: e(o === void 0 && a.close, "forte-focus-ring", r),
+			"data-forte": "popover-close",
+			"data-icon-only": t || void 0,
+			...s
+		});
+	}),
+	Footer: t.forwardRef(function({ align: t = "end", className: r, ...i }, o) {
+		return /* @__PURE__ */ n("div", {
+			ref: o,
+			className: e(a.footer, r),
+			"data-forte": "popover-footer",
+			"data-align": t,
+			...i
+		});
+	}),
+	Viewport: t.forwardRef(function({ className: t, ...r }, o) {
+		return /* @__PURE__ */ n(i.Viewport, {
+			ref: o,
+			className: e(a.viewport, t),
+			"data-forte": "popover-viewport",
+			...r
+		});
+	}),
+	createHandle: i.createHandle
+};
+//#endregion
+export { d as t };

package/dist/PreviewCard-Dnitrky0.js

@@ -0,0 +1,99 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { PreviewCard as i } from "@base-ui/react/preview-card";
+import './styles/PreviewCard.css';var a = {
+	trigger: "_trigger_1j7se_81",
+	positioner: "_positioner_1j7se_129",
+	popup: "_popup_1j7se_139",
+	arrow: "_arrow_1j7se_177",
+	arrowSvg: "_arrowSvg_1j7se_413",
+	arrowFill: "_arrowFill_1j7se_420",
+	arrowBorder: "_arrowBorder_1j7se_430",
+	viewport: "_viewport_1j7se_450"
+};
+//#endregion
+//#region src/components/preview-card/PreviewCard.tsx
+function o(e) {
+	return /* @__PURE__ */ n(i.Root, { ...e });
+}
+var s = t.forwardRef(function({ className: t, render: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		ref: s,
+		render: r,
+		className: e(r === void 0 && a.trigger, "forte-focus-ring", "forte-link", t),
+		"data-forte": "preview-card-trigger",
+		...o
+	});
+}), c = t.forwardRef(function({ size: t = "md", side: r = "bottom", align: o = "center", sideOffset: s = 8, alignOffset: c, arrowPadding: l, anchor: u, collisionBoundary: d, collisionPadding: f, collisionAvoidance: p, sticky: m, positionMethod: h, disableAnchorTracking: g, keepMounted: _, container: v, positionerClassName: y, className: b, children: x, ...S }, C) {
+	return /* @__PURE__ */ n(i.Portal, {
+		keepMounted: _,
+		container: v,
+		children: /* @__PURE__ */ n(i.Positioner, {
+			className: e(a.positioner, y),
+			"data-forte": "preview-card-positioner",
+			side: r,
+			align: o,
+			sideOffset: s,
+			alignOffset: c,
+			arrowPadding: l,
+			anchor: u,
+			collisionBoundary: d,
+			collisionPadding: f,
+			collisionAvoidance: p,
+			sticky: m,
+			positionMethod: h,
+			disableAnchorTracking: g,
+			children: /* @__PURE__ */ n(i.Popup, {
+				ref: C,
+				className: e(a.popup, "forte-hc-surface", b),
+				"data-forte": "preview-card-popup",
+				"data-size": t,
+				...S,
+				children: x
+			})
+		})
+	});
+}), l = t.forwardRef(function({ className: t, children: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.Arrow, {
+		ref: s,
+		className: e(a.arrow, t),
+		"data-forte": "preview-card-arrow",
+		...o,
+		children: r ?? /* @__PURE__ */ n(u, {})
+	});
+});
+function u() {
+	return /* @__PURE__ */ r("svg", {
+		className: a.arrowSvg,
+		viewBox: "0 0 20 10",
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ n("path", {
+			className: a.arrowBorder,
+			d: "M0 10 L10 0 L20 10 Z"
+		}), /* @__PURE__ */ n("path", {
+			className: a.arrowFill,
+			d: "M2.12 10 L10 2.12 L17.88 10 Z"
+		})]
+	});
+}
+var d = {
+	Root: o,
+	Trigger: s,
+	Popup: c,
+	Arrow: l,
+	Viewport: t.forwardRef(function({ className: t, ...r }, o) {
+		return /* @__PURE__ */ n(i.Viewport, {
+			ref: o,
+			className: e(a.viewport, t),
+			"data-forte": "preview-card-viewport",
+			...r
+		});
+	}),
+	createHandle: i.createHandle
+};
+//#endregion
+export { d as t };