@krelborn/stylesui 0.8.1 → 0.9.0

package/dist/components/Combobox/useResultsAnnouncement.js

@@ -0,0 +1,24 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { c as r } from "react/compiler-runtime";
+// src/components/Combobox/useResultsAnnouncement.ts
+var i = 500;
+function a(a, o, s) {
+	let c = r(11), [l, u] = n(""), d = t(void 0), f, p;
+	c[0] === Symbol.for("react.memo_cache_sentinel") ? (f = () => () => clearTimeout(d.current), p = [], c[0] = f, c[1] = p) : (f = c[0], p = c[1]), e(f, p);
+	let m, h;
+	c[2] === s ? (m = c[3], h = c[4]) : (m = () => {
+		s || clearTimeout(d.current);
+	}, h = [s], c[2] = s, c[3] = m, c[4] = h), e(m, h);
+	let g;
+	c[5] !== o || c[6] !== a ? (g = function() {
+		u(""), clearTimeout(d.current), d.current = setTimeout(() => {
+			u(a(o()));
+		}, i);
+	}, c[5] = o, c[6] = a, c[7] = g) : g = c[7];
+	let _ = g, v;
+	return c[8] !== _ || c[9] !== l ? (v = {
+		announceCount: _,
+		announcement: l
+	}, c[8] = _, c[9] = l, c[10] = v) : v = c[10], v;
+}
+export { a as useResultsAnnouncement };

package/dist/components/ContextMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { useContextMenu } from "./useContextMenu";
+export type { UseContextMenuOptions, UseContextMenuResult } from "./useContextMenu";

package/dist/components/ContextMenu/useContextMenu.d.ts

@@ -0,0 +1,112 @@
+import type { CSSProperties, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
+import type { RequiredAccessibleName } from "../../accessibility";
+import type { MenuOverlayProps } from "../Menu/Menu";
+/**
+ * Options for `useContextMenu`
+ */
+export interface UseContextMenuOptions {
+    /**
+     * Called with the new open state when the menu opens or closes
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Props `getTargetProps` sets on the region
+ */
+interface ContextMenuTargetProps {
+    /**
+     * Marks the region, so a region inside it handles its own events
+     */
+    "data-context-menu-region": "";
+    /**
+     * Opens the menu at the pointer, or at the focused element when no pointer sent the event
+     */
+    onContextMenu: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Opens the menu at the focused element on Shift+F10 or the ContextMenu key
+     */
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Notes the pointer pressing in the region, which the menu holds while the press that opened it lasts, and opens the
+     * menu on a touch held in place
+     */
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    /**
+     * Names the region as the menu's anchor, and stops iOS showing its callout on a held link or image
+     */
+    style: CSSProperties;
+}
+/**
+ * Props `getMenuProps` sets on the `Menu`
+ */
+interface ContextMenuOverlayProps extends MenuOverlayProps {
+    /**
+     * Places the menu at the point it opened at rather than beside the region
+     */
+    "data-context-menu": "";
+    /**
+     * Closes the menu when focus leaves it
+     */
+    onBlur: (event: FocusEvent<HTMLElement>) => void;
+    /**
+     * Keeps the browser's menu from opening over the menu
+     */
+    onContextMenu: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Closes the menu on Tab, returning focus to where it opened from
+     */
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * The point's distances from each edge of the region
+     */
+    style: CSSProperties;
+}
+/**
+ * Prop getters for the region a context menu opens in and its `Menu`, whether it is open, what it opened for, and a
+ * way to close it
+ */
+export interface UseContextMenuResult {
+    /**
+     * Closes the menu, returning focus to where it opened from as choosing an item does, and reports `false` through
+     * `onOpenChange`
+     */
+    close: () => void;
+    /**
+     * Returns the props to spread on the `Menu`, merged with the given ones, which must name the menu with `aria-label`
+     * or `aria-labelledby`, since no trigger names it
+     */
+    getMenuProps: <Props extends object>(props: Props & RequiredAccessibleName & Partial<ContextMenuOverlayProps>) => Omit<Props, keyof ContextMenuOverlayProps> & ContextMenuOverlayProps;
+    /**
+     * Returns the props to spread on the region the menu opens in, merged with any given: where both set a handler, both
+     * run, the given one first, and `style` objects merge. Give the region's own `style` here rather than after the
+     * spread, which would drop the anchor name the menu is placed by.
+     */
+    getTargetProps: <Props extends object>(props?: Props & Partial<ContextMenuTargetProps>) => Omit<Props, keyof ContextMenuTargetProps> & ContextMenuTargetProps;
+    /**
+     * Whether the menu is open
+     */
+    open: boolean;
+    /**
+     * The element the menu last opened for, such as the one under the pointer; `null` until it first opens
+     */
+    target: Element | null;
+}
+/**
+ * Connects a `Menu` to a region, such as a list of files or a canvas, so a right-click in the region opens the menu at
+ * the pointer, with focus on the menu itself, and the next Down or Up moves to the first or last item. Shift+F10 or the
+ * ContextMenu key opens it below the focused element, with focus on its first item, and a touch held for half a second
+ * opens it at the touch, as a right-click does. Choosing an item, Escape, Tab or a click outside closes it, and focus
+ * goes back to the element in the region that had it when it opened, unless a click outside put it elsewhere. `target`
+ * tells which element the menu opened for, so one menu can serve every row.
+ *
+ * @param options the change callback
+ * @returns prop getters for the region and the `Menu`, whether it is open, what it opened for, and `close`
+ *
+ * @example
+ * const contextMenu = useContextMenu();
+ *
+ * <ul {...contextMenu.getTargetProps()} aria-label="Files">…</ul>
+ * <Menu {...contextMenu.getMenuProps({ "aria-label": "File actions" })}>…</Menu>
+ */
+export declare function useContextMenu({ onOpenChange }?: UseContextMenuOptions): UseContextMenuResult;
+export {};

package/dist/components/ContextMenu/useContextMenu.js

@@ -0,0 +1,202 @@
+import { closeWhenFocusLeaves as e } from "../../menus/closeWhenFocusLeaves.js";
+import { focusOnOpening as t } from "../../menus/focusOnOpening.js";
+import { hasModifier as n } from "../../menus/hasModifier.js";
+import { leaveMenuOnTab as r } from "../../menus/leaveMenuOnTab.js";
+import { watchRemovals as i } from "../../menus/watchRemovals.js";
+import { mergeProps as a } from "../../overlays/mergeProps.js";
+import { syncPopover as o } from "../../overlays/syncPopover.js";
+import { usePopover as s } from "../Popover/usePopover.js";
+import { watchLongPress as c } from "./watchLongPress.js";
+import { useEffect as l, useRef as u, useState as d } from "react";
+// src/components/ContextMenu/useContextMenu.ts
+function f({ onOpenChange: f } = {}) {
+	let h = s({
+		onOpenChange: f,
+		placement: "bottom-start"
+	}), [S, C] = d(null), w = u("menu"), T = u(null), E = u(!1), D = u(!1), O = u(null), k = u(null), A = u(!1), j = u(null), M = u(!1), { anchorName: N, id: P } = h.getOverlayProps();
+	l(() => () => {
+		O.current?.(), B();
+	}, []), l(() => {
+		let e = S?.page.getElementById(P);
+		if (S === null || e == null) return;
+		let n;
+		return e.matches(":popover-open") ? t(e, S.focus) : (w.current = S.focus, n = o(e, !0)), S.pressingPointer !== null && y(e, S.pressingPointer), n;
+	}, [P, S]);
+	function F(e) {
+		if (!I(e) || (B(), p(e)) || (e.preventDefault(), L(e.nativeEvent))) return;
+		if (m(e.nativeEvent)) {
+			z(e.currentTarget, e.target);
+			return;
+		}
+		let t = e.buttons === 0 ? null : k.current, n = {
+			bottom: e.clientY,
+			top: e.clientY,
+			x: e.clientX
+		};
+		H(e.currentTarget, e.target, n, "menu", t);
+	}
+	function I(e) {
+		let t = e.target.closest("[data-context-menu-region], [role=\"menu\"]");
+		return t === null || t === e.currentTarget;
+	}
+	function L(e) {
+		let t = e.pointerType;
+		return t === "touch" && M.current || t === "" && A.current;
+	}
+	function R(e) {
+		!(e.key === "ContextMenu" || e.key === "F10" && e.shiftKey) || !I(e) || e.defaultPrevented || n(e) || g(e.target) || (e.preventDefault(), z(e.currentTarget, e.target), A.current = !0);
+	}
+	function z(e, t) {
+		let n = e.ownerDocument, r = n.defaultView, i = t.getBoundingClientRect(), a = r?.getComputedStyle(n.getElementById(P) ?? t).direction === "rtl", o = r?.innerWidth ?? i.right, s = r?.innerHeight ?? i.bottom;
+		H(e, t, {
+			bottom: _(i.top, s),
+			top: _(i.bottom, s),
+			x: _(a ? i.right : i.left, o)
+		}, "first", null);
+	}
+	function B() {
+		j.current?.(), j.current = null;
+	}
+	function V(e) {
+		if (k.current = e.pointerId, e.pointerType !== "touch" || j.current !== null || !I(e) || g(e.target)) return;
+		let t = e.currentTarget, n = e.target, { clientX: r, clientY: i, pointerId: a } = e;
+		M.current = !1, j.current = c({
+			clientX: r,
+			clientY: i,
+			pointerId: a
+		}, t.ownerDocument, {
+			onEnd: () => {
+				j.current = null;
+			},
+			onLongPress: () => {
+				M.current = !0, H(t, n, {
+					bottom: i,
+					top: i,
+					x: r
+				}, "menu", a);
+			}
+		});
+	}
+	function H(e, t, n, r, i) {
+		let a = e.ownerDocument, o = a.getElementById(P), s = a.activeElement, c = e.getBoundingClientRect();
+		A.current = !1, D.current = !1, s !== null && e.contains(s) && o?.contains(s) !== !0 ? T.current = s : o?.matches(":popover-open") !== !0 && (T.current = null), C({
+			focus: r,
+			offsets: {
+				bottom: c.bottom - n.bottom,
+				left: n.x - c.left,
+				right: c.right - n.x,
+				top: n.top - c.top
+			},
+			page: a,
+			pressingPointer: i,
+			target: t
+		});
+	}
+	function U(e) {
+		let t = e.currentTarget;
+		e.target === t && e.newState === "closed" && (E.current = t.contains(t.ownerDocument.activeElement) || D.current && x(t.ownerDocument), D.current = !1);
+	}
+	function W(e) {
+		let n = e.currentTarget;
+		e.target === n && (O.current?.(), O.current = null, e.newState === "open" ? (O.current = i(n), t(n, w.current)) : (A.current = !1, E.current && (E.current = !1, b(n, T.current))));
+	}
+	function G(e) {
+		e.preventDefault();
+	}
+	function K(e) {
+		r(e, T.current, J);
+	}
+	function q(t) {
+		e(t.currentTarget, t.relatedTarget, () => !1);
+	}
+	function J() {
+		h.open && (D.current = !0), h.close();
+	}
+	function Y(e) {
+		let t = a(e, {
+			close: J,
+			"data-context-menu": "",
+			onBeforeToggle: U,
+			onBlur: q,
+			onContextMenu: G,
+			onKeyDown: K,
+			onToggle: W,
+			style: v(S?.offsets)
+		});
+		return h.getOverlayProps(t);
+	}
+	function X(e) {
+		return a(e, {
+			"data-context-menu-region": "",
+			onContextMenu: F,
+			onKeyDown: R,
+			onPointerDown: V,
+			style: {
+				anchorName: N,
+				WebkitTouchCallout: "none"
+			}
+		});
+	}
+	return {
+		close: J,
+		getMenuProps: Y,
+		getTargetProps: X,
+		open: h.open,
+		target: S?.target ?? null
+	};
+}
+function p(e) {
+	return e.defaultPrevented || g(e.target) || e.shiftKey && !m(e.nativeEvent);
+}
+function m(e) {
+	return "pointerType" in e && e.pointerType === "";
+}
+var h = /* @__PURE__ */ new Set([
+	"button",
+	"checkbox",
+	"color",
+	"file",
+	"hidden",
+	"image",
+	"radio",
+	"range",
+	"reset",
+	"submit"
+]);
+function g(e) {
+	let t = e;
+	switch (t?.tagName) {
+		case "INPUT": return !h.has(t.type);
+		case "SELECT":
+		case "TEXTAREA": return !0;
+		default: {
+			let e = t?.closest("[contenteditable]") ?? null;
+			return e !== null && e.getAttribute("contenteditable") !== "false";
+		}
+	}
+}
+function _(e, t) {
+	return Math.min(Math.max(e, 0), t);
+}
+function v(e) {
+	return e === void 0 ? {} : {
+		"--_sui-context-menu-bottom": `${e.bottom}px`,
+		"--_sui-context-menu-left": `${e.left}px`,
+		"--_sui-context-menu-right": `${e.right}px`,
+		"--_sui-context-menu-top": `${e.top}px`
+	};
+}
+function y(e, t) {
+	try {
+		e.setPointerCapture(t);
+	} catch (e) {
+		if (e?.name !== "NotFoundError") throw e;
+	}
+}
+function b(e, t) {
+	(x(e.ownerDocument) || e.contains(e.ownerDocument.activeElement)) && t?.focus();
+}
+function x(e) {
+	return e.activeElement === null || e.activeElement === e.body;
+}
+export { f as useContextMenu };

package/dist/components/ContextMenu/watchLongPress.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The touch that started a press
+ */
+interface Press {
+    clientX: number;
+    clientY: number;
+    pointerId: number;
+}
+/**
+ * Callbacks for the end of a long-press
+ */
+interface LongPressCallbacks {
+    /**
+     * Called when the press ends, however it ends
+     */
+    onEnd: () => void;
+    /**
+     * Called once the touch has been held long enough
+     */
+    onLongPress: () => void;
+}
+/**
+ * Watches a touch press for being held in place long enough to open a context menu. Moving further than the tolerance,
+ * lifting the finger, the browser cancelling the touch, as it does when a scroll starts, and a second finger all stop
+ * it opening. Until the press ends, text selection is stopped, which iOS would start on held text, and a press held
+ * long enough ends without the mouse events and click browsers send after a touch, which would act on the element
+ * under the finger and move focus out of the menu.
+ *
+ * @param press the `pointerdown` of the touch
+ * @param page the document the touch is in
+ * @param callbacks what to call once the touch is held long enough, and when the press ends
+ * @returns a function that stops watching at once
+ */
+export declare function watchLongPress(press: Press, page: Document, { onEnd, onLongPress }: LongPressCallbacks): () => void;
+export {};

package/dist/components/ContextMenu/watchLongPress.js

@@ -0,0 +1,38 @@
+function e(e, n, { onEnd: r, onLongPress: i }) {
+	let a = setTimeout(() => {
+		a = void 0, t(n), i();
+	}, 500);
+	function o() {
+		clearTimeout(a), a = void 0;
+	}
+	function s(t) {
+		t.pointerId !== e.pointerId && o();
+	}
+	function c(t) {
+		let n = Math.hypot(t.clientX - e.clientX, t.clientY - e.clientY);
+		t.pointerId === e.pointerId && n > 10 && o();
+	}
+	function l(t) {
+		t.pointerId === e.pointerId && (d(), r());
+	}
+	function u(e) {
+		e.preventDefault();
+	}
+	function d() {
+		o(), n.removeEventListener("pointerdown", s, !0), n.removeEventListener("pointermove", c, !0), n.removeEventListener("pointerup", l, !0), n.removeEventListener("pointercancel", l, !0), n.removeEventListener("selectstart", u, !0);
+	}
+	return n.addEventListener("pointerdown", s, !0), n.addEventListener("pointermove", c, !0), n.addEventListener("pointerup", l, !0), n.addEventListener("pointercancel", l, !0), n.addEventListener("selectstart", u, !0), d;
+}
+function t(e) {
+	let t = new AbortController(), n = {
+		capture: !0,
+		signal: t.signal
+	};
+	e.addEventListener("touchend", (e) => {
+		e.preventDefault(), t.abort();
+	}, {
+		...n,
+		passive: !1
+	}), e.addEventListener("touchcancel", () => t.abort(), n);
+}
+export { e as watchLongPress };

package/dist/components/Counter/Counter.js

@@ -1,19 +1,18 @@
-import { VisuallyHidden as e } from "../VisuallyHidden/VisuallyHidden.js";
-import { Badge as t } from "../Badge/Badge.js";
+import { Badge as e } from "../Badge/Badge.js";
+import { VisuallyHidden as t } from "../VisuallyHidden/VisuallyHidden.js";
 import n from "./Counter.module.js";
 import { clsx as r } from "clsx";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-//#region src/components/Counter/Counter.tsx
+// src/components/Counter/Counter.tsx
 function o({ capped: o = !1, className: s, count: c, hiddenSuffix: l, max: u, tone: d = "neutral", variant: f = "subtle", ...p }) {
 	if (!(c >= 1)) return null;
 	let m = u !== void 0 && c > u, h = m ? u : c;
-	return /* @__PURE__ */ a(t, {
+	return /* @__PURE__ */ a(e, {
 		...p,
 		className: r(n.counter, s),
 		tone: d,
 		variant: f,
-		children: [m || o ? `${h}+` : h, l !== void 0 && /* @__PURE__ */ i(e, { children: ` ${l}` })]
+		children: [m || o ? `${h}+` : h, l !== void 0 && /* @__PURE__ */ i(t, { children: ` ${l}` })]
 	});
 }
-//#endregion
 export { o as Counter };

package/dist/components/Counter/Counter.module.js

@@ -1,4 +1,3 @@
-import './Counter.css';//#region src/components/Counter/Counter.module.css
+import './Counter.css';// src/components/Counter/Counter.module.css
 var e = "sui-counter-ESMMm", t = { counter: e };
-//#endregion
 export { e as counter, t as default };

package/dist/components/Cover/Cover.js

@@ -1,20 +1,20 @@
-import { Box as e } from "../Box/Box.js";
-import { spaceValue as t } from "../../layout/spaceValue.js";
-import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import { spaceValue as e } from "../../layout/spaceValue.js";
+import { withCustomProperties as t } from "../../layout/withCustomProperties.js";
+import { Box as n } from "../Box/Box.js";
 import r from "./Cover.module.js";
 import { clsx as i } from "clsx";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/components/Cover/Cover.tsx
+// src/components/Cover/Cover.tsx
 function s({ as: s, bottom: c, className: l, gap: u = 4, minimumHeight: d = "100dvh", padding: f = 4, top: p, ...m }) {
 	let { children: h, style: g, ..._ } = m;
-	return /* @__PURE__ */ o(e, {
+	return /* @__PURE__ */ o(n, {
 		..._,
 		as: s,
 		className: i(r.cover, l),
-		style: n({
-			"--sui-cover-gap": t(u),
+		style: t({
+			"--sui-cover-gap": e(u),
 			"--sui-cover-minimum-height": d,
-			"--sui-cover-padding": t(f)
+			"--sui-cover-padding": e(f)
 		}, g),
 		children: [
 			p,
@@ -26,5 +26,4 @@ function s({ as: s, bottom: c, className: l, gap: u = 4, minimumHeight: d = "100
 		]
 	});
 }
-//#endregion
 export { s as Cover };

package/dist/components/Cover/Cover.module.js

@@ -1,7 +1,6 @@
-import './Cover.css';//#region src/components/Cover/Cover.module.css
+import './Cover.css';// src/components/Cover/Cover.module.css
 var e = "sui-cover-qYwGB", t = "sui-principal-tixG4", n = {
 	cover: e,
 	principal: t
 };
-//#endregion
 export { e as cover, n as default, t as principal };

package/dist/components/Divider/Divider.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import t from "./Divider.module.js";
 import { clsx as n } from "clsx";
 import { jsx as r } from "react/jsx-runtime";
-//#region src/components/Divider/Divider.tsx
+// src/components/Divider/Divider.tsx
 function i({ className: i, orientation: a = "horizontal", ...o }) {
 	return /* @__PURE__ */ r(e, {
 		...o,
@@ -12,5 +12,4 @@ function i({ className: i, orientation: a = "horizontal", ...o }) {
 		"data-orientation": a
 	});
 }
-//#endregion
 export { i as Divider };

package/dist/components/Divider/Divider.module.js

@@ -1,4 +1,3 @@
-import './Divider.css';//#region src/components/Divider/Divider.module.css
+import './Divider.css';// src/components/Divider/Divider.module.css
 var e = "sui-divider-KSGsi", t = { divider: e };
-//#endregion
 export { t as default, e as divider };

package/dist/components/Field/Field.js

@@ -6,13 +6,14 @@ import i from "./Field.module.js";
 import { clsx as a } from "clsx";
 import { useId as o } from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/Field/Field.tsx
+// src/components/Field/Field.tsx
 function l({ as: l, className: u, controlId: d, description: f, disabled: p = !1, error: m, label: h, required: g = !1, ..._ }) {
-	let { children: v, ...y } = _, b = o(), x = `${b}-description`, S = `${b}-error`, C = t(f), w = t(m), T = [C && x, w && S].filter(Boolean).join(" "), E = {
+	let { children: v, ...y } = _, b = o(), x = `${b}-description`, S = `${b}-error`, C = `${b}-label`, w = t(f), T = t(m), E = t(h), D = [w && x, T && S].filter(Boolean).join(" "), O = {
 		controlId: d ?? b,
-		describedBy: T === "" ? void 0 : T,
+		describedBy: D === "" ? void 0 : D,
 		disabled: p,
-		invalid: w,
+		invalid: T,
+		labelId: E ? C : void 0,
 		required: g
 	};
 	return /* @__PURE__ */ c(n, {
@@ -21,22 +22,23 @@ function l({ as: l, className: u, controlId: d, description: f, disabled: p = !1
 		className: a(i.field, u),
 		"data-disabled": p ? "" : void 0,
 		children: [
-			t(h) && /* @__PURE__ */ c(n, {
+			E && /* @__PURE__ */ c(n, {
 				as: "label",
 				className: i.label,
-				htmlFor: E.controlId,
+				htmlFor: O.controlId,
+				id: C,
 				children: [h, g && /* @__PURE__ */ s(r, {})]
 			}),
-			C && /* @__PURE__ */ s(n, {
+			w && /* @__PURE__ */ s(n, {
 				className: i.description,
 				id: x,
 				children: f
 			}),
 			/* @__PURE__ */ s(e.Provider, {
-				value: E,
+				value: O,
 				children: v
 			}),
-			w && /* @__PURE__ */ s(n, {
+			T && /* @__PURE__ */ s(n, {
 				className: i.error,
 				id: S,
 				children: m
@@ -44,5 +46,4 @@ function l({ as: l, className: u, controlId: d, description: f, disabled: p = !1
 		]
 	});
 }
-//#endregion
 export { l as Field };

package/dist/components/Field/Field.module.js

@@ -1,9 +1,8 @@
-import './Field.css';//#region src/components/Field/Field.module.css
+import './Field.css';// src/components/Field/Field.module.css
 var e = "sui-field-m7I4B", t = "sui-label-LAQio", n = "sui-description-yqljW", r = "sui-error-m0uol", i = {
 	field: e,
 	label: t,
 	description: n,
 	error: r
 };
-//#endregion
 export { i as default, n as description, r as error, e as field, t as label };

package/dist/components/Fieldset/Fieldset.js

@@ -6,7 +6,7 @@ import { clsx as i } from "clsx";
 import { useId as a } from "react";
 import { c as o } from "react/compiler-runtime";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
-//#region src/components/Fieldset/Fieldset.tsx
+// src/components/Fieldset/Fieldset.tsx
 function l(l) {
 	let u = o(40), d, f, p, m, h, g, _;
 	u[0] === l ? (d = u[1], f = u[2], p = u[3], m = u[4], h = u[5], g = u[6], _ = u[7]) : ({"aria-describedby": p, children: d, className: f, description: m, error: h, label: g, ..._} = l, u[0] = l, u[1] = d, u[2] = f, u[3] = p, u[4] = m, u[5] = h, u[6] = g, u[7] = _);
@@ -61,5 +61,4 @@ function l(l) {
 		]
 	}), u[31] = y, u[32] = _, u[33] = P, u[34] = F, u[35] = A, u[36] = j, u[37] = M, u[38] = N, u[39] = I) : I = u[39], I;
 }
-//#endregion
 export { l as Fieldset };

package/dist/components/Fieldset/Fieldset.module.js

@@ -1,9 +1,8 @@
-import './Fieldset.css';//#region src/components/Fieldset/Fieldset.module.css
+import './Fieldset.css';// src/components/Fieldset/Fieldset.module.css
 var e = "sui-fieldset-XI428", t = "sui-legend-u9wBt", n = "sui-description-KGes-", r = "sui-error-Dionz", i = {
 	fieldset: e,
 	legend: t,
 	description: n,
 	error: r
 };
-//#endregion
 export { i as default, n as description, r as error, e as fieldset, t as legend };

package/dist/components/Frame/Frame.js

@@ -1,17 +1,16 @@
-import { Box as e } from "../Box/Box.js";
-import { withCustomProperties as t } from "../../layout/withCustomProperties.js";
+import { withCustomProperties as e } from "../../layout/withCustomProperties.js";
+import { Box as t } from "../Box/Box.js";
 import n from "./Frame.module.js";
 import { clsx as r } from "clsx";
 import { jsx as i } from "react/jsx-runtime";
-//#region src/components/Frame/Frame.tsx
+// src/components/Frame/Frame.tsx
 function a({ as: a, className: o, ratio: s = "16 / 9", ...c }) {
 	let { style: l, ...u } = c;
-	return /* @__PURE__ */ i(e, {
+	return /* @__PURE__ */ i(t, {
 		...u,
 		as: a,
 		className: r(n.frame, o),
-		style: t({ "--sui-frame-ratio": s }, l)
+		style: e({ "--sui-frame-ratio": s }, l)
 	});
 }
-//#endregion
 export { a as Frame };

package/dist/components/Frame/Frame.module.js

@@ -1,4 +1,3 @@
-import './Frame.css';//#region src/components/Frame/Frame.module.css
+import './Frame.css';// src/components/Frame/Frame.module.css
 var e = "sui-frame-S3Ved", t = { frame: e };
-//#endregion
 export { t as default, e as frame };