---
id: brandmark
category: Brand
title: Brandmark
description: Logos/Brandmarks for Optum brands.
design: 'https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Web?type=design&node-id=0-21&mode=design&t=uWtmzWwvT2Kv5MMG-0'
---

<Tab label="Overview">

```jsx
import { Brandmark } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Brandmark',
  inputs: [
    {
      prop: 'size',
      type: 'string',
      default: '$brandmark.sizing.lg'
    },
    {
      prop: 'affiliate',
      type: 'select',
      options: [
        { label: 'optum', value: 'optum' },
        { label: 'optum_financial', value: 'optum_financial' },
        { label: 'optum_frontier_therapies', value: 'optum_frontier_therapies' },
        { label: 'optum_health-education', value: 'optum_health-education' },
        { label: 'optum_now', value: 'optum_now' },
        { label: 'optum_perks', value: 'optum_perks' },
        { label: 'optum_prescription', value: 'optum_prescription' },
        { label: 'optum_serve', value: 'optum_serve' },
        { label: 'optum_store', value: 'optum_store' },
      ],
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'lockup', value: 'lockup' },
      ]
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'white', value: 'white' },
        { label: 'black', value: 'black' },
        { label: 'orange', value: 'orange' },
      ]
    },
  ]
}

// Disclaimer: not all affiliate variant/color combinations are applicable, and inapplicable combinations will display as empty
<Box color="$tint1" style={{ justifyContent: 'center', alignItems: 'center' }}>
  <Brandmark
    brand="optum"
    size="$lg"
    affiliate="optum"
    variant="lockup"
    color="orange"
  />
</Box>
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<Layout.Group>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="orange"
    />
  </Box>
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of the brandmark.

```jsx live
<Layout.Group>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="optum"
      size="$sm"
      affiliate="optum"
      variant="lockup"
      color="orange"
    />
  </Box>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="orange"
    />
  </Box>
</Layout.Group>
```

## Affiliate

Use the `affiliate` property to select the required brandmark affiliates.

```jsx live
<Layout.Stack>
  <Box color="$primary1" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum_financial"
      variant="lockup"
      color="white"
    />
  </Box>
  <Box color="$primary1" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum_perks"
      variant="lockup"
      color="white"
    />
  </Box>
</Layout.Stack>
```

## Variant

Use the `variant` property to select the required brandmark variants.

```jsx live
<Layout.Stack>
  <Box color="$primary1" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="white"
    />
  </Box>
</Layout.Stack>
```

## Color

Use the `color` property to select available brandmark colors.

```jsx live
<Layout.Stack>
  <Box color="$primary1" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="white"
    />
  </Box>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="optum"
      size="$lg"
      affiliate="optum"
      variant="lockup"
      color="orange"
    />
  </Box>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Brandmark}
  rows={[
    {
      name: 'brand',
      type: 'optum',
      description: 'Indicates which brand you want your brandmark from',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brandmark',
    },
    {
      name: 'affiliate',
      type: 'optum | optum_financial | optum_frontier_therapies | optum_health-education | optum_now | optum_perks | optum_prescription | optum_serve | optum_store',
      description: 'Indicates the brandmark affiliate',
    },
    {
      name: 'variant',
      type: 'lockup',
      description: 'Indicates the brandmark variant',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set color option of the brandmark',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Brandmark}
  rows={[
    {
      name: 'brandmark',
      description: 'Brandmark root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Brandmarks">

```jsx render
<h2>Brandmarks</h2>
```

<br />

The source for these brandmarks can be found in the <ExitLink href="https://brand.optum.com/content/wordmark-library-resources">Brandmark Library</ExitLink>.

You can use the search functionality to find the required brandmark. Brandmarks can be searched using their affiliates, variants or colors.

<BrandmarkLibrary brand="optum" />

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Brandmark} keys={['brandmark']} />
```

</Tab>

---
id: icon-brand
category: Brand
title: IconBrand
description: Used to implement Brand icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=5%3A159&t=yumeSCoKoGQjs5PJ-0
---

<Tab label="Overview">

```jsx
import { IconBrand } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconBrand',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'one tone', value: 'onetone' },
        { label: 'two tone', value: 'twotone' },
        { label: 'one tone w/ dark circle', value: 'onetonedarkcircle' },
        { label: 'two tone w/ dark circle', value: 'twotonedarkcircle' },
        { label: 'two tone w/ light circle', value: 'twotonelightcircle' },
      ],
    },
    {
      prop: 'icon',
      type: 'string',
    },
  ]
}

<IconBrand icon="home" size={48} variant="twotonedarkcircle"/>
```

## Icons

Use the `icon` property to adjust which icon is being selected.

```jsx live
<Layout.Group>
  <IconBrand icon="alert" size={48} />
  <IconBrand icon="piggy_bank" size={48} />
  <IconBrand icon="music" size={48} />
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number, or using a token. The default is `$md`.
Token sizes: `$xs`: 40 `$sm`: 64 `$md`: 96 `$lg`: 112 `$xl`: 136

```jsx live
<Layout.Group>
  <IconBrand icon="home" size={'$xs'} />
  <IconBrand icon="home" size={'$sm'} />
  <IconBrand icon="home" size={'$md'} />
  <IconBrand icon="home" size={'$lg'} />
  <IconBrand icon="home" size={'$xl'} />
</Layout.Group>
```

## Brand Icon Variants

Use the `variant` property to change the style of Brand icons. Available variants are `twotonedarkcircle`, `twotonelightcircle`, `twotone`, `onetonedarkcircle`, and `onetone`. The default variant is `twotonedarkcircle`.

**Note:** The `variant` prop is ignored if `useDeprecated` is set to false or if the `deprecatedOptumIcons` override is set in `createTheme`, as the new icons only have one variant.

```jsx live
<Grid columns={5} span={{ md: '50%', lg: '20%' }}>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>onetonedarkcircle</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>twotonedarkcircle</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>twotonelightcircle</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>onetone</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <Layout.Space space={48} />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>twotone</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <Layout.Space space={48} />
      </Box>
    </Layout.Stack>
  </Grid.Col>
</Grid>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={IconBrand}
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the brand icon',
    },
    {
      name: 'variant',
      type: 'twotonedarkcircle | twotonelightcircle | twotone | onetonedarkcircle | onetone',
      description: 'The style/color variation of the brand icon',
    },
    {
      name: 'brand',
      type: 'uhc | optum | uhg',
      description:
        'indicates which brand you want your icon from. This changes the colors of the icon to match the brand you select',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brand icon',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
    {
      name: 'useDeprecated',
      type: 'boolean',
      description:
        'Use the old version of the icon. Only applies to Optum brand icons.',
    },
    {
      name: 'onLoad',
      type: 'function',
      description: 'Callback function when the icon is loaded',
    },
    {
      name: 'onError',
      type: 'function',
      description: 'Callback function when the icon fails to load',
    },
    {
      name: 'fallback',
      type: 'JSX.Element',
      description: 'Fallback element to render when the icon fails to load',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={IconBrand}
  rows={[
    {
      name: 'icon-brand-root',
      description: 'Icon brand root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Brand Icons">

```jsx render
<h2>Brand Icons</h2>
```

<br />
Abyss uses branded iconography iconography that is designed to aid wayfinding, draw
attention, and support messaging.

The source for these design icons can be found in the <ExitLink href="https://brand.uhc.com/content/iconography">Brand Icons Library</ExitLink>.

<IconLibrary brand="optum" />

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={IconBrand} keys={['icon-brand']} />
```

</Tab>

---
id: icon-custom
category: Brand
title: IconCustom
description: Used to implement custom icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=5%3A159&t=yumeSCoKoGQjs5PJ-0
---

<Tab label="Overview">

```jsx
import { IconCustom } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconCustom',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'light', value: 'light' },
        { label: 'lightactive', value: 'lightactive' },
      ],
    },
    {
      prop: 'icon',
      type: 'string',
    },
  ]
}

<IconCustom icon="my_health" brand="optum" />
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: `$xs`: 16 `$sm`: 20 `$md`: 24 `$lg`: 40 `$xl`: 48

```jsx live
<Layout.Group>
  <IconCustom icon="my_health" brand="optum" size={'$xs'} />
  <IconCustom icon="my_health" brand="optum" size={24} />
  <IconCustom icon="my_health" brand="optum" size={48} />
</Layout.Group>
```

## Variants

Use the `variant` prop to change the style of the custom icons. The prop takes in either a `light` or `lightactive` value. The default is `light`.

```jsx live
<Layout.Stack>
  <Layout.Group space={20} wrap>
    <View style={{ width: 100 }}>
      <Text>light</Text>
    </View>
    <IconCustom icon="home" variant="light" brand="optum" />
    <IconCustom icon="benefits" variant="light" brand="optum" />
    <IconCustom icon="find_care" variant="light" brand="optum" />
    <IconCustom icon="my_health" variant="light" brand="optum" />
    <IconCustom icon="menu" variant="light" brand="optum" />
    <IconCustom icon="programs" variant="light" brand="optum" />
  </Layout.Group>
  <Layout.Group space={20} wrap>
    <View style={{ width: 100 }}>
      <Text>lightactive</Text>
    </View>
    <IconCustom icon="home" variant="lightactive" brand="optum" />
    <IconCustom icon="benefits" variant="lightactive" brand="optum" />
    <IconCustom icon="find_care" variant="lightactive" brand="optum" />
    <IconCustom icon="my_health" variant="lightactive" brand="optum" />
    <IconCustom icon="menu" variant="lightactive" brand="optum" />
    <IconCustom icon="programs" variant="lightactive" brand="optum" />
  </Layout.Group>
</Layout.Stack>
```

## Brand

Use the `brand` property to adjust which brands icons are being selected. Note that some of the icons unique to certain brands.
The default is the theme brand, then falls back to `uhc`.

```jsx live
<IconCustom icon="my_health" variant="light" brand="optum" size={'$xl'} />
```

## Active

When placing an icon inside of a clickable element, the icon should be toggled between its normal and active state.

```jsx live
<Layout.Stack>
  <Pressable>
    {({ pressed }) => (
      <Layout.Stack space={-4}>
        <IconCustom icon="home" variant={pressed ? 'lightactive' : 'light'} />
        <Text color="$gray4" size="$sm">
          Home
        </Text>
      </Layout.Stack>
    )}
  </Pressable>
</Layout.Stack>
```

## Indicator

The [indicator component](/mobile/ui/indicator) can be used as a wrapper to add a notification badge.

```jsx live
<Layout.Group space={20}>
  <Indicator withBorder>
    <IconCustom icon="home" />
  </Indicator>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={IconCustom}
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the custom icon',
    },
    {
      name: 'variant',
      type: '"light" | "lightactive"',
      description: 'The style variation of the custom icon',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the custom icon',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
    },
    {
      name: 'brand',
      type: '"uhc" | "optum"',
      description: 'The brand of the custom icon',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={IconCustom}
  rows={[
    {
      name: 'icon-custom-root',
      description: 'Icon custom root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Custom Icons">

```jsx render
<h2>Custom Icons</h2>
```

<IconLibrary brand="optumCustom" />

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={IconCustom} keys={['icon']} />
```

</Tab>

---
id: illustration-brand
category: Media
title: IllustrationBrand
description: Used to implement Brand illustrations and adapt their properties.
design: 'https://www.figma.com/file/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-Abyss-Mobile?type=design&node-id=1218-19509&mode=design&t=eobYuZOIhhms55Vc-0'
---

<Tab label="Overview">

```jsx
import { IllustrationBrand } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IllustrationBrand',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'illustration',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 1, value: 1 },
        { label: 2, value: 2 },
      ],
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'primary', value: 'primary' },
        { label: 'pacific', value: 'pacific' },
        { label: 'white', value: 'white' },
      ]
    },
  ]
}

// Disclaimer: not all brand color combinations or variants are applicable, and inapplicable combinations will display as empty

  <IllustrationBrand
    brand="optum"
    size={400}
    illustration="note_taking_1"
  />
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<IllustrationBrand brand="optum" size={200} illustration="calendar" />
```

## Size

Use the `size` property to adjust the size of the illustration.

```jsx live
<IllustrationBrand brand="optum" illustration="home_delivery" size={300} />
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={IllustrationBrand}
  rows={[
    {
      name: 'brand',
      type: '"uhc" | "optum"',
      description: 'Indicates which brand you want your illustration from',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Sets the size of the illustration',
    },
    {
      name: 'color',
      type: '"white"| "primary" | "pacific"',
      description: 'Sets color option of the illustration',
    },
    {
      name: 'variant',
      type: '1 | 2',
      description:
        'For illustrations with variants on the same background color. Applicable only to UHC illustrations',
    },
    {
      name: 'illustration',
      type: 'string',
      description: 'The name of the illustration',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set accessibilityLabel of the image',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={IllustrationBrand}
  rows={[
    {
      name: 'illustration-brand-root',
      description: 'IllustrationBrand root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Illustration Source">

```jsx render
<h2>Illustration Source</h2>
```

<br />
The source for these illustrations can be found in the brand libraries.
<br />
<br />
<ExitLink href="https://unitedhealthcare.gettyimages.com/s/3f79xfhwgtcsc8t3t79hfc9">
  UnitedHealthCare Library
</ExitLink> <br />
<ExitLink href="https://brand.optum.com/content/illustration-library-resources">
  Optum Library
</ExitLink>

<br />
<br />
You can use the search functionality to find the required illustration.
Illustrations can be searched using their title, variants or colors.
<br />
<br />
<IllustrationLibrary brand="optum" />

</Tab>

---
id: elevation
category: Brand
title: Elevation
description: Creates depth on screen for users
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=12804%3A65751
---

<Tab label="Overview">

```jsx
import { Elevation } from '@uhg-abyss/mobile';
```

```jsx sandbox

{
  component: 'Elevation',
  inputs: [
    {
      prop: 'level',
      type: 'select',
      options: [
        { label: "0", value: 0 },
        { label: "1", value: 1 },
        { label: "2", value: 2 },
        { label: "3", value: 3 },
        { label: "4", value: 4 },
      ]
    },
  ]
}

<Elevation>
  <Box color="white" width={150} height={150} />
</Elevation>

```

## Level

The `level` prop determines the magnitude of the shadow effect applied to the surface of the component.
The prop accepts numbers between `0` and `4`. The default is `1`

```jsx live
<Layout.Stack space={20} grow>
  <Elevation level={0}>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 0
      </Heading>
    </Box>
  </Elevation>
  <Elevation>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 1
      </Heading>
    </Box>
  </Elevation>
  <Elevation level={2}>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 2
      </Heading>
    </Box>
  </Elevation>
  <Elevation level={3}>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 3
      </Heading>
    </Box>
  </Elevation>
  <Elevation level={4}>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 4
      </Heading>
    </Box>
  </Elevation>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Elevation}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The content of the component',
    },
    {
      name: 'level',
      type: '0 | 1 | 2 | 3 | 4',
      description:
        'The level of shadow depth. It accepts values between 0 and 4 inclusive',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Elevation}
  rows={[
    {
      name: 'elevation-root',
      description: 'Elevation root element',
    },
  ]}
/>
```

</Tab>

---
id: tokens
title: Tokens
category: Brand
---

<Tab label="Overview">

## Overview

Design tokens are the visual sub-atom variables of a design system. They contain UI data such as colors, border width, elevation, and even motion.

They are used in the place of hard-coded values such as hex codes or pixels to maintain scalability and consistency.

Think about them as recipe ingredients - you could add chocolate to a salad, but it won't be very tasty.
You would only consider what is a standard salad ingredient - it's the same with tokens, they are a limited set of options that make sense for our product.

**Further reading:** <br />
[Nathan Curtis on Tokens in design systems](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421).

### Token Hierarchy

Abyss uses a 3-tier token system:

- Core tier - the WHAT or the OPTIONS: contains primitive values, with no specific meaning - the name of the token and its raw value (HEX code for colors, and numbers for borders, corner radius, opacity, etc.)
- Semantic tier - the HOW or the DECISIONS: communicates design decisions on the exact usage of a Core token system-wide.
- Brand tokens - shorthand tokens to define common colors used throughout Abyss.

### Using Tokens

Before you can consume Abyss tokens, your project must be configured with our [themeProvider](/mobile/ui/theme-provider). This will allow you to access the tokens in your project.

Tokens are used in place of hard-coded values such as hex codes or pixels. To use a token, you can reference it in your code using the `$` symbol followed by the token name.

All Abyss components can accept tokens, when they are passed in using the `style`, or [styles](/mobile/developers/style-customization) prop. Non-Abyss components can use the [tokenize](/mobile/tools/tokenize) function to accept tokens.

#### Examples

Brand tokens are useful for quickly defining the color of components.

```jsx sandbox
<Button style={{ backgroundColor: '$success1' }}>Green Button</Button>
```

#### Styled Function

To create a `View` component with a background color of `$core.color.brand.100`, you can leverage our [styled function](/mobile/tools/styled) and do the following:

```jsx sandbox
() => {
  const Example = styled('View', {
    backgroundColor: '$core.color.brand.100',
    height: 100,
    width: 100,
  });

  return <Example />;
};
```

#### useToken hook

Alternatively, you can use our [useToken Hook](/mobile/hooks/use-token) to directly access the value of a token. This is useful when you need the value of multiple tokens.

```jsx sandbox
() => {
  const getColorToken = useToken('colors');
  const green = getColorToken('$core.color.green.100');
  const red = getColorToken('$core.color.red.100');

  return (
    <>
      <View style={{ backgroundColor: green, height: 50, width: 100 }} />
      <View style={{ backgroundColor: red, height: 50, width: 100 }} />
    </>
  );
};
```

#### Tokenize Function

Our [tokenize](/mobile/tools/tokenize) function is useful for mapping any non-Abyss component's props to accept Abyss tokens.

```jsx live
const TokenizedTouchableHighlight = tokenize(TouchableHighlight, {
  underlayColor: 'colors',
});

render(() => {
  return (
    <TokenizedTouchableHighlight
      underlayColor="$success2"
      style={{ padding: 8 }}
      onPress={() => {}}
      accessibilityRole="button"
    >
      <Text size="$lg">Press Me</Text>
    </TokenizedTouchableHighlight>
  );
});
```

#### Useful Links

- [Custom Theme Tutorial](/mobile/developers/tutorials/custom-themes/): This tutorial will guide you through creating a custom Abyss theme for your project.
- [createTheme Function](/mobile/tools/create-theme): This tool allows you to create and modify themes to fit your design needs.
- [Theme Provider](/mobile/ui/theme-provider): Provider that passes the theme object down the component tree giving your project access to Abyss tokens.
- [styled Function](/mobile/tools/styled): Tool that allows you to create styled components.
- [useToken Hook](/mobile/hooks/use-token): Hook that allows you to access the value of a token in your project.
- [tokenize](/mobile/tools/tokenize): Function that allows you to map a component's props to accept Abyss tokens.

</Tab>

<Tab label="Core Tokens">

## Core Tokens

Below is a list of core tokens used throughout Abyss, These are split into the categories `color`, `border-width`, `border-radius`, `opacity`, `spacing`, `sizing`.

_**Note:** Click on the token row to copy the token to your clipboard._

#### Border Width Tokens

`border-width` tokens are used to define the `borderWidth` on components.

```jsx
const Example = styled('View', {
  borderWidth: '$core.border-width.md',
});
```

```jsx render
<Docs.CoreTokenTable type="borderWidths" tier="core" />
```

#### Border Radius Tokens

`border-radius` tokens are used to define the `borderRadius` on components.

```jsx
const Example = styled('View', {
  borderRadius: '$core.border-radius.md',
});
```

```jsx render
<Docs.CoreTokenTable type="radii" tier="core" />
```

---

#### Opacity Tokens

`opacity` tokens are used to define the opacity of a component.

```jsx
const Example = styled('View', {
  opacity: '$core.opacity.md',
});
```

```jsx render
<Docs.CoreTokenTable type="opacities" tier="core" />
```

---

#### Spacing Tokens

`spacing` tokens define the space between components. Generally, these are used for the `padding`, `margin`, or `gap` of components.

```jsx
const Example = styled('View', {
  padding: '$core.spacing.200',
});
```

```jsx render
<Docs.CoreTokenTable type="space" tier="core" />
```

---

#### Sizing Tokens

`sizing` tokens define the size of components. Generally, these will be used to define the `width` or `height`.

```jsx
const Example = styled('View', {
  width: '$core.sizing.600',
  height: '$core.sizing.600',
});
```

```jsx render
<Docs.CoreTokenTable type="sizes" tier="core" />
```

---

#### Color Tokens

`color` tokens are used to define the color of components.

```jsx
const Example = styled('View', {
  backgroundColor: '$core.color.brand.100',
});
```

```jsx render
<Docs.CoreTokenTable type="colors" tier="core" />
```

</Tab>

<Tab label="Brand Tokens">

## Brand Tokens

Brand tokens are useful for quickly defining the color of components.

_**Note:** Click on the token row to copy the token to your clipboard._

#### Colors

Below is a list of brand tokens and their intended use cases.

```jsx
const Example = styled('View', {
  backgroundColor: '$primary1',
});
```

```jsx render
<Docs.CoreTokenTable type="colors" tier="brand" />
```

---

#### Spacing

`spacing` tokens define the space between components. Generally, these will be used to define the `padding`, `margin`, or `gap` of components.

```jsx
const Example = styled('View', {
  padding: '$md',
});
```

```jsx render
<Docs.CoreTokenTable type="space" tier="brand" />
```

---

#### Border Radius

`border-radius` tokens define the `borderRadius` on components.

```jsx
const Example = styled('View', {
  borderRadius: '$md',
});
```

```jsx render
<Docs.CoreTokenTable type="radii" tier="brand" />
```

---

### Accessibility

Color choices that are accessible ensure everyone can not only see every element on a page but also understand a specific, intended meaning. You want everyone to be able to see the difference between two colors right next to or on top of each other.

Contrast refers to the perceived difference between foreground and background colors. People with low vision or color blindness and those with difficulty seeing the differences between colors can have trouble seeing where one element ends and another begins. As we age, the shape of our eyes changes and affects how we perceive color and how well we can distinguish color variations. If the contrast between different elements is too low, people may not be able to see them at all.

Contrast is expressed as a ratio with the first number representing the foreground color and the second representing the background color. For example, 3:1 means the foreground item color is three times more intense or visible than the background value. Contrast rules apply to text as well as any content that conveys meaning, including icons, graphics, and form elements. Tools such as Colour Contrast Analyzer or WebAIM's online color contrast tool are useful for verifying contrast ratios.

Color and contrast choices within a digital experience are accessible when people can:

- See UI elements and content
- Understand and interpret information
- Take action

We aim to provide a contrast ratio perceivable by all users. For this reason, UnitedHealthcare has embraced a minimum contrast ratio of 4.5:1 (foreground vs background) for UI elements and content that conveys meaning.

<b>Recommendations</b>

- Include color combinations, good contrast and poor contrast, in design documentation
- Communicate meaning with more than just color, such as with color and descriptive text
- Give focus indicators a unique presentation that meets contrast requirements on all backgrounds

<b>Test for a minimum contrast ratio of 4.5 to 1 for:</b>

- Non-bolded text smaller than 24 pixels (18 points)
- Bold text smaller than 18 pixels (14 points)
- Essential icons that are close to the body text size

<b>
  Test that non-text elements that communicate information meet a minimum
  contrast ratio of 3 to 1 for all states:
</b>

- Icons
- Data visualizations
- Focus indicators
- Controls, including their borders or boundaries
- Non-bolded text at or above 24 pixels (18 points)
- Bold text at or above 18 pixels (14 points)

Don't worry about contrast for logos and disabled elements. Watch out for using color alone to communicate meaning. People who are color blind or blind cannot perceive the meaning by color alone.

</Tab>

---
id: brandmark
category: Brand
title: Brandmark
description: Logos/Brandmarks for UHC brands.
design: 'https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Web?type=design&node-id=0-21&mode=design&t=uWtmzWwvT2Kv5MMG-0'
---

<Tab label="Overview">

```jsx
import { Brandmark } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Brandmark',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'affiliate',
      type: 'select',
       options: [
        { label: 'aarp_extra_assurance_benefits', value: 'aarp_extra_assurance_benefits' },
        { label: 'aarp_medicare_advantage_walgreens', value: 'aarp_medicare_advantage_walgreens' },
        { label: 'aarp_medicare_advantage', value: 'aarp_medicare_advantage' },
        { label: 'aarp_medicare_plans', value: 'aarp_medicare_plans' },
        { label: 'aarp_medicare_prescription', value: 'aarp_medicare_prescription' },
        { label: 'aarp_medicare_prescription_walgreens', value: 'aarp_medicare_prescription_walgreens' },
        { label: 'aarp_medicare_supplement', value: 'aarp_medicare_supplement' },
        { label: 'aarp_supplemental_personal_health', value: 'aarp_supplemental_personal_health' },
        { label: 'community_plan', value: 'community_plan' },
        { label: 'dental', value: 'dental' },
        { label: 'dual_complete', value: 'dual_complete' },
        { label: 'global', value: 'global' },
        { label: 'hearing', value: 'hearing' },
        { label: 'medicare_advantage', value: 'medicare_advantage' },
        { label: 'group_medicare_advantage', value: 'group_medicare_advantage' },
        { label: 'medicare_plans', value: 'medicare_plans' },
        { label: 'medicare_solutions', value: 'medicare_solutions' },
        { label: 'oxford', value: 'oxford' },
        { label: 'student_resources', value: 'student_resources' },
        { label: 'uhc', value: 'uhc' },
        { label: 'vision', value: 'vision' },
      ],
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'lockup', value: 'lockup' },
        { label: 'lockup_horizontal', value: 'lockup_horizontal' },
        { label: 'u_mark', value: 'u_mark' },
        { label: 'u_mark_horizontal', value: 'u_mark_horizontal' },
        { label: 'monogram', value: 'monogram' },
        { label: 'stacked_wordmark', value: 'stacked_wordmark' },
        { label: 'wordmark', value: 'wordmark' },
      ]
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'red', value: 'red' },
        { label: 'white', value: 'white' },
        { label: 'black', value: 'black' },
        { label: 'blue', value: 'blue' },
        { label: 'full', value: 'full' },
      ]
    },
  ]
}

// Disclaimer: not all affiliate variant/color combinations are applicable, and inapplicable combinations will display as empty
<Box color="$gray1" style={{ justifyContent: 'center', alignItems: 'center' }}>
  <Brandmark
    brand="uhc"
    size={400}
    affiliate="uhc"
    variant="lockup"
    color="blue"
  />
</Box>
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<Layout.Group>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of the brandmark.

```jsx live
<Layout.Group>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhc"
      size="$sm"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Group>
```

## Affiliate

Use the `affiliate` property to select the required brandmark affiliates.

```jsx live
<Layout.Stack>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="aarp_medicare_advantage"
      variant="lockup"
      color="full"
    />
  </Box>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Stack>
```

## Variant

Use the `variant` property to select the required brandmark variants.

```jsx live
<Layout.Stack>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="monogram"
      color="blue"
    />
  </Box>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Stack>
```

## Color

Use the `color` property to select available brandmark colors.

```jsx live
<Layout.Stack>
  <Box color="$primary1" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="uhc"
      variant="monogram"
      color="white"
    />
  </Box>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhc"
      size="$lg"
      affiliate="medicare_plans"
      variant="u_mark"
      color="black"
    />
  </Box>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Brandmark}
  rows={[
    {
      name: 'brand',
      type: 'uhc',
      description: 'Indicates which brand you want your brandmark from',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brandmark',
      default: '$brandmark.sizing.lg',
    },
    {
      name: 'affiliate',
      type: 'aarp_extra_assurance_benefits | aarp_medicare_advantage_walgreens | aarp_medicare_plans | aarp_medicare_prescription | aarp_medicare_prescription_walgreens | aarp_medicare_supplement | aarp_supplemental_personal_health | community_plan | dental | dual_complete | global | hearing | medicare_advantage | group_medicare_advantage | medicare_plans | medicare_solutions | oxford | student_resources | uhc | vision',
      description: 'Indicates the brandmark affiliate',
    },
    {
      name: 'variant',
      type: 'lockup | lockup_horizontal | u_mark | u_mark_horizontal | monogram | stacked_wordmark | wordmark',
      description: 'Indicates the brandmark variant',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set color option of the brandmark',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set title for the brandmark',
    },
    {
      name: 'sizes',
      type: 'Record',
      description: 'Pre programmed sizes for the brandmark',
      default: '{sm: 100, md: 150, lg: 200}',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Brandmark}
  rows={[
    {
      name: 'brandmark-root',
      description: 'Brandmark root element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={Brandmark} rows={['Brandmark.fromUHC']} />
```

</Tab>

<Tab label="Brandmarks">

```jsx render
<h2>Brandmarks</h2>
```

<br />

The source for these brandmarks can be found in the <ExitLink href="https://brand.uhc.com/content/logo-brandmark-library">Brandmark Library</ExitLink>.

You can use the search functionality to find the required brandmark. Brandmarks can be searched using their affiliates, variants or colors.

<BrandmarkLibrary brand="uhc" />

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Brandmark} keys={['brandmark']} />
```

</Tab>

---
id: icon-brand
category: Brand
title: IconBrand
description: Used to implement Brand icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=5%3A159&t=yumeSCoKoGQjs5PJ-0
---

<Tab label="Overview">

```jsx
import { IconBrand } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconBrand',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'one tone', value: 'onetone' },
        { label: 'two tone', value: 'twotone' },
        { label: 'one tone w/ dark circle', value: 'onetonedarkcircle' },
        { label: 'two tone w/ dark circle', value: 'twotonedarkcircle' },
        { label: 'two tone w/ light circle', value: 'twotonelightcircle' },
      ],
    },
    {
      prop: 'icon',
      type: 'string',
    },
  ]
}

<IconBrand icon="home" size={48} variant="twotonedarkcircle"/>
```

## Icons

Use the `icon` property to adjust which icon is being selected.

```jsx live
<Layout.Group>
  <IconBrand icon="alert" size={48} />
  <IconBrand icon="piggy_bank" size={48} />
  <IconBrand icon="music" size={48} />
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number, or using a token. The default is `$md`.
Token sizes: `$xs`: 40 `$sm`: 64 `$md`: 96 `$lg`: 112 `$xl`: 136

```jsx live
<Layout.Group>
  <IconBrand icon="home" size={'$xs'} />
  <IconBrand icon="home" size={'$sm'} />
  <IconBrand icon="home" size={'$md'} />
  <IconBrand icon="home" size={'$lg'} />
  <IconBrand icon="home" size={'$xl'} />
</Layout.Group>
```

## Brand Icon Variants

Use the `variant` property to change the style of Brand icons. Available variants are `twotonedarkcircle`, `twotonelightcircle`, `twotone`, `onetonedarkcircle`, and `onetone`. The default variant is `twotonedarkcircle`.

```jsx live
<Grid columns={5} span={{ md: '50%', lg: '20%' }}>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>onetonedarkcircle</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetonedarkcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>twotonedarkcircle</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonedarkcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>twotonelightcircle</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotonelightcircle" />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>onetone</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="onetone" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <Layout.Space space={48} />
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Layout.Stack grow space={0}>
      <Box padding="$sm" color="$white">
        <Text>twotone</Text>
      </Box>
      <Box padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="$tint3" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="$tint4" padding="$sm">
        <IconBrand icon="airplane" size={48} variant="twotone" />
      </Box>
      <Box color="$primary1" padding="$sm">
        <Layout.Space space={48} />
      </Box>
    </Layout.Stack>
  </Grid.Col>
</Grid>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={IconBrand}
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the brand icon',
    },
    {
      name: 'variant',
      type: 'twotonedarkcircle | twotonelightcircle | twotone | onetonedarkcircle | onetone',
      description: 'The style/color variation of the brand icon',
      default: 'twotonedarkcircle',
    },
    {
      name: 'brand',
      type: 'uhc | optum | uhg',
      description:
        'indicates which brand you want your icon from. This changes the colors of the icon to match the brand you select',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brand icon',
      default: '$md',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
      default: 'false',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
      default: 'false',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
    {
      name: 'onLoad',
      type: 'function',
      description: 'Callback function when the icon is loaded',
    },
    {
      name: 'onError',
      type: 'function',
      description: 'Callback function when the icon fails to load',
    },
    {
      name: 'fallback',
      type: 'JSX.Element',
      description: 'Fallback element to render when the icon fails to load',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={IconBrand}
  rows={[
    {
      name: 'icon-brand-root',
      description: 'Icon brand root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Brand Icons">

```jsx render
<h2>Brand Icons</h2>
```

<br />
Abyss uses branded iconography that is designed to aid way-finding, draw attention,
and support messaging.

The source for these design icons can be found in the <ExitLink href="https://brand.uhc.com/content/iconography">Brand Icons Library</ExitLink>.

<IconLibrary brand="uhc" />

</Tab>

<Tab label="Accessibility">

## Dynamic Type

Brand icons do not scale. When using IconBrand, the `disabledScaling` prop should be set to `true`.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={IconBrand} keys={['icon-brand']} />
```

</Tab>

---
id: icon-custom
category: Brand
title: IconCustom
description: Used to implement custom icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=5%3A159&t=yumeSCoKoGQjs5PJ-0
---

<Tab label="Overview">

```jsx
import { IconCustom } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconCustom',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'light', value: 'light' },
        { label: 'lightactive', value: 'lightactive' },
      ],
    },
    {
      prop: 'icon',
      type: 'string',
    },
  ]
}

<IconCustom icon="rx" />
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: `$xs`: 16 `$sm`: 20 `$md`: 24 `$lg`: 40 `$xl`: 48

```jsx live
<Layout.Group>
  <IconCustom icon="rx" size={'$xs'} />
  <IconCustom icon="rx" size={24} />
  <IconCustom icon="rx" size={48} />
</Layout.Group>
```

## Variants

Use the `variant` prop to change the style of the custom icons. The prop takes in a `light` and `dark` value, as well as
`lightactive` and `darkactive` counterparts. The default is `light`.

```jsx live
<Layout.Stack>
  <Layout.Group space={20} wrap>
    <View style={{ width: 100 }}>
      <Text>light</Text>
    </View>
    <IconCustom icon="home" variant="light" />
    <IconCustom icon="benefits" variant="light" />
    <IconCustom icon="find_care" variant="light" />
    <IconCustom icon="rx" variant="light" />
    <IconCustom icon="menu" variant="light" />
    <IconCustom icon="my_plan" variant="light" />
    <IconCustom icon="medical_benefits" variant="light" />
  </Layout.Group>
  <Layout.Group space={20} wrap>
    <View style={{ width: 100 }}>
      <Text>lightactive</Text>
    </View>
    <IconCustom icon="home" variant="lightactive" />
    <IconCustom icon="benefits" variant="lightactive" />
    <IconCustom icon="find_care" variant="lightactive" />
    <IconCustom icon="rx" variant="lightactive" />
    <IconCustom icon="menu" variant="lightactive" />
    <IconCustom icon="my_plan" variant="lightactive" />
    <IconCustom icon="medical_benefits" variant="lightactive" />
  </Layout.Group>
  <Box color="$primary1">
    <Layout.Stack>
      <Layout.Group space={20} wrap>
        <View style={{ width: 100 }}>
          <Text color="$white">dark</Text>
        </View>
        <IconCustom icon="home" variant="dark" />
        <IconCustom icon="benefits" variant="dark" />
        <IconCustom icon="find_care" variant="dark" />
        <IconCustom icon="rx" variant="dark" />
        <IconCustom icon="menu" variant="dark" />
        <IconCustom icon="my_plan" variant="dark" />
        <IconCustom icon="medical_benefits" variant="dark" />
      </Layout.Group>
      <Layout.Group space={20} wrap>
        <View style={{ width: 100 }}>
          <Text color="$white">darkactive</Text>
        </View>
        <IconCustom icon="home" variant="darkactive" />
        <IconCustom icon="benefits" variant="darkactive" />
        <IconCustom icon="find_care" variant="darkactive" />
        <IconCustom icon="rx" variant="darkactive" />
        <IconCustom icon="menu" variant="darkactive" />
        <IconCustom icon="my_plan" variant="darkactive" />
        <IconCustom icon="medical_benefits" variant="darkactive" />
      </Layout.Group>
    </Layout.Stack>
  </Box>
</Layout.Stack>
```

## Brand

Use the `brand` property to adjust which brands icons are being selected. Note that some of the icons unique to certain brands.
The default is the theme brand, then falls back to `uhc`.

```jsx live
<IconCustom icon="rx" variant="light" size={'$xl'} />
```

## Active

When placing an icon inside of a clickable element, the icon should be toggled between its normal and active state.

```jsx live
<Layout.Stack>
  <Pressable>
    {({ pressed }) => (
      <Layout.Stack space={-4}>
        <IconCustom icon="home" variant={pressed ? 'lightactive' : 'light'} />
        <Text color="$gray4" size="$sm">
          Home
        </Text>
      </Layout.Stack>
    )}
  </Pressable>
</Layout.Stack>
```

## Indicator

The [indicator component](/mobile/ui/indicator) can be used as a wrapper to add a notification badge.

```jsx live
<Layout.Group space={20}>
  <Indicator withBorder>
    <IconCustom icon="home" />
  </Indicator>
  <Box color="$primary1">
    <Indicator withBorder borderColor="$primary1" color="$indicatorDark">
      <IconCustom icon="home" variant="dark" />
    </Indicator>
  </Box>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={IconCustom}
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the custom icon',
    },
    {
      name: 'variant',
      type: '"light" | "lightactive" | "dark" | "darkactive"',
      description: 'The style variation of the custom icon',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the custom icon',
      default: '$icon.sizing.md',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
    },
    {
      name: 'brand',
      type: '"uhc" | "optum"',
      description: 'The brand of the custom icon',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={IconCustom}
  rows={[
    {
      name: 'icon-custom-root',
      description: 'Icon custom root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Custom Icons">

```jsx render
<h2>Custom Icons</h2>
```

<IconLibrary brand="uhcCustom" />

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={IconCustom} keys={['icon']} />
```

</Tab>

---
id: illustrated-icon-brand
slug: /mobile/brand/uhc/illustrated-icon-brand
category: Brand
title: IllustratedIconBrand
description: Used to implement UHC brand illustrated icons and adapt their properties.
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { IllustratedIconBrand } from '@uhg-abyss/mobile';
```

```tsx sandbox
{
  component: 'IllustratedIconBrand',
  inputs: [
    {
      prop: 'icon',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'none', value: undefined },
        { label: 'gold', value: 'gold' },
        { label: 'orange', value: 'orange' },
        { label: 'multicolor', value: 'multicolor' },
      ]
    },
  ],
}

// Disclaimer: Not all icon/color combinations are applicable; inapplicable combinations will display as empty

<IllustratedIconBrand icon="gears_system" color="multicolor" size={400} />
```

## Size

Use the `size` property to adjust the width of the illustrated icon. The default value is `100`. The height of the illustration will scale proportionally to the width.

```tsx live
<IllustratedIconBrand icon="handshake" color="multicolor" size={300} />
```

## Color

Use the `color` property to select available illustrated icon colors. The available colors are `"gold"`, `"orange"`, and `"multicolor"`.

**Note:** Not all illustrated icons have any color variants. In such cases, omit the `color` prop; otherwise, the icon will not display.

```tsx live
<Layout.Group>
  <IllustratedIconBrand icon="health_potential" color="gold" />
  <IllustratedIconBrand icon="health_potential" color="orange" />
  <IllustratedIconBrand icon="health_potential" color="multicolor" />
</Layout.Group>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={IllustratedIconBrand}
  rows={[
    {
      name: 'size',
      type: 'number',
      description: 'The width of the illustration',
    },
    {
      name: 'color',
      type: '"gold" | "orange" | "multicolor"',
      description:
        'The color of the illustrated icon. Applicable only to certain assets.',
    },
    {
      name: 'icon',
      type: 'string',
      description: 'The name of the illustrated icon',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={IllustratedIconBrand}
  rows={[
    {
      name: 'illustrated-icon-brand-root',
      description: 'IllustratedIconBrand root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

<h2>Screen Reader Support</h2>

Illustrated icons are intended to be used as <ExitLink href="https://www.w3.org/WAI/tutorials/images/decorative/">decorative images</ExitLink> and as such, are ignored by screen readers by default. However, should a case arise in which an illustrated icon needs to be accessible, use the `accessibilityLabel` prop to provide accessible text to the image. This text should be descriptive enough to convey the meaning of the illustrated icon.

```tsx live
<IllustratedIconBrand
  icon="full_dial_high"
  size={300}
  accessibilityLabel="A dial set to the highest setting"
/>
```

</Tab>

<Tab label="Illustrated Icon Source">

```jsx render
<h2>Illustrated Icon Source</h2>
```

<br />
The source for these illustrated icons can be found in the brand libraries.
<br />
<br />
<ExitLink href="https://unitedhealthcare.gettyimages.com/s/3f79xfhwgtcsc8t3t79hfc9">
  UnitedHealthCare Library
</ExitLink>

<br />
<br />

You can use the search functionality to find the required illustrated icons. Icons can be searched using their title or colors.

<IllustrationLibrary brand="uhc" icons />

</Tab>

---
id: illustration-brand
category: Brand
title: IllustrationBrand
description: Used to implement Brand illustrations and adapt their properties.
design: 'https://www.figma.com/file/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-Abyss-Mobile?type=design&node-id=1218-19509&mode=design&t=eobYuZOIhhms55Vc-0'
---

<Tab label="Overview">

```jsx
import { IllustrationBrand } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IllustrationBrand',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'illustration',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: '1', value: '1' },
        { label: '2', value: '2' },
      ],
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'primary', value: 'primary' },
        { label: 'pacific', value: 'pacific' },
        { label: 'white', value: 'white' },
      ]
    },
  ]
}

// Disclaimer: not all brand color combinations or variants are applicable, and inapplicable combinations will display as empty

  <IllustrationBrand
    brand="uhc"
    size={400}
    color="primary"
    illustration="heart"
  />
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<IllustrationBrand
  brand="uhc"
  color="white"
  illustration="calendar"
  size={300}
/>
```

## Size

Use the `size` property to adjust the size of the illustration.

```jsx live
<IllustrationBrand brand="uhc" illustration="us_map" size={300} />
```

## Color

Use the `color` property to select available illustration colors.

```jsx live
<Layout.Group wrap>
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="primary"
    illustration="care"
  />
  <IllustrationBrand brand="uhc" size={300} color="white" illustration="care" />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    variant={2}
    illustration="care"
  />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="pacific"
    illustration="care"
  />
</Layout.Group>
```

## Variant

Some UHC illustrations have multiple variants of accent colors on the same background color. Use the `variant` prop to select the color combination.

```jsx live
<Layout.Group wrap>
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    illustration="walking"
  />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    illustration="walking"
    variant={2}
  />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    variant={2}
    illustration="in_home_care"
  />
  <IllustrationBrand
    brand="uhc"
    size={300}
    color="white"
    illustration="in_home_care"
  />
</Layout.Group>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={IllustrationBrand}
  rows={[
    {
      name: 'brand',
      type: '"uhc" | "optum"',
      description: 'Indicates which brand you want your illustration from',
    },
    {
      name: 'size',
      type: 'number | string',
      description:
        'Set the size of the illustration',
    },
    {
      name: 'color',
      type: '"white"| "primary" | "pacific"',
      description: 'Set color option of the illustration',
    },
    {
      name: 'variant',
      type: '1 | 2',,
      description:
        'For illustrations with variants on the same background color. Applicable only to UHC illustrations',
    },
    {
      name: 'illustration',
      type: 'string',
      description: 'The name of the illustration',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set accessibilityLabel of the image',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={IllustrationBrand}
  rows={[
    {
      name: 'illustration-brand-root',
      description: 'IllustrationBrand root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Illustration Source">

```jsx render
<h2>Illustration Source</h2>
```

<br />
The source for these illustrations can be found in the brand libraries.
<br />
<br />
<ExitLink href="https://unitedhealthcare.gettyimages.com/s/3f79xfhwgtcsc8t3t79hfc9">
  UnitedHealthCare Library
</ExitLink> <br />
<ExitLink href="https://brand.optum.com/content/illustration-library-resources">
  Optum Library
</ExitLink>

<br />
<br />
You can use the search functionality to find the required illustration.
Illustrations can be searched using their title, variants or colors.
<br />
<br />
<IllustrationLibrary brand="uhc" />

</Tab>

---
id: elevation
category: Brand
title: Elevation
description: Creates depth on screen for users
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=12804%3A65751
---

<Tab label="Overview">

```jsx
import { Elevation } from '@uhg-abyss/mobile';
```

```jsx sandbox

{
  component: 'Elevation',
  inputs: [
    {
      prop: 'level',
      type: 'select',
      options: [
        { label: "0", value: 0 },
        { label: "1", value: 1 },
        { label: "2", value: 2 },
        { label: "3", value: 3 },
        { label: "4", value: 4 },
      ]
    },
  ]
}

<Elevation>
  <Box color="white" width={150} height={150} />
</Elevation>

```

## Level

The `level` prop determines the magnitude of the shadow effect applied to the surface of the component.
The prop accepts numbers between `0` and `4`. The default is `1`

```jsx live
<Layout.Stack space={20} grow>
  <Elevation level={0}>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 0
      </Heading>
    </Box>
  </Elevation>
  <Elevation>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 1
      </Heading>
    </Box>
  </Elevation>
  <Elevation level={2}>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 2
      </Heading>
    </Box>
  </Elevation>
  <Elevation level={3}>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 3
      </Heading>
    </Box>
  </Elevation>
  <Elevation level={4}>
    <Box color="white" width={135}>
      <Heading offset={2} color="$info1">
        Level 4
      </Heading>
    </Box>
  </Elevation>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Elevation}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The content of the component',
    },
    {
      name: 'level',
      type: '0 | 1 | 2 | 3 | 4',
      description:
        'The level of shadow depth. It accepts values between 0 and 4 inclusive',
      default: '1',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Elevation}
  rows={[
    {
      name: 'elevation-root',
      description: 'Elevation root element',
    },
  ]}
/>
```

</Tab>

---
id: tokens
title: Tokens
category: Brand
---

<Tab label="Overview">

## Overview

Design tokens are the visual sub-atom variables of a design system. They contain UI data such as colors, border width, elevation, and even motion.

They are used in the place of hard-coded values such as hex codes or pixels to maintain scalability and consistency.

Think about them as recipe ingredients - you could add chocolate to a salad, but it won't be very tasty.
You would only consider what is a standard salad ingredient - it's the same with tokens, they are a limited set of options that make sense for our product.

**Further reading:** <br />
[Nathan Curtis on Tokens in design systems](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421).

### Token Hierarchy

Abyss uses a 3-tier token system:

- Core tier - the WHAT or the OPTIONS: contains primitive values, with no specific meaning - the name of the token and its raw value (HEX code for colors, and numbers for borders, corner radius, opacity, etc.)
- Semantic tier - the HOW or the DECISIONS: communicates design decisions on the exact usage of a Core token system-wide.
- Brand tokens - shorthand tokens to define common colors used throughout Abyss.

### Using Tokens

Before you can consume Abyss tokens, your project must be configured with our [themeProvider](/mobile/ui/theme-provider). This will allow you to access the tokens in your project.

Tokens are used in place of hard-coded values such as hex codes or pixels. To use a token, you can reference it in your code using the `$` symbol followed by the token name.

All Abyss components can accept tokens, when they are passed in using the `style`, or [styles](/mobile/developers/style-customization) prop. Non-Abyss components can use the [tokenize](/mobile/tools/tokenize) function to accept tokens.

#### Examples

Brand tokens are useful for quickly defining the color of components.

```jsx sandbox
<Button style={{ backgroundColor: '$success1' }}>Green Button</Button>
```

#### Styled Function

To create a `View` component with a background color of `$core.color.brand.100`, you can leverage our [styled function](/mobile/tools/styled) and do the following:

```jsx sandbox
() => {
  const Example = styled('View', {
    backgroundColor: '$core.color.brand.100',
    height: 100,
    width: 100,
  });

  return <Example />;
};
```

#### useToken hook

Alternatively, you can use our [useToken Hook](/mobile/hooks/use-token) to directly access the value of a token. This is useful when you need the value of multiple tokens.

```jsx sandbox
() => {
  const getColorToken = useToken('colors');
  const green = getColorToken('$core.color.green.100');
  const red = getColorToken('$core.color.red.100');

  return (
    <>
      <View style={{ backgroundColor: green, height: 50, width: 100 }} />
      <View style={{ backgroundColor: red, height: 50, width: 100 }} />
    </>
  );
};
```

#### Tokenize Function

Our [tokenize](/mobile/tools/tokenize) function is useful for mapping any non-Abyss component's props to accept Abyss tokens.

```jsx live
const TokenizedTouchableHighlight = tokenize(TouchableHighlight, {
  underlayColor: 'colors',
});

render(() => {
  return (
    <TokenizedTouchableHighlight
      underlayColor="$success2"
      style={{ padding: 8 }}
      onPress={() => {}}
      accessibilityRole="button"
    >
      <Text size="$lg">Press Me</Text>
    </TokenizedTouchableHighlight>
  );
});
```

#### Useful Links

- [Custom Theme Tutorial](/mobile/developers/tutorials/custom-themes/): This tutorial will guide you through creating a custom Abyss theme for your project.
- [createTheme Function](/mobile/tools/create-theme): This tool allows you to create and modify themes to fit your design needs.
- [Theme Provider](/mobile/ui/theme-provider): Provider that passes the theme object down the component tree giving your project access to Abyss tokens.
- [styled Function](/mobile/tools/styled): Tool that allows you to create styled components.
- [useToken Hook](/mobile/hooks/use-token): Hook that allows you to access the value of a token in your project.
- [tokenize](/mobile/tools/tokenize): Function that allows you to map a component's props to accept Abyss tokens.

</Tab>

<Tab label="Core Tokens">

## Core Tokens

Below is a list of core tokens used throughout Abyss, These are split into the categories `color`, `border-width`, `border-radius`, `opacity`, `spacing`, `sizing`.

_**Note:** Click on the token row to copy the token to your clipboard._

#### Border Width Tokens

`border-width` tokens are used to define the `borderWidth` on components.

```jsx
const Example = styled('View', {
  borderWidth: '$core.border-width.md',
});
```

```jsx render
<Docs.CoreTokenTable type="borderWidths" tier="core" />
```

#### Border Radius Tokens

`border-radius` tokens are used to define the `borderRadius` on components.

```jsx
const Example = styled('View', {
  borderRadius: '$core.border-radius.md',
});
```

```jsx render
<Docs.CoreTokenTable type="radii" tier="core" />
```

---

#### Opacity Tokens

`opacity` tokens are used to define the opacity of a component.

```jsx
const Example = styled('View', {
  opacity: '$core.opacity.md',
});
```

```jsx render
<Docs.CoreTokenTable type="opacities" tier="core" />
```

---

#### Spacing Tokens

`spacing` tokens define the space between components. Generally, these are used for the `padding`, `margin`, or `gap` of components.

```jsx
const Example = styled('View', {
  padding: '$core.spacing.200',
});
```

```jsx render
<Docs.CoreTokenTable type="space" tier="core" />
```

---

#### Sizing Tokens

`sizing` tokens define the size of components. Generally, these will be used to define the `width` or `height`.

```jsx
const Example = styled('View', {
  width: '$core.sizing.600',
  height: '$core.sizing.600',
});
```

```jsx render
<Docs.CoreTokenTable type="sizes" tier="core" />
```

---

#### Color Tokens

`color` tokens are used to define the color of components.

```jsx
const Example = styled('View', {
  backgroundColor: '$core.color.brand.100',
});
```

```jsx render
<Docs.CoreTokenTable type="colors" tier="core" />
```

</Tab>

<Tab label="Brand Tokens">

## Brand Tokens

Brand tokens are useful for quickly defining the color of components.

_**Note:** Click on the token row to copy the token to your clipboard._

#### Colors

Below is a list of brand tokens and their intended use cases.

```jsx
const Example = styled('View', {
  backgroundColor: '$primary1',
});
```

```jsx render
<Docs.CoreTokenTable type="colors" tier="brand" />
```

---

#### Spacing

`spacing` tokens define the space between components. Generally, these will be used to define the `padding`, `margin`, or `gap` of components.

```jsx
const Example = styled('View', {
  padding: '$md',
});
```

```jsx render
<Docs.CoreTokenTable type="space" tier="brand" />
```

---

#### Border Radius

`border-radius` tokens define the `borderRadius` on components.

```jsx
const Example = styled('View', {
  borderRadius: '$md',
});
```

```jsx render
<Docs.CoreTokenTable type="radii" tier="brand" />
```

---

### Accessibility

Color choices that are accessible ensure everyone can not only see every element on a page but also understand a specific, intended meaning. You want everyone to be able to see the difference between two colors right next to or on top of each other.

Contrast refers to the perceived difference between foreground and background colors. People with low vision or color blindness and those with difficulty seeing the differences between colors can have trouble seeing where one element ends and another begins. As we age, the shape of our eyes changes and affects how we perceive color and how well we can distinguish color variations. If the contrast between different elements is too low, people may not be able to see them at all.

Contrast is expressed as a ratio with the first number representing the foreground color and the second representing the background color. For example, 3:1 means the foreground item color is three times more intense or visible than the background value. Contrast rules apply to text as well as any content that conveys meaning, including icons, graphics, and form elements. Tools such as Colour Contrast Analyzer or WebAIM's online color contrast tool are useful for verifying contrast ratios.

Color and contrast choices within a digital experience are accessible when people can:

- See UI elements and content
- Understand and interpret information
- Take action

We aim to provide a contrast ratio perceivable by all users. For this reason, UnitedHealthcare has embraced a minimum contrast ratio of 4.5:1 (foreground vs background) for UI elements and content that conveys meaning.

<b>Recommendations</b>

- Include color combinations, good contrast and poor contrast, in design documentation
- Communicate meaning with more than just color, such as with color and descriptive text
- Give focus indicators a unique presentation that meets contrast requirements on all backgrounds

<b>Test for a minimum contrast ratio of 4.5 to 1 for:</b>

- Non-bolded text smaller than 24 pixels (18 points)
- Bold text smaller than 18 pixels (14 points)
- Essential icons that are close to the body text size

<b>
  Test that non-text elements that communicate information meet a minimum
  contrast ratio of 3 to 1 for all states:
</b>

- Icons
- Data visualizations
- Focus indicators
- Controls, including their borders or boundaries
- Non-bolded text at or above 24 pixels (18 points)
- Bold text at or above 18 pixels (14 points)

Don't worry about contrast for logos and disabled elements. Watch out for using color alone to communicate meaning. People who are color blind or blind cannot perceive the meaning by color alone.

</Tab>

---
id: typography
title: Typography
category: Brand
description: Typography for UHC brands
---

## Overview

Typography is the art and technique of arranging type to make written language legible. In the Abyss library, [Heading](/mobile/ui/heading) and [Text](/mobile/ui/text) dive into the detail behind text formatting for UHC branding. More in depth guidance on typography can be found below and in the <ExitLink href="https://brand.uhc.com/typography">UHC Brand Page</ExitLink>.

## Setting Global Fonts

Fonts can be set globally throughout an application by using the <a href='/mobile/tools/create-theme'>createTheme</a> function in conjunction with the <a href='/mobile/ui/theme-provider'>ThemeProvider</a> component.
The second argument of createTheme function allows you to extend the base theme. Below is an example of setting a token named `customFont`.

```jsx
import { ThemeProvider } from '@uhg-abyss/mobile';
import { createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      customFont: 'RobotoFlex',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};
```

This would allow you to consume the font as a token globally.

```jsx
<Text fontFamily="$customFont">Filler Text</Text>
```

There are 2 tokens that are reserved for consumer usage: `$text` and `$heading`. Setting the tokens for these two will set the default font for the Text and Heading components globally.
If no font is set, the Text and Heading components will default to the system font.

```jsx
import { ThemeProvider } from '@uhg-abyss/mobile';
import { createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      heading: 'UHCSerif',
      text: 'UHCSans',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};
```

## Headings

Headings identify chunks of related content on a page and establish the hierarchy showing how those chunks of content relate to each other. If someone reads only the headings on a page, they will get a general understanding of the information presented.

HTML defines six heading levels: H1 to H6.

H1 identifies an entire page, or overall topic, and is the most important level. There should only be 1 H1 per page.

Find further documentation in the [Heading](/mobile/ui/heading) component.

```jsx render
<Layout.Stack grow>
  <Docs.TypeTileMobile type="heading1" fontWeight="600">
    <Heading>H | 1 | SemiBold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading2" fontWeight="600">
    <Heading offset={2}>H | 2 | SemiBold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading3" fontWeight="600">
    <Heading offset={3}>H | 3 | SemiBold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading4" fontWeight="600">
    <Heading offset={4}>H | 4 | SemiBold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading5" fontWeight="700">
    <Heading offset={5}>H | 5 | Bold</Heading>
  </Docs.TypeTileMobile>
  <Docs.TypeTileMobile type="heading6" fontWeight="900">
    <Heading offset={6}>H | 6 | Heavy</Heading>
  </Docs.TypeTileMobile>
</Layout.Stack>
```

#### <b>Recommendations</b>

<ul>
  <li>
    <b>Always</b> have an H1 heading for the page title
  </li>
  <li>Keep headings scannable</li>
  <li>Headings are always sentence-case</li>
  <li>Do not use punctuation in headings</li>
</ul>

<b>
  IMPORTANT: For way-finding, every page must have an H1 available (especially
  for screen readers) that describes the main purpose of the page such as
  “Claims & Benefits”
</b>

---

## Body Copy Text

SF Pro is our primary iOS typeface and Roboto is our primary Android typeface for body copy. All weights are available in italics.

Regular copy is the default style for the majority of text on pages. Small copy is the secondary style for context on pages and is used for secondary text styles, as well as footnotes and legal messaging or less important content. Find further documentation in the [Text Component](/web/ui/text).

```jsx render
() => {
  const lorem =
    'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.';

  return (
    <Layout.Stack grow>
      <Docs.TypeTileMobile size="lg" fontWeight="600">
        <Web.Label>P | LG | SemiBold</Web.Label>
        <Text size="$lg" fontWeight="$semibold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="lg" fontWeight="400">
        <Web.Label>P | LG | Regular</Web.Label>
        <Text size="$lg" fontWeight="$normal">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="md" fontWeight="700">
        <Web.Label>P | MD | Bold</Web.Label>
        <Text size="$md" fontWeight="$bold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="md" fontWeight="600">
        <Web.Label>P | MD | SemiBold</Web.Label>
        <Text size="$md" fontWeight="$semibold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="md" fontWeight="400">
        <Web.Label>P | MD | Regular</Web.Label>
        <Text size="$md" fontWeight="$normal">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="900">
        <Web.Label>P | SM | Heavy</Web.Label>
        <Text size="$sm" fontWeight="$heavy">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="700">
        <Web.Label>P | SM | Bold</Web.Label>
        <Text size="$sm" fontWeight="$bold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="600">
        <Web.Label>P | SM | SemiBold</Web.Label>
        <Text size="$sm" fontWeight="$semibold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="400">
        <Web.Label>P | SM | Regular</Web.Label>
        <Text size="$sm" fontWeight="$normal">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="sm" fontWeight="700">
        <Web.Label>P | XS | Bold</Web.Label>
        <Text size="$xs" fontWeight="$bold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="xs" fontWeight="600">
        <Web.Label>P | XS | SemiBold</Web.Label>
        <Text size="$xs" fontWeight="$semibold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="xs" fontWeight="500">
        <Web.Label>P | XS | Medium</Web.Label>
        <Text size="$xs" fontWeight="$medium">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="2xs" fontWeight="600">
        <Web.Label>P | 2XS | SemiBold</Web.Label>
        <Text size="$2xs" fontWeight="$semibold">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
      <Docs.TypeTileMobile size="2xs" fontWeight="500">
        <Web.Label>P | 2XS | Medium</Web.Label>
        <Text size="$2xs" fontWeight="$medium">
          {lorem}
        </Text>
      </Docs.TypeTileMobile>
    </Layout.Stack>
  );
};
```

---
id: brandmark
category: Brand
title: Brandmark
description: Logos/Brandmarks for UHG brands.
design: 'https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Web?type=design&node-id=0-21&mode=design&t=uWtmzWwvT2Kv5MMG-0'
---

<Tab label="Overview">

```jsx
import { Brandmark } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Brandmark',
  inputs: [
    {
      prop: 'size',
      type: 'string',
      default: '$brandmark.sizing.lg'
    },
    {
      prop: 'affiliate',
      type: 'select',
      options: [
        { label: 'uhg', value: 'uhg' },
      ],
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'lockup', value: 'lockup' },
      ]
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: 'blue', value: 'blue' },
        { label: 'black', value: 'black' },
        { label: 'white', value: 'white' },
      ]
    },
  ]
}

// Disclaimer: not all affiliate variant/color combinations are applicable, and inapplicable combinations will display as empty
<Box color="$primary1" style={{ justifyContent: 'center', alignItems: 'center' }}>
  <Brandmark
    brand="uhg"
    size="$lg"
    affiliate="uhg"
    variant="lockup"
    color="white"
  />
</Box>
```

## Brand

Use the `brand` property to adjust which brand is being selected.

```jsx live
<Layout.Group>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of the brandmark.

```jsx live
<Layout.Group>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhg"
      size="$sm"
      affiliate="uhg"
      variant="lockup"
      color="blue"
    />
  </Box>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="blue"
    />
  </Box>
</Layout.Group>
```

## Variant

Use the `variant` property to select the required brandmark variants.

```jsx live
<Layout.Stack>
  <Box color="$primary1" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="white"
    />
  </Box>
</Layout.Stack>
```

## Color

Use the `color` property to select available brandmark colors.

```jsx live
<Layout.Stack>
  <Box color="$primary1" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="white"
    />
  </Box>
  <Box color="$white" padding={50}>
    <Brandmark
      brand="uhg"
      size="$lg"
      affiliate="uhg"
      variant="lockup"
      color="black"
    />
  </Box>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Brandmark}
  rows={[
    {
      name: 'brand',
      type: 'uhg',
      description: 'Indicates which brand you want your brandmark from',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the brandmark',
    },
    {
      name: 'affiliate',
      type: 'uhg',
      description: 'Indicates the brandmark affiliate',
    },
    {
      name: 'variant',
      type: 'lockup',
      description: 'Indicates the brandmark variant',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set color option of the brandmark',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Brandmark}
  rows={[
    {
      name: 'brandmark',
      description: 'Brandmark root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Brandmarks">

```jsx render
<h2>Brandmarks</h2>
```

<br />

You can use the search functionality to find the required brandmark. Brandmarks can be searched using their affiliates, variants or colors.

<BrandmarkLibrary brand="uhg" />

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Brandmark} keys={['brandmark']} />
```

</Tab>

---
id: flat-list
category: Core
title: FlatList
description: A performant interface for rendering basic flat lists.
sourceIsTS: true
---

<Tab label="Overview">

## Usage

The `FlatList` component is a high-performance list component that efficiently renders only the items currently
visible on the screen, regardless of the size of the data set. It is ideal for rendering basic, flat lists and
supports the most handy features like:

- Full tokenization support.
- Fully cross-platform.
- Optional horizontal mode.
- Configurable viewability callbacks.
- Header support.
- Footer support.
- Separator support.
- Pull to Refresh.
- Scroll loading.
- ScrollToIndex support.
- Multiple column support.

_If you need section support, consider using the [SectionList](/mobile/core/section-list) component._

```jsx live
const data = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'One',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Two',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Three',
  },
  {
    id: '9b7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'Four',
  },
  {
    id: '8ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Five',
  },
  {
    id: '78694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Six',
  },
  {
    id: '6b7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'Seven',
  },
  {
    id: '5ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Eight',
  },
];

const ItemWrapper = styled('View', {
  width: '50%',
  padding: '$md',
});

const ItemContainer = styled('View', {
  backgroundColor: '$pastel1',
  padding: '$md',
  borderWidth: 4,
  borderColor: '$interactive1',
  alignItems: 'center',
  borderRadius: '$lg',
});

const Category = styled('View', {
  height: 50,
  alignItems: 'center',
  justifyContent: 'center',
});

const Item = ({ title }) => {
  return (
    <ItemWrapper>
      <ItemContainer>
        <Text
          color="$interactive1"
          size="$xl"
          fontWeight="$bold"
          fontFamily="$heading"
        >
          {title}
        </Text>
      </ItemContainer>
    </ItemWrapper>
  );
};

render(() => {
  return (
    <View style={{ height: 350 }}>
      <FlatList
        data={data}
        renderItem={({ item }) => {
          return <Item title={item.title} />;
        }}
        keyExtractor={(item) => {
          return item.id;
        }}
        numColumns={2}
        ListHeaderComponent={
          <Category>
            <Heading color="$white">FlatList Header</Heading>
          </Category>
        }
        ListHeaderComponentStyle={{
          backgroundColor: '$interactive2',
          borderColor: '$interactive1',
          borderWidth: 6,
          marginHorizontal: '$md',
          borderRadius: '$lg',
        }}
        columnWrapperStyle={{
          borderWidth: 6,
          borderColor: '$interactive1',
          marginVertical: '$xs',
          backgroundColor: '$interactive2',
          borderRadius: '$lg',
        }}
        contentContainerStyle={{ backgroundColor: '$gray1', padding: '$md' }}
        ListFooterComponentStyle={{
          backgroundColor: '$interactive2',
          borderColor: '$interactive1',
          borderWidth: 6,
          marginHorizontal: '$md',
          borderRadius: '$lg',
        }}
        ListFooterComponent={
          <Category>
            <Heading color="$white">FlatList Footer</Heading>
          </Category>
        }
      />
    </View>
  );
});
```

### Best Practices

- **Use Memoization:** Use [React.memo()](https://react.dev/reference/react/memo) to avoid unnecessary re-renders of list items.
- **Pagination:** For large datasets, implement pagination with `onEndReached` to load additional data dynamically.
- **Key Extraction:** Ensure `keyExtractor` returns a unique and stable key to avoid performance degradation caused by reordering or re-rendering items unnecessarily.

## Considerations

_`FlatList` is a convenience wrapper around [VirtualizedList](/mobile/core/virtualized-list), and thus inherits its props (as well as those of [ScrollView](/mobile/core/scroll-view)) that aren't explicitly listed here, along with the following caveats:_

- **Internal State:** Internal state is not preserved when content scrolls out of the render window. Ensure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
- **Prop Updates:** This is a `PureComponent` meaning it will not re-render if props remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
- **Item Rendering:** In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application.
- **Key Management:** By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.

### Accessibility Considerations

- **Screen Reader Support:** Ensure that list items have accessible labels and descriptions, especially if they contain interactive elements.
- **Focus Management:** When dynamically loading data, manage focus properly so users can navigate the list without losing track of their position.

### Performance Considerations

- **Windowing:** Use `initialNumToRender` and `maxToRenderPerBatch` props to control how many items are rendered initially and in each batch to avoid overloading the UI with too many items at once.
- **Recycling Cells:** Consider using `CellRenderComponent` to recycle rendered items and improve rendering performance for large lists.
- **Avoid Excessive Renders:** Leverage `shouldComponentUpdate` to prevent unnecessary renders of list items.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={FlatList}
  rows={[
    {
      name: 'flat-list-root',
      description: 'FlatList root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={FlatList}
  inherits={[
    {
      name: 'React Native - FlatList',
      link: 'https://reactnative.dev/docs/flatlist#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"FlatList">',
      description:
        'Object or array of objects defining the style of the FlatList component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Insets',
      description:
        'This defines how far a touch event can start away from the FlatList',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the content container within the FlatList component with design tokens. These styles will be applied to the FlatList content container which wraps all of the child views',
    },
    {
      name: 'contentInset',
      type: 'Insets',
      description:
        'The amount by which the FlatList content is inset from the edges of the FlatList',
    },
    {
      name: 'endFillColor',
      type: 'Abyss.Color',
      description:
        'The color of the background of the list when there are not enough items to fill the content',
    },
    {
      name: 'ListFooterComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListFooterComponent. Accepts an object or array of objects which defines the style of the ListFooterComponent within the FlatList component with design tokens',
    },
    {
      name: 'ListHeaderComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListHeaderComponent. Accepts an object or array of objects which defines the style of the ListFooterComponent within the FlatList component with design tokens',
    },
    {
      name: 'columnWrapperStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Optional custom style for multi-item rows generated when `numColumns > 1`. Accepts an object or array of objects which defines the style of the column wrapper within the FlatList component with design tokens',
    },
  ]}
/>
```

</Tab>

---
id: image
category: Core
title: Image
description: Displays different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { Image } from '@uhg-abyss/mobile';
```

## Usage

The Image component is a fundamental UI element that displays images in your application.
This component is a customized extension of React Native's `Image` component, which is enhanced to
fit seamlessly within our design system. It supports various image formats, allows for custom
styling, and includes optimizations for loading performance.

```jsx render
<Web.Alert variant="warning">
  Note that for network and data images, you will need to manually specify the
  dimensions of your image!
</Web.Alert>
```

<br />

```jsx live-expanded
<Layout.Group>
  <Image
    accessibliityLabel="Designer Toolkit"
    source={{
      uri: 'https://abyss.uhc.com/img/graphics/designer_toolkit/toolkit_logos.png',
    }}
    style={{ width: 100, height: 100 }}
  />
  <Image
    accessibliityLabel="Abyss"
    source={{
      uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAASAAAAEgARslrPgAAgABJREFUeNrtfXecZEW1/7du7DzdPTnvzOa8y7LssuQcFAQx6xMVMaOi/p4+w1MU9T2zYhb1GcFEBsl5gd1l2Zwn59Q9nfvGqt8ft8PtNDMLyy6g5/OZmZ6+dSt+69Q5p06dIvg3FdAPwwx/fG4KO57YjQBPMfH189HwJHA5RokUCLj/8fyYMPbCAZBIGB98x8aWuCdw5v2HY2JoYBwITwOpOKCrAKUAYwADwDErc0qsvwQAxwOCBLg8QDCIYHs9Ll5UpXvi4Sd/9adnhpg/iIY1y3DlKY2GFp5O3m00sfELgdrPPoCIAaw+Zw3euaken6omJ7rLXlEknOgKnEiaYgzzbh3D9QslHE5SPLGlFx8PgLujLiASSSSiwIR5v+5pCu/rlv9BU9KGM1ZcqU0n5kHXCQDcfv+eZnewan0irgtIKoCqAqYO0AyAQQDCAFYEOgaAUcDUgFQMMFQkUxE8NyQaiVBkGwOGYejQIhHWc9js2/bknttjnFNr652virI0QggzPPVBdn0Q+v9+bTM9c+N8LPDx+Ob+JJ55Tzs2kX9dkP9LtrxlK0PyyASm93chyEyEvn4G95EDetVdD+5zLqvhm/oVYXn33j63i+o1YrD6yujYVA1NJojTKdWqJgRT1QgYBRhAGCPM3pP2HmUZYLMylSAZ7s3y6QgDGGdlB44DL0lM5mGk0+ok5/IwX2P1lB6avj1N+KmOlR3JeQ66b/+4NnLZRSvTP1/tiNb8v0dpiHBwLl0IeWEzImf86w3vv0SLH2AMkYSOa3/fiyQlMO97HG0/u1ZI3b7PzRirr6fJBR6ffPqRgelFiMVbqCiujEcSLqoo+UyywCNF3UaK0Moyv1iFyhDbs0ppcnmxfH62YonDAa/fm+I1fQ+83qEFbYHD8Zjy9ChxdXEcGWdvWJuMfPj7Bi65AG4O+NYHF8HnkfAf/wKc+zXfwj8oDF//zS70TVMYjz0CdvW7g2TfgXrRKS81I9E1As+daqbSa4iW9uomk01Fh8V6SRG3Le65Mmi0cduK6RhmBzKK8mFl8qBWHXlZhMgTlUqOOOdy7TRN+iz8vp1mKn2ALl0+Lv7+92HujAvQXgN85v3r8YGq1/aQv2Zbt3w3w/jmbkx+aD5/2h1DjnjS6OzZ3d2RAk5FLL6WY2wp1bQ2pmqZN2xy76y9VgFsM4H+aLhycb6Y6d0s9ybWR0kCJ4kDlOEAfL4dLuDZthWLen0e0rPl7Z2K/1v7zJrTlqP79Nfm0L+mWhVjDJ95eAh/fG4UqS/9HI1/+EbrSi502u6D48sVzdiYjMaX6YpWDdOUYZqFXUAwM9gqiRbAzECr+Lw4+QxALpdHuZGjmYSMATwPcJwqyHLIVeXd75S455Yvady3Sw1sDn30ukHnf30Kbzu9HV+/tANNryFR5DXTks/siOI7a3+E++gXpTd9d0+9Ojl5sgRc4aXKmfF4ul1JpQmjrDww5grkciJFLk2mK9mLAPJMILZlnauvnajtuxLRJGs2JHC4HMzjcfbHOceTOtgdjtrq53//hY3jbxI+qX38ma/gR5sCL8u4HG96VQN6D2O4ozeBZ7YO421vXOx66JH+jbv2j57R1Te1Kp1Kr+QoXUA1jVjKXBZwOHpunH2vBHisEEw5q8VsNS9S9oDC+s0GYns6hhlWjyzXJ8gin4gSY4R0Od3OPZ0dtbtXLmt56uwLFjz3t7/sSa07rR0XLvHh/Fcxx37V1vy3h2O49o8H8dcb1rt+f0fP6sGBqSsnJyLnhacTi9Ip1WMaRgaApBAgswG6RO7NbopkXuQAwnEQeAKOUaYZLMVEgcEhQXRK8Ms8amUCr0A0RlmKMUsQyHc44whHXDGDSZMKRVQxoCsGkFZBNINIPOeiBMSgDIxSm3WFFNarLJDt/5dbKfIrFC8IcLrkRCDgOVxdG3iksbXu9jf/x5Jdn7ju8dT3PrQa164InughflH06gP0r/rBT09j80dXy799buTUrftHLh0ZnDwnnUgvTSUVt2EYhc0q1vXmAmQgvzlCAIgC3C4JZlrbrzCEpaAPCxrcaBRo15Z94w8kOElD0ENcQTc6qiQs8/FodfGGQKAyVlgiAYjBIA+kDGF/zERvREU6nALCMeYxdOmU5fUXjRpkQddYAno4DgeHIOeQlqVSGqAZGetGUd2zqwOZQdzJTs7sZM6IOoLAw+lyJB0e54H6tvrH1q9ove99Z8x79uxvP6Oa/iDw/5ae6BE/KnrVAPpD3QyppIrfHwb43kPBWiV+VRXTrhsYDndoiuoxDbMQvMVcuWzrbQ8yZjAicABlKmRR8/ldU0o09U9NksId84KGlEw9fng4Pi631bMzlwZxbqMc7/SIY29eM5+iCLlklmWb2bipZdom+PsLh7muuNnwyIjiffrAJNSBCTK/xVevulxnD/aFBFHVgo4q1yXxSKoGiiYBkJlB8w3MWjpyokaGs9v/FnDr/ETgeB6SQ060tNT0Jph406Tk/YfZuih8+So3nG4H/rL61QGVV0Ut2xlD8JYesnB+bd1Tjx04ZWwy+j4yPX2yQM0WTTdeoqLHGDiOuT0yRJ4bpC5HjyhwD8TS2o7Gtpq4MhXvmdKJsvHUdrb5yqUJ8q4/UkdnAzYsDODkAI9HtwxgR5gCrbXwtwSwrtGJ8+pEnFzjQNAlli1+Kqnh+ZCCR8Z1vDCSQnQoAgyMY22Qxzkb2rEtrGPbkRCUnnEYt76HO/Vvez3bn+kh1RIcctDbOT4w5fU4xLWGbl7EpdRO3aStqYQKUEoAFOkMxYrwDEooGERBgEn4IRYIPF9TF/jNunPWbu3rHp44+IFlDK8C2foVW0PGGDz/N4BvnFFDvn1gUhx/urehSiD/T4lGr0jGk/XMNMQC2+5sIM62ljEQAsYIMQjPp3m3PGhS3N/RFpha2uDavWsktdMZdEeTIp++/P0ns5+3f4FxV52KVaubcGqrG9VODjduWnRc+uD/PXEAYYViy2AS+3YOgd2+BdcM/Q+55yfPEJdmOtXpRNWqJveag2PJVX390zU8wcU0qbQyw3QSQGCMkVJltlwnlZofCc/rTp9nXK7y3RHVzW97z14y9rllzfqND/WzxPXLZ12BThS9Imu18TCD84Uj2Ez93Ifb6cK/Pjd80UT/2BtZNHYyMw13bnHPmqxmEy8yHJkQQjmRV31uKRoXxMcY4W6V3I4ezi0MLAy69Pee06Z/4sfbjPZWP0LxNDpXtaOlyY/7NjWe6C4BAFzweB9GhiPo2zMIv8eB4f4wvnPdqcLvHusVD4fSIkuqbUZS6QRlb/OaxjmJuFpFNV1mjHH5XIpNKJW36QkhAMcl4fU9Xz2v6bY3nd75wG+OKEfWyWkaXbMS+09+5cHnFedt5/v0P/HmhcD4hM+9Z+fE6n+OxD+b6B0714wlnaCULxmPLJXbpbPSMk7gTEHgE44q1wEKcufJy+u6Dk2mHh5Jmkm5vtqMfOxSpv/oH+gfiYP98PIc99md+Xml0ENnz8t9TsJaxT7xwD5DVw1D/eqlafe3Ht9njkcONriFJxbVus7fundsAWPsDXostZRqhpdSyhcy6xmWNAYwRgGTuhGZPl3t1dY9xPTzfLL7f0/Z0LxLW4fkyDV/RuTX7zjR3VJAr6gp9vZnp/E/G/047Q899at59YO79g28c3g43A7DlO1K1KzKXtYXgycpEK47WOPpb21wP6B63A9PTSZ7zlwcNM/a0GJ++hfb4fR7sfg/T8Pzr9AldK60IMYw/N2HoEWS+NoH1+PZLYP8UweneH+Nt9OdTFwQnU5dlY6lV4aiaQdM5poRzEAJ2AkA8Lza1FLTv3xlx59e0KRf3PyxFeO/enAK915Ue6KbX1jPVwLJX9uG6997suOff9vSfmQkfjVNp6/VYrFqatB8HediSyYAOJKELI5AFO+Bx/GPYLVn90o/l4w4XEwRJXbonStPdHOPC7X84nm4dI1cXMtxhBfadg9EL3jshaHF0IzLoOlNYMw965Y7YPNDYeB4jglV3hBxOH81vznwuzPefm7/zT97SDF/cOGJbi6AVwCgb55i2Lq9H7/crThW1bLXJwfHPzbQPbJW1w0fgELQziYn83wSIn8ELvlxuF13gZeeg66kAw1+/PXqlbig2nuim3tC6NnuAdy5P4xt3WE80h1zghobkUxfLqraxcQwF+uqTlhFXZEV2fKt/wVRiDUtaN3haGn68eGR9D3/sb5GWbN+ET4978RC6oSWvvxhBXvPk7nPPjvW8vt/Hjh3KpK6nqWSq8y0UrgVXJGsjQJR5CHJwpjGC3fqHuefsbj1eWztTqHaB3zjvBPZxFcefewOYDIKLO9wrOESV8RD8fdPTibWpJJ6tWFkHLbK+XSTIksIY+AcDsDl3l3td33/rZete/SmC1uHGm6ZouPvOHEiCH/CSv7a87j5Pa3kEw9NrRw4Mvz50b6xDybD0fnMvtNXabplO5cjTJDFqWC1Z1t7c9Wv2ucFfzoUTu+DQ9LxtfOA8ztPWPNesbT1VmDv7cADh4zRG04/siuUei5tsFENnKxpppsZ1AXGSG5XMfsDFPmpEDDdAEun6x2EbVSJ2PbrQdK96W0NEzsjpwNb/nBCmndiOPS1twG/vBKO7+xZ6dbT/2WOj705OhUVZtNTLMpwZUmgXp/jUFoQb16+ouGR5997yq7VP3gcuz559glp0quRHu3qxS+f6Met17wVK7576+quvcPnOZjx/kQ0vdjQDK7khWKHKsCy6wPw1AQNVlv/N0V0fNP4nzP24MpfAnd88Li36bgC+rZpE3u7JrDtzZfj7ku+tIrw3BeIqryBJpOy5eWA8sucrfN4noPb54zBId62tjNw3xNc4O7VSCjrO/24+aJlx70DXwv0zr9txfYjURykTsepfPSy3V3hS4mivTEdS/tMc5ZNGbtS6XKrkOQ7YRhf/+u3rtrNuUX4q5w433H8YHZcAf2nMR2vqxe44Pv+spxS9kVQegVMQypbjTJg5iQRDpf43MoFtQ8Pudy/HPrg+iHyjacYvnDm8WzGa5c+fQ/Yd15Hqr/xSMs8NfmBA0emzlfS2kam6YXpyrnRZv/wvMYTcvdlF6++5T8/evojT76gRD63znncmnDcZOhfRRiaPFzge/ce/MChrvEP65pxESiVZwVzxgVUksWJllb/o8TnvvF9Z7bedfvDw2PUDzz5rpOOW2e95unZPyO64Q147IH+2AdfN3/3zrH0noBPqlZSWoCaNG/iK/ECg11Z5AljC0yTrksonHPd6sY9az/yFeWRH9xwXJpwXDj0H+MMnIzAow91f/zZLV0fONw71aibtLDsCk7qHM+D9zp7BZH/7qkr6h551/s3Hd511w7q98i44bzlx6WT/tXos//YimhSRed/nM7d8e37Fz2/d/w8Qzc/jXiqg+aOrmWIlfmHMciigI7OhtGTNiz/xYYLlv2IAdOfrHv54fayl/AEYxhOIXDnQ10f376950MDA1MNmm7rFFJBLmMACEm2NlcdkeuqfjgmOm8732/GxhwePNe5CjjlhJvQX9v0R4a1sadRqyTxWBi+OkN5ozkV/cTYcGQhGHOXvsAK5WkwiKKA5vbGsRXrl//8wsuW/6jVg+krX2Z5mnvpWcxMimoEH32i++MvPN/zwf5+G5gJq3DEPwNmWUrC5fyt5JSuWbOk5q+JT/4kdse+BJ572+p/g/l40LsIdnzkDDx4KAz9xh/Hli2u/6vkEK+BU/4tJDGZS5c9E2n/AQAQ6JqBod7Rhr1b937w2Qf2fVxN68HDczNlvWh6+WToD9wObtnlnEOSrt28re/jvQNTjbphWkisBGRY+ymOKmdSrvP/nlV5vxfakT5Q1+nUq7/5Poy+49V1euI1Qdv/gaaHHoc4MKofuOvQGFnSeFByyW6O0WVM1aQsNy4gm3mPmhTJRNKjpJSlMHmus96z+7cHWxQcuvdlqe7Lw+q+uQvo6eaIkl7ukoRvqbp+kWFQUva8XmFfmDVBZ6y1o+YW1Ae+e1jw9PLbDrPY917/slTz33R05Hn3/yG1aiHpJEaHNDn1mcmBqXeFQkkPZbbgfRXiiciywNraao8sX9z8+Tse2Xc72hZQ/OSiY17HY86h1zxuYmxwkkM8uhKG/kVd1y+mjAolUYhKIgzBACFbglWOr527rukPnpaawf1Hpljqy+cc80b/m14cabvuANa9CWtXtEQ21QsHZAYhHFUa02ndjVmwZJomiUQS3sPd4xKTpIPw+icbrruJJW7/32Nax2MqQ/85xhDycpxDYMsJz30eoG8AmAwgH76KljkCxMEEz2+ByH+FEHJLa7VzJBpTmPqJU45pY/9NL53YNy9FIpZmLUFn79krmz+fMuiHIfBbQYhZ/oW8SEIpk0xKLwPHf54X+eVjDj/3w8FjK1MfUwf/Ti/4JVOhFSk9/TlNU65ghm3TpFLMN0IM8MI28MKNkNyPDn7vMvqF7x3TNv6bjjFtufokbAEYY5ryxVt3PQidAab53zDN9WDMwlS5zRcGwDQkaOoVsqHSJamB/2lpadsLwDzaOlSiYwZo8fv7cNdzI01a/9j15vjYm2giKeROGtupQCEkJjhhCyT5Bly+4iE8ox1Vma8U+sHTR6AygrgBJE2CpMlBpQQyR+HhKdyEwSsAQZnDlSu9qHbXnegqHxMiRAKu+SvFwvX3Y+8zJjTtyzCNjaCsUPwo3pBJJSRucuxN/LBbffSfxpdw3YODuOnY+FMfE6XwmmfC+PVT486G+PBb9Ej0f8LheEPJBC12PwQxwfFbIIpfQ3vgAbhlhv88+5h3+oslxqZw424Tf9ivIDEwjfevdiFkEDw/zWFvWEdyOgUkNMCgYN9fKvz1QMwX1kDiJoeYyUExCRyciSqewssx+AVgnl8wNq7cHMU1LYBXhqtKxpKgiJODBD6Y+M7TcTQvqcY7lzmw0Adcu6zlRHfD3Oj9dwGpJEF08iLo+pdg0pMBSBUjVGYc+QLVvjHO6/vcFPP/9YrLTkrf8caXfnbzpXPo99+LhqaAvLx2/HWHhtKfNEKJ+tJErLBtBBTAc+DIV6A4HsF0muGGY6/xHi19cXMfnhmneOJAAuT9+4BnxwAHA16YxMLtl9XrEdoipTiOEyjA5cLtslN/1LugJSiu1xhElRKoJoHOCERCIXMMMmFwcoTxYJHmj7c/PJykCjgrBogk8/A6ibm4ShiAMjI1/KvD+NaEAOl1zZC/9gLWLfTh9AYebgH48ukdJ7qLytPNlwNX3cxkkTzA8QJcAvfT6Vi6g84QQZUBCE9G62Hwn5y3dl6yuqn+blz6ExX3ffQlVeUlceirJxmaaoC7v715UUrRftXfO36mqSj5bO1cOefCDAQDzmmnLF4XcHO37B4wKX7/puPX+bAOl/6uN47fHUqgLp3CpAbsHErhweva5BufSlTdvT3KLm8y29OCvHTHhOkMjSXJ8iC/wuMW1g2mCT+WMqGldEA1AMqYz8E1Vjm5NkvnZTAz0QM4MHBW9DDwBGCU6WNxY7/OoEIWIDoF1Ds5tDhhROP6lgPT5v5AnZucVCfoyaiydZfCT521Msi+fUltdNXnd2tnLPaiXqboJTLec3IVPrbglSa6nIJfPPBT521P9Xxj++HJ94fDSQ+lMyh9lIE4ZDR1tD7pcsrXdnz39YfTe4CnVr14WL4kQJ/NGOn63Uh9aPee64zJqet0Q/eWmucK33H6nMnFC6p/f8aKuhtPW1E/+rb/eoDhT1cfh84GPrV1AhNJE893R0FiCYxFGL7wxhb3o73K8q29SU+rZK5KgF/TO6EiyJkdsswvn0rDoSR1CGAOngNvMMDMGmoYzbeRVlhei7/K2pUyDJ4nBDwYTMoMgyOK7BBIrYPTYwn9uaQgTLbVOgynqW8f0biDp8z3xN+82rX72h8eUWAwdCwPYl6zF4+9dcFx6b/ZiDGGx7oHuNuf6+948IWRz/T0TP6HHku5ixLBFo8sc5xLjCNYc5O0Ys1NyudXj1OevGjTx4sSORhjWPP3UVy1a9z1TyHywUcV5QO6oVsH9mYYV8hSigS8vyf1ge/cdMmqEccDe/Byg5kxhg23D6GOM/G9e4Zx43sXuA6PJKvrXe61poMt+dpdo7VemTs1kTR8RwyzERypoRrFhE4BZuTy0QHopi2GQkGfM5sBtFxcvaINpcxSzMBgMMCwXhNAmUeNaRiKAiC4mAgME2MmmGleavD8xN7DRvS5XVNPN3f6wwurhUNjGrbNm+ebrvva80p1jRMrOlxYuL4F36guH7Hp5aYkS2A8lKQ/8g53d1RXf4tNpRgU/WqomqugP1Do9mBouldQlQ+s96S0C58Z/M5ffrQ7ueu6lS8qmM2L4tAffX4CP9tJuUBiYoNzbPi3I8OTi6lhs7yUP42dhMv5f3xD8HvGjRf0XHr3Pvzz8hUvW+f+evcQfr0rjUOTaYS64njL5W2LnuhKLHQb5sZw2jxJ0PQFqonmRNoQeEA2KQPL2chn6JbcHSml0YYK2z/TrmgFLl5i6cp8SQDCEfAEoIAiy7wh8WQYIn/YJfHPU57f3tjo2bPzk48NNH96NTraPHjDMi8+c0r7CYlwdMpPn8KWD58O8r7fd2Ji+lNIKe8BY+6K3UoZOJ5DfVvDIbWm+b2aJ7jlgpPq6e2XH71SfNStrT3C8C0+RvaNxBfc+XT/97r29l7ATF2e6TArJ3BoavDu5CXhff3f+M4O1/f+F6lPnfqydOYXX5jCvXun8d1zvM4bNie9pmaeemBSW8cp+rq4Shcw3WwwKHxWcMdiX157zzDkrmMjRWCcaUGsFHR8JlGkbJCcSulzAXTACxw4kAgvcpOEYHcgIHd5XcIDTbXy4R+9pXl803e6jXm1Luz5wPH3gSGfvg3su9eh8b03rDV14zeTY9E1zKBFJ/dt3nkMIIKgtq1c/ND5Z6/41OLWQNdvtCA7uOnoIHrUgK7rZeC2D8qse+yDqd6Br8ejcc/MJ7MJxIC7t609eOOGVfW3/Pmew2n89I3HtPMOJUbwxxfSODBJsWlVHf/H5yZWOFTtTQPTxoZo3Jiv6LSWGtRFGeNZsaxbjjPmqm5PUyFRMddlFT6Xe6+cL3G5OLiMlM8rw8EzXNgQRU4FRwZqg/KUQ+DulKtcDzu9zj0dLE7jooQH3nmc/cev+AnOe/0K597dw2+f6J/6Iosl82aanGdeYZwKd5UvIc5r/4K8bPEvnasWKX0vN6BX//Yw2bujp4UZ6p/o9PRpKIibVjwWDJIsTvJe11ekjsY//vzTp8befoyXwHfcN4CzWqlwaMKo6Q3TC/aPamcMh7WVMMxlqsa8hklJVmIt4MhziYdXwsEzLzGA2EPYcpz1Q/Ic3YoLyfJlMWbdLmtS6282W1KpAsCMoo0dDAVgJxB5AsKTkCDyB31+eeeprdJzUU58MDatTJ69xMO+c8nx49inMYYtH/+7jxsZfxdLpL+iq3ptSfBI21wmHMeCHc2Hrn7rqV9kDu/t3z+nkR5NeUeHrp0MV8TjDU/du+0L4cGRq5lplI/ckpl9nCzS1jb/PZ2t/v90ONKHAqdvxJ8XVL3ozjlspPDXHVF84eQGfHLzCNnWk+R8Dr4mkdZeNx7R3xCKmRuSKd2v6UzMBSgsHviysSbK39+WO8VPCIjIg7gccDpFVDkIfBIgCwS8JAAuJ+CQwPM8BI6DwAMcR2CaDAYFDIOCGgagamApBbqiIa1TxBSGcNyAllAATctbTXL1RunBYUZLq5q9P7GI4xOACiKnOh18NOiXt/tdwm9Xz3Nt/mMvxiU3z9IfefmBveHBLkxt3Y1qlS0eHJr+1thQ6PVM07nC+he+IzllrXHR/L83nHbWp7dwwTG8de4wnbOVgzEG8lCKbNm2d4MajV4JanrKJLL+Uut0tuyUtqU44YfzWn1dv90uAC8BzNfdfwRfu3sAv79iMa66s1cyTFabUulpQ5PKu2Jx/dR42qyiJhNZFsDluFslGRkWxyWEgAgCJImD0yFADHhRG3Si1c+h2itAcOcB7c0AWuAy0Mky5wyXzkTutSx6lCGlA4pqIJrQ0Rs20Temgo1GYNk4bHXOXe5pr3MZObxYDCqTjgGcrplOQzed6ZRx0bRbWDucpH9gnPjdtM8/tTMRZms8L+/VE1suXAC8/xasXFffdWQo+kPZIdXrhrnBNCozXl3RpImB0bOixlMbsHLTXYwxNlflds6AJuSXEL9+sn9sInI1Yok6VuwDmzMvWgPirnJGly6oeeBNG5t2bh1NmvjvTS+6U869axg3bQnjy+e4pMv/1hUYj5sXhGLam8em9Y2qagRNgwn5oS0nKmTqlgOx9ZdwBDxPIDok+AJONPhFVNV60dLgQrufg8spQBI5OAQCka8c9LT4NmSTAYbJEEtTjEwbiIQS6J3SMTSaRHoqAkWl0HQKphugGfGjlCOzwu/tBRaDvrjdxU8YoOumEIvSJqTNawSvg7YHhB+udneOv+hBORq6+e1ILbvf/MjFi3be82zfA13dk0uS08mq8h3KwBhFOhqpUzjxatF45klCHpyea1FzAvQ4Y7i/O+H47B9eeNPE9PQ6appiQWcXAUiUBApZvL1Xct3cWeOc/n9nvPh4GVf9vQuLTmkiXQNx17MD2oV9IePt4ahxQTiheamZdYIpU4/isaUACAHHEQiSCJdbRFWtB21NHnTWy6ipdqHey8ElWuLCTPygUI3JcmEgrTPEkgYGQjq6h5KYGIliZEqFEkmA6gYYY3m52s7Cy4gLlblv8Xez7EHYnjNGAZVWOyRyrS8txH78bPcPACg4DvTgpy7Gmx7ZMX0E8s2QhDZBFt5dEMyGFXFs0xRJNLwu4He/6YbtX/1DzUk/Ud48By49J0DXAXiqO7zBS5WPh5jZRlkF7gEAINTrcx5e0RG8dye4wauWvjj/g7fd1YeHelKo8fDeu+4+siAaU8/cHKIf1tL6AkOnfEWOXDzohAHE8plw+Ryor3OhpdmLhW0etAUFuGQBDoEV4GsmynFkYm0OKjpDOGFiaFJBz1ASXX1RTE/EoaY1MN20AFzxkkxbpsVtyfYvq1QLVAZzxbgZDGAgqaReMzGpnP/w/vh9OI4hsD9w3lpGPvGPwTWdtfd2HzE3xkKJRWC0jFGBARTgGW1z8ebHH907cfivJ1U/MZcy5gTon/Wprm37Rl4/NBxu19WszFeeeFmYSvPCzZvhudf8xPoX1XDHDw/hjWv8/CODavW2/vQ7JkLaVem4frKumY6cdJj7U+T4BCB7xwgncnC6JFTXuDFvnh+LW51oqXOixpWVfZFZ4mYxLWf+WpF6CXTKkEhRjIY1HBlI4khvBMOjCaSjKcAwC3cGy91Ylf2+HOe1F8rKfYmjA3Kx7E0A06BQDLqyK2KswXGO6c5+eBV2f+K2ewXCt3Oi8J9U0wodUrKmH8Kg6zpGBsfbX9jR8/rrV7RvA5CaLf9ZAf3pHXHc+/zQ6tHBqXM1RfXOZGISRB6Bavee9mWND+5KIn20Xtttd46hOhzDDl2WvvrPsdP0mHrV/pRxla4aDfmQVGWW4yLLAC8LqAq40NbsxfwOH5a2uFDjE+EUrTTZgzMzdrzts3WPPYFmMoTiBvrG0jjYE0VXbxTRiTgM1QBAMwkroJOVy5wVcWGbYliQtgyQsxPFfjlQcQEzeLtNxzVM90aPcoSODXFAumVJy4NTh4cuSYTMc03dJGXjfTMGI614Q4ND52594tBt77h3+tk/v27mG29nBDRjDF/pMr3DAxNXpBPJxaYxU5ARQHYIY401rnu2Xbtxz9FsuTLGcP19h9H9y38i/NYz22umYhf0p433aWnjVFU1kd3+LbFcFNmHRYeE6hoXOuf5sLizCouanAi4OHCwZFc6R4umnSMTjkAzGMajBrqHEth7JIr+vgjioYQlONujc6ICEIv7irGMiS4jwBDOutMzI+MTUQQEAUTgwfMchIyJm+csK4rJrDrphglT08FUDdD1jH27jFzNylTCMAH9mB0UOSrSf/hGdDG2Z+lH/u++obSyNhlNB1m5OgKgpgktmVw8NTB0xdJ1K/cyxuIzYWs2Dk0OHxxYHxoPn5tOKO6ymxHZ/3k+pfHinU6f++9/O8oG1v20C99Yz7sffd2Gk0aGku9SkvpViYQeLDjpUADg7F/LWiE4RNQ3eLCw048V831or5fhkzkQMJiMzfl8j70rOQIYjGB82sCBvgT2HprGQN80UtE0YJo2f+hyXJCVAXC2HQwQBHCyDJfEQXaI4L0uON0yfDKBR+YgOCUwSQIni5AEAZJAAEKQ1hiUpIpoQsd41EA8kgSNRsF0PV9OuZACWV2icGitC+5PEP3PcAyrFtTdrySU12lp/Wwta5vOtSP/WU2m3NGJiXOHDh54AGeufKx8p1s0I6B/cSAq7tk/dFYknFhi6IbtYkcU3UVNGET+iO52/ImadOgtc+TO393chWeHdOzT5aqfvpB4Z2hauToUMZYzw3TPbEe2AEJEAXX1Hixd6MeKBVXoqJfhlbmcNWGuW0zFQGYAphIUB/oS2HVwGj09EaSmE3lzGV/maFl2i9ouNmQ5MM9BkARIPjeCPhG+Kiecfg+qvTx8bgGCS4bsEOESCRwCIPCWbdswgZRiYjKqIx6OY2pKQWQyhlQ0hbhiQktlNmSKl57indAyW/iyS+ScVS4uMsc+Otb0Xy1V2NfV0/PW/tCv2Gi0GcAiMFYWOKauIx6OLOnee/is72z2Pw2g4lm9GQH96dsO1bHByRVqUvXkt3XLJCQkBaf8OJpqnt92/WlzatAFt/fi+jWE2zluLO3vCl/KaeZ1WlpvZVmDe0WZEwDHwV/jwqLF1Vi3qAqdjQ74HBwIYzBnE47LZZshjlinqo4MpfDCvjCOHAkhEkoBZmYyc0UrRS6TIg7MGCCKcHpk+PxOVNX60FTtgNvvQsArwufkwYk8RIGAt2+Tg4GBIJpmCIfTGBqNIzwSxeR0GulIAlpKA9VNgBr5sah000FJwEsUMKOAk5te1eoIPzjn3jr21DORVPYOKLdDFDZA0VoKQowVMQw1mfIMdQ2u+O+baR2AoUp5VgR09U8OY/pw9yk0kV4Fwyijrds+i8IwXPIdSKvpuTRE/NFhbGp38hfdHTtrckL5jBZX1xo6bcjdY13MkW02NcktY9GiIE5aGsDiVjeq3Tw4MFA6O0euBHUCgIKgb0rHtn3T2Ld/ChOjUVDNyJo2yosRWcrdC86B9zgRrPWgodGLhnoPav0y3B5r5eA45A/BZ+V6lpeLIwkTI2MJDA5FMTU0jUg4CT2pANTMT5hsfco2qljcKAJyZuLxPE9Nwm1r9vLb5zJeLxddtmkl8B+/VsE574SqXwpFXVRWuSWAaRgwk6lVCE+fQq5/Yoh9/6yyeZYF9DRj6PhpV4tIcJkOOo/a169seTTzj8ClIPL3wilvw5fPnb0V39gFwSlx334yco5DUb+qxdQNpmba5CeUbr9RBgg8GpqrcPKqGpy0wIv6KgEilznyNIfOmwnMKR3Y25fAM9sn0N8dgpJUM+LFzCJP7jtBhCfoRnOrH22tPtRWO+H3inCIPARigZeC5brMXrbBCMJRHT39UQz0hDA9HkUqngbV9LyIM9u9jHYZuaSOhYopIQSSyPebgnDnb4frR+bQdS8v/eEa4G03bwPP3wtCWsCYq/yIMQBsHjhyGWPY+jRjQ6eXEW3LApoDxHXO1Jm7qXL2lKYLuWUte086YbkjRIEqR2rtquaDj3zsrUnMRl98HuAIl56Ink1U8yuKom2gOi10VAFKbLSyz4nly2qxaWUAnfWWMgUwmGzWEmfclyAEGI9TPLM3gp0vjGBqLA6atSOXsx8XaOIEnCSiqtaHtnlBzGvzoaFahtvBg8/0F4M12crVgTKC6YSB7v4Yeg9PYGpkGmoibXnjWcjLl1uu/nYQF9yBkv2uvHJIJD4p+hwPLWj2Pt0vRNnx2fuehW79QPK0z/zx4L79g6loJOmqeCOXqgp+qGcvqqZnEuBvsA4SFVBZQJ//q73iQNfoskRcaWVZdpllL7aB5njOdPkc+1e1VT30yM33A+9fU7HO393cjZu3xPkDIe1cUPo1ppnrmFnkepr1tciAmXAcauo92LS+EesW+VDj4TKr/9zkZDbDFxoFjoyoeHrbGA4dmoIST+c5YsE7pWUJTgdqm/xo76xGR4sHQZ8Ep0Tyt54xq9eKVZzsHI2nKbr7Yzh8cBKh4RDURBrMNDMgttuQZzC/FTuQFIse2ddtmOdlIUW8jn8YLsd316+oGdt6buuc+vFlp0/fiSWt/ENdA6F3crH0aaZJ+dK+txqTjidau/d1LfvglzQRcwL0n8KIpMLz06p5ipJM8xbAyk8ZTuQSAb/zHw6nMIj3lz9Odf49Q1jqAYkpSnvQQd4s6sbbdYOuBC1TNstzJV7i0Ta/BueeUocVrU44RJITpWcjNssXMYXi+UNxPL1tDJODIeTs67PE3+MlAcHGAJYsrcP8di+q3ILle5zRA7MyPKtg5NENYHhCwZ69YxjuGoMSVywgZ8suB+L8WKIUyPY6ltlxZGCEI1TgiR4IOCILauWHepn8jVFX4MjoVHru2vPLTd+9DOzXjw+6/e5/hCYiq2GYVWUHDgRqMsUzj3GKaTjn44s79+DGNQUpSkElCGR416F5Wjy+wjrdUV7RIARU8jn3RWTHA7f2ld8UfMNDY2A8yGRcads9pn7hyLj6RlOnfgBcnp0VjhAB4PTJWLWyDmeurUVbjZiRQ+e2PT3TlwzARNzE49snsf35YSQjiuWwU9y+IhmeF3h4arzoXNyAFQurUO2TIAoo2Ogrx5Fz2TEgmjRwsDuKg7uGEB2PWP7RxVv4FdtQBsjlZOTMvxwBiMCrgsANC07pUEtQ2syL3EPnLXaObjarhkcPRthtn3hlXeXx1yNRk+PEB+BxvhWqtrHiwRFGYcQiKxL79szDurP3FndAAaDbpxn6/zIQTBGyEariB6M223Nh53OSoAK4OzqV6NU5uWQ0/nvbMAZkH9m/b6w9EUp/fnQs9ZZo0vAVWtXs2joDxwGBeh82ntyITcu8CLp4AC8dyIClVw6EDTywZRIHdgxCS6mlLxVt3nAcgexzY97CGixZUovWWhmyYIlfBb74FYAMWJtxwxNp7Nw5gsGuCZjJVOYZK+3Xcl53xZmWe57TCYgpy5xRG3CEBIm/XXDJd0fT5laPR0y5PaL+oVP97PY7kgxffGWBGQASoQSTY/FeAeRuKvBrqW44S7uAAaCgWtpP4duIaPgZPMpCODc/AAWAlv0At39/PY3F1oFSZ04xyXZ+VhlkhHndcuiklfVHPB7Z3BolsNvr7uvuh9oUJM/eN94+Pp763NRk+m2plO5lxawvW1vKwIs82jv8OHtjE1bOc8MpzAzkkraW/cIigzJ0j6m49+lx9B4Yg6lphS+xUluu4JDQ0B7EypWN6Gh2WYooA1hmLaJF1ocSZskARaPY3xvH7u2DiA5Pgpp23+cKokW5hhQDmdiXBYDnCDiBm+Yc4q7189yHqv3SXxv9wvN7Q0j63U7TGA5DUQi2DSrY+6GX76T9SyHJKWJjS5OZSipHDuzqCyUiiWYUmNZsk9ekTsSi63BkTz2aTg/Z8ykA9NSTw4LocizTY5GllrZv69wctgkYIUaME546NJZ6+INv7TTvWtZWULlLOt3ch/853BGaUD4TDaXfkUrpXosrFe2bZwaKl0UsWBjExac1YlGzAzyOkivPkFg1gf19STz09DAGukPItasgXIFtd4/j4Am40bGsEWuX1aDWJ4IjzHLXJTZuXLi4FHQTBRBJmNh3YBL7dgwiFY4VDkiOQdjHiuXtywVmQruJsNAEBwCCyCsNAXnC75dvTQjiT07p8A7XBzgaqOLZT9+0oCCMwRUvCmrHh7QfvQXL79phPnDfjkdEt2M/F082Wv7udjBn+sIwAAdbCodjGR4+fBiZ0CZAEaDNZ8bcNBJdyVStrdh+ae99InBpxuGWkYSRnDevyPvpS9vx5UdD9UeG1Y+PjKvvjCayYLZlZjP4C04Ji5bW4ZJT67CgQSqMGICiKszpS4tIZtdvx5EYHntqAGNDETDTtgtZRowSJBHBlgBWrWrE4nk+OCVLIabFYC7TlGwPUQDDIQ07d4yif/8QtGQatkIKiVqDRDgCwSWB8RxMRQfTzVk2cgBB4CDIQl+gyvHwkhbXHectcjz1611K7DtXLQUQBSF+XPuSIHb8qbmtBqctrFWHveKuJ0ORM6mp5WXO4o7WtTaSiK4kO/c/RIGc22BO8H6IMZg6a+B4bhNT1Qx+7aOY6WDKGOeUB0Wn3OOq9prvdtnOyX5zN0CI+JcdyfP3DClvnIhmwZxBECsEs+R2YPnqJlx2ZiMWNkgVFPUyYtQMGmJ27qV0YNvBKB58tA+jA9NgBi3/Xoa9yj4XFq5qxtlndmLlQj9cIskrfFwhmBmQd5bL9nHGsjkwnsbmZwfQtasPWjJVWll7/RkDJwvwNPvhaasF75ABI3My3M6Viw4wcAKfDFRJzyya5/2Wc37tp7f2R+41TRbr+s/11rlI4j9uIDyW9IU1rehOGmp/XL/N5XMnLNORrf3Zi6YIAFUFOH4T1c2G/wvl+zcH6EUA38wSnTSVXmN1HinqzMxnjjCTsvshCCP1Hzk7l5Prp4cAQkRQdvahMe29E1GjgbJiIOcHxuVzYN3JTXj9aXXoqBbKH50rbvEsQjWDBSzFAF44HMMTTw1gajRq25q258NyTj3euiqs3jAPp21oRnutDJ4wUFI0n5FvSvEeOyEWBvtGUnju2QGMHhwC07TSytmADALIATeCS5vhmd8MXaXQQgmwrAkxd6tU/j1CALdbjDn8jlu8fud1nz3b/zuq6rHot8/HFy9ddRyh9/LRVWcsYGs7gpO1Pseu0hhqyOqFAAAunVzTzqudHcH8dRg5QN+4I+7zBj1ncpriyc2Kgh8rM5dHZvPaA5NLm92KPmZ1/lX39CLFBIFn9EyY5hdg0nPAqFCyJmcGyu1zYMMpzbhkYy3a/FzBRklF5juDeTb7QwigmcDOIzE89uQAJoYihZ78OZnUio1BeA41zQGs3zAP61fUIuARclvUJVISRVldjhCLqfYMJbDl2T6MHh6ZAczWB17i4W2vRu3aTnjbGpEYjyM5MAGml3kvQwJH0OiXkstaXbfMX1j9TUrZCz1hI9V33eoTEu7r5SLNoGxwMjmqcfyjDreDFnS6fWAYg2CoHl+178yf3j3sy77PAcCtjOHOe/Y6uvumFhkmdeSAWBK2iUHkycCSRveec9c26oNLBNy6owfToiQsFrRzRNX4b6jGmTl3xjLLu+xx4uT1TThvXTXqPMSaOyiTvBitZR7ZKQvm3d1xPPbUgCVmFNgICycoEQQ0dtTi1E3zsGJhFZyi5TtdYPAokpLKkUmB/uEEtj3Xh7HuMTDD5mZrl9VJBsxuGYElTWhYMx+O2mpEhkJI9I7Auk+blLaZMRACBH1S7ykd7j9esszzbVU1evq+ega+9Brhynb63AWrsWhhndZe79kh8txAbjDKjIFhmI7+7qFFD//jCcd/R60EHAD4AW55g7OFRaPNpqIV+hHYQcARmA5H35GR1E5FMw3cYWC+nxeWqfHTkVC+aCS0M1F85XE2H8rAOWSsXNuEc9bVoMbDFeg9dlF7JtGi3KMsl9zfm8AjTw5iqG8aLHuaJFt/mv9LJAkti5uwaVMbFszzQRSLzqzaJKWykymnThAMTCjY9vwQxnsmwHSj1HJhmxUuvxvVy9pQvWQeBLcHidEw4l3DYCmltHHZehNiQBSedXuk/7posfebz/ZMdx++ft0JgtvxId0wja7RxC5NkvosF8XifrE+mqoKmog3t7U2tHi8FpY5APj649PigEpWUElaCUoLgVzILhRR4B5Q3a7oT89fhhvYbrzjvnjgoSPpt42F1NONckd68lGUsGJ1Iy44uRr1Hr7iHkHJ65gZ5wQWsLpGFTyyeQSDPSGbNSO7RuWPJhFZQvuKVmw6tQVtjS7LJGez2rEZCivg1oxgfFrH9u0jGO3KcGaQfAY57zcrgI23xY/6kzoR6GwGJ8qIT8UQPjwEI5JAjjPbCwJACGEBn9gluMQv9/bxf4+rZv+Dn3rtX3N3y0cvRsLhjBKefwCM5cMsFN/VwhioIK0cT2gr/vCbIyKQAfRzdzxH+nYeccTDMVd5n4LM/7JkxFPaC4rApcnr/oC9XMCranh314T6hmjSyHvNFcvegoCly+pw8YZqtAQsK/NcOPIsOqCVhhAMRww8tm0SvV2Tlp3ZnnHWyYIxEElE67IWnHpyI5prJHvLZqyLvTnZ5Wc6oWPXzhEMHxi0zvSh6IBsdlUAgaclgNo1nXA01oETRGhpDZHeMWjj4VJrRhbMYGitkZSzF3ruvHpd1VMI6OZ/PpEAIS/7bdavCDIJl1ZTynaIolZR7uMI0pFp19ju3Y4Dtz1AAID7PmNobqiSZWbWsnSlmCMWB/FUuaZqW6uTZ161in3qI6eIfDJ1lR5Pf8JUzQYAhbZdICemLF5Ug4tOrUN7tQSuTLJimkXqyBdFgFjKwHM7J3Fw9wioqhe5UuZTE0FE65ImbFrfgIaAkMc7BUq1wFz1C7h2VhJLaxT7D0yie88ATEXNR2UqepEQAm97NWpWd0KqCoIxHoZhIjI2jdTARD7kQZnB8vuk1KJG52/Xtjp/+e4VLlWukoEfnPkyweeVR2+/+lwsWNzEqut8XGUwEDA1DZ5jte62RvkixsCZJoPm8jWIweorK7NK63s1mrxPC8W6Lw44cPcwOh7uUd4yFdGac2JKGXtrS3sA521qQGeDI3fw42hl5HJpCABFA54/GMPzW4egJ1I2MNstM5YC2Ly4EZtOaUJDUCq0WlRobrGNOZu3QYGuwST27RyEZi8z+2JWVucIPPOqUbuqE7K3KrNYUCjxFBI9I6CJVJkGZyaCyKcFr/M3vFv+1oaNdb3Pj2pM/ebcjra9Vuj1S+vYSXWuiRqJ7Cp9mh1fixNx/uorTcnTQA0K4Zu/GUF07xGJptM1JS9l/zAAkgBdEsPTBlM2Pzno9mjKZ/uj2pm6URT5xgYkT20VNqxvwsIWV/lzpYUlzUis6INBgb0DaTzx7Cji4URh2ba6EJ5Hy4J6nLqhGQ1BOWtsqFxOThcrLDur602EFOzbPoBUKFo0gbIdbUUl8LQEUbN8HiSvF9mEpmEiOjgJbTxUXKr1hzKIIsdkF38HI+SHD4wEBs54YYp98bK1xwgmrx66olpin+maGh4JK5sh8qfByF8PUuwCoI2N1uiRiLT58x5wb2gF8VJFYslEafBFm3zncktmS0e1ccaZC/m7jyhnHhhOn6Vrhsuecc4Gxxhkl4QNa2px8gIPHDx50WAukXEz1RsJa3hq8yBCg5O2cu0vWq6odW3V2HBKCxqrHZWjDmTyzFobi8262X/jKRMv7BrDRP+4lTh31XNhxu46H2qWt0Gu8iEbSZoyIBVLItU/DqYVDY5NQPf65P7Vbe67P77RO7ggEP+XBHOWaHuT4WoMJmWXbOb2E8oBSUkQN2dI5y6uIRx8Ve6TzlhzpcMpBSuuwwQw09pBMZF6opZ3dHp09cu6QucxBlKyPckYOEHAwiV12LAyiConKbtxMpucXA7IWUqoFE/vmkLfkYm8RSP3Yl6e8NT5sXpdKxrrnAXnSgvKsFW90v4EA6BT4FBPFP37hzLn/UpqCjDA4XchuKgVsj8AgMuZA03dRHxwCkY0bjMnFgrvkkNImTx/U0hw3LtpnlPt+sxr2zw3ExFCcPUbT0pI6fSTVFEPAiiDTasPJacjuOCMM640vAG3cNeWQUGPRDo0g8m5tbXgnYz8bNCQRvnkU73qpeEpbYlpmjZnZVZQkYY2Pzatq0dzUCqoxIsRLYrJpMDeviT27ByFoeqFb9omlejzYOlJbehs80Eoct8rOAzNygO5WLQdD2s4tGsQRiJpKw+28KMMvEuCZ2Ez5KY6MJ7PRDy1cJuOJpEenkTB0mnLnxc4VPsdO9oa3U8eNMTYROLERDV6JdGFJ7XRG4ZDo8yg4RJdxcZENN2U9x3s7zgwHBWEqV27rU7WNFIiOGZf4jhIQR9pX9DyxsMT6jtMnfrKmioY4Kt24bSTarGs1VFg452NZgNylkYjOp7eNor4VLygUXZ5RJAlLFrWgJULquAqnFOlHLlM7By7JY3ACpN78OAEpkdCRbuPyDFoTuBQ1VGLqnn1IKLNN4UBJjURH5mCOR0v2yYChmqfmF5YJ9573hLnoS2vX4N3HCtUvIppEyHgr/gBWCJJaCSaP0BsJwIwTSNa7xGA4yHI8Sg0kxUeRSpi7QJH0NEabBuMk0A4qtbR4qNZmX8Fp4RlKxtw0pIAZB5HB+Y5JExqDM/tDmGkKytqlIKL8AKaFzRg9apG+DxiJopSvlmEFMZmKXcZRaHOQTA4GkfP/uHCgwF2Gz8BnHVV8M1rgiA7rYM+2W6hDFpKRXpkCswsx50ZBJGH3ydtaal1PSDyKI/6f1FasqQR4cEJTMRiMCsd82cURElCEgi4d7773Paaak9zsWE/n9i64lckfHs6YaygBnPkltvsDwUI4dDa5sepq4Lwu7gCH41KlJVh5wJmCmDfQAo7d4xCT2ulL2Uy8jX4sWx1E2qDMkDZjDJy2UgFRdnG0yYO7h2FEooWgjj3AoXkkeFb2AQxWFXknMjAwJCYjIJGE6UNz8x4j0tI1FdJ91+90nXo85esOdaYeFXTOa3ueIuMIxyYWdlrjcFfG2h+3fve1s5NO6pOc1b714OWORmX6XjDZOia0BGO6yi82Qk59uoLOnHy2jrMq5VmDTNQoPDNJR0BJmImtm4bQWwigrJgZgyi24lFSxswr9FlRVMqY4KzF5trQvl5DAaC3sE4xnonQYv9qTP9QEQenrYaeBpqQAifi6uX2QuFoZlQRkKWIlngIAXLTMcT1HjF3Z210qNpg80e2+RfjFZ56Ni+A8MP6gZNl79WgQCUETlQvT7EeU7jHj4wKY5GVaHsHd0ZrkcBKCkTpmGXWfOJBZnHwiU1WLPQB5Gbw4bFHDZX7I91Cuw4FEFfl+1cXlGmhOfR1FGLhQuCcIhc7nzvTJaLykC2uHcibaLvyDjUWApFrDeXXgp64GqrB5FkyyGqoH0EajQJLRSxzHwFjMACtSwLMV4W7mPV3n1XnPrKPO93IumSR3bSFOO1fKTUQoUw+3EyFBee294lcvG+EWuXLUs5sxe1bedyhS6RQOaZlaa63odTVtUg6ORK3I8rAaeYKuGcEIKBKR27d41BTWS90krFI0+ND4uX1qPWL+W1uTJ5U8wM5Nw/hGBoLIGJgalMyAGUaJe8g4e3tQZyoKq8Zx6lSIdjoIl0YeHZDRhCKOW456koPcAMc9bo9P+K1Pq7LwFeL4EkZb4p8u/NrHpmIg51oBccwiFAyRzpzzktoFDA5DhYoEbOrzfLYRxOGStW1GFhoyMnapSAYwaqxKyz36V1hhf2hzE+FMlwwGKTBYXolNG5uAHzWrxWcPNK5ZTXZUtMdIRYtu7ew5NQosnCBLZlxhnwwNdcC44XimaI9dw0DCihmHUKheb7LDsYnMjpnMxvq2ry7//DVStfdnC8GmkZAOL3ALJkY2S201RZmVRTgVgYHFIJwNBtiLdRbv3lMn55hRAgHIf61gDWLwtAFop8fI5SrMh9b2e+hKBvUsOh/eNWLOSSBJlwYS3VWLy0Fm6ZKz5+NyOQy1YKVrlj40lMDkyBZn2ckS8TjEKQBXiaayB4PUX3W7BcmWpKgxGOFj7PnosDIIlkvNYv7zZU49/cuQL9HECgygmnQ7DpHtQG5kzfmgagpMBB16xwraQICVl0Mpa/9teuzTFAcolYs7IWjQEBtABBlSs4E5DtO9iEAGkD2HcojPBYFIUOUPnZKbmd6FjUgPqAjFxMOZSVSsqXXZgdWKbcocEokpFEyQQCrMpJfg8cjdVghIO94XalMB1JgKZskUztfcwR6JQcppRt3fHR1ScaN69YOgPAEr+E6qwduJhySroJmBo40Iz/cBnLhbX+MljsORudnuWkkub2aqzs9EIod+FLmXJnEgVKnhHrNMiRQ5MZ7lyaA+E41DQFMX+eDwLJixqzysd2M0dRswkhSCQ0TA6FYapaYcIMcRIPZ1MQQpUHYHkQU1bo500jCTAja90oLMghcmiocaTntfpiLx8cXhu0qEog1TJHZjSNMQCMwtLi7Ny4GDhZdll03k32OrF6eS1qM6dPKtFcRIti6ROZk9sHuqOZU9u0dMIxBofHiY6FtfB7xIKDNihKWrYi2dWr9GuMTaYRm4xlAinaMsyQ4HXA1VoNQriCVcGezjApjGTKcgsszgAAo2xSZubT/7E++G9Az0J+mVMkDpYhvxLWMoPJzSonFBhyM7IzIWhuC2BVpxs8Vzn/Shy52Dmu+C8IwWRER9+RSWiJdPZetUKFSuBQ0xJExzy/tcVeqTcqrFIVfPqhagwTgyGk40VibfZGDo7A5fdCcnlAKSudMJkvNEWHltJsNnl7vGcGjeOiwzp34Jp1847LTa6vZtq6Z2j3kf7QQzPaYAGAMQioJC6UcOtsoAoK0Sli5bIaBNz8jPkXZzeTNaMA4AzoHohhbCRmWTZyJwPyx5wktxMdi+sRcPMlcnLuQxnTXSXKqgpTcQOT4/HMRkhR0HFmhdR1NwVBhEJ/DTCAZepGQEAVFTStFi0b1l+OI/B5RNrUVmUC0y99xF/DRAgBVl2fBBAueVg8oFwBh84mKlKAsi/aRJLa1iCWtrsgcKX5szJllhMrykgAVp0IEEqY6O6ZRiqaPdWRVcby1pVAcw06W30FfhklYM6KFTNMpkKxh0NiOmHdeGW/889WYdHnBO/3gbFCEYwV3x6raJY5tIwsRBijbmYOnFovDBESfDnx8Konxhhaazy8JHBi/ktU1O65XMT8ctt4uX8zB+8YhSBLWLk4gBqvUJikpCKFpld7scX1KniXEIxNpDA6GMmHBbC/QK0YdPM6gnA7+cpgZZXFigILXLZYWHE9otNp6Mm0zUTEcj+EEDhqfBA9ztxzxlghmAEwSiwObxhlNHMGkzJlNJR+wcFj73HAxKue3nLhssXLOmpPKz/YNgRRAiF38xSA0viw2c80c2sqQ7DOg8UdVZAEMvMGRpnvy322E0eAtMbQO5TAdCiBHKtlhchz1/rQ2FxlHeuyZchmyd8OYLtEwmCJG+mUgcmpFFQl42dd5CrKiTzEKh9AMkGhUDpbGQBGKDTdLHQ1tcsnPAcqi+wn71g316sU/6WJE/h6l1OcXyxGFoxiBnhCSYJyMyCzbBKOR2tHNRr8IsqkKvv6rCCzEyGYTmgY7J+2rjOzXeeWzYXneDS1BFFXJVZWKstWDjOnZwRqUoUyFQHsp8dzdWMQXCKctZ5C5yubaJNNRxmgawZowc6m7R2OA/E45tYn/yaMJw2W0GjRKAIFg5TZwRbAcYVHqLIv5RDKrI0Xalq3UXX64JRLb7GdiQPPdeAYA0bGFYyOxDPXD3MoZqtilRutHTUQMux5JmXPPskqmsozGVACTMUMxGKqtSJl7t+2v8U5ZRCno0S9AFjuElnCAJgMpm6i+IhVtiyOI3C4JPx7e3BudDBiIKTkrmDLfGuPips1GHAQIIiWrGfaN1ho4TvUBEwTTS1VaK1z5Jd6HBsgA5mdQZ1hdDSGVDievxHKhlhCCIItQTTWyLn8KxpoZiu/SIZmDIjHVKRTms2XxabI8RyctR4QZMSNzHNmMydaonTmQLDdXGczN4IBPCFwSfy/AT0HegrA4bACRTEK40mgiAlzHMDzEOB0A8kEoOu2yPb5dwAGmCaIJKCz3Ycqj1AiJ78UIGeJEILpuIaBoTjM7FnBIsQSWULbvCAcslBWMiqeXHauXGABKUprNZuBppJgqmLz3bCl4QC52gvCW+5PLBPd3B4WgWXvJyx3b6Ad34xWPn3xbyqgDwGIRlJgWb3GLj3YiecByQ0OVUFAklBy4tuOBNOEr8qB1mYvJIErMYLYP7/YYTIZMDWtWH4bJi3NjFE4qjyorvWWbuaw8uWzojTlwAzActYyGdSkat29VibWHAMB4+WcUSjrmsFYJkwBITZGnJlOBcG6M5XInKLRzH/rg3Oh/QBYNJ7xCLVb4uzEAEEGvAFwnrZWiG53wbO8TSufQV2DD43VkrXHgdKfF0O5dwmgGQwjEwqiEaUwx1wdOFTXuBGsknIvFwRIKsq3oACKIntzKSVUhkiSWhs59pwyE52TRRDeClNKaAbIhGSCotvdGVnezdYexdXmXEUpg2b8G9Bzod63fhGIJxiKY27biQGc2wOpbR64c1bW6w1VDqPshkqGOJ6grcUDr0uAdW/1Swdx4ZJPoKomwuOxjHWj6PYAAJwowN8YzFyLPIeJZJ+TlZLk8EeQVgwkk1qGq2YOONjsng6vDFEWLE6d5cYFDiksVyxAwPEcCpmCrVyTwkiq+DfNTg9euI5zEVOCWSGsQ6Z/a6q9xiknL9K5ajWyOR0KbSu9HLqQeJ4DIeSlc+MKz8IJEyMT6QpxKxgkp4jmRjcIR0rs6yWiBa0M5IpngTXdCryY21DJVpqBMAbBK4G4hLJAtmzPJGOXtgKUS6JgBbcpPmoOAIbJ2HSc/ujO5170QP+r0M44aVi6tOlCUeCcxWKgTZxjenhqWzVLbBZu+c0/+zWTDRfcM51/C9klcjSsIKVROEXuqEHNZnnGGEMspiA0kSh9mlEA5JoAqnxyQQQku/EARZ/LllXpGYGl+Op6Xv4tVicF3tKki46RM3vmmX84AoiyCMLz+dXGVgGBQG4JSEtBMB9A99EO8r8SPTaQ9EYULKQAX14BAgCCyER4+P5f/blfUN1Vlrd/KgHY422wfGIYBpJjkxYH87hmQEaeZkthU/qhZ7ecY4lCzz6b6aux0QenUyjlxtmkM5U1E8gBUBBQSq24GZTl3b/tfUFJ5rZNlgfyDDZLIomAKALZK0ntvhwEAi+Li1+YwkL8G9Az0pEDw2CJpHXqvhIRDkx2Q+V4cFWrVsHd2QlOklhZDQsMMA2wSLj0UpsyNJtsW/A88yGlMQyGDJiagfy9wzauJkuoDjogCYWeSLMpejMdzi1QahmsWM1GxjRUHKKUAYxyeUXQnnlRIdkVh4kiIImllSCAwYCRuCk80JXmGfu3O3QluuWhZ1GrJyQumRBBKwGagUgSkzoWwrFiHbiLT1tgrF1Q0ytxUEsPoOZ/kikdkRQtdm8oynrmZ+XMaIQRaIqJ8EQi41Bf/CKD4HVDrvKAy14GyGbhunMFMvITghpmxmRnu/CIMsuemBNDSP57ViFvxsCodfUFcUhFcRQshZOZJmhKdfuTiZZDYwkB/6aylFCp+7ST2s+r9btWVAQeA0SBV5cu6+g94/xTDI6LTSf3PrHtdjWthgutCzYIcgShiIKBsSR0k5UN3MLKl1UeyDYzCQOgqxr06UgmdllRYsYQ8IgIuEUQRmZfAWYAck7PQyHo7ecZ84C1gZbAdqbSzm1tnDkD5OxkE2UBktsJwmV3PDMrDwAwCgfPGvxu4cK/bp/8t/9oGWKM4TuP9Qub+xPV04rpLg0yk+WIgJ5OhXqeePx2IRZOCvcNqyxBZI243IzFbXdS298jBGY0BmV8EsxsBHjLfFexMpW+LPPAZEAoSZFIGdnCsi2y/hIObo8Mt4Or6JAxE4iL61MuLSGZc8D2GWjfZaUs7x9t61nG8gpfcb4cIeB8HkuZNIqipAJIaJTbN6k6E7siEv5NZUnvHuKjE1FJSaklp6ZyxBiY7ELCINoTB/sZ9+4PLUJg2WLNWV83VRbMAKydDw2RcAJpjc7dymHb2Kj0kkmBqThFPF10DRuQUdB48FU+EKH8lfZzES1QlG05IjxvbZ9mZn1uMyQH5HwjGDLqRlHsvOLyuSo3iCCUPgCBaZjgFbWzjmon3XTHlhcx3K9tumUoQdYsqm1urnacBj1z0Di3rNvEYUIQ7OygraduYK/77sXgeJ5ASEXHzPDU7bncynFTAhwZiCEUVWcFUcE/rHyazLha0YViKehpNZ+AIudUz/Ec3F4XeI4ryGsmIB0NkHNpeR4QhcovEQvQeXGlcidkH8luJziXA4XRfvKJVIO19Ub0kxrc/L+5dBH9btcoto2makMqVpcMvJ0YsLDRs++yDc3xv/IE3A8IwVT/hKqbZJLIDlRUDAEowyNIR+IF4kYBgGbgyPaVvOB7xkCTSWuvvoz8KggE1V4OvM3LtRKQaVF95nwanQEgPJCNgFT2RevSZFZGIcx3UzZIo/WFIIvgq/15+TtXmPVHU3TJSCirHh5Q5n1268TLBI1XJy0/vEfyqamW6FQ04/FVflyIJGHH84f/efufH5sAMvGQ1l51FmtZtURx+32pgrssijismUyifzgOTc8uvTaahSPb/7dVB7rJkE5qloWhDI4EgYNb5ipfKYGSK6Ar7eCX1seOfIEDBKFCOH8Gphn5i+VRPNfLNZyB8BzkmgCILBamyUpUBuNjKWPZY4fiizesr33tXNh9DKg7lPa5XPJlPDWcFRMxCsnnT7k7lybI2o2UEGIB+mNvbNGb3NxeTtP2WAntGn5emzQ0E72HRqCWuw+wAteciRiAtA5EUkUZEFsKhxO8KJRcLlDOYjHbfk9ujhYVxwAQUQQvy/mEtpcYAD2mwEwZJY8raanZb8WAF5zXXdhX2R1Y00QirjZOTaXX//hHW71HP+yvTbrqq3/H1r0j0p7eqTqj+JY1OzGA6Poen9ez94yrT9aBDIeOAfTI4PQQ8XiH+WxQvJx/pC0D00ByeBzTUTV/GKMMOGYzreXSMkDVGeIq8lYFu6mBAXC5AKHwuNVsVgvY0hTXh7C8sSQ/IRicDgFut1h612GGtJiSCbReoZWsMAxYNp3gliEE/ZZDdfGOEABqUB8xzddNT0VWfvyXTx5zcLwaSRR4YV6tZ5WgKC2snJttRmHnJBm82z0cHe4fUuPWBgIHANcRgkuu2KB0dDQcFnhOKRESbGar0Ng0BvumQLM2VxwliIt+NJMhpdmiCxWgD+AkMWN9IHPmyHbxowBDqPzjkgiqXHyRvJvPkakqYFa4OYAVaxX5tnA8B6mx1tpkyVUqn4yaFEpaW64n1Es8EuffzP61vfBuuPVxdPWOSYOT8bUGpe0FDKBo0HmeVxo62g+vu+x85fYVFifKsfNPnVMTi03HnzRFOYFi/95s7xNAi8Uw1D2OtHr0/rwl9WIMhkGt4zVZMNsTUgpREMDxpADIFfOHDW5zsIBkv7REaALR7QCRpMKU2Q0RRgG9MPB5YRiwIhk5N4EI5Gof+Jpg4bKRJQKkU4Y8EVbOe6grsXITpH9pWVoSeNJa42qUqH6uklIqixuEwOSFRDI0/eRVb1uY8x/IvdCdgtnPHD3M6dxZEhzFPkKmie4Dg4hG5nYiLqe4lRoHwIjFoczsKRGwksAsskDAETKzzwbKKHq2f8uawe3pmNVBnMcD4nDY6mB702RQJ2KghpkDcknflH4EAPCyBEdrfSbGcVH5jIEaJmIJbfXgeOq8NV993PvnR7cfK3y86uiOp46QXd2TtVPR9Oqy16TYiEqunWNp9IwOIaet5wD9JjcBz5MxqhvPQMzehWYbodzYEsSHxjE0HMVMp4hmEg0KAWgDcZkr0wQOZS0cpfmgBMjluHEZRmrhmSPwemW4nAJKpgADmEmhheJgtEiOnkO5hCOQagLgA1UliqGVANDSujOR1K+SNfUcjhD5RSPiVUyfvel+VOua1CDzV6SiSU/llAyZw92bIUijX1uSB0gBS9dOmp9k3qo9kKSBUiDnyUilcGBHDzTdqFRcWY5aVs5mzHJfLYd6MCuawEy+IxUAOhew23e3CQC/T4KnypVR4FACPppOw0wkUQnIJV1lm9WCywG5tdHywCuz1lDGoCXVpfFI6pr/e2qy5fIfPjF3JLwW6FNboJiMCwT9q/vGYpdQw6i82WRS1DbXsZPPXpP42OfeUADCQhnlok4DSno/GA6A8BXWeAZqGBg+PISBsXTmmyLRYiaOXPKgiDMXOUdxRfcKzoUjl4CqQj0K86OQXBLkGr91aDhXp/wbZkqDOhEreD8TJK1C+/LA53gOcnMt+LrqiuOkawbfM5Y648CE8nbToDW/fPIA5Kf+NZTEa9fwuONQ2vXEgcnXT08n5lPKKsvPvADTZC94ZG5ry6LqtP1R4UvDABYuG4fHtx0cly6VofN+yrHhCQwe6Idpc86ptIM3M2XdMotk9gzQaSZey4uVkQvECvv7RflQCjgkAdXVbsiygAJlOFsl3YQZjQKGNudJmheVGUSXA46OZsDlLOqsjKWEUahJpUqLpj7SPxBd89vnJvlVP/4DLv/LvhcNlFcFvf2vaDCijjon3hWKpN6jpBVXxbSUwuFxsvr57YPVi5cOp5OFw1AI6DUEqAqEJbDnONkRyQd7KUWroaSxb/cAQpGsEbmQKg54MREC8IXXOthlFoMymGUAyCqVUSSCFDwqboptHlFY1fAGPRA97sIrOLL5UQp1MgItnsrF4CisDMvVO/uvXSMmhECuC0BsqstHhcr2b762ZDycrt0/lr72hZ7o4qF1q7izhw7hj4/uPBbQecVR8MuPAeDJkcHYpeHR0Gf06elmRmllrYkATJCnRYF/4L/Oaxu+YV5h0lK2bugssGpFn1Tl21sSeMaetUkxebAXvd2hEkedOQE5K2NznOViWUFmMbIRtWx52/d0Ch4UAb6EMuJLTkQuAT6FO+CFK1iFwjOWeeCZsRTMcBiE2Q4ClACZoZJGLLgckDtaQPy+issaNajAUuqVDl37al08sjS9cgl3765xfOnWzXPp2VcNOT77KNZ+5WwQzmi/bfv0lX2D4WZDTc/g5ACA42A6PNv7aPXmdQ2OkmDxpYD+3FI0kGS3R+a3OlxOs9zSmM1bjSWwb+thJBWzMscsVy+bwkg4DjzPF4DC/oKumzApmzn/Mkphued2zlluUlAKBDwCAg1V4GSbpccuQmgmlKEpUEOzsWG7/lhmechuT2Z+5JoqOOa3Ag65END21UDTRS2cuJzFkv+9f8/QkjefWs9NqKVBMl+19IWn0PTJc7DlY/e0E03/nJZSrjCTUQdYVscrXh4ZQCkkl9v0OKStjc50Nynjd1NW8P7DF87WFy3v2O/0ugcLwmsWxLgCqK5j7EAventDmZMZFaiMJcL6h0DgOciSkDdUF/giM+iqBsM0K3PkcuJFsT5XJjhOSf0y2h3Pc6hprYPD58kDOVcvS+zQIzHokWhhcTbRwiqT5U60FEskvMBDbm2E0Npk7YJWONKlpDRxcDh2Rc9w4qt/fnJi+c/fvR7n/ujZYwWpE0cfvRv4wR/Q/993dWrh+OdJIvVOpBKe/MaVDcRFMqLs8Q22rVi8/8bvXK6Xy7osoBmgb40LT8aI9DgRJQPU9iT30RqE2HgIB7YdQVoxKzmqVQYSsaxYXkfRSe98vAUwVSk9azgbR7ansa/+5dKUTAqGmloXfPVBEM52oaZtkpgxBUr/BKih27gyK7zPkFnsOB9P3kqTdVUR3Q64OlvB1VTbxJvCCjEAkbgmHeiLXXZoIPHFc258eMUj123Em296CrPdp/5KpRt/8U9cz0aBN1/YYU7HP6NPJ95uphQPlBhg6pVfZAwQJS1O+Ud3TxhPUmDugF5NCASCIWribkZIX3FYWTvgDFVF1wuH0dszBVJkX5tLn8sC4HOgvMzJAKTSViDJmThyufYDs3PkIksIAIAyuD0yatrqIDjl0gzBwHQD+vAkjHCkTGk2IDMLyDlmbasIIQRijR/y4nkZebqoorY+jCY0qXcodkX3YPTLNdffv/pvX70bn/7xQ7N37iuMlv7nvVjeIHueFgMbuEjis4gn38VU3Qs9BWgJ5KxoZQ9YEHiqPLG21prNIBh6a4ULhPhKhRtP/hrOM94bF7TUSUw3lrIZQjEZigre7ULHkhaI/NyjKxFCQCnDUO8Uhromy+ygMPA8h+ZFTfD6nQVHCss2p5xYU+b5bMqjwBGYhMPkYAhq1HaTgJ3tGwZ4hwixNmAdDshcqsSKKkIqVAEAwHHgPU5QjgeNxAFVK2pZPrWmmXwqrc+Hbrafcc4C/dT53qktzW9Jprf8aY69feLo9/94HO7Vb0RUdvt2HAm/bXQ8+bnodPp8phteUBNITQNaChXZFGPgJQmNHW0Hzr500593ffnsgUplVTZeA/j6+06eaOts2etwORKVT7IwGIqCvh1H0N01mblZdXay3mTgeQLZ4wDErFOQrQwAhm4imqIwaCkDK2pz5U0OuzI6kwiUTU4Zamo8CLY3Wt5+rKhEQkB1E9rIJMxIFOCyviblWL4tX2L7yQ6UKMI1rwnSgnYQpxN5GbJUZjLSuqxFk5f1jMS/+/utUx8gTrlm+fV3ov1Lj86pz4833fSXp/HGr/8T//HGJt7nEhaPdo9fu7Mn9rnRydSpVDc8oAzQ0oCWLDRllSHR5U4IPv+Da1e1vTBTuhnRd/2GZn3+ioVPeIL+g7xQ7nhSvtPDwxPYvfkAInEN3AwKYvFYE46A83osjb/MGSvTZIgmDZiUlYa4mKt8XGRZma1yjAGyxKF1cRMcQX/55YAx6JEE0gOjoJpaWGZx0iyIy80kxsA7ZDgXtEFa0GY5R5VrGLFGS9dMDE4k2/b1RD/Ehie+KgrcOQ2LGsWWT9yF0365Y7YWHhdibAg/+ctj+M3jfWiqcXpWfWLP2Y/unf6f6GT8/0XC6U5FNTNinwmosYxbbsXMwAkiXMHqgzWLlzz0idWBGb3iZgtywhqXLt3mP9D3aCIUWZqMxtxlR4wQmGkFPTsO4/CqDpyysQPF6SqJAIRwcLmdEGUReoyViB3MMKBFY2BmHSDyBcyyIkCLQDMnEagI8IQx1DX5UDO/CUOhaVBdLymAqjrUwXGIdUFIjY2l7S261GimQRM8DjiXdAAg0I70gaUzO7old71YkzyVUJtN3bzmiKKtwtjuP9Y2eO/d/Lm/DC797D8RrHZh83+eNZdWH1P61d+eRFqnuOLL2/Cb93SKu4ZSZ96/bfT8icnUBWpaX6urBmcdHsk0RE9luPMMHUQIJLcn6alverR26Zrno7P05owcmhACJZ6I189rvUP2uA9xfDmRO8tRKeKjE9j97AGMTqULuHQlMDNY+yrVXg5ep/1UN8svQYYOfToCQzPAGCkQGcrlmYushJnFilz6CtybAXDKPFqWtELOeskVW2EAmJEEtJ5hsGTCEj2QCX5u58iVirc3hjLwLiecizsgLe4EcTkrv5yxAaqKJiUj6Y3qdOJLk71TP6i/8uSreYFrf9tbVpG3fOt+3PD7x3G86Ot/ehK/2BpGY5XkCXrFDVf9oucbj+4MfXdoOP6RZFRZp6Z1jtotRqaW4c76jPlyPA/R7T0UaOu4Q0vE4n5CZkw/axiqP1/ix3/uSO0a7Rl8NBmJLVSTCW9mNGy9CyuAoa5heNchHFjSgurzl0MSONAys8/OvQgB/F4ebp8DYRSvyxaw4zEV0RSFq5JDYVFV5sqRZ0tLGENTsw9DC1osLm0UdT4BmEGhDk+CrwlAXuC0To7PQb7JcW5GkbWKAAy8S4Zz8TxA5KEd6gGLJ0pElIKaU8qbaa1J0YzLtbR+ipZSd3/pyw/dftGKqh6HyD2z4MN/V+QqF65ZW4VPvfW0ufTMnOl9P30cPYMRCBxBwC0IQRe/6Tv3D71hYCp9TjqhLkqmDbeuZYwJ2Z3+bBvUuMWdYbW/fCcx8LIz7mttf3Tp+St33XqmZ9Y6zSmu2v+ucab6dnfeo0dDFw93Kyv0ctHUGQDCIT01jd1P7UPT/CYsXlRTYoZjAOxu2wQMvCxBCAYAbghAsTWFIBFXkYwrYHXO0mvqjka0OBrAZ9LJEo+OlW2Y6htFamSs1C5NCMy0CqV7ELzPA6Gxvrwcbf+Vs36wQp+QDPEOCc4FbSBOB9QDXWBT08gHKyzPIEyTCqaptcR0o5GIwsmbdyjTmw86HpcEcotp0t6EYqTnfeS20KkLfOy0eoKPvfO8F2XI/vgPH8K+aZPsGYiRlKL7dJMFOYLXf/W2vuVGStmUSunzVMXwmMXRQu3z0Ehb3JlmD3aUHyRBFFHX2tS78qSl99xyhjt16xzqNydA3wXgnBUNWx5/XPiRCfJFAG1lKwvrWNL4wW7seaoB9fWnwu+TrUve7c7HRa/KMo/aOjf6BIDpNjk6Yy2jsSiU6Sio6QfPk5cdyLm0GctFXYMPrasXoCschZlKlc3cmIpC6emDy+sE5/GVMdhkgGzfQ5ph+eQlEc62BvAuB5QDPTCHRy17/AztAxhMw+Rh0LpRVa/jBKWNARf6q7XEA2q6j5rkNlUz4+NRekB8+y1di5u9OLmWI/WySQ8NJ807dsQZXKI1eQyK5Q0Szl8R4IfThNsxxdA/Hsd4RGnQdW4do8y3Y9/keaGEti6V0Oo11XBTg8qUsbzdttytTdQAlBigp8s3JLfFQeCu8sU7Fs+7f+Pyxi03zHHc5gToNxAC4KOKeO35f2f+6ksQGm+EYRY5FuQ3W6iSxsHn9qNhYQvWnzrfCkhU0UZmHVBtrhaxQ5Kga0ZhfgCga5iYVNChMbgdZE4bNvYsjpYVFVtNRIGgY1kzpvrGEN7fldv1K3jHpFD7JkBcbjiXLrBZK6yk2QP0LL/3MkP5zErCEcg1AXBrliBd5YHZMwCWSKLg9l+73mFruEkZTJU6QdARHo9h6yS3lHeIZ22LpdTnTPMQIB0xdJOkFMZFDOPwaER7EIRNwTBJ9vjZdMJwRFLGJYrOLTcNRphJ2f3PjzVJMr92OmXKYVV3MkolWvZ8XZlqgVlihprIP8gqiQXpCMDzBuev2X7G2av+/pWf71VwQSPmQnMO5crYj0F+NhWpeuGJ36m6eoo6HW5mZe1QFiWGR7H7wa1oaPShY0FdRVhZiiGBO+iFGAxCjydLN1goEBmbhpbW4JYdc6hsmb6cUxsrv+P3yeg4aSFio1PQw+GSskAImGZA6xqE6HZC7GgDeCGzQ2jdomW5+1WSRzIfcuObZxCizw1+2XxoNQEoh/tAxybyu6dzaCWlDJSagp4wfMMJgIEEwSsbemMJjPIEjFI1qdMPgnAaDJY7kTw6rXD/eHa8mhDiUClADYqYYXKIMb6g6EqTs8BsBEBTAGUaoEWn54vATAiB4AuM6w7vDxoagy+wv3diFl0wR3PbBYFl8UB9DVt45llb6tqanhAdklbu7F0+8hLF4N5ubHniEMIRFWSGGhEAVVUyauvceaWwYK4w6FNTiMUUzHi9n30/Yo7tynLN2SwihAOa2wNoXbPACkhTxjMQBDATaSgHe2BOjIFQSx9ghNhijpSrhFW6df+h9VPQObAuTZKb6uBetwLS8sXggn7L7bZcg4retdu0LVM/45luiqqii9GULsbShsc0WQt0oxOa3gFd74BhdDCTtifSujee0kRN0URmGCJjjGdZa1JxmfYxs59t4wAwE1Cj+ZPzJR2eXbYYBIes1bS1PtFw2nlbFEUzyVzRjBm2vsvSX2/AWz5yfWp5ZwAH+kJrlUisGozl7yiGbdAIAE1HYioCd7AK9a3VEMsMgKVLWiGcJkaiGO4JWQb3ovCplDKItbVobPKW3bg5Wl8dNof3ildNUeTg9HsQjWpITYZLLQ6ZhpspFWYqCd7vBOdyo6LykOXDWXmk3N5+EbY5hwihOmCFRZCsW4CZbuQPGhccPChqXPa5/ft8elL6Y1Pfi5tafoe+MOoVIYAkgXhcgJECohNlFMHC22EJ4Zivta3rqred85O2Gnn7ty5sOaqRPTpAAxh773fYCwcnerVYgnHp1Bm6okoFYLY3nBDoiRRC4RR8zQ2oqfOWXPqT/cA4DpNRisHuSdC07Wq37GShFLJTRkNnAySRK5PJ3Mimn82arpx4KjtECF43psdj0KPF8bTzYKEJFTSZAu93gXO58oOWW0FYXn4Eyi/bFVZlwhHwbgeEmgC4QFXu6guWDQg0E7iLb+Sq3Eul/7KZk+W+4DhAlkBqghDmtYJziaAjPUAyhvz1xoVAznaC0+9Poqb5fw/T6lsHgov16D++elTje9SAbrj6K7i2nTfrgt7wRERZHJ2cagc1heIJne99QAlHEU0DDR0N8Fc5SlZqBgaB46DrFIPdU0iF4nm/6OxgMwaTCKhur4fPJ+cWgqPUD+fEkQs+F6UnHOBxy4AgYXp0GmYqjQI02saKJhTQRBK8zwHO7QIYh1yUJXtMshk9mErUT1tdOAheF4TaanA1QRC32xJDMqGIc3f7ZcFtvwh0ph4oXi1m6pzs5yyIfV5w9bUQOtsgLpkPziHA2L8TbHjA1s4Kwct5Ua1dsvTR0y/Y+JMzVrdM9qYlhP9x4xxHOJPFUaUGMPW7G+C4+Do8uHs0ohtGr1+gZ6diyRpW6VKXzOZBamIKJuNQ31EPl1vK92umczkCGOAwOJRAeHCqzHJJYOo63PXVqGvwz1lJeDGiRbm+Lug0jsBZ5YbCBMTGw2CaZjWgTJ1oIg0aj4N3ieBcTjCOR8FsJOUrUFmFLvMix4F3OSBU+8HXVoMLVIG43SCyBHDZ4235la5Q5ChTICvzf06vyZZJAJ4HkWWQKi/4+hrw81ogLWiD2NkGqakOxFChvbAN9NB+q9yZ9CieR117a7fqqflM97S6J+GoYvveUzO3QbaPzVG/AeDwX7+HW3dMsmvOaZ+OGIJvaCS8gqVTroryGyFghoHQSAiG5EJtez0cEp/nVpl+5QUe09NpDHVNgOl6SQcQasIUnWiaXwdJnL3qM1kt7GM4VyDbSZJ4uANepE2C5GQETCuqr20m0UQaNBIHxxMQtwtEFMuWV7no8paR4m8JAThZBF/lhVgTAN9QA74mCN7vA/G4QZxOEEkEy965mK2v/XKk4h9iAReCYEV+cjrAVXnB1VaDb66H2NoEobMNUmcrxMZa8FUe8LIIlk5B27Edxu6dgKbNaKYEYyBVwcnlm9b95s2XrL59KKxoez+zGjfcMFfrc55e1A1MWa1zd4qlpEfGfgHZKQmSdJ2had4SpcPW23o8jh33b4FQVYUzzlkCj4PLpWUMcIhAY4sf7toqxHqTtpBJ2TQEiaExTE4m4Wn3V+obS/I5hhy5UkEBn4xl6xeAqRrGdh4CVbOyP0oURn0qBqYegZBIw7GoDbzbBwbr9tnK1WVlip2lohkbNgQeguCE4HaB1deAajqYqoGpKoy0CppMW/7Xug7ouhXijNIc88/awYkgWK69kmiJFA4ZgtMBOGUQhwxe4AsUQUYAM5mAtncX9N07ACU9M5gpg7faj8YVix6ddtX+9n8Wz0/h9QtAvnaU45Ghl3Sl2IZ9YMLXN46NfnDgd+mA5/Sxnr4zWTpVYWmxZEZtcgI773wCPreIkzctgGQ75UQA1NW7Ud8aRKx/wjL1FO116/EEhg6PoqmpCrJYqISXNTqUgUcl+XguVGB/ZQzBoBtLNywG1XSM7+2yopSWu5WXEBjxFMyDvUAyCXn+PJC6WhCOt4GU5QvIeqQR5J2YZq9Zkahg1YMA4GURcIhg8IBnDMy0KY+UZmzVLK+jEotxES5zTJ7LxGTjrCuyc3H/GMtsFhEQxsCiEWh79kDfsxNIxGfnzA4Xqhcs3nn2Gat+965Ll458eAfYS4lC8qJEjiwN/+oGDD7uxus++r7E0Ph0JDoVWoR0uh4EhWtv0QaAHo0hOjYNZ3UANY0B8DbThyAKCEd1jPROgipKqTsppTANimB7PbxeaVarxTHhxqg8WQgBnG4HXAEvUoqBVDhq3VdeSV40TJjRBMxYHACF4JIzhxtgAzPJTYrZ906KgGxpnLDL2DZzfm7yWGDlQXgeRBDAiQJ4SQSX/RFFEEkA4QUrDWdteJCMKFJgdSEEMHUYgyMwduyAsW/P7GC2ttQYArW7nPOWfGPBhk0PmImQ9oezXlrc95cEaABA/0NoueAD5vPPH+mtdtC4zONUNaV4srO3fFsY0tNRhEfDcNcEUNMYzI2/IHAwKMFwfzhv7bC9BzCYmg7B70dtUwBZ144Kw/zSuLFd95ph54UQwOlxwFNbBUUnSE3HLB0gu3bn3sv/T5MKzHAENJEERALOKVs3ceXdluYG5ILG5oFcXPVKr87cAWV70tYcAnAAi0ZgHO6GtmMXjN4jgJKaBcyWr0ZVXc24q7r6xskkf/uaJfXK/1zQcPSDVEQvHdAAjtz+fWDDO4x3XnFKOEWFtlg0tUJPJrlKJz2yYE+Fo5gen4anLojqhgA4joAQBkGWMDmexORgyDrxnQNFhuOYJgwK1Hc2wuksjVVRyYZ8NFSWo9tNp5kdsKylkhDA5XHAW+9H2hSQDEUs68dMErJmWNw6FAU0DZxTAhFF6xjbbGAumGSZg7mZ3/b2v8jmz9wn2W2XdBLGwCC0fV3QDx8BmxgCDGVWMIMxOGobjPa1a24//YKNv9nbHw7t/OL6Y1LHYwJoAMCOv+D6P92UfOKg2ROajgfNVGIRdI0vtH0WmYsYRTIcRWgkDDnoR7AhAI5YLpsxjWCoZ8ry7ShDVDMgVQdR2+grsTwdExm5Ekcu3UMrIKdTgq/eD5VzID0dA1XU0gLsgioFWFoDDUdhTIZANAWcwFsmt5LzmTbxokC0yAknMzTqqHoAdk5f/JypaRgDQ9D2HoF+eAB0dBSIjVtgno0oA9w+lWvuuM2zdNV33vjO5d33v2vZMZt3xw7QADb8x1fYLUOuSTrUewjJeB0MbSEo5Sv2KiFglCIRiiI0EoIcDCDYEITEEwgSj9HBCCKj05YCUmQSY6YJygkItDfA6RBeMlcuAXK5DS0yO+MEAIcsIFAfgOj1IhFLwUim8zZE++yzhYdgJgVNKjCmIjAnw0BaAS/zgChm4uCRPIiLfHGzsHupekKF5lhFUQNIxGEMDUHb3w398CDoVARITgOpqdnBnOlgIkoaPP47aU3T18PzT9m7pkqiT//i6M1zleiYAvrhm25A1YUfYkrfwBSik4d502ggjC1gYJXLyWjMqXAUE0MhwFOFQH0AXreIWJphvG8KhqLmzWG5DqIwFA2y34dgQ1VZw8JcqGASVHp/Bo6MCu9LIodAnQ+O+hqkVAYtEkfp5pNdDs58NiloWoUZikAfnYQRiYIwA4xw4ETBqkjWAgJWflWauy9P0UtFNxNQBqhpmFNT0Lv7oe3tgt47AhqKWbZlNQakQoCpzpQlsiKm7HSy6ubaLXXN9V+bhmeHt9ZPH31T4OgHbQY6poAGAPWf3wdWvZlhenzyda/baBiUrkvGU0HTMEmp5m9jhZRBCUcw2j8FTfKgsTkAt8+F4cEIYhNRZI8q2YfP1AxoJkOwtR5u19wvYy3hZCU7FCiRkStmNMNE4DgCn98Ff3MtDE5AKpq0zHoF0ScLN6CyfcRMCqpoMCMJK6hNKASWSIAqCkgmcppVxyLn6rmAueCVLHdnVgBK3QDT0jAnp6D3DMLs6YN6oA/m8CRYIg0YNH9aOx2a+cR2Nn8GiJLE5q9YMH7RlWf98TPv23TvHx/uUbTvnz7nMZsrHXNAAwD2/h1oO4fd9O23j8VNhzMSSS5NROJuapp5g55NI7c3Xo/EMN4zCtUkaF9QB4UJGO+bgqmU2W1iFEZaA+92o6YpaK3Ms3dvKRAL5FrMzpHnoHHlJFECOF0igs3VEGuqoSoG9JSSsYLYElXMiAEmBUukYUxMwxibgjE0BmNsClCTgKrATCrgdB0ke32zicKQEFn9JevjQU2AGSCmBppMwYzEQKNRsNAE9CP90Pb3WGAenoQZjgOa7YYFU7d8mtNhgOqVG56T9xkESWIti+ePn3zOhp9dftmyn61pCUS+/+YVLxpeM9FRL05HQzsZw5YRLfjP23dft/2JrR8c7etvNHSb+2A5426m70WvFysuWI/q1Wuw84nDCB3uB6NmWRBVzWvB6ktPQXNrleVxVqaPc75Odhm5eHkmJbUpzWiGBDOZygis3eXpUAp9e/oxvucw0pMhC9jFnnElGRflRjPps9cbSCJEtwze5wSTZDAIlg+HkAlVzPHWqqAbVnxiwwQ4E8TUYcbTMGMpMCVTD/tEKA6EYqgWmJUYCqLQF1mh7PXmRRF1nZ2jK88+7RfnXrn2ptM6pfAZR+HffLT0knYKZ6M1hOD/Qiy86tKTfxRRGRjwofHe/gY9ezdLJTs1AfR4DLvvfRqBkSQMb73lg5AuE46MWeET+vcNIFCzFC6HULA9bBPhCgegzN8XC+TiJOXsvowxcISgpsYF7+lLUNtei/5dPYj0DEKbjuQ5dpEfeEnZJJOGIA8+Q4WeUqBPRPOJOS4jknD5tJmIrpa8Yt/jLuclaVfCqXUGMB0G9DJxNCpsBAiShJrOjrG2Daf+YtFFG34kOTD9coIZeLlEDhvd8a0bcObHvqJ0LGnezekcryUTi+PRmJeaNC8zlmtjxqEpNTIGJRoDM/SMQmSXKzKWV02Hruhw1QZRVe0pZBgFW1qlfyuKFqzC5wrJKk+GLHDyBfE8QVXQjeq2ejhra0AkGYbOYGi65fKZfad4AlYqPAdyghI3UWqJLIWhfsukrUTUyMvLempuuzSMQZQktCyaP7rs9E2/WP26jT+iDNM3Lnx5wQwcB0ADwJM33YAN13xF2bSyaTch4JS0sjQejXsM3Zz5xayjUyoGKAmrc0lmCc3KEJn+1BUVmklQVR+Eyy0XHhECSmTkGU1wR8mRZ0yQLdhefmaiyRKHQK0X1W31cDXUgDhdYBQwDApmGBlzpe3lAstBUbvKFf5SQu4yZpnilAiQni6j/FXO2+F0onPFgrGTz934szMv2XDTWAzTvzj55QczcJwADQCbf34Dll32OeX1l7XvNVSYfd2jjkRCaQSlfAmXKOkrAjDT6mAjs/vGCQC4/IBTat19IsrwNwQhZY97FeuelYA8x+21max7lTZiiixtxY8hyzwCNR4EWuvga6yFFAyAd8gwCA9T0zMcNnsKJfNWkXEjV4GXukUKWIxDS1hcWY1bfV/JKb+oeCKIek1T3XMXvvGsP172tg0/e2GnMv2Lc4/fzQPHZ9pk6LZpihf2j+CcNc2+az/4i+U9fZOfhK6+AamEXPkMUpFiAgCcCDi8gMMHiI6CJVaurcXy89dh/rJm8PxRcNKj2GhjsyUqAm4l03CJ4mj5bELVKVLRFMLjMUQGxxEeDkEPhaEk09bxNEOvIPvO5v8xCzGWDwKjJmxceQ5GfmbtAMLhubOjs/EHP/z5B/Y9vm04tmZFM95df/xgdlwBDQAPxRmGhsJ4z44Pgrv7ypWSof0XNzX6ZmVqUijsspkQwixZWnRYoHZ4AV7KiSDBxfOw8sKTUd9UlfNtqJj1bONULtlMuxg28XUu4nk5IpnfFICmmohH0lCiMYSmkkhPhpGciiAWSYDFE2BK2uLg5QKFz0X2zjr6m5rFjZWYtRLOFpjPlhkhBHJ1vWHWtfzNkL3fpIs/tednb96LppYgrggcX4gdd0Dn6Mqbsfi2awj33b0rpeGeT/Xv2HlRZGq6obBWZYBcTJwAyG5A9gKiEyCWH0TzKSux8szl8PnkQqf4OY7TzKJFEZAz1Zxpk25OjDM3e/KpLbdNgDICTacwVA2ppIZYJAWaiENNKojEdGvTJhYDlBSYroOa1nV4JmW5KGKEEPAcA88RCCIP5nBBoQRGaByYHADS0cyp7DkSYwA4VNVVjzWvPekBrXnB98zPrdrTe9UfGG5799zzOYZ04gANwPnN/Uh9bil39Z8Pt9zztwfPnQ5Fr0c6uYoVn3KYUbnJwIgTAckFOH2A4IBY5cfCM9dg4fr5kB1CXkmco2gxqzJfJJfPZJuelZitjVlFmNhmSaYMknnOQKwgmIzBoAyKZl2uBFUFDB3MoNBNBlUHVAPQTQoCAp4jEHnA4eAA08TkwDhGdu5Fuu8IkJi2xc+bA1EGOJyAN7ArUBP8wQVXXfjoX65ePOS88QBVvrTsaGBwTOlltUPPRun/Wob/upDRWDQxEOaDtzaftChhjAx8bKrr8FpT13wzv203bTFryVR0y14qu6HrCnqe2Q3RKaNzVRtEgZsRdDPL2Dbea9ONclhjFV6bjYo5st0Lr2STAjALdocAcIDIcZAEWLfTEmcmKclsDLKcqTonn6s6pgdGMLZjL8L79kEdGwPUOXjJFdSFwVftR3DB4p1qoOnroxOpe+KRuPLxZ4ETCWZ7F55wIlf8Cq//0Psd+/56S3tf//DVUFPXsni0mhkmKaxl0YZD2cwIwIuA6IazYwGWvO4sdC5qhMCT0k2XSlkxO/u1fU1QMQDSbNUqTFTUjmKOnH1EZs67jMpc1BVWm1XFwETvKMZ37cHUnn1QpyasE0GYZZeyOD+eZ8QbnFq4etFjZ5624ndDwbWP3v/b/1PY7e+dcx4vJx03s92sdPBuBM94n7H+q6eHdm5P7d24rMnU0kpzKp70gNHMSnIUWjw1AEOBMT2F6HgIRJQguV0QHdIsO4PM5mdSaB6baZ9jbkBm5UWXMhaxbBVeitGCUiAZSWDoQC8OP/AkBh9/CpH9e6FHwtZG1ZyCztiqKohqbUd7z/LTTv61Utv+rc++c/XuuzYPacPfO/sl1PLY0isH0ACG7vkBBp+SIN5ydfK0Ee35/ePp52pqahqMdKrZUFURbC4rSpESSQ0Y01MIH+rG5NA41IQCVZDhcEgg2QOfRa/ZxYssMy12jT4qmhHI+fJz+yakMjeuWIfMl5QyGJqB8aEQRp7fjcMPP43hx59AoqcbRmw6f+fj0QCZ45jTH0zWLlv+sFpV+/82rl94+2MfXT21Yc8Y/dUbW19Mj7xs9IoROewk/UlBx6Fn0DttcFesnbfw/oeevUhIhD+SGB3r0BVFKn+UfxZrCKzll5MdEOvqEZzXjvpVyxFsCsJZ5YMsCZkTzvmlfzarxYzW2dz2dZEZrYIimQ29UCH4VPkyMwokowyqakCJxhAeDmFi9x5M9/ZDnxgH1RSwo1H2CsolEF1Ozd3U1Gv4Gn561rkbHnhw7/CRVi+jw52nQ7lm7i67x4tOqFJYibR3OnCQMbg/fA9tbKk/bC5u6716+bqR2+7Y+obJ/sFztFikDqYplhh7Z9nqZYzBTKdg9vVidLAf488/D7m+EdUL5yPQ3oxAWxO8VS7wkgRB5HNWBWJ7vyC/soXYnxRZLsqZUYhNKa00e0jWMg0wsMz2uAlT1RCPphDtH8Z0/zBCR7qgjY+CplOWZ+KLIWbZlSGIpugLjNV0djx22Rs23PmHw1N31bc06MKObtZ148U4moigx5NembUqpiMMHz00yD02JNYOPHr/KYnxsfdxsdDJHKMthjabg7mNygE+s0nDeXxw19bAUVeLwIJO1DTVQPL54KryQJJ46zi/wIErUN5YmVvu5i7nszIKH7FvbYOAUQZqUlBqQFNNpCJxaLEYQiMhRLu6kZ6YQGpiCjSZcemcy65e+doAIBAEEe6AL87X1L9gOPzfazjtgi1ntpuTN69voWh65cPllV/DDK39mwk9mcDerTvBj3cHAzR1lYtn1432j3SYStpDTQMV/Yrn4qST8wHmQCQRvMMFvq4RNa2N8ATc4IJ18DfWwusRQQQRRJQhyBIk0Xa43e5jneWqxVYLZDmy3cqRj56k6Qy6qoKpKoihI5rQEB2dBAtPIj6dRGhgBObkCEwlbZ0qpzavxRcD5EyfcbwA3ulKNLQ197Uv67j3jHNW/2PRwsYX/vfBlCm4PNj7ruPnj/FS6FUD6By9907wsRBu//575Zvv2nXqzu0HLo0M9J+jJ+NL1WTSnbupqlJIsjlRdhs548TOi4DHB5ffB6dTAnH7QGoa4KurRrVPBCdwgCBZAWNEGUR2QJAkCDwHUbD87AFAp4BuArpBYegqoCiApgK6BmLooKaJUFRHbHwKNDQOJGNIpVSkIzErFK1hFLqKZqp61EC29QsnipA83qTorTpQ1dbx2Mp1y+97x8UrntnX06fVN/hx/apje+bv5aZXH6Az9N3HR/CDTz+Ey/7xbtczv31mdWSg/8rE+Nh5yXBokZZKesy5nAQpoUqKJcs70wOWHwkvgAi8FfWJFwDJAchOwOECcbshOZyQBR6SCEiCJShr2d073YSupMCSSSsoi5q2rmswrRtzmWECZsZ9FLCdG5zN6jyXJlp9wosiRLc34a6uPuxpaHqkal7n7evfs2HXQ1f8OXXNt87Fl+d4p8krjV61gAaArzKGF+6dQtfTe3DmO89x7bt/28bxQwfP1WKRiyeGJ9oT0UQQhs7NbfNgditJSfoCzDPYZeuKuzYlR76yJkK7b0g5sQkVMpxLVTN1IxwgStTj94Vrmur7xarg/XVLlj668sKTnnvy1idS8zatwPLXVePbr1CFby706q15Eb3+j6O4512fx1+137juv3XHukceeH5R/1DoDA9nnqXGYu16OkVyPsW507Q2R/gXq0sVkB3kxyRDWzVfhFiRXaE4DpLHy2Sfrz9OxSfa2uqeOvui9YfPedOK7e91fCh16R+/hvveVXds6nqC6TUDaAC4jTE89cAhHNgzgn1f+CwGr7mxdanLOG14z77l8ZS2UdCSazlTr1aTaevkM3cMml+Wm8/BGX7GPPHi32fMOsYliHB4XGCSM0Qdnh1ut+O5thWL9+1OODc33vyZweXf+AEWLmvEuovn4/2vYo5cTK+dltiIMYa234Yx+NijiPz+TfyaT9znGIqr8xeJ8VNNnV4y2TfQwgn8uqmRifxd03Zvt7mVUv5kzUvlykcL5gLHJgKIDtQ214FSbK9bOG9IEoR/DnDVz9b6Pd2HvrJBIe+5w2w79wL0v9v9irUlvxR6RW6svFSyD9SnP8ZMZXIiaTzSu/vu8RsOffLnOx+p8zsbEuA3TkXSPgjiqZyaXsNT3Wuapkw1FTl5s4QqgfgY0VzBbDMx8g4neJ5TTdkVpw73TmaYz7aftDrmIeZzwVWrxn72tnmD9Yu+r7rOasMnd28AfnclBn4HkKuP+7AcF3rtTdFyxBjOD2k489A07nt4P57973Nw7UMR180/vEUEIfX1MrfAU+U9fayvf5GRTrUwnl+pRyMupqu2Q63Z/bwygTysQl5EvTDz++VWDUJAnG44qgIpztT3cFXBoeaOlsOJaPzpEUPsArjxD33mbfpPTkLqjB9ux+VndqCrw4udfhFbX4McuZhekxy6hAjBwwAehiWO/OVAHKPdvSlMhgCI0ae2fLbrw7/qezYcjjlrlq5oikbjy9Pd+70r15106aGB6LJ4Xx8HPc2JDmetYZgCMzSSP/JE83EY7FaLcmSfDwXWEJuPM+GYpcjxIKLERIE39LQyCY+fVnfOo4sanfu37xy4z7d0RbzGw+8bn4yPLDz37PQdVwaj4lnfp5QXMHKgG38PtOGpT6x7TYoVM9G/BqBtVDDAjAGfuhWf/lU3TUxNT1NDm/7wj18/9uMb9+1hE4PcurNW3j34aJ83PjxGnG6H1LDxrCsHDxyZZ4z2EqKrqKrxN0vB2vVTkaRAU0nLlmzoeRuyHbR2IGedoHgBEERAlMG5Paj2uw09PLktGo4NM28AYvsCtnhha1/vE4/dnuQ9mq9zAdu4oTq+fzA9EVi3id50TVB/0zv/QOPj43jXX+KgF6xD6xfPxB2E4I4T3dEniP7lAF1AGXDfbfvTWy2oAAAAmUlEQVTqgXuuo3p4UjU1Db9489r+TzOG777Hj2XLfIS6qw8NDY4L4AXA0HD6FZe2hOWaMyN7e0VteACIhIBk1Io5l92KZ0D+/JctuAufOTLm9gH+GghNrViwqlMPKqEn7/u/vwxBdIDz16B28VKjvqku+ZS4lN3wfuA/CIHndTdBGRvGr58JIvznd+PxP+frP/ilE92pJ5b+PxTHEEE1XKqDAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTA2LTMwVDE5OjU0OjM0KzAwOjAwArKJzgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wNi0zMFQxOTo1NDozNCswMDowMHPvMXIAAABGdEVYdHNvZnR3YXJlAEltYWdlTWFnaWNrIDYuNy44LTkgMjAxNC0wNS0xMiBRMTYgaHR0cDovL3d3dy5pbWFnZW1hZ2ljay5vcmfchu0AAAAAGHRFWHRUaHVtYjo6RG9jdW1lbnQ6OlBhZ2VzADGn/7svAAAAGHRFWHRUaHVtYjo6SW1hZ2U6OmhlaWdodAAxOTIPAHKFAAAAF3RFWHRUaHVtYjo6SW1hZ2U6OldpZHRoADE5MtOsIQgAAAAZdEVYdFRodW1iOjpNaW1ldHlwZQBpbWFnZS9wbmc/slZOAAAAF3RFWHRUaHVtYjo6TVRpbWUAMTU2MTkyNDQ3NMYSLmgAAAAPdEVYdFRodW1iOjpTaXplADBCQpSiPuwAAABWdEVYdFRodW1iOjpVUkkAZmlsZTovLy9tbnRsb2cvZmF2aWNvbnMvMjAxOS0wNi0zMC84N2I2MjY4MzIwN2RiZGU4M2I0NDcxZTBmODg5M2ExYS5pY28ucG5nR/8IJgAAAABJRU5ErkJggg==',
    }}
    style={{ width: 100, height: 100 }}
  />
</Layout.Group>
```

You can also use the `style` prop with custom design tokens to style the image.

```jsx live
<View>
  <Image
    accessibliityLabel="React Native"
    source={{
      uri: 'https://reactnative.dev/img/tiny_logo.png',
    }}
    style={{
      width: 100,
      height: 100,
      backgroundColor: '$interactive2',
      margin: '$md',
      borderWidth: 5,
      borderColor: '$conditional3',
      borderRadius: 12,
    }}
  />
</View>
```

## GIF and WebP support on Android

When building your own native code, GIF and WebP are not supported by default on Android.

You will need to add some optional modules in `android/app/build.gradle`, depending on the needs of your app.

```
dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:3.1.3'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:3.1.3'
  implementation 'com.facebook.fresco:webpsupport:3.1.3'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:3.1.3'
}
```

## Best Practices

- **Use Accessibility Label:** Provide meaningful accessibility labels for accessibility. This is especially important for images that convey important information.
- **Optimize Images:** Use appropriately sized images to reduce load times and improve performance. Compress images and use formats that balance quality and file size.
- **Minimize Re-Renders:** Avoid unnecessary re-renders of the Image component, especially for large or high-resolution images.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={Image}
  rows={[{ name: 'image-root', description: 'Image root element' }]}
/>
```

```jsx render
<Docs.PropsTable
  of={Image}
  inherits={[
    {
      name: 'React Native - Image',
      link: 'https://reactnative.dev/docs/image#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"Image">',
      description:
        'Object or array of objects defining the style of the Image component with design tokens.',
    },
    {
      name: 'capInsets',
      type: 'Insets',
      description:
        'When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will not be stretched.',
    },
    {
      name: 'height',
      type: 'Abyss.Size',
      description: 'Height of the image.',
    },
    {
      name: 'width',
      type: 'Abyss.Size',
      description: 'Width of the image.',
    },
    {
      name: 'tintColor',
      type: 'Abyss.Color',
      description:
        'Changes the color of all non-transparent pixels to the `tintColor`.',
    },
  ]}
/>
```

</Tab>

---
id: image-background
category: Core
title: ImageBackground
description: Display an image as the background of another component.
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { ImageBackground } from '@uhg-abyss/mobile';
```

## Usage

A common feature request from developers familiar with the web is a `background-image`. To handle this use case, you can use the
`ImageBackground` component, which has the same props as `Image`, and add whatever children to it you would like to layer on top of it.

The `ImageBackground` component is a specialized container that displays an image as the background of a view.
This component is an enhancement of React Native's core `ImageBackground`, tailored to integrate seamlessly with our design system.

## Example

```jsx live
<View style={{ height: 500 }}>
  <ImageBackground
    source="https://legacy.reactjs.org/logo-og.png"
    resizeMode="cover"
    style={{ flex: 1, justifyContent: 'center' }}
  >
    <Text
      style={{
        color: 'white',
        fontSize: 42,
        lineHeight: 84,
        fontWeight: 'bold',
        textAlign: 'center',
        backgroundColor: '#000000c0',
      }}
    >
      Inside
    </Text>
  </ImageBackground>
</View>
```

## Resize Mode

The `resizeMode` prop controls how the image is resized within the bounds set by the `style` prop. It can be one of the following values:

```jsx live
() => {
  const [mode, setMode] = useState('cover');
  const changeMode = (newMode) => {
    return () => setMode(newMode);
  };

  const modes = ['cover', 'contain', 'stretch', 'repeat', 'center'];

  return (
    <React.Fragment>
      <View style={{ height: 500 }}>
        <ImageBackground
          source={{ uri: 'https://abyss.uhc.com/img/logo.svg' }}
          resizeMode={mode}
          style={{
            padding: '$md',
            flex: 1,
          }}
          imageStyle={{
            marginBottom: '$md',
            backgroundColor: '$info2',
          }}
        >
          <Text
            style={{
              top: '20%',
              color: '$white',
              fontSize: 36,
              lineHeight: 72,
              fontWeight: 'bold',
              textAlign: 'center',
              marginBottom: '$md',
              backgroundColor: '#000000c0',
            }}
          >
            Abyss
          </Text>
        </ImageBackground>
      </View>
      <Layout.Group>
        {modes.map((m) => {
          return (
            <Button
              styles={{
                'abyss-button-root': [
                  { marginHorizontal: '$xs', marginTop: 2 },
                  mode === m && { backgroundColor: '$info1' },
                ],
                'abyss-button-label': { textTransform: 'capitalize' },
              }}
              rounded
              key={m}
              onPress={changeMode(m)}
              size="small"
            >
              {m}
            </Button>
          );
        })}
      </Layout.Group>
    </React.Fragment>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={ImageBackground}
  rows={[
    {
      name: 'image-background-root',
      description: 'ImageBackground root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={ImageBackground}
  inherits={[
    {
      name: 'React Native - ImageBackground',
      link: 'https://reactnative.dev/docs/imagebackground#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"ImageBackground">',
      description:
        'Object or array of objects defining the style of the ImageBackground component with design tokens.',
    },
    {
      name: 'capInsets',
      type: 'Insets',
      description:
        'When the image is resized, the corners of the size specified by `capInsets` will stay a fixed size, but the center content and borders of the image will not be stretched.',
    },
    {
      name: 'height',
      type: 'Abyss.Size',
      description: 'Height of the image.',
    },
    {
      name: 'width',
      type: 'Abyss.Size',
      description: 'Width of the image.',
    },
    {
      name: 'tintColor',
      type: 'Abyss.Color',
      description:
        'Changes the color of all non-transparent pixels to the `tintColor`.',
    },
    {
      name: 'imageStyle',
      type: 'Abyss.Style<"Image">',
      description:
        'Object or array of objects defining the style of the Image component within the ImageBackground component with design tokens.',
    },
  ]}
/>
```

</Tab>

---
id: keyboard-avoiding-view
category: Core
title: KeyboardAvoidingView
description: Automatically adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed.
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { KeyboardAvoidingView } from '@uhg-abyss/mobile';
```

## Usage

The `KeyboardAvoidingView` component is designed to automatically adjust the layout of your application
when the on-screen keyboard appears, ensuring that the content remains visible and accessible to the user.

This component extends the `KeyboardAvoidingView` core component present in React Native, while also supporting tokens
in the `style`, `contentContainerStyle`, and `keyboardVerticalOffset` props.

```jsx
() => {
  const [value, setValue] = useState('');
  return (
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior="padding"
      keyboardVerticalOffset={100}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.innerView}>
          <View>
            <Heading style={styles.heading} offset={4}>
              Press the Input
            </Heading>
          </View>
          <TextInput label="Username" value={value} onChangeText={setValue} />
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  heading: {
    marginBottom: '$sm',
  },
  innerView: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-between',
  },
  code: {
    backgroundColor: '$gray1',
    lineHeight: '$md',
    fontSize: '$sm',
    fontWeight: '$bold',
  },
});
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={View}
  rows={[
    {
      name: 'keyboard-avoiding-view-root',
      description: 'KeyboardAvoidingView root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={View}
  inherits={[
    {
      name: 'React Native - KeyboardAvoidingView',
      link: 'https://reactnative.dev/docs/keyboardavoidingview#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"KeyboardAvoidingView">',
      description:
        'Object or array of objects defining the style of the KeyboardAvoidingView component with design tokens.',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Style object for the content container within the KeyboardAvoidingView.',
    },
    {
      name: 'keyboardVerticalOffset',
      type: 'Abyss.Space',
      description: 'The distance between the keyboard and the view.',
    },
  ]}
/>
```

</Tab>

---
id: keyboard-aware-scroll-view
category: Core
title: KeyboardAwareScrollView
description: A ScrollView component that automatically handles keyboard appearance and scrolls to focused TextInput.
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { KeyboardAwareScrollView } from '@uhg-abyss/mobile';
```

## Usage

The `KeyboardAwareScrollView` component is a wrapper around [this package's](https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view) `KeyboardAwareScrollView` component that automatically adjusts its content when the keyboard appears. It's particularly useful for forms and other input-heavy screens where you want to ensure that the focused input remains visible when the keyboard is shown.

```jsx
() => {
  const [value1, setValue1] = useState('');
  const [value2, setValue2] = useState('');

  return (
    <KeyboardAwareScrollView
      keyboardAware={true}
      dismissKeyboardOnScroll={true}
    >
      <View>
        <Heading>Form Example</Heading>
        <TextInput
          label="First Field"
          value={value1}
          onChangeText={setValue1}
        />
        <TextInput
          label="Second Field"
          value={value2}
          onChangeText={setValue2}
        />
        <Button onPress={() => {}}>Submit</Button>
      </View>
    </KeyboardAwareScrollView>
  );
};
```

## Platform Differences

- On iOS, the component uses `react-native-keyboard-aware-scroll-view` which provides smooth keyboard handling.
- On Android, it falls back to the native `ScrollView` with basic keyboard handling.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={ScrollView}
  rows={[
    {
      name: 'keyboard-aware-scroll-view-root',
      description: 'Root element of view',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={ScrollView}
  inherits={[
    {
      name: 'React Native - ScrollView',
      link: 'https://reactnative.dev/docs/scrollview#props',
    },
  ]}
  rows={[
    {
      name: 'children',
      type: 'React.ReactNode',
      description: 'The content of the ScrollView',
    },
    {
      name: 'keyboardAware',
      type: 'boolean',
      default: 'false',
      description: 'Enables or disables keyboard awareness',
    },
    {
      name: 'dismissKeyboardOnScroll',
      type: 'boolean',
      default: 'false',
      description: 'Dismisses the keyboard when scrolling begins',
    },
  ]}
/>
```

</Tab>

---
id: pressable
category: Core
title: Pressable
description: A pressable component wrapper that can be used to provide touch feedback.
sourceIsTS: true
---

<Tab label="Overview">

## Usage

Pressable is a Core Component that can detect various stages of press interactions on any of its defined children.

```jsx
<Pressable onPress={onPressFunction}>
  <Text>I'm pressable!</Text>
</Pressable>
```

### How It Works

**On an element wrapped by Pressable:**

- [onPressIn](https://reactnative.dev/docs/pressable#onpressin) is called when a press is activated.
- [onPressOut](https://reactnative.dev/docs/pressable#onpressout) is called when the press gesture is deactivated.

**After onPressIn, the user will either:**

- Remove their finger, triggering [onPressOut](https://reactnative.dev/docs/pressable#onpressout) followed
  by [onPress](https://reactnative.dev/docs/pressable#onpress).
- Hold their finger longer than 500 milliseconds before removing it, [onLongPress](https://reactnative.dev/docs/pressable#onlongpress)
  is triggered. _([onPressOut](https://reactnative.dev/docs/pressable#onpressout) will still fire when they remove their finger)_.

<div
  style={{
    width: '90%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  }}
>
  <img
    src="https://reactnative.dev/docs/assets/d_pressable_pressing.svg"
    alt="Diagram of the onPress events in sequence."
  />
  <small>
    <i>Diagram from React Native Documentation</i>
  </small>
  <br />
</div>

```jsx render
<Web.Alert variant="warning">
  The touch area never extends past the parent view bounds and the Z-index of
  sibling views always takes precedence if a touch hits two overlapping views.
</Web.Alert>
```

### HitRect & HitSlop

Fingers are not the most precise instruments, and it is common for users to accidentally activate the wrong element or miss
the activation area. To help, `Pressable` has an optional `HitRect` you can use to define how far a touch can register away from
the wrapped element. Presses can start anywhere within a `HitRect`.

`PressRect` allows presses to move beyond the element and its `HitRect` while maintaining activation and being eligible for a
"press"—think of sliding your finger slowly away from a button you're pressing down on.

<div
  style={{
    width: '90%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  }}
>
  <img
    src="https://reactnative.dev/docs/assets/d_pressable_anatomy.svg"
    alt="Diagram of the onPress events in sequence."
  />
  <small>
    <i>Diagram from React Native Documentation</i>
  </small>
  <br />
</div>

_You can set `HitRect` with `hitSlop` and set `PressRect` with `pressRetentionOffset`_.

```jsx render
<Web.Alert variant="warning">
  <code>Pressable</code> uses React Native's <code>Pressability</code> API. For
  more information around the state machine flow of Pressability and how it
  works, check out the implementation for
  <Web.Link
    openNewWindow
    size="sm"
    href="https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Pressability/Pressability.js#L350"
  >
    Pressability
  </Web.Link>.
</Web.Alert>
```

### Styling

The `style` prop can be a function, an array of objects, or an object that defines the style of the `Pressable` component with design tokens.
When using a function, the function will receive the `pressed` state as an argument.

Additionally, the `children` prop can be a function that receives the `pressed` state as an argument or a React element.

```jsx live
<Pressable
  style={({ pressed }) => {
    return {
      width: 125,
      height: 125,
      borderWidth: pressed ? 10 : 4,
      borderRadius: '$xl',
      borderColor: pressed ? '$success1' : '$error3',
      backgroundColor: pressed ? '$success2' : '$error2',
      margin: '$md',
      padding: '$sm',
      alignItems: 'center',
      justifyContent: 'center',
    };
  }}
  onPress={() => console.log('onPress Called!')}
  onPressIn={() => console.log('onPressIn Called!')}
  onPressOut={() => console.log('onPressOut Called!')}
  onLongPress={() => console.log('onLongPress Called!')}
>
  {({ pressed }) => (
    <Text textAlign="center">{pressed ? 'Release Me' : 'Press Me'}</Text>
  )}
</Pressable>
```

### Best Practices

- **Press Feedback:** Always provide clear visual feedback (like color changes or animations) to indicate the element has been pressed.
- **Hit Slop:** Use the `hitSlop` prop to extend the touchable area if needed, especially for smaller elements.
- **Optimize Press Timing**: Use `onPressIn` and `onPressOut` wisely to handle animations or delays without affecting user experience.

## Accessibility Considerations

- **Pressable Texts:** Ensure that the label of the pressable is descriptive for screen readers.
- **Feedback for Press**: Make sure the visual feedback is discernible for all users, including those with visual impairments.
- **Keyboard Navigation:** Ensure that pressable components are focusable and navigable with a keyboard.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={Pressable}
  rows={[
    {
      name: 'pressable-root',
      description: 'Pressable root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Pressable}
  inherits={[
    {
      name: 'React Native - Pressable',
      link: 'https://reactnative.dev/docs/pressable#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Function | Abyss.Style<"Pressable">',
      description:
        'Object or array of objects defining the style of the Pressable component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Inset | Insets',
      description:
        'This defines how far a touch event can start away from the view.',
    },
    {
      name: 'pressRetentionOffset',
      type: 'Inset | Insets',
      description:
        'Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.',
    },
  ]}
/>
```

</Tab>
```

---
id: refresh-control
category: Core
title: RefreshControl
description: A standard control that can initiate the refreshing of a scroll view's contents
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { RefreshControl } from '@uhg-abyss/mobile';
```

## Usage

The `RefreshControl` component is used to implement pull-to-refresh functionality in scrollable views,
such as `ScrollView`, `FlatList`, or `SectionList`. This component is a customized version of React
Native's core RefreshControl, offering enhanced styling, animations, and better integration with our
design system.

```jsx render
<Web.Alert variant="warning">
  Note: <code>refreshing</code> is a controlled prop, which is why it needs to
  be set to <code>true</code> in the onRefresh function otherwise the refresh
  indicator will stop immediately.
</Web.Alert>
```

<br />

```jsx
() => {
  const [refreshing, setRefreshing] = useState(false);

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 4500);
  }, []);

  return (
    <ScrollView
      contentContainerStyle={{
        flex: 1,
        backgroundColor: '#D9E9FA',
        alignItems: 'center',
        justifyContent: 'center',
      }}
      refreshControl={
        <RefreshControl
          colors={['red', '$secondary3', '$secondary2', 'green']}
          progressBackgroundColor="$success2"
          tintColor="$interactive3"
          titleColor="$info1"
          title="Page is refreshing"
          progressViewOffset="$xs"
          refreshing={refreshing}
          onRefresh={onRefresh}
        />
      }
    >
      <Text>Pull down to see RefreshControl indicator</Text>
    </ScrollView>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={RefreshControl}
  rows={[
    {
      name: 'refresh-control-root',
      description: 'RefreshControl root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={RefreshControl}
  inherits={[
    {
      name: 'React Native - RefreshControl',
      link: 'https://reactnative.dev/docs/refreshcontrol#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"RefreshControl">',
      description:
        'Object or array of objects defining the style of the RefreshControl component',
    },
    {
      name: 'colors',
      type: 'Abyss.Color[]',
      description:
        'The colors (at least one) that will be used to draw the refresh indicator',
    },
    {
      name: 'progressBackgroundColor',
      type: 'Abyss.Color',
      description: 'The background color of the refresh indicator',
    },
    {
      name: 'tintColor',
      type: 'Abyss.Color',
      description: 'The tint color of the refresh indicator',
    },
    {
      name: 'titleColor',
      type: 'string',
      description: 'The color of the refresh indicator title',
    },
    {
      name: 'progressViewOffset',
      type: 'number',
      description:
        'The distance between the refresh indicator and the top of the view',
    },
  ]}
/>
```

</Tab>

---
id: safe-area-view
category: Core
title: SafeAreaView
description: Render content within the safe area boundaries of a device.
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { SafeAreaView } from '@uhg-abyss/mobile';
```

## Usage

The purpose of `SafeAreaView` is to render content within the safe area boundaries of a device.
It is currently only applicable to iOS devices with iOS version 11 or later.

`SafeAreaView` renders nested content and automatically applies padding to reflect the portion
of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor
views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation
of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone 13).

```jsx
<View style={{ flex: 1, justifyContent: 'space-between' }}>
  <SafeAreaView style={{ backgroundColor: '$primary1' }}>
    <View style={{ padding: '$md' }}>
      <Text textAlign="center" color="$white">
        This is a SafeAreaView that avoids the Status Bar
      </Text>
    </View>
  </SafeAreaView>
  <SafeAreaView style={{ backgroundColor: '$primary1' }}>
    <View style={{ padding: '$md' }}>
      <Text textAlign="center" color="$white">
        This is a SafeAreaView that avoids the Home Bar
      </Text>
    </View>
  </SafeAreaView>
</View>
```

```jsx render:phone-dark
const Container = styled('View', {
  justifyContent: 'space-between',
  width: '100%',
});

const PaddedView = styled('View', {
  paddingHorizontal: '$md',
  backgroundColor: '$primary1',
  width: '100%',
  variants: {
    placement: {
      top: {
        paddingTop: 40,
        paddingBottom: '$md',
      },
      bottom: {
        paddingBottom: 28,
        paddingTop: '$md',
      },
    },
  },
});

const Label = styled('Text', {
  color: '$white',
  fontSize: '$md',
  textAlign: 'center',
});

render(() => {
  return (
    <Container>
      <PaddedView placement="top">
        <Label>This is a SafeAreaView that avoids the Status Bar</Label>
      </PaddedView>
      <PaddedView placement="bottom">
        <Label>This is a SafeAreaView that avoids the Home Bar</Label>
      </PaddedView>
    </Container>
  );
});
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={SafeAreaView}
  rows={[
    {
      name: 'safe-area-view-root',
      description: 'SafeAreaView root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={SafeAreaView}
  inherits={[
    {
      name: 'React Native - SafeAreaView',
      link: 'https://reactnative.dev/docs/safeareaview#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"SafeAreView">',
      description:
        'Object or array of objects defining the style of the SafeAreaView component with design tokens.',
    },
  ]}
/>
```

```jsx render
<Web.Alert variant="warning">
  As padding is used to implement the behavior of the component, padding rules
  in styles applied to a <code>SafeAreaView</code> will be ignored and can cause
  different results depending on the platform. See{' '}
  <Web.Link
    openNewWindow
    size="sm"
    href="https://github.com/facebook/react-native/issues/22211"
  >
    #22211
  </Web.Link>{' '}
  for details.
</Web.Alert>
```

</Tab>

---
id: scroll-view
category: Core
title: ScrollView
description: A generic scrolling container that can host multiple components and views.
sourceIsTS: true
---

<Tab label="Overview">

## Usage

The `ScrollView` component is a scrollable container that can hold a variety of elements,
enabling vertical or horizontal scrolling. This customized version of React Native's [ScrollView](https://reactnative.dev/docs/scrollview)
component integrates Abyss design tokens and performance optimizations for a smooth and responsive experience.

```jsx live
<ScrollView style={{ backgroundColor: '$gray1', padding: '$md', height: 300 }}>
  <Heading>Scroll Me</Heading>
  <Text style={{ paddingTop: '$md', fontSize: '$xl' }}>
    Lorem ipsum odor amet, consectetuer adipiscing elit. Elit lacinia torquent
    et mauris habitasse netus efficitur aenean aptent. Finibus posuere maximus
    tortor, nisi bibendum ultricies. Tellus integer eu commodo sed pharetra
    mauris quam potenti mauris. Convallis nisl auctor risus mattis id. Himenaeos
    turpis egestas consequat tortor aliquam, dictumst integer volutpat eu. Quis
    leo ex parturient arcu sagittis. Et nostra platea vestibulum bibendum
    pharetra accumsan semper cursus.
    {'\n'}
    {'\n'}
    Dictum porttitor penatibus auctor nisl; sem porttitor curae quisque. Ipsum accumsan
    eu vestibulum ligula, vehicula integer. Nunc varius massa placerat conubia mus
    magna. Aliquet eleifend porttitor porta mattis consectetur habitasse at fringilla.
    Odio aptent aliquam sociosqu justo egestas adipiscing ac conubia. Bibendum ultrices
    commodo ante mus mollis netus.
    {'\n'}
    {'\n'}
    Bibendum taciti habitant ridiculus scelerisque aliquam varius lacus maximus.
    Efficitur facilisis parturient auctor accumsan nascetur ad phasellus lectus.
    Lacinia natoque conubia convallis habitant mauris eleifend. Turpis
    consectetur tempor egestas taciti; venenatis cursus? Cursus congue
    adipiscing purus neque vitae nibh? Risus accumsan ullamcorper velit eros
    tellus curae. Interdum nascetur morbi; pharetra id venenatis volutpat
    potenti. Convallis senectus praesent lectus nisi eget justo vitae. Venenatis
    ornare sociosqu euismod feugiat integer. Curae odio massa purus eu facilisis
    laoreet.
    {'\n'}
    {'\n'}
    Lectus curabitur scelerisque mus auctor nascetur iaculis ante risus. Tristique
    conubia nisl inceptos bibendum pellentesque. Eleifend imperdiet gravida pellentesque
    hendrerit eget dignissim magnis varius augue. Curabitur proin porttitor molestie
    gravida amet praesent et fringilla. Ante etiam at gravida efficitur cubilia rutrum
    torquent adipiscing. Parturient bibendum id convallis torquent venenatis. Lacinia
    primis leo nullam tincidunt consectetur quisque. Elementum tristique quis magnis
    ornare molestie venenatis. Sollicitudin netus class rutrum proin; curabitur facilisis
    convallis pretium sollicitudin. Feugiat volutpat eget arcu convallis ultricies
    id.
  </Text>
</ScrollView>
```

### ScrollView vs FlatList

`ScrollView` renders all its child components all at once, even if the component is not in view.
This can negatively affect the performance of the app by requiring more processing power and memory usage when rendering a large number of items.

This is where [FlatList](/mobile/core/flat-list) comes into play. `FlatList` renders items lazily, before they
appear on screen. It also removes items that scroll off-screen to save memory and processing time.

`FlatList` is also handy if you want to render separators between your items, multiple columns,
infinite scrolling, or any number of other features it supports out of the box.

### Best Practices

- **Minimize Overdraw:** Use a background color to avoid unnecessary redrawing of background elements.
- **Limit Scrollable Content:** Avoid putting too many elements inside a `ScrollView`. If the content grows large, consider using a `FlatList` or `SectionList` for better performance.
- **Optimize Images:** When scrolling with images, ensure they are properly sized and optimized to prevent memory issues.

## Considerations

- **Bounded Height:** The `ScrollView` must have a bounded height, since they contain children with unbound-heights.
  - To set the height of a `ScrollView`, either define a height directly (discouraged) or make sure the parent Components have bounded height.
- **Nested Responders:** `ScrollView` does not yet support preventing touch gestures on its children from becoming scroll gestures.
  - This doesn't mean that responders won't work inside of a `ScrollView`. It simply means `ScrollView` will prioritize its own responder if it detects a gesture that could be interpretedas a scroll.
    - _*For more information, check out React Native's [Gesture Responder System](https://reactnative.dev/docs/gesture-responder-system).*_

### Accessibility Considerations

- **Keyboard Focus:** Ensure that the content inside the `ScrollView` is reachable and visible when users navigate with a keyboard.
- **Readable Labels:** Label any scrollable area for screen readers, so users know they can scroll through the content.
- **Scroll Indicators:** Allow scroll indicators to be visible for accessibility users, so they are aware of the scrollable content.

### Performance Considerations

- **Rendering Limits:** Avoid placing too many child components inside a `ScrollView` as it can cause performance bottlenecks. Instead, use lists (`FlatList`,`SectionList`) for large datasets.
- **Lazy Loading:** Consider lazy loading for content-heavy views to avoid loading everything upfront.
- **Batch Updates:** Ensure updates to the scroll view content are batched to reduce rendering overhead.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={SafeAreaView}
  rows={[
    {
      name: 'scroll-view-root',
      description: 'ScrollView root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={SafeAreaView}
  inherits={[
    {
      name: 'React Native - ScrollView',
      link: 'https://reactnative.dev/docs/scrollview#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"ScrollView">',
      description:
        'Object or array of objects defining the style of the ScrollView component with design tokens',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the content container within the ScrollView component with design tokens. These styles will be applied to the scroll view content container which wraps all of the child views',
    },
    {
      name: 'contentInset',
      type: 'Insets',
      description:
        'The amount by which the scroll view content is inset from the edges of the scroll view',
    },
    {
      name: 'hitSlop',
      type: 'Insets',
      description:
        'This defines how far a touch event can start away from the ScrollView',
    },
    {
      name: 'endFillColor',
      type: 'Abyss.Color',
      description:
        'Sometimes a scrollview takes up more space than its content fills. When this is the case, this prop will fill the rest of the scrollview with a color to avoid setting a background and creating unnecessary overdraw. This is an advanced optimization that is not needed in the general case',
    },
  ]}
/>
```

</Tab>

---
id: section-list
category: Core
title: SectionList
description: A performant interface for rendering sectioned lists.
sourceIsTS: true
---

<Tab label="Overview">

## Usage

The `SectionList` component is a high-performance list component that efficiently renders sectioned lists. It is ideal for rendering lists with sections and supports the most handy features like:

- Full tokenization support.
- Fully cross-platform.
- Configurable viewability callbacks.
- List header support.
- List footer support.
- Item separator support.
- Section header support.
- Section separator support.
- Heterogeneous data and item rendering support.
- Pull to Refresh.
- Scroll loading.

_If you don't need section support and want a simpler interface, use a [FlatList](/mobile/core/flat-list)._

```jsx live
const data = [
  {
    title: 'Main Dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream', 'Brownies'],
  },
];

const Item = styled('Text', {
  backgroundColor: '$interactive3',
  padding: '$md',
  marginVertical: '$xs',
  fontSize: '$xl',
  color: '$primary1',
  borderWidth: 2.5,
  borderColor: '$primary1',
});

render(() => {
  return (
    <View style={{ height: 400 }}>
      <SectionList
        sections={data}
        keyExtractor={(item, index) => {
          return item + index;
        }}
        renderItem={({ item }) => {
          return <Item>{item}</Item>;
        }}
        renderSectionHeader={({ section: { title } }) => {
          return <Heading style={{ marginBottom: '$xs' }}>{title}</Heading>;
        }}
        contentContainerStyle={{ padding: '$md' }}
      />
    </View>
  );
});
```

### Best Practices

- **Use Memoization:** Use [React.memo()](https://react.dev/reference/react/memo) to avoid unnecessary re-renders of list items.
- **Section Headers:** Keep section headers concise to avoid taking up too much space.
- **Key Management:** Ensure that the `keyExtractor` for individual items and sections is unique to avoid rerender issues.

## Considerations

_`SectionList` is a convenience wrapper around [VirtualizedList](/mobile/core/virtualized-list), and thus inherits its props (as well as those of [ScrollView](/mobile/core/scroll-view)) that aren't explicitly listed here, along with the following caveats:_

- **Internal State:** Internal state is not preserved when content scrolls out of the render window. Ensure all your data is captured in the item data or external stores like Flux, Redux, or Relay.
- **Prop Updates:** This is a `PureComponent` meaning it will not re-render if props remain shallow-equal. Make sure that everything your `renderItem` function depends on is passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
- **Item Rendering:** In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application.
- **Key Management:** By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.

### Accessibility Considerations

- **Navigable Sections:** Ensure section headers and items are properly labeled for screen readers.
- **Focus Management:** When rendering additional sections, ensure the user focus remains consistent without jumping or losing context.

### Performance Considerations

- **Batch Updates:** Use batch updates to avoid triggering multiple re-renders when updating section data.
- **SectionHeader Optimization:** Memoize section headers to prevent unnecessary re-renders during list scrolls.
- **Windowing:** Use `initialNumToRender` and `maxToRenderPerBatch` props to control how many items are rendered initially and in each batch to avoid overloading the UI with too many items at once.
- **Recycling Cells:** Consider using `CellRenderComponent` to recycle rendered items and improve rendering performance for large lists.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={SectionList}
  rows={[
    {
      name: 'section-list-root',
      description: 'SectionList root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={SectionList}
  inherits={[
    {
      name: 'React Native - SectionList',
      link: 'https://reactnative.dev/docs/sectionlist#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"SectionList">',
      description:
        'Object or array of objects defining the style of the SectionList component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Insets',
      description:
        'This defines how far a touch event can start away from the SectionList',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the content container within the SectionList component with design tokens. These styles will be applied to the scroll view content container which wraps all of the child views',
    },
    {
      name: 'contentInset',
      type: 'Insets',
      description:
        'The amount by which the scroll view content is inset from the edges of the scroll view',
    },
    {
      name: 'endFillColor',
      type: 'Abyss.Color',
      description:
        'The color of the background of the SectionList when there are not enough items to fill the content',
    },
    {
      name: 'ListFooterComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListFooterComponent. Accepts an object or array of objects which defines the style of the ListFooterComponent within the FlatList component with design tokens',
    },
    {
      name: 'ListHeaderComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListHeaderComponent. Accepts an object or array of objects which defines the style of the ListHeaderComponent within the FlatList component with design tokens',
    },
  ]}
/>
```

</Tab>

---
id: status-bar
category: Core
title: StatusBar
description: Component to control the app's status bar.
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { StatusBar } from '@uhg-abyss/mobile';
```

## Usage

The `StatusBar` component controls the app's status bar. The status bar is the zone, typically at the top of
the screen, that displays the current time, Wi-Fi and cellular network information, battery level
and/or other status icons.

This component is a customized version of React Native's `StatusBar` core component, offering additional configuration
options and integration with our design system. It allows you to manage the status bar's `style`, `visibility`, and `backgroundColor`
to match the application's theme with our design tokens.

## Usage with Navigator

It is possible to have multiple StatusBar components mounted at the same time. The props will
be merged in the order the StatusBar components were mounted.

## Imperative API

For cases where using a component is not ideal, there is also an imperative API exposed as
static functions on the component. However, it is not recommended to use the static API and the
component for the same prop because any value set by the static API will get overridden by the one
set by the component in the next render.

## Performance Considerations

The StatusBar is a lightweight component, but to ensure optimal performance:

- **Minimize Dynamic Changes:** Limit frequent updates to the status bar's properties, as unnecessary changes
  can impact performance, especially on lower-end devices.
- **Use Animations Judiciously:** While animations can enhance the user experience, use them sparingly to
  avoid performance degradation.

## Accessibility Considerations

When configuring the StatusBar, ensure that the chosen colors and styles provide sufficient contrast
and readability. The status bar should be easily readable in various lighting conditions and should not
obscure critical content or UI elements.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={StatusBar}
  rows={[
    {
      name: 'status-bar-root',
      description: 'StatusBar root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={StatusBar}
  inherits={[
    {
      name: 'React Native - StatusBar',
      link: 'https://reactnative.dev/docs/statusbar#props',
    },
  ]}
  rows={[
    {
      name: 'backgroundColor',
      type: 'Abyss.Color',
      description: 'The background color of the status bar',
    },
  ]}
/>
```

</Tab>

---
id: touchable-highlight
category: Core
title: TouchableHighlight
description: A wrapper for making views respond properly to touches.
sourceIsTS: true
---

<Tab label="Overview">

```jsx render
<Web.Alert variant="warning">
  If you're looking for a more extensive and future-proof way to handle
  touch-based input, check out the
  <Web.Link size="sm" href="/mobile/core/pressable">
    Pressable
  </Web.Link> API.
</Web.Alert>
```

## Usage

`TouchableHighlight` is a wrapper for handling pressEvents of a `View`. While pressing down, the opacity of the wrapped view
is decreased, allowing the underlay color to show through.

```jsx
function MyComponent(props: MyComponentProps) {
  return (
    <View {...props} style={{ flex: 1, backgroundColor: '$primary2' }}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableHighlight
  activeOpacity="$core.opacity.lg"
  underlayColor="$gray2"
  onPress={() => alert('Pressed!')}
>
  <MyComponent />
</TouchableHighlight>;
```

```jsx live
render(() => {
  return (
    <TouchableHighlight
      pressRetentionOffset={{ top: '$xl', bottom: '$sm' }}
      style={{ padding: '$md', alignItems: 'center' }}
      underlayColor="$gray2"
      activeOpacity="$core.opacity.lg"
      onPress={() => {}}
    >
      <Text>Gray Touchable Highlight</Text>
    </TouchableHighlight>
  );
});
```

## Considerations

- **Visual Artifacts:** The underlay comes from wrapping the child in a `View` component. This can sometimes cause unwanted visual artifacts and affect layout if not used correctly.
  For example, if the `backgroundColor` of the wrapped `View` is not explicitly set to an opaque color.
- **Children:** `TouchableHighlight` can only have a single child. If you wish to have several children, wrap them in a `View`.

### Accessibility Considerations

- **Feedback for Users:** Ensure that the visual feedback (`underlayColor` color) is noticeable for users with visual impairments.
- **Screen Reader Support:** Label the component appropriately for screen readers so users understand the interaction.
- **Keyboard Focus:** Ensure the component can be focused and activated using a keyboard for accessibility.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={TouchableHighlight}
  rows={[
    {
      name: 'touchable-highlight-root',
      description: 'TouchableHighlight root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={TouchableHighlight}
  inherits={[
    {
      name: 'React Native - TouchableHighlight',
      link: 'https://reactnative.dev/docs/touchablehighlight#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"TouchableHighlight">',
      description:
        'Object or array of objects defining the style of the TouchableHighlight component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Inset | Insets',
      description:
        'This defines how far a touch event can start away from the view',
    },
    {
      name: 'pressRetentionOffset',
      type: 'Inset | Insets',
      description:
        'Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered',
    },
    {
      name: 'underlayColor',
      type: 'Abyss.Color',
      description:
        'The color of the underlay that will show through when the touch is active',
    },
    {
      name: 'activeOpacity',
      type: 'Abyss.Opacity',
      description:
        'Defines what the opacity of the wrapped view should be when touch is active',
    },
  ]}
/>
```

</Tab>

---
id: touchable-opacity
category: Core
title: TouchableOpacity
description: A wrapper for making views respond properly to touches.
sourceIsTS: true
---

<Tab label="Overview">

```jsx render
<Web.Alert variant="warning">
  If you're looking for a more extensive and future-proof way to handle
  touch-based input, check out the{' '}
  <Web.Link size="sm" href="/mobile/core/pressable">
    Pressable
  </Web.Link>{' '}
  API.
</Web.Alert>
```

## Usage

The `TouchableOpacity` component is used to create pressable elements that fade out on press,
providing smooth and subtle visual feedback. This component is lightweight and often used for
buttons or other pressable elements that require an opacity change on interaction. This customized
version of the React Native `TouchableOpacity` component is enhanced to supports Abyss design tokens and fit seamlessly into our design system.

Opacity is controlled by wrapping the children in an `Animated.View`, which is added to the view
hierarchy. Be aware that this can affect layout.

```jsx live
const styles = StyleSheet.create({
  button: {
    borderWidth: 2,
    padding: '$md',
    alignItems: 'center',
    borderRadius: 100,
    borderColor: '$info1',
    backgroundColor: '$conditional2',
  },
});

render(() => {
  return (
    <TouchableOpacity style={styles.button} activeOpacity="$core.opacity.md">
      <Text color="$info1" fontWeight="$semibold" fontFamily="$heading">
        Opacity Button
      </Text>
    </TouchableOpacity>
  );
});
```

### Best Practices

- **Consistent Opacity:** Use consistent values for activeOpacity across your app to maintain uniformity in user interactions.
- **Clear Press Feedback:** Ensure that the change in opacity is noticeable enough to signal to users that the element is pressed.
- **Layering Components:** Be mindful when layering TouchableOpacity over complex backgrounds, as the fade effect might not be as visible.

## Accessibility Considerations

- **Visual Feedback:** Ensure the fade effect is sufficiently noticeable for all users, especially those with visual impairments.
- **Keyboard Navigation:** Ensure the component can be navigated and activated via a keyboard.
- **Accessible Labels:** Add descriptive labels to the TouchableOpacity component so screen readers can convey its functionality.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={TouchableOpacity}
  rows={[
    {
      name: 'touchable-opacity-root',
      description: 'TouchableOpacity root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={TouchableOpacity}
  inherits={[
    {
      name: 'React Native - TouchableOpacity',
      link: 'https://reactnative.dev/docs/touchableopacity#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"TouchableOpacity">',
      description:
        'Object or array of objects defining the style of the TouchableOpacity component with design tokens',
    },
  ]}
/>
```

</Tab>

---
id: touchable-without-feedback
category: Core
title: TouchableWithoutFeedback
description: Captures touch events without providing any visual feedback.
sourceIsTS: true
---

<Tab label="Overview">

```jsx render
<Web.Alert variant="warning">
  If you're looking for a more extensive and future-proof way to handle
  touch-based input, check out the
  <Web.Link size="sm" href="/mobile/core/pressable">
    Pressable
  </Web.Link> API.
</Web.Alert>
```

## Usage

The `TouchableWithoutFeedback` component is a wrapper that captures touch events without providing any visual feedback.
It is ideal for handling touch events on components that don't need to display any visual feedback.

**Do not use unless you have a very good reason.** All elements that respond to press should have a visual feedback when touched.

```tsx
function MyComponent(props: MyComponentProps) {
  return (
    <View {...props} style={{ flex: 1, backgroundColor: '$primary2' }}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableWithoutFeedback>;
```

### Example

```jsx live
() => {
  const Container = styled('View', {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: '$md',
  });

  const CountContainer = styled('View', {
    alignItems: 'center',
    padding: '$md',
  });

  const Count = styled('Text', {
    color: '$interactive1',
  });

  const ButtonView = styled('View', {
    alignItems: 'center',
    backgroundColor: '$gray2',
    padding: '$sm',
  });

  const [count, setCount] = useState(0);

  const handlePress = () => {
    setCount(count + 1);
  };

  return (
    <Container>
      <CountContainer>
        <Count>Count: {count}</Count>
      </CountContainer>
      <TouchableWithoutFeedback onPress={handlePress}>
        <ButtonView>
          <Text>Increment</Text>
        </ButtonView>
      </TouchableWithoutFeedback>
    </Container>
  );
};
```

### Best Practices

- **Use Sparingly:** Only use `TouchableWithoutFeedback` when no visual feedback is required or desired.
  If feedback is expected, use `Pressable` or `TouchableOpacity` instead.
- **Visual Feedback:** Ensure the child components provide sufficient visual feedback, even if `TouchableWithoutFeedback` does not.
- **Invisible Buttons:** Consider accessibility implications if `TouchableWithoutFeedback` is used to
  create invisible or hidden touch areas.

## Considerations

- **Number of Children:** `TouchableWithoutFeedback` only supports one child. If you wish to have several child components, wrap them in a View.
- **Prop Spread:** `TouchableWithoutFeedback` Does not handle touch events directly, it clones its child and applies responder props to the clone.
  Therefore it is important that any intermediary components pass props through to the underlying React Native component.

### Accessibility Considerations

- **Keyboard Navigation:** Ensure the component is accessible via keyboard and focusable if needed.
- **Screen Reader Labels:** If touchable areas are hidden or provide no feedback, ensure the interactive
  area is described accurately for screen readers.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={TouchableWithoutFeedback}
  rows={[
    {
      name: 'touchable-without-feedback-root',
      description: 'TouchableWithoutFeedback root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={TouchableWithoutFeedback}
  inherits={[
    {
      name: 'React Native - TouchableWithoutFeedback',
      link: 'https://reactnative.dev/docs/touchablewithoutfeedback#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"TouchableWithoutFeedback">',
      description:
        'Object or array of objects defining the style of the TouchableWithoutFeedback component with design token support.',
    },
    {
      name: 'hitSlop',
      type: 'Inset | Insets',
      description:
        'This defines how far a touch event can start away from the view.',
    },
    {
      name: 'pressRetentionOffset',
      type: 'Inset | Insets',
      description:
        'Additional distance outside of this view in which a touch is considered a press before `onPressOut` is triggered.',
    },
  ]}
/>
```

</Tab>
```

---
id: view
category: Core
title: View
description: The most fundamental core component for building a UI, a container that supports layout.
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { View } from '@uhg-abyss/mobile';
```

## Usage

The `View` component is one of the fundamental building blocks of a user interface. It functions as a
container that supports layout, styling, and interaction handling. The component serves as a versatile
wrapper for organizing and displaying other components within a user interface.

While it extends the core View component present in React Native, the `View` component in Abyss Mobile
allows using tokens directly in the style prop. This feature enables developers to use the design tokens
defined in the theme to style a component.

This example creates a View that wraps two boxes with color and a text component in a row with padding.
Notice the use of design tokens in the style prop.

```jsx live
<View
  style={{
    flexDirection: 'row',
    height: 100,
    padding: '$md',
  }}
>
  <View style={{ backgroundColor: '$info1', flex: 0.3 }} />
  <View style={{ backgroundColor: '$error1', flex: 0.5 }} />
  <Text>Hello World!</Text>
</View>
```

```jsx render
<Web.Alert variant="warning">
  Views are designed to be used with{' '}
  <a href="/mobile/ui/style-sheet">StyleSheet</a> for clarity and performance,
  although inline styles are also supported.
</Web.Alert>
```

## Best Practices

- **Use for Layout**: Utilize the `View` component to create layouts and organize components within a user interface. For
  text context, consider using the [Text component](/mobile/ui/text).
- **Avoid Excessive Nesting**: Limit the number of nested `View` components to maintain a clean and efficient layout.
- **Use Tokens**: Leverage design tokens in the style prop to ensure consistency and maintainability in styling.
- **Accessibility**: Ensure that the content within the `View` component is accessible to all users by providing
  appropriate labels and descriptions where necessary.

## Performance Considerations

To maximize performance, be mindful of:

- **Shallow component trees**: Minimize nesting `View` components to reduce the complexity of the component tree.
- **Avoid unnecessary re-renders**: Use `React.memo` or similar optimization when rendering complex or frequently changing layouts.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={View}
  rows={[{ name: 'view-root', description: 'View root element' }]}
/>
```

```jsx render
<Docs.PropsTable
  of={View}
  inherits={[
    {
      name: 'React Native - View',
      link: 'https://reactnative.dev/docs/view#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the View component with design tokens.',
    },
  ]}
/>
```

</Tab>

---
id: virtualized-list
category: Core
title: VirtualizedList
description: A high-performance list component that efficiently renders only the items currently visible on the screen, regardless of the size of the data set.
sourceIsTS: true
---

<Tab label="Overview">

## Usage

The `VirtualizedList` component is a high-performance list component that efficiently renders only the items currently
visible on the screen, regardless of the size of the data set.

This is the base implementation of the [FlatList](/mobile/core/flat-list) and [SectionList](/mobile/core/section-list) components. In general,
this should only be used if you need more flexibility than FlatList or SectionList can provides, e.g. for use with immutable data instead of plain arrays.

Virtualization massively improves the performance and memory consumption of large lists by maintaining a finite render window showing only active
items and replacing all items outside of the render window with appropriately sized blank space. The render window adapts with scrolling behavior,
items are rendered incrementally with _low-pri_ (after any running interactions) if they are far from the visible area, or with _hi-pri_ if they are near the visible area.

```jsx live
const ItemContainer = styled('View', {
  backgroundColor: '$conditional3',
  height: 150,
  justifyContent: 'center',
  marginVertical: '$sm',
  marginHorizontal: '$md',
  padding: 20,
});

const ItemText = styled('Text', {
  fontSize: 32,
});

const Item = ({ title }) => {
  return (
    <ItemContainer>
      <ItemText>{title}</ItemText>
    </ItemContainer>
  );
};

const getItem = (_data, index) => {
  return {
    id: Math.random().toString(12).substring(0),
    title: `Item ${index + 1}`,
  };
};

render(() => {
  return (
    <View style={{ height: 400 }}>
      <VirtualizedList
        initialNumToRender={4}
        renderItem={({ item }) => {
          return <Item title={item.title} />;
        }}
        keyExtractor={(item) => {
          return item.id;
        }}
        getItemCount={() => {
          return 50;
        }}
        getItem={getItem}
        ListFooterComponent={<Item title="VirtualizedList Footer" />}
        ListHeaderComponent={<Item title="VirtualizedList Header" />}
        ListHeaderComponentStyle={{
          borderColor: '$conditional3',
          borderWidth: 4,
          marginHorizontal: '$md',
        }}
        ListFooterComponentStyle={{
          borderColor: '$conditional3',
          borderWidth: 4,
          marginHorizontal: '$md',
        }}
      />
    </View>
  );
});
```

### Best Practices

- **Pagination:** Implement infinite scrolling by utilizing the `onEndReached` prop for large datasets.
- **Use Memoization:** Use [React.memo()](https://react.dev/reference/react/memo) to avoid unnecessary re-renders of list items.
- **Lazy Load Images:** If the list contains images, ensure they are lazy-loaded to avoid consuming memory unnecessarily.
- **Key Management:** Ensure `keyExtractor` returns a unique and stable key to avoid performance degradation caused by reordering or re-rendering items unnecessarily.

## Considerations

- **Internal State:** Internal state is not preserved when content scrolls out of the render window. Ensure all your data is captured in the item data or external stores like _Flux_, _Redux_, or _Relay_.
- **Prop Updates:** This is a `PureComponent` meaning it will not re-render if props remain shallow-equal. Make sure that everything your `renderItem` function depends on is in
  passed as a prop (e.g. `extraData`) that is not `===` after updates, otherwise your UI may not update on changes. This includes the `data` prop and parent component state.
- **Item Rendering:** To constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill
  rate and momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application.
- **Key Management:** By default, the list looks for a `key` prop on each item and uses that for the React key. Alternatively, you can provide a custom `keyExtractor` prop.

### Accessibility Considerations

- **Focus Retention:** Retain focus and scroll position when adding or removing items from the list.
- **Content Labeling:** Ensure each list item has accessible labels or descriptions for screen readers.

### Performance Considerations

- **Windowing:** Adjust the `initialNumToRender` and `windowSize` props to strike a balance between performance and UX.
- **Cell Recycling:** Use `CellRendererComponent` to efficiently recycle rendered items, especially for very large datasets.
- **Avoid Expensive Re-renders:** Avoid triggering unnecessary re-renders by memoizing components or using `React.PureComponent`.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.ClassesTable
  of={VirtualizedList}
  rows={[
    {
      name: 'virtualized-list-root',
      description: 'VirtualizedList root element',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={VirtualizedList}
  inherits={[
    {
      name: 'React Native'
      link: 'https://reactnative.dev/docs/virtualizedlist#props',
    },
  ]}
  rows={[
    {
      name: 'style',
      type: 'Abyss.Style<"VirtualizedList">',
      description:
        'Object or array of objects defining the style of the VirtualizedList component with design tokens',
    },
    {
      name: 'hitSlop',
      type: 'Insets',
      description:
        'This defines how far a touch event can start away from the VirtualizedList',
    },
    {
      name: 'contentContainerStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Object or array of objects defining the style of the content container within the VirtualizedList component with design tokens. These styles will be applied to the virtualized list content container which wraps all of the child views',
    },
    {
      name: 'contentInset',
      type: 'Insets',
      description:
        'The amount by which the virtualized list content is inset from the edges of the virtualized list',
    },
    {
      name: 'endFillColor',
      type: 'Abyss.Color',
      description:
        'The color of the background of the list when there are no items to display',
    },
   {
      name: 'ListFooterComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListFooterComponent. Accepts an object or array of objects which defines the style of the ListFooterComponent within the FlatList component with design tokens',
    },
    {
      name: 'ListHeaderComponentStyle',
      type: 'Abyss.Style<"View">',
      description:
        'Styling for internal View for ListHeaderComponent. Accepts an object or array of objects which defines the style of the ListHeaderComponent within the FlatList component with design tokens',
    },
  ]}
/>
```

</Tab>

---
id: design-checklist
title: Design Checklist
---

## Overview

Welcome to Abyss! If you’re just starting out designing with Abyss, you’re in the right place. Here’s a checklist of everything you need to get up and running. Abyss design kit is available in Figma through our enterprise account (Optum/UHG)

## Create Figma Account

<FigmaAccount library="mobile" />

## Using the Designer Toolkit

<UsingDesignToolkit />

## Review Updates

<ReviewUpdates />

---
id: design-kit
title: Design Kit
---

## Overview

<DesignersOverview />

## Designer Toolkit

<DesignerToolkit library="mobile" />

## Guidance

<Guidance library="mobile" />

## Accessibility

<DesignAccessibility library="mobile" />

## Contact Us

<DesignContactUs library="mobile" />

---
id: code-connect
title: Code Connect
---

## Figma Code Connect for Mobile

Figma <ExitLink href="https://www.figma.com/code-connect-docs/">Code Connect</ExitLink> is a Design-to-Code tool that aims to scaffold out the code required to implement a Figma Design.

**Note:** Code Connect is currently in alpha and availability for components is changing. We invite you to discuss any enhancements or limitations in our <ExitLink href="https://github.com/uhc-tech/abyss/discussions/3775">Github Discussion Topic</ExitLink>.

**Note:** Components on the UHC or Global Figma with Code Connect enabled may only be for the V2 version of the component. See the list below for supported components.

## Instructions

This <ExitLink href="https://uhgazure.sharepoint.com/teams/AbyssProductUHCProvider/_layouts/15/stream.aspx?id=%2Fteams%2FAbyssProductUHCProvider%2FShared%20Documents%2FHow%20To%20Videos%2Fabyss%2Dcode%2Dconnect%2Dmobile%2Emp4&ga=1&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview%2Ea2480ad0%2D24c0%2D4f27%2Dbecb%2D49e924c87c97">Demo Video</ExitLink> contains an overview of how to use Abyss with Code Connect.

- Open the Figma file with the component you want to use and select the component. In dev mode, the Code Connect will be viewable in the side bar under "Recommended Code".

- The button "Explore component behavior" will allow you to see the component in a preview mode. You can change available props and variants from this panel.
  _Due to Figma limitations, not all possible combinations will be available through here. Check Abyss documentation._

```jsx render
<img
  src="/code-connect/code-connect-example.png"
  alt="Code Connect Example with Badge"
  role="presentation"
/>
```

#### Slot limitations

At this time, code connect does not support slots. If you need to use a slot, you will need to manually add it to the code after copying it from Code Connect.
The reccomended code section does not show the actual slot element's code.

```jsx render
<img
  src="/code-connect/slot-example.png"
  alt="Code Connect Example with Slots"
  role="presentation"
/>
```

### Supported Components

```jsx render
<Docs.CodeConnectTable platform="mobile" />
```

---
id: abyss-admirals
title: Abyss Admirals
isHidden: true
---

## Who are Abyss Admirals?

<div style={{ display: 'flex', alignItems: 'flex-start' }}>
  <div style={{ marginRight: '8px' }}>
    <div>
      An <strong>Abyss Admiral</strong> is a highly specialized role for a
      software engineer who is a dedicated member of a product delivery team.
      The most basic and essential function of an Admiral is to act as a bridge
      between the core Abyss ecosystem and the product team leveraging the
      framework.
    </div>
    <br />
    <div>
      Acting as representatives or ambassadors for their products, Admirals
      enable the adoption of a{' '}
      <strong>scalable, federated software development model</strong> by sharing
      the Abyss community's best practices with their teams. As subject matter
      experts for Abyss, Admirals are encouraged to guide and mentor their
      engineering teams, empowering them to take advantage of the benefits of
      working in a collaborative enterprise environment.
    </div>
  </div>
  <img
    width="300"
    src="/img/graphics/abyss_admirals.png"
    alt="Abyss Admirals"
  />
</div>

## Benefits for Product Stakeholders

It's very important for product stakeholders to understand that an Admiral's involvement in their new responsibilities will <strong>reduce their capacity for delivering sprint work</strong> as a standard individual contributor. However, by allocating enough time for the role, Admirals will enable engineering scrum teams to measurably improve both quality and delivery metrics. It's recommended to dedicate between **30% - 50%** of an Admiral's capacity for this role, but could be up to 100% depending on the size and scope of the project.

Product stakeholders will be able to capitalize on the efficiencies gained by leveraging the collective knowledge and shared solutions that are accessible through the broader Abyss community. The benefits of staffing a dedicated Admiral on your product include:

- **Accelerated Solution Development:**
  When delivery teams are asked to identify and create solutions to common problems, they’ll need to do so in between developing new features which can result in delays. An Admiral assists their product teams at critical moments by eliminating these bottlenecks and offering proven solutions, which in turn increases the speed of delivery.
  <br />
  <br />
- **Minimized Duplication of Work:**
  The Abyss team facilitates the creation of reusable digital assets such that, when the business makes a new request, an Admiral can utilize a similar solution that was built previously for another team rather than building a new one from scratch, greatly minimizing cost and time to value.
  <br />
  <br />
- **Consistent Product Quality:**
  It’s reasonable to assume that most teams will not be evenly balanced when it comes to experience and skill levels, resulting in products being built with different techniques and standards. Admirals can ensure that the quality of development is both consistent and in accordance with the established standards of other products built with Abyss.
  <br />
  <br />
- **Expansive Specialist Network:**
  When working with an Abyss Admiral, product stakeholders obtain access to a network of highly experienced and qualified specialists including software architects, lead engineers, UX designers, accessibility experts who are motivated to craft the best product experiences possible.

## Benefits for Engineering Managers

It's very important for engineering managers to understand that an Admiral's involvement in their new responsibilities will <strong>reduce their capacity for delivering sprint work</strong> as a standard individual contributor. However, by allocating enough time for the role, Admirals will enable engineering scrum teams to measurably improve both quality and delivery metrics. It's recommended to dedicate between **30% - 50%** of an Admiral's capacity for this role, but could be up to 100% depending on the size and scope of the project.

Engineering managers will be able to capitalize on the efficiencies gained by leveraging the collective knowledge and shared solutions that are accessible through the broader Abyss community. The benefits of staffing a dedicated Admiral on your delivery team include:

- **Reduced Software Fragmentation:**
  When individual teams are developing within disconnected, siloed environments, they’ll often discover multiple different approaches to solve the same problem. Admirals can act as advisors to prevent this additional overhead from occuring by raising awareness of pre-existing solutions.
  <br />
  <br />
- **Promote Engineering Growth:**
  For an engineer who is eager to progress further along their career path, the Admirals program offers an elevated set of responsibilities for overseeing software projects. Since this role is both highly technical and relationship-oriented, coupled with a sense of personal accountability, Admirals can leverage this experience to explore their interest in management or technology leadership roles.
  <br />
  <br />
- **Accountability for Essential Tasks:**
  Engineering teams are often overburdened with upkeep and maintenance related chores because they are given a lower priority than feature work. By assigning an Admiral to each project, engineering managers can verify that code quality, versioning, and peer review processes are being observed.
  <br />
  <br />
- **Optimized Outcomes:**
  Admirals reduce the time and cost of development through specialization and economies of scale. By tapping into a centralized community of knowledge, skills, and experience, the Admirals program is able to streamline access to those scarce capabilities while also facilitating balanced, cohesive engineering teams.

## Admiral Assignments

- **Upgrade Abyss Versions:**
  It's highly beneficial to keep your product up-to-date with the newest versions of Abyss. Inform your engineering team and product stakeholders of any new components, tools, or patterns your application can leverage.

  - **Review the [release notes](/mobile/releases/) after a release** to determine the level of effort for upgrading to the latest version.
  - **Run the command "npm run abyss"** to automatically upgrade all Abyss packages in your project.
  - **Support for new features and defects** will only be included in new versions.
    <br />
    <br />

- **Monitor Code Quality:**
  As an Admiral, the accountability of maintaining high standards for code quality starts with you. Become well-versed in JavaScript, React, ESLint, and SonarQube anti-patterns and shepherd your team away from these pitfalls, reducing the burden of unrestrained technical debt and extending the lifespan of your codebase.

  - **Remediate runtime errors & warnings** observed in the browser's developer console for your product.
  - **Inspect problems reported by [ESLint](https://eslint.org/docs/latest/rules)** and discuss rule modifications with other Admirals.
  - **Triage issues identified by [Sonar](https://sonar.optum.com)** to ensure your product meets code quality benchmarks.
    <br />
    <br />

- **Manage Pull Requests:**
  Within the GitHub repository for your product, you should encourage your team to open pull requests regularly. By consulting with other Admirals, you are in the most well-suited position to act as a code reviewer for your team.

  - **Open draft PR's early** in the sprint to give you and your team enough time to review and offer feedback on the approach.
  - **Offer comments and conduct reviews** for each PR before approving.
  - **Merge PR's in a timely manner** to improve time-to-build metrics for your product.
    <br />
    <br />

- **Leverage Assets:**
  Admirals should strive to identify all of the usuable assets that exist within Abyss, as well as the network of individuals involved. Becoming familiar with the abstract concepts of a framework will elevate the engineering maturity of your team.

  - **Research code developed for Abyss** to understand the patterns for consistent, repeatable software practices.
  - **Review and update documentation** which demonstrates guidance for best practices, guidelines, and considerations.
  - **Foster relationships with key experts** who possess very specific and unique skillsets who can influence the growth of your product.
    <br />
    <br />

- **Continous Learning:**
  To be successful, Admirals should provide thought leadership, direction, and appropriate recommendations for their teams and the Admiral community. The ability to both absorb and transfer knowledge is essential.

  - **Have a self-starter attitude** and a passion for growing your career by being surrounded by like-minded engineers.
  - **Seek opportunities for learning** by reading developer blogs, attending tech conferences, and networking with other Admirals.
  - **Familiarize yourself with industry trends** by researching and recommending techniques for application development.
    <br />
    <br />

- **Sustainable Software:**
  When left unchecked, the sustainability of an application can continously deteoriate. Admirals are able to counteract this by taking appropriate measures to establish a healthy development environment and extend the lifespan of a product.

  - **Maintain a log of tech debt** and track the ongoing scope of maintainance tasks incurred from past sprints.
  - **Conduct frequent pair programming** sessions with your team to guide current feature development.
  - **Discuss upcoming requirements** with architects to establish a clear path for future stories in your product pipeline.
    <br />
    <br />

- **Abyss Contributions:**
  With the Admiral contribution process, the development process for new assets can be accelerated by building the solution yourself as the need arises; rather than waiting for your idea to reach the top of the Abyss core backlog.

  - **Determine the priority** for framework enhancements based on your product delivery schedule.
  - **Discuss new ideas in [Office Hours](#abyss-office-hours)** with the core team and other Admirals.
  - **Follow the [Contribution Workflow](#contribution-workflow)** shown below to share your proposals with the framework.

## Admiral Developers Guide

If an existing Abyss component doesn't meet your product's requirements, you can follow this guide for building and testing changes within your application's codebase. Start by cloning the package structure of abyss within your product, such as **'src/abyss/mobile/ui/Badge'** demonstrated below. If you are creating a new component, you can start with a similar one as a template, otherwise cloning the existing component is the recommended approach.

```txt
└── packages
    └── mobile
        ├── node_modules
        ├── src
        |   └── ui
        |       └── Badge
        |           ├── index.js
        |           └── Badge.jsx
        └── package.json
```

Next, replace the relative imports with absolute paths to **@uhg-abyss/mobile**. You can use any combination of Abyss package imports, open source libraries, and custom JavaScript dependencies to build your component.

```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '../../tools/styled';
import { useAbyssProps } from '../../hooks/useAbyssProps';
```

Replace with:

```jsx
import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@uhg-abyss/mobile/tools/styled';
import { useAbyssProps } from '@uhg-abyss/mobile/hooks/useAbyssProps';
```

Finally, to test your component changes, modify your import path by changing **'@uhg-abyss/mobile/ui/Badge'** to **'@src/abyss/mobile/ui/Badge'** which will use your local Abyss component. Once you have fully verified your changes, you can submit a new Pull Request back to [Abyss](https://github.com/uhc-tech/abyss/pulls) and showcase your updates in the Abyss office hours. Once merged, your contributions will be available in the next release!

## Contribution Workflow

    As an Abyss Admiral the workflow for a contribution goes as follows:

    1. Office Hours: Discuss proposal for new components, designs, architecture, and tools with other Admirals.
    2. Abyss Contact us: If idea can be re-used, submit a new request with Abyss "Contact Us" form.
    3. Develop Locally: Follow the steps in Admiral developers guide to create re-usable asset locally in your product.
    4. Abyss GitHub: Before opening a new Pull Request, ensure that all requirements are met for UX, branding, and accessibility guidelines.
    5. Abyss Office Hours: Demo proposed feature with Abyss core team and other Admirals.
    6. Abyss Github: Pull Request undergoes modifications from feedback, acceptance, quality checks and merge.

    The contribution will end with the finalized abyss packages

![Contribution Workflow](/img/graphics/abyss_admirals_flowchart.png)

## Abyss Office Hours

| Day       | Time                    | Meeting                                                                                                                                                                                                                                                                   |
| --------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tuesdays  | 3:00 - 4:00 PM **CST**  | [Join Teams Meeting](https://teams.microsoft.com/l/meetup-join/19%3ameeting_YjVlMDM3OTgtY2ExYi00OTU0LWIyYTYtODk0NGUwN2E2MmUz%40thread.v2/0?context=%7b%22Tid%22%3a%22db05faca-c82a-4b9d-b9c5-0f64b6755421%22%2c%22Oid%22%3a%226e73a16f-0cf1-4fd2-9501-31c2c9038e9b%22%7d) |
| Thursdays | 9:00 - 10:00 AM **CST** | [Join Teams Meeting](https://teams.microsoft.com/l/meetup-join/19%3ameeting_YjVlMDM3OTgtY2ExYi00OTU0LWIyYTYtODk0NGUwN2E2MmUz%40thread.v2/0?context=%7b%22Tid%22%3a%22db05faca-c82a-4b9d-b9c5-0f64b6755421%22%2c%22Oid%22%3a%226e73a16f-0cf1-4fd2-9501-31c2c9038e9b%22%7d) |

---
id: abyss-contributors
title: Abyss Contributors
---

## Overview

First of all, thank you for your interest in contributing to Abyss. All of your contributions are valuable to the project! There are several ways you can get involved in the Abyss community and become a contributor:

- **Share Abyss:** Share the link to [Abyss](https://abyss.uhc.com) with members of your product team, and we'd be happy to discuss how we can help support your application.
- **Improve documentation:** Help us improve the <ExitLink href="https://github.com/uhc-tech/abyss/tree/main/products/abyss-docs-web">Abyss Docs</ExitLink> by fixing incomplete or missing sections, examples, and explanations.
- **Provide feedback:** The team at Abyss are constantly working to make the project better, please let us know what features you would like to see with the [Contact Us](/mobile/contact-us/) form.

## Abyss Code Repo

```jsx render
() => {
  const packages = [
    'api',
    'core',
    'desktop',
    'ext',
    'infra',
    'mobile',
    'parcels',
    'utility',
    'web',
  ];
  const products = ['assets', 'docs', 'ext', 'scaffold', 'storybook'];
  return (
    <Layout.Stack alignItems="left" space={12}>
      <Text>
        {' '}
        The Abyss source code monorepo contains both core packages and products
      </Text>
      <Text fontWeight="bold"> Packages:</Text>
      <Chip.Group>
        {packages.map((item) => {
          return (
            <Chip key={item} isTag>
              {item}
            </Chip>
          );
        })}
      </Chip.Group>
      <Text fontWeight="bold">Products:</Text>
      <Chip.Group>
        {products.map((item) => {
          return (
            <Chip key={item} isTag>
              {item}
            </Chip>
          );
        })}
      </Chip.Group>
      <Layout.Space space={2} />
      <Docs.Button
        variant="outline"
        size="$sm"
        href="https://github.com/uhc-tech/abyss"
        after={
          <Icon title="github" size="$sm" color="$primary1">
            {`<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" /></svg>`}
          </Icon>
        }
      >
        Visit
      </Docs.Button>
    </Layout.Stack>
  );
};
```

### Setting Up Project Locally

For the essential system tools to get Abyss running on your local development environment, visit our [workspace setup](/mobile/developers/workspace-setup) guide.

To set up, clone the <ExitLink href="https://github.com/uhc-tech/abyss">abyss</ExitLink> repository:

```bash
# Make the abyss-projects directory
mkdir abyss-projects && cd abyss-projects

# Clone the abyss repository
git clone https://github.com/uhc-tech/abyss.git
```

<br />

Afterwards, install the dependencies for `abyss` on your machine:

```bash
# Go into the abyss directory
cd abyss

# Install abyss dependencies
npm i
```

<br />

Then you are ready to start `abyss-docs` on your machine:

```bash
npm run docs
```

### Commit Conventions

Head to the <ExitLink href="https://github.com/uhc-tech/abyss">Abyss</ExitLink> source code for updates and additions to our Abyss NPM packages and documentation. With several contributors working in these repos daily, it's important to write your commit messages to be as descriptive as possible.

Commit Convention:

```
[area] Optional title: Message
```

<br />

Examples:

```
[docs] Button: Edit accessibility section

[@uhg-abyss/ui] useLoadingOverlay: Add remove handler

[@uhg-abyss/core] Fix non-prod deployment scripts

[@uhg-abyss/ui] Carousel: New feature added

[docs] Doc scripts: Fix docs deployment script
```

### Git Branch Names

Naming the branch you're working on helps repository maintainers understand the changes being made when the PR is opened. Using consistent branch name prefixes also allows build tools to automatically categorize the branches using labels. Branch names should be all lowercase (with the exception of US and DE) and include hyphens between words. All branches are divided into four groups:

- **story/#######** - Changes associated with a User Story, use the unique 7-digit number from Rally followed by a task description.

- **defect/#######** - Changes associated with a Defect, use the unique 7-digit number from Rally followed by a task description.

- **refactor/** - Changes to the repo that aren't documented in Rally are considered refactors, so use the task portion to add detail to your branch name.

- **release/** - Used specifically by build tools, this branch name is exclusive to release notes and documentation leading up to a new release.

Examples:

```
git checkout -b story/US2434515-developer-toolkit

git checkout -b defect/DE308703-button-accessibility

git checkout -b refactor/select-list-multi-docs

git checkout -b story/US1533842-use-loading-overlay
```

<br />

Branch Name Rules:

- Branch prefix must start with **story**, **defect**, **refactor**, or **release**
- Branch name must be only **lowercase letters, numbers, and hypens**
- **US###** and **DE###** are valid character exceptions

## Secure Groups

Visit <ExitLink href="https://secure.uhc.com">secure.uhc.com</ExitLink> to request permissions groups:

- **abyss_contributors**: For write access to <ExitLink href="https://github.com/uhc-tech/abyss">abyss</ExitLink> code repositories

## Developer Tools

Abyss is built using a list of trusted resources. Below are links to what makes up the framework of Abyss Mobile.

```jsx render
() => {
  const devLinks = [
    {
      id: 1,
      name: 'React Native',
      href: 'https://reactnative.dev/',
    },
    {
      id: 2,
      name: 'Emotion',
      href: 'https://emotion.sh/docs/introduction',
    },
    {
      id: 3,
      name: 'React Navigation',
      href: 'https://reactnavigation.org/docs/getting-started',
    },
    {
      id: 4,
      name: 'npm ',
      href: 'https://docs.npmjs.com/about-npm',
    },
  ];
  return (
    <Layout.Stack>
      <Layout.Group style={{ flexFlow: 'row wrap' }}>
        {devLinks.map((link) => {
          return (
            <Docs.Button
              key={link.href}
              variant="outline"
              style={{
                borderRadius: '5px',
                marginRight: '8px',
                marginBottom: '8px',
              }}
              href={link.href}
              after={<IconSymbol icon="arrow_forward" color="$primary1" />}
            >
              {link.name}
            </Docs.Button>
          );
        })}
      </Layout.Group>
    </Layout.Stack>
  );
};
```

If you're ready to get started with Abyss on your own, checkout the Abyss StarterKit (coming soon) to get started.

## Design Tools

Abyss has a dedicated team of designers creating a Design Kit on Figma. Below are some resources to help developers navigate these tools:

```jsx render
() => {
  const designLinks = [
    {
      id: 1,
      name: 'Abyss Design Kit',
      href: 'https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=1180-3541&t=1l9yUfKeafljt2k0-0',
    },
    {
      id: 2,
      name: 'Figma for developers',
      href: 'https://www.figma.com/best-practices/tips-on-developer-handoff/an-overview-of-figma-for-developers/',
    },
    {
      id: 3,
      name: 'UHC branding',
      href: 'https://brand.uhc.com/design-with-care',
    },
    {
      id: 4,
      name: 'Optum branding',
      href: 'https://brand.optum.com/',
    },
  ];
  return (
    <Layout.Stack>
      <Layout.Group style={{ flexFlow: 'row wrap' }}>
        {designLinks.map((link) => {
          return (
            <Docs.Button
              key={link.href}
              variant="outline"
              style={{
                borderRadius: '5px',
                marginRight: '8px',
                marginBottom: '8px',
              }}
              href={link.href}
              after={<IconSymbol icon="arrow_forward" color="$primary1" />}
            >
              {link.name}
            </Docs.Button>
          );
        })}
      </Layout.Group>
    </Layout.Stack>
  );
};
```

If you're a designer and want to dive deeper into the Abyss Design Kit, visit our Designer Getting Started (coming soon) page to learn more.

<br />

---
id: documentation-guide
title: Documentation Guide
---

## Overview

The documentation pages are organized under the **docs** directory shown below. When adding a new component, tool, or guide to Abyss Docs, create a new markdown.md file under the associated folder.

```txt
abyss-docs-web
└── docs
    └── mobile
        ├── brand
        ├── developers
        ├── hooks
        ├── tools
        └── ui
```

## Markdown Structure

Each markdown file should begin with the following metadata, as an example:

```md
---
id: card
category: Layout
title: Card
description: A single or multi-section container used to display content related to a single subject.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/Sk3MrHYxjT39TKDzDU5LBc/Abyss-Mobile?node-id=12334%3A61355
---
```

<br />

Every doc page is divided into three tabs: Overview, Integration and Accessibility. Within the body of the markdown file, use these tabs to group sections of information.

```
<Tab label="Overview">
  **Overview Content**
</Tab>

<Tab label="Integration">
  **Integration Content**
</Tab>

<Tab label="Accessibility">
  **Accesibility Content**
</Tab>
```

<br />

## Overview Tab

###### Import statement

Add the import statement for the feature like such:

```jsx
import { Alert } from '@uhg-abyss/mobile';
```

###### Component Sandbox

Add Sandbox after the import statement for any components that make sense
to have a sandbox. Inputs are controlled props that can be adjusted by the user using the Sandbox features. Each input contains `prop`, `type` and optionally: `options` and, `defaultValue`.
To create a Sandbox, use the convention below:

```jsx sandbox
{
  component: 'Alert',
  inputs: [
    {
      prop: 'title',
      type: 'string',
    },
    {
      prop: 'description',
      type: 'string'
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'success', value: 'success' },
        { label: 'warning', value: 'warning' },
        { label: 'error', value: 'error' },
        { label: 'info', value: 'info' },
      ]
    },
  ]
}

<Alert title="Completed Health Screen:" description="Review of your results are ready.">
  <Alert.Button>Go To Results</Alert.Button>
</Alert>
```

###### Property examples

Following the Sandbox, it's important to show the ability of each property separate of the others. We break each one down, giving it a title, description and jsx example showing variants of that specific property. For example, if you wanted to show the sizes for Button, you'd write:

```
<Button size="small">Small</Button>
<Button size="large">Large</Button>
```

<br />

Since there are multiple visual variants of Button, which use the same sizing convention (`small` & `large`) we can combine the visuals under the one size example by organizing them utilizing the built-in Layout component from the Abyss library. Here's what the combined example looks like:

```
<Layout.Stack grow>
  <Button>Button</Button>
  <Button variant="secondary">Button</Button>
  <Button variant="tertiary">Button</Button>
  <Button variant="destructive">Button</Button>
  <Box color="$primary1">
    <Button variant="alt">Button</Button>
  </Box>
</Layout.Stack>
```

<br />

To follow the complexity of each prop example, use the following rules to properly document the feature:

- **When organizing the list of examples,** they should be ordered from simple to complex starting with size or width
- **Start each example case** with "Use the `prop-name` property to..." followed by an explanation
- **For props with a pre-set list of variants,** add a sentence listing out the variant options "Variants include `variant-1`, `variant-2`", and so on
- **For props with a default value,** add "The default value is set to `value`"
- **For the customization example section,** include the sentence “If further customization is needed, most styles of `component-name` can be overridden by passing style props to `abyss-component-name`. See the class table on each component for more details”
- **Size and width examples** should include the list of Abyss style sizes
- **Examples may include:** size, width, isDisabled, controlled, uncontrolled, loading, and customization. Take a look at other doc pages for examples of how to best format the component you're documenting

## Integration Tab

Implementing a props table and classes table for the component, and any sub-components gives users an in-depth view of the component without having to visit the code. (The below example is modified for this template. Please refer to the Button component for a full list of props and classes).

Follow these rules when creating a Props Table:

- **Prop name** is lowercase
- **Type** is one of the following: boolean, function, array, shape, number, string, number | string
- **Description** first word is uppercase, followed by a brief description of the props use

Follow these rules when creating a Classes Table:

- **Class name** is lowercase and uses dashes to separate words
- **Description** first word is uppercase, followed by a brief description of the class

#### Example of Integration Tab

```jsx render
<Docs.PropsTable
  aria-labelledby={'Button integration table'}
  of={Button}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the button component',
    },
    {
      name: 'variant',
      type: "'primary' | 'secondary' | 'tertiary' | 'destructive' | 'alt'",
      description: 'Change the button style',
    },
    {
      name: 'size',
      type: "'large' | 'small'",
      description: 'Set the size of the button',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  aria-labelledby={'Button class table'}
  of={Button}
  rows={[
    {
      name: 'button-root',
      description: 'Button root element',
    },
    {
      name: 'button-label',
      description: 'Button label element',
    },
  ]}
/>
```

## Accessibility Tab

This tab is important to be as thorough and in-detail as possible, adhering to the WAI-ARIA design guidelines. Check out the accessibility documentation on <ExitLink href="https://reactnative.dev/docs/accessibility">React Native</ExitLink> for guidence during development.

Follow this pattern when creating the Accessibility tab:

- **Brief description** write a description about the component, and link to the WAI-ARIA website page referring to the component
- **Sandbox** allows our A11Y partners to practice assistive technology on the component in a dedicated field
- **Keyboard interactions table** referring to the WAI-ARIA keyboard interactions, create a table with all interactions usable for the specific component
- **Additional guidance** note any additional guidance features of the component, including (but not limited to) Decorative Icons, Loading State, etc.

#### Example of Accessibility Tab

An alert is an element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task. Dynamically rendered alerts are automatically announced by most screen readers, and in some operating systems, they may trigger an alert sound. It is important to note that, at this time, screen readers do not inform users of alerts that are present on the page before page load completes.

Adheres to the <ExitLink href="https://www.w3.org/TR/wai-aria-practices-1.2/#alert">Alert WAI-ARIA design pattern</ExitLink>.

```jsx live
<Layout.Stack grow>
  <Alert
    title="Error Alert"
    description="error description"
    variant="error"
    onClose={() => {}}
  />
  <Alert
    title="Success Alert"
    description="success description"
    variant="success"
    onClose={() => {}}
  />
  <Alert
    title="Info Alert"
    description="info description"
    variant="info"
    onClose={() => {}}
  />
  <Alert
    title="Warning Alert"
    description="warning description"
    variant="warning"
    onClose={() => {}}
  />
</Layout.Stack>
```

<br />

```jsx render
<Docs.AccessibilityTable
  aria-labelledby={'Alert accessibility table'}
  title="Alert"
  rows={[
    {
      name: 'Tab',
      description: 'Puts focus on the Button inside of the Alert',
    },
    {
      name: 'Enter',
      description:
        'When focus is on the Button, pressing enter will press the Button inside the Alert',
    },
    {
      name: 'Space',
      description:
        'When focus is on the Button, pressing space will press the Button inside the Alert',
    },
  ]}
/>
```

###### Decorative Icons

In the alert below, since the word “Warning” appears next to the icon, the icon is considered decorative and must be ignored by assistive technology. The icon does not need to meet the 3:1 minimum contrast requirement against its adjacent color.

```jsx live
<Alert title="Warning Alert" description="warning message" variant="warning" />
```

###### Close Button Guidance

Keyboard operation: if the “close” button is used on the alert, it must be keyboard accessible. A keyboard only user must be able to tab to the button, and activate it with the space bar and the enter key.

```jsx live
<Alert
  title="Alert With Close Button"
  description="alert message"
  onClose={() => {}}
/>
```

<br />

Note: per the WAI ARIA specification, when the “alert” role is used, the user should not be required to close the alert. In this case, it is assumed that the close button is provided as a convenience and the user is not explicitly required to close the alert.

---
id: mobile-contribution-standards
title: Mobile Contribution Standards
---

## Overview

Thanks for getting involved with Abyss! If you've made it here we'll assume you've reviewed the [Abyss Contributors](/mobile/developers/contributors/abyss-contributors) page. To make the contribution process go as smooth as possible, we've laid out our code standards and development steps for you below.

As a reminder the component you are developing should _already_ be approved by product, design, and accessibility.

## Code Standards

While components may differ, most Abyss Mobile UI components have the following...

The outermost styled element will be named `ComponentNameRoot`. The rest of the names should describe what they contain. <br/> Below is a simplified example from [Modal](/mobile/ui/modal/)

```
<ModalRoot>
    <Header>
        <ActionButton> </ActionButton>
        <TitleContainer>
            <Title> </Title>
        </TitleContainer>
    </Header>

    // code

</ModalRoot>
```

<br />

The `useAbyssProps` hook must be imported in each component. This allows consuming teams to customize the style of the component and gives the ability to assign unique test-ids.

```
const abyssProps = useAbyssProps(props);
```

`abyssProps` are spread into each element that will allow for customization and testing. The class names start with the component name followed by a dash and then the element name. These names should be simple and self-explanatory. For example, `button-root` describes the root element and `button-label` describes the label element.

```
<ButtonRoot {...abyssProps('button-root')} >
<Label {...abyssProps('button-label')} >{label}</Label>
</ButtonRoot>
```

<br />

Add accessibility props when applicable.

```
<ButtonRoot
    accessible
    accessibilityRole="button"
    accessibilityState={{ disabled: isDisabled }}
    >
</ButtonRoot>
```

<br />

Don't forget the display name.

```
Button.displayName = '@uhg-abyss/mobile/ui/Button';
```

### Types, Props, and Classes

All the types, props, and classes used in the component must be defined in a `ComponentName.types.ts` file. This file should export a TypeScript interface for the component's props, classes, and any reused types.<br />
Below is a simplified example of Button:

```
export type ButtonClasses = {
  'button-root': Abyss.Class<'Animated.Pressable'>;
  'button-label': Abyss.Class<'Animated.Text'>;
};
```

Unless a prop is marked as required in the TypeScript interface, be sure to add a default value where applicable (and within the component itself).

```
export interface ButtonProps
  extends Abyss.BaseProps<ButtonClasses, 'Animated.Pressable'> {
  /**
   * The contents of the button component
   */
  children?:
    | React.ReactNode
    | ((state: PressableStateCallbackType) => React.ReactNode);
  /**
   * Defines the button type (style)
   * @default 'filled'
   */
  type?: 'filled' | 'outline' | 'text';
  /**
   * Defines the button size
   * @default 'large'
   */
  size?: 'large' | 'small';
    /**
   * Disables the button
   * @default false
   */
  isDisabled?: boolean;
  /**
   * Callback fired when the Button is pressed
   */
  onPress?: Abyss.GestureResponderEventHandler;
}
```

```
export interface ButtonRef extends Abyss.PressableRef {}
```

<br />

Once the `ComponentName.types.ts` file is complete import the necessary elements into the `ComponentName.tsx` file.

```
import type { ButtonProps, ButtonRef } from './Button.types';
```

The full props spread may look something like the example below. <br/><br/> `ButtonRoot` is the outermost `Pressable` component, so `size` and `type` are passed in for styling, as well as all the props pertaining to press interactions: `onPress`, `onPressIn`, `onPressOut`, and `disabled`. `{...abyssProps('button-root')}` is added, and for the Button component specifically, accessibility props are only within the `ButtonRoot` element.

```
<ButtonRoot
    onPress={onPress}
    accessible
    accessibilityRole="button"
    accessibilityState={{ disabled: isDisabled }}
    size={size}
    type={type}
    {...props}
    {...abyssProps('button-root')}
    onPressIn={handlePressIn}
    onPressOut={handlePressOut}
    disabled={isDisabled}
>
    <Label {...abyssProps('button-label')}>{children}</Label>
</ButtonRoot>
```

## Development Workflow

###### 1. Developer Refinement

Before starting development, you are **required** to attend our Mobile Developer refinement session. Here we will discuss the development plan for the component you are contributing. This includes outlining code already available to be used within your component, as well as what we expect to be reusable from your component.

###### 2. Development

Please review our [Code Standards](/mobile/developers/contributors/mobile-contribution-standards/#code-standards) before you get started, and remember we're here to help! Feel free to reach out an Abyss Mobile developer and attend [office hours](/mobile/contact-us/?card=meetings) for anything that comes up during development.

###### 3. Documentation

A component is not complete without proper documentation. Please see our [Documentation Guide](/mobile/developers/contributors/documentation-guide/) for more details and examples. Be sure to continue to update documentation with any changes from the Peer, QE, and A11y reviews.

###### 4. Peer Review

After you've completed development, make a pull request and reach out to the Abyss Mobile developer that has been assigned to review your component. They will do an initial review, as well as check any code changes after QE and Accessibility testing. Any changes requested bring you back to [development](/mobile/developers/contributors/mobile-contribution-standards/#2-development).

###### 5. Quality Engineering Review

Once the PR is complete, your component will be sent to our quality engineer for testing. Any changes requested bring you back to [development](/mobile/developers/contributors/mobile-contribution-standards/#2-development).

###### 6. Accessibility Review

After your component has been approved by QE, it will be passed on to our accessibility engineer for testing. You are responsible for adding accessibility elements within your component. Check out our [Accessibility Testing](/mobile/developers/testing/accessibility-testing/) page and the <ExitLink href="https://reactnative.dev/docs/accessibility">React Native documentation</ExitLink> for further guidance. Any changes requested bring you back to [development](/mobile/developers/contributors/mobile-contribution-standards/#2-development). If the changes made only pertain to accessibility, the component does not need to be reviewed again by QE.

## Definition of Done

By contributing to Abyss, you are committing to the full development cycle. A component is complete when all changes have been made and accepted by the Peer, QE, and Accessibility reviews, and is thoroughly documented.

---
id: ai-code-gen-how-to
title: How to use AI to perform code generation "CodeGen" with Abyss
sidebar_label: AI Code Generation
searchSiteWide: true
---

<CodeGenIntro />

## Design-to-Code

<DesignToCode />

## Prompt-to-Code

<PromptToCode />

---
id: installation
title: Installation
---

There are two ways to go about installing Abyss - either by creating a new Abyss app or by adding Abyss to an existing application.

## Create Abyss App (Recommended)

The recommended way to get started with Abyss is by using `create-abyss-app`.
Go to our [tutorials](/mobile/developers/tutorials/create-abyss-app/) to get started!

### Advantages

- **Zero Configuration Setup**
  - All tools are already configured that are essential for React development. Tools like Webpack (for bundling your code) and Babel (for using modern JavaScript features).
- **Easy To Use**
  - You can start developing and see those results immediately.
- **Optimized Build Output**
  - Provides optimized production builds out of the box, including minification, concatenation, and efficient loading (e.g., code splitting).
- **Community and Support:**
  - Many team are already using the `create-abyss-app`, it offers significant support, regular updates, and a large number of resources for troubleshooting.

## Existing Application

For teams that want to use Abyss web within an existing React framework (i.e. NextJs) or are unable to migrate their existing application to a create-abyss-app you can still use Abyss within your application.

### Peer dependencies

Please note that react and react-native are peer dependencies, meaning you should ensure they are installed before installing Abyss.

```jsx
"peerDependencies": {

   "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
   "react-native": ">=0.63.0 <1",
   "react-native-safe-area-context": ">=3.0.0",
   "react-native-screens": ">=2.0.0",
   "react-native-svg": ">=12.0.0"
   "@react-navigation/bottom-tabs": ">=5.0.0",
   "@react-navigation/native": ">=5.0.0",
   "@react-navigation/native-stack": ">=5.0.0",
},
```

### Install Abyss Mobile

To add Abyss mobile to an existing application, first install the Abyss dependencies:

```jsx
npm install @uhg-abyss/mobile
```

Then, wrap your application root component with [`ThemeProvider`](/mobile/ui/theme-provider).
The `ThemeProvider` enables global theming for your application, with the option to customize or rely on the default styles of Abyss components. Utilizing React's context, it distributes your theme to all nested components.

```jsx
import { ThemeProvider } from '@uhg-abyss/mobile/ui/ThemeProvider';

const theme = createTheme('uhc');

function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}
```

## Upgrading Abyss

Abyss releases [New Versions](/mobile/releases/) on a biweekly basis. For further details, refer to our [Versioning Guide](/mobile/developers/migration/versioning-guide/).
Benefits to staying current with the latest version of Abyss include:

- **Adhering to Brand Guidelines**
  - Align with the latest branding guidelines, ensuring your application maintains a consistent look and feel with the overall brand identity.
- **Enhanced Security**
  - Address vulnerabilities and security enhancements to protect your application against emerging threats.
- **Improved Accessibility**
  - As accessibility standards evolve, Abyss updates provide enhancements and fixes that help ensure your application is accessible to all users, including those with disabilities.
- **Access to New Components Features**
  - Gain access to new components and features that can enrich the user experience and offer new functionality for your application.
- **Bug Fixes**
  - Addresses defects that improve the stability and performance of your application.
- **Efficient Upgrades and Minimal Regression Testing**
  - Staying updated with the latest version simplifies the upgrade process and minimizes related regression testing efforts.

### How To Upgrade Abyss

You can upgrade Abyss by running the following command in the root of your application:

```bash
npm install @uhg-abyss/mobile@latest
```

```bash
yarn add @uhg-abyss/mobile@latest
```

---
id: v2-prepping-guide
title: Prepping for V2
---

```jsx render
<Docs.MigrationGuideWidget />
```

## Prepping for V2 of Abyss

This is a prepping guide for ways teams can prepare for the
upgrade from Abyss V1 to V2 before V2 is officially released.

**What is the difference between a prepping guide and a migration guide?**

This prepping guide is different from the migration guide that will be released with Abyss V2. Understanding these differences will help you plan your approach:

| Prepping Guide (Current)                        | Migration Guide (Future)                                     |
| ----------------------------------------------- | ------------------------------------------------------------ |
| Available **before** V2 release                 | Will be available **after** V2 release                       |
| Focuses on **gradual preparation**              | Provides comprehensive instructions for full migration to V2 |
| Helps distribute workload across sprints        | Will be a one-time migration effort                          |
| Identifies components to start replacing now    |                                                              |
| Allows teams to adopt V2 patterns incrementally |                                                              |
| **Reduces** migration complexity later          |                                                              |

<br />
By following this prepping guide now, you'll significantly reduce the effort required
when the full migration guide is released with Abyss V2.

## Dependencies

```jsx
// from:
- "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

// to:
+ "react": "^18.0.0 || ^19.0.0"
```

## Components

With the migration to Abyss V2 we are making several changes to our components. This includes:

- **Prop changes**: Some props have been removed, modified, or renamed.
- **Class changes**: Some classes have been removed and renamed.
- **Component deprecations**: Some components will be deprecated and replaced with new ones.
- **Component breaking changes**: Some components will have breaking changes that may affect how they are used in your application.

### Deprecations

Here is a list of tools/hooks/components that will no longer be available in Abyss V2:

**Note:** This list is not exhaustive and may change as we finalize the migration.

<DeprecationTable library="mobile" />

<br />

Teams should start replacing these components with their new counterparts or alternative
solutions **now**, rather than waiting for the V2 release. By proactively doing this
now, you can:

- Reduce the refactoring effort required when V2 is officially released
- Migrate in smaller, more manageable increments
- Identify and resolve integration issues earlier
- Ensure a smoother and quicker transition to V2

### Component breaking changes

We've documented all component changes to help with migration planning. For details, see the [Component Changes](/mobile/developers/migration/v2/components/) section.

Many V2 components are already available with a "V2" prefix (e.g., `V2Button`). Start using these now to ease migration.

**Note:** When V2 is officially released, the "V2" prefix will be removed and these components will replace their V1 counterparts. For example, `V2Button` will become `Button`.

**Why should I use the V2 components now?**

- Familiarize yourself with the new APIs and features
- Identify any potential issues or changes in behavior early
- Ensure your codebase is ready for the V2 release without needing a complete overhaul
- Many of these components were completely rewritten to improve performance, accessibility, and usability
- These components have many added features and improvements that are not available in the V1 components (e.g., tokens, design improvements, etc.)

**Note:** These V2 components may change before the official V2 release. However, they are stable for production use and can be safely integrated into your application.

---
id: v1-to-v2-guide
title: V1 to V2 Guide
isHidden: true
---

```jsx render
<Docs.MigrationGuideWidget />
```

---
id: components
title: Component Changes
---

```jsx render
<Docs.MigrationGuideWidget />
```

## Overview

This guide focuses on breaking prop changes to be aware of when migrating from Abyss V1 to V2. These include:

- Props that have been removed
- Props whose behavior or typings have been updated
- Props whose names have been changed but whose functionality remains the same.

This guide does **not** cover:

- New props added in V2
- Class changes
- Token changes
- Additional features and enhancements

For complete documentation of all available props, including new features added, refer to each component's dedicated documentation page.

## Badge

<MobileBadgeMigration />

## Banner

<MobileBannerMigration />

## Button

<MobileButtonMigration />

## Carousel

<MobileCarouselMigration />

## CellGroup

<MobileCellGroupMigration />
### Cell

<MobileCellMigration />

## DonutChart

<MobileDonutChartMigration />

## LoadingSpinner

<MobileLoadingSpinnerMigration />

## Popover

<MobilePopoverMigration />

## Rating

<MobileRatingMigration />

## SelectInputMulti

<MobileSelectInputMultiMigration />

## Skeleton

<MobileSkeletonMigration />

## Timeline

<MobileTimelineMigration />

---
id: overview
title: Overview
---

Abyss is a full-stack mobile application framework that enables you to build products faster and easier than ever. It features a comprehensive set of tools that weaves together the best parts of <ExitLink href="https://reactnative.dev/">React Native</ExitLink> and <ExitLink href="https://graphql.org">GraphQL</ExitLink>. By taking common patterns and modularizing them into accessible and reusable packages, Abyss is designed to accelerate the development of production-ready React Native applications.

The framework handles all heavy lifting behind the scenes, allowing you to focus on core business logic specific to your product. Automated code quality tools analyze, identify, and correct errors in the code, giving developers real-time feedback and training to standardize programming styles. With improvements in project maintainability, scalability, and source code quality, Abyss aims to deliver the best overall development experience.

Developers looking to use Abyss must have, or obtain access via Secure, to Artifactory (repo1.uhc.com)

<!-- ## Building with Abyss
Before you begin, be sure to follow our [workspace setup](/mobile/developers/workspace-setup) guide.

The Abyss scaffold project includes all of the tools and libraries pre-installed you need to start developing. Try importing the React Native code below and see!

```jsx
import { Alert } from '@uhg-abyss/mobile';

export const App = () => {
  return (
    <Alert
      title="Task Completed!"
      description="You have successfully imported an Abyss component!"
      variant="info"/>
    );
};
```

<br/>

```jsx render
<Alert title="Task Completed!"
      description="You have successfully imported an Abyss component!"
      variant="info"/>
``` -->

## Learning React Native

Just starting your journey with React Native? Abyss is a framework built on top of the popular React Native library. To get started, visit the <ExitLink href="https://reactnative.dev/docs/environment-setup">React Native documentation</ExitLink>. If you are interested in learning high-level concepts, check out the <ExitLink href="https://reactnative.dev/docs/getting-started">getting started guide for React Native</ExitLink>.

## Developer Tools

Abyss is built using a list of trusted resources. Below are links to what makes up the framework of Abyss Mobile.

```jsx render
() => {
  const devLinks = [
    {
      id: 1,
      name: 'React Native',
      href: 'https://reactnative.dev/',
    },
    {
      id: 2,
      name: 'Emotion',
      href: 'https://emotion.sh/docs/introduction',
    },
    {
      id: 3,
      name: 'React Navigation',
      href: 'https://reactnavigation.org/docs/getting-started',
    },
    {
      id: 4,
      name: 'npm ',
      href: 'https://docs.npmjs.com/about-npm',
    },
  ];

  return (
    <Layout.Stack>
      <Layout.Group style={{ flexFlow: 'row wrap' }}>
        {devLinks.map((link) => {
          return (
            <Docs.Button
              key={link.href}
              variant="outline"
              style={{
                borderRadius: '5px',
                marginRight: '8px',
                marginBottom: '8px',
              }}
              href={link.href}
              after={<IconSymbol icon="arrow_forward" color="$primary1" />}
            >
              {link.name}
            </Docs.Button>
          );
        })}
      </Layout.Group>
    </Layout.Stack>
  );
};
```

## Support

If you're ready to get started with Abyss for your next project, check out our [Contact Us](/mobile/contact-us) page. Submit a new support request and let us know how we can help your team. If you found Abyss to be helpful, please <ExitLink href="https://github.com/uhc-tech/abyss">give us a star on github</ExitLink>!

---
id: style-customization
title: Style Customization
description: Guide to override styles for Abyss components.
design: https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Design-System?node-id=0%3A1
---

## Overview

Every Abyss component supports style customization using class names. Customization should be kept at a minimum, as the Abyss components are set to create a standard across all UHG affiliated products.

## Prop Overrides

To apply your styles to any component, go to the **Integration** tab under component documentation and find the classes table. The class name column will tell you how to target specific elements in any component.

### Button Example

Here you have a default `Button` component.

```jsx live
<Layout.Group>
  <Button>Primary Button</Button>
  <Button variant="secondary">Secondary Button</Button>
</Layout.Group>
```

<br />

Similarly, to customize `Button` component, you can target specific class names to change the styles. The `Button` component should maintain a 3:1 color contrast ratio. Please visit the [accessibility](/accessibility) documentation page to read more on designing an accessible component.

```jsx render
<Docs.ClassesTable
  aria-labelledby={'Button class table'}
  of={Button}
  rows={[
    {
      name: 'button-root',
      description: 'Button root element',
    },
    {
      name: 'button-label',
      description: 'Button label element',
    },
  ]}
/>
```

```jsx
// Add styles to Button
<Button
  styles={{
    'abyss-button-root': {
      backgroundColor: '#d9f6fa',
    },
    'abyss-button-label': {
      color: '#002677',
    },
  }}
/>
```

```jsx live
<Layout.Group>
  <Button
    styles={{
      'abyss-button-root': {
        backgroundColor: '#d9f6fa',
      },
      'abyss-button-label': {
        color: '#002677',
      },
    }}
  >
    Custom Button
  </Button>
  <Button
    styles={{
      'abyss-button-root': {
        backgroundColor: '#002677',
      },
      'abyss-button-label': {
        fontWeight: 900,
        color: '#d9f6fa',
      },
    }}
  >
    Custom Button
  </Button>
</Layout.Group>
```

## States

Components that allow for additional customization depending on their state can be configured by passing the desired style to the Abyss class using the `&:state` selector. Available states will be displayed on the integration tab.

```jsx live
() => {
  const today = new Date();
  const day = today.getDate();
  const [value, setValue] = useState(today);

  return (
    <Calendar
      value={value}
      onChange={setValue}
      excludeDate={(date) => {
        return date.getDay() === 6;
      }}
      styles={{
        'abyss-calendar-day-label': {
          '&:selected': { color: '$primary1' },
          '&:disabled': { color: '#99A8C9' },
        },
        'abyss-calendar-selection-circle': {
          backgroundColor: '#d9f6fa',
        },
      }}
    />
  );
};
```

---
id: quality-engineering
title: Quality Engineering
description: QE Testing Overview
---

## Dedication To Quality

<DedicationToQuality />

## Test Plan

<TestPlan />

## Automation Testing

Automation testing of Abyss components is a top priority. Currently, our automation tests consist of the following:

### Web

<AutomationWeb />

### Mobile

<AutomationMobile />

### Unit Testing

<UnitTesting />

## Manual Testing

<ManualTesting />

## FAQ

<FAQ />

---
id: end-user-spec
title: End User Specifications
description: Abyss Spec
---

## Version Requirements

<Requirements />

## Testing and Review

<Testing />

## How are these numbers calculated?

<Metrics />

## Abyss Web

<WebTable />

## Abyss Mobile

<MobileTable />

<br />
<br />

\* Last updated March 2025. To ensure this document is kept up to date and relevant, it should be revisited and revised with the latest metrics information on a set schedule, such as quarterly or bi-annually.

---
id: component-testing
title: Component Testing
description: Guide on how to facilitate testing of Abyss Mobile components.
---

## testID

To facilitate the usage of component testing libraries such as **[React Native Testing Library](https://callstack.github.io/react-native-testing-library/docs/getting-started)** you have the option of adding a `testID` attribute to a component's corresponding elements. By passing `testID` in as a prop with a value of the desired string id this attribute will be appended to all component elements that include a unique Abyss class name. Please see the Integration tab and the Classes sub-heading for each component to determine which elements will receive this test id. The resulting `testID` value will be a concatenated string that combines the value passed in with the prop and the element's unique class name.

For example, the following code:

```jsx live
<Notification date={new Date(2025, 4, 13)} testID="my-test-ID">
  Add your dependents to your account to view their claims and coverage.
</Notification>
```

will render the following structure:

```jsx
<View
  accessibilityRole="button"
  accessible={true}
  testID="my-test-ID-abyss-notification-root"
>
  <View testID="my-test-ID-abyss-notification-dot" />
  <View>
    <Text testID="my-test-ID-abyss-notification-text">
      Add your dependents to your account to view their claims and coverage.
    </Text>
    <Text testID="my-test-ID-abyss-notification-date">May 13, 2025</Text>
  </View>
</View>
```

## Change testing strategy

By default, the `testID` will have an abyss class name appended to it. If you do not want this, you can use the [`TestProvider`](/mobile/ui/TestProvider) component to change the testing strategy.

The `TestProvider` component has two strategies: `"class"` and `"root"`.

### Root strategy

The `"root"` strategy applies the `testID` only to the root element of the component. This means you won't be able to target nested elements within the Abyss component for testing.

For example, let's say the `testID` of [ProgressBar](/mobile/ui/ProgressBar) is set to `"your-test-ID"`.

```jsx
<TestProvider strategy="root">
  <ProgressBar testID="your-test-ID" />
</TestProvider>
```

You can use the following code to find and test the element:

```jsx
import { render } from '@testing-library/react-native';

const screen = render(
  <TestProvider strategy="root">
    <ProgressBar testID="your-test-ID" />
  </TestProvider>
);
const element = screen.getByTestId('your-test-ID');
```

### Class strategy

The `"class"` strategy (similar to default) allows testing of nested components by appending the Abyss class name to your `testID`. This creates unique identifiers for each element within the component.

For example, let's say the `testID` of [ProgressBar](/mobile/ui/ProgressBar) is set to `"your-test-ID"`.

```jsx
<TestProvider strategy="class">
  <ProgressBar testID="your-test-ID" />
</TestProvider>
```

You will have to look at the classes for the ProgressBar component to determine which elements will receive this test ID
and have its class name appended to it.

```jsx render
<Docs.ClassesTable
  of={ProgressBar}
  rows={[
    {
      name: 'progress-bar-root',
      description: 'Progress bar root element',
    },
    {
      name: 'progress-bar-slide',
      description: 'Progress bar slide',
    },
  ]}
/>
```

The resulting test IDs will be _**`"your-test-ID-abyss-progress-bar-root"`**_ & _**`"your-test-ID-abyss-progress-bar-slide"`**_.

You can then use the following code to find and test an element's subcomponents:

```jsx
import { render } from '@testing-library/react-native';

const screen = render(
  <TestProvider strategy="class">
    <ProgressBar testID="your-test-ID" />
  </TestProvider>
);
const element = screen.getByTestId('your-test-ID-abyss-progress-bar-slide');
```

---
id: accessibility-testing
title: Accessibility Testing
---

## Overview

Mobile accessibility, also known as A11Y, is the design and creation of mobile applications that can be used by everyone regardless of age, device, or disability. Accessibility support is necessary to allow assistive technology to interpret mobile pages. Abyss fully supports building accessible mobile applications and follows the Web Content Accessibility Guidelines <ExitLink href="https://www.w3.org/WAI/standards-guidelines/mobile/">(WCAG 2.1)</ExitLink> and the <ExitLink href="https://uhgazure.sharepoint.com/sites/a11y-engineering-standards">UHG Accessibility Engineering Standards</ExitLink> by the Accessibility Center of Excellence (ACOE).

The list below are steps to take as a developer to ensure accessibility compliance. Please take a minute to read through the following testing resources and familiarize yourself with how to utilize them for best practices.

## Keyboard Navigation

Use an external Bluetooth keyboard only to navigate the page without using your finger to tap or swipe. A visual indicator, known as the keyboard focus, should appear when navigating content. Look for difficulty reaching or activating interactive components, or if the focus becomes trapped on portions of the screen.

Expected keyboard behavior for custom components is typically the following, but there are exceptions

- Content navigation
  - **Tab** to enter a component
  - Use **arrow keys** to navigate within the component
  - **Tab** to exit the component
- Interacting with CTA or form components
  - **Enter** or **Space** to mimic a ‘tap’ or ‘press’
  - **Arrow keys** to navigate to an item within a list OR mimic a ‘swipe’
  - **Tab** to move onto the next item

## Desktop Development Tools

XCode's Accessibility Inspector tool is available for inspecting the code of the application for accessibility features and labels via a mobile emulator.

## Screen Reader Mobile Controls

A Screen Reader is an accessibility tool used primarily by sight-deficient users to navigate computer/mobile content. They interact with applications by reading aloud the content presented in the code. On mobile devices, users utilize either custom tap/swipe controls, Bluetooth keyboards, or both, to interact with the application. These users are impacted the most from lacking A11Y implementation.

Testing with a screen reader on physical mobile devices is important to understand if the code is working effectively for these tools.

Mobile devices provide the following screen readers, each with similar, yet unique functionality

- iOS VoiceOver: <ExitLink href="https://support.apple.com/guide/iphone/learn-voiceover-gestures-iph3e2e2281/ios">Learn about VoiceOver gestures</ExitLink>
- Android TalkBack: <ExitLink href="https://support.apple.com/guide/iphone/learn-voiceover-gestures-iph3e2e2281/ios">Learn about TalkBack gestures</ExitLink>

## NPM Packages

Most NPM packages rely on axe-core. Set an impact level and start with critical issues then work down. Remember to allow time to fix critical issues in the User Story. Otherwise, the product developers will get frustrated and learn to ignore the errors, which defeats the purpose and doesn't help anyone.

## Linting

For linting rules, work with an Accessibility Engineer to determine what to include there.

## Summary

Remember, the tools/processes mentioned above don't catch all A11Y issues, but they serve as a great start to empowering the team to do some of your own testing.

You can learn more from the Mobile Accessibility page in the <ExitLink href="https://uhgazure.sharepoint.com/sites/accessibility-knowledge-center/SitePages/Mobile-accessibility.aspx">Accessibility Knowledge Center</ExitLink>.

For further information, reach out to an Accessibility Engineer!

## Accessibility Tools

If you're looking for an in-depth overview of what accessibility standards Abyss is working towards, visit our Abyss [Accessibility page](/web/accessibility).

```jsx render
() => {
  const accessibilityLinks = [
    {
      id: 1,
      name: 'WCAG 2.1',
      href: 'https://www.w3.org/WAI/WCAG21/Understanding/',
    },
    {
      id: 2,
      name: 'Color Contrast Analyser (CCA)',
      href: 'https://webaim.org/resources/contrastchecker/',
    },
    {
      id: 3,
      name: 'W3 Validator',
      href: 'https://validator.w3.org/favelets.html',
    },
    {
      id: 4,
      name: 'Digital A11y',
      href: 'https://www.digitala11y.com/accessibility-bookmarklets-testing/',
    },
    {
      id: 5,
      name: 'React Native Accessibility',
      href: 'https://reactnative.dev/docs/accessibility',
    },
  ];
  return (
    <Layout.Stack>
      <Layout.Group style={{ flexFlow: 'row wrap' }}>
        {accessibilityLinks.map((link) => {
          return (
            <Docs.Button
              key={link.href}
              variant="outline"
              style={{
                borderRadius: '5px',
                marginRight: '8px',
                marginBottom: '8px',
              }}
              href={link.href}
              after={<IconSymbol icon="arrow_forward" color="$primary1" />}
            >
              {link.name}
            </Docs.Button>
          );
        })}
      </Layout.Group>
    </Layout.Stack>
  );
};
```

---
id: create-abyss-app
title: Create Abyss App
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

Before starting, be sure to complete the [Workspace Setup](/mobile/developers/workspace-setup/) guide.

### Step 1: Create an App

Now, let's get started. Navigate to your terminal in order to create a new project named **"my-new-app"**. Once there, run the following command:

```bash
npx create-abyss-app my-new-app
```

### Step 2: Navigate to Project Directory

Next, navigate into the **my-new-app** project directory by running the command below:

```bash
cd my-new-app
```

### Step 3: Run Abyss

Finally, run the following command in order to get localhost running:

```bash
npm run mobile
```

Once you see the screen shown below, you are now up and running with Abyss!

```jsx render:phone
() => {
  const Container = styled('ScrollView', {
    height: '90%',
  });

  const theme = createTheme('uhc');

  const links = [
    {
      title: 'About Us',
      description: 'Learn more about the Abyss library',
      url: 'https://abyss.uhc.com/web/about',
    },
    {
      title: 'Components',
      description: 'View the full list of components inside Abyss Mobile',
      url: 'https://abyss.uhc.com/mobile/ui/button',
    },
    {
      title: 'Tokens',
      description: 'View our pallete of color tokens',
      url: 'https://abyss.uhc.com/mobile/brand/uhc/colors/',
    },
    {
      title: 'Custom Styling',
      description: 'Learn how to customize Abyss components',
      url: 'https://abyss.uhc.com/mobile/developers/style-customization',
    },
    {
      title: 'Navigation',
      description:
        'Learn to handle moving between screens inside your application',
      url: 'https://abyss.uhc.com/mobile/tools/create-bottom-tab-navigator',
    },
    {
      title: 'Support',
      description: 'Need help? Vsit our support page',
      url: 'https://abyss.uhc.com/mobile/contact-us',
    },
  ];

  return (
    <ThemeProvider theme={theme}>
      <Container contentContainerStyle={{ marginTop: 24 }}>
        <View
          style={{
            alignItems: 'center',
            paddingHorizontal: 16,
            paddingTop: 16,
          }}
        >
          <Image
            accessible
            aria-label="Abyss"
            role='img'
            style={{
              width: 150,
              height: 150,
              opacity: 0.8,
            }}
            source={'/img/logo.svg'}
          />
          <Heading offset={5} style={{ margin: 8}} role='heading'>Welcome to Abyss</Heading>
          <Text style={{ marginHorizontal: '$sm' }}>
            Edit <Text style={{ fontWeight: '$bold' }}>App.tsx</Text> to change
            this screen and then come back to see your edits.
          </Text>
          <Layout.Group space={16} style={{ marginVertical: '$md' }}>
            <Brandmark
              brand="uhc"
              affiliate="uhc"
              variant="lockup"
              color="blue"
              size={80}
            />
            <Brandmark
              brand="uhg"
              affiliate="uhg"
              variant="lockup"
              color="blue"
              size={80}
            />
            <Brandmark
              brand="optum"
              affiliate="optum"
              variant="lockup"
              color="orange"
              size={80}
            />
          </Layout.Group>
        </View>
        <CellGroup fullBorder style={{ backgroundColor: 'transparent' }}>
          {links.map((link) => {
            return (
              <CellGroup.Cell
                key={link.title}
                title={link.title}
                titleColor="$info1"
                titleWeight="$bold"
                description={link.description}
                onPress={() => window.open(link.url)}
              />
            );
          })}
        </CellGroup>
      </Container>
    </ThemeProvider>
  );
};
```

<br />

Great job, you have successfully created an abyss app!

---
id: import-components
title: Import Components
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

<!-- Before starting, be sure to complete the [Create Abyss App](/mobile/developers/tutorials/create-abyss-app/) tutorial. -->

### Step 1: Open App.tsx

In Visual Studio Code, open **my-new-app** project. From here, navigate into **products/mobile**, and open the **App.tsx** file.

```txt
└── products
    └── mobile
        └── App.tsx
```

### Step 2: Import React

Anytime you’re using a react component, make sure to import the following dependency at the top:

```jsx
import React from 'react';
```

### Step 3: Importing Component

Depending on the project requirements, the **@uhg-abyss/mobile/ui**, **@uhg-abyss/mobile/hooks**, and **@uhg-abyss/mobile/tools** libraries have different components in order to assemble products quickly.

There are three ways to import resources: Directly from one of the libraries above, from **@uhg-abyss/mobile**, or from the file for that resource
**@uhg-abyss/mobile/ui/ComponentName**

Let's start with the **Card** component. A Card acts as a container used to display content related to a single subject.

You can access the documentation for the [Card](/mobile/ui/card/) through the Abyss Portal. The import statement for a card can be any of the following:

```jsx
import { Card } from '@uhg-abyss/mobile';
```

```jsx
import { Card } from '@uhg-abyss/mobile/ui';
```

```jsx
import { Card } from '@uhg-abyss/mobile/ui/Card';
```

In **App.tsx**, within the tsx of **App** functional component, insert the following code:

```jsx
<Card style={{ padding: 16, alignItems: 'center' }}>
  <Heading>Hello tutorial</Heading>
  <Text>We did it!</Text>
</Card>
```

### Step 4: Verifying Your Code

Your code in **App.tsx** should now look similar to this:

```jsx
import React from 'react';
import { Image, SafeAreaView, ScrollView, View } from 'react-native';
import {
  createTheme,
  ThemeProvider,
  Layout,
  Text,
  Card,
  Heading,
} from '@uhg-abyss/mobile';

const theme = createTheme('uhc');

function App(): React.JSX.Element {
  return (
    <ThemeProvider theme={theme}>
      <SafeAreaView>
        <ScrollView>
          <View style={{ alignItems: 'center', padding: 16 }}>
            <Image
              accessible
              accessibilityLabel="Abyss Logo"
              style={{
                width: 150,
                height: 150,
                opacity: 0.8,
              }}
              source={require('./assets/Abyss_Logo.png')}
            />
            <Text
              style={{
                marginVertical: '$md',
                fontWeight: '$bold',
                fontSize: '$xl',
              }}
            >
              Welcome to Abyss
            </Text>
            <Text style={{ marginHorizontal: '$sm' }}>
              Edit <Text style={{ fontWeight: '$bold' }}>App.tsx</Text> to
              change this screen and then come back to see your edits.
            </Text>
            <Layout.Space />
            <Card style={{ padding: 16, alignItems: 'center' }}>
              <Heading>Hello tutorial</Heading>
              <Text>We did it!</Text>
            </Card>
          </View>
        </ScrollView>
      </SafeAreaView>
    </ThemeProvider>
  );
}

export default App;
```

```jsx render
const App = () => {
  const theme = createTheme('uhc');

  return (
    <ThemeProvider theme={theme}>
      <SafeAreaView>
        <ScrollView>
          <View style={{ alignItems: 'center', padding: 16 }}>
            <Image
              accessible
              accessibilityLabel="Abyss Logo"
              style={{
                width: 150,
                height: 150,
                opacity: 0.8,
              }}
              source={'/img/logo.svg'}
            />
            <Text
              style={{
                marginVertical: '$md',
                fontWeight: '$bold',
                fontSize: '$xl',
              }}
            >
              Welcome to Abyss
            </Text>
            <Text style={{ marginHorizontal: '$sm' }}>
              Edit <Text style={{ fontWeight: '$bold' }}>App.tsx</Text> to
              change this screen and then come back to see your edits.
            </Text>
            <Layout.Space />
            <Card style={{ padding: 16, alignItems: 'center' }}>
              <Heading role="" level={null}>
                Hello tutorial
              </Heading>
              <Text>We did it!</Text>
            </Card>
          </View>
        </ScrollView>
      </SafeAreaView>
    </ThemeProvider>
  );
};

render(() => {
  return <App />;
});
```

<br />

Great job, you have successfully imported components!

---
id: screen-navigation
title: Screen Navigation
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

Before starting, be sure to complete the [Create Abyss App](/mobile/developers/tutorials/create-abyss-app/) tutorial.

## Step 1: Create New Files

In Visual Studio Code, open **my-new-app** project.
From here, navigate into **products/mobile/src/navigation**, and create a new file, named **"MyPlanNavigator.tsx"**.

Then, navigate to **products/mobile/src/screens**, and create a new folder named **MyPlan**. Within this folder, we'll be creating 3 files:
**"MyPlanScreen.tsx"**, **"CoverageScreen.tsx"**, and **"index.ts"**.

Your folder structure should look like this:

```txt
└── products
    └── mobile
        ├── src
        |   ├── navigation
        |   |   ├── HomeNavigator.tsx
        |   |   ├── MenuNavigator.tsx
        |   |   └── MyPlanNavigator.tsx
        |   ├── screens
        |   |   ├── Home
        |   |   ├── Menu
        |   |   ├── MyPlan
        |   |   |   ├── CoverageScreen.tsx
        |   |   |   ├── index.ts
        |   |   |   └── MyPlanScreen.tsx
        └── App.tsx
        └── package.json
```

## Step 2: Create MyPlan Screen

Lets create a screen! We'll add a Plan Coverage card.

In **"MyPlanScreen.tsx"**, insert the following code:

```jsx
import React from 'react';
import { View } from 'react-native';
import { Card, CellGroup, Heading, IconBrand } from '@uhg-abyss/mobile';

export const MyPlanScreen = ({ navigation, route }) => {
  return (
    <View style={{ padding: 16 }}>
      <Card>
        <Heading
          offset={4}
          style={{ paddingLeft: '$md', marginVertical: '$md' }}
        >
          Plan Coverage
        </Heading>
        <CellGroup hideBorderBottom style={{ backgroundColor: 'transparent' }}>
          <CellGroup.Cell
            icon={<IconBrand icon="heart" size="$xs" />}
            title="Coverage & Benefits"
            onPress={() =>
              navigation.navigate('Coverage', {
                benefits: ['Medical', 'Dental', 'Transportation'],
              })
            }
          />
        </CellGroup>
      </Card>
    </View>
  );
};
```

Then in **index.ts** , insert the following export command:

```jsx
// Exporting MyPlanScreen allows us to import and use MyPlanScreen in the Navigator
export { MyPlanScreen } from './MyPlanScreen';
```

In the code above, we have a Cell that navigates to another screen called **Coverage**.
The Coverage screen takes an array of benefits as a parameter.
Let's create that screen.

## Step 3: Create Coverage Screen

```jsx
import React from 'react';
import { View } from 'react-native';
import { Card, CellGroup, Heading } from '@uhg-abyss/mobile';

export const CoverageScreen = ({ navigation, route }) => {
  // The benefits array from MyPlanScreen
  const { benefits } = route.params;
  return (
    <View style={{ padding: 16 }}>
      <Card>
        <Heading
          offset={4}
          style={{ paddingLeft: '$md', marginVertical: '$md' }}
        >
          Coverage & Benefits
        </Heading>
        <CellGroup hideBorderBottom style={{ backgroundColor: 'transparent' }}>
          {benefits.map((benfit) => {
            return (
              <CellGroup.Cell key={benfit} title={benfit} onPress={() => {}} />
            );
          })}
        </CellGroup>
      </Card>
    </View>
  );
};
```

```jsx
// Exporting MyPlanScreen allows us to import and use MyPlanScreen in the Navigator
export { MyPlanScreen } from './MyPlanScreen';
```

Then in **index.ts** , add the screen to the list of exports:

```jsx
export { CoverageScreen } from './CoverageScreen';
export { MyPlanScreen } from './MyPlanScreen';
```

## Step 4: Create a Stack Navigator

Next, we will create the stack navigator. In **MyPlanNavigator.tsx**, insert the following code:

```jsx
import React from 'react';
import { Pressable } from 'react-native';
import { createStackNavigator, IconSymbol } from '@uhg-abyss/mobile';
import { MyPlanScreen, CoverageScreen } from '@/screens/MyPlan';

const MyPlanStack = createStackNavigator();

export const MyPlanNavigator = () => {
  return (
    <MyPlanStack.Navigator screenOptions={{ headerShown: true }}>
      <MyPlanStack.Screen
        name="MyPlan"
        component={MyPlanScreen}
        options={{ headerTitle: 'My Plan', headerTitleAlign: 'left' }}
      />
      <MyPlanStack.Screen
        name="Coverage"
        component={CoverageScreen}
        options={{
          headerTitle: 'Plan Coverage',
          headerTitleAlign: 'center',
          headerLeft: ({ goBack }) => (
            <Pressable onPress={goBack}>
              <IconSymbol icon="chevron_left" color="$white" />
            </Pressable>
          ),
        }}
      />
    </MyPlanStack.Navigator>
  );
};
```

## Step 5: Add MyPlan Tab

Next, we will add the MyPlan Stack Navigator, to the main tab bar.

Navigate into **products/mobile/App.tsx**. There should already be two existing `Tab.Screen` components, representing the Home and Menu tabs.
Let's place a new `Tab.Screen` in between the existing tabs so that the My Plan tab shows 2nd on the tab bar.

First import the `MyPlanNavigator`.

```jsx
import { MyPlanNavigator } from '@/navigation/MyPlanNavigator';
```

Then add the MyPlan tab

```jsx
...
<Tab.Screen
  options={{
    headerTitle: 'Home',
    tabBarLabel: 'Home',
    tabBarIcon: ({ active }) => (
      <IconCustom
        icon="home"
        size="$md"
        variant={active ? 'darkactive' : 'dark'}
      />
    ),
  }}
  name="HomeTab"
  component={HomeNavigator}
/>
<Tab.Screen
  options={{
    headerTitle: 'My Plan',
    tabBarLabel: 'My Plan',
    tabBarIcon: ({ active }) => (
      <IconCustom
        icon="my_plan"
        size="$md"
        variant={active ? 'darkactive' : 'dark'}
      />
    ),
  }}
  name="MyPlanTab"
  component={MyPlanNavigator}
/>
<Tab.Screen
  options={{
    headerTitle: 'Menu',
    tabBarLabel: 'Menu',
    tabBarIcon: ({ active }) => (
      <IconCustom
        icon="menu"
        size="$md"
        variant={active ? 'darkactive' : 'dark'}
      />
    ),
  }}
  name="MenuTab"
  component={MenuNavigator}
/>
...
```

## Step 6: Create Navigation Types

Navigate to **products/mobile/src/navigation** and open **"navigation.ts"**.

Let's create a new `type` to represent the two screens' parameters. The `MyPlan` screen has no parameters and the `Coverage`
screen has a benefits array of strings.

In **"navigation.ts"**, insert the following code.

```ts
type MyPlanTabParamList = {
  MyPlan: undefined;
  Coverage: { benefits: string[] };
};
```

Now, we can create a `type` for the navigation and route props of each screen.

In **"navigation.ts"**, insert the the following code.

```ts
export type MyPlanTabScreenProps<T extends keyof MyPlanTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<MyPlanTabParamList, T>,
    RootStackScreenProps<keyof RootStackParamList>
  >;
```

Next, let's navigate back to **"MyPlanScreen.tsx"** and add the `MyPlanTabScreenProps` type in the function's parameter.

```jsx
import { MyPlanTabScreenProps } from '@/types/navigation';

export const MyPlanScreen = ({
  navigation,
  route,
}: MyPlanTabScreenProps<'MyPlan'>) => {
  // rest of the code
};
```

We can do the same thing in **"Coverage.tsx"**.

```jsx
import { MyPlanTabScreenProps } from '@/types/navigation';

export const CoverageScreen = ({
  navigation,
  route,
}: MyPlanTabScreenProps<'Coverage'>) => {
  // rest of the code
};
```

<br />

Great job, you have successfully completed page routing!

---
id: custom-themes
title: Custom Themes
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

<!-- Before starting, be sure to complete the [Create Abyss App](/mobile/developers/tutorials/create-abyss-app/) tutorial. //TODO replace with mobile kit doc page when availabe-->

### Step 1: Create a Theme screen

In Visual Studio Code, open the **my-new-app** project. From here, navigate to **products/mobile/src/screens** and create a new folder named `ThemeScreen`. Within this new folder, create two new files named `index.ts` and `ThemeScreen.tsx`.

```txt
products
└── mobile
    └── src
        └── screens
            └── ThemeScreen
                ├── index.ts
                └── ThemeScreen.tsx
```

### Step 2: Choosing A Theme

In **ThemeScreen.tsx**, we are building our theme using the pre-defined `UHC` theme. You can choose between the different brands shown below:

Abyss offers several pre-defined themes: `UHC`, `UHG`, and `Optum`. You can find these themes [here](https://github.com/uhc-tech/abyss/tree/main/packages/abyss-mobile/src/tools/theme/variants).

While building **ThemeScreen.tsx**, you can choose any of the brands demonstrated below.

---

[UHC Theme](https://github.com/uhc-tech/abyss/blob/main/packages/abyss-mobile/src/tools/theme/variants/uhc.js)

```jsx
const theme = createTheme('uhc');
```

[UHG Theme](https://github.com/uhc-tech/abyss/blob/main/packages/abyss-mobile/src/tools/theme/variants/uhg.js)

```jsx
const theme = createTheme('uhg');
```

[Optum Theme](https://github.com/uhc-tech/abyss/blob/main/packages/abyss-mobile/src/tools/theme/variants/optum.js)

```jsx
const theme = createTheme('optum');
```

### Step 3: Customizing your Theme

There are multiple ways to customize and style your application. In this guide, we will focus on color and font customization.

To customize your brand's default themes to align with your product's branding, you can include a configuration object to add or override variables within the theme by adding values inside the **createTheme** function as shown below.

You can learn more about the **createTheme** function [here](/mobile/tools/create-theme).

```jsx
const theme = createTheme('uhc', {
  // Add custom colors
  theme: {
    colors: {
      customColor: 'purple',
    },
    // Add custom fonts
    fonts: {
      customFont: 'UHCSerif',
    },
  },
});
```

### Step 4: Viewing Theme

To view some of your theme updates, import some Abyss components into your project and see how they look!

```jsx sandbox
() => {
  // Add Custom Theme
  const theme = createTheme('uhc', {
    theme: {
      colors: {
        customColor: '#8943fe',
      },
      fonts: {
        customFont: 'UHCSerif',
      },
    },
  });

  return (
    //Define Custom Theme in theme prop
    <ThemeProvider theme={theme}>
      <Text>Standard Text</Text>
      <Text fontFamily="$customFont" color="$customColor">
        Customized Text
      </Text>
    </ThemeProvider>
  );
};
```

<br />

Great job, you have successfully customized a theme!

---
id: styled-components
title: Styled Components
---

---

**Note:** <br />We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our [Contact Page](/mobile/contact-us/).

---

<!-- Before starting, be sure to complete the [Create Abyss App](/mobile/developers/tutorials/create-abyss-app/) tutorial. //TODO replace with mobile kit doc page when availabe-->

### Step 1: Create a Styled Screen

In Visual Studio Code, open the **my-new-app** project. From here, navigate to **products/mobile/src/screens** and create a new folder named `StyledScreen`. Within this new folder, create two new files named `index.ts` and `StyledScreen.tsx`.

```txt
products
└── mobile
    └── src
        └── screens
            └── StyledScreen
                ├── index.ts
                └── StyledScreen.tsx
```

### Step 2: Creating Styled Components

You can use the **styled** tool to style existing components or create new styled components. To learn more, check out our [styled](/mobile/tools/styled/) function.

In your **StyledScreen.tsx** file, add the following import statements:

```jsx
import React from 'react';
import { IconBrand, Card, Text, styled } from '@uhg-abyss/mobile';
```

We will create an information box to demonstrate how to work with styled-components.

After your import statements, insert the following code:

```jsx
const StyledCard = styled(Card, {
  padding: '$sm',
  flexDirection: 'row',
  alignItems: 'center',
});

const StyledText = styled('Text', {
  fontWeight: '$semibold',
});
```

### Step 3: Rendering Styled Components

This component uses the **StyledCard**, and **StyledText** components we created previously. There are other features available in the [styled](/mobile/tools/styled/) function to customize and edit your components to best fit your product's custom designs.

In the **StyledScreen.tsx** file, add the following code to your **StyledScreen** component:

```jsx
export const StyledScreen = () => {
  return (
    <StyledCard color="$pastel1">
      <IconBrand
        icon="cost"
        size={30}
        variant="twotonelightcircle"
        brand="uhc"
      />
      <Text>
        Average cost in your area: <StyledText>$980</StyledText>
      </Text>
    </StyledCard>
  );
};
```

### Step 4: Viewing Styled Components

At the end of this tutorial, the code in your **StyledScreen.tsx** file should look like this:

```jsx
import React from 'react';
import { styled, IconBrand, Card, Text } from '@uhg-abyss/mobile';

const StyledCard = styled(Card, {
  padding: '$sm',
  flexDirection: 'row',
  alignItems: 'center',
});

const StyledText = styled('Text', {
  fontWeight: '$semibold',
});

const StyledScreen = () => {
  return (
    <StyledCard color="$pastel1">
      <IconBrand
        icon="cost"
        size={30}
        variant="twotonelightcircle"
        brand="uhc"
      />
      <Text>
        Average cost in your area: <StyledText>$980</StyledText>
      </Text>
    </StyledCard>
  );
};
```

On your device, your StyledScreen should look like this:

```jsx live
// Create styled Card
const StyledCard = styled(Card, {
  padding: '$sm',
  flexDirection: 'row',
  alignItems: 'center',
});

// Create styled Text
const StyledText = styled('Text', {
  fontWeight: '$semibold',
});

const StyledScreen = () => {
  return (
    <StyledCard color="$pastel1">
      <IconBrand
        icon="cost"
        size={30}
        variant="twotonelightcircle"
        brand="uhc"
      />
      <Text>
        Average cost in your area: <StyledText>$980</StyledText>
      </Text>
    </StyledCard>
  );
};

render(() => {
  return <StyledScreen />;
});
```

<br />

Great job, you have successfully styled components!

---
id: versioning-guide
title: Versioning Guide
---

## Overview

Stability ensures that reusable components and libraries, tutorials, tools, and learned practices don't become obsolete unexpectedly. Stability is essential for the ecosystem around Abyss to thrive.

This document contains the practices that are followed to provide you with a leading-edge UI library, balanced with stability, ensuring that future changes are always introduced in a predictable way.

## Semantic Versioning

Abyss follows <ExitLink href="https://semver.org">Semantic Versioning 2.0.0</ExitLink>. Abyss version numbers have three parts: major.minor.patch. The version number is incremented based on the level of change included in the release.

- **Major releases** contain significant new features, some but minimal developer assistance is expected during the update. When updating to a new major release, you may need to run update scripts, refactor code, run additional tests, and learn new APIs.
- **Minor releases** contain important new features. Minor releases should be fully backward-compatible; no developer assistance is expected during update, but you can optionally modify your apps and libraries to begin using new APIs, features, and capabilities that were added in the release.
- **Patch releases** are low risk, contain bug fixes and small new features. No developer assistance is expected during update.

<SemanticVersion />

## Release Frequency

A regular schedule of releases helps you plan and coordinate your updates with the continuing evolution of Abyss. In general, you can expect the following release cycle:

- A **major** release typically every year for major changes.
- A **minor** releases every two weeks after each sprint.
- A **patch** release at any time for urgent bugfixes.

## Deprecation Practices

Sometimes **"breaking changes"**, such as the removal of support for select APIs and features, are necessary.

To make these transitions as easy as possible:

- The number of breaking changes is minimized, and migration tools provided when possible.
- The deprecation policy described below is followed, so that you have time to update your apps to the latest APIs and best practices.

## Deprecation Policy

- Deprecated features are announced in the changelog, and when possible, with warnings at runtime.
- When a deprecation is announced, recommended update path is provided.
- Existing use of a stable API during the deprecation period is supported, so your code will keep working during that period.
- Peer dependency updates (React) that require changes to your apps are only made in a major release.

## Tested React Native versions

<ReactNativeVersionTable />

---
id: workspace-setup
title: Workspace Setup
pagination_prev: null
---

## Overview

Developing modern JavaScript applications requires efficient, powerful, and extensible tooling. Consistency across developer machines is a priority when collaborating across highly distributed teams. The following is a guide for installing the preferred environment for JS development.

![workspace setup](/img/graphics/workspace.svg)

## Secure Groups

Visit <ExitLink href="https://secure.uhc.com">secure.uhc.com</ExitLink> to request permissions groups:

- **github_users**: To access <ExitLink href="https://github.com">github.com</ExitLink>
- **Mac_Admin**: To install software for macOS users only

## VSCode Editor

To write code for UI projects, it is **highly recommended** that you download and install <ExitLink href="https://code.visualstudio.com">Visual Studio Code</ExitLink>.

![Visual Studio Code](https://code.visualstudio.com/assets/home/home-screenshot-mac-lg-2x.png)

## VSCode Extensions

Recommended extensions will be suggested to you when you visit the VSCode Marketplace.

- <ExitLink href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">ESLint</ExitLink> - code syntax validator

ESLint is a JavaScript linting tool which is used for automatically detecting incorrect patterns found in ECMAScript/JavaScript code. It is used with the purpose of improving code quality, making code more consistent, and avoiding bugs. Rules can be configured to look for all kinds of discrepancies due to discouraged code patterns or formatting. Running a Linting tool over the source code helps to improve the quality and readability of the code.

- <ExitLink href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</ExitLink> - code formatter

Prettier is very popular because it improves code readability and makes the coding style consistent for teams. Developers are more likely to adopt a standard rather than writing their own code style from scratch, so tools like Prettier will make your code look good without you ever having to dabble in the formatting.

## System Essentials

### Xcode

- <ExitLink href="https://mac.install.guide/commandlinetools/4.html">Xcode Command Line Tools</ExitLink> (Mac Only)

`xcode-select` contains necessary utilities for software development on macOS. Xcode's simulator will be used for viewing your app in an iOS environment.

```bash
xcode-select --install
```

<br/>

**_After install, exit and restart Terminal (CMD + Q)_**

```
$ xcode-select --version
```

### Android Studio

Install <ExitLink href="https://developer.android.com/">Android Studio.</ExitLink> The Virtual Device Manager will be use for viewing your app in an Android environment.

### Additional Tools

- <ExitLink href="https://ohmyz.sh/">oh-my-zsh</ExitLink> >= 5.3.0 (optional)

`zsh` is an optional upgrade to the native shell which provides a delightful terminal experience.

```bash
sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"
```

<br/>

**_After install, exit and restart Terminal (CMD + Q)_**

```bash
omz version
```

<br/>

---

- <ExitLink href="https://github.com/nvm-sh/nvm">node</ExitLink> >= 16.0.0

`nvm` is a great tool for installing and upgrading versions of Node on your system.

```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh | bash
```

<br/>

**_After install, exit and restart Terminal (CMD + Q)_**

```bash
nvm --version

nvm install 16 && nvm use 16 && nvm alias default 16
```

<br/>

**_After install, exit and restart Terminal (CMD + Q)_**

```
$ npm --version

$ npm config set registry https://repo1.uhc.com/artifactory/api/npm/npm-virtual
```

<br/>

---

- <ExitLink href="https://git-scm.com/book/en/v2/Getting-Started-Installing-Git">git</ExitLink> >= 2.0.0

`git` is a universal version control system for working collaboratively and efficiently.

```bash
git config --global user.id "YOUR_MS_ID"

git config --global user.email "YOUR_EMAIL@optum.com"
```

## Git Branch Names

Naming the branch you're working on helps repository maintainers understand the changes being made when the PR is opened. Using consistent branch name prefixes also allows build tools to automatically categorize the branches using labels. Branch names should be all lowercase (with the exception of US and DE) and include hyphens between words. All branches are divided into four groups:

- **story/#######** - Changes associated with a User Story, use the unique 7-digit number from Rally followed by a task description.

- **defect/#######** - Changes associated with a Defect, use the unique 7-digit number from Rally followed by a task description.

- **refactor/** - Changes to the repo that aren't documented in Rally are considered refactors, so use the task portion to add detail to your branch name.

- **release/** - Used specifically by build tools, this branch name is exclusive to release notes and documentation leading up to a new release.

Examples:

```
git checkout -b story/US2434515-developer-toolkit

git checkout -b defect/DE308703-button-accessibility

git checkout -b refactor/select-list-multi-docs

git checkout -b story/US1533842-use-loading-overlay
```

<br/>

Branch Name Rules:

- Branch prefix must start with **story**, **defect**, **refactor**, or **release**
- Branch name must be only **lowercase letters, numbers, and hypens**
- **US###** and **DE###** are valid character exceptions

---
id: use-animation
category: Utilities
title: useAnimation
description: Use to create standardized animation types for Abyss Mobile components
design: https://www.figma.com/proto/wCMblLsq9TxAQvKzY3EfCt/branch/c6ve0gNrTGpdwBIuJehC3n/Abyss-Mobile?page-id=41951%3A175&type=design&node-id=41951-176&viewport=741%2C524%2C0.06&t=33q3lqs409fRYj6B-1&scaling=scale-down-width&starting-point-node-id=41951%3A176&show-proto-sidebar=1
---

```jsx
import { useAnimation } from '@uhg-abyss/mobile';
```

## Usage

`useAnimation` hook standardizes the animation types for Abyss components and simplifies additional customization. The hook returns `animate`, `value`, `interpolations`, as well as other <ExitLink href='https://reactnative.dev/docs/animated#methods'>Animated</ExitLink> functions used throughout Abyss.

```jsx
export const useAnimation = (value: number, config: AnimationConfig) => {
  ...
  return {
    animate,
    value: animatedValue,
    interpolations,
    createAnimation,
    add,
    subtract,
    multiply,
    divide,
    delay,
    parallel,
    loop,
    sequence,
  };
};
```

## Animate

The `animate` function requires a toValue be passed in, with the option for overrides and a callback function.

```jsx
const animate = (
  toValue: number,
  configOverride?: Partial<AnimationConfigType>,
  callback?: Animated.EndCallback
) => {
  return createAnimation(toValue, configOverride).start(callback);
};
```

```jsx live
() => {
  const { animate, value, interpolations } = useAnimation(1, {
    easing: 'gentle',
    interpolations: {
      background: {
        inputRange: [0.95, 1],
        outputRange: ['$primary1', '$info1'],
        tokenType: 'colors',
      },
    },
  });

  const AnimatedButton = styled(Animated.createAnimatedComponent(Pressable), {
    justifyContent: 'center',
    alignItems: 'center',
    padding: '$md',
    borderRadius: 100,
    alignSelf: 'center',
  });

  return (
    <AnimatedButton
      onPressIn={() => {
        animate(0.95);
      }}
      onPressOut={() => {
        animate(1);
      }}
      style={{
        transform: [{ scale: value }],
        background: interpolations.background,
      }}
    >
      <Text color={'$primary2'} fontWeight={'$bold'}>
        Press Me
      </Text>
    </AnimatedButton>
  );
};
```

### Overrides

By default the animation type is set to `'timing'`. Additional types supported are `'spring'` and `'instant'` with the following animation config open to override:

```jsx
interface AnimationConfig extends BaseAnimationConfig {
  type?: 'spring' | 'timing' | 'instant';
  interpolations?: Record<string, InterpolationConfigType>;
  delay?: number | undefined;
  // timing
  easing?: Easing;
  duration?: number | undefined;
  // spring
  overshootClamping?: boolean | undefined;
  restDisplacementThreshold?: number | undefined;
  restSpeedThreshold?: number | undefined;
  velocity?: number | { x: number, y: number } | undefined;
  bounciness?: number | undefined;
  speed?: number | undefined;
  tension?: number | undefined;
  friction?: number | undefined;
  stiffness?: number | undefined;
  mass?: number | undefined;
  damping?: number | undefined;
}
```

## Interpolations

The `interpolations` prop can take in multiple interpolation objects to be used on the same animated value.

```jsx
    const { value, animate, interpolations } = useAnimation(1, {
      easing: 'gentle',
      interpolations:{
        backgroundColor: {
          inputRange: [0.95, 1],
          outputRange: ['$info1', '$primary1']
          tokenType: 'colors',
        },
          opacity: {
          inputRange: [0.95, 1],
          outputRange: [0, 1]
        },
      }
    });
```

```jsx live
() => {
  const { animate, value, interpolations } = useAnimation(1, {
    easing: 'gentle',
    interpolations: {
      background: {
        inputRange: [0.95, 1],
        outputRange: ['#00BED5', '$primary1'],
        tokenType: 'colors',
      },
      opacity: {
        inputRange: [0.95, 1],
        outputRange: [0.8, 1],
      },
    },
  });

  const Label = styled(Animated.Text, {
    color: '$white',
    fontSize: '$xs',
    lineHeight: '$xs',
    fontWeight: '$bold',
    marginTop: '$xs',
  });

  const AnimatedTabButton = styled(
    Animated.createAnimatedComponent(Pressable),
    {
      justifyContent: 'center',
      alignItems: 'center',
      padding: '$md',
      cornerRadius: 10,
      alignSelf: 'center',
    }
  );

  return (
    <AnimatedTabButton
      onPressIn={() => {
        animate(0.95);
      }}
      onPressOut={() => {
        animate(1);
      }}
      style={{
        transform: [{ scale: value }],
        background: interpolations.background,
      }}
    >
      <IconCustom variant={'darkactive'} size={24} icon={'my_plan'} />
      <Label
        style={{
          opacity: interpolations.opacity,
        }}
      >
        My Plan
      </Label>
    </AnimatedTabButton>
  );
};
```

## Additional Functionality

Other Animated methods currently used throughout Abyss components can also be returned.

```jsx
const parallel = (
  animations: Animated.CompositeAnimation[],
  parallelConfig?: Animated.ParallelConfig
) => {
  return Animated.parallel(animations, parallelConfig);
};

const loop = (
  animation: Animated.CompositeAnimation,
  loopConfig?: Animated.LoopAnimationConfig
) => {
  return Animated.loop(animation, loopConfig);
};

const sequence = (animations: Animated.CompositeAnimation[]) => {
  return Animated.sequence(animations);
};

const delay = (time: number) => {
  return Animated.delay(time);
};

const add = (num: number) => {
  return Animated.add(animatedValue, num);
};

const subtract = (num: number) => {
  return Animated.subtract(animatedValue, num);
};

const divide = (num: number) => {
  return Animated.divide(animatedValue, num);
};

const multiply = (num: number) => {
  return Animated.multiply(animatedValue, num);
};
```

## Accessibility Integration

The `useAnimation` hook has built-in integration with the [`useReduceMotion`](/mobile/hooks/use-reduce-motion) hook. This ensures that animated components automatically respect the user's "Reduce Motion" accessibility setting without requiring additional handling.

When "Reduce Motion" is enabled, the `useAnimation` hook adjusts the animation type to `'instant'`, minimizing motion effects. This makes it easier to create accessible components that align with user preferences.

---
id: use-device-orientation
category: Utilities
title: useDeviceOrientation
description: Used to retrieve the orientation of the mobile device
---

```jsx
import { useDeviceOrientation } from '@uhg-abyss/mobile';
```

## Usage

`useDeviceOrientation` measures the width and height of the screen and returns `'landscape'` or `'portrait'`.

```jsx
const orientation = useDeviceOrientation();
const iconSize = orientation === 'landscape' ? 20 : 24;

return <IconCustom icon="home" variant={'darkactive'} size={iconSize} />;
```

---
id: use-form
category: State Management
title: useForm
description: useForm is a hook for defining, validating and submitting forms.
sourceIsTS: true
---

```jsx
import { useForm } from '@uhg-abyss/mobile';
```

## Usage

The `useForm` hook is used to define, validate, and submit forms in Abyss. Use `useForm` along with the [FormProvider](/mobile/ui/form-provider)
component in order to better manage your forms and fully utilize the capabilities of form management within Abyss.
Abyss components that can be used with useForm have a `model` prop that is used to bind the component to the form state.
Validations can be defined on each component using the `validations` prop, which accepts an object with validation rules.
If a component fails validation, it will display an error message based on the validation rules defined.
When a form is successfully submitted, the function passed to the `onSubmit` prop will be called with the form data.

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    // Do something on submit
    alert(`FormData:  ${JSON.stringify(data)}`);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <TextInput
        data-testid="firstName"
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <TextInput
        data-testid="lastName"
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Button type="submit">Submit</Button>
    </FormProvider>
  );
};
```

## Default Values

The defaultValues prop populates the entire form with default values. It supports both synchronous and asynchronous assignments of default values.

```jsx live
() => {
  // Default Values Passed into useForm
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
    },
  });

  const onSubmit = (data) => {
    alert(`FormData:  ${JSON.stringify(data)}`);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <TextInput
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <TextInput
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Button type="submit">Submit</Button>
    </FormProvider>
  );
};
```

## Form State

This object contains information about the form state. If you want to subscribe to formState via useEffect, make sure that you place the entire formState in the optional array.

```jsx
const form = useForm();

const {
  errors, // An object with field errors
  isDirty, // Set to true after the user modifies any of the inputs.
  isValid, // Set to true if the form doesn't have any errors.
  isValidating, // Set to true during validation.
  isSubmitting, // true if the form is currently being submitted; false if otherwise.
  isSubmitted, // Set to true after the form is submitted.
  isSubmitSuccessful, //	Indicate the form was successfully submitted without any Promise rejection or Error being thrown within the handleSubmit callback.
  submitCount, //	Number of times the form was submitted.
  touchedFields, // An object containing all the inputs the user has interacted with.
  dirtyFields, // An object with the user-modified fields.
} = form.formState;
```

## Watch

This will watch specified inputs and return their values. It is useful for determining what to render.

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    alert(`FormData:  ${JSON.stringify(data)}`);
  };

  // Watch one field
  const WatchField = form.watch('firstName');

  // Target specific fields by their names
  const WatchFields = form.watch(['firstName', 'lastName']);

  // Watch everything by passing no arguments
  const WatchAllFields = form.watch();

  return (
    <React.Fragment>
      <FormProvider state={form} onSubmit={onSubmit}>
        <TextInput
          label="First Name"
          model="firstName"
          validations={{ required: true }}
          showValidations={false}
        />
        <TextInput
          label="Last Name"
          model="lastName"
          validations={{ required: true }}
          showValidations={false}
        />
        <Layout.Space />
        <Button type="submit">Submit</Button>
      </FormProvider>
      <Layout.Space />
      <Layout.Stack grow>
        <Text>Watch One Field: {JSON.stringify(WatchField)}</Text>
        <Text>Watch Multiple Fields: {JSON.stringify(WatchFields)}</Text>
        <Text>Watch All Fields: {JSON.stringify(WatchAllFields)}</Text>
      </Layout.Stack>
    </React.Fragment>
  );
};
```

## Handle Submit

This function will receive the form data if form validation is successful.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
    },
  });

  const onSubmit = (data, e) => alert('onSubmit');
  const onError = (errors, e) => alert('onError');

  return (
    <FormProvider state={form} onSubmit={onSubmit} onError={onError}>
      <TextInput
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <TextInput
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Button type="submit">Submit</Button>
    </FormProvider>
  );
};
```

## Validate Model

This function will receive the model data if form validation is successful.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
    },
  });

  const handleValidateFirst = () => {
    form.validate(
      'firstName',
      (data) => {
        alert(`FormData:  ${JSON.stringify(data)}`);
      },
      (error) => {
        delete error.ref;
        alert(`Error:  ${JSON.stringify(error)}`);
      }
    );
  };

  const handleValidateLast = () => {
    form.validate(
      'lastName',
      (data) => {
        alert(`FormData:  ${JSON.stringify(data)}`);
      },
      (error) => {
        delete error.ref;
        alert(`Error:  ${JSON.stringify(error)}`);
      }
    );
  };

  return (
    <FormProvider state={form}>
      <TextInput
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <TextInput
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Layout.Group>
        <Button type="button" onPress={handleValidateFirst}>
          Validate First Name
        </Button>
        <Button type="button" onPress={handleValidateLast}>
          Validate Last Name
        </Button>
      </Layout.Group>
    </FormProvider>
  );
};
```

## Set Error

The function allows you to manually set one or more errors.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
    },
  });

  // Set single error
  const setSingleError = () => {
    form.setError('firstName', {
      type: 'manual',
      message: 'There is an error with your name!',
    });
  };

  // Set multiple errors
  const setMultipleErrors = () => {
    [
      {
        type: 'manual',
        name: 'firstName',
        message: 'Check first name',
      },
      {
        type: 'manual',
        name: 'lastName',
        message: 'Check last name',
      },
    ].forEach(({ name, type, message }) => {
      form.setError(name, { type, message });
    });
  };

  // Set error for single field errors
  React.useEffect(() => {
    form.setError('firstName', {
      types: {
        required: 'This is required',
        minLength: 'This is minLength',
      },
    });
  }, []);

  return (
    <FormProvider state={form}>
      <TextInput label="First Name" model="firstName" />
      <TextInput label="Last Name" model="lastName" />
      <Layout.Space />
      <Layout.Group>
        <Button type="button" onPress={setSingleError}>
          Set Single Error
        </Button>
        <Button type="button" onPress={setMultipleErrors}>
          Set Multiple Errors
        </Button>
      </Layout.Group>
    </FormProvider>
  );
};
```

## Clear Errors

This function can manually clear errors in the form.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
      phone: '555-555-5555',
    },
  });

  const resetErrors = () => {
    [
      {
        type: 'manual',
        name: 'firstName',
        message: 'Required',
      },
      {
        type: 'manual',
        name: 'lastName',
        message: 'Required',
      },
      {
        type: 'manual',
        name: 'phone',
        message: 'Required',
      },
    ].forEach(({ name, type, message }) => {
      form.setError(name, { type, message });
    });
  };

  // Clear single error
  const clearSingleErrors = () => {
    form.clearErrors('firstName');
  };

  // Clear multiple errors
  const clearMultipleErrors = () => {
    form.clearErrors(['firstName', 'lastName']);
  };

  // Clear all errors
  const clearAllErrors = () => {
    form.clearErrors();
  };

  return (
    <FormProvider state={form}>
      <TextInput label="First Name" model="firstName" />
      <TextInput label="Last Name" model="lastName" />
      <TextInput label="Phone" model="phone" mask="phone" />
      <Layout.Space />
      <Layout.Group>
        <Button type="button" variant="secondary" onPress={resetErrors}>
          Set Errors
        </Button>
        <Button type="button" onPress={clearSingleErrors}>
          Clear Single Error
        </Button>
        <Button type="button" onPress={clearMultipleErrors}>
          Clear Multiple Error
        </Button>
        <Button type="button" onPress={clearAllErrors}>
          Clear All Errors
        </Button>
      </Layout.Group>
    </FormProvider>
  );
};
```

## Get Values

An optimized helper for reading form values. The difference between watch and getValues is that getValues will not trigger re-renders or subscribe to input changes.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      firstName: 'John',
      lastName: 'Doe',
      phone: '555-555-5555',
    },
  });

  // Read an individual field value by name
  const singleValue = form.getValues('firstName');

  // Read multiple fields by name
  const multipleValues = form.getValues(['firstName', 'lastName']);

  // Reads all form values
  const allValues = form.getValues();

  return (
    <React.Fragment>
      <FormProvider state={form}>
        <TextInput label="First Name" model="firstName" />
        <TextInput label="Last Name" model="lastName" />
        <TextInput label="Phone" model="phone" mask="phone" />
      </FormProvider>
      <Layout.Space />
      <p>Single Value: {JSON.stringify(singleValue)}</p>
      <p>Multiple Values: {JSON.stringify(multipleValues)}</p>
      <p>All Values: {JSON.stringify(allValues)}</p>
    </React.Fragment>
  );
};
```

## Trigger

Manually triggers form or input validation. This method is also useful when you have dependent validation (input validation depends on another input's value).

```jsx live
() => {
  const form = useForm();

  // Trigger one input to validate
  const triggerSingle = () => {
    form.trigger('firstName');
  };

  // Trigger multiple inputs to validate
  const triggerMultiple = () => {
    form.trigger(['firstName', 'lastName']);
  };

  // Trigger entire form to validate
  const triggerAll = () => {
    form.trigger();
  };

  const clearErrors = () => {
    form.clearErrors();
  };

  return (
    <FormProvider state={form}>
      <TextInput
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <TextInput
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <TextInput
        label="Phone"
        model="phone"
        mask="phone"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Layout.Group>
        <Button type="button" onPress={triggerSingle}>
          Trigger Single
        </Button>
        <Button type="button" onPress={triggerMultiple}>
          Trigger Multiple
        </Button>
        <Button type="button" onPress={triggerAll}>
          Trigger All
        </Button>
        <Button type="button" variant="outline" onPress={clearErrors}>
          Clear Errors
        </Button>
      </Layout.Group>
    </FormProvider>
  );
};
```

## Cross-Field Validation Example

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    console.log('data', data);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <TextInput
        label="First Name"
        model="firstName"
        validations={{ required: true }}
        showValidations={false}
      />
      <TextInput
        label="Middle Name"
        model="middleName"
        validations={{
          validate: (v) => {
            const checkValue = form.getValues('middleName-check');
            if (!checkValue && !v) {
              return 'Required';
            }
          },
        }}
        showValidations={false}
      />
      <Checkbox
        label="No Middle Name"
        model="middleName-check"
        onChange={() => {
          form.trigger('middleName');
        }}
      />
      <TextInput
        label="Last Name"
        model="lastName"
        validations={{ required: true }}
        showValidations={false}
      />
      <Layout.Space />
      <Button type="submit">Submit</Button>
    </FormProvider>
  );
};
```

## Additional Documentation

`@uhg-abyss/mobile/hooks/useForm` is a built on top of the `useForm` hook from <ExitLink href="https://react-hook-form.com/get-started">React Form Hook</ExitLink>.

**Note:** You should be using Abyss's `useForm` hook when using Abyss components and **not** react hook forms.

---
id: use-reduce-motion
category: Utilities
title: useReduceMotion
description: Used within animated components to respect a user's accessibility preferences.
---

```jsx
import { useReduceMotion } from '@uhg-abyss/mobile';
```

## Usage

The `useReduceMotion` hook is a custom hook designed to determine whether the user has enabled the "Reduce Motion" accessibility setting on their device. This setting is often used by individuals who prefer to minimize animations and motion effects for accessibility or comfort reasons.

The hook returns an object `{reducedMotionEnabled}` with the boolean value:

- `true`: "Reduce Motion" is enabled.
- `false`: "Reduce Motion" is disabled.

When reduce motion is enabled, this hook can be used to adjust animation behavior.

```jsx live
const AnimatedContainer = styled('Animated.View', {
  padding: '$lg',
  backgroundColor: '$primary1',
  width: 100,
  height: 100,
  margin: '$lg',
});

const SequentialAnimation = () => {
  const { reducedMotionEnabled } = useReduceMotion();
  const animatedValues = useRef([
    new Animated.Value(1),
    new Animated.Value(1),
    new Animated.Value(1),
  ]).current;

  useEffect(() => {
    const createAnimation = (index) =>
      Animated.sequence([
        Animated.timing(animatedValues[index], {
          toValue: 1.4,
          duration: 500,
          useNativeDriver: false,
        }),
        Animated.timing(animatedValues[index], {
          toValue: 1,
          duration: 500,
          useNativeDriver: false,
        }),
      ]);

    const loopAnimation = Animated.loop(
      Animated.stagger(250, [
        createAnimation(0),
        createAnimation(1),
        createAnimation(2),
      ])
    );

    loopAnimation.start();

    return () => loopAnimation.stop();
  }, []);

  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      {animatedValues.map((animatedValue, index) => (
        <AnimatedContainer
          key={index}
          style={[
            reducedMotionEnabled
              ? {
                  backgroundColor: animatedValue.interpolate({
                    inputRange: [1, 1.4],
                    outputRange: ['#002677', '#00BED5'],
                  }),
                }
              : {
                  transform: [{ scale: animatedValue }],
                },
          ]}
        />
      ))}
    </View>
  );
};

render(() => {
  return <SequentialAnimation />;
});
```

## Enabling Reduce Motion by Device

### iOS

- Open the Settings app
- Select Accessibility
- Choose Motion
- Toggle the switch next to Reduce Motion to on

### Android

- Open the Settings app
- Select Accessibility
- Depending on your Android version, look for Remove Animations (or similar)

### Windows

- Open Settings
- Select Accessibility
- Go to Visual Effects
- Toggle Animation Effects to off

### Mac OS

- Open System Settings
- Select Accessibility
- Choose Display
- Toggle Reduce Motion to on

## Additional Notes

- The hook listens for changes to the "Reduce Motion" setting and updates its value dynamically.
- The [`useAnimation`](/mobile/hooks/use-animation) hook integrates `useReduceMotion` directly, ensuring that animated components automatically respect the user's motion preferences without requiring additional handling.
- Use this hook to create a more inclusive and accessible experience for users who prefer minimal motion effects. Please refer to accessibility guidelines for animations when creating new components.
  - WCAG standards:
    - <ExitLink href="https://uhgazure.sharepoint.com/sites/a11y-engineering-standards/SitePages/CP-2.33-Animations-from-Interactions-Native-iOS.aspx?web=1">
        iOS
      </ExitLink>
    - <ExitLink href="https://uhgazure.sharepoint.com/sites/a11y-engineering-standards/SitePages/CP-2.33-Animations-from-Interactions-Native-Android.aspx?web=1">
        Android
      </ExitLink>

---
id: use-set-focus
category: Utilities
title: useSetFocus
description: Used to set accessibility focus on a specified element.
---

```jsx
import { useSetFocus } from '@uhg-abyss/mobile';
```

## Usage

The hook returns a function that consumes a ref object. Simply call said function to set the screen reader focus.

```jsx
const setFocus = useSetFocus();
const myRef = useRef(null);

return (
  <>
    <Button
      onPress={() => {
        return setFocus(myRef);
      }}
    >
      Focus Link
    </Button>
    <Link href="google.com" ref={myRef}>
      Link to be focused
    </Link>
  </>
);
```

## Example

In the example below, Android's Talkback can be seen focusing the bottom text when the `Focus Text` button is pressed.

<img src="/mobile/useSetFocus/useSetFocusDemo.gif" alt="" role="presentation" />

---
id: use-style-sheet
category: Styling
title: useStyleSheet
description: Used to parse styles from a StyleSheet
---

```jsx
import { useStyleSheet } from '@uhg-abyss/mobile';
```

The `useStyleSheet` hook helps to parse the additional functionality from the Abyss [StyleSheet](/mobile/ui/style-sheet).

## Usage

```tsx
useStyleSheet(styles: object): object
```

Take a look at StyleSheet below:

```jsx
const styles = StyleSheet.create({
  container: {
    padding: '$xs * 4px',
    margin: '$fontScale',
  },
  label: {
    color: '$gray4',
    fontWeight: '$bold',
    fontSize: '$lg',
    marginVertical: '$md * 2',
    fontFamily: '$heading',
  },
  box: {
    backgroundColor: '$interactive1',
    borderColor: '$error1',
    borderRadius: '$md * $sm',
    borderWidth: 4,
    width: '6rem',
    height: '48px * 3',
    marginBottom: '32px - 0.75rem',
    '@media (min-width: 767px)': {
      width: '12rem',
    },
  },
});
```

There's a lot of code that is unfamiliar to the normal StyleSheet. Above, there are _**media queries**_,
_**tokens**_, _**operations**_, _**rem values**_, and _**pixel values**_, which normally would not be able to be parsed by React
Native core component. This is where the `useStyleSheet` hook comes in. By using the hook, we can parse these
value into value that the core component can understand.

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    padding: '$xs * 4px',
    margin: '$fontScale',
  },
  label: {
    color: '$gray4',
    fontWeight: '$bold',
    fontSize: '$lg',
    marginVertical: '$md * 2',
    fontFamily: '$heading',
  },
  box: {
    backgroundColor: '$interactive1',
    borderColor: '$error1',
    borderRadius: '$md * $sm',
    borderWidth: 4,
    width: '6rem',
    height: '48px * 3',
    marginBottom: '32px - 0.75rem',
    '@media (min-width: 767px)': {
      width: '12rem',
    },
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <View style={styles.box} />
      <Layout.Group wrap alignItems="top">
        <Card padding="$lg">
          <Text style={styles.label}>Parsed Styles</Text>
          <Text>{JSON.stringify(styles, null, 4)}</Text>
        </Card>
        <Card padding="$lg">
          <Text style={styles.label}>Original Styles</Text>
          <Text>{JSON.stringify(themedStyles, null, 4)}</Text>
        </Card>
      </Layout.Group>
    </View>
  );
});
```

---
id: use-token
category: Utilities
title: useToken
description: Used to get values mapped to tokens.
---

```jsx
import { useToken } from '@uhg-abyss/mobile';
```

This hook returns a function that is used to get the style value associated with a token defined in the theme. Use this whenever you want to pass in a prop with the value of a token string instead of the associated token value.

## Properties

```typescript
type TokenKey = 'colors' | 'space' | 'sizes' | 'fontSizes' | 'lineHeights' | 'fontWeights' | 'fonts' | 'radii';
interface TokenConfig {
  retain?: boolean;
};

useToken(key: TokenKey, config?: TokenConfig)
```

## Usage

The `key` argument corresponds to the upper level category inside the theme. Start with defining a function and passing it the string of the token key. You can then use that function to pass in your token element and get the associated value.
A hex value can also be passed in as a `token` and it will be returned as is|unless set not to.

```jsx
const theme = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
  },
};

const getColorToken = useToken('colors');
const color = getColorToken('$primary1');
```

## Example

```jsx live
() => {
  const getColorToken = useToken('colors');
  const color = getColorToken('$interactive3');

  const getSpaceToken = useToken('space');
  const space = getSpaceToken('$md');

  return (
    <View
      style={{ backgroundColor: color, padding: space, alignItems: 'center' }}
    >
      <Heading color={'$primary1'}>Abyss Design System</Heading>
    </View>
  );
};
```

### Defaults

By default, the `useToken` hook uses the passed in value if the token is not found/is invalid. This
allows it to take hex and string values and return them as is.

Using the `config` parameter, you can pass in `{retain: false}` to require tokenized values.

```jsx live
() => {
  const getSpaceToken = useToken('space');
  const space = getSpaceToken('$md');

  const getColorToken = useToken('colors');
  const color = getColorToken('#D9E9FA');
  const color2 = getColorToken('gray');

  const getColorToken2 = useToken('colors', { retain: false });
  const color3 = getColorToken2('#D9E9FA');

  return (
    <React.Fragment>
      <View
        style={{ backgroundColor: color, padding: space, alignItems: 'center' }}
      >
        <Heading color="$primary1">Abyss Design System</Heading>
      </View>
      <View
        style={{
          backgroundColor: color2,
          padding: space,
          alignItems: 'center',
        }}
      >
        <Heading color="$primary1">Abyss Design System</Heading>
      </View>
      <View
        style={{
          backgroundColor: color3,
          padding: space,
          alignItems: 'center',
        }}
      >
        <Heading color="$primary1">Abyss Design System</Heading>
      </View>
    </React.Fragment>
  );
};
```

---
id: use-translate
category: Utilities
title: useTranslate
description: Used to get the translated string from the i18n object.
---

```jsx
import { useTranslate } from '@uhg-abyss/mobile/hooks/useTranslate';
```

The `useTranslate` hook is used to get the translated string from the Abyss [i18n](/mobile/utilities/i18n) object.

## Usage

```typescript
interface I18nTranslate {
  t: (key: string, replacements?: object) => string;
  i18n: object;
}

useTranslate(key: string, replacements?: object): I18nTranslate
```

The `key` argument corresponds to the key in the i18n object. The `replacements` argument is an object that contains the values to replace in the translated string.

Let's use an example to illustrate how to use the `useTranslate` hook. In the [TextField](/mobile/ui/text-field) component, we have a text block that displays the remaining characters available
to be typed in the text field. We can get that value with the key `TextField.charactersRemaining`.

```jsx live-expanded
() => {
  const { t } = useTranslate();
  return <Text>{t('TextField.charactersRemaining')}</Text>;
};
```

If we want to replace the value of the remaining characters, we can pass in the `replacements` object with the key `count`.
Replacement values should always appear in double curly braces, (e.g. `{{count}}`).

```jsx live-expanded
() => {
  const { t } = useTranslate();
  return <Text>{t('TextField.charactersRemaining', { count: 10 })}</Text>;
};
```

We can also use the `useTranslate` hook to get the translated string from the i18n object.

```jsx live-expanded
() => {
  const { i18n } = useTranslate();
  return <Text>{i18n.TextField.charactersRemaining}</Text>;
};
```

---
id: about
slug: /mobile/about
title: About Abyss
---

## What is Abyss?

 <WhatIsAbyss/>

## How Abyss works

<HowAbyssWorks/>

## We support adoption
<SupportAdoption library='mobile'/>

## Guiding Principles

<GuidingPrinciples/>

## We Maintain Assets

<MaintainAssets library='mobile'/>

## The Abyss Team

<AbyssTeam library='mobile'/>

---
id: contact-us
slug: /mobile/contact-us
title: Contact Us
hide_table_of_contents: true
---

## Support

<Support />

## Requests

<ContactForm />

---
id: disclaimer
slug: /mobile/disclaimer
title: Mobile Components Disclaimer
---

As a note, these components were developed for use in a mobile application environment. For your convenience, we created documentation and interactive examples on our Abyss site. We have tried our best to accurately show the functionality and style of each component on these pages, but you may notice some differences and limitations as the optimal platform for viewing and interacting with these components is a mobile device.

A few examples are described below:

- [Date Input](/mobile/ui/date-input) requires native code, so this component is only supported on iOS and Android. There are no interactive examples in the documentation; only recordings of each feature are available. To fully interact with the date and time pickers you will need to import the component within a mobile development environment.
- [Modal](/mobile/ui/modal), and any component that uses Modal, takes up the entire browser window when opened. While it is intended to take up the entire phone screen as well, the content on the modal will fill much more space when used on a mobile device than it does in the browser window.

---
id: overview
slug: /mobile/overview
title: Overview
hide_table_of_contents: true
---

##

<AbyssOverview library="mobile" />
---
id: product-roadmap
slug: /mobile/product-roadmap
title: Product Roadmap
---

##

For 2024, please see details below that outline the Goals/Themes, Solutions Capabilities, and PI Plans for the Abyss Design System.
Please note, this page will be updated at the beginning of each PI.

## Abyss Business Objectives for 2024

<BusinessObjectives />

## Solution Capabilities

To achieve greater adoption and consistency, below are the overarching Solution Capabilities for Abyss that outline some more specific initiatives the team is working toward. For additional details, check out our Aha Board on <ExitLink href="https://optum.aha.io/products/UHCABYSS/feature_cards?object=epic">Solution Capabilities</ExitLink>.

<SolutionCapabilities />

## Abyss Mobile Development

As we continue work to build out Abyss Mobile, below is a breakdown of the
Solution Capabilities and high-level PI plan for the planned work. To see
more specific details on the status of Abyss Mobile, please review our <ExitLink href="https://uhgazure.sharepoint.com/:p:/r/teams/AbyssProductUHCProvider/Shared%20Documents/General/UHC%20Design%20System%20Status%20and%20Migration%20Plan.pptx?d=w75180d50fe664abfba91b6acd61ca7cf&csf=1&web=1&e=nypjMi">UHC Design System Status and Migration Plan PowerPoint</ExitLink>.

### PI Plan

- Further breaking down our Solution Capabilities, below is our outline for current, upcoming PI Plans and the key features being addressed in each of the 5 sprints.
- For additional details on items that will fall under each of these Solution Capabilities, check out our <ExitLink href="https://optum.aha.io/products/UHCABYSS/feature_cards?object=feature">Aha Feature board</ExitLink>

** Note: The items below are subject to change as priorities shift throughout each sprint. **

<RoadMapPIPlan library="mobile" />

## Abyss Mobile Design

### PI Plan

- Further breaking down our Solution Capabilities, below is our outline for current, upcoming PI Plans and the key features being addressed in each of the 5 sprints.

** Note: The items below are subject to change as priorities shift throughout each sprint. **

<RoadMapPIPlan library="mobile_design" />

---
id: releases
slug: /mobile/releases
title: Releases
---

<Releases />

---
id: accessibility
title: Accessibility
---

## Overview

<AccessibilityOverview />

## Interactive components

<InteractiveComponents />

```jsx sandbox
{
  component: 'Button',
  inputs: [
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'solid', value: 'solid' },
        { label: 'outline', value: 'outline' },
        { label: 'ghost', value: 'ghost' },
      ],
    },
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'isDisabled',
      type: 'boolean'
    },
  ],
}

<Button>Click Here!</Button>
```

## Color Contrast

<ColorContrast />

```jsx render
<iframe
  width="100%"
  height="450"
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2Ftk08Md4NBBVUPNHQYthmqp%2FAbyss-Design-System%3Fnode-id%3D1025%253A13039"
  allow="fullscreen"
></iframe>
```

## Icons

### Meaningful or Control Icons

If the icon is being used in a setting where it is the only element providing meaning, then that same meaning should be conveyed to screen reader users. The below implementation provides examples of situations in which the property `isScreenReadable` should be set to true and the `title` property is required and should describe the purpose of the image.

Example 1: An alert icon is used to convey a sense of urgency; there is adjacent text (“There is a data outage”) but the text doesn't include any words that convey urgency. So, in this case, the icon should have a text alternative such as “Alert” or “Warning”.

```jsx live
<Layout.Group>
  <IconBrand title="alert" icon="alert" isScreenReadable={true} size={24} />
  <div>There is a data outage</div>
</Layout.Group>
```

<br />
Example 2: An “X” material icon is used as a close button on a modal dialog. There
is no adjacent text, so the icon should have a text alternative of “close” or “close
window”.

```jsx live
<Layout.Group>
  <IconSymbol title="close" icon="close" isScreenReadable={true} size={24} />
</Layout.Group>
```

### Decorative Icons

If the icon is being used in a setting in which it is just a decorative element (which is the default case for icons), then the icon should be ignored by screen readers. The below implementation provides example of which situations would be classified as decorative. Since the default of `isScreenReadable` is set to false no specific changes need to be made for decorative icons.

Example 1: An alert icon is used next to an urgent message and the word “Alert” is included in the adjacent text. In this case, the icon becomes decorative in nature and should be ignored by screen readers.

```jsx live
<Layout.Group>
  <IconBrand icon="alert" size={24} />
  <div>Alert: There is a data outage</div>
</Layout.Group>
```

<br />
Example 2: An “X” material icon is used as a close button on a modal dialog; the
word “Close” appears to the right of the button. In this case, the icon should be
considered decorative and ignored by screen readers.

```jsx live
<Layout.Group>
  <IconSymbol icon="close" size={24} />
  <div>Close</div>
</Layout.Group>
```

## Dynamic Type

Abyss Mobile standards for dynamic types are as follows: <br/>

- We scale typography and icons in increments of 11.8%. <br/>
- <ExitLink
    href={
      'https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-Abyss-Mobile?node-id=7-144&t=Os647hSjOcX5N1UO-0'
    }
  >
    Figma
  </ExitLink>
  shows scaling examples at xxxLarge and AX5.
  <br />
- We do not scale images, brand icons, or illustrations.
  - See [IconBrand](/mobile/brand/uhc/icon-brand/) and [IllustrationBrand](/mobile/brand/uhc/illustration-brand/) for more details.<br/>
- We also do not scale border-weight or border-radius.<br/>
- Some components, such as framing components and certain graphic elements, freeze at xxxLarge (3XL).

### Scale

```jsx render
<table>
  <thead>
    <tr>
      <th>Scale</th>
      <th>Percent</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>XL</td>
      <td>110%</td>
    </tr>
    <tr>
      <td>XXL</td>
      <td>120%</td>
    </tr>
    <tr>
      <td>XXXL</td>
      <td>130%</td>
    </tr>
    <tr>
      <td>AX1</td>
      <td>179%</td>
    </tr>
    <tr>
      <td>AX2</td>
      <td>214%</td>
    </tr>
    <tr>
      <td>AX3</td>
      <td>264%</td>
    </tr>
    <tr>
      <td>AX4</td>
      <td>314%</td>
    </tr>
    <tr>
      <td>AX5</td>
      <td>357%</td>
    </tr>
  </tbody>
</table>
```

## Additional Resources

<AdditionalResources />

---
id: product-inclusion
title: Product Inclusion
---

## Mission statement

<MissionStatement />

## Product inclusion principles

<ProductInclusionPrinciples />

## Product inclusion checklist

<ProductInclusionChecklist />

## Product inclusion audit tool

<ProductInclusionAuditTool />

## Contact us

<ContactUs />


---
id: product-resources
title: Product Resources
---

## Overview

<ProductResourcesOverview />

## How does Abyss work?

<HowItWorks />

## Versioning

<ProductVersioning library="mobile" />

## Branding

<ProductBranding />

## Accessibility

<ProductResourcesAccessibility library="mobile" />

## Support

<ProductResourcesSupport library="mobile" />

---
id: create-theme
category: Util
title: createTheme
description: Tool to create and modify themes.
---

```jsx
import { createTheme } from '@uhg-abyss/mobile';
```

The tool `createTheme` allows for the creation of preset themes and allows you to override those themes to fit your design needs. `createTheme` is used in conjunction with [ThemeProvider](/mobile/ui/theme-provider).

## Properties

```typescript
createTheme(
  theme: string,
  override?: object,
): object;
```

## Usage

`createTheme` takes two arguments. The first argument is the choice of a default theme. There are currently 4 themes available: `"uhc"`, `"uhg"`, `"optum"`, and `"abyss"`. If no theme is chosen, it will fall back to the default `"abyss"` theme. The second argument is any overrides you wish to apply to the chosen base theme.

```jsx
import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';

const themeOverride = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
    fontWeights: {...},
    lineHeights: {...},
    letterSpacings: {...},
    sizes: {...},
    borderWidths: {...},
    borderStyles: {...},
    radii: {...},
    shadows: {...},
    zIndices: {...},
    transitions: {...},
  },
  deprecatedOptumIcons: boolean, // see below for details

};

const theme = createTheme('uhc', themeOverride);

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

AppRegistry.registerComponent(appName, () => App);
```

## Example

Here is an example of a theme created with a custom override. A token named `customColor` will be added to the color tokens.

```jsx
const theme = createTheme('uhc', {
  theme: {
    colors: {
      customColor: '#ff612b', // orange
    },
  },
});
```

```jsx live
() => {
  const theme = createTheme('uhc', {
    theme: {
      colors: {
        customColor: '#ff612b',
      },
    },
  });

  return (
    <ThemeProvider theme={theme}>
      <Text size="$lg" fontWeight="$bold" color="$customColor">
        Sample Text
      </Text>
    </ThemeProvider>
  );
};
```

## Important: Optum Icons Deprecation

The Optum icons used in `IconBrand` have been updated in [Abyss v1.54.0](https://github.com/uhc-tech/abyss/releases/tag/v1.54.0). The new icons correspond to the icons available on the <ExitLink href="https://brand.optum.com/content/iconography-resources">Optum Brand website</ExitLink>.

The old icons will remain available for the time being and can be enabled by setting the `deprecatedOptumIcons` property to `true` in the `themeOverride` object.

```jsx
const themeOverride = {
  deprecatedOptumIcons: true,
};
```

---
id: create-bottom-tab-navigator
category: Navigation
title: createBottomTabNavigator
description: A simple tab bar on the bottom of the screen that lets you switch between different routes.
---

```jsx
import { createBottomTabNavigator } from '@uhg-abyss/mobile';
```

<Tab label="Overview">

The most common style of navigation in mobile apps is tab-based navigation. A simple tab bar on the bottom of the screen lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.

Calling the `createBottomTabNavigator` function creates a Tab object with `Screen` & `Navigator` properties.
All tab screen must be wrapped around a Tab.Navigator object component. All screens must have a `name` and `component` passed in as props.

## Example

```jsx
const Tab = createBottomTabNavigator();

const Screen = ({ route }) => {
  return (
    <ScreenWrapper>
      <Text>This is the {route.name} page</Text>
    </ScreenWrapper>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Home">
        <Tab.Screen
          name="Home"
          component={Screen}
          options={{
            tabBarIcon: ({ active }) => (
              <IconCustom
                icon="home"
                variant={active ? 'darkactive' : 'dark'}
                maxFontSizeMultiplier={1.3}
              />
            ),
          }}
        />
        <Tab.Screen
          name="My Plan"
          component={Screen}
          options={{
            tabBarIcon: ({ active }) => (
              <IconCustom
                icon="my_plan"
                variant={active ? 'darkactive' : 'dark'}
                maxFontSizeMultiplier={1.3}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Find Care"
          component={Screen}
          options={{
            tabBarIcon: ({ active }) => (
              <IconCustom
                icon="find_care"
                variant={active ? 'darkactive' : 'dark'}
                maxFontSizeMultiplier={1.3}
              />
            ),
          }}
        />
        <Tab.Screen
          name="Menu"
          component={Screen}
          options={{
            tabBarIcon: ({ active }) => (
              <IconCustom
                icon="menu"
                variant={active ? 'darkactive' : 'dark'}
                maxFontSizeMultiplier={1.3}
              />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}
```

```jsx render:phone-dark
() => {
  const [page, setPage] = useState('home');
  const Container = styled('View', {
    flexGrow: 1,
  });

  const Header = styled('View', {
    backgroundColor: '$primary1',
    width: '100%',
    paddingTop: 30,
  });
  const HeaderContent = styled('View', {
    margin: '$sm',
    flexDirection: 'row',
    justifyContent: 'center',
  });

  const Title = styled('Text', {
    color: '$white',
    fontWeight: '$semibold',
    textTransform: 'capitalize',
  });

  const ContentArea = styled('View', {
    flexGrow: 1,
    alignItems: 'center',
    justifyContent: 'center',
  });

  const TabBar = styled('View', {
    backgroundColor: '$primary1',
    height: 60,
    display: 'flex',
    color: '$white',
    paddingBottom: 16,
    paddingTop: 8,
    flexDirection: 'row',
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
  });

  const TabBarItem = styled('Pressable', {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  });

  const ContentText = styled('Text', {});

  const TabLabel = styled('Text', {
    fontSize: '$2xs',
    color: '$white',
    variants: {
      active: {
        true: { fontWeight: '$bold' },
      },
    },
  });

  return (
    <Container>
      <Header>
        <HeaderContent>
          <Title>{page.split('_').join(' ')}</Title>
        </HeaderContent>
      </Header>
      <ContentArea>
        {page === 'home' && <ContentText>This is the Home page</ContentText>}
        {page === 'my_plan' && (
          <ContentText>This is the My Plan page</ContentText>
        )}
        {page === 'find_care' && (
          <ContentText>This is the Find Care page</ContentText>
        )}
        {page === 'menu' && <ContentText>This is the Menu page</ContentText>}
      </ContentArea>
      <TabBar>
        <TabBarItem
          role="button"
          aria-current={page === 'home' ? 'page' : false}
          onPressIn={() => setPage('home')}
        >
          {({ pressed }) => {
            const active = page === 'home';
            return (
              <>
                <IconCustom
                  icon="home"
                  variant={`dark${pressed || active ? 'active' : ''}`}
                />
                <TabLabel active={active}>Home</TabLabel>
              </>
            );
          }}
        </TabBarItem>
        <TabBarItem
          role="button"
          aria-current={page === 'my_plan' ? 'page' : false}
          onPressIn={() => setPage('my_plan')}
        >
          {({ pressed }) => {
            const active = page === 'my_plan';
            return (
              <>
                <IconCustom
                  icon="my_plan"
                  variant={`dark${pressed || active ? 'active' : ''}`}
                />
                <TabLabel active={active}>My Plan</TabLabel>
              </>
            );
          }}
        </TabBarItem>
        <TabBarItem
          role="button"
          aria-current={page === 'find_care' ? 'page' : false}
          onPressIn={() => setPage('find_care')}
        >
          {({ pressed }) => {
            const active = page === 'find_care';
            return (
              <>
                <IconCustom
                  icon="find_care"
                  variant={`dark${pressed || active ? 'active' : ''}`}
                />
                <TabLabel active={active}>Find Care</TabLabel>
              </>
            );
          }}
        </TabBarItem>
        <TabBarItem
          role="button"
          aria-current={page === 'menu' ? 'page' : false}
          onPressIn={() => setPage('menu')}
        >
          {({ pressed }) => {
            const active = page === 'menu';
            return (
              <>
                <IconCustom
                  icon="menu"
                  variant={`dark${pressed || active ? 'active' : ''}`}
                />
                <TabLabel active={active}>Menu</TabLabel>
              </>
            );
          }}
        </TabBarItem>
      </TabBar>
    </Container>
  );
};
```

</Tab>

<Tab label="Integration">

### Props

The `Tab.Navigator` component accepts following props:

#### `id`

Optional unique ID for the navigator. This can be used with `navigation.getParent` to refer to this navigator in a child navigator.

#### `initialRouteName`

The name of the route to render on first load of the navigator.

#### `screenOptions`

Default options to use for the screens in the navigator.

#### `backBehavior`

This controls what happens when `goBack` is called in the navigator. This includes pressing the device's back button or back gesture on Android.

It supports the following values:

- `firstRoute` - return to the first screen defined in the navigator (default)
- `initialRoute` - return to initial screen passed in `initialRouteName` prop, if not passed, defaults to the first screen
- `order` - return to screen defined before the focused screen
- `history` - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history
- `none` - do not handle back button

#### `detachInactiveScreens`

Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with [react-native-screens](https://github.com/software-mansion/react-native-screens). Defaults to `true`.

#### `sceneContainerStyle`

Style object for the component wrapping the screen content.

#### `tabBar`

Function that returns a React element to display as the tab bar.

Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since `useNavigation` is only available inside screens. You get a `navigation` prop for your `tabBar` which you can use instead:

### Options

The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`.

#### `title`

Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`.

#### `tabBarLabel`

Title string of a tab displayed in the tab bar or a function that given `{ active: boolean, color: string }` returns a React.Node, to display in tab bar. When undefined, scene `title` is used. To hide, see `tabBarShowLabel`.

#### `tabBarShowLabel`

Whether the tab label should be visible. Defaults to `true`.

#### `tabBarLabelPosition`

Whether the label is shown below the icon or beside the icon.

- `below-icon`: the label is shown below the icon (typical for iPhones)
- `beside-icon` the label is shown next to the icon (typical for iPad)

By default, the position is chosen automatically based on device width.

#### `tabBarLabelStyle`

Style object for the tab label.

#### `tabBarIcon`

React.ReactNode or a function that given `{ active: boolean }` returns a React.ReactNode, to display in the tab bar.

#### `showTabBarBadge`

Whether or not the badge should be visible on the tab icon.

#### `showTabBarBadgeOnActive`

Whether or not the badge should be visible on the tab icon when it is active.

#### `tabBarBadgeLabel`

Text to show in a badge on the tab icon. Accepts a `string` or a `number`.

#### `tabBarBadgeOffset`

Offset for the badge on the tab icon.

#### `tabBarAccessibilityLabel`

Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab.

#### `tabBarTestID`

ID to locate this tab button in tests.

#### `tabBarActiveTintColor`

Color for the icon and label in the active tab.

#### `tabBarInactiveTintColor`

Color for the icon and label in the inactive tabs.

#### `tabBarActiveBackgroundColor`

Background color for the active tab.

#### `tabBarInactiveBackgroundColor`

Background color for the inactive tabs.

#### `tabBarActiveLabelWeight`

Font weight for the label in the active tab.

#### `tabBarInactiveLabelWeight`

Font weight for the label in the inactive tabs.

#### `tabBarItemStyle`

Style object for the tab item container.

#### `tabBarStyle`

Style object for the tab bar. You can configure styles such as background color here.

To show your screen under the tab bar, you can set the `position` style to absolute:

```js
<Tab.Navigator
  screenOptions={{
    tabBarStyle: { position: 'absolute' },
  }}
>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

Text and icons scale to 3XL. Any additional text or icon passed in should set `maxFontSizeMultiplier={1.3}`.

</Tab>

---
id: create-stack-navigator
category: Navigation
title: createStackNavigator
description: Provides a way for your apps to transition between screens where each new screen is placed on top of a stack.
---

<Tab label='Overview'>

```jsx
import { createStackNavigator } from '@uhg-abyss/mobile';
```

This navigator uses the native APIs `UINavigationController` on iOS and `Fragment` on Android so that navigation built with `createStackNavigator` will behave exactly the same and have the same performance characteristics as apps built natively on top of those APIs.

`Screen` components are used to configure various aspects of screens inside a navigator.

A `Screen` is returned from a createStackNavigator function:

```jsx
const Stack = createStackNavigator(); // Stack contains Screen & Navigator properties
```

After creating the navigator, it can be used as children of the Navigator component:

```jsx
function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}
```

You need to provide at least a name and a component to render for each screen.

</Tab>

<Tab label='Screen Options'>

### Options

The following options can be used to configure the screens in the navigator.
These can be specified under `screenOptions` prop of `Tab.Navigator` or `options` prop of `Tab.Screen`.

#### `title`

Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`.

#### `lazy`

Whether the screen should render the first time it's accessed. Defaults to `true`. Set it to `false` if you want to render the screen on initial render.

#### `unmountOnBlur`

Whether this screen should be unmounted when navigating away from it. Unmounting a screen resets any local state in the screen as well as state of nested navigators in the screen. Defaults to `false`.

Normally, we don't recommend enabling this prop as users don't expect their navigation history to be lost when switching tabs. If you enable this prop, please consider if this will actually provide a better experience for the user.

#### `freezeOnBlur`

Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to `false`.
Defaults to `true` when `enableFreeze()` from `react-native-screens` package is run at the top of the application.

Requires `react-native-screens` version >=3.16.0.

### Header related options

You can find the list of header related options [here](elements.md#header). These [options](screen-options.md) can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`. You don't have to be using `@react-navigation/elements` directly to use these options, they are just documented in that page.

In addition to those, the following options are also supported in bottom tabs:

#### `header`

Custom header to use instead of the default header.

This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:

- `navigation` - The navigation object for the current screen.
- `route` - The route object for the current screen.
- `options` - The options for the current screen.

Example:

```jsx
import { getHeaderTitle } from '@react-navigation/elements';

header: ({ navigation, route, options }) => {
  const title = getHeaderTitle(options, route.name);

  return <MyHeader title={title} style={options.headerStyle} />;
};
```

To set a custom header for all the screens in the navigator, you can specify this option in the `screenOptions` prop of the navigator.

#### `headerTitle`

String or React Element that returns a React Element to be used as the title of the header. Defaults to scene `title`

#### `headerTitleAlign`

How to align the header title. Possible values:

- `left`
- `center`

Defaults to `center` on iOS and `left` on Android.

#### `truncateTitle`

Allows the title to be truncated. Defaults to false.

#### `headerEyebrow`

String, React Element, or function that returns a React Element to be used as the eyebrow of the header.
The eyebrow is placed above the title.

#### `headerSubtitle`

String, React Element, or function that returns a React Element to be used as the subtitle of the header.
The subtitle is placed below the title.

#### `headerLeft`

React Element or Function which returns a React Element to display on the left side of the header. You can use it to implement your custom left button, for example:

```js
<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <MyButton
        {...props}
        onPress={() => {
          // Do something
        }}
      />
    ),
  }}
/>
```

#### `headerRight`

Function which returns a React Element to display on the right side of the header.

#### `headerContent`

Content of the header placed at the bottom of the header.

#### `headerStyle`

Style object for the header. You can specify a custom background color here, for example.

#### `headerTitleStyle`

Styles for the title component.

#### `headerLeftContainerStyle`

Customize the style for the container of the `headerLeft` component, for example to add padding.

#### `headerRightContainerStyle`

Customize the style for the container of the `headerRight` component, for example to add padding.

#### `headerTitleContainerStyle`

Customize the style for the container of the `headerTitle` element.

#### `headerBackgroundContainerStyle`

Customize the style for the container of the `headerBackground` element.

#### `headerTintColor`

Tint color for the header

#### `headerTransparent`

Defaults to `false`. If `true`, the header will not have a background unless you explicitly provide it with `headerBackground`. The header will also float over the screen so that it overlaps the content underneath.

This is useful if you want to render a semi-transparent header or a blurred background.

Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically.

#### `headerBackground`

Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image or a gradient.

For example, you can use this with `headerTransparent` to render a blur view to create a translucent header.

#### `headerShown`

Whether to show or hide the header for the screen. The header is shown by default. Setting this to `false` hides the header.

</Tab>

<Tab label='Group'>

## Group

`Group` components are used to group several screens inside a navigator.

A `Group` is returned from a createStackNavigator function:

```jsx
const Stack = createStackNavigator(); // Stack contains Screen & `Navigator` properties
```

After creating the navigator, it can be used as children of the Navigator component:

```jsx
<Stack.Navigator>
  <Stack.Group
    screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Group>
  <Stack.Group screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="Search" component={SearchScreen} />
    <Stack.Screen name="Share" component={ShareScreen} />
  </Stack.Group>
</Stack.Navigator>
```

It's also possible to nest `Group` components inside other `Group` components.

## Props

### screenOptions

Options to configure how the screens inside the group get presented in the navigator. It accepts either an object or a function returning an object:

```jsx
<Stack.Group
  screenOptions={{
    presentation: 'modal',
  }}
>
  {/* screens */}
</Stack.Group>
```

When you pass a function, it'll receive the route and navigation:

```jsx
<Stack.Group
  screenOptions={({ route, navigation }) => ({
    title: route.params.title,
  })}
>
  {/* screens */}
</Stack.Group>
```

These options are merged with the options specified in the individual screens, and the screen's options will take precedence over the group's options.

See Options for screens for more details and examples.

## navigationKey

Optional key for a group of screens screen. If the key changes, all existing screens in this group will be removed (if used in a stack navigator)
or reset (if used in a tab or drawer navigator):

```jsx
<Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
  {/* screens */}
</Stack.Group>
```

This is similar to the navigationKey prop on Screen, but applies to a group of screens.

</Tab>

---
id: elevation
category: Styling
title: elevation
description: Tool to create depth on screen for users
---

```jsx
import { elevation } from '@uhg-abyss/mobile';
```

## Properties

```typescript
elevation(level: number)
```

## Usage

The `elevation` function take in a single parameter that chooses the magnitude of the shadow effect
applied to the surface of the component. The parameter accepts integers 0 - 4 inclusive.

The function will return an object that can be placed in a component's style prop, which will add
the shadow effects directly to the component.

```jsx live
() => {
  return (
    <Layout.Stack space={20} grow>
      <Box style={elevation(0)} color="white" width={135}>
        <Heading offset={2} color="$info1">
          Level 0
        </Heading>
      </Box>
      <Box style={elevation(1)} color="white" width={135}>
        <Heading offset={2} color="$info1">
          Level 1
        </Heading>
      </Box>
      <Box style={elevation(2)} color="white" width={135}>
        <Heading offset={2} color="$info1">
          Level 2
        </Heading>
      </Box>
      <Box style={elevation(3)} color="white" width={135}>
        <Heading offset={2} color="$info1">
          Level 3
        </Heading>
      </Box>
      <Box style={elevation(4)} color="white" width={135}>
        <Heading offset={2} color="$info1">
          Level 4
        </Heading>
      </Box>
    </Layout.Stack>
  );
};
```

---
id: flatten-tokens
category: Theme
title: flattenTokens
description: Tool to combine tokens from multiple sources into a single object.
---

```jsx
import { flattenTokens } from '@uhg-abyss/mobile';
```

## Properties

```typescript
flattenTokens(...themes: TokenTheme[])
```

## Usage

The `flattenTokens` function is designed to flatten and merge tokens from multiple JSON structures,
to support a layered system where tokens from different themes can override core, semantic, and component
level tokens.

The Abyss theme accepts an object with the following keys to define the theme:
`sizing`, `spacing`, `color`, `borderRadius`, `borderWidth`, `boxShadow`, `fontFamilies`, `fontWeights`,
`fontSizes`, `lineHeights`, `letterSpacing`, `border`, and `opacity`.

This function will return a single object in this format that can be used to create a theme object via
[createTheme](/mobile/tools/create-theme) for later use in the [ThemeProvider](/mobile/ui/theme-provider).

## Overriding Abyss Token Theme

In this example, we use `flattenTokens` and `createTheme` to create a new theme object, which is then passed
into `ThemeProvider` to override the Abyss theme and customize the `Toast` component.

```jsx live
const coreTheme = {
  core: {
    color: {
      brand: {
        60: {
          value: '#60A0F0',
          type: 'color',
          description: 'Overrides info toast with core token',
        },
      },
      red: {
        60: {
          value: '#FF5757',
          type: 'color',
          description: 'Overrides error toast with core token',
        },
      },
    },
  },
};

const semanticTheme = {
  semantic: {
    color: {
      surface: {
        container: {
          status: {
            warning: {
              saturated: {
                value: '#FFAC63',
                type: 'color',
                description: 'Overrides warning toast with semantic token',
              },
            },
          },
        },
      },
    },
  },
};

const componentTheme = {
  toast: {
    color: {
      background: {
        success: {
          value: '#61D48F',
          type: 'color',
          description: 'Overrides success toast with component token',
        },
        error: {
          value: '{core.color.red.60}',
          type: 'color',
          description: 'Overrides error toast with component token',
        },
      },
      icon: {
        leading: {
          value: '{core.color.neutral.80}',
          type: 'color',
          description: 'Toast color icon leading',
        },
        close: {
          value: '{core.color.neutral.80}',
          type: 'color',
          description: 'Toast color icon close',
        },
      },
      text: {
        heading: {
          value: '{semantic.color.text.interactive.rest.tertiary}',
          type: 'color',
          description: 'Toast color heading',
        },
        link: {
          value: '{semantic.color.text.interactive.rest.tertiary}',
          type: 'color',
          description: 'Toast color link',
        },
        notification: {
          value: '{semantic.color.text.interactive.rest.tertiary}',
          type: 'color',
          description: 'Toast color notification',
        },
      },
    },
    'font-size': {
      heading: {
        value: '{core.font-size.lg}',
        type: 'fontSizes',
        description: 'Overrides toast heading font size with component token',
      },
    },
    'line-height': {
      value: '{core.line-height.lg}',
      type: 'lineHeights',
      description: 'Overrides toast line height with component token',
    },
  },
};

const Toasts = ({ overridden }) => {
  return (
    <Layout.Stack grow style={{ paddingHorizontal: '$md' }}>
      <Toast
        variant="info"
        heading="Informational Heading"
        href="https://www.github.com"
        linkText="Github"
        isClosable
        underlineLink
      >
        {overridden
          ? 'Info Toast color overridden by Core Theme'
          : 'You can only compare up to 4 providers'}
      </Toast>
      <Toast
        variant="success"
        href="https://www.github.com"
        linkText="Undo Change"
      >
        {overridden
          ? 'Success Toast color overridden by Component Theme'
          : 'Your estimate has been saved!'}
      </Toast>
      <Toast variant="warning" linkText="Make A Wish" underlineLink>
        {overridden
          ? 'Warning Toast color overridden by Semantic Theme'
          : 'Be careful what you wish for!'}
      </Toast>
      <Toast variant="error">
        {overridden
          ? 'Error Toast color is overridden by Component & Core Theme'
          : 'Your estimate did not save!'}
      </Toast>
    </Layout.Stack>
  );
};

const flattenedTokens = flattenTokens(coreTheme, semanticTheme, componentTheme);
const theme = createTheme('uhc', { theme: flattenedTokens });

const styles = StyleSheet.create({
  heading: {
    marginLeft: '$md',
    marginBottom: '$sm',
    marginTop: '$lg',
  },
});

render(() => {
  return (
    <View>
      <Heading style={styles.heading}>Original Theme</Heading>
      <View>
        <Toasts />
      </View>
      <Heading style={styles.heading}>Custom Theme</Heading>
      <ThemeProvider theme={theme}>
        <View>
          <Toasts overridden />
        </View>
      </ThemeProvider>
    </View>
  );
});
```

---
id: styled
category: Styling
title: styled
description: Tool to style elements.
---

```jsx
import { styled } from '@uhg-abyss/mobile';
```

## Properties

```typescript
styled(
  nativeElement: string | React.FC,
  config?: object
)

```

## Object Syntax Only

Write using the JavaScript object style syntax. The reasons for this are: performance, bundle size, and developer experience.

```jsx
const Button = styled('Pressable', {
  backgroundColor: '$interactive3',
  borderColor: '$primary1',
  borderWidth: 2,
  borderRadius: 24,
  padding: 12,
});
```

```jsx live
() => {
  const Button = styled('Pressable', {
    backgroundColor: '$interactive3',
    borderColor: '$primary1',
    borderWidth: 2,
    borderRadius: 24,
    padding: 16,
  });

  return <Button />;
};
```

## Prop Interpolation vs Variants

You can conditionally apply variants at the consumption level.

```jsx
const Button = styled('Pressable', {
  ...
  variants: {
    isDisabled: {
      true: { backgroundColor: '$gray2' },
    },
  },
});
```

```jsx live
() => {
  const Button = styled('Pressable', {
    alignItems: 'center',
    borderRadius: 24,
    paddingVertical: 8,
    paddingHorizontal: 16,
    backgroundColor: '$primary1',
    variants: {
      isDisabled: {
        true: { backgroundColor: '$gray2' },
      },
    },
  });

  return (
    <Layout.Stack>
      <Button isDisabled>
        <Text color="$white" fontWeight="$bold">
          Button
        </Text>
      </Button>
    </Layout.Stack>
  );
};
```

## Tokens and Themes

You can define tokens in the config file and seamlessly consume and access directly in the Style Object.

See [Abyss Theme Tokens](/mobile/ui/theme-provider/#abyss-theme-tokens) to see the default tokens.

```jsx
const Button = styled('Pressable', {
  ...
  backgroundColor: '$primary1',
  paddingVertical: '$sm',
  paddingHorizontal: '$md',
});
```

```jsx live
() => {
  const Button = styled('Pressable', {
    alignItems: 'center',
    borderRadius: 24,
    paddingVertical: '$sm',
    paddingHorizontal: '$md',
    backgroundColor: '$primary1',
  });

  return (
    <Layout.Stack>
      <Button>
        <Text color="$white" fontWeight="$bold">
          Button
        </Text>
      </Button>
    </Layout.Stack>
  );
};
```

### Light and Dark Theme

```jsx
  const Button = styled('Pressable', {
    ...
    light: {
      backgroundColor: '$white',
      borderWidth: 2,
      borderColor: '$primary1',
    },
    dark: { backgroundColor: '$primary1' },
  });
```

### Landscape and Portrait Orientation

Use `landscape` and `portrait` to define styles specific to the device orientation.

```jsx
  const OrientationView = styled('View', {
    ...
  landscape: {
    flexDirection: 'row',
    paddingVertical: '$xs',
  },
  portrait: {
    paddingVertical: '$sm',
  },
  });
```

## Animations

You can use Animated within a styled component to add animations. Animation values must be passed to the component's `style` prop, not placed within the styled configs.

```jsx
import { Animated } from 'react-native';

  const AnimatedButton = styled(Animated.View, {
    alignItems: 'center',
    borderRadius: 24,
    paddingVertical: '$sm',
    paddingHorizontal: '$md',
    backgroundColor: '$primary1',
  });

const animatedValue = useRef(new Animated.Value(1)).current;

const fade = (direction) => {
  Animated.timing(animatedValue, {
    toValue: direction === 'in' ? 0.95 : 1,
    duration: direction === 'in' ? 100 : 300,
    useNativeDriver: true,
    easing: Easing.bezier(0.25, 0.1, 0.25, 0.1),
  }).start();
};

const handlePressIn = (e) => {
  fade('in');
};

const handlePressOut = (e) => {
  fade('out');
};

<AnimatedButton style={{ transform: [{ scale: animatedValue }] }}>
```

```jsx live
() => {
  const ButtonWrapper = styled('Pressable', {});

  const AnimatedButton = styled(Animated.View, {
    alignItems: 'center',
    borderRadius: 24,
    paddingVertical: '$sm',
    paddingHorizontal: '$md',
    backgroundColor: '$primary1',
  });

  const animatedValue = useRef(new Animated.Value(1)).current;

  const fade = (direction) => {
    Animated.timing(animatedValue, {
      toValue: direction === 'in' ? 0.95 : 1,
      duration: direction === 'in' ? 100 : 300,
      useNativeDriver: Platform.select({
        native: true,
        default: false,
      }),
      easing: Easing.bezier(0.25, 0.1, 0.25, 0.1),
    }).start();
  };

  const handlePressIn = (e) => {
    fade('in');
  };

  const handlePressOut = (e) => {
    fade('out');
  };

  return (
    <Layout.Stack>
      <ButtonWrapper onPressIn={handlePressIn} onPressOut={handlePressOut}>
        <AnimatedButton style={{ transform: [{ scale: animatedValue }] }}>
          <Text color="$white" fontWeight="$bold">
            Button
          </Text>
        </AnimatedButton>
      </ButtonWrapper>
    </Layout.Stack>
  );
};
```

## Dynamic/Static

When static variants won't work and you need a variable style, you can use the `props` config in the `styled` tool. Place all of your styles along with variants in the static config. The `props` config takes in a function with the props passed into the component as the function's parameters. You can then use those props to handle dynamic styles like sizing and colors. The function should return the style properties to add to the component. The `props` function overrides static styles and styles defined in `variants`.

For the best results and performance, it is recommended to use variants when possible.

```jsx live
() => {
  const Button = styled('Pressable', {
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    variants: {
      variant: {
        solid: { backgroundColor: '#d9f6fa' },
        outline: {
          backgroundColor: '$white',
          borderWidth: 2,
          borderColor: '$primary1',
        },
      },
      isDisabled: {
        true: { backgroundColor: '$gray2', borderWidth: 0 },
      },
    },

    props: ({ size }) => {
      return { padding: size + 4 };
    },
  });

  return (
    <Layout.Stack>
      <Button variant="solid" isDisabled={false} size={8}>
        <Text color="$primary1" fontWeight="$bold">
          Styled Button
        </Text>
      </Button>
    </Layout.Stack>
  );
};
```

---
id: tokenize
category: Theme
title: tokenize
description: Tool to tokenize props in a component.
---

```jsx
import { tokenize } from '@uhg-abyss/mobile';
```

## Properties

```typescript
tokenize(
  component: React.Component,
  tokenObj: object
): React.Component;
```

There are times when a component accepts a prop that could potentially map to an Abyss token.

For example, the <ExitLink href="https://github.com/software-mansion/react-native-svg/blob/main/USAGE.md#circle">React Native SVG Circle</ExitLink>
component has a `fill` prop that accepts a color. We can use the `tokenize` function to allow the `fill` prop to now accept an Abyss color token.

```jsx
const TokenizedCirle = tokenize(Circle, { fill: 'colors' });
```

The default values that can be used for a prop are `'colors'`, `'space'`, `'fontSizes'`, `'lineHeights'`, `'fontWeights'`, `'fonts'` & `'radii'`.

The tokens that exist for each value are defined in the [ThemeProvider](/mobile/ui/theme-provider/#abyss-theme-tokens).

## Basic Example

The <ExitLink href="https://reactnative.dev/docs/touchablehighlight">TouchableHighlight</ExitLink> component has a prop, `underlayColor` that accepts a color.
Since we have tokens for colors, we can use the `tokenize` function to map the prop to accept tokens.

```jsx
const TokenizedTouchableHighlight = tokenize(TouchableHighlight, {
  underlayColor: 'colors',
});
```

Now we can use a color token as a value for the `underlayColor` prop. Press the button below to see the underlay color.

```jsx live
const TokenizedTouchableHighlight = tokenize(TouchableHighlight, {
  underlayColor: 'colors',
});

render(() => {
  return (
    <TokenizedTouchableHighlight
      underlayColor="$conditional3"
      style={{ padding: 8 }}
      onPress={() => {}}
      accessibilityRole="button"
    >
      <Text size="$lg">Press Me</Text>
    </TokenizedTouchableHighlight>
  );
});
```

### Advanced Example

If the prop that should accept tokens is an object, the token object can be mapped to an object.

For example, the `style` prop on a View accepts an object with many props that can be mapped to tokens.

```jsx
const TokenizedView = tokenize(View, {
  style: {
    backgroundColor: 'colors',
    borderColor: 'colors',
    marginLeft: 'space',
    borderRadius: 'radii',
  },
});
```

Now, those four props can now accept tokens.

```jsx live
const TokenizedView = tokenize(View, {
  style: {
    backgroundColor: 'colors',
    borderColor: 'colors',
    marginLeft: 'space',
    borderRadius: 'radii',
  },
});

render(() => {
  return (
    <TokenizedView
      style={{
        backgroundColor: '$interactive1',
        borderColor: '$error1',
        marginLeft: '$xl',
        borderRadius: '$xl',
        borderWidth: 4,
        width: 100,
        height: 100,
      }}
    />
  );
});
```

---
id: with-theme
category: Util
title: withTheme
description: Tool to wrap a component with a higher order component.
---

```jsx
import { withTheme } from '@uhg-abyss/mobile';
```

This function takes a component and returns a higher order component with the current theme passed into the child.

## Usage

`withTheme` has one argument: the component to be wrapped. This sample code will show the difference.
The first component will not have the theme passed to it, while the second will.

```jsx
() => {
  const UnwrappedComponent = (props) => {
    return <Text>{JSON.stringify(props, null, 4)}</Text>;
  };

  const WrappedComponent = withTheme(UnwrappedComponent);

  return (
    <React.Fragment>
      <Text>
        Here are the props of a component not wrapped with the withTheme
        function
      </Text>
      <UnwrappedComponent />
      <Layout.Space space={16} />
      <Text>
        Here are the props of a component that *are* wrapped with the withTheme
        function
      </Text>
      <WrappedComponent />
    </React.Fragment>
  );
};
```

```jsx live
() => {
  const UnwrappedComponent = (props) => {
    return <Text>{JSON.stringify(props, null, 4)}</Text>;
  };

  const WrappedComponent = withTheme(UnwrappedComponent);

  return (
    <React.Fragment>
      <Text>
        Here are the props of a component not wrapped with the withTheme
        function
      </Text>
      <UnwrappedComponent />
      <Layout.Space space={16} />
      <Text>
        Here are the props of a component that *are* wrapped with the withTheme
        function
      </Text>
      <WrappedComponent />
    </React.Fragment>
  );
};
```

---
id: accordion
category: Content
title: Accordion
description: A vertically stacked list of headers that reveal or hide associated sections of content.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/1Uml7LO8NTEWoBUAl4DTaG/Abyss-Mobile?node-id=10126-35246&t=2iqvkqjkI4KBEphM-0
---

<Tab label="Overview">

```jsx
import { Accordion } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Accordion',
  inputs: [
    {
      prop: 'type',
      type: 'select',
      options: [
        { label: 'single', value: 'single' },
        { label: 'multiple', value: 'multiple' },
      ],
    },
    {
      prop: 'defaultValue',
      type: 'select',
      options: [
        { label: 'none', value: '' },
        { label: 'sandbox-1', value: 'sandbox-1' },
        { label: 'sandbox-2', value: 'sandbox-2' },
        { label: 'sandbox-3', value: 'sandbox-3' },
      ],
    },
    {
      prop: 'isCollapsible',
      type: 'boolean',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
  ]
}

<Accordion>
  <Accordion.Item value="sandbox-1" label="Sandbox Accordion 1">
      SURPRISE - Sandbox Accordion 1
  </Accordion.Item>

  <Accordion.Item value="sandbox-2" label="Sandbox Accordion 2">
      SURPRISE - Sandbox Accordion 2
  </Accordion.Item>

  <Accordion.Item value="sandbox-3" label="Sandbox Accordion 3">
      SURPRISE - Sandbox Accordion 3
  </Accordion.Item>
</Accordion>
```

## Type Multiple

Use the `type` property to set the Accordion to either have `single` or `multiple` open items. The default is set to `single`.

```jsx live
<Box padding={0} color="white">
  <Accordion type="multiple" isCollapsible>
    <Accordion.Item value="item-1" label="SandBox Accordion 1">
      SURPRISE - Sandbox Accordion 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="SandBox Accordion 2">
      SURPRISE - Sandbox Accordion 2
    </Accordion.Item>

    <Accordion.Item value="item-3" label="SandBox Accordion 3">
      SURPRISE - Sandbox Accordion 3
    </Accordion.Item>
  </Accordion>
</Box>
```

## Default Value - Single

Use the `defaultValue` property to set an initial Accordion to be open based on its `value` property. When type is set to `single` pass in a string.

```jsx live
<Box padding={0} color="white">
  <Accordion defaultValue="item-1" isCollapsible>
    <Accordion.Item value="item-1" label="SandBox Accordion 1">
      SURPRISE - Sandbox Accordion 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="SandBox Accordion 2">
      SURPRISE - Sandbox Accordion 2
    </Accordion.Item>

    <Accordion.Item value="item-3" label="SandBox Accordion 3">
      SURPRISE - Sandbox Accordion 3
    </Accordion.Item>
  </Accordion>
</Box>
```

## Default Value - Multiple

When the `type` of the Accordion is set to `multiple` pass in a string array.

```jsx live
<Box padding={0} color="white">
  <Accordion
    type="multiple"
    defaultValue={['item-1', 'item-2', 'item-3']}
    isCollapsible
  >
    <Accordion.Item value="item-1" label="SandBox Accordion 1">
      SURPRISE - Sandbox Accordion 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="SandBox Accordion 2">
      SURPRISE - Sandbox Accordion 2
    </Accordion.Item>

    <Accordion.Item value="item-3" label="SandBox Accordion 3">
      SURPRISE - Sandbox Accordion 3
    </Accordion.Item>
  </Accordion>
</Box>
```

## Collapsible

The `isCollapsible` property allows closing content when clicking the trigger for an open item. When `true` you are allowed to collapse all items. When `false` one item will always remain open. The default is set to `true`. Collapsible does not apply when the type is "multiple".

```jsx live
<Box padding={0} color="transparent">
  <Accordion
    type="single"
    defaultValue="item-1"
    isCollapsible={false}
    style={{ marginBottom: 20 }}
  >
    <Accordion.Item value="item-1" label="Non Collapsible Accordion Item 1">
      Accordion Content 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Non Collapsible Accordion Item 2">
      Accordion Content 2
    </Accordion.Item>
  </Accordion>
  <Accordion type="single" defaultValue="item-1">
    <Accordion.Item value="item-1" label="Default Accordion Item 1">
      Accordion Content 1
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Default Accordion Item 2">
      Accordion Content Item 2
    </Accordion.Item>
  </Accordion>
</Box>
```

## Disabled

Use the `isDisabled` property to disable the entire `Accordion` or individual levels. The default is set to `false`.

```jsx live
<Box padding={0} color="transparent">
  <Accordion
    type="single"
    defaultValue="item-1"
    isCollapsible
    style={{ marginBottom: 20 }}
  >
    <Accordion.Item value="item-1" label="Item is not disabled">
      Not disabled
    </Accordion.Item>

    <Accordion.Item isDisabled value="item-2" label="Item disabled">
      Disabled
    </Accordion.Item>

    <Accordion.Item value="item-3" label="Item is not disabled">
      Not disabled
    </Accordion.Item>
  </Accordion>

  <Accordion type="single" defaultValue="item-1" isDisabled>
    <Accordion.Item value="item-1" label="Entire Accordion Is Disabled">
      Disabled
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Entire Accordion Is Disabled">
      Disabled
    </Accordion.Item>
  </Accordion>
</Box>
```

## Border Variants

Accordion borders can be manipulated using the below props:

`hideBorderTop` | hides the border at the top of the accordion.

`hideBorderBottom` | hides the border at the bottom of the accordion.

`hideBorderAll` | hides all borders in the accordion.

```jsx live
<Box padding={0} color="transparent">
  <Accordion
    type="single"
    style={{ marginBottom: 20 }}
    isCollapsible
    hideBorderTop
  >
    <Accordion.Item value="item-1" label="Hide Border Top">
      Hides the border at the top of the accordion
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Hide Border Top">
      Hides the border at the top of the accordion
    </Accordion.Item>
  </Accordion>

  <Accordion
    type="single"
    style={{ marginBottom: 20 }}
    isCollapsible
    hideBorderBottom
  >
    <Accordion.Item value="item-1" label="Hide Border Bottom">
      Hides the border at the bottom of the accordion
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Hide Border Bottom">
      Hides the border at the bottom of the accordion
    </Accordion.Item>
  </Accordion>

  <Accordion type="single" isCollapsible hideBorderAll>
    <Accordion.Item value="item-1" label="Hide Border All">
      Hides all borders in the accordion
    </Accordion.Item>

    <Accordion.Item value="item-2" label="Hide Border All">
      Hides all borders in the accordion
    </Accordion.Item>
  </Accordion>
</Box>
```

## onValueChange

The `onValueChange` property is an event handler that is called when the expanded state of any item changes.

```jsx live
() => {
  return (
    <Box padding={0} color="transparent">
      <Accordion
        type="single"
        defaultValue="item-1"
        onValueChange={(val) => console.log('Multi Value', val)}
        style={{ marginBottom: 20 }}
      >
        <Accordion.Item value="item-1" label="Single Accordion Item 1">
          Accordion Content 1
        </Accordion.Item>

        <Accordion.Item value="item-2" label="Single Accordion Item 2">
          Accordion Content 2
        </Accordion.Item>

        <Accordion.Item value="item-3" label="Single Accordion Item 3">
          Accordion Content 3
        </Accordion.Item>
      </Accordion>

      <Accordion
        type="multiple"
        defaultValue={['item-1']}
        onValueChange={(val) => console.log('Single Value', val)}
      >
        <Accordion.Item value="item-1" label="Multiple Accordion Item 1">
          Accordion Content 1
        </Accordion.Item>

        <Accordion.Item value="item-2" label="Multiple Accordion Item 2">
          Accordion Content 2
        </Accordion.Item>

        <Accordion.Item value="item-3" label="Multiple Accordion Item 3">
          Accordion Content 3
        </Accordion.Item>
      </Accordion>
    </Box>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Accordion}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The Accordion items to be displayed',
    },
    {
      name: 'isCollapsible',
      type: 'boolean',
      description:
        'Used to enable/disable the ability to collapse all Accordion items',
      default: 'true',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'disables the Accordion so that none of the Accordion items can be opened',
      default: 'false',
    },
    {
      name: 'onValueChange',
      type: 'function',
      description:
        'Event handler called when the expanded state of an item changes',
    },
    {
      name: 'defaultValue',
      type: 'string | array[string]',
      description: 'Used to set an initial item or items to be open',
    },
    {
      name: 'type',
      type: "'single' | 'multiple'",
      description:
        'Used to set the amount of items able to be opened at one time',
      default: 'single',
    },
    {
      name: 'hideBorderAll',
      type: 'boolean',
      description: 'Hides the borders of the Accordion',
      default: 'false',
    },
    {
      name: 'hideBorderBottom',
      type: 'boolean',
      description: 'Hides the border at the bottom of the Accordion',
      default: 'false',
    },
    {
      name: 'hideBorderTop',
      type: 'boolean',
      description: 'Hides the border at the top of the Accordion',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Accordion.Item}
  rows={[
    {
      name: 'label',
      type: 'string',
      description: 'Sets the label of the Accordion item',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Used to set the value of the Accordion item',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The Text to be displayed on an expanded Accordion item',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        "disables the individual Accordion Item so that it can't be opened",
      default: 'false',
    },
    {
      name: 'hideBorderAll',
      type: 'boolean',
      description: 'Hides the borders of the current accordion item',
      default: 'false',
    },
    {
      name: 'hideBorderBottom',
      type: 'boolean',
      description:
        'Hides the border at the bottom of the current accordion item',
      default: 'false',
    },
    {
      name: 'hideBorderTop',
      type: 'boolean',
      description: 'Hides the border at the top of the current accordion item',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Accordion}
  rows={[
    {
      name: 'accordion-root',
      description: 'Accordion root element',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Accordion.Item}
  rows={[
    {
      name: 'accordion-item-root',
      description: 'Accordion item root element',
    },
    {
      name: 'accordion-label',
      description: 'Accordion label element',
    },
    {
      name: 'accordion-trigger',
      description: 'Accordion item content',
    },
    {
      name: 'accordion-trigger-icon',
      description: 'Accordion item icon',
    },
    {
      name: 'accordion-content',
      description: 'Accordion content',
    },
    {
      name: 'accordion-text',
      description: 'Accordion content text',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Accordion} keys={['accordion']} />
```

</Tab>

---
id: accumulator-v2
category: Data Viz
title: V2Accumulator
description: A graphical representation of a data set based on one variable.
design: https://www.figma.com/design/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=60560-2884&t=nVava1vxhAz8Wrvz-0
subDirectory: Accumulator/v2
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2Accumulator } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'V2Accumulator',
  inputs: [
    {
      prop: 'percentage',
      type: 'number',
      defaultValue: 50
    },
    {
      prop: 'animationDelay',
      type: 'number',
    },
    {
      prop: 'color',
      type: 'string',
      defaultValue: '$conditional7',
    },
  ]
}

<V2Accumulator />
```

## Percentage

The `percentage` prop determines how far the accumulator will move. The prop accepts numbers between `0` and `100`
The default is `0`.

```jsx live
<Layout.Stack grow>
  <V2Accumulator percentage={100} />
  <V2Accumulator percentage={75} />
  <V2Accumulator percentage={50} />
  <V2Accumulator percentage={25} />
  <V2Accumulator percentage={10} />
  <V2Accumulator percentage={0} />
</Layout.Stack>
```

## Animation Delay

The `animationDelay` prop is used to start the animation after a given delay (milliseconds).
The default is `0`.

```jsx live
() => {
  const [animated, toggle] = useToggle(false);
  const percentage = animated ? 40 : 0;
  return (
    <Layout.Stack grow>
      <V2Accumulator percentage={percentage} animationDelay={0} />
      <V2Accumulator percentage={percentage} animationDelay={300} />
      <V2Accumulator percentage={percentage} animationDelay={600} />
      <V2Accumulator percentage={percentage} animationDelay={900} />
      <V2Accumulator percentage={percentage} animationDelay={1200} />
      <Layout.Space space={20} />
      <Button onPress={toggle}>Start Animation</Button>
    </Layout.Stack>
  );
};
```

## Color

The `color` prop is used to set the color for the accumulator track.
The default is set to `$conditional7`.

```jsx live
<Layout.Stack grow>
  <V2Accumulator percentage={50} />
  <V2Accumulator percentage={50} color="$primary1" />
  <V2Accumulator percentage={50} color="$interactive1" />
  <Box color="$primary1">
    <V2Accumulator percentage={50} color="$primary2" />
  </Box>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2Accumulator}
  rows={[
    {
      name: 'percentage',
      type: 'number',
      description:
        'The percentage of the bar that is filled. Value between 0 and 100',
      default: 0,
    },
    {
      name: 'animationDelay',
      type: 'number',
      description: 'The amount of milliseconds before animating the bar',
      default: 0,
    },
    {
      name: 'color',
      type: 'string',
      description: 'The color of the accumulator track',
      default: '$conditional7',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Accumulator}
  rows={[
    {
      name: 'accumulator-root',
      description: 'Accumulator root element',
    },
    {
      name: 'accumulator-track',
      description: 'Accumulator track element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={V2Accumulator} keys={['accumulator']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={Accumulator} type="class" />
```

```jsx render
<Docs.ComparisonTable of={Accumulator} type="props" />
```

</Tab>

---
id: accumulator
category: Data Viz
title: Accumulator
description: A graphical representation of a data set based on one variable.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=20095%3A102386
subDirectory: Accumulator/v1
---

<Tab label="Overview">

```jsx
import { Accumulator } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Accumulator',
  inputs: [
    {
      prop: 'percentage',
      type: 'number',
      defaultValue: 50
    },
    {
      prop: 'animationDelay',
      type: 'number',
    },
  ]
}

<Accumulator />
```

## Percentage

The `percentage` prop determines how far the accumulator will move. The prop accepts numbers between `0` and `100`
The default is `0`.

```jsx live
<Layout.Stack grow>
  <Accumulator percentage={100} />
  <Accumulator percentage={75} />
  <Accumulator percentage={50} />
  <Accumulator percentage={25} />
  <Accumulator percentage={10} />
  <Accumulator percentage={0} />
</Layout.Stack>
```

## Animation Delay

The `animationDelay` prop is used to start the animation after a given delay (milliseconds).
The default is `0`.

```jsx live
() => {
  const [animated, toggle] = useToggle(false);
  const percentage = animated ? 40 : 0;
  return (
    <Layout.Stack grow>
      <Accumulator percentage={percentage} animationDelay={0} />
      <Accumulator percentage={percentage} animationDelay={300} />
      <Accumulator percentage={percentage} animationDelay={600} />
      <Accumulator percentage={percentage} animationDelay={900} />
      <Accumulator percentage={percentage} animationDelay={1200} />
      <Layout.Space space={20} />
      <Button onPress={toggle}>Start Animation</Button>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Accumulator}
  rows={[
    {
      name: 'percentage',
      type: 'number',
      description:
        'The percentage of the bar that is filled. Value between 0 and 100',
    },
    {
      name: 'animationDelay',
      type: 'number',
      description: 'The amount of milliseconds before animating the bar',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Accumulator}
  rows={[
    {
      name: 'accumulator-root',
      description: 'Accumulator root element',
    },
    {
      name: 'accumulator-track',
      description: 'Accumulator track element',
    },
    {
      name: 'accumulator-start-piece',
      description: 'Accumulator start element',
    },
    {
      name: 'accumulator-end-piece',
      description: 'Accumulator end element',
    },
    {
      name: 'accumulator-slide',
      description: 'Accumulator slide element',
    },
    {
      name: 'accumulator-slide-stopper',
      description: 'Accumulator slide stopper element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={Accumulator} rows={['Accumulator.percentage']} />
```

</Tab>

---
id: activity-tracker
category: Data
title: ActivityTracker
description: Displays a visual representation of the user's activity.
design: https://www.figma.com/design/wCMblLsq9TxAQvKzY3EfCt/UHC-Abyss-Mobile?node-id=56619-6859&t=7SRu2GmHzPNPQzaT-0
---

<Tab label="Overview">

```jsx
import { ActivityTracker } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
    component: 'ActivityTracker',
    inputs: [
        {
            prop: 'title',
            type: 'string',
        },
        {
            prop: 'showActiveStep',
            type: 'boolean',
        },
        {
            prop: 'variant',
            type: 'select',
            options: [
                { label: 'oneweek', value: 'oneweek' },
                { label: 'twoweeks', value: 'twoweeks' },
            ],
        },
    ]
}

<ActivityTracker
    title="Activity Tracker"
    showActiveStep={true}
/>
```

## Variants

Use the `variant` prop to determine the variant of the activity tracker. The `twoweeks` variant displays a 14-day option that does not contain an `showActiveStep`. The `oneweek` variant is the default.

```jsx live
<Layout.Stack grow>
  <ActivityTracker
    title="One Week"
    completedSteps={[0, 1]}
    style={{ marginBottom: 20 }}
  />
  <ActivityTracker
    title="Two Weeks"
    completedSteps={[0, 1]}
    variant="twoweeks"
  />
</Layout.Stack>
```

## Completed Steps

Use the `completedSteps` prop to determine the steps that have been completed.

```jsx live
<ActivityTracker
  title="Activity Tracker"
  showActiveStep={false}
  completedSteps={[0, 1, 3]}
/>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={ActivityTracker}
  rows={[
    {
      name: 'title',
      type: 'string',
      description: 'Title of the activity tracker',
    },
    {
      name: 'showActiveStep',
      type: 'boolean',
      description: 'Highlighted current day of the week',
    },
    {
      name: 'completedSteps',
      type: 'number[]',
      description: 'Completed steps in the activity tracker',
    },
    {
      name: 'variant',
      type: 'oneweek | twoweeks',
      description: 'Change the amount of days in the activity tracker',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={ActivityTracker}
  rows={[
    {
      name: 'activity-tracker-root',
      description: 'Root activity tracker element',
    },
    {
      name: 'activity-tracker-title',
      description: 'Title container',
    },
    {
      name: 'activity-tracker-selection-circle',
      description:
        'Circle indicating the current day of the week in the activity tracker',
    },
    {
      name: 'activity-tracker-success-circle',
      description: 'Circle indicating a successfully completed step',
    },
    {
      name: 'activity-tracker-week-day-text',
      description: 'Text displaying the day of the week.',
    },
    {
      name: 'activity-tracker-date-label',
      description: 'Text inside the circle',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={ActivityTracker} keys={['activity-tracker']} />
```

</Tab>

---
id: alert
category: Feedback
title: Alert
description: Communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=10091%3A35499&t=KluMjh3mwaQrqcQh-0
---

<Tab label="Overview">

```jsx
import { Alert } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Alert',
  inputs: [
    {
      prop: 'title',
      type: 'string',
    },
    {
      prop: 'description',
      type: 'string'
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'success', value: 'success' },
        { label: 'warning', value: 'warning' },
        { label: 'error', value: 'error' },
        { label: 'info', value: 'info' },
      ]
    },
    {
      prop: 'isCloseable',
      type: 'boolean'
    },
  ]
}

<Alert title="Completed Health Screen:" description="Review of your results are ready." isCloseable={true}>
  <Alert.Button>Go To Results</Alert.Button>
</Alert>
```

## Title and Description

The `title` and `description` props are used to set the title and description of the alert.
Both props are required.

```jsx live
<Alert
  title="Prior Authorization Needed:"
  description="Review your benefits with your health plan."
  variant="success"
/>
```

## isCloseable

The `isCloseable` prop determines if a close button is displayed in the alert. It defaults to `true` unless the `inline` prop is enabled.

```jsx live
<Layout.Stack grow space={8}>
  <Alert
    title="Prior Authorization Needed:"
    description="Review your benefits with your health plan."
    variant="success"
  />
  <Alert
    title="Prior Authorization Needed:"
    description="Review your benefits with your health plan."
    variant="success"
    isCloseable={false}
  />
</Layout.Stack>
```

## Variants

Use the `variant` property to set the color of the `Alert`.
The options are `success`, `warning`, `error`, and `info`. The default is `success`.

```jsx live
<Layout.Stack grow space={8}>
  <Alert
    title="Prior Authorization Needed:"
    description="Review your benefits with your health plan."
    variant="success"
  />
  <Alert
    title="Prior Authorization Needed:"
    description="Review your benefits with your health plan."
    variant="warning"
  />
  <Alert
    title="Prior Authorization Needed:"
    description="Review your benefits with your health plan."
    variant="error"
  />
  <Alert
    title="Prior Authorization Needed:"
    description="Review your benefits with your health plan."
    variant="info"
  />
</Layout.Stack>
```

## Inline Variant

The inline variant functions the same as the default, but is rounder and takes up less width. It uses the `inline` prop, changing the border radius to create a more rounded look. The inline variant should be wrapped in a component that provides padding on the left and right (see example below).

```jsx live
() => {
  const InlineWrapper = styled('View', {
    paddingHorizontal: 48,
  });

  return (
    <InlineWrapper>
      <Alert
        title="You're going paperless!"
        description="Starting on 3/22/2023"
        variant="info"
        inline={true}
      />
    </InlineWrapper>
  );
};
```

## Children

Add Children to the Alert component by simply placing elements between the Alert tags. Children should be used for adding either a link or button.
Links and buttons can be added with the `Alert.Link` and `Alert.Button` components, respectively.

```jsx live
<Layout.Stack grow space={8}>
  <Alert
    title="Completed Health Screen:"
    description="Review of your results are ready."
    onClose={() => setIsVisible(false)}
  >
    <Alert.Link
      after={
        <IconSymbol icon="chevron_right" size={16} color="$interactive1" />
      }
    >
      Go To Results
    </Alert.Link>
  </Alert>
  <Alert
    title="Unable to confirm location:"
    description="Please use a valid zip code or address."
    variant="error"
  >
    <Alert.Button
      after={
        <IconSymbol
          icon="location_on"
          size={16}
          variant="outlined"
          color="$primary1"
        />
      }
    >
      Use current location
    </Alert.Button>
  </Alert>
</Layout.Stack>
```

## Change Icon

Use the `icon` property to pass in a specific `Icon` component.

Since `title` and `description` are required props, icons are used in a setting in which it is just a decorative element (which is the default case for icons) and should be ignored by screen readers. The implementation below provides an example. Since the default of `isScreenReadable` is set to false, no specific changes need to be made for decorative icons. Find further guidance on material icons in the [Material Icons Tab](/mobile/ui/icon-material).

```jsx live
<Alert
  icon={<IconSymbol icon="search" />}
  title="Search Title"
  description="The icon is decorative because of text from the title and this description."
  variant="info"
  onClose={() => {}}
/>
```

## onClose

Use the `onClose` property to handle the action when close button is triggered. The `onClose` property is always required.

```jsx live
() => {
  const [isVisible, toggleVisibility] = useToggle(true);
  return (
    <Layout.Stack grow>
      <Button size="small" onPress={toggleVisibility}>
        Toggle Alert
      </Button>
      <Alert
        title="Alert With onClose Function"
        description="The onClose prop handles the action when close button is triggered"
        isVisible={isVisible}
        onClose={toggleVisibility}
      />
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Alert}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the Alert component',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Sets the title for the alert',
    },
    {
      name: 'description',
      type: 'string',
      description: 'Sets the description for the alert',
    },
    {
      name: 'variant',
      type: "'info' | 'success' | 'error' | 'warning'",
      description: 'Change the alert style',
      default: 'success',
    },
    {
      name: 'icon',
      type: 'ReactNode',
      description: 'Change the default icon',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the alert is closed',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to show or hide Alert',
      default: 'true',
    },
    {
      name: 'isCloseable',
      type: 'boolean',
      description: 'Determines if alert has close button',
    },
    {
      name: 'inline',
      type: 'boolean',
      description: 'Change the alert type to inline',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Alert.Link}
  rows={[
    {
      name: 'before',
      type: 'ReactNode',
      description: 'Insert element into link component before children',
    },
    {
      name: 'after',
      type: 'ReactNode',
      description: 'Insert element into link component after children',
    },
    {
      name: 'href',
      type: 'string',
      description: 'Set the URL of the link',
    },
    {
      name: 'children',
      type: 'ReactNode',
      description: 'Set the text of the link',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the link',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'underline',
      type: 'boolean',
      description: 'Used to underline the link text',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Alert.Button}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the button component',
    },
    {
      name: 'before',
      type: 'node',
      description: 'Insert element into button component before children',
    },
    {
      name: 'after',
      type: 'node',
      description: 'Insert element into button component after children',
    },
    {
      name: 'rounded',
      type: 'boolean',
      description: 'Flag to make button rounded',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Flag to disable the button',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Alert}
  rows={[
    {
      name: 'alert-root',
      description: 'Alert root element',
    },
    {
      name: 'alert-content',
      description: 'Alert content element',
    },
    {
      name: 'alert-title',
      description: 'Alert title element',
    },
    {
      name: 'alert-text',
      description: 'Alert text element',
    },
    {
      name: 'alert-children-container',
      description: 'Alert children container',
    },
    {
      name: 'alert-close-button',
      description: 'Alert close icon container',
    },
    {
      name: 'alert-close-icon',
      description: 'Alert close icon element',
    },
    {
      name: 'alert-icon',
      description: 'Alert icon element',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Alert.Link}
  rows={[
    {
      name: 'alert-link-root',
      description: 'Alert link element',
    },
  ]}
  inherits={[{ name: 'Link', link: '/mobile/ui/link' }]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Alert.Button}
  rows={[
    {
      name: 'alert-button-root',
      description: 'Alert link element',
    },
  ]}
  inherits={[{ name: 'Button', link: '/mobile/ui/button' }]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Alert} keys={['alert']} />
```

</Tab>

---
id: app-bar
category: Navigation
title: AppBar
description: Displays information and actions relating to the current screen.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=10091%3A35499&t=KluMjh3mwaQrqcQh-0
---

<Tab label="Overview">

```jsx sandbox

{
  component: 'AppBar',
  inputs: [
    {
      prop: 'title',
      type: 'string',
      defaultValue: 'Title'
    },
    {
      prop: 'truncateTitle',
      type: 'boolean',
    },
    {
      prop: 'titleAlignment',
      type: 'select',
      options: [
        { label: 'center', value: 'center' },
        { label: 'left', value: 'left' },
      ]
    },
  ],
}

<AppBar title='Title' />

```

## Accessories

App Bar contains options to add several partner components, depending on the page the App Bar is designed for.
These accessories can be placed in the children of the AppBar.

- <b>
    <a href="/mobile/ui/search-bar">SearchBar </a>
  </b>
  - A search input that allows users to search for content within your app.
- <b>
    <a href="/mobile/ui/progress-bar">ProgressBar </a>
  </b>
  - A complementary visual representation of the current step a user is on while
  completing a form of inputs.
- <b>
    <a href="/mobile/ui/tabs">Tabs </a>
  </b>
  - A navigation tool for secondary pages and actions. When a page contains Tabs,
  the user is able to horizontally scroll through the list of options.
- <b>
    <a href="/mobile/ui/segmented-controls">Segmented Controls </a>
  </b>
  - A list of options, and there cannot be more than one segment selected, so under
  the hood this behaves like a radio group.
- <b>
    <a href="/mobile/ui/Avatar">Avatar </a>
  </b>
  - Used on the homepage App Bar, and within the nested actions for Selector Section
  to show the current user on the app.

```jsx live
() => {
  const [segmentTab, setSegmentTab] = useState('tab-1');
  const [value, setValue] = useState('');

  return (
    <View style={{ width: 560 }}>
      <AppBar title="Home" titleAlignment="left">
        <ProgressBar steps={4} currentStep={1} />
        <SearchBar
          value={value}
          onChangeText={setValue}
          onSubmit={() => {
            return logger.log('Value submitted');
          }}
          colorScheme="dark"
          placeholder="Search your benefits"
        />
        <View style={{ padding: 4 }}>
          <Tabs title="Example Tabs" style={{ padding: 4 }} colorScheme="dark">
            <Tabs.Tab value="default-1" label="Default 1" />
            <Tabs.Tab value="default-2" label="Default 2" />
            <Tabs.Tab value="default-3" label="Default 3" />
            <Tabs.Tab value="default-4" label="Default 4" />
            <Tabs.Tab value="default-5" label="Default 5" />
            <Tabs.Tab value="default-6" label="Default 6" />
          </Tabs>
        </View>
        <View style={{ alignItems: 'center' }}>
          <SegmentedControls shrink value={segmentTab} onChange={setSegmentTab}>
            <SegmentedControls.Tab label="Tab 1" value="tab-1" />
            <SegmentedControls.Tab label="Tab 2" value="tab-2" />
            <SegmentedControls.Tab label="Tab 3" value="tab-3" />
          </SegmentedControls>
        </View>
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'space-between',
            flexDirection: 'row',
            backgroundColor: '$primary1',
            padding: 16,
          }}
        >
          <Layout.Group space={0}>
            <IconSymbol
              icon="location_on"
              variant="outlined"
              color="$secondary2"
            />
            <View style={{ justifyContent: 'center', paddingLeft: 9 }}>
              <Text
                color="$primary2"
                fontWeight="$bold"
                lineHeight="$sm"
                size="$sm"
              >
                For Michael
              </Text>
              <Text
                color="$primary2"
                fontWeight="$normal"
                lineHeight="$sm"
                size="$sm"
              >
                California
              </Text>
            </View>
          </Layout.Group>
          <Button size="small" variant="alt">
            Change
          </Button>
        </View>
      </AppBar>
    </View>
  );
};
```

## Nested Content

Use the `AppBar.NestedContent` component to add nested content to the AppBar with the `nestedContent` prop.
The `AppBar.NestedContent` component adds padding and around the nested content and gaps between the nested content.

```jsx live
<AppBar
  title="Title"
  titleAlignment="left"
  nestedContent={
    <AppBar.NestedContent>
      <Slot height={40}>Nested Content</Slot>
      <Slot height={40}>Nested Content</Slot>
    </AppBar.NestedContent>
  }
  right={
    <Button rounded size="small">
      <IconSymbol
        icon="notifications"
        variant="outlined"
        color="white"
        size={20}
        title="Notifications"
        isScreenReadable
      />
    </Button>
  }
>
  <ProgressBar steps={4} currentStep={1} />
</AppBar>
```

## Banner

Use the `Banner` prop to pass an accessory such as <a href="/mobile/ui/global-app-process">GlobalAppProcess</a> to be displayed at the top of the AppBar.

- <b>
    <a href="/mobile/ui/global-app-process">GlobalAppProcess</a>
  </b>
  : Used to communicate system status or background processes.

```jsx live
<AppBar
  title="AppBar"
  titleAlignment="left"
  banner={<GlobalAppProcess label="Loading" variant="info" />}
/>
```

## Title Alignment

Use the `titleAlignment` props to configure the alignment of the title. The options can be either `center` or `left`
The default is `center`.

```jsx live
<Layout.Stack grow>
  <AppBar title="Left Aligned Title" titleAlignment="left" />
  <AppBar title="Center Aligned Title" titleAlignment="center" />
</Layout.Stack>
```

## Left and Right

The `left` and `right` props are used to placed content on the left and right sides of the title.

```jsx live
<AppBar
  title="Title"
  left={
    <Pressable accessibilityRole="button">
      <Text color="$white">Cancel</Text>
    </Pressable>
  }
  right={<Text color="$white">1 of 5</Text>}
/>
```

## Variants

The App Bar’s functionality should change based on the page that it is on.

- <b>Homepage</b> - On the homepage, App Bar announces the user’s name, and shows
  the Avatar of the specific user.
- <b>Level 1</b> - Level One pages are reserved for the pages that are the highest
  level of navigation. There is no previous content that navigated them to this page,
  and to return to the homepage, the user will click on the Homepage tab on Tab Bar.
- <b>Level 2</b> - Level Two pages are nested pages within a Level One page. The
  Back button in the upper left corner of the title section will bring the user back
  to the Level One page. Like the Level One page, these pages also host a number
  of nested components used to help users navigate the page.

```jsx live
<Layout.Stack grow space={32}>
  <Layout.Stack grow>
    <Text fontWeight="$bold">Homepage</Text>
    <AppBar
      left={<Avatar initials="JA" />}
      titleAlignment="left"
      title="Home"
      subtitle="Jessica Anderson"
      right={
        <Layout.Group>
          <Button rounded size="small">
            <IconSymbol
              icon="notifications"
              variant="outlined"
              color="white"
              size={20}
              title="Notifications"
              isScreenReadable
            />
          </Button>
          <Button rounded size="small">
            <IconSymbol
              icon="search"
              color="white"
              size={20}
              title="Search"
              isScreenReadable
            />
          </Button>
        </Layout.Group>
      }
    />
  </Layout.Stack>
  <Layout.Stack grow>
    <Text fontWeight="$bold">Level 1</Text>
    <AppBar
      titleAlignment="left"
      title="Home"
      right={
        <Layout.Group>
          <Button rounded size="small">
            <IconSymbol
              icon="notifications"
              variant="outlined"
              color="white"
              size={20}
              title="Notifications"
              isScreenReadable
            />
          </Button>
          <Button rounded size="small">
            <IconSymbol
              icon="search"
              color="white"
              size={20}
              title="Search"
              isScreenReadable
            />
          </Button>
        </Layout.Group>
      }
    />
  </Layout.Stack>
  <Layout.Stack grow>
    <Text fontWeight="$bold">Level 2</Text>
    <AppBar
      left={
        <Pressable>
          <IconSymbol icon="chevron_left" color="$white" size={24} />
        </Pressable>
      }
      titleAlignment="center"
      title="Home"
      right={
        <Layout.Group>
          <Button rounded size="small">
            <IconSymbol
              icon="ios_share"
              color="white"
              size={20}
              title="Share"
              isScreenReadable
            />
          </Button>
          <Button rounded size="small">
            <IconSymbol
              icon="more_vert"
              color="white"
              size={20}
              title="Open Menu"
              isScreenReadable
            />
          </Button>
        </Layout.Group>
      }
    />
  </Layout.Stack>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={AppBar}
  rows={[
    {
      name: 'banner',
      type: 'node',
      description:
        'Places content at the top of the AppBar. To be used for the GlobalAppProcess component.',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The content of the app bar',
    },
    {
      name: 'title',
      type: 'string | node',
      description: 'Sets the title of the app bar',
    },
    {
      name: 'subtitle',
      type: 'string | node',
      description: 'Sets the subtitle of the app bar',
    },
    {
      name: 'truncateTitle',
      type: 'boolean',
      description: 'Allows the title to be truncated',
    },
    {
      name: 'left',
      type: 'node',
      description: 'Place content on the left side of the app bar',
    },
    {
      name: 'right',
      type: 'node',
      description: 'Place content on the right side of the app bar',
    },
    {
      name: 'titleAlignment',
      type: "'center' | 'left'",
      description: 'Sets the alignment of the title',
      default: 'center',
    },
    {
      name: 'eyebrow',
      type: 'string | node',
      description: 'Adds an eyebrow string above the title',
    },
    {
      name: 'background',
      type: 'node',
      description: 'Sets background for the AppBar',
    },
    {
      name: 'nestedContent',
      type: 'node',
      description: 'Nested content above the main content of the app bar',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={AppBar}
  rows={[
    {
      name: 'app-bar-root',
      description: 'AppBar root element',
    },
    {
      name: 'app-bar-background',
      description: 'App Bar background',
    },
    {
      name: 'app-bar-wrapper',
      description:
        'Container for the left, center, and right elements of the app bar',
    },
    {
      name: 'app-bar-left',
      description: 'Container for the left side of the app bar',
    },
    {
      name: 'app-bar-center',
      description: 'Container for the center of the app bar',
    },
    {
      name: 'app-bar-right',
      description: 'Container for the right side of the app bar',
    },
    {
      name: 'app-bar-eyebrow',
      description: 'Eyebrow text of the app bar',
    },
    {
      name: 'app-bar-title',
      description: 'Title text of the app bar',
    },
    {
      name: 'app-bar-subtitle',
      description: 'Subtitle text of the app bar',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={AppBar.NestedContent}
  rows={[
    {
      name: 'app-bar-nested-content-root',
      description: 'Nested content subcomponent root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

**It is the responsibility of consuming teams to make sure all components within AppBar are accessible.**

<h2>Dynamic Type</h2>

AppBar scales to 3XL. Additional Icons and Text passed to any prop of type node should
have `maxFontSizeMultiplier={1.3}` set.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={AppBar} keys={['app-bar']} />
```

</Tab>

---
id: arrow
category: Navigation
title: Arrow
description: Navigates between a set number of items.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=27809-47023&mode=design&t=txkb6WojbsllpkON-0
---

<Tab label="Overview">

```jsx
import { Arrow } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Arrow',
  inputs: [
    {
      prop: 'direction',
      type: 'select',
      options: [
        { label: 'back', value: 'back' },
        { label: 'forward', value: 'forward' },
      ]
    },
  ]
}

<Arrow />
```

## Direction

Use the `direction` prop to determine which way the arrow will face. The default is set to `'back'`.

```jsx live
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
  <Arrow direction={'back'} />
  <Arrow direction={'forward'} />
</View>
```

## onPress

Use the `onPress` prop to determine the action when the arrow is pressed.

```jsx live
() => {
  const [direction, setDirection] = useState('Press an arrow');
  const handlePress = (d) => {
    setDirection(d + ' pressed');
  };
  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
      }}
    >
      <Arrow direction={'back'} onPress={() => handlePress('Back')} />
      <Heading offset={6}>{direction}</Heading>
      <Arrow direction={'forward'} onPress={() => handlePress('Forward')} />
    </View>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Arrow}
  rows={[
    {
      name: 'direction',
      type: "'forward' | 'back'",
      description: 'Sets the direction for the arrow to face',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the arrow is pressed',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Arrow}
  rows={[
    {
      name: 'arrow-root',
      description: 'Arrow root element',
    },
    {
      name: 'arrow-icon',
      description: 'Icon element',
    },
  ]}
/>
```

</Tab>

---
id: avatar
category: Data Display
title: Avatar
description: The Avatar component is used to represent a user, and displays the profile picture or the user initials as a fallback.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=10158%3A35251&t=0e2Zlqt54CaApzhj-0
---

<Tab label="Overview">

```jsx
import { Avatar } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Avatar',
  inputs: [
    {
      prop: 'initials',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'select',
      options: [
        { label: 'large', value: 'large' },
        { label: 'Small', value: 'small' },
      ]
    },
    {
      prop: 'colorTheme',
      type: 'select',
      options: [
        { label: 'blue', value: 1 },
        { label: 'green', value: 2 },
        { label: 'orange', value: 3 },
        { label: 'light blue', value: 4 },
      ]
    },
    {
      prop: 'showBorder',
      type: 'boolean'
    },
  ]
}

<Avatar />

```

## Images

Use the `imageUrl` prop to set the `Avatar` image. This can be used to create a co-branded avatar.

```jsx live
<Layout.Stack>
  <Box color="$primary2">
    <Layout.Group space={30}>
      <Avatar
        initials="TM"
        size="large"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar
        initials="TM"
        size="large"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar
        initials="TM"
        size="small"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar
        initials="TM"
        size="small"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
    </Layout.Group>
  </Box>
  <Box color="$interactive4">
    <Layout.Group space={30}>
      <Avatar
        initials="TM"
        size="large"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar
        initials="TM"
        size="large"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar
        initials="TM"
        size="small"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
      <Avatar
        initials="TM"
        size="small"
        imageUrl="https://reactnative.dev/img/tiny_logo.png"
      />
    </Layout.Group>
  </Box>
</Layout.Stack>
```

###### Co-branded Avatars

```jsx live
() => {
  const AvatarBorder = styled('View', {
    borderRadius: 100,
    borderWidth: 4,
    borderColor: '$interactive3',
    marginLeft: -15,
  });

  return (
    <Box
      color="$interactive3"
      padding={8}
      style={{ flexDirection: 'row', alignItems: 'center' }}
    >
      <Avatar size="large" imageUrl="/img/logo.svg" />
      <AvatarBorder>
        <Avatar
          initials="AD"
          size="large"
          styles={{
            'abyss-avatar-initials': {
              color: '$interactive1',
            },
          }}
        />
      </AvatarBorder>
      <Layout.Stack alignItems="left" style={{ paddingLeft: 8 }} space={0}>
        <Text
          color="$primary1"
          fontWeight="$semibold"
          size="$sm"
          numberOfLines={1}
        >
          Abyss Design System
        </Text>
        <Heading offset={6} level={2} color="$primary1">
          Home
        </Heading>
      </Layout.Stack>
    </Box>
  );
};
```

## Color Theme

Use the `colorTheme` prop to set the color of the `Avatar`.
The options are `1` (blue), `2` (green), `3` (orange), and `4` (light blue). The default is `1` (blue).

```jsx live
<Layout.Group space={30}>
  <Avatar initials="TM" colorTheme={1} size="large" />
  <Avatar initials="TM" colorTheme={2} size="large" />
  <Avatar initials="TM" colorTheme={3} size="large" />
  <Avatar initials="TM" colorTheme={4} size="large" />
</Layout.Group>
```

## Size

Use the `size` prop to set the size of the `Avatar`.
The 2 options are `small`, `large`. The default is `small`.

```jsx live
<Layout.Stack space={20}>
  <Layout.Group space={30}>
    <Avatar initials="TM" colorTheme={1} size="large" />
    <Avatar initials="TM" colorTheme={2} size="large" />
    <Avatar initials="TM" colorTheme={3} size="large" />
    <Avatar initials="TM" colorTheme={4} size="large" />
  </Layout.Group>
  <Layout.Group space={30}>
    <Avatar initials="TM" size="small" colorTheme={1} />
    <Avatar initials="TM" size="small" colorTheme={2} />
    <Avatar initials="TM" size="small" colorTheme={3} />
    <Avatar initials="TM" size="small" colorTheme={4} />
  </Layout.Group>
</Layout.Stack>
```

## Notification

Use the Indicator component with the Avatar to display a notification. See [Indicator](/mobile/ui/indicator) for more details and examples.

```jsx live
<Layout.Stack>
  <Box color="$primary2">
    <Layout.Stack space={20}>
      <Layout.Group space={30}>
        <Indicator size="large" withBorder offset={8}>
          <Avatar initials="TM" size="large" colorTheme={1} />
        </Indicator>
        <Indicator size="large">
          <Avatar initials="TM" size="large" colorTheme={2} />
        </Indicator>
        <Indicator withBorder offset={5}>
          <Avatar initials="TM" size="small" colorTheme={3} />
        </Indicator>
        <Indicator>
          <Avatar initials="TM" size="small" colorTheme={4} />
        </Indicator>
      </Layout.Group>
    </Layout.Stack>
  </Box>
  <Box color="$interactive4">
    <Layout.Group space={30}>
      <Indicator size="large" offset={8} withBorder borderColor="$interactive4">
        <Avatar initials="TM" size="large" colorTheme={1} />
      </Indicator>
      <Indicator size="large">
        <Avatar initials="TM" size="large" colorTheme={2} />
      </Indicator>
      <Indicator offset={5} withBorder borderColor="$interactive4">
        <Avatar initials="TM" size="small" colorTheme={3} />
      </Indicator>
      <Indicator>
        <Avatar initials="TM" size="small" colorTheme={4} />
      </Indicator>
    </Layout.Group>
  </Box>
</Layout.Stack>
```

## Show border

Use the `showBorder` prop to add a border to the Avatar.

```jsx live
<Layout.Group space={30}>
  <Avatar initials="TM" colorTheme={1} size="large" showBorder />
  <Avatar initials="TM" colorTheme={2} size="large" showBorder />
  <Avatar initials="TM" colorTheme={3} size="large" showBorder />
  <Avatar initials="TM" colorTheme={4} size="large" showBorder />
</Layout.Group>
```

</Tab>
<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Avatar}
  rows={[
    {
      name: 'initials',
      type: 'string',
      description:
        'Sets the users initials to be displayed inside the component, up to two letters',
    },
    {
      name: 'size',
      type: '"large" | "small"',
      description:
        'Sets the size of the Avatar component. Small is 40px, large is 60px',
      default: '"small"',
    },
    {
      name: 'colorTheme',
      type: '1 | 2 | 3 | 4',
      description: 'Set the color theme of the Avatar',
      default: '1',
    },
    {
      name: 'imageUrl',
      type: 'string',
      description: 'Sets the Avatar image, if one exists',
    },
    {
      name: 'showBorder',
      type: 'boolean',
      description: 'Adds a border to the Avatar',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Avatar}
  rows={[
    {
      name: 'avatar-root',
      description: 'Avatar root element',
    },
    {
      name: 'avatar-initials',
      description: 'Avatar text element',
    },
    {
      name: 'avatar-image',
      description: 'Avatar image element',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

The avatar text will scale up to 3XL.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Avatar} keys={['avatar']} />
```

</Tab>

---
id: badge-v2
category: Data Display
title: V2Badge
description: Used to highlight an item's status for quick recognition.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9534%3A32348
subDirectory: Badge/v2
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2Badge } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'V2Badge',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'success', value: 'success' },
        { label: 'warning', value: 'warning' },
        { label: 'error', value: 'error' },
        { label: 'info', value: 'info' },
        { label: 'neutral', value: 'neutral' },
      ],
      defaultValue: 'success',
    },
    {
      prop: 'outline',
      type: 'boolean',
    },
  ]
}

<V2Badge>Badge Sandbox</V2Badge>
```

## Variants

Use the `variant` property to set the color of the `Badge`.
The options are `success`, `warning`, `error`, `info`, and `neutral`. The default is `success`.

```jsx live
<Layout.Group space={20}>
  <Layout.Stack alignItems="left" space={20}>
    <V2Badge variant="success">Success Badge</V2Badge>
    <V2Badge variant="warning">Warning Badge</V2Badge>
    <V2Badge variant="error">Error Badge</V2Badge>
    <V2Badge variant="info">Info Badge</V2Badge>
    <V2Badge variant="neutral">Neutral Badge</V2Badge>
  </Layout.Stack>
  <Layout.Stack alignItems="left" space={20}>
    <V2Badge variant="success" outline>
      Success Badge
    </V2Badge>
    <V2Badge variant="warning" outline>
      Warning Badge
    </V2Badge>
    <V2Badge variant="error" outline>
      Error Badge
    </V2Badge>
    <V2Badge variant="info" outline>
      Info Badge
    </V2Badge>
    <V2Badge variant="neutral" outline>
      Neutral Badge
    </V2Badge>
  </Layout.Stack>
</Layout.Group>
```

## Outline

Use the `outline` property to turn on the outline of the `Badge`. The default is `false`.

```jsx live
<Layout.Group>
  <V2Badge variant="info" ariaText="information">
    Badge
  </V2Badge>
  <V2Badge outline variant="info" ariaText="information">
    Outlined Badge
  </V2Badge>
</Layout.Group>
```

## Icons

Use the `icon` property to set the icon of the `Badge`.

```jsx live
<Layout.Group>
  <V2Badge
    icon={
      <IconSymbol
        icon="check_circle"
        size="$sm"
        color="$success1"
        variant="filled"
      />
    }
    variant="success"
  >
    Complete
  </V2Badge>
  <V2Badge
    icon={
      <IconSymbol
        icon="do_not_disturb_on"
        size="$sm"
        color="$error1"
        variant="filled"
      />
    }
    variant="error"
  >
    Incomplete
  </V2Badge>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2Badge}
  rows={[
    {
      name: 'outline',
      type: 'boolean',
      description: 'Add an outline to the badge.',
      default: 'false',
    },
    {
      name: 'variant',
      type: '"success" | "warning" | "error" | "info" | "neutral"',
      description: 'Set the color of the badge',
      default: 'success',
    },
    {
      name: 'icon',
      type: 'node',
      description: 'Adds an icon to the Badge component',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The text to be input into the Badge component',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Badge}
  rows={[
    {
      name: 'badge-root',
      description: 'Badge root element',
    },
    {
      name: 'badge-text',
      description: 'Badge text element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={V2Badge} keys={['badge']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={Badge} type="class" />
```

```jsx render
<Docs.ComparisonTable of={Badge} type="props" />
```

</Tab>

---
id: badge
category: Data Display
title: Badge
description: Used to highlight an item's status for quick recognition.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9534%3A32348
pagination_prev: null
---

<Tab label="Overview">

```jsx
import { Badge } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Badge',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'success', value: 'success' },
        { label: 'warning', value: 'warning' },
        { label: 'error', value: 'error' },
        { label: 'info', value: 'info' },
        { label: 'neutral', value: 'neutral' },
      ]
    },
    {
      prop: 'rounded',
      type: 'boolean',
    },
    {
      prop: 'outline',
      type: 'boolean',
    },
  ]
}

<Badge>Badge Sandbox</Badge>
```

## Variants

Use the `variant` property to set the color of the `Badge`.
The options are `success`, `warning`, `error`, `info`, and `neutral`. The default is `success`.

```jsx live
<Layout.Group space={20}>
  <Layout.Stack alignItems="left" space={20}>
    <Badge variant="success">Success Badge</Badge>
    <Badge variant="warning">Warning Badge</Badge>
    <Badge variant="error">Error Badge</Badge>
    <Badge variant="info">Info Badge</Badge>
    <Badge variant="neutral">Neutral Badge</Badge>
  </Layout.Stack>
  <Layout.Stack alignItems="left" space={20}>
    <Badge variant="success" outline>
      Success Badge
    </Badge>
    <Badge variant="warning" outline>
      Warning Badge
    </Badge>
    <Badge variant="error" outline>
      Error Badge
    </Badge>
    <Badge variant="info" outline>
      Info Badge
    </Badge>
    <Badge variant="neutral" outline>
      Neutral Badge
    </Badge>
  </Layout.Stack>
</Layout.Group>
```

## Rounded

Use the `rounded` property to change the style of the `Badge` from rounded or squared. The default is `false`.

```jsx live
<Layout.Group>
  <Badge variant="info" outline ariaText="information">
    Squared Badge
  </Badge>
  <Badge rounded variant="info" outline ariaText="information">
    Rounded Badge
  </Badge>
</Layout.Group>
```

## Outline

Use the `outline` property to turn on the outline of the `Badge`. The default is `false`.

```jsx live
<Layout.Group>
  <Badge variant="info" ariaText="information">
    Badge
  </Badge>
  <Badge outline variant="info" ariaText="information">
    Outlined Badge
  </Badge>
</Layout.Group>
```

## Icons

Use the `icon` property to set the icon of the `Badge`.

```jsx live
<Layout.Group>
  <Badge
    icon={
      <IconSymbol
        icon="check_circle"
        size="$sm"
        color="$success1"
        variant="filled"
      />
    }
    variant="success"
  >
    Complete
  </Badge>
  <Badge
    icon={
      <IconSymbol
        icon="do_not_disturb_on"
        size="$sm"
        color="$error1"
        variant="filled"
      />
    }
    variant="error"
  >
    Incomplete
  </Badge>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Badge}
  rows={[
    {
      name: 'rounded',
      type: 'boolean',
      description: 'Change the badge style',
      default: 'false',
    },
    {
      name: 'outline',
      type: 'boolean',
      description: 'Add an outline to the badge.',
      default: 'false',
    },
    {
      name: 'variant',
      type: '"success" | "warning" | "error" | "info" | "neutral"',
      description: 'Set the color of the badge',
      default: '"success"',
    },
    {
      name: 'icon',
      type: 'node',
      description: 'Adds an icon to the Badge component',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The text to be input into the Badge component',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Badge}
  rows={[
    {
      name: 'badge-root',
      description: 'Badge root element',
    },
    {
      name: 'badge-text',
      description: 'Badge text element',
    },
  ]}
/>
```

</Tab>

---
id: banner-v2
category: Layout
title: V2Banner
description: Used to provide high-level content in a heading, paragraph, and image format within a pressable for navigation.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG?node-id=1492-351&m=dev
subDirectory: Banner/v2
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2Banner } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'V2Banner',
  inputs: [
    {
      prop: 'heading',
      type: 'string',
      defaultValue: '2 line heading max'
    },
    {
      prop: 'paragraph',
      type: 'string',
      defaultValue: 'Description paragraph should not expand on more than four lines and truncates if that is the case.'
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'horizontal', value: 'horizontal' },
        { label: 'vertical-lg', value: 'vertical-lg' },
        { label: 'vertical-sm', value: 'vertical-sm' },
        { label: 'branded', value: 'branded' },
      ],
      defaultValue: 'horizontal'
    },
    {
      prop: 'background',
      type: 'select',
      options: [
        { label: 'White', value: 'white' },
        { label: 'Peach', value: 'peach' },
        { label: 'Mint', value: 'mint' },
        { label: 'Aqua', value: 'aqua' },
        { label: 'Sky Blue', value: 'sky-blue' },
      ],
      defaultValue: 'white'
    },
    {
      prop: 'isClosable',
      type: 'boolean',
    },
  ]
}

<V2Banner />
```

## Variants

Use the `variant` prop to set the type of `Banner` to render.

```jsx live
<Layout.Stack alignItems="left" space={20}>
  <V2Banner
    paragraph="The horizontal banner renders the image on the right side."
    eyebrow="Eyebrow"
    heading="Horizontal"
    variant="horizontal"
  />
  <V2Banner
    paragraph="The large horizontal banner renders the image above the content."
    heading="Vertical Large"
    variant="vertical-lg"
  />
  <V2Banner
    paragraph="The small vertical banner is a smaller banner that renders the image above the content."
    heading="Vertical Small"
    variant="vertical-sm"
  />
  <V2Banner
    paragraph="The branded banner render the image above the heading."
    title="Branded"
    variant="branded"
    image={<Box width={100} height={20} color="$gray1" padding={0} />}
  />
</Layout.Stack>
```

## Background

Use the `background` prop to set the background color of the banner. The default value is `white`.

```jsx live
<Layout.Stack alignItems="left" space={20}>
  <V2Banner
    heading="White"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="white"
  />
  <V2Banner
    heading="Peach"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="peach"
  />
  <V2Banner
    heading="Mint"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="mint"
  />
  <V2Banner
    heading="Aqua"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="aqua"
  />
  <V2Banner
    heading="Sky Blue"
    paragraph="A 'one-stop-shop' for the important things a caregiver could need to give you for providing the best care."
    variant="horizontal"
    background="sky-blue"
  />
</Layout.Stack>
```

## Image

Use the `image` prop to set an image in the image container of the banner.

```jsx live
<Layout.Stack alignItems="left" space={20}>
  <V2Banner
    heading="Go Paperless"
    paragraph="Opt in to receive communication electronically and reduce clutter."
    variant="horizontal"
    image={
      <IconBrand icon="go_digital" variant="twotonelightcircle" size="$sm" />
    }
    imageBackgroundColor="$pastel1"
  />
  <V2Banner
    variant="branded"
    image={
      <Brandmark
        brand="optum"
        affiliate="optum"
        variant="lockup"
        color="orange"
        size={75}
      />
    }
    paragraph="Get 24/7 access to providers by phone, video, or tablet."
    cta={
      <Button
        variant="secondary"
        size="small"
        after={<IconSymbol icon="open_in_new" size="$xs" color="$primary1" />}
      >
        Visit Optum
      </Button>
    }
  />
</Layout.Stack>
```

## Image Background Color

Use the `imageBackgroundColor` prop to set an image in the image container of the banner. The default is `$gray1`.

```jsx live
<V2Banner
  heading="Home Delivery"
  paragraph="Easily fill prescriptions and have them delivered to your door with OptumRx."
  imageBackgroundColor="$pastel1"
  image={<IconBrand size={64} variant="twotonelightcircle" icon="pill" />}
  variant="horizontal"
/>
```

## CTA

Use the `cta` prop to set a call to action button in the banner. If a cta is set
the number of lines of the heading paragraph are limited depending on the size of the CTA.
To view the truncation rules, see the [Banner truncation conditions](https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG?node-id=1620-6985&m=dev).

```jsx live
<Layout.Stack alignItems="left" space={20}>
  <V2Banner
    heading="2 line heading max"
    paragraph="Description paragraph should not expand on more than four lines and truncates if that is the case."
    variant="horizontal"
    image={
      <IconBrand icon="go_digital" variant="twotonelightcircle" size="$sm" />
    }
    imageBackgroundColor="$pastel1"
    cta={
      <Button
        variant="secondary"
        size="small"
        after={<IconSymbol icon="open_in_new" size="$xs" color="$primary1" />}
      >
        Button CTA
      </Button>
    }
  />
  <V2Banner
    heading="2 line heading max"
    paragraph="Description paragraph should not expand on more than four lines and truncates if that is the case."
    imageBackgroundColor="$pastel1"
    image={<IconBrand size={64} variant="twotonelightcircle" icon="pill" />}
    variant="horizontal"
    cta={
      <Link size="small" href="https://www.optumrx.com">
        Link CTA
      </Link>
    }
  />
</Layout.Stack>
```

</Tab>

<Tab label='Integration'>

```jsx render
<Docs.PropsTable
  of={V2Banner}
  rows={[
    {
      name: 'background',
      type: 'string',
      description: 'The background color of the banner.',
      default: 'white',
    },
    {
      name: 'cta',
      type: 'React.ReactNode',
      description: 'The action of the banner.',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The heading text of the banner.',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'The paragraph text of the banner.',
    },
    {
      name: 'image',
      type: 'React.ReactNode',
      description: 'The image of the banner.',
    },
    {
      name: 'imageBackgroundColor',
      type: 'string',
      description: 'The background color of the image container.',
    },
    {
      name: 'variant',
      type: "'horizontal' | 'vertical-lg' | 'vertical-sm' | 'branded'",
      description: 'The variant of the banner.',
      default: "'horizontal'",
    },
    // {
    //   name: 'isClosable',
    //   type: 'boolean',
    //   description: 'Flag to indicate if the banner is closable.',
    //   default: 'false',
    // },
    {
      name: 'onClose',
      type: 'function',
      description:
        'Callback function when the banner is closed. This prop is only used when `isClosable` is true.',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to indicate if the banner is visible.',
      default: 'true',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Banner}
  rows={[
    {
      name: 'banner-root',
      description: 'Root element of the component',
    },
    {
      name: 'banner-content',
      description: 'Container for heading and paragraph',
    },
    {
      name: 'banner-heading',
      description: 'Heading text',
    },
    {
      name: 'banner-paragraph',
      description: 'Paragraph text',
    },
    {
      name: 'banner-image-container',
      description: 'Container for image or icon',
    },
    // {
    //   name: 'banner-close-button',
    //   description: 'Close button container',
    // },
    // {
    //   name: 'banner-close-icon',
    //   description: 'Close icon',
    // },
  ]}
/>
```

</Tab>

<Tab label='Accessibility'>

## Dynamic Type

Text and icons scale to Abyss standards. Any images, illustrations, or IconBrand passed to Banner should not scale. Size AX5 and larger cause reordering and resizing of all variants.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={V2Banner} keys={['banner']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={Banner} type="class" />
```

```jsx render
<Docs.ComparisonTable of={Banner} type="props" />
```

</Tab>

---
id: banner
category: Layout
title: Banner
description: Used to provide high-level content in a title, description, and image format within a pressable for navigation.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=18723-91680&mode=design&t=yH2CaS5OmhOCzV1a-0
subDirectory: Banner/v1
---

<Tab label="Overview">

```jsx
import { Banner } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Banner',
  inputs: [
    {
      prop: 'eyebrow',
      type: 'string',
    },
    {
      prop: 'title',
      type: 'string',
      defaultValue: 'Your Organizer'
    },
    {
      prop: 'description',
      type: 'string',
      defaultValue: 'A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'horizontal-small', value: 'horizontal-small' },
        { label: 'horizontal-large', value: 'horizontal-large' },
        { label: 'vertical', value: 'vertical' },
        { label: 'branded', value: 'branded' },
      ]
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        {label: '$white', value: '$white'},
        {label: '$pastel1', value: '$pastel1'},
        {label: '$pastel2', value: '$pastel2'},
        {label: '$pastel3', value: '$pastel3'},
        {label: '$pastel4', value: '$pastel4'},
      ],
    },
    {
      prop: 'textSize',
      type: 'select',
      options: [
        {label: 'small', value: 'small'},
        {label: 'large', value: 'large'},
      ],
    },
    {
      prop: 'grow',
      type: 'boolean'
    },
    {
      prop: 'fixed',
      type: 'boolean'
    },
    {
      prop: 'isDisabled',
      type: 'boolean'
    },
        {
      prop: 'showExternalIcon',
      type: 'boolean'
    },
    {
      prop: 'centerText',
      type: 'boolean'
    },
    {
      prop: 'isCloseable',
      type: 'boolean'
    },

  ]
}

<Banner eyebrow='Support' title='Your Organizer' />
```

## Variants

Use the `variant` prop to set the type of `Banner` to render.
The options are `horizontal-small`, `horizontal-large`, `vertical`, and `branded`.
Please note that some props will only work with certain variants. Be sure to follow design guidelines when deciding which variant to use for your content.
For variants to be used within <ExitLink href="https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=12446-61354&mode=design&t=wZwPoreZXFpe6OHW-0">Carousel</ExitLink> use the [Carousel Banner](/mobile/ui/banner/#carousel-banner) component, while <ExitLink href="https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=18723-91680&mode=design&t=yH2CaS5OmhOCzV1a-0">Featured Content Cards</ExitLink> should use Banner.

```jsx live
<Layout.Stack alignItems="left" space={20}>
  <Banner
    description="The small horizontal banner has an eyebrow and renders the image on the right side."
    eyebrow="Eyebrow"
    title="Horizontal Small"
    variant="horizontal-small"
    textSize="small"
  />
  <Banner
    description="The large horizontal banner renders the image above the content."
    title="Horizontal Large"
    variant="horizontal-large"
  />
  <Banner
    description="The vertical banner is a smaller banner that renders the image above the content."
    title="Vertical"
    variant="vertical"
  />
  <Banner
    description="The branded banner render the image above the title."
    title="Branded"
    variant="branded"
    image={<Box width={100} height={20} color="$gray1" padding={0} />}
  />
</Layout.Stack>
```

### isCloseable and isVisible

Use the `isCloseable` prop to add a close button to the banner. The default value is `false`. This flag works on horizontal small, horizontal large, and vertical variants.

When the button is pressed, the `onClose` callback is fired.

`isVisible` is a boolean prop that determines whether the banner is visible or not. The default value is `true`.

```jsx live
() => {
  const [isVisible, setIsVisible] = React.useState(true);
  const [isVisible2, setIsVisible2] = React.useState(true);
  const [isVisible3, setIsVisible3] = React.useState(true);
  return (
    <Layout.Stack space={20} alignItems="left">
      <Banner
        description="The small horizontal banner has an eyebrow and renders the image on the right side."
        eyebrow="Eyebrow"
        title="Horizontal Small"
        variant="horizontal-small"
        textSize="small"
        isCloseable
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
      />
      <Banner
        description="The large horizontal banner renders the image above the content."
        title="Horizontal Large"
        variant="horizontal-large"
        isCloseable
        isVisible={isVisible2}
        onClose={() => setIsVisible2(false)}
      />
      <Banner
        description="The vertical banner is a smaller banner that renders the image above the content."
        title="Vertical"
        variant="vertical"
        isCloseable
        isVisible={isVisible3}
        onClose={() => setIsVisible3(false)}
      />
      <Button
        onPress={() => {
          setIsVisible(true);
          setIsVisible2(true);
          setIsVisible3(true);
        }}
      >
        Restore Visibility
      </Button>
    </Layout.Stack>
  );
};
```

## Carousel Banner

Use the `Carousel.Banner` component for use within a carousel. The Carousel Banner receives the same props as Banner with the exception of the `textSize` and `grow` props. It does not allow for multiple variants within the same carousel. See [Carousel](/mobile/ui/carousel) for details on using the carousel component.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left" space={20} grow>
      <Carousel
        slides={[
          <Carousel.Banner
            description="The small horizontal banner has an eyebrow and renders the image on the right side."
            eyebrow="Eyebrow"
            title="Horizontal Small"
            variant="horizontal-small"
          />,
        ]}
      />
      <Carousel
        slides={[
          <Carousel.Banner
            description="The large horizontal banner renders the image above the content."
            title="Horizontal Large"
            variant="horizontal-large"
          />,
        ]}
      />
      <Carousel
        slides={[
          <Carousel.Banner
            description="The vertical banner is a smaller banner that renders the image above the content."
            title="Vertical"
            variant="vertical"
          />,
        ]}
      />
      <Carousel
        slides={[
          <Carousel.Banner
            description="The branded banner render the image above the title."
            title="Branded"
            variant="branded"
            image={<Box width={100} height={20} color="$gray1" padding={0} />}
          />,
        ]}
      />
    </Layout.Stack>
  );
};
```

## Text Content

There are three props that add to the text content area of the Banner: `eyebrow`, `title`, and `description`.

- <b>eyebrow</b> - Sets the eyebrow content above the`title` content. This can be
  a string or a node.
- <b>title</b> - Sets the title content
- <b>description </b> - Sets the description content

```jsx live
<Layout.Stack alignItems="left">
  <Banner
    eyebrow="Eyebrow Text"
    title="Title Text"
    description="This is the description text"
    textSize="small"
  />
  <Banner
    description="Badge can show status, call attention to a related item, or communicate non-actionable, supplemental information"
    eyebrow={<Badge variant={'info'}>Badge</Badge>}
    title={'Title Text'}
    textSize={'small'}
  />
</Layout.Stack>
```

## Text Size

Use the `textSize` prop to set the size of the title and description text. By default it is set to `"large"`.

```jsx live
<Layout.Stack alignItems="left">
  <Banner
    eyebrow="Font size 11"
    title="Font size 12"
    description="Font size 12"
    textSize="small"
  />
  <Banner description="Font size 14" title={'Font size 18'} />
</Layout.Stack>
```

## Colors

Use the `color` prop to set the background color of the content container.
The options are the theme colors `$white`, `$pastel1`, `$pastel2`, `$pastel3`, and `$pastel4`.
The default is `$white`.

```jsx live
<Layout.Stack alignItems="left" space={20} grow>
  <Banner
    color="$white"
    title="White"
    variant="horizontal-small"
    description='A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
  />
  <Banner
    color="$pastel1"
    title="Pastel 1"
    variant="horizontal-small"
    description='A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
  />
  <Banner
    color="$pastel2"
    title="Pastel 2"
    variant="horizontal-small"
    description='A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
  />
  <Banner
    color="$pastel3"
    title="Pastel 3"
    variant="horizontal-small"
    description='A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
  />
  <Banner
    color="$pastel4"
    title="Pastel 4"
    variant="horizontal-small"
    description='A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
  />
</Layout.Stack>
```

## Image

Use the `image` prop to set an image in the image container of the banner.

```jsx live
<Layout.Stack space={16} alignItems="left">
  <Banner
    eyebrow="Preferences"
    title="Go Paperless"
    description="Opt in to receive communication electronically and reduce clutter."
    imageBackgroundColor="$pastel1"
    image={
      <View
        style={{
          alignItems: 'center',
          justifyContent: 'center',
          flexGrow: 1,
        }}
      >
        <View
          style={{
            backgroundColor: 'white',
            height: 60,
            width: 60,
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: 8,
          }}
        >
          <IconBrand icon="go_digital" variant="twotone" size={48} />
        </View>
      </View>
    }
    variant="horizontal-small"
  />
  <Banner
    description="Get 24/7 access to providers by phone, video, or tablet."
    image={
      <Brandmark
        brand="optum"
        affiliate="optum"
        variant="lockup"
        color="orange"
        size={75}
      />
    }
    variant="branded"
    href={'https://www.optum.com/'}
    linkText="External Link"
  />
</Layout.Stack>
```

## Image Background Color

Use the `imageBackgroundColor` prop to set an image in the image container of the banner. The default is `$gray1`.

```jsx live
<Banner
  title="Home Delivery"
  description="Easily fill prescriptions and get at-home delivery using OptumRx."
  imageBackgroundColor="$pastel1"
  image={
    <View
      style={{
        alignItems: 'center',
        justifyContent: 'center',
        flexGrow: 1,
      }}
    >
      <View
        style={{
          backgroundColor: 'white',
          height: 60,
          width: 60,
          alignItems: 'center',
          justifyContent: 'center',
          borderRadius: 8,
        }}
      >
        <IconBrand size={48} variant="twotone" icon="pill" />
      </View>
    </View>
  }
  variant="horizontal-small"
/>
```

## Content

Use the `content` prop to add content to the container. When content is added and `fixed` is set to true, be sure to evaluate whether a title, eyebrow, or description is necessary as the fixed container may clip the additional content.

```jsx live
<Layout.Group>
  <Banner
    title="Your Organizer"
    variant="vertical"
    fixed
    content={
      <View
        style={{ marginTop: 12, flexDirection: 'row', alignItems: 'center' }}
      >
        <Text fontFamily="$heading" color="$primary1" size={30}>
          $0
        </Text>
        <Text style={{ marginLeft: 4 }} fontWeight="$medium">
          cost
        </Text>
      </View>
    }
  />
  <Banner
    title="Your Organizer"
    description="A short banner description."
    variant="vertical"
    fixed={false}
    content={
      <View
        style={{ marginTop: 8, flexDirection: 'row', alignItems: 'center' }}
      >
        <Text fontFamily="$heading" color="$primary1" size={30}>
          $0
        </Text>
        <Text style={{ marginLeft: 4 }} fontWeight="$medium">
          cost
        </Text>
      </View>
    }
  />
</Layout.Group>
```

## Footer

Use the `footer` prop to add content to the bottom of the content container.

```jsx live
<Banner
  title="Your Organizer"
  variant="vertical"
  footer={
    <View style={{ marginTop: 24, flexDirection: 'row', alignItems: 'center' }}>
      <Text fontFamily="$heading" color="$primary1" size={32}>
        $0
      </Text>
      <Text style={{ marginLeft: 4 }} fontWeight="$medium">
        cost
      </Text>
    </View>
  }
/>
```

## Link

Use the `linkText` prop to set the text of the link and the `href` prop to set the URL.

```jsx live
<Layout.Stack>
  <Banner
    title="Your Design System"
    description="Abyss is a design system containing a Design Kit and a Component Library."
    variant="branded"
    href="https://abyss.uhc.com"
    linkText="Abyss"
    image={<Image style={{ height: 25, width: 25 }} source={'/img/logo.svg'} />}
  />
  <Banner
    title="Your Design System"
    description="Abyss is a design system containing a Design Kit and a Component Library."
    variant="horizontal-large"
    href="https://abyss.uhc.com"
    linkText="Abyss"
    imageBackgroundColor="$pastel1"
    image={
      <View
        style={{ alignItems: 'center', justifyContent: 'center', flexGrow: 1 }}
      >
        <Image style={{ height: 100, width: 100 }} source={'/img/logo.svg'} />
      </View>
    }
  />
</Layout.Stack>
```

## CTA Type

The `ctaType` prop allows optional switching of the CTA element to either a Button or Link. The default CTA is a Link for non-branded variants, and a Button for the branded variant.

There are some Design guidelines regarding CTA use and truncation that are recommended, but not enforced by code. They can be found
[here.](https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/v1.58.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1492-351&t=lXSGUgv4HybmB0o2-0)

```jsx live
<Layout.Group wrap>
  <Layout.Stack>
    <Heading>Defaults</Heading>
    <Banner
      title="Your Design System"
      description="Abyss is a design system containing a Design Kit and a Component Library."
      variant="branded"
      href="https://abyss.uhc.com"
      linkText="Abyss"
      image={
        <Image style={{ height: 25, width: 25 }} source={'/img/logo.svg'} />
      }
    />
    <Layout.Space />
    <Banner
      title="Your Design System"
      description="Abyss is a design system containing a Design Kit and a Component Library."
      variant="horizontal-large"
      href="https://abyss.uhc.com"
      linkText="Abyss"
    />
  </Layout.Stack>
  <Layout.Stack>
    <Heading>With Prop</Heading>
    <Banner
      title="Your Design System"
      description="Abyss is a design system containing a Design Kit and a Component Library."
      variant="branded"
      href="https://abyss.uhc.com"
      linkText="Abyss"
      ctaType="link"
      image={
        <Image style={{ height: 25, width: 25 }} source={'/img/logo.svg'} />
      }
    />
    <Layout.Space />
    <Banner
      title="Your Design System"
      description="Abyss is a design system containing a Design Kit and a Component Library."
      variant="horizontal-large"
      href="https://abyss.uhc.com"
      linkText="Abyss"
      ctaType="button"
    />
  </Layout.Stack>
</Layout.Group>
```

## Link Icon

Use the `linkIcon` prop to customize the icon displayed after the link text.

```jsx live
<Layout.Stack>
  <Banner
    title="Your Design System"
    description="Abyss is a design system containing a Design Kit and a Component Library."
    variant="horizontal-large"
    href={'https://abyss.uhc.com'}
    linkText="Abyss"
    imageBackgroundColor="$pastel1"
    image={
      <View
        style={{ alignItems: 'center', justifyContent: 'center', flexGrow: 1 }}
      >
        <Image style={{ height: 100, width: 100 }} source={'/img/logo.svg'} />
      </View>
    }
    linkIcon={
      <IconSymbol icon={'chevron_right'} size={16} color="$interactive1" />
    }
  />
</Layout.Stack>
```

## Grow

Use the `grow` prop to stretch the horizontal banner variants to full width of its container. The default value is `false`.

```jsx live
<View>
  <Banner
    title="Your Organizer"
    description='A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
    variant="horizontal-small"
    color="$pastel3"
    grow
  />
  <Layout.Space />
  <Banner
    title="Your Organizer"
    description='A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
    variant="horizontal-large"
    imageBackgroundColor="$pastel1"
    grow
  />
</View>
```

## Fixed

Use the `fixed` prop to make the height of the banners static. When fixed is true, the `centerText` prop can be set to align the title and description content in the center.

```jsx live
<Layout.Stack grow space={16}>
  <Layout.Group space={16} wrap>
    <Banner
      title="Your Organizer"
      eyebrow="supporting text"
      description="A small description."
      variant="horizontal-small"
      color="$pastel4"
      fixed
      textSize="small"
      centerText
    />
    <Banner
      title="Your Organizer"
      eyebrow="supporting text"
      description="A small description."
      variant="horizontal-small"
      color="$pastel3"
      fixed
      textSize="small"
      centerText
    />
  </Layout.Group>
  <Layout.Group space={16}>
    <Banner
      title="Your Organizer"
      description='A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
      variant="vertical"
      imageBackgroundColor="$pastel1"
      fixed
    />
    <Banner
      title="Your Organizer"
      description="A small description."
      variant="vertical"
      imageBackgroundColor="$pastel2"
      fixed
    />
  </Layout.Group>
</Layout.Stack>
```

</Tab>

<Tab label='Integration'>

```jsx render
<Docs.PropsTable
  of={Banner}
  rows={[
    {
      name: 'color',
      type: '"$white" | "$pastel1" | "$pastel2" | "$pastel3" | "$pastel4"',
      description: 'The background color of the content area',
      default: '$white',
    },
    {
      name: 'description',
      type: 'string',
      description: 'Sets the description for the banner',
    },
    {
      name: 'eyebrow',
      type: 'node',
      description:
        'Sets the eyebrow for the banner. Only for use on the horizontal variants',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'The contents of the Banner footer',
    },
    {
      name: 'content',
      type: 'node',
      description: 'The contents of the Banner',
    },
    {
      name: 'grow',
      type: 'boolean',
      description: 'Flag to stretch horizontal banner variants to full width',
      default: 'false',
    },
    {
      name: 'fixed',
      type: 'boolean',
      description: 'Flag to set all variants to a fixed max content height',
      default: 'false',
    },
    {
      name: 'href',
      type: 'string',
      description: 'Set the URL of the link',
    },
    {
      name: 'image',
      type: 'node',
      description: 'Sets the image inside of the image container',
    },
    {
      name: 'imageBackgroundColor',
      type: 'string',
      description: 'Sets the background color of the image container',
      default: '$gray1',
    },
    {
      name: 'linkText',
      type: 'string',
      description: 'Set the text of the link',
    },
    {
      name: 'linkIcon',
      type: 'node',
      description: 'Set the icon after the link',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the banner is pressed',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Sets the title for the banner',
    },
    {
      name: 'variant',
      type: '"horizontal-small" | "horizontal-large" | "vertical" | "branded"',
      description: 'The banner variant type',
      default: 'horizontal-small',
    },
    {
      name: 'textSize',
      type: '"small" | "large"',
      description: 'Sets the fontSize of the title and description text',
      default: 'large',
    },
    {
      name: 'showExternalIcon',
      type: 'boolean',
      description:
        'Flag to show the open_in_new icon to the right of the title',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Flag to disable the pressable functionality of the banner',
      default: 'false',
    },
    {
      name: 'centerText',
      type: 'boolean',
      description: 'Flag to center the title and description in the banner',
      default: 'false',
    },
    {
      name: 'isCloseable',
      type: 'boolean',
      description: 'Flag to add a close button to the banner',
      default: 'false',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the close button is pressed',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to determine if the banner is visible',
      default: 'true',
    },
    {
      name: 'ctaType',
      type: '"link" | "button"',
      description: 'Sets type of CTA',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Banner}
  rows={[
    {
      name: 'banner-root',
      description: 'Banner root element',
    },
    {
      name: 'banner-image-container',
      description: 'Banner image container',
    },
    {
      name: 'banner-content',
      description: 'Banner content container',
    },
    {
      name: 'banner-eyebrow',
      description: 'Banner eyebrow text',
    },
    {
      name: 'banner-title',
      description: 'Banner title text',
    },
    {
      name: 'banner-description',
      description: 'Banner description text',
    },
    {
      name: 'banner-footer',
      description: 'Banner footer container',
    },
    {
      name: 'banner-text-wrapper',
      description: 'Container around the title and description text',
    },
    {
      name: 'banner-close-button',
      description: 'Close button for the banner',
    },
  ]}
  inherits={[
    { name: 'Link', link: '/mobile/ui/link' },
    { name: 'Button', link: '/mobile/ui/button' },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={Banner} rows={['Link.iconTitle']} />
```

</Tab>

<Tab label='Accessibility'>

## Dynamic Type

Text and icons scale to Abyss standards. Any images, illustrations, or IconBrand passed to Banner should not scale. Size AX5 and larger cause reordering and resizing of all variants.

</Tab>

---
id: bottom-sheet
category: Overlay
title: BottomSheet
description: A surface containing supplementary content that are anchored to the bottom of the screen.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=15431-86066&t=xQWp12dwBu1GhQOV-0
---

<Tab label="Overview">

```jsx
import { BottomSheet } from '@uhg-abyss/mobile';
```

## Example

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');
  const [tempRadioValue, setTempRadioValue] = useState(radioValue);
  const [isVisible, setIsVisible] = useState(false);
  const [isVisible2, setIsVisible2] = useState(false);

  const updateRadioValue = (save) => {
    if (save) {
      setRadioValue(tempRadioValue);
    } else {
      setTempRadioValue(radioValue);
    }
    setIsVisible(false);
  };

  return (
    <View>
      <Layout.Stack space={20}>
        <View>
          <Button onPress={() => setIsVisible(!isVisible)}>
            Show Radio Bottom Sheet
          </Button>
        </View>
        <View>
          <Button onPress={() => setIsVisible2(!isVisible2)}>
            Show Other Bottom Sheet
          </Button>
        </View>
      </Layout.Stack>
      <BottomSheet
        hideBorder
        isVisible={isVisible}
        onClose={() => updateRadioValue()}
        title="A really long title"
        footer={
          <View>
            <Button onPress={() => updateRadioValue(true)}>
              <Text color="$white">Select Value: {tempRadioValue}</Text>
            </Button>
            <Layout.Space space={12} />
            <Button onPress={() => updateRadioValue(false)} variant="tertiary">
              Cancel
            </Button>
          </View>
        }
      >
        <View>
          <CellGroup
            fullBorder
            type="radio"
            value={tempRadioValue}
            onChange={setTempRadioValue}
          >
            <CellGroup.Cell title="Cell Title" value="one" />
            <CellGroup.Cell title="Cell Title" value="two" />
            <CellGroup.Cell title="Cell Title" value="three" />
          </CellGroup>
        </View>
      </BottomSheet>
      <BottomSheet
        onClose={setIsVisible2}
        isVisible={isVisible2}
        title="I Need You To Delete This Step"
        footer={
          <View>
            <Button onPress={() => setIsVisible2(!isVisible2)}>
              Yes, delete this step
            </Button>
            <Layout.Space space={12} />
            <Button
              onPress={() => setIsVisible2(!isVisible2)}
              variant="secondary"
            >
              Cancel
            </Button>
          </View>
        }
      >
        <Text>
          You can customize your estimate by deleting this step. Would you like
          to delete this step from the estimate?
        </Text>
      </BottomSheet>
    </View>
  );
};
```

### Scrolling

When the content of the BottomSheet becomes too long to display, scrolling is automatically enabled. In code, the height of the content is compared to the max height of the BottomSheet, which is 90% of the screen.

To manually disable scrolling, setting `scrollEnabled` to `false` will switch the component from a ScrollView to a View. Default is `true,` meaning the
height of the content will determine scrollability.

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');
  const [tempRadioValue, setTempRadioValue] = useState(radioValue);
  const [isVisible, setIsVisible] = useState(false);

  const updateRadioValue = (save) => {
    if (save) {
      setRadioValue(tempRadioValue);
    } else {
      setTempRadioValue(radioValue);
    }
    setIsVisible(false);
  };

  return (
    <View>
      <Layout.Stack space={20}>
        <View>
          <Button onPress={() => setIsVisible(!isVisible)}>
            Show Radio Bottom Sheet
          </Button>
        </View>
      </Layout.Stack>
      <BottomSheet
        hideBorder
        isVisible={isVisible}
        onClose={() => updateRadioValue()}
        title="A really long title"
        footer={
          <View>
            <Button onPress={() => updateRadioValue(true)}>
              <Text color="$white">Select Value: {tempRadioValue}</Text>
            </Button>
            <Layout.Space space={12} />
            <Button onPress={() => updateRadioValue(false)} variant="tertiary">
              Cancel
            </Button>
          </View>
        }
      >
        <View>
          <CellGroup
            fullBorder
            type="radio"
            value={tempRadioValue}
            onChange={setTempRadioValue}
          >
            <CellGroup.Cell title="Cell Title" value="one" />
            <CellGroup.Cell title="Cell Title" value="two" />
            <CellGroup.Cell title="Cell Title" value="three" />
            <CellGroup.Cell title="Cell Title" value="four" />
            <CellGroup.Cell title="Cell Title" value="five" />
            <CellGroup.Cell title="Cell Title" value="six" />
            <CellGroup.Cell title="Cell Title" value="seven" />
            <CellGroup.Cell title="Cell Title" value="eight" />
            <CellGroup.Cell title="Cell Title" value="nine" />
            <CellGroup.Cell title="Cell Title" value="ten" />
            <CellGroup.Cell title="Cell Title" value="eleven" />
            <CellGroup.Cell title="Cell Title" value="twelve" />
            <CellGroup.Cell title="Cell Title" value="thirteen" />
            <CellGroup.Cell title="Cell Title" value="fourteen" />
            <CellGroup.Cell title="Cell Title" value="fifteen" />
            <CellGroup.Cell title="Cell Title" value="sixteen" />
            <CellGroup.Cell title="Cell Title" value="seventeen" />
            <CellGroup.Cell title="Cell Title" value="eighteen" />
          </CellGroup>
        </View>
      </BottomSheet>
    </View>
  );
};
```

### Closing on Background Press

By default, the BottomSheet will close when the user taps on the background overlay. This can be disabled by setting the `disableOverlayPress` prop to `true`.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <View>
      <Layout.Stack space={20}>
        <View>
          <Button onPress={() => setIsVisible(!isVisible)}>
            Show Bottom Sheet
          </Button>
        </View>
      </Layout.Stack>
      <BottomSheet
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        title="Bottom Sheet with Background Click Disabled"
        disableOverlayPress
        footer={
          <View>
            <Button onPress={() => setIsVisible(!isVisible)}>
              Close Bottom Sheet
            </Button>
          </View>
        }
      >
        <Text>
          Tapping outside this Bottom Sheet will not close it. Use the button
          below to close.
        </Text>
      </BottomSheet>
    </View>
  );
};
```

## Advanced Layout

Layouts like BottomSheet and Modal can be used in combination with each other to create flows.

```jsx live
() => {
  const team = [
    {
      firstName: 'Michael',
      lastName: 'White',
      linkText: 'California',
      subText: 'MM/DD/YYYY',
      value: '1',
    },
    {
      firstName: 'Thomas',
      lastName: 'Musengwa',
      linkText: 'Arkansas',
      subText: 'MM/DD/YYYY',
      value: '2',
    },
    {
      firstName: 'Bailey',
      lastName: 'Surowiec',
      linkText: 'Illinois',
      subText: 'MM/DD/YYYY',
      value: '3',
    },
    {
      firstName: 'Pablo',
      lastName: 'Zepeda',
      linkText: 'California',
      subText: 'MM/DD/YYYY',
      value: '4',
    },
  ];

  const locations = [
    {
      name: 'Alabama',
      value: 'AL',
    },
    {
      name: 'Alaska',
      value: 'AK',
    },
    {
      name: 'Arizona',
      value: 'AZ',
    },
    {
      name: 'Arkansas',
      value: 'AR',
    },
    {
      name: 'California',
      value: 'CA',
    },
    {
      name: 'Colorado',
      value: 'CO',
    },
    {
      name: 'Connecticut',
      value: 'CT',
    },
    {
      name: 'Delaware',
      value: 'DE',
    },
    {
      name: 'Florida',
      value: 'FL',
    },
    {
      name: 'Georgia',
      value: 'GA',
    },
    {
      name: 'Hawaii',
      value: 'HI',
    },
    {
      name: 'Idaho',
      value: 'ID',
    },
    {
      name: 'Illinois',
      value: 'IL',
    },
    {
      name: 'Indiana',
      value: 'IN',
    },
    {
      name: 'Iowa',
      value: 'IA',
    },
    {
      name: 'Kansas',
      value: 'KS',
    },
    {
      name: 'Kentucky',
      value: 'KY',
    },
    {
      name: 'Louisiana',
      value: 'LA',
    },
    {
      name: 'Maine',
      value: 'ME',
    },
    {
      name: 'Maryland',
      value: 'MD',
    },
    {
      name: 'Massachusetts',
      value: 'MA',
    },
    {
      name: 'Michigan',
      value: 'MI',
    },
    {
      name: 'Minnesota',
      value: 'MN',
    },
    {
      name: 'Mississippi',
      value: 'MS',
    },
    {
      name: 'Missouri',
      value: 'MO',
    },
    {
      name: 'Montana',
      value: 'MT',
    },
    {
      name: 'Nebraska',
      value: 'NE',
    },
    {
      name: 'Nevada',
      value: 'NV',
    },
    {
      name: 'New Hampshire',
      value: 'NH',
    },
    {
      name: 'New Jersey',
      value: 'NJ',
    },
    {
      name: 'New Mexico',
      value: 'NM',
    },
    {
      name: 'New York',
      value: 'NY',
    },
    {
      name: 'North Carolina',
      value: 'NC',
    },
    {
      name: 'North Dakota',
      value: 'ND',
    },
    {
      name: 'Ohio',
      value: 'OH',
    },
    {
      name: 'Oklahoma',
      value: 'OK',
    },
    {
      name: 'Oregon',
      value: 'OR',
    },
    {
      name: 'Pennsylvania',
      value: 'PA',
    },
    {
      name: 'Rhode Island',
      value: 'RI',
    },
    {
      name: 'South Carolina',
      value: 'SC',
    },
    {
      name: 'South Dakota',
      value: 'SD',
    },
    {
      name: 'Tennessee',
      value: 'TN',
    },
    {
      name: 'Texas',
      value: 'TX',
    },
    {
      name: 'Utah',
      value: 'UT',
    },
    {
      name: 'Vermont',
      value: 'VT',
    },
    {
      name: 'Virginia',
      value: 'VA',
    },
    {
      name: 'Washington',
      value: 'WA',
    },
    {
      name: 'West Virginia',
      value: 'WV',
    },
    {
      name: 'Wisconsin',
      value: 'WI',
    },
    {
      name: 'Wyoming',
      value: 'WY',
    },
  ];

  const [data, setData] = useState(team);
  const [value, setValue] = useState(data[0].value);
  const [member, setMember] = useState(data[0]);

  const [isVisible, setIsVisible] = useState(false);
  const [showModal, setShowModal] = useState(false);

  const getCurrentMember = (data, val) => {
    return data.find(({ value }) => value === val);
  };

  const getLocation = (locations, val) => {
    return locations.find(({ value }) => value === val);
  };

  const showToastMessage = () => {
    Toast.show({
      text: 'Member changed',
      variant: 'success',
    });
  };

  const handlePress = () => {
    setIsVisible(true);
  };

  const updateTeam = (newLocation) => {
    const newArr = data.map((member) => {
      if (member.value === value) {
        member.linkText = newLocation;
      }
      return member;
    });
    setData(newArr);
  };

  const handlePressLink = (value) => {
    const currentMember = getCurrentMember(data, value);
    setValue(currentMember.value);
    setShowModal(true);
  };

  const handleButtonPress = () => {
    const currentMember = getCurrentMember(data, value);
    setMember(currentMember);
    setIsVisible(false);
    showToastMessage();
  };

  const handleCellPress = (val) => {
    const newLocation = getLocation(locations, val);
    updateTeam(newLocation.name);
    const currentMember = getCurrentMember(data, value);
    Toast.show({
      text:
        currentMember.firstName +
        "'s location updated to " +
        newLocation.name +
        '!',
      variant: 'success',
    });
  };

  const TextView = styled('View', {
    justifyContent: 'center',
    paddingLeft: 9,
  });

  const Content = styled('View', {
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    backgroundColor: '$primary1',
    padding: '$md',
  });

  return (
    <ToastProvider>
      <Layout.Stack grow>
        <Content>
          <Layout.Group space={0}>
            <IconSymbol
              icon="location_on"
              variant="outlined"
              color="$secondary2"
            />
            <TextView>
              <Text
                color="$primary2"
                fontWeight="$bold"
                lineHeight="$sm"
                size="$sm"
              >
                {'For ' + member.firstName}
              </Text>
              <Text
                color="$primary2"
                fontWeight="$normal"
                lineHeight="$sm"
                size="$sm"
              >
                {member.linkText}
              </Text>
            </TextView>
          </Layout.Group>
          <View>
            <Button onPress={handlePress} size="small" variant={'alt'}>
              Change
            </Button>
          </View>
        </Content>
        <BottomSheet
          isVisible={isVisible}
          onClose={() => setIsVisible(false)}
          title={'Select a member'}
          footer={<Button onPress={handleButtonPress}>Confirm</Button>}
        >
          <CellGroup
            type={'radio'}
            value={value}
            onChange={setValue}
            hideBorderTop
          >
            {data.map(
              ({ linkText, value, firstName, lastName, subText }, i) => (
                <CellGroup.Cell
                  key={value}
                  value={value}
                  title={firstName + ' ' + lastName}
                  titleWeight={'$semibold'}
                  icon={
                    <Avatar
                      initials={firstName[0] + lastName[0]}
                      colorTheme={i + 1}
                    />
                  }
                >
                  {subText && (
                    <CellGroup.CellDescription>
                      {subText}
                    </CellGroup.CellDescription>
                  )}
                  {linkText && (
                    <Link
                      size="small"
                      onPress={() => handlePressLink(value)}
                      after={
                        <IconSymbol
                          icon={'chevron_right'}
                          color={'$interactive1'}
                          size={18}
                        />
                      }
                    >
                      {linkText}
                    </Link>
                  )}
                </CellGroup.Cell>
              )
            )}
          </CellGroup>
          <Modal
            title={'Select a Location'}
            isVisible={showModal}
            onClose={() => setShowModal(false)}
            actionLeft={
              <IconSymbol
                icon="chevron_left"
                color="$primary1"
                title="Back"
                isScreenReadable
              />
            }
            onActionLeftPress={() => {
              setShowModal(false);
            }}
          >
            <CellGroup value={value} hideBorderTop hideBorderBottom>
              <ToastProvider>
                {locations.map(({ value, name }) => (
                  <CellGroup.Cell
                    key={value}
                    title={name}
                    onPress={() => handleCellPress(value)}
                    iconRight={
                      <IconSymbol
                        icon="check"
                        color={'$primary2'}
                        title="Select"
                        isScreenReadable
                      />
                    }
                  ></CellGroup.Cell>
                ))}
              </ToastProvider>
            </CellGroup>
          </Modal>
        </BottomSheet>
      </Layout.Stack>
    </ToastProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={BottomSheet}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The content of the BottomSheet',
    },
    {
      name: 'footer',
      type: 'node',
      description:
        'Content that will be at the bottom of the BottomSheet (generally used for buttons)',
    },
    {
      name: 'title',
      type: 'string',
      description: 'The title of the BottomSheet',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description:
        'Variable used to control the visible state of the BottomSheet',
      default: 'false',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Function called on BottomSheet close',
    },
    {
      name: 'scrollEnabled',
      type: 'boolean',
      description: 'Enable or disable ScrollView on the BottomSheet',
      default: 'true',
    },
    {
      name: 'hideBorder',
      type: 'boolean',
      description: 'Flag to hide the border at the top of the BottomSheet',
      default: 'false',
    },
    {
      name: 'disableOverlayPress',
      type: 'boolean',
      description:
        'Toggle closing the BottomSheet when the user clicks on the background overlay',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={BottomSheet}
  rows={[
    {
      name: 'bottom-sheet-root',
      description: 'BottomSheet root element',
    },
    {
      name: 'bottom-sheet-overlay',
      description: 'BottomSheet overlay element',
    },
    {
      name: 'bottom-sheet-container',
      description: 'BottomSheet container element',
    },
    {
      name: 'bottom-sheet-background',
      description: 'BottomSheet background element',
    },
    {
      name: 'bottom-sheet-header-container',
      description: 'BottomSheet header container',
    },
    {
      name: 'bottom-sheet-top-bar',
      description: 'BottomSheet top bar element',
    },
    {
      name: 'bottom-sheet-header',
      description: 'BottomSheet header element',
    },
    {
      name: 'bottom-sheet-title',
      description: 'BottomSheet title text',
    },
    {
      name: 'bottom-sheet-close-button',
      description: 'BottomSheet close button',
    },
    {
      name: 'bottom-sheet-close-icon',
      description: 'BottomSheet close icon',
    },
    {
      name: 'bottom-sheet-content-container',
      description: 'BottomSheet content element',
    },
    {
      name: 'bottom-sheet-footer-container',
      description: 'BottomSheet footer element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={BottomSheet} rows={['close']} />
```

</Tab>

<Tab label="Accessibility">

## Focus Guidance

Abyss does not control the focus of components on the screen when the Bottomsheet is toggled off. To meet
accessibility guidelines, the focus must be set to the previous node when closed. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For example, if a button is pressed to open a Bottomsheet, focus must return to that button once it is closed, so that a screen reader or keyboard user may continue using the app where they left off.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={BottomSheet} keys={['bottom-sheet']} />
```

</Tab>

---
id: box
category: Layout
title: Box
description: Used as a blanket filler to surround just about any component(s) with color or create a box of predefined size.
---

<Tab label="Overview">

```jsx
import { Box } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Box',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'padding',
      type: 'string',
    },
    {
      prop: 'height',
      type: 'string',
    },
    {
      prop: 'width',
      type: 'string',
    },
    {
      prop: 'color',
      type: 'string'
    },
  ],
}

<Box width={100}></Box>
```

## Basic Usage

`Box` is a container component that can be used to organize or structure a screen. Use `height` and `width` to control the size.

## Children

`Box` takes children of type `node`.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left" grow>
      <Box height={50} width={200} color={'$info1'}>
        <Text color="white">Abyss is cool!</Text>
      </Box>
      <Box width={200} color={'$pastel1'}>
        <Button size={'small'}>Example</Button>
      </Box>
    </Layout.Stack>
  );
};
```

## Color

The `color` prop sets the background color. The default is set to $gray2.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <Box height={50} width={100}></Box>
      <Box height={50} width={100} color={'$pastel3'}></Box>
      <Box height={50} width={100} color={'$secondary1'}></Box>
    </Layout.Stack>
  );
};
```

## Padding

The `padding` prop sets the padding in all directions. The default is set to $md.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <Box width={200} color={'$info1'}>
        <Text color="white">Default Padding</Text>
      </Box>
      <Box width={200} color={'$secondary1'} padding={'$lg'}>
        <Text color="white">Large Padding</Text>
      </Box>
    </Layout.Stack>
  );
};
```

## Search Message Example

A simple component that displays a message with a link to search for a different term.
[Design](https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=64584-133368&mode=design&t=oXWMZJo7aLUqUiFG-0)

```jsx live
() => {
  return (
    <Box width={400} color={'$pastel1'}>
      <Layout.Stack alignItems={'left'}>
        <Text>
          <Text>Results for providers that can treat </Text>
          <Text fontWeight="bold">knee replacement</Text>
          <Text> in the following categories:</Text>
        </Text>
        <Link size="small" after={<IconSymbol icon="chevron_right" />}>
          Search for knee repladment instead
        </Link>
      </Layout.Stack>
    </Box>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Box}
  rows={[
    {
      name: 'width',
      type: 'number | string',
      description: 'Set width of Box',
    },
    {
      name: 'height',
      type: 'number | string',
      description: 'Set height of Box',
    },
    {
      name: 'children',
      type: 'node',
      description: 'Children of the Box component',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set color of Box',
      default: '$gray2',
    },

    {
      name: 'padding',
      type: 'number | string',
      description: 'Set padding of Box',
      default: '$md',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Box}
  rows={[
    {
      name: 'box-root',
      description: 'Box root element',
    },
  ]}
/>
```

</Tab>

---
id: bullets
category: Controls
title: Bullets
description: Used to represent the active slide or card in a stack of slides, like a Carousel.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=12804-63325&t=NM5yYbHIHkde3zlc-0
---

<Tab label="Overview">

```jsx
import { Bullets } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Bullets',
  inputs: [
    {
      prop: 'bullets',
      type: 'number',
    },
  ],
}

() => {
  const [active, setActive] = useState(1);
  return (
    <Bullets bullets={6} active={active} onChange={setActive} />
  )
}

```

## Usage

Bullets are the simplified visual pagination for the Carousel component. The active slide or card is shown with a long rectangle, while inactive slides are light blue circles. There will only ever be one active bullet at a time. When the user swipes the carousel or presses on an arrow, the animation of the bullet changes.

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [active, setActive] = useState(3);
  return <Bullets active={active} onChange={setActive} bullets={6} />;
};
```

## Bullets

Use the `bullets` prop to set the number of bullets. Bullets should not be used for less than three and no more than six cards, therefore this number should fall between three (3) and six (6).

```jsx live
() => {
  const [active, setActive] = useState(1);
  const [active2, setActive2] = useState(2);

  return (
    <Layout.Stack>
      <Bullets active={active} onChange={setActive} bullets={3} />
      <Bullets active={active2} onChange={setActive2} bullets={6} />
    </Layout.Stack>
  );
};
```

## Active

Use the `active` prop to set the position of the active bullet. This should be between 1 and the number of bullets. See the example below where the active bullet can be changed by pressing on a specific bullet, or by pressing on the numbered buttons, which directly set the active bullet.

```jsx live
() => {
  const [active, setActive] = useState(1);
  return (
    <Layout.Stack space={24}>
      <Bullets active={active} onChange={setActive} bullets={4} />
      <Layout.Group>
        <Button onPress={() => setActive(1)}>1</Button>
        <Button onPress={() => setActive(2)}>2</Button>
        <Button onPress={() => setActive(3)}>3</Button>
        <Button onPress={() => setActive(4)}>4</Button>
      </Layout.Group>
    </Layout.Stack>
  );
};
```

</Tab>
<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Bullets}
  rows={[
    {
      name: 'bullets',
      type: 'number',
      description: 'The number of bullets',
    },
    {
      name: 'active',
      type: 'number',
      description: 'The position of the active bullet',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Bullets}
  rows={[
    {
      name: 'bullets-root',
      description: 'Bullets root element',
    },
    {
      name: 'bullets-wrapper',
      description: 'Container element around the row of bullets',
    },
    {
      name: 'bullets-inactive-bullet',
      description: 'The inactive bullet element',
    },
    {
      name: 'bullets-active-bullet',
      description: 'The active bullet element',
    },
    {
      name: 'bullets-arrow-button',
      description: 'Bullets pagination arrow button element',
    },
    {
      name: 'bullets-arrow-icon',
      description: 'Bullets pagination arrow icon element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={Bullets} rows={['Bullets.card']} />
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Bullets} keys={['bullets']} />
```

</Tab>

---
id: Button-V2
category: Navigation
title: V2Button
description: Used to trigger an action or event.
design: https://www.figma.com/design/wCMblLsq9TxAQvKzY3EfCt/v1.66.0-App-Abyss-UHC-Component-Library?node-id=9529-32359&p=f&m=dev
---

<Tab label="Overview">

```jsx
import { V2Button } from '@uhg-abyss/mobile';
```

```jsx sandbox
{  component: 'V2Button',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      defaultValue: 'brand',
      options: [
        { label: 'brand', value: 'brand' },
        { label: 'neutral', value: 'neutral' },
        { label: 'destructive', value: 'destructive' },
        { label: 'inverse', value: 'inverse' },
      ],
    },
    {
      prop: 'type',
      type: 'select',
      defaultValue: 'filled',
      options: [
        { label: 'filled', value: 'filled' },
        { label: 'outline', value: 'outline' },
        { label: 'text', value: 'text' },
      ],
    },
    {
      prop: 'size',
      type: 'select',
      defaultValue: 'large',
      options: [
        { label: 'large', value: 'large' },
        { label: 'small', value: 'small' },
      ],
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },

  ],
}

<V2Button>Click Here!</V2Button>
```

## Button Types and Variants

V2Button provides distinct visual styles through separate `type` and `variant` props:

- Use the `type` prop to specify the button style category: `filled`, `outline`, or `text`.
- Use the `variant` prop to indicate purpose: `brand` (primary actions), `neutral` (secondary actions), `destructive` (dangerous actions), or `inverse` (on dark backgrounds).

By default, `brand` variant and `filled` type are enabled.

```jsx live
<Layout.Stack grow>
  <Layout.Group>
    <V2Button type="filled" variant="brand">
      Filled Brand
    </V2Button>
    <V2Button type="filled" variant="neutral">
      Filled Neutral
    </V2Button>
    <V2Button type="filled" variant="destructive">
      Filled Destructive
    </V2Button>
  </Layout.Group>
  <Layout.Group>
    <V2Button type="outline" variant="brand">
      Outline Brand
    </V2Button>
    <V2Button type="outline" variant="neutral">
      Outline Neutral
    </V2Button>
    <V2Button type="outline" variant="destructive">
      Outline Destructive
    </V2Button>
  </Layout.Group>
  <Layout.Group>
    <V2Button type="text" variant="brand">
      Text Brand
    </V2Button>
    <V2Button type="text" variant="neutral">
      Text Neutral
    </V2Button>
    <V2Button type="text" variant="destructive">
      Text Destructive
    </V2Button>
  </Layout.Group>
  <Box color="$primary1">
    <Layout.Group>
      <V2Button type="filled" variant="inverse">
        Filled Inverse
      </V2Button>
      <V2Button type="outline" variant="inverse">
        Outline Inverse
      </V2Button>
      <V2Button type="text" variant="inverse">
        Text Inverse
      </V2Button>
    </Layout.Group>
  </Box>
</Layout.Stack>
```

## Size

Use the `size` prop to change the size of the button. The size prop can take in either `large` or `small`. The default value is `large`. To better visualize the difference, the Layout is preventing the large from taking up the full screen.

```jsx live
<Layout.Stack>
  <V2Button size="large">Large Button</V2Button>
  <V2Button size="small" type="outline" variant="brand">
    Small Button
  </V2Button>
</Layout.Stack>
```

## Icon Position

The `iconPosition` prop controls where icons appear in your button. There are three options:

- `trailing` (default): Places the icon after the button text
- `leading`: Places the icon before the button text
- `iconOnly`: Creates a small circular button with only the icon and no text

```jsx live
<Layout.Stack grow>
  <V2Button icon="arrow_forward" variant="brand">
    Continue
  </V2Button>
  <V2Button icon="send" type="filled" variant="neutral">
    Send Message
  </V2Button>
  <V2Button icon="arrow_back" iconPosition="leading" variant="brand">
    Back
  </V2Button>
  <V2Button
    icon="shopping_cart"
    iconPosition="leading"
    type="filled"
    variant="neutral"
  >
    Add to Cart
  </V2Button>
</Layout.Stack>
```

### Icon-Only Buttons

`iconPosition="iconOnly"` creates button with no text.

```jsx live
<Layout.Stack>
  <Layout.Group>
    <V2Button
      iconPosition="iconOnly"
      icon={{ name: 'favorite' }}
      variant="brand"
      accessibilityLabel="Favorite"
    />
    <V2Button
      iconPosition="iconOnly"
      icon={{ name: 'search' }}
      type="filled"
      variant="neutral"
      accessibilityLabel="Search"
    />
    <V2Button
      iconPosition="iconOnly"
      icon={{ name: 'delete' }}
      type="filled"
      variant="destructive"
      accessibilityLabel="Delete"
    />
  </Layout.Group>
</Layout.Stack>
```

## Icons

V2Button provides icon support through the `icon` prop. You can display icons in different ways:

**Using an Icon Object:** Provide an icon object with properties:

- `name`: The icon name (from [IconSymbol](mobile/ui/icon-symbol))
- `variant`: icon style ('filled' or 'outlined')

**Using a String Name:** Provide the icon name as a valid IconSymbol name string.

**Using a React Node:** For advanced use cases, you can provide a custom Icon component.

**Using a Function:** Use a function that returns a React node, which receives the button's pressed state and allows `V2Button` to set the color according to Abyss color mappings, or override them.

```jsx live
<Layout.Stack grow>
  <V2Button icon={{ name: 'print', variant: 'filled' }} variant="brand">
    Object
  </V2Button>
  <V2Button icon="add" variant="neutral">
    String
  </V2Button>
  <V2Button
    variant="brand"
    type="outline"
    icon={<IconSymbol icon="api" color="white" size={16} />}
  >
    ReactNode
  </V2Button>
  <V2Button
    icon={({ color, isPressed }: { color: Abyss.Color }) => {
      return (
        <IconSymbol
          icon="info"
          size={16}
          color={isPressed ? '#890000' : color}
        />
      );
    }}
    iconPosition="leading"
    variant="destructive"
    type="outline"
  >
    Function
  </V2Button>
</Layout.Stack>
```

## Loading

When `isLoading` is set to `true`, a spinner indicates that an action is in progress, and `onPress` events are disabled.

```jsx live
<Layout.Stack grow>
  <V2Button
    variant="brand"
    type="filled"
    size="large"
    icon={{
      name: 'print',
      variant: 'outlined',
      position: 'leading',
    }}
    isLoading
  >
    Button
  </V2Button>
  <V2Button
    variant="destructive"
    type="filled"
    size="large"
    icon={{
      name: 'print',
      variant: 'outlined',
      position: 'leading',
    }}
    isLoading
  >
    Button
  </V2Button>
  <V2Button
    variant="brand"
    type="outline"
    size="large"
    icon={{
      name: 'print',
      variant: 'outlined',
      position: 'leading',
    }}
    isLoading
  >
    Button
  </V2Button>
  <V2Button
    variant="destructive"
    type="outline"
    size="large"
    icon={{
      name: 'print',
      variant: 'outlined',
      position: 'leading',
    }}
    isLoading
  >
    Button
  </V2Button>
  <V2Button
    iconPosition="iconOnly"
    icon={{ name: 'favorite' }}
    variant="brand"
    isLoading
    accessibilityLabel="Favorite"
  />
  <V2Button
    iconPosition="iconOnly"
    icon={{ name: 'search' }}
    type="outline"
    variant="neutral"
    isLoading
    accessibilityLabel="Search"
  />
</Layout.Stack>
```

## Disabled

Use the `isDisabled` prop to render the button in a non-interactive state. A disabled button cannot be in a loading state.

```jsx live
<Layout.Stack grow>
  <V2Button isDisabled>Disabled Button</V2Button>
  <V2Button
    type="outline"
    variant="destructive"
    isDisabled
    icon={{ name: 'delete', position: 'leading' }}
  >
    Cannot Delete
  </V2Button>
  <V2Button type="text" variant="brand" isDisabled>
    Unavailable
  </V2Button>
  <V2Button
    iconPosition="iconOnly"
    icon={{ name: 'print' }}
    isDisabled
    accessibilityLabel="Print"
  />
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2Button}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the button component',
    },
    {
      name: 'variant',
      type: "'brand' | 'neutral' | 'destructive' | 'inverse'",
      default: 'brand',
      description: 'The color scheme of the button',
    },
    {
      name: 'type',
      type: "'filled' | 'outline' | 'text'",
      default: 'filled',
      description: 'The style category of the button',
    },
    {
      name: 'icon',
      type: '{ name: string, variant?: string } | React.ReactNode | string | Function',
      description: 'Configuration for an icon to display in the button',
    },
    {
      name: 'iconPosition',
      type: "'leading' | 'trailing' | 'iconOnly'",
      default: 'false',
      description: 'When true, displays only the icon in a circular button',
    },
    {
      name: 'size',
      type: "'large' | 'small'",
      default: 'large',
      description: 'Set the size of the button',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      default: 'false',
      description: 'Flag to disable the button',
    },
    {
      name: 'isLoading',
      type: 'boolean',
      default: 'false',
      description: 'Flag to show loading spinner within the button',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Button}
  rows={[
    {
      name: 'button-root',
      description: 'Button root element',
    },
    {
      name: 'button-label',
      description: 'Button label element',
    },
    {
      name: 'button-icon',
      description: 'Button icon element',
    },
    {
      name: 'button-loading-spinner',
      description: 'Button spinner element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={V2Button} keys={['button-v2']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={Button} type="class" />
```

```jsx render
<Docs.ComparisonTable of={Button} type="props" />
```

```jsx render
<Docs.ComparisonTable of={Button} type="tokens" />
```

</Tab>

---
id: button
category: Navigation
title: Button
description: Used to trigger an action or event.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=8866%3A42214
---

<Tab label="Overview">

```jsx
import { Button } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Button',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      defaultValue: 'primary',
      options: [
        { label: 'primary', value: 'primary' },
        { label: 'secondary', value: 'secondary' },
        { label: 'tertiary', value: 'tertiary' },
        { label: 'destructive', value: 'destructive' },
        { label: 'alt', value: 'alt' },
      ],
    },
    {
      prop: 'size',
      type: 'select',
      defaultValue: 'large',
      options: [
        { label: 'large', value: 'large' },
        { label: 'small', value: 'small' },
      ],
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'rounded',
      type: 'boolean'
    },
  ],
}

<Button>Click Here!</Button>
```

## Size

Use the `size` prop to change the size of the button. The size prop can take in either `large` or `small`. The default value `large`.
The large button fill the entire width of its container. The small button fits the content contained in the button.

```jsx live
<Layout.Stack grow>
  <Button size="large">Large</Button>
  <Button size="small" variant="secondary">
    Small
  </Button>
</Layout.Stack>
```

## Variant

Use the `variant` prop to change the visual style of the Button. You can set the value to `primary`, `secondary`, `tertiary`, `destructive` or `alt`.
Primary buttons should only appear once per screen (not including the application header, modal dialog, or side panel). The default value is `primary`.

```jsx live
<Layout.Stack grow>
  <Button>Button</Button>
  <Button variant="secondary">Button</Button>
  <Button variant="tertiary">Button</Button>
  <Button variant="destructive">Button</Button>
  <Box color="$primary1">
    <Button variant="alt">Button</Button>
  </Box>
</Layout.Stack>
```

### Tertiary Variant

The tertiary variant now has different padding than other styles. The `large` size has a vertical padding of 6px and the `small` size has a vertical padding of 5px.
Users who wish to keep the previous gap between buttons will need to update the margin to 16px.

## Rounded

Use the `rounded` prop to make a rounded button. You can insert an icon as a child of the button.

```jsx live
<Layout.Stack>
  <Button accessibilityLabel="Add to Cart" rounded>
    <IconSymbol icon="add_shopping_cart" color="white" size={20} />
  </Button>
  <Button accessibilityLabel="Home" rounded size="small">
    <IconSymbol icon="home" color="white" size={20} />
  </Button>
  <Button accessibilityLabel="Bookmark" rounded variant="secondary">
    <IconSymbol
      icon="bookmark"
      variant="outlined"
      color="$primary1"
      size={20}
    />
  </Button>
  <Button accessibilityLabel="Print" rounded variant="tertiary">
    <IconSymbol icon="print" color="$info1" size={20} />
  </Button>
  <Box color="$primary1">
    <Button accessibilityLabel="Expand" rounded variant="alt">
      <IconSymbol icon="expand_more" color="white" size={18} />
    </Button>
  </Box>
</Layout.Stack>
```

## Disabled

Use the `isDisabled` prop to disable a button.

```jsx live
<Layout.Stack grow>
  <Button
    size="large"
    isDisabled
    before={
      <IconSymbol icon="print" variant="outlined" size={16} color="$gray3" />
    }
    after={
      <IconSymbol icon="print" variant="outlined" size={16} color="$gray3" />
    }
  >
    Button
  </Button>
  <Button
    size="small"
    isDisabled
    before={
      <IconSymbol icon="print" variant="outlined" size={16} color="$gray3" />
    }
    after={
      <IconSymbol icon="print" variant="outlined" size={16} color="$gray3" />
    }
  >
    Button
  </Button>
</Layout.Stack>
```

## Inserting Elements

Insert elements into the Button component using the `before` and `after` props.

```jsx live
<Layout.Stack grow>
  <Button
    variant="secondary"
    before={<IconSymbol icon="chevron_left" color="$primary1" size={20} />}
  >
    Previous
  </Button>
  <Button after={<IconSymbol icon="chevron_right" color="$white" size={20} />}>
    Next
  </Button>
</Layout.Stack>
```

## Preferred Icons

Here is a list of preferred icons accepted for use on buttons. If there’s one not listed, please use sparingly.

```jsx live
<Layout.Stack>
  <Layout.Group>
    <IconSymbol icon="print" color="black" variant="outlined" />
    <IconSymbol icon="add_shopping_cart" color="black" variant="outlined" />
    <IconSymbol icon="bookmark" color="black" variant="outlined" />
    <IconSymbol icon="delete" color="black" variant="outlined" />
    <IconSymbol icon="favorite" color="black" variant="outlined" />
    <IconSymbol icon="save" color="black" variant="outlined" />
  </Layout.Group>
  <Layout.Group>
    <IconSymbol icon="open_in_new" color="black" variant="outlined" />
    <IconSymbol icon="save" color="black" variant="outlined" />
    <IconSymbol icon="chevron_left" color="black" variant="outlined" />
    <IconSymbol icon="chevron_right" color="black" variant="outlined" />
    <IconSymbol icon="expand_more" color="black" variant="outlined" />
    <IconSymbol icon="expand_less" color="black" variant="outlined" />
  </Layout.Group>
</Layout.Stack>
```

## Grouping Buttons

Pairing similar action buttons together, like “Previous” and “Next”, should use one Primary button and one secondary button, showing the expected action as the primary CTA.

```jsx live
<Layout.Group grow>
  <Button
    variant="secondary"
    before={<IconSymbol icon="chevron_left" color="$primary1" size={20} />}
  >
    Previous
  </Button>
  <Button after={<IconSymbol icon="chevron_right" color="$white" size={20} />}>
    Next
  </Button>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Button}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the button component',
    },
    {
      name: 'variant',
      type: "'primary' | 'secondary' | 'tertiary' | 'destructive' | 'alt'",
      default: 'primary',
      description: 'Change the button style',
    },
    {
      name: 'before',
      type: 'node',
      description: 'Insert element into button component before children',
    },
    {
      name: 'after',
      type: 'node',
      description: 'Insert element into button component after children',
    },
    {
      name: 'size',
      type: "'large' | 'small'",
      default: 'large',
      description: 'Set the size of the button',
    },
    {
      name: 'rounded',
      type: 'boolean',
      default: 'false',
      description: 'Flag to make button rounded',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      default: 'false',
      description: 'Flag to disable the button',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Button}
  rows={[
    {
      name: 'button-root',
      description: 'Button root element',
    },
    {
      name: 'button-label',
      description: 'Button label element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Button} keys={['button']} />
```

</Tab>

---
id: calendar
category: Controls
title: Calendar
description: A control element that displays a full calendar month at one time.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=39874-170177&mode=design&t=Ridf1HoSvYi7LIPY-0
---

<Tab label="Overview">

```jsx sandbox
{
  component: 'Calendar',
}

() => {
  const [value, setValue] = useState(new Date());
  return (
    <Calendar
      value={value}
      onChange={setValue}
      minimumDate={new Date(2023, 7, 10)}
      maximumDate={new Date(2025, 6, 28)}
      goals={[
        { date: new Date(2023, 9, 23), state: 'progress', percentage: 23 },
        { date: new Date(2023, 9, 24), state: 'progress', percentage: 100 },
        { date: new Date(2023, 9, 25), state: 'complete' },
      ]}
    />
  )
}
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [value, setValue] = useState();

  return <Calendar value={value} onChange={setValue} />;
};
```

## Minimum and Maximum Date

Use the `minimumDate` and `maximumDate` props to set the min and max dates in the Calendar. The default values will be a 1 year range from the prop `value.`

```jsx live
() => {
  const [value, setValue] = useState();

  const currentYear = new Date().getFullYear();
  const currentMonth = new Date().getMonth();

  return (
    <Calendar
      value={value}
      onChange={setValue}
      minimumDate={new Date(currentYear, currentMonth, 3)}
      maximumDate={new Date(currentYear, currentMonth + 1, 28)}
    />
  );
};
```

## Excluded Dates

To exclude dates use the `excludeDate` prop. Set a function that receives date as an argument and returns true if date should be disabled. For example, to disable weekends, check if the day is 0 or 6.

```jsx live
() => {
  const [value, setValue] = useState();

  return (
    <Calendar
      value={value}
      onChange={setValue}
      excludeDate={(date) => {
        return date.getDay() === 0 || date.getDay() === 6;
      }}
    />
  );
};
```

## Goals

Use the `goals` prop to add rewards to certain days on the calendar.

The goals prop must be an array of 'Goal' objects. A goal object has three properties

- `date`: The date the reward will be. Must be a date instance.
- `state`: The current state of the reward. Valid values are `'progress'` and `'complete'`.
- `percentage`: If the state of the goal is `'progress'`, you can add the completed percentage. Defaults to `50`.

```jsx live
() => {
  const [value, setValue] = useState();

  const currentYear = new Date().getFullYear();
  const currentMonth = new Date().getMonth();

  return (
    <Calendar
      value={value}
      onChange={setValue}
      minimumDate={new Date(currentYear, currentMonth, 3)}
      maximumDate={new Date(currentYear, currentMonth, 28)}
      goals={[
        {
          date: new Date(currentYear, currentMonth, 23),
          state: 'progress',
          percentage: 23,
        },
        {
          date: new Date(currentYear, currentMonth, 24),
          state: 'progress',
          percentage: 100,
        },
        { date: new Date(currentYear, currentMonth, 25), state: 'complete' },
      ]}
    />
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Calendar}
  rows={[
    {
      name: 'value',
      type: 'Date',
      description: 'Selected calendar date',
    },
    {
      name: 'onChange',
      type: 'Function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'minimumDate',
      type: 'Date',
      description: 'Specifies the minimum selectable day by a user',
    },
    {
      name: 'maximumDate',
      type: 'Date',
      description: 'Specifies the maximum selectable day by a user',
    },
    {
      name: 'goals',
      type: 'Array',
      description:
        'An array used to add rewards markers to certain days on the calendar',
    },
    {
      name: 'excludeDate',
      type: 'Function',
      description: 'Callback fired to exclude dates from the calendar',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Calendar}
  rows={[
    {
      name: 'calendar-root',
      description: 'Calendar root element',
    },
    {
      name: 'calendar-header',
      description: 'Calendar header',
    },
    {
      name: 'calendar-month-button',
      description: 'Calendar month-button',
    },
    {
      name: 'calendar-month-label',
      description: 'Calendar month label',
    },
    {
      name: 'calendar-month-chevron',
      description: 'Calendar month chevron arrow',
    },
    {
      name: 'calendar-back-month-button',
      description: 'Calendar back month button',
    },
    {
      name: 'calendar-back-month-icon',
      description: 'Calendar back month icon',
      states: ['disabled'],
    },
    {
      name: 'calendar-forward-month-button',
      description: 'Calendar forward month button',
    },
    {
      name: 'calendar-forward-month-icon',
      description: 'Calendar forward month icon',
      states: ['disabled'],
    },
    {
      name: 'calendar-content',
      description: 'Calendar content',
    },
    {
      name: 'calendar-day-of-week',
      description: 'Calendar day of week',
    },
    {
      name: 'calendar-day-button',
      description: 'Calendar day button',
    },
    {
      name: 'calendar-selection-circle',
      description: 'Calendar selection circle',
    },
    {
      name: 'calendar-today-circle',
      description: 'Calendar today circle',
    },
    {
      name: 'calendar-day-label',
      description: 'Calendar day label',
      states: ['disabled', 'selected'],
    },
    {
      name: 'calendar-dates-wrapper',
      description: 'Calendar dates wrapper',
    },
    {
      name: 'calendar-goal-star',
      description: 'Calendar goal star',
    },
    {
      name: 'calendar-progress-circle',
      description: 'Calendar progress circle',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={Calendar}
  rows={[
    'selected',
    'Calendar.prevMonth',
    'Calendar.nextMonth',
    'Calendar.year',
    'Calendar.today',
    'Calendar.inProgress',
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

Calendar scales to 3XL. Star icon does not grow.

The date picker component in Abyss library is currently not accessible to users relying on screen readers and therefore it is hidden from screen reader users.
Please use the date input method as an alternative to the date picker.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Calendar} keys={['calendar']} />
```

</Tab>

---
id: card
category: Content
title: Card
description: A single or multi-section container used to display content related to a single subject.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/Sk3MrHYxjT39TKDzDU5LBc/Abyss-Mobile?node-id=12334%3A61355
---

<Tab label="Overview">

```jsx
import { Card } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Card',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
  ]
}

<Card style={{ height: 100, padding: 12 }}>
  <Text>Card Sandbox</Text>
</Card>
```

## Basic usage

The Card component is a versatile wrapper used to display content related to a single subject.

One example of `Card` can be seen in [HomeWidget](/mobile/ui/home-widget).

```jsx live
<View>
  <Card
    height={200}
    styles={{
      'abyss-card-root': {
        paddingTop: 20,
        height: 200,
        alignItems: 'center',
      },
    }}
  >
    <Heading>Heading text example</Heading>
    <Text>Text example</Text>
  </Card>
</View>
```

## Pressable and Animations

The Card component extends the props of [Pressable](https://reactnative.dev/docs/pressable#props) and can be used as a button.

Use the `isDisabled` prop to disable the pressable responder. In the case where you place something with its own touch responder within the card, like a ScrollView, FlatList, SectionList, etc., you will want to disable the pressable responder.

[Animations](https://reactnative.dev/docs/animated#props) can be added via the `styles` prop targeting `abyss-card-root`.

A Card that is programmed as a button with a Call To Action (CTA) must use accessibility props like those in `Button`. This ensures assistive technology can reach, understand, and activate the card.

When building a CTA Card, text content should be short. A Screen Reader will present button content in one full string that cannot be navigated easily by the device. Large CTA Card text will be difficult for screen reader users to understand.

```jsx live
() => {
  const scale = useRef(new Animated.Value(1)).current;

  const shrink = () => {
    Animated.timing(scale, {
      toValue: 0.95,
      duration: 300,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  };

  const grow = () => {
    Animated.timing(scale, {
      toValue: 1,
      duration: 300,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View>
      <Card
        color="$pastel4"
        onPress={() => console.log('pressed')}
        onPressIn={shrink}
        onPressOut={grow}
        accessible={true}
        role="button"
        styles={{
          'abyss-card-root': {
            paddingTop: 20,
            height: 200,
            alignItems: 'center',
            transform: [{ scale }],
          },
        }}
      >
        <Heading>Pressable Card</Heading>
        <Text>Press card to log a console message</Text>
      </Card>
    </View>
  );
};
```

## Card.Section

The `Card.Section` subcomponent provides a card 16px of padding. A use case example is provided in [CheckBoxGroup](/mobile/ui/checkbox-group/#group-with-card).

```jsx live
<View>
  <Card color="$pastel1">
    <Card.Section>
      <Text>Card Section </Text>
    </Card.Section>
  </Card>
</View>
```

## Multi Select Card

A Card can be used as a container for selections by combining it with the [CheckboxGroup](/mobile/ui/checkbox-group) or [Checkbox](/mobile/ui/checkbox) components.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <View style={{ width: 400 }}>
        <CheckboxGroup align="left" model="claims">
          <CheckboxGroup.SelectAll>
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Select All Claims (4)</Text>
                  <Text fontWeight="700">$278.89</Text>
                </View>
              </Card.Section>
            </Card>
          </CheckboxGroup.SelectAll>
          <Checkbox value="one">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Dr. Sharon Tang</Text>
                  <Text fontWeight="700">$93.22</Text>
                </View>
                <Text size="$sm">Date of Service 5/11/23</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$info1"
                    size={16}
                  />
                  <Text size="$sm" color="$info1">
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="two">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Walgreens #927956</Text>
                  <Text fontWeight="700">$127.93</Text>
                </View>
                <Text size="$sm">Date of Service 5/5/23</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$info1"
                    size={16}
                  />
                  <Text size="$sm" color="$info1">
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="three">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Dr. Edward M Jenner</Text>
                  <Text fontWeight="700">$25.00</Text>
                </View>
                <Text size="$sm">Date of Service 10/30/22</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$info1"
                    size={16}
                  />
                  <Text size="$sm" color="$info1">
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="four">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Odin Medical Group</Text>
                  <Text fontWeight="700">$32.74</Text>
                </View>
                <Text size="$sm">Date of Service 12/9/22</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$info1"
                    size={16}
                  />
                  <Text size="$sm" color="$info1">
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
        </CheckboxGroup>
      </View>
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Card}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The node to be input into the Card component',
    },
    {
      name: 'color',
      type: 'string',
      description: 'The color of the card',
      default: '$white',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Flag to disable the pressable responder',
      default: 'false',
    },
    {
      name: 'padding',
      type: 'number',
      description: 'Card padding value',
      default: '0',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Card}
  rows={[
    {
      name: 'card-root',
      description: 'Card root',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Card.Section}
  rows={[
    {
      name: 'card-section-root',
      description: 'Card section root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Card} keys={['card']} />
```

</Tab>

---
id: carousel-v2
category: Content
title: V2Carousel
description: A circular conveyor of information, cycling between cards.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=12446-61354
---

<Tab label="Overview">

** Disclaimer: ** On a mobile device the carousel has the full functionality of scrolling, pagination, and snapping to a slide. While on the web, the carousel is restricted to scrolling only by dragging the bottom scroll bar or using the pagination buttons.

```jsx
import { V2Carousel } from '@uhg-abyss/mobile';
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const colors = ['$pastel1', '$pastel2', '$pastel3', '$pastel4'];

  return (
    <V2Carousel
      data={colors}
      currentSlide={currentSlide}
      onSlideChange={setCurrentSlide}
      slideGap={10}
      renderSlide={({ slide, index }) => {
        return (
          <Box
            height={100}
            width={325}
            color={colors[index]}
            style={{ borderWidth: 1 }}
          >
            <Text style={{ top: 8, left: 8, position: 'absolute' }}>
              Slide {index + 1}
            </Text>
          </Box>
        );
      }}
    />
  );
};
```

## Disable Scrolling

Use the `disableScrolling` prop to prevent the carousel from scrolling.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const [disableScrolling, toggleScrolling] = useToggle(true);

  const colors = ['$pastel1', '$pastel2', '$pastel3', '$pastel4'];

  return (
    <View>
      <V2Carousel
        data={colors}
        disableScrolling={disableScrolling}
        currentSlide={currentSlide}
        onSlideChange={setCurrentSlide}
        slideGap={10}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
      <Button variant="tertiary" size="small" onPress={toggleScrolling}>
        {`${disableScrolling ? 'Enable' : 'Disable'} Scrolling`}
      </Button>
    </View>
  );
};
```

## Disable Pagination

Use the `disablePagination` prop to remove the pagination bullets below the V2carousel.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const [disablePagination, togglePagination] = useToggle(true);

  const colors = ['$pastel1', '$pastel2', '$pastel3', '$pastel4'];

  return (
    <View>
      <V2Carousel
        data={colors}
        disablePagination={disablePagination}
        currentSlide={currentSlide}
        onSlideChange={setCurrentSlide}
        slideGap={10}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
      <Button variant="tertiary" size="small" onPress={togglePagination}>
        {`${disablePagination ? 'Enable' : 'Disable'} Pagination`}
      </Button>
    </View>
  );
};
```

## Slide Gap

Use the `slideGap` prop to add a gap between each slide. The default value is `$carousel.space.slide-gap || 8`.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const [currentSlide2, setCurrentSlide2] = useState(1);
  const [disableScrolling, toggleScrolling] = useToggle();

  const colors = ['$pastel1', '$pastel2', '$pastel3', '$pastel4'];

  return (
    <Layout.Stack grow>
      <V2Carousel
        data={colors}
        currentSlide={currentSlide}
        onSlideChange={setCurrentSlide}
        slideGap={10}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
      <V2Carousel
        data={colors}
        currentSlide={currentSlide2}
        onSlideChange={setCurrentSlide2}
        slideGap={50}
        renderSlide={({ slide, index }) => {
          return (
            <Box
              height={100}
              width={325}
              color={colors[index]}
              style={{ borderWidth: 1 }}
            >
              <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                Slide {index + 1}
              </Text>
            </Box>
          );
        }}
      />
    </Layout.Stack>
  );
};
```

## Snap Percentage

Use the `snapPercentage` prop to set minimum percent in either direction a carousel should be shifted to snap to another V2carousel.
The default value is `30`.

In the examples below, there is a green line denoting how much the carousel would need to scroll before snapping to the next slide.

```jsx live
() => {
  const [currentSlides, setCurrentSlides] = useState([1, 1, 1]);

  const snapPercents = [30, 50, 75];

  const carousels = snapPercents.map((percent, i) => {
    const changeSlide = (goToSlide) => {
      setCurrentSlides((currentSlides) => {
        const copySlides = currentSlides.slice(0);
        copySlides[i] = goToSlide;
        return copySlides;
      });
    };
    const slideContent = ['Slide 1', 'Slide 2'];

    return (
      <Layout.Stack grow key={i}>
        <V2Carousel
          currentSlide={currentSlides[i]}
          onSlideChange={changeSlide}
          snapPercentage={percent}
          slideGap={0}
          disablePagination
          data={slideContent}
          renderSlide={({ slide, index }) => {
            return (
              <View style={{ height: 100, width: 325, borderWidth: 1 }}>
                <Text style={{ top: 8, left: 8, position: 'absolute' }}>
                  {slideContent[index]}
                </Text>
                <View
                  style={{
                    left: 325 * (percent / 100) - 16,
                    borderWidth: 1.5,
                    height: '100%',
                    width: 0,
                    borderColor: 'green',
                  }}
                />
              </View>
            );
          }}
        />
        <Text>Snap Percentage: {percent}</Text>
      </Layout.Stack>
    );
  });

  return <Layout.Stack grow>{carousels}</Layout.Stack>;
};
```

## Data

Carousel is made to be used in conjunction with slides, therefore the `data` prop is required.

```
  const slides = [
    {
      color: 'white',
      eyebrow: 'New Service',
      heading: 'Virtual Care',
      paragraph:
        'Get medical advice from the comfort of your home. Discover our new virtual care services.',
    },
    {
      color: 'peach',
      eyebrow: 'Mental health',
      paragraph:
        'Learn more about available mental health benefits and resources available to you',
      heading: 'Explore Coverage & Support',
    },
    {
      color:  'mint',
      eyebrow: 'Update',
      heading: 'COVID-19 Vaccine Information',
      paragraph:
        'Stay informed about the COVID-19 vaccine. Learn about eligibility, safety, and how to get your shot.',
    },
    {
      color: 'aqua',
      eyebrow: 'Event',
      heading: 'United Healthcare Community Health Fair',
      paragraph:
        'Join us for a day of free health screenings and wellness activities. Bring your family and friends!',
    },
    {
      color: 'sky-blue',
      eyebrow: 'In-App Care',
      heading: 'Real-time, online visits',
      paragraph: 'Connect with a designated provider using your smartphone.',
    },
  ];
```

## Render Slide

Use the `renderSlide` prop to render the data passed into V2Carousel. This function takes in the slide object and index number.

```
renderSlide={{({ slide, index }) => {
  return (
     <V2Carousel.Card
      color={slide.color}
      paragraph={slide.paragraph}
      eyebrow={slide.eyebrow}
      heading={slide.heading}
      variant="horizontal"
      imageBackgroundColor="$white"
      onPress={() => {
        console.log(`card ${index + 1} pressed`);
      }}
    />);
}}}
```

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const slides = [
    {
      color: 'white',
      eyebrow: 'New Service',
      heading: 'Virtual Care',
      paragraph:
        'Get medical advice from the comfort of your home. Discover our new virtual care services.',
    },
    {
      color: 'peach',
      eyebrow: 'Mental health',
      paragraph:
        'Learn more about available mental health benefits and resources available to you',
      heading: 'Explore Coverage & Support',
    },
    {
      color: 'mint',
      eyebrow: 'Update',
      heading: 'COVID-19 Vaccine Information',
      paragraph:
        'Stay informed about the COVID-19 vaccine. Learn about eligibility, safety, and how to get your shot.',
    },
    {
      color: 'aqua',
      eyebrow: 'Event',
      heading: 'United Healthcare Community Health Fair',
      paragraph:
        'Join us for a day of free health screenings and wellness activities. Bring your family and friends!',
    },
    {
      color: 'sky-blue',
      eyebrow: 'In-App Care',
      heading: 'Real-time, online visits',
      paragraph: 'Connect with a designated provider using your smartphone.',
    },
  ];

  return (
    <View>
      <V2Carousel
        currentSlide={currentSlide}
        onSlideChange={setCurrentSlide}
        snapPercentage={30}
        data={slides}
        renderSlide={({ slide, index }) => {
          return (
            <V2Carousel.Card
              color={slide.color}
              paragraph={slide.paragraph}
              eyebrow={slide.eyebrow}
              heading={slide.heading}
              variant="horizontal"
              imageBackgroundColor="$white"
              onPress={() => {
                console.log(`Card ${index + 1} pressed`);
              }}
            />
          );
        }}
      />
    </View>
  );
};
```

### Carousel Card

Use the `V2Carousel.Card` component to display content on a card with pre-defined styled specific for use within a V2carousel. Please follow <ExitLink href="https://www.figma.com/file/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-Abyss-Mobile?type=design&node-id=101-26211&mode=design&t=uDW7rKwOX3uXDTbv-0">design guidelines</ExitLink> when implementing.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const [variant, setVariant] = useState('horizontal');

  const optumBrand = (
    <Brandmark
      brand="optum"
      affiliate="optum"
      variant="lockup"
      color="orange"
      size={75}
    />
  );

  const slides = [
    {
      color: '$white',
      eyebrow: 'New Service',
      heading: 'Virtual Care',
      paragraph:
        'Get medical advice from the comfort of your home. Discover our new virtual care services.',
    },
    {
      color: '$pastel1',
      eyebrow: 'Mental health',
      paragraph:
        'Learn more about available mental health benefits and resources available to you',
      heading: 'Explore Coverage & Support',
    },
    {
      color: '$pastel2',
      eyebrow: 'Update',
      heading: 'COVID-19 Vaccine Information',
      paragraph:
        'Stay informed about the COVID-19 vaccine. Learn about eligibility, safety, and how to get your shot.',
    },
    {
      color: '$pastel3',
      eyebrow: 'Event',
      heading: 'United Healthcare Community Health Fair',
      paragraph:
        'Join us for a day of free health screenings and wellness activities. Bring your family and friends!',
    },
    {
      color: '$pastel4',
      eyebrow: 'Virtual Care',
      heading: 'Real-time, online visits',
      paragraph: 'Connect with a designated provider using your smartphone.',
    },
  ];

  return (
    <>
      <SegmentedControls
        value={variant}
        onChange={setVariant}
        style={{ marginBottom: 16 }}
      >
        <SegmentedControls.Tab label="Horizontal" value="horizontal" />
        <SegmentedControls.Tab label="Vertical LG" value="vertical-lg" />
        <SegmentedControls.Tab label="Vertical SM" value="vertical-sm" />
        <SegmentedControls.Tab label="Branded" value="branded" />
      </SegmentedControls>
      <V2Carousel
        currentSlide={currentSlide}
        onSlideChange={setCurrentSlide}
        snapPercentage={30}
        data={slides}
        renderSlide={({ slide, index }) => {
          return (
            <V2Carousel.Card
              color={slide.color}
              paragraph={slide.paragraph}
              eyebrow={slide.eyebrow}
              image={variant === 'branded' ? optumBrand : null}
              heading={slide.heading}
              variant={variant}
              imageBackgroundColor="$white"
              onPress={() => {
                console.log(`Card ${index + 1} pressed`);
              }}
            />
          );
        }}
      />
      <Layout.Group grow style={{ marginTop: 16 }}>
        <Button
          variant="secondary"
          onPress={() => {
            if (currentSlide > 1) return setCurrentSlide(currentSlide - 1);
          }}
          isDisabled={currentSlide === 1}
        >
          Back
        </Button>
        <Button
          onPress={() => {
            if (currentSlide < slides.length)
              return setCurrentSlide(currentSlide + 1);
          }}
          isDisabled={currentSlide === slides.length}
        >
          Next
        </Button>
      </Layout.Group>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2Carousel}
  rows={[
    {
      name: 'currentSlide',
      type: 'number',
      description: 'The current slide of the V2carousel',
    },
    {
      name: 'disableScrolling',
      type: 'boolean',
      description: 'Flag to disable carousel scrolling',
      default: 'false',
    },
    {
      name: 'disablePagination',
      type: 'boolean',
      description: 'Flag to remove pagination bullets',
      default: 'false',
    },
    {
      name: 'onSlideChange',
      type: 'function',
      description: 'Callback fired when the slide is changed',
    },
    {
      name: 'renderSlide',
      type: 'function',
      description: 'Callback fired on slide render',
    },
    {
      name: 'slideGap',
      type: 'number',
      description: 'The gap between each slide',
      default: '$carousel.space.slide-gap',
    },
    {
      name: 'data',
      type: 'any[]',
      description: 'Each individual slide data stored in an array',
    },
    {
      name: 'snapPercentage',
      type: 'number',
      description:
        'The minimum percent in either direction a carousel should be shifted to snap to another V2carousel',
      default: '30',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Carousel}
  rows={[
    {
      name: 'carousel-root',
      description: 'Carousel root element',
    },
    {
      name: 'carousel-slide',
      description: 'Carousel slide',
    },
    {
      name: 'carousel-bullets-container',
      description: 'Carousel bullets container',
    },
    {
      name: 'carousel-bullets',
      description: 'Carousel bullets component',
    },
  ]}
  inherits={[{ name: 'Bullets', link: '/mobile/ui/bullets' }]}
/>
```

```jsx render
<Docs.PropsTable
  of={V2Carousel.Card}
  rows={[
    {
      name: 'variant',
      type: '"horizontal" | "vertical-lg" | "vertical-sm" | "branded"',
      description: 'The carousel card variant',
      default: 'horizontal',
    },
    {
      name: 'background',
      type: '"white" | "peach" | "mint" | "aqua" | "sky-blue"',
      description: 'The background color of the carousel card',
      default: 'white',
    },
    {
      name: 'eyebrow',
      type: 'string',
      description: 'The eyebrow text of the carousel card',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The heading text of the carousel card',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'The paragraph text of the carousel card',
    },
    {
      name: 'imageBackgroundColor',
      type: 'string',
      description: 'The background color of the image container',
    },
    {
      name: 'image',
      type: 'React.ReactNode',
      description: 'The image of the carousel card',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Carousel.Card}
  rows={[
    {
      name: 'carousel-card-root',
      description: 'Carousel card root element',
    },
    {
      name: 'carousel-card-content',
      description: 'Carousel card content section',
    },
    {
      name: 'carousel-card-image-container',
      description: 'Carousel card image container',
    },
    {
      name: 'carousel-card-eyebrow',
      description: 'Carousel card eyebrow text',
    },
    {
      name: 'carousel-card-heading',
      description: 'Carousel card heading text',
    },
    {
      name: 'carousel-card-paragraph',
      description: 'Carousel card paragraph text',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={V2Carousel} keys={['carousel']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={Carousel} type="class" />
```

```jsx render
<Docs.ComparisonTable of={Carousel} type="props" />
```

</Tab>

---
id: carousel
category: Content
title: Carousel
description: A circular conveyor of information, cycling between cards.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=12446-61354
---

<Tab label="Overview">

```jsx
import { Carousel } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Carousel',
  inputs: [
    {
      prop: 'title',
      type: 'string'
    },
    {
      prop: 'disableScrolling',
      type: 'boolean'
    },
    {
      prop: 'disablePagination',
      type: 'boolean'
    },
    {
      prop: 'actionText',
      type: 'string'
    },
  ]
}

() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const length = 5

  const banners = Array.from({length}).map((_,i) => {
    return <View style={{height: 100, width: 325, borderWidth: 1}} accessibilityLabel={`Slide ${i+1} of ${length} `}>
      <Text style={{top: 8, left: 8, position: 'absolute'}}>Slide {i +1}</Text>
    </View>
  })

  return (
    <Carousel
      title="Carousel Title"
      slides={banners}
      currentSlide={currentSlide}
      onSlideChange={setCurrentSlide}
    />
  )
}
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const length = 5;

  const banners = Array.from({ length }).map((_, i) => {
    return (
      <View
        style={{ height: 100, width: 325, borderWidth: 1 }}
        accessibilityLabel={`Slide ${i + 1} of ${length} `}
      >
        <Text style={{ top: 8, left: 8, position: 'absolute' }}>
          Slide {i + 1}
        </Text>
      </View>
    );
  });

  return (
    <Carousel
      slides={banners}
      currentSlide={currentSlide}
      onSlideChange={setCurrentSlide}
    />
  );
};
```

## Disable Scrolling

Use the `disableScrolling` prop to prevent the carousel from scrolling.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const [disableScrolling, toggleScrolling] = useToggle(true);
  const length = 5;

  const banners = Array.from({ length }).map((_, i) => {
    return (
      <View
        style={{ height: 100, width: 325, borderWidth: 1 }}
        accessibilityLabel={`Slide ${i + 1} of ${length} `}
      >
        <Text style={{ top: 8, left: 8, position: 'absolute' }}>
          Slide {i + 1}
        </Text>
      </View>
    );
  });

  return (
    <View>
      <Carousel
        slides={banners}
        currentSlide={currentSlide}
        onSlideChange={setCurrentSlide}
        disableScrolling={disableScrolling}
      />
      <Button variant="tertiary" size="small" onPress={toggleScrolling}>
        {`${disableScrolling ? 'Enable' : 'Disable'} Scrolling`}
      </Button>
    </View>
  );
};
```

## Disable Pagination

Use the `disablePagination` prop to remove the pagination bullets below the carousel.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const [disablePagination, togglePagination] = useToggle(true);
  const length = 5;

  const banners = Array.from({ length }).map((_, i) => {
    return (
      <View
        style={{ height: 100, width: 325, borderWidth: 1 }}
        accessibilityLabel={`Slide ${i + 1} of ${length} `}
      >
        <Text style={{ top: 8, left: 8, position: 'absolute' }}>
          Slide {i + 1}
        </Text>
      </View>
    );
  });

  return (
    <View>
      <Carousel
        slides={banners}
        currentSlide={currentSlide}
        onSlideChange={setCurrentSlide}
        disablePagination={disablePagination}
      />
      <Button variant="tertiary" size="small" onPress={togglePagination}>
        {`${disablePagination ? 'Enable' : 'Disable'} Pagination`}
      </Button>
    </View>
  );
};
```

## Slide Gap

Use the `slideGap` prop to add a gap between each slide. The default value is `$sm || 8`.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const [currentSlide2, setCurrentSlide2] = useState(1);
  const [disableScrolling, toggleScrolling] = useToggle();
  const length = 5;

  const banners = Array.from({ length }).map((_, i) => {
    return (
      <View
        style={{ height: 100, width: 325, borderWidth: 1 }}
        accessibilityLabel={`Slide ${i + 1} of ${length} `}
      >
        <Text style={{ top: 8, left: 8, position: 'absolute' }}>
          Slide {i + 1}
        </Text>
      </View>
    );
  });

  return (
    <Layout.Stack grow>
      <Carousel
        slides={banners}
        currentSlide={currentSlide}
        onSlideChange={setCurrentSlide}
        slideGap={10}
      />
      <Carousel
        slides={banners}
        currentSlide={currentSlide2}
        onSlideChange={setCurrentSlide2}
        slideGap={50}
      />
    </Layout.Stack>
  );
};
```

## Snap Percentage

Use the `snapPercentage` prop to set minimum percent in either direction a carousel should be shifted to snap to another carousel.
The default value is `30`.

In the examples below, there is a green line denoting how much the carousel would need to scroll before snapping to the next slide.

```jsx live
() => {
  const [currentSlides, setCurrentSlides] = useState([1, 1, 1]);

  const snapPercents = [30, 50, 75];

  const carousels = snapPercents.map((percent, i) => {
    const changeSlide = (goToSlide) => {
      setCurrentSlides((currentSlides) => {
        const copySlides = currentSlides.slice(0);
        copySlides[i] = goToSlide;
        return copySlides;
      });
    };
    const slides = [
      <View style={{ height: 100, width: 325, borderWidth: 1 }}>
        <Text style={{ top: 8, left: 8, position: 'absolute' }}>Slide 1</Text>
        <View
          style={{
            left: 325 * (percent / 100) - 16,
            borderWidth: 1.5,
            height: '100%',
            width: 0,
            borderColor: 'green',
          }}
        />
      </View>,
      <View style={{ height: 100, width: 325, borderWidth: 1 }}>
        <Text style={{ top: 8, left: 8, position: 'absolute' }}>Slide 2</Text>
      </View>,
    ];

    return (
      <Layout.Stack grow key={i}>
        <Carousel
          slides={slides}
          currentSlide={currentSlides[i]}
          onSlideChange={changeSlide}
          snapPercentage={percent}
          slideGap={0}
          disablePagination
        />
        <Text>Snap Percentage: {percent}</Text>
      </Layout.Stack>
    );
  });

  return <Layout.Stack grow>{carousels}</Layout.Stack>;
};
```

## Slides

Carousel is made to be used in conjunction with slides, therefore the `slides` prop is required. If you are not using the [Carousel Banner](/mobile/ui/banner#carousel-banner) component for slides, please be sure to make them accessible by passing in the current slide index along with the total slide count to the accessibility label.

### Carousel Banner

Use the `Carousel.Banner` component to display content on a banner with pre-defined styled specific for use within a carousel. The Carousel Banner receives the same props as [Banner](/mobile/ui/banner) with the exception of the `textSize` and `grow` props. It does not allow for multiple variants within the same carousel. Please follow <ExitLink href="https://www.figma.com/file/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-Abyss-Mobile?type=design&node-id=101-26211&mode=design&t=uDW7rKwOX3uXDTbv-0">design guidelines</ExitLink> when implementing.

```jsx live
() => {
  const [currentSlide, setCurrentSlide] = useState(1);
  const [variant, setVariant] = useState('horizontal-small');

  const optumBrand = (
    <Brandmark
      brand="optum"
      affiliate="optum"
      variant="lockup"
      color="orange"
      size={75}
    />
  );

  return (
    <>
      <SegmentedControls
        value={variant}
        onChange={setVariant}
        style={{ marginBottom: 16 }}
      >
        <SegmentedControls.Tab label="small" value="horizontal-small" />
        <SegmentedControls.Tab label="large" value="horizontal-large" />
        <SegmentedControls.Tab label="vertical" value="vertical" />
        <SegmentedControls.Tab label="branded" value="branded" />
      </SegmentedControls>
      <Carousel
        slides={['$white', '$pastel1', '$pastel2', '$pastel3', '$pastel4'].map(
          (color) => {
            return (
              <Carousel.Banner
                color={color}
                description='A "one-stop-shop" for the important things a caregiver could need to give you for providing the best care.'
                eyebrow="Support"
                title="Your Organizer"
                variant={variant}
                image={variant === 'branded' ? optumBrand : null}
              />
            );
          }
        )}
        currentSlide={currentSlide}
        onSlideChange={setCurrentSlide}
        snapPercentage={30}
      />
      <Layout.Group grow style={{ marginTop: 16 }}>
        <Button
          variant="secondary"
          onPress={() => {
            return setCurrentSlide(currentSlide - 1);
          }}
        >
          Back
        </Button>
        <Button
          onPress={() => {
            return setCurrentSlide(currentSlide + 1);
          }}
        >
          Next
        </Button>
      </Layout.Group>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Carousel}
  rows={[
    {
      name: 'currentSlide',
      type: 'number',
      description: 'The current slide of the carousel',
    },
    {
      name: 'disableScrolling',
      type: 'boolean',
      description: 'Flag to disable carousel scrolling',
      default: 'false',
    },
    {
      name: 'disablePagination',
      type: 'boolean',
      description: 'Flag to remove pagination bullets',
      default: 'false',
    },
    {
      name: 'onSlideChange',
      type: 'function',
      description: 'Callback fired when the slide is changed',
    },
    {
      name: 'slideGap',
      type: 'number',
      description: 'The gap between each slide',
      default: '$sm',
    },
    {
      name: 'slides',
      type: 'array[node]',
      description: 'Each individual slide node stored in an array',
    },
    {
      name: 'snapPercentage',
      type: 'number',
      description:
        'The minimum percent in either direction a carousel should be shifted to snap to another carousel',
      default: '30',
    },
    {
      name: 'title',
      type: 'string',
      description: 'The title of the carousel',
    },
    {
      name: 'onActionPress',
      type: 'function',
      description: 'Callback fired when the title is pressed',
    },
    {
      name: 'actionText',
      type: 'string',
      description: 'Text for the action button',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Carousel}
  rows={[
    {
      name: 'carousel-root',
      description: 'Carousel root element',
    },
    {
      name: 'carousel-scroll-wrapper',
      description: 'Carousel scroll wrapper',
    },
    {
      name: 'carousel-slide',
      description: 'Carousel slide',
    },
    {
      name: 'carousel-bullets-container',
      description: 'Carousel bullets container',
    },
    {
      name: 'carousel-bullets',
      description: 'Carousel bullets component',
    },
    {
      name: 'carousel-header',
      description: 'Carousel header',
    },
    {
      name: 'carousel-title',
      description: 'Carousel title',
    },
    {
      name: 'carousel-action-button',
      description: 'Carousel action button',
    },
    {
      name: 'carousel-action-text',
      description: 'Carousel action text',
    },
    {
      name: 'carousel-action-icon',
      description: 'Carousel action icon',
    },
  ]}
  inherits={[{ name: 'Bullets', link: '/mobile/ui/bullets' }]}
/>
```

```jsx render
<Docs.Table
  title={'Carousel.Banner'}
  inherits={[{ name: 'Banner', link: '/mobile/ui/banner' }]}
/>
```

Note that the `textSize` and `grow` props will not apply to the `Carousel.Banner` component.

```jsx render
<Docs.ClassesTable
  of={Carousel.Banner}
  rows={[
    {
      name: 'carousel-banner-root',
      description: 'Carousel banner root element',
    },
  ]}
  inherits={[{ name: 'Banner', link: '/mobile/ui/banner' }]}
/>
```

</Tab>

---
id: cell-v2
category: Data Display
title: V2Cell
description: Typically used as a navigation element to display a page of categorized content.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/v1.66.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1242-1385&p=f&t=sMgU6UgXCqKGqjZe-0
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2Cell } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'V2Cell',
  inputs: [
    {
      prop: 'eyebrow',
      type: 'string',
      defaultValue: 'eyebrow'

    },
    {
      prop: 'heading',
      type: 'string',
      defaultValue: 'Cell Heading'
    },
    {
      prop: 'subheading',
      type: 'string',
      defaultValue: 'Subheading'

    },
    {
      prop: 'paragraph',
      type: 'string',
      defaultValue: 'Paragraph content here'
    },
    {
      prop: 'value',
      type: 'string',
    },
    {
      prop: 'indicator',
      type: 'string',
    },
  ]
}

<V2Cell />
```

## Leading Content

The `leadingContent` prop defines the cell's content on the left-hand side. This may contain the [IconBrand](/mobile/ui/icon-brand) component, a utility icon ([IconSymbol](/mobile/ui/icon-symbol)), or an [Avatar](/mobile/ui/avatar).

```jsx live
<>
  <V2Cell
    heading="Abyss Design System"
    leadingContent={<Avatar initials="AD" colorTheme={4} />}
  />
  <V2Cell
    onPress={() => console.log('Cell Pressed')}
    heading="Primary Care"
    paragraph="Your first contact for to get care for your health."
    leadingContent={<IconBrand icon="handshake" size="$xs" disableScaling />}
  />
  <V2Cell
    onPress={() => console.log('Cell Pressed')}
    subheading="Search your benefits"
    leadingContent={
      <IconSymbol
        icon="search"
        size="$cell.sizing.icon.all.leading"
        color="$cell.color.icon.leading.utility"
      />
    }
  />
</>
```

## Main Content

The `eyebrow` prop defines the cell's eyebrow. This prop can either be text or a custom component such as `Badge`.

The `heading` prop defines the cell's heading.

The `subheading` prop defines the cell's subheading.

The `paragraph` prop defines the cell's paragraph

The `trailingIcon` prop placed an icon at the end of the paragraph. This will not show unless there are also defined `paragraph` and `onPress` props. When this icon is present, only the icon is pressable, not the entire cell.

A [link](/mobile/ui/link) can be displayed below the paragraph using the `link` prop. A link may also be passed to the `value` prop to be displayed on the right side of the cell.

```jsx live
<>
  <V2Cell
    heading="Heading"
    subheading="subheading"
    paragraph="The trailingIcon prop displays the icon after the end of the paragraph. When the trailing icon is present, only the icon is pressable, not the entire cell"
    eyebrow="eyebrow"
    onPress={() => console.log('Help Icon Pressed')}
    trailingIcon={
      <IconSymbol
        icon="help"
        variant="outlined"
        color="$cell.color.icon.trailing.interactive"
        size="$cell.sizing.icon.all.trailing"
      />
    }
  />
  <V2Cell
    heading="Heading"
    subheading="subheading"
    paragraph="Paragraph content goes here"
    eyebrow={<Badge>Badge</Badge>}
    onPress={() => console.log('Cell Pressed')}
  />
  <V2Cell
    heading="Heading"
    paragraph="Paragraph content goes here"
    link={
      <Link size="small" href="https://abyss.uhg.com/">
        Go to Abyss
      </Link>
    }
  />
</>
```

## Trailing Content

The `value` prop defines the value component on the right side of the cell. This is generally used to display a numerical value but can also display the [Link](/mobile/ui/link) component.
If the `value` prop exists, the cell cannot contain an `onPress` function.

The `indicator` prop defines the indicator component on the right side of the cell. Unlike `value`, this prop can co-exist with an `onPress` function. Either a string or a custom Component can be passed here.

The `navIcon` prop defines the icon that appears on the far right side of the cell. This icon will only exist when an `onPress` function exists.

```jsx live
<>
  <V2Cell heading="Cell heading" paragraph="Cell paragraph" value="$Value" />
  <V2Cell
    heading="Cell heading"
    paragraph="Cell paragraph"
    value={
      <Link size="small" href="https://Google.com">
        Link Value
      </Link>
    }
  />
  <V2Cell
    onPress={() => console.log('Cell Pressed')}
    heading="Cell heading"
    paragraph="Cell with a string indicator and onPress"
    indicator="Indicator"
  />
  <V2Cell
    onPress={() => console.log('Cell Pressed')}
    subheading="Badge Indicator"
    indicator={
      <Badge
        icon={<IconSymbol size={14} icon="check_circle" color="$success1" />}
      >
        Badge
      </Badge>
    }
  />
  <V2Cell
    heading="Cell with a navIcon"
    onPress={() => console.log('Cell Pressed')}
    navIcon={<IconSymbol size={20} icon="open_in_new" color="$gray3" />}
  />
</>
```

## isDisabled

`isDisabled` is a prop available for type `radio`, `checkbox`, and `toggle`.

When `isDisabled` is present in [V2CellGroup](/mobile/ui/cell-group-v2), the entire group is disabled and cannot be modified. However, if `isDisabled` is present in `V2Cell`, only that cell is disabled and cannot be modified.

```jsx live
() => {
  const [checkboxValue, setCheckboxValue] = useState([]);
  const [radioValue, setRadioValue] = useState('one');
  const [disableGroup, setDisableGroup] = useState(false);
  const [disableCells, setDisableCells] = useState(false);

  return (
    <>
      <V2Cell
        heading="Disabled Cell Groups"
        type="toggle"
        value={disableGroup}
        onChange={setDisableGroup}
      />
      <V2CellGroup
        type="checkbox"
        value={checkboxValue}
        onChange={setCheckboxValue}
        isDisabled={disableGroup}
      >
        <V2Cell heading="Checkbox 1" value="1" />
        <V2Cell
          isDisabled={disableCells}
          heading="Checkbox 2"
          value="2"
          isDisabled
        />
      </V2CellGroup>
      <V2CellGroup
        type="radio"
        value={radioValue}
        onChange={setRadioValue}
        isDisabled={disableGroup}
      >
        <V2Cell heading="Radio 1" value="1" isDisabled />
        <V2Cell isDisabled={disableCells} heading="Radio 2" value="2" />
      </V2CellGroup>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2Cell}
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the cell value is changed',
    },
    {
      name: 'value',
      type: 'any',
      description: 'The value of the cell',
    },
    {
      name: 'type',
      type: '"default" | "toggle" | "radio" | "checkbox"',
      description: 'The type of cell',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The heading of the cell',
    },
    {
      name: 'subheading',
      type: 'string',
      description: 'The subheading of the cell',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'The paragraph of the cell',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the cell is pressed',
    },
    {
      name: 'eyebrow',
      type: 'string | node',
      description: 'The eyebrow of the cell',
    },
    {
      name: 'icon',
      type: 'node',
      description: 'Icon displayed on the left side of the cell',
    },
    {
      name: 'indicator',
      type: 'string | node',
      description: 'Indicator text or link on the right side of the cell',
    },
    {
      name: 'navIcon',
      type: 'node',
      description: 'Icon used on the right side of the cell',
    },
    {
      name: 'selectAll',
      type: 'boolean',
      description: 'Flag to uses cell as a select all checkbox',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Disables the radio button, toggle, or checkbox inside of cell',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Cell}
  rows={[
    {
      name: 'cell-root',
      description: 'Cell root',
    },
    {
      name: 'cell-leading-content',
      description:
        'The leading content. Can include IconBrand component, a utility icon, or an Avatar',
    },
    {
      name: 'cell-eyebrow',
      description: 'Cell eyebrow',
    },
    {
      name: 'cell-heading',
      description: 'Cell heading',
    },
    {
      name: 'cell-subheading',
      description: 'Cell subheading',
    },
    {
      name: 'cell-paragraph',
      description: 'Cell paragraph',
    },
    {
      name: 'cell-value',
      description: 'Cell value',
    },
    {
      name: 'cell-radio-button',
      description: 'Radio component',
    },
    {
      name: 'cell-checkbox-button',
      description: 'Checkbox component',
    },
    {
      name: 'cell-toggle-button',
      description: 'ToggleSwitch component',
    },
    {
      name: 'cell-indicator',
      description: 'Cell indicator',
    },
    {
      name: 'cell-nav-icon',
      description: 'onPress icon to the far right of cell',
    },
    {
      name: 'cell-trailing-icon',
      description: 'The icon placed at the end of the paragraph',
    },
    {
      name: 'cell-icon-button',
      description: 'The icon button at the end of the paragraph',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

**It is the responsibility of consuming teams to make sure all components within Cell are accessible.**<br />When possible, please test on physical devices for accessibility accuracy.

</Tab>
<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={V2Cell} keys={['cell']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of="Cell" type="class" />
```

```jsx render
<Docs.ComparisonTable of="Cell" type="props" />
```

</Tab>

---
id: cell-group-v2
category: Data Display
title: V2CellGroup
description: Cells present data in one or more vertically stacked rows.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/v1.66.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1242-1385&p=f&t=sMgU6UgXCqKGqjZe-0
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2CellGroup } from '@uhg-abyss/mobile';
```

## Type Inheritance

When creating a `V2CellGroup` of type `radio`, `checkbox`, or `toggle`, it is important to use the `type` prop. Once a type prop is assigned to a CellGroup, every child will inherit the group's type and have access to all necessary providers preventing errors.

Below, you can see a few examples of type inheritance within `V2CellGroup`. Notice how `V2Cell` does not have the `type` prop, inheriting it from the CellGroup.

```jsx live
() => {
  const [isToggleChecked, setIsToggleChecked] = useState(false);
  const [radioValue, setRadioValue] = useState('one');
  const [value, setValue] = useState([]);

  return (
    <>
      <V2CellGroup type="radio" value={radioValue} onChange={setRadioValue}>
        <V2Cell heading="Radio One" value="one" />
        <V2Cell heading="Radio Two" value="two" />
      </V2CellGroup>
      <V2CellGroup type="checkbox" value={value} onChange={setValue}>
        <V2Cell heading="One" value="one" />
        <V2Cell heading="Two" value="two" />
        <V2Cell heading="Three" value="three" />
      </V2CellGroup>
      <V2CellGroup type="toggle">
        <V2Cell
          type="toggle"
          heading="Toggle Switch Cell"
          value={isToggleChecked}
          onChange={setIsToggleChecked}
        />
      </V2CellGroup>
    </>
  );
};
```

## Toggle Switch CellGroup

Cells of type `toggle` contain the content of the cell with a ToggleSwitch on the right side. Toggle Cells will return a boolean of the selected value onChange.

```jsx live
() => {
  const [isToggleChecked, setIsToggleChecked] = useState(false);
  const [isToggleChecked2, setIsToggleChecked2] = useState(true);

  return (
    <Box
      color="$white"
      style={{ flexDirection: 'column', justifyContent: 'space-between' }}
      padding={0}
    >
      <V2CellGroup>
        <V2Cell
          heading="Toggle Switch 1"
          type="toggle"
          value={isToggleChecked}
          onChange={setIsToggleChecked}
        />
        <V2Cell
          heading="Toggle Switch 1"
          paragraph="value"
          value={String(isToggleChecked)}
        />
        <V2Cell
          heading="Toggle Switch 2"
          type="toggle"
          value={isToggleChecked2}
          onChange={setIsToggleChecked2}
          onInfoButtonPress={() => console.log('info button pressed')}
        />
        <V2Cell
          heading="Toggle Switch 2"
          paragraph="value"
          value={String(isToggleChecked2)}
        />
      </V2CellGroup>
    </Box>
  );
};
```

## Radio Group

Cells of type `radio` are required to be wrapped in a `V2CellGroup` with type `radio`. Reference the [Type Inheritance](/mobile/ui/cell-group-v2/#type-inheritance) section above for more information.

Radio Cells contain the content of the cell with a radio button on the right side, and return the selected value onChange.

Radio `V2CellGroup` requires the `onChange` and `value` props.

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');

  return (
    <>
      <Heading>Radio Group Example</Heading>
      <Layout.Space />
      <V2CellGroup type="radio" value={radioValue} onChange={setRadioValue}>
        <V2Cell heading="Option 1" value="one" />
        <V2Cell heading="Option 2" value="two" />
        <V2Cell heading="Option 3" value="three" />
      </V2CellGroup>
    </>
  );
};
```

## Checkbox Group

Cells of type `checkbox` are required to be wrapped in a `V2CellGroup` with type `checkbox`, reference the [Type Inheritance](/mobile/ui/cell-group-v2/#type-inheritance) section above for more information.

Checkbox Cells contain the content of the cell, with a checkbox on the right side.

Checkbox Cells works the same as a standard Checkbox Group, returning the selected cell values.

`selectAll` is a prop that can exist inside a Cell in a Checkbox CellGroup. This prop creates a select all checkbox that will select/deselect the entire checkbox list.

Checkbox `V2CellGroup`'s require the `onChange` and `value` props.

```jsx live
() => {
  const [checkboxValue, setCheckboxValue] = useState([]);

  return (
    <>
      <Heading>Checkbox Group Example</Heading>
      <Layout.Space />
      <V2CellGroup
        type="checkbox"
        value={checkboxValue}
        onChange={setCheckboxValue}
      >
        <V2Cell heading="Select All" selectAll value="selectAll" />
        <V2Cell heading="Option 1" value="one" />
        <V2Cell heading="Option 2" value="two" />
        <V2Cell heading="Option 3" value="three" />
      </V2CellGroup>
    </>
  );
};
```

## isDisabled

`isDisabled` is a prop available for type `radio`, `checkbox`, and `toggle`.

When `isDisabled` is present in `V2CellGroup`, the entire group is disabled and cannot be modified. However, if `isDisabled` is present in `V2Cell`, only that cell is disabled and cannot be modified.

```jsx live
() => {
  const [checkboxValue, setCheckboxValue] = useState([]);
  const [radioValue, setRadioValue] = useState('one');
  const [disableGroup, setDisableGroup] = useState(false);
  const [disableCells, setDisableCells] = useState(false);

  return (
    <>
      <V2Cell
        heading="Disabled Cell Groups"
        type="toggle"
        value={disableGroup}
        onChange={setDisableGroup}
      />
      <V2CellGroup
        type="checkbox"
        value={checkboxValue}
        onChange={setCheckboxValue}
        isDisabled={disableGroup}
      >
        <V2Cell heading="Checkbox 1" value="1" />
        <V2Cell
          isDisabled={disableCells}
          heading="Checkbox 2"
          value="2"
          isDisabled
        />
      </V2CellGroup>
      <V2CellGroup
        type="radio"
        value={radioValue}
        onChange={setRadioValue}
        isDisabled={disableGroup}
      >
        <V2Cell heading="Radio 1" value="2" />
        <V2Cell isDisabled={disableCells} heading="Radio 2" value="2" />
      </V2CellGroup>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2CellGroup}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The child cells in CellGroup',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the cell value is changed',
    },
    {
      name: 'value',
      type: 'string | boolean',
      description: 'The value of the cell',
    },
    {
      name: 'type',
      type: '"default" | "toggle" | "radio" | "checkbox"',
      description: 'The type of cell',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Disables the radio button, toggle, or checkbox inside of cell',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

**It is the responsibility of consuming teams to make sure all components within CellGroup are accessible.**

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={CellGroup} type="class" />
```

```jsx render
<Docs.ComparisonTable of={CellGroup} type="props" />
```

</Tab>

---
id: cell-group
category: Data Display
title: CellGroup
description: Present data in one or more vertically stacked rows.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9599%3A34319&t=OIAOmowjKZ4THvqh-0
---

<Tab label="Overview">

```jsx
import { CellGroup } from '@uhg-abyss/mobile';
```

## Type Inheritance

When creating a `CellGroup` of type `radio`, `checkbox`, `toggle` or `dragAndDrop`, it is important to use the `type` prop. Once a type prop is assigned to a `CellGroup`, every child `CellGroup.Cell` will inherit the `CellGroups`'s type and have access to all necessary providers preventing errors.

Below, you can see a few examples of type inheritance within `CellGroup`. Notice how `CellGroup.Cell` does not have the `type` prop, causing `CellGroup.Cell` to inherit its type from `CellGroup`.

```jsx live
() => {
  const [isToggleChecked, setIsToggleChecked] = useState(false);
  const [isToggleChecked2, setIsToggleChecked2] = useState(true);
  const [radioValue, setRadioValue] = useState('one');
  const [value, setValue] = useState([]);

  return (
    <>
      <CellGroup type="radio" value={radioValue} onChange={setRadioValue}>
        <CellGroup.Cell title="One" value="one" />
        <CellGroup.Cell title="Two" value="two" />
      </CellGroup>
      <CellGroup
        hideBorderTop
        type="checkbox"
        value={value}
        onChange={setValue}
      >
        <CellGroup.Cell title="One" value="one" />
        <CellGroup.Cell title="Two" value="two" />
        <CellGroup.Cell title="Three" value="three" />
      </CellGroup>
      <CellGroup hideBorderTop type="toggle">
        <CellGroup.Cell
          title="Toggle Switch 1"
          value={isToggleChecked}
          onChange={setIsToggleChecked}
        />

        <CellGroup.Cell
          title="Toggle Switch 2"
          value={isToggleChecked2}
          onChange={setIsToggleChecked2}
        />
      </CellGroup>
    </>
  );
};
```

## Cell Customization

The `icon` prop defines the cell's icon on the left-hand side. Either IconBrand or IconSymbol can be used here. When using IconBrand, you can customize the icon's background color using the `iconBackgroundColor` prop.

The `eyebrow` prop defines the cell's eyebrow. This prop can either be text or a custom component such as `Badge`.

The `title` prop defines the cell's title. The title's fontWeight can be modified via the `titleWeight`, `titleColor` and the `highlight` prop. The `highlight` prop will highlight the cell title to make it stand out. If your cell does not contain any `onPress` functionality, you can pass in the `onInfoButtonPress` prop, which will cause an info button to populate to the right side of the title.

The `subtitle` prop defines the cell's subtitle.

The `description` prop defines the cell's description

The `footer` prop defines the component that lives at the bottom of the cell's content section. This is generally used to add either a Link or a Badge.

The `value` prop defines the value component on the right side of the cell. If the `value` prop exists, the cell cannot contain an `onPress` function. Either a string or a custom component can be passed here. This is generally used to display a numerical value or a link.

The `indicator` prop defines the indicator component on the right side of the cell. Unlike `value`, this prop can co-exist with an `onPress` function. Either a string or a custom Component can be passed here.

The `pressIcon` prop defines the icon that appears on the far right side of the cell. This icon will only exist when an `onPress` function exists.

```jsx live
() => {
  const [isToggleChecked, setIsToggleChecked] = useState(false);
  const [isToggleChecked2, setIsToggleChecked2] = useState(true);
  const [radioValue, setRadioValue] = useState('one');
  const [value, setValue] = useState([]);

  return (
    <CellGroup>
      <CellGroup.Cell
        title="Cell Title"
        highlight
        onPress={() => console.log('Cell Pressed')}
        pressIcon={<IconSymbol size={20} icon="open_in_new" color="$gray3" />}
      />
      <CellGroup.Cell
        onPress={() => console.log('Cell Pressed')}
        eyebrow="CELL eyebrow"
        title="Cell Title"
        description="Cell description"
        iconBackgroundColor="$pastel1"
        titleWeight="$bold"
        icon={
          <IconBrand
            size="$xs"
            icon="handshake"
            variant="twotone"
            brand="uhc"
          />
        }
      >
        <Badge>This is a badge</Badge>
      </CellGroup.Cell>
      <CellGroup.Cell
        onPress={() => console.log('Cell Pressed')}
        eyebrow={<Badge variant="info">Badge</Badge>}
        title="Cell Title"
        subtitle="Cell subtitle"
        description="Cell description"
        titleWeight="$bold"
        icon={
          <IconBrand
            size="$xs"
            icon="handshake"
            variant="twotone"
            brand="uhc"
          />
        }
      />
      <CellGroup.Cell
        title="Cell Title"
        subtitle="Cell subtitle"
        description="Cell description"
        titleWeight="$bold"
        iconBackgroundColor="$pastel1"
        icon={
          <IconBrand
            size="$xs"
            icon="handshake"
            variant="twotone"
            brand="uhc"
          />
        }
        footer={
          <Link size="small" href="https://Google.com">
            Link
          </Link>
        }
      />
      <CellGroup.Cell
        onPress={() => console.log('Cell Pressed')}
        title="Cell Title"
        description="A segmented control is a linear set of two or more segments"
        titleWeight="$bold"
        icon={<IconSymbol size={24} icon="domain" color="$primary1" />}
      />
      <CellGroup.Cell
        onPress={() => console.log('Cell Pressed')}
        title="Cell Title"
        description="Cell description"
        indicator="Indicator"
      />
      <CellGroup.Cell
        onPress={() => console.log('Cell Pressed')}
        title="Cell Title"
        description="A segmented control is a linear set of two or more segments"
        indicator={
          <Badge
            icon={
              <IconSymbol size={14} icon="check_circle" color="$success1" />
            }
          >
            Badge
          </Badge>
        }
      />
      <CellGroup.Cell
        title="Cell Title"
        description="Cell description"
        value="$Value"
      />
      <CellGroup.Cell
        title="Cell Title"
        description="Cell description"
        value={
          <Link size="small" href="https://Google.com">
            Link
          </Link>
        }
      />
      <CellGroup.Cell
        onInfoButtonPress={() => console.log('info button pressed')}
        title="Cell Title"
      />
    </CellGroup>
  );
};
```

## Cell Header

For cells requiring a category title, use the `CellGroup.CellHeader` component within the `CellGroup`. <br/><br/>
`CellHeader` has the following props:

- `title` - the title of the cell category.
- `value` - place content, such as a link, on the right side of the header cell.
- `onInfoButtonPress` - info button populates on the right side of the title.

```jsx live
() => {
  const cellPressed = () => {
    console.log('Cell Pressed');
  };

  return (
    <CellGroup hideBorderTop hideBorderBottom>
      <CellGroup.CellHeader title="Find Care" />
      <CellGroup.Cell
        onPress={cellPressed}
        title="Find Providers"
        hideBorderTop
        icon={
          <IconSymbol
            size={24}
            icon="add_circle"
            color="$primary1"
            variant="outlined"
          />
        }
      />
      <CellGroup.Cell
        onPress={cellPressed}
        title="Saved Providers"
        hideBorderBottom
        icon={
          <IconSymbol
            size={24}
            icon="bookmark"
            color="$primary1"
            variant="outlined"
          />
        }
      />
      <CellGroup.CellHeader
        title="Payments"
        onInfoButtonPress={() => {
          console.log('info button pressed');
        }}
      />
      <CellGroup.Cell
        onPress={cellPressed}
        title="Premium payments"
        hideBorderTop
        hideBorderBottom
        icon={
          <IconSymbol
            size={24}
            icon="credit_card"
            color="$primary1"
            variant="outlined"
          />
        }
      />
      <CellGroup.CellHeader
        title="Claims"
        value={
          <Link
            size="small"
            onPress={() => {
              return console.log('See all pressed');
            }}
          >
            See All
          </Link>
        }
      />
      <CellGroup.Cell
        onPress={cellPressed}
        title="My claims"
        hideBorderTop
        icon={
          <IconSymbol
            size={24}
            icon="assignment"
            color="$primary1"
            variant="outlined"
          />
        }
      />
    </CellGroup>
  );
};
```

## Border Variants

Cell borders can be manipulated using the below props:

`hideBorderTop` | hides the border of the top cell.

`hideBorderBottom` | hides the border of the bottom cell.

`hideBorderAll` | hides the border of every cell.

`fullBorder` | makes border for every cell extend the full width of the parent.

```jsx live
() => {
  return (
    <Box color="$gray1">
      <Grid columns={2} gap="$lg" span="50%" space="$lg">
        <Grid.Col>
          <CellGroup hideBorderTop>
            <CellGroup.Cell
              highlight
              onPress={() => console.log('Cell Pressed')}
              title="Hide Border Top"
            />
            <CellGroup.Cell
              highlight
              onPress={() => console.log('Cell Pressed')}
              title="Hide Border Top"
            />
          </CellGroup>
        </Grid.Col>
        <Grid.Col>
          <CellGroup hideBorderBottom>
            <CellGroup.Cell
              highlight
              onPress={() => console.log('Cell Pressed')}
              title="Hide Border Bottom"
            />
            <CellGroup.Cell
              highlight
              onPress={() => console.log('Cell Pressed')}
              title="Hide Border Bottom"
            />
          </CellGroup>
        </Grid.Col>
        <Grid.Col>
          <CellGroup hideBorderAll>
            <CellGroup.Cell
              highlight
              onPress={() => console.log('Cell Pressed')}
              title="Hide Border All"
            />
            <CellGroup.Cell
              highlight
              onPress={() => console.log('Cell Pressed')}
              title="Hide Border All"
            />
          </CellGroup>
        </Grid.Col>
        <Grid.Col>
          <CellGroup fullBorder>
            <CellGroup.Cell
              highlight
              onPress={() => console.log('Cell Pressed')}
              title="Border Full"
            />
            <CellGroup.Cell
              highlight
              onPress={() => console.log('Cell Pressed')}
              title="Border Full"
            />
          </CellGroup>
        </Grid.Col>
      </Grid>
    </Box>
  );
};
```

## Toggle Switch Cell

Cells of type `toggle` contain the content of the cell with a ToggleSwitch on the right side. Toggle Cells will return a boolean of the selected value onChange.

```jsx live
() => {
  const [isToggleChecked, setIsToggleChecked] = useState(false);
  const [isToggleChecked2, setIsToggleChecked2] = useState(true);

  return (
    <Box
      color="$white"
      style={{ flexDirection: 'column', justifyContent: 'space-between' }}
      padding={0}
    >
      <CellGroup fullBorder>
        <CellGroup.Cell
          title="Toggle Switch 1"
          type="toggle"
          value={isToggleChecked}
          onChange={setIsToggleChecked}
        />
        <CellGroup.Cell
          title="Toggle Switch 1 Value"
          value={String(isToggleChecked)}
        />
        <CellGroup.Cell
          title="Toggle Switch 2"
          type="toggle"
          value={isToggleChecked2}
          onChange={setIsToggleChecked2}
          onInfoButtonPress={() => console.log('info button pressed')}
        />
        <CellGroup.Cell
          title="Toggle Switch 2 Value"
          value={String(isToggleChecked2)}
        />
      </CellGroup>
    </Box>
  );
};
```

## Radio Group

Cells of type `radio` are required to be wrapped in a `CellGroup` with type `radio`. Reference the `Type Inheritance` section above for more information.

Radio Cells contain the content of the cell with a radio button on the right side, and return the selected value onChange.

When using the type `radio` use the [Cell Header](/mobile/ui/cell-group/#cell-header) component for the group label.

Radio `CellGroup` requires the `onChange` and `value` props.

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');

  return (
    <Box
      color="$white"
      style={{ flexDirection: 'column', justifyContent: 'space-between' }}
      padding={0}
    >
      <CellGroup
        hideBorderTop
        type="radio"
        value={radioValue}
        onChange={setRadioValue}
      >
        <CellGroup.CellHeader title="Radio Group Example" />
        <CellGroup.Cell title="One" value="one" hideBorderTop />
        <CellGroup.Cell title="Two" value="two" />
        <CellGroup.Cell title="Three" value="three" />
      </CellGroup>
      <CellGroup.Cell
        fullBorder
        hideBorderTop
        type="default"
        title="Selected value"
        value={radioValue}
      />
    </Box>
  );
};
```

## Checkbox Group

Cells of type `checkbox` are required to be wrapped in a `CellGroup` with type `checkbox`, reference the `Type Inheritance` section above for more information.

Checkbox Cells contain the content of the cell, with a checkbox on the right side.

Checkbox Cells works the same as a standard Checkbox Group, returning the selected cell values.

`selectAll` is a prop that can exist inside a Cell in a Checkbox CellGroup. This prop creates a select all checkbox that will select/deselect the entire checkbox list.

Checkbox `CellGroup`'s require the `onChange` and `value` props.

When using the type `checkbox` use the [Cell Header](/mobile/ui/cell-group/#cell-header) component for the group label.

```jsx live
() => {
  const [checkboxValue, setCheckboxValue] = useState([]);

  return (
    <Box
      color="$white"
      style={{ flexDirection: 'column', justifyContent: 'space-between' }}
      padding={0}
    >
      <CellGroup
        hideBorderTop
        type="checkbox"
        value={checkboxValue}
        onChange={setCheckboxValue}
      >
        <CellGroup.CellHeader title="Checkbox Group Example" />
        <CellGroup.Cell title="Select All" selectAll hideBorderTop />
        <CellGroup.Cell title="Cell Title" value="one" />
        <CellGroup.Cell title="Cell Title" value="two" />
        <CellGroup.Cell title="Cell Title" value="three" />
      </CellGroup>
      <CellGroup.Cell
        hideBorderTop
        fullBorder
        type="default"
        title="Selected value"
        value={checkboxValue.join(',')}
      />
    </Box>
  );
};
```

## isDisabled

`isDisabled` is a prop available for type `radio` and `checkbox`.

When `isDisabled` is present in `CellGroup`, the entire group is disabled and cannot be modified. However, if `isDisabled` is present in `CellGroup.Cell`, only that cell is disabled and cannot be modified.

```jsx live
() => {
  const [checkboxValue, setCheckboxValue] = useState([]);
  const [radioValue, setRadioValue] = useState('one');
  const [disableGroup, setDisableGroup] = useState(false);
  const [disableCells, setDisableCells] = useState(false);

  return (
    <Box
      color="$white"
      style={{ flexDirection: 'column', justifyContent: 'space-between' }}
      padding={0}
    >
      <CellGroup hideBorderBottom>
        <CellGroup.Cell
          title="Disabled Cell Groups"
          type="toggle"
          value={disableGroup}
          onChange={setDisableGroup}
        />
        <CellGroup.Cell
          title="Disabled Cells"
          type="toggle"
          value={disableCells}
          onChange={setDisableCells}
        />
      </CellGroup>
      <CellGroup
        type="checkbox"
        value={checkboxValue}
        onChange={setCheckboxValue}
        isDisabled={disableGroup}
      >
        <CellGroup.Cell title="One" value="one" />
        <CellGroup.Cell isDisabled={disableCells} title="Three" value="Three" />
      </CellGroup>
      <CellGroup
        hideBorderTop
        type="radio"
        value={radioValue}
        onChange={setRadioValue}
        isDisabled={disableGroup}
      >
        <CellGroup.Cell title="One" value="one" />
        <CellGroup.Cell isDisabled={disableCells} title="Three" value="Three" />
      </CellGroup>
    </Box>
  );
};
```

## Custom Cells

Cells can be customized to fit design needs by passing it children and leaving the values empty for any combination of the `title`, `subtitle`, `description`, `eyebrow`, `icon`, and `linkText` properties.

```jsx live
() => {
  return (
    <Card style={{ width: '50%' }}>
      <CellGroup hideBorderTop hideBorderBottom>
        <CellGroup.Cell
          title={'Abyss'}
          titleWeight={'$semibold'}
          icon={<Avatar initials="A" />}
        >
          <CellGroup.CellDescription>{'12/19/2022'}</CellGroup.CellDescription>
          <Layout.Space space={2} />
          <Link
            size="small"
            href="https://abyss.uhg.com/"
            after={
              <IconSymbol
                icon={'chevron_right'}
                color={'$interactive1'}
                size={18}
              />
            }
          >
            Get Started
          </Link>
        </CellGroup.Cell>
        <CellGroup.Cell
          title={'Abyss Design'}
          titleWeight={'$semibold'}
          icon={<Avatar initials="AD" colorTheme={2} />}
        >
          <Layout.Space space={2} />
          <Link
            size="small"
            href="https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=14165-81139&t=qnbYzTGc1BUmN5HL-0"
            after={
              <IconSymbol
                icon={'chevron_right'}
                color={'$interactive1'}
                size={18}
              />
            }
          >
            See the Designs
          </Link>
        </CellGroup.Cell>
      </CellGroup>
    </Card>
  );
};
```

## CellCreator & DragAndDrop

This type of cell cannot be used inside a ScrollView.

`CellCreator` will create a new `DragAndDrop` Cell every time the blue plus is clicked.

`DragAndDrop` cells can be deleted via the red button on the left side, and dragged by clicking and holding the icon on the right side.

When the close button is pressed, the callback `onRemoveCell` will be called. The callback will contain the ID of the cell to be deleted.

When the add cell button is pressed, the callback `onAddCell` will be called. This function should create a new cell with a title and unique id.

Use the `data` prop to define the active cells. The `setData` prop is required for drag and drop functionality.

```jsx live
() => {
  const keyRef = useRef(2);
  const [childCells, setChildCells] = useState([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
  ]);

  const addCell = () => {
    keyRef.current = keyRef.current + 1;
    const newChildCell = {
      text: `New Item ${keyRef.current}`,
      id: keyRef.current,
    };
    setChildCells([...childCells, newChildCell]);
  };

  const removeItem = (id) => {
    setChildCells(childCells.filter((item) => item.id !== id));
  };

  return (
    <Box
      color="$white"
      style={{ flexDirection: 'column', justifyContent: 'space-between' }}
    >
      <CellGroup
        type="dragAndDrop"
        title="Cell Creator"
        data={childCells}
        setData={setChildCells}
        onAddCell={addCell}
        onRemoveCell={(e) => removeItem(e)}
      />
      <Box color="$white" width="30%">
        {Object.keys(childCells).map((key) => (
          <Text key={key} style={{ padding: 10 }}>
            ID: {childCells[key].id} | Text: {childCells[key].text}
          </Text>
        ))}
      </Box>
    </Box>
  );
};
```

## Cell Group Examples

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');
  const [radioValue2, setRadioValue2] = useState('one');
  const [isToggleChecked, setIsToggleChecked] = useState(false);
  const [isToggleChecked2, setIsToggleChecked2] = useState(true);
  const [checkboxValue, setCheckboxValue] = useState([]);
  const [checkboxValue2, setCheckboxValue2] = useState([]);
  const [checkboxValue3, setCheckboxValue3] = useState([]);

  return (
    <>
      <CellGroup>
        <CellGroup.Cell
          style={{ paddingVertical: 36 }}
          highlight
          onInfoButtonPress={() => console.log('info button pressed')}
          title="Cell Title"
        />
        <CellGroup.Cell
          highlight
          onInfoButtonPress={() => console.log('info button pressed')}
          title="Cell Title"
          pressIcon={<IconSymbol size={20} icon="open_in_new" color="$gray3" />}
        />
        <CellGroup.Cell
          highlight
          onInfoButtonPress={() => console.log('info button pressed')}
          onPress={() => {
            console.log('double');
          }}
          title="Cell Title"
        />
        <CellGroup.Cell
          onInfoButtonPress={() => console.log('info button pressed')}
          title="Cell Title"
        />
        <CellGroup.Cell
          onInfoButtonPress={() => console.log('info button pressed')}
          eyebrow="CELL eyebrow"
          title="Cell Title"
          description="A really long cell description that will wrap. A really long cell description that will wrap. A really long cell description that will wrap. A really long cell description that will wrap. A really long cell description that will wrap. A really long cell description that will wrap. A really long cell description that will wrap."
          iconBackgroundColor="$pastel1"
          titleWeight="$bold"
          icon={
            <IconBrand
              size="$xs"
              icon="handshake"
              variant="twotone"
              brand="uhc"
            />
          }
        >
          <Badge>This is the badge</Badge>
        </CellGroup.Cell>
        <CellGroup.Cell
          onInfoButtonPress={() => console.log('info button pressed')}
          eyebrow={<Badge variant="info">Badge</Badge>}
          title="Cell Title"
          subtitle="Cell subtitle"
          description="Cell description"
          titleWeight="$bold"
          icon={
            <IconBrand
              size="$xs"
              icon="handshake"
              variant="twotone"
              brand="uhc"
            />
          }
        />
        <CellGroup.Cell
          onInfoButtonPress={() => console.log('info button pressed')}
          title="Cell Title"
          subtitle="Cell subtitle"
          description="Cell description"
          titleWeight="$bold"
          icon={
            <IconBrand
              size="$xs"
              icon="handshake"
              variant="twotone"
              brand="uhc"
            />
          }
        />
        <CellGroup.Cell
          title="Cell Title"
          subtitle="Cell subtitle"
          description="Cell description"
          titleWeight="$bold"
          iconBackgroundColor="$pastel1"
          icon={
            <IconBrand
              size="$xs"
              icon="handshake"
              variant="twotone"
              brand="uhc"
            />
          }
          footer={
            <Link size="small" href="https://Google.com">
              Link
            </Link>
          }
        />
        <CellGroup.Cell
          footer={<Badge variant="info">Badge</Badge>}
          title="Cell Title"
          subtitle="Cell subtitle"
          description="Cell description"
          titleWeight="$bold"
          iconBackgroundColor="$pastel1"
          icon={
            <IconBrand
              size="$xs"
              icon="handshake"
              variant="twotone"
              brand="uhc"
            />
          }
        />
        <CellGroup.Cell
          onInfoButtonPress={() => console.log('info button pressed')}
          title="Cell Title"
          description="Cell description"
          titleWeight="$bold"
          titleColor="$primary1"
          icon={<IconSymbol size={24} icon="domain" color="$primary1" />}
        />
        <CellGroup.Cell
          onInfoButtonPress={() => console.log('info button pressed')}
          title="Cell Title"
          description="Cell description"
          icon={<IconSymbol size={24} icon="domain" color="$primary1" />}
        />
        <CellGroup.Cell
          onInfoButtonPress={() => console.log('info button pressed')}
          title="Cell Title"
          description="A really long cell description that will wrap A really long cell description that will wrap A really long cell description that will wrap A really long cell description that will wrap A really long cell description that will wrap A really long cell description that will wrap "
          indicator="Indicator"
        />
        <CellGroup.Cell
          onInfoButtonPress={() => console.log('info button pressed')}
          title="Cell Title"
          description="Cell description"
          indicator={<Indicator>Indicator</Indicator>}
        />
        <CellGroup.Cell
          onInfoButtonPress={() => console.log('info button pressed')}
          title="Cell Title"
          description="Cell description"
          indicator={
            <Badge
              icon={
                <IconSymbol size={14} icon="check_circle" color="$success1" />
              }
            >
              Badge
            </Badge>
          }
        />
        <CellGroup.Cell
          title="Cell Title"
          description="Cell description"
          value="$Value"
        />
        <CellGroup.Cell
          title="Cell Title"
          description="Cell description"
          value={
            <Link size="small" href="https://Google.com">
              Link
            </Link>
          }
        />
      </CellGroup>
      <CellGroup hideBorderBottom>
        <CellGroup.Cell
          title="Cell Title"
          type="toggle"
          value={isToggleChecked}
          onChange={setIsToggleChecked}
        />
        <CellGroup.Cell
          title="Cell Title"
          type="toggle"
          value={isToggleChecked2}
          onChange={setIsToggleChecked2}
          onInfoButtonPress={() => console.log('info button pressed')}
        />
      </CellGroup>
      <CellGroup
        type="radio"
        value={radioValue}
        onChange={setRadioValue}
        hideBorderTop
        hideBorderBottom
      >
        <CellGroup.CellHeader title="Radio Group Example" />
        <CellGroup.Cell title="Radio Cell One" value="one" hideBorderTop />
        <CellGroup.Cell title="Radio Cell two" value="two" />
        <CellGroup.Cell isDisabled title="Radio Cell three" value="three" />
      </CellGroup>
      <CellGroup
        type="checkbox"
        value={checkboxValue3}
        onChange={setCheckboxValue3}
        hideBorderTop
      >
        <CellGroup.CellHeader title="Checkbox Group Example" />
        <CellGroup.Cell title="Select All" selectAll hideBorderTop />
        <CellGroup.Cell title="Cell Title" value="one" />
        <CellGroup.Cell title="Cell Title" value="two" />
      </CellGroup>
      <CellGroup>
        <CellGroup.Cell title={'Abyss Design'} icon={<Avatar initials="AD" />}>
          <CellGroup.CellDescription>{'MM/DD/YYYY'}</CellGroup.CellDescription>
          <Layout.Space space={4} />
          <Link
            size="small"
            after={
              <IconSymbol
                icon={'chevron_right'}
                color={'$interactive1'}
                size={18}
              />
            }
          >
            {'Minneapolis, MN'}
          </Link>
        </CellGroup.Cell>
      </CellGroup>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={CellGroup}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Child cells in CellGroup',
    },
    {
      name: 'type',
      type: '"default" | "toggle" | "radio" | "dragAndDrop" | "checkbox"',
      description: 'The type of cell group',
      default: '"default"',
    },
    {
      name: 'value',
      type: 'any',
      description:
        'Value passed to CellGroup, defining defaults for toggle, radio, and checkbox. It can also be used to define value shown on the right side of an un-pressable cell',
    },
    {
      name: 'onChange',
      type: 'function',
      description:
        'Called fired when CellGroup value is triggered to change. Required for radio and checkbox types',
    },
    {
      name: 'title',
      type: 'string',
      description: 'The title of the cell group',
    },
    {
      name: 'data',
      type: 'array',
      description: 'Array of data for drag and drop cells',
      default: '[]',
    },
    {
      name: 'setData',
      type: 'func',
      description:
        'Function used to update data when dragging and dropping cells',
    },
    {
      name: 'onAddCell',
      type: 'function',
      description: 'Callback used to create a new drag and drop cell',
    },
    {
      name: 'onRemoveCell',
      type: 'func',
      description:
        'Callback used to remove cells. Includes the id of the cell to be removed as a parameter',
    },
    {
      name: 'fullBorder',
      type: 'boolean',
      description:
        'Makes border for every cell extend to the full width of the parent',
      default: 'false',
    },
    {
      name: 'hideBorderTop',
      type: 'boolean',
      description: 'Flag to hide the top border of the cells',
      default: 'false',
    },
    {
      name: 'hideBorderBottom',
      type: 'boolean',
      description: 'Flag to hide the bottom border of the cells',
      default: 'false',
    },
    {
      name: 'hideBorderAll',
      type: 'boolean',
      description: 'Flag to hide the top and bottom border of the cells',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Flag to disable all cells in the cell group',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={CellGroup.Cell}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the cell',
    },
    {
      name: 'onInfoButtonPress',
      type: 'function',
      description:
        'Creates info button and fires callback when the info button is pressed',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the cell value is changed',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'Content that lives at the bottom of Cell',
    },
    {
      name: 'value',
      type: 'any',
      description: 'The value of the cell',
    },
    {
      name: 'type',
      type: '"default" | "toggle" | "radio" | "checkbox"',
      description: 'The type of cell',
      default: 'default',
    },
    {
      name: 'title',
      type: 'string',
      description: 'The title of the cell',
    },
    {
      name: 'subtitle',
      type: 'string',
      description: 'The subtitle of the cell',
    },
    {
      name: 'description',
      type: 'string',
      description: 'The description of the cell',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the cell is pressed',
    },
    {
      name: 'eyebrow',
      type: 'string | node',
      description: 'The eyebrow of the cell',
    },
    {
      name: 'icon',
      type: 'node',
      description: 'Icon displayed on the left side of the cell',
    },
    {
      name: 'indicator',
      type: 'string | node',
      description: 'Indicator text on the right side of the cell',
    },
    {
      name: 'iconBackgroundColor',
      type: 'string',
      description: 'The background color of the icon',
    },
    {
      name: 'pressIcon',
      type: 'node',
      description: 'Icon used on the right side of the cell',
    },
    {
      name: 'titleWeight',
      type: '"$bold" | "$semibold" | "$regular"',
      description: 'The font weight of the title',
      default: '$regular',
    },
    {
      name: 'selectAll',
      type: 'boolean',
      description: 'Flag to uses cell as a select all checkbox',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Disables the radio button, toggle, or checkbox inside of cell',
      default: 'false',
    },
    {
      name: 'highlight',
      type: 'boolean',
      description:
        'Flag to highlight cell title. Highlighted cells must only contain a title',
      default: 'false',
    },
    {
      name: 'hideBorderTop',
      type: 'boolean',
      description: 'Flag to hide the top border of the cell',
      default: 'false',
    },
    {
      name: 'hideBorderBottom',
      type: 'boolean',
      description: 'Flag to hide the bottom border of the cells',
      default: 'false',
    },
    {
      name: 'fullBorder',
      type: 'boolean',
      description: 'Flag to extend cell borders to full width',
      default: 'false',
    },
    {
      name: 'titleColor',
      type: 'string',
      description: 'The color of the title',
    },
    {
      name: 'onPressIn',
      type: 'function',
      description: 'Callback fired at the start of the Cell press',
    },
    {
      name: 'onPressOut',
      type: 'boolean',
      description: 'Callback fired at the end of the Cell press',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={CellGroup.CellHeader}
  rows={[
    {
      name: 'title',
      type: 'string',
      description: 'The title for the cell heder',
    },
    {
      name: 'onInfoButtonPress',
      type: 'function',
      description:
        'Creates info button and fires callback when the info button is pressed',
    },
    {
      name: 'value',
      type: 'node',
      description:
        'Value passed to CellHeader, used to define value shown on the right side of a header cell',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={CellGroup.CellTitle}
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'The content of the cell title',
    },
    {
      name: 'titleWeight',
      type: '"$bold" | "$semibold" | "$regular"',
      description: 'Font weight of the cell title',
    },
    {
      name: 'titleColor',
      type: 'string',
      description: 'Color of the cell title',
    },
    {
      name: 'highlight',
      type: 'boolean',
      description: 'Highlights the title',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={CellGroup.CellSubtitle}
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'Subtitle of the cell',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={CellGroup.CellDescription}
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'Description of the cell',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={CellGroup.CellEyebrow}
  rows={[
    {
      name: 'children',
      type: 'string',
      description:
        'Eyebrow of the cell. This is intended to go above the title. By default, letters are all uppercase with increased spacing',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={CellGroup}
  rows={[
    {
      name: 'cell-group-root',
      description: 'CellGroup root',
    },
    {
      name: 'cell-group-radio-group',
      description: 'CellGroup radio group wrapper',
    },
    {
      name: 'cell-group-checkbox-group',
      description: 'CellGroup checkbox group wrapper',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={CellGroup.Cell}
  rows={[
    {
      name: 'cell-root',
      description: 'Cell root',
    },
    {
      name: 'cell-left-wrapper',
      description: 'Cell left icon wrapper',
    },
    {
      name: 'cell-content-wrapper',
      description: 'Cell content wrapper',
    },
    {
      name: 'cell-eyebrow',
      description: 'Cell eyebrow',
    },
    {
      name: 'cell-title',
      description: 'Cell title',
    },
    {
      name: 'cell-info-button',
      description: 'Cell info button',
    },
    {
      name: 'cell-info-icon',
      description: 'Cell info icon',
    },
    {
      name: 'cell-subtitle',
      description: 'Cell subtitle',
    },
    {
      name: 'cell-description',
      description: 'Cell description',
    },
    {
      name: 'cell-right-wrapper',
      description: 'Wrapper for the right side of the cell',
    },
    {
      name: 'cell-value',
      description: 'Cell value',
    },
    {
      name: 'cell-radio-button',
      description: 'Radio component',
    },
    {
      name: 'cell-checkbox-button',
      description: 'Checkbox component',
    },
    {
      name: 'cell-toggle-button',
      description: 'ToggleSwitch component',
    },
    {
      name: 'cell-indicator',
      description: 'Cell indicator',
    },
    {
      name: 'cell-icon-right',
      description: 'onPress icon to the far right of cell',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={CellGroup.CellHeader}
  rows={[
    {
      name: 'cell-header-root',
      description: 'Cell header root',
    },
    {
      name: 'cell-header-title',
      description: 'Cell header text',
    },
    {
      name: 'cell-header-info-button',
      description: 'Cell header info button',
    },
    {
      name: 'cell-header-info-icon',
      description: 'Cell header info icon',
    },
    {
      name: 'cell-header-value',
      description: 'Cell header value',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={CellGroup.CellEyebrow}
  rows={[
    {
      name: 'cell-eyebrow-root',
      description: 'Cell eyebrow root',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={CellGroup.CellTitle}
  rows={[
    {
      name: 'cell-title-root',
      description: 'Cell title root',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={CellGroup.CellSubtitle}
  rows={[
    {
      name: 'cell-subtitle-root',
      description: 'Cell subtitle root',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={CellGroup.CellDescription}
  rows={[
    {
      name: 'cell-description-root',
      description: 'Cell description root',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={CellGroup}
  rows={[
    'CellGroup.moreInfo',
    'CellGroup.deleteCell',
    'CellGroup.moveCell',
    'CellGroup.createCell',
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

**It is the responsibility of consuming teams to make sure all components within CellGroup are accessible.**

</Tab>

---
id: checkbox
category: Forms
title: Checkbox
description: Used to mark an option as true/checked or false/not checked
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9602%3A34536
---

<Tab label="Overview">

```jsx
import { Checkbox } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Checkbox',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'align',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'isIndeterminate',
      type: 'boolean',
    },
  ]
}

() => {
  const [isChecked, setChecked] = useState(true);

  return (
    <Checkbox
      label="I agree"
      isChecked={isChecked}
      onChange={setChecked}
    />
  );
};
```

## States

- <b>Default</b> - The default checkbox is unchecked.
- <b>Checked</b> - Use the `isChecked` prop to mark a checkbox as checked.
- <b>Indeterminate</b> - Use the `isIndeterminate` prop to set the checkbox as indeterminate.
- <b>Disabled</b> - Use the `isDisabled` prop to disable a checkbox. A disabled checkbox
  is unusable and un-clickable.
- <b>Help Text</b> - Use the `helpText` prop to insert helpful text below the checkbox.
- <b>Error Message</b> - Use the `errorMessage` prop to display a custom error message
  below the checkbox.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      indeterminate: true,
      'indeterminate-disabled': true,
      'disabled-checked': true,
    },
  });

  return (
    <FormProvider state={form}>
      <Checkbox label="Default Checkbox" />
      <Checkbox label="Checked Checkbox" isChecked />
      <Checkbox
        label="Indeterminate Checkbox"
        isIndeterminate
        model="indeterminate"
      />
      <Checkbox label="Disabled Checkbox" isDisabled />
      <Checkbox
        label="Disabled Checked Checkbox"
        isDisabled
        model="disabled-checked"
      />
      <Checkbox
        label="Disabled Indeterminate Checkbox"
        isIndeterminate
        isDisabled
        model="indeterminate-disabled"
      />
      <Checkbox label="Checkbox with Help Text" helpText="Help Text Message" />
      <Checkbox label="Checkbox with Error" errorMessage="Error Message" />
    </FormProvider>
  );
};
```

## useForm (Recommended)

Using the `useForm` hook allows you to easily manage form state and validation.

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    console.log('submitted', data);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <Checkbox label="Form Checkbox" model="checkbox" />
      <Button type="submit" size="small" style={{ marginTop: 16 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [isChecked, setChecked] = useState(false);

  return (
    <Checkbox
      label="State Checkbox"
      isChecked={isChecked}
      onChange={setChecked}
    />
  );
};
```

## Align

The `align` prop determines which side the checkbox is on. The options are `left` or `right`.
When the align prop is set to `right`, the label stays on the left and only the checkbox is set
to the rightmost edge of it's container. The default is `left`.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      leftAlignedCheckbox: true,
      rightAlignedCheckbox: true,
    },
  });

  return (
    <FormProvider state={form}>
      <Checkbox label="Left Align" align="left" model="leftAlignedCheckbox" />
      <Checkbox
        label="Right Align"
        align="right"
        model="rightAlignedCheckbox"
      />
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Checkbox}
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Value of the checkbox',
    },
    {
      name: 'isChecked',
      type: 'boolean',
      description: 'Flag to turn checkbox on or off',
      default: 'false',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label of the checkbox',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the checkbox. If true, the checkbox will be disabled',
      default: 'false',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the checkbox component',
    },
    {
      name: 'isIndeterminate',
      type: 'boolean',
      description: 'Set the checkbox to indeterminate or not',
      default: 'false',
    },
    {
      name: 'hideLabel',
      type: 'boolean',
      description: 'Flag to hide label',
      default: 'false',
    },
    {
      name: 'helpText',
      type: 'string',
      description: 'Set the subtext displayed below the checkbox',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Set the error message displayed below the checkbox',
    },
    {
      name: 'align',
      type: '"left" | "right',
      description: 'The side the checkbox should be aligned to',
      default: 'left',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Checkbox}
  rows={[
    {
      name: 'checkbox-root',
      description: 'Checkbox root element',
    },
    {
      name: 'checkbox',
      description: 'Checkbox element',
    },
    {
      name: 'checkbox-help-text',
      description: 'Text element below the label',
    },
    {
      name: 'checkbox-error-icon',
      description: 'Error icon element',
    },
    {
      name: 'checkbox-error-container',
      description: 'Checkbox error container element',
    },
    {
      name: 'checkbox-error-label',
      description: 'Text element in the error container',
    },
    {
      name: 'checkbox-label',
      description: 'Label element',
    },
    {
      name: 'checkbox-label-container',
      description: 'Label container',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

The checkbox icon scales up to 3XL, while any text passed in scales according to Abyss dynamic type standards.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Checkbox} keys={['checkbox']} />
```

</Tab>

---
id: checkbox-group
category: Forms
title: CheckboxGroup
description: Allows a user to select one or multiple items from a list.
---

<Tab label="Overview">

```jsx
import { CheckboxGroup } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'CheckboxGroup',
  inputs: [
    {
      prop: 'align',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
  ]
}

() => {
  const [value, setValue] = useState([]);

  const handlePress = () => {
    console.log(value);
  };
  return (
    <Layout.Stack grow>
      <CheckboxGroup align="left" value={value} onChange={(value) => setValue(value)}>
        <CheckboxGroup.SelectAll  label='Select All'/>
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
        <Checkbox label="Option 4" value="four" />
        <Checkbox label="Option 5" value="five" />
      </CheckboxGroup>
      <Button size='small' onPress={handlePress}>Submit</Button>
    </Layout.Stack>
  );
};
```

## useForm (Recommended)

Using the `useForm` hook allows you to manage the state of the checkbox group more effectively, especially when dealing with forms.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'checkbox-form': ['two'],
    },
  });

  const onSubmit = (data) => {
    console.log('submitted', data);
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <CheckboxGroup label="CheckboxGroup useForm" model="checkbox-form">
        <CheckboxGroup.SelectAll label="Select All" />
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
      </CheckboxGroup>
      <Button type="submit" style={{ marginTop: 16 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [value, setValue] = useState(['two']);
  return (
    <CheckboxGroup align="left" value={value} onChange={setValue}>
      <CheckboxGroup.SelectAll label="Select All" />
      <Checkbox label="Option 1" value="one" />
      <Checkbox label="Option 2" value="two" />
      <Checkbox label="Option 3" value="three" />
    </CheckboxGroup>
  );
};
```

## Value

Checkboxes within a `CheckboxGroup` component require the `value` prop to be specified in order to function as part of the checkbox group.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <CheckboxGroup align="left" model="checkbox-form">
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
      </CheckboxGroup>
    </FormProvider>
  );
};
```

## Select All

Use the `CheckboxGroup.SelectAll` component to control the checked state for the entire group.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <CheckboxGroup align="left" model="checkbox-group-select-all">
        <CheckboxGroup.SelectAll label="Select All Options" />
        <Checkbox label="Option 1" value="1" />
        <Checkbox label="Option 2" value="2" />
        <Checkbox label="Option 3" value="3" />
      </CheckboxGroup>
    </FormProvider>
  );
};
```

## Disabled

Use the `isDisabled` prop to disable the entire group.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <CheckboxGroup isDisabled model="disabled-checkbox-group">
        <CheckboxGroup.SelectAll label="Select All" />
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
      </CheckboxGroup>
    </FormProvider>
  );
};
```

## Align

The `align` prop determines which side the checkbox is on for the entire group. The options are `left` or `right`.
When the align prop is set to `right`, the label stays on the left and only the checkbox is set
to the rightmost edge of it's container. The default is `left`.

```jsx live
() => {
  const form = useForm();
  const [align, setAlign] = useState(true);

  return (
    <FormProvider state={form}>
      <CheckboxGroup model="checkbox-form" align={align ? 'left' : 'right'}>
        <CheckboxGroup.SelectAll label="Select All" />
        <Checkbox label="Option 1" value="one" />
        <Checkbox label="Option 2" value="two" />
        <Checkbox label="Option 3" value="three" />
      </CheckboxGroup>
      <Button onPress={() => setAlign(!align)} size={'small'}>
        Toggle Align
      </Button>
    </FormProvider>
  );
};
```

## Multi Select Card

A child component can be used instead of a traditional checkbox label. The `label` prop is removed and a component is added as a child of each checkbox.

See [Card](/mobile/ui/card/#Section) for more details on the Card used below.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <View style={{ width: 400 }}>
        <CheckboxGroup align="left" model="claims">
          <CheckboxGroup.SelectAll>
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Select All Claims (4)</Text>
                  <Text fontWeight="700">$278.89</Text>
                </View>
              </Card.Section>
            </Card>
          </CheckboxGroup.SelectAll>
          <Checkbox value="one">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Dr. Sharon Tang</Text>
                  <Text fontWeight="700">$93.22</Text>
                </View>
                <Text size="$sm">Date of Service 5/11/23</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$info1"
                    size={16}
                  />
                  <Text size="$sm" color="$info1">
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="two">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Walgreens #927956</Text>
                  <Text fontWeight="700">$127.93</Text>
                </View>
                <Text size="$sm">Date of Service 5/5/23</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$info1"
                    size={16}
                  />
                  <Text size="$sm" color="$info1">
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="three">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Dr. Edward M Jenner</Text>
                  <Text fontWeight="700">$25.00</Text>
                </View>
                <Text size="$sm">Date of Service 10/30/22</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$info1"
                    size={16}
                  />
                  <Text size="$sm" color="$info1">
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
          <Checkbox value="four">
            <Card>
              <Card.Section>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                  }}
                >
                  <Text fontWeight="700">Odin Medical Group</Text>
                  <Text fontWeight="700">$32.74</Text>
                </View>
                <Text size="$sm">Date of Service 12/9/22</Text>
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'left',
                  }}
                >
                  <IconSymbol
                    icon="info"
                    variant="outlined"
                    color="$info1"
                    size={16}
                  />
                  <Text size="$sm" color="$info1">
                    Claim Information
                  </Text>
                </View>
              </Card.Section>
            </Card>
          </Checkbox>
        </CheckboxGroup>
      </View>
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={CheckboxGroup}
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'value',
      type: 'array',
      description:
        'Array that holds the checkbox value when the isChecked prop set to true',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the checkboxes. If true, all checkboxes will be disabled',
    },
    {
      name: 'hideLabel',
      type: 'boolean',
      description: 'Flag to hide label',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the checkbox group component',
    },
    {
      name: 'align',
      type: '"left" | "right',
      description: 'The side the checkboxes in the group will be aligned to',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={CheckboxGroup.SelectAll}
  rows={[
    {
      name: 'label',
      type: 'string',
      description: 'Label of the SelectAll checkbox',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the SelectAll component',
    },
  ]}
  inherits={[{ name: 'Checkbox', link: '/mobile/ui/checkbox' }]}
/>
```

```jsx render
<Docs.ClassesTable
  of={CheckboxGroup.SelectAll}
  rows={[
    {
      name: 'checkbox-group-select-all-root',
      description: 'Select All checkbox root element',
    },
    {
      name: 'checkbox-group-select-all-checkbox',
      description: 'Select All checkbox element',
    },
  ]}
  inherits={[{ name: 'Checkbox', link: '/mobile/ui/checkbox' }]}
/>
```

</Tab>

---
id: chip
category: Data Display
title: Chip
description: Chips are clickable, and used for filtering and selections.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=11953-60547&t=N5JdMpNlL65N19qO-0
---

<Tab label="Overview">

```jsx
import { Chip } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
    component: 'Chip',
    inputs: [
      {
        prop: 'children',
        type: 'string',
      },
      {
        prop: 'isDisabled',
        type: 'boolean',
      },
      {
        prop: 'isClosable',
        type: 'boolean',
      },
      {
        prop: 'isTag',
        type: 'boolean',
      },
            {
        prop: 'isChecked',
        type: 'boolean',
      },
    ],
  };

<Chip>Chip</Chip>;
```

## useState

Pass the value from the `useState` hook to the `isChecked` prop to set the checked state of the chip.

```jsx live
() => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <Layout.Stack>
      <Chip isChecked={isChecked} onChange={() => setIsChecked(!isChecked)}>
        Chip
      </Chip>
    </Layout.Stack>
  );
};
```

## Group

Group has three variants: `wrap`, `scroll` and `fit`. The `wrap` variant is the default.

### Wrap

Chips can be wrapped in a `Group`. When using this to group multiple chips together, a chip that is too long to stack horizontally wraps to the next line.
This variant allows any number of chips to be selected when each chip has an `isChecked` and `onChange`.

Alternatively, passing the state into the `Group` (and not individual chips) will allow only one chip to be selected at a time.

```jsx live
() => {
  const [isChecked, setIsChecked] = useState(false);
  const [isChecked2, setIsChecked2] = useState(false);
  const [isChecked3, setIsChecked3] = useState(false);
  const [isChecked4, setIsChecked4] = useState(false);

  return (
    <Chip.Group>
      <Chip isChecked={isChecked} onChange={() => setIsChecked(!isChecked)}>
        Default Chip
      </Chip>
      <Chip isChecked={isChecked2} onChange={() => setIsChecked2(!isChecked2)}>
        A long time ago in a galaxy far, far away
      </Chip>
      <Chip
        isChecked={isChecked3}
        onChange={() => setIsChecked3(!isChecked3)}
        icon={
          <IconSymbol
            icon="star"
            size={20}
            color={'$gray4'}
            title="star"
            isScreenReadable
          />
        }
      >
        A long time ago in a galaxy far, far away
      </Chip>
      <Chip isChecked={isChecked4} onChange={() => setIsChecked4(!isChecked4)}>
        Chip
      </Chip>
    </Chip.Group>
  );
};
```

### Scroll

This variant has a filter button for selection and the chips scroll horizontally.
Only one chip can be selected in this group. The `title` prop is used to display a title on the bottom sheet.

```jsx live
() => {
  const [val, setVal] = useState('one');

  return (
    <Layout.Group shrink>
      <Chip.Group
        value={val}
        onChange={setVal}
        variant="scroll"
        title="Example Scroll Variant"
      >
        <Chip value="one">Chip 1</Chip>
        <Chip value="two">Chip 2</Chip>
        <Chip value="three">Chip 3</Chip>
        <Chip value="four">Chip 4</Chip>
        <Chip value="five">Chip 5</Chip>
        <Chip value="six">Chip 6</Chip>
      </Chip.Group>
    </Layout.Group>
  );
};
```

### Fit

This variant does not scroll or have a filter button. The chips will fit the width of the parent container.

Like the wrap variant, multiple chips can be selected when each chip has an `isChecked` and `onChange`, and only one chip can be selected when the state is passed into the `Group` (as shown).

```jsx live
() => {
  const [val, setVal] = useState('one');

  return (
    <Chip.Group value={val} onChange={setVal} variant="fit">
      <Chip value="one">Chip 1</Chip>
      <Chip value="two">Chip 2</Chip>
      <Chip value="three">Chip 3</Chip>
    </Chip.Group>
  );
};
```

## Icons

Use the `icon` prop to pass in a specific Icon component. Icons should be 20px and given an accurate title to meet accessibility standards. Find further guidance on material icons in the [Material Icons Tab](/mobile/ui/icon-material/).

```jsx live
() => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <Chip
      isChecked={isChecked}
      onChange={() => setIsChecked(!isChecked)}
      icon={
        <IconSymbol
          icon="home"
          size={20}
          color={'$gray4'}
          title="home"
          isScreenReadable
        />
      }
    >
      Chip
    </Chip>
  );
};
```

## Dismissible Chips

Use the `isClosable` prop with the `onClose` function to allow a chip to be dismissed. The checked and pressed states are not enabled with a dismissible chip.

```jsx live
() => {
  const [shouldShow, setShouldShow] = useState(true);
  return (
    <Layout.Stack>
      {shouldShow && (
        <Chip isClosable onClose={() => setShouldShow(false)}>
          Close Me
        </Chip>
      )}
    </Layout.Stack>
  );
};
```

## Disabled

Use the `isDisabled` prop to disable a chip.

```jsx live
<Chip
  icon={
    <IconSymbol
      icon="home"
      size={20}
      color={'$gray4'}
      title="home"
      isScreenReadable
    />
  }
  isDisabled={true}
>
  Disabled Chip
</Chip>
```

## Tag

Use the `isTag` prop to create a non-clickable chip.

```jsx live
<Chip isTag={true}>Tag</Chip>
```

## Width

Chips do not wrap if the text gets longer than the width of the parent container. Instead, the text will truncate.

```jsx live
() => {
  const [isChecked, setIsChecked] = useState(false);
  return (
    <Box width="40%" color={'$primary2'}>
      <Chip
        isChecked={isChecked}
        onChange={() => setIsChecked(!isChecked)}
        icon={
          <IconSymbol
            icon="flight"
            size={20}
            color={'$gray4'}
            title="plane"
            isScreenReadable
          />
        }
      >
        A long time ago in a galaxy far, far away
      </Chip>
    </Box>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Chip}
  rows={[
    {
      name: 'icon',
      type: 'node',
      description: 'Adds an icon to the Chip component',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The text to be input into the Chip component',
    },
    {
      name: 'isClosable',
      type: 'boolean',
      description:
        'Adds a close icon to the Chip component. Use with the onClose function to dismiss the chip',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Disables a chip, making it unusable and un-clickable',
      default: 'false',
    },
    {
      name: 'isTag',
      type: 'boolean',
      description: 'Creates a tag. A smaller, non-clickable version of chip',
      default: 'false',
    },
    {
      name: 'isChecked',
      type: 'boolean',
      description: 'Flag to check the chip and enable selected border',
      default: 'false',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the close button is pressed',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the chip is pressed',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Value of the chip',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Chip}
  rows={[
    {
      name: 'chip-root',
      description: 'Chip root element',
    },
    {
      name: 'chip-label',
      description: 'Chip label element',
    },
    {
      name: 'chip-close-button',
      description: 'Close icon container ',
    },
    {
      name: 'chip-close-icon',
      description: 'Close icon',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Chip.Group}
  rows={[
    {
      name: 'variant',
      type: 'string',
      description:
        'The variant of the Chip Group. Options are wrap, scroll, and fit',
    },
    {
      name: 'value',
      type: 'string',
      description: 'The value of the selected chip',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the chip is pressed',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The chips to be input into the Chip Group component',
    },
    {
      name: 'title',
      type: 'string',
      description:
        'The title displayed on the bottomsheet in the scroll variant',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Chip.Group}
  rows={[
    {
      name: 'chip-group-root',
      description: 'Chip group root element',
    },
    {
      name: 'chip-group-tab-bar',
      description: 'Chip group tab bar element',
    },
    {
      name: 'chip-group-tab-bar-menu-button',
      description: 'Chip group tab bar menu button element',
    },
    {
      name: 'chip-group-tab-bar-menu-icon',
      description: 'Chip group tab bar menu icon element',
    },
    {
      name: 'chip-group-tab-bar-bottom-sheet',
      description: 'Chip group tab bar bottom sheet element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={Chip} rows={['Chip.remove', 'Chip.openMenu']} />
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Chip} keys={['chip']} />
```

</Tab>

---
id: coachmark-v2
category: CTA
title: V2Coachmark
description: A temporal message that provides contextual information or help.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/branch/A6jVbwG9VlIxsupoiwvRjs/v1.72.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1360-50043&m=dev
subDirectory: Coachmark/v2
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2Coachmark } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
  component: 'V2Coachmark',
  inputs: [
    {
        prop: 'offset',
        type: 'number',
    },
    {
        prop: 'heading',
        type: 'string',
    },
    {
        prop: 'children',
        type: 'string',
    },
    {
      prop: 'position',
      type: 'select',
      options: [
        { label: 'Above', value: 'above' },
        { label: 'Below', value: 'below' },
      ],
    },
    {
      prop: 'type',
      type: 'select',
      options: [
        { label: 'Dark', value: 'dark' },
        { label: 'Light', value: 'light' },
        { label: 'Light Border', value: 'light-border' },
      ],
      default:'light-border'
    },
    {
      prop: 'isVisible',
      type: 'boolean',
    },
    {
      prop: 'dismissible',
      type: 'boolean',
    },
  ]
}

<V2Coachmark
  offset={25}
  heading="Heading"
  position="below"
  type="light-border"
  isVisible
  dismissible
>
  Coachmark text
</V2Coachmark>
```

## Usage

Coachmarks always take the full width of the screen, should be placed with an 8px horizontal margin, and appear above or below the content it is pointing to. Content along the flat side should have a 16px margin from coachmark.

```jsx live
<V2Coachmark heading="Welcome">
  Coachmark text goes here, can be a 100 characters maximum and expands on no
  more than four lines
</V2Coachmark>
```

#### Coachmark Tour

For creating guided tours with multiple sequential coachmarks, use the [CoachmarkTour](./CoachmarkTour.mdx) component. CoachmarkTour extends V2Coachmark functionality while providing:

- **Automatic step management**: Handles navigation between multiple coachmarks
- **Built-in controls**: Provides Previous/Next buttons and step counting
- **Coachmark positioning**: Calculates the best position and offset for each coachmark based on available screen space
- **Tour state management**: Manages the overall tour lifecycle (start, skip, complete)

Use V2Coachmark for standalone contextual help and CoachmarkTour for multi-step guided experiences.

## Position

Use the `position` prop to display the notch either above or below the coachmark. The default is `"above"`.

```jsx live
<Layout.Stack grow space={0}>
  <V2Coachmark dismissible={false} position="above" heading="Above Position">
    This coachmark appears above the content pointing down
  </V2Coachmark>

  <Card padding={32}>
    <Text textAlign="center">Content</Text>
  </Card>

  <V2Coachmark dismissible={false} position="below" heading="Below Position">
    This coachmark appears below the content pointing up
  </V2Coachmark>
</Layout.Stack>
```

## Type Variants

Use the `type` prop to change the visual appearance of the coachmark. Available options are `"dark"`, `"light"`, and `"light-border"`. The default is `"light-border"`.

```jsx live
<Layout.Stack grow space={8}>
  <V2Coachmark type="dark" heading="Dark Type">
    Dark coachmark with white text
  </V2Coachmark>
  <V2Coachmark type="light" heading="Light Type">
    Light coachmark with dark text
  </V2Coachmark>
  <V2Coachmark type="light-border" heading="Light with Border">
    Light coachmark with dark text and visible border
  </V2Coachmark>
</Layout.Stack>
```

## Offset

Use the `offset` prop to change the horizontal position of the notch. It is determined as a percent from the left edge of the coachmark. The default is `50`.

```jsx live
() => {
  const [offset, setOffset] = useState(0);

  return (
    <Layout.Stack grow space={0}>
      <V2Coachmark
        heading={`Custom Offset: ${offset}%`}
        offset={offset}
        dismissible={false}
      >
        The notch can be adjusted to point to specific content. 0 sets the notch
        20px from the left and 100 sets the notch 20px from the right.
      </V2Coachmark>
      <SegmentedControls value={offset} onChange={setOffset}>
        <SegmentedControls.Tab label="0" value={0} />
        <SegmentedControls.Tab label="25" value={25} />
        <SegmentedControls.Tab label="50" value={50} />
        <SegmentedControls.Tab label="75" value={75} />
        <SegmentedControls.Tab label="100" value={100} />
      </SegmentedControls>
    </Layout.Stack>
  );
};
```

## Heading and Content

The V2Coachmark supports both a heading and body content. Use the `heading` prop for the title and pass the body content as `children`.

```jsx live
<V2Coachmark heading="Feature Introduction" type="light-border">
  This is the body content that provides additional details about the feature
  being highlighted.
</V2Coachmark>
```

## Footer Content

Use the `footer` prop to add custom footer content.

**Note:** For guided tours with multiple coachmarks, consider using the [CoachmarkTour component](./CoachmarkTour.mdx) which provides built-in navigation controls and step management.

```jsx live
() => {
  const [currentStep, setCurrentStep] = useState(1);

  const handleNext = () => {
    setCurrentStep(currentStep + 1);
  };
  const handlePrev = () => {
    setCurrentStep(currentStep - 1);
  };

  return (
    <Layout.Stack grow space={0}>
      <V2Coachmark
        isVisible={currentStep === 1}
        heading="Step 1: This coachmark includes footer navigation."
        position="above"
        dismissible={false}
        footer={
          <V2Coachmark.Footer
            currentStep={currentStep}
            totalSteps={3}
            onNext={() => handleNext()}
            onPrevious={() => handlePrev()}
            onComplete={() => setCurrentStep(1)}
          />
        }
      />

      <Card padding={16}>
        <Heading>Content Card 1</Heading>
      </Card>
      <Layout.Space />
      <Card padding={16}>
        <Heading>Content Card 2</Heading>
        <V2Coachmark
          heading={`Step ${currentStep}`}
          offset={currentStep === 2 ? 20 : 80}
          isVisible={currentStep !== 1}
          dismissible={currentStep === 3}
          footer={
            <V2Coachmark.Footer
              currentStep={currentStep}
              totalSteps={3}
              onNext={() => handleNext()}
              onPrevious={() => handlePrev()}
              onComplete={() => setCurrentStep(1)}
            />
          }
        >
          {`This coachmark is inside Content Card and is currently on step ${currentStep}.`}
        </V2Coachmark>
        <Layout.Group alignLayout="around" padding={16}>
          <Alert
            title="Card not activated!"
            description="Error alert description"
            variant="error"
            isCloseable={false}
          />
          <Alert
            title="Card activated!"
            description="Success alert description"
            isCloseable={false}
          />
        </Layout.Group>
      </Card>
    </Layout.Stack>
  );
};
```

## Dismissible

Use the `dismissible` prop to control whether the close button is shown. Set to `false` to hide the close button for non-dismissible coachmarks.

```jsx live
<>
  <V2Coachmark heading="Important Notice" type="dark" dismissible={false}>
    This coachmark cannot be dismissed by the user.
  </V2Coachmark>
  <V2Coachmark heading="Less Important Notice">
    This coachmark can be dismissed by the user.
  </V2Coachmark>
</>
```

## onClose

Use the `onClose` prop to handle the action when the close button is pressed. Built into V2Coachmark is a fade out animation.

```jsx live
() => {
  const [showCoachmark, setShowCoachmark] = useState(true);
  const handleClose = () => {
    setShowCoachmark(false);
    console.log('Coachmark closed');
  };
  return (
    <Layout.Stack grow>
      <Card
        padding={16}
        style={{
          alignItems: 'center',
        }}
      >
        <V2Coachmark
          offset={50}
          isVisible={showCoachmark}
          onClose={handleClose}
          heading="Closeable Coachmark"
        >
          Press the close button for coachmark to fade out.
        </V2Coachmark>
        <V2Button
          size="small"
          isDisabled={showCoachmark}
          onPress={() => setShowCoachmark(true)}
        >
          Show Coachmark
        </V2Button>
      </Card>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2Coachmark}
  rows={[
    {
      name: 'heading',
      type: 'string',
      description: 'The title or heading content of the coachmark',
    },
    {
      name: 'children',
      type: 'string | React.ReactNode',
      description: 'The text content or paragraph of the coachmark',
    },
    {
      name: 'position',
      type: '"above" | "below"',
      description: 'Places the notch above or below the coachmark',
      default: 'below',
    },
    {
      name: 'type',
      type: '"dark" | "light" | "light-border"',
      description: 'The visual variant of the coachmark',
      default: 'light',
    },
    {
      name: 'offset',
      type: 'number | string',
      description:
        'The horizontal position of the notch. Determined as a percent from the left edge of the coachmark component',
      default: 50,
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the close button is pressed',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to show or hide the coachmark',
      default: true,
    },
    {
      name: 'dismissible',
      type: 'boolean',
      description: 'Flag to show or hide the close button',
      default: true,
    },
    {
      name: 'footer',
      type: 'React.ReactNode',
      description: 'Footer content such as navigation buttons',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Coachmark}
  rows={[
    {
      name: 'coachmark-root',
      description: 'Coachmark root element',
    },
    {
      name: 'coachmark-text-wrapper',
      description: 'Wrapper for text content',
    },
    {
      name: 'coachmark-heading',
      description: 'Coachmark heading element',
    },
    {
      name: 'coachmark-paragraph',
      description: 'Coachmark paragraph content element',
    },
    {
      name: 'coachmark-close-button',
      description: 'Coachmark close button',
    },
    {
      name: 'coachmark-close-icon',
      description: 'Coachmark close icon',
    },
    {
      name: 'coachmark-notch',
      description: 'The pointer to content',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={V2Coachmark} rows={['close']} />
```

</Tab>
<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={V2Coachmark} keys={['coachmark']} />
```

</Tab>

---
id: coachmark
category: CTA
title: Coachmark
description: A temporal message that provides contextual information or help.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=39456-18059&mode=design&t=FXPtfscG0ClF0Tf2-0
sourcePath: Coachmark/v1
---

<Tab label="Overview">

```jsx
import { Coachmark } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
  component: 'Coachmark',
  inputs: [
    {
        prop: 'offset',
        type: 'number',
    },
    {
        prop: 'children',
        type: 'string',
    },
    {
      prop: 'orientation',
      type: 'select',
      options: [
        { label: 'top', value: 'top' },
        { label: 'bottom', value: 'bottom' },
      ],
    },
    {
      prop: 'colorScheme',
      type: 'select',
      options: [
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
      ],
    },
    {
      prop: 'isVisible',
      type: 'boolean',
    },
    {
      prop: 'showBorder',
      type: 'boolean',
    },
  ]
}

<Coachmark offset={50}>Coachmark text</Coachmark>

```

## Usage

Coachmarks always take the full width of the screen, should be placed with an 8px horizontal margin, and appear above or below the content it is pointing to. Content along the flat side should have a 16px margin from coachmark.

```jsx live
<Coachmark orientation="top" offset={50}>
  Coachmark text goes here, can be a 100 characters maximum and expands on no
  more than four lines
</Coachmark>
```

## Orientation

Use the `orientation` prop to display the notch either on the top or bottom of the coachmark. The default is `"top"`.

```jsx live
<Layout.Stack grow space={0}>
  <Coachmark orientation={'bottom'} offset={50}>
    Coachmark
  </Coachmark>
  <Card style={{ padding: 40 }}>
    <Text textAlign="center">Content below coachmark</Text>
  </Card>
</Layout.Stack>
```

## Offset

Use the `offset` prop to change the horizontal position of the notch. It is determined as a percent from the left edge of the coachmark. The default is `50`.

```jsx live
<Coachmark orientation={'top'} offset={30}>
  The notch should be center aligned with the element on the screen it refers
  to. 0 sets the notch 20px from the left and 100 sets the notch 20px from the
  right.
</Coachmark>
```

## onClose

Use the `onClose` prop to handle the action when the close button is pressed. Built into Coachmark is a fade out animation.

```jsx live
() => {
  const [showCoachmark, setShowCoachmark] = useState(true);
  const handleClose = () => {
    setShowCoachmark(false);
    console.log('Coachmark closed');
  };
  return (
    <Layout.Stack grow>
      <Card style={{ width: '100%', height: 100 }} />
      <Coachmark
        orientation={'top'}
        offset={50}
        isVisible={showCoachmark}
        onClose={handleClose}
      >
        Press the close button for coachmark to fade out. Any content below
        coachmark should have a slide up animation to fill the remaining space.
      </Coachmark>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Coachmark}
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'The title content of the coachmark',
    },
    {
      name: 'orientation',
      type: 'top | bottom',
      description: 'Places the notch at the top or bottom of the coachmark',
      default: 'top',
    },
    {
      name: 'offset',
      type: 'number',
      description:
        'The horizontal position of the notch. Determined as a percent from the left edge of the coachmark component',
      default: 50,
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the close button is pressed',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to show or hide the coachmark',
      default: true,
    },
    {
      name: 'showBorder',
      type: 'boolean',
      description:
        'Flag to show or hide border (only available for dark color scheme)',
      default: false,
    },
    {
      name: 'description',
      type: 'string',
      description: 'The description content of the coachmark',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Coachmark}
  rows={[
    {
      name: 'coachmark-root',
      description: 'Coachmark root element',
    },
    {
      name: 'coachmark-text',
      description: 'Coachmark Text element',
    },
    {
      name: 'coachmark-description',
      description: 'Coachmark description element',
    },
    {
      name: 'coachmark-close-button',
      description: 'Coachmark close button',
    },
    {
      name: 'coachmark-close-icon',
      description: 'Coachmark close icon',
    },
    {
      name: 'coachmark-notch',
      description: 'The pointer to content',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={Coachmark} rows={['close']} />
```

</Tab>

---
id: coachmark-tour
category: CTA
title: CoachmarkTour
description: A guided tour system that displays contextual coachmarks to walk users through multiple steps of an interface.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/branch/A6jVbwG9VlIxsupoiwvRjs/v1.72.0-App-Abyss-Global%E2%80%A8Component-Library?node-id=1360-50043&m=dev
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { CoachmarkTour } from '@abyss/mobile';
```

## Basic Usage

The CoachmarkTour system consists of two main components: `CoachmarkTour` (the provider) and `CoachmarkTour.Step` (wrapper for target elements). The tour displays V2Coachmarks in sequence to guide users through your interface.

**Important:** The `children` prop in `CoachmarkTour.Step` is different from `V2Coachmark`'s `children` prop. In `CoachmarkTour.Step`, the `children` prop contains the target element to highlight, while the coachmark content should be passed via the `description` prop. This is unlike `V2Coachmark` where the `children` prop contains the coachmark content itself.

```jsx live
() => {
  const [isStarted, setIsStarted] = useState(false);

  return (
    <CoachmarkTour
      isStarted={isStarted}
      onSkip={() => setIsStarted(false)}
      onComplete={() => setIsStarted(false)}
    >
      <Layout.Stack space={16}>
        <V2Button isDisabled={isStarted} onPress={() => setIsStarted(true)}>
          Start Tour
        </V2Button>
        <Layout.Group>
          <CoachmarkTour.Step
            stepId={1}
            heading="Step Heading"
            description="This card demonstrates how coachmarks highlight specific content"
          >
            <Text>Coachmark Tour Target Content</Text>
          </CoachmarkTour.Step>
        </Layout.Group>
      </Layout.Stack>
    </CoachmarkTour>
  );
};
```

## Tour Navigation

This example demonstrates navigation controls, multiple steps, position control, and different coachmark types. Users can skip the tour at any time using the close button, and callbacks are provided for navigation events.

```jsx live
() => {
  const [isStarted, setIsStarted] = useState(false);
  const [tourType, setTourType] = useState('light-border');

  return (
    <CoachmarkTour
      type={tourType}
      isStarted={isStarted}
      onSkip={() => {
        console.log('Tour skipped');
        setIsStarted(false);
      }}
      onNext={(stepId) => console.log(`Moving to step ${stepId}`)}
      onPrevious={(stepId) => console.log(`Going back to step ${stepId}`)}
      onComplete={() => {
        console.log('Tour completed');
        setIsStarted(false);
      }}
    >
      <Layout.Stack space={16} grow>
        <SegmentedControls value={tourType} onChange={setTourType}>
          <SegmentedControls.Tab label="Light Border" value="light-border" />
          <SegmentedControls.Tab label="Light" value="light" />
          <SegmentedControls.Tab label="Dark" value="dark" />
        </SegmentedControls>

        <CoachmarkTour.Step
          stepId={1}
          heading="Tour Controls"
          description={`This ${tourType} tour uses the ${tourType} variant. Use the navigation buttons to move through steps.`}
        >
          <V2Button onPress={() => setIsStarted(true)} isDisabled={isStarted}>
            Start Tour
          </V2Button>
        </CoachmarkTour.Step>
        <CoachmarkTour.Step
          stepId={2}
          heading="Above Position"
          description="This coachmark appears above the target element"
          position="above"
        >
          <Card padding={16}>
            <Grid columns={3} span={1} space={12}>
              {Array.from({ length: 3 }).map((_, i) => {
                const stepId = i + 3;
                return (
                  <Grid.Col key={i}>
                    <CoachmarkTour.Step
                      key={stepId}
                      stepId={stepId}
                      heading={`Grid Item ${stepId - 2}`}
                      description="Each coachmark points to a different grid item, demonstrating automatic positioning."
                    >
                      <Card
                        style={{
                          padding: 12,
                          backgroundColor: `$pastel${stepId}`,
                          alignItems: 'center',
                        }}
                      >
                        <Text>Item {stepId - 2}</Text>
                      </Card>
                    </CoachmarkTour.Step>
                  </Grid.Col>
                );
              })}
            </Grid>
          </Card>
        </CoachmarkTour.Step>

        <CoachmarkTour.Step
          stepId={6}
          heading="Below Position"
          description="This final step demonstrates the below position and completes our tour."
          position="below"
        >
          <Card padding={16} style={{ backgroundColor: '$pastel6' }}>
            <Text>Step 6: Final Step (Below)</Text>
          </Card>
        </CoachmarkTour.Step>
      </Layout.Stack>
    </CoachmarkTour>
  );
};
```

## Step Ordering

Steps are displayed in the order of their `stepId` regardless of their DOM order, giving you full control over the tour flow.

```jsx live
() => {
  const [isStarted, setIsStarted] = useState(false);

  return (
    <CoachmarkTour
      isStarted={isStarted}
      onSkip={() => setIsStarted(false)}
      onComplete={() => setIsStarted(false)}
    >
      <Layout.Stack space={16}>
        <V2Button onPress={() => setIsStarted(true)}>
          Start Ordered Tour
        </V2Button>

        <CoachmarkTour.Step
          stepId={3}
          heading="Third Step"
          description="This appears first in the DOM but third in the tour"
        >
          <Card padding={16} style={{ backgroundColor: '$pastel3' }}>
            <Text>DOM Order: 1st, Tour Order: 3rd</Text>
          </Card>
        </CoachmarkTour.Step>

        <CoachmarkTour.Step
          stepId={1}
          heading="First Step"
          description="This appears second in the DOM but first in the tour"
        >
          <Card padding={16} style={{ backgroundColor: '$pastel1' }}>
            <Text>DOM Order: 2nd, Tour Order: 1st</Text>
          </Card>
        </CoachmarkTour.Step>

        <CoachmarkTour.Step
          stepId={2}
          heading="Second Step"
          description="This appears third in the DOM but second in the tour"
        >
          <Card padding={16} style={{ backgroundColor: '$pastel2' }}>
            <Text>DOM Order: 3rd, Tour Order: 2nd</Text>
          </Card>
        </CoachmarkTour.Step>
      </Layout.Stack>
    </CoachmarkTour>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={CoachmarkTour}
  rows={[
    {
      name: 'isStarted',
      type: 'boolean',
      description: 'Controls whether the tour is active',
      default: 'false',
    },
    {
      name: 'type',
      type: "'dark' | 'light' | 'light-border'",
      description:
        'Visual variant applied to all coachmarks in the tour. Options: dark, light, light-border',
      default: 'light-border',
    },
    {
      name: 'dismissible',
      type: 'boolean',
      description: 'Whether coachmarks can be dismissed with close button',
      default: 'true',
    },
    {
      name: 'position',
      type: "'above' | 'below'",
      description:
        'Default position for all coachmarks (can be overridden per step). Options: above, below',
    },
    {
      name: 'initialStep',
      type: 'number',
      description: 'The step to start the tour from',
      default: 1,
    },
    {
      name: 'onNext',
      type: 'function',
      description: 'Callback fired when user clicks Next button',
    },
    {
      name: 'onPrevious',
      type: 'function',
      description: 'Callback fired when user clicks Previous button',
    },
    {
      name: 'onComplete',
      type: 'function',
      description: 'Callback fired when tour is completed',
    },
    {
      name: 'onSkip',
      type: 'function',
      description: 'Callback fired when tour is skipped via close button',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={CoachmarkTour.Step}
  rows={[
    {
      name: 'stepId',
      type: 'number',
      description:
        'Unique identifier that determines the order of steps in the tour',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'Title displayed in the coachmark',
    },
    {
      name: 'description',
      type: 'string | ReactNode',
      description: 'Content displayed in the coachmark body',
    },
    {
      name: 'position',
      type: "'above' | 'below'",
      description:
        'Preferred position for this step coachmark. Options: above, below',
    },
    {
      name: 'wrapperStyle',
      type: 'ViewStyle',
      description:
        'Style object applied to the wrapper around the target element',
    },
    {
      name: 'children',
      type: 'ReactElement',
      description:
        'The target element to highlight during this step (not the coachmark content)',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={CoachmarkTour}
  rows={[
    {
      name: 'coachmark-tour-root',
      description: 'Root container for the tour',
    },
    {
      name: 'coachmark-tour-element-wrapper',
      description: 'Wrapper element around the target component',
    },
  ]}
/>
```

</Tab>

---
id: container
category: Layout
title: Container
description: A responsive container component that adjusts padding based on screen size and safe area insets.
design: https://www.figma.com/design/pXUASUBRjlvl1ZEUVuqniE/Landscape-A11y?node-id=647-37364
---

<Tab label="Overview">

```jsx
import { Container } from '@uhg-abyss/mobile';
```

The `Container` adjusts its padding based on the following rules:

- **Small Screens (< 480px):** Minimum padding of 16px or the safe area inset, whichever is larger.
- **Medium Screens (480px - 1023px):** Minimum padding of 44px or the safe area inset, whichever is larger.
- **Large Screens (> 1024px):** Padding is calculated dynamically based on the screen width and safe area insets.

## Usage

```jsx live
() => {
  return (
    <Container>
      <Grid columns={8} space={8}>
        {Array.from({ length: 24 }).map((span, index) => {
          return (
            <Grid.Col key={index} span={1}>
              <Box width="100%" />
            </Grid.Col>
          );
        })}
      </Grid>
    </Container>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Container}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Content to be rendered inside the container.',
    },
  ]}
/>
```

</Tab>

---
id: date-input
category: Forms
title: DateInput
description: Capture date input from user.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=18955-105856&t=YLpsLvAcbJ0Le6G5-0
---

<Tab label="Overview">

```jsx
import { DateInput } from '@uhg-abyss/mobile';
```

Important Note: The scrolling picker portion of this component is currently NOT accessible. The input box is accessible and can be used to enter a date or time with the keyboard.
When a screen reader is active, the button to activate the picker will be hidden.

## Usage

The `DateInput` component allows users to select a date or time from a picker. The picker will display a calendar for date selection and a time picker for time selection.
The time picker is an internal component, but [Calendar](/mobile/ui/calendar) is a separate component that can be used independently.

### Keyboard Entry

Users can enter the date or time with the native keyboard by pressing the input box. The date or time entered can be read from the `value` prop. Use the `onSubmit` prop to handle the action when the submit key is pressed.
The date input will not accept an entry if it is not in the format of `MM/DD/YYYY` with leading zeros. The time input will not accept an entry if it is not in 12-hour `hh:mm AM/PM` format with leading zeros.

## useState

The `useState` hook gets values from the component state. A date value is required and will be displayed in the input box and as the selected date or time on the picker.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
    />
  );
};
```

## Mode

Use the `mode` prop to define the type of picker. The default mode is set to `"date"`

### Date

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
    />
  );
};
```

### Time

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="time"
      label="Select a Date"
      value={date}
      onChange={setDate}
    />
  );
};
```

## Label

Use the `label` prop to display a label above the input menu.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Enter your birthday: "
      value={date}
      onChange={setDate}
    />
  );
};
```

## Help Content

The `helpContent` prop is used to display a help icon in the top right of the container, which will display the provided content in a BottomSheet when pressed.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      helpContent="This is some text used to explain something to the user, but is too long to be hint text."
    />
  );
};
```

## Required

Use the `isRequired` prop to display an asterisk next to the label.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      isRequired
    />
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the date picker.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      isDisabled
    />
  );
};
```

## Messages

Use the `errorMessage` and `successMessage` props to display a custom error or success message below the menu.

```jsx live
() => {
  const [date, setDate] = useState(new Date());
  const errorMessage = useRef(true);
  const successMessage = useRef(false);

  const handleChange = (newDate) => {
    if (newDate) {
      errorMessage.current = false;
      successMessage.current = true;
    } else {
      errorMessage.current = true;
      successMessage.current = false;
    }
    setDate(newDate);
  };
  return (
    <DateInput
      mode="date"
      label="Select a Date"
      isRequired
      successMessage={successMessage.current ? 'great pick' : null}
      errorMessage={errorMessage.current ? 'please select a date' : null}
      value={date}
      onChange={handleChange}
    />
  );
};
```

## Excluded Dates

To exclude dates use the `excludeDate` prop. Set a function that receives date as an argument and returns true if date should be disabled. For example, to disable weekends, check if the day is 0 or 6.

```jsx live
() => {
  const [date, setDate] = useState(new Date());

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      excludeDate={(date) => {
        return date.getDay() === 0 || date.getDay() === 6;
      }}
    />
  );
};
```

## Min/Max Date

### Date

Use the `minimumDate` and `maximumDate` props to set the min and max dates in the Calendar dropdown.

```jsx live
() => {
  const [date, setDate] = useState(new Date());
  const minDate = new Date();
  const maxDate = new Date();
  minDate.setFullYear(minDate.getFullYear() - 1);
  maxDate.setFullYear(maxDate.getFullYear() + 1);

  return (
    <DateInput
      mode="date"
      label="Select a Date"
      value={date}
      onChange={setDate}
      minimumDate={minDate}
      maximumDate={maxDate}
    />
  );
};
```

### Time

Use the `minimumDate` and `maximumDate` props to set the min and max times in the Time dropdown.

```jsx live
() => {
  const [date, setDate] = useState(new Date());
  const minDate = new Date();
  const maxDate = new Date();
  minDate.setHours(7);
  maxDate.setHours(19);

  return (
    <DateInput
      mode="time"
      label="Select a Time"
      value={date}
      onChange={setDate}
      minimumDate={minDate}
      maximumDate={maxDate}
    />
  );
};
```

## onInvalidEntry

Use the `onInvalidEntry` prop to handle the date validation. The function returns an object
`{ value: Date, input: string, code: number, message: string }` where `value` is the Date instance of the user's attempted entry,
`input` is the string submitted by the user, `code` indicates a custom code that references a specific error and
`message` describes the error.
The explanation of `code` is noted below:

- 0 - Indicates the input date is invalid.
- 1 - Indicates the input is before the minimum date.
- 2 - Indicates the input is after the minimum date.
- 3 - Indicates the input is a disabled date.

```jsx live
() => {
  const setFocus = useSetFocus();
  const inputRef = useRef();
  const [date, setDate] = useState(new Date());
  const [dateMessage, setDateMessage] = useState({
    success: '',
    error: '',
  });
  const minimumDate = new Date(2024, 0, 1);
  const maximumDate = new Date(2024, 2, 31);

  const handleInvalidEntry = ({ code, message }) => {
    setFocus(inputRef);
    if (code === 0) {
      setDateMessage({
        error: message,
        success: '',
      });
    } else if (code === 1) {
      setDateMessage({
        error: `${message}: ${minimumDate.toDateString()}`,
        success: '',
      });
    } else if (code === 2) {
      setDateMessage({
        error: `${message}: ${maximumDate.toDateString()}`,
        success: '',
      });
    } else if (code === 3) {
      setDateMessage({
        error: message,
        success: '',
      });
    }
  };
  return (
    <DateInput
      label="Date Input"
      ref={inputRef}
      successMessage={dateMessage.success}
      errorMessage={dateMessage.error}
      minimumDate={minimumDate}
      maximumDate={maximumDate}
      value={date}
      onChange={setDate}
      onInvalidEntry={handleInvalidEntry}
      mode="date"
      excludeDate={(date) => {
        return date.getDay() === 6;
      }}
    />
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={DateInput}
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'onInvalidEntry',
      type: 'function',
      description:
        'Callback fired on date entry validation. Returns the entered date value',
    },
    {
      name: 'value',
      type: 'Date',
      description: 'Value of the date input',
    },
    {
      name: 'maximumDate',
      type: 'Date',
      description: 'Specifies the maximum selectable day by a user',
    },
    {
      name: 'minimumDate',
      type: 'Date',
      description: 'Specifies the minimum selectable day by a user',
    },
    {
      name: 'mode',
      type: 'date | time',
      default: 'date',
      description:
        'Sets the mode of the date input to capture date or time entry',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label for date or time input field',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description:
        'Sets the error message to be displayed below the date input field',
    },
    {
      name: 'successMessage',
      type: 'string',
      description:
        'Sets the success message to be displayed below the date input field',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      default: 'false',
      description:
        'Flag to enable/disable the picker. If true, the picker will be disabled',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description:
        'Visual indicator that a selection is required. If true, an asterisk will be displayed next to the label',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Sets the accessibility label for the help button',
    },
    {
      name: 'excludeDate',
      type: 'Function',
      description: 'Callback fired to exclude dates from the calendar',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={DateInput}
  rows={[
    {
      name: 'date-input-root',
      description: 'Root element',
    },
    {
      name: 'date-input-header',
      description: 'Header element',
    },
    {
      name: 'date-input-label',
      description: 'Label element',
    },
    {
      name: 'date-input',
      description: 'Date input element',
    },
    {
      name: 'date-input-hint-text',
      description: 'Hint text element',
    },
    {
      name: 'date-input-format-text',
      description: 'Format text element',
    },
    {
      name: 'date-input-icon-button',
      description: 'The date or time picker button',
    },
    {
      name: 'date-input-icon',
      description: 'The date or time picker icon',
    },
    {
      name: 'date-input-message',
      description: 'Message element',
    },
    {
      name: 'date-input-bottom-sheet',
      description: 'Bottom sheet element',
    },
    {
      name: 'date-input-help-button',
      description: 'Help button',
    },
    {
      name: 'date-input-help-modal',
      description: 'Help modal',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
    {
      name: 'date-input-calendar',
      description: 'Calendar',
    },
    {
      name: 'date-input-time-picker',
      description: 'Time picker',
    },
  ]}
  inherits={[{ name: 'Calendar', link: '/mobile/ui/calendar' }]}
/>
```

```jsx render
<Docs.TranslationTable
  of={DateInput}
  rows={[
    'help',
    'close',
    'error',
    'success',
    'selected',
    'TimePicker.hours',
    'TimePicker.minutes',
    'TimePicker.AM',
    'TimePicker.PM',
    'Calendar.prevMonth',
    'Calendar.nextMonth',
    'Calendar.year',
    'Calendar.today',
    'Calendar.inProgress',
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={DateInput}
  keys={['input-header', 'input-container', 'input-message', 'input-field']}
/>
```

</Tab>

---
id: default-props-provider
category: Providers
title: DefaultPropsProvider
description: An Abyss component that provides default props to all its child components.
---

```jsx
import { DefaultPropsProvider } from '@uhg-abyss/mobile/ui/DefaultPropsProvider';
```

```jsx render
<Alert
  title="Note:"
  description="This provider only applies to components from the V2 suite and those without a newer version. It will not affect V1 components."
  variant="info"
  isCloseable={false}
/>
```

## Overview

`DefaultPropsProvider` lets you set default props for multiple components in one place. This helps keep your app consistent and reduces repeated code.

```jsx
<DefaultPropsProvider
  components={{
    [componentName]: {
      // ...default props for the component
    },
    // Example:
    V2Button: {
      variant: 'destructive',
    },
  }}
>
  {/* ...children */}
</DefaultPropsProvider>
```

## How it Works

The provider uses React Context to pass default props down to child components. Each component uses the `useDefaultProps` hook internally to merge the provider's defaults with its own props, with component-specific props taking precedence.

Prop Priority (highest to lowest):

- Props passed directly to the component
- Default props from DefaultPropsProvider
- Component's built-in default props

## Opting Out of Defaults

To opt out of the defaults, you can set the `disableDefaultProviderProps` prop to `true` on the component. This will prevent the component from inheriting any default props set by the provider.

## V2Button

```jsx sandbox
<DefaultPropsProvider
  components={{
    V2Button: {
      icon: 'star',
      iconPosition: 'leading',
      variant: 'destructive',
    },
  }}
>
  <Layout.Stack alignItems="center">
    <V2Button>Provider defaults</V2Button>
    <V2Button variant="neutral">Provider defaults with color override</V2Button>
    <V2Button disableDefaultProviderProps>
      Opt out of provider defaults
    </V2Button>
  </Layout.Stack>
</DefaultPropsProvider>
```

---
id: divider
category: Layout
title: Divider
description: Used to add visual or semantic separation between content.
design: https://www.figma.com/design/wCMblLsq9TxAQvKzY3EfCt/v1.61.0-App-Abyss-UHC-Component-Library?node-id=65731-2323&p=f&t=5FIU5wnT0w5NeJW3-0
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { Divider } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Divider',
  inputs: [
    {
      prop: 'orientation',
      type: 'select',
      options: [
        { label: 'horizontal', value: 'horizontal' },
        { label: 'vertical', value: 'vertical' },
      ],
      defaultValue: 'horizontal'
    },
    {
      prop: 'margin',
      type: 'string',
      default: '$sm',
    },
    {
      prop: 'height',
      type: 'string',
    },
    {
      prop: 'width',
      type: 'string',

    },
    {
      prop: 'color',
      type: 'string',
      defaultValue: '$divider.color.surface.thin'
    },
  ]
}

<View style={{ height: '320px' }}>
  <Divider />
</View>
```

## Usage

```jsx live
() => {
  const VerticalDivider = () => (
    <Divider orientation="vertical" height={20} color="$gray5" />
  );

  return (
    <Card
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '$gray1',
        height: '350px',
        padding: '50px',
      }}
    >
      <Layout.Stack alignItems="center" grow>
        <Heading offset={3}>Abyss Divider Component</Heading>
        <Divider orientation="horizontal" color="$gray5" />
        <Text>Add visual separation between content</Text>
        <Layout.Group>
          <Link size="small" href="#orientation">
            Orientation
          </Link>
          <VerticalDivider />
          <Link size="small" href="#width-and-height">
            Width
          </Link>
          <VerticalDivider />
          <Link size="small" href="#width-and-height">
            Height
          </Link>
          <VerticalDivider />
          <Link size="small" href="#color">
            Color
          </Link>
        </Layout.Group>
      </Layout.Stack>
    </Card>
  );
};
```

## Orientation

Use the `orientation` prop to adjust the orientation to either `horizontal` or `vertical`. The default setting is `horizontal`.

```jsx live
<Divider orientation="horizontal" />
```

```jsx live
<View style={{ height: '200px' }}>
  <Divider orientation="vertical" />
</View>
```

## Width, Height and Margin

Use the `width` and `height` props to set the desired sizing dimensions. Depending on the orientation, they default to
`2` or `100%` to create a thin line.

Use the `margin` prop to set the margin between the divider and the content it is separating. Default is `$sm`.

When `horizontal` orientation is selected the settings are applied as follows:

- `width` : determines the left-to-right length of the of the divider; default setting is `100%`
- `height` : determines the thickness of the divider; default setting is `2px`
- `margin`: sets the `marginVertical` property

```jsx live
<Divider orientation="horizontal" width={50} height={3} />
```

When `vertical` orientation is selected the settings are applied as follows:

- `width` : determines the thickness of the divider; default setting is `2px`
- `height` : determines the top-to-bottom length of the of the divider; default setting is `100%`
- `margin`: sets the `marginHorizontal` property

```jsx live
<View style={{ height: '50px' }}>
  <Divider orientation="vertical" height={50} width={3} />
</View>
```

## Color

Use the `color` property to set the color of the divider. The two color tokens fit Abyss design guidelines for thin and thick dividers respectively. The default is set to `thin`.

```jsx live
() => {
  return (
    <View>
      <Divider />
      <Divider color="$primary1" />
      <Divider color="$divider.color.surface.thick" height={24} />
    </View>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Divider}
  rows={[
    {
      name: 'orientation',
      type: "'horizontal' | 'vertical'",
      description: 'The orientation of the divider',
      default: 'horizontal',
    },
    {
      name: 'color',
      type: 'string',
      description: 'The color of the divider',
      default: '$divider.color.surface.thin',
    },
    {
      name: 'margin',
      type: 'number | string',
      description: 'Margin between the divider and surrounding elements',
      default: '$sm',
    },
    {
      name: 'width',
      type: 'number | string',
      description: 'The width of the divider',
    },
    {
      name: 'height',
      type: 'number | string',
      description: 'The height of the divider',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Divider}
  rows={[
    {
      name: 'divider-root',
      description: 'Divider root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Color

Decorative only component -- does not need to meet minimum contrast ratio.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Divider} keys={['divider']} />
```

</Tab>

---
id: donut-chart-v2
category: Data Viz
title: V2DonutChart
description: A graphical representation technique that displays data in a circular-shaped graph.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=20095-102112
subDirectory: DonutChart/v2
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2DonutChart } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'V2DonutChart',
  inputs: [
    {
     prop: 'progress',
     type: 'number',
     defaultValue: 20
    },
    {
      prop: 'size',
      type: 'number',
      defaultValue: 40
    },
    {
      prop: 'animationDuration',
      type: 'number',
      defaultValue: 500
    },
    {
      prop: 'color',
      type: 'string',
      defaultValue: '$donut-chart.color.surface.container.green'
    },
  ],
}

<V2DonutChart />
```

## Progress

The `progress` prop determines how far the accumulator will move. The prop accepts numbers between `0` and `100`.
The default is `0`.

```jsx live
<Layout.Group grow wrap>
  <V2DonutChart progress={100} />
  <V2DonutChart progress={75} />
  <V2DonutChart progress={50} />
  <V2DonutChart progress={25} />
  <V2DonutChart progress={10} />
  <V2DonutChart progress={0} />
</Layout.Group>
```

## Animation Duration

The `animationDuration` prop is used to determine how long the donut chart takes to animate (milliseconds).
The default is `500`.

```jsx live
() => {
  const [animated, toggle] = useToggle(false);
  const progress = animated ? 40 : 0;
  return (
    <Layout.Group grow>
      <V2DonutChart progress={progress} animationDuration={500} />
      <V2DonutChart progress={progress} animationDuration={1000} />
      <V2DonutChart progress={progress} animationDuration={1500} />
      <V2DonutChart progress={progress} animationDuration={2500} />
      <V2DonutChart progress={progress} animationDuration={4000} />
      <Layout.Space space={20} />
      <Button onPress={toggle}>Start Animation</Button>
    </Layout.Group>
  );
};
```

## Color

The `color` prop is used to set the color for the donut chart.
The default is `$conditional7`.

```jsx live
<Layout.Group grow>
  <V2DonutChart progress={50} />
  <V2DonutChart
    progress={50}
    color="$donut-chart.color.surface.container.primary"
  />
  <V2DonutChart
    progress={50}
    color="$donut-chart.color.surface.container.info"
  />
  <Box color="$primary1">
    <V2DonutChart
      progress={50}
      color="$donut-chart.color.surface.container.white"
    />
  </Box>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2DonutChart}
  rows={[
    {
      name: 'progress',
      type: 'number',
      description:
        'The percentage of the bar that is filled. Value between 0 and 100',
      default: 0,
    },
    {
      name: 'size',
      type: 'number',
      description: 'Set the size of the donut chart',
      default: 40,
    },
    {
      name: 'animationDuration',
      type: 'number',
      description: 'Set the time it takes to animate the donut chart',
      default: 500,
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the donut chart',
      default: '$donut-chart.color.surface.container.green',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2DonutChart}
  rows={[
    {
      name: 'donut-chart-root',
      description: 'Donut chart root element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={V2DonutChart} rows={['DonutChart.percentage']} />
```

</Tab>

<Tab label="Accessibility">

Due to React Native limitations, this component enables keyboard access despite not having an interactive element. This component requires an accessibility label for use with a screen reader, which enables keyboard focus.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={V2DonutChart} keys={['donut-chart']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={DonutChart} type="class" />
```

```jsx render
<Docs.ComparisonTable of={DonutChart} type="props" />
```

</Tab>

---
id: donut-chart
category: Data Viz
title: DonutChart
description: A graphical representation technique that displays data in a circular-shaped graph.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=20095-102112
subDirectory: DonutChart/v1
---

<Tab label="Overview">

```jsx
import { DonutChart } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'DonutChart',
  inputs: [
    {
     prop: 'progress',
     type: 'number',
    },
    {
      prop: 'size',
      type: 'number',
    },
    {
      prop: 'animationDuration',
      type: 'number',
    },
  ],
}

<DonutChart progress={20} />
```

## Progress

The `progress` prop determines how far the accumulator will move. The prop accepts numbers between `0` and `100`.
The default is `0`.

```jsx live
<Layout.Group grow wrap>
  <DonutChart progress={100} />
  <DonutChart progress={75} />
  <DonutChart progress={50} />
  <DonutChart progress={25} />
  <DonutChart progress={10} />
  <DonutChart progress={0} />
</Layout.Group>
```

## Animation Duration

The `animationDuration` prop is used to determine how long the donut chart takes to animate (milliseconds).
The default is `1000`.

```jsx live
() => {
  const [animated, toggle] = useToggle(false);
  const progress = animated ? 40 : 0;
  return (
    <Layout.Group grow>
      <DonutChart progress={progress} animationDuration={500} />
      <DonutChart progress={progress} animationDuration={1000} />
      <DonutChart progress={progress} animationDuration={1500} />
      <DonutChart progress={progress} animationDuration={2500} />
      <DonutChart progress={progress} animationDuration={4000} />
      <Layout.Space space={20} />
      <Button onPress={toggle}>Start Animation</Button>
    </Layout.Group>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={DonutChart}
  rows={[
    {
      name: 'progress',
      type: 'number',
      description:
        'The percentage of the bar that is filled. Value between 0 and 100',
      default: '0',
    },
    {
      name: 'size',
      type: 'number',
      description: 'Set the size of the donut chart',
      default: '50',
    },
    {
      name: 'animationDuration',
      type: 'number',
      description: 'Set the time it takes to animate the donut chart',
      default: '1000',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={DonutChart}
  rows={[
    {
      name: 'donut-chart-root',
      description: 'Donut chart root element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={DonutChart} rows={['DonutChart.percentage']} />
```

</Tab>

<Tab label="Accessibility">

Due to React Native limitations, this component enables keyboard access despite not having an interactive element. This component requires an accessibility label for use with a screen reader, which enables keyboard focus.

</Tab>

---
id: expandable-text-block
category: Typography
title: ExpandableTextBlock
description: Displays a text block that can be expanded or collapsed.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/1Uml7LO8NTEWoBUAl4DTaG/Abyss-Mobile?type=design&node-id=18955-106021&t=DfyeirEdeaLCVZP9-0
---

<Tab label="Overview">

```jsx
import { ExpandableTextBlock } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'ExpandableTextBlock',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'numberOfLines',
      type: 'number',
    },
    {
      prop: 'showLess',
      type: 'boolean',
    },

  ]
}

<ExpandableTextBlock>Lorem ipsum dolor sit amet,  adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus et. Penatibus et magnis dis parturient montes. Diam in arcu cursus euismod quis viverra nibh cras pulvinar. Lorem mollis aliquam ut porttitor. </ExpandableTextBlock>
```

## Props and Usage

Children are required to use `ExpandableTextBlock`.

The `numberOfLines` prop is used to control the number of lines shown while `ExpandableTextBlock` is closed. The default for `numberOfLines` is 2.

The `showLess` prop is used to give the consumer the ability to shrink the `ExpandableTextBlock`. The default for `showLess` is `false`.

The `onLinkPress` prop can be used when pressing the more/less link needs a callback function. This can take in `expanded` as an argument.

```jsx live
() => {
  const lorum = `Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Consectetur adipiscing elit
      pellentesque habitant morbi tristique senectus et. Penatibus et magnis dis
      parturient montes. Diam in arcu cursus euismod quis viverra nibh cras
      pulvinar. Lorem mollis aliquam ut porttitor. Mauris augue neque gravida in
      fermentum et sollicitudin ac. Ultrices tincidunt arcu non sodales neque
      sodales ut etiam. In hac habitasse platea dictumst. In dictum non
      consectetur a erat nam at lectus. Sed nisi lacus sed viverra tellus in hac
      habitasse platea. Vitae ultricies leo integer malesuada nunc vel risus
      commodo viverra. Sed elementum tempus egestas sed sed risus pretium quam.
      Tellus id interdum velit laoreet id donec ultrices.`;

  return (
    <>
      <ExpandableTextBlock numberOfLines={3}>{lorum}</ExpandableTextBlock>
      <Layout.Space />
      <ExpandableTextBlock
        showLess
        numberOfLines={2}
        onLinkPress={({ expanded }) => {
          console.log(
            `The text block is now ${expanded ? 'expanded' : 'collapsed'}.`
          );
        }}
      >
        {lorum}
      </ExpandableTextBlock>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={ExpandableTextBlock}
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'The text to be displayed',
    },
    {
      name: 'onLinkPress',
      type: 'function',
      description: 'Callback fired when more/less button is pressed',
    },
    {
      name: 'numberOfLines',
      type: 'number',
      description: 'The number of lines to be displayed while collapsed',
    },
    {
      name: 'showLess',
      type: 'boolean',
      description: 'Flag to enable show less button while expanded',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the text',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the text',
    },
    {
      name: 'transform',
      type: 'string',
      description:
        'Reformat the text by changing whether letters are capitalized or not',
    },
    {
      name: 'fontWeight',
      type: 'string',
      description: 'Set the font weight of text',
    },
    {
      name: 'textAlign',
      type: '"left" | "center" | "right"',
      description: 'Specifies text alignment',
    },
    {
      name: 'fontFamily',
      type: 'string',
      description: 'Set the font family of text',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={ExpandableTextBlock}
  rows={[
    {
      name: 'expandable-text-block-root',
      description: 'Expandable text block main text',
    },
    {
      name: 'expandable-text-block-link',
      description: 'Expandable text block link text',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={ExpandableTextBlock}
  rows={['ExpandableTextBlock.more', 'ExpandableTextBlock.less']}
/>
```

</Tab>

<Tab label='Accessibility'>

## Dynamic Type

Text scales according to Abyss standards. Note that the `numberOfLines` prop also scales according to the font scale.

## Screen Reader Support

Accessibility focus may need to be reset to the start of the text paragraph after the "more" button is pressed. This can be done within your `onLinkPress` function.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={ExpandableTextBlock}
  keys={['expandable-text-block']}
/>
```

</Tab>

---
id: floating-action-button
category: Overlay
title: FAB
description: Hovers over content to execute a primary action in the application.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=1-431&t=O2ewq2cTM45gG9ki-0
---

<Tab label="Overview">

```jsx
import { FAB } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'FAB',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'isActive',
      type: 'boolean',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'size',
      type: 'string',
    },
  ]
}

<FAB>Text</FAB>
```

## Variants

Text can be added to the FAB as a child.

```jsx live
() => {
  return (
    <Grid columns={3} span="30%" space="$xs">
      <Grid.Col>
        <Layout.Stack>
          <Heading>Default</Heading>
          <FAB>Chat</FAB>
          <FAB />
        </Layout.Stack>
      </Grid.Col>
      <Grid.Col>
        <Layout.Stack>
          <Heading>Active</Heading>
          <FAB isActive>Chat</FAB>
          <FAB isActive />
        </Layout.Stack>
      </Grid.Col>
      <Grid.Col>
        <Layout.Stack>
          <Heading>Disabled</Heading>
          <FAB isDisabled>Chat</FAB>
          <FAB isDisabled />
        </Layout.Stack>
      </Grid.Col>
    </Grid>
  );
};
```

## Example

Here we are using react's useState hook to manage FAB's active state.

```jsx live
() => {
  const [isActive, setIsActive] = useState(false);
  return (
    <Card style={{ height: 651, width: 393 }}>
      <View style={{ padding: 20 }}>
        <Text size="$lg" fontWeight="$bold">
          App goes here with FAB in the bottom right
        </Text>
        {isActive ? <Text>The FAB is active</Text> : null}
      </View>
      <View style={{ position: 'absolute', right: 25, bottom: 25 }}>
        <FAB
          isActive={isActive}
          onPress={() => {
            console.log('FAB pressed from parent'), setIsActive(!isActive);
          }}
        >
          Chat
        </FAB>
      </View>
    </Card>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={FAB}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Text shown to the right of the chat icon',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      default: 'false',
      description: 'Flag to disable the FAB',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the FAB is pressed',
    },
    {
      name: 'isActive',
      type: 'boolean',
      default: 'false',
      description: 'Flag to toggle active state of the FAB',
    },
    {
      name: 'size',
      type: 'number',
      default: "'$FAB.sizing.all.icon'",
      description: 'Sets the size of the chat icon',
    },
    {
      name: 'icon',
      type: 'node',
      description: 'Sets a icon in the place of the chat icon',
    },
    {
      name: 'onChange',
      type: 'function',
      description:
        'Callback fired when the active state is triggered to change',
    },
    {
      name: 'placement',
      type: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right',
      description: 'Sets the placement of the FAB',
    },
    {
      name: 'icon',
      type: 'node',
      description: 'Sets a icon in the place of the chat icon',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={FAB}
  rows={[
    {
      name: 'fab-root',
      description: 'FAB root element',
    },
    {
      name: 'fab-content',
      description: 'FAB element',
    },
    {
      name: 'fab-label',
      description: 'FAB label',
    },
    {
      name: 'fab-icon',
      description: 'FAB icon',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={FAB} rows={['FAB.chat']} />
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={FAB} keys={['FAB']} />
```

</Tab>

---
id: filter-button
category: CTA
title: FilterButton
description: A button that serves as an entry point to filtering options.
design: https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-UHC-Abyss-Mobile-App?node-id=104-1483&t=5zdX8H00uo6BCkNJ-0
---

<Tab label="Overview">

```jsx
import { FilterButton } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'FilterButton',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'primary', value: 'primary' },
        { label: 'secondary-a', value: 'secondary-a' },
        { label: 'secondary-b', value: 'secondary-b' },
      ],
    },
  ],
}

  <FilterButton variant="primary"/>

```

## Label

Use the `label` prop to set the label of the FilterButton. The label can be a filter count or 'filter'. If there is no count, the secondary variants should have the label of 'filter' passed in.

```jsx live
() => {
  const [value, setValue] = useState([]);
  return (
    <Layout.Group space={36}>
      <CheckboxGroup align="left" value={value} onChange={setValue}>
        <CheckboxGroup.SelectAll label="Select All" />
        <Checkbox label="Filter 1" value="one" />
        <Checkbox label="Filter 2" value="two" />
        <Checkbox label="Filter 3" value="three" />
      </CheckboxGroup>
      <Layout.Stack space={8} grow>
        <FilterButton
          variant="primary"
          label={value.length || undefined}
          onPress={() => {
            console.log('primary FilterButton pressed');
          }}
        />
        <FilterButton
          variant="secondary-a"
          label={value.length}
          onPress={() => {
            console.log('secondary-a FilterButton pressed');
          }}
        />
        <FilterButton
          variant="secondary-b"
          label={value.length}
          onPress={() => {
            console.log('secondary-b FilterButton pressed');
          }}
        />
      </Layout.Stack>
    </Layout.Group>
  );
};
```

## Variant

Use the `variant` prop to change the style of the `FilterButton`. You can set the value to `'primary'`, `'secondary-a'`, and `'secondary-b'`. Please follow design guidelines for each variants use case.

```jsx live
<Layout.Stack space={16} grow>
  <Text fontWeight="$bold">Primary</Text>
  <AppBar
    title="Find a pharmacy"
    left={<IconSymbol icon="chevron_left" color="$primary2" />}
    right={
      <FilterButton
        variant="primary"
        onPress={() => {
          console.log('primary FilterButton pressed');
        }}
      />
    }
  />
  <Layout.Group>
    <Text fontWeight="$bold">Secondary A</Text>
    <FilterButton
      variant="secondary-a"
      onPress={() => {
        console.log('secondary-a FilterButton pressed');
      }}
    />
  </Layout.Group>
  <Layout.Group>
    <Text fontWeight="$bold">Secondary B</Text>
    <FilterButton
      variant="secondary-b"
      label="3"
      onPress={() => {
        console.log('secondary-b FilterButton pressed');
      }}
    />
  </Layout.Group>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={FilterButton}
  rows={[
    {
      name: 'label',
      type: 'string | number',
      description: 'The label of the filter button component',
    },
    {
      name: 'variant',
      type: "'primary' | 'secondary-a' | 'secondary-b'",
      description: 'Change the filter button style',
      default: 'primary',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the filter button is pressed',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={FilterButton}
  rows={[
    {
      name: 'filter-button-root',
      description: 'FilterButton root element',
    },
    {
      name: 'filter-button-label',
      description: 'FilterButton label element',
    },
    {
      name: 'filter-button-icon',
      description: 'FilterButton icon element',
    },
  ]}
/>
```

</Tab>

<!--
<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={FilterButton} keys={['filter-button']} />
```

</Tab>
-->

---
id: font-scale
category: Layout
title: FontScale
description: Used to layout UI elements conditionally by font size.
---

<Tab label="Overview">

```jsx
import { FontScale } from '@uhg-abyss/mobile';
```

## Usage

Used to conditionally display elements based on the device font scale. The condition is based on the `smallerThan` or `largerThan` props (or both of them at the same time).

```jsx live
<React.Fragment>
  <View style={{ flexDirection: 'row' }}>
    An icon will appear to the right when the window size is at least extra
    large:
    <FontScale largerThan="$xl">
      <IconSymbol icon="home" />
    </FontScale>
  </View>
  <View style={{ flexDirection: 'row' }}>
    An icon will appear to the right when the window size is less than extra
    large:
    <FontScale smallerThan="$xl">
      <IconSymbol icon="home" />
    </FontScale>
  </View>
  <View style={{ flexDirection: 'row' }}>
    An icon will appear to the right when the window size is between large and
    extra large:
    <FontScale smallerThan="$xl" largerThan="$lg">
      <IconSymbol icon="home" />
    </FontScale>
  </View>
</React.Fragment>
```

## Smaller Than

Use the `smallerThan` prop to specify a font scale that the device must be smaller than for the contents inside the FontScale to display.

```jsx live
<View style={{ flexDirection: 'row' }}>
  An icon will appear to the right when the font scale is less than 150%:
  <FontScale smallerThan={1.5}>
    <IconSymbol icon="home" />
  </FontScale>
</View>
```

## Larger Than

Use the `largerThan` prop to specify a font scale that the device must be greater than or equal to for the contents inside the FontScale to display.

```jsx live
<View style={{ flexDirection: 'row' }}>
  An icon will appear to the right when the window size is at greater than 90%:
  <FontScale largerThan={0.9}>
    <IconSymbol icon="home" />
  </FontScale>
</View>
```

## Preset Scale Values

As an alternative to using hardcoded number for `smallerThan` and `largerThan`, you can use preset scale values to ensure consistency across your app. (Scale values are taken from the app's theme configuration.) Possible values are `$xs`, `$sm`, `$md`, `$lg`, and `$xl`.

```jsx live
<View style={{ flexDirection: 'row' }}>
  An icon will appear to the right when the window size is at least the size of
  the $md breakpoint:
  <FontScale largerThan="$md">
    <IconSymbol icon="home" />
  </FontScale>
</View>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={FontScale}
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The element the group wraps',
    },
    {
      name: 'smallerThan',
      type: 'number | string',
      description:
        'The value that the font scale must be smaller than in order for the children to render',
    },
    {
      name: 'largerThan',
      type: 'number | string',
      description:
        'The value that the font scale must be greater than or equal to in order for the children to render',
    },
  ]}
/>
```

</Tab>

---
id: footer
category: Content
title: Footer
description: A footer is a component that appears at the bottom of the screen.
design: https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-UHC-Abyss-Mobile-App?node-id=104-2016&p=f&t=jLxszkqX1mcOC0WV-0
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { Footer } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Footer',
  inputs: [
    {
      prop: 'variant',
      type: 'select',
      defaultValue: 'nested',
      options: [
        { label: 'nested', value: 'nested' },
        { label: 'sticky', value: 'sticky' },
      ]
    },
    {
      prop: 'direction',
      type: 'select',
      defaultValue: 'vertical',
      options: [
        { label: 'vertical', value: 'vertical' },
        { label: 'horizontal', value: 'horizontal' },
      ]
    },
  ]
}

<Footer>
  <Button variant="primary">
    Agree
  </Button>
  <Button variant="secondary">
    Disagree
  </Button>
</Footer>
```

## Variant

Use the `variant` prop to set the variant of the footer. The footer can be `'nested'` or `'sticky'`.

```jsx live
<Layout.Stack grow>
  <Heading offset={5}>Nested Footer</Heading>
  <Footer variant="nested">
    <Button variant="primary">Agree</Button>
    <Button variant="secondary">Disagree</Button>
  </Footer>
  <Heading offset={5}>Sticky Footer</Heading>
  <Footer variant="sticky">
    <Button variant="primary">Agree</Button>
    <Button variant="secondary">Disagree</Button>
  </Footer>
</Layout.Stack>
```

## Direction

Use the `direction` prop to set the direction of the items in the footer. The footer should house
up to three buttons in its vertically staked variant and up to two button in its horizontally stacked variant.

```jsx live
<Layout.Stack grow>
  <Heading offset={5}>Horizontal Footer</Heading>
  <Footer direction="horizontal">
    <Button variant="primary">Agree</Button>
    <Button variant="secondary">Disagree</Button>
  </Footer>
  <Heading offset={5}>Vertical Footer</Heading>
  <Footer direction="vertical">
    <Button variant="primary">Agree</Button>
    <Button variant="secondary">Disagree</Button>
  </Footer>
</Layout.Stack>
```

## Header

Use the `header` prop to set the header of the footer.

```jsx live
<Footer
  header={
    <Layout.Stack grow>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Text>HSA Available Balance</Text>
        <Text>$1,763.20</Text>
      </View>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Text fontWeight="$bold">Payment Towards Balance</Text>
        <Text fontWeight="$bold">$426.20</Text>
      </View>
    </Layout.Stack>
  }
>
  <Button variant="primary">Continue</Button>
</Footer>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Footer}
  rows={[
    {
      name: 'children',
      type: 'React.ReactNode',
      description: 'The buttons to be placed inside the footer',
    },
    {
      name: 'direction',
      type: '"vertical" | "horizontal"',
      default: 'vertical',
      description: 'The direction the items in the footer should be laid out',
    },
    {
      name: 'header',
      type: 'React.ReactNode',
      description: 'Content placed at the top of the footer',
    },
    {
      name: 'variant',
      type: '"nested" | "sticky"',
      default: 'nested',
      description: 'The variant of the footer',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Footer}
  rows={[
    {
      name: 'footer-root',
      description: 'Footer root element',
    },
    {
      name: 'footer-header',
      description: 'Footer header wrapping element',
    },
  ]}
/>
```

</Tab>

---
id: form-provider
category: Providers
title: FormProvider
description: Adds form functionality to Abyss inputs.
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { FormProvider } from '@uhg-abyss/mobile';
```

## Usage

Use `FormProvider` along with the [useForm](/mobile/hooks/use-form) hook in order to better manage your forms and fully utilize the capabilities of form management within Abyss. To achieve this you will need to wrap all form fields and the submission button with the `FormProvider` component and provide state through usage of `useForm`.

Please see examples below for additional props to pass into the `FormProvider` and go to [useForm](/mobile/hooks/use-form) for detailed documentation on how to configure your forms and take advantage of all the available features.

```jsx live
() => {
  const form = useForm();

  const onSubmit = (data) => {
    console.log('data', data);
    // Do something on submit
  };

  return (
    <FormProvider state={form} onSubmit={onSubmit}>
      <Checkbox
        label="I agree to the Terms and Conditions"
        model="accept-terms"
        validations={{ required: true }}
      />
      <Layout.Space />
      <SelectInput
        label="Select List Usage"
        model="select-list"
        placeholder="Select List Form Provider"
        options={[
          { label: 'Option 1', value: '1' },
          { label: 'Option 2', value: '2' },
          { label: 'Option 3', value: '3' },
        ]}
        validations={{ required: true }}
      />
      <Button type="submit" size="small" style={{ marginTop: 8 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

</Tab>

---
id: global-app-process
category: Feedback
title: GlobalAppProcess
description: A type of notification message that communicates system status or background processes.
design: https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-UHC-Abyss-Mobile?node-id=931-196076&node-type=frame&t=ti8wesv8clRgQn1m-0
---

<Tab label="Overview">

```jsx
import { GlobalAppProcess } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'GlobalAppProcess',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'actionText',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'success', value: 'success' },
        { label: 'warning', value: 'warning' },
        { label: 'error', value: 'error' },
        { label: 'info', value: 'info' },
      ]
    },
    {
      prop: 'isVisible',
      type: 'boolean'
    },
  ]
}

<GlobalAppProcess label="Input Label Here" variant={'success'} isVisible={true}/>
```

## Label

Use the `label` prop to set the label of the global app process. Setting a label is required.

```jsx live
<GlobalAppProcess label="Loading" variant="info" />
```

## Variants

Use the `variant` property to set the color and icon of the `GlobalAppProcess`.
The options are `success`, `warning`, `error`, and `info`. All variants have the default icons shown below. `info` is the only variant with a built-in icon animation.

```jsx live
<Layout.Stack grow space={8}>
  <GlobalAppProcess label="Success" variant="success" />
  <GlobalAppProcess label="Warning" variant="warning" />
  <GlobalAppProcess label="Error" variant="error" />
  <GlobalAppProcess label="Info" variant="info" />
</Layout.Stack>
```

## Icon

Use the `icon` property to pass in a specific `Icon` component. Note that if the icon on the `info` variant is replaced it will not animate.

```jsx live
<GlobalAppProcess
  icon={<IconSymbol icon="search" color="white" size={20} />}
  label="Search Title"
  variant="info"
/>
```

## Button Text

Use the `actionText` prop to add a button to the right of the process banner. This will adjust the layout of the banner from centered to stretched.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(true);
  return (
    <GlobalAppProcess
      label="Location Confirmed"
      variant="success"
      isVisible={isVisible}
      actionText="close"
      onActionPress={() => {
        setIsVisible(false);
      }}
    />
  );
};
```

## onActionPress

Use the `onActionPress` property to handle the action when the button is pressed.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(true);
  return (
    <GlobalAppProcess
      variant="error"
      label="GlobalAppProcess With onActionPress Function"
      isVisible={isVisible}
      actionText="Press to close"
      onActionPress={() => {
        setIsVisible(false);
      }}
    />
  );
};
```

## isVisible

Use the `isVisible` prop to change the visibility of the process banner.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <Layout.Stack grow>
      <Button
        variant="secondary"
        size="small"
        onPress={() => {
          return setIsVisible(!isVisible);
        }}
        style={{ margin: '$sm' }}
      >
        Toggle Banners
      </Button>
      <GlobalAppProcess
        isVisible={isVisible}
        label="Warning"
        variant="warning"
      />
      <GlobalAppProcess isVisible={isVisible} label="Loading" variant="info" />
      <GlobalAppProcess isVisible={isVisible} variant="error" label="Error" />
      <GlobalAppProcess
        label="Success"
        variant="success"
        isVisible={isVisible}
      />
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={GlobalAppProcess}
  rows={[
    {
      name: 'label',
      type: 'string',
      description: 'Sets the label for the global app process',
    },
    {
      name: 'actionText',
      type: 'string',
      description: 'Sets the text for the global app process button',
    },
    {
      name: 'variant',
      default: 'success',
      type: "'info' | 'success' | 'error' | 'warning'",
      description: 'Change the global app process style',
    },
    {
      name: 'icon',
      type: 'ReactNode',
      description: 'Change the default icon',
    },
    {
      name: 'onActionPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      default: 'true',
      description: 'Flag to show or hide GlobalAppProcess',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={GlobalAppProcess}
  inherits={[{ name: 'Link', link: '/mobile/ui/link' }]}
  rows={[
    {
      name: 'global-app-process-root',
      description: 'GlobalAppProcess root element',
    },
    {
      name: 'global-app-process-style-wrapper',
      description: 'GlobalAppProcess style container',
    },
    {
      name: 'global-app-process-label',
      description: 'GlobalAppProcess label element',
    },
    {
      name: 'global-app-process-button',
      description: 'GlobalAppProcess button element',
    },
    {
      name: 'global-app-process-icon',
      description: 'GlobalAppProcess icon element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={GlobalAppProcess}
  keys={['global-app-process']}
/>
```

</Tab>

---
id: grid
category: Layout
title: Grid
description: Provides a brief message about the app processes.
---

<Tab label="Overview">

```jsx
import { Grid } from '@uhg-abyss/mobile';
```

## Space

Use the `space` prop to determine the amount of space between elements in the grid.

```jsx live
<Grid space={'$lg'}>
  <Grid.Col span="50%">
    <Box color="$tint3" />
  </Grid.Col>
  <Grid.Col span="50%">
    <Box color="$tint3" />
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$tint3" />
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$tint3" />
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$tint3" />
  </Grid.Col>
</Grid>
```

## Span

### Number

Regardless of viewport width, the span will remain the same for these columns. Change the span by using [column spans] of the parent container.

```jsx live
<Grid>
  <Grid.Col span={12}>
    <Box color="$tint3">
      <Heading offset={5}>12</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={3}>
    <Box color="$tint3">
      <Heading offset={5}>3</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={3}>
    <Box color="$tint3">
      <Heading offset={5}>3</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={3}>
    <Box color="$tint3">
      <Heading offset={5}>3</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={3}>
    <Box color="$tint3">
      <Heading offset={5}>3</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={6}>
    <Box color="$tint3">
      <Heading offset={5}>6</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span={6}>
    <Box color="$tint3">
      <Heading offset={5}>6</Heading>
    </Box>
  </Grid.Col>
</Grid>
```

### Percent

Regardless of viewport width, the span will remain the same for these columns. Change the span by using percentages of the parent container.

```jsx live
<Grid>
  <Grid.Col span="100%">
    <Box color="$tint3">
      <Heading offset={5}>100%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$tint3">
      <Heading offset={5}>33%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$tint3">
      <Heading offset={5}>33%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="33%">
    <Box color="$tint3">
      <Heading offset={5}>33%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$tint3">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$tint3">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$tint3">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$tint3">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
  <Grid.Col span="20%">
    <Box color="$tint3">
      <Heading offset={5}>20%</Heading>
    </Box>
  </Grid.Col>
</Grid>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Grid}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the grid component',
    },
    {
      name: 'columns',
      type: 'number',
      description: 'The number of columns in the grid',
      default: 12,
    },
    {
      name: 'space',
      type: 'number | string',
      description:
        'Determines the amount of space between elements in the grid',
      default: '$sm',
    },
    {
      name: 'span',
      type: 'number | string',
      description: 'Handles the span size of the grid',
      default: 12,
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Grid.Col}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the grid col component',
    },
    {
      name: 'span',
      type: 'number | string',
      description: 'Handles the span size of the column',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Grid}
  rows={[
    {
      name: 'grid',
      description: 'Grid root element',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Grid.Col}
  rows={[
    {
      name: 'grid-col-root',
      description: 'Grid column element',
    },
  ]}
/>
```

</Tab>

---
id: heading
category: Typography
title: Heading
description: Creates appropriately sized heading elements.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9470%3A32790
---

<Tab label="Overview">

```jsx
import { Heading } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Heading',
  inputs: [
    {
      prop: 'children',
      type: 'string',
      defaultValue: 'Heading',
    },
    {
      prop: 'offset',
      type: 'select',
      options: [
        { label: '1', value: '1' },
        { label: '2', value: '2' },
        { label: '3', value: '3' },
        { label: '4', value: '4' },
        { label: '5', value: '5' },
        { label: '6', value: '6' },
      ],
    },
    {
      prop: 'color',
      type: 'select',
      options: [
        { label: '$primary1', value: '$primary1' },
        { label: '$info1', value: '$info1' },
        { label: '$gray3', value: '$gray3' },
        { label: 'lightseagreen', value: 'lightseagreen' },
        { label: '#ff0000', value: '#ff0000' },
      ],
    },
    {
      prop: 'textAlign',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
  ]
}

<Heading>Heading</Heading>
```

## <b>Set Global Heading Font</b>

One of the limitations of our library is the inability to install fonts into applications. Because of this, we have reserved a special token, `$heading`, to be added in the createTheme function, which will add the font to all Heading components globally.

In the example below, the font 'UHCSerif' is set as the heading font and will now be applied to all Heading components.

```jsx
import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      heading: 'UHCSerif',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};
```

## Offset

If you want to have heading levels relative to the current level, you can provide an offset prop.
These are equivalent to using a heading element in HTML. A Heading with an offset of 1 would be the equivalent of an `<h1>`.
Headings 1-4 have a default color of `$primary1` and Headings 5 & 6 have a default color of `$black`.

You can use `offset={1|2|3|4|5|6}`.

```jsx live
<Layout.Stack alignItems="left">
  <Heading offset={1}>Heading 1</Heading>
  <Heading offset={2}>Heading 2</Heading>
  <Heading offset={3}>Heading 3</Heading>
  <Heading offset={4}>Heading 4</Heading>
  <Heading offset={5}>Heading 5</Heading>
  <Heading offset={6}>Heading 6</Heading>
</Layout.Stack>
```

## Level

Headings 5 and 6 have an optional property called `level` that allows you to use a lighter version of the text. The default is level 1, the heavier version. The level two prop makes the
heading lighter.

```jsx live
<Layout.Stack alignItems="left">
  <Heading offset={5} level={1}>
    Heading 5 (level 1)
  </Heading>
  <Heading offset={5} level={2}>
    Heading 5 (level 2)
  </Heading>
  <Heading offset={6} level={1}>
    Heading 6 (level 1)
  </Heading>
  <Heading offset={6} level={2}>
    Heading 6 (level 2)
  </Heading>
</Layout.Stack>
```

## Color

Use the `color` property to set the color of the text. The default is set to `$primary1`.

```jsx live
<Layout.Stack alignItems="left">
  <Heading>My Benefits</Heading>
  <Heading color="$error1">My Benefits</Heading>
  <Heading color="#FF00FF">My Benefits</Heading>
  <Heading color="blue">My Benefits</Heading>
</Layout.Stack>
```

## Text Align

Use the `textAlign` prop to change the alignment of the text. Options include `left`, `center` and `right`.
The default is set to `left`.

```jsx live
<Layout.Stack grow>
  <Heading textAlign="left">Left Aligned Heading</Heading>
  <Heading textAlign="center">Center Aligned Heading</Heading>
  <Heading textAlign="right">Right Aligned Heading</Heading>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Heading}
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'The text to be input into the heading component',
    },
    {
      name: 'offset',
      type: '1 | 2 | 3 | 4 | 5 | 6 ',
      description: 'The offset hierarchy of heading. 1 is <h1>, and so on',
      default: '1',
    },
    {
      name: 'textAlign',
      type: '"left" | "center" | "right"',
      description: 'Specifies text alignment of the heading text',
      default: 'left',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the heading text',
      default: 'Headings 1-4: "$primary1", Headings 5-6: "$black"',
    },
    {
      name: 'animated',
      type: 'boolean',
      description: 'Flag to make component animatable',
      default: 'false',
    },
    {
      name: 'level',
      type: '1 | 2',
      description:
        'Set the level of the heading. Used for offset 5 and 6 headings',
      default: '1',
    },
    {
      name: 'fontFamily',
      type: 'string',
      description: 'Set the font family of the heading',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Heading}
  rows={[
    {
      name: 'heading-root',
      description: 'Heading root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Heading} keys={['heading']} />
```

</Tab>

---
id: home-widget
category: Content
title: HomeWidget
description: A component of an interface, that enables a user to perform a function or access a service.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=12334-61355&t=hhJi0b2ytlH4Ftjo-0
---

<Tab label="Overview">

```jsx
import { HomeWidget } from '@uhg-abyss/mobile';
```

## HomeWidget Card Title & Background

Entering a value into the `title` prop will display a header with title and accompanying Background image when applicable.

You can customize the Background using the `headerBackground` prop.

```jsx live
() => {
  const CostIcon = styled(Image, {
    position: 'absolute',
    zIndex: -20,
    top: -100,
    right: -30,
    width: 550,
    height: 250,
  });

  const Cost = ({ children, label, number }) => {
    return (
      <Layout.Group wrap grow>
        <Layout.Stack alignItems="left">
          <Text fontWeight="$normal" lineHeight="$xs" size="$xs">
            {label}
          </Text>
          <Text fontWeight="$bold" lineHeight="$lg" size="$lg">
            ${number}
          </Text>
        </Layout.Stack>
        {children}
      </Layout.Group>
    );
  };

  return (
    <HomeWidget.Card
      title="Spending & Rewards"
      headerBackground={<CostIcon source="/mobile/homeWidget/costSVG.svg" />}
    >
      <HomeWidget
        color="$pastel3"
        textColor="$white"
        title="Members Account"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={600} />
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$pastel1"
        title="Walk it off"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Total Due" number={1043.43}></Cost>
      </HomeWidget>
      <HomeWidget
        color="$pastel2"
        title="HSA Account"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={1043.43} />
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$pastel4"
        title={`Reward`}
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={600} />
        <DonutChart progress={75} />
      </HomeWidget>
    </HomeWidget.Card>
  );
};
```

## HomeWidget Customization

A title can be added to `HomeWidget` via the `title` prop.

Content is added to `HomeWidget` with children. Any content added will be placed inside a horizontal flex container with justifyContent set to `space-between`. By default, content is placed underneath the title, but this can be changed via the `headerAlignment` prop.

The `color` prop is used to change the widget color. If a dark color is applied, the text color will adjust to `$white`, this can be overridden via the `titleColor` prop. Use the `activeColor` prop to set the pressed color. If nothing is passed the color will stay the same when pressed.

The title position can be adjusted via the `headerAlignment` prop, the title can either be above or below the widget content. The default for `headerAlignment` is `top`

A subtitle can be placed below the widget title via the `subtitle` prop.

```jsx live
() => {
  return (
    <HomeWidget.Card>
      <HomeWidget
        color="$tile.color.surface.container.rest.emphasis-1"
        activeColor="$tile.color.surface.container.active.emphasis-1"
        title="Walk it off"
        onPress={() => console.log('widget has been pressed')}
        subtitle="Sub-title"
      >
        <Layout.Stack alignItems="left">
          <Text fontWeight="$normal" lineHeight="$xs" size="$xs">
            Total Due
          </Text>
          <Text fontWeight="$bold" lineHeight="$lg" size="$lg">
            $1043.43
          </Text>
        </Layout.Stack>
      </HomeWidget>
      <HomeWidget
        color="$tile.color.surface.container.rest.emphasis-4"
        activeColor="$tile.color.surface.container.active.emphasis-4"
        title="Walk it off"
        onPress={() => console.log('widget has been pressed')}
      >
        <Layout.Stack alignItems="left">
          <Text fontWeight="$normal" lineHeight="$xs" size="$xs">
            Total Due
          </Text>
          <Text fontWeight="$bold" lineHeight="$lg" size="$lg">
            $1043.43
          </Text>
        </Layout.Stack>
      </HomeWidget>
      <HomeWidget
        color="$tile.color.surface.container.rest.emphasis-3"
        activeColor="$tile.color.surface.container.active.emphasis-3"
        title="Moved Header"
        onPress={() => console.log('widget has been pressed')}
        headerAlignment="bottom"
      >
        <IconBrand size={48} icon="home" />
      </HomeWidget>
    </HomeWidget.Card>
  );
};
```

## Widget Layout

`HomeWidget` will be laid out automatically when placed inside of `HomeWidget.Card`. The widgets will be laid out in a grid with two columns and will grow when given space.

`HomeWidget` can be made to occupy the entire width of the card by setting `span={2}`.

The widget title will wrap to be two lines if no notification is present, but only one line if a notification is present.

```jsx live
() => {
  return (
    <HomeWidget.Card>
      <HomeWidget
        color="$pastel3"
        title="Full width containing two children"
        onPress={() => console.log('widget has been pressed')}
      >
        <Layout.Stack alignItems="left">
          <Text fontWeight="$normal" lineHeight="$xs" size="$xs">
            Available
          </Text>
          <Text fontWeight="$bold" lineHeight="$lg" size="$lg">
            $600
          </Text>
        </Layout.Stack>
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$interactive4"
        title="Single widget without a card"
        onPress={() => console.log('widget has been pressed')}
      >
        <Layout.Stack alignItems="left">
          <Text color="$white" fontWeight="$normal" lineHeight="$xs" size="$xs">
            Available
          </Text>
          <Text color="$white" fontWeight="$bold" lineHeight="$lg" size="$lg">
            $425
          </Text>
        </Layout.Stack>
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$pastel1"
        title="Full width"
        span={2}
        onPress={() => console.log('widget has been pressed')}
      >
        <Layout.Stack alignItems="left">
          <Text fontWeight="$normal" lineHeight="$xs" size="$xs">
            Total Due
          </Text>
          <Text fontWeight="$bold" lineHeight="$lg" size="$lg">
            $1043.43
          </Text>
        </Layout.Stack>
      </HomeWidget>
    </HomeWidget.Card>
  );
};
```

## Custom containers

`HomeWidget` can also be used on its own or with a custom container. When standing alone, the `HomeWidget` will grow to full width of its container.

[Grid](/mobile/ui/grid) is recommended to control the layout when using a custom container.

```jsx live
() => {
  return (
    <Box color="$primary1">
      <Grid columns={2}>
        <Grid.Col span={1}>
          <HomeWidget
            color="$pastel4"
            title="Custom Container"
            onPress={() => console.log('widget has been pressed')}
            headerAlignment="bottom"
          >
            <IconBrand size={48} icon="home" />
          </HomeWidget>
        </Grid.Col>
        <Grid.Col span={1}>
          <HomeWidget
            color="$pastel3"
            title="Custom container"
            onPress={() => console.log('widget has been pressed')}
            headerAlignment="bottom"
          >
            <IconBrand size={48} icon="home" />
          </HomeWidget>
        </Grid.Col>
        <Grid.Col span={2}>
          <HomeWidget
            color="$pastel2"
            title="Custom container"
            onPress={() => console.log('widget has been pressed')}
          >
            <Layout.Stack alignItems="left">
              <Text fontWeight="$normal" lineHeight="$xs" size="$xs">
                Available
              </Text>
              <Text fontWeight="$bold" lineHeight="$lg" size="$lg">
                $600
              </Text>
            </Layout.Stack>
            <DonutChart progress={75} />
          </HomeWidget>
        </Grid.Col>
      </Grid>
    </Box>
  );
};
```

```jsx live
() => {
  return (
    <HomeWidget
      color="$primary1"
      title="Stand alone widget"
      onPress={() => console.log('widget has been pressed')}
    >
      <IconBrand size={48} icon="home" />
    </HomeWidget>
  );
};
```

## Example

```jsx live
() => {
  const CostIcon = styled(Image, {
    position: 'absolute',
    zIndex: -20,
    top: -100,
    right: -30,
    width: 550,
    height: 250,
  });

  const Cost = ({ children, label, number }) => {
    return (
      <Layout.Group wrap grow>
        <Layout.Stack alignItems="left">
          <Text fontWeight="$normal" lineHeight="$xs" size="$xs">
            {label}
          </Text>
          <Text fontWeight="$bold" lineHeight="$lg" size="$lg">
            ${number}
          </Text>
        </Layout.Stack>
        {children}
      </Layout.Group>
    );
  };

  const RemainingCost = ({ label, number }) => {
    return (
      <View style={{ flexDirection: 'column', flex: 1, paddingHorizontal: 5 }}>
        <Text fontWeight="$normal" lineHeight="$xs" size="$xs">
          {label}
        </Text>
        <Layout.Group
          style={{ flexGrow: 1, flexDirection: 'row', flexWrap: 'nowrap' }}
        >
          <Text
            fontWeight="$bold"
            lineHeight="$xs"
            size="$sm"
            color="$primary1"
          >
            ${number + ' '}
            <Text
              fontWeight="$medium"
              lineHeight="$sm"
              size="$sm"
              color="$gray3"
            >
              Remaining
            </Text>
          </Text>
        </Layout.Group>
        <Accumulator percentage={50} />
      </View>
    );
  };

  return (
    <HomeWidget.Card
      headerBackground={<CostIcon source="/mobile/homeWidget/costSVG.svg" />}
      style={{ padding: 6 }}
      title="Spending & Rewards"
    >
      <HomeWidget
        color="$interactive4"
        variant="small"
        title="Member Cards"
        onPress={() => console.log('widget has been pressed')}
      >
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            width: '100%',
          }}
        >
          <View>
            <Text color="$white" size="$xs" fontWeight="$bold">
              Medical / Rx
            </Text>
            <Text color="$white" size="$xs" fontWeight="$bold">
              Dental
            </Text>
            <Text color="$white" size="$xs" fontWeight="$bold">
              Vision
            </Text>
          </View>
          <Brandmark
            brand="uhc"
            size={28}
            affiliate="uhc"
            variant="u_mark"
            color="white"
          />
        </View>
      </HomeWidget>
      <HomeWidget
        color="$pastel2"
        title="Walk it off"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="This Month" number={551.23} />
      </HomeWidget>
      <HomeWidget
        color="$pastel1"
        title="HSA Account"
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={1043.43} />
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$pastel4"
        title={`Reward`}
        onPress={() => console.log('widget has been pressed')}
      >
        <Cost label="Available" number={600} />
        <DonutChart progress={75} />
      </HomeWidget>
      <HomeWidget
        color="$pastel3"
        title={`Rose's Plan Spending`}
        onPress={() => console.log('widget has been pressed')}
        subtitle="Medical In-Network"
      >
        <RemainingCost label="Deductible" number={300} />
        <RemainingCost label="out-of-pocket" number={300} />
      </HomeWidget>
    </HomeWidget.Card>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={HomeWidget}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The children of the widget',
    },
    {
      name: 'span',
      type: 'number',
      description: 'Sets the width of the widget',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the widget is pressed',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Defines the widget color',
      default: '$pastel1',
    },
    {
      name: 'activeColor',
      type: 'string',
      description: 'Defines the widget color when pressed',
    },
    {
      name: 'headerAlignment',
      type: 'top | bottom',
      description: 'Moves header above or below content',
      default: 'top',
    },
    {
      name: 'title',
      type: 'string',
      description: 'The title of the home widget',
    },
    {
      name: 'subtitle',
      type: 'string',
      description: 'Text displayed directly below the title',
    },
    {
      name: 'titleColor',
      type: 'function',
      description: 'The color of the title',
    },
    {
      name: 'notification',
      type: 'string',
      description: 'The notification of the home widget component',
    },
    {
      name: 'notificationColor',
      type: 'string',
      description: 'The color of the notification text',
      default: '$success1',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={HomeWidget.Card}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the home widget card',
    },
    {
      name: 'headerBackground',
      type: 'string',
      description: 'Sets the header background of the home widget card',
    },
    {
      name: 'title',
      type: 'string',
      description:
        'Title of the home widget card. If nothing is defined here, the title bar will be hidden',
    },
  ]}
  inherits={[{ name: 'Card', link: '/mobile/ui/card' }]}
/>
```

```jsx render
<Docs.ClassesTable
  of={HomeWidget}
  rows={[
    {
      name: 'home-widget-root',
      description: 'Widget container',
    },
    {
      name: 'home-widget-header-wrapper',
      description: 'Widget header container',
    },
    {
      name: 'home-widget-title-wrapper',
      description: 'Widget title container',
    },
    {
      name: 'home-widget-title',
      description: 'Widget title',
    },
    {
      name: 'home-widget-notification',
      description: 'Widget notification text',
    },
    {
      name: 'home-widget-subtitle',
      description: 'Widget subtitle text',
    },
    {
      name: 'home-widget-icon',
      description: 'Chevron on the right side of the widget',
    },
    {
      name: 'home-widget-content-wrapper',
      description: 'Widget header container',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={HomeWidget.Card}
  rows={[
    {
      name: 'home-widget-card-root',
      description: 'HomeWidget card root container',
    },
    {
      name: 'home-widget-card-header-wrapper',
      description: 'HomeWidget card header container',
    },
    {
      name: 'home-widget-card-title',
      description: 'HomeWidget card title',
    },
  ]}
  inherits={[{ name: 'Card', link: '/mobile/ui/card' }]}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

HomeWidget scales according to Abyss standards. Dynamic type causes some elements to reconfigure in a stacked format. Any [IconBrand](/mobile/brand/uhc/icon-brand/?tab=accessibility) should set `disableScaling={true}`. The internal chevron icon will only scale to 130%.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={HomeWidget.Card} keys={['widget-card']} />
```

```jsx render
<Docs.ComponentTokensTable of={HomeWidget} keys={['tile']} />
```

</Tab>

---
id: i18n-provider
category: Providers
title: I18nProvider
description: Used to provide i18n data to the application.
---

<Tab label="Overview">

```jsx
import { I18nProvider } from '@uhg-abyss/mobile/ui/I18nProvider';
```

## Usage

Abyss supports overriding the default i18n object by using the `I18nProvider` component. The `I18nProvider` component takes a `translations`
prop that is an object containing the translations to either override the default translations with or to provide custom translations. The
translations object for overrides will be in the following format:

```jsx
{
  [commonWord]: 'Translated Value',
  [componentName]: {
    [key]: 'Translated Value',
  },
}
```

THe `commonWord` key is used to override the default translations for common words used in Abyss component. The `componentName` key with an object
is for words within specific Abyss components that allow an additional scope to other keys. Below is an example of a few of the words in our default i18n object:

```jsx
{
  disabled: 'Disabled',
  submit: 'Submit',
  SearchBar: {
    clearText: 'Clear Text',
  },
  TextField: {
    clear: 'clear',
    charactersRemaining: '{{count}} characters remaining',
  },
}
```

When using the `t` function from the [useTranslate](/mobile/hooks/use-translate) hook or the [Translate](/mobile/ui/translate) component, the key will be in dotted
notation. For example, the key `'SearchBar.clearText'` will be used to get the value `'Clear Text'` from the i18n object.

Our default i18n object can be seen [here](https://github.com/uhc-tech/abyss/blob/main/packages/abyss-mobile/src/tools/i18n/translations/en.ts)

## Example

Let's use the [TextField](/mobile/ui/text-field) component as an example. The `TextField` component has a text block that
displays the remaining characters available to be typed in the text field when the `maxLength` prop is used.

```jsx render
() => {
  const [value, setValue] = useState('State Default Value');

  return (
    <View>
      <TextField
        label="Label"
        value={value}
        onChangeText={setValue}
        maxLength={500}
      />
      <View
        style={{
          alignItems: 'flex-end',
          right: 10,
          marginTop: 8,
          marginBottom: 16,
        }}
      >
        <IconSymbol icon="arrow_upward" size={48} color="$info1" />
      </View>
    </View>
  );
};
```

Internally, we use the `'TextField.charactersRemaining'` key to get value in our i18n object. This value can be overridden with
the `translations` prop in the `I18nProvider` component. Let's change the value of the `'TextField.charactersRemaining'` key to place
the amount of characters left at the end of the string.

```jsx live-expanded
() => {
  const [value, setValue] = useState('State Default Value');

  return (
    <I18nProvider
      translations={{
        TextField: { charactersRemaining: 'Characters Remaining: {{count}}' },
      }}
    >
      <TextField
        label="Label"
        value={value}
        onChangeText={setValue}
        maxLength={500}
      />
    </I18nProvider>
  );
};
```

## Language Translations

We can use the same idea to translate text into different languages.

```jsx live
() => {
  const [value, setValue] = useState('Valor por defecto');

  return (
    <I18nProvider
      translations={{
        TextField: {
          clear: 'Borrar',
          charactersRemaining: '{{count}} caracteres restantes',
        },
      }}
    >
      <TextField
        label="Etiqueta"
        value={value}
        onChangeText={setValue}
        maxLength={500}
      />
    </I18nProvider>
  );
};
```

## Custom I18n

You can also use the `I18nProvider` component to not only override the default values used in Abyss components, but you provide your own custom custom values .
Those values can then consumed later using the [useTranslate](/mobile/hooks/use-translate) hook or the [Translate](/mobile/ui/translate) component.

```jsx live
const MyComponent = () => {
  const { t } = useTranslate();
  return (
    <View>
      <Text>{t('myCustomText')}</Text>
      <Text>{t('nested.key')}</Text>
    </View>
  );
};

render(() => {
  return (
    <I18nProvider
      translations={{
        myCustomText: 'My custom Text',
        nested: { key: 'Nested Value' },
      }}
    >
      <MyComponent />
    </I18nProvider>
  );
});
```

## Related Links

- [useTranslate](/mobile/hooks/use-translate)
- [Translate](/mobile/ui/translate)

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={I18nProvider}
  rows={[
    {
      name: 'children',
      type: 'React.ReactNode',
      description: 'The rest of the component tree',
    },
    {
      name: 'translations',
      type: 'object',
      description: 'The translations to override the default translations with',
    },
  ]}
/>
```

</Tab>

---
id: icon
category: Media
title: Icon
description: Used to implement icons and adapt their properties.
# design: https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/Abyss-Design-System?node-id=0%3A10709
---

<Tab label="Overview">

```jsx
import { Icon } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Icon',
  inputs: [
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'title',
      type: 'string',
    },
    {
      prop: 'color',
      type: 'string',
    },
  ]
}

() => {
  const customIcon = (
    `<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`
  );

  return (
    <Icon size={48} title="github">{customIcon}</Icon>
  );
};
```

## Usage

Use `Icon` to implement custom SVG icons

```jsx live
<Layout.Group>
  <Icon title="github" size="$lg">
    {`<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`}
  </Icon>
  <Icon title="figma" size="$lg">
    {`<svg viewBox="-60 0 500 500">
      <path d="M14 95.7924C14 42.8877 56.8878 0 109.793 0H274.161C327.066 0 369.954 42.8877 369.954 95.7924C369.954 129.292 352.758 158.776 326.711 175.897C352.758 193.019 369.954 222.502 369.954 256.002C369.954 308.907 327.066 351.795 274.161 351.795H272.081C247.279 351.795 224.678 342.369 207.666 326.904V415.167C207.666 468.777 163.657 512 110.309 512C57.5361 512 14 469.243 14 416.207C14 382.709 31.1945 353.227 57.2392 336.105C31.1945 318.983 14 289.5 14 256.002C14 222.502 31.196 193.019 57.2425 175.897C31.196 158.776 14 129.292 14 95.7924ZM176.288 191.587H109.793C74.2172 191.587 45.3778 220.427 45.3778 256.002C45.3778 291.44 73.9948 320.194 109.381 320.416C109.518 320.415 109.655 320.415 109.793 320.415H176.288V191.587ZM207.666 256.002C207.666 291.577 236.505 320.417 272.081 320.417H274.161C309.737 320.417 338.576 291.577 338.576 256.002C338.576 220.427 309.737 191.587 274.161 191.587H272.081C236.505 191.587 207.666 220.427 207.666 256.002ZM109.793 351.795C109.655 351.795 109.518 351.794 109.381 351.794C73.9948 352.015 45.3778 380.769 45.3778 416.207C45.3778 451.652 74.6025 480.622 110.309 480.622C146.591 480.622 176.288 451.186 176.288 415.167V351.795H109.793ZM109.793 31.3778C74.2172 31.3778 45.3778 60.2173 45.3778 95.7924C45.3778 131.368 74.2172 160.207 109.793 160.207H176.288V31.3778H109.793ZM207.666 160.207H274.161C309.737 160.207 338.576 131.368 338.576 95.7924C338.576 60.2173 309.737 31.3778 274.161 31.3778H207.666V160.207Z" />
    </svg>`}
  </Icon>
</Layout.Group>
```

## Colors

Use the `color` property to adjust the color of a Google material icon. Theme colors can be found in the [Colors](/brand/colors) documentation section or a hex code can be used. The default color is set to the theme `'interactive1'`.

```jsx live
<Layout.Group>
  <Icon title="github" size="$lg" color="#145cf2">
    {`<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`}
  </Icon>
  <Icon title="github" size="$lg" color="#fff">
    {`<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`}
  </Icon>
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific preset size or number. The default is set to `24px` || `$md`. The size prop can take in px or tokens.
Token sizes: `$xs`: 16 `$sm`: 20 `$md`: 24 `$lg`: 40 `$xl`: 48

```jsx live
() => {
  const customIcon = `<svg viewBox="0 0 16 16">
      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
    </svg>`;

  return (
    <Layout.Group>
      <Icon title="github" size="$sm">
        {customIcon}
      </Icon>
      <Icon title="github" size="$md">
        {customIcon}
      </Icon>
      <Icon title="github" size="$lg">
        {customIcon}
      </Icon>
    </Layout.Group>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Icon}
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The svg content of the icon',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the icon',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the icon',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Icon}
  rows={[
    {
      name: 'icon-root',
      description: 'Icon root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Icon} keys={['icon']} />
```

</Tab>

---
id: icon-material
category: Media
title: IconMaterial
description: Used to implement material icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=1%3A432
---

<Tab label="Overview">

```jsx
import { IconMaterial } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconMaterial',
  inputs: [
    {
      prop: 'icon',
      type: 'string',
    },
    {
      prop: 'color',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'filled', value: 'filled' },
        { label: 'outlined', value: 'outlined' },
      ],
    },
  ]
}

<IconMaterial icon="home" size={40} variant="filled" color="$interactive1" />

```

## Icons

Use the `icon` property to adjust which icon is being selected.

```jsx live
<Layout.Group>
  <IconMaterial icon="bookmarks" size={24} />
  <IconMaterial icon="face" size={24} />
  <IconMaterial icon="home" size={24} />
</Layout.Group>
```

## Colors

Use the `color` property to adjust the color of a Google material icon. Theme colors can be found in the [Colors](/mobile/brand/uhc/colors) documentation section or a hex code can be used. The default color is set to the theme `'interactive1'`.

```jsx live
<Layout.Group>
  <IconMaterial icon="home" size={24} />
  <IconMaterial icon="home" size={24} color="$success1" />
  <IconMaterial icon="home" size={24} color="$error1" />
  <IconMaterial icon="home" size={24} color="$primary1" />
  <IconMaterial icon="home" size={24} color="#00ff00" />
  <IconMaterial icon="home" size={24} color="violet" />
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: `$xs`: 16 `$sm`: 20 `$md`: 24 `$lg`: 40 `$xl`: 48

```jsx live
<Layout.Group>
  <IconMaterial icon="home" size={16} />
  <IconMaterial icon="home" size={'$sm'} />
  <IconMaterial icon="home" />
</Layout.Group>
```

## Material Icon Variants

Use the `variant` property to change the style of Material icons. The default variant is `filled`.

```jsx live
<Web.Grid columns={5} span={{ md: '50%', lg: '20%' }}>
  <Web.Grid.Col>
    <Box padding="$sm" color="$white">
      <Layout.Stack grow space={0}>
        <div style={{ lineHeight: 2 }}>filled</div>
        <div style={{ lineHeight: 2 }}>outlined</div>
      </Layout.Stack>
    </Box>
  </Web.Grid.Col>
  <Web.Grid.Col>
    <Box padding="$sm" color="$white">
      <Layout.Stack grow space={2}>
        <IconMaterial icon="health_and_safety" size={24} variant="filled" />
        <IconMaterial icon="health_and_safety" size={24} variant="outlined" />
      </Layout.Stack>
    </Box>
  </Web.Grid.Col>
  <Web.Grid.Col>
    <Box padding="$sm" color="$tint3">
      <Layout.Stack grow space={2}>
        <IconMaterial icon="health_and_safety" size={24} variant="filled" />
        <IconMaterial icon="health_and_safety" size={24} variant="outlined" />
      </Layout.Stack>
    </Box>
  </Web.Grid.Col>
  <Web.Grid.Col>
    <Box padding="$sm" color="$tint4">
      <Layout.Stack grow space={2}>
        <IconMaterial icon="health_and_safety" size={24} variant="filled" />
        <IconMaterial icon="health_and_safety" size={24} variant="outlined" />
      </Layout.Stack>
    </Box>
  </Web.Grid.Col>
  <Web.Grid.Col>
    <Box padding="$sm" color="$primary1">
      <Layout.Stack grow space={2}>
        <IconMaterial
          icon="health_and_safety"
          size={24}
          variant="filled"
          color="#fff"
        />
        <IconMaterial
          icon="health_and_safety"
          size={24}
          variant="outlined"
          color="#fff"
        />
      </Layout.Stack>
    </Box>
  </Web.Grid.Col>
</Web.Grid>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={IconMaterial}
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the material icon',
    },
    {
      name: 'variant',
      type: 'filled | outlined',
      description: 'The style variation of the material icon',
      default: 'filled',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the material icon',
      default: '$interactive1',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the material icon',
      default: '$md',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
      default: 'false',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
      default: 'false',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
    {
      name: 'onLoad',
      type: 'function',
      description: 'Callback function when the icon is loaded',
    },
    {
      name: 'onError',
      type: 'function',
      description: 'Callback function when the icon fails to load',
    },
    {
      name: 'fallback',
      type: 'JSX.Element',
      description: 'Fallback element to render when the icon fails to load',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={IconMaterial}
  rows={[
    {
      name: 'icon-material-root',
      description: 'Icon material root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Material Icons">

```jsx render
<h2>Material Icons</h2>
```

Abyss uses Google's Material Design System iconography that is simple, modern, friendly,
and sometimes quirky. Each icon is created using Google's design guidelines to depict
in simple and minimal forms the universal concepts used commonly throughout user
interfaces. Ensuring readability and clarity at both large and small sizes, these
icons have been optimized for common platforms and display resolutions.

The source for these design icons can be found in the <ExitLink href="https://fonts.google.com/icons)">Material Icons Library</ExitLink>.

<IconLibrary brand="material" />

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Icon} keys={['icon']} />
```

</Tab>

---
id: icon-symbol
category: Media
title: IconSymbol
description: Used to implement material symbol icons and adapt their properties.
design: https://www.figma.com/file/anZoHg026SyKJHWGJ7Vf4Q/Abyss-Icons?node-id=1%3A432
---

<Tab label="Overview">

```jsx
import { IconSymbol } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'IconSymbol',
  inputs: [
    {
      prop: 'icon',
      type: 'string',
    },
    {
      prop: 'color',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'filled', value: 'filled' },
        { label: 'outlined', value: 'outlined' },
      ],
    },
  ]
}

<IconSymbol icon="home" size={40} variant="filled" color="$interactive1" />

```

## Icons

Use the `icon` property to adjust which icon is being selected.

```jsx live
<Layout.Group>
  <IconSymbol icon="bookmarks" size={24} />
  <IconSymbol icon="face" size={24} />
  <IconSymbol icon="home" size={24} />
</Layout.Group>
```

## Colors

Use the `color` property to adjust the color of a material symbol icon. Theme colors can be found in the [Colors](/mobile/brand/uhc/colors) documentation section, or a hex code can be used. The default color is set to the theme `'interactive1'`.

```jsx live
<Layout.Group>
  <IconSymbol icon="home" size={24} />
  <IconSymbol icon="home" size={24} color="$success1" />
  <IconSymbol icon="home" size={24} color="$error1" />
  <IconSymbol icon="home" size={24} color="$primary1" />
</Layout.Group>
```

## Size

Use the `size` property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: `$xs`: 16 `$sm`: 20 `$md`: 24 `$lg`: 40 `$xl`: 48

```jsx live
<Layout.Group>
  <IconSymbol icon="home" size={16} />
  <IconSymbol icon="home" size={'$sm'} />
  <IconSymbol icon="home" />
</Layout.Group>
```

## Material Symbol Variants

Use the `variant` property to change the style of Material symbol icons. The default variant is `filled`.

```jsx live
<Grid columns={5} span={1}>
  <Grid.Col>
    <Box padding="$sm" color="$white">
      <Layout.Stack grow space={0}>
        <div style={{ lineHeight: 2 }}>filled</div>
        <div style={{ lineHeight: 2 }}>outlined</div>
      </Layout.Stack>
    </Box>
  </Grid.Col>
  <Grid.Col>
    <Box padding="$sm" color="$white">
      <Layout.Stack grow space={2}>
        <IconSymbol icon="health_and_safety" size={24} variant="filled" />
        <IconSymbol icon="health_and_safety" size={24} variant="outlined" />
      </Layout.Stack>
    </Box>
  </Grid.Col>
  <Grid.Col>
    <Box padding="$sm" color="$tint3">
      <Layout.Stack grow space={2}>
        <IconSymbol icon="health_and_safety" size={24} variant="filled" />
        <IconSymbol icon="health_and_safety" size={24} variant="outlined" />
      </Layout.Stack>
    </Box>
  </Grid.Col>
  <Grid.Col>
    <Box padding="$sm" color="$tint4">
      <Layout.Stack grow space={2}>
        <IconSymbol icon="health_and_safety" size={24} variant="filled" />
        <IconSymbol icon="health_and_safety" size={24} variant="outlined" />
      </Layout.Stack>
    </Box>
  </Grid.Col>
  <Grid.Col>
    <Box padding="$sm" color="$primary1">
      <Layout.Stack grow space={2}>
        <IconSymbol
          icon="health_and_safety"
          size={24}
          variant="filled"
          color="#fff"
        />
        <IconSymbol
          icon="health_and_safety"
          size={24}
          variant="outlined"
          color="#fff"
        />
      </Layout.Stack>
    </Box>
  </Grid.Col>
</Grid>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={IconSymbol}
  rows={[
    {
      name: 'icon',
      type: 'string',
      description: 'Name of the material symbol icon',
    },
    {
      name: 'variant',
      type: 'filled | outlined',
      description: 'The style variation of the material symbol icon',
      default: 'filled',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the material symbol icon',
      default: '$interactive1',
    },
    {
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the material symbol icon',
      default: '24',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Set the title of the icon',
    },
    {
      name: 'isScreenReadable',
      type: 'boolean',
      description:
        'Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title',
      default: 'false',
    },
    {
      name: 'disableScaling',
      type: 'boolean',
      description:
        'Specifies whether the icon should scale to respect Text Size accessibility settings',
      default: 'false',
    },
    {
      name: 'maxFontSizeMultiplier',
      type: 'boolean',
      description:
        'Specifies the largest possible scale the icon can reach when `disableScaling` is false',
    },
    {
      name: 'onLoad',
      type: 'function',
      description: 'Callback function when the icon is loaded',
    },
    {
      name: 'onError',
      type: 'function',
      description: 'Callback function when the icon fails to load',
    },
    {
      name: 'fallback',
      type: 'JSX.Element',
      description: 'Fallback element to render when the icon fails to load',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={IconSymbol}
  rows={[
    {
      name: 'icon-symbol-root',
      description: 'Material symbol icon root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Material Symbols">

```jsx render
<h2>Material Symbols</h2>
```

<IconLibrary brand="symbol" />

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Icon} keys={['icon']} />
```

</Tab>

---
id: indicator
category: Data Display
title: Indicator
description: Adds an indicator to wrapped elements.
# design: https://www.figma.com/file/tk08Md4NBBVUPNHQYthmqp/branch/sabyctxmnS57eNFcPZQAbi/Abyss-Design-System
---

<Tab label="Overview">

```jsx
import { Indicator } from '@uhg-abyss/mobile';
```

```jsx sandbox

{
  component: 'Indicator',
  inputs: [
    {
      prop: 'offset',
      type: 'number',
      defaultValue: 0
    },
        {
      prop: 'overflowCount',
      type: 'number',
      defaultValue: 99
    },
    {
      prop: 'position',
      type: 'select',
      options: [
        { label: 'top-start', value: 'top-start' },
        { label: 'top-end', value: 'top-end' },
        { label: 'bottom-start', value: 'bottom-start' },
        { label: 'bottom-end', value: 'bottom-end' },
      ],
      defaultValue: 'top-end',
    },
    {
      prop: 'color',
      type: 'string',
      defaultValue: '$indicator.color.surface.container',
    },
    {
      prop: 'label',
      type: 'string',
    },
  ]
}

<Indicator>
  <Badge>Indicator Sandbox</Badge>
</Indicator>
```

## Offset

Use the `offset` prop to change the position of the Indicator. It is useful when the Indicator component is used with children that have border radius.

```jsx live
<Layout.Group space={30}>
  <Indicator>
    <IconSymbol icon="face" size={48} />
  </Indicator>
  <Indicator offset={10}>
    <IconSymbol icon="face" size={48} />
  </Indicator>
</Layout.Group>
```

## Color

Use the `color` prop to change the color of the Indicator. Default value is set to `'$error1'`.

```jsx live
<Layout.Group space={30}>
  <Indicator color="green" offset={4}>
    <IconSymbol icon="mail" size={48} />
  </Indicator>
  <Indicator color="$gray4" offset={4}>
    <IconSymbol icon="mail" size={48} />
  </Indicator>
</Layout.Group>
```

## Label

Use the `label` prop to add a label to the indicator. A value greater than 99 will display as "99+". Use the `overflowCount` prop to chance the overflow value.

```jsx live
<Layout.Group space={30}>
  <Indicator offset={4} label={2}>
    <IconSymbol icon="mail" size={48} />
  </Indicator>
  <Indicator offset={4} label={354}>
    <IconSymbol icon="mail" size={48} />
  </Indicator>
</Layout.Group>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Indicator}
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The contents of the indicator component',
    },
    {
      name: 'position',
      type: "'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' ",
      default: "'top-end'",
      description: 'Position of the indicator',
    },
    {
      name: 'label',
      type: 'number | string',
      description: 'Label of the indicator',
    },
    {
      name: 'offset',
      type: 'number',
      default: '0',
      description:
        'Change the indicator default position based on the position variant',
    },
    {
      name: 'color',
      type: 'string',
      default: '$indicator.color.surface.container',
      description: 'Color of the indicator',
    },
    {
      name: 'overflowCount',
      type: 'number',
      default: '99',
      description: 'Overflow count display',
    },
    {
      name: 'showZero',
      type: 'boolean',
      default: 'true',
      description: 'Flag to hide label when value is 0',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Indicator}
  rows={[
    {
      name: 'indicator-root',
      description: 'Indicator root element',
    },
    {
      name: 'indicator',
      description: 'Indicator element',
    },
    {
      name: 'indicator-label',
      description: 'Indicator label element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Indicator} keys={['indicator']} />
```

</Tab>

---
id: lagoon-provider
category: Providers
title: LagoonProvider
description: Used to provide Lagoon project table data to the application.
---

<Tab label="Overview">

```jsx
import { LagoonProvider } from '@uhg-abyss/mobile';
```

## Usage

Applications must be wrapped in the `LagoonProvider` in order to access the Lagoon project data. Through usage of the `useLagoon` hook you can retrieve all table data or pass an optional agrument with the desired table path.

```jsx
<LagoonProvider app="abyss" env="dev" brand="uhc">
  <AppRoot />
</LagoonProvider>
```

## Return all project table data

```jsx live
() => {
  const tableFunctions = useLagoon();
  const allData = Object.keys(tableFunctions).map((key) => {
    return { [key]: tableFunctions[key]() };
  });

  const obj = Object.assign({}, ...allData);

  return (
    <Card style={{ padding: 16 }}>
      <Text>{JSON.stringify(obj, null, 4)}</Text>
    </Card>
  );
};
```

## Return data for specified table path

```jsx live
() => {
  const tablePath = 'lagoonprovider-docs-two';
  const tableFunction = useLagoon(tablePath);
  const data = { [tablePath]: tableFunction() };

  return (
    <Card style={{ padding: 16 }}>
      <Text>{JSON.stringify(data, null, 4)}</Text>
    </Card>
  );
};
```

## Fallback

In the event that Lagoon data cannot be retrieved, a `fallback` prop can be used to pass in data with an object
similar to the one expected to be retrieved from the API.

```jsx
<LagoonProvider
  app="abyss"
  env="dev"
  brand="uhc"
  fallback={{
    'lagoonprovider-docs': [
      {
        id: 'ff1924e0-1123-4856-b56f-9350cfac0b70',
        key: '1',
        textOne: 'Fallback Text',
        isActive: true,
        'lagoon.updatedAt': '2023-06-05T18:12:30.196Z',
        'lagoon.updatedBy': 'mwhit206',
      },
    ],
    'lagoonprovider-docs-two': [
      {
        id: 'c87cc26d-9269-4f5a-8649-e6d7cab38e1b',
        key: '1',
        devExampleTwo: 'Fallback 1',
        isActive: true,
      },
      {
        id: '9fae2e68-97d6-4363-bbaf-01629796c7b5',
        key: '2',
        devExampleTwo: 'Fallback Example',
        isActive: false,
      },
    ],
  }}
>
  <AppRoot />
</LagoonProvider>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={LagoonProvider}
  rows={[
    {
      name: 'app',
      type: 'string',
      description: 'Name of the Lagoon project',
    },
    {
      name: 'env',
      type: "'dev' | 'test' | 'stage' | 'prod'",
      description:
        'The environment variable for the desired Lagoon project environment',
    },
    {
      name: 'hostEnv',
      type: "'nonprod' | 'prod'",
      default: 'prod',
      description: 'The environment variable for the desired host environment',
    },
    {
      name: 'user',
      type: 'object',
      description: 'Optional data used for user targeting',
    },
    {
      name: 'brand',
      type: "'uhg' | 'optum' | 'uhc' | 'uhcprovider'",
      description: 'Indicates the domain to be used',
    },
    {
      name: 'fallback',
      type: 'object',
      description:
        'An object similar to the one expected to be retrieved from the API',
    },
    {
      name: 'url',
      type: 'string',
      description:
        'Custom URL used to fetch from an independent Lagoon instance',
    },
    {
      name: 'loadingIcon',
      type: 'node',
      description: 'Provides a loading icon',
    },
    {
      name: 'timeout',
      type: 'number',
      description: 'Sets timeout for resetting the connection',
    },
  ]}
/>
```

</Tab>

---
id: layout
category: Layout
title: Layout
description: A single or multi-section container used to display content related to a single subject.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/Sk3MrHYxjT39TKDzDU5LBc/Abyss-Mobile?node-id=20334%3A61355
---

<Tab label="Overview">

# Overview

Layout is a set of organizational components that follow the patterns of Flexbox.

## Layout.Group

Used to align elements in a row.

```jsx sandbox
{
  component: 'Layout.Group',
  inputs: [
    {
      prop: 'space',
      type: 'number',
    },
    {
      prop: 'alignLayout',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'alignItems',
      type: 'select',
      options: [
        { label: 'top', value: 'top' },
        { label: 'center', value: 'center' },
        { label: 'bottom', value: 'bottom' },
      ],
    },
    {
      prop: 'grow',
      type: 'boolean',
    },
  ],
}

<Layout.Group>
  <Box color="$tint3" padding={20} >
    <Text>Group 1</Text>
  </Box>
  <Box color="$tint3" padding={15} >
     <Text>Group 2</Text>
  </Box>
  <Box color="$tint3" padding={10}>
     <Text>Group 3</Text>
  </Box>
</Layout.Group>
```

## Layout.Stack

Used to align elements in a column.

```jsx sandbox
{
  component: 'Layout.Stack',
  inputs: [
    {
      prop: 'space',
      type: 'number',
    },
    {
      prop: 'alignLayout',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'alignItems',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
    {
      prop: 'grow',
      type: 'boolean',
    },
  ],
}

<Layout.Stack>
    <Box color="$tint3" padding={20} >
      <Text>Stack 1</Text>
    </Box>
    <Box color="$tint3" padding={15} >
       <Text>Stack 2</Text>
    </Box>
    <Box color="$tint3" padding={10}>
       <Text>Stack 3</Text>
    </Box>
</Layout.Stack>
```

## Layout.Group and Layout.Stack Props

### Space

Use the `space` property to set the spacing for a `Group` or `Stack`. The default is set to `8`.

```jsx live
<Grid>
  <Grid.Col span="100%">
    <Heading offset={3}>Group </Heading>
    <Layout.Group>
      <Box color="$tint3" padding={20}>
        <Text>Group 1</Text>
      </Box>
      <Box color="$tint3" padding={20}>
        <Text>Group 2</Text>
      </Box>
      <Box color="$tint3" padding={20}>
        <Text>Group 3</Text>
      </Box>
    </Layout.Group>
  </Grid.Col>
  <Grid.Col span="100%">
    <Heading offset={3}>Group - 20px space </Heading>
    <Layout.Group space={20}>
      <Box color="$tint3" padding={20}>
        <Text>Group 1</Text>
      </Box>
      <Box color="$tint3" padding={20}>
        <Text>Group 2</Text>
      </Box>
      <Box color="$tint3" padding={20}>
        <Text>Group 3</Text>
      </Box>
    </Layout.Group>
  </Grid.Col>
</Grid>
```

```jsx live
<Grid>
  <Grid.Col>
    <Heading offset={3}>Stack </Heading>
    <Layout.Stack>
      <Box color="$tint3" padding={20}>
        <Text>Stack 1</Text>
      </Box>
      <Box color="$tint3" padding={20}>
        <Text>Stack 2</Text>
      </Box>
      <Box color="$tint3" padding={20}>
        <Text>Stack 3</Text>
      </Box>
    </Layout.Stack>
  </Grid.Col>
  <Grid.Col>
    <Heading offset={3}>Stack - 20px space </Heading>
    <Layout.Stack space={20}>
      <Box color="$tint3" padding={20}>
        <Text>Stack 1</Text>
      </Box>
      <Box color="$tint3" padding={20}>
        <Text>Stack 2</Text>
      </Box>
      <Box color="$tint3" padding={20}>
        <Text>Stack 3</Text>
      </Box>
    </Layout.Stack>
  </Grid.Col>
</Grid>
```

### AlignLayout

Use the `alignLayout` property to indicate the horizontal alignment of the items in a `Group` or `Stack`. For a Group, the possible options are `left`, `center`, and `right`. For a Stack, the possible options are `left`, `center`, and `right`. The default is set to `left` in both cases.

```jsx live
<React.Fragment>
  <Heading offset={3}>Group - top align - Default </Heading>
  <Layout.Group>
    <Box color="$tint3" padding={20}>
      <Text>Group Top 1</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Group Top 2</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Group Top 3</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - center align </Heading>
  <Layout.Group alignLayout="center">
    <Box color="$tint3" padding={20}>
      <Text>Group Default</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Group Default</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Group Default</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - bottom align </Heading>
  <Layout.Group alignLayout="right">
    <Box color="$tint3" padding={20}>
      <Text>Group Bottom 1</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Group Bottom 2</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Group Bottom 3</Text>
    </Box>
  </Layout.Group>
</React.Fragment>
```

```jsx live
<React.Fragment>
  <Heading offset={3}>Stack - left align - default </Heading>
  <Layout.Stack>
    <Box color="$tint3" padding={20}>
      <Text>Stack Left 1</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Stack Left 2</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Stack Left 3</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - center align </Heading>
  <Layout.Stack alignLayout="center">
    <Box color="$tint3" padding={20}>
      <Text>Stack Default</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Stack Default</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Stack Default</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - right align </Heading>
  <Layout.Stack alignLayout="right">
    <Box color="$tint3" padding={20}>
      <Text>Stack Right 1</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Stack Right 2</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Stack Right 3</Text>
    </Box>
  </Layout.Stack>
</React.Fragment>
```

### AlignItems

Use the `alignItems` property to indicate the alignment of the items in a `Group` or `Stack`. For a `Group` the vertical alignment is adjusted, whereas for a `Stack` the horizontal alignment is adjusted. For a Group, the possible options are `top`, `center`, and `bottom`. For a Stack, the possible options are `left`, `center`, and `right`. The default is set to `center` in both cases.

```jsx live
<React.Fragment>
  <Heading offset={3}>Group - top align </Heading>
  <Layout.Group alignItems="top">
    <Box color="$tint3" padding={20}>
      <Text>Group Top 1</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Group Top 2</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Group Top 3</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - center align - Default </Heading>
  <Layout.Group>
    <Box color="$tint3" padding={20}>
      <Text>Group Default</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Group Default</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Group Default</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - bottom align </Heading>
  <Layout.Group alignItems="bottom">
    <Box color="$tint3" padding={20}>
      <Text>Group Bottom 1</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Group Bottom 2</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Group Bottom 3</Text>
    </Box>
  </Layout.Group>
</React.Fragment>
```

```jsx live
<React.Fragment>
  <Heading offset={3}>Stack - left align </Heading>
  <Layout.Stack alignItems="left">
    <Box color="$tint3" padding={20}>
      <Text>Stack Left 1</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Stack Left 2</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Stack Left 3</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - center align - Default </Heading>
  <Layout.Stack>
    <Box color="$tint3" padding={20}>
      <Text>Stack Default</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Stack Default</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Stack Default</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - right align </Heading>
  <Layout.Stack alignItems="right">
    <Box color="$tint3" padding={20}>
      <Text>Stack Right 1</Text>
    </Box>
    <Box color="$tint3" padding={15}>
      <Text>Stack Right 2</Text>
    </Box>
    <Box color="$tint3" padding={10}>
      <Text>Stack Right 3</Text>
    </Box>
  </Layout.Stack>
</React.Fragment>
```

### Grow

Use the `grow` property to indicate whether the grouped components should be stretched to fill the space horizontally. The default is set to `false`.

```jsx live
<React.Fragment>
  <Heading offset={3}>Group - default </Heading>
  <Layout.Group>
    <Box color="$tint3" padding={20}>
      <Text>One</Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Two</Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Three</Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - grow </Heading>
  <Layout.Group grow>
    <Box color="$tint3" padding={20}>
      <Text>Item 1</Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Item 2</Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Item 3</Text>
    </Box>
  </Layout.Group>
</React.Fragment>
```

```jsx live
<React.Fragment>
  <Heading offset={3}>Stack - default </Heading>
  <Layout.Stack>
    <Box color="$tint3" padding={20}>
      <Text>One</Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Two</Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Three</Text>
    </Box>
  </Layout.Stack>
  <Heading offset={3}>Stack - grow </Heading>
  <Layout.Stack grow>
    <Box color="$tint3" padding={20}>
      <Text>One</Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Two</Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Three</Text>
    </Box>
  </Layout.Stack>
</React.Fragment>
```

### Shrink

Use the `shrink` property to indicate whether the grouped components should be shrunk to fill the space horizontally in a `Group`, to prevent an overflow. The default is set to `false`.

```jsx live
<React.Fragment>
  <Heading offset={3}>Group - default </Heading>
  <Layout.Group space="$xl">
    <Box color="$tint3" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
  </Layout.Group>
  <Heading offset={3}>Group - shrink </Heading>
  <Layout.Group shrink space="$xl">
    <Box color="$tint3" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
    <Box color="$tint3" padding={20}>
      <Text>Lorem Ipsum Dolor </Text>
    </Box>
  </Layout.Group>
</React.Fragment>
```

## Layout.Insert

Used to place elements before and after a central component. Padding is `$sm` and direction is `row`by default.

```jsx live
<React.Fragment>
  <Layout.Insert
    before={<IconSymbol icon="chevron_left" color="$primary1" size={'$lg'} />}
    after={<IconSymbol icon="chevron_right" color="$primary1" size={'$lg'} />}
    padding="$sm"
  >
    <Box color="$tint3" padding={20}>
      <Text>Center</Text>
    </Box>
  </Layout.Insert>
</React.Fragment>
```

## Layout.Space

Adds a space of height `space`. Default is `16px`.

```jsx live
<React.Fragment>
  <Box color="$tint3" padding={20}>
    <Text>One</Text>
  </Box>
  <Layout.Space />
  <Box color="$tint3" padding={20}>
    <Text>Two</Text>
  </Box>
</React.Fragment>
```

</Tab>
<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Layout.Group}
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The element the group wraps',
    },
    {
      name: 'width',
      type: 'number | string',
      description: 'Set the width of the group',
    },
    {
      name: 'alignItems',
      type: 'top | center | bottom',
      description: 'Adjust the vertical alignment of items in the group',
      default: 'center',
    },
    {
      name: 'alignLayout',
      type: 'left | center | right',
      description: 'Set the position of the group',
      default: 'left',
    },
    {
      name: 'grow',
      type: 'boolean',
      description: 'Flag to stretch grouped components to fit evenly or not',
      default: 'false',
    },
    {
      name: 'space',
      type: 'number',
      description: 'Distance between elements in the Group component',
      default: '$layout-group.space',
    },
    {
      name: 'shrink',
      type: 'boolean',
      description:
        'Flag to indicate whether the grouped components should be shrunk to ill the space horizontally in a `Group`, to prevent an overflow',
      default: 'false',
    },
    {
      name: 'wrap',
      type: 'boolean',
      description: 'Flag indicating if the elements should wrap to a new line',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Layout.Stack}
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The element the stack wraps',
    },
    {
      name: 'width',
      type: 'number | string',
      description: 'Set the width of the stack',
    },
    {
      name: 'alignItems',
      type: 'left | center | right',
      description: 'Adjust the horizontal alignment of items in the stack',
      default: 'center',
    },
    {
      name: 'alignLayout',
      type: 'left | center | right',
      description: 'Set the position of the stack',
      default: 'left',
    },
    {
      name: 'grow',
      type: 'boolean',
      description: 'Flag to stretch grouped components to fit evenly or not',
      default: 'false',
    },
    {
      name: 'space',
      type: 'number',
      description: 'Distance between elements in the Group component',
      default: 16,
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Layout.Insert}
  rows={[
    {
      name: 'children',
      type: 'ReactNode',
      description: 'The elements in the center',
    },
    {
      name: 'before',
      type: 'node',
      description: 'Element displayed before children',
    },
    {
      name: 'after',
      type: 'node',
      description: 'Element displayed after children',
    },
    {
      name: 'direction',
      type: 'row | column',
      description: 'Position of before and after nodes',
      default: 'row',
    },
    {
      name: 'grow',
      type: 'boolean',
      description: 'Flag to stretch grouped components to fit evenly or not',
      default: 'false',
    },
    {
      name: 'padding',
      type: 'number',
      description: 'Padding between elements',
      default: '$sm',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Layout.Space}
  rows={[
    {
      name: 'space',
      type: 'number | string',
      description: 'The height of the space',
      default: 16,
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Layout.Group}
  rows={[
    {
      name: 'layout-group',
      description: 'Group root element',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Layout.Stack}
  rows={[
    {
      name: 'layout-stack',
      description: 'Stack root element',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Layout.Insert}
  rows={[
    {
      name: 'layout-insert-root',
      description: 'Insert root element',
    },
    {
      name: 'layout-insert-before',
      description: 'Insert before element',
    },
    {
      name: 'layout-insert-after',
      description: 'Insert after element',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Layout.Space}
  rows={[
    {
      name: 'layout-space-root',
      description: 'Space root element',
    },
  ]}
/>
```

</Tab>

---
id: link
category: Navigation
title: Link
description: Used to navigate to other pages, or sections of a page.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=11579-66904&mode=design&t=lQdpLQ0uWdxbRS9p-0
---

<Tab label="Overview">

```jsx
import { Link } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Link',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'select',
      options: [
        { label: 'large', value: 'large' },
        { label: 'medium', value: 'medium' },
        { label: 'small', value: 'small' },
      ],
    },
    {
      prop: 'href',
      type: 'string',
    },
    {
      prop: 'underline',
      type: 'boolean',
    },
  ]
}

  <Link>Link Sandbox</Link>
```

**The children passed into the link must be a string or an error will appear.**

## Text

Change the children of the link to set the text. Note that the child must be a string.

```jsx live
<Link
  href="https://www.uhc.com/"
  after={({ color }) => {
    return <IconSymbol icon="chevron_right" color={color} />;
  }}
>
  UHC
</Link>
```

## Size

Use the `size` prop to set the size of the link. The default is set to `large`.

```jsx live
<Layout.Stack alignItems="left">
  <Link size="large" href="https://abyss.uhc.com/">
    Large Link / 18px
  </Link>
  <Link size="medium" href="https://abyss.uhc.com/">
    Medium Link / 16px
  </Link>
  <Link size="small" href="https://abyss.uhc.com/">
    Small Link / 14px
  </Link>
</Layout.Stack>
```

## Underline

The `underline` prop is used to underline the link text. The default is set to `false`.

```jsx live
<Layout.Stack alignItems="left">
  <Link href="https://abyss.uhc.com/">Normal Link</Link>
  <Link href="https://abyss.uhc.com/" underline>
    Underlined Link
  </Link>
</Layout.Stack>
```

## Inserting Elements

Insert elements into the Link component using the `before` and `after` props.

To account for press state color, the `before` and `after` props can accept a function whose arguments contain the properties `color` and `isPressed`.

```jsx live
<Layout.Stack>
  <Link
    before={({ color }) => {
      return <IconSymbol icon="chevron_left" color={'color'} />;
    }}
    href="https://abyss.uhc.com/"
  >
    Abyss Docs
  </Link>
  <Link
    after={({ isPressed }) => {
      return (
        <IconSymbol icon="chevron_right" color={isPressed ? 'green' : 'red'} />
      );
    }}
  >
    Abyss Docs
  </Link>
  <Link
    before={({ color }) => <IconSymbol icon="info" size={14} color={color} />}
    size="small"
  >
    Abyss Docs
  </Link>
</Layout.Stack>
```

## Content Guidelines

The informational (left) icon should be used when the link is being used as a Tooltip. Do not use the right icon in this case. Tooltips can appear as icons only, or with text.

```jsx live
<Layout.Stack>
  <Link before={<IconSymbol icon="info" />}></Link>
  <Link before={<IconSymbol icon="info" />}>What is this?</Link>
</Layout.Stack>
```

A directional (right) icon should be used when the link will take you to another screen.

```jsx live
<Layout.Stack>
  <Link after={<IconSymbol icon="chevron_right" />}>View results</Link>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Link}
  rows={[
    {
      name: 'before',
      type: 'JSX.Element | Function',
      description: 'Insert element into link component before children',
    },
    {
      name: 'after',
      type: 'JSX.Element | Function',
      description: 'Insert element into link component after children',
    },
    {
      name: 'href',
      type: 'string',
      description: 'Set the URL of the link',
    },
    {
      name: 'children',
      type: 'string',
      description: 'Set the text of the link',
    },
    {
      name: 'size',
      type: '"large" | "medium" | "small"',
      description: 'Set the size of the link',
      default: 'large',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the link',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the link is pressed',
    },
    {
      name: 'underline',
      type: 'boolean',
      description: 'Used to underline the link text',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Link}
  rows={[
    {
      name: 'link-root',
      description: 'Link root element',
    },
    {
      name: 'link-label',
      description: 'Link label',
    },
    {
      name: 'link-icon',
      description: 'Link icon',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={Link} rows={['Link.iconTitle']} />
```

</Tab>
<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Link} keys={['link']} />
```

</Tab>

---
id: loading-spinner-v2
category: Overlay
title: V2LoadingSpinner
description: Infinite loading spinner.
design: https://www.figma.com/design/wCMblLsq9TxAQvKzY3EfCt/v1.66.0-App-Abyss-UHC-Component-Library?node-id=12985-84753&p=f&t=Q9ZAauYOQC2ugiP4-0
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2LoadingSpinner } from '@uhg-abyss/mobile';
```

## Overview

Loading Spinner requires the `accessibilityLabel` prop to describe what happens while the loading spinner is active. Common labels are 'Submitting Form', 'Downloading Files', 'Content is loading', etc. Be as descriptive as possible.

```jsx
<V2LoadingSpinner accessibilityLabel="Downloading" isLoading={isLoading} />
```

## Size

Loading spinner comes in two sizes, `xs` and `sm`. With the `xs` variant being used solely for use on buttons.

```jsx live
() => {
  return (
    <Layout.Group space={20}>
      <V2LoadingSpinner
        size="xs"
        isLoading
        accessibilityLabel="Downloading files"
      />
      <V2LoadingSpinner isLoading accessibilityLabel="Importing data" />
    </Layout.Group>
  );
};
```

## Color

The `color` property allows changing the color of the loading spinner.

```jsx live
() => {
  const [isLoading, setIsLoading] = useState(true);
  const toggleLoading = () => {
    setIsLoading(!isLoading);
  };

  return (
    <Layout.Stack space={20}>
      <Layout.Group space={20}>
        <Box color="$primary1">
          <V2LoadingSpinner
            color="$loading-spinner.color.surface.spinner.alt"
            isLoading={isLoading}
            accessibilityLabel="Downloading files"
          />
        </Box>
        <V2LoadingSpinner
          isLoading={isLoading}
          accessibilityLabel="Submitting form"
        />
        <V2LoadingSpinner
          color="blue"
          isLoading={isLoading}
          accessibilityLabel="Submitting form"
        />
        <V2LoadingSpinner
          color="red"
          isLoading={isLoading}
          accessibilityLabel="Submitting form"
        />
      </Layout.Group>
    </Layout.Stack>
  );
};
```

## Alt

The `alt` property changes the color of the loading spinner.

```jsx live
() => {
  return (
    <Layout.Group space={20}>
      <Box color="$primary1">
        <V2LoadingSpinner
          alt
          isLoading
          accessibilityLabel="Downloading files"
        />
      </Box>
      <V2LoadingSpinner isLoading accessibilityLabel="Submitting form" />
    </Layout.Group>
  );
};
```

## Heading

Use the `heading` prop to add text below the spinner. Only available when the size is set to `'sm'`.

```jsx live
<V2LoadingSpinner
  isLoading
  size="sm"
  accessibilityLabel="Loading"
  heading="Loading, please wait..."
/>
```

## Button

The Button component has LoadingSpinner integration. Head over to the [Button](/mobile/ui/button) component documentation to learn more.

```jsx live
() => {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <Button
      after={
        <V2LoadingSpinner
          size="xs"
          isLoading={isLoading}
          color="$loading-spinner.color.surface.spinner.alt"
        />
      }
      accessibilityLabel="Importing data"
      onClick={() => setIsLoading(!isLoading)}
    >
      Submit
    </Button>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2LoadingSpinner}
  rows={[
    {
      name: 'heading',
      type: 'string',
      description:
        'The heading of the spinner. Only available when size is set to "sm"',
    },
    {
      name: 'isLoading',
      type: 'boolean',
      default: 'false',
      description:
        'Flag to show or hide the loading spinner. If true, spinner is visible',
    },
    {
      name: 'size',
      type: '"xs" | "sm"',
      default: '"sm"',
      description: 'Set the size of the spinner',
    },
    {
      name: 'accessibilityLabel',
      type: 'string',
      description:
        'Text to describe what is happening while the loading spinner is active',
    },
    {
      name: 'color',
      type: 'string',
      default: '"$loading-spinner.color.surface.spinner.regular"',
      description: 'Color of the loading spinner',
    },
    {
      name: 'alt',
      type: 'boolean',
      default: 'false',
      description: 'Flag to change the loading spinner color variant',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2LoadingSpinner}
  rows={[
    {
      name: 'loading-spinner-root',
      description: 'Loading spinner root element',
    },
    {
      name: 'loading-spinner-heading',
      description: 'Heading element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={V2LoadingSpinner} rows={['loading']} />
```

</Tab>

<Tab label="Accessibility">

Following the requirements of WAI-ARIA, Loading Spinner follows the requirements 4.1.3: Status Messages. Status messages are defined by WCAG as messages that provide information on the success or results of a user action, but do not change the user's context (i.e., take focus).

Loading Spinner is programmed through the `accessibilityLabel` property, and has been tested using a screen reader to present a status message to assistive technology without receiving focus.

Adheres to the <ExitLink href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html">Status messages WAI-ARIA design pattern</ExitLink>.

```jsx live
() => {
  return <V2LoadingSpinner isLoading accessibilityLabel="Downloading files" />;
};
```

## Dynamic Type

V2LoadingSpinner does not scale. If the `size` prop is set to "xs" and dynamic type scales past 3XL, then `size` will adjust to "sm".

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={V2LoadingSpinner} keys={['loading-spinner']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={LoadingSpinner} type="class" />
```

```jsx render
<Docs.ComparisonTable of={LoadingSpinner} type="props" />
```

</Tab>

---
id: loading-spinner
category: Overlay
title: LoadingSpinner
description: Infinite loading spinner.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=16616-88862
---

<Tab label="Overview">

```jsx
import { LoadingSpinner } from '@uhg-abyss/mobile';
```

## Overview

Loading Spinner requires the `accessibilityLabel` prop to describe what happens while the loading spinner is active. Common labels are 'Submitting Form', 'Downloading Files', 'Content is loading', etc. Be as descriptive as possible.

```jsx
<LoadingSpinner accessibilityLabel="Downloading" isLoading={isLoading} />
```

## Children

On size `$lg`, the Loading Spinner takes in and displays a child. For branding or icons, you can go to the Brandmark, Icon Material, or Icon Brand page for options.

```jsx live
() => {
  const [isLoading, setIsLoading] = useState(true);
  const toggleLoading = () => {
    setIsLoading(!isLoading);
  };

  return (
    <Layout.Group>
      <LoadingSpinner
        size="large"
        isLoading={isLoading}
        accessibilityLabel="Loading page"
      >
        <IconSymbol
          variant="outlined"
          color="$primary1"
          icon="upload_file"
          size={35}
        />
      </LoadingSpinner>
    </Layout.Group>
  );
};
```

## Size

Loading spinner comes in three sizes, `large, medium, small`. With the `small` variant being used solely for use on buttons. The default setting is set to `size = medium`.

```jsx live
() => {
  const [isLoading, setIsLoading] = useState(true);
  const toggleLoading = () => {
    setIsLoading(!isLoading);
  };

  return (
    <Layout.Stack space={20}>
      <Layout.Group space={20}>
        <LoadingSpinner
          size="small"
          isLoading={isLoading}
          accessibilityLabel="Downloading files"
        />
        <LoadingSpinner
          isLoading={isLoading}
          accessibilityLabel="Importing data"
        />
        <LoadingSpinner
          size="large"
          isLoading={isLoading}
          accessibilityLabel="Submitting form"
        />
      </Layout.Group>
    </Layout.Stack>
  );
};
```

## Color

The `color` property allows changing the color of the loading spinner. The default color is based on the inherited `colorScheme`.

```jsx live
() => {
  const [isLoading, setIsLoading] = useState(true);
  const toggleLoading = () => {
    setIsLoading(!isLoading);
  };

  return (
    <Layout.Stack space={20}>
      <Layout.Group space={20}>
        <Box color="$primary1">
          <ThemeProvider colorScheme="dark">
            <LoadingSpinner
              isLoading={isLoading}
              size="large"
              accessibilityLabel="Downloading files"
            />
          </ThemeProvider>
        </Box>
        <LoadingSpinner
          isLoading={isLoading}
          size="large"
          accessibilityLabel="Submitting form"
        />
        <LoadingSpinner
          color="blue"
          isLoading={isLoading}
          size="large"
          accessibilityLabel="Submitting form"
        />
        <LoadingSpinner
          color="red"
          isLoading={isLoading}
          size="large"
          accessibilityLabel="Submitting form"
        />
      </Layout.Group>
    </Layout.Stack>
  );
};
```

## Label

Use the `label` prop to add text below the spinner.

```jsx live
<LoadingSpinner
  isLoading
  size="large"
  accessibilityLabel="Loading"
  label="Loading, please wait..."
/>
```

## Button

The Button component has Loading Spinner integration. Head over to the [Button](/mobile/ui/button) component documentation to learn more.

```jsx live
() => {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <Layout.Group space={20}>
      <Layout.Stack space={20}>
        <ThemeProvider colorScheme="dark">
          <Button
            after={<LoadingSpinner size="small" isLoading={isLoading} />}
            accessibilityLabel="Importing data"
            onClick={() => setIsLoading(!isLoading)}
          >
            Submit
          </Button>
        </ThemeProvider>
      </Layout.Stack>
    </Layout.Group>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={LoadingSpinner}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the spinner component',
    },
    {
      name: 'isLoading',
      type: 'boolean',
      description:
        'Flag to show or hide the loading spinner. If true, spinner is visible',
      default: 'false',
    },
    {
      name: 'size',
      type: '"small" | "medium" | "large"',
      description: 'Set the size of the spinner',
      default: 'medium',
    },
    {
      name: 'accessibilityLabel',
      type: 'string',
      description:
        'Text to describe what is happening while the loading spinner is active',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Color of the loading spinner',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Text below the loading spinner',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={LoadingSpinner}
  rows={[
    {
      name: 'loading-spinner-root',
      description: 'Loading spinner root element',
    },
    {
      name: 'loading-spinner-background',
      description: 'Inner circle background element',
    },
    {
      name: 'loading-spinner-wheel',
      description: 'Loading spinner wheel element',
    },
    {
      name: 'loading-spinner-label',
      description: 'Loading spinner label',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={LoadingSpinner} rows={['loading']} />
```

</Tab>

<Tab label="Accessibility">

Following the requirements of WAI-ARIA, Loading Spinner follows the requirements 4.1.3: Status Messages. Status messages are defined by WCAG as messages that provide information on the success or results of a user action, but do not change the user's context (i.e., take focus).

Loading Spinner is programmed through the `accessibilityLabel` property, and has been tested using a screen reader to present a status message to assistive technology without receiving focus.

Adheres to the <ExitLink href="https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html">Status messages WAI-ARIA design pattern</ExitLink>.

```jsx live
() => {
  const [isLoading, setIsLoading] = useState(true);
  const toggleLoading = () => {
    setIsLoading(!isLoading);
  };

  return (
    <LoadingSpinner
      size="large"
      isLoading={isLoading}
      accessibilityLabel="Downloading files"
    >
      <IconSymbol
        color="$primary1"
        icon="upload_file"
        size={35}
        variant="outlined"
      />
    </LoadingSpinner>
  );
};
```

## Dynamic Type

LoadingSpinner does not scale. If the `size` prop is set to "small" and dynamic type scales past 3XL, then `size` will adjust to "medium".

</Tab>

---
id: modal
category: Overlay
title: Modal
description: Appears from the bottom of the screen and fills up the entire screen, requiring user action to clear it.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=15291-83943
---

<Tab label="Overview">

```jsx
import { Modal } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Modal',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },
    {
      prop: 'title',
      type: 'string',
    },
  ]
}

() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Modal title="Enter title here" isVisible={isVisible}>
        <Modal.Section>
          <Button
            onPress={() => setIsVisible(false)}
            variant='destructive'
            size='small'
          >
            Click to close modal
          </Button>
        </Modal.Section>
      </Modal>
      <Button onPress={() => setIsVisible(true)}>
        Toggle Modal
      </Button>
    </React.Fragment>
  );
}

```

## useState

Pass the value from the `useState` hook to the `isVisible` modal prop to set the open state of the modal.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal
        title="Modal Title"
        isVisible={modalVisible}
        actionLeft={
          <IconSymbol
            icon="close"
            color="$primary1"
            title="Close"
            isScreenReadable
          />
        }
        onActionLeftPress={() => setModalVisible(false)}
      >
        <Modal.Section>
          <Text>My text</Text>
        </Modal.Section>
      </Modal>
    </React.Fragment>
  );
};
```

## Title

Use the `title` prop to set the title of the modal. For accessibility purposes, a title is required.
Please provide a title that accurately describes the content of the modal so a screen reader
can provide this description to the user.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal title="Custom Title" isVisible={modalVisible}>
        <Modal.Section>
          <Text>Custom Text</Text>
          <Button
            onPress={() => setModalVisible(false)}
            variant="destructive"
            size="small"
          >
            Click to close modal
          </Button>
        </Modal.Section>
      </Modal>
    </React.Fragment>
  );
};
```

## Scrollable

Use the `scrollable` prop to make the content scrollable. Setting the prop to `false` changes the Modal's content container from a ScrollView to a View. Defaults to `true`.

## Action Buttons

Action Buttons can be placed on either the left or right side of the header using the `actionLeft` and `actionRight` props.
Use the `onActionLeftPress` prop to fire a callback when the left action is pressed, and `onActionRightPress` prop to
fire a callback when the right action is pressed.

If one of the actions is an icon, make sure to use the `title` and `isScreenReadable` props on the icon for accessibility.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  const showToast = () => {
    Toast.show({
      placement: 'top',
      text: 'You clicked the right action button',
      variant: 'info',
    });
  };

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal
        title="Action Buttons"
        isVisible={modalVisible}
        actionLeft={
          <IconSymbol
            icon="close"
            color="$primary1"
            title="Close"
            isScreenReadable
          />
        }
        actionRight={
          <IconSymbol
            icon="more_vert"
            color="$primary1"
            title="More Options"
            isScreenReadable
          />
        }
        onActionLeftPress={() => setModalVisible(false)}
        onActionRightPress={showToast}
      >
        <ToastProvider>
          <Modal.Section>
            <Text>
              The left and right side of the header have an action button
            </Text>
            <Layout.Space />
            <Text>Click on the left action button to close the modal</Text>
            <Text>
              Click on the right action button to display a toast message
            </Text>
          </Modal.Section>
        </ToastProvider>
      </Modal>
    </React.Fragment>
  );
};
```

## Footer

Use the `footer` prop to place content at the bottom of the modal.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  const showToast = () => {
    Toast.show({
      placement: 'top',
      text: 'You clicked the right action button',
      variant: 'info',
    });
  };

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal
        title="Footer"
        isVisible={modalVisible}
        footer={
          <View style={{ padding: 16 }}>
            <Button onPress={() => setModalVisible(false)}>
              Press here to close the modal
            </Button>
          </View>
        }
      ></Modal>
    </React.Fragment>
  );
};
```

## Modal Section

Wrap content in a `Modal.Section` component to add padding to the content.

```jsx live
() => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setModalVisible(true)}>Open Modal</Button>
      <Modal
        title="Modal Section"
        isVisible={modalVisible}
        actionLeft={
          <IconSymbol
            icon="close"
            color="$primary1"
            title="Close"
            isScreenReadable
          />
        }
        onActionLeftPress={() => setModalVisible(false)}
      >
        <Modal.Section>
          <Text>This text is inside of the `Modal.Section` component</Text>
        </Modal.Section>
      </Modal>
    </React.Fragment>
  );
};
```

## onClose <SystemLabel system='ios'/>

Use `onClose` to close the modal when swiping the modal down on iOS devices.

```jsx
() => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <Modal
      title="Swipeable Modal"
      isVisible={modalVisible}
      actionLeft={
        <IconSymbol
          icon="close"
          color="$primary1"
          title="Close"
          isScreenReadable
        />
      }
      onActionLeftPress={() => setModalVisible(false)}
      onClose={() => setModalVisible(false)}
    >
      <Modal.Section>
        <Text>Swipe the modal down</Text>
      </Modal.Section>
    </Modal>
  );
};
```

## Advanced Layout

Layouts like BottomSheet and Modal can be used in combination with each other to create flows.

```jsx live
() => {
  const team = [
    {
      firstName: 'Michael',
      lastName: 'White',
      linkText: 'California',
      subText: 'MM/DD/YYYY',
      value: '1',
    },
    {
      firstName: 'Thomas',
      lastName: 'Musengwa',
      linkText: 'Arkansas',
      subText: 'MM/DD/YYYY',
      value: '2',
    },
    {
      firstName: 'Bailey',
      lastName: 'Surowiec',
      linkText: 'Illinois',
      subText: 'MM/DD/YYYY',
      value: '3',
    },
    {
      firstName: 'Pablo',
      lastName: 'Zepeda',
      linkText: 'California',
      subText: 'MM/DD/YYYY',
      value: '4',
    },
  ];

  const locations = [
    {
      name: 'Alabama',
      value: 'AL',
    },
    {
      name: 'Alaska',
      value: 'AK',
    },
    {
      name: 'Arizona',
      value: 'AZ',
    },
    {
      name: 'Arkansas',
      value: 'AR',
    },
    {
      name: 'California',
      value: 'CA',
    },
    {
      name: 'Colorado',
      value: 'CO',
    },
    {
      name: 'Connecticut',
      value: 'CT',
    },
    {
      name: 'Delaware',
      value: 'DE',
    },
    {
      name: 'Florida',
      value: 'FL',
    },
    {
      name: 'Georgia',
      value: 'GA',
    },
    {
      name: 'Hawaii',
      value: 'HI',
    },
    {
      name: 'Idaho',
      value: 'ID',
    },
    {
      name: 'Illinois',
      value: 'IL',
    },
    {
      name: 'Indiana',
      value: 'IN',
    },
    {
      name: 'Iowa',
      value: 'IA',
    },
    {
      name: 'Kansas',
      value: 'KS',
    },
    {
      name: 'Kentucky',
      value: 'KY',
    },
    {
      name: 'Louisiana',
      value: 'LA',
    },
    {
      name: 'Maine',
      value: 'ME',
    },
    {
      name: 'Maryland',
      value: 'MD',
    },
    {
      name: 'Massachusetts',
      value: 'MA',
    },
    {
      name: 'Michigan',
      value: 'MI',
    },
    {
      name: 'Minnesota',
      value: 'MN',
    },
    {
      name: 'Mississippi',
      value: 'MS',
    },
    {
      name: 'Missouri',
      value: 'MO',
    },
    {
      name: 'Montana',
      value: 'MT',
    },
    {
      name: 'Nebraska',
      value: 'NE',
    },
    {
      name: 'Nevada',
      value: 'NV',
    },
    {
      name: 'New Hampshire',
      value: 'NH',
    },
    {
      name: 'New Jersey',
      value: 'NJ',
    },
    {
      name: 'New Mexico',
      value: 'NM',
    },
    {
      name: 'New York',
      value: 'NY',
    },
    {
      name: 'North Carolina',
      value: 'NC',
    },
    {
      name: 'North Dakota',
      value: 'ND',
    },
    {
      name: 'Ohio',
      value: 'OH',
    },
    {
      name: 'Oklahoma',
      value: 'OK',
    },
    {
      name: 'Oregon',
      value: 'OR',
    },
    {
      name: 'Pennsylvania',
      value: 'PA',
    },
    {
      name: 'Rhode Island',
      value: 'RI',
    },
    {
      name: 'South Carolina',
      value: 'SC',
    },
    {
      name: 'South Dakota',
      value: 'SD',
    },
    {
      name: 'Tennessee',
      value: 'TN',
    },
    {
      name: 'Texas',
      value: 'TX',
    },
    {
      name: 'Utah',
      value: 'UT',
    },
    {
      name: 'Vermont',
      value: 'VT',
    },
    {
      name: 'Virginia',
      value: 'VA',
    },
    {
      name: 'Washington',
      value: 'WA',
    },
    {
      name: 'West Virginia',
      value: 'WV',
    },
    {
      name: 'Wisconsin',
      value: 'WI',
    },
    {
      name: 'Wyoming',
      value: 'WY',
    },
  ];

  const [data, setData] = useState(team);
  const [value, setValue] = useState(data[0].value);
  const [member, setMember] = useState(data[0]);

  const [isVisible, setIsVisible] = useState(false);
  const [showModal, setShowModal] = useState(false);

  const getCurrentMember = (data, val) => {
    return data.find(({ value }) => value === val);
  };

  const getLocation = (locations, val) => {
    return locations.find(({ value }) => value === val);
  };

  const showToastMessage = () => {
    Toast.show({
      text: 'Member changed',
      variant: 'success',
    });
  };

  const handlePress = () => {
    setIsVisible(true);
  };

  const updateTeam = (newLocation) => {
    const newArr = data.map((member) => {
      if (member.value === value) {
        member.linkText = newLocation;
      }
      return member;
    });
    setData(newArr);
  };

  const handlePressLink = (value) => {
    const currentMember = getCurrentMember(data, value);
    setValue(currentMember.value);
    setShowModal(true);
  };

  const handleButtonPress = () => {
    const currentMember = getCurrentMember(data, value);
    setMember(currentMember);
    setIsVisible(false);
    showToastMessage();
  };

  const handleCellPress = (val) => {
    const newLocation = getLocation(locations, val);
    updateTeam(newLocation.name);
    const currentMember = getCurrentMember(data, value);
    Toast.show({
      text:
        currentMember.firstName +
        "'s location updated to " +
        newLocation.name +
        '!',
      variant: 'success',
    });
  };

  const TextView = styled('View', {
    justifyContent: 'center',
    paddingLeft: 9,
  });

  const Content = styled('View', {
    alignItems: 'center',
    justifyContent: 'space-between',
    flexDirection: 'row',
    backgroundColor: '$primary1',
    padding: '$md',
  });

  return (
    <ToastProvider>
      <Layout.Stack grow>
        <Content>
          <Layout.Group space={0}>
            <IconSymbol
              icon="location_on"
              variant="outlined"
              color="$secondary2"
            />
            <TextView>
              <Text
                color="$primary2"
                fontWeight="$bold"
                lineHeight="$sm"
                size="$sm"
              >
                {'For ' + member.firstName}
              </Text>
              <Text
                color="$primary2"
                fontWeight="$normal"
                lineHeight="$sm"
                size="$sm"
              >
                {member.linkText}
              </Text>
            </TextView>
          </Layout.Group>
          <View>
            <Button onPress={handlePress} size="small" variant={'alt'}>
              Change
            </Button>
          </View>
        </Content>
        <BottomSheet
          isVisible={isVisible}
          onClose={() => setIsVisible(false)}
          title={'Select a member'}
          footer={<Button onPress={handleButtonPress}>Confirm</Button>}
        >
          <CellGroup
            type={'radio'}
            value={value}
            onChange={setValue}
            hideBorderTop
          >
            {data.map(
              ({ linkText, value, firstName, lastName, subText }, i) => (
                <CellGroup.Cell
                  key={value}
                  value={value}
                  title={firstName + ' ' + lastName}
                  titleWeight={'$semibold'}
                  icon={
                    <Avatar
                      initials={firstName[0] + lastName[0]}
                      colorTheme={i + 1}
                    />
                  }
                >
                  {subText && (
                    <CellGroup.CellDescription>
                      {subText}
                    </CellGroup.CellDescription>
                  )}
                  {linkText && (
                    <Link
                      size="small"
                      onPress={() => handlePressLink(value)}
                      after={
                        <IconSymbol
                          icon={'chevron_right'}
                          color={'$interactive1'}
                          size={18}
                        />
                      }
                    >
                      {linkText}
                    </Link>
                  )}
                </CellGroup.Cell>
              )
            )}
          </CellGroup>
          <Modal
            title={'Select a Location'}
            isVisible={showModal}
            onClose={() => setShowModal(false)}
            actionLeft={
              <IconSymbol
                icon="chevron_left"
                color="$primary1"
                title="Back"
                isScreenReadable
              />
            }
            onActionLeftPress={() => {
              setShowModal(false);
            }}
          >
            <CellGroup value={value} hideBorderTop hideBorderBottom>
              <ToastProvider>
                {locations.map(({ value, name }) => (
                  <CellGroup.Cell
                    key={value}
                    title={name}
                    onPress={() => handleCellPress(value)}
                    iconRight={
                      <IconSymbol
                        icon="check"
                        color={'$primary2'}
                        title="Select"
                        isScreenReadable
                      />
                    }
                  ></CellGroup.Cell>
                ))}
              </ToastProvider>
            </CellGroup>
          </Modal>
        </BottomSheet>
      </Layout.Stack>
    </ToastProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Modal}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Content inside of the modal',
    },
    {
      name: 'title',
      type: 'string',
      description: 'The title of the modal',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to check if modal is visible',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'Content inside the footer section of the modal',
    },
    {
      name: 'actionLeft',
      type: 'node',
      description: 'The action placed on the left side of the header',
    },
    {
      name: 'actionRight',
      type: 'node',
      description: 'The action placed on the right side of the header',
    },
    {
      name: 'sticker',
      type: 'node',
      description:
        'Content at the top of the modal that stays in the header and does not scroll',
    },
    {
      name: 'onActionLeftPress',
      type: 'function',
      description: 'Callback fired when the left action button is pressed',
    },
    {
      name: 'onActionRightPress',
      type: 'function',
      description: 'Callback fired when the right action button is pressed',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the modal is triggered to close',
      system: 'ios',
    },
    {
      name: 'onDismiss',
      type: 'function',
      description: 'Callback fired when the modal is closed',
      system: 'ios',
    },
    {
      name: 'hideBorder',
      type: 'boolean',
      description: 'Flag to hide the header border',
      default: 'false',
    },
    {
      name: 'showsVerticalScrollIndicator',
      type: 'boolean',
      description: 'Flag to show the vertical scroll indicator',
      default: 'false',
    },
    {
      name: 'scrollable',
      type: 'boolean',
      description:
        "Flag to make the content scrollable. Setting to false will turn the Modal's content container into a View",
      default: 'true',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Modal.Section}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Content inside of the section',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Modal}
  rows={[
    {
      name: 'modal-root',
      description: 'Modal root element',
    },
    {
      name: 'modal-header',
      description: 'Modal header container',
    },
    {
      name: 'modal-action-left-button',
      description: 'Action left container',
    },
    {
      name: 'modal-children-container',
      description: 'Modal content',
    },
    {
      name: 'modal-action-right-button',
      description: 'Action right container',
    },
    {
      name: 'modal-title-container',
      description: 'Modal title container',
    },
    {
      name: 'modal-title',
      description: 'Modal title element',
    },
    {
      name: 'modal-long-title',
      description: 'Modal heading element',
    },
    {
      name: 'modal-footer',
      description: 'Modal footer container',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Modal.Section}
  rows={[
    {
      name: 'modal-section-root',
      description: 'Modal section root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Focus Guidance

Abyss does not control the focus of components on the screen when the Modal is toggled off. To meet
accessibility guidelines, the focus must be set to the previous node when closed. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For example, if a button is pressed to open a Modal, focus must return to that button once the Modal is closed, so that a screen reader or keyboard user may continue using the app where they left off.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Modal} keys={['modal']} />
```

</Tab>

---
id: navigation-container
category: Navigation
title: NavigationContainer
description: Responsible for managing app state and linking your top-level navigator to the app environment.
---

<Tab label="Overview">

```jsx
import { NavigationContainer } from '@uhg-abyss/mobile';
```

The container takes care of platform specific integration and provides various useful functionality:

- Deep link integration with the linking prop.
- Notify state changes for screen tracking, state persistence etc.
- Handle system back button on Android by using the BackHandler API from React Native.

## Usage

```jsx
import { NavigationContainer, createStackNavigator } from '@uhg-abyss/mobile';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>{/* ... */}</Stack.Navigator>
    </NavigationContainer>
  );
}
```

## Initial State

The `initialState` prop accepts initial state for the navigator. This can be useful for cases such as deep linking, state persistence etc.

**Example:**

```jsx
<NavigationContainer initialState={initialState}>
  {/* ... */}
</NavigationContainer>
```

Providing a custom initial state object will override the initial state object obtained via linking configuration or from browser's URL. If you're providing an initial state object, make sure that you don't pass it on web and that there's no deep link to handle.

## State Change

The `onStateChange` prop accepts a function that gets called every time navigation state changes. It receives the new navigation state as the argument.

You can use it to track the focused screen, persist the navigation state etc.

**Example:**

```jsx
<NavigationContainer
  onStateChange={(state) => console.log('New state is', state)}
>
  {/* ... */}
</NavigationContainer>
```

## onReady

The `onReady` prop accepts a function which is called after the navigation container and all its children finish mounting for the first time. You can use it for:

Making sure that the ref is usable. See docs regarding initialization of the ref for more details.
Hiding your native splash screen

**Example:**

```jsx
<NavigationContainer
  onReady={() => console.log('Navigation container is ready')}
>
  {/* ... */}
</NavigationContainer>
```

## onUnhandledAction

The `onUnhandledAction` prop accepts a function which is called when a navigation action is not handled by any of the navigators.

By default, a development-only error message will be shown when an action was not handled. You can override the default behavior by providing a custom function.

## Linking

The `linking` props handles configuration for linking integration used for deep linking, URL support in browsers etc.

**Example:**

```jsx
import { NavigationContainer } from '@uhg-abyss/mobile';

function App() {
  const linking = {
    prefixes: ['https://mychat.com', 'mychat://'],
    config: {
      screens: {
        Home: 'feed/:sort',
      },
    },
  };

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      {/* content */}
    </NavigationContainer>
  );
}
```

## Fallback

The `fallback` prop is a React Element to use as a fallback while we resolve deep links. Defaults to `null`.

If you have a native splash screen, please use `onReady` instead of fallback prop.

**Example:**

```jsx
<NavigationContainer fallback={<Text>Loading...</Text>}>
  {/* content */}
</NavigationContainer>
```

## Independent

Use the `independent` prop when the navigation container should be independent of parent containers. If this is not set to true, this container cannot be nested inside another container. Setting it to true disconnects any children navigators from parent container.

You probably don't want to set this to true in a typical React Native app. This is only useful if you have navigation trees that work like their own mini-apps and don't need to navigate to the screens outside of them.

</Tab>

<Tab label='Integration'>

```jsx render
<Docs.PropsTable
  of={NavigationContainer}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Content inside of the navigation container',
    },
    {
      name: 'initialState',
      type: 'object',
      description: 'Prop that accepts initial state for the navigator',
    },
    {
      name: 'onStateChange',
      type: 'function',
      description:
        'Function that gets called every time navigation state changes',
    },
    {
      name: 'onReady',
      type: 'function',
      description:
        'Function which is called after the navigation container and all its children finish mounting for the first time',
    },
    {
      name: 'onUnhandledAction',
      type: 'function',
      description:
        'Function which is called when a navigation action is not handled by any of the navigators',
    },
    {
      name: 'linking',
      type: 'object',
      description:
        'Configuration for linking integration used for deep linking',
    },
    {
      name: 'independent',
      type: 'boolean',
      description:
        'Whether this navigation container should be independent of parent containers',
    },
  ]}
/>
```

</Tab>

---
id: needhelp
category: CTA
title: NeedHelp
description: Provides in-app help content, always at the bottom of the page
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=36393-5275&mode=design&t=kg0BV3Q6dFmAIOBa-0
---

<Tab label="Overview">

```jsx
import { NeedHelp } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'NeedHelp',
  inputs: [
    {
      prop: 'title',
      type: 'string',
    },
    {
      prop: 'description',
      type: 'string'
    },

  ]
}

<NeedHelp title="Completed Health Screen:" description="Review of your results are ready.">
  <NeedHelp.Button>Go To Results</NeedHelp.Button>
</NeedHelp>
```

## Title and Description

The `title` and `description` props are used to set the title and description of NeedHelp.
Both props are required. The `description` can also take a node.

```jsx live
<NeedHelp
  title="Completed Health Screen:"
  description="Review of your results are ready."
>
  <NeedHelp.Link
    after={<IconSymbol icon="chevron_right" size={20} color="$interactive1" />}
  >
    Go To Results
  </NeedHelp.Link>
</NeedHelp>
```

## Children

Add Children to the NeedHelp component by simply placing elements between the NeedHelp tags. Children should be used for adding either a link or button.
Links and buttons can be added with the `NeedHelp.Link` and `NeedHelp.Button` components, respectively.

```jsx live
<Layout.Stack grow space={8}>
  <NeedHelp
    title="Looking for non-Rx purchases?"
    description="Go to the Optum Store for HSA/FSA Eligible products"
  >
    <NeedHelp.Link
      after={
        <IconSymbol icon="chevron_right" size={20} color="$interactive1" />
      }
    >
      Go To Results
    </NeedHelp.Link>
  </NeedHelp>

  <NeedHelp
    title="Are you looking for claims?"
    description={
      <Text>
        Claims can be found from a shortcut on the homescreen. Tap the button
        below to go to your claims.
      </Text>
    }
  >
    <NeedHelp.Button>My Claims</NeedHelp.Button>
  </NeedHelp>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={NeedHelp}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the NeedHelp component',
    },
    {
      name: 'title',
      type: 'string',
      description: 'Sets the title for the NeedHelp',
    },
    {
      name: 'description',
      type: 'string || node',
      description: 'Sets the description for the NeedHelp',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={NeedHelp.Link}
  rows={[
    {
      name: 'before',
      type: 'ReactNode',
      description: 'Insert element into link component before children',
    },
    {
      name: 'after',
      type: 'ReactNode',
      description: 'Insert element into link component after children',
    },
    {
      name: 'href',
      type: 'string',
      description: 'Set the URL of the link',
    },
    {
      name: 'children',
      type: 'ReactNode',
      description: 'Set the text of the link',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={NeedHelp.Button}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the button component',
    },
    {
      name: 'before',
      type: 'node',
      description: 'Insert element into button component before children',
    },
    {
      name: 'after',
      type: 'node',
      description: 'Insert element into button component after children',
    },
    {
      name: 'rounded',
      type: 'boolean',
      description: 'Flag to make button rounded',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={NeedHelp}
  rows={[
    {
      name: 'need-help-root',
      description: 'NeedHelp root element',
    },
    {
      name: 'need-help-title',
      description: 'NeedHelp title element',
    },
    {
      name: 'need-help-text',
      description: 'NeedHelp text element',
    },
    {
      name: 'need-help-children-container',
      description: 'NeedHelp children container',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={NeedHelp.Link}
  rows={[
    {
      name: 'need-help-link-root',
      description: 'NeedHelp link element',
    },
  ]}
  inherits={[{ name: 'Link', link: '/mobile/ui/link' }]}
/>
```

```jsx render
<Docs.ClassesTable
  of={NeedHelp.Button}
  rows={[
    {
      name: 'need-help-button-root',
      description: 'NeedHelp link element',
    },
  ]}
  inherits={[{ name: 'Button', link: '/mobile/ui/button' }]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={NeedHelp} keys={['need-help']} />
```

</Tab>

---
id: nib-group
category: CTA
title: NibGroup
description: Nibs are pressable components used within a group for displaying pre-engineered copy or user-generated information.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=28575%3A52270
---

<Tab label="Overview">

```jsx
import { NibGroup } from '@uhg-abyss/mobile';
```

## Icon

Use the `icon` prop to insert an icon before the text element. The Brand icon should have `variant={'twotone'}` and be paired with a pre-engineered copy, while the Material icon should have the props `color={'$gray3'} variant={'outlined'}` and be paired with user generated information. See <ExitLink href="https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=28575%3A52270&mode=dev">Figma</ExitLink> for more details.

```jsx live
() => {
  const NibList = [
    <NibGroup.Nib
      key={'nib1'}
      icon={<IconBrand icon={'location_pin'} size={24} variant={'twotone'} />}
    >
      Primary care providers
    </NibGroup.Nib>,
    <NibGroup.Nib
      key={'nib2'}
      icon={
        <IconSymbol
          icon={'search'}
          size={24}
          color={'$gray3'}
          variant={'outlined'}
        />
      }
    >
      Search History
    </NibGroup.Nib>,
  ];

  return (
    <NibGroup size={'small'} type={'list'}>
      {NibList}
    </NibGroup>
  );
};
```

## onPress

Use the `onPress` function to handle the action when a Nib is pressed.

```jsx live
() => {
  const handlePress = () => {
    console.log('Pressed');
  };

  return (
    <NibGroup size={'small'} type={'list'}>
      <NibGroup.Nib
        key={'nib1'}
        onPress={handlePress}
        icon={<IconBrand icon={'location_pin'} size={24} variant={'twotone'} />}
      >
        Primary care providers in Minneapolis, MN
      </NibGroup.Nib>
    </NibGroup>
  );
};
```

## NibGroup

Nibs must be wrapped in a group using `NibGroup`.

### Type

Use the `type` prop to determine how the Nib Group will be displayed. By default the type is set to `list`.

### List

Nibs placed in a list will be displayed in rows of two. When the font scale doubles on a mobile device, the nibs will grow to the full width of the container.

```jsx live
() => {
  const NibList = [
    <NibGroup.Nib
      key={'nib1'}
      icon={<IconBrand icon={'location_pin'} size={24} variant={'twotone'} />}
    >
      Primary care providers
    </NibGroup.Nib>,
    <NibGroup.Nib
      key={'nib2'}
      icon={<IconBrand icon={'location_pin'} size={24} variant={'twotone'} />}
    >
      Primary care providers
    </NibGroup.Nib>,
    <NibGroup.Nib
      key={'nib3'}
      icon={<IconBrand icon={'location_pin'} size={24} variant={'twotone'} />}
    >
      Primary care providers
    </NibGroup.Nib>,
  ];

  return (
    <NibGroup type={'list'} size="small">
      {NibList}
    </NibGroup>
  );
};
```

### Carousel

Nibs placed in a carousel will be organized on a slide.

```jsx live
() => {
  const NibList = [
    <NibGroup.Nib
      key={'nib1'}
      icon={
        <IconSymbol
          icon={'search'}
          size={24}
          color={'$gray3'}
          variant={'outlined'}
        />
      }
    >
      Primary care providers in the Essentia Health system
    </NibGroup.Nib>,
    <NibGroup.Nib
      key={'nib2'}
      icon={
        <IconSymbol
          icon={'search'}
          size={24}
          color={'$gray3'}
          variant={'outlined'}
        />
      }
    >
      Primary care providers in the Essentia Health system in Minneapolis,
      Minnesota
    </NibGroup.Nib>,
    <NibGroup.Nib
      key={'nib3'}
      icon={
        <IconSymbol
          icon={'search'}
          size={24}
          color={'$gray3'}
          variant={'outlined'}
        />
      }
    >
      Primary care providers in the Essentia Health system in Eden Prairie,
      Minnesota
    </NibGroup.Nib>,
    <NibGroup.Nib
      key={'nib4'}
      icon={
        <IconSymbol
          icon={'search'}
          size={24}
          color={'$gray3'}
          variant={'outlined'}
        />
      }
    >
      Primary care providers in the Essentia Health system in Duluth, Minnesota
    </NibGroup.Nib>,
  ];

  return (
    <Box color={'white'}>
      <CellGroup.Cell
        hideBorderTop
        hideBorderBottom
        highlight
        title="Nibs in a carousel on a cell"
        onPress={() => {
          console.log('cell pressed');
        }}
      ></CellGroup.Cell>
      <NibGroup type="carousel" size={'large'}>
        {NibList}
      </NibGroup>
    </Box>
  );
};
```

### Sizes

Use the `size` prop to determine the size of the Nibs. By default, `size` is set to `small`. Following design guidelines, Nibs using Material Icons and pre-engineered copy should only use the `small` variant. Nibs displaying user-generated information can use `medium` or `large` depending on the anticipated content size.

```jsx live
() => {
  const NibList = [
    <NibGroup.Nib
      key={'nib1'}
      icon={
        <IconSymbol
          icon={'search'}
          size={24}
          color={'$gray3'}
          variant={'outlined'}
        />
      }
    >
      Primary care providers in the Essentia Health system
    </NibGroup.Nib>,
    <NibGroup.Nib
      key={'nib2'}
      icon={
        <IconSymbol
          icon={'search'}
          size={24}
          color={'$gray3'}
          variant={'outlined'}
        />
      }
    >
      Primary care providers in the Essentia Health system in Minneapolis,
      Minnesota
    </NibGroup.Nib>,
    <NibGroup.Nib
      key={'nib3'}
      icon={
        <IconSymbol
          icon={'search'}
          size={24}
          color={'$gray3'}
          variant={'outlined'}
        />
      }
    >
      Primary care providers in the Essentia Health system in Eden Prairie,
      Minnesota
    </NibGroup.Nib>,
    <NibGroup.Nib
      key={'nib4'}
      icon={
        <IconSymbol
          icon={'search'}
          size={24}
          color={'$gray3'}
          variant={'outlined'}
        />
      }
    >
      Primary care providers in the Essentia Health system in Duluth, Minnesota
    </NibGroup.Nib>,
  ];

  return (
    <Layout.Stack space={12} grow>
      <Heading offset={6}>Small</Heading>
      <NibGroup type={'list'} size="small">
        <NibGroup.Nib
          key={'nib1'}
          icon={
            <IconBrand icon={'location_pin'} size={24} variant={'twotone'} />
          }
        >
          Primary care providers
        </NibGroup.Nib>
        <NibGroup.Nib
          key={'nib2'}
          icon={
            <IconBrand icon={'location_pin'} size={24} variant={'twotone'} />
          }
        >
          Primary care providers
        </NibGroup.Nib>
      </NibGroup>
      <Heading offset={6}>Medium</Heading>
      <NibGroup type="carousel" size={'medium'}>
        {NibList}
      </NibGroup>
      <Heading offset={6}>Large</Heading>
      <NibGroup type="carousel" size={'large'}>
        {NibList}
      </NibGroup>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={NibGroup.Nib}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the nib component',
    },
    {
      name: 'icon',
      type: 'node',
      description: 'The icon of the nib component',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the nib is pressed',
    },
    {
      name: 'onPressIn',
      type: 'function',
      description: ' Callback fired at the start of the nib press',
    },
    {
      name: 'onPressOut',
      type: 'function',
      description: 'Callback fired at the end of the nib press',
    },
    {
      name: 'size',
      type: "'small' | 'medium' | 'large'",
      description:
        'The size of the nibs. Nibs in a list should use small, while nibs in a carousel can use medium or large',
      default: 'small',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={NibGroup}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the Nib Group component',
    },
    {
      name: 'type',
      type: "'list' | 'carousel'",
      description:
        'The type of Nib group. This can either be a list or carousel',
      default: 'list',
    },
    {
      name: 'size',
      type: "'small' | 'medium' | 'large'",
      description:
        'The size of the nibs. Nibs in a list should use small, while nibs in a carousel can use medium or large',
      default: 'small',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={NibGroup.Nib}
  rows={[
    {
      name: 'nib-root',
      description: 'The root element',
    },
    {
      name: 'nib',
      description: 'The nib element',
    },
    {
      name: 'nib-text',
      description: 'The text element',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={NibGroup}
  rows={[
    {
      name: 'nib-group-root',
      description: 'The group root element',
    },
  ]}
/>
```

</Tab>

---
id: notification
category: Feedback
title: Notification
description: A container used to display information to the user.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=42686-245323&mode=design&t=i3zoWjm6y2FTIEfZ-0
---

<Tab label="Overview">

```jsx
import { Notification } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Notification',
  inputs: [
    {
      prop: 'children',
      type: 'string',
    },

    {
      prop: 'seen',
      type: 'boolean',
    },

  ]
}

<Notification date={new Date()} >
  Notification Sandbox
</Notification>
```

## Basic usage

The content of the `Notification` component is made up `children` and `date`. The `date` prop is required and takes a Javascript Date object.

```jsx live
() => {
  const [value, setValue] = useState(false);
  const [value2, setValue2] = useState(false);
  const date1 = new Date();
  const date2 = new Date(2022, 3, 11);

  return (
    <Layout.Stack grow>
      <Notification date={date1}>
        Add your dependents to your account to view their claims and coverage.
      </Notification>
      <Notification date={date2}>
        Your claim has been processed. View your Explanation of Benefits.
      </Notification>
    </Layout.Stack>
  );
};
```

## Seen

The `seen` prop handles the state of the Notification. When `true` the text of the component is bold, with a round indicator. `onPress` will be called once the Notification is pressed.

```jsx live
() => {
  const [value, setValue] = useState(false);
  const [value2, setValue2] = useState(false);
  const date1 = new Date();
  const date2 = new Date(2021, 7, 21);

  return (
    <Layout.Stack grow>
      <Notification seen={value} onPress={() => setValue(true)} date={date1}>
        New! Now you can get care cost estimates then compare, save and share
        them.
      </Notification>
      <Notification seen={value2} onPress={() => setValue2(true)} date={date2}>
        Go paperless and save time! Sign up for electronic delivery of your
        Explanation of Benefits.
      </Notification>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Notification}
  rows={[
    {
      name: 'children',
      type: 'string',
      description: 'The text body of the component',
    },
    {
      name: 'date',
      type: 'Date',
      description: 'Set the date of the notification',
    },
    {
      name: 'seen',
      type: 'boolean',
      description: 'Flag to set the notification as seen',
      default: 'false',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when notification is pressed',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Notification}
  rows={[
    {
      name: 'notification-root',
      description: 'Notification root',
    },
    {
      name: 'notification-text',
      description: 'Notification text',
    },
    {
      name: 'notification-dot',
      description: 'Notification dot',
    },
    {
      name: 'notification-date',
      description: 'Notification date',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Notification} keys={['notification']} />
```

</Tab>

---
id: number-stepper
category: Controls
title: NumberStepper
description: A two-segment UI control used to incrementally increase or decrease a numeric value.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=52553-4919&mode=design&t=jeurw9GyqLDTHSBG-0
---

<Tab label="Overview">

```jsx
import { NumberStepper } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'NumberStepper',
  inputs: [
    {
      prop: 'maximumValue',
      type: 'number',
      default: 99,
    },
        {
      prop: 'minimumValue',
      type: 'number',
      default: 0,
    },
    {
      prop: 'title',
      type: 'string',
    },
    {
      prop: 'description',
      type: 'string'
    },
        {
      prop: 'isDisabled',
      type: 'boolean'
    },
  ]
}

() => {
  const [value, setValue] = useState(0)
  return(
    <NumberStepper
    title="Title Here"
    description="2 lines max description here"
    value={value}
    onChange={setValue}
    />
  );
};

```

## useState

The `useState` hook gets the value from the component state. It is required to pass in the starting number to the `value` prop.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Adults"
      description="Age 18 and above"
      value={value}
      onChange={setValue}
    />
  );
};
```

## Title

Use the `title` prop to set the title for the input. It is required to pass in a string to the `title` prop.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper title="Title Only Input" value={value} onChange={setValue} />
  );
};
```

## Description

Use the `description` prop to set the description for the input.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Adults"
      description="Age 18 and above"
      value={value}
      onChange={setValue}
    />
  );
};
```

## Min and Max Values

Use the `minimumValue` and `maximumValue` to constrain the stepper to a specific range. By default this range is 0-99.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Number range"
      description="Pick a number between 1 and 10"
      value={value}
      onChange={setValue}
      minimumValue={1}
      maximumValue={10}
    />
  );
};
```

## Disabled

Use the `isDisabled` prop to disable the stepper. By default, the add or remove buttons disable when the min or max is reached.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Adults"
      description="Age 18 and above"
      value={value}
      onChange={setValue}
      isDisabled={true}
    />
  );
};
```

## Error Message

Use the `errorMessage` prop to display a message below the description.

```jsx live
() => {
  const [value, setValue] = useState(1);

  return (
    <NumberStepper
      title="Child car seat(s)"
      description="How many child car seats are you bringing?"
      value={value}
      onChange={setValue}
      minimumValue={1}
      maximumValue={5}
      errorMessage="Driver has the right to refuse service without proper child seats"
    />
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={NumberStepper}
  rows={[
    {
      name: 'value',
      type: 'number',
      description: 'The current value of the number stepper',
    },
    {
      name: 'title',
      type: 'node',
      description: 'The title of the number stepper',
    },
    {
      name: 'description',
      type: 'string',
      description: 'The description of the number stepper',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the add or remove button is pressed',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below the stepper',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the stepper. If true, both buttons will be disabled',
      default: 'false',
    },
    {
      name: 'maximumValue',
      type: 'numbers',
      description: 'Specifies the number the stepper can be increased to',
    },
    {
      name: 'minimumValue',
      type: 'number',
      description: 'Specifies the number the stepper can be decreased to',
    },
    {
      name: 'increaseRef',
      type: 'shape',
      description: 'The ref to be passed to the increase button',
    },
    {
      name: 'decreaseRef',
      type: 'shape',
      description: 'The ref to be passed to the decrease button',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={NumberStepper}
  rows={[
    {
      name: 'number-stepper-root',
      description: 'Root element',
    },
    {
      name: 'number-stepper-container',
      description: 'Container around title, description and buttons',
    },
    {
      name: 'number-stepper-title',
      description: 'Title element',
    },
    {
      name: 'number-stepper-description',
      description: 'Description element',
    },
    {
      name: 'number-stepper-button',
      description: 'Button element',
    },
    {
      name: 'number-stepper-message',
      description: 'Error message',
    },
    {
      name: 'number-stepper-icon',
      description: 'Icon element',
    },
    {
      name: 'number-stepper-count',
      description: 'Count element',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

AX5 reorders items to a vertical stack.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={NumberStepper} keys={['number-stepper']} />
```

</Tab>

---
id: overlay
category: Layout
title: Overlay
description: Semi-transparent overlay with a cutout, for use with the camera to scan barcodes.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/fg0s3SgvOxjhYn4q6HuCS0/Abyss-Mobile?node-id=19209-94534&t=zrt5RmcAOzZcdk3r-0
---

<Tab label="Overview">

```jsx
import { Overlay } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Overlay',
  inputs: [
    {
      prop: 'color',
      type: 'string',
    },
    {
      prop: 'frameHeight',
      type: 'number',
    },
    {
      prop: 'frameRadius',
      type: 'number',
    },
    {
      prop: 'sideWidth',
      type: 'number',
    },
    {
      prop: 'topHeight',
      type: 'number',
    },
    {
      prop: 'opacity',
      type: 'slider',
      minValue: 0,
      maxValue: 1,
      step: 0.1,
    },
  ]
}

() => {
  return (
    <React.Fragment>
      <Overlay />
    </React.Fragment>
  );
}

```

## Header

Set the `header` prop to a React component to have that component shown above the overlay.

```jsx live
const Container = styled('View', {
  minHeight: 300,
});

const TextContainer = styled('View', {
  flex: 1,
  flexDirection: 'column',
  justifyContent: 'space-around',
  alignItems: 'center',
});

const Header = styled('View', {
  backgroundColor: '$black',
  padding: 16,
  alignItems: 'center',
  justifyContent: 'center',
});

const HeaderText = styled('Text', {
  color: '$white',
});

render(() => {
  return (
    <Container>
      <Overlay
        header={
          <Header>
            <HeaderText>This is the header</HeaderText>
          </Header>
        }
      >
        <TextContainer>
          <Text>Testing</Text>
          <Text>Testing</Text>
          <Text>Testing</Text>
        </TextContainer>
      </Overlay>
    </Container>
  );
});
```

## Footer

Set the `footer` prop to a React component to have that component shown below the overlay.

```jsx live
const Container = styled('View', {
  minHeight: 300,
});

const TextContainer = styled('View', {
  flex: 1,
  flexDirection: 'column',
  justifyContent: 'space-around',
  alignItems: 'center',
});

const FooterContainer = styled('View', {
  backgroundColor: '$black',
  padding: 16,
  alignItems: 'center',
  justifyContent: 'center',
});

const FooterText = styled('Text', {
  color: '$white',
});

render(() => {
  return (
    <Container>
      <Overlay
        footer={
          <FooterContainer>
            <FooterText>This is the footer</FooterText>
          </FooterContainer>
        }
      >
        <TextContainer>
          <Text>Testing</Text>
          <Text>Testing</Text>
          <Text>Testing</Text>
        </TextContainer>
      </Overlay>
    </Container>
  );
});
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Overlay}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Content under the overlay',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Color of the overlay',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'Component to show at the bottom of the overlay',
    },
    {
      name: 'frameHeight',
      type: 'number',
      description: 'Height of the transparent cutout frame',
    },
    {
      name: 'frameRadius',
      type: 'number',
      description: 'Border radius of the transparent cutout frame',
    },
    {
      name: 'header',
      type: 'node',
      description: 'Component to show at the top of the overlay',
    },
    {
      name: 'opacity',
      type: 'number',
      description:
        'Opacity of the overlay, with a range between 0 (fully transparent) and 1 (fully opaque)',
    },
    {
      name: 'sideWidth',
      type: 'number',
      description:
        'Amount of space between the vertical edges of the transparent cutout frame and the sides of the device',
    },
    {
      name: 'topHeight',
      type: 'number',
      description:
        'Amount of space between the header (or top of the overlay if no header is provided) and the transparent cutout frame',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Overlay}
  rows={[
    {
      name: 'overlay-root',
      description: 'Overlay root element',
    },
    {
      name: 'overlay-header',
      description: 'Overlay header',
    },
    {
      name: 'overlay-container',
      description: 'Overlay container',
    },
    {
      name: 'overlay-frame-container',
      description: 'Overlay frame container',
    },
    {
      name: 'overlay-frame',
      description: 'Overlay frame',
    },
    {
      name: 'overlay-footer',
      description: 'Overlay footer',
    },
  ]}
/>
```

</Tab>

---
id: popover-v2
category: Layout
title: V2Popover
description: A popover displays content on top of the page in a separate container and requires user action.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=31310-52671&mode=design&t=Ra4lP896wr2B96P7-0
subDirectory: Popover/v2
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2Popover } from '@uhg-abyss/mobile';
```

## useState

Pass the value from the `useState` hook to the `isVisible` prop to set the open state of the popover.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open useState Example</Button>
      <V2Popover
        heading="Heading"
        paragraph="Paragraph copy goes below the title. Copy can be a 100 characters maximum and expands on no more than four lines"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        media={<Slot light>Media Content</Slot>}
        content={<Slot light>Content Section</Slot>}
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      ></V2Popover>
    </React.Fragment>
  );
};
```

## Heading

Use the `heading` prop to set the heading of the popover. For accessibility purposes, a heading is required.
Please provide a heading that accurately describes the content of the popover so a screen reader
can provide the description to the user.

Use the `headingSize` prop to set the size of the heading. The `headingSize` prop accepts `small` and `large` as values.
The default size is `large`.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);
  const [isVisible2, setIsVisible2] = useState(false);
  return (
    <Layout.Stack grow>
      <Button onPress={() => setIsVisible(true)}>Open Heading Example</Button>
      <V2Popover
        heading="Descriptive and Concise Heading"
        headingSize="small"
        paragraph="The heading should be concise and clear and must not expand on more than 2 lines"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      ></V2Popover>
    </Layout.Stack>
  );
};
```

## Paragraph

Use the `paragraph` prop to add a description below the heading. The paragraph should be concise and clear and must not expand on more than 4 lines.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Paragraph Example</Button>
      <V2Popover
        heading="Descriptive and Concise heading"
        paragraph="Paragraph copy goes below the title. Copy can be a 100 characters maximum and expands on no more than four lines"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      ></V2Popover>
    </React.Fragment>
  );
};
```

## Content

Use the `content` prop to add custom content below the paragraph.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Content Example</Button>
      <V2Popover
        heading="Descriptive and Concise heading"
        paragraph="Paragraph copy goes below the title. Copy can be a 100 characters maximum and expands on no more than four lines"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        content={
          <Text textAlign="center">
            The content section is where you can add custom content.
          </Text>
        }
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      ></V2Popover>
    </React.Fragment>
  );
};
```

## Media

Use the `media` prop to add custom content above the heading.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Media Example</Button>
      <V2Popover
        heading="Abyss Design System"
        paragraph="The header content goes above the title. Here you can add custom content or replace with an existing Abyss component"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        media={
          <Image
            style={{
              width: 100,
              height: 100,
              alignSelf: 'center',
              marginTop: '$md',
            }}
            source="/img/logo.svg"
          />
        }
        footer={
          <Button variant="tertiary" onPress={() => setIsVisible(false)}>
            Close
          </Button>
        }
      ></V2Popover>
    </React.Fragment>
  );
};
```

## Footer

Use the `footer` prop to place content at the bottom of the popover. The popover must always have at least one button, so users can close it.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Footer Example</Button>
      <V2Popover
        heading="Descriptive and Concise heading"
        paragraph="Footer buttons stack vertically or horizontally and contain up to three OS specific buttons in the order that they are placed in the component. The Popover must always have at least one button, so users can close it"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        footer={
          <Layout.Stack grow>
            <Button onPress={() => setIsVisible(false)}>Close</Button>
            <Button variant="secondary" onPress={() => setIsVisible(false)}>
              Close
            </Button>
            <Button variant="tertiary" onPress={() => setIsVisible(false)}>
              Close
            </Button>
          </Layout.Stack>
        }
      ></V2Popover>
    </React.Fragment>
  );
};
```

## onClose

Use the `onClose` function to handle the action when close button is triggered or when the background is pressed.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open onClose Example</Button>
      <V2Popover
        heading="Title"
        paragraph="Paragraph copy goes below the title. Copy can be a 100 characters maximum and expands on no more than four lines"
        isVisible={isVisible}
        onClose={() => {
          setIsVisible(false);
          console.log('Popover closed by background tap');
        }}
        footer={
          <Button
            onPress={() => {
              setIsVisible(false);
              console.log('Popover closed by button');
            }}
          >
            Close
          </Button>
        }
      ></V2Popover>
    </React.Fragment>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2Popover}
  rows={[
    {
      name: 'heading',
      type: 'string',
      description: 'Heading of the popover',
    },
    {
      name: 'headingSize',
      type: "'large' | 'small'",
      default: 'large',
      description: 'Size of the heading',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'Component to show at the bottom of the popover',
    },
    {
      name: 'media',
      type: 'node',
      description: 'Component to show at the top of the popover',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the popover is triggered to close',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to check if the popover is visible',
      default: 'false',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'Paragraph copy goes below the heading',
    },
    {
      name: 'content',
      type: 'string',
      description: 'Content of the popover',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Popover}
  rows={[
    {
      name: 'popover-root',
      description: 'Popover root element',
    },
    {
      name: 'popover-overlay',
      description: 'Popover overlay element',
    },
    {
      name: 'popover-dialog',
      description: 'Popover dialog element',
    },
    {
      name: 'popover-text-container',
      description: 'Popover container for text elements',
    },
    {
      name: 'popover-heading',
      description: 'The heading text element of the popover',
    },
    {
      name: 'popover-paragraph',
      description: 'The paragraph text element of the popover',
    },
    {
      name: 'popover-footer',
      description: 'Popover footer element',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

To accommodate for larger text sizes, the popover will scroll when it has grown to have a 16px margin on the top and bottom. Depending on the screen size, the height of the popover when scrollable will vary. The footer does not scroll with the rest of the content. Please follow design guidelines when deciding the amount of content to place within popover.

## Focus Guidance

Abyss does not control the focus of components on the screen when the Popover is toggled off. To meet
accessibility guidelines, the focus must be set to the previous node when closed. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For example, if a button is pressed to open a popover, focus must return to that button once the popover is closed, so that a screen reader or keyboard user may continue using the app where they left off.

</Tab>

<Tab label='Migration'>
```jsx render
<Docs.ComparisonTable of={Popover} type="class" />
```

```jsx render
<Docs.ComparisonTable of={Popover} type="props" />
```

</Tab>

---
id: popover
category: Layout
title: Popover
description: A popover displays content on top of the page in a separate container and requires user action.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=31310-52671&mode=design&t=Ra4lP896wr2B96P7-0
subDirectory: Popover/v1
---

<Tab label="Overview">

```jsx
import { Popover } from '@uhg-abyss/mobile';
```

## useState

Pass the value from the `useState` hook to the `isVisible` prop to set the open state of the popover.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open useState Example</Button>
      <Popover
        title="Title"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        header={
          <Box color="$info2" padding={'$xs'}>
            <Text
              size={'$xs'}
              textAlign="center"
              color="$primary1"
              numberOfLines={1}
            >
              header content
            </Text>
          </Box>
        }
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      >
        Paragraph copy goes below the title. Copy can be a 100 characters
        maximum and expands on no more than four lines
      </Popover>
    </React.Fragment>
  );
};
```

## Title

Use the `title` prop to set the title of the popover. For accessibility purposes, a title is required.
Please provide a title that accurately describes the content of the popover so a screen reader
can provide the description to the user.

A node can be passed in instead of a string but note that accessibility will not be passed in automatically.

Passing in the prop `variant='error'` will change the title to a level 5 heading. The default is a level 3 heading.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);
  const [isVisible2, setIsVisible2] = useState(false);
  return (
    <Layout.Stack grow>
      <Button onPress={() => setIsVisible(true)}>Open Title Example</Button>
      <Popover
        title="Descriptive and Concise Title"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        footer={<Button onPress={() => setIsVisible(false)}>Close</Button>}
      >
        The title should be concise and clear and must not expand on more than 2
        lines
      </Popover>
    </Layout.Stack>
  );
};
```

## Header

Use the `header` prop to add custom content above the title. Use prop `variant='illustration'` to take up all available space in the header.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Header Example</Button>
      <Popover
        title="Abyss Design System"
        isVisible={isVisible}
        variant="brand"
        onClose={() => setIsVisible(false)}
        header={
          <Image
            style={{ width: 100, height: 100, alignSelf: 'center' }}
            source={'/img/logo.svg'}
          />
        }
        footer={
          <Button variant="tertiary" onPress={() => setIsVisible(false)}>
            Close
          </Button>
        }
      >
        The header content goes above the title. Here you can add custom content
        or replace with an existing Abyss component
      </Popover>
    </React.Fragment>
  );
};
```

## Children

Use the `children` prop to add content below the title. This can include paragraph copy and custom elements. Copy should be no more than 100 characters or four lines of text.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Children Example</Button>
      <Popover
        title="Descriptive and Concise Title"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        header={
          <Box color="$info2">
            <Text size="$xs" textAlign="center" color="$primary1">
              header content
            </Text>
          </Box>
        }
        footer={
          <Layout.Group space={16} grow>
            <Button variant="secondary" onPress={() => setIsVisible(false)}>
              Close
            </Button>
            <Button onPress={() => setIsVisible(false)}>Close</Button>
          </Layout.Group>
        }
      >
        Paragraph copy goes below the title. Copy can be a 100 characters
        maximum and expands on no more than four lines
        <Layout.Space space={16} />
        <Box width="100%" color="$white" accessible accessibilityRole="list">
          <Layout.Stack space={16} alignItems="left" accessible={false}>
            <Layout.Insert
              padding={16}
              before={
                <IconSymbol
                  icon={'check_circle'}
                  color={'$success1'}
                  variant={'outlined'}
                />
              }
            >
              <Text
                numberOfLines={2}
                style={{ flexShrink: 1 }}
                accessibilityRole="listitem"
              >
                List item one
              </Text>
            </Layout.Insert>
            <Layout.Insert
              padding={16}
              before={
                <IconSymbol
                  icon={'check_circle'}
                  color={'$success1'}
                  variant={'outlined'}
                />
              }
            >
              <Text
                numberOfLines={2}
                style={{ flexShrink: 1 }}
                accessibilityRole="listitem"
              >
                List item two is a bit longer
              </Text>
            </Layout.Insert>
            <Layout.Insert
              padding={16}
              before={
                <IconSymbol
                  icon={'check_circle'}
                  color={'$success1'}
                  variant={'outlined'}
                />
              }
            >
              <Text
                numberOfLines={2}
                style={{ flexShrink: 1 }}
                accessibilityRole="listitem"
              >
                List item three could even go on two lines
              </Text>
            </Layout.Insert>
          </Layout.Stack>
        </Box>
      </Popover>
    </React.Fragment>
  );
};
```

## Footer

Use the `footer` prop to place content at the bottom of the popover. The popover must always have at least one button, so users can close it.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open Footer Example</Button>
      <Popover
        title="Descriptive and Concise Title"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        footer={
          <Layout.Stack grow>
            <Button onPress={() => setIsVisible(false)}>Close</Button>
            <Button variant="secondary" onPress={() => setIsVisible(false)}>
              Close
            </Button>
            <Button variant="tertiary" onPress={() => setIsVisible(false)}>
              Close
            </Button>
          </Layout.Stack>
        }
      >
        Footer buttons stack vertically or horizontally and contain up to three
        OS specific buttons in the order that they are placed in the component.
        The Popover must always have at least one button, so users can close it
      </Popover>
    </React.Fragment>
  );
};
```

## onClose

Use the `onClose` function to handle the action when close button is triggered or when the background is pressed.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);

  const handleClose = () => {
    setIsVisible(false);
    console.log('Popover closed');
  };

  return (
    <React.Fragment>
      <Button onPress={() => setIsVisible(true)}>Open onClose Example</Button>
      <Popover
        title="Title"
        isVisible={isVisible}
        onClose={() => {
          setIsVisible(false);
          console.log('Popover closed by background tap');
        }}
        footer={
          <Button
            onPress={() => {
              setIsVisible(false);
              console.log('Popover closed by button');
            }}
          >
            Close
          </Button>
        }
      >
        Paragraph copy goes below the title. Copy can be a 100 characters
        maximum and expands on no more than four lines
      </Popover>
    </React.Fragment>
  );
};
```

### Variants

Available variants: default, error, brand and illustration. The default variant lacks the below modifications, and is automatically applied if no other variant is passed.

- Error: has a serif title, meant for use with the error icon.
- Brand: meant for use with large brand icons, has smaller top header margin.
- Illustration: heading area has no margins to allow for full width images.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);
  const [isVisible2, setIsVisible2] = useState(false);
  const [isVisible3, setIsVisible3] = useState(false);

  return (
    <Layout.Stack grow>
      <Button onPress={() => setIsVisible(true)}>
        Open Illustration Header Example
      </Button>
      <Popover
        title="Abyss Design System"
        variant={'illustration'}
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        header={
          <img src="/img/popoverExample.png" alt="background of popover" />
        }
        footer={
          <Button variant="tertiary" onPress={() => setIsVisible(false)}>
            Close
          </Button>
        }
      >
        In this example the header has no padding or margin on the top and
        sides, and reduced margin on the bottom. This allows for full fill
        images.
      </Popover>
      <Button onPress={() => setIsVisible2(true)}>
        Open Error Title Example
      </Button>
      <Popover
        title="Descriptive and Concise Title"
        variant={'error'}
        isVisible={isVisible2}
        onClose={() => setIsVisible2(false)}
        header={<IconSymbol icon="error" variant="outlined" size="$lg" />}
        footer={<Button onPress={() => setIsVisible2(false)}>Close</Button>}
      >
        Title is set to header 5, and there is increased space between icon and
        top in comparison to brand.
      </Popover>
      <Button onPress={() => setIsVisible3(true)}>
        Open Brand Header Example
      </Button>
      <Popover
        title="Abyss Design System"
        isVisible={isVisible3}
        variant="brand"
        onClose={() => setIsVisible3(false)}
        header={
          <Image
            style={{ width: 100, height: 100, alignSelf: 'center' }}
            source={'/img/logo.svg'}
          />
        }
        footer={
          <Button variant="tertiary" onPress={() => setIsVisible3(false)}>
            Close
          </Button>
        }
      >
        The brand variant is suited to large brand icons.
      </Popover>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Popover}
  rows={[
    {
      name: 'children',
      type: 'node || string',
      description: 'Content of the popover',
    },
    {
      name: 'title',
      type: 'string || node',
      description: 'Title of the popover',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'Component to show at the bottom of the popover',
    },
    {
      name: 'header',
      type: 'node',
      description: 'Component to show at the top of the popover',
    },
    {
      name: 'onClose',
      type: 'function',
      description: 'Callback fired when the popover is triggered to close',
    },
    {
      name: 'isVisible',
      type: 'boolean',
      description: 'Flag to check if the popover is visible',
      default: 'false',
    },
    {
      name: 'variant',
      type: '"default" | "error" | "brand" | "illustration"',
      description: 'Optional flag to change styling',
      default: '"default"',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Popover}
  rows={[
    {
      name: 'popover-root',
      description: 'Popover root modal element',
    },
    {
      name: 'popover-header-container',
      description: 'Popover header',
    },
    {
      name: 'popover-title',
      description: 'Popover title',
    },
    {
      name: 'popover-copy',
      description: 'Container wrapping the children elements',
    },
    {
      name: 'popover-overlay',
      description: 'The background overlay',
    },
    {
      name: 'popover-container',
      description: 'Popover style container',
    },
    {
      name: 'popover-footer-container',
      description: 'Popover footer',
    },
    {
      name: 'popover-content-container',
      description: 'Container wrapping the title and copy',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

To accommodate for larger text sizes, the popover will scroll when it has grown to have a 16px margin on the top and bottom. Depending on the screen size, the height of the popover when scrollable will vary. The footer does not scroll with the rest of the content. Please follow design guidelines when deciding the amount of content to place within popover.

## Focus Guidance

Abyss does not control the focus of components on the screen when the Popover is toggled off. To meet
accessibility guidelines, the focus must be set to the previous node when closed. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For example, if a button is pressed to open a popover, focus must return to that button once the popover is closed, so that a screen reader or keyboard user may continue using the app where they left off.

</Tab>

---
id: progress-bar
category: Data Viz
title: ProgressBar
description: Used to show users the status of loading an app, ongoing processes, saving changes/updates, and more.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=12952%3A84441&t=OIAOmowjKZ4THvqh-0
---

<Tab label="Overview">

```jsx
import { ProgressBar } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'ProgressBar',
  inputs: [
    {
      prop: 'steps',
      type: 'number',
    },
    {
      prop: 'currentStep',
      type: 'number',
    },
  ]
}

  <ProgressBar steps={5} currentStep={2} />
```

## useState

In this example, we use the `steps` prop to define the number of steps available. React's `useState` hook is used to update the `currentStep` prop.

```jsx live
() => {
  const [value, setValue] = useState(0);
  const changeValue = (operator) => {
    setValue((v) => Math.min(Math.max(v + operator, 0), 10));
  };
  return (
    <Layout.Stack space={12} grow>
      <Box color="$white">
        <ThemeProvider colorScheme="dark">
          <Box color="$primary1">
            <ProgressBar steps={10} currentStep={value} />
          </Box>
        </ThemeProvider>
        <Box color="$white">
          <ProgressBar steps={10} currentStep={value} />
        </Box>
        <Layout.Group grow>
          <Button variant="secondary" onPress={() => changeValue(-1)}>
            Subtract 1
          </Button>
          <Button onPress={() => changeValue(+1)}>Add 1</Button>
        </Layout.Group>
        <Text>Current step: {value}/10</Text>
      </Box>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={ProgressBar}
  rows={[
    {
      name: 'steps',
      type: 'number',
      description: 'Sets number of steps',
    },
    {
      name: 'currentStep',
      type: 'number',
      description: 'Sets current step',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={ProgressBar}
  rows={[
    {
      name: 'progress-bar-root',
      description: 'Progress bar root element',
    },
    {
      name: 'progress-bar-slide',
      description: 'Progress bar slide',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={ProgressBar}
  rows={['ProgressBar.textValue', 'ProgressBar.progressBar']}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={ProgressBar} keys={['progress-bar']} />
```

</Tab>

---
id: radio-group
category: Forms
title: RadioGroup
description: A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9596%3A34313&t=FBnhV14SktRX1IuI-0
---

<Tab label="Overview">

```jsx
import { RadioGroup } from '@uhg-abyss/mobile';
```

### useForm (recommended)

Using the `useForm` hook for handling RadioGroup lets the DOM handle form data.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Form submitted with data:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <RadioGroup model="radio-form">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
      <Button type="submit" size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('one');

  return (
    <RadioGroup value={radioValue} onChange={setRadioValue}>
      <RadioGroup.Radio label="One" value="one" />
      <RadioGroup.Radio label="Two" value="two" />
    </RadioGroup>
  );
};
```

## Label

Use the `label` prop to pass a string as the text next to the radio button.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <RadioGroup model="radio-label">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
      </RadioGroup>
    </FormProvider>
  );
};
```

## Children

Content passed to the radio as children will be displayed in place of the label prop. If a value is passed to the label prop in addition to children, the label prop will take priority.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <RadioGroup model="radio-children">
        <RadioGroup.Radio value="one">
          <Box color="$interactive3" width="100%" style={{ marginLeft: 12 }}>
            <Text color="$primary1">Abyss 1</Text>
          </Box>
        </RadioGroup.Radio>
        <RadioGroup.Radio value="two">
          <Box color="$primary1" width="100%" style={{ marginLeft: 12 }}>
            <Text color="$interactive3">Abyss 2</Text>
          </Box>
        </RadioGroup.Radio>
      </RadioGroup>
    </FormProvider>
  );
};
```

## Side

Use the `side` prop to place the label text on the left or right side of the radio buttons. By default, the prop is set to `left`, which is the upper example.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <RadioGroup model="radio-side-left">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
      <Layout.Space />
      <RadioGroup side="right" model="radio-side-right">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
    </FormProvider>
  );
};
```

## isDisabled

`isDisabled` will disable the radio button. It can be added to either the RadioGroup or the individual Radio components.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <Text>Individual radio buttons Disabled</Text>
      <RadioGroup model="radio-disabled-individual">
        <RadioGroup.Radio label="Uno" value="uno" />
        <RadioGroup.Radio isDisabled label="Dos" value="dos" />
        <RadioGroup.Radio isDisabled label="Tres" value="tres" />
        <RadioGroup.Radio label="Cuatro" value="cuatro" />
      </RadioGroup>
      <Layout.Space />
      <Text>All buttons in component disabled</Text>
      <RadioGroup isDisabled model="radio-disabled-group">
        <RadioGroup.Radio label="Uno" value="uno" />
        <RadioGroup.Radio label="Dos" value="dos" />
        <RadioGroup.Radio label="Tres" value="tres" />
        <RadioGroup.Radio label="Cuatro" value="cuatro" />
      </RadioGroup>
    </FormProvider>
  );
};
```

## hideLabel

The `hideLabel` prop hides the label by each radio button, and is set to `false` by default.

```jsx live
() => {
  const [radioValue, setRadioValue] = useState('four');
  const [radioValue2, setRadioValue2] = useState('one');

  return (
    <>
      <RadioGroup hideLabel value={radioValue} onChange={setRadioValue}>
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
      <Text>Value = {radioValue}</Text>
      <Layout.Space />
      <RadioGroup value={radioValue2} onChange={setRadioValue2}>
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
        <RadioGroup.Radio label="Three" value="three" />
        <RadioGroup.Radio label="Four" value="four" />
      </RadioGroup>
      <Text>Value = {radioValue2}</Text>
    </>
  );
};
```

## shrink

The `shrink` property brings labels and radio buttons closer together than the default. By default, `shrink` prop is set to `false`.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <RadioGroup shrink model="radio-shrink">
        <RadioGroup.Radio label="One" value="one" />
        <RadioGroup.Radio label="Two" value="two" />
      </RadioGroup>
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={RadioGroup}
  rows={[
    {
      name: 'side',
      type: '"left" | "right"',
      description: 'Defines the side label lands on',
      default: 'left',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the radio group value is changed',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Sets value of RadioGroup',
    },
    {
      name: 'hideLabel',
      type: 'boolean',
      description: 'Hides the label next to Radio button',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Toggles disabled state for all radio buttons in RadioGroup',
      default: 'false',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the radio group component',
    },
    {
      name: 'shrink',
      type: 'boolean',
      description: 'Places the label beside the radio button',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={RadioGroup.Radio}
  rows={[
    {
      name: 'label',
      type: 'string',
      description:
        'Sets label of radioButton. The label prop will override children',
    },
    {
      name: 'children',
      type: 'node',
      description: 'Sets the label of radioButton',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Sets value of Radio button',
    },
    {
      name: 'hideLabel',
      type: 'boolean',
      description: 'Hides label text',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Toggles disabled state for individual Radio button',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={RadioGroup}
  rows={[
    {
      name: 'radio-group-root',
      description: 'RadioGroup root element',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={RadioGroup.Radio}
  rows={[
    {
      name: 'radio-root',
      description: 'Radio root element',
    },
    {
      name: 'radio-outer-circle',
      description: 'Outer circle element',
    },
    {
      name: 'radio-inner-circle',
      description: 'Inner circle element',
    },
    {
      name: 'radio-label',
      description: 'Radio label element',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

RadioButton scales up to 3XL.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={RadioGroup} keys={['radio']} />
```

</Tab>

---
id: rating-v2
category: Data
title: V2Rating
description: Graphical representation of the degree of rating scale.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=10068-35503&mode=design&t=XOrzmaAmfVkUUtDy-0
subDirectory: Rating/v2
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2Rating } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
    component: 'V2Rating',
    inputs: [
      {
        prop: 'variant',
        type: 'select',
        options: [
          { label: 'Large', value: 'large' },
          { label: 'Small', value: 'small' },
          { label: 'Single', value: 'single' },
        ]
      },
      {
        prop: 'rating',
        type: 'string',
      },
      {
        prop: 'reviews',
        type: 'number',
      },
    ]
  }
 <V2Rating rating={3} reviews={5} />

```

## Variants

Variant `small` contains the rating to the left side of the populated stars and the number of reviews to the right.

Variant `single` consists of a single star with the rating and reviews in parentheses on the right side.

Variant `large` has a heading style rating value followed by the reviews and stars underneath.

If a variant is not provided it defaults to `small`.

```jsx live
<View
  style={{
    flexDirection: 'row',
    flexWrap: 'wrap',
  }}
>
  <View
    style={{
      flexGrow: 1,
      alignItems: 'center',
    }}
  >
    <Heading>Small</Heading>
    <Layout.Space />
    <Layout.Stack alignItems="right">
      {Array.from({ length: 6 }).map((x, index) => (
        <V2Rating key={index} rating={index} variant="small" reviews={index} />
      ))}
    </Layout.Stack>
  </View>
  <View
    style={{
      flexGrow: 1,
      alignItems: 'center',
    }}
  >
    <Heading>Single</Heading>
    <Layout.Space />
    <View>
      {Array.from({ length: 6 }).map((x, index) => (
        <V2Rating key={index} rating={index} reviews={index} variant="single" />
      ))}
    </View>
  </View>
  <View
    style={{
      flexGrow: 1,
      alignItems: 'center',
    }}
  >
    <Heading>Large</Heading>
    <Layout.Space />
    {Array.from({ length: 6 }).map((x, index) => (
      <V2Rating key={index} rating={index} reviews={index} variant="large" />
    ))}
  </View>
</View>
```

## Advanced Layout and Manipulation

`rating` is required and is used to determine the number of active stars as well as the display number. The inputted rating will be formatted to the first decimal point.

The `onPress` prop is optional and will transform the review text into a pressable link.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);
  const [activeReviewNum, setActiveReviewNum] = useState('store1');
  const reviewNum = [
    { reviews: 5, rating: 5 },
    { reviews: 4, rating: 4 },
    { reviews: 3, rating: 3 },
    { reviews: 2, rating: 2 },
    { reviews: 1, rating: 1 },
  ];

  const handleModal = (reviewNum) => {
    setIsVisible(true);
    setActiveReviewNum(reviewNum);
    return;
  };

  const ReviewList = (store) => {
    return Array.from({ length: activeReviewNum }).map((x, index) => (
      <CellGroup.Cell
        key={index}
        title={'some customer'}
        description={'this place was either good or bad'}
        icon={<Avatar colorTheme={2} initials={'AB'} />}
      >
        <V2Rating
          style={{ alignSelf: 'flex-start' }}
          size="large"
          rating={Math.round(Math.random() * 5 + 1)}
        />
      </CellGroup.Cell>
    ));
  };

  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
        }}
      >
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Small</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left">
            {Array.from({ length: 5 }).map((x, index) => (
              <V2Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="small"
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Single</Heading>
          <Layout.Space />
          <View>
            {Array.from({ length: 5 }).map((x, index) => (
              <V2Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="single"
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </View>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Large</Heading>
          <Layout.Space />
          <View>
            {Array.from({ length: 5 }).map((x, index) => (
              <V2Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="large"
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </View>
        </View>
      </View>

      <Modal
        title="Custom Title"
        isVisible={isVisible}
        footer={
          <View style={{ padding: 16 }}>
            <Button onPress={() => setIsVisible(false)}>Close</Button>
          </View>
        }
      >
        <Modal.Section>
          <CellGroup>
            <ReviewList />
          </CellGroup>
        </Modal.Section>
      </Modal>
    </>
  );
};
```

## Hide Reviews and Rating

`hideRating` can be used with variant `small` to hide the rating number on the left side.

`hideReviews` can be used with variants `small` and `single` to hide the reviews text.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);
  const [activeReviewNum, setActiveReviewNum] = useState('store1');
  const reviewNum = [
    { reviews: 5, rating: 5 },
    { reviews: 4, rating: 4 },
    { reviews: 3, rating: 3 },
    { reviews: 2, rating: 2 },
    { reviews: 1, rating: 1 },
  ];

  const handleModal = (reviewNum) => {
    setIsVisible(true);
    setActiveReviewNum(reviewNum);
    return;
  };

  const ReviewList = (store) => {
    return Array.from({ length: activeReviewNum }).map((x, index) => (
      <CellGroup.Cell
        key={index}
        title={'some customer'}
        description={'this place was either good or bad'}
        icon={<Avatar colorTheme={2} initials={'AB'} />}
      >
        <V2Rating
          style={{ alignSelf: 'flex-start' }}
          size="large"
          rating={Math.round(Math.random() * 5 + 1)}
        />
      </CellGroup.Cell>
    ));
  };

  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
        }}
      >
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Hide Rating</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left" style={{ paddingLeft: 20 }}>
            {Array.from({ length: 5 }).map((x, index) => (
              <V2Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="small"
                hideRating
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Hide Reviews</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left" style={{ paddingLeft: 20 }}>
            {Array.from({ length: 5 }).map((x, index) => (
              <V2Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="small"
                hideReviews
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Hide Reviews</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left" style={{ paddingLeft: 20 }}>
            {Array.from({ length: 5 }).map((x, index) => (
              <V2Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="single"
                hideReviews
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
      </View>

      <Modal
        title="Custom Title"
        isVisible={isVisible}
        footer={
          <View style={{ padding: 16 }}>
            <Button onPress={() => setIsVisible(false)}>Close</Button>
          </View>
        }
      >
        <Modal.Section>
          <CellGroup>
            <ReviewList />
          </CellGroup>
        </Modal.Section>
      </Modal>
    </>
  );
};
```

## With RatingAccumulator

Use with [RatingAccumulator](/mobile/ui/rating-accumulator) for a detailed view of rating data.

```jsx live
<Layout.Stack grow space={16}>
  <V2Rating rating={4.2} reviews={125} variant="large" />
  <RatingAccumulator data={[5, 10, 10, 25, 50]} />
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Rating}
  rows={[
    {
      name: 'rating',
      type: 'number',
      description: 'Rating given to component between 0-5',
    },
    {
      name: 'reviews',
      type: 'number',
      default: '0',
      description: 'Number of reviews',
    },
    {
      name: 'hideRating',
      type: 'boolean',
      default: 'false',
      description: 'Hides rating number',
    },
    {
      name: 'hideReviews',
      type: 'boolean',
      default: 'false',
      description: 'Hides review text',
    },
    {
      name: 'variant',
      type: "'small' | 'large' | 'single'",
      default: 'small',
      description: 'Defines the rating variant',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Function called on link press',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Rating}
  rows={[
    {
      name: 'rating-root',
      description: 'Rating root',
    },
    {
      name: 'rating-number',
      description: 'The numerical value displayed next to or above the stars',
    },
    {
      name: 'rating-stars-container',
      description: 'Container wrapping the stars',
    },
    {
      name: 'rating-text',
      description: 'The text/link to the right of the stars',
    },
    {
      name: 'rating-star',
      description: 'Each individual star',
    },
    {
      name: 'rating-star-container',
      description: 'Wrapper for an individual star',
    },
    {
      name: 'rating-star-border',
      description: 'Border for an individual star',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Rating} keys={['rating']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={Rating} type="class" />
```

```jsx render
<Docs.ComparisonTable of={Rating} type="props" />
```

</Tab>

---
id: rating
category: Data
title: Rating
description: Graphical representation of the degree of rating scale.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=10068-35503&mode=design&t=XOrzmaAmfVkUUtDy-0
---

<Tab label="Overview">

```jsx
import { Rating } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
    component: 'Rating',
    inputs: [
      {
        prop: 'variant',
        type: 'select',
        options: [
          { label: 'Large', value: 'large' },
          { label: 'Small', value: 'small' },
          { label: 'Single', value: 'single' },
        ]
      },
      {
        prop: 'rating',
        type: 'string',
      },
      {
        prop: 'reviews',
        type: 'number',
      },
    ]
  }
 <Rating rating={3} reviews={5} />

```

## Variants

Variant `small` contains the rating to the left side of the populated stars and the number of reviews to the right.

Variant `single` consists of a single star with the rating value to the right and review count in parentheses.

Variant `large` has only a visual rating of 0-5 populated stars.

```jsx live
<View
  style={{
    flexDirection: 'row',
    flexWrap: 'wrap',
  }}
>
  <View
    style={{
      flexGrow: 1,
      alignItems: 'center',
    }}
  >
    <Heading>Small</Heading>
    <Layout.Space />
    <Layout.Stack alignItems="right">
      {Array.from({ length: 6 }).map((x, index) => (
        <Rating key={index} rating={index} variant="small" reviews={index} />
      ))}
    </Layout.Stack>
  </View>
  <View
    style={{
      flexGrow: 1,
      alignItems: 'center',
    }}
  >
    <Heading>Single</Heading>
    <Layout.Space />
    <View>
      {Array.from({ length: 6 }).map((x, index) => (
        <Rating key={index} rating={index} reviews={index} variant="single" />
      ))}
    </View>
  </View>
  <View
    style={{
      flexGrow: 1,
      alignItems: 'center',
    }}
  >
    <Heading>Large</Heading>
    <Layout.Space />
    {Array.from({ length: 6 }).map((x, index) => (
      <Rating key={index} rating={index} />
    ))}
  </View>
</View>
```

## Advanced Layout and Manipulation

`rating` is required and is used to determine the number of active stars as well as the display number. The inputted rating will be formatted to the first decimal point.

`hideRating` can be used with variant `small` to hide the rating number on the left side.

The `onPress` prop is optional and will transform the review text for variant `small` and `single` into a pressable link.

```jsx live
() => {
  const [isVisible, setIsVisible] = useState(false);
  const [activeReviewNum, setActiveReviewNum] = useState('store1');
  const reviewNum = [
    { reviews: 5, rating: 5 },
    { reviews: 4, rating: 4 },
    { reviews: 3, rating: 3 },
    { reviews: 2, rating: 2 },
    { reviews: 1, rating: 1 },
  ];

  const handleModal = (reviewNum) => {
    setIsVisible(true);
    setActiveReviewNum(reviewNum);
    return;
  };

  const ReviewList = (store) => {
    return Array.from({ length: activeReviewNum }).map((x, index) => (
      <CellGroup.Cell
        key={index}
        title={'some customer'}
        description={'this place was either good or bad'}
        icon={<Avatar colorTheme={2} initials={'AB'} />}
      >
        <Rating
          style={{ alignSelf: 'flex-start' }}
          showRating={false}
          size="large"
          rating={Math.round(Math.random() * 5 + 1)}
        />
      </CellGroup.Cell>
    ));
  };

  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
        }}
      >
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Small</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left">
            {Array.from({ length: 5 }).map((x, index) => (
              <Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="small"
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Single</Heading>
          <Layout.Space />
          <View>
            {Array.from({ length: 5 }).map((x, index) => (
              <Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="single"
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </View>
        </View>
        <View
          style={{
            flexGrow: 1,
            alignItems: 'center',
          }}
        >
          <Heading>Hide Rating</Heading>
          <Layout.Space />
          <Layout.Stack alignItems="left" style={{ paddingLeft: 20 }}>
            {Array.from({ length: 5 }).map((x, index) => (
              <Rating
                key={index}
                rating={reviewNum[index].rating}
                reviews={reviewNum[index].reviews}
                variant="small"
                hideRating
                onPress={() => handleModal(reviewNum[index].reviews)}
              />
            ))}
          </Layout.Stack>
        </View>
      </View>
      <Modal
        title="Custom Title"
        isVisible={isVisible}
        footer={
          <View style={{ padding: 16 }}>
            <Button onPress={() => setIsVisible(false)}>Close</Button>
          </View>
        }
      >
        <Modal.Section>
          <CellGroup>
            <ReviewList />
          </CellGroup>
        </Modal.Section>
      </Modal>
    </>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Rating}
  rows={[
    {
      name: 'rating',
      type: 'number',
      description: 'Rating given to component between 0-5',
    },
    {
      name: 'reviews',
      type: 'number',
      description: 'Number of reviews',
      default: '0',
    },
    {
      name: 'hideRating',
      type: 'boolean',
      description: 'Hides rating number',
      default: 'false',
    },
    {
      name: 'variant',
      type: "'small' | 'large' | 'single'",
      description: 'Defines the rating variant',
      default: 'large',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Function called on link press',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Rating}
  rows={[
    {
      name: 'rating-root',
      description: 'Rating root',
    },
    {
      name: 'rating-number',
      description:
        'Number to the left of small variants, and the right of single the variant',
    },
    {
      name: 'rating-stars-container',
      description: 'Container wrapping the stars',
    },
    {
      name: 'rating-text',
      description: 'The text/link to the right of the stars',
    },
    {
      name: 'rating-star',
      description: 'Each individual star',
    },
  ]}
/>
```

</Tab>

---
id: rating-accumulator
category: Data Viz
title: RatingAccumulator
description: A visual representation of rating distribution using horizontal bars.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=10068-35503&mode=design&t=XOrzmaAmfVkUUtDy-0
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { RatingAccumulator } from '@uhg-abyss/mobile';
```

## Data

The `data` prop is an array of numbers representing percentages for each star rating level, from 1 stars (index 0) to 5 stars (index 4).

```jsx live
<Layout.Stack grow>
  <RatingAccumulator data={[5, 10, 10, 25, 50]} />
</Layout.Stack>
```

## Alternate Theme

The `alt` prop changes the color theme to an alternate style, useful for displaying against darker backgrounds.

```jsx live
<Layout.Stack grow>
  <View style={{ padding: 16 }}>
    <RatingAccumulator data={[20, 30, 15, 25, 10]} />
  </View>
  <View style={{ padding: 16, backgroundColor: '$primary1' }}>
    <RatingAccumulator data={[0, 5, 5, 10, 80]} alt />
  </View>
</Layout.Stack>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={RatingAccumulator}
  rows={[
    {
      name: 'data',
      type: 'number[]',
      description: 'Array of percentages for star ratings (1★ to 5★)',
    },
    {
      name: 'alt',
      type: 'boolean',
      description: 'Toggle color theme for use on darker backgrounds',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={RatingAccumulator}
  rows={[
    {
      name: 'rating-accumulator-root',
      description: 'RatingAccumulator root element',
    },
    {
      name: 'rating-accumulator',
      description: 'V2Accumulator element class',
    },
    {
      name: 'rating-accumulator-percentage-label',
      description: 'RatingAccumulator percentage label element',
    },
    {
      name: 'rating-accumulator-stars-label',
      description: 'RatingAccumulator stars label element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={RatingAccumulator}
  rows={['RatingAccumulator.star', 'RatingAccumulator.stars']}
/>
```

</Tab>

<Tab label="Accessibility">

Due to React Native limitations, this component enables keyboard access despite not having an interactive element. This component requires an accessibility label for use with a screen reader, which enables keyboard focus.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={RatingAccumulator}
  keys={['rating-accumulator-group']}
/>
```

</Tab>

---
id: scroll-wheel
category: Controls
title: ScrollWheel
description: A scrollable list of distinct values that allow selection between several options.
---

<Tab label="Overview">

```jsx sandbox
{
  component: 'ScrollWheel',
}

() => {
  const [index, setIndex] = useState(0);
  const options = [1, 2, 3, 4, 5, 6];

  return (
    <ScrollWheel
      selectedIndex={index}
      onChange={setIndex}
      options={options}
    />
  )
}
```

## Usage

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [index, setIndex] = useState(1);
  const options = [1, 2, 3, 4, 5, 6];

  return (
    <View>
      <ScrollWheel
        selectedIndex={index}
        onChange={setIndex}
        options={options}
      />
      <Text>You have Selected: {options[index]}</Text>
    </View>
  );
};
```

## Options

Use the `options` prop to set the options to be displayed on the scroll wheel. The `options` prop accepts an array
of strings and is a required prop.

```jsx live
() => {
  const [index, setIndex] = useState(1);
  const options = ['Kendall', 'Reagan', 'Nathan', 'Morgan', 'Billy'];

  return (
    <View>
      <ScrollWheel
        selectedIndex={index}
        onChange={setIndex}
        options={options}
      />
      <Text>You have selected: {options[index]}</Text>
    </View>
  );
};
```

## Colors

Use the `activeColor` prop to set the color of the selected option's text. In addition, use the
`indicatorColor` prop to set the background color of the selected indicator.

```jsx live
() => {
  const [index, setIndex] = useState(1);
  const options = [1, 2, 3, 4, 5, 6];

  return (
    <View>
      <ScrollWheel
        selectedIndex={index}
        onChange={setIndex}
        options={options}
        activeColor="$primary1"
        indicatorColor="$info2"
      />
    </View>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={ScrollWheel}
  rows={[
    {
      name: 'selectedIndex',
      type: 'number',
      description: 'Index of the currently selected item',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the index changes',
    },
    {
      name: 'options',
      type: 'Array',
      description: 'Options to be displayed on the scroll wheel',
    },
    {
      name: 'activeColor',
      type: 'string',
      description: "Color of the selected option's text",
    },
    {
      name: 'indicatorColor',
      type: 'string',
      description: 'Background color of the selected indicator',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={ScrollWheel}
  rows={[
    {
      name: 'scroll-wheel-root',
      description: 'Scroll wheel root element',
    },
    {
      name: 'scroll-wheel-container',
      description: 'Scroll wheel container',
    },
    {
      name: 'scroll-wheel-selected-indicator',
      description: 'Scroll wheel selected indicator',
    },
    {
      name: 'scroll-wheel-item',
      description: 'Scroll wheel item',
    },
    {
      name: 'scroll-wheel-item-label',
      description: 'Scroll wheel item label',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={ScrollWheel} keys={['picker']} />
```

</Tab>

---
id: search-bar
category: Forms
title: SearchBar
description: Provides an input field for searching content within an app to find specific items.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=35761-15587&mode=design&t=5prUNtGYxFI7SAco-0
---

<Tab label="Overview">

```jsx
import { SearchBar } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'SearchBar',
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SearchBar model="search-sandbox" placeholder="Search your benefits" />
    </FormProvider>
  );
};
```

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <Layout.Stack grow>
        <SearchBar model="search-form" placeholder="Search your benefits" />
        <Button type="submit" size="small" style={{ marginTop: 15 }}>
          Submit
        </Button>
      </Layout.Stack>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook sets state for the component.

```jsx live
() => {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    console.log('Submitted:', text);
  };

  return (
    <Layout.Stack grow>
      <SearchBar
        onChangeText={setText}
        value={text}
        placeholder="Search your benefits"
      />
      <Button size="small" onPress={handleSubmit}>
        Submit
      </Button>
    </Layout.Stack>
  );
};
```

## Placeholder

The `placeholder` prop gives users a short description in the search bar before they enter a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SearchBar model="search-placeholder" placeholder="Placeholder" />
    </FormProvider>
  );
};
```

## Submit

The `onSubmit` prop fires a callback when the submit action is triggered.
The value will be passed in as a parameter.

```jsx live
() => {
  const [text, setText] = useState('');

  const handleSubmit = (val) => {
    console.log(val);
  };

  return (
    <SearchBar
      onChangeText={setText}
      value={text}
      onSubmit={handleSubmit}
      placeholder={'Search your benefits'}
    />
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={SearchBar}
  rows={[
    {
      name: 'value',
      type: 'string',
      description: 'Value of search bar',
    },
    {
      name: 'onChangeText',
      type: 'function',
      description: 'Callback fired when search text is changed',
    },
    {
      name: 'onFocus',
      type: 'function',
      description: 'Callback fired when the search bar is focused',
    },
    {
      name: 'onBlur',
      type: 'function',
      description: 'Callback fired when the search bar is unfocused',
    },
    {
      name: 'onSubmit',
      type: 'function',
      description: 'Callback fired when the submit action is triggered',
    },
    {
      name: 'onCancel',
      type: 'function',
      description: 'Callback fired when the cancel button is pressed',
    },
    {
      name: 'placeholder',
      type: 'string',
      description:
        'Short description displayed in the input before the user enters a value',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={SearchBar}
  rows={[
    {
      name: 'search-bar-root',
      description: 'SearchBar root element',
    },
    {
      name: 'search-bar-wrapper',
      description: 'Search bar wrapper',
    },
    {
      name: 'search-bar-search-icon-wrapper',
      description: 'Search bar search icon wrapper',
    },
    {
      name: 'search-bar-input-container',
      description: 'Search bar input container',
    },
    {
      name: 'search-bar-search-icon',
      description: 'Search bar search icon',
    },
    {
      name: 'search-bar-input',
      description: 'Search bar text input element',
    },
    {
      name: 'search-bar-clear-button',
      description: 'Search bar clear Button',
    },
    {
      name: 'search-bar-clear-icon',
      description: 'Search bar clear icon',
    },
    {
      name: 'search-bar-ios-cancel-button',
      description: 'Search bar iOS cancel button',
    },
    {
      name: 'search-bar-android-cancel-button',
      description: 'Search bar android cancel button',
    },
    {
      name: 'search-bar-cancel-text',
      description: 'Search bar cancel text',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={SearchBar}
  rows={['back', 'cancel', 'SearchBar.clearText']}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

Similar to all other components used within [AppBar](/mobile/ui/app-bar), SearchBar will scale up to 3XL.

</Tab>

---
id: search-input
category: Forms
title: SearchInput
description: A type of input field that allows searching through content.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=41039-16146&mode=design&t=bfPqTvn7mEdSo5pn-0
---

<Tab label="Overview">

```jsx
import { SearchInput } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'SearchInput',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
     {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ],
}

() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [value, setValue] = React.useState('');
  const [results, setResults] = useState([]);

  const handleSubmit = ()=>{
    console.log(results)
  }

  return (
    <SearchInput
      label="Search Sandbox"
      value={value}
      onChangeText={setValue}
      onChange={setResults}
      onSubmit={handleSubmit}
      options={data}
      keys={['label']}
    />
  );
};
```

## useState

Using the `useState` hook sets state for the component.

```jsx live
() => {
  const [text, setText] = useState('');

  const handleSubmit = () => {
    console.log('Submitted:', text);
  };

  return (
    <Layout.Stack grow>
      <SearchInput onChangeText={setText} value={text} />
      <Button size="small" onPress={handleSubmit}>
        Submit
      </Button>
    </Layout.Stack>
  );
};
```

## onChange

The `onChange` prop handles the action for the search results.

```jsx live
() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [value, setValue] = React.useState('');
  const [results, setResults] = useState([]);

  return (
    <SearchInput
      keys={['value', 'label']}
      label="Your framework/library"
      options={data}
      onChange={setResults}
      value={value}
      onChangeText={setValue}
    />
  );
};
```

## Fuse.js

Search Input filtering uses the <ExitLink href="https://fusejs.io">Fuse.js</ExitLink> library to fuzzy filter results. What is fuzzy searching? Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

### Fuse Configurations

To adjust the fuse configurations, pass the desired options into the `fuseConfigs` prop. Note that `keys` is required when using fuse. By default the fuse search configurations are:

```
{
  includeMatches: true,
  findAllMatches: true,
  threshold: 0,
  ignoreLocation: true,
  minMatchCharLength: searchText.length,
  keys,
}
```

The default configurations return the search results object below:

```
{
  item: []
}
```

### Fuse Data

The `options` prop is the information that fuse will filter on and display in the search dropdown. You can search on any value(s) in the object, see Fuse Keys below. Required when using fuse.

```jsx live
() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [value, setValue] = React.useState('');
  const [results, setResults] = useState([]);

  const ResultsList = styled('ScrollView', {
    height: 200,
  });

  return (
    <Layout.Stack grow>
      <SearchInput
        keys={['value', 'label']}
        label="Fuse Data"
        options={data}
        onChange={setResults}
        value={value}
        onChangeText={setValue}
      />
      <Layout.Space />
      <Text style={{ fontWeight: '$bold' }}>Results:</Text>
      <ResultsList>
        <CellGroup hideBorderTop hideBorderBottom>
          {(value.length > 0 ? results : data).map((item, i) => {
            return <CellGroup.Cell title={item.label} />;
          })}
        </CellGroup>
      </ResultsList>
    </Layout.Stack>
  );
};
```

### Fuse Keys

List of keys that will be searched. This supports nested paths, weighted search, searching in arrays of objects. Required when using fuse. Below the `keys` set are "label" and "value".

```jsx live
() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [text, setText] = useState('');
  const [results, setResults] = useState([]);

  const ResultsList = styled('ScrollView', {
    height: 200,
  });

  return (
    <Layout.Stack grow>
      <SearchInput
        keys={['label', 'value']}
        label="Fuse Keys"
        options={data}
        value={text}
        onChangeText={setText}
        onChange={setResults}
      />
      <Layout.Space />
      <Text style={{ fontWeight: '$bold' }}>Results:</Text>
      <ResultsList>
        <CellGroup hideBorderTop hideBorderBottom>
          {(text.length > 0 ? results : data).map((item, i) => {
            return <CellGroup.Cell title={item.label} />;
          })}
        </CellGroup>
      </ResultsList>
    </Layout.Stack>
  );
};
```

## Custom Filtering

Use the `customFilter` prop to override the fuse.js filtering. In the example function below, the filter is checking the first letter typed in the search bar against the first letter of each item in the list. If the letter is a match the item is included in the filtered list.

```jsx live
() => {
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];
  const [results, setResults] = useState([]);
  const [text, setText] = useState('');

  const ResultsList = styled('ScrollView', {
    height: 200,
  });

  const filterFunction = (searchText, list) => {
    const newList = [];
    if (searchText.length > 0) {
      list.forEach((item) => {
        const title = item.label.toUpperCase();
        if (title[0] === searchText[0].toUpperCase()) {
          newList.push(item);
        }
      });
    }
    return newList;
  };

  return (
    <Layout.Stack grow>
      <SearchInput
        customFilter={filterFunction}
        value={text}
        onChangeText={setText}
        label="Custom filter function"
        hintText="Search matching only the first letter of the component title"
        onChange={setResults}
        options={data}
      />
      <Layout.Space />
      <Text style={{ fontWeight: '$bold' }}>Results:</Text>
      <ResultsList>
        <CellGroup hideBorderTop hideBorderBottom>
          {(text.length > 0 ? results : data).map((item, i) => {
            return <CellGroup.Cell title={item.label} />;
          })}
        </CellGroup>
      </ResultsList>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={SearchInput}
  rows={[
    {
      name: 'options',
      type: 'object[]',
      description: 'Data filtered on by Fuse',
      default: '[]',
    },
    {
      name: 'keys',
      type: 'array[string]',
      description: 'Keys used by Fuse',
      default: '[]',
    },
    {
      name: 'fuseConfigs',
      type: 'shape',
      description: 'Configs for Fuse',
    },
    {
      name: 'customFilter',
      type: 'function',
      description: 'Custom function used for search',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when search is changed',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'onChangeText',
      type: 'function',
      description:
        'Callback that is called when the text input text changes. Changed text is passed as a single string argument to the callback handler',
    },
    {
      name: 'onFocus',
      type: 'function',
      description: 'Callback fired every time the component is focused',
    },
    {
      name: 'onBlur',
      type: 'function',
      description: 'Callback fired every time the component is unfocused',
    },
    {
      name: 'onSubmit',
      type: 'function',
      description: 'Callback fired when input is submitted',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label for input field',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Set the text displayed below label',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Value of the text input',
    },
    ,
    {
      name: 'returnKeyType',
      type: 'string',
      description: 'Sets the type of return key',
      default: 'search',
    },
    {
      name: 'returnKeyLabel',
      type: 'string',
      description: 'Sets the label of the return key. Defaults to "search"',
      default: 'search',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={SearchInput}
  rows={[
    {
      name: 'search-input-root',
      description: 'SearchInput root element',
    },
  ]}
  inherits={[{ name: 'TextInput', link: '/mobile/ui/text-input' }]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={SearchInput} keys={['search-input']} />
```

</Tab>

---
id: search-input-button
category: Navigation
title: SearchInputButton
description: Acts as a placeholder for search bar.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=9600-35750&mode=design&t=9miNk11OVJWfR3kX-0
---

<Tab label="Overview">

```jsx
import { SearchInputButton } from '@uhg-abyss/mobile';
```

## Placeholder

The `placeholder` prop gives users a short description in the search bar.

```jsx live
() => {
  return <SearchInputButton placeholder="Search your benefits" />;
};
```

## onPress

Use the `onPress` prop to determine the action when the search button is pressed.

```jsx live
() => {
  const handlePress = () => {
    console.log('pressed');
  };

  return (
    <SearchInputButton
      placeholder="Search your benefits"
      onPress={handlePress}
    />
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={SearchInputButton}
  rows={[
    {
      name: 'onPress',
      type: 'Function',
      description: 'Callback fired when the search button is pressed',
    },
    {
      name: 'placeholder',
      type: 'string',
      description: 'Short description displayed in the input',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={SearchInputButton}
  rows={[
    {
      name: 'search-input-button-root',
      description: 'Search input button root element',
    },
    {
      name: 'search-input-button-text',
      description: 'Search input button placeholder text',
    },
    {
      name: 'search-input-button-icon',
      description: 'Search icon',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={SearchInputButton}
  keys={['search-input-button']}
/>
```

</Tab>

---
id: segmented-controls
category: Forms
title: SegmentedControls
description: A segmented control is a linear set of two or more segments, each of which functions as a button. There cannot be more than one segment selected, so under the hood this behaves like a radio group.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9553%3A32917&t=lY6iM2O8OTPyLv8A-0
---

<Tab label="Overview">

```jsx
import { SegmentedControls } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'SegmentedControls',
  inputs: [
    {
      prop: 'shrink',
      type: 'boolean',
    },
  ]
}

() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-sandbox': 'one',
    },
  });

  return (
    <FormProvider state={form}>
      <SegmentedControls model="segmented-controls-sandbox">
        <SegmentedControls.Tab label="One" value="one" />
        <SegmentedControls.Tab label="Two" value="two" />
        <SegmentedControls.Tab label="Three" value="three" />
      </SegmentedControls>
    </FormProvider>
  );
};
```

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-form': 'one',
    },
  });

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <SegmentedControls model="segmented-controls-form">
        <SegmentedControls.Tab label="One" value="one" />
        <SegmentedControls.Tab label="Two" value="two" />
        <SegmentedControls.Tab label="Three" value="three" />
      </SegmentedControls>
      <Button type="submit" size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [activeValue, setActiveValue] = useState('one');

  const handleSubmit = () => {
    console.log('Submitted:', activeValue);
  };

  return (
    <View>
      <SegmentedControls value={activeValue} onChange={setActiveValue}>
        <SegmentedControls.Tab label="One" value="one" />
        <SegmentedControls.Tab label="Two" value="two" />
        <SegmentedControls.Tab label="Three" value="three" />
      </SegmentedControls>
      <Button onPress={handleSubmit} size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </View>
  );
};
```

## Label

The `label` prop is used to define the display in each Tab. The `label` can be an Icon or text.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-label': 'one',
      'segmented-controls-label-icons': 'two',
    },
  });

  return (
    <FormProvider state={form}>
      <Layout.Stack grow>
        <SegmentedControls model="segmented-controls-label">
          <SegmentedControls.Tab label="One" value="one" />
          <SegmentedControls.Tab label="Two" value="two" />
          <SegmentedControls.Tab label="Three" value="three" />
        </SegmentedControls>
        <SegmentedControls model="segmented-controls-label-icons">
          <SegmentedControls.Tab
            accessibilityLabel="snow"
            label={
              <IconSymbol
                size={20}
                color="$gray3"
                icon="ac_unit"
                variant="outlined"
              />
            }
            value="one"
          />
          <SegmentedControls.Tab
            accessibilityLabel="cloud"
            label={
              <IconSymbol
                size={20}
                color="$gray3"
                icon="cloud"
                variant="outlined"
              />
            }
            value="two"
          />
          <SegmentedControls.Tab
            accessibilityLabel="sun"
            label={
              <IconSymbol
                size={20}
                color="$gray3"
                icon="wb_sunny"
                variant="outlined"
              />
            }
            value="three"
          />
        </SegmentedControls>
      </Layout.Stack>
    </FormProvider>
  );
};
```

## Structure

Segmented controls consist of a parent element and several children. The parent element `<SegmentedControls />` handles the active Tab state.
While the children define the segments of the component.

Each child is a Tab: `<SegmentedControls.Tab />` A new child is required for every segment.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-structure': 'snow',
    },
  });

  return (
    <FormProvider state={form}>
      <SegmentedControls model="segmented-controls-structure">
        <SegmentedControls.Tab label={'Snow'} value="snow" />
        <SegmentedControls.Tab label={'Clouds'} value="clouds" />
        <SegmentedControls.Tab label="Sun" value="sun" />
      </SegmentedControls>
    </FormProvider>
  );
};
```

## Shrink

The `shrink` prop toggles whether the component will take up the full width of the parent container. When true, they will automatically size based on the number of tabs and their content. Defaults to `false`.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'segmented-controls-one': 'snow',
      'segmented-controls-two': 'clouds',
      'segmented-controls-three': 'sun',
    },
  });

  return (
    <FormProvider state={form}>
      <Layout.Stack grow>
        <SegmentedControls model="segmented-controls-one">
          <SegmentedControls.Tab label="Snow" value="snow" />
          <SegmentedControls.Tab label="Clouds" value="clouds" />
          <SegmentedControls.Tab label="Sun" value="sun" />
        </SegmentedControls>
        <SegmentedControls model="segmented-controls-two" shrink>
          <SegmentedControls.Tab label="Snow" value="snow" />
          <SegmentedControls.Tab label="Clouds" value="clouds" />
          <SegmentedControls.Tab label="Sun" value="sun" />
        </SegmentedControls>
        <SegmentedControls model="segmented-controls-three" shrink>
          <SegmentedControls.Tab label="Snow is cold" value="snow" />
          <SegmentedControls.Tab label="Clouds are cool" value="clouds" />
          <SegmentedControls.Tab label="Sun is hot" value="sun" />
        </SegmentedControls>
      </Layout.Stack>
    </FormProvider>
  );
};
```

## Example

```jsx live
() => {
  const [activeTab, setActiveTab] = useState('one');
  return (
    <Box padding={0} color={'$primary1'} width={'400px'}>
      <Layout.Group
        style={{
          justifyContent: 'space-between',
          padding: 16,
        }}
      >
        <Text fontWeight="$bold" size="$xl" textAlign="center" color="white">
          Title {activeTab}
        </Text>
        <Layout.Group space={12}>
          <Button rounded size="small">
            <IconSymbol icon={'share'} color="white" size={15} />
          </Button>
          <Button rounded size="small">
            <IconSymbol icon={'home'} color="white" size={15} />
          </Button>
        </Layout.Group>
      </Layout.Group>
      <ProgressBar steps={10} currentStep={5} />
      <View
        style={{
          alignSelf: 'center',
          padding: 16,
        }}
      >
        <SegmentedControls shrink value={activeTab} onChange={setActiveTab}>
          <SegmentedControls.Tab label={'One'} value={'one'} />
          <SegmentedControls.Tab label={'Two'} value={'two'} />
          <SegmentedControls.Tab label={'Three'} value={'three'} />
        </SegmentedControls>
      </View>
    </Box>
  );
};
```

## Dynamic Type

SegmentedControls scale to 3XL. Any icons passed to the label prop will need to set `maxFontSizeMultiplier={1.3}`.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={SegmentedControls}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Defines the tab children',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the active tab changes',
    },
    {
      name: 'value',
      type: 'string | number',
      description: 'The SegmentedControls Tabs',
    },
    {
      name: 'shrink',
      type: 'boolean',
      default: 'false',
      description:
        'Toggles between width filling parent and width matching tabs and content',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={SegmentedControls.Tab}
  rows={[
    {
      name: 'label',
      type: 'string | number | node',
      description:
        'Defines the label of the tab, which can be a node for icons',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Defines the value of the tab',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={SegmentedControls}
  rows={[
    {
      name: 'segmented-controls-root',
      description: 'Segmented controls root element',
    },
    {
      name: 'segmented-controls-selected-tab',
      description: 'Selected tab in the controls',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={SegmentedControls.Tab}
  rows={[
    {
      name: 'segmented-controls-tab-root',
      description: 'Segmented controls root element',
    },
  ]}
/>
```

</Tab>
<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={SegmentedControls}
  keys={['segmented-control']}
/>
```

</Tab>

---
id: select-input-v2
category: Forms
title: V2SelectInput
description: Allows users to select one value from a provided list of options.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=18828-105743&mode=design&t=Aa48cFkeiLakVzb1-0
---

<Tab label="Overview">

```jsx
import { V2SelectInput } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'V2SelectInput',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'isRequired',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ],
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInput
        model="select-input-sandbox"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            items: [
              { label: 'item 1', value: 'item11', isDisabled: false },
              { label: 'item 2', value: 'item12', isDisabled: true },
              { label: 'item 3', value: 'item13', isDisabled: false },
            ],
          },
          {
            title: 'Title 2',
            items: [
              { label: 'item 1', value: 'item21', isDisabled: false },
              { label: 'item 2', value: 'item22', isDisabled: false },
              { label: 'item 3', value: 'item23', isDisabled: false },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

## Usage

Use the `options` prop to supply the options that can be selected. `options` is an array of objects, where each object should have two properties:

- `label`, a string which is how the option will be displayed in the list
- `value`, a string which is the unique identifier for the option

Sections can also be specified, in which case the section object should have `title` and `items` properties instead of `label` and `value` (See [Titles](#titles) for more details).

```
options = {
  [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2', isDisabled: true },
    { label: 'Item 3', value: 'item3' },
    { label: 'Item 4', value: 'item4' },
    { label: 'Item 5', value: 'item5' },
  ]
}
```

## useForm (recommended)

Use the `useForm` hook to manage the state of the select input. The `model` prop should be set to a unique string that identifies the form field.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <View>
      <FormProvider state={form}>
        <V2SelectInput
          model="select-input-v2"
          label="Menu"
          options={[
            { label: 'item 1', value: 'item11' },
            { label: 'item 2', value: 'item12' },
            { label: 'item 3', value: 'item13' },
          ]}
        />
        <Button
          type="submit"
          size="small"
          style={{ marginTop: 15 }}
          onPress={handleSubmit}
        >
          Submit
        </Button>
      </FormProvider>
    </View>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [selection, setSelection] = useState();

  return (
    <View>
      <V2SelectInput
        label="Menu"
        value={selection}
        onChange={setSelection}
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
      <Button
        size="small"
        onPress={() => console.log('Selected:', selection)}
        style={{ marginTop: 15 }}
      >
        Submit
      </Button>
    </View>
  );
};
```

## Titles

To create sections in the list, pass objects into the `options` array that have the `title` and `items` properties. `title` specifies the name of the title, which will be bolded and not selectable, `items` should contain the options within that section (with the same `label`/`value` format as normal).

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInput
        model="select-input-titles"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            items: [
              { label: 'item 1', value: 'item11' },
              { label: 'item 2', value: 'item12', isDisabled: true },
              { label: 'item 3', value: 'item13' },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

## Label

Use the `label` prop to display a label above the input menu.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInput
        model="select-input-label"
        label="Menu"
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Required

Use the `isRequired` prop to display an asterisk next to the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInput
        model="select-input-required"
        label="Menu"
        isRequired={true}
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Hint Text

Use the `hintText` prop to display text below the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInput
        model="select-input-hint"
        label="Menu"
        hintText="Only one item can be selected"
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInput
        model="select-input-help"
        label="Menu"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Messages

Use the `errorMessage` and `successMessage` props to display a custom error or success message below the menu.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <Layout.Group space={16}>
        <V2SelectInput
          model="select-input-error"
          label="Menu"
          isRequired={true}
          errorMessage="A selection is required"
          options={[
            { label: 'item 1', value: 'item11' },
            { label: 'item 2', value: 'item12' },
            { label: 'item 3', value: 'item13' },
          ]}
        />
        <V2SelectInput
          model="select-input-success"
          label="Menu"
          successMessage="Great pick"
          options={[
            { label: 'item 1', value: 'item11' },
            { label: 'item 2', value: 'item12' },
            { label: 'item 3', value: 'item13' },
          ]}
        />
      </Layout.Group>
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the select list input field so users cannot select a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInput
        model="select-input-disabled"
        label="Menu"
        isDisabled={true}
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Disable Option Items

Disable an individual option item by setting the `isDisabled` key to `true` within the object.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInput
        model="select-input-disable-items"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            isDisabled: true,
            items: [
              { label: 'item 1', value: 'item11', isDisabled: true },
              { label: 'item 2', value: 'item12', isDisabled: true },
            ],
          },
          {
            title: 'Title 2',
            items: [
              { label: 'item 1', value: 'item21', isDisabled: true },
              { label: 'item 2', value: 'item22' },
              { label: 'item 3', value: 'item23', isDisabled: true },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={SelectInput}
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the selection value changes',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Option value selected in the select list input',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Select list label',
    },
    {
      name: 'modalTitle',
      type: 'string',
      description: 'Title of the input modal',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below the select input field',
    },
    {
      name: 'successMessage',
      type: 'string',
      description:
        'Success message to be displayed below the select input field',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the select list. If true, the select list will be disabled',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description:
        'Requires a user to make a selection. If true, the asterisk will be displayed next to the label',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Set the subtext displayed below the Label',
    },
    {
      name: 'options',
      type: 'object[]',
      description:
        'List of options selectable in the select list input. { label: string, value: string }',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
    {
      name: 'placeholder',
      type: 'string',
      description: 'The rendered string when no option is selected',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={SelectInput}
  rows={[
    {
      name: 'select-input-root',
      description: 'Root element',
    },
    {
      name: 'select-input-header',
      description: 'Header element',
    },
    {
      name: 'select-input-label',
      description: 'Label element',
    },
    {
      name: 'select-input-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'select-input-help-button',
      description: 'Help button',
    },
    {
      name: 'select-input-open-icon',
      description: 'Menu open icon',
    },
    {
      name: 'select-input-modal',
      description: 'Menu modal',
    },
    {
      name: 'select-input-menu-list',
      description: 'Menu list',
    },
    {
      name: 'select-input-message',
      description: 'Message element',
    },
    {
      name: 'select-input-close-icon',
      description: 'Close icon',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'select-input-text-container',
      description: 'Text container',
    },
    {
      name: 'select-input-text',
      description: 'Text element',
    },
    {
      name: 'select-input-container',
      description: 'Selection container',
    },
    {
      name: 'select-input-menu-container',
      description: 'Menu container',
    },
    {
      name: 'select-input-menu-list-title',
      description: 'Menu title',
    },

    {
      name: 'select-input-menu-item-container',
      description: 'Menu item container',
    },
    {
      name: 'select-input-menu-item',
      description: 'Menu item element',
      states: ['disabled', 'selected'],
    },
    {
      name: 'select-input-menu-item-text',
      description: 'Menu item text',
      states: ['disabled', 'selected'],
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
  ]}
  inherits={[{ name: 'Modal', link: '/mobile/ui/modal' }]}
/>
```

```jsx render
<Docs.TranslationTable
  of={SelectInput}
  rows={['help', 'close', 'error', 'success', 'SelectInput.placeholder']}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={V2SelectInput}
  keys={['input-field', 'input-container', 'input-header', 'input-message']}
/>
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={SelectInput} type="class" />
```

```jsx render
<Docs.ComparisonTable of={SelectInput} type="props" />
```

</Tab>

---
id: select-input
category: Forms
title: SelectInput
description: Allows users to select one value from a provided list of options.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=18828-105743&mode=design&t=Aa48cFkeiLakVzb1-0
---

<Tab label="Overview">

```jsx
import { SelectInput } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'SelectInput',
  inputs: [
    {
      prop: 'label',
      type: 'string',
      defaultValue: 'Sandbox',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'isRequired',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ],
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-sandbox"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            items: [
              { label: 'item 1', value: 'item11', isDisabled: false },
              { label: 'item 2', value: 'item12', isDisabled: true },
              { label: 'item 3', value: 'item13', isDisabled: false },
            ],
          },
          {
            title: 'Title 2',
            items: [
              { label: 'item 1', value: 'item21', isDisabled: false },
              { label: 'item 2', value: 'item22', isDisabled: false },
              { label: 'item 3', value: 'item23', isDisabled: false },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

## Usage

Use the `options` prop to supply the options that can be selected. `options` is an array of objects, where each object should have two properties:

- `label`, a string which is how the option will be displayed in the list
- `value`, a string which is the unique identifier for the option

Sections can also be specified, in which case the section object should have `title` and `items` properties instead of `label` and `value` (See [Titles](#titles) for more details).

```
options = {
  [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2', isDisabled: true },
    { label: 'Item 3', value: 'item3' },
    { label: 'Item 4', value: 'item4' },
    { label: 'Item 5', value: 'item5' },
  ]
}
```

## useForm (recommended)

Use the `useForm` hook to manage the state of the select input. The `model` prop should be set to a unique string that identifies the form field.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <View>
      <FormProvider state={form}>
        <SelectInput
          model="select-input-v2"
          label="Menu"
          options={[
            { label: 'item 1', value: 'item11' },
            { label: 'item 2', value: 'item12' },
            { label: 'item 3', value: 'item13' },
          ]}
        />
        <Button
          type="submit"
          size="small"
          style={{ marginTop: 15 }}
          onPress={handleSubmit}
        >
          Submit
        </Button>
      </FormProvider>
    </View>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [selection, setSelection] = useState();

  return (
    <View>
      <SelectInput
        label="Menu"
        value={selection}
        onChange={setSelection}
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
      <Button
        size="small"
        onPress={() => console.log('Selected:', selection)}
        style={{ marginTop: 15 }}
      >
        Submit
      </Button>
    </View>
  );
};
```

## Titles

To create sections in the list, pass objects into the `options` array that have the `title` and `items` properties. `title` specifies the name of the title, which will be bolded and not selectable, `items` should contain the options within that section (with the same `label`/`value` format as normal).

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-titles"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            items: [
              { label: 'item 1', value: 'item11' },
              { label: 'item 2', value: 'item12', isDisabled: true },
              { label: 'item 3', value: 'item13' },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

## Label

Use the `label` prop to display a label above the input menu.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-label"
        label="Menu"
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Required

Use the `isRequired` prop to display an asterisk next to the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-required"
        label="Menu"
        isRequired={true}
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Hint Text

Use the `hintText` prop to display text below the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-hint"
        label="Menu"
        hintText="Only one item can be selected"
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-help"
        label="Menu"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Messages

Use the `errorMessage` and `successMessage` props to display a custom error or success message below the menu.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <Layout.Group space={16}>
        <SelectInput
          model="select-input-error"
          label="Menu"
          isRequired={true}
          errorMessage="A selection is required"
          options={[
            { label: 'item 1', value: 'item11' },
            { label: 'item 2', value: 'item12' },
            { label: 'item 3', value: 'item13' },
          ]}
        />
        <SelectInput
          model="select-input-success"
          label="Menu"
          successMessage="Great pick"
          options={[
            { label: 'item 1', value: 'item11' },
            { label: 'item 2', value: 'item12' },
            { label: 'item 3', value: 'item13' },
          ]}
        />
      </Layout.Group>
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the select list input field so users cannot select a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-disabled"
        label="Menu"
        isDisabled={true}
        options={[
          { label: 'item 1', value: 'item11' },
          { label: 'item 2', value: 'item12' },
          { label: 'item 3', value: 'item13' },
        ]}
      />
    </FormProvider>
  );
};
```

## Disable Option Items

Disable an individual option item by setting the `isDisabled` key to `true` within the object.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInput
        model="select-input-disable-items"
        label="Menu"
        options={[
          {
            title: 'Title 1',
            isDisabled: true,
            items: [
              { label: 'item 1', value: 'item11', isDisabled: true },
              { label: 'item 2', value: 'item12', isDisabled: true },
            ],
          },
          {
            title: 'Title 2',
            items: [
              { label: 'item 1', value: 'item21', isDisabled: true },
              { label: 'item 2', value: 'item22' },
              { label: 'item 3', value: 'item23', isDisabled: true },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={SelectInput}
  rows={[
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the selection value changes',
    },
    {
      name: 'value',
      type: 'string',
      description: 'Option value selected in the select list input',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Select list label',
    },
    {
      name: 'modalTitle',
      type: 'string',
      description: 'Title of the input modal',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below the select input field',
    },
    {
      name: 'successMessage',
      type: 'string',
      description:
        'Success message to be displayed below the select input field',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the select list. If true, the select list will be disabled',
      default: 'false',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description:
        'Requires a user to make a selection. If true, the asterisk will be displayed next to the label',
      default: 'false',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Set the subtext displayed below the Label',
    },
    {
      name: 'options',
      type: 'object[]',
      description:
        'List of options selectable in the select list input. { label: string, value: string }',
      default: '[]',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
    {
      name: 'placeholder',
      type: 'string',
      description: 'The rendered string when no option is selected',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={SelectInput}
  rows={[
    {
      name: 'select-input-root',
      description: 'Root element',
    },
    {
      name: 'select-input-header',
      description: 'Header element',
    },
    {
      name: 'select-input-label',
      description: 'Label element',
    },
    {
      name: 'select-input-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'select-input-help-button',
      description: 'Help button',
    },
    {
      name: 'select-input-open-icon',
      description: 'Menu open icon',
    },
    {
      name: 'select-input-modal',
      description: 'Menu modal',
    },
    {
      name: 'select-input-menu-list',
      description: 'Menu list',
    },
    {
      name: 'select-input-message',
      description: 'Message element',
    },
    {
      name: 'select-input-close-icon',
      description: 'Close icon',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'select-input-text-container',
      description: 'Text container',
    },
    {
      name: 'select-input-text',
      description: 'Text element',
    },
    {
      name: 'select-input-container',
      description: 'Selection container',
    },
    {
      name: 'select-input-menu-container',
      description: 'Menu container',
    },
    {
      name: 'select-input-menu-list-title',
      description: 'Menu title',
    },

    {
      name: 'select-input-menu-item-container',
      description: 'Menu item container',
    },
    {
      name: 'select-input-menu-item',
      description: 'Menu item element',
      states: ['disabled', 'selected'],
    },
    {
      name: 'select-input-menu-item-text',
      description: 'Menu item text',
      states: ['disabled', 'selected'],
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
  ]}
  inherits={[{ name: 'Modal', link: '/mobile/ui/modal' }]}
/>
```

```jsx render
<Docs.TranslationTable
  of={SelectInput}
  rows={['help', 'close', 'error', 'success', 'SelectInput.placeholder']}
/>
```

</Tab>

---
id: select-input-multi-v2
category: Forms
title: V2SelectInputMulti
description: Allows users to select multiple values from a provided list of options.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=18828-105743&mode=design&t=Aa48cFkeiLakVzb1-0
---

<Tab label="Overview">

```jsx
import { V2SelectInputMulti } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'V2SelectInputMulti',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'isSearchable',
      type: 'boolean',
    },
    {
      prop: 'selectAll',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ],
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInputMulti
        model="select-input-multi-sandbox"
        label="Your favorite framework/library"
        isSearchable
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Usage

Use the `options` prop to supply the options that can be selected. `options` is an array of objects, where each object should have two properties:

- `label`, a string which is how the option will be displayed in the list
- `value`, a string which is the unique identifier for the option

Sections can also be specified, in which case the section object should have `title`, `value`, and `items` properties instead of `label` and `value` (See [Titles](#titles) for more details).

```
options = {
  [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2', isDisabled: true },
    { label: 'Item 3', value: 'item3' },
    { label: 'Item 4', value: 'item4' },
    { label: 'Item 5', value: 'item5' },
  ]
}
```

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm();

  const options = [
    { label: 'Colors', value: 'Colors' },
    { label: 'Elevation', value: 'E' },
    { label: 'Icon Brand', value: 'IB' },
    { label: 'Typography', value: 'T' },
    {
      title: 'CTA',
      value: 'CTA',
      items: [
        { label: 'Button', value: 'button' },
        { label: 'Cell Group', value: 'cellGroup' },
        { label: 'Chip', value: 'chip' },
      ],
    },
    {
      title: 'Controls',
      value: 'Controls',
      items: [
        { label: 'Checkbox', value: 'checkbox' },
        { label: 'Checkbox Group', value: 'CG' },
        { label: 'Radio Group', value: 'RG' },
        { label: 'Segmented Controls', value: 'SC' },
        { label: 'Toggle Switch', value: 'TS' },
      ],
    },
    {
      title: 'Data',
      value: 'Title1',
      items: [
        { label: 'Avatar', value: 'avatar' },
        { label: 'Indicator', value: 'indicator' },
        { label: 'Progress Bar', value: 'PB' },
      ],
    },
    {
      title: 'Data Viz',
      value: 'DataViz',
      items: [
        { label: 'Accordion', value: 'accordion' },
        { label: 'Accumulator', value: 'accumulator' },
        { label: 'Donut Chart', value: 'DC' },
      ],
    },
    {
      title: 'Forms',
      value: 'Forms',
      items: [
        { label: 'Date Input', value: 'DI' },
        { label: 'Select Input', value: 'SI' },
        { label: 'Select Input Multi', value: 'SIM' },
        { label: 'Text Input', value: 'TI' },
      ],
    },
    {
      title: 'Layout',
      value: 'Layout',
      items: [
        { label: 'Bottom Sheet', value: 'BS' },
        { label: 'Modal', value: 'modal' },
        { label: 'Card', value: 'card' },
      ],
    },
    {
      title: 'Media',
      value: 'Media',
      items: [
        { label: 'Icon', value: 'icon' },
        { label: 'Icon Custom', value: 'IC' },
        { label: 'Icon Material', value: 'IM' },
      ],
    },
    {
      title: 'Navigation',
      value: 'nav',
      items: [
        { label: 'Link', value: 'link' },
        { label: 'Tabs', value: 'tabs' },
      ],
    },
    {
      title: 'Notifications',
      value: 'Notifications',
      items: [
        { label: 'Alert', value: 'alert' },
        { label: 'Badge', value: 'badge' },
        { label: 'FAB', value: 'fab' },
        { label: 'Toast', value: 'toast' },
      ],
    },
    {
      title: 'Providers',
      value: 'providers',
      items: [{ label: 'LagoonProvider', value: 'LP' }],
    },
    {
      title: 'Typography',
      value: 'typography',
      items: [
        { label: 'Heading', value: 'heading' },
        { label: 'Text', value: 'text' },
      ],
    },
  ];

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <V2SelectInputMulti
        model="select-input-multi-form"
        label="Mobile Components"
        isSearchable
        options={options}
      />
      <Button type="submit" size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const options = [
    { label: 'Colors', value: 'Colors' },
    { label: 'Elevation', value: 'E' },
    { label: 'Icon Brand', value: 'IB' },
    { label: 'Typography', value: 'T' },
    {
      title: 'CTA',
      value: 'CTA',
      items: [
        { label: 'Button', value: 'button' },
        { label: 'Cell Group', value: 'cellGroup' },
        { label: 'Chip', value: 'chip' },
      ],
    },
    {
      title: 'Controls',
      value: 'Controls',
      items: [
        { label: 'Checkbox', value: 'checkbox' },
        { label: 'Checkbox Group', value: 'CG' },
        { label: 'Radio Group', value: 'RG' },
        { label: 'Segmented Controls', value: 'SC' },
        { label: 'Toggle Switch', value: 'TS' },
      ],
    },
    {
      title: 'Data',
      value: 'Title1',
      items: [
        { label: 'Avatar', value: 'avatar' },
        { label: 'Indicator', value: 'indicator' },
        { label: 'Progress Bar', value: 'PB' },
      ],
    },
    {
      title: 'Data Viz',
      value: 'DataViz',
      items: [
        { label: 'Accordion', value: 'accordion' },
        { label: 'Accumulator', value: 'accumulator' },
        { label: 'Donut Chart', value: 'DC' },
      ],
    },
    {
      title: 'Forms',
      value: 'Forms',
      items: [
        { label: 'Date Input', value: 'DI' },
        { label: 'Select Input', value: 'SI' },
        { label: 'Select Input Multi', value: 'SIM' },
        { label: 'Text Input', value: 'TI' },
      ],
    },
    {
      title: 'Layout',
      value: 'Layout',
      items: [
        { label: 'Bottom Sheet', value: 'BS' },
        { label: 'Modal', value: 'modal' },
        { label: 'Card', value: 'card' },
      ],
    },
    {
      title: 'Media',
      value: 'Media',
      items: [
        { label: 'Icon', value: 'icon' },
        { label: 'Icon Custom', value: 'IC' },
        { label: 'Icon Material', value: 'IM' },
      ],
    },
    {
      title: 'Navigation',
      value: 'nav',
      items: [
        { label: 'Link', value: 'link' },
        { label: 'Tabs', value: 'tabs' },
      ],
    },
    {
      title: 'Notifications',
      value: 'Notifications',
      items: [
        { label: 'Alert', value: 'alert' },
        { label: 'Badge', value: 'badge' },
        { label: 'FAB', value: 'fab' },
        { label: 'Toast', value: 'toast' },
      ],
    },
    {
      title: 'Providers',
      value: 'providers',
      items: [{ label: 'LagoonProvider', value: 'LP' }],
    },
    {
      title: 'Typography',
      value: 'typography',
      items: [
        { label: 'Heading', value: 'heading' },
        { label: 'Text', value: 'text' },
      ],
    },
  ];
  const [value, setValue] = useState([]);

  const handleSubmit = () => {
    console.log('Submitted:', value);
  };

  return (
    <View>
      <V2SelectInputMulti
        label="Mobile Components"
        value={value}
        onChange={setValue}
        isSearchable
        options={options}
      />
      <Button onPress={handleSubmit} size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </View>
  );
};
```

## Titles

To create sections in the list, pass objects into the `options` array that have the `title`, `value`, and `items` properties. `title` specifies the name of the title, which will be bolded and not selectable, `value` is the unique identifier for the title, while `items` should contain the options within that section (with the same `label`/`value` format as normal).

```
options = {
  [
    {
      title: 'Title 1',
      value: 'Title1',
      items: [
        { label: 'item 1', value: 'item11' },
        { label: 'item 2', value: 'item12', isDisabled: true },
        { label: 'item 3', value: 'item13' },
      ],
    },
  ]
}
```

## Label

Use the `label` prop to display a label above the input menu.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInputMulti
        model="select-input-multi-label"
        label="Menu"
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Required

Use the `isRequired` prop to display an asterisk next to the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInputMulti
        model="select-input-multi-required"
        label="Menu"
        isRequired
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Hint Text

Use the `hintText` prop to display text below the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInputMulti
        model="select-input-multi-hint"
        label="Menu"
        hintText="Hint Text"
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInputMulti
        model="select-input-multi-help"
        label="Menu"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Messages

Use the `errorMessage` and `successMessage` props to display a custom error or success message below the menu.

```jsx live
() => {
  const form = useForm();
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];

  return (
    <FormProvider state={form}>
      <Layout.Stack grow space={16}>
        <V2SelectInputMulti
          model="select-input-multi-error"
          label="Menu"
          isRequired={true}
          errorMessage="A selection is required"
          options={data}
        />
        <V2SelectInputMulti
          model="select-input-multi-success"
          label="Menu"
          successMessage="Great pick"
          options={data}
        />
      </Layout.Stack>
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the select list input field so users cannot select a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInputMulti
        model="select-input-multi-disabled"
        label="Disabled Menu"
        isDisabled={true}
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Disable Option Items

Disable an individual option item by setting the `isDisabled` key to `true` within the object.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInputMulti
        model="select-input-multi-disable-items"
        label="Your favorite framework/library"
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular', isDisabled: true },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine', isDisabled: true },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Select All

By setting the `selectAll` property to `true` you can make a "Select All" option visible at the top of the dropdown. When selected, all options will be selected. When deselected, all options will be deselected.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInputMulti
        model="select-input-multi-select-all"
        label="Your favorite framework/library"
        selectAll={true}
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Searchable

Use the `isSearchable` prop to display an input field for the user to search/filter the list of options that is located inside the dropdown.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <V2SelectInputMulti
        model="select-input-multi-searchable"
        label="Searchable"
        isSearchable
        options={[
          { label: 'Colors', value: 'Colors' },
          { label: 'Elevation', value: 'E' },
          { label: 'Icon Brand', value: 'IB' },
          { label: 'Typography', value: 'T' },
          {
            title: 'CTA',
            value: 'CTA',
            items: [
              { label: 'Button', value: 'button' },
              { label: 'Cell Group', value: 'cellGroup' },
              { label: 'Chip', value: 'chip' },
            ],
          },
          {
            title: 'Controls',
            value: 'Controls',
            items: [
              { label: 'Checkbox', value: 'checkbox' },
              { label: 'Checkbox Group', value: 'CG' },
              { label: 'Radio Group', value: 'RG' },
              { label: 'Segmented Controls', value: 'SC' },
              { label: 'Toggle Switch', value: 'TS' },
            ],
          },
          {
            title: 'Data',
            value: 'Title1',
            items: [
              { label: 'Avatar', value: 'avatar' },
              { label: 'Indicator', value: 'indicator' },
              { label: 'Progress Bar', value: 'PB' },
            ],
          },
          {
            title: 'Data Viz',
            value: 'DataViz',
            items: [
              { label: 'Accordion', value: 'accordion' },
              { label: 'Accumulator', value: 'accumulator' },
              { label: 'Donut Chart', value: 'DC' },
            ],
          },
          {
            title: 'Forms',
            value: 'Forms',
            items: [
              { label: 'Date Input', value: 'DI' },
              { label: 'Select Input', value: 'SI' },
              { label: 'Select Input Multi', value: 'SIM' },
              { label: 'Text Input', value: 'TI' },
            ],
          },
          {
            title: 'Layout',
            value: 'Layout',
            items: [
              { label: 'Bottom Sheet', value: 'BS' },
              { label: 'Modal', value: 'modal' },
              { label: 'Card', value: 'card' },
            ],
          },
          {
            title: 'Media',
            value: 'Media',
            items: [
              { label: 'Icon', value: 'icon' },
              { label: 'Icon Custom', value: 'IC' },
              { label: 'Icon Material', value: 'IM' },
            ],
          },
          {
            title: 'Navigation',
            value: 'nav',
            items: [
              { label: 'Link', value: 'link' },
              { label: 'Tabs', value: 'tabs' },
            ],
          },
          {
            title: 'Notifications',
            value: 'Notifications',
            items: [
              { label: 'Alert', value: 'alert' },
              { label: 'Badge', value: 'badge' },
              { label: 'FAB', value: 'fab' },
              { label: 'Toast', value: 'toast' },
            ],
          },
          {
            title: 'Providers',
            value: 'providers',
            items: [{ label: 'LagoonProvider', value: 'LP' }],
          },
          {
            title: 'Typography',
            value: 'typography',
            items: [
              { label: 'Heading', value: 'heading' },
              { label: 'Text', value: 'text' },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

## Fuse.js

Search Bar filtering uses the <ExitLink href="https://fusejs.io">Fuse.js</ExitLink> library to fuzzy filter results. What is fuzzy searching? Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

### Fuse Data

The `options` prop is the information that fuse will filter on and display in the search dropdown.

### Fuse Configurations

The fuse search options are set by default as follows. The keys are set to `label` and cannot be changed.

```
{
  keys: ['label', 'items.label'],
  includeMatches: true,
  findAllMatches: true,
  threshold: 0,
  ignoreLocation: true,
  minMatchCharLength: searchText.length,
}
```

### Custom Fuse Configurations

You can customize the fuse filter by following the documentation on <ExitLink href="https://fusejs.io/api/options.html">Fuse</ExitLink> and passing your configurations into the `fuseConfigs` prop. To get the filtered list back, be sure `includeMatches` is always set to `true`.

```jsx live
() => {
  const [value, setValue] = useState([]);
  const customFuseConfigs = {
    ignoreLocation: false,
    distance: 0,
    includeMatches: true,
  };

  return (
    <V2SelectInputMulti
      label="Your favorite framework/library"
      value={value}
      onChange={setValue}
      selectAll={true}
      isSearchable={true}
      fuseConfigs={customFuseConfigs}
      options={[
        { value: 'react', label: 'React' },
        { value: 'ng', label: 'Angular' },
        { value: 'svelte', label: 'Svelte' },
        { value: 'vue', label: 'Vue' },
        { value: 'alpine', label: 'Alpine' },
        { value: 'ember', label: 'Ember' },
        { value: 'stimulus', label: 'Stimulus' },
        { value: 'preact', label: 'Preact' },
      ]}
    />
  );
};
```

## Custom Filtering

Use the `customFilter` prop to override the fuse.js filtering. The results returned from your customFilter function should be passed into the options prop. In the example function below, the filter is checking the first letter typed in the search bar against the first letter of each item in the list. If the letter is a match the item is included in the filtered list. Any 'type-ahead' styles will not be applied when a custom filtering function is being used.

```jsx live
() => {
  const [value, setValue] = useState([]);

  const filterFunction = (searchText, list) => {
    const newList = [];
    if (searchText.length > 0) {
      list.forEach((item) => {
        if (item.label) {
          if (item.label[0].toUpperCase() == searchText[0].toUpperCase()) {
            newList.push(item);
          }
        }
        if (item.items) {
          item.items.forEach((i) => {
            if (i.label[0].toUpperCase() == searchText[0].toUpperCase()) {
              newList.push(i);
            }
          });
        }
      });
    }
    return newList;
  };

  return (
    <V2SelectInputMulti
      label="Your favorite framework/library"
      value={value}
      onChange={setValue}
      selectAll={true}
      isSearchable={true}
      customFilter={filterFunction}
      options={[
        { label: 'Colors', value: 'Colors' },
        { label: 'Elevation', value: 'E' },
        { label: 'Icon Brand', value: 'IB' },
        { label: 'Typography', value: 'T' },
        {
          title: 'CTA',
          value: 'CTA',
          items: [
            { label: 'Button', value: 'button' },
            { label: 'Cell Group', value: 'cellGroup' },
            { label: 'Chip', value: 'chip' },
          ],
        },
        {
          title: 'Controls',
          value: 'Controls',
          items: [
            { label: 'Checkbox', value: 'checkbox' },
            { label: 'Checkbox Group', value: 'CG' },
            { label: 'Radio Group', value: 'RG' },
            { label: 'Segmented Controls', value: 'SC' },
            { label: 'Toggle Switch', value: 'TS' },
          ],
        },
        {
          title: 'Data',
          value: 'Title1',
          items: [
            { label: 'Avatar', value: 'avatar' },
            { label: 'Indicator', value: 'indicator' },
            { label: 'Progress Bar', value: 'PB' },
          ],
        },
        {
          title: 'Data Viz',
          value: 'DataViz',
          items: [
            { label: 'Accordion', value: 'accordion' },
            { label: 'Accumulator', value: 'accumulator' },
            { label: 'Donut Chart', value: 'DC' },
          ],
        },
        {
          title: 'Forms',
          value: 'Forms',
          items: [
            { label: 'Date Input', value: 'DI' },
            { label: 'Select Input', value: 'SI' },
            { label: 'Select Input Multi', value: 'SIM' },
            { label: 'Text Input', value: 'TI' },
          ],
        },
        {
          title: 'Layout',
          value: 'Layout',
          items: [
            { label: 'Bottom Sheet', value: 'BS' },
            { label: 'Modal', value: 'modal' },
            { label: 'Card', value: 'card' },
          ],
        },
        {
          title: 'Media',
          value: 'Media',
          items: [
            { label: 'Icon', value: 'icon' },
            { label: 'Icon Custom', value: 'IC' },
            { label: 'Icon Material', value: 'IM' },
          ],
        },
        {
          title: 'Navigation',
          value: 'nav',
          items: [
            { label: 'Link', value: 'link' },
            { label: 'Tabs', value: 'tabs' },
          ],
        },
        {
          title: 'Notifications',
          value: 'Notifications',
          items: [
            { label: 'Alert', value: 'alert' },
            { label: 'Badge', value: 'badge' },
            { label: 'FAB', value: 'fab' },
            { label: 'Toast', value: 'toast' },
          ],
        },
        {
          title: 'Providers',
          value: 'providers',
          items: [{ label: 'LagoonProvider', value: 'LP' }],
        },
        {
          title: 'Typography',
          value: 'typography',
          items: [
            { label: 'Heading', value: 'heading' },
            { label: 'Text', value: 'text' },
          ],
        },
      ]}
    />
  );
};
```

## Notes

In order for a user to select an item from the menu while the softkeyboard is up, the prop `keyboardShouldPersistTaps` is set to `'always'`. If the menu is contained in a ScrollView, `keyboardShouldPersistTaps={'always'}` should be set with in that view. This allows for the keyboard to remain open and an item to be selected on initial tap.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={SelectInputMulti}
  rows={[
    {
      name: 'label',
      type: 'string',
      description: 'Select list label',
    },
    {
      name: 'modalTitle',
      type: 'string',
      description: 'Title of the input modal',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below the select input field',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Text displayed below the select input field',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'onSubmit',
      type: 'function',
      description: 'Callback fired every time the submit button is pressed',
    },
    {
      name: 'customFilter',
      type: 'function',
      description: 'Custom function used for search',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the select list. If true, the select list will be disabled',
    },
    {
      name: 'successMessage',
      type: 'string',
      description:
        'Success message to be displayed below the select input field',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description:
        'Requires a user to make a selection. If true, the asterisk will be displayed next to the label',
    },
    {
      name: 'isSearchable',
      type: 'boolean',
      description:
        'Flag to enable/disable the select list search/filter feature',
    },
    {
      name: 'options',
      type: 'object[]',
      description:
        'List of options selectable in the select list input. { label: string, value: string }',
    },
    {
      name: 'fuseConfig',
      type: 'shape',
      description: 'Configs for Fuse',
    },
    {
      name: 'value',
      type: 'string',
      description:
        'Option value or list of option values selected in the select list input',
    },

    {
      name: 'selectAll',
      type: 'boolean',
      description: 'Toggles the Select All option',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
    {
      name: 'placeholder',
      type: 'string',
      description: 'The rendered string when no option is selected',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={SelectInputMulti}
  rows={[
    {
      name: 'select-input-multi-root',
      description: 'Root element',
    },
    {
      name: 'select-input-multi-header',
      description: 'Header element',
    },
    {
      name: 'select-input-multi-label',
      description: 'Label element',
    },
    {
      name: 'select-input-multi-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'select-input-multi-help-button',
      description: 'Help button',
    },
    {
      name: 'select-input-multi-open-icon',
      description: 'Menu open icon',
    },
    {
      name: 'select-input-multi-modal',
      description: 'Menu modal',
    },
    {
      name: 'select-input-multi-menu-list',
      description: 'Menu list',
    },
    {
      name: 'select-input-multi-message',
      description: 'Message element',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'select-input-text-container',
      description: 'Text container',
    },
    {
      name: 'select-input-text',
      description: 'Text element',
    },
    {
      name: 'select-input-search-bar',
      description: 'Menu search bar',
    },
    {
      name: 'select-input-footer',
      description: 'Modal menu footer',
    },
    {
      name: 'select-input-footer-button',
      description: 'Modal menu footer button',
    },
    {
      name: 'select-input-multi-container',
      description: 'Selection container',
    },
    {
      name: 'select-input-menu-container',
      description: 'Menu container',
    },
    {
      name: 'select-input-menu-list-title',
      description: 'Menu title',
    },
    {
      name: 'select-input-close-icon',
      description: 'Close icon',
    },
    {
      name: 'select-input-menu-item-container',
      description: 'Menu item container',
    },
    {
      name: 'select-input-menu-item',
      description: 'Menu item element',
      states: ['disabled', 'selected'],
    },
    {
      name: 'select-input-menu-item-text',
      description: 'Menu item text',
      states: ['disabled', 'selected'],
    },
    {
      name: 'select-input-menu-item-checkbox',
      description: 'Menu item checkbox',
    },
    {
      name: 'select-input-menu-item-select-all-checkbox',
      description: 'Menu item select all checkbox',
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
  ]}
  inherits={[{ name: 'Modal', link: '/mobile/ui/modal' }]}
/>
```

```jsx render
<Docs.TranslationTable
  of={SelectInputMulti}
  rows={['help', 'close', 'error', 'success', 'SelectInput.placeholder']}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={V2SelectInputMulti}
  keys={['input-field', 'input-container', 'input-header', 'input-message']}
/>
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={SelectInputMulti} type="class" />
```

```jsx render
<Docs.ComparisonTable of={SelectInputMulti} type="props" />
```

</Tab>

---
id: select-input-multi
category: Forms
title: SelectInputMulti
description: Allows users to select multiple values from a provided list of options.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=18828-105743&mode=design&t=Aa48cFkeiLakVzb1-0
---

<Tab label="Overview">

```jsx
import { SelectInputMulti } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'SelectInputMulti',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'isSearchable',
      type: 'boolean',
    },
    {
      prop: 'selectAll',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ],
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-sandbox"
        label="Your favorite framework/library"
        isSearchable
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Usage

Use the `options` prop to supply the options that can be selected. `options` is an array of objects, where each object should have two properties:

- `label`, a string which is how the option will be displayed in the list
- `value`, a string which is the unique identifier for the option

Sections can also be specified, in which case the section object should have `title`, `value`, and `items` properties instead of `label` and `value` (See [Titles](#titles) for more details).

```
options = {
  [
    { label: 'Item 1', value: 'item1' },
    { label: 'Item 2', value: 'item2', isDisabled: true },
    { label: 'Item 3', value: 'item3' },
    { label: 'Item 4', value: 'item4' },
    { label: 'Item 5', value: 'item5' },
  ]
}
```

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm();

  const options = [
    { label: 'Colors', value: 'Colors' },
    { label: 'Elevation', value: 'E' },
    { label: 'Icon Brand', value: 'IB' },
    { label: 'Typography', value: 'T' },
    {
      title: 'CTA',
      value: 'CTA',
      items: [
        { label: 'Button', value: 'button' },
        { label: 'Cell Group', value: 'cellGroup' },
        { label: 'Chip', value: 'chip' },
      ],
    },
    {
      title: 'Controls',
      value: 'Controls',
      items: [
        { label: 'Checkbox', value: 'checkbox' },
        { label: 'Checkbox Group', value: 'CG' },
        { label: 'Radio Group', value: 'RG' },
        { label: 'Segmented Controls', value: 'SC' },
        { label: 'Toggle Switch', value: 'TS' },
      ],
    },
    {
      title: 'Data',
      value: 'Title1',
      items: [
        { label: 'Avatar', value: 'avatar' },
        { label: 'Indicator', value: 'indicator' },
        { label: 'Progress Bar', value: 'PB' },
      ],
    },
    {
      title: 'Data Viz',
      value: 'DataViz',
      items: [
        { label: 'Accordion', value: 'accordion' },
        { label: 'Accumulator', value: 'accumulator' },
        { label: 'Donut Chart', value: 'DC' },
      ],
    },
    {
      title: 'Forms',
      value: 'Forms',
      items: [
        { label: 'Date Input', value: 'DI' },
        { label: 'Select Input', value: 'SI' },
        { label: 'Select Input Multi', value: 'SIM' },
        { label: 'Text Input', value: 'TI' },
      ],
    },
    {
      title: 'Layout',
      value: 'Layout',
      items: [
        { label: 'Bottom Sheet', value: 'BS' },
        { label: 'Modal', value: 'modal' },
        { label: 'Card', value: 'card' },
      ],
    },
    {
      title: 'Media',
      value: 'Media',
      items: [
        { label: 'Icon', value: 'icon' },
        { label: 'Icon Custom', value: 'IC' },
        { label: 'Icon Material', value: 'IM' },
      ],
    },
    {
      title: 'Navigation',
      value: 'nav',
      items: [
        { label: 'Link', value: 'link' },
        { label: 'Tabs', value: 'tabs' },
      ],
    },
    {
      title: 'Notifications',
      value: 'Notifications',
      items: [
        { label: 'Alert', value: 'alert' },
        { label: 'Badge', value: 'badge' },
        { label: 'FAB', value: 'fab' },
        { label: 'Toast', value: 'toast' },
      ],
    },
    {
      title: 'Providers',
      value: 'providers',
      items: [{ label: 'LagoonProvider', value: 'LP' }],
    },
    {
      title: 'Typography',
      value: 'typography',
      items: [
        { label: 'Heading', value: 'heading' },
        { label: 'Text', value: 'text' },
      ],
    },
  ];

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <SelectInputMulti
        model="select-input-multi-form"
        label="Mobile Components"
        isSearchable
        options={options}
      />
      <Button type="submit" size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const options = [
    { label: 'Colors', value: 'Colors' },
    { label: 'Elevation', value: 'E' },
    { label: 'Icon Brand', value: 'IB' },
    { label: 'Typography', value: 'T' },
    {
      title: 'CTA',
      value: 'CTA',
      items: [
        { label: 'Button', value: 'button' },
        { label: 'Cell Group', value: 'cellGroup' },
        { label: 'Chip', value: 'chip' },
      ],
    },
    {
      title: 'Controls',
      value: 'Controls',
      items: [
        { label: 'Checkbox', value: 'checkbox' },
        { label: 'Checkbox Group', value: 'CG' },
        { label: 'Radio Group', value: 'RG' },
        { label: 'Segmented Controls', value: 'SC' },
        { label: 'Toggle Switch', value: 'TS' },
      ],
    },
    {
      title: 'Data',
      value: 'Title1',
      items: [
        { label: 'Avatar', value: 'avatar' },
        { label: 'Indicator', value: 'indicator' },
        { label: 'Progress Bar', value: 'PB' },
      ],
    },
    {
      title: 'Data Viz',
      value: 'DataViz',
      items: [
        { label: 'Accordion', value: 'accordion' },
        { label: 'Accumulator', value: 'accumulator' },
        { label: 'Donut Chart', value: 'DC' },
      ],
    },
    {
      title: 'Forms',
      value: 'Forms',
      items: [
        { label: 'Date Input', value: 'DI' },
        { label: 'Select Input', value: 'SI' },
        { label: 'Select Input Multi', value: 'SIM' },
        { label: 'Text Input', value: 'TI' },
      ],
    },
    {
      title: 'Layout',
      value: 'Layout',
      items: [
        { label: 'Bottom Sheet', value: 'BS' },
        { label: 'Modal', value: 'modal' },
        { label: 'Card', value: 'card' },
      ],
    },
    {
      title: 'Media',
      value: 'Media',
      items: [
        { label: 'Icon', value: 'icon' },
        { label: 'Icon Custom', value: 'IC' },
        { label: 'Icon Material', value: 'IM' },
      ],
    },
    {
      title: 'Navigation',
      value: 'nav',
      items: [
        { label: 'Link', value: 'link' },
        { label: 'Tabs', value: 'tabs' },
      ],
    },
    {
      title: 'Notifications',
      value: 'Notifications',
      items: [
        { label: 'Alert', value: 'alert' },
        { label: 'Badge', value: 'badge' },
        { label: 'FAB', value: 'fab' },
        { label: 'Toast', value: 'toast' },
      ],
    },
    {
      title: 'Providers',
      value: 'providers',
      items: [{ label: 'LagoonProvider', value: 'LP' }],
    },
    {
      title: 'Typography',
      value: 'typography',
      items: [
        { label: 'Heading', value: 'heading' },
        { label: 'Text', value: 'text' },
      ],
    },
  ];
  const [value, setValue] = useState([]);

  const handleSubmit = () => {
    console.log('Submitted:', value);
  };

  return (
    <View>
      <SelectInputMulti
        label="Mobile Components"
        value={value}
        onChange={setValue}
        isSearchable
        options={options}
      />
      <Button onPress={handleSubmit} size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </View>
  );
};
```

## Titles

To create sections in the list, pass objects into the `options` array that have the `title`, `value`, and `items` properties. `title` specifies the name of the title, which will be bolded and not selectable, `value` is the unique identifier for the title, while `items` should contain the options within that section (with the same `label`/`value` format as normal).

```
options = {
  [
    {
      title: 'Title 1',
      value: 'Title1',
      items: [
        { label: 'item 1', value: 'item11' },
        { label: 'item 2', value: 'item12', isDisabled: true },
        { label: 'item 3', value: 'item13' },
      ],
    },
  ]
}
```

## Label

Use the `label` prop to display a label above the input menu.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-label"
        label="Menu"
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Required

Use the `isRequired` prop to display an asterisk next to the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-required"
        label="Menu"
        isRequired
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Hint Text

Use the `hintText` prop to display text below the label.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-hint"
        label="Menu"
        hintText="Hint Text"
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-help"
        label="Menu"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Messages

Use the `errorMessage` and `successMessage` props to display a custom error or success message below the menu.

```jsx live
() => {
  const form = useForm();
  const data = [
    { value: 'react', label: 'React' },
    { value: 'ng', label: 'Angular' },
    { value: 'svelte', label: 'Svelte' },
    { value: 'vue', label: 'Vue' },
    { value: 'alpine', label: 'Alpine' },
    { value: 'ember', label: 'Ember' },
    { value: 'stimulus', label: 'Stimulus' },
    { value: 'preact', label: 'Preact' },
  ];

  return (
    <FormProvider state={form}>
      <Layout.Stack grow space={16}>
        <SelectInputMulti
          model="select-input-multi-error"
          label="Menu"
          isRequired={true}
          errorMessage="A selection is required"
          options={data}
        />
        <SelectInputMulti
          model="select-input-multi-success"
          label="Menu"
          successMessage="Great pick"
          options={data}
        />
      </Layout.Stack>
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the select list input field so users cannot select a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-disabled"
        label="Disabled Menu"
        isDisabled={true}
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Disable Option Items

Disable an individual option item by setting the `isDisabled` key to `true` within the object.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-disable-items"
        label="Your favorite framework/library"
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular', isDisabled: true },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine', isDisabled: true },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Select All

By setting the `selectAll` property to `true` you can make a "Select All" option visible at the top of the dropdown. When selected, all options will be selected. When deselected, all options will be deselected.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-select-all"
        label="Your favorite framework/library"
        selectAll={true}
        options={[
          { value: 'react', label: 'React' },
          { value: 'ng', label: 'Angular' },
          { value: 'svelte', label: 'Svelte' },
          { value: 'vue', label: 'Vue' },
          { value: 'alpine', label: 'Alpine' },
          { value: 'ember', label: 'Ember' },
          { value: 'stimulus', label: 'Stimulus' },
          { value: 'preact', label: 'Preact' },
        ]}
      />
    </FormProvider>
  );
};
```

## Searchable

Use the `isSearchable` prop to display an input field for the user to search/filter the list of options that is located inside the dropdown.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <SelectInputMulti
        model="select-input-multi-searchable"
        label="Searchable"
        isSearchable
        options={[
          { label: 'Colors', value: 'Colors' },
          { label: 'Elevation', value: 'E' },
          { label: 'Icon Brand', value: 'IB' },
          { label: 'Typography', value: 'T' },
          {
            title: 'CTA',
            value: 'CTA',
            items: [
              { label: 'Button', value: 'button' },
              { label: 'Cell Group', value: 'cellGroup' },
              { label: 'Chip', value: 'chip' },
            ],
          },
          {
            title: 'Controls',
            value: 'Controls',
            items: [
              { label: 'Checkbox', value: 'checkbox' },
              { label: 'Checkbox Group', value: 'CG' },
              { label: 'Radio Group', value: 'RG' },
              { label: 'Segmented Controls', value: 'SC' },
              { label: 'Toggle Switch', value: 'TS' },
            ],
          },
          {
            title: 'Data',
            value: 'Title1',
            items: [
              { label: 'Avatar', value: 'avatar' },
              { label: 'Indicator', value: 'indicator' },
              { label: 'Progress Bar', value: 'PB' },
            ],
          },
          {
            title: 'Data Viz',
            value: 'DataViz',
            items: [
              { label: 'Accordion', value: 'accordion' },
              { label: 'Accumulator', value: 'accumulator' },
              { label: 'Donut Chart', value: 'DC' },
            ],
          },
          {
            title: 'Forms',
            value: 'Forms',
            items: [
              { label: 'Date Input', value: 'DI' },
              { label: 'Select Input', value: 'SI' },
              { label: 'Select Input Multi', value: 'SIM' },
              { label: 'Text Input', value: 'TI' },
            ],
          },
          {
            title: 'Layout',
            value: 'Layout',
            items: [
              { label: 'Bottom Sheet', value: 'BS' },
              { label: 'Modal', value: 'modal' },
              { label: 'Card', value: 'card' },
            ],
          },
          {
            title: 'Media',
            value: 'Media',
            items: [
              { label: 'Icon', value: 'icon' },
              { label: 'Icon Custom', value: 'IC' },
              { label: 'Icon Material', value: 'IM' },
            ],
          },
          {
            title: 'Navigation',
            value: 'nav',
            items: [
              { label: 'Link', value: 'link' },
              { label: 'Tabs', value: 'tabs' },
            ],
          },
          {
            title: 'Notifications',
            value: 'Notifications',
            items: [
              { label: 'Alert', value: 'alert' },
              { label: 'Badge', value: 'badge' },
              { label: 'FAB', value: 'fab' },
              { label: 'Toast', value: 'toast' },
            ],
          },
          {
            title: 'Providers',
            value: 'providers',
            items: [{ label: 'LagoonProvider', value: 'LP' }],
          },
          {
            title: 'Typography',
            value: 'typography',
            items: [
              { label: 'Heading', value: 'heading' },
              { label: 'Text', value: 'text' },
            ],
          },
        ]}
      />
    </FormProvider>
  );
};
```

## Fuse.js

Search Bar filtering uses the <ExitLink href="https://fusejs.io">Fuse.js</ExitLink> library to fuzzy filter results. What is fuzzy searching? Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

### Fuse Data

The `options` prop is the information that fuse will filter on and display in the search dropdown.

### Fuse Configurations

The fuse search options are set by default as follows. The keys are set to `label` and cannot be changed.

```
{
  keys: ['label', 'items.label'],
  includeMatches: true,
  findAllMatches: true,
  threshold: 0,
  ignoreLocation: true,
  minMatchCharLength: searchText.length,
}
```

### Custom Fuse Configurations

You can customize the fuse filter by following the documentation on <ExitLink href="https://fusejs.io/api/options.html">Fuse</ExitLink> and passing your configurations into the `fuseConfigs` prop. To get the filtered list back, be sure `includeMatches` is always set to `true`.

```jsx live
() => {
  const [value, setValue] = useState([]);
  const customFuseConfigs = {
    ignoreLocation: false,
    distance: 0,
    includeMatches: true,
  };

  return (
    <SelectInputMulti
      label="Your favorite framework/library"
      value={value}
      onChange={setValue}
      selectAll={true}
      isSearchable={true}
      fuseConfigs={customFuseConfigs}
      options={[
        { value: 'react', label: 'React' },
        { value: 'ng', label: 'Angular' },
        { value: 'svelte', label: 'Svelte' },
        { value: 'vue', label: 'Vue' },
        { value: 'alpine', label: 'Alpine' },
        { value: 'ember', label: 'Ember' },
        { value: 'stimulus', label: 'Stimulus' },
        { value: 'preact', label: 'Preact' },
      ]}
    />
  );
};
```

## Custom Filtering

Use the `customFilter` prop to override the fuse.js filtering. The results returned from your customFilter function should be passed into the options prop. In the example function below, the filter is checking the first letter typed in the search bar against the first letter of each item in the list. If the letter is a match the item is included in the filtered list. Any 'type-ahead' styles will not be applied when a custom filtering function is being used.

```jsx live
() => {
  const [value, setValue] = useState([]);

  const filterFunction = (searchText, list) => {
    const newList = [];
    if (searchText.length > 0) {
      list.forEach((item) => {
        if (item.label) {
          if (item.label[0].toUpperCase() == searchText[0].toUpperCase()) {
            newList.push(item);
          }
        }
        if (item.items) {
          item.items.forEach((i) => {
            if (i.label[0].toUpperCase() == searchText[0].toUpperCase()) {
              newList.push(i);
            }
          });
        }
      });
    }
    return newList;
  };

  return (
    <SelectInputMulti
      label="Your favorite framework/library"
      value={value}
      onChange={setValue}
      selectAll={true}
      isSearchable={true}
      customFilter={filterFunction}
      options={[
        { label: 'Colors', value: 'Colors' },
        { label: 'Elevation', value: 'E' },
        { label: 'Icon Brand', value: 'IB' },
        { label: 'Typography', value: 'T' },
        {
          title: 'CTA',
          value: 'CTA',
          items: [
            { label: 'Button', value: 'button' },
            { label: 'Cell Group', value: 'cellGroup' },
            { label: 'Chip', value: 'chip' },
          ],
        },
        {
          title: 'Controls',
          value: 'Controls',
          items: [
            { label: 'Checkbox', value: 'checkbox' },
            { label: 'Checkbox Group', value: 'CG' },
            { label: 'Radio Group', value: 'RG' },
            { label: 'Segmented Controls', value: 'SC' },
            { label: 'Toggle Switch', value: 'TS' },
          ],
        },
        {
          title: 'Data',
          value: 'Title1',
          items: [
            { label: 'Avatar', value: 'avatar' },
            { label: 'Indicator', value: 'indicator' },
            { label: 'Progress Bar', value: 'PB' },
          ],
        },
        {
          title: 'Data Viz',
          value: 'DataViz',
          items: [
            { label: 'Accordion', value: 'accordion' },
            { label: 'Accumulator', value: 'accumulator' },
            { label: 'Donut Chart', value: 'DC' },
          ],
        },
        {
          title: 'Forms',
          value: 'Forms',
          items: [
            { label: 'Date Input', value: 'DI' },
            { label: 'Select Input', value: 'SI' },
            { label: 'Select Input Multi', value: 'SIM' },
            { label: 'Text Input', value: 'TI' },
          ],
        },
        {
          title: 'Layout',
          value: 'Layout',
          items: [
            { label: 'Bottom Sheet', value: 'BS' },
            { label: 'Modal', value: 'modal' },
            { label: 'Card', value: 'card' },
          ],
        },
        {
          title: 'Media',
          value: 'Media',
          items: [
            { label: 'Icon', value: 'icon' },
            { label: 'Icon Custom', value: 'IC' },
            { label: 'Icon Material', value: 'IM' },
          ],
        },
        {
          title: 'Navigation',
          value: 'nav',
          items: [
            { label: 'Link', value: 'link' },
            { label: 'Tabs', value: 'tabs' },
          ],
        },
        {
          title: 'Notifications',
          value: 'Notifications',
          items: [
            { label: 'Alert', value: 'alert' },
            { label: 'Badge', value: 'badge' },
            { label: 'FAB', value: 'fab' },
            { label: 'Toast', value: 'toast' },
          ],
        },
        {
          title: 'Providers',
          value: 'providers',
          items: [{ label: 'LagoonProvider', value: 'LP' }],
        },
        {
          title: 'Typography',
          value: 'typography',
          items: [
            { label: 'Heading', value: 'heading' },
            { label: 'Text', value: 'text' },
          ],
        },
      ]}
    />
  );
};
```

## Notes

In order for a user to select an item from the menu while the softkeyboard is up, the prop `keyboardShouldPersistTaps` is set to `'always'`. If the menu is contained in a ScrollView, `keyboardShouldPersistTaps={'always'}` should be set with in that view. This allows for the keyboard to remain open and an item to be selected on initial tap.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={SelectInputMulti}
  rows={[
    {
      name: 'label',
      type: 'string',
      description: 'Select list label',
    },
    {
      name: 'modalTitle',
      type: 'string',
      description: 'Title of the input modal',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below the select input field',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Text displayed below the select input field',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired every time the value changes',
    },
    {
      name: 'onSubmit',
      type: 'function',
      description: 'Callback fired every time the submit button is pressed',
    },
    {
      name: 'customFilter',
      type: 'function',
      description: 'Custom function used for search',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the select list. If true, the select list will be disabled',
    },
    {
      name: 'successMessage',
      type: 'string',
      description:
        'Success message to be displayed below the select input field',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description:
        'Requires a user to make a selection. If true, the asterisk will be displayed next to the label',
    },
    {
      name: 'isSearchable',
      type: 'boolean',
      description:
        'Flag to enable/disable the select list search/filter feature',
    },
    {
      name: 'options',
      type: 'object[]',
      description:
        'List of options selectable in the select list input. { label: string, value: string }',
    },
    {
      name: 'fuseConfig',
      type: 'shape',
      description: 'Configs for Fuse',
    },
    {
      name: 'value',
      type: 'string',
      description:
        'Option value or list of option values selected in the select list input',
    },

    {
      name: 'selectAll',
      type: 'boolean',
      description: 'Toggles the Select All option',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
    {
      name: 'placeholder',
      type: 'string',
      description: 'The rendered string when no option is selected',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={SelectInputMulti}
  rows={[
    {
      name: 'select-input-multi-root',
      description: 'Root element',
    },
    {
      name: 'select-input-multi-header',
      description: 'Header element',
    },
    {
      name: 'select-input-multi-label',
      description: 'Label element',
    },
    {
      name: 'select-input-multi-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'select-input-multi-help-button',
      description: 'Help button',
    },
    {
      name: 'select-input-multi-open-icon',
      description: 'Menu open icon',
    },
    {
      name: 'select-input-multi-modal',
      description: 'Menu modal',
    },
    {
      name: 'select-input-multi-menu-list',
      description: 'Menu list',
    },
    {
      name: 'select-input-multi-message',
      description: 'Message element',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'select-input-text-container',
      description: 'Text container',
    },
    {
      name: 'select-input-text',
      description: 'Text element',
    },
    {
      name: 'select-input-search-bar',
      description: 'Menu search bar',
    },
    {
      name: 'select-input-footer',
      description: 'Modal menu footer',
    },
    {
      name: 'select-input-footer-button',
      description: 'Modal menu footer button',
    },
    {
      name: 'select-input-multi-container',
      description: 'Selection container',
    },
    {
      name: 'select-input-menu-container',
      description: 'Menu container',
    },
    {
      name: 'select-input-menu-list-title',
      description: 'Menu title',
    },

    {
      name: 'select-input-menu-item-container',
      description: 'Menu item container',
    },
    {
      name: 'select-input-menu-item',
      description: 'Menu item element',
      states: ['disabled', 'selected'],
    },
    {
      name: 'select-input-menu-item-text',
      description: 'Menu item text',
      states: ['disabled', 'selected'],
    },
    {
      name: 'select-input-menu-item-checkbox',
      description: 'Menu item checkbox',
    },
    {
      name: 'select-input-menu-item-select-all-checkbox',
      description: 'Menu item select all checkbox',
    },
    {
      name: 'select-input-close-icon',
      description: 'Close icon',
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
  ]}
  inherits={[{ name: 'Modal', link: '/mobile/ui/modal' }]}
/>
```

```jsx render
<Docs.TranslationTable
  of={SelectInputMulti}
  rows={['help', 'close', 'error', 'success', 'SelectInput.placeholder']}
/>
```

</Tab>

---
id: skeleton-v2
category: Overlay
title: V2Skeleton
description: Placeholder for loading content.
design: https://www.figma.com/design/5djnh49w0SBYAG5tFJifIG/v1.66.0-App-Abyss-Global%E2%80%A8Component-Library?m=auto&node-id=1469-39887&t=og176wcAIBNmTzwi-1
sourceIsTS: true
subDirectory: Skeleton/v2
---

<Tab label="Overview">

```jsx
import { V2Skeleton } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'V2Skeleton',
  inputs: [
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'Text', value: 'text' },
        { label: 'Square', value: 'square' },
        { label: 'Round', value: 'round' },
      ],
    },
    {
      prop: 'height',
      type: 'string',
    },
    {
      prop: 'width',
      type: 'string',
    },
    {
      prop: 'animated',
      type: 'boolean'
    },
  ],
}

<V2Skeleton variant="text" />
```

## Usage

The `Skeleton` component is a placeholder for content that is loading. It helps convey to users that the page is functioning as intended and that content will appear shortly.

###### Common Use Cases:

- Displaying a loading state for text, images, or cards.
- Providing a visual cue for asynchronous content.
- Maintaining layout consistency while data is being fetched.

```jsx live
() => {
  const avatar =
    'https://abyss.uhc.com/img/team/AbyssMobile/Thomas-Musengwa.png';
  const cardImage = 'https://abyss.uhc.com/img/graphics/card-image-example.png';

  const [isDoneLoading, onToggle] = useToggle(false);

  const returnContent = () => {
    if (isDoneLoading) {
      return (
        <>
          <Layout.Stack alignItems="left">
            <Layout.Group>
              <Layout.Group>
                <Image
                  source={{ uri: avatar }}
                  style={{
                    height: 50,
                    width: 50,
                    borderRadius: 25,
                  }}
                />
              </Layout.Group>
              <Layout.Group>
                <Layout.Stack space={0} alignItems="left">
                  <Text fontWeight={600}>Name goes here</Text>
                  <Text size={'$sm'}>Description</Text>
                </Layout.Stack>
              </Layout.Group>
            </Layout.Group>
            <Layout.Group>
              <Image
                source={{ uri: cardImage }}
                style={{
                  height: 100,
                  width: 260,
                  borderRadius: 10,
                }}
              />
            </Layout.Group>
          </Layout.Stack>
        </>
      );
    }
    return null;
  };

  const returnSkeletonStack = () => {
    if (!isDoneLoading) {
      return (
        <Layout.Stack alignItems="left">
          <Layout.Group>
            <V2Skeleton variant="round" />
            <Layout.Stack>
              <V2Skeleton variant="text" />
              <V2Skeleton variant="text" />
            </Layout.Stack>
          </Layout.Group>
          <V2Skeleton variant="square" width={256} height={100} />
        </Layout.Stack>
      );
    }
    return null;
  };

  return (
    <Layout.Stack alignItems="left">
      {returnContent()}
      {returnSkeletonStack()}
      <Button style={{ marginTop: 15 }} onPress={onToggle}>
        Toggle Loading
      </Button>
    </Layout.Stack>
  );
};
```

## Width and Height

The `height` and `width` props define the dimensions of the component. Setting their values to `100%` will fill its parent container.
The default values for `height` and `width` depend on the variant. For more details, refer to the [Variant](#variant) section.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <V2Skeleton width={48} height={48} />
      <View style={{ width: 100, height: 100 }}>
        <V2Skeleton height="100%" width="100%" />
      </View>
      <V2Skeleton width={196} height={48} />
    </Layout.Stack>
  );
};
```

## Variant & Alt

The `alt` prop adjusts the color of the component, changing it to a lighter shade.

The `variant` prop defines the default size and border radius of the component. Use this prop to match the skeleton's shape to the content it represents.

###### Available Variants:

- **`text`**: The default variant with a `height` of _20px_, a `width` of _180px_, and slightly rounded edges. Ideal for text blocks.
- **`square`**: This variant has a default `height` and `width` of _48px_, with slightly rounded edges. Suitable for square images or icons.
- **`round`**: This variant also has a default `height` and `width` of _48px_, but features fully rounded edges. Best for avatars or circular icons.

```jsx live
() => {
  const SkeletonGroup = styled(Layout.Group, {
    padding: 8,
    variants: {
      alt: { true: { backgroundColor: '$gray3' } },
    },
  });
  return (
    <Layout.Stack alignItems="left">
      <SkeletonGroup alignItems="bottom">
        <V2Skeleton variant="round" />
        <V2Skeleton variant="square" />
        <V2Skeleton variant="text" />
      </SkeletonGroup>
      <SkeletonGroup alt alignItems="bottom">
        <V2Skeleton alt variant="round" />
        <V2Skeleton alt variant="square" />
        <V2Skeleton alt variant="text" />
      </SkeletonGroup>
    </Layout.Stack>
  );
};
```

## Animations & Color

Animation is enabled by default. To disable it, set the `animated` prop to `false`.
The `color` prop can be used to customize the color of the component.
You can also customize the loader's color and opacity using the `loaderColor` and `loaderOpacity` props.

```jsx live
() => {
  const [isAnimated, onToggle] = useToggle(true);
  return (
    <Layout.Stack grow space={18}>
      <Layout.Stack alignItems="left">
        <Layout.Group>
          <V2Skeleton color="orange" animated={isAnimated} variant="round" />
          <Layout.Stack>
            <V2Skeleton animated={isAnimated} />
            <V2Skeleton animated={isAnimated} />
          </Layout.Stack>
        </Layout.Group>
        <V2Skeleton
          color="$info1"
          animated={isAnimated}
          variant="square"
          width={236}
          height={72}
        />
      </Layout.Stack>

      <Button onPress={onToggle} size="small" variant="secondary">
        Turn Animation {isAnimated ? 'OFF' : 'ON'}
      </Button>
    </Layout.Stack>
  );
};
```

## Skeleton with Children

Add children to the `Skeleton` component by placing elements between the `Skeleton` tags.

```jsx live
() => {
  const Row = styled('View', {
    display: 'flex',
    flexDirection: 'row',
    marginVertical: 15,
  });
  const InnerWrapper = styled('View', {
    padding: '$md',
    justifyContent: 'space-between',
    height: '100%',
  });
  return (
    <V2Skeleton width={260} height={78} style={{ padding: 12 }}>
      <Layout.Stack alignItems="left">
        <Layout.Group>
          <V2Skeleton variant="round" animated={false} />
          <Layout.Stack>
            <V2Skeleton animated={false} />
            <V2Skeleton animated={false} />
          </Layout.Stack>
        </Layout.Group>
      </Layout.Stack>
    </V2Skeleton>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2Skeleton}
  rows={[
    {
      name: 'width',
      type: 'number | string',
      description: 'Set width of skeleton',
    },
    {
      name: 'height',
      type: 'number | string',
      description: 'Set height of skeleton',
    },
    {
      name: 'animated',
      type: 'boolean',
      description: 'Set to false to disable animation',
    },
    {
      name: 'variant',
      type: "'text' | 'square' | 'round'",
      description: 'Change shape of the skeleton',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The content within the skeleton',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the skeleton',
    },
    {
      name: 'alt',
      type: 'boolean',
      description: 'sets the skeleton to a lighter shade',
    },
    {
      name: 'loadingColor',
      type: 'string',
      description: 'Set the color of the skeleton loader',
    },
    {
      name: 'loaderOpacity',
      type: 'string',
      description: 'Set the opacity of the skeleton loader',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Skeleton}
  rows={[
    {
      name: 'skeleton-root',
      description: 'Skeleton root element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={V2Skeleton} rows={['loading']} />
```

</Tab>

<Tab label="Tokens">

<h2> Component Tokens </h2>

**Note:** Click on the tokens to copy onto your clipboard.

```jsx render
<Docs.ComponentTokensTable of={V2Skeleton} keys={['skeleton']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={Skeleton} type="class" />
```

```jsx render
<Docs.ComparisonTable of={Skeleton} type="props" />
```

</Tab>

---
id: skeleton
category: Overlay
title: Skeleton
description: Placeholder for loading content.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=12865-62521
---

<Tab label="Overview">

```jsx
import { Skeleton } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Skeleton',
  inputs: [
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'rectangular', value: 'rectangular' },
        { label: 'rounded', value: 'rounded' },
        { label: 'circular', value: 'circular' },
      ],
    },
    {
      prop: 'height',
      type: 'string',
    },
    {
      prop: 'width',
      type: 'string',
    },
    {
      prop: 'animated',
      type: 'boolean'
    },
  ],
}

<Skeleton height={100} width={100}></Skeleton>
```

## Usage

`Skeleton` is a placeholder component for content that is loading. `Skeleton` can help convey to users that content is on its way and the page is functioning as intended.

```jsx live
() => {
  const avatar = 'https://abyss.uhc.com/img/team/scott-houser.jpg';
  const cardImage = 'https://abyss.uhc.com/img/graphics/card-image-example.png';

  const { isOpen: isDoneLoading, onToggle } = Web.useToggle();
  const returnContent = () => {
    if (isDoneLoading) {
      return (
        <>
          <Web.Announce>profile has loaded</Web.Announce>
          <Layout.Stack alignItems="left">
            <Layout.Group>
              <Layout.Group>
                <Image
                  source={{ uri: avatar }}
                  style={{
                    height: '50px',
                    width: '50px',
                    borderRadius: '50px',
                  }}
                />
              </Layout.Group>
              <Layout.Group>
                <Layout.Stack space={0} alignItems="left">
                  <Text fontWeight={600}>Name goes here</Text>
                  <Text size={'$sm'}>Description</Text>
                </Layout.Stack>
              </Layout.Group>
            </Layout.Group>
            <Layout.Group>
              <Image
                source={{ uri: cardImage }}
                style={{
                  height: '100px',
                  width: '260px',
                  borderRadius: '10px',
                }}
              />
            </Layout.Group>
          </Layout.Stack>
        </>
      );
    }
  };

  const returnSkeletonStack = () => {
    if (!isDoneLoading) {
      return (
        <Layout.Stack alignItems="left">
          <Layout.Group>
            <Skeleton variant="circular" width={50} height={50} />
            <Layout.Stack>
              <Skeleton variant="rounded" width={200} height={20} />
              <Skeleton variant="rounded" width={200} height={20} />
            </Layout.Stack>
          </Layout.Group>
          <Skeleton variant="rounded" width={260} height={100} />
        </Layout.Stack>
      );
    }
  };

  return (
    <Layout.Stack alignItems="left">
      {returnContent()}
      {returnSkeletonStack()}
      <Button style={{ marginTop: '15px' }} onPress={onToggle}>
        Toggle Loading
      </Button>
    </Layout.Stack>
  );
};
```

## Width and Height

Use the `width` and `height` props to size the Skeleton. The default settings are `100%` for both width and height, so if no values are provided, the Skeleton will fill the parent container.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <div style={{ width: '100px', height: '100px' }}>
        <Skeleton />
      </div>
      <Skeleton width={200} height={50} />
    </Layout.Stack>
  );
};
```

## Variant

Use the `variant` prop to control the shape of the `Skeleton` component. The default is `rectangular`, which displays with no rounded edges. `rounded` is displayed with rounded edges and a border radius of `8px`. `circular` is displayed with fully rounded edges.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <Skeleton variant="rectangular" width={200} height={50} />
      <Skeleton variant="rounded" width={200} height={50} />
      <Skeleton variant="circular" width={50} height={50} />
    </Layout.Stack>
  );
};
```

## Animated

Animation is enabled by default. If you'd like to disable animation, pass in the `animated` prop and set it to a value of `false`.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <Skeleton animated={false} variant="rounded" width={200} height={50} />
    </Layout.Stack>
  );
};
```

## Color

Use the `color` prop to set the color of the skeleton. Light mode default is white at 8% opacity. Dark mode default is white at 32% opacity.

```jsx live
() => {
  return (
    <Layout.Stack alignItems="left">
      <Skeleton variant="rectangular" width={200} height={50} color="$gray1" />
      <Skeleton variant="rounded" width={200} height={50} />
      <Skeleton variant="circular" width={50} height={50} color="$gray3" />
    </Layout.Stack>
  );
};
```

## Skeleton with Children

Add children to the `Skeleton` component by placing elements between the `Skeleton` tags. `Children` should be used to place nested skeletons within the main skeleton.

```jsx live
() => {
  const Row = styled('View', {
    display: 'flex',
    flexDirection: 'row',
    marginVertical: 15,
  });
  const InnerWrapper = styled('View', {
    padding: '$md',
    justifyContent: 'space-between',
    height: '100%',
  });
  return (
    <Layout.Stack alignItems="left">
      <Row>
        <Skeleton width={300} height={110}>
          <InnerWrapper>
            <Skeleton
              variant="rounded"
              width="100%"
              height={20}
              animated={false}
            />
            <Skeleton
              variant="rounded"
              width="100%"
              height={20}
              animated={false}
            />
            <Skeleton
              variant="rounded"
              width="100%"
              height={20}
              animated={false}
            />
          </InnerWrapper>
        </Skeleton>
      </Row>
    </Layout.Stack>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Skeleton}
  rows={[
    {
      name: 'width',
      type: 'number | string',
      description: 'Set width of skeleton',
      default: '100%',
    },
    {
      name: 'height',
      type: 'number | string',
      description: 'Set height of skeleton',
      default: '100%',
    },
    {
      name: 'animated',
      type: 'boolean',
      description: 'Set to false to disable animation',
      default: 'true',
    },
    {
      name: 'variant',
      type: "'rectangular' | 'rounded' | 'circular'",
      description: 'Change shape of the skeleton',
      default: 'rectangular',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The content within the skeleton',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the skeleton',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Skeleton}
  rows={[
    {
      name: 'skeleton-root',
      description: 'Skeleton root element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={Skeleton} rows={['loading']} />
```

</Tab>

---
id: style-sheet
category: Styling
title: StyleSheet
description: A utility to define and organize styles in an application
---

```jsx
import { StyleSheet } from '@uhg-abyss/mobile';
```

The `StyleSheet` module is a utility for defining and organizing styles in an application. It provides a way
to create an abstraction over native styles, ensuring performance optimization and consistency across different platforms.

## Key Features

- **Platform Consistency:** By using `StyleSheet`, you can define styles that work across both iOS and Android, ensuring a
  uniform look and feel for your application.

  <br />

- **Performance Optimization:** `StyleSheet optimizes style calculations which can significantly improve the rendering
  performance of your app. It ensures that styles are calculated once then applied efficiently.

  <br />

- **Readability and Maintainability:** Using `StyleSheet.create`, you can separate style definitions from your component logic,
  making your code more readable and easier to maintain.

## Abyss StyleSheet vs. React Native StyleSheet

The Abyss StyleSheet extends the React Native StyleSheet API, so it can be used as a direct replacement and adds additional features. The additional
functionality works in conjunction with the [useStyleSheet](/mobile/hooks/use-style-sheet) hook.

### Token Typescript Support

`StyleSheet` extends the normal TypeScript declarations by allowing additional values to be placed in as values, such as
tokens, pixels and rem values.

![StyleSheet TypeScript](/mobile/styleSheet/stylesheet-typescript.png)

### Media Query

Media queries allows to have different styles for different screens, platform, direction and orientation.
They are supported as properties with `@media` prefix.

- **width**: _`<length>`_
- **height**: _`<length>`_
- **min-width**: _`<length>`_
- **min-height**: _`<length>`_
- **max-width**: _`<length>`_
- **max-height**: _`<length>`_
- **direction**: (_`ltr`_ | _`rtl`_)
- **platform**: (_`ios`_ | _`web`_ | _`android`_)
- **orientation**: (_`landscape`_ | _`portrait`_)
- **aspect-ratio**: _`<ratio>`_

Resize browser window to see changes on the box.

```jsx live-expanded
const themedStyles = StyleSheet.create({
  label: {
    fontWeight: '$bold',
    textAlign: 'center',
    '@media (min-width: 800) and (max-width: 1100)': {
      color: '$interactive1',
    },
    '@media (orientation: portrait)': {
      paddingHorizontal: 16,
    },
    '@media (orientation: landscape)': {
      paddingHorizontal: 44,
    },
    '@media (min-width: 900px)': {
      color: '$white',
    },
  },
  box: {
    width: 250,
    height: 200,
    justifyContent: 'center',
    backgroundColor: '$gray1',
    '@media web': {
      borderRadius: 8,
    },
    '@media (max-width: 700px)': {
      width: 150,
      backgroundColor: '$error2',
    },
    '@media (min-width: 900px)': {
      width: 350,
      backgroundColor: '$success1',
    },
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);
  return (
    <View style={styles.box}>
      <Text style={styles.label}>
        Resize browser window to see changes on the box.
      </Text>
    </View>
  );
});
```

### Pixel and Rem Support

Similar to [CSS3 rem unit](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/) it allows to define any integer value as relative to the root element. In our case the root value
is is set to `16`. It makes easy to scale app depending on screen size and other conditions.

`StyleSheet` also accepts string pixel values (e.g. '16px'), which typically isn't available in React Native.

```jsx live
const themedStyles = StyleSheet.create({
  text: {
    color: '$info1',
    fontSize: '2rem',
    lineHeight: '50px',
    fontWeight: '$semibold',
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return <Text style={styles.text}>Abyss Mobile</Text>;
});
```

### Operations

Any value can contain one of following math operations: `*` , `/`, `+`, `-`. Operands can be numbers, tokens, pixels or rems.
There must be a space between operands and operations.

```jsx live
const themedStyles = StyleSheet.create({
  box: {
    backgroundColor: '$interactive3',
    borderRadius: '$xl * 2',
    padding: '$lg * 2',
    borderWidth: '2 * 3',
    borderColor: '$gray3',
  },
  text: {
    fontSize: '$md * 3',
    fontWeight: '$bold',
    color: '$gray3',
    textAlign: 'center',
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);
  return (
    <View style={styles.box}>
      <Text style={styles.text}>Abyss Mobile</Text>
    </View>
  );
});
```

## Methods

### create()

```tsx
static create(styles: Object): Object;
```

Creates a StyleSheet style reference from the given object.

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    flex: 1,
    padding: '$lg',
    backgroundColor: '$gray1',
  },
  title: {
    marginTop: '$md',
    paddingVertical: '$sm',
    borderWidth: 4,
    borderColor: '$gray3',
    borderRadius: '$xl',
    backgroundColor: '$interactive3',
    color: '$gray3',
    textAlign: 'center',
    fontSize: '$xl',
    fontWeight: '$xbold',
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Abyss Mobile</Text>
    </View>
  );
});
```

### createThemed()

```tsx
static createThemed(theme: Theme, styles: Object): Object;
```

If you have direct access to a theme and do not want to use the `useStyleSheet` hook,
you can add the theme directly as a parameter to the `createThemed` function and use token
values in the StyleSheet. If your theme has token overrides, those can be used as well.

```jsx live
const theme = createTheme('uhc', {
  theme: {
    sizes: { notTooBigNotTooSmall: 200 },
    radii: { fullyRounded: 1000000 },
  },
});

const styles = StyleSheet.createThemed(theme, {
  circle: {
    backgroundColor: '$interactive3',
    height: '$notTooBigNotTooSmall',
    width: '$notTooBigNotTooSmall',
    borderRadius: '$fullyRounded',
  },
});

render(() => {
  return <View style={styles.circle} />;
});
```

### compose()

```tsx
static compose(style1: Object, style2: Object): Object | Object[];
```

Combines two styles such that `style2` will override any styles in `style1`.
If either style is falsy, the other one is returned without allocating an array,
saving allocations and maintaining reference equality for PureComponent checks.

```jsx live
const page = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'white',
  },
  text: {
    fontSize: 30,
    color: '#4B4D4F',
  },
});

const lists = StyleSheet.create({
  listContainer: {
    flex: 1,
    backgroundColor: '#D9E9FA',
  },
  listItem: {
    fontStyle: 'italic',
    fontWeight: 'bold',
  },
});

const container = StyleSheet.compose(page.container, lists.listContainer);
const text = StyleSheet.compose(page.text, lists.listItem);

render(() => {
  return (
    <View style={container}>
      <Text style={text}>Abyss Mobile</Text>
    </View>
  );
});
```

### flatten()

```tsx
static flatten(style: Object[]): Object;
```

Flattens an array of style objects, into one aggregated style object.

```jsx live
const page = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    alignItems: 'center',
  },
  text: {
    color: '#000',
    fontSize: 14,
    fontWeight: 'bold',
  },
  code: {
    marginTop: 12,
    padding: 12,
    borderRadius: 8,
    color: '#666',
    backgroundColor: '#EAEAEA',
  },
});

const typography = StyleSheet.create({
  header: {
    color: '#004BA0',
    fontSize: 30,
    marginBottom: 36,
  },
});

const flattenedTextStyle = StyleSheet.flatten([page.text, typography.header]);

render(() => {
  return (
    <View style={page.container}>
      <Text style={flattenedTextStyle}>React Native</Text>
      <Text>Flattened Text Style</Text>
      <Text style={page.code}>
        {JSON.stringify(flattenedTextStyle, null, 2)}
      </Text>
    </View>
  );
});
```

### setStyleAttributePreprocessor()

```jsx render
<Web.Alert
  title="WARNING: EXPERIMENTAL."
  variant="warning"
  actionHref="https://reactnative.dev/docs/stylesheet#setstyleattributepreprocessor"
  actionText="More on React Native Docs"
>
  Breaking changes will probably happen a lot and will not be reliably
  announced. The whole thing might be deleted, who knows? Use at your own risk.
</Web.Alert>
```

<br />

```tsx
static setStyleAttributePreprocessor(
  property: string,
  process: (propValue: any) => any,
);
```

Sets a function to use to pre-process a style property value.
This is used internally to process color and transform values.
You should not use this unless you really know what you are doing and have exhausted other options.

## Properties

### absoluteFill

A very common pattern is to create overlays with position absolute and zero positioning
(`position: 'absolute', left: 0, right: 0, top: 0, bottom: 0`), so `absoluteFill` can be
used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill
can be used to create a customized entry in a StyleSheet.

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    height: 250,
  },
  box1: {
    position: 'absolute',
    top: 40,
    left: 40,
    width: 100,
    height: 100,
    backgroundColor: '$error1',
  },
  box2: {
    width: 100,
    height: 100,
    backgroundColor: '$info1',
  },
  box3: {
    position: 'absolute',
    top: 120,
    left: 120,
    width: 100,
    height: 100,
    backgroundColor: '$success1',
  },
  text: {
    color: '$white',
    fontSize: 80,
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.text}>1</Text>
      </View>
      <View style={[styles.box2, StyleSheet.absoluteFill]}>
        <Text style={styles.text}>2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.text}>3</Text>
      </View>
    </View>
  );
});
```

### absoluteFillObject

Sometimes you may want absoluteFill but with a couple tweaks - absoluteFillObject can be
used to create a customized entry in a StyleSheet.

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    height: 250,
  },
  box1: {
    position: 'absolute',
    top: 40,
    left: 40,
    width: 100,
    height: 100,
    backgroundColor: '$error1',
  },
  box2: {
    ...StyleSheet.absoluteFillObject,
    top: 120,
    left: 50,
    width: 100,
    height: 100,
    backgroundColor: '$info1',
  },
  box3: {
    ...StyleSheet.absoluteFillObject,
    top: 120,
    left: 120,
    width: 100,
    height: 100,
    backgroundColor: '$success1',
  },
  text: {
    color: '$white',
    fontSize: 80,
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <View style={styles.box1}>
        <Text style={styles.text}>1</Text>
      </View>
      <View style={styles.box2}>
        <Text style={styles.text}>2</Text>
      </View>
      <View style={styles.box3}>
        <Text style={styles.text}>3</Text>
      </View>
    </View>
  );
});
```

### hairlineWidth

This is defined as the width of a thin line on the platform. It can be used as the thickness
of a border or division between two elements

```jsx live
const themedStyles = StyleSheet.create({
  container: {
    flex: 1,
    padding: '$xl',
  },
  row: {
    padding: '$sm',
    borderBottomColor: '$error1',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

render(() => {
  const styles = useStyleSheet(themedStyles);

  return (
    <View style={styles.container}>
      <Text style={styles.row}>Abyss</Text>
      <Text style={styles.row}>Mobile</Text>
    </View>
  );
});
```

## Usage with Abyss component

All Abyss components are able to parse objects from the StyleSheet directly, so there is no need to
use the `useStylesheet` hook if the styles are only going into Abyss components.

```jsx live
const styles = StyleSheet.create({
  button: {
    backgroundColor: '$info1',
    borderWidth: '4px',
    borderColor: '$error1',
  },
});

render(() => {
  return <Button style={styles.button}>Styled Button</Button>;
});
```

---
id: tabs
category: Content
title: Tabs
description: The Tabs component is used to navigate to other pages, or sections of a page.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=9678-35146&mode=design&t=DgoELndJt2PBF6Lf-0
---

<Tab label="Overview">

```jsx
import { Tabs } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Tabs',
  inputs: [
    {
      prop: 'disableSwipe',
      type: 'boolean'
    },
    {
      prop: 'disableTransition',
      type: 'boolean',
    },
    {
      prop: 'color',
      type: 'string'
    },
  ],
}

<Tabs title="Tabs Sandbox">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$lg' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$lg' }}>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$lg' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Title

The `title` property provides a label that describes the purpose of the set of tabs. This is a required property as it gives screen reader users important context.

```jsx
<Tabs title="Tab Group Title">
  <Tabs.Tab label="Tab - 1">
    <Text>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab - 2">
    <Text>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab - 3">
    <Text>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Initial Tab (Uncontrolled)

If you do not need to subscribe to the tabs active state use the `initialTab` property to set the tab that is active at build time.
The default is set to the first tab in the sequence. If used instead of active the active state will be uncontrolled and handled internally by the component.

```jsx live
<Tabs initialTab={2} title="Initial Tab Sandbox">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$lg' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$lg' }}>Content starts with tab 2</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$lg' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Active Tab (Controlled)

To control the Tabs active state, pass in the desired tab to the `activeTab` prop.
This must be used in combination with `onChange` to ensure that the active tab state is always current.
If no default state is passed the active tab will default to the first tab in the sequence.

```jsx live
() => {
  const [activeTab, setActiveTab] = useState(2);
  return (
    <View>
      <Tabs
        activeTab={activeTab}
        onChange={setActiveTab}
        title="Controlled Tab"
      >
        <Tabs.Tab label="Tab 1">
          <Text style={{ margin: '$lg' }}>Tab 1 Content</Text>
        </Tabs.Tab>
        <Tabs.Tab label="Tab 2">
          <Text style={{ margin: '$lg' }}>Content starts with tab 2</Text>
        </Tabs.Tab>
        <Tabs.Tab label="Tab 3">
          <Text style={{ margin: '$lg' }}>Tab 3 Content</Text>
        </Tabs.Tab>
      </Tabs>
      <Layout.Group>
        <Button size="small" onPress={() => setActiveTab(1)}>
          Set To Tab 1
        </Button>
        <Button size="small" onPress={() => setActiveTab(2)}>
          Set To Tab 2
        </Button>
        <Button size="small" onPress={() => setActiveTab(3)}>
          Set To Tab 3
        </Button>
      </Layout.Group>
    </View>
  );
};
```

## Disable Swipe

Use the `disableSwipe` prop to disable swiping from one tab to another.

```jsx live
<Tabs disableSwipe title="Swipe Disabled">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$lg' }}>
      Swiping is now disabled. You can go to another tab by pressing one of the
      tab buttons.
    </Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$lg' }}>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$lg' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Disable Transition

Use the `disableTransition` prop to disable animating from one tab to another on either a swipe or a tab button press.

```jsx live
<Tabs disableTransition title="Transition Disabled">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$lg' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$lg' }}>Tab 2 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$lg' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

## Scrollable Tabs and Menu

If there are more than three tabs, the Tabs component will scroll horizontally. If there are fewer than four tabs and the tabs fit on the screen horizontally, the scroll does not apply. If the tabs do not fit, a horizontal scroll is activated. Ideally, there should be no more than eight tabs.

The Tab menu opens up a bottom sheet with a list of the tabs. When there are fewer than four tabs, there is not a Tab menu.

```jsx live
<Box color="$primary2" width={500}>
  <Tabs title="Light Tabs">
    <Tabs.Tab label="Default 1">
      <Text style={{ margin: '$lg' }}>Tab 1 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 2">
      <Text style={{ margin: '$lg' }}>Tab 2 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 3">
      <Text style={{ margin: '$lg' }}>Tab 3 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 4">
      <Text style={{ margin: '$lg' }}>Tab 4 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 5">
      <Text style={{ margin: '$lg' }}>Tab 5 Content</Text>
    </Tabs.Tab>
    <Tabs.Tab label="Default 6">
      <Text style={{ margin: '$lg' }}>Tab 6 Content</Text>
    </Tabs.Tab>
  </Tabs>
</Box>
```

## Tab Bar Color

Use the `tabBarColor` prop to change the color of the tab bar.

```jsx live
<Tabs title="Tab Sandbox" tabBarColor="$info2">
  <Tabs.Tab label="Tab 1">
    <Text style={{ margin: '$lg' }}>Tab 1 Content</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 2">
    <Text style={{ margin: '$lg' }}>Content starts with tab 2</Text>
  </Tabs.Tab>
  <Tabs.Tab label="Tab 3">
    <Text style={{ margin: '$lg' }}>Tab 3 Content</Text>
  </Tabs.Tab>
</Tabs>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Tabs}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the tabs component',
    },
    {
      name: 'disableSwipe',
      type: 'boolean',
      description: 'Flag to disable tab scrolling',
      default: 'false',
    },
    {
      name: 'disableTransition',
      type: 'boolean',
      description: 'Flag to disable tab transitions',
      default: 'false',
    },
    {
      name: 'initialTab',
      type: 'number',
      description: 'Used to indicate initial tab',
    },
    {
      name: 'activeTab',
      type: 'number',
      description: 'Used to control state and set active tab',
    },
    {
      name: 'onChange',
      type: 'function',
      description:
        'Callback fired every time tab changes; returns index of selected tab',
    },
    {
      name: 'title',
      type: 'string',
      description:
        'The name for the tabs. Used to set the accessibility label tag and bottom sheet title',
    },
    {
      name: 'tabBarColor',
      type: 'string',
      description: 'Color of the tab background',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Tabs.Tab}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The contents of the tab',
    },
    {
      name: 'label',
      type: 'string',
      description: 'The label of the tab',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Tabs}
  rows={[
    {
      name: 'tabs-root',
      description: 'Tabs root element',
    },
    {
      name: 'tabs-screen-wrapper',
      description: 'Tabs screen wrapper',
    },
    {
      name: 'tabs-tab-bar',
      description: 'Tab bar at the top of the component',
    },
    {
      name: 'tabs-menu-button',
      description: 'Tabs menu button',
    },
    {
      name: 'tabs-menu-icon',
      description: 'Tabs menu button icon',
    },
    {
      name: 'tabs-tab-button',
      description: 'Tab button',
    },
    {
      name: 'tabs-tab-button-active-label',
      description: 'Tab button active label',
    },
    {
      name: 'tabs-tab-button-inactive-label',
      description: 'Tab button inactive label',
    },
    {
      name: 'tabs-tab-indicator',
      description: 'Tab scroll indicator',
    },
    {
      name: 'tabs-bottom-sheet',
      description: 'Bottom sheet menu element',
    },
    {
      name: 'tabs-bottom-sheet-container',
      description: 'Tabs bottom sheet list container',
    },
    {
      name: 'tabs-bottom-sheet-active-line',
      description: 'Tabs bottom sheet active line',
    },
    {
      name: 'tabs-bottom-sheet-list-item',
      description: 'Tab bottom sheet item',
    },
    {
      name: 'tabs-bottom-sheet-list-item-label',
      description: 'Tabs bottom sheet item label',
    },
  ]}
  inherits={[{ name: 'BottomSheet', link: '/mobile/ui/bottom-sheet' }]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Tabs.Tab}
  rows={[
    {
      name: 'tabs-tab-root',
      description: 'Tab root element',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable of={Tabs} rows={['Tabs.openMenu', 'Tabs.selected']} />
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

Text and Icons on Tabs scale to 3XL.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Tabs} keys={['tabs', 'tabs-t
 ab-item',
' tabs-menu-item'] />
```

</Tab>

---
id: test-provider
category: Providers
title: TestProvider
description: Used to determine strategy for testing
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { TestProvider } from '@uhg-abyss/mobile';
```

The `TestProvider` is a component that provides a context for testing purposes. It allows you to specify a strategy for testing, which can be either "root" or "class".
The provider wraps the rest of the component tree and applies the specified strategy.

### Class strategy (default)

The `"class"` strategy (similar to default) allows testing of nested components by appending the Abyss class name to your `testID`. This creates unique identifiers for each element within the component.

For example, let's say the `testID` of [ProgressBar](/mobile/ui/ProgressBar) is set to `"your-test-ID"`.

```jsx
<TestProvider strategy="class">
  <ProgressBar testID="your-test-ID" />
</TestProvider>
```

We can then refer to the classes for the ProgressBar.

```jsx render
<Docs.ClassesTable
  of={ProgressBar}
  rows={[
    {
      name: 'progress-bar-root',
      description: 'Progress bar root element',
    },
    {
      name: 'progress-bar-slide',
      description: 'Progress bar slide',
    },
  ]}
/>
```

The resulting test IDs will be _**`"your-test-ID-abyss-progress-bar-root"`**_ & _**`"your-test-ID-abyss-progress-bar-slide"`**_.

### Root strategy

The `"root"` strategy applies the `testID` only to the root element of the component. This means you won't be able to target nested elements within the Abyss component for testing.

For example, let's say the `testID` of [ProgressBar](/mobile/ui/ProgressBar) is set to `"your-test-ID"`.

```jsx
<TestProvider strategy="root">
  <ProgressBar testID="your-test-ID" />
</TestProvider>
```

The resulting testID will still be **_`"your-test-ID"`_**.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={TestProvider}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The rest of the component tree',
    },
    {
      name: 'strategy',
      type: '"root" | "class"',
      description: 'The strategy to use for testing',
    },
  ]}
/>
```

</Tab>

---
id: text
category: Typography
title: Text
description: Used to create segments of text such as phrases, sentences, and paragraphs.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9470%3A32790
pagination_prev: mobile/ui/heading
# pagination_next: null
---

<Tab label="Overview">

```jsx
import { Text } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Text',
  inputs: [
    {
     prop: 'children',
     type: 'string',
    },
    {
      prop: 'color',
      type: 'string',
    },
    {
      prop: 'fontWeight',
      type: 'string',
    },
    {
      prop: 'size',
      type: 'string',
    },
    {
      prop: 'transform',
      type: 'select',
      options: [
        { label: 'none', value: 'none' },
        { label: 'capitalize', value: 'capitalize' },
        { label: 'lowercase', value: 'lowercase' },
        { label: 'uppercase', value: 'uppercase' },
      ],
    },
    {
      prop: 'textAlign',
      type: 'select',
      options: [
        { label: 'left', value: 'left' },
        { label: 'center', value: 'center' },
        { label: 'right', value: 'right' },
      ],
    },
  ],
}

<Text>Enter message here</Text>
```

## Set Global Text Font

One of the limitations of our library is the inability to install fonts into applications. Because of this, we have reserved a special token, `$text`, to be added in the createTheme function, which will add the font to all Heading components globally.

In the example below, the font 'UHCSans' is set as the text font and will now be applied to all Text components.

```jsx
import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('uhc', {
  theme: {
    fonts: {
      text: 'UHCSans',
    },
  },
});

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};
```

Any individual Text component can override the font with the `fontFamily` prop.

## Color

Use the `color` property to set the color of the text. The default is set to `black`.

```jsx live
<Layout.Stack alignItems="left">
  <Text>Some filler text - Black</Text>
  <Text color="$error1">Some filler text - error</Text>
  <Text color="#FF00FF">Some filler text - hex</Text>
  <Text color="blue">Some filler text - color</Text>
</Layout.Stack>
```

## Sizes

Use the `size` property to change the size of the text. The default is set to md which is 16px. The values for each size are represented by `FontSize - LineHeight`.

```jsx live
<Layout.Stack alignItems="left">
  <Text size="$lg">Body 1 - Large / 18px - 24px</Text>
  <Text size="$md">Body 2 - Medium / 16px - 20px</Text>
  <Text size="$sm">Body 3 - Small / 14px - 16px</Text>
  <Text size="$xs">Small 1 - Extra Small / 12px - 16px</Text>
</Layout.Stack>
```

## Transform

Use the `transform` property to change the formatting of the text. Variants available include the default case, `capitalize` the first letter of each word, `lowercase` all letters, or `uppercase` all letters.

```jsx live
<Layout.Stack alignItems="left">
  <Text>Default text</Text>
  <Text transform="capitalize">Capitalize text</Text>
  <Text transform="lowercase">Lowercase text</Text>
  <Text transform="uppercase">Uppercase text</Text>
</Layout.Stack>
```

## Text Align

Use the `textAlign` prop to change the alignment of the text. Options include `left`, `center` and `right`. Default is `left`.

```jsx live
<Layout.Stack grow>
  <Text textAlign="left">Left Aligned Text</Text>
  <Text textAlign="center">Center Aligned Text</Text>
  <Text textAlign="right">Right Aligned Text</Text>
</Layout.Stack>
```

## Animated

Use the `animated` prop to use animation styles on the component.
The default is set to `false`.

```jsx live
() => {
  const val = useRef(new Animated.Value(0)).current;

  const animateTo = (toValue) => {
    return Animated.timing(val, {
      toValue,
      duration: 2000,
      easing: Easing.linear,
      useNativeDriver: false,
    });
  };

  useEffect(() => {
    Animated.loop(Animated.sequence([animateTo(1), animateTo(0)])).start();
  });

  return (
    <Text
      animated
      style={{
        color: val.interpolate({
          inputRange: [0, 1],
          outputRange: ['red', 'yellow'],
        }),
      }}
    >
      Animated Text Color
    </Text>
  );
};
```

### Nesting

Nested text components will inherit properties from the outer `Text`.

```jsx live
<Text size={18} fontWeight="$bold">
  Outside Text...
  <Text color="$secondary1">Inside Text</Text>
</Text>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Text}
  rows={[
    {
      name: 'animated',
      type: 'boolean',
      description: 'Flag to make component animatable',
default: 'false',
    },
    {
      name: 'children',
      type: 'string',
      description: 'The contents of the text component',
    },
    {
      name: 'color',
      type: 'string',
      description: 'Set the color of the text',
    },
      name: 'size',
      type: 'number | string',
      description: 'Set the size of the text',
    },
    { name: 'transform',
      type: 'string',
      description:
        'Reformat the text by changing whether letters are capitalized or not',
    },
    {
      namntWeight',
      type: 'string',
      description: 'Set the font weight of text',
    },
    {
      name: 'textAlign',
      type: '"left" | "center" | "right"',
      description: 'Specifies text alignment',
    },
{
      name: 'foly',
      type: 'string',
      description: 'Set the font family of text',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Text}
  rows={[
    {
      name: 'text-root',
      description: 'Text root element',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Text} keys={['text']} />
```

</Tab>

---
id: text-field
category: Forms
title: TextField
description: Large input allows users to enter a large amount of text and data.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/branch/1Uml7LO8NTEWoBUAl4DTaG/Abyss-Mobile?type=design&node-id=18955-106021&t=DfyeirEdeaLCVZP9-0
---

<Tab label="Overview">

```jsx
import { TextField } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'TextField',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'errorMessage',
      type: 'string',
    },
    {
      prop: 'isRequired',
      type: 'boolean',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ]
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextField
        model="text-field-sandbox"
        label="Sandbox Label"
        hintText="Sandbox Hint Text"
        maxLength={500}
      />
    </FormProvider>
  );
};
```

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <TextField
        model="text-field-form"
        label="Form Label"
        hintText="Form Hint Text"
        maxLength={500}
      />
      <Button type="submit" size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [value, setValue] = useState('');

  const onSubmit = () => {
    console.log('Submitted:', value);
  };

  return (
    <React.Fragment>
      <TextField
        label="TextField useState"
        placeholder="State"
        value={value}
        onChangeText={setValue}
        maxLength={500}
      />
      <Layout.Space />
      <Button size="small" onPress={onSubmit}>
        Submit
      </Button>
    </React.Fragment>
  );
};
```

## Label

Use the `label` prop to display a label above the text field.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextField
        model="text-field-label"
        label="Custom Label"
        maxLength={500}
      />
    </FormProvider>
  );
};
```

## Error Message

Use the `errorMessage` prop to display a custom error message below the text field.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextField
        model="text-field-error"
        label="Input With Error"
        errorMessage="Error Message"
        maxLength={500}
      />
    </FormProvider>
  );
};
```

## Success Message

Use the `successMessage` prop to display a custom success message below the text field.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextField
        model="text-field-success"
        label="Input With Success"
        successMessage="Success Message"
        maxLength={500}
      />
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the text field so users cannot enter a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextField
        model="text-field-disabled"
        isDisabled={true}
        label="Disabled"
        maxLength={500}
      />
    </FormProvider>
  );
};
```

## MaxLength

Use the `maxLength` prop to set the maximum length of characters accepted as input.
The amount of characters remaining will appear in the bottom right.
The default value of `maxLength` is 500.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextField
        model="text-field-max-length"
        label="Type Text"
        maxLength={200}
      />
    </FormProvider>
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextField
        model="text-field-help"
        label="Help Content"
        hintText="Click the Help button"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
      />
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={TextField}
  rows={[
    {
      name: 'value',
      type: 'string',
      description: 'Value of the text input',
      default: '',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the input. If true, the input will be disabled',
      default: 'false',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label for input field',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Set the text displayed below label',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description: 'Flag to require text',
      default: 'false',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below input field',
    },
    {
      name: 'successMessage',
      type: 'string',
      description: 'Success message to be displayed below input field',
    },
    {
      name: 'onChangeText',
      type: 'function',
      description:
        'Callback that is called when the text input text changes. Changed text is passed as a single string argument to the callback handler',
    },
    {
      name: 'onFocus',
      type: 'function',
      description: 'Callback fired every time the component is focused',
    },
    {
      name: 'onBlur',
      type: 'function',
      description: 'Callback fired every time the component is unfocused',
    },
    {
      name: 'maxLength',
      type: 'string',
      description: 'Set the maximum number of characters accepted as input',
      default: '500',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={TextField}
  rows={[
    {
      name: 'text-field-root',
      description: 'Root element',
    },
    {
      name: 'text-field-header',
      description: 'Header element',
    },
    {
      name: 'text-field-help-button',
      description: 'Help button',
    },
    {
      name: 'text-field-label',
      description: 'Label element',
    },
    {
      name: 'text-field-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'text-field-container',
      description: 'The container around the text field',
    },
    {
      name: 'text-field',
      description: 'Input container',
    },
    {
      name: 'text-field-clear-button',
      description: 'Clear button',
    },
    {
      name: 'text-field-clear-text',
      description: 'Clear text',
    },
    {
      name: 'text-field-remaining-count-text',
      description: 'Remaining count text',
    },
    {
      name: 'text-field-message',
      description: 'Message element',
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
    {
      name: 'text-field-help-modal',
      description: 'Help modal',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={TextField}
  rows={[
    'help',
    'close',
    'error',
    'success',
    'TextField.clear',
    'TextField.charactersRemaining',
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={TextField}
  keys={[
    'input-header',
    'input-container',
    'input-message',
    'input-field',
    'input-character-count',
  ]}
/>
```

</Tab>

---
id: text-input
category: Forms
title: TextInput
description: Allows users to enter text into a UI.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=40307-5604&mode=design&t=dirQ2Ey2NpKNpNfn-0
---

<Tab label="Overview">

```jsx
import { TextInput } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'TextInput',
  inputs: [
    {
      prop: 'label',
      type: 'string',
    },
    {
      prop: 'hintText',
      type: 'string',
    },
    {
      prop: 'errorMessage',
      type: 'string',
    },
    {
      prop: 'type',
      type: 'select',
      options: [
        { label: 'Text', value: 'text' },
        { label: 'Password', value: 'password' },
        { label: 'Price', value: 'price' },
      ]
    },
    {
      prop: 'isRequired',
      type: 'boolean',
    },
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'helpContent',
      type: 'string',
    },
  ]
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-sandbox"
        label="Sandbox Label"
        hintText="Sandbox Hint Text"
        type="text"
      />
    </FormProvider>
  );
};
```

Note: If the TextInput is inside a ScrollView, verify the `keyboardShouldPersistTaps` prop on the ScrollView is set to `"always"` or `"handled"`
to allow pressing icons within the TextInput when the keyboard is open.

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm();

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <TextInput
        model="text-input-form"
        label="TextInput Form"
        placeholder="Enter text"
      />
      <Button type="submit" size="small" style={{ marginTop: 15 }}>
        Submit
      </Button>
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [value, setValue] = useState('');

  const onSubmit = () => {
    console.log('Submitted:', value);
  };

  return (
    <React.Fragment>
      <TextInput
        label="TextInput useState"
        placeholder="State"
        value={value}
        onChangeText={setValue}
      />
      <Layout.Space />
      <Button size="small" onPress={onSubmit}>
        Submit
      </Button>
    </React.Fragment>
  );
};
```

## Placeholder

Use the `placeholder` prop to give users a short description in the input field before they enter a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-placeholder"
        placeholder="Placeholder"
        label="TextInput placeholder"
      />
    </FormProvider>
  );
};
```

## Label

Use the `label` prop to display a label above the input.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput model="text-input-label" label="Custom Label" />
    </FormProvider>
  );
};
```

## Error Message

Use the `errorMessage` prop to display a custom error message below the input field.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-error"
        label="Input With Error"
        errorMessage="Error Message"
      />
    </FormProvider>
  );
};
```

## Success Message

Use the `successMessage` prop to display a custom success message below the input field.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-success"
        label="Input With Success"
        successMessage="Success Message"
      />
    </FormProvider>
  );
};
```

## Disabled

Set the `isDisabled` prop to `true` to disable the input field so users cannot enter a value.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-disabled"
        isDisabled={true}
        label="Disabled"
      />
    </FormProvider>
  );
};
```

## Types

Use the `type` prop to set the type of input field to be displayed. Types include: `'text'`, `'email'`, `'password'`, `'price'`, `'number'` and `'phone'`.
The default is `text`.

### Text

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput model="text-input-type-text" label="Type Text" type="text" />
    </FormProvider>
  );
};
```

### Password

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-type-password"
        label="Password Text"
        type="password"
      />
    </FormProvider>
  );
};
```

### Price

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-type-price"
        label="Price Text"
        type="price"
      />
    </FormProvider>
  );
};
```

## Prefix

Use the `prefix` prop to display content before the input field. This is meant for text and decorative icons. The default prefix for `type='price'` is '$'.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <Layout.Stack grow>
        <TextInput
          model="text-input-prefix-price"
          label="Price Text"
          type="price"
        />
        <TextInput
          model="text-input-prefix-phone"
          label="Enter Your Phone Number"
          type="phone"
          prefix={
            <IconSymbol
              icon="call"
              size={20}
              color="$gray3"
              variant="outlined"
            />
          }
        />
      </Layout.Stack>
    </FormProvider>
  );
};
```

## Suffix

Use the `suffix` prop to display content after the input field.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-suffix"
        label="Enter your weight"
        suffix="lbs"
      />
    </FormProvider>
  );
};
```

## Action Icon

Use the `actionIcon` prop to pass in an actionable button. This can be used to further customize the input component.

```jsx live
() => {
  const form = useForm();
  const [isVisible, setIsVisible] = useState(false);

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-action-icon"
        label="Location Picker"
        actionIcon={
          <IconSymbol
            size={20}
            color="$gray3"
            icon="location_on"
            isScreenReadable
            title="pick location"
            variant="outlined"
          />
        }
        onActionIconPress={() => setIsVisible(true)}
      />
      <Modal
        title="Search for location"
        isVisible={isVisible}
        onClose={() => setIsVisible(false)}
        actionRight={
          <IconSymbol
            size={20}
            color="$gray3"
            icon="close"
            title="close"
            isScreenReadable
          />
        }
        onActionRightPress={() => setIsVisible(false)}
      >
        <Modal.Section>
          <Text>This is where location search would be added</Text>
        </Modal.Section>
      </Modal>
    </FormProvider>
  );
};
```

## Validation

Use the `validations` prop to set rules for the field to be valid. Each validation must have a key for it's name and an object that describes the validation. The object must have a message to display what should be validated. To create a custom validation, you can add a `validate` function that takes in the text as an argument and should return a boolean.

There are 5 built in validations: `minLength`, `maxLength`, `hasUppercaseLetters`, `hasLowercaseLetters` and `hasNumbers`. For the `minLength` and `maxLength` validations, you can pass in a `value` to determine the amount of characters to check for.

- <b>minLength</b> - Returns true if the amount of characters is less than the value.
  Default: 8
- <b>maxLength</b> - Returns true if the amount of characters is less than the value.
  Default: 20
- <b>hasUppercaseLetters</b> - Returns true if the text contains uppercase letters.
- <b>hasLowercaseLetters</b> - Returns true if the text contains lowercase letters.
- <b>hasNumbers</b> - Returns true if the text contains numbers.

To check the status of the validations, use the second parameter of the `onChangeText` prop.

```jsx live
() => {
  const [text, setText] = useState('');
  const success = useRef(false);

  const handleChangeText = (text, validations) => {
    console.log(validations);
    success.current = Object.values(validations).every((v) => v === true);
    setText(text);
  };
  return (
    <TextInput
      isRequired
      label="Label"
      type="text"
      hintText="Hint Text"
      value={text}
      onChangeText={handleChangeText}
      successMessage={success.current ? 'Valid Password' : null}
      requirementsText="Password must have at least:"
      validations={{
        minLength: {
          value: 6,
          message: 'Must be at least 6 characters',
        },
        hasUppercaseLetters: {
          message: '1 uppercase letter',
        },
        hasLowercaseLetters: {
          message: '1 lowercase letter',
        },
        hasNumbers: {
          message: '1 number',
        },
        endsWithQ: {
          message: 'End with a uppercase Q',
          validate: (text) => {
            return text.endsWith('Q');
          },
        },
      }}
    />
  );
};
```

## Help Content

Use the `helpContent` prop to display a help icon in the top right of the container, which will display the provided content in a modal screen when pressed.

```jsx live
() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <TextInput
        model="text-input-help"
        label="Label"
        hintText="Hint Text"
        helpContent={
          <Text style={{ margin: 16 }}>
            This is some text used to explain something to the user, but is too
            long to be hint text.
          </Text>
        }
      />
    </FormProvider>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={TextInput}
  rows={[
    {
      name: 'value',
      type: 'string',
      description: 'Value of the text input',
    },
    {
      name: 'type',
      type: "'text' | 'email' | 'password' | 'price' | 'phone' | 'number'",
      description: 'Set the type of input field',
      default: 'text',
    },
    {
      name: 'placeholder',
      type: 'string',
      description:
        'Short description displayed in the input before the user enters a value',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description:
        'Flag to enable/disable the input. If true, the input will be disabled',
      default: 'false',
    },
    {
      name: 'requirementsText',
      type: 'string',
      description: 'Set the text displayed above validations',
    },
    {
      name: 'validations',
      type: 'object',
      description: 'Set rules for the input field to be valid',
    },
    {
      name: 'label',
      type: 'string',
      description: 'Label for input field',
    },
    {
      name: 'hintText',
      type: 'string',
      description: 'Set the text displayed below label',
    },
    {
      name: 'isRequired',
      type: 'boolean',
      description: 'Flag to require text',
      default: 'false',
    },
    {
      name: 'showOptionalLabel',
      type: 'boolean',
      description: 'Flag to display "optional" next to the label',
      default: 'false',
    },
    {
      name: 'errorMessage',
      type: 'string',
      description: 'Error message to be displayed below input field',
    },
    {
      name: 'successMessage',
      type: 'string',
      description: 'Success message to be displayed below input field',
    },
    {
      name: 'textContentType',
      type: 'string',
      description:
        'Give the keyboard and the system information about the expected semantic meaning for the content that users enter',
    },
    {
      name: 'keyboardType',
      type: 'string',
      description: 'Determines which keyboard to open',
    },
    {
      name: 'onChangeText',
      type: 'function',
      description:
        'Callback that is called when the text input text changes. Changed text is passed as a single string argument to the callback handler',
    },
    {
      name: 'onFocus',
      type: 'function',
      description: 'Callback fired every time the component is focused',
    },
    {
      name: 'onBlur',
      type: 'function',
      description: 'Callback fired every time the component is unfocused',
    },
    {
      name: 'helpContent',
      type: 'string | ReactNode',
      description:
        'When defined, displays a help icon that can be tapped to view the provided content in a modal screen',
    },
    {
      name: 'prefix',
      type: 'string | node',
      description:
        'Sets the content to be displayed before the text entry field',
    },
    {
      name: 'suffix',
      type: 'string | node',
      description:
        'Sets the content to be displayed after the text entry field',
    },
    {
      name: 'actionIcon',
      type: 'node',
      description:
        'Sets the action button to be displayed after the text entry field',
    },
    {
      name: 'onActionIconPress',
      type: 'function',
      description: 'Callback fired when the action button is pressed',
    },
    {
      name: 'helpButtonAccessibilityLabel',
      type: 'string',
      description: 'Set the accessibility label for the help button',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={TextInput}
  rows={[
    {
      name: 'text-input-root',
      description: 'Root element',
    },
    {
      name: 'text-input-header',
      description: 'Header element',
    },
    {
      name: 'text-input-help-button',
      description: 'Help button',
    },
    {
      name: 'text-input-label',
      description: 'Label element',
    },
    {
      name: 'text-input-currency-text',
      description: 'Currency text',
    },
    {
      name: 'text-input-container',
      description: 'The container around the text input',
    },
    {
      name: 'text-input',
      description: 'Input container',
    },
    {
      name: 'text-input-cancel-button',
      description: 'Cancel button',
    },
    {
      name: 'text-input-cancel-icon',
      description: 'Cancel icon',
    },
    {
      name: 'text-input-icon-button',
      description: 'Icon button',
    },
    {
      name: 'text-input-show-password-icon',
      description: 'Show password icon',
    },
    {
      name: 'text-input-hint-text',
      description: 'Input hint text',
    },
    {
      name: 'text-input-help-modal',
      description: 'Help modal',
    },
    {
      name: 'input-help-icon',
      description: 'Help icon element',
    },
    {
      name: 'input-help-modal-footer',
      description: 'Help modal footer',
    },
    {
      name: 'input-help-modal-close-button',
      description: 'Help modal close button',
    },
    {
      name: 'text-input-message',
      description: 'Message element',
    },
    {
      name: 'input-message-icon',
      description: 'Message icon',
    },
    {
      name: 'input-message-text',
      description: 'Message text',
    },
    { name: 'text-input-validation-checked-icon', description: 'Valid icon' },
    {
      name: 'text-input-validation-unchecked-icon',
      description: 'Invalid icon',
    },
    { name: 'text-input-validation-text', description: 'Validation text' },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={TextInput}
  rows={[
    'help',
    'close',
    'error',
    'success',
    'TextInput.priceInDollars',
    'TextInput.clearText',
    'TextInput.hidePassword',
    'TextInput.revealPassword',
    'TextInput.pass',
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Focus Guidance

Abyss does not control the focus of components on the screen when handling validation errors. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For text inputs, the focus should move back to the input when there is an error (e.g user typed too many characters).

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable
  of={TextInput}
  keys={[
    'input-header',
    'input-container',
    'input-message',
    'input-field',
    'input-requirements',
  ]}
/>
```

</Tab>

---
id: theme-provider
category: Providers
title: ThemeProvider
description: An Abyss component that passes the theme object down the component tree.
---

```jsx
import { ThemeProvider } from '@uhg-abyss/mobile';
```

# Theming

Abyss theming supports changing colors, spacing, box-shadows, font families, font sizes and many other properties. Themes let you apply a consistent tone to your app. It allows you to customize all design aspects of your project in order to meet the specific needs of your business or brand. To configure the theme, wrap your app with a `ThemeProvider` component.

## Theme Provider

While Abyss components come with a default theme, the `ThemeProvider` is an optional component to change the theme globally.

`ThemeProvider` relies on the context feature of React to pass the theme down to the components, so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize.

This component takes a theme prop and applies it to the entire React tree that it is wrapping around. It should preferably be used at the root of The component tree.

```jsx render
<Docs.PropsTable
  of={ThemeProvider}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'The component tree',
    },
    {
      name: 'theme',
      type: 'object',
      description: 'A theme object, usually the result of createTheme()',
    },
    {
      name: 'system',
      type: "'ios' | 'android'",
      description: 'The system the theme should support',
    },
    {
      name: 'colorScheme',
      type: "'light' | 'dark'",
      description: 'The color scheme of the theme',
    },
    {
      name: 'brandAssetsCdn',
      type: 'string',
      description:
        'A URL to provide a custom CDN for hosting brand assets handled by the Brandmark and IconBrand components',
    },
  ]}
/>
```

```jsx
import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';


const themeOverride = {
  theme: {
    colors: {
      primary1: '#002677',
      primary2: '#FFFFFF',

      secondary1: '#00BED5',
      secondary2: '#F5B700',
    },
    fonts: {...},
  },
};

const theme = createTheme('uhc', themeOverride);

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

AppRegistry.registerComponent(appName, () => App);
```

---
id: timeline-v2
category: Data
title: V2Timeline
description: A timeline step displays a single event or action of the timeline tracker.
design: https://www.figma.com/design/34gRQMq2NxFgeRynjqd24C/Documentation-%7C-UHC-Abyss-Mobile-App?node-id=931-225262&t=iguCSwnU4rMOZ7Dn-0
subDirectory: Timeline/v2
sourceIsTS: true
---

<Tab label="Overview">

```jsx
import { V2Timeline } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'V2Timeline',
  inputs: [
    {
      prop: 'type',
      type: 'select',
      options: [
        { label: 'Combo', value: 'combo' },
        { label: 'Card', value: 'card' },
        { label: 'Progress', value: 'progress' },
      ],
      defaultValue: 'combo',
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'Default', value: 'default' },
        { label: 'Warning', value: 'warning' },
        { label: 'Error', value: 'error' },
        { label: 'Info', value: 'info' },
      ],
      defaultValue: 'default',
    },
    {
      prop: 'headingWeight',
      type: 'string',
      defaultValue: '$normal',
    },
    {
      prop: 'currentStep',
      type: 'select',
      options: [
        { label: '0', value: 0},
        { label: '1', value: 1 },
        { label: '2', value: 2 },
        { label: '3', value: 3},
        { label: '4', value: 4},
        { label: '5', value: 5},
      ],
    },
  ]
}

<V2Timeline
  currentStep={1}
  paragraph="Paragraph text in the active step card"
>
  <V2Timeline.Step
    heading="Application Received and Processing"
    date={new Date(2024, 6, 17)}
    paragraph="Paragraph would go here"
  />
  <V2Timeline.Step
    heading="CMS Determination"
    date={new Date(2024, 6, 19)}
    paragraph="Paragraph would go here"
  />
  <V2Timeline.Step
    heading="Determination Outcome"
  />
  <V2Timeline.Step heading="UCard Shipped" />
  <V2Timeline.Step
    heading="Plan coverage begins"
    date={new Date(2025, 1, 1)}
    paragraph="Paragraph would go here"
    content={
      <Button size="small" variant="secondary">
        Button
      </Button>
    }
  />
</V2Timeline>
```

## Timeline Props & Usage

The `currentStep` prop is used to define the active timeline step. `currentStep` is required. To get the fully complete state for the timeline,
`currentStep` should be set to be greater than the total number of steps.
For example, if there are 3 steps, `currentStep` should be set to 4 to show the timeline as fully complete.

`variant` is used to select the step variant, The options are `default`, `warning`, `error`, and `info`.

Use the `type` prop to select what timeline type is most appropriate for you. The default `type` is `combo`.

- `combo` displays the active step card with the steps contained in a card directly below.
- `card` wraps the steps within a card. `card` does **NOT** contain the active step card.
- `progress` displays only the timeline steps without any wrapper.

`headingWeight` is used to modify the heading's fontWeight of every **non-active** step.

Use `content` to add custom components inside of the active step card.

Use `button` to add a button to the active step card.

## Timeline.Step Props & Usage

`Timeline.Step` is used to display an individual step, each step has access to the props below providing the ability to manipulate the data displayed. `Timeline.Step` must be a direct child of `Timeline`.

`isDisabled` will disable the step. When a step is disabled, it can still be accessed by `Timeline` via `currentStep`. A disabled step will not animate when active/complete.

`heading` defines the step's Heading.

`date` defines the date value displayed below `heading`, if a Date object is passed into `date` it will be formatted `MM/DD/YYYY`.

Use `paragraph` to add a paragraph below `date`.

`content` is used to add custom components to the bottom of the step.

```jsx live
() => {
  const [activeStep, setActiveStep] = useState(1);
  const [value, setValue] = useState(false);

  return (
    <V2Timeline
      currentStep={activeStep}
      content={
        <SegmentedControls value={activeStep} onChange={setActiveStep}>
          <SegmentedControls.Tab label="Step 1" value={1} />
          <SegmentedControls.Tab label="Step 2" value={2} />
          <SegmentedControls.Tab label="Step 3" value={3} />
          <SegmentedControls.Tab label="Step 4" value={4} />
          <SegmentedControls.Tab label="Step 5" value={5} />
        </SegmentedControls>
      }
      footer={
        <CellGroup.Cell
          hideBorderBottom
          title="Notify me about plan status"
          onInfoButtonPress={() => {}}
          type="toggle"
          value={value}
          onChange={setValue}
        />
      }
    >
      <V2Timeline.Step
        heading="Heading text"
        date={new Date()}
        paragraph="Paragraph Text"
      />
      <V2Timeline.Step heading="Heading text" date={new Date()} />
      <V2Timeline.Step heading="Heading text" paragraph="Paragraph Text" />
      <V2Timeline.Step
        heading="Heading text"
        date="05/21/2023"
        paragraph="Paragraph Text"
      />
      <V2Timeline.Step
        heading="Heading text"
        paragraph="Paragraph Text"
        date={new Date()}
        content={
          <Button variant="secondary" size="small">
            Button
          </Button>
        }
      />
    </V2Timeline>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={V2Timeline}
  rows={[
    {
      name: 'button',
      type: 'node',
      description:
        "Button lives inside the top card of type 'combo'. The button is placed at the bottom of the card below 'content'",
    },
    {
      name: 'children',
      type: 'node',
      description: 'Timeline steps',
    },
    {
      name: 'content',
      type: 'node',
      description:
        "Content lives inside the top card of type 'combo'. The content is placed at the bottom of the card above 'button'",
    },
    {
      name: 'currentStep',
      type: 'number',
      description: 'The active timeline step',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'Custom description placed inside the active step card',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'content placed at the bottom of the timeline',
    },
    {
      name: 'headingWeight',
      type: 'string | number',
      description: 'Defines the heading weight of all inactive timeline steps',
      default: '$normal',
    },
    {
      name: 'type',
      type: "'combo' | 'card' | 'progress'",
      description: 'Defines the heading weight of all inactive timeline steps',
      default: 'combo',
    },
    {
      name: 'variant',
      type: "'default' | 'warning' | 'error' | 'info'",
      description: 'Defines the color palette of timeline',
      default: 'default',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={V2Timeline.Step}
  rows={[
    {
      name: 'content',
      type: 'node',
      description:
        'Customizable content that is displayed at the bottom of the step',
    },
    {
      name: 'date',
      type: 'string | Date',
      description: 'The date displayed under title and above paragraph',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The step heading, a heading is required for every step',
    },
    {
      name: 'paragraph',
      type: 'string',
      description: 'Text displayed below step',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Timeline}
  rows={[
    {
      name: 'timeline-root',
      description: 'Timeline root element',
    },
    {
      name: 'timeline-combo-card',
      description: 'Timeline active step card root',
    },
    {
      name: 'timeline-combo-card-heading',
      description: 'Timeline active step card heading',
    },
    {
      name: 'timeline-combo-card-paragraph',
      description: 'Timeline active step card paragraph',
    },
    {
      name: 'timeline-combo-card-content',
      description: 'Timeline active step card content',
    },
    {
      name: 'timeline-combo-card-button-wrapper',
      description: 'Timeline active step card button wrapper',
    },
    {
      name: 'timeline-card',
      description: 'Timeline card root',
    },
    {
      name: 'timeline-card-heading',
      description: 'Timeline card heading',
    },
    {
      name: 'timeline-step-wrapper',
      description: 'Timeline step wrapper',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={V2Timeline.Step}
  rows={[
    {
      name: 'timeline-step-root',
      description: 'Timeline step root element',
    },
    {
      name: 'timeline-step-status-indicator',
      description: 'Timeline step status indicator',
    },
    {
      name: 'timeline-step-solid-track',
      description: 'Timeline step solid track',
    },
    {
      name: 'timeline-step-dashed-track',
      description: 'Timeline step dashed track',
    },
    {
      name: 'timeline-step-content',
      description: 'Timeline step content',
    },
    {
      name: 'timeline-step-heading',
      description: 'Timeline step heading',
    },
    {
      name: 'timeline-step-date-status',
      description: 'Timeline step date status',
    },
    {
      name: 'timeline-step-paragraph',
      description: 'Timeline step paragraph',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={Timeline}
  rows={[
    'disabled',
    'Timeline.history',
    'Timeline.currentStep',
    'Timeline.step',
    'Timeline.active',
    'Timeline.incomplete',
    'Timeline.complete',
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Timeline} keys={['timeline']} />
```

</Tab>

<Tab label="Migration">

```jsx render
<Docs.ComparisonTable of={Timeline} type="class" />
```

```jsx render
<Docs.ComparisonTable of="Timeline.Step" type="class" />
```

```jsx render
<Docs.ComparisonTable of={Timeline} type="props" />
```

```jsx render
<Docs.ComparisonTable of="Timeline.Step" type="props" />
```

</Tab>

---
id: timeline
category: Data
title: Timeline
description: A timeline step displays a single event or action of the timeline tracker.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=25304-37067&mode=design&t=lc6nuZ3zKpfWkpNH-0
---

<Tab label="Overview">

```jsx
import { Timeline } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'Timeline',
  inputs: [
    {
      prop: 'type',
      type: 'select',
      options: [
        { label: 'Combo', value: 'combo' },
        { label: 'Card', value: 'card' },
        { label: 'Progress', value: 'progress' },
      ],
    },
    {
      prop: 'variant',
      type: 'select',
      options: [
        { label: 'Default', value: 'default' },
        { label: 'Warning', value: 'warning' },
        { label: 'Error', value: 'error' },
        { label: 'Info', value: 'info' },
      ],
    },
      {
        prop: 'titleWeight',
        type: 'string',
      },
    {
      prop: 'currentStep',
      type: 'number',
    },
  ]
}

  <Timeline currentStep={1}>
    <Timeline.Step
      variant="default"
      title="Variant: Default"
      description="Variant: Default"
      date={new Date()}
    />
    <Timeline.Step
      variant="warning"
      title="Variant: Warning"
      description="Variant: Warning"
      date={new Date()}
    />
    <Timeline.Step
      variant="error"
      title="Variant: Error"
      description="Variant: Error"
      date={new Date()}
    />
    <Timeline.Step
      variant="info"
      title="Variant: Info"
      description="Variant: Info"
      date={new Date()}
    />
</Timeline>
```

## Timeline Props & Usage

The `currentStep` prop is used to define the active timeline step. `currentStep` is required. To get the fully complete state for the timeline,
`currentStep` should be set to be greater than the total number of steps. For example, if there are 3 steps, `currentStep` should be set to 4 to show the timeline as fully complete.

`variant` is used to select the step variant, The options are `default`, `warning`, `error`, and `info`.

Use the `type` prop to select what timeline type is most appropriate for you. The default `type` is `combo`.

- `combo` displays the `active step card` with the steps contained in a card directly below.
- `card` wraps the steps within a card. `card` does **NOT** contain the `active step card`.
- `progress` displays only the timeline steps without any wrapper.

`titleWeight` is used to modify the title's fontWeight of every **non-active** step.

Use `content` to add custom components inside of the `active step card`.

Use `button` to add a button to the `active step card`.

```jsx live
() => {
  const [variant, setVariant] = useState('default');
  const [currentStep, setCurrentStep] = useState(2);

  const Heading = styled('Text', {
    paddingVertical: 12,
    fontSize: 24,
    color: '$gray4',
    fontWeight: '$medium',
  });

  const changeValue = (operator) => {
    setCurrentStep((v) => Math.min(Math.max(v + operator, 1), 3));
  };

  return (
    <Grid columns={2} space={16}>
      <Grid.Col span={2}>
        <Heading>Type: Combo</Heading>
        <Timeline
          currentStep={currentStep}
          variant={variant}
          type="combo"
          content={
            <SegmentedControls
              shrink
              style={{ alignSelf: 'center' }}
              value={variant}
              onChange={setVariant}
            >
              <SegmentedControls.Tab label="Default" value="default" />
              <SegmentedControls.Tab label="Warning" value="warning" />
              <SegmentedControls.Tab label="Error" value="error" />
              <SegmentedControls.Tab label="Info" value="info" />
            </SegmentedControls>
          }
          button={
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-around',
              }}
            >
              <Button variant="secondary" onPress={() => changeValue(-1)}>
                Back
              </Button>
              <Button variant="secondary" onPress={() => changeValue(+1)}>
                Forward
              </Button>
            </View>
          }
        >
          <Timeline.Step
            title="Type: Combo"
            date={new Date()}
            description="Description Text"
          />
          <Timeline.Step
            title="Type: Combo"
            date={new Date()}
            description="Description Text"
          />
          <Timeline.Step
            title="Type: Combo"
            date={new Date()}
            description="Description Text"
          />
        </Timeline>
      </Grid.Col>
      <Grid.Col span={1}>
        <Heading>Type: Card</Heading>
        <Timeline
          type="card"
          currentStep={currentStep}
          variant={variant}
          titleWeight="$regular"
        >
          <Timeline.Step
            title="$medium font"
            date={new Date()}
            description="Description Text"
          />
          <Timeline.Step
            title="$medium font"
            date={new Date()}
            description="Description Text"
          />
          <Timeline.Step
            title="$medium font"
            date={new Date()}
            description="Description Text"
          />
        </Timeline>
      </Grid.Col>
      <Grid.Col style={{ alignSelf: 'flex-start' }} span={1}>
        <Heading>Type: Progress</Heading>
        <Timeline type="progress" currentStep={currentStep} variant={variant}>
          <Timeline.Step
            title="Type: Progress"
            date={new Date()}
            description="Description Text"
          />
          <Timeline.Step
            title="Type: Progress"
            date={new Date()}
            description="Description Text"
          />
          <Timeline.Step
            title="Type: Progress"
            date={new Date()}
            description="Description Text"
          />
        </Timeline>
      </Grid.Col>
    </Grid>
  );
};
```

## Timeline.Step Props & Usage

`Timeline.Step` is used to display an individual step, each step has access to the props below providing the ability to manipulate the data displayed. `Timeline.Step` must be a direct child of `Timeline`.

`isDisabled` will disable the step. When a step is disabled, it can still be accessed by `Timeline` via `currentStep`. A disabled step will not animate when active/complete.

`title` defines the step's title.

`date` defines the date value displayed below `title`, if a Date object is passed into `date` it will be formatted `MM/DD/YYYY`.

Use `description` to add a description below `date`.

`content` is used to add custom components to the bottom of the step.

```jsx live
() => {
  const [activeTab, setActiveTab] = useState(1);

  return (
    <View
      style={{
        flexDirection: 'row',
      }}
    >
      <View style={{ flex: 1 }}>
        <Timeline
          currentStep={activeTab}
          content={
            <SegmentedControls
              shrink
              style={{ alignSelf: 'center' }}
              value={activeTab}
              onChange={setActiveTab}
            >
              <SegmentedControls.Tab label="Step 1" value={1} />
              <SegmentedControls.Tab label="Step 3" value={3} />
              <SegmentedControls.Tab label="Step 4" value={4} />
              <SegmentedControls.Tab label="Step 5" value={5} />
              <SegmentedControls.Tab label="Step 6" value={6} />
            </SegmentedControls>
          }
        >
          <Timeline.Step
            title="Title text"
            date={new Date()}
            description="Description Text"
          />
          <Timeline.Step
            isDisabled
            date={new Date()}
            title="Disabled Step"
            description="Disabled Step"
          />
          <Timeline.Step title="Title text" date={new Date()} />
          <Timeline.Step title="Title text" description="Description Text" />
          <Timeline.Step
            title="Title text"
            date="05/21/2023"
            description="Description Text"
          />
          <Timeline.Step
            title="Title text"
            description="Description Text"
            date={new Date()}
            content={
              <Button variant="secondary" size="small">
                Button
              </Button>
            }
          />
        </Timeline>
      </View>
    </View>
  );
};
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Timeline}
  rows={[
    {
      name: 'children',
      type: 'node',
      description: 'Timeline steps',
    },
    {
      name: 'currentStep',
      type: 'number',
      description: 'The active timeline step',
    },
    {
      name: 'titleWeight',
      type: 'string | number',
      description: 'Defines the title weight of all inactive timeline steps',
      default: '$normal',
    },
    {
      name: 'content',
      type: 'node',
      description:
        "Content that lives inside the top card of type 'combo'. Content is placed below 'description' and above 'button'",
    },
    {
      name: 'description',
      type: 'string',
      description: 'Custom description placed inside the active step card',
    },
    {
      name: 'button',
      type: 'node',
      description:
        "Button lives inside the top card of type 'combo'. The button is placed at the bottom of the card below 'content'",
    },
    {
      name: 'type',
      type: '"combo" | "card" | "progress"',
      description: 'Defines the layout type of timeline',
      default: 'combo',
    },
    {
      name: 'variant',
      type: '"default" | "warning" | "error" | "info"',
      description: 'Defines the color palette of timeline',
      default: 'default',
    },
    {
      name: 'footer',
      type: 'node',
      description: 'Content placed at the bottom of the Timeline',
    },
  ]}
/>
```

```jsx render
<Docs.PropsTable
  of={Timeline.Step}
  rows={[
    {
      name: 'title',
      type: 'string',
      description: 'The steps title, a title is required for every step',
    },

    {
      name: 'date',
      type: 'string | Date',
      description: 'The date displayed under title and above description',
    },
    {
      name: 'description',
      type: 'string',
      description: 'Text displayed below step',
    },
    {
      name: 'content',
      type: 'node',
      description:
        'Customizable content that is displayed at the bottom of the step',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Disables the step',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Timeline}
  rows={[
    {
      name: 'timeline-root',
      description: 'Timeline root element',
    },
    {
      name: 'timeline-combo-card',
      description: 'Timeline active step card root',
    },
    {
      name: 'timeline-combo-card-text-wrapper',
      description: 'Timeline active step card text wrapper',
    },
    {
      name: 'timeline-combo-card-eyebrow',
      description: 'Timeline active step card eyebrow text',
    },
    {
      name: 'timeline-combo-card-title',
      description: 'Timeline active step card title text',
    },
    {
      name: 'timeline-combo-card-date',
      description: 'Timeline active step card date text',
    },
    {
      name: 'timeline-combo-card-description',
      description: 'Timeline active step card description text',
    },
    {
      name: 'timeline-combo-card-content',
      description: 'Timeline active step card content wrapper',
    },
    {
      name: 'timeline-combo-card-button-wrapper',
      description: 'Timeline active step card button wrapper',
    },
    {
      name: 'timeline-card',
      description: 'Timeline card',
    },
    {
      name: 'timeline-card-heading',
      description: 'Timeline card heading text',
    },
    {
      name: 'timeline-card-divider',
      description: 'Timeline card divider line',
    },
    {
      name: 'timeline-step-wrapper',
      description: 'Timeline step wrapper',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Timeline.Step}
  rows={[
    {
      name: 'timeline-step-root',
      description: 'Timeline step root',
    },
    {
      name: 'timeline-step-top-wrapper',
      description: 'Wraps the step title',
    },
    {
      name: 'timeline-step-top-wrapper-left',
      description: 'Wraps the step icon, used for alignment',
    },
    {
      name: 'timeline-step-icon-wrapper',
      description: 'Wraps the step icon',
    },
    {
      name: 'timeline-step-icon',
      description: 'Timeline step icon',
    },
    {
      name: 'timeline-step-title',
      description: 'Timeline step title text',
    },
    {
      name: 'timeline-step-bottom-wrapper',
      description:
        'Wraps the date, description and content, used for alignment',
    },
    {
      name: 'timeline-step-bottom-wrapper-left',
      description: 'Wraps the step progress bar, used for alignment',
    },
    {
      name: 'timeline-step-progress-bar-wrapper',
      description: 'Wraps the step progress bar',
    },
    {
      name: 'timeline-step-progress-bar-dash',
      description: 'dashed line under the progress bar',
    },
    {
      name: 'timeline-step-content-wrapper',
      description: 'Wraps the date, description and content',
    },
    {
      name: 'timeline-step-date',
      description: 'Timeline Step date text',
    },
    {
      name: 'timeline-step-description',
      description: 'Timeline Step description text',
    },
    {
      name: 'timeline-step-content',
      description: 'Timeline Step content wrapper',
    },
  ]}
/>
```

```jsx render
<Docs.TranslationTable
  of={Timeline}
  rows={[
    'disabled',
    'Timeline.history',
    'Timeline.currentStep',
    'Timeline.step',
    'Timeline.active',
    'Timeline.incomplete',
    'Timeline.complete',
  ]}
/>
```

</Tab>

---
id: toast
category: Feedback
title: Toast
description: Feedback on the result of an operation that disappears without user action.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=9982%3A35190&t=g1imyz1B5bFHjcvc-0
---

<Tab label="Overview">

```jsx
import { Toast } from '@uhg-abyss/mobile';
```

```jsx sandbox
  {
    component: 'Toast',
    inputs: [
      {
        prop: 'variant',
        type: 'select',
        options: [
          { label: 'success', value: 'success'},
          { label: 'warning', value: 'warning'},
          { label: 'error', value: 'error'},
          { label: "info", value: 'info'},
        ]
      },
      {
        prop: 'children',
        type: 'string',
      },
      {
        prop: 'href',
        type: 'string',
      },
      {
        prop: 'linkText',
        type: 'string',
      },
      {
        prop: 'heading',
        type: 'string',
      },
      {
        prop: 'underlineLink',
        type: 'boolean',
      },
      {
        prop: 'isClosable',
        type: 'boolean',
      },
    ],
  }
  <Toast href="https://www.google.com" linkText="Google">Link to Google</Toast>
```

## Variant

Use the `variant` property to set the color of the `Toast`.
The options are `success`, `warning`, `error`, and `info`. The default is `success`.

```jsx live
<Layout.Stack grow>
  <Toast variant="info">You can only compare up to 4 providers</Toast>
  <Toast variant="success">Your estimate has been saved!</Toast>
  <Toast variant="warning">Be careful what you wish for!</Toast>
  <Toast variant="error">Your estimate did not save!</Toast>
</Layout.Stack>
```

## Icons

Use the `icon` prop to pass in a specific Icon component. The expected size for the icon is 18px to stay consistent with the height of the text within the Toast. Find further guidance on material icons in the [Material Icons Tab](/mobile/ui/icon-material/).

```jsx live
<Layout.Stack grow>
  <Toast icon={<IconSymbol icon="favorite" size={18} color="$white" />}>
    filled white favorite
  </Toast>
  <Toast
    variant="info"
    icon={
      <IconSymbol color="$white" variant="outlined" icon="warning" size={18} />
    }
  >
    outlined warning
  </Toast>
  <Toast
    variant="error"
    icon={
      <IconSymbol
        variant="outlined"
        icon="local_activity"
        size={18}
        color="$white"
      />
    }
  >
    outlined local_activity
  </Toast>
</Layout.Stack>
```

## Heading

Use the `heading` prop to add text above the description. This is optional and should only be used to summarize the paragraph if needed.

```jsx live
<Toast variant="info" heading={'Informational Heading'}>
  Description text goes here
</Toast>
```

## Text

Change the children of the Toast to set the text.

```jsx live
<Toast variant="success">Your estimate has been saved!</Toast>
```

## onPress

Use the `onPress` function to handle the action when the link within the Toast is pressed.

```jsx live
<Toast
  variant="warning"
  onPress={() => {
    console.log('Link Pressed');
  }}
  href="https://www.github.com"
  linkText="Make A Wish"
>
  You can only compare up to 4 providers
</Toast>
```

## Link Text

Change the `linkText` prop to set the text.

Use the `underlineLink` prop to underline the linkText.

```jsx live
<Layout.Stack grow>
  <Toast variant="success" href="https://www.github.com" linkText="Undo Change">
    Your estimate has been saved!
  </Toast>
  <Toast
    variant="warning"
    linkText="Make A Wish"
    underlineLink
    onPress={() => console.log('Link pressed')}
  >
    Be careful what you wish for!
  </Toast>
</Layout.Stack>
```

## Dismissible Toast

Use the `isClosable` prop to create a dismissible toast. Instead of a set duration, the toast will remain on the screen until a user presses the close button. Accessibility requires a toast that has a link to be dismissible, this cannot be changed.

```jsx live
<Layout.Stack grow>
  <Toast variant="success" href="https://www.github.com" linkText="Undo Change">
    Your estimate has been saved!
  </Toast>
  <Toast variant="error" isClosable>
    Your estimate did not save!
  </Toast>
</Layout.Stack>
```

## Toast Functions

### Toast.show()

```ts
Toast.show(options: ShowToastOptions): string
```

The Toast will appear at the top of the screen for a default duration of 7 seconds per accessibility. It is recommended to increase the duration if more content is placed within the toast. A toast with a heading and description, or a link, should account for the time a user may need to interact with the toast. To use Toast.show(), import the ToastProvider.

```jsx
import { ToastProvider } from '@uhg-abyss/mobile';
```

- <b>duration</b> - Sets the time before the toast disappears.
- <b>placement</b> - Determines the placement of the toast.
- <b>offset</b> - Offset space for both the top and bottom of the toast.
- <b>onPress</b> - Callback fired when the link is pressed.
- <b>onClose</b> - Callback fired when the toast disappears.
- <b>href</b> - Sets the URL of the link.
- <b>icon</b> - Adds an icon to the Toast component.
- <b>linkText</b> - Sets the text of the link.
- <b>heading</b> - Sets the heading of the toast.
- <b>text</b> - Sets the text of the Toast Message.
- <b>variant</b> - Sets the color of the toast.
- <b>animationDuration</b> - Sets the transition time of the toast.
- <b>underlineLink</b> - Sets the heading of the toast.
- <b>isClosable</b> - Adds close icon to close the toast. The toast will not disappear
  until the close icon is pressed.

In addition, Toast.show() also accepts the same props as the Toast component.

### Toast.update()

```ts
Toast.update(id: string, options: ShowToastOptions): void
```

The function updates the already shown toast by passing in the unique id of the respective toast and the parameters to update.

### Toast.hide()

```ts
Toast.hide(id: string): void
```

The function hides the toast by specifying a unique id that is returned by Toast.show().

### Toast.hideAll()

```ts
Toast.hideAll(): void
```

The function hides all toasts rendered on the screen.

```jsx live
const StyledButton = styled(Button, {
  marginBottom: 10,
});

const delay = (ms) => {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
};

const Screen = () => {
  const showToast = () => {
    Toast.show({
      text: 'Your estimate has been saved!',
      onClose: () => console.log('Closed'),
      placement: 'top',
      variant: 'success',
    });
  };

  const showClosableToast = () => {
    Toast.show({
      text: 'Your estimate did not save!',
      onClose: () => console.log('Closed'),
      variant: 'error',
      isClosable: true,
    });
  };

  const showUpdatableToast = () => {
    const toastId = Toast.show({
      text: 'You can only compare up to 4 providers',
      heading: 'Changes not saved',
      variant: 'error',
      placement: 'top',
      onClose: () => {
        return console.log('Closed');
      },
      isClosable: false,
    });
    delay(3000).then(() => {
      Toast.update(toastId, {
        text: 'You picked one of our providers. Great choice!',
        variant: 'success',
        isClosable: true,
        heading: 'Changes Saved',
      });
    });
  };
  const showHidableToast = () => {
    const toastId = Toast.show({
      text: 'You can only compare up to 5 providers',
      heading: 'Changes not saved',
      variant: 'warning',
      placement: 'top',
      onClose: () => {
        return console.log('Closed');
      },
      isClosable: true,
    });
    delay(3000).then(() => {
      Toast.hide(toastId);
    });
  };

  return (
    <Layout.Group wrap alignLayout="center">
      <StyledButton onPress={showToast}>Show Toast</StyledButton>
      <StyledButton onPress={showClosableToast}>
        Show Closable Toast
      </StyledButton>
      <StyledButton onPress={showUpdatableToast}>
        Show & Updatable Toast
      </StyledButton>
      <StyledButton onPress={showHidableToast}>Show & Hide Toast</StyledButton>
      <StyledButton onPress={Toast.hideAll}>Hide all Toasts</StyledButton>
    </Layout.Group>
  );
};

render(() => {
  return (
    <ToastProvider>
      <Screen />
    </ToastProvider>
  );
});
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Toast}
  rows={[
    {
      name: 'icon',
      type: 'node',
      description: 'Adds an icon to the Toast component',
    },
    {
      name: 'children',
      type: 'node',
      description: 'The text to be displayed within the Toast component',
    },
    {
      name: 'heading',
      type: 'string',
      description: 'The text to be displayed above the main content',
    },
    {
      name: 'linkText',
      type: 'string',
      description: 'Set the text of the link',
    },
    {
      name: 'variant',
      type: '"success" | "warning" | "error" | "info"',
      description: 'Set the color of the toast',
      default: 'success',
    },
    {
      name: 'href',
      type: 'string',
      description: 'Set the URL of the link',
    },
    {
      name: 'onPress',
      type: 'function',
      description: 'Callback fired when the button is pressed',
    },
    {
      name: 'underlineLink',
      type: 'boolean',
      description: 'Adds underline to link text',
      default: 'false',
    },
    {
      name: 'isClosable',
      type: 'boolean',
      description: 'Creates a toast dismissible by close button only',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={Toast}
  rows={[
    {
      name: 'toast-root',
      description: 'Toast root element',
    },
    {
      name: 'toast-content-container',
      description: 'Toast element',
    },
    {
      name: 'toast-content-wrapper',
      description: 'Toast outer element',
    },
    {
      name: 'toast-icon',
      description: 'Toast icon element',
    },
    {
      name: 'toast-text-container',
      description: 'Toast text container',
    },
    {
      name: 'toast-text',
      description: 'Toast text element',
    },
    {
      name: 'toast-heading',
      description: 'Toast heading element',
    },
    {
      name: 'toast-link',
      description: 'Toast link',
    },
    {
      name: 'toast-close-button',
      description: 'Close button',
    },
    {
      name: 'toast-close-icon',
      description: 'Close icon',
    },
  ]}
  inherits={[{ name: 'Link', link: '/mobile/ui/link' }]}
/>
```

```jsx render
<Docs.TranslationTable of={Toast} rows={['close']} />
```

```jsx render
<Docs.TranslationTable of={ToastProvider} rows={['alert']} />
```

</Tab>

<Tab label="Accessibility">

## Focus Guidance for Dismissable Toasts

Abyss does not control the focus of components on the screen when a dissmissable Toast is closed. To meet
accessibility guidelines, the focus must be set to the previous node when closed. The [useSetFocus](/mobile/hooks/use-set-focus) hook can be used for this.

For example, if a button is pressed that triggers a Toast, focus must return to that button once it is closed, so that a screen reader or keyboard user may continue using the app where they left off.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={Toast} keys={['toast']} />
```

</Tab>

---
id: toggle-switch
category: Forms
title: ToggleSwitch
description: Used to switch between 2 modes.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?type=design&node-id=9549-32657&mode=design&t=7hfDPwhG2zrhoDjN-0
---

<Tab label="Overview">

```jsx
import { ToggleSwitch } from '@uhg-abyss/mobile';
```

```jsx sandbox
{
  component: 'ToggleSwitch',
  inputs: [
    {
      prop: 'isDisabled',
      type: 'boolean',
    },
    {
      prop: 'showAccessibilityIcon',
      type: 'boolean',
    },
  ]
}

() => {
  const form = useForm();

  return (
    <FormProvider state={form}>
      <ToggleSwitch model="toggle-switch-sandbox" />
    </FormProvider>
  );
};
```

## Usage

The toggle switch adapts its style based on the operating system. Use the system dropdown at the top right of the screen to update.

## useForm (recommended)

Using the `useForm` hook with `FormProvider` sets state for the component.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'toggle-switch-form': true,
    },
  });

  const handleSubmit = (data) => {
    console.log('Submitted:', data);
  };

  return (
    <FormProvider state={form} onSubmit={handleSubmit}>
      <ToggleSwitch model="toggle-switch-form" />
    </FormProvider>
  );
};
```

## useState

Using the `useState` hook gets values from the component state.

```jsx live
() => {
  const [example1, toggleExample1] = useState(true);

  return <ToggleSwitch isChecked={example1} onChange={toggleExample1} />;
};
```

## isDisabled

The `isDisabled` prop when set to true will cause the ToggleSwitch to be rendered in a disabled state, preventing user interaction and providing visual feedback that the component cannot be toggled.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'toggle-switch-disabled-one': true,
      'toggle-switch-disabled-two': false,
    },
  });

  return (
    <FormProvider state={form}>
      <ToggleSwitch model="toggle-switch-disabled-one" isDisabled />
      <Layout.Space />
      <ToggleSwitch model="toggle-switch-disabled-two" isDisabled />
    </FormProvider>
  );
};
```

## showAccessibilityIcon

The `showAccessibilityIcon` prop when set to true will cause the ToggleSwitch to be rendered with the accessibility icon.

```jsx live
() => {
  const form = useForm({
    defaultValues: {
      'toggle-switch-accessibility-one': true,
      'toggle-switch-accessibility-two': true,
      'toggle-switch-accessibility-three': false,
    },
  });

  return (
    <FormProvider state={form}>
      <ToggleSwitch
        model="toggle-switch-accessibility-two"
        showAccessibilityIcon
      />
      <Layout.Space />
      <ToggleSwitch
        model="toggle-switch-accessibility-one"
        isDisabled
        showAccessibilityIcon
      />
      <Layout.Space />
      <ToggleSwitch
        model="toggle-switch-accessibility-three"
        isDisabled
        showAccessibilityIcon
      />
    </FormProvider>
  );
};
```

</Tab>
<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={ToggleSwitch}
  rows={[
    {
      name: 'isChecked',
      type: 'boolean',
      description: 'Sets toggle status',
      default: 'false',
    },
    {
      name: 'isDisabled',
      type: 'boolean',
      description: 'Flag to disable ToggleSwitch',
      default: 'false',
    },
    {
      name: 'onChange',
      type: 'function',
      description: 'Callback fired when the value changes',
    },
    {
      name: 'showAccessibilityIcon',
      type: 'boolean',
      description: 'Flag to show the accessibility icon',
      default: 'false',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={ToggleSwitch}
  rows={[
    {
      name: 'toggle-switch-root',
      description: 'ToggleSwitch root element',
    },
    {
      name: 'toggle-switch-circle',
      description: 'ToggleSwitch Thumb element',
    },
  ]}
/>
```

</Tab>

<Tab label="Accessibility">

## Dynamic Type

ToggleSwitch scales up to 3XL.

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={ToggleSwitch} keys={['toggle-switch']} />
```

</Tab>

---
id: translate
category: I18n
title: Translate
description: Used to get the translated string from the i18n object.
---

<Tab label="Overview">

## Usage

```jsx
import { Translate } from '@uhg-abyss/mobile/ui/Translate';
```

## Usage

The `Translate` component can use a function as a child which passes an object with the `t` and `i18n` properties. The `t` property is a function that is used to get the translated string from the i18n object.
The `i18n` property is the i18n object.

The `t` function takes two arguments.

```jsx
t(key: string, replacements?: object): string
```

The `key` argument corresponds to the key in the i18n object. The `replacements` argument is an object that contains the values to replace in the translated string.

## Example

Let's use an example to illustrate how to use the `Translate` component. In the [TextField](/mobile/ui/text-field) component, we have a text block that displays the remaining characters available
to be typed in the text field. We can get that value with the key `TextField.charactersRemaining`.

```jsx live-expanded
<Translate>
  {({ t }) => <Text>{t('TextField.charactersRemaining')}</Text>}
</Translate>
```

If we want to replace the value of the remaining characters, we can pass in the `replacements` object with the key `count`.
Replacement values should always appear in double curly braces, (e.g. `{{count}}`).

```jsx live-expanded
<Translate>
  {({ t }) => <Text>{t('TextField.charactersRemaining', { count: 10 })}</Text>}
</Translate>
```

We can also use the component to get the translated string from the i18n object.

```jsx live-expanded
<Translate>
  {({ i18n }) => <Text>{i18n.TextField.charactersRemaining}</Text>}
</Translate>
```

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={Translate}
  rows={[
    {
      name: 'children',
      type: 'React.ReactNode | () => React.ReactNode',
      description: '',
    },
  ]}
/>
```

</Tab>

---
id: video-player
category: Media
title: VideoPlayer
description: A component that provides playback of video.
design: https://www.figma.com/file/wCMblLsq9TxAQvKzY3EfCt/Abyss-Mobile?node-id=47768%3A3163&mode=dev
---

<Tab label="Overview">

```jsx
import { VideoPlayer } from '@uhg-abyss/mobile/ui/VideoPlayer';
```

## Setup

VideoPlayer requires `react-native-video` to be install as a dependency. To start, install the [react-native-video](https://www.npmjs.com/package/react-native-video) package inside of your mobile folder, then follow the react-native-video [Installation directions](https://www.npmjs.com/package/react-native-video#installation).

## Basic usage

`VideoPlayer` can be used with a single `source` prop. In this configuration it will use the native controls in `iOS`, and abyss specific controls for `Android`.

`VideoPlayer` is built around [react-native-video](https://www.npmjs.com/package/react-native-video), and thus has the ability to consume any prop available in `react-native-video`, execpt: `fullscreen`.

```jsx
<VideoPlayer source={video} />
```

```jsx render
<Tabs title="Tabs Sandbox">
  <Tabs.Tab label="IOS" value="ios">
    <img
      src="/mobile/videoPlayer/basicUsageIOS.gif"
      alt="VideoPlayer IOS Basic usage"
      role="presentation"
    />
  </Tabs.Tab>
  <Tabs.Tab label="Android" value="android">
    <img
      src="/mobile/videoPlayer/basicUsageAndroid.gif"
      alt="VideoPlayer Android Basic usage"
      role="presentation"
    />
  </Tabs.Tab>
</Tabs>
```

## Customization

You can use the `thumbnail` prop to display a custom thumbnail before the video is started.

```jsx
<VideoPlayer
  source={video}
  thumbnail={
    <Brandmark size={300} affiliate="uhc" variant="lockup" color="blue" />
  }
/>
```

<img
  src="/mobile/videoPlayer/customThumbnail.png"
  alt="VideoPlayer custom thumbnail"
  role="presentation"
/>

## Subtitles/CC

Be sure to add closed captions to your video via the `textTrack` prop.

Closed Captions are required for accessibility. You can provide multiple text tracks, and select the default one using the `selectedTextTrack` prop.

```jsx
<VideoPlayer
  source={TestVid}
  videoTitle="Test Video"
  selectedTextTrack={{ type: 'index', value: 0 }}
  textTracks={[
    {
      title: 'english',
      language: 'en',
      uri: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
    },
  ]}
/>
```

## Accessibility

- Closed Captions is required for all videos.
- Be sure to provide an `videoTitle` prop to the `VideoPlayer` component. This will be used as the A11y title for the video.
- It is recommneded to provide a text transcript on the same page as the video player.

</Tab>

<Tab label="Integration">

```jsx render
<Docs.PropsTable
  of={'VideoPlayer'}
  rows={[
    {
      name: 'source',
      type: 'uri',
      description: 'The video source',
    },
    {
      name: 'videoTitle',
      type: 'string',
      description: 'The A11y title for the video',
    },
    {
      name: 'thumbnail',
      type: 'node',
      description:
        'Override that will place a custom video thumbnail over the video',
    },
    {
      name: 'onEnd',
      type: 'function',
      description: 'Callback ran on video end',
    },
    {
      name: 'onLoad',
      type: 'function',
      description: 'Callback ran on video load',
    },
  ]}
/>
```

```jsx render
<Docs.ClassesTable
  of={'VideoPlayer'}
  rows={[
    {
      name: 'video-player-root',
      description: 'VideoPlayer root',
    },
    {
      name: 'video-player-full-screen-wrapper',
      description:
        'Wrapper for the full screen modal (Modal for android | View for iOS)',
    },
    {
      name: 'video-player-wrapper',
      description: 'Fullscreen wrapper for the video component',
    },
    {
      name: 'video-player-video',
      description: 'Video component',
    },
    {
      name: 'video-player-thumbnail-wrapper',
      description: 'VideoPlayer thumbnail wrapper',
    },
    {
      name: 'video-player-thumbnail-overlay',
      description: 'VideoPlayer thumbnail overlay',
    },
    {
      name: 'video-player-thumbnail-play-button',
      description: 'VideoPlayer thumbnail play/pause button',
    },
    {
      name: 'video-player-thumbnail-duration-text',
      description: 'VideoPlayer thumbnail duration text',
    },
    {
      name: 'video-player-thumbnail-custom-wrapper',
      description: 'VideoPlayer custom thumbnail wrapper',
    },
    {
      name: 'video-player-duration-wrapper',
      description: 'VideoPlayer duration text wrapper',
    },
    {
      name: 'video-player-duration-text',
      description: 'VideoPlayer duration text',
    },
    {
      name: 'video-player-play-button',
      description: 'VideoPlayer Play button',
    },
    {
      name: 'video-player-play-button-icon',
      description: 'VideoPlayer Play button icon',
    },
    {
      name: 'video-player-android-controls-overlay',
      description: 'VideoPlayer android controls overlay',
    },
    {
      name: 'video-player-android-controls-close-button',
      description: 'VideoPlayer android controls close button',
    },
    {
      name: 'video-player-android-controls-close-button-icon',
      description: 'VideoPlayer android controls close button icon',
    },
    {
      name: 'video-player-android-controls-center-wrapper',
      description:
        'VideoPlayer android controls center wrapper (skip & play/pause buttons)',
    },
    {
      name: 'video-player-android-controls-back-button',
      description: 'VideoPlayer android controls skip back button',
    },
    {
      name: 'video-player-android-controls-back-button-icon',
      description: 'VideoPlayer android controls skip back button icon',
    },
    {
      name: 'video-player-android-controls-pause-button',
      description: 'VideoPlayer android controls play/pause button',
    },
    {
      name: 'video-player-android-controls-pause-button-icon',
      description: 'VideoPlayer android controls play/pause button icon',
    },
    {
      name: 'video-player-android-controls-forward-button',
      description: 'VideoPlayer android controls skip forward button',
    },
    {
      name: 'video-player-android-controls-forward-button-icon',
      description: 'VideoPlayer android controls skip forward button',
    },
    {
      name: 'video-player-android-controls-bottom-wrapper',
      description:
        'VideoPlayer android controls bottom wrapper (time slider, CC, fullscreen & duration)',
    },
    {
      name: 'video-player-android-controls-time-wrapper',
      description: 'VideoPlayer android controls duration time wrapper',
    },
    {
      name: 'video-player-android-controls-duration-current-text',
      description: 'VideoPlayer android controls current time text',
    },
    {
      name: 'video-player-android-controls-duration-remaining-text',
      description: 'VideoPlayer android controls duration left time wrapper',
    },
    {
      name: 'video-player-android-controls-slider-background',
      description: 'VideoPlayer android controls slider background',
    },
    {
      name: 'video-player-android-controls-slider-foreground',
      description: 'VideoPlayer android controls slider foreground',
    },
    {
      name: 'video-player-android-controls-slider-thumb',
      description: 'VideoPlayer android controls slider thumb',
    },
    {
      name: 'video-player-android-controls-subtitle-button',
      description: 'VideoPlayer android controls subtitle button',
    },
    {
      name: 'video-player-android-controls-subtitle-button-icon',
      description: 'VideoPlayer android controls subtitle button icon',
    },
    {
      name: 'video-player-android-controls-full-screen-button',
      description: 'VideoPlayer android controls full screen button',
    },
    {
      name: 'video-player-android-controls-full-screen-button-icon',
      description: 'VideoPlayer android controls full screen button icon',
    },
  ]}
/>
```

</Tab>

<Tab label="Tokens">

```jsx render
<Docs.ComponentTokensTable of={'VideoPlayer'} keys={['video-player']} />
```

</Tab>

---
id: overview
category: White Labeling
title: Overview
hideHeaderActions: true
---

## White Labeling with Abyss

Abyss is comprised of a group of designers, accessibility experts, engineers, and QE who work together to build design kits, component libraries, and documentation sites that are packed with prebuilt, reusable or global assets that align with our enterprise branding and accessibility standards to ensure quality, drive consistency, and help teams reduce redundancies in design and code, forging seamless collaboration across product portfolios.

Abyss helps teams create exceptional digital solutions and user journeys, enhancing user experience while driving familiarity for our end users across different platforms. Teams can feel confident using Abyss, leveraging our components and assets, knowing they don’t have to do design or accessibility checks to ensure compliance.

In addition to reusability, we also offer flexibility for customization, ensuring products remain streamlined and effortlessly maintainable through the combination of leveraging what’s available in Abyss and allowing teams to focus more of their time on specific user cases or product needs. This includes white labeling, which allows for design and engineering teams to take any of the reusable components, or building blocks, and apply their own styling and themes, rather than leveraging enterprise brand themes for UHC, UHG, or Optum.

### The Goal

The Abyss brand aims to empower white label consuming teams to apply their own themes to the design system, ensuring flexibility for both development and design teams to fully own and manage their tokens. This approach reduces dependency on the core design team for updates while preserving a unified system structure, allowing teams to maintain consistency and efficiency in their digital solutions.

## Glossary

**White Labeling** - The process of adapting a framework to support a specific brand or multiple brands not supported by Abyss, while allowing for customization.

**Tokens Studio for Figma** - Token Studio is the backbone of the abyss tokening strategy. It's a centralized place to create, manage, and export tokens to both Figma variables and as a dev-consumable JSON file. Read more on <ExitLink href="https://tokens.studio/">Tokens Studio here</ExitLink>.

**Tokens** - Tokens are key-value pairs consisting of the Token Name and value. These represent fundamental design decisions as abstract, reusable data. They allow for easy adaptation and customization of the Abyss Design System while maintaining consistency for any brand or style.
Abyss currently supports tokens for: color, spacing, sizing, border radius, border width, and opacity.

- `[Token Key]: [Token Value]`

**Theme** - A set of tokens that define a brand.

**Base Theme** - A theme whose tokens are managed, published and versioned by Abyss, such as `Optum` and `UHC`.

**White-Labeled Theme** - A customized theme whose tokens are managed, published, and versioned by an Abyss consumer for the brands they maintain.

## Tokens

To effectively leverage white labeling with Abyss, it's important to understand how tokens function within the design system. Teams looking to white label can use the Abyss token formula and variable map, applying their own values to achieve the desired theming and styling. This standardized token formula ensures consistent application of styles across experiences. Its reusability not only streamlines the process but also provides significant time savings and efficiencies for teams building and maintaining digital experiences.

### What are Tokens?

Tokens are even smaller building blocks (or sub-atoms) of the design system, used in place of hardcoded values and built in alignment with various standards that allow teams to maintain scalability and consistency. Each token category has its own structure based on defined rules and guidelines, representing design decisions that set the standard for the design system. When creating new or enhanced designs, use tokens to create a cohesive UI that follows established standards and patterns.

For a deeper dive into using tokens, visit our [Tokens](/mobile/brand/uhc/tokens) documentation.

---
id: design
category: White Labeling
title: Design Strategy
description: Leveraging design tokens (variables) and Figma libraries to rebrand the Abyss Design System
hideHeaderActions: true
---

## Overview

Utilizing our white labeling strategy, teams can work with Figma files to create new themes for their customers independently of the Abyss team. This allows you to preview themes in Figma using Abyss components, provide design decisions to developers, implement those design decisions into software, and migrate to new Abyss versions without losing your design decisions. <br/><br/> _ Note the Figma links below require having a Figma account and being granted access to the necessary project. If you don't have access, please click the "request access" button and reach out to Jess Wolff (jessica_wolff@uhc.com) for approval._

## Figma Files and Assets

### Global Files (Abyss owned)

The master library files contain tokenized components used across the design system. They are separated into two categories: design-ready and dev-ready. The design-ready components, if not in the backlog, will have the sprint they’re slotted for in the component description.

### Foundations and Token Files (Abyss owned)

Contains all the tokens in the form of Figma variables, as well as documentation components for color semantic tier taxonomy.
These files are fed by the Tokens Studio plugin and connected with the global versioned and design-ready files as a library.

### Figma File Duplicates (not owned by Abyss)

Abyss will provide duplicates of all six files - three per platform:

- a versioned file with dev-ready components
- a file with design-ready components
- a file with tokens (variables)

White label teams are responsible for setting up the files following provided <ExitLink href='https://www.figma.com/design/qHaYzU3GEEPMbQ0Nql1M6k/Documentation?node-id=1-223&t=ITK19qufccNGtDYw-4'>documentation</ExitLink> by Abyss. The Abyss version, at the time of duplicating the file, will be noted in the file name. White label teams are responsible for maintaining these files in a way that preserves component structure and functionality and token taxonomy.

## Design Guides

The Abyss Design Team has provided detailed documentation on how to utilize tokens to rebrand our design system.

- Check out the <ExitLink href='https://www.figma.com/design/qHaYzU3GEEPMbQ0Nql1M6k/Documentation?node-id=1-829&node-type=frame&t=JhxPCAUVTD7YIPr7-0'>Getting Started</ExitLink> documentation on Figma to learn more about applying your own theme to the Abyss Figma Library.
- Understanding token taxonomy is crucial for making informed decisions when modifying color tokens. The <ExitLink href='https://www.figma.com/design/qHaYzU3GEEPMbQ0Nql1M6k/Documentation?node-id=1-340&t=JhxPCAUVTD7YIPr7-4'> Token Taxonomy Guide</ExitLink> describes ways to utilize the Abyss token taxonomy documentation and learning how color is applied throughout.
- The most efficient way to rebrand the Abyss library is by leveraging the provided Figma-branded library file and the Token Studio plugin. <ExitLink href='https://www.figma.com/design/qHaYzU3GEEPMbQ0Nql1M6k/Documentation?node-id=1-465&t=JhxPCAUVTD7YIPr7-4'>Learn how to edit core tokens here</ExitLink>.
- For cases when the branding requires a color that is non-existent in the Abyss core tokens or belongs in a different bucket, Abyss Design has outlined a <ExitLink href='https://www.figma.com/design/qHaYzU3GEEPMbQ0Nql1M6k/Documentation?node-id=1-529&t=JhxPCAUVTD7YIPr7-4'>guide to remapping semantic tokens</ExitLink>.
- It is important to stay aligned with the design system. Abyss has two ways of doing so:
  - Allowing teams to <ExitLink href="https://www.figma.com/design/qHaYzU3GEEPMbQ0Nql1M6k/Documentation?node-id=1-932&t=JhxPCAUVTD7YIPr7-4">recreate updates</ExitLink>.
  - Allowing teams to stick to a specific version of Abyss and <ExitLink href="https://www.figma.com/design/qHaYzU3GEEPMbQ0Nql1M6k/Documentation?node-id=1-967&t=JhxPCAUVTD7YIPr7-4">migrate to a newer version</ExitLink> at their own pace.

---
id: introduction
category: Developer Guide
title: Introduction
description: Implementing a White Label Theme
hideHeaderActions: true
---

## Prepare

### Token Syncing

- Familiarize yourself with <ExitLink href="https://docs.tokens.studio/token-storage-and-sync/sync-provider-overview">Token Syncing in Tokens Studio</ExitLink>. This is an optional step that would allow you to skip importing the token JSON file manually

### Manual import

- Get Token JSON from [Design](/mobile/white-labeling/design)
- Add to Repository

## 1. Combine Tokens

Use the `flattenTokens` function to flatten and combine the imported tokens from the JSON file into a single object consumable by [createTheme](/mobile/tools/create-theme). This function supports a layered system where tokens from different themes can override core, semantic, and component-level tokens. Check out the [flattenTokens](/mobile/tools/flatten-tokens) documentation for an in-depth look at the function.

_Note that this approach assumes the token files are exported from Figma Token Studio._

```typescript
import { flattenTokens } from '@uhg-abyss/mobile';
import core_01 from '../01_core.json';
import semantic_02 from '../02_semantic.json';
import brand_03 from '../03_brand.json';

const brandTheme = flattenTokens(core_01, semantic_02, brand_03);
```

For maintaining multiple brands, refer to the [multi-brand](/mobile/white-labeling/developer-guide/multi-brand-implementation) tutorial.

## 2. Create Theme Object

Use the [createTheme](/mobile/tools/create-theme) function to create a theme object from the flattened tokens. This theme object will be used to apply the white label theme to your application. The `createTheme` function takes two arguments: the name of the base theme (`"uhc"`, `"uhg"`, `"optum"`, or `"abyss"`) and an optional object for any overrides you wish to apply, such as your white-labeled theme.

```typescript
import { createTheme } from '@uhg-abyss/mobile';

const theme = createTheme('optum', brandTheme);
```

## 3. Implement New Theme

Wrap your application with the [ThemeProvider](/mobile/ui/theme-provider) and pass in the created theme object. This ensures that the theme is applied globally to all components within your application.

```typescript
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import { ThemeProvider, createTheme, flattenTokens } from '@uhg-abyss/mobile';
import core_01 from '../01_core.json';
import semantic_02 from '../semantic_02.json';
import brand_03 from '../03_brand.json';

const brandTheme = flattenTokens(core_01, semantic_02, brand_03);
const theme = createTheme('optum', brandTheme);

const App = () => (
  <ThemeProvider theme={theme}>
    {/* Your application components */}
  </ThemeProvider>
);

AppRegistry.registerComponent(appName, () => App);
```

---
id: multi-brand-implementation
category: Developer Guide
title: Multi-Brand Themes
description: White Labeling for Multiple Brands
hideHeaderActions: true
---

## 1. Combine Brand Tokens

Use the `flattenTokens` function to combine the tokens from the JSON files into a single object for each different brand. This function supports a layered system where tokens from different themes can override core, semantic, and component level tokens. Check out the [flattenTokens](/mobile/tools/flatten-tokens) documentation for an in-depth look at the function.

```typescript
import { flattenTokens } from '@uhg-abyss/mobile';
import brand_A from '..tokens/brand_A.json';
import brand_B from '..tokens/brand_B.json';

const brandThemeObjectA = flattenTokens(core, brand_A);
const brandThemeObjectB = flattenTokens(core, brand_B);
```

## 2. Create Theme Objects

Use the [createTheme](/mobile/tools/create-theme) function to create a theme object from the flattened tokens. This theme object will be used to apply the white label theme to your application. The `createTheme` function takes two arguments: the name of the base theme (`"uhc"`, `"uhg"`, `"optum"`, or `"abyss"`) and an optional object for any overrides you wish to apply, such as your white-labeled theme.

```typescript
import { createTheme } from '@uhg-abyss/mobile';

const brandThemeA = createTheme('optum', brandThemeObjectA);
const brandThemeB = createTheme('optum', brandThemeObjectB);
```

## 3. Implement New Themes

Wrap your application with the [ThemeProvider](/mobile/ui/theme-provider). Depending on the brand selected, pass in the needed brand theme to the theme object. This ensures that the brand theme is applied globally to all components within your application.

```typescript
import { ThemeProvider, createTheme, flattenTokens } from '@uhg-abyss/mobile';
import core from '..tokens/core.json';
import brand_A from '..tokens/brand_A.json';
import brand_B from '..tokens/brand_B.json';

// flatten each brands tokens
const brandThemeObjectA = flattenTokens(core, brand_A);
const brandThemeObjectB = flattenTokens(core, brand_B);

// create each brand theme
const brandThemeA = createTheme('optum', brandThemeObjectA);
const brandThemeB = createTheme('optum', brandThemeObjectB);

const App = () => (
  <ThemeProvider theme={/* insert brand theme here */}>
    {/* Your application */}
  </ThemeProvider>
);
```