open-index/open-npm huggingface dataset:
npm package: @spark-web/divider
Description: --- title: Divider storybookPath: page-layout-divider--default isExperimentalPackage: false ---
Latest version: 5.1.0

---
title: Divider
storybookPath: page-layout-divider--default
isExperimentalPackage: false
---

Used to separate and group content. In most cases use the
[Stack](/package/stack).

```jsx live
<Divider />
```

## Examples

### Width

Defines the “width” of the divider.

```jsx live
<Stack gap="large">
  <Stack gap="small">
    <Text>standard</Text>
    <Divider width="standard" />
  </Stack>
  <Stack gap="small">
    <Text>large</Text>
    <Divider width="large" />
  </Stack>
</Stack>
```

### Color

Defines the “color” of the divider.

```jsx live
<Stack gap="large">
  <Stack gap="small">
    <Text>standard</Text>
    <Divider color="standard" />
  </Stack>
  <Stack gap="small">
    <Text>neutral</Text>
    <Divider color="neutral" />
  </Stack>
</Stack>
```

## Props

<PropsTable displayName="Divider" />

[divider-color]:
  https://github.com/brighte-labs/spark-web/blob/6c1909208460cb421e62f516106e774e4b0ddc35/packages/divider/src/Divider.tsx#L16
[brighte-theme]:
  https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
npm package: @spark-web/dropzone
Description: --- title: Drop Zone isExperimentalPackage: true ---
Latest version: 6.0.0

---
title: Drop Zone
isExperimentalPackage: true
---

The `Dropzone` component lets users upload files by clicking on, or dragging and
dropping onto the "drop zone". It can also be be triggered by clicking on the
label.

## Usage

### Field

Each `Dropzone` must be accompanied by a [`Field`](/package/field) with a label.
Effective form labeling helps inform users which selection to make.

## Examples

### Accept

By providing an `accept` prop, we can make the `Dropzone` only accept certain
file types.

The value must be an object with a common MIME type as keys and an array of file
extensions as values (similar to
[showOpenFilePicker's](https://developer.mozilla.org/en-US/docs/Web/API/window/showOpenFilePicker)
types accept option).

```jsx live
<Stack gap="large">
  <Field label="Upload image" description="Accepts common image file formats">
    <Dropzone accept={{ 'image/*': ['.png', '.jpg'] }} />
  </Field>
  <Field label="Upload PDF" description="Only accepts PDF files">
    <Dropzone accept={{ 'application/pdf': '.pdf' }} />
  </Field>
</Stack>
```

### Show Image Thumbnails

By default, once a file as been added to the Dropzone, a document icon will
displayed next to the file name in the list below. If you have uploaded an
image, you can use the `showImageThumbnails` to show an image preview instead.

```jsx live
<Field label="Upload image" description="Drop an image here to see a preview">
  <Dropzone accept={{ 'image/*': ['.png', '.jpg'] }} showImageThumbnails />
</Field>
```

## Props

<PropsTable displayName="Dropzone" />
npm package: @spark-web/fieldset
Description: --- title: Fieldset storybookPath: forms-fieldset--default isExperimentalPackage: true ---
Latest version: 5.1.0

---
title: Fieldset
storybookPath: forms-fieldset--default
isExperimentalPackage: true
---

Use the `Fieldset` to group thematically related controls in a form.

```jsx live
<Fieldset legend="Billing address">
  <Stack gap="small">
    <Field label="Street">
      <TextInput />
    </Field>
    <Field label="City">
      <TextInput />
    </Field>
    <Field label="State">
      <Select
        onChange={() => {}}
        options={[
          { label: 'New South Wales', value: 'NSW' },
          { label: 'Victoria', value: 'VIC' },
          { label: 'Queensland', value: 'QLD' },
          { label: 'South Australia', value: 'SA' },
          { label: 'Western Australia', value: 'WA' },
          { label: 'Tasmania', value: 'TAS' },
          { label: 'Northern Territory', value: 'NT' },
          { label: 'Australian Capital Territory', value: 'ACT' },
        ]}
      />
    </Field>
    <Field label="Postcode">
      <TextInput />
    </Field>
  </Stack>
</Fieldset>
```

## Example

### Legend

Provide a caption that describes the set of form fields.

```jsx live
<Fieldset legend="Name">
  <Columns gap="small">
    <Field label="First" labelVisibility="hidden">
      <TextInput placeholder="e.g. Jane" />
    </Field>
    <Field label="Last" labelVisibility="hidden">
      <TextInput placeholder="e.g. Smith" />
    </Field>
  </Columns>
</Fieldset>
```

## Props

<PropsTable displayName="Fieldset" />

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
npm package: @spark-web/heading
Description: --- title: Heading storybookPath: typography-heading--default isExperimentalPackage: false ---
Latest version: 5.2.0

---
title: Heading
storybookPath: typography-heading--default
isExperimentalPackage: false
---

Constrained, purposeful heading styles as a component.

## Level

Controls the size of the heading and maps to the appropriate heading element
(`h1`, `h2`, `h3` or `h4`). The rendered element can be overridden with the `as`
prop.

```jsx live
const headingLevels = ['1', '2', '3', '4'];

return (
  <Stack gap="large">
    {headingLevels.map(headingLevel => (
      <Heading key={headingLevel} as="h4" level={headingLevel} tone="neutral">
        Heading level {headingLevel}
      </Heading>
    ))}
  </Stack>
);
```

## Tone

Headings can be either "neutral" or "primary".

```jsx live
<Stack gap="large">
  <Heading level="1" tone="neutral">
    Heading neutral
  </Heading>
  <Heading level="1" tone="primary">
    Heading primary
  </Heading>
</Stack>
```

## Alignment

Text can be aligned with the `align` prop.

```jsx live
<Stack gap="small" dividers>
  <Heading level="3" align="left">
    Left (default)
  </Heading>
  <Heading level="3" align="center">
    Center
  </Heading>
  <Heading level="3" align="right">
    Right
  </Heading>
</Stack>
```

## Truncation

Truncate text to a single line using the `truncate` prop. Useful for displaying
user-generated content that may not fit within your layout.

```jsx live
<Stack gap="large" style={{ width: 200 }}>
  <Heading level="3" truncate>
    The quick brown fox jumps over the lazy
  </Heading>
</Stack>
```

## Contrast

To ensure headings have sufficient contrast, when on a dark background the
foreground colour is inverted.

```jsx live
<Box background="neutral" padding="large" borderRadius="small">
  <Heading level="3">This Heading is inverted to improve contrast.</Heading>
</Box>
```

## Props

<PropsTable displayName="Heading" />

Extra props are passed into the underlying [`Box`](/package/box) component.
npm package: @spark-web/hidden
Description: --- title: Hidden storybookPath: accessibility-hidden--default isExperimentalPackage: false ---
Latest version: 5.1.0

---
title: Hidden
storybookPath: accessibility-hidden--default
isExperimentalPackage: false
---

Conditionally display content for different screen sizes and media types.

```jsx live
<Stack gap="small">
  <Hidden below="wide">
    <Placeholder label="Hidden below wide" height={64} />
  </Hidden>
  <Hidden above="desktop">
    <Placeholder label="Visible below wide" height={64} />
  </Hidden>
</Stack>
```

## Examples

### Responsive

Hide content responsively using the `above` and `below` props, which accept a
breakpoint name.

```jsx live
<Stack gap="small">
  <Hidden below="wide">
    <Placeholder label="1. Hidden below wide" height={64} />
  </Hidden>
  <Hidden below="desktop">
    <Placeholder label="2. Hidden below desktop" height={64} />
  </Hidden>
  <Hidden below="tablet">
    <Placeholder label="3. Hidden below tablet" height={64} />
  </Hidden>
  <Hidden above="mobile">
    <Placeholder label="4. Hidden above mobile" height={64} />
  </Hidden>
  <Hidden above="tablet">
    <Placeholder label="5. Hidden above tablet" height={64} />
  </Hidden>
  <Hidden above="desktop">
    <Placeholder label="6. Hidden above desktop" height={64} />
  </Hidden>
</Stack>
```

### Print

Conditionally display content for print using the `on` prop.

```jsx live
<Stack gap="small">
  <Hidden on="screen">
    <Placeholder label="Hidden on screen" height={64} />
  </Hidden>
  <Hidden on="print">
    <Placeholder label="Hidden on print" height={64} />
  </Hidden>
</Stack>
```

## Props

<PropsTable displayName="Hidden" />

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
npm package: @spark-web/icon
Description: --- title: Icon isExperimentalPackage: false ---
Latest version: 5.1.0

---
title: Icon
isExperimentalPackage: false
---

Spark uses the “outline” variants of the wonderful open-source
[Heroicons](https://heroicons.com/) library.

## Examples

### Size

Define the icon size.

```jsx live
<Inline gap="large" alignY="center">
  <LightBulbIcon size="xsmall" />
  <LightBulbIcon size="small" />
  <LightBulbIcon size="medium" />
  <LightBulbIcon size="large" />
</Inline>
```

### Tone

Define the icon tone.

```jsx live
<Row gap="large" dividers>
  <Inline gap="large">
    <LightBulbIcon tone="neutral" />
    <LightBulbIcon tone="muted" />
  </Inline>
  <Inline gap="large">
    <LightBulbIcon tone="info" />
    <LightBulbIcon tone="positive" />
    <LightBulbIcon tone="caution" />
    <LightBulbIcon tone="critical" />
    <LightBulbIcon tone="accent" />
  </Inline>
</Row>
```

### Contrast

To ensure icons have sufficient contrast, when on a dark background the
foreground tones “neutral” and “muted” will be inverted.

```jsx live
<Inline gap="large">
  <Box background="neutral" padding="small" borderRadius="small">
    <LightBulbIcon tone="neutral" />
  </Box>
  <Box background="neutral" padding="small" borderRadius="small">
    <LightBulbIcon tone="muted" />
  </Box>
</Inline>
```

## Props

<PropsTable displayName="LightBulbIcon" />

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
[size-type]:
  https://github.com/brighte-labs/spark-web/blob/11e73659ff4a01a48a8761821bff34c6ec28568b/packages/icon/src/createIcon.tsx#L9
[foreground-tone]:
  https://github.com/brighte-labs/spark-web/blob/6c1909208460cb421e62f516106e774e4b0ddc35/packages/text/src/useForegroundTone.ts#L5
npm package: @spark-web/inline
Description: --- title: Inline storybookPath: page-layout-inline--default isExperimentalPackage: false ---
Latest version: 5.1.0

---
title: Inline
storybookPath: page-layout-inline--default
isExperimentalPackage: false
---

Use to layout a group of elements together, and allow them to wrap onto multiple
lines.

```jsx live
<Inline gap="large">
  <Placeholder width={128} />
  <Placeholder width={32} />
  <Placeholder width={64} />
  <Placeholder width={256} />
  <Placeholder width={128} />
  <Placeholder width={32} />
  <Placeholder width={64} />
  <Placeholder width={128} />
  <Placeholder width={32} />
  <Placeholder width={64} />
  <Placeholder width={256} />
</Inline>
```

## Examples

### Gap

The spacing between children can be adjusted using the `gap` prop.

```jsx live
<Inline gap="xxlarge">
  <Inline gap="small">
    <Placeholder />
    <Placeholder />
    <Placeholder />
  </Inline>
  <Inline gap="medium">
    <Placeholder />
    <Placeholder />
    <Placeholder />
  </Inline>
  <Inline gap="large">
    <Placeholder />
    <Placeholder />
    <Placeholder />
  </Inline>
  <Inline gap="xlarge">
    <Placeholder />
    <Placeholder />
    <Placeholder />
  </Inline>
</Inline>
```

### Vertical alignment

Items can be aligned vertically using the `alignY` prop.

```jsx live
<Stack gap="medium" align="center" dividers>
  <Inline gap="small" alignY="top">
    <Placeholder />
    <Placeholder label="top" height={64} width={128} />
    <Placeholder />
  </Inline>
  <Inline gap="small" alignY="center">
    <Placeholder />
    <Placeholder label="center" height={64} width={128} />
    <Placeholder />
  </Inline>
  <Inline gap="small" alignY="bottom">
    <Placeholder />
    <Placeholder label="bottom" height={64} width={128} />
    <Placeholder />
  </Inline>
</Stack>
```

### Horizontal alignment

Items can be aligned horizontally using the `align` prop.

```jsx live
<Stack gap="medium" dividers>
  <Inline gap="small" align="left">
    <Placeholder label="left" width={128} />
    <Placeholder />
    <Placeholder />
  </Inline>
  <Inline gap="small" align="center">
    <Placeholder />
    <Placeholder label="center" width={128} />
    <Placeholder />
  </Inline>
  <Inline gap="small" align="right">
    <Placeholder />
    <Placeholder />
    <Placeholder label="right" width={128} />
  </Inline>
</Stack>
```

## Props

<PropsTable displayName="Inline" />

[`Box`](/package/box) props are also included as `Inline` props and are not
listed here (excluding `display`, `alignItems`, `flexDirection`,
`justifyContent` and `flexWrap`).

[align]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L16
[align-y]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L18
[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
npm package: @spark-web/link
Description: --- title: Link storybookPath: navigation-link--default isExperimentalPackage: false ---
Latest version: 5.1.0

---
title: Link
storybookPath: navigation-link--default
isExperimentalPackage: false
---

Link is used for taking users to destinations, or moving from one page to
another.

In cases where you'd like a button styled like a Link, see
[`ButtonLink`](/package/button#buttonlink).

## Props

<PropsTable displayName="Link" />

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

The `Link` component also accepts HTML `a` anchor props and are not listed here.
npm package: @spark-web/multi-select
Description: --- title: Multi-Select storybookPath: forms-select--default isExperimentalPackage: true ---
Latest version: 6.0.1

---
title: Multi-Select
storybookPath: forms-select--default
isExperimentalPackage: true
---

Allows the user to search and make multi selection from a list of values.

## Example

## Default

```jsx live
const [selectedOptions, setSelectedOptions] = React.useState();

return (
  <Stack gap="large">
    <MultiSelect
      options={[
        {
          label: '',
          options: [
            { value: 'SENT', label: 'Sent' },
            { value: 'COMPLETED', label: 'Completed' },
          ],
        },
      ]}
    />
  </Stack>
);
```

## With Default Option

```jsx live
const [selectedOptions, setSelectedOptions] = React.useState();

return (
  <Stack gap="large">
    <MultiSelect
      options={[
        {
          label: 'Status',
          options: [
            { value: 'SENT', label: 'Sent' },
            { value: 'COMPLETED', label: 'Completed' },
          ],
        },
        {
          label: 'Payment',
          options: [
            { value: 'CASH', label: 'Cash' },
            { value: 'CARD', label: 'Card' },
          ],
        },
      ]}
      placeholder="Select type"
      onChange={selected => setSelectedOptions(selected)}
      defaultOptions={[
        { value: 'CASH', label: 'Cash' },
        { value: 'SENT', label: 'Sent' },
      ]}
    />
  </Stack>
);
```

## Props

<PropsTable displayName="MultiSelect" />

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
npm package: @spark-web/nav-link
Description: --- title: Nav Link storybookPath: navigation-navlink--default isExperimentalPackage: true ---
Latest version: 5.1.0

---
title: Nav Link
storybookPath: navigation-navlink--default
isExperimentalPackage: true
---

Nav links are styled links for use in site navigation.

```jsx live
<Stack as="nav" gap="small">
  <NavLink href="#" isSelected>
    <HomeIcon />
    Dashboard
  </NavLink>
  <NavLink href="#">
    <ClipboardListIcon />
    Applications
  </NavLink>
  <NavLink href="#">
    <BriefcaseIcon />
    Leads
  </NavLink>
  <NavLink href="#">
    <AcademicCapIcon />
    Training
  </NavLink>
  <NavLink href="#">
    <ChartSquareBarIcon />
    Analytics
  </NavLink>
  <NavLink href="#">
    <CogIcon />
    Settings
  </NavLink>
</Stack>
```

## Children

Valid children of a `NavLink` are a string, or a string plus an icon. No other
combinations are allowed.

## Border Radius

There are two valid border radii for a `NavLink`: `'small'` and `'full'`.
Typically `'small'` should be used for vertical navigations (like a sidebar) and
`'full'` should be used for horizontal navigations like in a header.

```jsx live
<Stack gap="large">
  <Text weight="semibold">
    Hover or focus to see the different border radius options
  </Text>
  <Stack as="nav" gap="small">
    <NavLink href="#">"Small" border radius nav item</NavLink>
    <NavLink href="#" borderRadius="full">
      "Full" border radius nav item
    </NavLink>
  </Stack>
</Stack>
```

## isSelected

The `isSelected` prop is used to style the currently active page. It is
important that it is only treated as active if the page is current as it also
sets the `aria-current` attribute to `page`.

## Size

`NavLink`s can be either `medium` or `large`.

```jsx live
<Columns gap="small" collapseBelow="desktop">
  <Stack as="nav" gap="small">
    <NavLink href="#">Medium size nav item</NavLink>
    <NavLink href="#" size="large">
      Medium size nav item
    </NavLink>
  </Stack>
  <Stack as="nav" gap="small">
    <NavLink href="#">
      <HomeIcon />
      Large size nav item
    </NavLink>
    <NavLink href="#" size="large">
      <HomeIcon />
      Large size nav item
    </NavLink>
  </Stack>
</Columns>
```

## Inline

By default, the underlying element will be `display: flex` and will take up all
available space. By setting the `inline` prop to `true` the `NavLink` will be
`display: inline-flex` instead.

```jsx live
<Stack gap="small">
  <Box>
    <NavLink href="#">NavLink without inline prop</NavLink>
    <NavLink href="#">NavLink without inline prop</NavLink>
    <NavLink href="#">NavLink without inline prop</NavLink>
  </Box>
  <Divider />
  <Box>
    <NavLink inline href="#">
      NavLink with inline prop
    </NavLink>
    <NavLink inline href="#">
      NavLink with inline prop
    </NavLink>
    <NavLink inline href="#">
      NavLink with inline prop
    </NavLink>
  </Box>
</Stack>
```

## Props

<PropsTable displayName="NavLink" />

[data-attribute-map]:
  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
npm package: @spark-web/next-utils
Description: --- title: Next.js Utils isExperimentalPackage: true ---
Latest version: 5.1.0

---
title: Next.js Utils
isExperimentalPackage: true
---

## Universal Next Link

Resolves internal links using the
[Next.js Link component](https://nextjs.org/docs/api-reference/next/link), which
expects `href` to begin with a slash e.g. `href="/page"`. Uses a traditional
anchor element for everything else e.g. external, hash, tel, mailto.

For compatibility with TS + Spark the `href` property may only accept a string,
so URL Objects must be resolved ahead of time. We recommend the
[url package](https://www.npmjs.com/package/url) for complex cases, though most
of the time it's simple to do this manually.

You can pass the `UniversalNextLink` component to the `linkComponent` prop of
the `SparkProvider` and all `Link`, `TextLink`, and `ButtonLink` components will
automatically use the Next.js Link component for client-side transitions.

```jsx
import { SparkProvider } from '@spark-web/core';
import { UniversalNextLink } from '@spark-web/next-utils';

export default function App({ Component, pageProps }) {
  return (
    <SparkProvider linkComponent={UniversalNextLink}>
      <Component {...pageProps} />
    </SparkProvider>
  );
}
```

### Props

| Prop | Type   | Default | Description                                                                             |
| ---- | ------ | ------- | --------------------------------------------------------------------------------------- |
| href | string |         | URL to direct to. Note that the URL needs to be an internal link (i.e. `href='/page'`). |

The `UniversalNextLink` props also includes HTML `a` anchor props and are not
listed above.

## propsWithCssText

Function that takes the `initialProps` from `getInitialProps` and inlines
critical CSS server-side.

```jsx
import { propsWithCssText } from '@spark-web/next-utils';
import NextDocument, { Head, Html, Main, NextScript } from 'next/document';

export default class Document extends NextDocument {
  static async getInitialProps(context) {
    const initialProps = await NextDocument.getInitialProps(context);
    return propsWithCssText(initialProps);
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
```

### Props

| Prop         | Type                 | Default | Description                                                                                           |
| ------------ | -------------------- | ------- | ----------------------------------------------------------------------------------------------------- |
| initialProps | DocumentInitialProps |         | Value returned from the `getInitialProps` static method on the `Document` class (in `next/document`). |
npm package: @spark-web/password-input
Description: --- title: Password Input storybookPath: forms-passwordinput--default isExperimentalPackage: true ---
Latest version: 6.0.0

---
title: Password Input
storybookPath: forms-passwordinput--default
isExperimentalPackage: true
---

The password input component allows accepting of password text values. The
component builds off its underlying [TextInput](/package/text-input) component
and toggles the input mode between `password` and `text` depending on whether
the show password icon button is toggled to show or hide the password value.

## Usage

The component must be nested within a [`Field`](/package/field). See
[`Field`](/package/field) for more details.

## Examples

### Field utilities

You can use the parent [Field](/package/field) to set appropriate field level
labels, description adornments and messages.

```jsx live
<Stack gap="large">
  <Field
    label="Password"
    adornment={
      <Text>
        <TextLink href="#">Forgot password?</TextLink>
      </Text>
    }
    description={
      'Make sure your chosen password is at least 10 characters long.'
    }
  >
    <PasswordInput />
  </Field>
</Stack>
```

### Uncontrolled

Similar to [TextInput](/package/text-input), the component can be uncontrolled
and managing its own internal state.

```jsx live
const passwordRef = React.useRef(null);
const [value, setValue] = React.useState('');
const showValueHandler = React.useCallback(() => {
  setValue(passwordRef.current?.value);
}, [setValue]);

return (
  <Stack gap="large">
    <Field label="Example uncontrolled">
      <PasswordInput ref={passwordRef} />
    </Field>
    <Button onClick={showValueHandler}>Display password value</Button>
    <Text>The password value is: {value}</Text>
  </Stack>
);
```

### Controlled

Similar to [TextInput](/package/text-input), the component can be controlled by
passing in a `value` and `onChange` handler and have its state managed in a
parent component.

```jsx live
const [value, setValue] = React.useState(``);

return (
  <Stack gap="large">
    <Field label="Example controlled">
      <PasswordInput value={value} onChange={e => setValue(e.target.value)} />
    </Field>
    <Text>The current password value is: {value}</Text>
  </Stack>
);
```

## Props

The component passes props into its underlying [TextInput](/package/text-input)
component and are not listed here.
npm package: @spark-web/ssr
Description: --- title: SSR isExperimentalPackage: true ---
Latest version: 5.0.0

---
title: SSR
isExperimentalPackage: true
---

## renderStatic

Function that takes the HTML of a page (as a string) and returns:

- `html`: (type: `string`) original HTML that was passed in
- `ids`: (type: `Array<string>`) array of ids (class names referencing styles
  created by Emotion)
- `css`: (type: `string`) CSS generated by Emotion from the static HTML string
  that was passed to it