@krelborn/stylesui 0.8.1 → 0.9.0

package/dist/components/Grid/Grid.js

@@ -1,23 +1,22 @@
-import { Box as e } from "../Box/Box.js";
-import { listRole as t } from "../../layout/listRole.js";
-import { spaceValue as n } from "../../layout/spaceValue.js";
-import { withCustomProperties as r } from "../../layout/withCustomProperties.js";
+import { listRole as e } from "../../layout/listRole.js";
+import { spaceValue as t } from "../../layout/spaceValue.js";
+import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import { Box as r } from "../Box/Box.js";
 import i from "./Grid.module.js";
 import { clsx as a } from "clsx";
 import { jsx as o } from "react/jsx-runtime";
-//#region src/components/Grid/Grid.tsx
+// src/components/Grid/Grid.tsx
 function s({ as: s, className: c, gap: l = 4, minimumItemWidth: u = "16rem", ...d }) {
 	let { role: f, style: p, ...m } = d, h = s ?? "div";
-	return /* @__PURE__ */ o(e, {
+	return /* @__PURE__ */ o(r, {
 		...m,
 		as: h,
 		className: a(i.grid, c),
-		role: t(h, f),
-		style: r({
-			"--sui-grid-gap": n(l),
+		role: e(h, f),
+		style: n({
+			"--sui-grid-gap": t(l),
 			"--sui-grid-minimum-item-width": u
 		}, p)
 	});
 }
-//#endregion
 export { s as Grid };

package/dist/components/Grid/Grid.module.js

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

package/dist/components/Heading/Heading.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import t from "./Heading.module.js";
 import { clsx as n } from "clsx";
 import { jsx as r } from "react/jsx-runtime";
-//#region src/components/Heading/Heading.tsx
+// src/components/Heading/Heading.tsx
 var i = {
 	1: "3xl",
 	2: "2xl",
@@ -20,5 +20,4 @@ function a({ className: a, level: o, size: s, tone: c = "default", ...l }) {
 		"data-tone": c
 	});
 }
-//#endregion
 export { a as Heading };

package/dist/components/Heading/Heading.module.js

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

package/dist/components/HorizontalFlow/HorizontalFlow.js

@@ -1,19 +1,19 @@
-import { Box as e } from "../Box/Box.js";
-import { listRole as t } from "../../layout/listRole.js";
-import { spaceValue as n } from "../../layout/spaceValue.js";
-import { withCustomProperties as r } from "../../layout/withCustomProperties.js";
+import { listRole as e } from "../../layout/listRole.js";
+import { spaceValue as t } from "../../layout/spaceValue.js";
+import { withCustomProperties as n } from "../../layout/withCustomProperties.js";
+import { Box as r } from "../Box/Box.js";
 import i from "./HorizontalFlow.module.js";
 import { clsx as a } from "clsx";
 import { c as o } from "react/compiler-runtime";
 import { jsx as s } from "react/jsx-runtime";
-//#region src/components/HorizontalFlow/HorizontalFlow.tsx
+// src/components/HorizontalFlow/HorizontalFlow.tsx
 function c(c) {
 	let l = o(22), u, d, f, p, m, h, g, _, v;
 	if (l[0] !== c) {
 		let { align: o, as: s, className: y, gap: b, justify: x, wrap: S, ...C } = c;
 		d = o, f = x, v = S;
 		let { role: w, style: T, ...E } = C, D = s ?? "div";
-		u = e, p = E, m = D, l[10] === y ? h = l[11] : (h = a(i.horizontalFlow, y), l[10] = y, l[11] = h), g = t(D, w), _ = r({ "--sui-horizontal-flow-gap": n(b) }, T), l[0] = c, l[1] = u, l[2] = d, l[3] = f, l[4] = p, l[5] = m, l[6] = h, l[7] = g, l[8] = _, l[9] = v;
+		u = r, p = E, m = D, l[10] === y ? h = l[11] : (h = a(i.horizontalFlow, y), l[10] = y, l[11] = h), g = e(D, w), _ = n({ "--sui-horizontal-flow-gap": t(b) }, T), l[0] = c, l[1] = u, l[2] = d, l[3] = f, l[4] = p, l[5] = m, l[6] = h, l[7] = g, l[8] = _, l[9] = v;
 	} else u = l[1], d = l[2], f = l[3], p = l[4], m = l[5], h = l[6], g = l[7], _ = l[8], v = l[9];
 	let y = v ? "" : void 0, b;
 	return l[12] !== u || l[13] !== d || l[14] !== f || l[15] !== p || l[16] !== m || l[17] !== h || l[18] !== g || l[19] !== _ || l[20] !== y ? (b = /* @__PURE__ */ s(u, {
@@ -27,5 +27,4 @@ function c(c) {
 		"data-wrap": y
 	}), l[12] = u, l[13] = d, l[14] = f, l[15] = p, l[16] = m, l[17] = h, l[18] = g, l[19] = _, l[20] = y, l[21] = b) : b = l[21], b;
 }
-//#endregion
 export { c as HorizontalFlow };

package/dist/components/HorizontalFlow/HorizontalFlow.module.js

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

package/dist/components/Icon/AddIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/AddIcon.tsx
+// src/components/Icon/AddIcon.tsx
 function a(a) {
 	let o = n(4), s, c;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -18,5 +18,4 @@ function a(a) {
 		children: [s, c]
 	}), o[2] = a, o[3] = l), l;
 }
-//#endregion
 export { a as AddIcon };

package/dist/components/Icon/CheckIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A check mark, for something that is on, chosen or done, such as a checked item in a menu. It is hidden from assistive technology unless it has a `label`, so where the control it marks states its own value, such as a menu item's `aria-checked`, leave it without one.
+ *
+ * @example
+ * <Text>
+ *   <CheckIcon label="Saved" /> Draft
+ * </Text>
+ */
+export declare function CheckIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/CheckIcon.js

@@ -0,0 +1,18 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Icon/CheckIcon.tsx
+function i(i) {
+	let a = n(3), o;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M20 6 9 17l-5-5"
+	}), a[0] = o) : o = a[0];
+	let s;
+	return a[1] === i ? s = a[2] : (s = /* @__PURE__ */ r(t, {
+		...i,
+		children: o
+	}), a[1] = i, a[2] = s), s;
+}
+export { i as CheckIcon };

package/dist/components/Icon/ChevronDownIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r } from "react/jsx-runtime";
-//#region src/components/Icon/ChevronDownIcon.tsx
+// src/components/Icon/ChevronDownIcon.tsx
 function i(i) {
 	let a = n(3), o;
 	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ r(e, {
@@ -15,5 +15,4 @@ function i(i) {
 		children: o
 	}), a[1] = i, a[2] = s), s;
 }
-//#endregion
 export { i as ChevronDownIcon };

package/dist/components/Icon/ChevronRightIcon.d.ts

@@ -0,0 +1,11 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * A chevron pointing along the line, for something that opens beside it, such as a submenu, or leads onward. It points the way the text runs, so it is mirrored in right-to-left text. It is hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <Button aria-haspopup="menu">
+ *   Move to <ChevronRightIcon />
+ * </Button>
+ */
+export declare function ChevronRightIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/ChevronRightIcon.js

@@ -0,0 +1,19 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r } from "react/jsx-runtime";
+// src/components/Icon/ChevronRightIcon.tsx
+function i(i) {
+	let a = n(3), o;
+	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "m9 18 6-6-6-6"
+	}), a[0] = o) : o = a[0];
+	let s;
+	return a[1] === i ? s = a[2] : (s = /* @__PURE__ */ r(t, {
+		...i,
+		mirrored: !0,
+		children: o
+	}), a[1] = i, a[2] = s), s;
+}
+export { i as ChevronRightIcon };

package/dist/components/Icon/CloseIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/CloseIcon.tsx
+// src/components/Icon/CloseIcon.tsx
 function a(a) {
 	let o = n(4), s, c;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -18,5 +18,4 @@ function a(a) {
 		children: [s, c]
 	}), o[2] = a, o[3] = l), l;
 }
-//#endregion
 export { a as CloseIcon };

package/dist/components/Icon/ColorModeIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/ColorModeIcon.tsx
+// src/components/Icon/ColorModeIcon.tsx
 function a(a) {
 	let o = n(7), s, c, l, u, d;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -33,5 +33,4 @@ function a(a) {
 		]
 	}), o[5] = a, o[6] = f), f;
 }
-//#endregion
 export { a as ColorModeIcon };

package/dist/components/Icon/DeleteIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/DeleteIcon.tsx
+// src/components/Icon/DeleteIcon.tsx
 function a(a) {
 	let o = n(7), s, c, l, u, d;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -33,5 +33,4 @@ function a(a) {
 		]
 	}), o[5] = a, o[6] = f), f;
 }
-//#endregion
 export { a as DeleteIcon };

package/dist/components/Icon/Icon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import t from "./Icon.module.js";
 import { clsx as n } from "clsx";
 import { jsx as r } from "react/jsx-runtime";
-//#region src/components/Icon/Icon.tsx
+// src/components/Icon/Icon.tsx
 function i({ children: i, className: a, label: o, mirrored: s = !1, ...c }) {
 	let l = !o;
 	return /* @__PURE__ */ r(e, {
@@ -24,5 +24,4 @@ function i({ children: i, className: a, label: o, mirrored: s = !1, ...c }) {
 		}) : i
 	});
 }
-//#endregion
 export { i as Icon };

package/dist/components/Icon/Icon.module.js

@@ -1,7 +1,6 @@
-import './Icon.css';//#region src/components/Icon/Icon.module.css
+import './Icon.css';// src/components/Icon/Icon.module.css
 var e = "sui-icon-szG-X", t = "sui-mirrored-H6BYE", n = {
 	icon: e,
 	mirrored: t
 };
-//#endregion
 export { n as default, e as icon, t as mirrored };

package/dist/components/Icon/InfoIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/InfoIcon.tsx
+// src/components/Icon/InfoIcon.tsx
 function a(a) {
 	let o = n(5), s, c, l;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -27,5 +27,4 @@ function a(a) {
 		]
 	}), o[3] = a, o[4] = u), u;
 }
-//#endregion
 export { a as InfoIcon };

package/dist/components/Icon/MenuIcon.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from "react";
+import type { IconProps } from "./Icon";
+/**
+ * Three horizontal lines, for the button that shows a site's navigation when it is collapsed on a narrow screen. It is
+ * hidden from assistive technology unless it has a `label`, so inside a button, name the button instead.
+ *
+ * @example
+ * <Button aria-expanded={open} onClick={toggle}>
+ *   <MenuIcon /> Menu
+ * </Button>
+ */
+export declare function MenuIcon(props: IconProps): JSX.Element;

package/dist/components/Icon/MenuIcon.js

@@ -0,0 +1,28 @@
+import { Box as e } from "../Box/Box.js";
+import { Icon as t } from "./Icon.js";
+import { c as n } from "react/compiler-runtime";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+// src/components/Icon/MenuIcon.tsx
+function a(a) {
+	let o = n(5), s, c, l;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M4 5h16"
+	}), c = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M4 12h16"
+	}), l = /* @__PURE__ */ r(e, {
+		as: "path",
+		d: "M4 19h16"
+	}), o[0] = s, o[1] = c, o[2] = l) : (s = o[0], c = o[1], l = o[2]);
+	let u;
+	return o[3] === a ? u = o[4] : (u = /* @__PURE__ */ i(t, {
+		...a,
+		children: [
+			s,
+			c,
+			l
+		]
+	}), o[3] = a, o[4] = u), u;
+}
+export { a as MenuIcon };

package/dist/components/Icon/MoreHorizontalIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/MoreHorizontalIcon.tsx
+// src/components/Icon/MoreHorizontalIcon.tsx
 function a(a) {
 	let o = n(5), s, c, l;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -31,5 +31,4 @@ function a(a) {
 		]
 	}), o[3] = a, o[4] = u), u;
 }
-//#endregion
 export { a as MoreHorizontalIcon };

package/dist/components/Icon/MoreVerticalIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/MoreVerticalIcon.tsx
+// src/components/Icon/MoreVerticalIcon.tsx
 function a(a) {
 	let o = n(5), s, c, l;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -31,5 +31,4 @@ function a(a) {
 		]
 	}), o[3] = a, o[4] = u), u;
 }
-//#endregion
 export { a as MoreVerticalIcon };

package/dist/components/Icon/PaletteIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/PaletteIcon.tsx
+// src/components/Icon/PaletteIcon.tsx
 function a(a) {
 	let o = n(7), s, c, l, u, d;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -45,5 +45,4 @@ function a(a) {
 		]
 	}), o[5] = a, o[6] = f), f;
 }
-//#endregion
 export { a as PaletteIcon };

package/dist/components/Icon/RefreshIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/RefreshIcon.tsx
+// src/components/Icon/RefreshIcon.tsx
 function a(a) {
 	let o = n(6), s, c, l, u;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -29,5 +29,4 @@ function a(a) {
 		]
 	}), o[4] = a, o[5] = d), d;
 }
-//#endregion
 export { a as RefreshIcon };

package/dist/components/Icon/RemoveIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r } from "react/jsx-runtime";
-//#region src/components/Icon/RemoveIcon.tsx
+// src/components/Icon/RemoveIcon.tsx
 function i(i) {
 	let a = n(3), o;
 	a[0] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ r(e, {
@@ -15,5 +15,4 @@ function i(i) {
 		children: o
 	}), a[1] = i, a[2] = s), s;
 }
-//#endregion
 export { i as RemoveIcon };

package/dist/components/Icon/SendIcon.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import { Icon as t } from "./Icon.js";
 import { c as n } from "react/compiler-runtime";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-//#region src/components/Icon/SendIcon.tsx
+// src/components/Icon/SendIcon.tsx
 function a(a) {
 	let o = n(4), s, c;
 	o[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ r(e, {
@@ -19,5 +19,4 @@ function a(a) {
 		children: [s, c]
 	}), o[2] = a, o[3] = l), l;
 }
-//#endregion
 export { a as SendIcon };

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

@@ -1,10 +1,13 @@
 export { AddIcon } from "./AddIcon";
+export { CheckIcon } from "./CheckIcon";
 export { ChevronDownIcon } from "./ChevronDownIcon";
+export { ChevronRightIcon } from "./ChevronRightIcon";
 export { CloseIcon } from "./CloseIcon";
 export { ColorModeIcon } from "./ColorModeIcon";
 export { DeleteIcon } from "./DeleteIcon";
 export type { IconProps } from "./Icon";
 export { InfoIcon } from "./InfoIcon";
+export { MenuIcon } from "./MenuIcon";
 export { MoreHorizontalIcon } from "./MoreHorizontalIcon";
 export { MoreVerticalIcon } from "./MoreVerticalIcon";
 export { PaletteIcon } from "./PaletteIcon";

package/dist/components/IconButton/IconButton.js

@@ -7,7 +7,7 @@ import a from "./IconButton.module.js";
 import { clsx as o } from "clsx";
 import { useId as s } from "react";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-//#region src/components/IconButton/IconButton.tsx
+// src/components/IconButton/IconButton.tsx
 function d({ children: d, className: f, label: p, placement: m = "top", shortcut: h, variant: g = "ghost", ..._ }) {
 	let v = i({
 		placement: m,
@@ -37,5 +37,4 @@ function d({ children: d, className: f, label: p, placement: m = "top", shortcut
 		})]
 	})] });
 }
-//#endregion
 export { d as IconButton };

package/dist/components/IconButton/IconButton.module.js

@@ -1,8 +1,7 @@
-import './IconButton.css';//#region src/components/IconButton/IconButton.module.css
+import './IconButton.css';// src/components/IconButton/IconButton.module.css
 var e = "sui-iconButton-JAF-a", t = "sui-icon-2DDWy", n = "sui-shortcut-LCwpq", r = {
 	iconButton: e,
 	icon: t,
 	shortcut: n
 };
-//#endregion
 export { r as default, t as icon, e as iconButton, n as shortcut };

package/dist/components/Kbd/Kbd.js

@@ -3,7 +3,7 @@ import t from "./Kbd.module.js";
 import { clsx as n } from "clsx";
 import { c as r } from "react/compiler-runtime";
 import { jsx as i } from "react/jsx-runtime";
-//#region src/components/Kbd/Kbd.tsx
+// src/components/Kbd/Kbd.tsx
 function a(a) {
 	let o = r(8), s, c;
 	o[0] === a ? (s = o[1], c = o[2]) : ({className: s, ...c} = a, o[0] = a, o[1] = s, o[2] = c);
@@ -16,5 +16,4 @@ function a(a) {
 		className: l
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 }
-//#endregion
 export { a as Kbd };

package/dist/components/Kbd/Kbd.module.js

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

package/dist/components/Link/Link.js

@@ -2,7 +2,7 @@ import { Box as e } from "../Box/Box.js";
 import t from "./Link.module.js";
 import { clsx as n } from "clsx";
 import { jsx as r } from "react/jsx-runtime";
-//#region src/components/Link/Link.tsx
+// src/components/Link/Link.tsx
 function i({ as: i, className: a, tone: o = "primary", underline: s = "always", ...c }) {
 	let l = {
 		className: n(t.link, a),
@@ -23,5 +23,4 @@ function i({ as: i, className: a, tone: o = "primary", underline: s = "always",
 		...l
 	});
 }
-//#endregion
 export { i as Link };

package/dist/components/Link/Link.module.js

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

package/dist/components/Listbox/Listbox.js

@@ -1,11 +1,11 @@
-import { Box as e } from "../Box/Box.js";
-import t from "./Listbox.module.js";
-import { ListboxContext as n } from "./ListboxContext.js";
-import { optionId as r } from "./optionId.js";
+import { optionId as e } from "../../collections/optionId.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Listbox.module.js";
+import { ListboxContext as r } from "./ListboxContext.js";
 import { useListbox as i } from "./useListbox.js";
 import { clsx as a } from "clsx";
 import { jsx as o } from "react/jsx-runtime";
-//#region src/components/Listbox/Listbox.tsx
+// src/components/Listbox/Listbox.tsx
 function s({ className: s, defaultValue: c = null, onAction: l, onBlur: u, onFocus: d, onKeyDown: f, onPointerCancel: p, onPointerDown: m, onValueChange: h, value: g, ..._ }) {
 	let v = i({
 		defaultValue: c,
@@ -28,7 +28,7 @@ function s({ className: s, defaultValue: c = null, onAction: l, onBlur: u, onFoc
 	function A(e) {
 		m?.(e), v.handlePointerDown();
 	}
-	return /* @__PURE__ */ o(n.Provider, {
+	return /* @__PURE__ */ o(r.Provider, {
 		value: {
 			act: y,
 			activeValue: b,
@@ -38,9 +38,9 @@ function s({ className: s, defaultValue: c = null, onAction: l, onBlur: u, onFoc
 			selectedValue: w,
 			setActiveValue: T
 		},
-		children: /* @__PURE__ */ o(e, {
+		children: /* @__PURE__ */ o(t, {
 			..._,
-			className: a(t.listbox, s),
+			className: a(n.listbox, s),
 			onBlur: E,
 			onFocus: D,
 			onKeyDown: O,
@@ -48,9 +48,8 @@ function s({ className: s, defaultValue: c = null, onAction: l, onBlur: u, onFoc
 			onPointerDown: A,
 			role: "listbox",
 			tabIndex: 0,
-			"aria-activedescendant": b === null ? void 0 : r(x, b)
+			"aria-activedescendant": b === null ? void 0 : e(x, b)
 		})
 	});
 }
-//#endregion
 export { s as Listbox };

package/dist/components/Listbox/Listbox.module.js

@@ -1,7 +1,6 @@
-import './Listbox.css';//#region src/components/Listbox/Listbox.module.css
+import './Listbox.css';// src/components/Listbox/Listbox.module.css
 var e = "sui-listbox-lSHQo", t = "sui-option-sCJLx", n = {
 	listbox: e,
 	option: t
 };
-//#endregion
 export { n as default, e as listbox, t as option };

package/dist/components/Listbox/ListboxContext.js

@@ -1,5 +1,4 @@
 import { createContext as e } from "react";
-//#region src/components/Listbox/ListboxContext.ts
+// src/components/Listbox/ListboxContext.ts
 var t = e(null);
-//#endregion
 export { t as ListboxContext };

package/dist/components/Listbox/ListboxOption.js

@@ -1,11 +1,11 @@
-import { Box as e } from "../Box/Box.js";
-import t from "./Listbox.module.js";
-import { optionId as n } from "./optionId.js";
+import { optionId as e } from "../../collections/optionId.js";
+import { Box as t } from "../Box/Box.js";
+import n from "./Listbox.module.js";
 import { useListboxContext as r } from "./useListboxContext.js";
 import { clsx as i } from "clsx";
 import { useEffectEvent as a, useLayoutEffect as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
-//#region src/components/Listbox/ListboxOption.tsx
+// src/components/Listbox/ListboxOption.tsx
 function c({ className: c, disabled: l = !1, onClick: u, onDoubleClick: d, textValue: f, value: p, ...m }) {
 	let h = r("ListboxOption"), { setActiveValue: g } = h, _ = h.activeValue === p, v = h.selectedValue === p, y = a(h.claim);
 	o(() => {
@@ -25,10 +25,10 @@ function c({ className: c, disabled: l = !1, onClick: u, onDoubleClick: d, textV
 	function x(e) {
 		d?.(e), !e.defaultPrevented && !l && h.act(p);
 	}
-	return /* @__PURE__ */ s(e, {
+	return /* @__PURE__ */ s(t, {
 		...m,
-		className: i(t.option, c),
-		id: n(h.baseId, p),
+		className: i(n.option, c),
+		id: e(h.baseId, p),
 		onClick: b,
 		onDoubleClick: x,
 		role: "option",
@@ -39,5 +39,4 @@ function c({ className: c, disabled: l = !1, onClick: u, onDoubleClick: d, textV
 		"data-value": p
 	});
 }
-//#endregion
 export { c as ListboxOption };