@monimesl/dot-renderer-react 1.0.0-beta.1 → 1.0.0-beta.11

package/README.md

@@ -20,9 +20,9 @@ source at build time, from `@phosphor-icons/core`.
 
 ## The theme
 
-A dot sets `scheme`, `colors` and `shape` in `defineDot`. The colors are `primary`, `background`,
-`surface`, `text`, `muted`, `border` and `subtle`, each for light and dark, and `custom` for the
-dot's own named colors. A page can set its own colors over the theme's, with `configs.colors` or
+A dot sets its `theme` in `defineDot`, with `scheme`, `colors` and `shape`. The colors are
+`primary`, `background`, `surface`, `text`, `muted`, `border` and `subtle`, each for light and dark,
+and `custom` for the dot's own named colors. A page can set its own colors over the theme's, with `configs.colors` or
 `setColors`. The renderer fills in the rest of the palette from Dash's own look. On a background
 that isn't Dash's, it works out surfaces and quieter text that sit well on it. `useTheme()` gives a
 component the resolved theme.

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();
@@ -45,12 +46,17 @@ function customColor(name, theme) {
 	const color = theme.customColors[name];
 	if (color === void 0 && !unknownColors.has(name)) {
 		unknownColors.add(name);
-		console.warn(`The theme has no colour named "${name}". Add it to colors.custom in dot.ts.`);
+		console.warn(`The theme has no colour named "${name}". Add it to theme.colors.custom in dot.ts.`);
 	}
 	return color;
 }
 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 { backgroundColor, 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] ?? SIZES.medium;
 	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.primaryText;
+		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,9 +1,10 @@
+import { SHADOW_REACH, SPACE } from "./tokens.js";
 import { useTheme } from "../theme.js";
-import { SPACE } from "./tokens.js";
 import { clamp } from "./numbers.js";
 import { paddingStyle } from "./padding.js";
+import { SideRoomContext } from "./side-room.js";
 import { createEvent } from "@monimesl/dot-core";
-import { Children, Fragment, isValidElement, useEffect, useEffectEvent, useRef, useState } from "react";
+import { Children, Fragment, isValidElement, useContext, useEffect, useEffectEvent, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/carousel.tsx
 const SLIDE_DURATION = 350;
@@ -13,7 +14,8 @@ 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, elevation } = useTheme();
+	const mayUseSides = useContext(SideRoomContext);
 	const slides = slidesOf(children);
 	const count = slides.length;
 	const looping = loop && count > 1;
@@ -23,20 +25,20 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 	const [animated, setAnimated] = useState(true);
 	const [dragOffset, setDragOffset] = useState(0);
 	const [dragging, setDragging] = useState(false);
-	const [viewportWidth, setViewportWidth] = useState(0);
+	const [slideWidth, setSlideWidth] = useState(0);
 	const [previousIndex, setPreviousIndex] = useState(index);
-	const viewportRef = useRef(null);
+	const swipeAreaRef = useRef(null);
 	const gestureRef = useRef(null);
 	const ignoreNextClick = useRef(false);
+	const shownPosition = clamp(position, 0, lastPosition);
+	const currentIndex = count === 0 ? 0 : wrapIndex(shownPosition - firstPosition, count);
 	if (index !== previousIndex) {
 		setPreviousIndex(index);
-		if (index !== void 0) {
+		if (index !== void 0 && slideIndex(index, count) !== currentIndex) {
 			setAnimated(true);
 			setPosition(firstPosition + slideIndex(index, count));
 		}
 	}
-	const shownPosition = clamp(position, 0, lastPosition);
-	const currentIndex = count === 0 ? 0 : wrapIndex(shownPosition - firstPosition, count);
 	const moveTo = (targetPosition) => {
 		const nextPosition = clamp(targetPosition, 0, lastPosition);
 		setAnimated(true);
@@ -98,7 +100,7 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		};
 		ignoreNextClick.current = false;
 		setDragging(true);
-		setViewportWidth(viewportRef.current?.clientWidth ?? 0);
+		setSlideWidth(swipeAreaRef.current?.clientWidth ?? 0);
 	};
 	const onPointerMove = (event) => {
 		const swipe = gestureOf(event);
@@ -128,13 +130,14 @@ const Carousel$1 = ({ autoplay = false, interval = 4e3, loop = false, indicator
 		if (!swipe.swiping) return;
 		const movedX = event.clientX - swipe.startX;
 		const speed = Math.abs(movedX) / Math.max(1, event.timeStamp - swipe.startTime);
-		if (Math.abs(movedX) > viewportWidth * SWIPE_DISTANCE || speed > SWIPE_SPEED) stepBy(movedX < 0 ? 1 : -1);
+		if (Math.abs(movedX) > slideWidth * SWIPE_DISTANCE || speed > SWIPE_SPEED) stepBy(movedX < 0 ? 1 : -1);
 		else moveTo(shownPosition);
 	};
-	const gapWidth = SPACE[gap];
+	const gapWidth = mayUseSides && elevation === "raised" ? Math.max(space[gap], SHADOW_REACH.sides) : space[gap];
+	const sideRoom = mayUseSides ? gapWidth : 0;
 	const transition = animated ? `transform ${SLIDE_DURATION}ms ${SLIDE_EASING}` : "none";
 	let draggedSlides = 0;
-	if (viewportWidth > 0) draggedSlides = dragOffset / (viewportWidth + gapWidth);
+	if (slideWidth > 0) draggedSlides = dragOffset / (slideWidth + gapWidth);
 	let track = slides;
 	if (looping) track = [
 		{
@@ -156,52 +159,64 @@ 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,
-			onPointerDown,
-			onPointerMove,
-			onPointerUp,
-			onPointerCancel: endGesture,
-			onDragStart: (event) => event.preventDefault(),
-			onClickCapture: (event) => {
-				if (ignoreNextClick.current) {
-					ignoreNextClick.current = false;
-					event.stopPropagation();
-				}
-			},
 			style: {
 				overflow: "hidden",
-				touchAction: "pan-y",
-				userSelect: dragging ? "none" : void 0
+				paddingTop: SHADOW_REACH.top,
+				paddingBottom: SHADOW_REACH.bottom,
+				paddingInline: sideRoom,
+				marginTop: -SHADOW_REACH.top,
+				marginBottom: -SHADOW_REACH.bottom,
+				marginInline: -sideRoom,
+				pointerEvents: "none"
 			},
 			children: /* @__PURE__ */ jsx("div", {
+				ref: swipeAreaRef,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				onPointerCancel: endGesture,
+				onDragStart: (event) => event.preventDefault(),
+				onClickCapture: (event) => {
+					if (ignoreNextClick.current) {
+						ignoreNextClick.current = false;
+						event.stopPropagation();
+					}
+				},
 				style: {
-					display: "flex",
-					gap: gapWidth,
-					transform: `translateX(calc(${-shownPosition} * (100% + ${gapWidth}px) + ${dragOffset}px))`,
-					transition
+					pointerEvents: "auto",
+					touchAction: "pan-y",
+					userSelect: dragging ? "none" : void 0
 				},
-				children: track.map((slide, trackPosition) => {
-					const visible = trackPosition === shownPosition;
-					const distance = Math.abs(trackPosition - shownPosition + draggedSlides);
-					const scale = 1 - Math.min(distance, 1) * .15000000000000002;
-					return /* @__PURE__ */ jsx("div", {
-						role: "group",
-						"aria-roledescription": "slide",
-						"aria-label": `${wrapIndex(trackPosition - firstPosition, count) + 1} of ${count}`,
-						"aria-hidden": !visible,
-						inert: !visible,
-						style: {
-							display: "grid",
-							flex: "0 0 100%",
-							minWidth: 0,
-							transform: effect === "scale" ? `scale(${scale})` : void 0,
-							transition: effect === "scale" ? transition : void 0
-						},
-						children: slide.node
-					}, slide.key);
+				children: /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						gap: gapWidth,
+						transform: `translateX(calc(${-shownPosition} * (100% + ${gapWidth}px) + ${dragOffset}px))`,
+						transition
+					},
+					children: track.map((slide, trackPosition) => {
+						const visible = trackPosition === shownPosition;
+						const distance = Math.abs(trackPosition - shownPosition + draggedSlides);
+						const scale = 1 - Math.min(distance, 1) * .15000000000000002;
+						return /* @__PURE__ */ jsx("div", {
+							role: "group",
+							"aria-roledescription": "slide",
+							"aria-label": `${wrapIndex(trackPosition - firstPosition, count) + 1} of ${count}`,
+							"aria-hidden": !visible,
+							inert: !visible,
+							style: {
+								display: "grid",
+								flex: "0 0 100%",
+								minWidth: 0,
+								transform: effect === "scale" ? `scale(${scale})` : void 0,
+								transition: effect === "scale" ? transition : void 0
+							},
+							children: slide.node
+						}, slide.key);
+					})
 				})
 			})
 		}), indicator === "dots" && count > 1 ? /* @__PURE__ */ jsx("div", {

package/dist/components/chip.js

@@ -1,11 +1,11 @@
+import { ICON_SIZE, WEIGHTS, pressLook } 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,12 +23,11 @@ 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",
-			opacity: disabled ? DISABLED_OPACITY : 1,
-			cursor: disabled ? "default" : "pointer"
+			...pressLook(disabled)
 		},
 		children: [icon ? /* @__PURE__ */ jsx(IconGraphic, {
 			name: icon,

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,13 +1,13 @@
+import { ICON_SIZE, SPACE, WEIGHTS, pressLook } 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";
 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 Disclosure$1 = ({ title, subtitle, open: startsOpen = false, disabled, children, onToggle }) => {
+	const { colors, fontSize } = useTheme();
 	const [open, setOpen] = useState(startsOpen);
 	return /* @__PURE__ */ jsxs("details", {
 		className: "dot-disclosure",
@@ -21,12 +21,17 @@ const Disclosure$1 = ({ title, subtitle, open: startsOpen = false, children, onT
 		},
 		style: { color: colors.text },
 		children: [/* @__PURE__ */ jsxs("summary", {
+			"aria-disabled": disabled || void 0,
+			tabIndex: disabled ? -1 : void 0,
+			onClick: (event) => {
+				if (disabled) event.preventDefault();
+			},
 			style: {
 				display: "flex",
 				alignItems: "center",
 				gap: SPACE.medium,
 				padding: "12px 0",
-				cursor: "pointer"
+				...pressLook(disabled)
 			},
 			children: [/* @__PURE__ */ jsxs("span", {
 				style: {
@@ -38,13 +43,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,21 +1,16 @@
-import { useTheme } from "../theme.js";
 import { SPACE } from "./tokens.js";
-import { HOME_INDICATOR, insets, pinnedPaddingStyle } from "./padding.js";
+import { useTheme } from "../theme.js";
+import { insets } from "./padding.js";
+import { pinnedBarStyle } from "./pinned-bar.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",
+		className: "dot-footer dot-bar-bottom",
 		style: {
-			position: "sticky",
-			bottom: 0,
-			marginTop: "auto",
-			display: "flex",
-			flexDirection: "column",
+			...pinnedBarStyle("bottom", padding, space, insets(SPACE.medium, 0)),
 			gap: SPACE.medium,
-			...pinnedPaddingStyle(padding, insets(SPACE.medium, 0)),
-			marginBottom: `calc(-1 * ${HOME_INDICATOR})`,
 			background: colors.background
 		},
 		children