@btndprojects/loam-ui-native 0.1.1 → 0.2.1

package/dist/chunk-HYEOQWT7.js

@@ -0,0 +1,647 @@
+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 };

package/dist/chunk-I2KLQ2HA.js

@@ -0,0 +1,19 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+export { __export, __reExport };