@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-HYEOQWT7.js

@@ -1,647 +0,0 @@
-import { DEFAULT_LABELS } from './chunk-JV5YOTOB.js';
-import { SummaryItemRow, PriceRow, Amount, FxNote } from './chunk-QHAITQIF.js';
-import { Sheet } from './chunk-QYPE5JX3.js';
-import { Input } from './chunk-7BUIKDD6.js';
-import { Badge } from './chunk-TN2ZNJUI.js';
-import { expandedProps } from './chunk-W23G6JLF.js';
-import { Button } from './chunk-E2E3I5W2.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import { useLabels, useLoamLocale } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion, springConfig, motionTiming } from './chunk-J64KGCGX.js';
-import * as React4 from 'react';
-import { StyleSheet, Text, View, AccessibilityInfo, Pressable, LayoutAnimation, Animated } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { SHEET_DISMISS_FRACTION } from '@btndprojects/loam-pay';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { icons } from '@btndprojects/loam-icons';
-
-function CheckoutSheet({
-  open,
-  title,
-  titleLevel,
-  description,
-  children,
-  commit,
-  trust,
-  dismissible = true,
-  safeAreaBottom = 0,
-  closeLabel,
-  style,
-  onDismiss
-}) {
-  const theme = useLoamTheme("checkout");
-  const { styles: styles2 } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(
-    Sheet,
-    {
-      open,
-      title,
-      titleLevel,
-      dismissible,
-      closeLabel,
-      dismissFraction: SHEET_DISMISS_FRACTION,
-      onClose: onDismiss,
-      footer: (
-        /* The commit bar, outside the scroller. `safeAreaBottom` is padding on
-           the bar rather than a margin under it — or `Sheet.safeAreaBottom`, a
-           slot padding that would push this bar's own fill up off the screen
-           edge — so the surface still reaches the home indicator. */
-        /* @__PURE__ */ jsxs(View, { style: [styles2.commitBar, { paddingBottom: theme.space.s4 + safeAreaBottom }], children: [
-          commit,
-          trust
-        ] })
-      ),
-      children: [
-        description ? /* @__PURE__ */ jsx(Text, { style: styles2.description, children: description }) : null,
-        /* @__PURE__ */ jsx(View, { style: [styles2.body, style], children })
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  description: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.fontSize * theme.lineHeight.normal,
-    color: theme.color.text2
-  },
-  body: { gap: theme.space.s4 },
-  // The bar reads as a bar rather than as another block in the form: its own
-  // fill, a hairline above it, and the safe-area inset folded into its bottom
-  // padding at the use site. The horizontal padding is the bar's own now that it
-  // lives in `Sheet`'s footer slot, which is deliberately full-bleed — so the
-  // hairline spans the panel while the button keeps the body's gutter.
-  commitBar: {
-    gap: theme.space.s3,
-    paddingTop: theme.space.s4,
-    paddingHorizontal: theme.space[22],
-    borderTopWidth: theme.borderWidth.base,
-    borderTopColor: theme.color.border,
-    backgroundColor: theme.color.surface
-  }
-}));
-function PayButton({
-  label,
-  state,
-  busyLabel,
-  validatingLabel,
-  doneLabel,
-  showLock = true,
-  fullWidth = true,
-  size = "lg",
-  accessibilityLabel,
-  labels: labelsProp,
-  style,
-  onPress
-}) {
-  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
-  const theme = useLoamTheme("checkout");
-  const { styles: styles2 } = useStyles(sheet2);
-  const [idleWidth, setIdleWidth] = React4.useState(null);
-  const resting = state === "idle";
-  const busy = state === "validating" || state === "busy";
-  const onLayout = (event) => {
-    if (!resting || fullWidth) return;
-    const next = event.nativeEvent.layout.width;
-    if (next <= 0) return;
-    setIdleWidth((prev) => prev !== null && Math.abs(prev - next) < 1 ? prev : next);
-  };
-  const currentLabel = resting ? label : state === "validating" ? validatingLabel ?? labels.checking : state === "busy" ? busyLabel ?? labels.paying : doneLabel ?? labels.paid;
-  const spoken = React4.useRef(state);
-  React4.useEffect(() => {
-    if (spoken.current === state) return;
-    spoken.current = state;
-    if (state !== "idle" && typeof currentLabel === "string") {
-      AccessibilityInfo.announceForAccessibility?.(currentLabel);
-    }
-  }, [state, currentLabel]);
-  const leadingIcon = resting && showLock ? "lock" : state === "done" ? "check" : void 0;
-  return /* @__PURE__ */ jsx(
-    View,
-    {
-      onLayout,
-      style: [
-        fullWidth ? styles2.wrapFull : styles2.wrapAuto,
-        // The frozen width, and only while the label is not the resting one.
-        !resting && !fullWidth && idleWidth !== null ? { minWidth: idleWidth } : null,
-        style
-      ],
-      children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          size,
-          fullWidth: true,
-          loading: busy,
-          leadingIcon,
-          accessibilityLabel: resting ? accessibilityLabel : void 0,
-          onPress: () => {
-            if (!resting) return;
-            onPress();
-          },
-          children: typeof currentLabel === "string" ? currentLabel : /* @__PURE__ */ jsx(View, { style: styles2.labelRow, children: typeof currentLabel === "number" ? /* @__PURE__ */ jsx(Text, { style: [styles2.label, { color: theme.color.accentInk }], children: currentLabel }) : currentLabel })
-        }
-      )
-    }
-  );
-}
-var sheet2 = createStyleSheet((theme) => ({
-  wrapFull: { alignSelf: "stretch" },
-  wrapAuto: { alignSelf: "flex-start" },
-  labelRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.ctl.gap.lg
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.body.fontSize,
-    lineHeight: theme.type.body.lineHeight,
-    letterSpacing: theme.type.body.letterSpacing
-  }
-}));
-function summaryIcon(name) {
-  if (name === void 0) return void 0;
-  return Object.prototype.hasOwnProperty.call(icons, name) ? name : void 0;
-}
-function OrderSummary({
-  variant,
-  items,
-  rows,
-  total,
-  currency,
-  title,
-  totalLabel,
-  coupon,
-  fxNote,
-  locale: localeProp,
-  labels: labelsProp,
-  style,
-  onCouponDraftChange,
-  onApplyCoupon,
-  onRemoveCoupon
-}) {
-  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
-  const providerLocale = useLoamLocale();
-  const locale = localeProp ?? providerLocale;
-  const theme = useLoamTheme("checkout");
-  const { styles: styles2 } = useStyles(sheet3);
-  const couponLabelId = React4.useId();
-  const couponErrorId = React4.useId();
-  const heading = labels.summaryHeading(title ?? labels.orderSummary, currency);
-  const showItems = variant === "itemised" && items !== void 0 && items.length > 0;
-  return /* @__PURE__ */ jsxs(
-    View,
-    {
-      role: "region",
-      accessibilityLabel: heading,
-      style: [styles2.section, style],
-      children: [
-        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles2.overline, children: heading }),
-        showItems ? /* @__PURE__ */ jsx(View, { role: "list", accessibilityRole: "list", style: styles2.itemList, children: items.map((item) => /* @__PURE__ */ jsx(View, { role: "listitem", children: /* @__PURE__ */ jsx(
-          SummaryItemRow,
-          {
-            name: item.name,
-            detail: item.detail,
-            qty: item.qty,
-            minor: item.qty * item.unit,
-            currency,
-            icon: summaryIcon(item.icon),
-            locale,
-            noSymbol: true
-          }
-        ) }, `${item.name}-${item.unit}`)) }) : null,
-        rows.length > 0 ? /* @__PURE__ */ jsx(View, { style: [styles2.rowStack, showItems ? styles2.rowStackRuled : null], children: rows.map((row, index) => /* @__PURE__ */ jsx(
-          PriceRow,
-          {
-            label: row.label,
-            minor: row.minor,
-            currency,
-            tone: row.tone,
-            strong: row.strong,
-            rule: row.rule,
-            locale,
-            noSymbol: true
-          },
-          `${index}-${String(row.label)}`
-        )) }) : null,
-        coupon ? /* @__PURE__ */ jsx(View, { style: styles2.couponBlock, children: coupon.applied ? /* @__PURE__ */ jsxs(View, { style: styles2.appliedRow, children: [
-          /* @__PURE__ */ jsx(Icon, { name: "tag", size: theme.icon.sm, color: theme.color.goodOnSoft }),
-          /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles2.appliedCode, children: coupon.applied }),
-          onRemoveCoupon ? /* @__PURE__ */ jsx(View, { style: styles2.pushEnd, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "xs", onPress: onRemoveCoupon, children: labels.remove }) }) : null
-        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Text, { nativeID: couponLabelId, style: styles2.fieldLabel, children: coupon.label ?? labels.discountCode }),
-          /* @__PURE__ */ jsxs(View, { style: styles2.couponRow, children: [
-            /* @__PURE__ */ jsx(View, { style: styles2.couponField, children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                "aria-labelledby": couponLabelId,
-                "aria-describedby": coupon.error ? couponErrorId : void 0,
-                "aria-invalid": coupon.error !== void 0 || void 0,
-                value: coupon.draft,
-                placeholder: coupon.placeholder,
-                autoComplete: "off",
-                autoCorrect: false,
-                loading: coupon.busy ?? false,
-                error: coupon.error !== void 0,
-                onChangeText: (next) => onCouponDraftChange?.(next)
-              }
-            ) }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                loading: coupon.busy ?? false,
-                onPress: () => onApplyCoupon?.(coupon.draft),
-                children: labels.apply
-              }
-            )
-          ] }),
-          coupon.error ? /* @__PURE__ */ jsx(Text, { nativeID: couponErrorId, accessibilityRole: "alert", style: styles2.fieldError, children: coupon.error }) : null
-        ] }) }) : null,
-        /* @__PURE__ */ jsxs(View, { style: styles2.totalRow, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles2.totalLabel, children: totalLabel ?? labels.total }),
-          /* @__PURE__ */ jsx(Amount, { minor: total, currency, size: "hero", locale })
-        ] }),
-        fxNote ? /* @__PURE__ */ jsx(FxNote, { currency: fxNote.currency, rateLine: fxNote.rateLine }) : null
-      ]
-    }
-  );
-}
-function CollapsedSummaryBar({
-  total,
-  currency,
-  open,
-  children,
-  label,
-  locale: localeProp,
-  labels: labelsProp,
-  style,
-  onToggle
-}) {
-  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
-  const providerLocale = useLoamLocale();
-  const locale = localeProp ?? providerLocale;
-  const theme = useLoamTheme("checkout");
-  const { styles: styles2 } = useStyles(sheet3);
-  const panelId = React4.useId();
-  return /* @__PURE__ */ jsxs(View, { style: [styles2.bar, style], children: [
-    /* @__PURE__ */ jsxs(
-      Pressable,
-      {
-        accessibilityRole: "button",
-        accessibilityState: { expanded: open },
-        ...expandedProps(open),
-        "aria-controls": panelId,
-        onPress: () => {
-          const ds = theme.spring.ds;
-          LayoutAnimation.configureNext(
-            theme.reduceMotion ? { duration: theme.duration.fast, update: { type: "easeInEaseOut" }, create: { type: "easeInEaseOut", property: "opacity" }, delete: { type: "easeInEaseOut", property: "opacity" } } : {
-              duration: ds.duration,
-              update: { type: "spring", springDamping: ds.dampingRatio },
-              create: { type: "easeInEaseOut", property: "opacity" },
-              delete: { type: "easeInEaseOut", property: "opacity" }
-            }
-          );
-          onToggle(!open);
-        },
-        style: ({ pressed }) => [styles2.trigger, pressed ? styles2.triggerPressed : null],
-        children: [
-          /* @__PURE__ */ jsx(
-            Icon,
-            {
-              name: open ? "chevron-up" : "chevron-down",
-              size: theme.icon.sm,
-              color: theme.color.text3
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { style: styles2.triggerLabel, children: label ?? labels.orderSummary }),
-          /* @__PURE__ */ jsx(View, { style: styles2.pushEnd, children: /* @__PURE__ */ jsx(Amount, { minor: total, currency, size: "md", weight: "bold", locale }) })
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsx(View, { nativeID: panelId, style: styles2.panel, children }) : null
-  ] });
-}
-var sheet3 = createStyleSheet((theme) => ({
-  section: { gap: theme.space.s3 },
-  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
-  },
-  itemList: { gap: theme.space.s3 },
-  rowStack: { gap: theme.space.s2 },
-  rowStackRuled: {
-    paddingTop: theme.space.s3,
-    borderTopWidth: theme.borderWidth.base,
-    borderTopColor: theme.color.border
-  },
-  couponBlock: { gap: theme.space.s1 },
-  appliedRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s2,
-    padding: theme.space.s2,
-    borderRadius: theme.radius.md,
-    // The soft tint always carries its tone edge: `goodSoft` collapses to the
-    // plain surface under high contrast, and the edge is the only thing left
-    // drawing the block.
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.good,
-    backgroundColor: theme.color.goodSoft
-  },
-  appliedCode: {
-    flexShrink: 1,
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.goodOnSoft
-  },
-  pushEnd: { marginStart: "auto" },
-  fieldLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    color: theme.color.text2
-  },
-  couponRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
-  couponField: { flex: 1 },
-  fieldError: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.caption1.fontSize,
-    lineHeight: theme.type.caption1.lineHeight,
-    color: theme.color.danger
-  },
-  totalRow: {
-    flexDirection: "row",
-    alignItems: "baseline",
-    justifyContent: "space-between",
-    gap: theme.space.s4,
-    paddingTop: theme.space.s3,
-    borderTopWidth: theme.borderWidth.base,
-    borderTopColor: theme.color.border
-  },
-  totalLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.text
-  },
-  bar: {
-    borderRadius: theme.radius.md,
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.color.border,
-    backgroundColor: theme.color.surface
-  },
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s3,
-    minHeight: theme.ctl.lg,
-    padding: theme.space.s3
-  },
-  triggerPressed: { backgroundColor: theme.state.pressed },
-  triggerLabel: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    color: theme.color.text
-  },
-  panel: {
-    padding: theme.space.s3,
-    borderTopWidth: theme.borderWidth.base,
-    borderTopColor: theme.color.border
-  }
-}));
-var CartContext = React4.createContext(null);
-var measure = (node) => new Promise((resolve) => {
-  if (!node?.measureInWindow) return resolve(null);
-  node.measureInWindow(
-    (x, y, w, h) => resolve(Number.isFinite(x) && w > 0 ? { x, y, w, h } : null)
-  );
-});
-function CartHost({ children, motion = "full", style }) {
-  const level = useResolvedMotion(motion, "checkout");
-  const host = React4.useRef(null);
-  const target = React4.useRef(null);
-  const bump = React4.useRef(null);
-  const [flights, setFlights] = React4.useState([]);
-  const seq = React4.useRef(0);
-  const levelRef = React4.useRef(level);
-  levelRef.current = level;
-  const fly = React4.useCallback(async (from, options = {}) => {
-    const land = () => {
-      bump.current?.();
-      haptics.notify("success");
-    };
-    if (levelRef.current !== "full") {
-      if (levelRef.current === "reduced") land();
-      return;
-    }
-    const [h, a, b] = await Promise.all([
-      measure(host.current),
-      measure(from),
-      measure(target.current)
-    ]);
-    if (!h || !a || !b) {
-      land();
-      return;
-    }
-    await new Promise((resolve) => {
-      const id = ++seq.current;
-      const rel = (r) => ({ x: r.x - h.x, y: r.y - h.y, w: r.w, h: r.h });
-      setFlights((all) => [
-        ...all,
-        {
-          id,
-          from: rel(a),
-          to: rel(b),
-          children: options.children,
-          done: () => {
-            setFlights((rest) => rest.filter((f) => f.id !== id));
-            land();
-            resolve();
-          }
-        }
-      ]);
-    });
-  }, []);
-  const value = React4.useMemo(() => ({ target, bump, fly }), [fly]);
-  return /* @__PURE__ */ jsx(CartContext.Provider, { value, children: /* @__PURE__ */ jsxs(View, { ref: host, style: [styles.host, style], collapsable: false, children: [
-    children,
-    /* @__PURE__ */ jsx(
-      View,
-      {
-        pointerEvents: "none",
-        style: StyleSheet.absoluteFill,
-        ...{ "aria-hidden": true },
-        children: flights.map((f) => /* @__PURE__ */ jsx(CartFlight, { flight: f }, f.id))
-      }
-    )
-  ] }) });
-}
-var styles = StyleSheet.create({ host: { flex: 1 } });
-function CartFlight({ flight }) {
-  const theme = useLoamTheme("checkout");
-  const { styles: s } = useStyles(sheet4);
-  const p = React4.useRef(new Animated.Value(0)).current;
-  const { from, to } = flight;
-  const size = Math.max(16, Math.min(from.w, from.h));
-  const dx = to.x + to.w / 2 - (from.x + from.w / 2);
-  const dy = to.y + to.h / 2 - (from.y + from.h / 2);
-  React4.useEffect(() => {
-    const anim = Animated.spring(p, {
-      toValue: 1,
-      ...springConfig(theme, "ss"),
-      useNativeDriver: true
-    });
-    anim.start(() => flight.done());
-    return () => anim.stop();
-  }, []);
-  return /* @__PURE__ */ jsx(
-    Animated.View,
-    {
-      testID: "cart-flight",
-      style: [
-        s.flight,
-        {
-          left: from.x + from.w / 2 - size / 2,
-          top: from.y + from.h / 2 - size / 2,
-          width: size,
-          height: size,
-          opacity: p.interpolate({
-            inputRange: [0, 0.7, 1],
-            outputRange: [1, 1, 0],
-            extrapolate: "clamp"
-          }),
-          transform: [
-            { translateX: p.interpolate({ inputRange: [0, 1], outputRange: [0, dx] }) },
-            // A shallow arc: the copy lifts before it drops into the cart.
-            {
-              translateY: p.interpolate({
-                inputRange: [0, 0.4, 1],
-                outputRange: [0, Math.min(dy, 0) * 0.4 - size * 0.4, dy]
-              })
-            },
-            {
-              scale: p.interpolate({
-                inputRange: [0, 1],
-                outputRange: [1, 0.3],
-                extrapolate: "clamp"
-              })
-            }
-          ]
-        }
-      ],
-      children: flight.children ?? /* @__PURE__ */ jsx(View, { style: s.dot })
-    }
-  );
-}
-function useAddToCart() {
-  const ctx = React4.useContext(CartContext);
-  return React4.useMemo(
-    () => ({ fly: ctx ? ctx.fly : async () => haptics.notify("success") }),
-    [ctx]
-  );
-}
-function CartButton({
-  count,
-  onPress,
-  accessibilityLabel,
-  labels: labelsProp,
-  motion = "full",
-  style,
-  testID
-}) {
-  const labels = useLabels("checkout", DEFAULT_LABELS, labelsProp);
-  const theme = useLoamTheme("checkout");
-  const { styles: s } = useStyles(sheet4);
-  const level = useResolvedMotion(motion, "checkout");
-  const ctx = React4.useContext(CartContext);
-  const ref = React4.useRef(null);
-  const pulse = React4.useRef(new Animated.Value(0)).current;
-  React4.useEffect(() => {
-    if (!ctx) return;
-    const node = ref.current;
-    ctx.target.current = node;
-    ctx.bump.current = () => {
-      if (level === "none") return;
-      pulse.setValue(1);
-      const anim = level === "full" ? Animated.spring(pulse, {
-        toValue: 0,
-        ...springConfig(theme, "fs"),
-        useNativeDriver: true
-      }) : Animated.timing(pulse, { toValue: 0, ...motionTiming(level), useNativeDriver: true });
-      anim.start();
-    };
-    return () => {
-      if (ctx.target.current === node) ctx.target.current = null;
-      ctx.bump.current = null;
-    };
-  }, [ctx, level, theme, pulse]);
-  const label = count > 0 ? labels.cartCount(accessibilityLabel ?? labels.cart, count) : accessibilityLabel ?? labels.cart;
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      ref,
-      role: "button",
-      accessibilityLabel: label,
-      onPress,
-      testID,
-      collapsable: false,
-      style: ({ pressed }) => [s.button, pressed && s.pressed, style],
-      children: [
-        /* @__PURE__ */ jsx(
-          Animated.View,
-          {
-            style: level === "full" ? {
-              transform: [
-                { scale: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 1.12] }) }
-              ]
-            } : { opacity: pulse.interpolate({ inputRange: [0, 1], outputRange: [1, 0.5] }) },
-            children: /* @__PURE__ */ jsx(Icon, { name: "cart", size: 22, color: theme.color.text })
-          }
-        ),
-        /* @__PURE__ */ jsx(View, { style: s.badge, pointerEvents: "none", ...{ "aria-hidden": true }, children: /* @__PURE__ */ jsx(Badge, { variant: "accent", size: "sm", count, animateCount: true, motion }) })
-      ]
-    }
-  );
-}
-var sheet4 = createStyleSheet((theme) => ({
-  button: {
-    minWidth: theme.tapMin,
-    minHeight: theme.tapMin,
-    alignItems: "center",
-    justifyContent: "center",
-    borderRadius: theme.radius.full
-  },
-  pressed: { opacity: theme.state.pressedOpacity },
-  badge: { position: "absolute", top: theme.space[1], right: theme.space[1] },
-  flight: {
-    position: "absolute",
-    overflow: "hidden",
-    borderRadius: theme.radius.md,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  dot: {
-    width: "100%",
-    height: "100%",
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.accent
-  }
-}));
-
-export { CartButton, CartHost, CheckoutSheet, CollapsedSummaryBar, OrderSummary, PayButton, summaryIcon, useAddToCart };