open-index/open-npm huggingface dataset:
npm package: @midas-ds/link
Description: ```bash npm install @midas-ds/link ```
Latest version: 1.1.1
Deprecated: Package no longer supported. Use @midas-ds/components instead.

# Link

```bash
npm install @midas-ds/link
```

```tsx
import { Link } from '@midas-ds/link'
;<Link href="#">Hej</Link>
```
npm package: @midas-ds/link-button
Description: ```bash npm install @midas-ds/link-button ```
Latest version: 1.3.1
Deprecated: Package no longer supported. Use @midas-ds/components instead.

# LinkButton

```bash
npm install @midas-ds/link-button
```

```tsx
import { LinkButton } from '@midas-ds/link-button
;<LinkButton href="#">Hej</LinkButton>
```
npm package: @midas-ds/modal
Description: ```bash npm install @midas-ds/modal ```
Latest version: 1.0.2
Deprecated: Package no longer supported. Use @midas-ds/components instead.

# Modal

```bash
npm install @midas-ds/modal
```

```tsx
import { Modal, DialogTrigger, ModalHeader, ModalBody } from '@midas-ds/modal'
;<DialogTrigger>
  <Button>Radera frukter</Button>
  <Modal>
    {({ close }) => (
      <>
        <ModalHeader />
        <ModalBody
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '2rem'
          }}
        >
          <Flex>
            <FlexItem>
              <Heading
                slot='title'
                style={{ margin: 0 }}
              >
                Vill du radera alla frukter?
              </Heading>
              <p>Är du säker? De kan inte återskapas.</p>
            </FlexItem>
          </Flex>
          <Flex>
            <FlexItem col='auto'>
              <Button
                onPress={close}
                variant='danger'
              >
                Radera
              </Button>
            </FlexItem>
            <FlexItem>
              <Button
                onPress={close}
                variant='secondary'
              >
                Avbryt
              </Button>
            </FlexItem>
          </Flex>
        </ModalBody>
      </>
    )}
  </Modal>
</DialogTrigger>
```
npm package: @midas-ds/multi-select
Description: ```bash npm i @midas-ds/multi-select ```
Latest version: 0.1.10
Deprecated: Package no longer supported. Use @midas-ds/components instead.

# select

```bash
npm i @midas-ds/multi-select
```

```tsx
import { MultiSelect } from '@midas-ds/multi-select';

const options = [
  { id: 'apple', name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Kiwi' },
  { id: 4, name: 'Elderflower' },
  { id: 5, name: 'Nectarine' },
  { id: 6, name: 'Watermelon' },
  { id: 7, name: 'Pineapple' },
  { id: 8, name: 'Apricot' },
  { id: 9, name: 'Cloudberry' },
]

<MultiSelect
  label="Välj en eller flera frukter"
  items={options}
/>
```
npm package: @midas-ds/radio
Description: ```bash npm i @midas-ds/radio ```
Latest version: 1.0.3
Deprecated: Package no longer supported. Use @midas-ds/components instead.

# RadioGroup

```bash
npm i @midas-ds/radio
```

```tsx
import { RadioGroup, Radio } from '@midas-ds/radio'
;<RadioGroup
  description="Välj en frukt"
  errorMessage="errrrrror"
  label="Frukt"
>
  <Radio value="banan">Banan</Radio>
  <Radio value="apelsin">Apelsin</Radio>
  <Radio value="kiwi">Kiwi</Radio>
</RadioGroup>
```
npm package: @midas-ds/search-field
Description: ```bash npm i @midas-ds/search-field ```
Latest version: 1.0.8
Deprecated: Package no longer supported. Use @midas-ds/components instead.

# SearchField

```bash
npm i @midas-ds/search-field
```

```tsx
import { SearchField } from '@midas-ds/search-field'
;<SearchField placeholder="Sök" />
```
npm package: @midas-ds/select
Description: ```bash npm i @midas-ds/select ```
Latest version: 1.0.3
Deprecated: Package no longer supported. Use @midas-ds/components instead.

# select

```bash
npm i @midas-ds/select
```

```tsx
import { Select, Item } from '@midas-ds/select';

const options = [
  { id: 'apple', name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Kiwi' },
  { id: 4, name: 'Elderflower' },
  { id: 5, name: 'Nectarine' },
  { id: 6, name: 'Watermelon' },
  { id: 7, name: 'Pineapple' },
  { id: 8, name: 'Apricot' },
  { id: 9, name: 'Cloudberry' },
]

<Select
  label="Välj en frukt"
  items={options}
>
  {(item) => <Item>{item.name}</Item>}
</Select>
```
npm package: @midas-ds/table
Description: ```bash npm i @midas-ds/table ```
Latest version: 1.0.4
Deprecated: Package no longer supported. Use @midas-ds/components instead.

# table

```bash
npm i @midas-ds/table
```

```tsx
import { Table, TableHeader, Column, TableBody, Row, Cell } from '@midas-ds/table';

const columns = [
    { name: 'Name', id: 'name', isRowHeader: true },
    { name: 'Type', id: 'type' },
    { name: 'Date Modified', id: 'date' },
] satisfies Column[]

const rows = [
    { id: 1, name: 'Games', date: '6/7/2020', type: 'File folder' },
    { id: 2, name: 'Program Files', date: '4/7/2021', type: 'File folder' },
    { id: 3, name: 'bootmgr', date: '11/20/2010', type: 'System file' },
    { id: 4, name: 'log.txt', date: '1/18/2016', type: 'Text Document' },
] satisfies Row[]

<Table
    aria-label="Files"
    selectionMode="multiple"
>
    <TableHeader columns={columns}>
        {(column) => (
        <Column isRowHeader={column.isRowHeader}>{column.name}</Column>
        )}
    </TableHeader>
    <TableBody items={rows}>
        {(item) => (
        <Row columns={columns}>
            {(column) => <Cell>{item[column.id]}</Cell>}
        </Row>
        )}
    </TableBody>
</Table>
```