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

package/dist/components/amount-input.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { SPACE, WEIGHTS } 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/avatar.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { WEIGHTS } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { USER_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
 import { useState } from "react";

package/dist/components/box.js

@@ -1,5 +1,5 @@
 import { CARD_RADIUS_SCALE } from "./tokens.js";
-import { isTone, toneBackground } from "./tones.js";
+import { isTone, toneBackground, toneColor } from "./tones.js";
 import { BACKGROUNDS } from "@monimesl/dot-core";
 //#region src/components/box.ts
 const RADIUS_SCALE = {
@@ -38,6 +38,7 @@ function boxStyle(props, theme, look = {}) {
 function backgroundColor(background, theme) {
 	if (isTone(background)) return toneBackground(theme.colors, background);
 	if (BACKGROUND_WORDS.has(background)) return theme.colors[background];
+	if (Object.hasOwn(theme.gradients, background)) return theme.gradients[background];
 	return customColor(background, theme);
 }
 const unknownColors = /* @__PURE__ */ new Set();
@@ -52,5 +53,10 @@ function customColor(name, theme) {
 function cssLength(value) {
 	return value === "fill" ? "100%" : value;
 }
+function textToneColor(tone, theme) {
+	if (isTone(tone)) return toneColor(theme.colors, tone);
+	if (tone === "onPrimary") return theme.colors.onPrimary;
+	return customColor(tone, theme);
+}
 //#endregion
-export { boxStyle, customColor };
+export { boxStyle, customColor, textToneColor };

package/dist/components/button.js

@@ -1,15 +1,31 @@
+import { DISABLED_OPACITY, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { LoadingIcon } from "./spinner.js";
-import { createEvent } from "@monimesl/dot-core";
+import { toneBackground } from "./tones.js";
+import { DEFAULT_VARIANTS, createEvent, textOn } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button.tsx
-const Button$1 = ({ variant = "primary", disabled, loading, onClick, children }) => {
-	const { colors, radius } = useTheme();
-	const filled = variant === "primary" && !disabled;
-	let color = colors.text;
-	if (filled) color = colors.onPrimary;
-	else if (disabled) color = colors.subtle;
+const SIZES = {
+	small: {
+		minHeight: 36,
+		padding: "8px 14px",
+		text: "caption"
+	},
+	medium: {
+		minHeight: 48,
+		padding: "12px 20px",
+		text: "body"
+	},
+	large: {
+		minHeight: 56,
+		padding: "16px 24px",
+		text: "lead"
+	}
+};
+const Button$1 = ({ variant = DEFAULT_VARIANTS.Button, tone = "default", size = "medium", disabled, loading, onClick, children }) => {
+	const { colors, radius, fontSize } = useTheme();
+	const look = buttonLook(colors, variant, tone, Boolean(disabled));
+	const sizing = SIZES[size];
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: "dot-button",
@@ -23,13 +39,13 @@ const Button$1 = ({ variant = "primary", disabled, loading, onClick, children })
 			alignItems: "center",
 			justifyContent: "center",
 			gap: SPACE.medium,
-			minHeight: 48,
-			padding: "12px 20px",
-			border: "none",
+			minHeight: sizing.minHeight,
+			padding: sizing.padding,
+			border: look.border,
 			borderRadius: radius,
-			background: filled ? colors.primary : colors.muted,
-			color,
-			fontSize: FONT_SIZE.body,
+			background: look.background,
+			color: look.color,
+			fontSize: fontSize[sizing.text],
 			fontWeight: WEIGHTS.bold,
 			lineHeight: "normal",
 			opacity: disabled ? DISABLED_OPACITY : 1,
@@ -38,5 +54,39 @@ const Button$1 = ({ variant = "primary", disabled, loading, onClick, children })
 		children: [loading ? /* @__PURE__ */ jsx(LoadingIcon, { size: ICON_SIZE.small }) : null, children]
 	});
 };
+function buttonLook(colors, variant, tone, disabled) {
+	const toneColor = tone === "default" ? void 0 : colors[tone];
+	if (variant === "outline" || variant === "ghost") {
+		let color = toneColor ?? colors.primary;
+		if (disabled) color = colors.subtle;
+		let border = "none";
+		if (variant === "outline") border = `1px solid ${disabled ? colors.border : color}`;
+		return {
+			background: "transparent",
+			color,
+			border
+		};
+	}
+	if (disabled) return {
+		background: colors.muted,
+		color: colors.subtle,
+		border: "none"
+	};
+	if (variant === "secondary") return {
+		background: toneBackground(colors, tone),
+		color: toneColor ?? colors.text,
+		border: "none"
+	};
+	if (toneColor) return {
+		background: toneColor,
+		color: textOn(toneColor),
+		border: "none"
+	};
+	return {
+		background: colors.primary,
+		color: colors.onPrimary,
+		border: "none"
+	};
+}
 //#endregion
 export { Button$1 as Button };

package/dist/components/carousel.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { clamp } from "./numbers.js";
 import { paddingStyle } from "./padding.js";
 import { createEvent } from "@monimesl/dot-core";
@@ -13,7 +13,7 @@ const SWIPE_SPEED = .4;
 const EDGE_RESISTANCE = .3;
 const TAP_SLOP = 6;
 const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator = "dots", gap = "none", effect = "slide", index, onChange, children, ...padding }) => {
-	const { colors } = useTheme();
+	const { colors, space } = useTheme();
 	const slides = slidesOf(children);
 	const count = slides.length;
 	const looping = loop && count > 1;
@@ -131,7 +131,7 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		if (Math.abs(movedX) > viewportWidth * SWIPE_DISTANCE || speed > SWIPE_SPEED) stepBy(movedX < 0 ? 1 : -1);
 		else moveTo(shownPosition);
 	};
-	const gapWidth = SPACE[gap];
+	const gapWidth = space[gap];
 	const transition = animated ? `transform ${SLIDE_DURATION}ms ${SLIDE_EASING}` : "none";
 	let draggedSlides = 0;
 	if (viewportWidth > 0) draggedSlides = dragOffset / (viewportWidth + gapWidth);
@@ -156,7 +156,7 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 			flexDirection: "column",
 			gap: SPACE.medium,
 			minWidth: 0,
-			...paddingStyle(padding)
+			...paddingStyle(padding, space)
 		},
 		children: [/* @__PURE__ */ jsx("div", {
 			ref: viewportRef,

package/dist/components/chip.js

@@ -1,11 +1,11 @@
+import { DISABLED_OPACITY, ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { DISABLED_OPACITY, FONT_SIZE, ICON_SIZE, WEIGHTS } from "./tokens.js";
 import { IconGraphic } from "./icon.js";
 import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/chip.tsx
 const Chip$1 = ({ label, icon, selected = false, disabled, onTap }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	return /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		className: "dot-chip",
@@ -23,7 +23,7 @@ const Chip$1 = ({ label, icon, selected = false, disabled, onTap }) => {
 			border: `1px solid ${selected ? colors.primary : colors.border}`,
 			background: selected ? colors.primary : colors.surface,
 			color: selected ? colors.onPrimary : colors.text,
-			fontSize: FONT_SIZE.caption,
+			fontSize: fontSize.caption,
 			fontWeight: WEIGHTS.medium,
 			lineHeight: "normal",
 			whiteSpace: "nowrap",

package/dist/components/code-input.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { CENTERED, DISABLED_OPACITY, SPACE, WEIGHTS } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { Field } from "./field.js";
 import { fieldBorderColor, useFieldNote } from "./field-box.js";
 import { useTypedText } from "./typed-text.js";

package/dist/components/detail-row.js

@@ -1,11 +1,11 @@
+import { WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, WEIGHTS } from "./tokens.js";
-import { insets, paddingStyle } from "./padding.js";
 import { toneColor } from "./tones.js";
+import { insets, paddingStyle } from "./padding.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/detail-row.tsx
 const DetailRow = ({ label, value, tone, weight = "regular", ...padding }) => {
-	const { colors } = useTheme();
+	const { colors, space, fontSize } = useTheme();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dot-detail-row",
 		style: {
@@ -13,8 +13,8 @@ const DetailRow = ({ label, value, tone, weight = "regular", ...padding }) => {
 			alignItems: "baseline",
 			justifyContent: "space-between",
 			gap: 16,
-			...paddingStyle(padding, insets(6, 0)),
-			fontSize: FONT_SIZE.body,
+			...paddingStyle(padding, space, insets(6, 0)),
+			fontSize: fontSize.body,
 			lineHeight: "normal"
 		},
 		children: [/* @__PURE__ */ jsx("span", {

package/dist/components/disclosure.js

@@ -1,5 +1,5 @@
+import { ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { CHEVRON_DOWN_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
 import { createEvent } from "@monimesl/dot-core";
@@ -7,7 +7,7 @@ import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/disclosure.tsx
 const Disclosure$1 = ({ title, subtitle, open: startsOpen = false, children, onToggle }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const [open, setOpen] = useState(startsOpen);
 	return /* @__PURE__ */ jsxs("details", {
 		className: "dot-disclosure",
@@ -38,13 +38,13 @@ const Disclosure$1 = ({ title, subtitle, open: startsOpen = false, children, onT
 				},
 				children: [/* @__PURE__ */ jsx("span", {
 					style: {
-						fontSize: FONT_SIZE.body,
+						fontSize: fontSize.body,
 						fontWeight: WEIGHTS.medium
 					},
 					children: title
 				}), subtitle ? /* @__PURE__ */ jsx("span", {
 					style: {
-						fontSize: FONT_SIZE.caption,
+						fontSize: fontSize.caption,
 						color: colors.subtle
 					},
 					children: subtitle

package/dist/components/empty-state.js

@@ -1,11 +1,11 @@
+import { CENTERED, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CENTERED, FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { insets, paddingStyle } from "./padding.js";
 import { IconGraphic } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/empty-state.tsx
 const EmptyState = ({ icon, title, text, children, ...padding }) => {
-	const { colors } = useTheme();
+	const { colors, space, fontSize, headingFontFamily, headingWeight } = useTheme();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dot-empty-state",
 		style: {
@@ -13,7 +13,7 @@ const EmptyState = ({ icon, title, text, children, ...padding }) => {
 			flexDirection: "column",
 			alignItems: "center",
 			gap: SPACE.medium,
-			...paddingStyle(padding, insets(32, 16)),
+			...paddingStyle(padding, space, insets(32, 16)),
 			textAlign: "center",
 			color: colors.text
 		},
@@ -34,8 +34,9 @@ const EmptyState = ({ icon, title, text, children, ...padding }) => {
 			}) : null,
 			title ? /* @__PURE__ */ jsx("span", {
 				style: {
-					fontSize: 17,
-					fontWeight: WEIGHTS.bold,
+					fontSize: fontSize.subtitle,
+					fontFamily: headingFontFamily,
+					fontWeight: WEIGHTS[headingWeight ?? "bold"],
 					lineHeight: "normal"
 				},
 				children: title
@@ -43,7 +44,7 @@ const EmptyState = ({ icon, title, text, children, ...padding }) => {
 			text ? /* @__PURE__ */ jsx("span", {
 				style: {
 					maxWidth: 300,
-					fontSize: FONT_SIZE.body,
+					fontSize: fontSize.body,
 					lineHeight: "normal",
 					color: colors.subtle
 				},

package/dist/components/feedback.js

@@ -1,10 +1,10 @@
+import { ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, ICON_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { CLOSE_ARTWORK } from "./icon-artwork.js";
 import { IconSvg } from "./icon-svg.js";
+import { STATUS_ARTWORK, toneBackground, toneColor } from "./tones.js";
 import { clamp } from "./numbers.js";
 import { insets, paddingStyle } from "./padding.js";
-import { STATUS_ARTWORK, toneBackground, toneColor } from "./tones.js";
 import { IconButton } from "./icon-button.js";
 import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -34,18 +34,18 @@ const ProgressBar$1 = ({ value = 0 }) => {
 	});
 };
 const Notice$1 = ({ tone = "default", title, children, onClose, ...padding }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, space, fontSize } = useTheme();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "dot-notice",
 		role: tone === "danger" ? "alert" : "status",
 		style: {
 			display: "flex",
 			gap: SPACE.medium,
-			...paddingStyle(padding, insets(12, 14)),
+			...paddingStyle(padding, space, insets(12, 14)),
 			borderRadius: radius,
 			background: toneBackground(colors, tone),
 			color: colors.text,
-			fontSize: FONT_SIZE.body,
+			fontSize: fontSize.body,
 			lineHeight: "normal"
 		},
 		children: [
@@ -79,7 +79,7 @@ const Notice$1 = ({ tone = "default", title, children, onClose, ...padding }) =>
 	});
 };
 const Badge$1 = ({ tone = "default", children }) => {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	return /* @__PURE__ */ jsx("span", {
 		className: "dot-badge",
 		style: {
@@ -89,7 +89,7 @@ const Badge$1 = ({ tone = "default", children }) => {
 			borderRadius: 999,
 			background: toneBackground(colors, tone),
 			color: toneColor(colors, tone),
-			fontSize: FONT_SIZE.caption,
+			fontSize: fontSize.caption,
 			fontWeight: WEIGHTS.bold,
 			lineHeight: "normal",
 			whiteSpace: "nowrap"

package/dist/components/field-box.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { DISABLED_OPACITY } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { useId, useState } from "react";
 //#region src/components/field-box.ts
 const BARE_INPUT_STYLE = {

package/dist/components/field.js

@@ -1,9 +1,9 @@
+import { SPACE, WEIGHTS } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { FONT_SIZE, SPACE, WEIGHTS } from "./tokens.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/field.tsx
 function Field({ label, hint, error, labelId, noteId, children }) {
-	const { colors } = useTheme();
+	const { colors, fontSize } = useTheme();
 	const note = error || hint;
 	return /* @__PURE__ */ jsxs("label", {
 		className: "dot-field",
@@ -21,7 +21,7 @@ function Field({ label, hint, error, labelId, noteId, children }) {
 			note ? /* @__PURE__ */ jsx("span", {
 				id: noteId,
 				style: {
-					fontSize: FONT_SIZE.caption,
+					fontSize: fontSize.caption,
 					color: error ? colors.danger : colors.subtle
 				},
 				children: note
@@ -30,10 +30,11 @@ function Field({ label, hint, error, labelId, noteId, children }) {
 	});
 }
 function FieldLabel({ id, children }) {
+	const { fontSize } = useTheme();
 	return /* @__PURE__ */ jsx("span", {
 		id,
 		style: {
-			fontSize: FONT_SIZE.caption,
+			fontSize: fontSize.caption,
 			fontWeight: WEIGHTS.medium
 		},
 		children

package/dist/components/footer.js

@@ -1,10 +1,10 @@
-import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { HOME_INDICATOR, insets, pinnedPaddingStyle } from "./padding.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/footer.tsx
 const Footer = ({ children, ...padding }) => {
-	const { colors } = useTheme();
+	const { colors, space } = useTheme();
 	return /* @__PURE__ */ jsx("footer", {
 		className: "dot-footer",
 		style: {
@@ -14,7 +14,7 @@ const Footer = ({ children, ...padding }) => {
 			display: "flex",
 			flexDirection: "column",
 			gap: SPACE.medium,
-			...pinnedPaddingStyle(padding, insets(SPACE.medium, 0)),
+			...pinnedPaddingStyle(padding, space, insets(SPACE.medium, 0)),
 			marginBottom: `calc(-1 * ${HOME_INDICATOR})`,
 			background: colors.background
 		},

package/dist/components/grid.js

@@ -1,5 +1,5 @@
+import { CARD_RADIUS_SCALE, CENTERED, PILL_STYLE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { CARD_RADIUS_SCALE, CENTERED, FONT_SIZE, PILL_STYLE, SPACE } from "./tokens.js";
 import { wholeCount } from "./numbers.js";
 import { paddingStyle } from "./padding.js";
 import { IconGraphic } from "./icon.js";
@@ -8,18 +8,21 @@ import { createEvent } from "@monimesl/dot-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/grid.tsx
 const TILE_SIZE = 52;
-const Grid$1 = ({ columns = 4, gap = "medium", children, ...padding }) => /* @__PURE__ */ jsx("div", {
-	className: "dot-grid",
-	style: {
-		display: "grid",
-		gridTemplateColumns: `repeat(${wholeCount(columns)}, minmax(0, 1fr))`,
-		gap: SPACE[gap],
-		...paddingStyle(padding)
-	},
-	children
-});
+const Grid$1 = ({ columns = 4, gap = "medium", children, ...padding }) => {
+	const { space } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-grid",
+		style: {
+			display: "grid",
+			gridTemplateColumns: `repeat(${wholeCount(columns)}, minmax(0, 1fr))`,
+			gap: space[gap],
+			...paddingStyle(padding, space)
+		},
+		children
+	});
+};
 const GridItem$1 = ({ label, icon, image, badge, onTap }) => {
-	const { colors, radius } = useTheme();
+	const { colors, radius, fontSize } = useTheme();
 	let picture = null;
 	if (image) picture = /* @__PURE__ */ jsx("img", {
 		src: image,
@@ -85,7 +88,7 @@ const GridItem$1 = ({ label, icon, image, badge, onTap }) => {
 				WebkitLineClamp: 2,
 				WebkitBoxOrient: "vertical",
 				color: colors.text,
-				fontSize: FONT_SIZE.caption,
+				fontSize: fontSize.caption,
 				lineHeight: "normal",
 				textAlign: "center"
 			},

package/dist/components/icon-button.js

@@ -1,5 +1,5 @@
-import { useTheme } from "../theme.js";
 import { ICON_SIZE } from "./tokens.js";
+import { useTheme } from "../theme.js";
 import { IconSvg } from "./icon-svg.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/icon-button.tsx

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$/;
+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/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/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(() => {
@@ -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"