open-index/open-npm huggingface dataset:
npm package: @highlight-run/gatsby-plugin-highlight
Description: Gatsby plugin for adding Highlight error monitoring and session recording.
Author: John Pham
Latest version: 0.0.7

# Official Highlight SDK for GatsbyJS

Register the package as a plugin in `gatsby-config.js`:

```javascript
module.exports = {
  plugins: [
    {
      resolve: "@highlight-run/gatsby-plugin-highlight",
      options: {
        orgID: 'MY_ORG_ID',
        // See all the options here: https://www.highlight.io/docs/sdk/client#options
        disableNetworkRecording: false,
        disableConsoleRecording: false,
        enableStrictPrivacy: false,
   	    environment: 'production',
        version: '5.2.3',
        networkRecording: true,
      }
    },
  ]
}
```

Options will be passed directly to `H.init`. See all available options in [our docs](https://www.highlight.io/docs/sdk/client#options).

## Links

- [Official SDK Docs](https://docs.highlight.run/reference#overview)
- [Website](https://highlight.run)
npm package: @highlight-run/rrweb-player
Description: rrweb's replayer UI
Author: yanzhen@smartx.com
Latest version: 0.7.25

*Psst — looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*

*Looking for a Vue.js version? Go here --> [@preflight-hq/rrweb-player-vue](https://github.com/Preflight-HQ/rrweb-player-vue)*

---

# svelte app

This is a project template for [Svelte](https://svelte.technology) apps. It lives at https://github.com/sveltejs/template.

To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):

```bash
npm install -g degit # you only need to do this once

degit sveltejs/template svelte-app
cd svelte-app
```

*Note that you will need to have [Node.js](https://nodejs.org) installed.*


## Get started

Install the dependencies...

```bash
cd svelte-app
npm install
```

...then start [Rollup](https://rollupjs.org):

```bash
npm run dev
```

Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.


## Deploying to the web

### With [now](https://zeit.co/now)

Install `now` if you haven't already:

```bash
npm install -g now
```

Then, from within your project folder:

```bash
now
```

As an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.

### With [surge](https://surge.sh/)

Install `surge` if you haven't already:

```bash
npm install -g surge
```

Then, from within your project folder:

```bash
npm run build
surge public
```
npm package: @highlight-ui/card
Description: This is the card component used in Personio
Author: Personio GmbH & Co. KG
Latest version: 4.2.8

[![npm](https://img.shields.io/npm/v/@highlight-ui/card)](https://www.npmjs.com/package/@highlight-ui/card)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/294d02-card/b/26fe12)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/content-structure-card--with-footer-card)

# @highlight-ui/card

## Installation

Using npm:

```bash
npm install @highlight-ui/card
```

Using yarn:

```bash
yarn add @highlight-ui/card
```

Using pnpm:

```bash
pnpm install @highlight-ui/card
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/card');
```

Once the package is installed, you can import the library:

```ts
import { Card, CardContent, CardFooter } from '@highlight-ui/card';
```

## Usage

```tsx
import React, { useState } from 'react';
import { Card, CardContent, CardFooter } from '@highlight-ui/card';
import { Typography } from '@highlight-ui/typography';

export default function CardExample() {
  return (
    <Card>
      <CardContent>
        <Typography component="h4" token="heading-medium">
          Active employees
        </Typography>
        <Typography component="span" token="caption">
          Last viewed on 06.07.2023
        </Typography>
        <Typography token="body-base">
          All the active employees from the marketing department with …
        </Typography>
      </CardContent>
      <CardFooter>
        <Typography component="span" token="caption">
          Created by <strong>Personio</strong>
        </Typography>
      </CardFooter>
    </Card>
  );
}
```

## Props 📜

### Card

| Prop            | Type      | Required | Default | Description                                                          |
| :-------------- | :-------- | :------- | :------ | :------------------------------------------------------------------- |
| `animate`       | `boolean` | No       | `false` | Specifies whether the card will have animation or not.               |
| `cardClassName` | `string`  | No       |         | Allows providing a custom class name, applied to the content element |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/294d02-card/b/26fe12) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/circular-progress
Description: [![npm](https://img.shields.io/npm/v/@highlight-ui/circular-progress)](https://www.npmjs.com/package/@highlight-ui/circular-progress) [![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personi
Author: Personio GmbH & Co. KG
Latest version: 2.3.7

[![npm](https://img.shields.io/npm/v/@highlight-ui/circular-progress)](https://www.npmjs.com/package/@highlight-ui/circular-progress)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/52dd2c-circular-progress/b/55788f)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-circularprogress--default)

# @highlight-ui/circular-progress

## Installation

Using npm:

```bash
npm install @highlight-ui/circular-progress
```

Using yarn:

```bash
yarn add @highlight-ui/circular-progress
```

Using pnpm:

```bash
pnpm install @highlight-ui/circular-progress
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/circular-progress');
```

Once the package is installed, you can import the library:

```ts
import { CircularProgress } from '@highlight-ui/circular-progress';
```

## Usage

```tsx
import React, { useState } from 'react';
import { CircularProgress } from '@highlight-ui/circular-progress';

export default function CircularProgressExample() {
  return <CircularProgress percentage={50} />;
}
```

## Props 📜

| Prop         | Type         | Required | Default | Description                                       |
| :----------- | :----------- | :------- | :------ | :------------------------------------------------ |
| `percentage` | `number`     | Yes      |         | Percentage of the progress                        |
| `color`      | `ColorToken` | No       |         | Custom color token for the progress circular line |

### Custom types 🔠

| Type         | Values                                                                                  | Description               |
| :----------- | :-------------------------------------------------------------------------------------- | :------------------------ |
| `ColorToken` | ["Colors"](https://www.personio.design/40d648a47/p/489790-colours/t/75ae89) token names | Used for the `color` prop |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/52dd2c-circular-progress/b/55788f) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/color-picker
Description: This is the color picker component used in Personio
Author: Personio GmbH & Co. KG
Latest version: 4.3.9

[![npm](https://img.shields.io/npm/v/@highlight-ui/color-picker)](https://www.npmjs.com/package/@highlight-ui/color-picker)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/52dd2c-circular-progress/b/55788f)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/forms-and-input-colorpicker--default-story)

# @highlight-ui/color-picker

## Installation

Using npm:

```bash
npm install @highlight-ui/color-picker
```

Using yarn:

```bash
yarn add @highlight-ui/color-picker
```

Using pnpm:

```bash
pnpm install @highlight-ui/color-picker
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/color-picker');
```

Once the package is installed, you can import the library:

```ts
import { ColorPicker } from '@highlight-ui/color-picker';
```

## Usage

```tsx
import React, { useState } from 'react';
import { ColorPicker } from '@highlight-ui/color-picker';

export default function ColorPickerExample() {
  return (
    <ColorPicker
      title="Pick a color"
      closeOnSelect
      palette="main"
      onChange={callback(action('Selected a color'), '(_: string) => void')}
    />
  );
}
```

## Props 📜

| Prop            | Type                  | Required | Default | Description                                                       |
| :-------------- | :-------------------- | :------- | :------ | :---------------------------------------------------------------- |
| `title`         | `string`              | Yes      |         | Sets the title text on the color picker                           |
| `palette`       | `'main', 'pastel`     | No       | `main`  | Sets the selectable color palette                                 |
| `initialColor`  | `string`              | No       |         | Sets the "selected" color on the button                           |
| `closeOnSelect` | `boolean`             | No       | `false` | If true, closes picker when a color is selected                   |
| `disabled`      | `boolean`             | No       | `false` | Sets a disabled state on the button                               |
| `onChange`      | `(_: string) => void` | No       |         | Callback fired once a color is selected, parameter is a hex value |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/14c9cf-color-picker/b/26fe12) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/configs-base-jest
Description: Jest base config to be shared with all other packages
Author: Personio GmbH & Co. KG
Latest version: 3.2.0

# @highlight-ui/configs-base-jest

## Installation

Using `yarn`:

```
yarn add @highlight-ui/configs-base-jest -D
```

Using `npm`:

```
npm install --save-dev @highlight-ui/configs-base-jest
```

## Usage

```
const base = require('@highlight-ui/configs-base-jest');

module.exports = {
  rootDir: __dirname,
  ...base,
};

```
npm package: @highlight-ui/configs-base-tsconfig
Description: Typescript base config to be shared with all other packages
Author: Personio GmbH & Co. KG
Latest version: 3.3.0

# @highlight-ui/configs-base-tsconfig

## Installation

Using `yarn`:

```
yarn add @highlight-ui/configs-base-tsconfig -D
```

Using `npm`:

```
npm install --save-dev @highlight-ui/configs-base-tsconfig
```

## Usage

```
// tsconfig.json
{
  "extends": "@highlight-ui/configs-base-tsconfig",
  "exclude": ["./node_modules", "./dist", "./tests"],
  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
}
```
npm package: @highlight-ui/configs-scripts
Description: Scripts for Highlight UI
Author: Personio GmbH & Co. KG
Latest version: 3.2.6

# @highlight-ui/configs-scripts

## Installation

Using `yarn`:

```
yarn add @highlight-ui/configs-scripts -D
```

Using `npm`:

```
npm install --save-dev @highlight-ui/configs-scripts
```

## Usage

This package is a collection of common scripts that can be used to consolidate
the common dev dependencies and configurations.

### Build tool

```
highlight-build [-t <path/to/tsconfig.json>]
```

This tool is a pre-configured rollup bundler.
npm package: @highlight-ui/drag-and-drop
Description: Drag-and-Drop components for Highlight UI
Author: Personio GmbH & Co. KG
Latest version: 3.1.7

# `@highlight-ui/drag-and-drop`

## Installation

```
yarn add @highlight-ui/drag-and-drop react-dnd@11.1.3 react-dnd-html5-backend@11.1.3
```

## Usage

In your TypeScript file:

```ts
import {
  DragAndDropList,
  DragAndDropListProps,
  DragIcon,
  DragIconProps,
  DraggableItem,
  DraggableItemProps,
} from '@highlight-ui/drag-and-drop';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/drag-and-drop');
```
npm package: @highlight-ui/i18n
Description: this is i18n package used among Highlight UI components
Author: Personio GmbH & Co. KG
Latest version: 2.6.0

# `@highlight-ui/i18n`

## Installation

```
yarn add @highlight-ui/i18n
```

## Usage

Deprecated, don't use in monorepo code.

```tsx
import { useLocale } from '@highlight-ui/i18n';

function MyComponent() {
  const { locale } = useLocale();
  return <span>Locale is {locale}</span>;
}
```
npm package: @highlight-ui/panel
Description: Panel component for the Highlight UI library
Author: Personio GmbH & Co. KG
Latest version: 3.2.7

# `@highlight-ui/panel`

## Installation

```
yarn add @highlight-ui/panel
```

## Usage

In your TypeScript file:

```ts
import { Panel, PanelProps } from '@highlight-ui/panel';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/panel');
```
npm package: @highlight-ui/progress-tracker
Description: A progress tracker for use in wizards
Author: Personio GmbH & Co. KG
Latest version: 3.3.1

[![npm](https://img.shields.io/npm/v/@highlight-ui/progress-tracker)](https://www.npmjs.com/package/@highlight-ui/progress-tracker)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/744e75-progress-tracker/b/389f44)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-progresstracker--default)

# @highlight-ui/progress-tracker

Using npm:

```bash
npm install @highlight-ui/progress-tracker
```

Using yarn:

```bash
yarn add @highlight-ui/progress-tracker
```

Using pnpm:

```bash
pnpm install @highlight-ui/progress-tracker
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/progress-tracker');
```

Once the package is installed, you can import the library:

```ts
import { ProgressTracker } from '@highlight-ui/progress-tracker';
```

## Usage

```tsx
import React from 'react';
import { ProgressTracker } from '@highlight-ui/progress-tracker';

export default function ProgressTrackerExample() {
  return (
    <ProgressTracker
      stepNames={[
        'First step with a really, really long step name so you can trigger line wrapping ',
        'Second step with not so long a name',
        'Third step',
        'Fourth',
      ]}
      currentStepIndex={1}
    />
  );
}
```

## Props 📜

| Prop               | Type       | Required | Default | Description                                                                              |
| :----------------- | :--------- | :------- | :------ | :--------------------------------------------------------------------------------------- |
| `stepNames`        | `string[]` | Yes      |         | Specify the unique step names to display                                                 |
| `currentStepIndex` | `number`   | Yes      |         | Specify the active step index. This updates the style for active and previous step names |
| `className`        | `string`   | No       |         | Allows providing a custom classname                                                      |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/744e75-progress-tracker/b/389f44) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/sandbox-action-bar
Description: ActionBar component for the Highlight UI sandbox library
Author: Personio GmbH & Co. KG
Latest version: 2.0.24
Deprecated: @highlight-ui/sandbox-action-bar is now deprecated, please use @highlight-ui/action-bar version>=5.1.0. The migration guide can be found here: https://personio.atlassian.net/l/cp/145pHzLU

# `@highlight-ui/sandbox-action-bar`

This sandbox component is based on `@highlight-ui/action-bar@4.2.10` package.

## Installation

```
yarn add @highlight-ui/sandbox-action-bar
```

## Usage

In your TypeScript file:

```ts
import { ActionBar, ActionBarProps } from '@highlight-ui/sandbox-action-bar';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-action-bar');
```

## Documentation

Please visit [personio.design]()
npm package: @highlight-ui/sandbox-collapsible
Description: Collapsible component for UI library
Author: Personio GmbH & Co. KG
Latest version: 1.1.33
Deprecated: @highlight-ui/sandbox-collapsible is now deprecated, please use @highlight-ui/accordion

# `@highlight-ui/sandbox-collapsible`

## Installation

```
yarn add @highlight-ui/sandbox-collapsible
```

## Usage

In your TypeScript file:

```ts
import {
  Collapsible,
  CollapsibleProps,
} from '@highlight-ui/sandbox-collapsible';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-collapsible');
```

## Documentation

Please visit [personio.design]()
npm package: @highlight-ui/sandbox-custom-menu
Description: CustomMenu component for sandbox
Author: Personio GmbH & Co. KG
Latest version: 1.3.14

# `@highlight-ui/sandbox-custom-menu`

## Installation

```
yarn add @highlight-ui/sandbox-custom-menu
```

## Usage

In your TypeScript file:

```ts
import { CustomMenu, CustomMenuProps } from '@highlight-ui/sandbox-custom-menu';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-custom-menu');
```

## Documentation

Please visit [personio.design]()
npm package: @highlight-ui/sandbox-date-time-picker
Description: Sandbox Date and Time Picker components for Highlight UI library with month only selection
Author: Personio GmbH & Co. KG
Latest version: 8.13.0

# `@highlight-ui/sandbox-date-picker`

## Installation

```
yarn add @highlight-ui/sandbox-date-picker
```

## Usage

In your TypeScript file:

```ts
import { DatePicker, DatePickerProps } from '@highlight-ui/sandbox-date-picker';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-date-picker');
```

## Documentation

Please visit [personio.design]()
npm package: @highlight-ui/sandbox-loading-state
Description: Sandbox loading state component for Highlight UI library
Author: Personio GmbH & Co. KG
Latest version: 1.1.29
Deprecated: @highlight-ui/sandbox-loading-state is now deprecated, please use @highlight-ui/sandbox-spinner and @highlight-ui/skeleton

# `@highlight-ui/sandbox-loading-state`

## Installation

```
yarn add @highlight-ui/sandbox-loading-state
```

## Usage

In your TypeScript file:

```ts
import {
  LoadingState,
  LoadingStateProps,
} from '@highlight-ui/sandbox-loading-state';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-loading-state');
```

### Skeleton

In your TypeScript file:

```tsx
import { LoadingState, LoadingStateProps } from '@highlight-ui/loading-state';
import { Skeleton } from '@highlight-ui/skeleton';

if (status === 'idle') {
  return <LoadingState state="idle" />;
}

if (status === 'loading') {
  return (
    <LoadingState
      state="loading"
      indicator={<Skeleton repeat={3} />}
      message="Loading some arbitrary data. Please wait."
    />
  );
}

return (
  <LoadingState
    state="completed"
    message="Arbitrary data has been loaded. This data is ready to use."
  />
);
```

### Spinner

In your TypeScript file:

```tsx
import { LoadingState, LoadingStateProps } from '@highlight-ui/loading-state';
import { Spinner } from '@highlight-ui/spinner';

if (status === 'idle') {
  return <LoadingState state="idle" />;
}

if (status === 'loading') {
  return (
    <LoadingState
      state="loading"
      indicator={<Spinner />}
      message="Loading some arbitrary data. Please wait."
    />
  );
}

return (
  <LoadingState
    state="completed"
    message="Arbitrary data has been loaded. This data is ready to use."
  />
);
```

## Documentation

Please visit
[personio.design](https://www.personio.design/40d648a47/p/2320f1--spinner)
npm package: @highlight-ui/sandbox-menu
Description: This is Menu component in Highlight UI
Author: Personio GmbH & Co. KG
Latest version: 0.1.32
Deprecated: @highlight-ui/sandbox-menu is now deprecated, please use @highlight-ui/menu. See https://personio.atlassian.net/l/cp/czYUe72k for migration guidance.

# `@highlight-ui/sandbox-menu`

This sandbox component is based on `@highlight-ui/menu@4.2.17` package.

## Installation

```
yarn add @highlight-ui/sandbox-menu
```

## Usage

In your TypeScript file:

```ts
import { Menu, MenuProps } from '@highlight-ui/sandbox-menu';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-menu');
```

## Documentation

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/417ff7-menu)
npm package: @highlight-ui/sandbox-multiselect-tag
Description: MultiSelect tag component for the Highlight UI sandbox library
Author: Personio GmbH & Co. KG
Latest version: 2.1.17

# `@highlight-ui/sandbox-multiselect-tag`

This sandbox component is based on `@highlight-ui/select@9.1.10` and `@highlight-ui/tag-picker@4.2.31` packages.

## Installation

```
yarn add @highlight-ui/sandbox-multiselect-tag
```

## Usage

In your TypeScript file:

```ts
import {
  MultiSelectTag,
  MultiSelectTagProps,
} from '@highlight-ui/sandbox-multiselect-tag';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-multiselect-tag');
```

## Documentation

Please visit [personio.design]()
npm package: @highlight-ui/sandbox-progress-tracker
Description: this is a variant of the original progress tracker, which includes a spinner for current step
Author: Personio GmbH & Co. KG
Latest version: 1.4.14

# `@highlight-ui/sandbox-progress-tracker`

This sandbox component is based on @highlight-ui/progress-tracker@3.1.25 package.

## Installation

```
yarn add @highlight-ui/sandbox-progress-tracker
```

## Usage

In your TypeScript file:

```ts
import {
  ProgressTracker,
  ProgressTrackerProps,
} from '@highlight-ui/sandbox-progress-tracker';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-progress-tracker');
```

## Documentation

Please visit [personio.design]()
npm package: @highlight-ui/sandbox-search-input
Description: Custom Search Input Component with clear button
Author: Personio GmbH & Co. KG
Latest version: 0.3.9

[![npm](https://img.shields.io/npm/v/@highlight-ui/sandbox-search-input)](https://www.npmjs.com/package/@highlight-ui/sandbox-search-input)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/)

# @highlight-ui/sandbox-search-input

This sandbox component is based on `@highlight-ui/input@5.4.21`

## Installation

Using npm:

```bash
npm install @highlight-ui/sandbox-search-input
```

Using yarn:

```bash
yarn add @highlight-ui/sandbox-search-input
```

Using pnpm:

```bash
pnpm install @highlight-ui/sandbox-search-input
```

Once the package is installed, you can import the library:

```tsx
import { SearchInput } from '@highlight-ui/sandbox-search-input';
```

## Usage

In your TypeScript file:

```ts
import {
  SearchInput,
  SearchInputProps,
} from '@highlight-ui/sandbox-search-input';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-search-input');
```

## Contributing 🖌️

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/sandbox-searchable-sub-label-select
Description: Select Component where search also filters based on sublabel value
Author: Personio GmbH & Co. KG
Latest version: 0.2.21
Deprecated: @highlight-ui/sandbox-searchable-sub-label-select is now deprecated, please use @highlight-ui/select. See https://personio.atlassian.net/l/cp/18SyMBuq for migration guidance.

# `@highlight-ui/sandbox-searchable-sub-label-select`

This sandbox component is based on `@highlight-ui/select@9.2.4`

## Installation

```
yarn add @highlight-ui/sandbox-searchable-sub-label-select
```

## Usage

In your TypeScript file:

```ts
import {
  SearchableSubLabelSelect,
  SearchableSubLabelSelectProps,
} from '@highlight-ui/sandbox-searchable-sub-label-select';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-searchable-sub-label-select');
```

## Documentation

Please visit [personio.design]()
npm package: @highlight-ui/sandbox-select-low-domy
Description: Select component for the Highlight UI sandbox library with low domy options
Author: Personio GmbH & Co. KG
Latest version: 10.5.8

[![npm](https://img.shields.io/npm/v/@highlight-ui/sandbox-select-low-domy)](https://www.npmjs.com/package/@highlight-ui/sandbox-select-low-domy)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/)

# @highlight-ui/sandbox-select-low-domy

Trying to use `Select` to render a large amount of options (employee list on Personio) takes too long to render.

While originally intended to use [react-window](https://github.com/bvaughn/react-window) to virtualise the rendering of the options, I found myself struggling to [re-shape the component so that the library would fit](https://www.youtube.com/watch?v=cUbIkNUFs-4).

Instead I opted to reduce the DOM count by:

1. Not using the built-in Checkbox and Avatar components.
2. Preventing the rendering of empty b elements.
3. Reducing the amount of text wrappers.

## Features

This version should be almost 100% backwards compatiblie with the existing `Select` component. One thing to note when using the `Avatar` type option is that, if label is missing, it won’t render a placeholder image.

## Installation

Using npm:

```bash
npm install @highlight-ui/sandbox-select-low-domy
```

Using yarn:

```bash
yarn add @highlight-ui/sandbox-select-low-domy
```

Using pnpm:

```bash
pnpm add @highlight-ui/sandbox-select-low-domy
```

Once the package is installed, you can import the library:

```tsx
import { Select } from '@highlight-ui/sandbox-select-low-domy';
```

## Getting started

See [`Select`](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/tree/master/packages/ui/select).

## Place in design system 💻

`select-low-domy` is a Low-DOM-count version of `select`.

## Contributing 🖌️

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/sandbox-spinner
Description: Sandbox spinner component for Highlight UI library
Author: Personio GmbH & Co. KG
Latest version: 1.2.7

# `@highlight-ui/sandbox-spinner`

## Installation

```
yarn add @highlight-ui/sandbox-spinner
```

## Usage

In your TypeScript file:

```ts
import { Spinner, SpinnerProps } from '@highlight-ui/sandbox-spinner';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-spinner');
```

## Documentation

Please visit [personio.design](https://www.personio.design/40d648a47/p/2320f1)
npm package: @highlight-ui/sandbox-tag
Description: Sandbox Tag component for Highlight UI library with size variants and text variants
Author: Personio GmbH & Co. KG
Latest version: 1.4.14

# `@highlight-ui/sandbox-tag`

This sandbox component is based on `@highlight-ui/tag@5.0.62` package.

## Installation

```
yarn add @highlight-ui/sandbox-tag
```

## Usage

In your TypeScript file:

```ts
import { Tag, TagProps } from '@highlight-ui/sandbox-tag';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-tag');
```

## Documentation

Please visit
[personio.design](https://www.personio.design/40d648a47/v/0/p/92acc5--tag)
npm package: @highlight-ui/sandbox-toggle
Description: Toggle UI component for the Personio UI Library
Author: Personio GmbH & Co. KG
Latest version: 1.2.20
Deprecated: @highlight-ui/sandbox-toggle is now deprecated, please use @highlight-ui/toggle.

# `@highlight-ui/sandbox-toggle`

## Installation

```
yarn add @highlight-ui/sandbox-toggle
```

## Usage

In your TypeScript file:

```ts
import { Toggle, ToggleProps } from '@highlight-ui/sandbox-toggle';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/sandbox-toggle');
```

## Documentation

Please visit [personio.design]()
npm package: @highlight-ui/section-card
Description: Section Card design pattern implementation
Author: Personio GmbH & Co. KG
Latest version: 4.2.8

# `@highlight-ui/section-card`

## Installation

```
yarn add @highlight-ui/section-card
```

## Usage

In TypeScript/JavaScript:

```ts
import { SectionCard, SectionCardProps } from '@highlight-ui/section-card';
```

In (S)CSS:

```scss
@import url('@highlight-ui/section-card');
```

## Documentation

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/599e8a-section-card)
npm package: @highlight-ui/skeleton
Description: Skeleton component for Highlight UI
Author: Personio GmbH & Co. KG
Latest version: 2.2.7

[![npm](https://img.shields.io/npm/v/@highlight-ui/skeleton)](https://www.npmjs.com/package/@highlight-ui/skeleton)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/4848de-skeleton/b/0405bd)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-skeleton--default)

# @highlight-ui/skeleton

Using npm:

```bash
npm install @highlight-ui/skeleton
```

Using yarn:

```bash
yarn add @highlight-ui/skeleton
```

Using pnpm:

```bash
pnpm install @highlight-ui/skeleton
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/skeleton');
```

Once the package is installed, you can import the library:

```ts
import { Skeleton } from '@highlight-ui/skeleton';
```

## Usage

```tsx
import React from 'react';
import { Skeleton } from '@highlight-ui/skeleton';

export default function SkeletonExample() {
  return <Skeleton />;
}
```

## Props 📜

| Prop        | Type     | Required | Default | Description                                                                         |
| :---------- | :------- | :------- | :------ | :---------------------------------------------------------------------------------- |
| `color`     | `string` | No       |         | Sets the background color of all skeleton blocks, accepts any valid CSS color value |
| `height`    | `number` | No       |         | Sets the height in pixels of all skeleton blocks                                    |
| `repeat`    | `number` | No       |         | Determines the number of skeleton blocks to render                                  |
| `className` | `string` | No       |         | Allows providing a custom class name                                                |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/4848de-skeleton/b/0405bd) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/tab
Description: This is Tab component in Highlight UI
Author: Personio GmbH & Co. KG
Latest version: 2.2.8

[![npm](https://img.shields.io/npm/v/@highlight-ui/tab)](https://www.npmjs.com/package/@highlight-ui/tab)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/navigation-tab--default)

# @highlight-ui/tab

Using npm:

```bash
npm install @highlight-ui/tab
```

Using yarn:

```bash
yarn add @highlight-ui/tab
```

Using pnpm:

```bash
pnpm install @highlight-ui/tab
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/tab');
```

Once the package is installed, you can import the library:

```ts
import { Tab, TabItem } from '@highlight-ui/tab';
```

## Usage

```tsx
import React from 'react';
import { Tab, TabItem } from '@highlight-ui/tab';

export default function TabExample() {
  return (
    <Tab value={value} onChange={handleChange}>
      <TabItem name="lorem">Lorem</TabItem>
      <TabItem name="ipsum">Ipsum</TabItem>
    </Tab>
  );
}
```

## Props 📜

### Tab

| Prop        | Type                        | Required | Default | Description                          |
| :---------- | :-------------------------- | :------- | :------ | :----------------------------------- |
| `placement` | `'left', 'center', 'right'` | No       |         | Horizontal alignment of the Tabs     |
| `disabled`  | `boolean`                   | No       | `false` | Sets the disabled state on the Tab   |
| `onChange`  | `() => void`                | No       |         | The onChange event handler           |
| `value`     | `string`                    | No       |         | The value of the Tab                 |
| `className` | `string`                    | No       |         | Allows providing a custom class name |

### TabItem

| Prop        | Type                     | Required | Default | Description                            |
| :---------- | :----------------------- | :------- | :------ | :------------------------------------- |
| `name`      | `string`                 | Yes      |         | The name of the TabItem                |
| `focus`     | `boolean`                | No       | `false` | Sets the focused state on the TabItem  |
| `disabled`  | `boolean`                | No       | `false` | Sets the disabled state on the TabItem |
| `selected`  | `boolean`                | No       | `false` | Sets the selected TabItem              |
| `onChange`  | `(name: string) => void` | No       |         | The onChange event handler             |
| `className` | `string`                 | No       |         | Allows providing a custom class name   |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/tag
Description: Tag component for Highlight UI library
Author: Personio GmbH & Co. KG
Latest version: 5.2.14

[![npm](https://img.shields.io/npm/v/@highlight-ui/tag)](https://www.npmjs.com/package/@highlight-ui/tag)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/92acc5-tag/b/61d4aa)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/elements-tag--basic-tag)

# @highlight-ui/tag

Using npm:

```bash
npm install @highlight-ui/tag
```

Using yarn:

```bash
yarn add @highlight-ui/tag
```

Using pnpm:

```bash
pnpm install @highlight-ui/tag
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/tag');
```

Once the package is installed, you can import the library:

```ts
import { Tag } from '@highlight-ui/tag';
```

## Usage

```tsx
import React from 'react';
import { Tag } from '@highlight-ui/tag';

export default function TagExample() {
  return <Tag text="Tag example" />;
}
```

## Props 📜

| Prop              | Type                        | Required | Default   | Description                                           |
| :---------------- | :-------------------------- | :------- | :-------- | :---------------------------------------------------- |
| `text`            | `string`                    | Yes      |           | The text on the tag                                   |
| `backgroundColor` | `string`                    | No       | `#DBE5EC` | The Tag's background color as hex                     |
| `color`           | `string`                    | No       |           | The Tag's text color as hex                           |
| `interaction`     | `'none', 'click', 'remove'` | No       | `none`    | Determines whether the tag is interactive.            |
| `maxWidth`        | `number`                    | No       | `200`     | The max width of the Tag                              |
| `onClick`         | `React.MouseEventHandler`   | No       |           | The callback to execute when interacting with the tag |
| `onRemove`        | `React.MouseEventHandler`   | No       |           | The callback to execute when removing the tag         |
| `className`       | `string`                    | No       |           | Allows providing a custom class name                  |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/92acc5-tag/b/61d4aa) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/tag-picker
Description: TagPicker component for Highlight UI library
Author: Personio GmbH & Co. KG
Latest version: 4.3.20

[![npm](https://img.shields.io/npm/v/@highlight-ui/tag-picker)](https://www.npmjs.com/package/@highlight-ui/tag-picker)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/66d15a-tag-picker/b/900e15)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/forms-and-input-tagpicker--tag-picker-story-default)

# @highlight-ui/tag-picker

Using npm:

```bash
npm install @highlight-ui/tag-picker
```

Using yarn:

```bash
yarn add @highlight-ui/tag-picker
```

Using pnpm:

```bash
pnpm install @highlight-ui/tag-picker
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/tag-picker');
```

Once the package is installed, you can import the library:

```ts
import { TagPicker, TagInput } from '@highlight-ui/tag-picker';
```

## Usage

```tsx
import React from 'react';
import { TagPicker, TagInput } from '@highlight-ui/tag-picker';

export default function TagPickerExample() {
  return (
    <TagPicker
      options={[
        {
          value: '1',
          label: 'First tag',
        },
        {
          value: '2',
          label: 'Second tag',
        },
        {
          value: '3',
          label: 'Third tag',
        },
      ]}
      tags={[
        {
          text: 'First tag',
          interaction: 'remove',
        },
      ]}
      onTagRemove={handleRemove}
      onTagAdd={handleAdd}
      onInputChange={handleInputChange}
    />
  );
}
```

## Props 📜

[TagPickerProps](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/tag-picker/src/TagPicker.tsx?ref_type=heads#L6) and [TagInputProps](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/tag-picker/src/TagInput.tsx#L15) are heavily abstracted by the [Select](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/select/src/BaseSelect/types.ts) props. Please refer to those documentations for a more detailed view.

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/66d15a-tag-picker/b/900e15) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/theme
Description: The basic UI Theme for Personio Design System
Author: Personio GmbH & Co. KG
Latest version: 9.5.0

# `@highlight-ui/theme`

## Installation

```
yarn add @highlight-ui/theme
```

## Usage

```
@use '~@highlight-ui/theme/variables';
@use '~@highlight-ui/theme/placeholders';
```
npm package: @highlight-ui/tile
Description: [![npm](https://img.shields.io/npm/v/@highlight-ui/tile)](https://www.npmjs.com/package/@highlight-ui/tile) [![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/3
Author: Personio GmbH & Co. KG
Latest version: 4.2.8

[![npm](https://img.shields.io/npm/v/@highlight-ui/tile)](https://www.npmjs.com/package/@highlight-ui/tile)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/364981-tile/b/054f5f)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/elements-tile--basic-tile)

# @highlight-ui/tile

Using npm:

```bash
npm install @highlight-ui/tile
```

Using yarn:

```bash
yarn add @highlight-ui/tile
```

Using pnpm:

```bash
pnpm install @highlight-ui/tile
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/tile');
```

Once the package is installed, you can import the library:

```ts
import { Tile, LinkTile } from '@highlight-ui/tile';
```

## Usage

```tsx
import React from 'react';
import { Tile } from '@highlight-ui/tile';

export default function TileExample() {
  return (
    <Tile>
      <Typography component="h2" token="heading-2xl" color="text-subdued">
        35
      </Typography>
      <Typography component="h6" token="heading-small" color="text-subdued">
        employees
      </Typography>
    </Tile>
  );
}
```

## Props 📜

### Tile

| Prop        | Type              | Required | Default | Description                          |
| :---------- | :---------------- | :------- | :------ | :----------------------------------- |
| `children`  | `React.ReactNode` | Yes      |         | The contents inside the Tile         |
| `className` | `string`          | No       |         | Allows providing a custom class name |

### LinkTile

| Prop        | Type              | Required | Default | Description                                    |
| :---------- | :---------------- | :------- | :------ | :--------------------------------------------- |
| `children`  | `React.ReactNode` | Yes      |         | The contents inside the Tile                   |
| `href`      | `string`          | Yes      |         | Specifies the URL of the page the link goes to |
| `target`    | `React.ReactNode` | No       |         | Specifies where to open the link               |
| `className` | `string`          | No       |         | Allows providing a custom class name           |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/364981-tile/b/054f5f) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/toggle-input
Description: The base component handling Checkbox and RadioButton logic.
Author: Personio GmbH & Co. KG
Latest version: 0.1.14

[![npm](https://img.shields.io/npm/v/@highlight-ui/toggle-input)](https://www.npmjs.com/package/@highlight-ui/toggle-input)

# @highlight-ui/toggle-input

The ToggleInput is used to control the shared logic between the `Checkbox` and `RadioButton` components.

For this reason, we refer you to the documentation of these two components and we do not recommend the custom use of this component.

- [Checkbox](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/checkbox/README.md)
- [Radio Button](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/radio-button/README.md)

## Installation

Using npm:

```bash
npm install @highlight-ui/toggle-input
```

Using yarn:

```bash
yarn add @highlight-ui/toggle-input
```

Using pnpm:

```bash
pnpm install @highlight-ui/toggle-input
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/toggle-input');
```

Once the package is installed, you can import the library:

```tsx
import { ToggleInput } from '@highlight-ui/toggle-input';
```

## Contributing 🖌️

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).
npm package: @highlight-ui/utils-portal-manager
Description: A collection of portal managers used by UI-components in Personio
Author: Personio GmbH & Co. KG
Latest version: 3.2.0

# `@highlight-ui/utils-portal-manager`

## Installation

```
yarn add @highlight-ui/utils-portal-manager
```

---

## Usage

### PortalManager.containerInstance()

This function creates, or if it exists, returns the global portals container DOM
element.

```typescript
import { PortalManager } from '@highlight-ui/utils-portal-manager';

// Creates a new DOM element
const newPortalsContainer = PortalManager.containerInstance();

// Returns the existing DOM element
const existingPortalsContainer = PortalManager.containerInstance();

console.log(newPortalsContainer == existingPortalsContainer); // => true
```

### GroupedPortal

React component that appends a portal to the global portals container.

```jsx
import { GroupedPortal } from '@highlight-ui/utils-portal-manager';

const MyComponent = () => {
  return (
    <GroupedPortal>
      This content is rendered in the global portals container.
    </GroupedPortal>
  );
};
```
npm package: @highlight-ui/utils-sticky-wrapper
Description: A utility component
Author: Personio GmbH & Co. KG
Latest version: 2.1.5

# `@highlight-ui/utils-sticky-wrapper`

## Installation

```
yarn add @highlight-ui/utils-sticky-wrapper
```

## Usage

In your TypeScript file:

```ts
import { StickyWrapper } from '@highlight-ui/utils-sticky-wrapper';
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/utils-sticky-wrapper');
```

## Documentation

- [Confluence](https://personio.atlassian.net/l/c/RnV9j2ss)