open-index/open-npm huggingface dataset:
npm package: @s-ui/react-image-picker
Description: ## Description
Latest version: 1.8.0

# ImagePicker

## Description

Panel with the selected image and a list of images that will replace the selected image as they are clicked.

## Installation

```sh
$ npm install @s-ui/react-image-picker --save
```

## Usage

### Basic usage
```js
import ImagePicker from '@s-ui/react-image-picker'

const images = [
  {
    alt: 'Alternate text for image 1',
    src: 'http://via.placeholder.com/350x150.png/000/fff?text=primary+1',
    thumb: 'http://via.placeholder.com/100.png/000/fff'
  },
  {
    alt: 'Alternate text for image 2',
    src: 'http://via.placeholder.com/150x350.png/666/094?text=primary+2',
    thumb: 'http://via.placeholder.com/100.png/666/094'
  }
]

const actions = [
  {
    callback: (image) => alert('Clicked on action 1 with image ' + image.src),
    node: <div>Action 1</div>
  },
  {
    callback: (image) => alert('Clicked on action 2 with image ' + image.src),
    node: <div>Action 2</div>
  }
]

const params = {
  actions,
  images,
  defaultAlt: 'No text for image',
  emptyImage: <img src="http://URL-EMPTY-IMAGE" alt="Empty image" />,
  onClick: (image) => alert('clicked on image ' + image.src),
  selected: 1
}

return (<ImagePicker {...params} />)
```
npm package: @s-ui/react-image-placeholder
Description: > Shows a placeholder while loading an image. You can also set a fallback to be loaded in case it fails loading the image.
Latest version: 2.11.0

# ImagePlaceholder

> Shows a placeholder while loading an image. You can also set a fallback to be loaded in case it fails loading the image.

## Installation

```sh
$ npm install @s-ui/react-image-placeholder --save
```

## Usage

### Basic usage
```js
import ImagePlaceholder from '@s-ui/react-image-placeholder'

return (
  <ImagePlaceholder
    src='https://satyr.io/1000'
    alt='1000x1000'
    placeholder={
      src: '...',
      alt: '...'
      ...imageTagAttributes
    }
    fallback={
      src: '...',
      alt: '...'
      ...imageTagAttributes
    }
  />
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/image/placeholder/demo).**
npm package: @s-ui/react-layout-breakpoint-split
Description: > Show or hide views according to the breakpoint.
Latest version: 1.8.0

# LayoutBreakpointSplit

> Show or hide views according to the breakpoint.

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-layout-breakpoint-split --save
```

## Usage

### Basic usage
```js
import LayoutBreakpointSplit from '@s-ui/react-layout-breakpoint-split'

setView(current) {
  this.setState({current})
}

const current = this.state && this.state.current || 0

return (<div>
<LayoutBreakpointSplit breakpoint={575} current={current}>
  <div>
    LEFT VIEW {current == 0 && '(active)'}
    <button onClick={this.setView.bind(this, 1)}>Next &gt;</button>
  </div>

  <div>
    RIGHT VIEW {current == 1 && '(active)'}
    <button onClick={this.setView.bind(this, 0)}>Prev &lt;</button>
  </div>
</LayoutBreakpointSplit>
</div>)
```
npm package: @s-ui/react-layout-grid
Description: > The layout grid component adapts to screen size (responsive), ensuring consistency across layouts. > The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Based on our design principles, this co
Latest version: 2.15.0

# LayoutGrid

> The layout grid component adapts to screen size (responsive), ensuring consistency across layouts.
> The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Based on our design principles, this component is based on a 12 columns grid layout.

## Installation

```sh
$ npm install @s-ui/react-layout-grid
```

## Usage

- This component uses CSS Flexbox for high flexibility (Support for CSS grid? Would be great 😉).
- There are two types of layout: `<LayoutGrid />` and your items `<LayoutGridItem />`.
- Item widths are set in percentages, so they’re always fluid and sized relative to their parent element.
- Items have padding to create the spacing between individual items.
- The breakpoints is defined on [sui-theme](https://github.com/SUI-Components/sui-theme/blob/master/src/layout/_breakpoints.scss): `xxs | xs | s | m | l | xl | xxl`

### Basic usage

#### Import package and use the component

```js
import LayoutGrid from '@s-ui/react-layout-grid'

return <LayoutGrid />
```

Default

```js
<LayoutGrid>
  <LayoutGridItem colSpan={4}>...</LayoutGridItem>
  <LayoutGridItem colSpan={8}>...</LayoutGridItem>
</LayoutGrid>
```

With breakpooints

```js
<LayoutGrid>
  <LayoutGridItem xxs={1} s={4} m={2} xl={6}>
    ...
  </LayoutGridItem>
  <LayoutGridItem xxs={1} s={8} m={10} xl={6}>
    ...
  </LayoutGridItem>
</LayoutGrid>
```

With `alignItems` and `justifyContent` and `alignContent` props

```js
<LayoutGrid
  alignItems="center"
  justifyContent="space-around"
  alignContent="stretch"
>
  <LayoutGridItem s={4} xl={6}>
    ...
  </LayoutGridItem>
  <LayoutGridItem s={8} xl={6}>
    ...
  </LayoutGridItem>
</LayoutGrid>
```

With cells offset

```js
<LayoutGrid>
  <LayoutGridItem s={6} sOffset={3} xl={10} xlOffset={1}>
    ...
  </LayoutGridItem>
</LayoutGrid>
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
// @import 'your theme';
@import '~@s-ui/react-layout-grid/lib/index';
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-layout-media-query
Description: `LayoutMediaQuery` is a wrapper that will pass through a _function as a child_ an object with the breakpoints matched according to the width of the parent container
Latest version: 1.7.0

# LayoutMediaQuery

`LayoutMediaQuery` is a wrapper that will pass through a _function as a child_ an object with the breakpoints matched according to the width of the parent container

## Installation

```sh
$ npm install @s-ui/react-layout-media-query --save
```

## Usage

### Basic usage (default breakpoints)

```javascript
import LayoutMediaQuery from '@s-ui/react-layout-media-query'

<LayoutMediaQuery>
  {({M, L, XL}) => {
    if (XL) return <p>LargeDesktop</p>
    if (L) return <p>Desktop</p>
    if (M) return <p>Tablet</p>
    return <p>Mobile</p>
  }}
</LayoutMediaQuery>
```

This default component will use default breakpoints agreed for schibsted projects

```
{
  xs: 480,
  s: 600,
  m: 840,
  l: 960,
  xl: 1280,
  xxl: 1440
}
```

### Listening to the viewport resize

```javascript
import LayoutMediaQuery from '@s-ui/react-layout-media-query'

<LayoutMediaQuery viewport>
  {({M, L, XL}) => {
    if (XL) return <p>LargeDesktop</p>
    if (L) return <p>Desktop</p>
    if (M) return <p>Tablet</p>
    return <p>Mobile</p>
  }}
</LayoutMediaQuery>
```

### Custom Breakpoints

We have also available a factory function that we can use to create a `LayoutMediaQuery` with custom breakpoints

```javascript
import { LayoutMediaQueryFactory } from '@s-ui/react-layout-media-query'

const BREAKPOINTS = {
  sm: '576',
  md: '768',
  lg: '992',
  xl: '1200'
}

const LayoutMediaQueryBootstrap = LayoutMediaQueryFactory(BREAKPOINTS)

<LayoutMediaQueryBootstrap>
  {({MD, LG, XL}) => {
    if (XL) return <p>LargeDesktop</p>
    if (LG) return <p>Desktop</p>
    if (MD) return <p>Tablet</p>
    return <p>Mobile</p>
  }}
</LayoutMediaQueryBootstrap>
```

### initialMediaQueries props

This component accepts a special prop called initialMediaQueries. This prop is specially useful in SSR in order to force a initial media query object that will be used in environments where the componentDidMount is never called, like in Node.

You can combine this prop with some kind of logic in an upper component to avoid rerenders in the server.

```
<LayoutMediaQuery initialMediaQueries={{MD: true}}>
  {({MD, LG, XL}) => { // MD will be true in the server.
    if (XL) return <p>LargeDesktop</p>
    if (LG) return <p>Desktop</p>
    if (MD) return <p>Tablet</p>
    return <p>Mobile</p>
  }}
</LayoutMediaQuery>
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/layout/mediaQuery/demo).**
npm package: @s-ui/react-link-basic
Description: > Component to show a link. The advantatge of this component is that, depending on the props, you could get a link disabled, a link to another website or a link to the SPA so your code is
Latest version: 2.4.0

# LinkBasic

> Component to show a link. The advantatge of this component is that, depending on the props, you could get a link disabled, a link to another website or a link to the SPA so your code is

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-link-basic --save
```

## Usage

### Basic usage
```js
import LinkBasic from '@s-ui/react-link-basic'

return (
  <LinkBasic
    useReactRouterLinks
    url='#'
  />
)
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-list-image
Description: Displays a list of sui-image-lazy-load, with a customisable limit and onClick callbacks.
Latest version: 1.16.0

### ListImage

Displays a list of images (where each item corresponds to a ```sui-image-lazy-load``` component).

It will be displayed as a continuous grid (the image grid items per line are adjustable to the container's width),
allowing to set a limit of the total number of images to show.

Each image may have a custom callback to be called when its onClick event is triggered.

Additionally, if there a more image items than the defined ```maxItems``` prop, and the prop ```showMoreItemsBox``` is provided,

it will show an extra cover (black background, 65% opacity) over the last` image, allowing as well the definition of a
custom callback to be called when this last item is clicked.

By default, the sizes for all image items in the list are set as follows:
- Each item is 196px width for desktop and tablet screens. The cell gutter is 16px, except in the case of tablet screen
  where only horizontal gutter is expanded to 30px.
- Each item is 50% width for mobile screens (cell gutter of 16px).
npm package: @s-ui/react-list-link
Description: > Show a list of links, that could be React Router Links or HTML links. You could show these links also inline or one-per-line style as a list.
Latest version: 2.2.0

# ListLink

> Show a list of links, that could be React Router Links or HTML links. You could show these links also inline or one-per-line style as a list.

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-list-link --save
```

## Usage

### Basic usage
```js
import ListLink from '@s-ui/react-list-link'

const listOfLinks = [
  {
    literal: 'Alquiler de pisos en Madrid Capital',
    title: 'Element title',
    target: '_parent',
    url: 'http://fotocasa.es',
    disabled: true,
    customclass: 'sui-Link-disabled'
  },
  {
    literal: 'Comprar pisos',
    title: 'Element title',
    target: '_parent',
    url: 'http://fotocasa.es',
    disabled: true,
    customclass: 'sui-Link-disabled'
  }
]

return (
  <ListLink
    list={listOfLinks}
    displayInline />
  />
)
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-list-masonry
Description: ListMasonry is a React grid layout component. It works by placing elements in optimal position based on available vertical space.
Latest version: 1.10.0

### ListMasonry
ListMasonry is a React grid layout component. It works by placing elements in optimal position based on available vertical space.

```javascript
const breakpoints = [600, 900]

<ListMasonry
  breakpoints={breakpoints}
  className='extra-class'
/>
```

Check the playground in order to get a complete view of the possibilities of the component. Try resizing your browser and check how this component build columns based on the breakpoints array passed via props.
npm package: @s-ui/react-modal-gallery
Description: > Description Creates a fullscreen multimedia slider gallery (`sui-image-slider`) and opens it inside  a modal (`sui-modal-basic`).
Latest version: 1.13.0

# SUI ModalGallery

> Description
Creates a fullscreen multimedia slider gallery (`sui-image-slider`) and opens it inside  a modal (`sui-modal-basic`).

#### Future tasks:
- [ ] Allow including videos in slider.
- [ ] Allow including floorplans in slider.
- [ ] Create multimedia multi-counter types (3 separated counter for images, videos and floorplans to show in modal's header.)

## Installation

```sh
$ npm install @schibstedspain/sui-modal-gallery --save
```

## Usage

### Basic usage
```js
import ModalGallery from '@schibstedspain/sui-modal-gallery'

<ModalGallery
  shouldRenderModal
  multimedia={{images: [/* Array of images */]}}
  initialSlide={6}
  doAfterSlide={() => alert('Slide changed!'}
  onClose={() => alert('Closing...')}
/>
```

> **Find full description and more examples in the [demo page](../demo).**
npm package: @s-ui/react-molecule-accordion
Description: > The accordion is the component that contains collapsible components that allows the user to expand or collapse the content. We use this component to reduce the content of a page or section.
Latest version: 2.18.0

# MoleculeAccordion

> The accordion is the component that contains collapsible components that allows the user to expand or collapse the content. We use this component to reduce the content of a page or section.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/accordion/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,accordion)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-accordion?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-accordion)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Aaccordion&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Aaccordion)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-accordion)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/accordion/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-accordion --save
```

## Usage

```js
import MoleculeAccordion from '@s-ui/react-molecule-accordion'
```

### Basic usage

```js
<MoleculeAccordion behavior={moleculeAccordionBehavior.SINGLE}>
  <AccordionItem
    value="value-1"
    label="Accordion Item Label 1"
    content="content 1"
  />
  <AccordionItem
  value="value-2"
  label="Accordion Item Label 2"
  content="content 2"
  />
</MoleculeAccordion>
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-molecule-badge-counter
Description: `MoleculeBadgeCounter` is a component used for warning the user about new content or updates
Latest version: 1.18.0

# MoleculeBadgeCounter

`MoleculeBadgeCounter` is a component used for warning the user about new content or updates

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/badgeCounter/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,badgeCounter)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-badge-counter?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-badge-counter)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AbadgeCounter&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AbadgeCounter)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-badge-counter)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/badgeCounter/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-badge-counter --save
```

## Usage

```js
import MoleculeBadgeCounter, {
  moleculeBadgeCounterVariants,
  moleculeBadgeCounterSizes
} from '@s-ui/react-molecule-badge-counter'
```

### Basic (Small)

```js
<MoleculeBadgeCounter />
```

### Dot Variant

```js
<MoleculeBadgeCounter variant={moleculeBadgeCounterVariants.DOT} />
```

### With Text

```js
<MoleculeBadgeCounter>Text</MoleculeBadgeCounter>
```

### With Icon

```js
<MoleculeBadgeCounter>
  <Icon />
</MoleculeBadgeCounter>
```

### Medium Size

```js
<MoleculeBadgeCounter size="medium" />
```

### Exclamation Variant

```js
<MoleculeBadgeCounter
  variant={moleculeBadgeCounterVariants.EXCLAMATION}
  size={moleculeBadgeCounterSizes.MEDIUM}
/>
```

### Extended Variant

```js
<MoleculeBadgeCounter
  variant={moleculeBadgeCounterVariants.EXTENDED}
  size={moleculeBadgeCounterSizes.MEDIUM}
/>
```

### Labels

```js
<MoleculeBadgeCounter label="4" />
<MoleculeBadgeCounter label="42" />
<MoleculeBadgeCounter label="142" />
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/badgeCounter).**
npm package: @s-ui/react-molecule-breadcrumb
Description: SUI Breadcrumb Basic
Latest version: 1.34.0


### MoleculeBreadcrumb

> Breadcrumbs, or a breadcrumb navigation, can help to enhance how users navigate to previous page levels of a website, especially if that website has many pages or products.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/breadcrumb/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,breadcrumb)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-breadcrumb?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-breadcrumb)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Abreadcrumb&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Abreadcrumb)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-breadcrumb)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/breadcrumb/LICENSE.md)

## Installation

```sh
npm install @s-ui/react-molecule-breadcrumb --save
```

## Usage

```js
import MoleculeBreadcrumb from '@s-ui/react-molecule-breadcrumb'

const breadcrumbItems = [
  {
    label: 'accusantium',
    url: 'https://github.com/SUI-Components/sui-components'
  },
  {
    label: 'current section'
  }
]

return (
  <BreadcrumbBasic items={breadcrumbItems} />
)

```

**Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/breadcrumb).**
npm package: @s-ui/react-molecule-button-group-field
Description: `MoleculeButtonGroupField` is the combination of and `MoleculeButtonGroup` and a `MoleculeField`
Latest version: 1.9.0

# MoleculeButtonGroupField

`MoleculeButtonGroupField` is the combination of and `MoleculeButtonGroup` and a `MoleculeField`

## Installation

```sh
$ npm install @s-ui/react-molecule-button-group-field
```

```js
import MoleculeButtonGroupField from '@s-ui/react-molecule-button-group-field'
```

### Basic (with Information help text)

```js
  <MoleculeButtonGroupField
    id="info-help-text"
    label="Your text here"
    helpText="Tu descripción en Latin"
  />
```

### Success Message

```js
  <MoleculeButtonGroupField
    id="success-help-text"
    label="Your text here"
    successText="Everything ok!"
  />
```

### Error Message

```js
  <MoleculeButtonGroupField
    id="error-help-text"
    label="Your text here"
    errorText="All wrong!"
  />
```

### Alert Message

```js
  <MoleculeButtonGroupField
    id="alert-help-text"
    label="Your text here"
    alertText="Something meh..."
  />
```

> **Find full description and more examples in the [demo page](/workbench/molecule/buttonButtonField).**
npm package: @s-ui/react-molecule-carousel
Description: Minimalistic and smooth touch carousel component for React ⚛️
Latest version: 1.9.0

# MoleculeCarousel

Minimalistic and smooth touch carousel component for React ⚛️

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/carousel/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,carousel)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-carousel?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-carousel)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Acarousel&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Acarousel)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-carousel)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/carousel/LICENSE.md)

## Features

- 🖼️ 1:1 slider for any content
- 📱 Optimized for mobile usage (block scroll on slide)
- ⚡ Optimized for performance
- ⌨️ Supports keyboard navigation
- 😪 Lazy load support
- ☝️ No dependencies, just one possible polyfill: intersection-observer polyfill

> Description

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-molecule-carousel
```

## Usage

### Basic usage

#### Import package and use the component

```js
import MoleculeCarousel from '@s-ui/react-molecule-carousel'

return <MoleculeCarousel />
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-molecule-carousel/lib/index';
```

> **Find full description and more examples in the [demo page](#).**

## [Migration](<MIGRATION.md>)

From [react-slidy](https://github.com/midudev/react-slidy) 4 to @s-ui/react-molecule-carousel
npm package: @s-ui/react-molecule-checkbox-field
Description: `MoleculeCheckboxField` is the combination of and `AtomCheckbox` and a `checkboxField`
Latest version: 5.4.0

# MoleculeCheckboxField

`MoleculeCheckboxField` is the combination of and `AtomCheckbox` and a `checkboxField`

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/checkboxField/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,checkboxField)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-checkbox-field?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-checkbox-field)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%checkboxField&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AcheckboxField)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-checkbox-field)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/checkboxField/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-checkbox-field --save
```

## Usage

```js
import MoleculeCheckboxField from '@s-ui/react-molecule-checkbox-field'
```

### Basic usage (info)

```js
<MoleculeCheckboxField
    id="description-inline2"
    label="Description"
    helpText="Tu descripción en Latin"
/>
```

### Success Message

```js
<MoleculeCheckboxField
    id="description2"
    label="Description"
    value="In some place of La Mancha which name..."
    successText="Everything ok!"
/>
```

### Error Message

```js
 <MoleculeCheckboxField
    id="notes"
    label="Notes"
    errorText="All wrong!"
    value="In some place of La Mancha which name..."
/>
```

### Alert Message

```js
 <MoleculeCheckboxField
    id="notes"
    label="Notes"
    alertText="Something meh..."
    value="In some place of La Mancha which name..."
/>
```

> **Find full description and more examples in the [demo page](/workbench/molecule/checkboxField).**
npm package: @s-ui/react-molecule-coachmark
Description: `MoleculeCoachmark` is a wrapper of the [react-joyride](https://react-joyride.com/) library in order to create smooth guided tours in the apps to explain new features to the users.
Latest version: 0.11.0

# MoleculeCoachmark

`MoleculeCoachmark` is a wrapper of the [react-joyride](https://react-joyride.com/) library in order to create smooth guided tours in the apps to explain new features to the users.

For more information on how to use the provided props, visit the [react-joyride documentation site](https://docs.react-joyride.com/)

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/coachmark/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,coachmark)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-coachmark?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-coachmark)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Acoachmark&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Acoachmark)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-coachmark)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/coachmark/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-coachmark
```

## Usage

### Basic usage

#### Import package and use the component

```js
import MoleculeCoachmark from '@s-ui/react-molecule-coachmark'

return <MoleculeCoachmark {...props} />
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-molecule-coachmark/lib/index';
```

### Overwriting styles

Overwriting styles is possible thanks to the `styles` prop. [Here you can find a list](https://github.com/gilbarbara/react-joyride/blob/3e08384415a831b20ce21c8423b6c271ad419fbf/src/styles.js) of possible properties to be overwritten

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-molecule-collapsible
Description: > The collapsible component allows the user to expand or collapse content. We use this component to lightweight the content of a page or section.
Latest version: 1.24.0

# MoleculeCollapsible

> The collapsible component allows the user to expand or collapse content. We use this component to lightweight the content of a page or section.

## Installation

```sh
$ npm install @s-ui/react-molecule-collapsible --save
```

## Usage

Import the component like this:

```js
import MoleculeCollapsible from '@s-ui/react-molecule-collapsible'
```

### Basic usage

```js
<MoleculeCollapsible 
    icon={svgIcon} 
    showText='Show' 
    hideText='Hide'
>
    <p>Text or content to collapse</p>
</MoleculeCollapsible>
```

### Properties

#### height

It sets the maximum height in pixels when the component is collapsed. By default it is set to 100px.

```js
<MoleculeCollapsible 
    icon={svgIcon} 
    showText='Show' 
    hideText='Hide'
    height={10}
>
    <p>Text or content to collapse</p>
</MoleculeCollapsible>
```

#### icon

The icon in svg to show next to the text to collapse or expand. It will toggle between the original position and a rotation of 180 degrees when text is collapsed and expanded.

#### showText

The text to show in the button to uncollapse the content.

#### hideText

The text to show in the button to collapse the content.

#### isCollapsible

When set to `false`, it hides the button to collapse the content when expanded. True by default.
```js
<MoleculeCollapsible 
    hideText='Hide'
    isCollapsible={false}
    showText='Show' 
>
    <p>Text or content that's no longer collapsible</p>
</MoleculeCollapsible>
```


#### withGradient

It can be set True or False. It will show a gradient over the content when set to True. By default it is True.

```js
<MoleculeCollapsible 
    icon={svgIcon} 
    showText='Show' 
    hideText='Hide'
    withGradient={true}
>
    <p>Text or content to collapse</p>
</MoleculeCollapsible>
```

#### withTransition

It can be set True or False. It will activate or deactivate transition effect when toggle. By default it is True.

```js
<MoleculeCollapsible 
    icon={svgIcon} 
    showText='Show' 
    hideText='Hide'
    withTransition={true}
>
    <p>Text or content to collapse</p>
</MoleculeCollapsible>
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-molecule-data-counter
Description: `MoleculeDataCounter` is an input type number controller we can use to increase (+1) or decrease (-1) the value of such input.
Latest version: 1.18.0

# MoleculeDataCounter

`MoleculeDataCounter` is an input type number controller we can use to increase (+1) or decrease (-1) the value of such input. 

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/dataCounter/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,dataCounter)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-data-counter?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-data-counter)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AdataCounter&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AdataCounter)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-data-counter)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/dataCounter/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-data-counter --save
```

## Usage

```js
import MoleculeDataCounter, {moleculeDataCounterSizes} from '@s-ui/react-molecule-data-counter'
```


### Basic usage

```js
<MoleculeDataCounter label="Label" id="demo1"/>
```

### Disabled

```js
<MoleculeDataCounter label="Label" id="demo2" disabled/>
```

### Setting min & max

```js
<MoleculeDataCounter label="Label" id="demo3" min={3} max={8} />
```

### Size=SMALL

```js
<MoleculeDataCounter label="Label" id="demo3" size={moleculeDataCounterSizes.SMALL} />
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/dataCounter/demo).**
npm package: @s-ui/react-molecule-drawer
Description: > Description
Latest version: 4.10.0

# MoleculeDrawer

> Description

Drawers can toggle open or closed. Closed by default, the drawer opens
above all other content. The Drawer can be cancelled by clicking the
overlay or pressing the Esc key. They are used to display contextual
information over the current content, like the user menu in a mobile web-page.

## Installation

```sh
$ npm install @s-ui/react-molecule-drawer
```

## Usage

### Basic usage

#### Import package and use the component

```js
import MoleculeDrawer from '@s-ui/react-molecule-drawer'

return (<MoleculeDrawer isOpen/>)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
// @import 'your theme';
@import '~@s-ui/react-molecule-drawer/lib/index';
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/drawer/demo).**
npm package: @s-ui/react-molecule-dropdown-option
Description: `MoleculeDropdownOption` is a component that wraps a composition of checkbox + text.
Latest version: 2.16.0

# MoleculeDropdownOption

`MoleculeDropdownOption` is a component that wraps a composition of checkbox + text. 

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/dropdownOption/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,dropdownOption)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-dropdown-option?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-dropdown-option)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AdropdownOption&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AdropdownOption)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-dropdown-option)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/dropdownOption/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-dropdown-option --save
```

## Usage

### Basic usage
```js
import MoleculeDropdownOption from '@s-ui/react-molecule-dropdown-option'

return (
  <MoleculeDropdownOption value="option1">
    Option 1
  </MoleculeDropdownOption>
)
```

### With `checkbox`
```js
import MoleculeDropdownOption from '@s-ui/react-molecule-dropdown-option'

return (
  <MoleculeDropdownOption value="option1" checkbox>
    Option 1
  </MoleculeDropdownOption>
)
```

### With disabled
```js
import MoleculeDropdownOption from '@s-ui/react-molecule-dropdown-option'

return (
  <MoleculeDropdownOption value="option1" disabled>
    Option 1
  </MoleculeDropdownOption>
)
```

**Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/dropdownOption/demo).**
npm package: @s-ui/react-molecule-field
Description: `MoleculeField` is a component that wraps a composition of Label + some input (input, textarea, ...) + Validation Messages.
Latest version: 1.42.0

# MoleculeField

`MoleculeField` is a component that wraps a composition of Label + some input (input, textarea, ...) + Validation Messages. 

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/field/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,field)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-field?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-field)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Afield&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Afield)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-field)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/field/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-field --save
```

## Usage

After importing the component `MoleculeField` like this

```javascript
import MoleculeField from '@s-ui/react-molecule-field'
```

### Basic usage
    
```
  <MoleculeField label="name" name="name">
    <input id="name" type="text"/>
  </MoleculeField>
```

### With Error Message 
```
<MoleculeField label="surname" name="surname" errorText="Error!">
  <input id="surname" type="text"/>
</MoleculeField>
```

### With Success Message 

```
  <MoleculeField label="address" name="address" successText="Success!">
    <input id="address" type="text"/>
  </MoleculeField>
```

### With Alert Message 

```
  <MoleculeField label="address" name="address" alertText="Alert!">
    <input id="address" type="text"/>
  </MoleculeField>
```

### With Help Text

```

<MoleculeField label="country" name="country" helpText="Read the instructions to write proper format">
  <input id="country" type="text"/>
</MoleculeField>
```

### Inline
```
<MoleculeField inline label="city" name="city">
  <input id="city" type="text"/>
</MoleculeField>
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/field/demo).**
npm package: @s-ui/react-molecule-field-textarea
Latest version: 1.1.0
Deprecated: This component has been moved to @s-ui/react-molecule-textarea-field

# MoleculeFieldTextarea


`MoleculeFieldTextarea` is a component that wraps a composition of Label + Textarea + Validations  Messages. 


## Installation

```sh
$ npm install @s-ui/react-molecule-field-textarea --save
```

## Usage

After importing the component `MoleculeFieldTextarea` like this

```javascript
import MoleculeFieldTextarea from '@s-ui/react-molecule-field-textarea'
```

### Basic usage
    
```
  <MoleculeFieldTextarea
    id="description"
    label="Description"
  />
```

### With initial value
    
```
  <MoleculeFieldTextarea
    id="description"
    label="Description"
    value="In some place of La Mancha which name..."
  />
```

### With maxChars
    
```
  <MoleculeFieldTextarea
    id="description"
    label="Description"
    value="In some place of La Mancha which name..."
    maxChars={75}
  />
```

### With Error Message 
```
  <MoleculeFieldTextarea
    id="description"
    label="Description"
    value="In some place of La Mancha which name..."
    errorText="All wrong!"
  />
```

### With Success Message 
```
  <MoleculeFieldTextarea
    id="description"
    label="Description"
    value="In some place of La Mancha which name..."
    successText="Everything ok!"
  />
```

### With Help Text

```
  <MoleculeFieldTextarea
    id="description"
    label="Description"
    value="In some place of La Mancha which name..."
    helpText="Enter some description with no less than 20 characters"
  />
```

### Inline
```
  <MoleculeFieldTextarea
    id="description"
    label="Description"
    value="In some place of La Mancha which name..."
    inline
  />
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/fieldTextarea/demo).**
npm package: @s-ui/react-molecule-image-editor
Description: Component to crop and rotate an image.
Latest version: 1.11.0

# MoleculeImageEditor

Component to crop and rotate an image.

## Installation

```sh
$ npm install @s-ui/react-molecule-image-editor
```

## Usage

### Basic usage

#### Import package and use the component

```js
import MoleculeImageEditor from '@s-ui/react-molecule-image-editor'

return (
  <MoleculeImageEditor 
    cropLabelIcon={<CropIcon>}
    cropLabelText="Crop"
    image={image}
    onChange={handleChange}
    rotateLabelIcon={<RotateIcon>}
    rotateLabelText="Rotate"
  />
)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-molecule-image-editor/lib/index';
```
npm package: @s-ui/react-molecule-input-field
Description: `MoleculeInputField` is a component that wraps a composition of Label + Textarea + Validation Messages.
Latest version: 4.8.0

# MoleculeInputField

`MoleculeInputField` is a component that wraps a composition of Label + Textarea + Validation Messages. 

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/inputField/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,inputField)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-input-field?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-input-field)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AinputField&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AinputField)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-input-field)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/inputField/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-input-field --save
```

## Usage

After importing the component `MoleculeInputField` like this

```javascript
import MoleculeInputField from '@s-ui/react-molecule-input-field'
```

### Basic usage
    
```javascript
  <MoleculeInputField
    id="second"
    placeholder="Medium Input"
    leftAddon="http://"
    rightAddon="@schibsted.com"
    label="Description"
    value="In some place of La Mancha which name..."
  />
```

### With `successText`
    
```javascript
  <MoleculeInputField
    id="description2"
    label="Description"
    value="In some place of La Mancha which name..."
    successText="Everything ok!"
  />
```

### With `errorText`
    
```javascript
  <MoleculeInputField
    id="notes"
    label="Notes"
    errorText="All wrong!"
  />
```

### With `alertText`

```javascript
  <MoleculeInputField
    id="notes"
    label="Notes"
    alertText="All wrong!"
  />

```

### With `helpText`

```javascript
  <MoleculeInputField
    id="description-inline2"
    label="Description"
    helpText="Tu descripción en Latin"
    value="Lorem ipsum dolor sit amet"
  />
```

### Inline

```javascript
  <MoleculeInputField
    id="description"
    label="Description"
    value="In some place of La Mancha which name..."
    inline
  />
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/inputField/demo).**
npm package: @s-ui/react-molecule-input-tags
Description: `MoleculeInputTags` is an `AtomInput` with the behavior of adding/removing `AtomTag` as a list
Latest version: 3.2.0

# MoleculeInputTags

`MoleculeInputTags` is an `AtomInput` with the behavior of adding/removing `AtomTag` as a list

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/inputTags/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,inputTags)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-input-tags?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-input-tags)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AinputTags&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AinputTags)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-input-tags)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/inputTags/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-input-tags --save
```

## Usage

```js
import MoleculeInputTags from '@s-ui/react-molecule-input-tags'
const closeIcon = () => <span>X</span>
```

### Basic usage

```js
<MoleculeInputTags tagsCloseIcon={closeIcon} />
```

### Entering tags on Tab

```js
<MoleculeInputTags tagsCloseIcon={closeIcon} onEnterKey="Tab" />
```

### Initial list of tags

```js
<MoleculeInputTags tagsCloseIcon={closeIcon} tags={['john','paul','george','ringo']} />
```

### `AtomInput` props

All props of `AtomInput` can also be passed to `MoleculeInputTags`

```js
<MoleculeInputTags tagsCloseIcon={closeIcon} errorState={true} />
```

### Just unique values

You can set `allowDuplicates` to false to force unique values

```js
<MoleculeInputTags allowDuplicates={false} />
```

### Max tags

use `maxTags` prop to set a number of maximum tags that can be entered, after reaching that number the field gets disabled

```js
<MoleculeInputTags maxTags={3} />
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/inputTags/demo).**
npm package: @s-ui/react-molecule-modal
Description: > Description
Latest version: 2.5.0

# MoleculeModal

> Description

Modal windows focus users' attention to inform them about a specific interaction. They may require users to make a decision or warn them when an error may have very significant consequences.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/modal/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,molecule,modal)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-modal?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-modal)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Amodal&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Amodal)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-molecule-modal)](https://github.com/SUI-Components/sui-components/blob/main/components/molecule/modal/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-molecule-modal --save
```

## Usage

```js
import MoleculeModal from '@s-ui/react-molecule-modal'

const Foo = () => {
  return (
    <MoleculeModal>
      <MoleculeModal.OpenTrigger>
        <button>open the dialog</button>
      </MoleculeModal.OpenTrigger>
      <MoleculeModal.Content>
        <MoleculeModal.Header>
          <MoleculeModal.Title>Modal title</MoleculeModal.Title>
        </MoleculeModal.Header>
        <MoleculeModal.Body>
          <MoleculeModal.ScrollArea>
            <MoleculeModal.Description>Modal description</MoleculeModal.Description>
          </MoleculeModal.ScrollArea>
        </MoleculeModal.Body>
        <MoleculeModal.Footer>
          <MoleculeModal.CloseTrigger>
            <button>close the dialog</button>
          </MoleculeModal.CloseTrigger>
        </MoleculeModal.Footer>
        <MoleculeModal.CloseTrigger>
          <MoleculeModal.CloseIconButton />
        </MoleculeModal.CloseTrigger>
      </MoleculeModal.Content>
    </MoleculeModal>
  )
}
```