@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-IXKWIFWZ.js

@@ -1,334 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import * as React from 'react';
-import { Animated, Easing, View, ScrollView, Pressable, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-function tabsRevealOffset(triggerX, triggerWidth, stripWidth, viewportWidth) {
-  const max = stripWidth - viewportWidth;
-  if (max <= 0) return 0;
-  return Math.min(Math.max(triggerX + triggerWidth / 2 - viewportWidth / 2, 0), max);
-}
-var DEFAULT_LABELS = {
-  close: "Close",
-  addTab: "Add tab"
-};
-function Tabs({
-  items,
-  value,
-  defaultValue,
-  onValueChange,
-  variant = "underline",
-  size = "md",
-  onClose,
-  onAdd,
-  addLabel: addLabelProp,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const labels = useLabels("tabs", DEFAULT_LABELS, labelsProp);
-  const addLabel = addLabelProp ?? labels.addTab;
-  const closeActions = React.useMemo(
-    () => [{ name: "close", label: labels.close }],
-    [labels.close]
-  );
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = React.useState(
-    defaultValue ?? items[0]?.value
-  );
-  const current = isControlled ? value : internal;
-  const activeIndex = Math.max(
-    0,
-    items.findIndex((item) => item.value === current)
-  );
-  const activeItem = items[activeIndex];
-  const theme = useLoamTheme("tabs");
-  const { styles } = useStyles(sheet, { variant, size });
-  const iconSize = size === "sm" ? 16 : 18;
-  const closeIconSize = size === "sm" ? 14 : 16;
-  const [layouts, setLayouts] = React.useState({});
-  const onTriggerLayout = (index) => (e) => {
-    const { x, y, width, height } = e.nativeEvent.layout;
-    setLayouts((prev) => {
-      const p = prev[index];
-      if (p && p.x === x && p.y === y && p.width === width && p.height === height) return prev;
-      return { ...prev, [index]: { x, y, width, height } };
-    });
-  };
-  const active = layouts[activeIndex];
-  const indicatorX = React.useRef(new Animated.Value(0)).current;
-  const indicatorWidth = React.useRef(new Animated.Value(0)).current;
-  const measured = React.useRef(false);
-  React.useEffect(() => {
-    if (!active) return;
-    if (!measured.current) {
-      indicatorX.setValue(active.x);
-      indicatorWidth.setValue(active.width);
-      measured.current = true;
-      return;
-    }
-    if (motion !== "full") {
-      indicatorX.setValue(active.x);
-      indicatorWidth.setValue(active.width);
-      return;
-    }
-    const { duration, easing } = theme.motion.indicator;
-    Animated.parallel([
-      Animated.timing(indicatorX, {
-        toValue: active.x,
-        duration,
-        easing: Easing.bezier(easing[0], easing[1], easing[2], easing[3]),
-        useNativeDriver: false
-      }),
-      Animated.timing(indicatorWidth, {
-        toValue: active.width,
-        duration,
-        easing: Easing.bezier(easing[0], easing[1], easing[2], easing[3]),
-        useNativeDriver: false
-      })
-    ]).start();
-  }, [active, motion, indicatorX, indicatorWidth, theme.motion.indicator]);
-  const select = (next) => {
-    if (!isControlled) setInternal(next);
-    onValueChange?.(next);
-  };
-  const scrollRef = React.useRef(null);
-  const [viewportWidth, setViewportWidth] = React.useState(0);
-  const [stripWidth, setStripWidth] = React.useState(0);
-  const revealed = React.useRef(false);
-  React.useEffect(() => {
-    if (!active || stripWidth <= viewportWidth) return;
-    scrollRef.current?.scrollTo({
-      x: tabsRevealOffset(active.x, active.width, stripWidth, viewportWidth),
-      animated: revealed.current
-    });
-    revealed.current = true;
-  }, [active, stripWidth, viewportWidth]);
-  const indicatorStyle = variant === "underline" ? [
-    styles.underline,
-    // The bar's weight is a ramp step per size — it was 2 and 3, which
-    // read as the same decision but came from nowhere.
-    { left: indicatorX, width: indicatorWidth, height: theme.space[size === "sm" ? 2 : 3] }
-  ] : [
-    styles.pill,
-    active ? { left: indicatorX, width: indicatorWidth, top: active.y, height: active.height } : { left: indicatorX, width: indicatorWidth }
-  ];
-  return /* @__PURE__ */ jsxs(View, { children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.list, children: /* @__PURE__ */ jsx(
-        ScrollView,
-        {
-          ref: scrollRef,
-          horizontal: true,
-          showsHorizontalScrollIndicator: false,
-          onLayout: (e) => setViewportWidth(e.nativeEvent.layout.width),
-          style: styles.scroll,
-          children: /* @__PURE__ */ jsxs(
-            View,
-            {
-              accessibilityRole: "tablist",
-              style: styles.row,
-              onLayout: (e) => setStripWidth(e.nativeEvent.layout.width),
-              children: [
-                active ? /* @__PURE__ */ jsx(Animated.View, { pointerEvents: "none", style: indicatorStyle }) : null,
-                items.map((item, index) => {
-                  const selected = item.value === current;
-                  const fg = selected ? theme.color.onSurface : theme.color.text2;
-                  const triggerNode = /* @__PURE__ */ jsxs(
-                    Pressable,
-                    {
-                      accessibilityRole: "tab",
-                      accessibilityState: { selected },
-                      "aria-selected": selected,
-                      accessibilityActions: item.closable ? closeActions : void 0,
-                      onAccessibilityAction: item.closable && onClose ? (e) => {
-                        if (e.nativeEvent.actionName === "close") onClose(item.value);
-                      } : void 0,
-                      onPress: () => select(item.value),
-                      onLayout: onTriggerLayout(index),
-                      style: styles.trigger,
-                      children: [
-                        item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
-                        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: item.label })
-                      ]
-                    }
-                  );
-                  if (!item.closable) {
-                    return /* @__PURE__ */ jsx(React.Fragment, { children: triggerNode }, item.value);
-                  }
-                  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                    triggerNode,
-                    /* @__PURE__ */ jsx(
-                      Pressable,
-                      {
-                        "aria-hidden": true,
-                        accessibilityElementsHidden: true,
-                        importantForAccessibility: "no-hide-descendants",
-                        focusable: false,
-                        tabIndex: -1,
-                        testID: `tabs-close-${item.value}`,
-                        onPress: onClose ? () => onClose(item.value) : void 0,
-                        style: styles.close,
-                        children: /* @__PURE__ */ jsx(Icon, { name: "x", size: closeIconSize, color: fg })
-                      }
-                    )
-                  ] }, item.value);
-                })
-              ]
-            }
-          )
-        }
-      ) }),
-      onAdd ? /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: addLabel,
-          onPress: onAdd,
-          style: styles.add,
-          children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: iconSize, color: theme.color.text2 })
-        }
-      ) : null
-    ] }),
-    activeItem?.content !== void 0 ? /* @__PURE__ */ jsx(View, { style: styles.panel, children: activeItem.content }) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  // The bar row: the scrolling chrome plus the pinned add button. It sizes to
-  // its content (`alignSelf: 'flex-start'`) and caps at the parent's edge
-  // (`maxWidth`), taking over the sizing role the chrome held before an add
-  // button could sit beside it.
-  bar: {
-    flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "flex-start",
-    maxWidth: "100%"
-  },
-  // The chrome: the underline's rule, or the pill variant's tray. `flexShrink`
-  // lets it yield width to the add button so the triggers scroll underneath the
-  // chrome rather than pushing the add button off the edge; with no add button
-  // it is the only child of the bar and still sizes to its triggers.
-  list: {
-    flexShrink: 1,
-    variants: {
-      variant: {
-        underline: {
-          borderBottomWidth: theme.borderWidth.thin,
-          borderBottomColor: theme.color.border
-        },
-        pill: {
-          backgroundColor: theme.color.surface2,
-          borderRadius: theme.radius.full,
-          padding: theme.space.s1
-        }
-      },
-      size: { sm: {}, md: {} }
-    }
-  },
-  // A scroller clips at its padding box, and the underline indicator hangs 1px
-  // past the triggers so it lands *on* the rule (`bottom: -1` below). A hairline
-  // of padding keeps that overhang inside the clip box; the negative margin hands
-  // the same hairline back, so the bar's height and the rule's position are the
-  // ones it had before the strip could scroll.
-  scroll: {
-    variants: {
-      variant: {
-        underline: { paddingBottom: theme.space[1], marginBottom: -theme.space[1] },
-        pill: {}
-      },
-      size: { sm: {}, md: {} }
-    }
-  },
-  // The triggers and the indicator, in one padding-free coordinate space.
-  row: {
-    position: "relative",
-    flexDirection: "row",
-    variants: {
-      variant: {
-        underline: { gap: theme.space.s4 },
-        pill: { gap: theme.space.s1 }
-      },
-      size: { sm: {}, md: {} }
-    }
-  },
-  underline: {
-    position: "absolute",
-    bottom: -theme.space[1],
-    backgroundColor: theme.color.accent,
-    borderRadius: theme.radius.full,
-    variants: {
-      variant: { underline: {}, pill: {} },
-      size: { sm: {}, md: {} }
-    }
-  },
-  pill: {
-    position: "absolute",
-    backgroundColor: theme.color.accentSoft,
-    // The tint collapses to the plain surface under `contrast: 'more'`, where
-    // `edge.accent` stops being transparent and carries the selection instead.
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.accent,
-    borderRadius: theme.radius.full,
-    variants: {
-      variant: { underline: {}, pill: {} },
-      size: { sm: {}, md: {} }
-    }
-  },
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.space.s2,
-    variants: {
-      variant: {
-        underline: {},
-        pill: { borderRadius: theme.radius.full }
-      },
-      size: {
-        sm: { paddingVertical: theme.space.s2, paddingHorizontal: theme.space.s3 },
-        md: { paddingVertical: theme.space.s3, paddingHorizontal: theme.space.s4 }
-      }
-    }
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    variants: {
-      variant: { underline: {}, pill: {} },
-      size: {
-        sm: { fontSize: theme.fontSize[14] },
-        md: { fontSize: theme.fontSize[16] }
-      }
-    }
-  },
-  // The close affordance beside a `closable` tab. `alignSelf: 'stretch'` gives it
-  // the trigger's full height as vertical hit area; the horizontal padding widens
-  // the target past the glyph. The `x` glyph inherits the label's ink (`text2`
-  // when inactive, `onSurface` when active) — both clear the 3:1 non-text floor.
-  close: {
-    alignSelf: "stretch",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: theme.space.s2,
-    borderRadius: theme.radius.full
-  },
-  // The add button, pinned outside the tablist at the trailing edge. A full
-  // 44pt touch target; the `plus` glyph inks `text2` on the surface (3:1+).
-  add: {
-    minWidth: theme.tapMin,
-    minHeight: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center",
-    marginStart: theme.space.s1
-  },
-  panel: {
-    paddingTop: theme.space.s4,
-    variants: {
-      variant: { underline: {}, pill: {} },
-      size: { sm: {}, md: {} }
-    }
-  }
-}));
-
-export { Tabs };

package/dist/chunk-JV5YOTOB.js

@@ -1,164 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import 'react';
-import { View, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/checkout/checkout-labels.ts
-var DEFAULT_LABELS = {
-  paying: "Paying\u2026",
-  checking: "Checking\u2026",
-  paid: "Paid",
-  orderSummary: "Order summary",
-  summaryHeading: (title, currency) => `${title} \xB7 ${currency}`,
-  total: "Total",
-  discountCode: "Discount code",
-  remove: "Remove",
-  apply: "Apply",
-  encrypted: "Encrypted",
-  cardDetailsNeverTouch: "Card details never touch our servers",
-  pciDss: "PCI DSS SAQ-A",
-  refundWindow: "30-day refund",
-  cart: "Cart",
-  cartCount: (name, count) => `${name}, ${count} ${count === 1 ? "item" : "items"}`,
-  mandateTitle: "Direct debit mandate",
-  mandateAuthorise: (merchant) => `By giving your IBAN and confirming this payment you authorise ${merchant} to send instructions to your bank to debit your account, and your bank to debit your account in accordance with those instructions.`,
-  mandateRefund: (weeks) => `You are entitled to a refund from your bank under the terms of your agreement with it. A refund must be claimed within ${weeks} weeks of the date your account was debited.`
-};
-function SecurePayLabel({
-  label,
-  showLock = true,
-  size = "sm",
-  style
-}) {
-  const theme = useLoamTheme("checkout");
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { style: [styles.secureRow, style], children: [
-    showLock ? /* @__PURE__ */ jsx(
-      View,
-      {
-        "aria-hidden": true,
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no-hide-descendants",
-        children: /* @__PURE__ */ jsx(Icon, { name: "lock", size: theme.icon.xs, color: theme.color.text2 })
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(Text, { style: size === "sm" ? styles.secureLabelSm : styles.secureLabelMd, children: label })
-  ] });
-}
-var TRUST_INLINE = [{ icon: "lock", label: "Encrypted" }];
-var TRUST_ROW = [
-  { icon: "lock", label: "Card details never touch our servers" },
-  { icon: "shield", label: "PCI DSS SAQ-A" },
-  { icon: "refresh", label: "30-day refund" }
-];
-var trustInline = (labels) => [{ icon: "lock", label: labels.encrypted }];
-var trustRow = (labels) => [
-  { icon: "lock", label: labels.cardDetailsNeverTouch },
-  { icon: "shield", label: labels.pciDss },
-  { icon: "refresh", label: labels.refundWindow }
-];
-function TrustRow({ level, items, labels: labelsProp, style }) {
-  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
-  const theme = useLoamTheme("checkout");
-  const { styles } = useStyles(sheet);
-  const resolved = items === void 0 || items === TRUST_INLINE || items === TRUST_ROW ? level === "inline" ? trustInline(labels) : trustRow(labels) : items;
-  if (level === "inline") {
-    const first = resolved[0];
-    return /* @__PURE__ */ jsx(
-      SecurePayLabel,
-      {
-        label: first?.label ?? "",
-        showLock: first?.icon !== void 0,
-        style
-      }
-    );
-  }
-  return (
-    // A real list, so three facts are announced as three.
-    /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: [styles.trustList, style], children: resolved.map((item) => /* @__PURE__ */ jsxs(View, { role: "listitem", style: styles.trustItem, children: [
-      item.icon ? /* @__PURE__ */ jsx(
-        View,
-        {
-          "aria-hidden": true,
-          accessibilityElementsHidden: true,
-          importantForAccessibility: "no-hide-descendants",
-          children: /* @__PURE__ */ jsx(Icon, { name: item.icon, size: theme.icon.xs, color: theme.color.text3 })
-        }
-      ) : null,
-      /* @__PURE__ */ jsx(Text, { style: styles.trustLabel, children: item.label })
-    ] }, item.label)) })
-  );
-}
-function MandateNotice({
-  merchantLegalName,
-  weeks = 8,
-  title,
-  labels: labelsProp,
-  style
-}) {
-  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { style: [styles.mandate, style], children: [
-    /* @__PURE__ */ jsx(Text, { style: styles.overline, children: title ?? labels.mandateTitle }),
-    /* @__PURE__ */ jsx(Text, { style: styles.mandateBody, children: labels.mandateAuthorise(merchantLegalName) }),
-    /* @__PURE__ */ jsx(Text, { style: styles.mandateBody, children: labels.mandateRefund(weeks) })
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  secureRow: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
-  secureLabelSm: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    letterSpacing: theme.type.caption1.letterSpacing,
-    color: theme.color.text2
-  },
-  secureLabelMd: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing,
-    color: theme.color.text2
-  },
-  trustList: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "center",
-    columnGap: theme.space.s4,
-    rowGap: theme.space.s1
-  },
-  trustItem: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
-  trustLabel: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    color: theme.color.text3
-  },
-  mandate: {
-    gap: theme.space.s1,
-    padding: theme.space.s3,
-    borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border,
-    backgroundColor: theme.color.surface2
-  },
-  overline: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.caption2.fontSize,
-    lineHeight: theme.type.caption2.lineHeight,
-    letterSpacing: theme.tracking.caps,
-    textTransform: "uppercase",
-    color: theme.color.text3
-  },
-  mandateBody: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.fontSize * theme.lineHeight.normal,
-    color: theme.color.text2
-  }
-}));
-
-export { DEFAULT_LABELS, MandateNotice, SecurePayLabel, TRUST_INLINE, TRUST_ROW, TrustRow };

package/dist/chunk-KFJGFLMW.js

@@ -1,158 +0,0 @@
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion, springConfig } from './chunk-J64KGCGX.js';
-import * as React from 'react';
-import { Animated, View, Text, Pressable } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var VARIANT_KIND = {
-  empty: "accent",
-  "no-results": "muted",
-  error: "danger",
-  "no-permission": "info",
-  offline: "warn",
-  stale: "muted"
-};
-var VARIANT_ICON = {
-  empty: "mail",
-  "no-results": "search",
-  error: "refresh",
-  "no-permission": "lock",
-  offline: "wifi-off",
-  stale: "clock"
-};
-function useForeground(kind) {
-  const theme = useLoamTheme("empty-state");
-  switch (kind) {
-    case "muted":
-      return theme.color.text2;
-    case "danger":
-      return theme.color.dangerOnSoft;
-    case "warn":
-      return theme.color.warnOnSoft;
-    case "info":
-      return theme.color.infoOnSoft;
-    default:
-      return theme.color.accentOnSoft;
-  }
-}
-function EmptyState({
-  variant = "empty",
-  icon,
-  title,
-  description,
-  actionLabel,
-  onAction,
-  motion = "full"
-}) {
-  const kind = VARIANT_KIND[variant];
-  const { styles } = useStyles(sheet, { kind });
-  const theme = useLoamTheme("empty-state");
-  const fg = useForeground(kind);
-  const iconName = icon ?? VARIANT_ICON[variant];
-  const pillInk = kind === "muted" ? theme.color.text : theme.color.accentInk;
-  const level = useResolvedMotion(motion, "empty-state");
-  const rise = React.useRef(new Animated.Value(level === "none" ? 1 : 0)).current;
-  React.useEffect(() => {
-    if (level === "none") return;
-    Animated.spring(rise, {
-      ...springConfig(theme, "ds"),
-      toValue: 1,
-      useNativeDriver: true
-    }).start();
-  }, []);
-  const riseStyle = {
-    opacity: rise,
-    transform: level === "full" ? [
-      {
-        translateY: rise.interpolate({
-          inputRange: [0, 1],
-          outputRange: [theme.space.s3, 0]
-        })
-      }
-    ] : []
-  };
-  return /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, riseStyle], children: [
-    /* @__PURE__ */ jsx(View, { style: styles.tile, children: /* @__PURE__ */ jsx(Icon, { name: iconName, size: 30, color: fg }) }),
-    /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
-    description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null,
-    actionLabel ? /* @__PURE__ */ jsx(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityLabel: actionLabel,
-        onPress: onAction,
-        style: ({ pressed }) => [styles.pill, pressed && styles.pressed],
-        children: /* @__PURE__ */ jsx(Text, { style: [styles.pillLabel, { color: pillInk }], children: actionLabel })
-      }
-    ) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  base: {
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.space.s4
-  },
-  tile: {
-    width: theme.space[76],
-    height: theme.space[76],
-    borderRadius: theme.radius.xl,
-    alignItems: "center",
-    justifyContent: "center",
-    // The tile is a fixed 76pt square, so the tone edge draws inside it and
-    // costs no layout. Without it a re-resolved palette leaves the glyph on a
-    // bare surface with no tile behind it.
-    borderWidth: theme.borderWidth.base,
-    borderColor: "transparent",
-    variants: {
-      kind: {
-        accent: { backgroundColor: theme.color.accentSoft, borderColor: theme.edge.accent },
-        muted: { backgroundColor: theme.color.surface2, borderColor: theme.edge.neutral },
-        danger: { backgroundColor: theme.color.dangerSoft, borderColor: theme.edge.danger },
-        warn: { backgroundColor: theme.color.warnSoft, borderColor: theme.edge.warn },
-        info: { backgroundColor: theme.color.infoSoft, borderColor: theme.edge.info }
-      }
-    }
-  },
-  title: {
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    fontSize: theme.fontSize[26],
-    color: theme.color.text,
-    textAlign: "center"
-  },
-  description: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[14],
-    lineHeight: Math.round(theme.fontSize[14] * 1.55),
-    color: theme.color.text2,
-    textAlign: "center"
-  },
-  pill: {
-    borderRadius: theme.radius.full,
-    paddingVertical: theme.space.s3,
-    paddingHorizontal: theme.space.s5,
-    alignItems: "center",
-    justifyContent: "center",
-    variants: {
-      kind: {
-        accent: { backgroundColor: theme.color.accent },
-        muted: { backgroundColor: theme.color.surface2 },
-        danger: { backgroundColor: theme.color.accent },
-        warn: { backgroundColor: theme.color.accent },
-        info: { backgroundColor: theme.color.accent }
-      }
-    }
-  },
-  pressed: {
-    transform: [{ scale: 0.95 }]
-  },
-  pillLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSize[14]
-  }
-}));
-
-export { EmptyState };