open-index/open-npm huggingface dataset:
npm package: @hig/accordion
Description: HIG Accordion
Author: Autodesk Inc.
Latest version: 2.1.2

# Accordion

Accordions can make content-heavy pages appear less so by vertically stacking items in lists that users can expand or contract.

Read more about when and how to use the Accordion component [on the internal wiki](https://wiki.autodesk.com/display/HIG/accordion).

## Getting started

### Install the package

```bash
yarn add @hig/accordion @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Accordion from "@hig/accordion";
```

## Basic usage

```jsx
<Accordion label="foo">
  bar
</Accordion>
```

## Customization


### Indicator
The icon and position of the indicator can be customized by props, available values can be found via:
```js
import {
  indicators,
  indicatorPositions,
  AVAILABLE_INDICATORS,
  AVAILABLE_INDICATOR_POSITIONS
} from "@hig/accordion";
```

### Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Accordion also has a `stylesheet` prop that accepts a function wherein you can modify Accordion's styles. The original styles, props, current theme data and theme meta will be passed to your custom stylesheet function, and it should return an object with the same structure as the original styles. For instance

```jsx
function customStylesheet(styles, props, themeData, themeMeta) {
  return {
    ...styles,
    wrapper: {
      ...styles.wrapper,
      backgroundColor: "yellow"
    },
    header: {
      ...styles.header,
      backgroundColor: props.collapsed
        ? themeData["basics.colors.green100"]
        : themeData["basics.colors.darkBlue100"]
    }
  };
}

<Accordion stylesheet={customStylesheet} label="foo">
  bar
</Accordion>
```
npm package: @hig/avatar
Description: HIG Avatar
Author: Autodesk Inc.
Latest version: 2.2.0

# Avatar

Avatars are a visual representation of a customer's identity. These may be small thumbnails as part of a menu or more prominent, standalone elements on account and management views.

Initials are dynamically generated from the provided name and always rendered. This allows the initials to serve as a placeholder while the image is loading.

Read more about when and how to use the Avatar component [on the hig website](https://hig.autodesk.com/web/components/avatars).

## Getting started

### Install the package

```bash
yarn add @hig/avatar @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Avatar, { sizes } from '@hig/avatar';
```

## Basic usage

```jsx
<Avatar
  name="David Gonzales"
  size={sizes.LARGE_48}
/>
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Avatar also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Avatar from '@hig/avatar';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    avatarContainer: {
      ...styles.avatarContainer,
      color: themeData["colorScheme.status.error"]
    },
    avatarImageWrapper: {
      ...styles.avatarImageWrapper,
      opacity: 1
    },
    avatarImage: {
      ...styles.avatarImage,
      padding: `4px`
    },
    avatarInitials: {
      ...styles.avatarInitials,
      position: `static`
    }
  });

  return (
    <Avatar stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/avatar-bundle
Description: HIG Avatar Bundle
Author: Autodesk Inc.
Latest version: 2.1.0

# Avatar Bundle

The Avatar Bundle is a "stack" of up to three Avatars, meant to represent a collection of customers associated with a single item or idea. When more than three collaborators are associated, there is an option to display the last Avatar spot as a number representing the amount of remaining Avatars not displayed. A border color can be added to the avatars if there are issues with the Avatars' clip-path CSS values.

Read more about when and how to use the Avatar Bundle component [on the internal wiki](https://hig.autodesk.com/web/components/avatar-bundle) (currently out of date).

## Getting started

### Install the package

```bash
yarn add @hig/avatar-bundle @hig/avatar @hig/theme-context @hig/theme-data
```

### Import the component

```js
import AvatarBundle, { sizes, spacings } from '@hig/avatar-bundle';
```

## Basic usage

```jsx
<AvatarBundle
  size={sizes.LARGE_48} // default: sizes.MEDIUM_32
  spacing={spacings.CONDENSED} // default: spacings.DEFAULT
  showOverflowCount={true}  // default: false
  borderColor={"#FFA456"}  // default: undefined (Overwrites clip-path setting. Recommended to leave undefined unless clip-path is causing issues)
  avatars={[{firstName: "John", lastName: "Price"}, {firstName: "Alex", lastName: "Serkis"}]} // Array of Avatar data
/>
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component.

Avatar Bundle also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Avatar from '@hig/avatar';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
      avatarBundleContainer: {
      ...styles.avatarBundleContainer,
      color: themeData["colorScheme.status.error"]
    },
      avatarWrapper: {
      ...styles.avatarWrapper,
      opacity: 1
    },
      avatarWrapperFirstItem: {
      ...styles.avatarWrapperFirstItem,
      padding: `4px`
    },
      avatarWrapperSecondItem: {
      ...styles.avatarWrapperSecondItem,
      position: `static`
    },
      avatarWrapperThirdItem: {
      ...styles.avatarWrapperThirdItem,
      position: `static`
    },
      avatarOverflowCount: {
      ...styles.avatarOverflowCount,
      position: `static`
    }
  });

  return (
    <AvatarBundle stylesheet={customStylesheet} />
  );
}
```
Stylesheets can also be passed in to individual avatars in the `avatars` array. See the Avatar README for a guide on Avatar stylesheets.
npm package: @hig/badge
Description: HIG Badge component
Author: Autodesk Inc.
Latest version: 1.1.0

# Badge

Badges are visual indicators that communicate status and draw attention to an object. They may contain small amounts of information, such as iconography or text, to provide users with more detail. 

## Getting started

```
yarn add @hig/badge @hig/theme-context @hig/theme-data
```

## Import the component

```
import Badge from '@hig/badge';
```

## Basic usage

```jsx
<Badge size="l" variant="dot" />
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Badge also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Badge from '@hig/badge';

function YourComponent() {
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    badge: {
      ...styles.badge,
      color: themeData["colorScheme.status.error"]
    }
  });

  return (
    <Badge stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/banner
Description: HIG Banner
Author: Autodesk Inc.
Latest version: 3.1.1

# Banner

Banners are notifications alerting an event that requires a user action. They are similar toasts except banners are not sparked by the user’s action, therefore they require a different design.  Banners are primarily used for global messages about the system that can be simply informational (blue) or color coded to signal success (green), warning (yellow) and error (red).

Read more about when and how to use the Banner component [on the internal wiki](https://wiki.autodesk.com/display/HIG/Banners).

## Getting started

```
yarn add @hig/banner @hig/theme-context @hig/theme-data
```

## Import the component

```
import Banner from '@hig/banner';
```

## Basic usage

```jsx
<Banner type="primary">
  Make sure you know these changes will effect your project status
</Banner>
```

## With actions

```jsx
<Banner
  type="primary"
  actions={({ isWrappingActions }) => (
    <Banner.Interactions isWrappingActions={isWrappingActions}>
      <Banner.Action>
        <Button
          type="secondary"
          size="small"
          width={isWrappingActions ? "grow" : "shrink"}
          title={text(
            "Resolve text",
            t(languages, chosenLanguage, "BANNER_RESOLVE_BUTTON_TEXT")
          )}
        />
      </Banner.Action>
      <Banner.Action>
        <Button
          type="secondary"
          size="small"
          width={isWrappingActions ? "grow" : "shrink"}
          title={text(
            "Reject text",
            t(languages, chosenLanguage, "BANNER_REJECT_BUTTON_TEXT")
          )}
        />
      </Banner.Action>
    </Banner.Interactions>
  )}
>
  Make sure you know these changes will effect your project status
</Banner>
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.
npm package: @hig/behaviors
Description: Shared component behaviors
Author: Autodesk Inc.
Latest version: 2.1.0

# Behaviors

> Shared component behaviors used across component

## Getting started

```bash
yarn add @hig/behaviors
```

## Import the component and CSS

```js
import { HoverBehavior } from "@hig/behaviors";
```

## Basic usage

```jsx
<HoverBehavior>
  {({ hasHover, onMouseEnter, onMouseLeave }) => (
    <span
      style={{ color: hasHover ? "red" : "white" }}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      Hello World
    </span>
  )}
</HoverBehavior>
```
npm package: @hig/button
Description: HIG Button
Author: Autodesk Inc.
Latest version: 3.2.0

# Button

HIG buttons trigger actions or changes within the interface. They come in a number of varieties.

Read more about when and how to use the Button components [on the HIG website](https://hig.autodesk.com/web/components/buttons).

## Getting started

```
yarn add @hig/button @hig/theme-context @hig/theme-data
```

## Import the component

```
import Button from '@hig/button';
```

## Basic usage

```jsx
<Button
  size="standard"
  title="Click Me"
  type="primary"
/>
```

## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

## Usage as a link

```jsx
<Button
  size="standard"
  title="Github"
  type="secondary"
  link="https://www.github.com"
  target="_blank"
/>
```
npm package: @hig/checkbox
Description: HIG Checkbox
Author: Autodesk Inc.
Latest version: 3.2.0

# Checkbox

Checkboxes provide a control to select from a list of non-exclusive options.

Read more about when and how to use the Checkbox component [on the website](https://hig.autodesk.com/web/components/inputs-and-controls#checkboxes).

## Getting started

### Install the package

```bash
yarn add @hig/checkbox @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Checkbox from '@hig/checkbox';
```

## Basic usage

```jsx
<Checkbox />
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Checkbox also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance:

```jsx
import Checkbox from '@hig/checkbox';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    checkboxWrapper: {
      ...styles.checkboxWrapper,
      color: themeData["colorScheme.status.error"]
    },
    checkboxInput: {
      ...styles.checkboxInput,
      opacity: 1
    },
    checkboxCheck: {
      ...styles.checkboxCheck,
      padding: `4px`
    },
    checkboxCheckWrapper: {
      ...styles.checkboxCheckWrapper,
      position: `static`
    },
    checkboxIndeterminate: {
      ...styles.checkboxIndeterminate,
      margin: `10px`
    }
  });

  return (
    <Checkbox stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/components
Description: HIG Components
Author: Autodesk Inc.
Latest version: 3.4.0

# Components

The Components package exports all of the available HIG components for easy access.

Please view the individual components packages for component specific documentation.

## Getting started

### Install the package

```bash
yarn add @hig/components
```

## Basic usage

### Import all components

```jsx
import * as HIG from "@hig/components";

<HIG.Button title="Click Me" />;
```

### Import a single component

```jsx
import { Button } from "@hig/components";

<Button title="Click Me" />;
```

### Import a component with component-specific exports

```jsx
import Button, { types } from "@hig/components/build/button";

<Button type={types.PRIMARY} title="Click Me" />;
```
npm package: @hig/fonts
Description: HIG Fonts
Author: Autodesk Inc.
Latest version: 2.0.0

# Fonts

This package contains the fonts for Autodesk HIG.

## Getting started

### Install the package

```bash
yarn add @hig/fonts
```

## Basic usage

The design system specifies three font weights, 400, 600, and 700. For ease of use we provide `ArtifactElement.css` which imports those three weights.

```js
/* ArtifaktElement font w/ weights used in the design system (400, 600, and 700)  */
import "@hig/fonts/build/ArtifaktElement.css";
```
npm package: @hig/icon
Description: HIG Icon component
Author: Autodesk Inc.
Latest version: 0.2.1

# Icon

Autodesk tool icons have a distinctive style. Although they don’t need to communicate complex interactions, the HIG icons should complement these icons, and look like they belong to the same family of products.

Read more about where and how to use icons on [the website](https://hig.autodesk.com/web/basics/icons).

## Getting started

```
yarn add @hig/icon
```

## Import the component and CSS

```
import Icon from '@hig/icon';
import '@hig/icon/build/index.css';
```

## Typical usage

Use the `name` prop to render a provided icon by name.

```jsx
<Icon name="assets" />
```

## Specifying a smaller size

```jsx
<Icon name="assets" size="16" />
```

## Providing a custom SVG

```jsx
import myIcon from 'my-icon.svg';

function MyComponent() {
  return <Icon svg={myIcon} />
}
```
npm package: @hig/icon-button
Description: HIG IconButton component
Author: Autodesk Inc.
Latest version: 3.1.1

# Icon Button

Action buttons that include an icon only, with no background. Useful for compact displays or toolbars with a number of related controls.

Read more about where and how to use IconButton on [the website](https://hig.autodesk.com/web/components/buttons).

## Getting started

```
yarn add @hig/icon-button @hig/theme-context @hig/theme-data
```

## Import the component

```
import IconButton from '@hig/icon-button';
```

## Typical usage

Use the `name` prop to render a provided icon by name.

```jsx
import { Assets24 } from "@hig/icons"

function MyComponent() {
  return (
    <IconButton
      icon={<Assets24 />}
      onClick={() => console.log('Clicked it.')}
    />
  );
}
```

## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Icon-Button also has a `stylesheet` prop that accepts a function wherein you can modify Icon Button's styles. The original styles, props, current theme data and theme meta will be passed to your custom stylesheet function, and it should return an object with the same structure as the original styles. For instance

```jsx
function customStylesheet(styles, props, themeData, themeMeta) {
  return {
    ...styles,
    iconButton: {
      ...styles.iconButton,
      backgroundColor: "yellow"
    },
    iconSpacer: {
      ...styles.iconSpacer,
      backgroundColor: props.hasFocus
        ? themeData["colorScheme.reference.base"]
        : themeData["colorScheme.reference.accent"]
    },
    iconButtonIcon: {
      ...styles.iconButtonIcon,
      padding: themeData["density.spacings.medium"]
    }
  };
}

<IconButton stylesheet={customStylesheet} />
```

## Providing a custom SVG

```jsx
import myIcon from 'my-icon.svg';

function MyComponent() {
  return (
    <IconButton
      icon={myIcon}
      onClick={() => console.log('Clicked it.')}
    />
  );
}
```
npm package: @hig/icons
Description: HIG icon assets
Author: Autodesk Inc.
Latest version: 4.5.0

# Icons

This package retains the source of the library of HIG icons.
You can import individual icons to render on your app.

```jsx
import { Assets24 } from "@hig/icons";

const MyComponent = () => (
    <div className="my-class">
        <Assets24 />
    </div>
);

export default MyComponent
```

Read more about where and how to use icons on [the website](https://hig.autodesk.com/web/basics/icons).

## Getting started

### Install the package

```bash
yarn add @hig/icons @hig/theme-context @hig/theme-data
```

# Developing

## Adding a New Icon

To add a new SVG icon to the library, add the `svg` file to the `src/icons` directory.

Then run the following command:

```bash
yarn build-icons
```

This will use SVGO to optimize the new icon, and update our release files. Remember to commit these changes.

## Accessing SVG source files

SVG source files for all icons are available in the `build/svg` subdirectory of the `@hig/icons` package (e.g. `./node_modules/@hig/icons/build/svg`).

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Icons can take a `color` prop that will accept any hex code, rgb, rgba, or color string that can change the default color. Icons also has a `stylesheet` prop that accepts a function wherein you can modify its styles.
npm package: @hig/input
Description: HIG Input
Author: Autodesk Inc.
Latest version: 2.2.0

# Input

Inputs allow the user to input a small amount of freeform text (100 characters or less).

Read more about when and how to use the Input component [on the website](https://hig.autodesk.com/web/components/form-elements).

## Getting started

### Install the package

```bash
yarn add @hig/input @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Input from '@hig/input';
```

## Basic usage

```jsx
<Input
  value={this.state.value}
  onChange={this.handleChange}
/>
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.
npm package: @hig/label
Description: HIG Label
Author: Autodesk Inc.
Latest version: 2.2.0

# Label

Label represents a caption for an item in a user interface

## Getting started

### Install the package

```bash
yarn add @hig/label @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Label from '@hig/label';
```

## Basic usage

```jsx
<Label for="email-field">Email</Label>
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Label also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Label from '@hig/label';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    label: {
      ...styles.label,
      color: themeData["colorScheme.status.error"]
    }
  });

  return (
    <Label stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/menu
Description: HIG Menu
Author: Autodesk Inc.
Latest version: 2.2.3

# Menu

A menu is a mechanism to display a list of choices through interaction with a button, icon or other controls.

Read more about when and how to use the Menu component [on the internal wiki](https://hig.autodesk.com/web/components/menus).

## Getting started

### Install the package

```bash
yarn add @hig/menu @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Menu from "@hig/menu";
```

## Basic usage

```jsx
<Menu>
  <Option>Option 1</Option>
  <Option>Option 2</Option>
  <Option>Option 3</Option>
</Menu>
```

## Customization

### Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Menu also has a `stylesheet` prop that accepts a function wherein you can modify Menu's styles. The original styles, props, current theme data and theme meta will be passed to your custom stylesheet function, and it should return an object with the same structure as the original styles. For instance

```jsx
function customStylesheet(styles, props, themeData) {
  return {
    ...styles,
    menuGroup: {
      ...styles.menuGroup,
      backgroundColor: "yellow"
    },
    menu: {
      ...styles.menu,
      backgroundColor: props.collapsed
        ? themeData["basics.colors.green100"]
        : themeData["basics.colors.darkBlue100"]
    },
    menuOption: {
      ...styles.menuOption,
      backgroundColor: props.collapsed
        ? themeData["basics.colors.green100"]
        : themeData["basics.colors.darkBlue100"]
    },
    checkmarkWrapper: {
      ...styles.checkmarkWrapper,
      backgroundColor: props.collapsed
        ? themeData["basics.colors.green100"]
        : themeData["basics.colors.darkBlue100"]
    },
    assetWrapper: {
      ...styles.assetWrapper,
      backgroundColor: props.collapsed
        ? themeData["basics.colors.green100"]
        : themeData["basics.colors.darkBlue100"]
    },
    optionContentWrapper: {
      ...styles.optionContentWrapper,
      backgroundColor: props.collapsed
        ? themeData["basics.colors.green100"]
        : themeData["basics.colors.darkBlue100"]
    },
    shortcutWrapper: {
      ...styles.shortcutWrapper,
      backgroundColor: props.collapsed
        ? themeData["basics.colors.green100"]
        : themeData["basics.colors.darkBlue100"]
    }
  };
}

<Menu stylesheet={customStylesheet}>
  <Option>Option 1</Option>
  <Option>Option 2</Option>
  <Option>Option 3</Option>
</Menu>
```
npm package: @hig/modal
Description: HIG Modal
Author: Autodesk Inc.
Latest version: 3.2.0

# Modal

A modal is an overlay that focuses the customer's attention on a single task or set of controls. It creates a mode that disables the main window but keeps it visible with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent application.

Read more about when and how to use the Modal component [on the internal wiki](https://hig.autodesk.com/web/components/modal-shells).

## Getting started

### Install the package

```bash
yarn add @hig/modal @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Modal from '@hig/modal';
```

## Basic usage

```jsx
<Modal
  title="Remove your item?"
  open
>
  <Typography>This action is irreversible.</Typography>
  
  <Button title="Cancel" type="outline" />
  <Button title="Remove" type="outline" />
</Modal>
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Modal also has a `stylesheet` prop that accepts a function wherein you can modify Modal's styles. For instance

```js
import Modal from "@hig/modal";
import Typography from "@hig/typography";
import Button from "@hig/button";

function YourComponent() {
  const modalStyles = styles => ({
    ...styles,
    modal: {
      ...styles.modal,
      bodyContent: {
        ...styles.modal.bodyContent,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between"
      }
    }
  });
                                      
  return (
    <Modal open title="Your title" stylesheet={modalStyles}>
      <Typography>Modal content</Typography>
      <div style={{ alignSelf: "flex-end" }}>
        <Button title="Ok" type="outline" />
      </div>
    </Modal>
  )
}
```
npm package: @hig/multi-downshift
Description: Multi-selection support for Downshift
Author: Autodesk Inc.
Latest version: 2.2.0

# Multi-Downshift

> Multi-selection support for [Downshift][]

[Downshift]: https://github.com/paypal/downshift

## Getting started

```bash
yarn add @hig/multi-downshift
```

## Import the component

```js
import MultiDownshift from '@hig/multi-downshift';
```

## Basic usage

```jsx
<MultiDownshift
  onChange={handleChange}
  itemToString={itemToString}
>
{({
    getButtonProps,
    getRemoveButtonProps,
    isOpen,
    selectedItems,
    getItemProps,
    highlightedIndex,
  }) => (
    <MyComponent />
  )
}
</MultiDownshift>
```

## Credits

Based on [the work](https://codesandbox.io/s/W6gyJ30kn) by [Kent C. Dodds](https://kentcdodds.com/).
npm package: @hig/notifications-flyout
Description: HIG NotificationsFlyout
Author: Autodesk Inc.
Latest version: 3.4.0

# Notifications Flyout

The notifications flyout provides information and warnings that products may recover from without user involvement. It is meant to be included in the navigation bar on the top of the page.

Read more about when and how to use the Notifications Flyout [on the internal wiki](https://wiki.autodesk.com/display/HIG/Notifications+Flyout).

## Getting started

```bash
yarn add @hig/notifications-flyout @hig/theme-context @hig/theme-data
```

## Import the component

```js
import NotificationsFlyout, { Notification } from "@hig/notifications-flyout";
```

## Basic usage

```jsx
<NotificationsFlyout>
  <Notification>
    <p>Your subscription expires May 5</p>
  </Notification>
</NotificationsFlyout>
```

## Advanced usage

```jsx
import NotificationsFlyout, { anchorPoints } from "@hig/notifications-flyout";
import Timestamp from "@hig/timestamp";

<NotificationsFlyout
  open
  heading="Alerts"
  indicatorTitle="View application alerts"
  anchorPoint={anchorPoints.TOP_CENTER}
  notifications={[
    {
      id: "unique-id",
      featured: true,
      unread: true,
      timestamp: <Timestamp timestamp="2018-08-20T20:24:50.333Z" />,
      content: <p>Something happened</p>
    },
    {
      content: "Hello world"
    }
  ]}
/>
```
npm package: @hig/notifications-toast
Description: HIG Toast
Author: Autodesk Inc.
Latest version: 3.2.0

# Notifications Toast

Toasts are floating message boxes that appear up to a maximum of three at a time (similar events may be grouped). These are primarily informational they report a system occurrence that typically does not require much user action.

Read more about when and how to use the Toast component [on the internal wiki](https://wiki.autodesk.com/display/HIG/Toasts).

## Getting started

### Install the package

```bash
yarn add @hig/notifications-toast @hig/theme-context @hig/theme-data
```

### Import the component

```js
import NotificationsToast from '@hig/notifications-toast';
```

### Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

NotificationsToast also has a `stylesheet` prop that accepts a function wherein you can modify NotificationsToast's styles. The original styles, props, and current theme data will be passed to your custom stylesheet function, and it should return an object with the same structure as the original styles. For instance

```jsx
function customStylesheet(styles, props, themeData) {
  return {
    ...styles,
    toast: {
      ...styles.toast,
      position: "absolute"
    },
    toastImageContainer: {
      ...styles.toastImageContainer,
      borderColor: props.variant === "box"
        ? themeData["basics.colors.secondary.green.100"]
        : themeData["basics.colors.secondary.darkBlue.100"]
    },
    toastBody: {
      ...styles.toastBody,
      cursor: "default"
    },
    toastMessage: {
      ...styles.toastMessage,
      backgroundColor: themeData["colorScheme.reference.accent"]
    },
    toastDismiss: {
      ...styles.toastDismiss,
      padding: "0 12px"
    },
    toastListWrapper: {
      ...styles.toastListWrapper,
      display: "flex"
    },
    toastList: {
      ...styles.toastList,
      flexDirection: "row"
    }
  };
}
```
npm package: @hig/numeric-input
Description: HIG Numeric Input
Author: Autodesk Inc.
Latest version: 2.1.3

# Numeric Input

Numeric inputs allow the user to input a number of their choosing and use the up and down keys to increase/decrease the number.

Read more about when and how to use the Numeric Input component [on the website](https://hig.autodesk.com/web/components/form-elements).

## Getting started

### Install the package

```bash
yarn add @hig/numeric-input @hig/theme-context @hig/theme-data
```

### Import the component

```js
import NumericInput from '@hig/numeric-input';
```

## Basic usage

```jsx
<NumericInput />
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.
npm package: @hig/profile-flyout
Description: HIG Profile Flyout
Author: Autodesk Inc.
Latest version: 4.0.0

# Profile Flyout

The profile flyout is a component to use with the top navigation. When clicking the avatar, this flyout opens, containing the customer's name, email, and links to their account info.

## Getting started

### Install the package

```bash
yarn add @hig/profile-flyout @weave-design/theme-context @weave-design/theme-data
```

### Import the component

```js
import ProfileFlyout from '@hig/profile-flyout';
```

## Basic usage

```jsx
<ProfileFlyout
  image="https://placekitten.com/g/50/50"
  name="David Gonzalez"
  email="gonzalezd@autodesk.com"
/>
```
npm package: @hig/progress-bar
Description: HIG Progress Bar
Author: Autodesk Inc.
Latest version: 2.2.0

# Progress Bar

The progress bar is one kind of visual representation of content loading.

Read more about when and how to use the Progress Bar component [on the website](https://hig.autodesk.com/web/components/progress-indicators).

## Getting started

### Install the package

```bash
yarn add @hig/progress-bar @hig/theme-context @hig/theme-data
```

### Import the component

```js
import ProgressBar from '@hig/progress-bar';
```

## Basic usage

```jsx
<ProgressBar />
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

ProgressBar also has a `stylesheet` prop that accepts a function wherein you can modify ProgressBar's styles. For instance

```jsx
import ProgressBar from '@hig/progress-bar';

function YourComponent() {
  // ...
  const customStylesheet = (styles, themeData) => ({
    ...styles,
    wrapper: {
      ...styles.wrapper,
      backgroundColor: themeData["colorScheme.surface.level100"]
    }
  });

  return (
    <ProgressBar stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/progress-ring
Description: HIG Progress Ring
Author: Autodesk Inc.
Latest version: 3.0.0

# Progress Ring

The progress ring is one kind of visual representation of content loading.

Read more about when and how to use the Progress Ring component [on the website](https://hig.autodesk.com/web/components/progress-indicators).

## Getting started

### Install the package

```bash
yarn add @hig/progress-ring @hig/theme-context @hig/theme-data
```

### Import the component

```js
import ProgressRing from '@hig/progress-ring';
```

## Basic usage

```jsx
<ProgressRing percentComplete="33" size="m" />
```
npm package: @hig/project-account-switcher
Description: HIG Project Account Switcher
Author: Autodesk Inc.
Latest version: 4.0.0

# Project Account Switcher

The Project and Account Switcher is part of the Global Nav and allows customers to switch the context to different projects or accounts.

## Getting started

### Install the package

```bash
yarn add @hig/project-account-switcher
```

### Import the component

```js
import ProjectAccountSwitcher from '@hig/project-account-switcher';
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

ProjectAccountSwitcher also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import ProjectAccountSwitcher from '@hig/project-account-switcher';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    itemLabel: {
      ...styles.itemLabel,
    },
    imageWrapper: {
      ...styles.imageWrapper,
    },
    image: {
      ...styles.image,
    },
    panel: {
      ...styles.panel,
    },
    switcherList: {
      ...styles.switcherList,
    },
    switcherItem: {
      ...styles.switcherItem,
    },
    switcherAccountImageWrapper: {
      ...styles.switcherAccountImageWrapper,
    },
    target: {
      ...styles.target,
    },
    targetItem: {
      ...styles.targetItem,
    },
    targetCaret: {
      ...styles.targetCaret,
    }
  });

  return (
    <ProjectAccountSwitcher stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/radio-button
Description: HIG Radio Button
Author: Autodesk Inc.
Latest version: 2.2.0

# Radio Button

Radio Buttons provide a control to select one exclusively from a list of options.

Read more about when and how to use the Radio Button component [on the website](https://hig.autodesk.com/web/components/form-elements).

## Getting started

### Install the package

```bash
yarn add @hig/radio-button @hig/theme-context @hig/theme-data
```

### Import the component

```js
import RadioButton from '@hig/radio-button';
```

## Basic usage

```jsx
<RadioButton name="radio-button-group" value="Yes" />
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

RadioButton also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import RadioButton from '@hig/radio-button';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    radioButtonWrapper: {
      ...styles.radioButtonWrapper,
      color: themeData["colorScheme.errorColor"]
    }
  });

  return (
    <RadioButton stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/rich-text
Description: HIG RichText
Author: Autodesk Inc.
Latest version: 2.2.0

# Rich Text

The Rich Text component applies the HIG typography styles to whatever is passed to it, whether that be React children or regular HTML. This is particularly useful for styling markdown content.

Read more about when and how to use the Typography components [on the HIG website](https://hig.autodesk.com/web/basics/typography).

## Getting started

```
yarn add @hig/rich-text @hig/theme-context @hig/theme-data
```

## Import the component and font CSS

```
import RichText from '@hig/rich-text';
import "@hig/fonts/build/ArtifaktElement.css";
```

## Basic usage

```jsx
<RichText>
  <h1>Make Your Rich Text Richer</h1>
  <p>All you need to do is wrap it in a <code>{`<RichText />`}</code> component.</p>
</RichText>
```

## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

RichText also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import RichText from '@hig/rich-text';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    richText: {
      ...styles.richText,
      color: themeData["colorScheme.status.error"]
    }
  });

  return (
    <RichText stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/side-nav
Description: HIG SideNav components
Author: Autodesk Inc.
Latest version: 4.0.1

# SideNav <sup><sub>(Side Navigation)</sub></sup>

The Side Navigation component provides the highest level navigation tier and allows the user to switch between modules. It also houses secondary and legal/copyright links.

## Getting started

```bash
yarn add @hig/side-nav @weave-design/theme-context @weave-design/theme-data
```

### Import

```
import SideNav from '@hig/side-nav';
```
npm package: @hig/skeleton-item
Description: HIG SkeletonItem component
Author: Autodesk Inc.
Latest version: 2.2.0

# Skeleton Item

The Skeleton Item component renders a rectangular loading indicator, meant to serve as a placeholder until your actual content is ready to be rendered.

## Getting started

```
yarn add @hig/skeleton-item @hig/theme-context @hig/theme-data
```

## Import the component

```
import SkeletonItem from '@hig/skeleton-item';
```

## Basic usage

```jsx
<SkeletonItem maxWidth="400px" marginBottom="24px" />
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

SkeletonItem also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import SkeletonItem from '@hig/skeleton-item';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    skeletonItem: {
      ...styles.skeletonItem,
      color: themeData["colorScheme.status.error"]
    }
  });

  return (
    <SkeletonItem stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/slider
Description: HIG Slider
Author: Autodesk Inc.
Latest version: 2.2.0

# Slider

A slider allows selecting a single numeric value from a range using a small sliding selector.

Read more about when and how to use the Slider component [on the website](https://hig.autodesk.com/web/components/form-elements).

## Getting started

### Install the package

```bash
yarn add @hig/slider @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Slider from '@hig/slider';
```

## Basic usage

```jsx
<Slider
  min={21}
  max={99}
  step={1}
/>
```
## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Slider also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Slider from '@hig/slider';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    slider: {
      ...styles.slider,
      color: themeData["colorScheme.status.error"]
    },
    markContainer: {
      ...styles.markContainer,
      opacity: 1
    },
    markRules: {
      ...styles.markRules,
      padding: `4px`
    },
    discrete: {
      ...styles.discrete,
      position: `static`
    }
  });

  return (
    <Slider stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/spacer
Description: HIG Spacer component
Author: Autodesk Inc.
Latest version: 2.2.0

# Spacer

The Spacer component renders a square of empty space, meant to add space around and in other components.

## Getting started

```
yarn add @hig/spacer @hig/theme-context @hig/theme-data
```

## Import the component

```
import Spacer from '@hig/spacer';
```

## Basic usage

```jsx
<Spacer spacing="xl"/>
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Spacer also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Spacer from '@hig/spacer';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    spacer: {
      ...styles.spacer,
      color: themeData["colorScheme.status.error"]
    }
  });

  return (
    <Spacer stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/styles
Description: HIG Styles
Author: Autodesk Inc.
Latest version: 0.3.0
Deprecated: This component has been deprecated with the release of @hig/theme-data

# Styles

This package contains design tokens and platform specific styles for Autodesk HIG.

## Getting started

### Install the package

```bash
yarn add @hig/styles
```

## Basic usage

### Import stylesheets

```js
import "@hig/styles/build/index.css";
```

```scss
@import "~@hig/styles/build/index.css";
```

### Reference colors using SASS mixins

```scss
@import "~@hig/styles/mixins/colors.scss";

main (
  background: color(hig-blue-50);
}
```

<!-- TODO: Document API. Sass mixins, tokens, styles, etc. -->
npm package: @hig/surface
Description: HIG Surface component
Author: Autodesk Inc.
Latest version: 2.2.0

# Surface

The Surface component renders a themable container with the appropriate background color for the current theme. It is intended to wrap other HIG components, however may also be used independently. 

## Getting started

```
yarn add @hig/surface @hig/theme-context @hig/theme-data
```

## Import the component

```
import Surface from '@hig/surface';
```

## Basic usage

```jsx
<Surface
  level=200
  horizontalPadding="m"
  verticalPadding="m"
  shadow="high"
  borderRadius="m"
>Hello, world</Surface>
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.

Surface also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Surface from '@hig/surface';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    surface: {
      ...styles.surface,
      color: themeData["colorScheme.status.error"]
    }
  });

  return (
    <Surface stylesheet={customStylesheet} />
  );
}
```
npm package: @hig/tabs
Description: HIG Tabs
Author: Autodesk Inc.
Latest version: 2.2.0

# Tabs

Tabs keep related content in a single container that is shown and hidden through navigation.

Read more about when and how to use the Tabs component [on the website](https://hig.autodesk.com/web/components/form-elements).

## Getting started

### Install the package

```bash
yarn add @hig/tabs @hig/theme-context @hig/theme-data
```

### Import the component

```js
import Tabs, { Tab } from "@hig/tabs";
```

## Basic usage

```jsx
<Tabs>
  <Tab key="details" label="Details">Details content</Tab>
  <Tab key="activities" label="Activities">Activities content</Tab>
  <Tab key="inspector" label="Inspector">Inspector content</Tab>
</Tabs>
```

## Customization

The visual styles of `Tabs` can be customized by its props, available values can be found via:
```js
import {
  AVAILABLE_ALIGNMENTS,
  AVAILABLE_VARIANTS,
  AVAILABLE_ORIENTATIONS,
  alignments,
  variants,
  orientations
} from "@hig/tabs";
```

### Complex Tabs

Complex tabs are composed of an interactive container, text label, divider and optional close icon. Complex tabs only works when `varient` is set to `box` or `canvas`.

### Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.
npm package: @hig/tag
Description: Weave Tag component
Author: Autodesk Inc.
Latest version: 1.0.0

# Tag

Tags are compact elements that can be used to represent small blocks of information.

## Getting started

```
yarn add @hig/tag @hig/theme-context @hig/theme-data
```

## Import the component

```
import Tag from '@hig/tag';
```

## Basic usage

```jsx
<Tag>Tag Label</Tag>
```

## Styling

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component. 

Spacer also has a `stylesheet` prop that accepts a function wherein you can modify its styles. For instance

```jsx
import Thumbnail from '@hig/Tag';

function YourComponent() {
  // ...
  const customStylesheet = (styles, props, themeData) => ({
    ...styles,
    tag: {
      ...styles.tag,
      wrapper: {
        ...styles.tag.wrapper,
        color: themeData["colorScheme.status.error"],
      },
      labelWrapper: {
        ...styles.tag.labelWrapper,
        color: themeData["colorScheme.status.error"],
      },
      closeWrapper: {
        ...styles.tag.border,
        color: themeData["colorScheme.status.error"],
      },
    },
  });

  return (
    <Tag stylesheet={customStylesheet}>Tag Label</>
  );
}
```
npm package: @hig/text-area
Description: HIG Text Area
Author: Autodesk Inc.
Latest version: 2.2.0

# Text Area

Text areas allow the user to input a larger amount of freeform text (over 100 characters).

Read more about when and how to use the Text Area component [on the website](https://hig.autodesk.com/web/components/form-elements).

## Getting started

### Install the package

```bash
yarn add @hig/text-area @hig/theme-context @hig/theme-data
```

### Import the component

```js
import TextArea from '@hig/text-area';
```

## Basic usage

```jsx
<TextArea
  placeholder="Foo"
/>
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.
npm package: @hig/text-field
Description: HIG Text Field
Author: Autodesk Inc.
Latest version: 1.0.2
Deprecated: please use @hig/input instead

# Text Field

Text Fields allow the user to input a small amount of freeform text (100 characters or less).

Read more about when and how to use the Text Field component [on the website](https://hig.autodesk.com/web/components/form-elements).

## Getting started

### Install the package

```bash
yarn add @hig/text-field
```

### Import the component and CSS

```js
import TextField from '@hig/text-field';
import '@hig/text-field/build/index.css';
```

## Basic usage

```jsx
<TextField
  label="Tab title"
  placeholder="Foo"
  required="This field is required."
/>
```
npm package: @hig/text-link
Description: HIG Text Link
Author: Autodesk Inc.
Latest version: 2.3.0

# Text Link

Text Links directs visitors to another location on the page, within the product, or to an external site.

Read more about when and how to use the Text Link components [on the HIG website](https://hig.autodesk.com/web/basics/text-links).

## Getting started

```
yarn add @hig/text-link @hig/theme-context @hig/theme-data
```

## Import the component and CSS

```
import TextLink from '@hig/text-link';
import "@hig/fonts/build/ArtifaktElement.css";
```

## Basic usage

```jsx
<TextLink link="https://github.com/Autodesk/hig">
  This is a primary text link
</TextLink>
```
## Custom CSS

Use the `className` prop to pass in a css class name to the outermost container of the component. The class name will also pass down to most of the other styled elements within the component.