@oxy.so/bloom 4.16.1 → 4.18.0

package/lib/typescript/module/rating/types.d.ts

@@ -3,6 +3,12 @@ import type { StyleProp, ViewStyle } from 'react-native';
 export type RatingSize = 'small' | 'medium';
 /** `parenthesis` draws "(128)"; `reviews` draws "· 128 reviews". */
 export type RatingCountStyle = 'parenthesis' | 'reviews';
+/**
+ * `compact` (default) is one star and the value; `stars` a full row of `max`
+ * stars (five) filled to the value — fractionally, so 4.3 fills the fifth star
+ * 30% — before the value.
+ */
+export type RatingVariant = 'compact' | 'stars';
 export interface RatingProps {
     /**
      * The rating on a 5 scale. A number is drawn with up to two decimals (4.9,
@@ -20,6 +26,20 @@ export interface RatingProps {
     newLabel?: string;
     /** Default `medium`. */
     size?: RatingSize;
+    /** Default `compact` — one star. `stars` draws a row of five, filled fractionally. */
+    variant?: RatingVariant;
+    /**
+     * Paints the star(s) and the value — and the count, unless `countColor` is
+     * given — e.g. white over a brand-coloured hero, where text-primary and
+     * text-secondary are illegible. Default: text-primary (count text-secondary).
+     */
+    color?: string;
+    /** The filled star(s) alone, e.g. a gold star beside neutral text. Default `color`. */
+    starColor?: string;
+    /** The count alone. Default `color` when given, else text-secondary. */
+    countColor?: string;
+    /** `stars` variant: the unfilled part of each star. Default the theme's border colour. */
+    emptyStarColor?: string;
     /**
      * Overrides the composed accessible name ("Rated 4.92 out of 5, 128
      * reviews"), which is English — pass a translated sentence here.

package/lib/typescript/module/rating/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/rating/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,8FAA8F;AAC9F,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5C,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,SAAS,CAAC;AAEzD,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iEAAiE;AACjE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iFAAiF;IACjF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/rating/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,8FAA8F;AAC9F,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE5C,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,SAAS,CAAC;AAEzD;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC/B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wBAAwB;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,sFAAsF;IACtF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0FAA0F;IAC1F,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iEAAiE;AACjE,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,iFAAiF;IACjF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wBAAwB;IACxB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/lib/typescript/module/stepper/Stepper.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { StepperProps } from './types';
-declare function StepperComponent({ value, onValueChange, min, max, step, disabled: disabledProp, size, formatValue, accessibilityLabel, decrementLabel, incrementLabel, style, testID, }: StepperProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperComponent({ value, onValueChange, min, max, step, disabled: disabledProp, size, formatValue, accessibilityLabel, decrementLabel, incrementLabel, onRemove, removeLabel, style, testID, }: StepperProps): import("react/jsx-runtime").JSX.Element;
 export declare const Stepper: React.MemoExoticComponent<typeof StepperComponent>;
 export {};
 //# sourceMappingURL=Stepper.d.ts.map

package/lib/typescript/module/stepper/Stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAc1D,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,SAAS,CAAC;AA2DzD,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAG,EACH,IAAQ,EACR,QAAQ,EAAE,YAAoB,EAC9B,IAAe,EACf,WAAW,EACX,kBAAkB,EAClB,cAA2B,EAC3B,cAA2B,EAC3B,KAAK,EACL,MAAM,GACP,EAAE,YAAY,2CA8Id;AAED,eAAO,MAAM,OAAO,oDAAyB,CAAC"}
+{"version":3,"file":"Stepper.d.ts","sourceRoot":"","sources":["../../../../src/stepper/Stepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAe1D,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,SAAS,CAAC;AAmEzD,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAG,EACH,IAAQ,EACR,QAAQ,EAAE,YAAoB,EAC9B,IAAe,EACf,WAAW,EACX,kBAAkB,EAClB,cAA2B,EAC3B,cAA2B,EAC3B,QAAQ,EACR,WAAsB,EACtB,KAAK,EACL,MAAM,GACP,EAAE,YAAY,2CAgJd;AAED,eAAO,MAAM,OAAO,oDAAyB,CAAC"}

package/lib/typescript/module/stepper/types.d.ts

@@ -36,6 +36,15 @@ export interface StepperProps {
     decrementLabel?: string;
     /** Name of the `+` button. Default `"Increase"`. */
     incrementLabel?: string;
+    /**
+     * Opt-in remove at the floor: at `min` the `−` button becomes a trash button
+     * that calls this instead of disabling (a basket line going from 1 to gone).
+     * Only the button removes — the keyboard and accessibility actions on the
+     * value still stop at `min`. Without it the stepper floors at `min`.
+     */
+    onRemove?: () => void;
+    /** Name of the trash button drawn at `min` with `onRemove`. Default `"Remove"`. */
+    removeLabel?: string;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/lib/typescript/module/stepper/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/stepper/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,qGAAqG;AACrG,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,yFAAyF;IACzF,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,wFAAwF;IACxF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;;OAIG;IACH;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,EAAE,oBAAoB,GAAG,OAAO,CAAC;IACzF,0FAA0F;IAC1F,KAAK,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/stepper/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,qGAAqG;AACrG,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,yFAAyF;IACzF,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,6EAA6E;IAC7E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,wFAAwF;IACxF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;;OAIG;IACH;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oDAAoD;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mFAAmF;IACnF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,EAAE,oBAAoB,GAAG,OAAO,CAAC;IACzF,0FAA0F;IAC1F,KAAK,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yEAAyE;IACzE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,2CAA2C;IAC3C,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC"}

package/lib/typescript/module/tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAUN,MAAM,OAAO,CAAC;AAoBf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAS5C,OAAO,KAAK,EACV,gBAAgB,EAEhB,SAAS,EACT,gBAAgB,EAChB,WAAW,EACZ,MAAM,SAAS,CAAC;AAuGjB,MAAM,WAAW,SAAS;IACxB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,SAA0B,GAAG,SAAS,CAyBjH;AAqGD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC1C;;;;;;;;;OASG;IACH,OAAO,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CACzC;AAsrBD,eAAO,MAAM,IAAI,iFAAyB,CAAC;AAG3C,eAAO,MAAM,WAAW,8CAAqB,CAAC;AAG9C,eAAO,MAAM,WAAW,8CAA0B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../src/tabs/Tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAUN,MAAM,OAAO,CAAC;AAoBf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAS5C,OAAO,KAAK,EACV,gBAAgB,EAEhB,SAAS,EACT,gBAAgB,EAChB,WAAW,EACZ,MAAM,SAAS,CAAC;AAuGjB,MAAM,WAAW,SAAS;IACxB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,uBAAuB,EAAE,MAAM,CAAC;IAChC,uBAAuB,EAAE,MAAM,CAAC;IAChC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,mBAAmB,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,EAAE,OAAO,SAA0B,GAAG,SAAS,CAyBjH;AAqGD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC1C;;;;;;;;;OASG;IACH,OAAO,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;CACzC;AAyrBD,eAAO,MAAM,IAAI,iFAAyB,CAAC;AAG3C,eAAO,MAAM,WAAW,8CAAqB,CAAC;AAG9C,eAAO,MAAM,WAAW,8CAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxy.so/bloom",
-  "version": "4.16.1",
+  "version": "4.18.0",
   "packageManager": "bun@1.3.14",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",

package/src/app-shell/AppShellEngine.tsx

@@ -538,7 +538,11 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   // Plain navigation belongs to the viewport; only the reading surfaces are inset.
   const documentPanelInset = feedRevealed ? 12 : compactPanel ? 0 : gutter;
   const externalTopHeight = showTopBar ? topBarHeight : 0;
-  const plainDocumentFrame = doc && contentAligned && flowSidebar?.surface === 'plain' && !topBarNode;
+  // A property of the NAVIGATION, not of who scrolls: native resolves every
+  // shell to container scroll, and gating this on `document` left native
+  // phones with an 8px frame around the reading panel that the same layout on
+  // the web does not draw.
+  const plainFrame = contentAligned && flowSidebar?.surface === 'plain' && !topBarNode;
   const readingGap = Math.max(0, asideGap ?? columnGap);
   const readingGroupWidth = contentWidth + (asideBeside ? asideWidth + readingGap : 0);
   const centredBody = (
@@ -556,7 +560,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
           // grows the page, the aside is sticky). Bounded: they stretch.
           alignItems: doc ? 'flex-start' : 'stretch',
           ...(contentAligned ? { flexGrow: compactPanel ? 1 : 0, flexBasis: compactPanel ? 'auto' : readingGroupWidth, maxWidth: compactPanel ? undefined : readingGroupWidth } : {}),
-          ...(plainDocumentFrame ? { paddingTop: compactPanel ? 0 : gutter, paddingBottom: compactPanel ? 0 : gutter } : {}),
+          ...(plainFrame ? { paddingTop: compactPanel ? 0 : gutter, paddingBottom: compactPanel ? 0 : gutter } : {}),
         },
         fill,
       ]}
@@ -747,7 +751,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   const navRegion =
     navInFlow && flowSidebar ? (
       doc ? (
-        <View testID={testID ? `${testID}-navigation` : undefined} style={stickyRail(dockedNav || plainDocumentFrame ? 0 : gutter)}>
+        <View testID={testID ? `${testID}-navigation` : undefined} style={stickyRail(dockedNav || plainFrame ? 0 : gutter)}>
           <Sidebar {...flowSidebar} />
         </View>
       ) : canvas && !dockedNav ? (
@@ -794,8 +798,8 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     // shorthand to physical sides, and which of two declarations for one edge
     // wins is then a matter of declaration order rather than intent.
     ...(dockedNav
-      ? { paddingTop: 0, paddingBottom: 0, paddingInlineStart: 0, paddingInlineEnd: canvas || plainDocumentFrame ? 0 : gutter }
-      : { padding: canvas || plainDocumentFrame ? 0 : gutter }),
+      ? { paddingTop: 0, paddingBottom: 0, paddingInlineStart: 0, paddingInlineEnd: canvas || plainFrame ? 0 : gutter }
+      : { padding: canvas || plainFrame ? 0 : gutter }),
     backgroundColor: background,
   };
 

package/src/breadcrumb/Breadcrumb.tsx

@@ -13,6 +13,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography/Typography';
 import { borderRadius } from '../styles/tokens';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { BUTTON_TRANSITION_MS } from '../button/shared';
@@ -77,10 +78,19 @@ const BREADCRUMB_CSS = interactiveWebCss({
 
 const IS_WEB = Platform.OS === 'web';
 
-/** `ChevronRightSmall`, path for path. */
-function Chevron({ color }: { color: string }) {
+/**
+ * `ChevronRightSmall`, path for path. It points the READING direction: the
+ * row mirrors in a right-to-left layout (flex order follows the direction on
+ * both platforms), so a fixed right-pointing chevron would point back at the
+ * crumb it came from. A glyph is a sign, not an inset — no logical style key
+ * can flip it — so it reads `useIsRtl()` and mirrors itself with `scaleX`.
+ */
+function Chevron({ color, rtl }: { color: string; rtl: boolean }) {
   return (
-    <View aria-hidden style={{ width: 12, height: 12, flexShrink: 0 }}>
+    <View
+      aria-hidden
+      style={{ width: 12, height: 12, flexShrink: 0, ...(rtl ? { transform: [{ scaleX: -1 }] } : null) }}
+    >
       <Svg width={12} height={12} viewBox="0 0 12 12" fill="none">
         <Path
           d="M4.5 3L7.14645 5.64645C7.34171 5.84171 7.34171 6.15829 7.14645 6.35355L4.5 9"
@@ -95,16 +105,31 @@ function Chevron({ color }: { color: string }) {
 
 const BreadcrumbComponent: React.FC<BreadcrumbProps> = ({
   children,
+  separator,
   accessibilityLabel = 'Breadcrumb',
   style,
   testID,
 }) => {
   const theme = useTheme();
+  const rtl = useIsRtl();
+  const directionProps = useDirectionProps();
   const palette = useMemo(() => resolveBreadcrumbPalette(theme), [theme]);
   const items = Children.toArray(children).filter(isValidElement);
+  // A caller's separator is theirs to mirror (or not — a "/" needs nothing);
+  // it is hidden from assistive technology like the chevron, since the list
+  // structure already says where one crumb ends.
+  const between =
+    separator !== undefined ? (
+      <View aria-hidden style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center' }}>
+        {separator}
+      </View>
+    ) : (
+      <Chevron color={palette.tertiary} rtl={rtl} />
+    );
 
   return (
     <View
+      {...directionProps}
       role="navigation"
       accessibilityLabel={accessibilityLabel}
       testID={testID}
@@ -121,7 +146,7 @@ const BreadcrumbComponent: React.FC<BreadcrumbProps> = ({
         >
           {items.map((item, index) => (
             <Fragment key={item.key ?? index}>
-              {index > 0 ? <Chevron color={palette.tertiary} /> : null}
+              {index > 0 ? between : null}
               {item}
             </Fragment>
           ))}

package/src/breadcrumb/types.ts

@@ -6,6 +6,13 @@ import type { ButtonIconComponent } from '../button/types';
 export interface BreadcrumbProps {
   /** `BreadcrumbItem` children. Chevron separators are inserted between them. */
   children: ReactNode;
+  /**
+   * Replaces the chevron between items — e.g. `"/"` as a `Text`, or an icon.
+   * Hidden from assistive technology. The default chevron points the reading
+   * direction (it mirrors in a right-to-left layout); a custom separator is
+   * rendered as given.
+   */
+  separator?: ReactNode;
   /** Names the navigation landmark. Default `"Breadcrumb"`. */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;

package/src/button/Button.tsx

@@ -1,5 +1,6 @@
 import type { LinkButtonProps } from './types';
 import React, { useMemo, memo, type ComponentType } from 'react';
+import { resolveIconSlot } from '../icons/render-icon';
 import {
   ActivityIndicator,
   Linking,
@@ -175,6 +176,8 @@ const ButtonComponent: React.FC<ButtonProps> = ({
   trailing,
   leadingIcon: LeadingIcon,
   trailingIcon: TrailingIcon,
+  renderLeadingIcon,
+  renderTrailingIcon,
   iconOnly = false,
   linkTone = 'primary',
   underline,
@@ -298,9 +301,11 @@ const ButtonComponent: React.FC<ButtonProps> = ({
 
   const content = (
     <>
-      {LeadingIcon ? (
-        <LeadingIcon width={iconSize} height={iconSize} fill={paint.foreground} />
-      ) : null}
+      {resolveIconSlot(renderLeadingIcon, iconSize, paint.foreground, () =>
+        LeadingIcon ? (
+          <LeadingIcon width={iconSize} height={iconSize} fill={paint.foreground} />
+        ) : null,
+      )}
       {leading}
       {iconNode}
       {!isSquare && children != null && (
@@ -313,9 +318,13 @@ const ButtonComponent: React.FC<ButtonProps> = ({
         </Text>
       )}
       {trailing}
-      {!isSquare && TrailingIcon ? (
-        <TrailingIcon width={iconSize} height={iconSize} fill={paint.foreground} />
-      ) : null}
+      {!isSquare
+        ? resolveIconSlot(renderTrailingIcon, iconSize, paint.foreground, () =>
+            TrailingIcon ? (
+              <TrailingIcon width={iconSize} height={iconSize} fill={paint.foreground} />
+            ) : null,
+          )
+        : null}
     </>
   );
 

package/src/button/Button.web.tsx

@@ -9,6 +9,7 @@ import React, {
   type ReactElement,
 } from 'react';
 
+import { resolveIconSlot } from '../icons/render-icon';
 import { useBloomAppearance } from '../appearance/context';
 import { useTheme } from '../theme/use-theme';
 import { SpinnerIcon } from '../loading/SpinnerIcon.web';
@@ -182,6 +183,8 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   trailing,
   leadingIcon: LeadingIcon,
   trailingIcon: TrailingIcon,
+  renderLeadingIcon,
+  renderTrailingIcon,
   iconOnly = false,
   linkTone = 'primary',
   underline,
@@ -339,11 +342,29 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
   const iconNode =
     icon == null ? null : isIconComponent(icon) ? renderIcon(icon) : (icon as React.ReactNode);
 
+  // A caller-drawn glyph is handed `currentColor` rather than the resolved
+  // foreground, for the same reason the icon components above are: on web the
+  // state colours come from the stylesheet, so a glyph that inherits them needs
+  // no re-render when hover or press changes them. Native has no cascade and
+  // passes the resolved value.
+  const renderSlot = (render: typeof renderLeadingIcon, fallback: () => React.ReactNode) => (
+    <span
+      aria-hidden="true"
+      style={{ display: 'inline-flex', flexShrink: 0, width: iconSize, height: iconSize }}
+    >
+      {resolveIconSlot(render, iconSize, 'currentColor', fallback)}
+    </span>
+  );
+
   const labelPadding = isLink ? 0 : geometry.labelPaddingHorizontal;
   const hasLabel = !isSquare && children != null && children !== false;
   const content = (
     <>
-      {LeadingIcon ? renderIcon(LeadingIcon) : null}
+      {renderLeadingIcon
+        ? renderSlot(renderLeadingIcon, () => null)
+        : LeadingIcon
+          ? renderIcon(LeadingIcon)
+          : null}
       {leading}
       {iconNode}
       {hasLabel &&
@@ -367,9 +388,15 @@ const ButtonWebComponent: React.FC<ButtonProps> = ({
         ) : (
           children
         ))}
-      {isSquare && !LeadingIcon && !iconNode && children != null ? children : null}
+      {isSquare && !renderLeadingIcon && !LeadingIcon && !iconNode && children != null
+        ? children
+        : null}
       {trailing}
-      {!isSquare && TrailingIcon ? renderIcon(TrailingIcon) : null}
+      {!isSquare && renderTrailingIcon
+        ? renderSlot(renderTrailingIcon, () => null)
+        : !isSquare && TrailingIcon
+          ? renderIcon(TrailingIcon)
+          : null}
     </>
   );
 

package/src/button/types.ts

@@ -1,4 +1,5 @@
 import type { BloomAppearance, BloomTone, BloomSize } from '../appearance/types';
+import type { BloomIconRenderer } from '../icons/render-icon';
 import type { ComponentType, ReactNode } from 'react';
 import type { GestureResponderEvent, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import type { WebAriaProps } from '../styles/styled-primitives';
@@ -173,6 +174,15 @@ export interface ButtonProps {
   leadingIcon?: ButtonIconComponent;
   /** Same as {@link ButtonProps.leadingIcon}, after the label. Ignored when `iconOnly`. */
   trailingIcon?: ButtonIconComponent;
+  /**
+   * Draw the leading glyph yourself, handed the button's icon size and the
+   * foreground for the CURRENT state — for an app's own icon set, whose props
+   * Bloom's icon slot cannot name. Wins over `leadingIcon`, and is used for the
+   * glyph when `iconOnly`. See `icons/render-icon.tsx`.
+   */
+  renderLeadingIcon?: BloomIconRenderer;
+  /** Same as {@link ButtonProps.renderLeadingIcon}, after the label. Ignored when `iconOnly`. */
+  renderTrailingIcon?: BloomIconRenderer;
   /**
    * Render a square icon-only button (24 / 32 / 36 / 44) from `leadingIcon` or
    * `icon`. Name it with `accessibilityLabel` — there is no text to read.

package/src/button-group/ButtonGroup.tsx

@@ -3,6 +3,7 @@ import React, { Children, createContext, Fragment, isValidElement, memo, useCont
 import { Platform, Pressable, View, type TextStyle } from 'react-native';
 
 import { useInheritedControl } from '../control-surface';
+import { resolveIconSlot } from '../icons/render-icon';
 import { GlassIsland } from '../glass';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography/Typography';
@@ -271,6 +272,8 @@ const ButtonGroupItemComponent: React.FC<ButtonGroupItemProps> = ({
   iconOnly = false,
   leadingIcon: LeadingIcon,
   trailingIcon: TrailingIcon,
+  renderLeadingIcon,
+  renderTrailingIcon,
   accessibilityLabel,
   accessibilityRole = 'button',
   hitSlop,
@@ -355,9 +358,11 @@ const ButtonGroupItemComponent: React.FC<ButtonGroupItemProps> = ({
       aria-haspopup={ariaHasPopup}
       testID={testID}
     >
-      {LeadingIcon ? (
-        <LeadingIcon width={geometry.iconSize} height={geometry.iconSize} fill={foreground} />
-      ) : null}
+      {resolveIconSlot(renderLeadingIcon, geometry.iconSize, foreground, () =>
+        LeadingIcon ? (
+          <LeadingIcon width={geometry.iconSize} height={geometry.iconSize} fill={foreground} />
+        ) : null,
+      )}
       {!iconOnly && children != null ? (
         typeof children === 'string' || typeof children === 'number' ? (
           <Text variant="body-medium" numberOfLines={1} style={labelStyle}>
@@ -367,9 +372,13 @@ const ButtonGroupItemComponent: React.FC<ButtonGroupItemProps> = ({
           children
         )
       ) : null}
-      {!iconOnly && TrailingIcon ? (
-        <TrailingIcon width={geometry.iconSize} height={geometry.iconSize} fill={foreground} />
-      ) : null}
+      {!iconOnly
+        ? resolveIconSlot(renderTrailingIcon, geometry.iconSize, foreground, () =>
+            TrailingIcon ? (
+              <TrailingIcon width={geometry.iconSize} height={geometry.iconSize} fill={foreground} />
+            ) : null,
+          )
+        : null}
     </Pressable>
   );
 };

package/src/button-group/types.ts

@@ -2,6 +2,7 @@ import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
 
 import type { ControlMaterial } from '../control-surface/types';
 import type { ButtonIconComponent } from '../button/types';
+import type { BloomIconRenderer } from '../icons/render-icon';
 import type { WebAriaProps } from '../styles/styled-primitives';
 
 /** The two group sizes: 34px (`md`) and 30px (`sm`) items. */
@@ -67,6 +68,14 @@ export interface ButtonGroupItemProps {
   leadingIcon?: ButtonIconComponent;
   /** Icon component after the label. */
   trailingIcon?: ButtonIconComponent;
+  /**
+   * Draw the leading glyph yourself, handed the item's size and the foreground
+   * for the CURRENT state — for an app's own icon set, whose props Bloom's icon
+   * slot cannot name. Wins over `leadingIcon`. See `icons/render-icon.tsx`.
+   */
+  renderLeadingIcon?: BloomIconRenderer;
+  /** Same as {@link ButtonGroupItemProps.renderLeadingIcon}, after the label. */
+  renderTrailingIcon?: BloomIconRenderer;
   accessibilityLabel?: string;
 
   // ── The trigger contract ────────────────────────────────────────────────

package/src/cart-panel/CartLine.tsx

@@ -21,12 +21,17 @@ import type { CartLineProps } from './types';
  *   leading   the square photo (56; 44 compact), washed while it is sold out
  *   body      the name; the chosen options on one quiet line; the note; then
  *             the quantity control and remove, side by side
- *   trailing  the price, right-aligned, with an optional struck original
+ *   trailing  the price, right-aligned, with an optional struck original, and
+ *             an optional `secondaryPrice` (a second currency) under it in the
+ *             secondary colour
  *
- * THE STEPPER DOES NOT REMOVE. Its floor is 1, and removing is its own control
- * with its own name — a stepper that deletes the line when you press `−` once
- * too often is a destructive action behind an arithmetic one, and it has no
- * label saying so.
+ * BY DEFAULT THE STEPPER DOES NOT REMOVE. Its floor is 1, and removing is its
+ * own control with its own name — a stepper that deletes the line when you
+ * press `−` once too often is a destructive action behind an arithmetic one.
+ * `removeInStepper` opts into the storefront pattern instead: at 1 the `−`
+ * becomes a trash button NAMED as removal (`Stepper`'s `onRemove`), and the
+ * separate remove control is not drawn. A sold-out line keeps the separate
+ * control, because its stepper is disabled and could not remove anything.
  *
  * The row is never pressable, which is what lets the controls live in it: a
  * pressable `Item` is a real `<button>` on web and a control inside one is
@@ -48,6 +53,7 @@ function CartLineComponent(props: CartLineProps) {
     note,
     price,
     originalPrice,
+    secondaryPrice,
     quantity,
     photo,
     photoVariant,
@@ -56,6 +62,7 @@ function CartLineComponent(props: CartLineProps) {
     onQuantityChange,
     onRemove,
     removeLabel,
+    removeInStepper = false,
     density = 'comfortable',
     accessibilityLabel,
     style,
@@ -68,6 +75,10 @@ function CartLineComponent(props: CartLineProps) {
   const g = CART_GEOMETRY[density];
   const compact = density === 'compact';
   const chosen = optionsLine(options);
+  const removeName = removeLabel ?? `Remove ${name}`;
+  // The stepper carries removal only when it is live; a disabled stepper
+  // (sold out) cannot, and the line still needs its remove control.
+  const stepperRemoves = removeInStepper && onRemove !== undefined && onQuantityChange !== undefined && !unavailable;
 
   return (
     <Item
@@ -95,6 +106,16 @@ function CartLineComponent(props: CartLineProps) {
             secondaryColor={paint.textSecondary}
             testID={testID ? `${testID}-price` : undefined}
           />
+          {secondaryPrice ? (
+            <Text
+              variant={compact ? 'caption-1-regular' : 'body-2-regular'}
+              numberOfLines={1}
+              testID={testID ? `${testID}-secondary-price` : undefined}
+              style={{ color: paint.textSecondary, fontVariant: ['tabular-nums'] }}
+            >
+              {secondaryPrice}
+            </Text>
+          ) : null}
         </View>
       }
       style={style}
@@ -146,6 +167,8 @@ function CartLineComponent(props: CartLineProps) {
               min={1}
               disabled={unavailable}
               onValueChange={onQuantityChange}
+              onRemove={stepperRemoves ? onRemove : undefined}
+              removeLabel={stepperRemoves ? removeName : undefined}
               accessibilityLabel={name}
               testID={testID ? `${testID}-stepper` : undefined}
             />
@@ -158,11 +181,11 @@ function CartLineComponent(props: CartLineProps) {
               {`×${quantity}`}
             </Text>
           )}
-          {onRemove ? (
+          {onRemove && !stepperRemoves ? (
             <GlyphButton
               size={32}
               icon={RiDeleteBinLine}
-              accessibilityLabel={removeLabel ?? `Remove ${name}`}
+              accessibilityLabel={removeName}
               onPress={onRemove}
               testID={testID ? `${testID}-remove` : undefined}
             />

package/src/cart-panel/CartPanel.tsx

@@ -187,6 +187,7 @@ function CartPanelComponent({
   lines,
   onLineQuantityChange,
   onLineRemove,
+  removeInStepper = false,
   minimumOrder,
   tip,
   promo,
@@ -239,6 +240,7 @@ function CartPanelComponent({
                 note={line.note}
                 price={line.price}
                 originalPrice={line.originalPrice}
+                secondaryPrice={line.secondaryPrice}
                 quantity={line.quantity}
                 photo={line.photo}
                 photoVariant={line.photoVariant}
@@ -251,6 +253,7 @@ function CartPanelComponent({
                     : undefined
                 }
                 onRemove={onLineRemove ? () => onLineRemove(line.id) : undefined}
+                removeInStepper={removeInStepper}
                 testID={testID ? `${testID}-line-${line.id}` : undefined}
               />
             ))}

package/src/cart-panel/shared.ts

@@ -45,7 +45,15 @@ export function optionsLine(options: ReadonlyArray<string> | undefined): string
 export function composeCartLineName(
   line: Pick<
     CartLineEntry,
-    'name' | 'options' | 'note' | 'quantity' | 'price' | 'originalPrice' | 'unavailable' | 'unavailableLabel'
+    | 'name'
+    | 'options'
+    | 'note'
+    | 'quantity'
+    | 'price'
+    | 'originalPrice'
+    | 'secondaryPrice'
+    | 'unavailable'
+    | 'unavailableLabel'
   >,
 ): string {
   const parts: string[] = [line.name];
@@ -55,6 +63,8 @@ export function composeCartLineName(
   parts.push(String(line.quantity));
   if (line.originalPrice) parts.push(`${line.price}, originally ${line.originalPrice}`);
   else parts.push(line.price);
+  // The second currency travels with the price it restates.
+  if (line.secondaryPrice) parts.push(line.secondaryPrice);
   if (line.unavailable) parts.push(line.unavailableLabel ?? 'Sold out');
   return parts.join(', ');
 }

package/src/cart-panel/types.ts

@@ -26,6 +26,12 @@ export interface CartLineEntry {
   price: string;
   /** PRE-FORMATTED price before a discount, struck through BEFORE `price`. */
   originalPrice?: string;
+  /**
+   * A second, PRE-FORMATTED rendering of `price` — the buyer's currency beside
+   * the shop's, `"≈ 12,00 €"` — drawn de-emphasised under it. The cart's
+   * spelling of `ListingPriceLine.secondary`; drawn as given, nothing converts.
+   */
+  secondaryPrice?: string;
   /** How many. Always at least 1 — a line with none of it is a line that was removed. */
   quantity: number;
   /** An absolute URL, or an id the app's `ImageResolver` turns into one. */
@@ -45,6 +51,13 @@ export interface CartLineProps extends Omit<CartLineEntry, 'id'> {
   onRemove?: () => void;
   /** Names the remove control, which draws no text. Default `"Remove <name>"`. */
   removeLabel?: string;
+  /**
+   * Moves removal INTO the stepper: at quantity 1 its `−` becomes a trash button
+   * named `removeLabel` that calls `onRemove`, and no separate remove control is
+   * drawn. Needs both `onQuantityChange` and `onRemove`; a sold-out line keeps
+   * the separate control. Default `false` — the stepper floors at 1.
+   */
+  removeInStepper?: boolean;
   /** Default `comfortable`. */
   density?: CartDensity;
   /** Replaces the composed name ("Ember flatbread, Large, Extra cheese, 2, €24.00"). */
@@ -151,6 +164,11 @@ export interface CartPanelProps {
   onLineQuantityChange?: (id: string, quantity: number) => void;
   /** With it every line draws a remove control. */
   onLineRemove?: (id: string) => void;
+  /**
+   * Every line removes from its stepper at quantity 1 instead of drawing a
+   * separate remove control (`CartLine`'s `removeInStepper`). Default `false`.
+   */
+  removeInStepper?: boolean;
 
   /** The shortfall warning. Drawn above the totals, where the number it is about is. */
   minimumOrder?: CartMinimumOrder;

package/src/checkout-summary/CheckoutConfirm.tsx

@@ -15,6 +15,9 @@ import type { CheckoutConfirmProps } from './types';
  * terms under it, and the state where it must not fire twice.
  *
  *   button   `Button` primary large, full width, "Place order · €24.80"
+ *   second   `secondaryAmount` ("≈ 12,00 €"), 8 under the button, the same
+ *            centred secondary line as the terms — the button carries ONE
+ *            amount, the one the charge is made in
  *   terms    12 under it; the centred secondary line every Bloom action card
  *            draws under its primary (`ActionCardNote`)
  *   footer   16 under the terms
@@ -44,6 +47,7 @@ import type { CheckoutConfirmProps } from './types';
 function CheckoutConfirmComponent({
   label = CHECKOUT_CONFIRM_LABEL,
   amount,
+  secondaryAmount,
   terms,
   onConfirm,
   disabled = false,
@@ -90,6 +94,11 @@ function CheckoutConfirmComponent({
       >
         {words}
       </Button>
+      {secondaryAmount ? (
+        <ActionCardNote style={{ marginTop: 8 }} testID={id('secondary-amount')}>
+          {secondaryAmount}
+        </ActionCardNote>
+      ) : null}
       {terms != null ? (
         <ActionCardNote style={{ marginTop: 12 }} testID={id('terms')}>
           {terms}