@wasto/cms-components 1.5.10 → 1.5.12

package/src/components/locations-map/LocationSheet.tsx

@@ -1,417 +1,417 @@
-import { Linking, Platform, Pressable, ScrollView, Share, StyleSheet, Text, View } from "react-native";
-import {
-    ChevronUp,
-    Clock,
-    Copy,
-    MapPin,
-    Phone,
-    X,
-} from "lucide-react-native";
-import { useEffect, useState, type ReactNode } from "react";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-    Easing,
-    interpolate,
-    runOnJS,
-    useAnimatedStyle,
-    useSharedValue,
-    withTiming,
-} from "react-native-reanimated";
-import { useTheme } from "../../contexts/ThemeContext";
-import { Theme } from "../../types/Theme";
-import { Button } from "../button/Button";
-import {
-    LOCATION_CATEGORY_META,
-    type MapLocation,
-} from "../../hooks/useLocations";
-import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-
-export type LocationSheetProps = {
-    location: MapLocation;
-    onClose: () => void;
-};
-
-const ENTER = { duration: 280, easing: Easing.out(Easing.cubic) };
-const HOURS_ANIM = { duration: 240, easing: Easing.out(Easing.cubic) };
-const DISMISS_Y = 96;
-const DISMISS_V = 900;
-
-async function copyText(value: string) {
-    try {
-        const webNav = (
-            globalThis as {
-                navigator?: { clipboard?: { writeText: (v: string) => Promise<void> } };
-            }
-        ).navigator;
-        if (Platform.OS === "web" && webNav?.clipboard?.writeText) {
-            await webNav.clipboard.writeText(value);
-            return;
-        }
-        await Share.share({ message: value });
-    } catch {
-        // ignore copy failures
-    }
-}
-
-export function LocationSheet({
-    location,
-    onClose,
-}: LocationSheetProps): ReactNode {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const themedStyles = createThemedStyles(theme);
-    const meta = LOCATION_CATEGORY_META[location.category];
-    const [hoursOpen, setHoursOpen] = useState(false);
-    const translateY = useSharedValue(48);
-    const opacity = useSharedValue(0);
-    const hoursProgress = useSharedValue(0);
-    const hoursHeight = useSharedValue(0);
-
-    useEffect(() => {
-        setHoursOpen(false);
-        hoursProgress.value = 0;
-        translateY.value = 48;
-        opacity.value = 0;
-        translateY.value = withTiming(0, ENTER);
-        opacity.value = withTiming(1, { duration: 220, easing: Easing.out(Easing.cubic) });
-    }, [hoursProgress, location.id, opacity, translateY]);
-
-    const closeSheet = () => {
-        onClose();
-    };
-
-    const dismiss = () => {
-        opacity.value = withTiming(0, { duration: 180, easing: Easing.out(Easing.cubic) });
-        translateY.value = withTiming(420, { duration: 220, easing: Easing.in(Easing.cubic) }, (finished) => {
-            if (finished) runOnJS(closeSheet)();
-        });
-    };
-
-    const pan = Gesture.Pan()
-        .activeOffsetY(16)
-        .failOffsetX([-24, 24])
-        .onUpdate((event) => {
-            translateY.value = Math.max(0, event.translationY);
-        })
-        .onEnd((event) => {
-            if (event.translationY > DISMISS_Y || event.velocityY > DISMISS_V) {
-                runOnJS(dismiss)();
-                return;
-            }
-            translateY.value = withTiming(0, ENTER);
-        });
-
-    const sheetStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: translateY.value }],
-        opacity: opacity.value,
-    }), []);
-
-    const chevronStyle = useAnimatedStyle(() => ({
-        transform: [{ rotate: `${interpolate(hoursProgress.value, [0, 1], [180, 0])}deg` }],
-    }), []);
-
-    const hoursBodyStyle = useAnimatedStyle(() => ({
-        height: hoursHeight.value * hoursProgress.value,
-        opacity: hoursProgress.value,
-        overflow: "hidden" as const,
-    }), []);
-
-    const toggleHours = () => {
-        const next = !hoursOpen;
-        setHoursOpen(next);
-        hoursProgress.value = withTiming(next ? 1 : 0, HOURS_ANIM);
-    };
-
-    const openDirections = () => {
-        const q = encodeURIComponent(
-            location.address || `${location.lat},${location.lon}`,
-        );
-        void Linking.openURL(`https://maps.google.com/?q=${q}`);
-    };
-
-    const callPhone = () => {
-        if (!location.phone) return;
-        void Linking.openURL(`tel:${location.phone}`);
-    };
-
-    const hoursRows = location.hoursRows ?? [];
-    const hasHours = hoursRows.length > 0 || Boolean(location.hoursDisplay);
-    const status = location.hoursStatus;
-
-    return (
-        <GestureDetector gesture={pan}>
-            <Animated.View style={[sheetStyle, styles.sheetAnim]}>
-                <View
-                    style={[
-                        styles.sheet,
-                        cardStyle(theme),
-                        {
-                            borderTopLeftRadius: t.radii.lg,
-                            borderTopRightRadius: t.radii.lg,
-                            borderBottomLeftRadius: 0,
-                            borderBottomRightRadius: 0,
-                        },
-                    ]}
-                >
-                    <View style={[styles.handle, { backgroundColor: theme.colors.border }]} />
-
-                    <View style={styles.head}>
-                        <View style={styles.headText}>
-                            <Text style={[styles.name, { color: theme.colors.onSurface }]}>
-                                {location.name}
-                            </Text>
-                            <Text style={themedStyles.meta}>{meta.label.toUpperCase()}</Text>
-                        </View>
-                        <Pressable
-                            onPress={dismiss}
-                            hitSlop={8}
-                            accessibilityLabel="Fermer"
-                            style={[
-                                styles.closeBtn,
-                                {
-                                    backgroundColor: theme.colors.background,
-                                    borderRadius: t.radii.pill,
-                                },
-                            ]}
-                        >
-                            <X size={16} color={theme.colors.onSurface} />
-                        </Pressable>
-                    </View>
-
-                    <ScrollView
-                        style={styles.bodyScroll}
-                        contentContainerStyle={styles.bodyContent}
-                        showsVerticalScrollIndicator={false}
-                    >
-                        {location.address ? (
-                            <View style={styles.row}>
-                                <MapPin size={16} color={t.colors.muted} />
-                                <Text style={themedStyles.address}>{location.address}</Text>
-                                <Pressable
-                                    onPress={() => void copyText(location.address!)}
-                                    hitSlop={8}
-                                    accessibilityLabel="Copier l’adresse"
-                                >
-                                    <Copy size={16} color={theme.colors.primary} />
-                                </Pressable>
-                            </View>
-                        ) : null}
-
-                        {location.phone ? (
-                            <View style={styles.row}>
-                                <Phone size={16} color={t.colors.muted} />
-                                <Text style={themedStyles.address}>{location.phone}</Text>
-                                <Pressable
-                                    onPress={callPhone}
-                                    hitSlop={8}
-                                    accessibilityLabel="Appeler"
-                                >
-                                    <Phone size={16} color={theme.colors.primary} />
-                                </Pressable>
-                                <Pressable
-                                    onPress={() => void copyText(location.phone!)}
-                                    hitSlop={8}
-                                    accessibilityLabel="Copier le numéro"
-                                >
-                                    <Copy size={16} color={theme.colors.primary} />
-                                </Pressable>
-                            </View>
-                        ) : null}
-
-                        {hasHours ? (
-                            <View
-                                style={[
-                                    styles.hoursBox,
-                                    {
-                                        backgroundColor: theme.colors.background,
-                                        borderRadius: t.radii.md,
-                                    },
-                                ]}
-                            >
-                                <Pressable onPress={toggleHours} style={styles.hoursHeader}>
-                                    <Clock size={16} color={t.colors.muted} />
-                                    <Text style={[styles.hoursStatus, { color: t.colors.muted }]}>
-                                        {status ? (
-                                            <>
-                                                <Text
-                                                    style={{
-                                                        color: status.open
-                                                            ? theme.colors.primary
-                                                            : theme.colors.error,
-                                                        fontWeight: "700",
-                                                    }}
-                                                >
-                                                    {status.open ? "Ouvert" : "Fermé"}
-                                                </Text>
-                                                {status.text.includes(" - ")
-                                                    ? ` - ${status.text.split(" - ").slice(1).join(" - ")}`
-                                                    : ""}
-                                            </>
-                                        ) : (
-                                            location.hoursDisplay ?? "Horaires"
-                                        )}
-                                    </Text>
-                                    <Animated.View style={chevronStyle}>
-                                        <ChevronUp size={16} color={theme.colors.primary} />
-                                    </Animated.View>
-                                </Pressable>
-                                <Animated.View style={hoursBodyStyle}>
-                                    <View
-                                        style={styles.hoursMeasure}
-                                        onLayout={(event) => {
-                                            hoursHeight.value = event.nativeEvent.layout.height;
-                                        }}
-                                    >
-                                        {hoursRows.length > 0 ? (
-                                            <View style={styles.hoursList}>
-                                                {hoursRows.map((row) => (
-                                                    <View key={row.label} style={styles.hoursRow}>
-                                                        <Text style={[styles.hoursDay, { color: t.colors.muted }]}>
-                                                            {row.label}
-                                                        </Text>
-                                                        <Text style={[styles.hoursValue, { color: t.colors.muted }]}>
-                                                            {row.hours}
-                                                        </Text>
-                                                    </View>
-                                                ))}
-                                            </View>
-                                        ) : location.hoursDisplay ? (
-                                            <Text style={[styles.hoursFallback, { color: t.colors.muted }]}>
-                                                {location.hoursDisplay}
-                                            </Text>
-                                        ) : null}
-                                    </View>
-                                </Animated.View>
-                            </View>
-                        ) : null}
-                    </ScrollView>
-
-                    <Button
-                        onPress={openDirections}
-                        rightIcon={MapPin}
-                        style={[styles.cta, { borderRadius: t.radii.md }]}
-                    >
-                        Afficher Itinéraire
-                    </Button>
-                </View>
-            </Animated.View>
-        </GestureDetector>
-    );
-}
-
-const createThemedStyles = (theme: Theme) =>
-    StyleSheet.create({
-        meta: {
-            color: theme.colors.muted ?? theme.colors.onSurface,
-            fontSize: 12,
-            fontWeight: "700",
-            letterSpacing: 0.4,
-            marginTop: 4,
-        },
-        address: {
-            color: theme.colors.onSurface,
-            flex: 1,
-            fontSize: 14,
-        },
-    });
-
-const styles = StyleSheet.create({
-    sheetAnim: {
-        maxHeight: "82%",
-    },
-    sheet: {
-        paddingHorizontal: SPACE.pageX,
-        paddingTop: 14,
-        paddingBottom: SPACE.pageX,
-        gap: 24,
-        maxHeight: "100%",
-    },
-    handle: {
-        alignSelf: "center",
-        width: 40,
-        height: 4,
-        borderRadius: 2,
-        marginBottom: 2,
-    },
-    head: {
-        flexDirection: "row",
-        alignItems: "flex-start",
-        gap: 10,
-    },
-    headText: {
-        flex: 1,
-    },
-    closeBtn: {
-        width: 28,
-        height: 28,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    name: {
-        fontSize: 18,
-        fontWeight: "800",
-    },
-    bodyScroll: {
-        flexGrow: 0,
-        flexShrink: 1,
-        minHeight: 132,
-    },
-    bodyContent: {
-        gap: 22,
-        paddingBottom: 10,
-    },
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 10,
-    },
-    hoursBox: {
-        padding: 12,
-        paddingBottom: 4,
-    },
-    hoursHeader: {
-        flexDirection: "row",
-        alignItems: "center",
-        gap: 8,
-        paddingBottom: 8,
-    },
-    hoursStatus: {
-        flex: 1,
-        fontSize: 14,
-    },
-    hoursList: {
-        gap: 6,
-        paddingLeft: 24,
-        paddingBottom: 8,
-    },
-    hoursMeasure: {
-        position: "absolute",
-        left: 0,
-        right: 0,
-    },
-    hoursRow: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        gap: 12,
-    },
-    hoursDay: {
-        fontSize: 13,
-    },
-    hoursValue: {
-        fontSize: 13,
-        textAlign: "right",
-        flex: 1,
-    },
-    hoursFallback: {
-        fontSize: 13,
-        lineHeight: 18,
-        paddingLeft: 24,
-        paddingBottom: 8,
-    },
-    cta: {
-        height: SPACE.buttonH,
-        marginTop: 12,
-    },
-});
+import { Linking, Platform, Pressable, ScrollView, Share, StyleSheet, Text, View } from "react-native";
+import {
+    ChevronUp,
+    Clock,
+    Copy,
+    MapPin,
+    Phone,
+    X,
+} from "lucide-react-native";
+import { useEffect, useState, type ReactNode } from "react";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+    Easing,
+    interpolate,
+    runOnJS,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from "react-native-reanimated";
+import { useTheme } from "../../contexts/ThemeContext";
+import { Theme } from "../../types/Theme";
+import { Button } from "../button/Button";
+import {
+    LOCATION_CATEGORY_META,
+    type MapLocation,
+} from "../../hooks/useLocations";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+
+export type LocationSheetProps = {
+    location: MapLocation;
+    onClose: () => void;
+};
+
+const ENTER = { duration: 280, easing: Easing.out(Easing.cubic) };
+const HOURS_ANIM = { duration: 240, easing: Easing.out(Easing.cubic) };
+const DISMISS_Y = 96;
+const DISMISS_V = 900;
+
+async function copyText(value: string) {
+    try {
+        const webNav = (
+            globalThis as {
+                navigator?: { clipboard?: { writeText: (v: string) => Promise<void> } };
+            }
+        ).navigator;
+        if (Platform.OS === "web" && webNav?.clipboard?.writeText) {
+            await webNav.clipboard.writeText(value);
+            return;
+        }
+        await Share.share({ message: value });
+    } catch {
+        // ignore copy failures
+    }
+}
+
+export function LocationSheet({
+    location,
+    onClose,
+}: LocationSheetProps): ReactNode {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const themedStyles = createThemedStyles(theme);
+    const meta = LOCATION_CATEGORY_META[location.category];
+    const [hoursOpen, setHoursOpen] = useState(false);
+    const translateY = useSharedValue(48);
+    const opacity = useSharedValue(0);
+    const hoursProgress = useSharedValue(0);
+    const hoursHeight = useSharedValue(0);
+
+    useEffect(() => {
+        setHoursOpen(false);
+        hoursProgress.value = 0;
+        translateY.value = 48;
+        opacity.value = 0;
+        translateY.value = withTiming(0, ENTER);
+        opacity.value = withTiming(1, { duration: 220, easing: Easing.out(Easing.cubic) });
+    }, [hoursProgress, location.id, opacity, translateY]);
+
+    const closeSheet = () => {
+        onClose();
+    };
+
+    const dismiss = () => {
+        opacity.value = withTiming(0, { duration: 180, easing: Easing.out(Easing.cubic) });
+        translateY.value = withTiming(420, { duration: 220, easing: Easing.in(Easing.cubic) }, (finished) => {
+            if (finished) runOnJS(closeSheet)();
+        });
+    };
+
+    const pan = Gesture.Pan()
+        .activeOffsetY(16)
+        .failOffsetX([-24, 24])
+        .onUpdate((event) => {
+            translateY.value = Math.max(0, event.translationY);
+        })
+        .onEnd((event) => {
+            if (event.translationY > DISMISS_Y || event.velocityY > DISMISS_V) {
+                runOnJS(dismiss)();
+                return;
+            }
+            translateY.value = withTiming(0, ENTER);
+        });
+
+    const sheetStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+        opacity: opacity.value,
+    }), []);
+
+    const chevronStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${interpolate(hoursProgress.value, [0, 1], [180, 0])}deg` }],
+    }), []);
+
+    const hoursBodyStyle = useAnimatedStyle(() => ({
+        height: hoursHeight.value * hoursProgress.value,
+        opacity: hoursProgress.value,
+        overflow: "hidden" as const,
+    }), []);
+
+    const toggleHours = () => {
+        const next = !hoursOpen;
+        setHoursOpen(next);
+        hoursProgress.value = withTiming(next ? 1 : 0, HOURS_ANIM);
+    };
+
+    const openDirections = () => {
+        const q = encodeURIComponent(
+            location.address || `${location.lat},${location.lon}`,
+        );
+        void Linking.openURL(`https://maps.google.com/?q=${q}`);
+    };
+
+    const callPhone = () => {
+        if (!location.phone) return;
+        void Linking.openURL(`tel:${location.phone}`);
+    };
+
+    const hoursRows = location.hoursRows ?? [];
+    const hasHours = hoursRows.length > 0 || Boolean(location.hoursDisplay);
+    const status = location.hoursStatus;
+
+    return (
+        <GestureDetector gesture={pan}>
+            <Animated.View style={[sheetStyle, styles.sheetAnim]}>
+                <View
+                    style={[
+                        styles.sheet,
+                        cardStyle(theme),
+                        {
+                            borderTopLeftRadius: t.radii.lg,
+                            borderTopRightRadius: t.radii.lg,
+                            borderBottomLeftRadius: 0,
+                            borderBottomRightRadius: 0,
+                        },
+                    ]}
+                >
+                    <View style={[styles.handle, { backgroundColor: theme.colors.border }]} />
+
+                    <View style={styles.head}>
+                        <View style={styles.headText}>
+                            <Text style={[styles.name, { color: theme.colors.onSurface }]}>
+                                {location.name}
+                            </Text>
+                            <Text style={themedStyles.meta}>{meta.label.toUpperCase()}</Text>
+                        </View>
+                        <Pressable
+                            onPress={dismiss}
+                            hitSlop={8}
+                            accessibilityLabel="Fermer"
+                            style={[
+                                styles.closeBtn,
+                                {
+                                    backgroundColor: theme.colors.background,
+                                    borderRadius: t.radii.pill,
+                                },
+                            ]}
+                        >
+                            <X size={16} color={theme.colors.onSurface} />
+                        </Pressable>
+                    </View>
+
+                    <ScrollView
+                        style={styles.bodyScroll}
+                        contentContainerStyle={styles.bodyContent}
+                        showsVerticalScrollIndicator={false}
+                    >
+                        {location.address ? (
+                            <View style={styles.row}>
+                                <MapPin size={16} color={t.colors.muted} />
+                                <Text style={themedStyles.address}>{location.address}</Text>
+                                <Pressable
+                                    onPress={() => void copyText(location.address!)}
+                                    hitSlop={8}
+                                    accessibilityLabel="Copier l’adresse"
+                                >
+                                    <Copy size={16} color={theme.colors.primary} />
+                                </Pressable>
+                            </View>
+                        ) : null}
+
+                        {location.phone ? (
+                            <View style={styles.row}>
+                                <Phone size={16} color={t.colors.muted} />
+                                <Text style={themedStyles.address}>{location.phone}</Text>
+                                <Pressable
+                                    onPress={callPhone}
+                                    hitSlop={8}
+                                    accessibilityLabel="Appeler"
+                                >
+                                    <Phone size={16} color={theme.colors.primary} />
+                                </Pressable>
+                                <Pressable
+                                    onPress={() => void copyText(location.phone!)}
+                                    hitSlop={8}
+                                    accessibilityLabel="Copier le numéro"
+                                >
+                                    <Copy size={16} color={theme.colors.primary} />
+                                </Pressable>
+                            </View>
+                        ) : null}
+
+                        {hasHours ? (
+                            <View
+                                style={[
+                                    styles.hoursBox,
+                                    {
+                                        backgroundColor: theme.colors.background,
+                                        borderRadius: t.radii.md,
+                                    },
+                                ]}
+                            >
+                                <Pressable onPress={toggleHours} style={styles.hoursHeader}>
+                                    <Clock size={16} color={t.colors.muted} />
+                                    <Text style={[styles.hoursStatus, { color: t.colors.muted }]}>
+                                        {status ? (
+                                            <>
+                                                <Text
+                                                    style={{
+                                                        color: status.open
+                                                            ? theme.colors.primary
+                                                            : theme.colors.error,
+                                                        fontWeight: "700",
+                                                    }}
+                                                >
+                                                    {status.open ? "Ouvert" : "Fermé"}
+                                                </Text>
+                                                {status.text.includes(" - ")
+                                                    ? ` - ${status.text.split(" - ").slice(1).join(" - ")}`
+                                                    : ""}
+                                            </>
+                                        ) : (
+                                            location.hoursDisplay ?? "Horaires"
+                                        )}
+                                    </Text>
+                                    <Animated.View style={chevronStyle}>
+                                        <ChevronUp size={16} color={theme.colors.primary} />
+                                    </Animated.View>
+                                </Pressable>
+                                <Animated.View style={hoursBodyStyle}>
+                                    <View
+                                        style={styles.hoursMeasure}
+                                        onLayout={(event) => {
+                                            hoursHeight.value = event.nativeEvent.layout.height;
+                                        }}
+                                    >
+                                        {hoursRows.length > 0 ? (
+                                            <View style={styles.hoursList}>
+                                                {hoursRows.map((row) => (
+                                                    <View key={row.label} style={styles.hoursRow}>
+                                                        <Text style={[styles.hoursDay, { color: t.colors.muted }]}>
+                                                            {row.label}
+                                                        </Text>
+                                                        <Text style={[styles.hoursValue, { color: t.colors.muted }]}>
+                                                            {row.hours}
+                                                        </Text>
+                                                    </View>
+                                                ))}
+                                            </View>
+                                        ) : location.hoursDisplay ? (
+                                            <Text style={[styles.hoursFallback, { color: t.colors.muted }]}>
+                                                {location.hoursDisplay}
+                                            </Text>
+                                        ) : null}
+                                    </View>
+                                </Animated.View>
+                            </View>
+                        ) : null}
+                    </ScrollView>
+
+                    <Button
+                        onPress={openDirections}
+                        rightIcon={MapPin}
+                        style={[styles.cta, { borderRadius: t.radii.md }]}
+                    >
+                        Afficher Itinéraire
+                    </Button>
+                </View>
+            </Animated.View>
+        </GestureDetector>
+    );
+}
+
+const createThemedStyles = (theme: Theme) =>
+    StyleSheet.create({
+        meta: {
+            color: theme.colors.muted ?? theme.colors.onSurface,
+            fontSize: 12,
+            fontWeight: "700",
+            letterSpacing: 0.4,
+            marginTop: 4,
+        },
+        address: {
+            color: theme.colors.onSurface,
+            flex: 1,
+            fontSize: 14,
+        },
+    });
+
+const styles = StyleSheet.create({
+    sheetAnim: {
+        maxHeight: "82%",
+    },
+    sheet: {
+        paddingHorizontal: SPACE.pageX,
+        paddingTop: 14,
+        paddingBottom: SPACE.pageX,
+        gap: 24,
+        maxHeight: "100%",
+    },
+    handle: {
+        alignSelf: "center",
+        width: 40,
+        height: 4,
+        borderRadius: 2,
+        marginBottom: 2,
+    },
+    head: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        gap: 10,
+    },
+    headText: {
+        flex: 1,
+    },
+    closeBtn: {
+        width: 28,
+        height: 28,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    name: {
+        fontSize: 18,
+        fontWeight: "800",
+    },
+    bodyScroll: {
+        flexGrow: 0,
+        flexShrink: 1,
+        minHeight: 132,
+    },
+    bodyContent: {
+        gap: 22,
+        paddingBottom: 10,
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 10,
+    },
+    hoursBox: {
+        padding: 12,
+        paddingBottom: 4,
+    },
+    hoursHeader: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 8,
+        paddingBottom: 8,
+    },
+    hoursStatus: {
+        flex: 1,
+        fontSize: 14,
+    },
+    hoursList: {
+        gap: 6,
+        paddingLeft: 24,
+        paddingBottom: 8,
+    },
+    hoursMeasure: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+    },
+    hoursRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        gap: 12,
+    },
+    hoursDay: {
+        fontSize: 13,
+    },
+    hoursValue: {
+        fontSize: 13,
+        textAlign: "right",
+        flex: 1,
+    },
+    hoursFallback: {
+        fontSize: 13,
+        lineHeight: 18,
+        paddingLeft: 24,
+        paddingBottom: 8,
+    },
+    cta: {
+        height: SPACE.buttonH,
+        marginTop: 12,
+    },
+});