@oxy.so/bloom 3.0.1 → 3.2.0

package/docs/icons.mdx

@@ -1,6 +1,6 @@
 ---
 title: Icons
-description: Remix Icon, one component per glyph — how to import it, how apps migrate off the retired Bloom set, and why a wrong name is invisible to the compiler.
+description: Remix Icon, one component per glyph — how to import one glyph instead of all 461, how apps migrate off the retired Bloom set, and why a wrong name is invisible to the compiler.
 order: 66
 ---
 
@@ -17,6 +17,59 @@ import { RiNotification3Line as BellIcon } from '@oxy.so/bloom/icons';
 <BellIcon size="lg" fill={colors.text} />
 ```
 
+## Import one glyph, ship one glyph
+
+**Metro does not tree-shake.** `@oxy.so/bloom/icons` is a flat barrel over all
+461 glyphs, so an app that names one icon through it bundles all 461 — the
+import is a static graph edge to every one of them, and nothing downstream
+removes what the app never renders.
+
+Every glyph is therefore *also* its own subpath. The module name is the export
+name, so there is nothing new to look up:
+
+```tsx
+import { RiNotification3Line as BellIcon } from '@oxy.so/bloom/icons/RiNotification3Line';
+```
+
+Measured on a Metro bundle (`--platform ios --dev false --minify true`) built
+from two entry points that name the same 12 `Ri*` icons — the set CrowdSource's
+apps import — and differ in nothing else:
+
+| | from the barrel | by subpath |
+|---|---|---|
+| glyph modules in the bundle | 461 | 12 |
+| bytes in those modules | 318,869 | 7,406 |
+| whole bundle | 3,324,898 | 2,959,073 |
+
+**365,825 bytes, 11.0% of the bundle.** 311,463 of those are the 449 glyphs the
+app never draws; the remaining 54,362 are the two barrel modules themselves
+(`icons/index.ts`, and the 461-line `icons/remix/index.ts`) and Metro's
+per-module dependency arrays. The same shape was what pushed one app's
+JavaScript budget over by 119 KiB between Bloom 2.0.0 (338 icons) and 3.1.0
+(463): the barrel grows with the icon set whether or not an app uses any of it.
+
+### The barrel still works, and stays supported
+
+`@oxy.so/bloom/icons` is an **exact** `exports` key and the per-glyph entry is a
+**pattern** (`./icons/Ri*`); an exact key beats a pattern in every resolver that
+implements `exports`, so no existing import moves and nothing needs migrating.
+Reach for the barrel when a file genuinely wants many glyphs — a `Foundations`
+story, or the icon picker — and for the subpath everywhere else.
+
+Both shapes resolve the same four ways Bloom is consumed, verified against a
+fixture rather than assumed: Metro (the `react-native` condition, which takes
+`src/`), an ESM bundler, Node's `require`, and `tsc` under `node16`, `bundler`
+**and** the legacy `node` resolution. That last one reads `typesVersions`
+instead of `exports`, which is why the package now ships one; before it did,
+*no* Bloom subpath typechecked under `moduleResolution: "node"`.
+
+One thing the pattern deliberately cannot express: `@oxy.so/bloom/icons/index`.
+The `Ri` sits in the pattern rather than in the `*`, because a bare `./icons/*`
+would also match `index` — and the built `icons/remix/index.js` exists while
+`src/icons/remix/` holds an `index.ts` and no `index.tsx`, so that specifier
+would resolve for every consumer *except* Metro, the one that reads `src/`.
+Use `@oxy.so/bloom/icons` for the barrel.
+
 ## The naming is `Ri<Subject><Line|Fill>`
 
 The name on remixicon.com is the import: `arrow-right-s-line` is
@@ -145,14 +198,16 @@ release blocker once got filed against the tab bar.
 It is the only gate on this class of bug, and it deliberately does **not** strip
 comments, because the comments are the surface under test.
 
-## Two import shapes are correct, one is not
+## Three import shapes are correct, one is not
 
 ```tsx
+import { RiHome5Line } from '@oxy.so/bloom/icons/RiHome5Line'; // ✅ one glyph, one module
 import * as Icons from '@oxy.so/bloom/icons';   // ✅ the subpath, as a namespace
 import { Icons } from '@oxy.so/bloom';          // ✅ the root barrel's namespace
 ```
 
-The third shape — importing `Icons` as a *named* export from the **subpath** —
+The first is the one to reach for; the other two pull the whole set in (above).
+The fourth shape — importing `Icons` as a *named* export from the **subpath** —
 is `undefined` at runtime. The subpath exports the components flat; the `Icons`
 name is assembled by the root barrel (`export * as Icons from './icons'`), so
 there is no such named export to destructure.

package/docs/input-group.mdx

@@ -71,6 +71,28 @@ field, which belongs to [`Field`](/docs/bloom/main/field) or
 `InputGroup` goes *inside* a `Field` — the group is the control, the field is
 its label, hint and error.
 
+## In a `Field`
+
+A group holding a control and its addons is one control as far as a `Field` is
+concerned: the field's `disabled` and invalid state reach every member through the
+group — **including an addon's `Button`**, which reads neither the field nor the
+text-field group itself.
+
+```tsx
+<Field label="Domain" error={errors.domain} disabled={locked}>
+  <InputGroup>
+    <InputGroupAddon>https://</InputGroupAddon>
+    <TextFieldInput value={domain} onChangeText={setDomain} />
+    <InputGroupAddon divider>
+      <Button size="small" variant="ghost" onPress={check}>Check</Button>
+    </InputGroupAddon>
+  </InputGroup>
+</Field>
+```
+
+The group publishes no NAME: it does not know which of its children is the control
+the label points at, so the id stays the field's and the input's to apply.
+
 ## `divider`
 
 Use it when the addon is a distinct target — a button, a dropdown. Skip it for

package/docs/input-otp.mdx

@@ -59,3 +59,17 @@ Clearing a box removes its digit from the value, so later digits move left.
 - The row is a `group` named by `accessibilityLabel`; each box is named `Digit 1 of 6` and so on.
 - `aria-invalid` sits on each box, not the group — `group` does not support it.
 - Say why the code is invalid in text next to the field; the red border is not an announcement.
+
+Inside a `Field` it is the several-controls case: use `multiple`, so the field
+becomes a labelled `group`, names the box group and describes it — while each box
+keeps its own name ("Digit 3 of 6") and its own `aria-invalid`. The field's
+`disabled` freezes every box.
+
+```tsx
+<Field label="Verification code" multiple error={errors.code}>
+  <InputOtp length={6} onComplete={verify} />
+</Field>
+```
+
+`accessibilityLabel` still wins when written; `"One-time code"` is the last resort
+rather than a default, because a default would outrank the label on screen.

package/docs/layout.mdx

@@ -19,6 +19,7 @@ import {
   useClaimTopEdge,
   ScrollOffsetProvider,
   useScrollOffset,
+  ScreenScope,
 } from '@oxy.so/bloom/layout';
 ```
 
@@ -127,6 +128,39 @@ native. That default is right for exactly one layout — a web page whose docume
 *is* the scroller — and silently wrong for a desktop panel and for every native
 screen, with no error: the header simply never reacts.
 
+## `ScreenScope` — a surface that is its own screen
+
+The top edge and the scroll offset are per-SCREEN, and a modal, a sheet or a
+detail panel is a second screen drawn over the first. Without a boundary both
+contracts cross it, and neither failure has an error in it:
+
+- A header inside a full-screen dialog claims the top edge of the page
+  UNDERNEATH it. Claims combine with `max`, so the page behind is padded for
+  chrome it does not have — and the padding appears and disappears with the
+  modal, because the claim unregisters on unmount.
+- Chrome inside the sheet reads the page's scroll offset and follows a scroller
+  the user is not touching.
+
+```tsx
+<ScreenScope>
+  <PageHeader title="Edit listing" onBack={close} />
+  <ScrollView contentContainerStyle={{ paddingTop: useTopEdgeInset() }}>…</ScrollView>
+</ScreenScope>
+```
+
+A fresh top-edge registry, a fresh bottom-edge registry and a `null` scroll
+offset — the honest value, because nothing inside has said which scroller it owns
+yet. A scroll owner INSIDE publishes in the ordinary way and wins, being nearer.
+
+The bottom edge is scoped for the mirror reason, and it is the same point the
+"modal surface should not read the registry" note below makes: a sheet is drawn
+OVER the tab bar and the FAB, so a form inside it that cleared the tab bar would
+end in a band of empty space.
+
+**`DialogBody` and `BottomSheetBase` mount it**, so every Bloom dialog placement
+and every bottom sheet is already a scope. Mount it yourself only around a
+surface Bloom does not own.
+
 ## The collapse is not here, on purpose
 
 The tab bar minimizes 58 → 44 on scroll. This registry twice tried to publish

package/docs/migrating-to-3.0.mdx

@@ -1,6 +1,6 @@
 ---
 title: Migrating to 3.0
-description: Every breaking change between @oxy.so/bloom 2.12.4 and 3.0.0 — PageHeader's floating default, the split of `transparent` into two props, and what is additive.
+description: Every breaking change between @oxy.so/bloom 2.12.4 and 3.0.0 — PageHeader's floating default, the split of `transparent` into two props, and what is additive — plus the behaviour changes each 3.x minor adds.
 order: 2
 ---
 
@@ -131,9 +131,10 @@ Nothing below removes or renames anything.
   wires `aria-describedby`, `aria-invalid`, `aria-required` and the control's
   accessible name, and gains `multiple` for a field holding several controls.
   One behaviour change worth naming: **`Field disabled` now disables a control
-  that reads the field context** (today, `TextFieldInput`). It previously only
-  dimmed the label. If you were relying on a disabled-looking field with a live
-  input, that combination no longer exists.
+  that reads the field context** — `TextFieldInput` in 3.0, and fifteen more
+  controls in 3.1 (see below). It previously only dimmed the label. If you were
+  relying on a disabled-looking field with a live input, that combination no
+  longer exists.
 - **`Label.htmlFor` accepts `null`**, meaning "this label names a group, not a
   control". Omitting it still falls back to `nativeID`.
 - **`asChild` triggers can be cancelled.** `event.preventDefault()` in the
@@ -167,3 +168,41 @@ paint. Gate: `src/__tests__/svg-absolute-fill-size.test.ts`.
 The theme, the tokens, the icon set, the typography, every other family's API,
 and the license. If your app does not render a `PageHeader`, 3.0.0 is a drop-in
 upgrade from 2.12.x.
+
+## 3.1 — the contracts reach the rest of the catalogue
+
+3.1 is additive at the type level: `tsc` will not flag anything. Two behaviour
+changes are worth reading before you upgrade a form.
+
+**1. `Field disabled` now reaches fifteen more controls.** `Checkbox`,
+`FileUpload`, `InputGroup` (including an addon's `Button`), `InputOtp`,
+`PhoneInput` (including its country picker), `Radio`, `RadioGroup`,
+`RatingInput`, `SegmentedControl`, `SelectTrigger`, `Slider`, `Stepper`,
+`Switch`, `Textarea` and `TimeField` read the field's `disabled` and combine it
+with their own using `||` — so a control inside a disabled field is inert and
+cannot opt out with `disabled={false}`. If a screen relied on a disabled-LOOKING
+field with live controls inside it, move `disabled` off the `Field` and onto the
+controls that should actually be off.
+
+**2. A control inside a labelled `Field` takes the field's label as its accessible
+name.** Previously it announced whatever its own prop said, or nothing. Two
+consequences:
+
+- A `Switch`, `Slider`, `Stepper`, `RatingInput` or `TimeField` inside a `Field`
+  no longer needs a name prop, and no longer warns without one. The name props
+  that were REQUIRED on `Stepper`, `RatingInput`, `TimeField`, `RadioGroup`,
+  `SegmentedControl` and `SelectTrigger` are optional now — passing them still
+  works and still wins.
+- If you were passing BOTH a `Field label` and a stacked control label
+  (`TextFieldInput label`, `Textarea label`), the field's is the announced one.
+  A label drawn BESIDE the control — a checkbox's caption, a radio's option text
+  — still names that control, so the announced name matches what the eye reads.
+
+**Also additive:** `useFieldMembership()` from `@oxy.so/bloom/field` for an app's
+own control; `ScreenScope` from `@oxy.so/bloom/layout` (mounted for you by every
+dialog and sheet, so a modal's chrome no longer claims the page's top edge);
+`density` inheritance in `TextField`, `Textarea` and `TimeField`; `nativeID` on
+`Switch`, `Checkbox` and `Radio`; `disabled`, `nativeID` and `testID` on
+`SegmentedControl`; `aria-describedby`/`aria-invalid` on an anchored family's
+trigger handle. Where every family stands, family by family:
+[Adoption matrix](/docs/adoption-matrix).

package/docs/phone-input.mdx

@@ -94,3 +94,20 @@ node scripts/generate-country-flags.mjs
 
 - Names follow `countries-list` 3.4.1 (`Czechia`, `Cabo Verde`, `Myanmar`).
 - A flag is stored as shape tuples (`flag-art.ts`), with `<g>` presentation attributes pushed down onto the shapes, so rendering parses no XML. `UM` and `US` share artwork upstream.
+
+### In a `Field`
+
+`PhoneInput` hands the field's state to BOTH halves — the number input and the
+country picker. That second half is the one that used to be missed: the input read
+the field context itself, the picker did not, so a disabled field left the country
+list operable.
+
+```tsx
+<Field label="Phone number" error={errors.phone} disabled={locked}>
+  <PhoneInput countrySelectLabel="Country" onChangeText={setPhone} />
+</Field>
+```
+
+`size` is passed straight to the `TextField` inside, which inherits density from a
+`ControlSurface` — so a small filter row makes the phone field small without a
+prop here. See [Composition](/docs/composition).

package/docs/radio.mdx

@@ -77,6 +77,22 @@ that is [`RadioIndicator`](/docs/bloom/main/radio-indicator), which is
 presentational and takes `selected`. Using the indicator where you meant the
 control is how a "radio group" ends up announcing as decoration.
 
+## In a `Field`
+
+A radio set is the several-controls case, so the field is a `multiple` one: it
+becomes a labelled `group`, names the `RadioGroup` (whose own `label` is optional
+for that reason), and disables every option without any of them being able to opt
+out.
+
+```tsx
+<Field label="Billing period" multiple error={errors.period} disabled={locked}>
+  <RadioGroup value={period} onValueChange={setPeriod} options={PERIODS} />
+</Field>
+```
+
+Each radio keeps its OWN name — the option's text, which is what the user reads
+beside the dot. See [Field](/docs/field).
+
 ## Radio, Switch or Checkbox
 
 - **Radio** — one of several named options, all visible, mutually exclusive.

package/docs/rating.mdx

@@ -103,3 +103,17 @@ values (`4.92`): a display has no target and no keyboard.
 Clearing is left out for the reason re-choosing a [`Radio`](/docs/radio) is a
 no-op — a radio has no "off". A form that has no rating yet holds `null`; it
 does not need the group to express a state it cannot draw.
+
+## `RatingInput` in a `Field`
+
+The stars are a `radiogroup` that draws no words, so `accessibilityLabel` is the
+name — or, inside a [`Field`](/docs/field), the field's label, which is why the
+prop is optional:
+
+```tsx
+<Field label="Cleanliness" error={errors.cleanliness}>
+  <RatingInput value={stars} onChange={setStars} />
+</Field>
+```
+
+The field's `disabled` freezes the whole row, including the hover preview.

package/docs/segmented-control.mdx

@@ -50,11 +50,23 @@ emits `aria-selected` for tabs and `aria-checked` for radios, and neither uses
 `accessibilityState` — react-native-web drops that entirely, so a control
 relying on it would announce no state at all on web.
 
-## `label` is required
+## `label` names the group, and something has to
 
-It names the group. "Light / Dark / System" without a group name announces as
-three unrelated radios; with `label="Appearance"` it announces as a choice
-about appearance.
+"Light / Dark / System" without a group name announces as three unrelated radios;
+with `label="Appearance"` it announces as a choice about appearance.
+
+The prop is optional only because an enclosing [`Field`](/docs/field) can supply
+the name instead — and the field's `disabled` then reaches every segment, which a
+segment cannot opt out of by passing `disabled={false}`. With neither the prop nor
+a field the group announces nothing.
+
+```tsx
+<Field label="Appearance" disabled={!canChange}>
+  <SegmentedControl type="radio" value={mode} onChange={setMode}>
+    …
+  </SegmentedControl>
+</Field>
+```
 
 ## Which prop decides what
 

package/docs/select.mdx

@@ -144,6 +144,28 @@ It used to take a render prop instead, which handed its child a `state` object w
 
 The web dropdown grows to `maxHeight` (default 240, `max-h-[240px]`) and then scrolls with the native scrollbar. Opening it scrolls the selected option into view. There are no scroll buttons by default: they appeared and disappeared as the list moved and made the panel jump in height. `SelectScrollUpButton` and `SelectScrollDownButton` stay exported for a caller composing their own content inside a `SelectScrollProvider`; on native they render nothing, since the sheet's list scrolls under the finger.
 
+## In a `Field`
+
+The trigger IS the select's control, so it takes the field's id, name, described-by
+and invalid state, and the field's `disabled` on top of the root's and its own:
+
+```tsx
+<Field label="Visibility" error={errors.visibility} disabled={locked}>
+  <Select value={visibility} onValueChange={setVisibility}>
+    <SelectTrigger>
+      <SelectValue placeholder="Choose" />
+    </SelectTrigger>
+    <SelectContent>…</SelectContent>
+  </Select>
+</Field>
+```
+
+`SelectTrigger`'s `label` is optional for that reason — the chosen value is not a
+name ("Medium" says nothing about what is medium), so either the prop or a field
+has to supply one. A `Popover` or a `DropdownMenu` inside a field deliberately
+does NOT take the field's id: it is not the field's control. See
+[Composition](/docs/composition).
+
 ## Selection state
 
 Both forks render each option as `role="radio"` with `aria-checked` — the only spelling react-native-web reads, and one React Native folds back into `accessibilityState`. `SelectItemIndicator` draws the mark — a `text-secondary` check in the row's right-hand gutter on both platforms — and the chosen row also takes the highlight wash.

package/docs/slider.mdx

@@ -80,6 +80,20 @@ and never what it is. Omitting it warns once in development, dev-only and never
 throwing; an empty or whitespace-only string counts as missing, because
 `aria-label=""` is not a name.
 
+## In a `Field`
+
+`Slider` draws a track and a knob and hides its own `label` from assistive
+technology, so the name is a prop — or the enclosing field's label:
+
+```tsx
+<Field label="Maximum price" description="Per night" disabled={!hasDates}>
+  <Slider value={price} onValueChange={setPrice} min={0} max={500} />
+</Field>
+```
+
+The field also supplies the id, `aria-describedby` and `aria-invalid`, and its
+`disabled` stops the pan responder as well as dimming the track.
+
 ## When a slider is the wrong control
 
 - **The exact value matters.** Use a number input; a slider cannot be typed

package/docs/stepper.mdx

@@ -55,7 +55,9 @@ import { Stepper, StepperRow } from '@oxy.so/bloom/stepper';
 
 ## Accessibility
 
-The stepper is a `group` named by `accessibilityLabel`. Inside it the value is
+The stepper is a `group` named by `accessibilityLabel` — or, inside a
+[`Field`](/docs/field), by the field's label, which is why the prop is optional.
+With neither it announces nothing and warns once in development. Inside it the value is
 the `adjustable` element (`role="slider"` on web) carrying `aria-valuenow`,
 `aria-valuemin`, `aria-valuemax` (omitted when unbounded) and `aria-valuetext`
 (the `formatValue` output).

package/docs/switch.mdx

@@ -70,6 +70,20 @@ Omitting it warns once per component in development. The warning is dev-only
 unnamed switch still renders and still toggles. An empty or whitespace-only
 label counts as missing, because `aria-label=""` names nothing.
 
+**Inside a `Field` the field's label is that name**, so the prop is not needed
+there:
+
+```tsx
+<Field label="Push notifications">
+  <Switch value={push} onValueChange={setPush} />
+</Field>
+```
+
+The switch takes the field's label as its accessible name, its id (so a click on
+the label focuses it on web) and the field's `disabled` — which it cannot opt out
+of. The dev-only warning reads the RESOLVED name, so a switch named by its field
+does not warn. See [Field](/docs/field).
+
 ## The accessibility rule this component is the reference for
 
 `Switch` sets `role="switch"` and **`aria-checked`**, not

package/docs/text-field.mdx

@@ -93,6 +93,20 @@ TextField parts must be rendered inside a <TextField>.
 <TextFieldHint isInvalid={isInvalid}>We never share it.</TextFieldHint>
 ```
 
+`size` is `'medium' | 'small'`, which is exactly the `density` vocabulary of the
+[control-presentation contract](/docs/composition) — so a filter row can ask once
+and every field in it draws small:
+
+```tsx
+<ControlSurface density="small">
+  <TextField>…</TextField>
+  <TextField>…</TextField>
+</ControlSurface>
+```
+
+An explicit `size` still wins, and an `InputGroup` outranks both — its members
+have to be one height.
+
 ## Leading addon (phone input)
 
 ```tsx

package/docs/textarea.mdx

@@ -89,6 +89,26 @@ Accepts React Native's `TextInputProps` (except `multiline`, which is always on)
 - Invalid and disabled reach the input as `aria-invalid` / `aria-disabled`, the spellings react-native-web reads.
 - Invalid is also shown as text when you pass a `hint`; colour alone is not an announcement.
 
+## It reads two contracts
+
+`Textarea` takes its density from the nearest `ControlSurface` and its
+association from the nearest `Field`:
+
+```tsx
+<ControlSurface density="small">
+  <Field label="Notes" error={errors.notes} disabled={locked}>
+    <Textarea rows={4} value={notes} onChangeText={setNotes} />
+  </Field>
+</ControlSurface>
+```
+
+`size` still wins when written, because a caller always outranks a container.
+The field supplies the id, the accessible name, `aria-describedby` for whichever
+of description/error is showing, `aria-invalid` and `disabled` — and a textarea
+inside a disabled field cannot re-enable itself. Its own `label` prop is the
+STACKED kind, so it defers to the field's; do not pass both.
+See [Composition](/docs/composition) and [Field](/docs/field).
+
 ## The fill is a step off the surface
 
 `Textarea` shares `text-field`'s palette, so its shell steps off whatever surface

package/lib/commonjs/bottom-sheet/BottomSheetBase.js

@@ -9,11 +9,12 @@ var _reactNative = require("react-native");
 var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _adoptStyleSheet = require("../styles/adopt-style-sheet.js");
 var _surfaceLevels = require("../styles/surface-levels.js");
+var _index = require("../layout/index.js");
 var _zIndex = require("../styles/z-index.js");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _edge = require("../layout/edge.js");
-var _index = require("../overlay/index.js");
+var _index2 = require("../overlay/index.js");
 var _useTheme = require("../theme/use-theme.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -49,7 +50,7 @@ const BottomSheetBase = exports.BottomSheetBase = /*#__PURE__*/(0, _react.forwar
     onDismissAttempt,
     detached = false,
     showHandle = true,
-    backdropOpacity = _index.BACKDROP_DIM_OPACITY,
+    backdropOpacity = _index2.BACKDROP_DIM_OPACITY,
     scrollable = true,
     manualActivation = false,
     dynamicBackdrop = false,
@@ -603,10 +604,16 @@ const BottomSheetBase = exports.BottomSheetBase = /*#__PURE__*/(0, _react.forwar
   // — web keeps React context across a portal — would tell its content it is
   // sitting on the panel's card, and in-sheet chrome would paint the column's
   // colour on top of the sheet's.
+  // ...and it is its own SCREEN for the same reason: a header inside the sheet
+  // must claim the sheet's top edge rather than the page's, and chrome inside
+  // it must follow the sheet's scroller rather than `window.scrollY`
+  // (`layout/screen-scope.tsx`).
   const surfaceChildren = /*#__PURE__*/(0, _jsxRuntime.jsx)(_surfaceLevels.SurfaceLevelProvider, {
     level: 0,
     fill: colors.background,
-    children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenScope, {
+      children: children
+    })
   });
 
   // Inner content: scrollable wraps in Animated.ScrollView, non-scrollable
@@ -660,7 +667,7 @@ const BottomSheetBase = exports.BottomSheetBase = /*#__PURE__*/(0, _react.forwar
       // `backdropStyle` drives the fade; the dim level rides on
       // `backdropOpacity`, so the shared component's own dim is
       // switched off here to keep a single source of dimming.
-      (0, _jsxRuntime.jsx)(_index.Backdrop, {
+      (0, _jsxRuntime.jsx)(_index2.Backdrop, {
         onPress: handleBackdropPress
         // `progress` is the FADE (0 → 1, folding the drag);
         // how dark the backdrop gets is `backdropOpacity`,