@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-3DUWIYV5.js

@@ -1,437 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion, motionTiming, springConfig, project, rubberband } from './chunk-J64KGCGX.js';
-import * as React from 'react';
-import { View, ScrollView, Pressable, Text, Animated, PanResponder, Modal, Easing } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DOT = {
-  /** Width of the active dot. */
-  activeWidth: 16,
-  /** Width of an inactive dot. */
-  idleWidth: 5
-};
-function Dot({ active }) {
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme("gallery");
-  const progress = React.useRef(new Animated.Value(active ? 1 : 0)).current;
-  React.useEffect(() => {
-    Animated.timing(progress, {
-      toValue: active ? 1 : 0,
-      duration: theme.duration.base,
-      easing: Easing.bezier(...theme.easing.base),
-      useNativeDriver: false
-    }).start();
-  }, [active, progress, theme.duration.base, theme.easing.base]);
-  return /* @__PURE__ */ jsx(
-    Animated.View,
-    {
-      style: [
-        styles.dot,
-        {
-          width: progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [DOT.idleWidth, DOT.activeWidth]
-          }),
-          // The carousel sits on imagery, so the dots use the mode-invariant
-          // media ink rather than a surface token: an indicator that inverted
-          // with the mode would vanish over a bright photo. The idle dot is the
-          // 0.38 alpha stop — the same value the system dims a disabled control
-          // to. Both were `#ffffff` / `rgba(255,255,255,0.4)` literals in the
-          // module constant above, which is why they could not follow a theme.
-          backgroundColor: progress.interpolate({
-            inputRange: [0, 1],
-            outputRange: [theme.white.a10, theme.media.ink]
-          })
-        }
-      ]
-    }
-  );
-}
-var DEFAULT_LABELS = {
-  item: (position) => `Item ${position}`,
-  counter: (position, count) => `${position} / ${count}`,
-  close: "Close",
-  previous: "Previous image",
-  next: "Next image",
-  placeholder: (position, aspectRatio) => `Image ${position} \xB7 ${aspectRatio}`
-};
-function Gallery({
-  items,
-  columns = 3,
-  lightbox = true,
-  onSelect,
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet);
-  const labels = useLabels("gallery", DEFAULT_LABELS, labelsProp);
-  const [openIndex, setOpenIndex] = React.useState(null);
-  const open = (i) => {
-    onSelect?.(i);
-    if (lightbox) setOpenIndex(i);
-  };
-  return /* @__PURE__ */ jsxs(View, { style: styles.galleryRoot, children: [
-    /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.grid, children: items.map((item, i) => /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "imagebutton",
-        accessibilityLabel: item.alt || labels.item(i + 1),
-        onPress: () => open(i),
-        style: [styles.tile, { width: `${100 / columns}%` }],
-        children: /* @__PURE__ */ jsxs(View, { style: styles.tileInner, children: [
-          item.render ? item.render() : /* @__PURE__ */ jsx(Text, { style: styles.tileIndex, children: i + 1 }),
-          item.duration ? /* @__PURE__ */ jsx(View, { style: styles.durationBadge, children: /* @__PURE__ */ jsx(Text, { style: styles.durationText, children: item.duration }) }) : null
-        ] })
-      },
-      item.id
-    )) }),
-    openIndex != null ? /* @__PURE__ */ jsx(
-      GalleryLightbox,
-      {
-        items,
-        index: openIndex,
-        onIndexChange: setOpenIndex,
-        onClose: () => setOpenIndex(null),
-        labels: labelsProp
-      }
-    ) : null
-  ] });
-}
-function pinchDistance(e) {
-  const t = e.nativeEvent.touches;
-  if (!t || t.length < 2) return 0;
-  return Math.hypot(t[0].pageX - t[1].pageX, t[0].pageY - t[1].pageY);
-}
-function GalleryLightbox({
-  items,
-  index,
-  onIndexChange,
-  onClose,
-  maxZoom = 3,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet);
-  const labels = useLabels("gallery", DEFAULT_LABELS, labelsProp);
-  const theme = useLoamTheme("gallery");
-  const level = useResolvedMotion(motion, "gallery");
-  const item = items[index];
-  const count = items.length;
-  const tx = React.useRef(new Animated.Value(0)).current;
-  const ty = React.useRef(new Animated.Value(0)).current;
-  const fade = React.useRef(new Animated.Value(1)).current;
-  const scale = React.useRef(new Animated.Value(1)).current;
-  const width = React.useRef(0);
-  const running = React.useRef(null);
-  const live = React.useRef({ index, count, level, theme, maxZoom, onIndexChange });
-  live.current = { index, count, level, theme, maxZoom, onIndexChange };
-  const gesture = React.useRef({ pinch0: 0, zoom: 1, zoomAtStart: 1, panX: 0, panY: 0, s: 1 });
-  const go = React.useCallback((delta) => {
-    const l = live.current;
-    l.onIndexChange((l.index + delta + l.count) % l.count);
-  }, []);
-  const leaveThen = React.useCallback(
-    (delta, velocity = 0) => {
-      const { level: lv, theme: th } = live.current;
-      const w = width.current || 320;
-      const g = gesture.current;
-      g.zoom = 1;
-      g.panX = 0;
-      g.panY = 0;
-      scale.setValue(1);
-      ty.setValue(0);
-      if (running.current) {
-        running.current.stop();
-        running.current = null;
-        tx.setValue(0);
-        fade.setValue(1);
-        go(delta);
-        return;
-      }
-      if (lv === "none") {
-        tx.setValue(0);
-        go(delta);
-        return;
-      }
-      if (lv === "reduced") {
-        const out2 = Animated.timing(fade, {
-          toValue: 0,
-          ...motionTiming(lv),
-          useNativeDriver: true
-        });
-        running.current = out2;
-        out2.start(({ finished }) => {
-          running.current = null;
-          tx.setValue(0);
-          go(delta);
-          if (!finished) return fade.setValue(1);
-          Animated.timing(fade, { toValue: 1, ...motionTiming(lv), useNativeDriver: true }).start();
-        });
-        return;
-      }
-      const out = Animated.parallel([
-        Animated.spring(tx, {
-          toValue: -delta * w,
-          ...springConfig(th, "fe", { velocity }),
-          useNativeDriver: true
-        }),
-        Animated.spring(fade, { toValue: 0, ...springConfig(th, "fe"), useNativeDriver: true })
-      ]);
-      running.current = out;
-      out.start(({ finished }) => {
-        running.current = null;
-        if (!finished) return;
-        tx.setValue(delta * w * 0.35);
-        go(delta);
-        Animated.parallel([
-          Animated.spring(tx, { toValue: 0, ...springConfig(th, "ds"), useNativeDriver: true }),
-          Animated.spring(fade, { toValue: 1, ...springConfig(th, "de"), useNativeDriver: true })
-        ]).start();
-      });
-    },
-    [fade, go, scale, tx, ty]
-  );
-  const settle = React.useCallback(() => {
-    const { theme: th, level: lv, maxZoom: max } = live.current;
-    const g = gesture.current;
-    const target = g.s < 1 ? 1 : g.s > max ? max : g.s;
-    g.zoom = target;
-    g.s = target;
-    if (target === 1) {
-      g.panX = 0;
-      g.panY = 0;
-    }
-    const spring = (v, to) => lv === "full" ? Animated.spring(v, { toValue: to, ...springConfig(th, "ds"), useNativeDriver: true }) : Animated.timing(v, { toValue: to, ...motionTiming(lv), useNativeDriver: true });
-    Animated.parallel([spring(scale, target), spring(tx, g.panX), spring(ty, g.panY)]).start();
-  }, [scale, tx, ty]);
-  const pan = React.useRef(
-    // Swipe and pinch share one responder on a full-screen modal with no
-    // competing gesture, and the native contract rules out a gesture library —
-    // the same reason `Sheet` and `Toast` use `PanResponder`.
-    // eslint-disable-next-line loam/no-pan-responder
-    PanResponder.create({
-      onStartShouldSetPanResponder: (e) => pinchDistance(e) > 0,
-      onMoveShouldSetPanResponder: (e, g) => pinchDistance(e) > 0 || gesture.current.zoom > 1 || Math.abs(g.dx) > 8 && Math.abs(g.dx) > Math.abs(g.dy),
-      onPanResponderTerminationRequest: () => false,
-      onPanResponderGrant: () => {
-        running.current?.stop();
-        running.current = null;
-        const g = gesture.current;
-        g.pinch0 = 0;
-        g.zoomAtStart = g.zoom;
-        g.s = g.zoom;
-      },
-      onPanResponderMove: (e, d) => {
-        const g = gesture.current;
-        const dist = pinchDistance(e);
-        if (dist > 0) {
-          if (!g.pinch0) {
-            g.pinch0 = dist;
-            g.zoomAtStart = g.s;
-          }
-          const raw = g.zoomAtStart * (dist / g.pinch0);
-          const max = live.current.maxZoom;
-          g.s = raw < 1 ? 1 - rubberband(1 - raw, 0.5) : raw > max ? max + rubberband(raw - max, max) : raw;
-          scale.setValue(g.s);
-          return;
-        }
-        if (g.pinch0) return;
-        if (g.zoom > 1) {
-          tx.setValue(g.panX + d.dx);
-          ty.setValue(g.panY + d.dy);
-          return;
-        }
-        tx.setValue(d.dx);
-      },
-      onPanResponderRelease: (_e, d) => {
-        const g = gesture.current;
-        if (g.pinch0) {
-          g.pinch0 = 0;
-          settle();
-          return;
-        }
-        if (g.zoom > 1) {
-          const w2 = width.current || 320;
-          const reach = w2 * (g.zoom - 1) / 2;
-          g.panX = Math.max(-reach, Math.min(reach, g.panX + d.dx));
-          g.panY = Math.max(-reach, Math.min(reach, g.panY + d.dy));
-          settle();
-          return;
-        }
-        const w = width.current || 320;
-        const aim = d.dx + project(d.vx * 1e3);
-        if (live.current.count > 1 && (Math.abs(d.dx) > w * 0.25 || Math.abs(aim) > w * 0.5)) {
-          leaveThen(aim < 0 ? 1 : -1, d.vx);
-          return;
-        }
-        Animated.spring(tx, {
-          toValue: 0,
-          ...springConfig(live.current.theme, "fs", { velocity: d.vx }),
-          useNativeDriver: true
-        }).start();
-      },
-      onPanResponderTerminate: () => {
-        gesture.current.pinch0 = 0;
-        settle();
-      }
-    })
-  ).current;
-  React.useEffect(() => {
-    return () => running.current?.stop();
-  }, []);
-  if (!item) return null;
-  const onLayout = (e) => {
-    width.current = e.nativeEvent.layout.width;
-  };
-  return /* @__PURE__ */ jsx(Modal, { visible: true, transparent: true, animationType: "fade", onRequestClose: onClose, children: /* @__PURE__ */ jsxs(View, { style: styles.lightbox, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.lightboxBar, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.counter, children: labels.counter(index + 1, count) }),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.close,
-          onPress: onClose,
-          style: styles.lightboxAction,
-          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.md, color: theme.media.ink })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(View, { style: styles.lightboxStage, children: [
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.previous,
-          onPress: () => leaveThen(-1),
-          style: styles.lightboxNav,
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: theme.icon.lg, color: theme.media.ink })
-        }
-      ),
-      /* @__PURE__ */ jsx(View, { style: styles.lightboxTrack, onLayout, ...pan.panHandlers, children: /* @__PURE__ */ jsx(
-        Animated.View,
-        {
-          testID: "gallery-lightbox-image",
-          accessibilityRole: "image",
-          accessibilityLabel: item.alt || labels.item(index + 1),
-          style: [
-            styles.lightboxImage,
-            {
-              aspectRatio: item.aspectRatio ?? 0.8,
-              opacity: fade,
-              transform: [{ translateX: tx }, { translateY: ty }, { scale }]
-            }
-          ],
-          children: item.render ? item.render() : /* @__PURE__ */ jsx(Text, { style: styles.lightboxImageLabel, children: labels.placeholder(index + 1, String(item.aspectRatio ?? 0.8)) })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.next,
-          onPress: () => leaveThen(1),
-          style: styles.lightboxNav,
-          children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.lg, color: theme.media.ink })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(View, { style: styles.dots, accessibilityElementsHidden: true, importantForAccessibility: "no", children: items.map((it, i) => /* @__PURE__ */ jsx(Dot, { active: i === index }, it.id)) })
-  ] }) });
-}
-var sheet = createStyleSheet((theme) => ({
-  galleryRoot: { flex: 1 },
-  grid: { flexDirection: "row", flexWrap: "wrap", padding: theme.space[2] },
-  tile: { padding: theme.space[2] },
-  tileInner: {
-    aspectRatio: 1,
-    backgroundColor: theme.color.surface3,
-    alignItems: "center",
-    justifyContent: "center",
-    overflow: "hidden"
-  },
-  tileIndex: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.color.text3
-  },
-  durationBadge: {
-    position: "absolute",
-    right: theme.space[4],
-    bottom: theme.space[4],
-    borderRadius: theme.radius.sm,
-    paddingHorizontal: theme.space[4],
-    paddingVertical: theme.space[1],
-    backgroundColor: theme.black.a12
-  },
-  durationText: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[10],
-    color: theme.media.ink
-  },
-  // Not `color.scrim`: a lightbox backdrop sits on imagery rather than on a
-  // token surface, and it is deliberately far heavier than a modal's scrim. The
-  // alpha ramp's top stop is cut at 0.92 for exactly this surface, so the value
-  // is a token now rather than the raw literal the doc leaves it as.
-  lightbox: { flex: 1, backgroundColor: theme.black.a14 },
-  lightboxBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: theme.space.s4,
-    paddingVertical: theme.space[14]
-  },
-  counter: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    color: theme.media.ink,
-    opacity: theme.opacity[88]
-  },
-  lightboxAction: {
-    width: theme.tapMin,
-    height: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  lightboxStage: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: theme.space[12]
-  },
-  lightboxNav: {
-    width: theme.tapMin,
-    height: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  lightboxTrack: { flex: 1, alignSelf: "stretch", justifyContent: "center" },
-  lightboxImage: {
-    width: "100%",
-    borderRadius: theme.radius.md,
-    backgroundColor: theme.color.surface3,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  lightboxImageLabel: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.type.caption2.fontSize,
-    // Uppercase wants the caps tracking step, which is a ratio — multiply it by
-    // the size rather than restating the product as a bare 1.2.
-    letterSpacing: theme.type.caption2.fontSize * theme.tracking.caps,
-    textTransform: "uppercase",
-    color: theme.color.text3
-  },
-  dots: {
-    flexDirection: "row",
-    justifyContent: "center",
-    gap: DOT.idleWidth,
-    paddingVertical: theme.space.s4
-  },
-  // Width and background are animated per-dot; see {@link Dot}.
-  dot: { height: DOT.idleWidth, borderRadius: theme.radius.full }
-}));
-
-export { Gallery, GalleryLightbox };

package/dist/chunk-3NMD74ZU.js

@@ -1,4 +0,0 @@
-// src/lib/focus-ring.ts
-var NO_UA_FOCUS_RING = { outlineStyle: "none" };
-
-export { NO_UA_FOCUS_RING };

package/dist/chunk-4DS5ZWVC.js

@@ -1,83 +0,0 @@
-import 'react';
-import { View, Text } from 'react-native';
-import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/page-header/page-header.tsx
-function PageHeader({
-  breadcrumb,
-  title,
-  titleAdornment,
-  meta,
-  actions,
-  back,
-  tabs,
-  // Accepted for API consistency; intentionally unused (see PageHeaderMotion).
-  motion: _motion = "none"
-}) {
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
-    back != null ? /* @__PURE__ */ jsx(View, { style: styles.backRow, children: back }) : null,
-    breadcrumb != null ? /* @__PURE__ */ jsx(View, { children: breadcrumb }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.titleGroup, children: [
-        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, children: title }),
-        titleAdornment != null ? /* @__PURE__ */ jsx(View, { style: styles.adornment, children: titleAdornment }) : null
-      ] }),
-      actions != null ? /* @__PURE__ */ jsx(View, { style: styles.actions, children: actions }) : null
-    ] }),
-    meta != null ? typeof meta === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: meta }) : /* @__PURE__ */ jsx(View, { children: meta }) : null,
-    tabs != null ? /* @__PURE__ */ jsx(View, { style: styles.tabs, children: tabs }) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  container: {
-    gap: theme.space.s3,
-    paddingHorizontal: theme.space.s4,
-    paddingVertical: theme.space.s4,
-    backgroundColor: theme.color.bg
-  },
-  backRow: { flexDirection: "row", alignItems: "center" },
-  // Wraps the actions block below the title on a narrow viewport.
-  titleRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    gap: theme.space.s3
-  },
-  // `flexShrink: 1` + `minWidth: 0` lets a long title ellipsize / wrap instead
-  // of pushing the actions off the row.
-  titleGroup: {
-    flexDirection: "row",
-    alignItems: "center",
-    flexShrink: 1,
-    minWidth: 0,
-    gap: theme.space.s2
-  },
-  // `title1` (28/34) is the content page-title role on the mobile ramp — one
-  // step below the app bar's `largeTitle`, so the two never read as the same
-  // element.
-  title: {
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    fontSize: theme.type.title1.fontSize,
-    lineHeight: theme.type.title1.lineHeight,
-    letterSpacing: theme.type.title1.letterSpacing,
-    color: theme.color.text,
-    flexShrink: 1
-  },
-  adornment: { flexDirection: "row", alignItems: "center" },
-  actions: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space.s2 },
-  // Secondary ink, callout size — the AA-safe muted line under the title.
-  meta: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.callout.fontSize,
-    lineHeight: theme.type.callout.lineHeight,
-    letterSpacing: theme.type.callout.letterSpacing,
-    color: theme.color.text2
-  },
-  tabs: { marginTop: theme.space.s1 }
-}));
-
-export { PageHeader };

package/dist/chunk-6YAQBXB3.js

@@ -1,93 +0,0 @@
-import { useThinkingPulse } from './chunk-W74TXYFB.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import 'react';
-import { View, Animated, Text } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var DEFAULT_LABELS = {
-  status: (state) => `Status: ${state}`
-};
-function StatusDot({
-  state,
-  size = "md",
-  label,
-  pulse,
-  motion = "full",
-  accessibilityLabel,
-  style,
-  testID,
-  labels: labelsProp
-}) {
-  const labels = useLabels("statusDot", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet, { state, size });
-  const theme = useLoamTheme("status-dot");
-  const shouldPulse = state === "working" && (pulse ?? true) && motion === "full" && !theme.reduceMotion;
-  const pulseStyle = useThinkingPulse(shouldPulse);
-  const name = accessibilityLabel || label || labels.status(state);
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      accessibilityRole: "image",
-      accessibilityLabel: name,
-      testID,
-      style: [styles.container, style],
-      children: [
-        /* @__PURE__ */ jsx(Animated.View, { style: [styles.dot, pulseStyle] }),
-        label ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  container: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start",
-    gap: theme.space.s2
-  },
-  // Shape encodes the state; colour only reinforces it. `borderRadius: 2` is a
-  // graphical-glyph radius (like the charts legend chip's raw px) — a real token
-  // (`radius.xs` = 4) would round an 8px square into a circle and erase the
-  // shape distinction. `radius.full` clamps the round states to a true circle.
-  dot: {
-    variants: {
-      state: {
-        working: { backgroundColor: theme.status.working, borderRadius: theme.radius.full },
-        waiting: { backgroundColor: theme.status.waiting, borderRadius: theme.radius[2] },
-        done: { backgroundColor: theme.status.done, borderRadius: theme.radius.full },
-        crashed: {
-          backgroundColor: theme.status.crashed,
-          borderRadius: theme.radius[2],
-          transform: [{ rotate: "45deg" }]
-        },
-        conflict: {
-          backgroundColor: theme.status.conflictSoft,
-          borderRadius: theme.radius[2],
-          borderWidth: theme.borderWidth.thick,
-          borderColor: theme.status.conflict,
-          transform: [{ rotate: "45deg" }]
-        },
-        pending: {
-          backgroundColor: "transparent",
-          borderRadius: theme.radius.full,
-          borderWidth: theme.borderWidth.thick,
-          borderColor: theme.status.pending
-        }
-      },
-      size: {
-        sm: { width: theme.space[8], height: theme.space[8] },
-        md: { width: theme.space[10], height: theme.space[10] }
-      }
-    }
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    color: theme.color.text,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing
-  }
-}));
-
-export { StatusDot };