@monimesl/dot-renderer-react 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/components/icon.js

@@ -1,24 +1,51 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { ICON_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
-import { toneColor } from "./tones.js";
+import { textToneColor } from "./box.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon.tsx
+const ICON_PATH = /^statics\/(?!.*\.\.)[\w./-]+\.svg$/i;
+const unknownIcons = /* @__PURE__ */ new Set();
 function IconGraphic({ name, size, color }) {
-	return /* @__PURE__ */ jsx(IconSvg, {
+	const { icons } = useTheme();
+	if (Object.hasOwn(ICON_ARTWORK, name)) return /* @__PURE__ */ jsx(IconSvg, {
 		artwork: ICON_ARTWORK[name],
 		size,
 		color
 	});
+	const path = Object.hasOwn(icons, name) ? icons[name] : void 0;
+	if (path === void 0 || !ICON_PATH.test(path)) {
+		if (!unknownIcons.has(name)) {
+			unknownIcons.add(name);
+			console.warn(`The theme has no icon named "${name}". Add it to theme.icons in dot.ts.`);
+		}
+		return null;
+	}
+	const mask = `url("${path}") center / contain no-repeat`;
+	return /* @__PURE__ */ jsx("span", {
+		className: "dot-icon",
+		"aria-hidden": "true",
+		style: {
+			display: "inline-flex",
+			width: size,
+			height: size,
+			verticalAlign: "middle",
+			flexShrink: 0,
+			backgroundColor: color,
+			mask,
+			WebkitMask: mask
+		}
+	});
 }
 const Icon = ({ name, size = "medium", tone = "default" }) => {
-	const { colors } = useTheme();
+	const theme = useTheme();
 	if (!name) return null;
+	const color = textToneColor(tone, theme) ?? theme.colors.text;
 	return /* @__PURE__ */ jsx(IconGraphic, {
 		name,
 		size: ICON_SIZE[size],
-		color: toneColor(colors, tone)
+		color
 	});
 };
 //#endregion

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ import { Input } from "./input.js";
 import { Link } from "./link.js";
 import { List, ListItem } from "./list.js";
 import { Option } from "./option.js";
+import { Pinned } from "./pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./prose.js";
 import { QRCode } from "./qr-code.js";
 import { RichText } from "./rich-text.js";
@@ -35,4 +36,4 @@ import { TextArea } from "./text-area.js";
 import { Toast } from "./toast.js";
 import { Checkbox, Radio, RadioGroup, Switch } from "./toggles.js";
 import { View } from "./view.js";
-export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View };
+export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View };

package/dist/components/index.js

@@ -19,6 +19,7 @@ import { Input } from "./input.js";
 import { Link } from "./link.js";
 import { List, ListItem } from "./list.js";
 import { Option } from "./option.js";
+import { Pinned } from "./pinned.js";
 import { Bullet, BulletList, Prose, Quote } from "./prose.js";
 import { QRCode } from "./qr-code.js";
 import { Text } from "./text.js";
@@ -63,6 +64,7 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	ListItem: () => ListItem,
 	Notice: () => Notice,
 	Option: () => Option,
+	Pinned: () => Pinned,
 	ProgressBar: () => ProgressBar,
 	Prose: () => Prose,
 	QRCode: () => QRCode,
@@ -89,4 +91,4 @@ var components_exports = /* @__PURE__ */ __exportAll({
 	View: () => View
 });
 //#endregion
-export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, components_exports };
+export { AmountInput, Avatar, Badge, Bullet, BulletList, Button, Carousel, Checkbox, Chip, CodeInput, DetailRow, Disclosure, Divider, EmptyState, Footer, Grid, GridItem, Icon, Image, Input, Link, List, ListItem, Notice, Option, Pinned, ProgressBar, Prose, QRCode, Quote, Radio, RadioGroup, RichText, Scroll, Select, Sheet, Skeleton, Slider, Spinner, Stack, Step, Stepper, Steps, Switch, Tab, Tabs, Text, TextArea, Toast, View, components_exports };

package/dist/components/input.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE, SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { Field } from "./field.js";
 import { BARE_INPUT_STYLE, useFieldBox, useFieldNote } from "./field-box.js";
 import { useTypedText } from "./typed-text.js";

package/dist/components/link.js

@@ -8,7 +8,7 @@ import { jsx } from "react/jsx-runtime";
 const Link$1 = ({ href, tone, onTap, children }) => {
 	const { colors } = useTheme();
 	const style = {
-		color: tone ? toneColor(colors, tone) : colors.primary,
+		color: tone ? toneColor(colors, tone) : colors.primaryText,
 		textDecorationLine: "underline",
 		textUnderlineOffset: "2px",
 		cursor: "pointer"

package/dist/components/list.js

@@ -1,5 +1,5 @@
+import { CARD_RADIUS_SCALE, CENTERED, ICON_SIZE, SHADOWS, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, CENTERED, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { CHEVRON_RIGHT_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
 import { insets, paddingStyle } from "./padding.js";
@@ -27,7 +27,8 @@ const ROW_SIZES = {
 };
 const ListSizeContext = createContext("sm");
 const List$1 = ({ size = "sm", onEndReached, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, space, elevation, scheme } = useTheme();
+	const raised = elevation === "raised";
 	const listRef = useRef(null);
 	const lastRowReached = useRef(null);
 	useEffect(() => {
@@ -43,7 +44,7 @@ const List$1 = ({ size = "sm", onEndReached, children, ...padding }) => {
 		return () => observer.disconnect();
 	});
 	return /* @__PURE__ */ jsx(ListSizeContext.Provider, {
-		value: size,
+		value: Object.hasOwn(ROW_SIZES, size) ? size : "sm",
 		children: /* @__PURE__ */ jsx("ul", {
 			ref: listRef,
 			className: "dot-list",
@@ -51,11 +52,12 @@ const List$1 = ({ size = "sm", onEndReached, children, ...padding }) => {
 				display: "flex",
 				flexDirection: "column",
 				margin: 0,
-				...paddingStyle(padding),
+				...paddingStyle(padding, space),
 				overflow: "hidden",
 				listStyle: "none",
 				borderRadius: radius * CARD_RADIUS_SCALE,
-				border: `1px solid ${colors.border}`,
+				border: raised ? "none" : `1px solid ${colors.border}`,
+				boxShadow: raised ? SHADOWS[scheme].low : void 0,
 				background: colors.surface,
 				"--dot-list-divider": colors.border
 			},
@@ -64,7 +66,7 @@ const List$1 = ({ size = "sm", onEndReached, children, ...padding }) => {
 	});
 };
 const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, space, fontSize } = useTheme();
 	const rowSize = ROW_SIZES[useContext(ListSizeContext)];
 	let leading = null;
 	if (image) leading = /* @__PURE__ */ jsx("img", {
@@ -112,7 +114,7 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 				children: title
 			}) : null, subtitle ? /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: FONT_SIZE.caption,
+					fontSize: fontSize.caption,
 					lineHeight: "normal",
 					color: colors.subtle
 				},
@@ -138,11 +140,11 @@ const ListItem$1 = ({ title, subtitle, value, icon, image, onTap, children, ...p
 		display: "flex",
 		alignItems: "center",
 		gap: rowSize.gap,
-		...paddingStyle(padding, insets(rowSize.block, 16)),
+		...paddingStyle(padding, space, insets(rowSize.block, 16)),
 		width: "100%",
 		background: colors.surface,
 		color: colors.text,
-		fontSize: FONT_SIZE.body,
+		fontSize: fontSize.body,
 		textAlign: "start"
 	};
 	return /* @__PURE__ */ jsx("li", {

package/dist/components/option.js

@@ -1,5 +1,5 @@
+import { ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { CHECK_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
 import { OptionPlaceContext } from "./option-place.js";
@@ -7,7 +7,7 @@ import { useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/option.tsx
 const Option = ({ value, label }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const place = useContext(OptionPlaceContext);
 	const chosen = value !== void 0 && value === place.value;
 	if (place.inField) return chosen ? /* @__PURE__ */ jsx(Fragment$1, { children: label }) : null;
@@ -28,7 +28,7 @@ const Option = ({ value, label }) => {
 			borderBottom: `1px solid ${colors.border}`,
 			background: "transparent",
 			color: colors.text,
-			fontSize: FONT_SIZE.body,
+			fontSize: fontSize.body,
 			fontWeight: chosen ? WEIGHTS.bold : WEIGHTS.regular,
 			textAlign: "start",
 			cursor: "pointer"

package/dist/components/padding.js

@@ -1,4 +1,3 @@
-import { SPACE } from "./tokens.js";
 //#region src/components/padding.ts
 const NO_INSETS = {
 	top: 0,
@@ -14,21 +13,21 @@ function insets(block, inline = block) {
 		bottom: block
 	};
 }
-function paddingStyle(props, ownInsets = NO_INSETS) {
+function paddingStyle(props, space, ownInsets = NO_INSETS) {
 	return {
-		paddingTop: sidePadding(props.paddingTop ?? props.padding, ownInsets.top),
-		paddingInlineStart: sidePadding(props.paddingStart ?? props.padding, ownInsets.start),
-		paddingInlineEnd: sidePadding(props.paddingEnd ?? props.padding, ownInsets.end),
-		paddingBottom: sidePadding(props.paddingBottom ?? props.padding, ownInsets.bottom)
+		paddingTop: sidePadding(props.paddingTop ?? props.padding, space, ownInsets.top),
+		paddingInlineStart: sidePadding(props.paddingStart ?? props.padding, space, ownInsets.start),
+		paddingInlineEnd: sidePadding(props.paddingEnd ?? props.padding, space, ownInsets.end),
+		paddingBottom: sidePadding(props.paddingBottom ?? props.padding, space, ownInsets.bottom)
 	};
 }
-function sidePadding(pageSpace, ownPixels) {
+function sidePadding(pageSpace, space, ownPixels) {
 	if (pageSpace === void 0) return ownPixels;
-	return SPACE[pageSpace];
+	return space[pageSpace];
 }
 const HOME_INDICATOR = "env(safe-area-inset-bottom, 0px)";
-function pinnedPaddingStyle(props, ownInsets) {
-	const style = paddingStyle(props, ownInsets);
+function pinnedPaddingStyle(props, space, ownInsets) {
+	const style = paddingStyle(props, space, ownInsets);
 	return {
 		...style,
 		paddingBottom: `calc(${style.paddingBottom}px + ${HOME_INDICATOR})`

package/dist/components/pinned-bar.js

@@ -0,0 +1,29 @@
+import { insets, paddingStyle, pinnedPaddingStyle } from "./padding.js";
+//#region src/components/pinned-bar.ts
+const STATUS_BAR = "env(safe-area-inset-top, 0px)";
+function pinnedBarStyle(edge, padding, space, ownInsets = insets(0)) {
+	let edgeStyle;
+	if (edge === "top") edgeStyle = {
+		...paddingStyle(padding, space, ownInsets),
+		top: STATUS_BAR
+	};
+	else edgeStyle = {
+		...pinnedPaddingStyle(padding, space, ownInsets),
+		bottom: 0,
+		marginTop: "auto"
+	};
+	return {
+		...edgeStyle,
+		position: "sticky",
+		zIndex: 1,
+		display: "flex",
+		flexDirection: "column",
+		alignSelf: "stretch",
+		marginInlineStart: "calc(-1 * var(--dot-view-start, 0px))",
+		marginInlineEnd: "calc(-1 * var(--dot-view-end, 0px))",
+		paddingInlineStart: `calc(var(--dot-view-start, 0px) + ${edgeStyle.paddingInlineStart}px)`,
+		paddingInlineEnd: `calc(var(--dot-view-end, 0px) + ${edgeStyle.paddingInlineEnd}px)`
+	};
+}
+//#endregion
+export { pinnedBarStyle };

package/dist/components/pinned.d.ts

@@ -0,0 +1,6 @@
+import { ReactComponent } from "../types.js";
+import { Pinned } from "@monimesl/dot-core";
+//#region src/components/pinned.d.ts
+declare const Pinned$1: ReactComponent<typeof Pinned>;
+//#endregion
+export { Pinned$1 as Pinned };

package/dist/components/pinned.js

@@ -0,0 +1,26 @@
+import { useTheme } from "../theme.js";
+import { backgroundColor } from "./box.js";
+import { pinnedBarStyle } from "./pinned-bar.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/pinned.tsx
+const Pinned = ({ edge = "top", gap = "medium", background = "background", border = "none", children, ...padding }) => {
+	const theme = useTheme();
+	const { colors, space } = theme;
+	const style = {
+		...pinnedBarStyle(edge, padding, space),
+		gap: space[gap],
+		background: backgroundColor(background, theme)
+	};
+	if (border !== "none") {
+		const line = `1px solid ${border === "strong" ? colors.subtle : colors.border}`;
+		if (edge === "top") style.borderBottom = line;
+		else style.borderTop = line;
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: `dot-pinned dot-bar-${edge}`,
+		style,
+		children
+	});
+};
+//#endregion
+export { Pinned };

package/dist/components/prose.js

@@ -1,29 +1,32 @@
+import { SELECTABLE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, SELECTABLE } from "./tokens.js";
 import { paddingStyle } from "./padding.js";
 import { InsideProse } from "./prose-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/prose.tsx
 const READING_WIDTH = 680;
-const Prose = ({ children, ...padding }) => /* @__PURE__ */ jsx("div", {
-	className: "dot-prose",
-	style: {
-		display: "flex",
-		flexDirection: "column",
-		gap: 12,
-		width: "100%",
-		maxWidth: READING_WIDTH,
-		marginInline: "auto",
-		...SELECTABLE,
-		...paddingStyle(padding)
-	},
-	children: /* @__PURE__ */ jsx(InsideProse.Provider, {
-		value: true,
-		children
-	})
-});
+const Prose = ({ children, ...padding }) => {
+	const { space } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-prose",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 12,
+			width: "100%",
+			maxWidth: READING_WIDTH,
+			marginInline: "auto",
+			...SELECTABLE,
+			...paddingStyle(padding, space)
+		},
+		children: /* @__PURE__ */ jsx(InsideProse.Provider, {
+			value: true,
+			children
+		})
+	});
+};
 const Quote = ({ cite, children }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	return /* @__PURE__ */ jsxs("blockquote", {
 		className: "dot-quote",
 		style: {
@@ -37,7 +40,7 @@ const Quote = ({ cite, children }) => {
 		},
 		children: [children, cite && /* @__PURE__ */ jsxs("span", {
 			style: {
-				fontSize: FONT_SIZE.caption,
+				fontSize: fontSize.caption,
 				fontStyle: "normal",
 				color: colors.subtle
 			},

package/dist/components/rich-text.js

@@ -1,55 +1,67 @@
 import { useTheme } from "../theme.js";
-import { Divider } from "./divider.js";
-import { Image } from "./image.js";
+import { Divider as Divider$1 } from "./divider.js";
+import { Image as Image$2 } from "./image.js";
 import { isHttps } from "./https.js";
-import { Link } from "./link.js";
-import { Bullet, BulletList, Prose, Quote } from "./prose.js";
+import { Link as Link$2 } from "./link.js";
+import { Bullet as Bullet$1, BulletList as BulletList$1, Prose as Prose$2, Quote as Quote$1 } from "./prose.js";
 import { parseMarkdown } from "../markdown.js";
-import { Text } from "./text.js";
+import { Text as Text$2 } from "./text.js";
+import { withComponentDefaults } from "@monimesl/dot-core";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/rich-text.tsx
+function themed(name, Component) {
+	return function Themed(props) {
+		const { components } = useTheme();
+		const merged = withComponentDefaults(name, props, components);
+		return /* @__PURE__ */ jsx(Component, { ...merged });
+	};
+}
+const Image$1 = themed("Image", Image$2);
+const Link$1 = themed("Link", Link$2);
+const Prose$1 = themed("Prose", Prose$2);
+const Text$1 = themed("Text", Text$2);
 const HEADING_TEXT = {
 	1: { variant: "title" },
 	2: { variant: "subtitle" },
 	3: { weight: "bold" }
 };
-const RichText = ({ markdown }) => {
+const RichText$1 = ({ markdown }) => {
 	const blocks = useMemo(() => parseMarkdown(markdown ?? ""), [markdown]);
-	return /* @__PURE__ */ jsx(Prose, { children: blocks.map(renderBlock) });
+	return /* @__PURE__ */ jsx(Prose$1, { children: blocks.map(renderBlock) });
 };
 function renderBlock(block, key) {
 	switch (block.kind) {
-		case "heading": return /* @__PURE__ */ jsx(Text, {
+		case "heading": return /* @__PURE__ */ jsx(Text$1, {
 			...HEADING_TEXT[block.level],
 			children: block.content.map(renderInline)
 		}, key);
-		case "paragraph": return /* @__PURE__ */ jsx(Text, { children: block.content.map(renderInline) }, key);
-		case "list": return /* @__PURE__ */ jsx(BulletList, {
+		case "paragraph": return /* @__PURE__ */ jsx(Text$1, { children: block.content.map(renderInline) }, key);
+		case "list": return /* @__PURE__ */ jsx(BulletList$1, {
 			ordered: block.ordered,
-			children: block.items.map((item, itemKey) => /* @__PURE__ */ jsx(Bullet, { children: item.map(renderBlock) }, itemKey))
+			children: block.items.map((item, itemKey) => /* @__PURE__ */ jsx(Bullet$1, { children: item.map(renderBlock) }, itemKey))
 		}, key);
-		case "quote": return /* @__PURE__ */ jsx(Quote, { children: block.blocks.map(renderBlock) }, key);
-		case "image": return /* @__PURE__ */ jsx(Image, {
+		case "quote": return /* @__PURE__ */ jsx(Quote$1, { children: block.blocks.map(renderBlock) }, key);
+		case "image": return /* @__PURE__ */ jsx(Image$1, {
 			src: block.src,
 			alt: block.alt
 		}, key);
-		case "rule": return /* @__PURE__ */ jsx(Divider, {}, key);
+		case "rule": return /* @__PURE__ */ jsx(Divider$1, {}, key);
 	}
 }
 function renderInline(inline, key) {
 	switch (inline.kind) {
 		case "text": return inline.text;
-		case "strong": return /* @__PURE__ */ jsx(Text, {
+		case "strong": return /* @__PURE__ */ jsx(Text$1, {
 			weight: "bold",
 			children: inline.children.map(renderInline)
 		}, key);
-		case "emphasis": return /* @__PURE__ */ jsx(Text, {
+		case "emphasis": return /* @__PURE__ */ jsx(Text$1, {
 			italic: true,
 			children: inline.children.map(renderInline)
 		}, key);
 		case "code": return /* @__PURE__ */ jsx(Code, { text: inline.text }, key);
-		case "link": return isHttps(inline.href) ? /* @__PURE__ */ jsx(Link, {
+		case "link": return isHttps(inline.href) ? /* @__PURE__ */ jsx(Link$1, {
 			href: inline.href,
 			children: inline.children.map(renderInline)
 		}, key) : inline.children.map(renderInline);
@@ -70,4 +82,4 @@ function Code({ text }) {
 	});
 }
 //#endregion
-export { RichText };
+export { RichText$1 as RichText };

package/dist/components/scroll.js

@@ -1,7 +1,9 @@
-import { SPACE } from "./tokens.js";
+import { SCROLL_SHADOW_ROOM, SHADOW_REACH } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { paddingStyle } from "./padding.js";
+import { SideRoomContext } from "./side-room.js";
 import { createEvent } from "@monimesl/dot-core";
-import { useEffect, useRef } from "react";
+import { useContext, useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/scroll.tsx
 const REST_DELAY_MS = 120;
@@ -9,8 +11,11 @@ const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ..
 	const rowRef = useRef(null);
 	const reportedIndex = useRef(void 0);
 	const restTimer = useRef(void 0);
-	const paddingCss = paddingStyle(padding);
-	const startPadding = Number(paddingCss.paddingInlineStart);
+	const { space, elevation } = useTheme();
+	const paddingCss = paddingStyle(padding, space);
+	const sideRoom = useContext(SideRoomContext) && elevation === "raised" ? SHADOW_REACH.sides : 0;
+	const startPadding = Number(paddingCss.paddingInlineStart) + sideRoom;
+	const endPadding = Number(paddingCss.paddingInlineEnd) + sideRoom;
 	useEffect(() => {
 		const element = rowRef.current;
 		if (index === void 0 || index === reportedIndex.current || !element) return;
@@ -43,10 +48,22 @@ const Scroll$1 = ({ gap = "medium", snap = "none", index, onChange, children, ..
 			}, REST_DELAY_MS);
 		} : void 0,
 		style: {
-			gap: SPACE[gap],
-			...paddingCss,
-			scrollPaddingInlineStart: paddingCss.paddingInlineStart,
-			scrollPaddingInlineEnd: paddingCss.paddingInlineEnd,
+			position: "relative",
+			display: "flex",
+			overflowX: "auto",
+			overflowY: "hidden",
+			overscrollBehaviorX: "contain",
+			scrollbarWidth: "none",
+			gap: space[gap],
+			paddingTop: Number(paddingCss.paddingTop) + SCROLL_SHADOW_ROOM.top,
+			paddingBottom: Number(paddingCss.paddingBottom) + SCROLL_SHADOW_ROOM.bottom,
+			paddingInlineStart: startPadding,
+			paddingInlineEnd: endPadding,
+			marginTop: -SCROLL_SHADOW_ROOM.top,
+			marginBottom: -SCROLL_SHADOW_ROOM.bottom,
+			marginInline: -sideRoom,
+			scrollPaddingInlineStart: startPadding,
+			scrollPaddingInlineEnd: endPadding,
 			scrollSnapType: snap === "none" ? void 0 : "x mandatory",
 			"--dot-scroll-snap": snap === "none" ? "none" : snap
 		},

package/dist/components/select.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE, SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { Field } from "./field.js";
 import { useFieldBox, useFieldNote } from "./field-box.js";
 import { CHEVRON_DOWN_ARTWORK } from "./icon-artwork.js";

package/dist/components/sheet.js

@@ -1,5 +1,5 @@
-import { FONT_FAMILY, useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { CARD_RADIUS_SCALE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { CLOSE_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
 import { pinnedPaddingStyle } from "./padding.js";
@@ -14,7 +14,7 @@ import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/sheet.tsx
 const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...padding }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, fontFamily, space, fontSize, headingFontFamily, headingWeight } = useTheme();
 	const container = usePortalContainer();
 	const cornerRadius = radius * CARD_RADIUS_SCALE;
 	return /* @__PURE__ */ jsx(DialogRoot, {
@@ -32,7 +32,7 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					zIndex: 100,
 					background: "rgba(0, 0, 0, 0.4)"
 				}
-			}), /* @__PURE__ */ jsxs(DialogPopup, {
+			}), /* @__PURE__ */ jsx(DialogPopup, {
 				className: "dot-sheet",
 				"aria-label": title,
 				style: {
@@ -40,56 +40,62 @@ const SheetPanel = ({ open, title, showCloseIcon = false, onClose, children, ...
 					insetInline: 0,
 					bottom: 0,
 					zIndex: 101,
-					display: "flex",
-					flexDirection: "column",
-					gap: SPACE.medium,
 					maxHeight: "85vh",
 					overflowY: "auto",
-					...pinnedPaddingStyle(padding, {
-						top: 16,
-						start: 16,
-						end: 16,
-						bottom: 24
-					}),
 					borderTopLeftRadius: cornerRadius,
 					borderTopRightRadius: cornerRadius,
 					background: colors.surface,
 					color: colors.text,
-					fontFamily: FONT_FAMILY,
+					fontFamily,
 					outline: "none"
 				},
-				children: [
-					title ? /* @__PURE__ */ jsx(DialogTitle, {
-						style: {
-							margin: 0,
-							fontSize: FONT_SIZE.body,
-							fontWeight: WEIGHTS.bold,
-							lineHeight: "normal",
-							textAlign: "center"
-						},
-						children: title
-					}) : null,
-					showCloseIcon ? /* @__PURE__ */ jsx(DialogClose, {
-						"aria-label": "Close",
-						style: {
-							position: "absolute",
-							top: 10,
-							insetInlineEnd: 10,
-							display: "flex",
-							padding: 4,
-							border: "none",
-							borderRadius: "50%",
-							background: "transparent",
-							cursor: "pointer"
-						},
-						children: /* @__PURE__ */ jsx(IconSvg, {
-							artwork: CLOSE_ARTWORK,
-							size: ICON_SIZE.medium,
-							color: colors.subtle
+				children: /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: SPACE.medium,
+						overflow: "clip",
+						...pinnedPaddingStyle(padding, space, {
+							top: 16,
+							start: 16,
+							end: 16,
+							bottom: 24
 						})
-					}) : null,
-					children
-				]
+					},
+					children: [
+						title ? /* @__PURE__ */ jsx(DialogTitle, {
+							style: {
+								margin: 0,
+								fontSize: fontSize.body,
+								fontFamily: headingFontFamily,
+								fontWeight: WEIGHTS[headingWeight ?? "bold"],
+								lineHeight: "normal",
+								textAlign: "center"
+							},
+							children: title
+						}) : null,
+						showCloseIcon ? /* @__PURE__ */ jsx(DialogClose, {
+							"aria-label": "Close",
+							style: {
+								position: "absolute",
+								top: 10,
+								insetInlineEnd: 10,
+								display: "flex",
+								padding: 4,
+								border: "none",
+								borderRadius: "50%",
+								background: "transparent",
+								cursor: "pointer"
+							},
+							children: /* @__PURE__ */ jsx(IconSvg, {
+								artwork: CLOSE_ARTWORK,
+								size: ICON_SIZE.medium,
+								color: colors.subtle
+							})
+						}) : null,
+						children
+					]
+				})
 			})]
 		})
 	});

package/dist/components/side-room.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+//#region src/components/side-room.ts
+const SideRoomContext = createContext(true);
+//#endregion
+export { SideRoomContext };