@cdx-ui/components 0.3.2 → 0.3.4

package/docs/components/text/content.md

@@ -124,6 +124,103 @@ export default function TextItalicDemo() {
 }
 ```
 
+## Nested
+
+Place a `Text` inside another text element to style part of a sentence. A nested `Text` inherits `color`, `size`, `weight` and the font family from its parent, and each prop it sets overrides only that one.
+
+```tsx
+import { Box, Text } from '@cdx-ui/components';
+
+export default function TextNestedDemo() {
+  return (
+    <Box className="gap-4">
+      <Text color="secondary" size="lg" weight="medium">
+        Inherits everything: <Text>Your statement is ready to download.</Text>
+      </Text>
+      <Text color="secondary" size="lg" weight="medium">
+        Overrides color only: <Text color="danger">Your payment is past due.</Text>
+      </Text>
+      <Text color="secondary" size="lg" weight="medium">
+        Overrides size and weight:{' '}
+        <Text size="sm" weight="bold">
+          Your statement is ready to download.
+        </Text>
+      </Text>
+      <Text color="secondary" size="lg" weight="bold">
+        Overrides size only, keeps bold: <Text size="sm">Your statement is ready to download.</Text>
+      </Text>
+    </Box>
+  );
+}
+```
+
+### Inside text slots
+
+The same inheritance applies inside `Heading` and text slots such as `Button.Label` and `Alert.Description`, so emphasis follows the surrounding component's styles.
+
+```tsx
+import { Alert, Box, Button, Heading, Text } from '@cdx-ui/components';
+
+export default function TextNestedSlotsDemo() {
+  return (
+    <Box className="gap-4">
+      <Heading size="sm">
+        Inside a Heading: <Text color="action">Savings goals</Text>
+      </Heading>
+      <Button>
+        <Button.Label>
+          Inside Button.Label: <Text weight="bold">Transfer</Text>
+        </Button.Label>
+      </Button>
+      <Alert severity="info">
+        <Alert.Description>
+          Inside Alert.Description: <Text weight="semibold">Transfers settle by 5 p.m.</Text>
+        </Alert.Description>
+      </Alert>
+    </Box>
+  );
+}
+```
+
+### Inline emphasis
+
+Combine nested `Text` elements to highlight amounts, statuses and links within running copy.
+
+```tsx
+import { Box, Text } from '@cdx-ui/components';
+
+export default function TextNestedInlineDemo() {
+  return (
+    <Box className="gap-3">
+      <Text>
+        Your available balance is <Text weight="bold">$2,481.16</Text>, up{' '}
+        <Text color="success" weight="semibold">
+          $120.00
+        </Text>{' '}
+        since yesterday.
+      </Text>
+      <Text color="secondary" size="sm">
+        Posted <Text weight="medium">Oct 14</Text> · Pending{' '}
+        <Text color="warning" italic>
+          2 transactions
+        </Text>
+      </Text>
+      <Text size="sm" color="tertiary">
+        By continuing you agree to the{' '}
+        <Text color="action" weight="medium">
+          Terms of Service
+        </Text>{' '}
+        and{' '}
+        <Text color="action" weight="medium">
+          Privacy Policy
+        </Text>
+        .
+      </Text>
+    </Box>
+  );
+}
+```
+
 ## API
 
 ### Text

package/docs/foundations/styles/tokens/all-tokens/content.md

@@ -64,13 +64,13 @@ Text and icon colors, used as `text-*` utilities. Light and Dark name the primit
 | `content.neutral-on-subtle` | `text-content-neutral-on-subtle` | neutral, on subtle | `color.base.800` | `color.base.100` |
 | `content.info` | `text-content-info` | info | `color.sky.700` | `color.sky.500` |
 | `content.info-on-strong` | `text-content-info-on-strong` | info, on strong | `color.white` | `color.white` |
-| `content.info-on-subtle` | `text-content-info-on-subtle` | info, on subtle | `color.sky.900` | `color.sky.900` |
+| `content.info-on-subtle` | `text-content-info-on-subtle` | info, on subtle | `color.sky.900` | `color.sky.100` |
 | `content.success` | `text-content-success` | success | `color.green.700` | `color.green.600` |
 | `content.success-on-strong` | `text-content-success-on-strong` | success, on strong | `color.white` | `color.white` |
-| `content.success-on-subtle` | `text-content-success-on-subtle` | success, on subtle | `color.green.900` | `color.green.900` |
+| `content.success-on-subtle` | `text-content-success-on-subtle` | success, on subtle | `color.green.900` | `color.green.100` |
 | `content.warning` | `text-content-warning` | warning | `color.amber.700` | `color.amber.600` |
 | `content.warning-on-strong` | `text-content-warning-on-strong` | warning, on strong | `color.black` | `color.black` |
-| `content.warning-on-subtle` | `text-content-warning-on-subtle` | warning, on subtle | `color.amber.900` | `color.amber.900` |
+| `content.warning-on-subtle` | `text-content-warning-on-subtle` | warning, on subtle | `color.amber.900` | `color.amber.100` |
 | `content.danger` | `text-content-danger` | danger | `color.red.700` | `color.red.300` |
 | `content.danger-on-strong` | `text-content-danger-on-strong` | danger, on strong | `color.white` | `color.red.900` |
 | `content.danger-on-subtle` | `text-content-danger-on-subtle` | danger, on subtle | `color.red.900` | `color.red.100` |
@@ -106,12 +106,24 @@ Background colors, used as `bg-*` utilities. Light and Dark name the primitive e
 | `surface.action.tint-hover` | `bg-surface-action-tint-hover` | Action, tint, hover | `color.brand.100` | `color.brand.900` |
 | `surface.action.tint-active` | `bg-surface-action-tint-active` | Action, tint, active | `color.brand.200` | `color.brand.800` |
 | `surface.brand.strong` | `bg-surface-brand-strong` | Brand, strong | `color.brand.700` | `color.brand.300` |
+| `surface.brand.strong-hover` | `bg-surface-brand-strong-hover` | Brand, strong, hover | `color.brand.800` | `color.brand.200` |
+| `surface.brand.strong-active` | `bg-surface-brand-strong-active` | Brand, strong, active | `color.brand.900` | `color.brand.100` |
 | `surface.brand.subtle` | `bg-surface-brand-subtle` | Brand, subtle | `color.brand.200` | `color.brand.900` |
+| `surface.brand.subtle-hover` | `bg-surface-brand-subtle-hover` | Brand, subtle, hover | `color.brand.300` | `color.brand.800` |
+| `surface.brand.subtle-active` | `bg-surface-brand-subtle-active` | Brand, subtle, active | `color.brand.400` | `color.brand.700` |
 | `surface.brand.tint` | `bg-surface-brand-tint` | Brand, tint | `color.brand.50` | `color.brand.950` |
+| `surface.brand.tint-hover` | `bg-surface-brand-tint-hover` | Brand, tint, hover | `color.brand.100` | `color.brand.900` |
+| `surface.brand.tint-active` | `bg-surface-brand-tint-active` | Brand, tint, active | `color.brand.200` | `color.brand.800` |
 | `surface.brand.core` | `bg-surface-brand-core` | Brand, core | `color.brand.input` | `color.brand.input` |
 | `surface.accent.strong` | `bg-surface-accent-strong` | Accent, strong | `color.accent.700` | `color.accent.300` |
+| `surface.accent.strong-hover` | `bg-surface-accent-strong-hover` | Accent, strong, hover | `color.accent.800` | `color.accent.200` |
+| `surface.accent.strong-active` | `bg-surface-accent-strong-active` | Accent, strong, active | `color.accent.900` | `color.accent.100` |
 | `surface.accent.subtle` | `bg-surface-accent-subtle` | Accent, subtle | `color.accent.200` | `color.accent.900` |
+| `surface.accent.subtle-hover` | `bg-surface-accent-subtle-hover` | Accent, subtle, hover | `color.accent.300` | `color.accent.800` |
+| `surface.accent.subtle-active` | `bg-surface-accent-subtle-active` | Accent, subtle, active | `color.accent.400` | `color.accent.700` |
 | `surface.accent.tint` | `bg-surface-accent-tint` | Accent, tint | `color.accent.50` | `color.accent.950` |
+| `surface.accent.tint-hover` | `bg-surface-accent-tint-hover` | Accent, tint, hover | `color.accent.100` | `color.accent.900` |
+| `surface.accent.tint-active` | `bg-surface-accent-tint-active` | Accent, tint, active | `color.accent.200` | `color.accent.800` |
 | `surface.accent.core` | `bg-surface-accent-core` | Accent, core | `color.accent.input` | `color.accent.input` |
 | `surface.danger.strong` | `bg-surface-danger-strong` | Danger, strong | `color.red.700` | `color.red.200` |
 | `surface.danger.strong-hover` | `bg-surface-danger-strong-hover` | Danger, strong, hover | `color.red.800` | `color.red.100` |
@@ -175,6 +187,14 @@ Border colors, used as `border-*` utilities. Light and Dark name the primitive e
 | `stroke.focus` | `border-stroke-focus` | focus | `color.brand.700` | `color.brand.300` |
 | `stroke.hover` | `border-stroke-hover` | hover | `color.base.950` | `color.base.50` |
 | `stroke.ring` | `border-stroke-ring` | ring | `color.base.950` | `color.white` |
+| `stroke.accent` | `border-stroke-accent` | accent | `color.accent.700` | `color.accent.300` |
+| `stroke.ai-end` | `border-stroke-ai-end` | ai-end | `color.accent.300` | `color.accent.300` |
+| `stroke.ai-start` | `border-stroke-ai-start` | ai-start | `color.brand.400` | `color.brand.400` |
+| `stroke.brand` | `border-stroke-brand` | brand | `color.brand.700` | `color.brand.300` |
+| `stroke.danger-subtle` | `border-stroke-danger-subtle` | danger-subtle | `color.red.300` | `color.red.300` |
+| `stroke.info-subtle` | `border-stroke-info-subtle` | info-subtle | `color.sky.300` | `color.sky.300` |
+| `stroke.success-subtle` | `border-stroke-success-subtle` | success-subtle | `color.green.300` | `color.green.300` |
+| `stroke.warning-subtle` | `border-stroke-warning-subtle` | warning-subtle | `color.amber.300` | `color.amber.300` |
 
 ### Chart
 

package/docs/llms.txt

@@ -41,12 +41,12 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
   - [Currency Input](components/currency-input/content.md): A calculator-style monetary input that formats digits as currency while the user types. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=10803-8259), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-currencyinput--default)
   - [Field](components/field/content.md): A form-control wrapper that coordinates labels, supporting text, validation messages, and shared state. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-field--default)
   - [Form](components/form/content.md): A container that spaces related fields vertically and renders a form on web or a view on native.
-  - [Input Field](components/input/content.md): A single-line text entry with optional label, helper text, and adornments. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=159-22), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-input--default) Design guidance: [design.md](components/input/design.md)
+  - [Input](components/input/content.md): A single-line text entry with optional label, helper text, and adornments. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=159-22), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-input--default) Design guidance: [design.md](components/input/design.md)
   - [Menu](components/menu/content.md): Menus present actions or selectable options in an anchored overlay or a standalone list surface. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=7606-560), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-menu--default)
-  - [OTP Input Field](components/otp-input/content.md): A controlled multi-cell input for one-time passwords and verification codes. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=5653-5035), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-otpinput--default)
+  - [OTP Input](components/otp-input/content.md): A controlled multi-cell input for one-time passwords and verification codes. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=5653-5035), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-otpinput--default)
   - [Radio](components/radio/content.md): A radio group is an input control that allows the user to select a single option from a set of mutually exclusive options. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=2603-62), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-radio--default)
   - [Range Calendar](components/range-calendar/content.md): A two-tap day grid for selecting a start and end date, with a continuous range band, month navigation, and a year picker. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=12118-58084), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/date-time-rangecalendar--default)
-  - [Select](components/select/content.md): A form control that allows users to choose one option from a dropdown list. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=427-2296), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-select--default) Design guidance: [design.md](components/select/design.md)
+  - [Select](components/select/content.md): A form control that allows users to choose one or more options from a dropdown list. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=427-2296), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-select--default) Design guidance: [design.md](components/select/design.md)
   - [Textarea](components/textarea/content.md): A multi-line text entry for longer free-form content. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=7078-1235), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-textarea--default)
   - [Slider](components/slider/content.md): A control for selecting a numeric value along a track. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11500-17763), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-slider--default)
   - [Color Picker](components/color-picker/content.md): A compound color picker that coordinates an opaque color value with a trigger and popover. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/inputs-colorpicker--default)
@@ -82,7 +82,7 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
   - [Avatar](components/avatar/content.md): A visual representation of a user or entity, displayed as an image, initials, or fallback icon. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=449-377), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-avatar--default) Design guidance: [design.md](components/avatar/design.md)
   - [Carousel](components/carousel/content.md): A swipeable, paginated carousel for promotional banners, onboarding, and card browsing. Wraps react-native-reanimated-carousel with token-styled Pagination and Prev/Next nav button compounds plus useCarousel hook. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=11619-607), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-carousel--default)
   - [Divider](components/divider/content.md): A horizontal or vertical separator for grouping related content, with an optional inline label. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=6771-8895), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-divider--default)
-  - [FDIC Digital Sign](components/insurance-disclosure/content.md): Domain-specific regulatory disclosure — official FDIC lockup with optional copy for account footers, deposit screens, and onboarding. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=8550-3291), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/domain-insurancedisclosure--default)
+  - [Insurance Disclosure](components/insurance-disclosure/content.md): Domain-specific regulatory disclosure — official FDIC lockup with optional copy for account footers, deposit screens, and onboarding. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=8550-3291), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/domain-insurancedisclosure--default)
   - [Icon](components/icon/content.md): A cross-platform SVG icon wrapper with semantic color, sizing, filled variants, and accessibility support. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=397-33), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-icon--default)
   - [Image](components/image/content.md): Displays local or remote images across native and web platforms. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=9091-16186), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/content-image--default)
   - [List Item](components/list-item/content.md): A composable row for display and navigation — accounts, transactions, alerts, settings, and nav rows. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=3710-4649), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-listitem--default)
@@ -104,6 +104,8 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
   - [Box](components/box/content.md): The layout container for building screens, with semantic web elements through role and an asChild escape hatch. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-box--default)
   - [Card](components/card/content.md): A composable surface for grouping related content, with optional brand stripe, header, content, and footer regions. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=456-14), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-card--with-stripe)
   - [Drawer](components/drawer/content.md): A panel attached to an edge of the viewport or container, with modal and permanent presentations. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=9956-15204), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/overlays-drawer--default)
+  - [Insight](components/insight/content.md): A bordered card for a personalised, often AI-generated, insight, shown as a pressable summary or a detail card. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=13158-18419), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-insight--default)
+  - [Insight Stack](components/insight-stack/content.md): Draws decorative cards behind a summary Insight to show that more insights are waiting. Resources: [Figma](https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--Components?node-id=13652-32306), [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/surfaces-insightstack--default)
   - [Scoped Theme](components/scoped-theme/content.md): Forces a specific theme on a component subtree, regardless of the application's global theme. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/theming-scopedtheme--default)
   - [Scroll Shadow](components/scroll-shadow/content.md): Fades the edges of a scroll view so overflowing content reads as scrollable on iOS, Android, and web. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-scrollshadow--default)
   - [Stack](components/stack/content.md): Horizontal and vertical layout primitives with token-based spacing and optional reversed order. Resources: [Storybook](https://victorious-wave-0daadf00f.6.azurestaticapps.net/?path=/story/layout-vstack--default)
@@ -138,6 +140,8 @@ Links point at each page's `content.md`, which carries the page's prose, demo so
 
 ## Release notes
 
+- [0.3.3](resources/release-notes/0.3.3/content.md): Insight and InsightStack add dismissible summary cards with status colors, optional AI styling, and stacked depth for insight feeds.
+- [0.3.2](resources/release-notes/0.3.2/content.md): CurrencyInput adds an outline variant for bordered amount fields; BottomSheet opens reliably in optimized web production builds.
 - [0.3.1](resources/release-notes/0.3.1/content.md): DataGrid adds filterMode for server-side search and filters; IconButton adds warning, success, and info color options.
 - [0.3.0](resources/release-notes/0.3.0/content.md): Calendar and MonthCalendar year pickers scroll the full selectable range; BottomSheet adds fullBleed and updated Content and Footer padding.
 - [0.2.5](resources/release-notes/0.2.5/content.md): Box is the supported layout primitive with hardened stacks; View from @cdx-ui/components is deprecated. Align Expo apps with SDK 57 and React Native 0.86.

package/docs/patterns/forms/content.md

@@ -105,4 +105,411 @@ export default function DateRangeBlock() {
     </Card>
   );
 }
+```
+
+## Add Payee Form
+
+A full-screen form with a contact card, sectioned fields, a bottom-sheet date picker, e-bill consent checkboxes, and a pinned submit button.
+
+**Platforms:** iOS, Android
+
+```tsx
+import { useState } from 'react';
+import {
+  Avatar,
+  BottomSheet,
+  Box,
+  Button,
+  Card,
+  Checkbox,
+  CurrencyInput,
+  DateField,
+  DatePicker,
+  Divider,
+  Field,
+  Form,
+  FullScreenDialog,
+  Heading,
+  Input,
+  ListItem,
+  ScrollView,
+  Select,
+  Text,
+  VStack,
+} from '@cdx-ui/components';
+import type { DateId } from '@cdx-ui/formatters';
+
+const PAYEE_TYPES = [
+  { value: 'utility', label: 'Utility' },
+  { value: 'credit-card', label: 'Credit card' },
+  { value: 'loan', label: 'Loan' },
+  { value: 'other', label: 'Other' },
+];
+
+const STATES = [
+  { value: 'ca', label: 'California' },
+  { value: 'ma', label: 'Massachusetts' },
+  { value: 'ny', label: 'New York' },
+  { value: 'tx', label: 'Texas' },
+];
+
+export default function AddPayeeFormBlock() {
+  const [open, setOpen] = useState(true);
+  const [amount, setAmount] = useState(0);
+  const [date, setDate] = useState<DateId | undefined>();
+  const [dateOpen, setDateOpen] = useState(false);
+  const [consents, setConsents] = useState<string[]>([]);
+
+  return (
+    <FullScreenDialog isOpen={open} onOpenChange={setOpen}>
+      <FullScreenDialog.Trigger asChild>
+        <Button>
+          <Button.Label>Add payee</Button.Label>
+        </Button>
+      </FullScreenDialog.Trigger>
+      <FullScreenDialog.Popup>
+        <FullScreenDialog.Header title="Add payee" />
+        <FullScreenDialog.Content>
+          <ScrollView className="flex-1">
+            <Box className="p-4">
+              <Form>
+                <Card fullBleed>
+                  <Card.Stripe />
+                  <Card.Content>
+                    <ListItem showSeparator={false}>
+                      <ListItem.LeadingSlot>
+                        <Avatar color="info">
+                          <Avatar.Text>Wellesley Bank</Avatar.Text>
+                        </Avatar>
+                      </ListItem.LeadingSlot>
+                      <ListItem.Content>
+                        <ListItem.Title>Wellesley Bank MA Checking</ListItem.Title>
+                      </ListItem.Content>
+                    </ListItem>
+                  </Card.Content>
+                </Card>
+
+                <Text color="secondary">
+                  Add a company or person you pay regularly. Details are saved to your payee list,
+                  and you can schedule a payment as soon as the payee is added.
+                </Text>
+
+                <Card>
+                  <Card.Header>
+                    <Heading size="sm">Payee details</Heading>
+                  </Card.Header>
+                  <Card.Content>
+                    <VStack space="lg">
+                      <Field>
+                        <Field.Label>Payee name</Field.Label>
+                        <Input>
+                          <Input.Field placeholder="Enter a name" />
+                        </Input>
+                        <Field.Helper>As it appears on your statement.</Field.Helper>
+                      </Field>
+                      <Field>
+                        <Field.Label>Email</Field.Label>
+                        <Input>
+                          <Input.Field
+                            autoCapitalize="none"
+                            autoComplete="email"
+                            keyboardType="email-address"
+                            placeholder="example@domain.com"
+                          />
+                        </Input>
+                      </Field>
+                      <Field>
+                        <Field.Label>Amount</Field.Label>
+                        <CurrencyInput variant="outline" value={amount} onChangeValue={setAmount} />
+                      </Field>
+                      <Field>
+                        <DatePicker
+                          value={date}
+                          onValueChange={setDate}
+                          isOpen={dateOpen}
+                          onOpenChange={setDateOpen}
+                        >
+                          <Field.Label>Date</Field.Label>
+                          <DateField.Group fullWidth>
+                            <DateField.Input />
+                            <DateField.Suffix>
+                              <DatePicker.Trigger>
+                                <DatePicker.TriggerIndicator />
+                              </DatePicker.Trigger>
+                            </DateField.Suffix>
+                          </DateField.Group>
+                          <DatePicker.BottomSheet>
+                            <BottomSheet.Header
+                              title="Select date"
+                              onClose={() => setDateOpen(false)}
+                            />
+                            <BottomSheet.Content>
+                              <DatePicker.Calendar aria-label="Date" />
+                            </BottomSheet.Content>
+                          </DatePicker.BottomSheet>
+                        </DatePicker>
+                        <Field.Helper>The first date you want to pay this payee.</Field.Helper>
+                      </Field>
+                      <Field>
+                        <Field.Label>Payee type</Field.Label>
+                        <Select items={PAYEE_TYPES}>
+                          <Select.Trigger>
+                            <Select.Value placeholder="Select a type" />
+                          </Select.Trigger>
+                          <Select.Content>
+                            {PAYEE_TYPES.map((type) => (
+                              <Select.Item key={type.value} value={type.value}>
+                                <Select.ItemLabel>{type.label}</Select.ItemLabel>
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select>
+                      </Field>
+                    </VStack>
+                  </Card.Content>
+                </Card>
+
+                <Card>
+                  <Card.Header>
+                    <Heading size="sm">Service address</Heading>
+                  </Card.Header>
+                  <Card.Content>
+                    <VStack space="lg">
+                      <Text color="secondary">
+                        The service address is where the payee provides the service. It may be
+                        different from your current primary address.
+                      </Text>
+                      <Field>
+                        <Field.Label>Address line 1</Field.Label>
+                        <Input>
+                          <Input.Field autoComplete="address-line1" />
+                        </Input>
+                      </Field>
+                      <Field>
+                        <Field.Label>City</Field.Label>
+                        <Input>
+                          <Input.Field autoComplete="postal-address-locality" />
+                        </Input>
+                      </Field>
+                      <Field>
+                        <Field.Label>State</Field.Label>
+                        <Select items={STATES}>
+                          <Select.Trigger>
+                            <Select.Value placeholder="Select a state" />
+                          </Select.Trigger>
+                          <Select.Content>
+                            {STATES.map((state) => (
+                              <Select.Item key={state.value} value={state.value}>
+                                <Select.ItemLabel>{state.label}</Select.ItemLabel>
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select>
+                      </Field>
+                      <Field>
+                        <Field.Label>Zip code</Field.Label>
+                        <Input>
+                          <Input.Field autoComplete="postal-code" keyboardType="number-pad" />
+                        </Input>
+                      </Field>
+                    </VStack>
+                  </Card.Content>
+                </Card>
+
+                <Text color="secondary" size="sm">
+                  Please read the terms of use carefully. They include important information about
+                  receiving e-bills from this payee.
+                </Text>
+
+                <Checkbox.Group
+                  value={consents}
+                  onChange={setConsents}
+                  aria-label="E-bill delivery"
+                >
+                  <Card>
+                    <Card.Content>
+                      <Checkbox value="paperless">
+                        <Checkbox.Label>
+                          Send my bill here and stop delivering paper in the mail.
+                        </Checkbox.Label>
+                      </Checkbox>
+                    </Card.Content>
+                  </Card>
+                  <Card>
+                    <Card.Content>
+                      <Checkbox value="trial">
+                        <Checkbox.Label>
+                          I want to try it first, for 15 days, and I will decide later if I want to
+                          stop my paper bill. Send my bill both here and in the mail.
+                        </Checkbox.Label>
+                      </Checkbox>
+                    </Card.Content>
+                  </Card>
+                </Checkbox.Group>
+              </Form>
+            </Box>
+          </ScrollView>
+          <Divider />
+          <Box className="p-4">
+            <Button onPress={() => setOpen(false)}>
+              <Button.Label>Submit</Button.Label>
+            </Button>
+          </Box>
+        </FullScreenDialog.Content>
+      </FullScreenDialog.Popup>
+    </FullScreenDialog>
+  );
+}
+```
+
+## Invite User Drawer
+
+A side drawer form for inviting a user, with a role select and a searchable multi-select for team assignment that lists the chosen teams as removable chips.
+
+**Platforms:** Web
+
+```tsx
+import { useState } from 'react';
+import { Close, ForwardToInbox } from '@cdx-ui/icons';
+import {
+  Avatar,
+  Box,
+  Button,
+  Chip,
+  Drawer,
+  Field,
+  Icon,
+  Input,
+  Select,
+  VStack,
+} from '@cdx-ui/components';
+
+const roles = [
+  { value: 'admin', label: 'Admin' },
+  { value: 'editor', label: 'Editor' },
+  { value: 'viewer', label: 'Viewer' },
+];
+
+const teams = [
+  { value: 'retail-banking', label: 'Retail Banking', initials: 'RB' },
+  { value: 'card-services', label: 'Card Services', initials: 'CS' },
+  { value: 'lending', label: 'Lending', initials: 'LE' },
+  { value: 'treasury', label: 'Treasury', initials: 'TR' },
+  { value: 'fraud-risk', label: 'Fraud & Risk', initials: 'FR' },
+];
+
+export default function InviteUserDrawerBlock() {
+  const [fullName, setFullName] = useState('');
+  const [email, setEmail] = useState('');
+  const [role, setRole] = useState<string | undefined>();
+  const [teamIds, setTeamIds] = useState<string[]>([]);
+
+  const selectedTeams = teams.filter((team) => teamIds.includes(team.value));
+  const canSubmit =
+    fullName.trim() !== '' && email.trim() !== '' && role !== undefined && teamIds.length > 0;
+
+  const removeTeam = (value: string) => {
+    setTeamIds((ids) => ids.filter((id) => id !== value));
+  };
+
+  return (
+    <Box className="h-170 w-full flex-row justify-end">
+      <Drawer variant="permanent" placement="right" size="large">
+        <Drawer.Header>
+          <Drawer.LeadingSlot>
+            <Icon as={ForwardToInbox} className="size-6" />
+          </Drawer.LeadingSlot>
+          <Drawer.Title>Invite User</Drawer.Title>
+        </Drawer.Header>
+        <Drawer.Content>
+          <VStack space="lg">
+            <Field isRequired>
+              <Field.Label>Full name</Field.Label>
+              <Input>
+                <Input.Field placeholder="John Doe" value={fullName} onChangeText={setFullName} />
+              </Input>
+            </Field>
+            <Field isRequired>
+              <Field.Label>Email address</Field.Label>
+              <Input>
+                <Input.Field
+                  placeholder="johndoe@email.com"
+                  keyboardType="email-address"
+                  autoCapitalize="none"
+                  value={email}
+                  onChangeText={setEmail}
+                />
+              </Input>
+            </Field>
+            <Field isRequired>
+              <Field.Label>Select Role</Field.Label>
+              <Select items={roles} value={role} onValueChange={setRole}>
+                <Select.Trigger>
+                  <Select.Value placeholder="Select a role" />
+                </Select.Trigger>
+                <Select.Content>
+                  {roles.map((r) => (
+                    <Select.Item key={r.value} value={r.value}>
+                      <Select.ItemLabel>{r.label}</Select.ItemLabel>
+                    </Select.Item>
+                  ))}
+                </Select.Content>
+              </Select>
+            </Field>
+            <Field isRequired>
+              <Field.Label>Assign teams</Field.Label>
+              <Select type="multiple" items={teams} value={teamIds} onValueChange={setTeamIds}>
+                <Select.Trigger>
+                  <Select.Value placeholder="Select teams you want to assign to this user">
+                    {({ isPlaceholder, selectedItems }) =>
+                      isPlaceholder
+                        ? null
+                        : `${String(selectedItems.length)} ${selectedItems.length === 1 ? 'Team' : 'Teams'} selected`
+                    }
+                  </Select.Value>
+                </Select.Trigger>
+                <Select.Content>
+                  <Select.Search placeholder="Search Teams" accessibilityLabel="Search teams" />
+                  {teams.map((team) => (
+                    <Select.Item key={team.value} value={team.value}>
+                      <Select.ItemControl />
+                      <Select.ItemLabel>{team.label}</Select.ItemLabel>
+                    </Select.Item>
+                  ))}
+                  <Select.Empty>No teams found</Select.Empty>
+                </Select.Content>
+              </Select>
+              {selectedTeams.length > 0 ? (
+                <Box className="mt-3 flex-row flex-wrap gap-2">
+                  {selectedTeams.map((team) => (
+                    <Chip
+                      key={team.value}
+                      variant="outline"
+                      accessibilityLabel={`Remove ${team.label}`}
+                      onPress={() => removeTeam(team.value)}
+                    >
+                      <Chip.Avatar>
+                        <Avatar.Text>{team.initials}</Avatar.Text>
+                      </Chip.Avatar>
+                      <Chip.Label>{team.label}</Chip.Label>
+                      <Chip.Icon as={Close} position="trailing" />
+                    </Chip>
+                  ))}
+                </Box>
+              ) : null}
+            </Field>
+          </VStack>
+        </Drawer.Content>
+        <Drawer.Footer>
+          <Button variant="ghost">
+            <Button.Label>Cancel</Button.Label>
+          </Button>
+          <Button isDisabled={!canSubmit}>
+            <Button.Label>Send Invite</Button.Label>
+          </Button>
+        </Drawer.Footer>
+      </Drawer>
+    </Box>
+  );
+}
 ```

package/docs/resources/release-notes/0.3.2/content.md

@@ -0,0 +1,17 @@
+# 0.3.2 (https://design.candescent.com/docs/resources/release-notes/0.3.2)
+
+CurrencyInput adds an outline variant for bordered amount fields; BottomSheet opens reliably in optimized web production builds.
+
+This release adds a bordered **[CurrencyInput](https://design.candescent.com/docs/components/currency-input/content.md)** style and fixes **[BottomSheet](https://design.candescent.com/docs/components/bottom-sheet/content.md)** sizing on optimized web builds.
+
+## What's new
+
+**[CurrencyInput](https://design.candescent.com/docs/components/currency-input/content.md)** — Set `variant="outline"` for a bordered field that matches the outlined currency control in design specs. The outline layout keeps the currency prefix in secondary content color with tighter spacing to the amount, and pairs with `Field` for labels, hints, and validation like the default ghost style ([#826](https://github.com/dfh-candescent/forge-design-system/pull/826)).
+
+## Bug fixes
+
+**[BottomSheet](https://design.candescent.com/docs/components/bottom-sheet/content.md)** — Modal sheets open at the correct height in production web bundles, so dynamic detents are no longer clipped below the backdrop and footers no longer cover scrollable content ([#829](https://github.com/dfh-candescent/forge-design-system/pull/829)).
+
+## Dependencies
+
+**@cdx-ui/\*** — Upgrade every installed Forge UI package to `0.3.2` together when you adopt this release.