@flickfyi/flkr 0.0.182 → 0.0.185

package/node_modules/@flickfyi/core/src/themes/stories/gallery.tsx

@@ -2,13 +2,7 @@
 import { Text } from '@flickfyi/core'
 import { Button } from '@flickfyi/core/atoms'
 import { theme as sharedTheme } from '@flickfyi/core/examples/parrott/theme'
-import {
-	Card,
-	Choice,
-	completedTaskStyle,
-	List,
-	Stat,
-} from '@flickfyi/core/molecules'
+import { Card, Choice, completedTaskStyle, List, Stat } from '@flickfyi/core/molecules'
 import * as stylex from '@stylexjs/stylex'
 import { useState } from 'react'
 
@@ -61,10 +55,12 @@ function GalleryCell({
 // One errand, each role saying something different: what to buy, what is left to spend.
 function GalleryCard() {
 	const [bought, setBought] = useState<string[]>([])
-	const left = budget - groceries.reduce(
-		(total, item) => total + (bought.includes(item.name) ? item.price : 0),
-		0
-	)
+	const left =
+		budget -
+		groceries.reduce(
+			(total, item) => total + (bought.includes(item.name) ? item.price : 0),
+			0
+		)
 	return (
 		<Card>
 			<Card.Header>

package/node_modules/@flickfyi/core/tsgo.bun.lock

@@ -5,7 +5,7 @@
     "": {
       "name": "typescript-server-modules",
       "dependencies": {
-        "@flickfyi/core": "0.0.69",
+        "@flickfyi/core": "0.0.72",
         "@flickfyi/lens": "0.0.7",
         "@flickfyi/photon": "0.0.36",
         "@formatjs/intl": "6.1.3",
@@ -45,7 +45,7 @@
       "sha512-3RQHgEtvL1Frl/d1cSreo7qhJ3Gk1OdNUai/CtZ8G+wYeRQnJih3s9xJ9/kgYekPQRdwgh0HXRPqMlzWGwivIQ=="
     ],
     "@flickfyi/core": [
-      "@flickfyi/core@0.0.69",
+      "@flickfyi/core@0.0.72",
       "",
       {
         "dependencies": {
@@ -74,7 +74,7 @@
         },
         "hasInstallScript": true
       },
-      "sha512-c+3Faaf/qRsrtfpginA9a38+k3ROp9cuv8tiH4lwa70JWgCuVobaF96t5KZmUMJMlg2LGZEwDadW+MEeqYEl6g=="
+      "sha512-HkM/Xoh4SH+RULhHRU+Rj98NYLPjZ2eJtNENx8DJJU2RU4SIiQt5M2sn5gDFBqCF7tdz1DOSnaNKxxQrXh5gnQ=="
     ],
     "@flickfyi/lens": [
       "@flickfyi/lens@0.0.7",
@@ -89,7 +89,7 @@
           "zod": "^3.25.0 || ^4.0.0"
         }
       },
-      "sha512-uLm9ZhDO3MQx5yR2txwp/O9iZsG/uaxuWGP8NBQbqgtYpt5RjUgxBkVerNjimlI4YizNEu6vNycte3wbmonjmw=="
+      "sha512-qZbLDJAOgYsPIJ3Dd7oQjNsr22eaf03Jy8uDdqk9QEyQ3e6dLInmnSRP2JXmXhp+32GHOS8zw+1xSD6PmmtUAg=="
     ],
     "@flickfyi/photon": [
       "@flickfyi/photon@0.0.36",
@@ -102,7 +102,7 @@
           "zod": "4.6.7"
         }
       },
-      "sha512-FCxHUqUHgWzaTF3KhuqgxisY6WxAr9Wn8B0ei/z0kaRA7H1w5F1UNIwWV3s9u0S5OVxRkfcQIDTtkmv9xusHug=="
+      "sha512-jBUmt1CehM0fcY/uBLt8J5DTUMApl73zSHy1m1J6GJl2jjNo968qoStA4ovYPuQZcJp9uBcBhG6zYoD9UrcoNg=="
     ],
     "@formatjs/fast-memoize": [
       "@formatjs/fast-memoize@3.1.7",
@@ -574,10 +574,10 @@
       "sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng=="
     ],
     "tslib": [
-      "tslib@2.8.1",
+      "tslib@2.9.1",
       "",
       {},
-      "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "sha512-a4Ux9VKuIMHsOS7ENbEq6hK2ZGYIT27Rtl0E4eD9KqwxhKiQeMZE/9xb3IdYwWaSOyIBQLExhQgXDTYoiCxnWA=="
     ],
     "type-fest": [
       "type-fest@5.10.0",

package/node_modules/@flickfyi/core/tsgo.package.json

@@ -110,7 +110,7 @@
     "minifyIdentifiers": true
   },
   "dependencies": {
-    "@flickfyi/core": "0.0.69",
+    "@flickfyi/core": "0.0.72",
     "@flickfyi/lens": "0.0.7",
     "@flickfyi/photon": "0.0.36",
     "@react-spring/core": "10.1.2",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@flickfyi/flkr",
-	"version": "0.0.182",
+	"version": "0.0.185",
 	"description": "A tool for managing your Flicks",
 	"homepage": "https://flick.fyi/docs/flkr/quick-start",
 	"bugs": {
@@ -52,7 +52,7 @@
 	},
 	"dependencies": {
 		"@flickfyi/biscuit": "0.0.2",
-		"@flickfyi/core": "0.0.69",
+		"@flickfyi/core": "0.0.72",
 		"@flickfyi/http-message-sig": "0.0.0",
 		"@flickfyi/identity": "0.0.0",
 		"@flickfyi/photon": "0.0.36",

package/node_modules/@flickfyi/core/dist-types/kowalski/clocks.d.ts

@@ -1,4 +0,0 @@
-import { KowalskiInput } from './catalog.js';
-export declare function Timer(input: KowalskiInput<'timer'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Countdown(input: KowalskiInput<'countdown'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function TimeZone(input: KowalskiInput<'timeZone'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;

package/node_modules/@flickfyi/core/dist-types/kowalski/details.d.ts

@@ -1,7 +0,0 @@
-import { KowalskiInput } from './catalog.js';
-export declare function Event(input: KowalskiInput<'event'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Reminder(input: KowalskiInput<'reminder'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Trip(input: KowalskiInput<'trip'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Contact(input: KowalskiInput<'contact'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Bookmark(input: KowalskiInput<'bookmark'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Note(input: KowalskiInput<'note'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;

package/node_modules/@flickfyi/core/dist-types/kowalski/productivity.d.ts

@@ -1,5 +0,0 @@
-import { KowalskiInput } from './catalog.js';
-export declare function Checklist(input: KowalskiInput<'checklist'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Goal(input: KowalskiInput<'goal'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Habit(input: KowalskiInput<'habit'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Poll(input: KowalskiInput<'poll'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;

package/node_modules/@flickfyi/core/dist-types/kowalski/tools.d.ts

@@ -1,7 +0,0 @@
-import { KowalskiInput } from './catalog.js';
-export declare function BillSplit(input: KowalskiInput<'billSplit'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Expense(input: KowalskiInput<'expense'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function UnitConverter(input: KowalskiInput<'unitConverter'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function Calculator(input: KowalskiInput<'calculator'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function RandomPicker(input: KowalskiInput<'randomPicker'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;
-export declare function ColorPalette(input: KowalskiInput<'colorPalette'>): import('@flickfyi/photon/jsx-runtime').JSX.Element;

package/node_modules/@flickfyi/core/dist-types/kowalski/use-feature-store.d.ts

@@ -1,15 +0,0 @@
-import { z } from 'zod/v4';
-/** Wait for authoritative Quantum data; writes are optimistic only after hydration. */
-export declare function useFeatureStore<T extends object>({ initialState, name, schema, scope, }: {
-    initialState: T;
-    name: string;
-    schema: z.ZodType<T>;
-    scope?: 'private' | 'public';
-}): {
-    error: string | undefined;
-    ready: boolean;
-    retry: (() => void) | undefined;
-    saving: boolean;
-    set: (update: Partial<T> | ((current: T) => Partial<T>), onSaved?: () => void) => boolean;
-    value: T;
-};

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

@@ -1,464 +0,0 @@
-import { Flex, Text } from '@flickfyi/core'
-import * as stylex from '@stylexjs/stylex'
-import { DateTime, Duration } from 'luxon'
-import { useState } from 'react'
-
-import { space, text } from '~/themes/scale.stylex'
-import { appearance, roles } from '~/themes/shared'
-import { font } from '~/themes/tokens.stylex'
-
-import { elapsedSeconds } from './calculations'
-import { kowalskiCatalog, type KowalskiInput } from './catalog'
-import { FeatureDateTime } from './date-time'
-import { format } from './format'
-import {
-	FeatureAction,
-	FeatureFrame,
-	FeatureProgress,
-	FeatureWell,
-	layout,
-} from './frame'
-import { useClock } from './use-clock'
-import { useConfiguredFeature } from './use-configured-feature'
-
-export function Timer(input: KowalskiInput<'timer'>) {
-	const props = kowalskiCatalog.timer.props.parse(input)
-	const schema = kowalskiCatalog.timer.storeSchema
-	const store = useConfiguredFeature({
-		name: props.id ?? 'KowalskiTimer',
-		revision: props.revision,
-		schema,
-		scope: props.scope,
-		seed: schema.parse({}),
-	})
-	const stopwatch = props.mode === 'stopwatch'
-	const complete =
-		!stopwatch && elapsedSeconds(store.value, Date.now()) >= props.durationSeconds
-	const now = useClock(store.value.startedAt !== null && !complete)
-	const elapsed = complete ? props.durationSeconds : elapsedSeconds(store.value, now)
-	const remaining = Math.max(0, props.durationSeconds - elapsed)
-	const running = store.value.startedAt !== null && !complete
-	const clockSeconds = stopwatch ? Math.floor(elapsed) : Math.ceil(remaining)
-	const showHours = (stopwatch ? clockSeconds : props.durationSeconds) >= 3600
-	// Older JavaScriptCore versions misplace separators when Intl hides zero hours.
-	const clockParts = format.formatDurationToParts(
-		Duration.fromObject({ seconds: clockSeconds })
-			.shiftTo('hours', 'minutes', 'seconds')
-			.toObject(),
-		{
-			hours: '2-digit',
-			hoursDisplay: 'always',
-			minutes: '2-digit',
-			minutesDisplay: 'always',
-			seconds: '2-digit',
-			secondsDisplay: 'always',
-			style: 'digital',
-		}
-	)
-	const clock = clockParts
-		.slice(showHours ? 0 : clockParts.findIndex(part => part.unit === 'minute'))
-		.map(part => part.value)
-		.join('')
-	const modeLabel =
-		props.mode === 'focus'
-			? 'Focus session'
-			: props.mode === 'break'
-				? 'Break time'
-				: stopwatch
-					? 'Stopwatch'
-					: 'Countdown timer'
-	const status = store.saving
-		? 'Saving…'
-		: !store.ready && !store.error
-			? 'Loading…'
-			: complete
-				? 'Complete'
-				: running
-					? 'Running'
-					: elapsed > 0
-						? 'Paused'
-						: 'Ready'
-	return (
-		<FeatureFrame
-			onRetry={store.retry}
-			notice={store.error}
-			component="timer"
-			title={props.title}
-			detail={modeLabel}
-			trailing={
-				<Text {...stylex.props(roles.muted, (running || complete) && appearance.accent)}>
-					{status}
-				</Text>
-			}
-		>
-			<FeatureWell style={timerStyles.clock}>
-				<Text
-					animated={running ? 'numeric' : undefined}
-					{...stylex.props(roles.display, timerStyles.digits(clock.length))}
-				>
-					{clock}
-				</Text>
-				<Text {...stylex.props(roles.muted)}>
-					{complete ? 'Time’s up' : stopwatch ? 'Time elapsed' : 'Time remaining'}
-				</Text>
-				{!stopwatch && (
-					<FeatureProgress component="timer" value={elapsed / props.durationSeconds} />
-				)}
-			</FeatureWell>
-			<Flex {...stylex.props(layout.actions)}>
-				<Flex {...stylex.props(timerStyles.primary)}>
-					<FeatureAction
-						component="timer"
-						icon={complete ? 'arrow.counterclockwise' : running ? 'pause' : 'play'}
-						variant="primary"
-						disabled={!store.ready}
-						onClick={() =>
-							store.set(current => {
-								const instant = Date.now()
-								if (complete) {
-									return { elapsedSeconds: 0, startedAt: instant }
-								}
-								const currentElapsed = elapsedSeconds(current, instant)
-								return current.startedAt === null
-									? { startedAt: instant }
-									: {
-											elapsedSeconds: stopwatch
-												? currentElapsed
-												: Math.min(props.durationSeconds, currentElapsed),
-											startedAt: null,
-										}
-							})
-						}
-					>
-						{complete
-							? 'Start again'
-							: running
-								? 'Pause'
-								: elapsed > 0
-									? 'Resume'
-									: 'Start'}
-					</FeatureAction>
-				</Flex>
-				<FeatureAction
-					component="timer"
-					variant="quiet"
-					disabled={!store.ready || (elapsed === 0 && store.value.startedAt === null)}
-					onClick={() => store.set(() => ({ elapsedSeconds: 0, startedAt: null }))}
-				>
-					Reset
-				</FeatureAction>
-			</Flex>
-		</FeatureFrame>
-	)
-}
-
-export function Countdown(input: KowalskiInput<'countdown'>) {
-	const props = kowalskiCatalog.countdown.props.parse(input)
-	const schema = kowalskiCatalog.countdown.storeSchema
-	const store = useConfiguredFeature({
-		name: props.id ?? 'KowalskiCountdown',
-		revision: props.revision,
-		schema,
-		scope: props.scope,
-		seed: schema.parse({ target: { value: props.target } }),
-	})
-	const now = useClock()
-	const target = store.value.target.value
-		? Date.parse(store.value.target.value)
-		: undefined
-	const seconds = target === undefined ? 0 : Math.max(0, Math.ceil((target - now) / 1000))
-	const units = [
-		{ label: 'day', value: Math.floor(seconds / 86_400) },
-		{ label: 'hour', value: Math.floor((seconds % 86_400) / 3600) },
-		{ label: 'minute', value: Math.floor((seconds % 3600) / 60) },
-		{ label: 'second', value: seconds % 60 },
-	]
-	const leadingIndex = seconds >= 86_400 ? 0 : seconds >= 3600 ? 1 : seconds >= 60 ? 2 : 3
-	const leading = units[leadingIndex]
-	const amount = format.formatNumber(leading.value)
-	return (
-		<FeatureFrame
-			onRetry={store.retry}
-			notice={store.error}
-			component="countdown"
-			title={props.title}
-		>
-			<FeatureWell style={countdownStyles.remaining}>
-				<Text
-					animated={seconds > 0 ? 'numeric' : undefined}
-					{...stylex.props(
-						roles.display,
-						countdownStyles.amount(amount.length),
-						seconds === 0 && countdownStyles.arrived
-					)}
-				>
-					{target === undefined ? '—' : seconds === 0 ? 'It’s time' : amount}
-				</Text>
-				<Text {...stylex.props(roles.muted)}>
-					{target === undefined
-						? 'Choose a target below'
-						: seconds === 0
-							? 'Your countdown has arrived'
-							: `${format.formatNumberToParts(leading.value, { style: 'unit', unit: leading.label, unitDisplay: 'long' }).find(part => part.type === 'unit')?.value} to go`}
-				</Text>
-				{seconds > 0 && leadingIndex < 3 && (
-					<Flex {...stylex.props(countdownStyles.units)}>
-						{units.slice(leadingIndex + 1).map(unit => (
-							<Flex key={unit.label} {...stylex.props(countdownStyles.unit)}>
-								<Text animated="numeric" {...stylex.props(roles.strong)}>
-									{format.formatNumber(unit.value)}
-								</Text>
-								<Text {...stylex.props(roles.muted)}>
-									{
-										format
-											.formatNumberToParts(unit.value, {
-												style: 'unit',
-												unit: unit.label,
-												unitDisplay: 'long',
-											})
-											.find(part => part.type === 'unit')?.value
-									}
-								</Text>
-							</Flex>
-						))}
-					</Flex>
-				)}
-			</FeatureWell>
-			<FeatureDateTime
-				component="countdown"
-				label="Target date & time"
-				ready={store.ready}
-				saving={store.saving}
-				timeZone={props.timeZone}
-				value={store.value.target.value || null}
-				onChange={(target, onSaved) =>
-					target === null
-						? false
-						: store.set(() => ({ target: { value: target } }), onSaved)
-				}
-			/>
-		</FeatureFrame>
-	)
-}
-
-export function TimeZone(input: KowalskiInput<'timeZone'>) {
-	const props = kowalskiCatalog.timeZone.props.parse(input)
-	const schema = kowalskiCatalog.timeZone.storeSchema
-	const store = useConfiguredFeature({
-		name: props.id ?? 'KowalskiTimeZone',
-		revision: props.revision,
-		schema,
-		scope: props.scope,
-		seed: schema.parse({ at: { value: props.at } }),
-	})
-	const [editing, setEditing] = useState(false)
-	const live = store.value.at.value === null
-	const now = useClock(live)
-	const instant = store.value.at.value ? Date.parse(store.value.at.value) : now
-	const referenceZone = props.zones[0]
-	const referenceCity = referenceZone.split('/').at(-1)?.replaceAll('_', ' ')
-	const reference = DateTime.fromMillis(instant, { locale: 'en', zone: referenceZone })
-	const referenceDate = DateTime.utc(reference.year, reference.month, reference.day)
-	return (
-		<FeatureFrame
-			onRetry={store.retry}
-			notice={store.error}
-			component="timeZone"
-			title={props.title}
-			detail={`Times relative to ${referenceCity}`}
-			trailing={
-				<Text {...stylex.props(roles.muted, live && appearance.accent)}>
-					{store.saving
-						? 'Saving…'
-						: !store.ready && !store.error
-							? 'Loading…'
-							: live
-								? 'Live'
-								: 'Fixed time'}
-				</Text>
-			}
-		>
-			<Flex {...stylex.props(timeZoneStyles.clocks)}>
-				{props.zones.map((zone, index) => {
-					const local = reference.setZone(zone)
-					const days = DateTime.utc(local.year, local.month, local.day).diff(
-						referenceDate,
-						'days'
-					).days
-					const minutes = local.offset - reference.offset
-					const difference = format.formatDuration(
-						Duration.fromObject({ minutes: Math.abs(minutes) })
-							.shiftTo('hours', 'minutes', 'seconds')
-							.toObject(),
-						{ style: 'long' }
-					)
-					const clockParts = format.formatTimeToParts(instant, {
-						fractionalSecondDigits: !live && local.millisecond !== 0 ? 3 : undefined,
-						hour: 'numeric',
-						hour12: true,
-						minute: '2-digit',
-						second:
-							!live && (local.second !== 0 || local.millisecond !== 0)
-								? '2-digit'
-								: undefined,
-						timeZone: zone,
-					})
-					const clock = clockParts
-						.filter(part => part.type !== 'dayPeriod')
-						.map(part => part.value)
-						.join('')
-						.trim()
-					return (
-						<FeatureWell key={`${zone}:${index}`}>
-							<Flex {...stylex.props(timeZoneStyles.zoneRow)}>
-								<Flex {...stylex.props(timeZoneStyles.city)}>
-									<Text {...stylex.props(roles.h2)}>
-										{zone.split('/').at(-1)?.replaceAll('_', ' ')}
-									</Text>
-									<Text {...stylex.props(roles.muted)}>
-										{index === 0
-											? 'Reference'
-											: minutes === 0
-												? 'Same time'
-												: `${difference} ${minutes > 0 ? 'ahead' : 'behind'}`}
-									</Text>
-									{days !== 0 && (
-										<Text {...stylex.props(roles.muted, appearance.accent)}>
-											{days === 1
-												? 'Next day'
-												: days === -1
-													? 'Previous day'
-													: `${format.formatNumber(Math.abs(days))} days ${days > 0 ? 'ahead' : 'behind'}`}
-										</Text>
-									)}
-								</Flex>
-								<Flex {...stylex.props(timeZoneStyles.local)}>
-									<Flex {...stylex.props(timeZoneStyles.time)}>
-										<Text
-											animated={live ? 'numeric' : undefined}
-											{...stylex.props(
-												roles.display,
-												timeZoneStyles.digits(clock.length)
-											)}
-										>
-											{clock}
-										</Text>
-										<Text {...stylex.props(roles.muted, timeZoneStyles.period)}>
-											{clockParts.find(part => part.type === 'dayPeriod')?.value}
-										</Text>
-									</Flex>
-									<Text {...stylex.props(roles.muted)}>
-										{format.formatDate(instant, {
-											day: 'numeric',
-											...(local.year <= 0 ? { era: 'short', year: 'numeric' } : {}),
-											month: 'short',
-											weekday: 'short',
-											timeZone: zone,
-										})}
-									</Text>
-								</Flex>
-							</Flex>
-						</FeatureWell>
-					)
-				})}
-			</Flex>
-			<FeatureDateTime
-				actionLabel="Compare another time"
-				compact
-				component="timeZone"
-				label={`Comparison time · ${referenceCity}`}
-				ready={store.ready}
-				saving={store.saving}
-				submitLabel="Compare this time"
-				timeZone={referenceZone}
-				value={store.value.at.value}
-				onChange={(at, onSaved) => store.set(() => ({ at: { value: at } }), onSaved)}
-				onEditingChange={setEditing}
-			/>
-			{!live && (
-				<FeatureAction
-					component="timeZone"
-					icon="clock"
-					disabled={!store.ready || store.saving || editing}
-					onClick={() => store.set(() => ({ at: { value: null } }))}
-				>
-					Return to live
-				</FeatureAction>
-			)}
-			{!live && editing && !store.saving && (
-				<Text {...stylex.props(roles.muted)}>
-					Save or cancel your comparison before returning to live.
-				</Text>
-			)}
-		</FeatureFrame>
-	)
-}
-
-// Long readings step down the display scale so they never overflow their well.
-const timeZoneStyles = stylex.create({
-	city: { flexBasis: space[24], flexGrow: 1, gap: space[1], minWidth: 0 },
-	clocks: { gap: space[2] },
-	digits: (length: number) => ({
-		fontSize: length > 8 ? text['2xl'] : length > 5 ? text['3xl'] : text['4xl'],
-		lineHeight:
-			length > 8
-				? text['2xlLeading']
-				: length > 5
-					? text['3xlLeading']
-					: text['4xlLeading'],
-	}),
-	local: { alignItems: 'flex-end', flexGrow: 1, gap: space[1], textAlign: 'right' },
-	period: { marginBottom: space[1] },
-	time: { alignItems: 'flex-end', flexDirection: 'row', gap: space[1.5] },
-	zoneRow: {
-		alignItems: 'center',
-		flexDirection: 'row',
-		flexWrap: 'wrap',
-		gap: space[3],
-	},
-})
-
-const timerStyles = stylex.create({
-	clock: { alignItems: 'stretch', gap: space[3], textAlign: 'center' },
-	digits: (length: number) => ({
-		fontSize:
-			length > 11
-				? text['3xl']
-				: length > 8
-					? text['4xl']
-					: length > 5
-						? text['5xl']
-						: font.displaySize,
-		lineHeight:
-			length > 11
-				? text['3xlLeading']
-				: length > 8
-					? text['4xlLeading']
-					: length > 5
-						? text['5xlLeading']
-						: font.displayLeading,
-	}),
-	primary: { flexBasis: 0, flexGrow: 1, minWidth: 0 },
-})
-
-const countdownStyles = stylex.create({
-	amount: (length: number) => ({
-		fontSize: length > 6 ? text['4xl'] : length > 4 ? text['6xl'] : font.displaySize,
-		lineHeight:
-			length > 6
-				? text['4xlLeading']
-				: length > 4
-					? text['6xlLeading']
-					: font.displayLeading,
-	}),
-	arrived: { fontSize: text['4xl'], lineHeight: text['4xlLeading'] },
-	remaining: { alignItems: 'stretch', gap: space[2], textAlign: 'center' },
-	unit: { alignItems: 'baseline', flexDirection: 'row', gap: space[1] },
-	units: {
-		columnGap: space[3],
-		flexDirection: 'row',
-		flexWrap: 'wrap',
-		justifyContent: 'center',
-		rowGap: space[1],
-	},
-})