@flickfyi/flkr 0.0.141 → 0.0.153

package/node_modules/@flickfyi/core/src/kowalski/recipe.tsx

@@ -0,0 +1,555 @@
+import { Flex, Icon, Text } from '@flickfyi/core'
+import { Button } from '@flickfyi/core/atoms'
+import {
+	Choice,
+	completedTaskStyle,
+	Field,
+	List,
+	Stepper,
+} from '@flickfyi/core/molecules'
+import * as stylex from '@stylexjs/stylex'
+import { formatQuantity } from 'format-quantity'
+import { Duration } from 'luxon'
+import { useState } from 'react'
+
+import { space } from '~/themes/scale.stylex'
+import { appearance, button, roles } from '~/themes/shared'
+
+import { kowalskiCatalog, type KowalskiInput, type KowalskiProps } from './catalog'
+import { format } from './format'
+import { FeatureAction, FeatureFacts, FeatureFrame, FeatureWell, layout } from './frame'
+import { useClock } from './use-clock'
+import { useConfiguredFeature } from './use-configured-feature'
+
+type RecipeProps = KowalskiProps<'recipe'>
+type Ingredient = RecipeProps['ingredients'][number]
+type Step = RecipeProps['steps'][number]
+
+/**
+ * Cooks an RGF recipe in two modes. The overview is for reading: ingredients, servings, and
+ * Start cooking at the bottom. Cooking fits one screen with the current step and its action at
+ * the bottom, or the next timer to go off when nothing is ready; above it, in falling order of
+ * attention, the other running timers, the next few steps (greyed until ready), and what's done.
+ */
+export function Recipe(input: KowalskiInput<'recipe'>) {
+	const props = kowalskiCatalog.recipe.props.parse(input)
+	const schema = kowalskiCatalog.recipe.storeSchema
+	const baseServings = props.servings ?? null
+	const store = useConfiguredFeature({
+		name: props.id ?? 'KowalskiRecipe',
+		revision: props.revision,
+		schema,
+		scope: props.scope,
+		seed: schema.parse({ servings: baseServings ?? 1 }),
+	})
+	const [prepOpen, setPrepOpen] = useState(false)
+	const [showEarlier, setShowEarlier] = useState(false)
+	const [showLater, setShowLater] = useState(false)
+	const graph = recipeGraph(props.steps)
+	const checked = (id: string) => store.value[`step_${id}`]?.done
+	const endsAt = (id: string) => store.value[`step_${id}`]?.endsAt ?? null
+	// The clock runs while any unfinished step has a timer, including one whose time is up.
+	// Timer ends are the key, so starting or extending one refreshes the clock before paint.
+	const now = useClock(
+		props.steps.some(step => endsAt(step.id) !== null && !checked(step.id)),
+		props.steps.map(step => endsAt(step.id) ?? '').join(',')
+	)
+	const factor = baseServings === null ? 1 : store.value.servings / baseServings
+	const waitingOn = (step: Step) =>
+		(graph.prerequisites.get(step.id) ?? []).filter(id => !checked(id))
+	const done = props.steps.filter(step => checked(step.id))
+	const history = showEarlier ? done : done.slice(-1)
+	const active = props.steps
+		.filter(step => !checked(step.id) && endsAt(step.id) !== null)
+		.toSorted((a, b) => (endsAt(a.id) ?? 0) - (endsAt(b.id) ?? 0))
+	// Ready steps first, longest remaining chain first so long waits start early; then waiting steps in order.
+	const queue = props.steps
+		.filter(step => !checked(step.id) && endsAt(step.id) === null)
+		.toSorted(
+			(a, b) =>
+				Number(waitingOn(a).length > 0) - Number(waitingOn(b).length > 0) ||
+				(waitingOn(a).length > 0
+					? 0
+					: (graph.chain.get(b.id) ?? 0) - (graph.chain.get(a.id) ?? 0)) ||
+				props.steps.indexOf(a) - props.steps.indexOf(b)
+		)
+	const [first, ...rest] = queue
+	const current = first && waitingOn(first).length === 0 ? first : undefined
+	// With nothing ready, the card holds the timer that goes off next (timers sort soonest first).
+	const awaited = current ? undefined : active[0]
+	const upcoming = current ? rest : queue
+	const next = showLater ? upcoming : upcoming.slice(0, 2)
+	const timers = active.filter(step => step !== awaited)
+	const remaining = (step: Step) => Math.ceil(((endsAt(step.id) ?? now) - now) / 1000)
+	const set = (step: Step, state: { done: boolean; endsAt: number | null }) => {
+		store.set(() => ({ [`step_${step.id}`]: state }))
+	}
+	const complete = (step: Step) => set(step, { done: true, endsAt: endsAt(step.id) })
+	const reopen = (step: Step) => set(step, { done: false, endsAt: null })
+	const start = (step: Step, until: number) => set(step, { done: false, endsAt: until })
+	const extend = (step: Step, instant: number) =>
+		set(step, { done: false, endsAt: Math.max(instant, endsAt(step.id) ?? 0) + 60_000 })
+	const timeUp = (step: Step) =>
+		step.doneness ? `Time’s up. Done when ${step.doneness}.` : 'Time’s up'
+	// What a step takes: an ingredient with its scaled amount, or an earlier output by name.
+	const uses = (step: Step) =>
+		step.uses.map(({ id, portion, source }) => {
+			if (source.kind === 'output') {
+				return { id, label: graph.outputs.get(source.outputId) ?? '', value: portion }
+			}
+			const ingredient = props.ingredients.find(item => item.id === source.ingredientId)
+			return {
+				id,
+				label: ingredient?.label ?? '',
+				value: portion ?? (ingredient && quantity(ingredient, factor)),
+			}
+		})
+	const prep = (
+		<>
+			<Field label="Ingredients">
+				<FeatureFacts>
+					{props.ingredients.map(ingredient => (
+						<List.Item
+							description={ingredient.notes?.join(' · ')}
+							key={ingredient.id}
+							label={ingredient.label}
+							trailing={quantity(ingredient, factor)}
+						/>
+					))}
+				</FeatureFacts>
+			</Field>
+			{baseServings !== null && (
+				<Field label="Servings">
+					<Stepper
+						decrementDisabled={!store.ready || store.value.servings <= 1}
+						decrementLabel="Fewer servings"
+						incrementDisabled={!store.ready || store.value.servings >= 100}
+						incrementLabel="More servings"
+						onDecrement={() =>
+							store.set(current => ({ servings: Math.max(1, current.servings - 1) }))
+						}
+						onIncrement={() =>
+							store.set(current => ({ servings: Math.min(100, current.servings + 1) }))
+						}
+					>
+						<Text {...stylex.props(roles.h2, layout.stepperInput)}>
+							{format.formatNumber(store.value.servings)}
+						</Text>
+					</Stepper>
+				</Field>
+			)}
+		</>
+	)
+	const nextRow = (step: Step) => {
+		const waiting = waitingOn(step).length > 0
+		const minutes = timerMinutes(step)
+		return (
+			<Flex
+				key={step.id}
+				{...stylex.props(recipeStyles.row, waiting && recipeStyles.waiting)}
+			>
+				<Flex {...stylex.props(layout.grow)}>
+					<Choice
+						checked={false}
+						disabled={!store.ready || waiting}
+						onCheckedChange={() => complete(step)}
+					>
+						{step.instruction}
+					</Choice>
+				</Flex>
+				{minutes !== null && !waiting && (
+					<Button
+						accessibilityLabel={`Start timer: ${step.instruction}`}
+						disabled={!store.ready}
+						onClick={() => start(step, Date.now() + minutes * 60_000)}
+						style={[button.secondary, button.sm, recipeStyles.trailing]}
+					>
+						<Flex {...stylex.props(layout.actionContent)}>
+							<Icon name="timer" />
+							<Text>{`Start ${step.duration?.raw}`}</Text>
+						</Flex>
+					</Button>
+				)}
+			</Flex>
+		)
+	}
+	const timerRow = (step: Step) => (
+		<Flex key={step.id} {...stylex.props(recipeStyles.row)}>
+			<Flex {...stylex.props(layout.grow)}>
+				<Choice
+					checked={false}
+					description={remaining(step) > 0 ? undefined : timeUp(step)}
+					disabled={!store.ready}
+					onCheckedChange={() => complete(step)}
+				>
+					{step.instruction}
+				</Choice>
+			</Flex>
+			{remaining(step) > 0 ? (
+				<Text
+					animated="numeric"
+					{...stylex.props(appearance.accent, recipeStyles.trailing)}
+				>
+					{clockText(remaining(step))}
+				</Text>
+			) : (
+				<Button
+					accessibilityLabel={`Add a minute: ${step.instruction}`}
+					disabled={!store.ready}
+					onClick={() => extend(step, Date.now())}
+					style={[button.secondary, button.sm, recipeStyles.trailing]}
+				>
+					<Text>+1 min</Text>
+				</Button>
+			)}
+		</Flex>
+	)
+	if (!store.value.cooking) {
+		return (
+			<FeatureFrame
+				onRetry={store.retry}
+				notice={store.error}
+				component="recipe"
+				title={props.title}
+				detail={timeSummary(props.steps, graph)}
+			>
+				{prep}
+				<FeatureAction
+					component="recipe"
+					icon="play"
+					size="lg"
+					variant="primary"
+					disabled={!store.ready}
+					onClick={() => store.set(() => ({ cooking: true }))}
+				>
+					Start cooking
+				</FeatureAction>
+			</FeatureFrame>
+		)
+	}
+	return (
+		<FeatureFrame
+			onRetry={store.retry}
+			notice={store.error}
+			component="recipe"
+			title={props.title}
+			trailing={
+				<Text {...stylex.props(roles.muted)}>
+					{`${format.formatNumber(done.length)} of ${format.formatNumber(props.steps.length)} done`}
+				</Text>
+			}
+		>
+			{prepOpen ? (
+				<>
+					{prep}
+					<Disclosure label="Hide ingredients" open onClick={() => setPrepOpen(false)} />
+				</>
+			) : (
+				<Disclosure
+					label={[
+						baseServings === null
+							? props.yield
+							: format.formatMessage(
+									{
+										defaultMessage: '{count, plural, one {# serving} other {# servings}}',
+										id: 'kowalski.recipe.servings',
+									},
+									{ count: store.value.servings }
+								),
+						format.formatMessage(
+							{
+								defaultMessage:
+									'{count, plural, one {# ingredient} other {# ingredients}}',
+								id: 'kowalski.recipe.ingredients',
+							},
+							{ count: props.ingredients.length }
+						),
+					]
+						.filter(Boolean)
+						.join(' · ')}
+					open={false}
+					onClick={() => setPrepOpen(true)}
+				/>
+			)}
+			{done.length > history.length && (
+				<Disclosure
+					label={format.formatMessage(
+						{
+							defaultMessage:
+								'{count, plural, one {Show # earlier step} other {Show # earlier steps}}',
+							id: 'kowalski.recipe.earlier',
+						},
+						{ count: done.length - history.length }
+					)}
+					open={false}
+					onClick={() => setShowEarlier(true)}
+				/>
+			)}
+			{history.length > 0 && (
+				<List style={completedTaskStyle}>
+					{history.map(step => (
+						<Choice
+							checked
+							disabled={!store.ready}
+							key={step.id}
+							onCheckedChange={() => reopen(step)}
+						>
+							{step.instruction}
+						</Choice>
+					))}
+				</List>
+			)}
+			{upcoming.length > 2 && (
+				<Disclosure
+					label={
+						showLater
+							? 'Show fewer'
+							: format.formatMessage(
+									{
+										defaultMessage:
+											'{count, plural, one {Show # more step} other {Show # more steps}}',
+										id: 'kowalski.recipe.later',
+									},
+									{ count: upcoming.length - 2 }
+								)
+					}
+					open={showLater}
+					onClick={() => setShowLater(current => !current)}
+				/>
+			)}
+			{next.length > 0 && <List>{next.map(nextRow)}</List>}
+			{timers.length > 0 && <List>{timers.map(timerRow)}</List>}
+			<FeatureWell>
+				{current ? (
+					<>
+						<Text {...stylex.props(roles.h2)}>{current.instruction}</Text>
+						{current.uses.length > 0 && (
+							<List>
+								{uses(current).map(use => (
+									<List.Item key={use.id} label={use.label} trailing={use.value} />
+								))}
+							</List>
+						)}
+						{[current.temperature, current.equipment?.join(', ')]
+							.filter(Boolean)
+							.map(detail => (
+								<Text key={detail} {...stylex.props(roles.muted)}>
+									{detail}
+								</Text>
+							))}
+						<FeatureAction
+							component="recipe"
+							icon={timerMinutes(current) === null ? 'checkmark' : 'timer'}
+							size="lg"
+							variant="primary"
+							disabled={!store.ready}
+							onClick={() => {
+								const minutes = timerMinutes(current)
+								if (minutes === null) {
+									complete(current)
+								} else {
+									start(current, Date.now() + minutes * 60_000)
+								}
+							}}
+						>
+							{timerMinutes(current) === null ? 'Done' : `Start ${current.duration?.raw}`}
+						</FeatureAction>
+					</>
+				) : awaited ? (
+					<>
+						<Text {...stylex.props(roles.h2)}>{awaited.instruction}</Text>
+						{remaining(awaited) > 0 ? (
+							<Text
+								animated="numeric"
+								{...stylex.props(roles.display, appearance.accent)}
+							>
+								{clockText(remaining(awaited))}
+							</Text>
+						) : (
+							<Text {...stylex.props(roles.muted)}>{timeUp(awaited)}</Text>
+						)}
+						<Flex {...stylex.props(layout.actions)}>
+							<FeatureAction
+								component="recipe"
+								icon="checkmark"
+								size="lg"
+								variant={remaining(awaited) > 0 ? 'secondary' : 'primary'}
+								disabled={!store.ready}
+								onClick={() => complete(awaited)}
+							>
+								Done
+							</FeatureAction>
+							{remaining(awaited) <= 0 && (
+								<FeatureAction
+									component="recipe"
+									size="lg"
+									variant="secondary"
+									disabled={!store.ready}
+									onClick={() => extend(awaited, Date.now())}
+								>
+									+1 min
+								</FeatureAction>
+							)}
+						</Flex>
+					</>
+				) : (
+					<>
+						<Text {...stylex.props(roles.h2)}>All done</Text>
+						<FeatureAction
+							component="recipe"
+							variant="quiet"
+							disabled={!store.ready}
+							onClick={() =>
+								store.set(() => ({
+									cooking: false,
+									...Object.fromEntries(
+										props.steps.map(step => [
+											`step_${step.id}`,
+											{ done: false, endsAt: null },
+										])
+									),
+								}))
+							}
+						>
+							Cook again
+						</FeatureAction>
+					</>
+				)}
+			</FeatureWell>
+		</FeatureFrame>
+	)
+}
+
+function Disclosure({
+	label,
+	onClick,
+	open,
+}: {
+	label: string
+	onClick: () => void
+	open: boolean
+}) {
+	return (
+		<Button onClick={onClick} style={[button.quiet, button.sm, recipeStyles.disclosure]}>
+			<Flex {...stylex.props(layout.actionContent)}>
+				<Text>{label}</Text>
+				<Icon name={open ? 'chevron.up' : 'chevron.down'} />
+			</Flex>
+		</Button>
+	)
+}
+
+const recipeStyles = stylex.create({
+	disclosure: { alignSelf: 'flex-start', paddingLeft: 0, paddingRight: 0 },
+	row: { alignItems: 'center', columnGap: space[3], flexDirection: 'row' },
+	trailing: { flexShrink: 0 },
+	waiting: { opacity: 0.5 },
+})
+
+/** Kitchen fractions below 10 (2¼ cups) and whole numbers above (533 mL). */
+function amount(value: number) {
+	return value >= 10
+		? format.formatNumber(Math.round(value))
+		: (formatQuantity(value, { vulgarFractions: true }) ?? format.formatNumber(value))
+}
+
+/** RGF defaults attention to passive for wait steps and active otherwise. */
+function attention(step: Step) {
+	return step.attention ?? (step.kind === 'wait' ? 'passive' : 'active')
+}
+
+function clockText(seconds: number) {
+	return Duration.fromObject({ seconds }).toFormat(seconds >= 3600 ? 'h:mm:ss' : 'm:ss')
+}
+
+/** An ingredient's scaled amount with its unit, or the unit alone ("a pinch"). */
+function quantity(ingredient: Ingredient, factor: number) {
+	return ingredient.amount === undefined
+		? ingredient.unit
+		: [amount(ingredient.amount * factor), ingredient.unit].filter(Boolean).join(' ')
+}
+
+/** Prerequisites join after with the steps whose outputs a step uses. */
+function recipeGraph(steps: Step[]) {
+	const producers = new Map(
+		steps.flatMap(step =>
+			(step.outputs ?? []).map(output => [output.id, step.id] as const)
+		)
+	)
+	const outputs = new Map(
+		steps.flatMap(step =>
+			(step.outputs ?? []).map(
+				output => [output.id, output.name ?? stepName(step)] as const
+			)
+		)
+	)
+	const prerequisites = new Map(
+		steps.map(step => [
+			step.id,
+			[
+				...new Set([
+					...(step.after ?? []),
+					...step.uses.flatMap(use =>
+						use.source.kind === 'output' ? [producers.get(use.source.outputId) ?? ''] : []
+					),
+				]),
+			].filter(Boolean),
+		])
+	)
+	// The longest timed chain from each step onward; edges only point back, so walk in reverse.
+	const chainFor = (minutes: (step: Step) => number) => {
+		const chain = new Map<string, number>()
+		for (const step of steps.toReversed()) {
+			const next = steps.filter(other => prerequisites.get(other.id)?.includes(step.id))
+			chain.set(
+				step.id,
+				minutes(step) + Math.max(0, ...next.map(other => chain.get(other.id) ?? 0))
+			)
+		}
+		return chain
+	}
+	return {
+		chain: chainFor(step => step.duration?.maxMinutes ?? step.duration?.minMinutes ?? 0),
+		outputs,
+		prerequisites,
+		shortest: chainFor(
+			step => step.duration?.minMinutes ?? step.duration?.maxMinutes ?? 0
+		),
+	}
+}
+
+function stepName(step: Step | undefined) {
+	return step?.label ?? step?.outputs?.[0]?.name ?? step?.instruction ?? ''
+}
+
+/** Total time follows the longest chain, so parallel branches overlap; hands-on sums active steps. */
+function timeSummary(steps: Step[], graph: ReturnType<typeof recipeGraph>) {
+	const longest = Math.max(0, ...graph.chain.values())
+	const shortest = Math.max(0, ...graph.shortest.values())
+	const handsOn = steps
+		.filter(step => attention(step) === 'active')
+		.reduce((total, step) => total + (timerMinutes(step) ?? 0), 0)
+	if (longest === 0) {
+		return undefined
+	}
+	const total = `${timeText(shortest, longest)} total`
+	return handsOn > 0 ? `${total}, ${timeText(handsOn, handsOn)} hands-on` : total
+}
+
+function timeText(low: number, high: number) {
+	const hours = high >= 60
+	const units = format.formatters.getNumberFormat(format.locale, {
+		maximumFractionDigits: 1,
+		style: 'unit',
+		unit: hours ? 'hour' : 'minute',
+		unitDisplay: 'short',
+	})
+	const scale = hours ? 60 : 1
+	return low === high
+		? units.format(high / scale)
+		: units.formatRange(low / scale, high / scale)
+}
+
+function timerMinutes(step: Step) {
+	return step.duration?.minMinutes ?? step.duration?.maxMinutes ?? null
+}

package/node_modules/@flickfyi/core/src/kowalski/stories/composition.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { previewTheme } from '~/storybook/theme-fixtures'
+
+import { FamilyRoutineComposition, TrainingComposition } from './composition'
+import compositionSource from './composition.tsx?raw'
+
+const meta = {
+	component: TrainingComposition,
+	globals: { hue: 145, theme: 'athletic' },
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'Persistent Core features arranged as real apps. Change the theme or unit in the toolbar: progress, timer state, and checklist completion keep the same store bindings.',
+			},
+			source: { code: compositionSource, language: 'tsx' },
+		},
+	},
+	render: (_args, { globals }) => <TrainingComposition theme={previewTheme(globals)} />,
+	title: 'Kowalski/Compositions',
+} satisfies Meta<typeof TrainingComposition>
+
+export default meta
+
+export const Athletic: StoryObj<typeof meta> = { name: 'Track day · Athletic' }
+
+export const Compact: StoryObj<typeof meta> = {
+	globals: { theme: 'compact' },
+	name: 'Track day · Compact',
+}
+
+export const Kids: StoryObj<typeof meta> = {
+	globals: { hue: 286, theme: 'kids' },
+	name: 'Family routine · Kids',
+	render: (_args, { globals }) => (
+		<FamilyRoutineComposition theme={previewTheme(globals)} />
+	),
+}
+
+export const FamilyCompact: StoryObj<typeof meta> = {
+	globals: { hue: 286, theme: 'compact' },
+	name: 'Family routine · Compact',
+	render: (_args, { globals }) => (
+		<FamilyRoutineComposition theme={previewTheme(globals)} />
+	),
+}

package/node_modules/@flickfyi/core/src/kowalski/stories/composition.tsx

@@ -0,0 +1,100 @@
+import { Flex, Text, useTheme } from '@flickfyi/core'
+import { Checklist, Goal, Timer } from '@flickfyi/core/kowalski'
+import themes from '@flickfyi/core/themes'
+import * as stylex from '@stylexjs/stylex'
+
+import { space, text } from '~/themes/scale.stylex'
+
+type CompositionTheme = ReturnType<(typeof themes)[keyof typeof themes]>
+
+/** One persistent workout, unchanged when the app switches its theme or density. */
+export function TrainingComposition({ theme = athletic }: { theme?: CompositionTheme }) {
+	useTheme(theme)
+
+	return (
+		<Flex {...stylex.props(styles.page)}>
+			<Flex {...stylex.props(styles.heading)}>
+				<Text {...stylex.props(theme.muted)}>400 m track · steady effort</Text>
+				<Text {...stylex.props(theme.h1, styles.title)}>Track day</Text>
+			</Flex>
+			<Flex {...stylex.props(styles.workout)}>
+				<Flex {...stylex.props(styles.feature)}>
+					<Goal
+						id="TrackDayLaps"
+						progress={3}
+						target={8}
+						title="Your laps"
+						unit="laps"
+					/>
+				</Flex>
+				<Flex {...stylex.props(styles.feature)}>
+					<Timer
+						durationSeconds={90}
+						id="TrackDayRecovery"
+						mode="break"
+						title="Catch your breath"
+					/>
+				</Flex>
+			</Flex>
+			<Flex {...stylex.props(styles.preparation)}>
+				<Checklist
+					id="TrackDayPreparation"
+					items={[
+						{ id: 'water', label: 'Fill your water bottle' },
+						{ id: 'warmup', label: 'Walk a lap and loosen up' },
+						{ id: 'laces', label: 'Check your laces' },
+					]}
+					title="Before the first lap"
+				/>
+			</Flex>
+		</Flex>
+	)
+}
+
+/** The same family routine works with Kids' large controls and Compact's density. */
+export function FamilyRoutineComposition({ theme = kids }: { theme?: CompositionTheme }) {
+	useTheme(theme)
+
+	return (
+		<Flex {...stylex.props(styles.page)}>
+			<Flex {...stylex.props(styles.heading)}>
+				<Text {...stylex.props(theme.h1, styles.title)}>Evening routine</Text>
+			</Flex>
+			<Checklist
+				id="FamilyRoutineEvening"
+				items={[
+					{ id: 'toys', label: 'Give every toy a home' },
+					{ id: 'bag', label: 'Pack tomorrow’s bag' },
+					{ id: 'teeth', label: 'Brush those teeth' },
+				]}
+				title="Three small things"
+			/>
+			<Flex {...stylex.props(styles.preparation)}>
+				<Timer durationSeconds={600} id="FamilyRoutineStory" title="Time for a story" />
+			</Flex>
+		</Flex>
+	)
+}
+
+const athletic = themes.athletic({ hue: 145 })
+const kids = themes.kids({ hue: 286 })
+
+const styles = stylex.create({
+	feature: { flexBasis: '20rem', flexGrow: 1, minWidth: 0 },
+	heading: { gap: space[2], padding: space[3] },
+	page: {
+		alignItems: 'stretch',
+		alignSelf: 'center',
+		gap: space[4],
+		maxWidth: '72rem',
+		width: '100%',
+	},
+	preparation: { paddingTop: 0 },
+	title: { fontSize: text['2xl'], lineHeight: text['2xlLeading'] },
+	workout: {
+		alignItems: 'flex-start',
+		flexDirection: 'row',
+		flexWrap: 'wrap',
+		gap: space[4],
+	},
+})