open-index/open-npm huggingface dataset:
npm package: @s-ui/react-molecule-notification
Description: > Notifications offer users information on the system. The content may confirm that an action has been performed correctly, warn the user of an error or simply give information on certain circumstances.
Latest version: 1.35.0

# MoleculeNotification

> Notifications offer users information on the system. The content may confirm that an action has been performed correctly, warn the user of an error or simply give information on certain circumstances.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/notification/)
[![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,notification)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-notification?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-notification)

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

## Installation

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

### Basic usage
```js
import MoleculeNotification, {BRDS_SIZE} from '@s-ui/react-molecule-notification'

// sui-atom-button
const BUTTONS = [
  {
    type: 'secondary',
    children: 'Secondary',
    negative: true
  },
  {
    type: 'primary',
    children: 'Primary',
    negative: true
  }
]

// import named export sizes from component as seen above
BRDS_SIZE = {
  extraLarge: 'xl',
  large: 'l',
  medium: 'm',
  small: 's',
  extraSmall: 'xs'
}

return (
  <MoleculeNotification
    type='success'
    autoclose='short'
    buttons={BUTTONS}
    roundedCorners={BRDS_SIZE.medium}
  >
    <p>Lorem fistrum</p>
  </MoleculeNotification>
)
```

## Border Radius usage
- Define a `$bdrs-base` Sass var value in your vertical theme to get 5 different border radius sizes. Then import the `BRDS_SIZE` object to get `extraSmall`, `small`, `medium`, `large` and `extraLarge` sizes in declarative way.


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/notification).**
npm package: @s-ui/react-molecule-phone-input
Description: > Custom input component to handle phone validation. Gives the user a prefix selector and a phone number input. It also handles the phone number validation and the prefix selection.
Latest version: 1.25.0

# MoleculePhoneInput

> Custom input component to handle phone validation. Gives the user a prefix selector and a phone number input. It also handles the phone number validation and the prefix selection.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/phoneInput/)
[![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,phoneInput)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-phone-input?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-phone-input)

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

## Installation

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

## Usage

### Basic usage

#### Import package and use the component

```js
import MoleculePhoneInput from '@s-ui/react-molecule-phone-input'

const [phone, setPhone] = useState('')
const icon = <IconArrowDown size="16" />
const prefixes = [
  {value: 'ES', label: 'España', countryCode: '+34'},
  {value: 'FR', label: 'Francia', countryCode: '+33'},
  {value: 'PT', label: 'Portugal', countryCode: '+351'},
  {value: 'AD', label: 'Andorra', countryCode: '+376'}
]

return (
  <MoleculePhoneInput
    value={phone}
    onChange={setPhone}
    dropdownIcon={icon}
    prefixes={prefixes}
  />
)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
@import '~@s-ui/react-molecule-phone-input/lib/index';
```
npm package: @s-ui/react-molecule-progress-steps
Description: `MoleculeProgressSteps` is a component that displays a range of steps and the completion status
Latest version: 2.12.0

# MoleculeProgressSteps

`MoleculeProgressSteps` is a component that displays a range of steps and the completion status

## Installation

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

## Usage

```js
import MoleculeProgressSteps, {
  MoleculeProgressStep,
  STATUSES
} from '@s-ui/react-molecule-progress-steps'

import {FillCheckIcon, PointerMapIcon, PaperPlaneIcon, ChatIcon, StarIcon} from './Icons'
```

### Basic usage

```js
<MoleculeProgressSteps iconStepDone={<FillCheckIcon />}>

  <MoleculeProgressStep
    label="Step 1"
    status={STATUSES.VISITED}
  >
    <p>Step 1 Content</p> 
  </MoleculeProgressStep>

  <MoleculeProgressStep
    label="Step 2"
    status={STATUSES.ACTIVE}
  >
    <p>Step 2 Content</p> 
  </MoleculeProgressStep>

  <MoleculeProgressStep
    label="Step 3"
    status={STATUSES.NORMAL}
  >
    <p>Step 3 Content</p> 
  </MoleculeProgressStep>

</MoleculeProgressSteps>
```

### w/ Icons

```js
<MoleculeProgressSteps iconStepDone={<FillCheckIcon />}>

  <MoleculeProgressStep
    label="Step 1"
    icon={<PointerMapIcon />}
    status={STATUSES.VISITED}
  >
    <p>Step 1 Content</p> 
  </MoleculeProgressStep>

  <MoleculeProgressStep
    label="Step 2"
    icon={<PaperPlaneIcon />}
    status={STATUSES.ACTIVE}
  >
    <p>Step 2 Content</p> 
  </MoleculeProgressStep>

  <MoleculeProgressStep
    label="Step 3"
    icon={<ChatIcon />}
    status={STATUSES.NORMAL}
  >
    <p>Step 3 Content</p> 
  </MoleculeProgressStep>

</MoleculeProgressSteps>
```

### Vertical mode

```js
<MoleculeProgressSteps iconStepDone={<FillCheckIcon />} vertical>

  <MoleculeProgressStep
    label="Step 1"
    status={STATUSES.VISITED}
  >
    <p>Step 1 Content</p> 
  </MoleculeProgressStep>

  <MoleculeProgressStep
    label="Step 2"
    status={STATUSES.ACTIVE}
  >
    <p>Step 2 Content</p> 
  </MoleculeProgressStep>

</MoleculeProgressSteps>
```

### Compressed mode (mobile)

```js
<MoleculeProgressSteps iconStepDone={<FillCheckIcon />} compressed>

  <MoleculeProgressStep
    label="Step 1"
    status={STATUSES.VISITED}
  >
    <p>Step 1 Content</p> 
  </MoleculeProgressStep>

  <MoleculeProgressStep
    label="Step 2"
    status={STATUSES.ACTIVE}
  >
    <p>Step 2 Content</p> 
  </MoleculeProgressStep>

</MoleculeProgressSteps>
```

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

# MoleculeQuickAction

## Installation

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

## Usage

### Basic usage
```js
import MoleculeQuickAction from '@s-ui/react-molecule-quick-action'

return (<MoleculeQuickAction />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-molecule-radio-button-field
Description: `MoleculeRadioButtonField` is the combination of and `AtomRadioButton` and a `MoleculeField`
Latest version: 1.15.0

# MoleculeRadioButtonField

`MoleculeRadioButtonField` is the combination of and `AtomRadioButton` and a `MoleculeField`


## Installation

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

## Usage

```js
import MoleculeRadioButtonField from '@s-ui/react-molecule-radio-button-field'
```

### Basic (with Information help text)

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

### Success Message

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

### Error Message

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

### Alert Message

```js
 <MoleculeRadioButtonField
    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/radioButtonField).**
npm package: @s-ui/react-molecule-radio-button-group
Description: `MoleculeRadioButtonGroup` is a container of several `AtomRadioButton` or `MoleculeRadioButtonField` to simplify its use
Latest version: 2.0.0

# MoleculeRadioButtonGroup

`MoleculeRadioButtonGroup` is a container of several `AtomRadioButton` or `MoleculeRadioButtonField` to simplify its use

## Installation

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

## Usage

```js
import MoleculeRadioButtonGroup from '@s-ui/react-molecule-radio-button-group'
```

### with `AtomRadioButton`

```js
<MoleculeRadioButtonGroup
  onChange={(ev, {name, value}) => {
    console.log({[name]: value})
  }}
  name="favorite-beatle"
  value="john"
>
  <AtomRadioButton value="john" />
  <AtomRadioButton value="paul" />
  <AtomRadioButton value="george" />
  <AtomRadioButton value="ringo" />
  <AtomRadioButton value="martin" disabled />
</MoleculeRadioButtonGroup>
```

### with `MoleculeRadioButtonField`

```js
 <MoleculeRadioButtonGroup
  onChange={(ev, {name, value}) => {
    console.log({[name]: value})
  }}
  name="field-favorite-beatle"
  value="john"
>
  <MoleculeRadioButtonField
    id="john"
    value="john"
    label="John"
    helpText="John Lennon"
  />
  <MoleculeRadioButtonField
    id="paul"
    value="paul"
    label="Paul"
    helpText="Paul McCartney"
  />
  <MoleculeRadioButtonField
    id="george"
    value="george"
    label="George"
    helpText="George Harrison"
  />
  <MoleculeRadioButtonField
    id="george"
    value="ringo"
    label="Ringo"
    helpText="Ringo Star"
  />
</MoleculeRadioButtonGroup>
```


> **Find full description and more examples in the [demo page](/workbench/molecule/radioButtonGroup).**
npm package: @s-ui/react-molecule-rating
Description: `MoleculeRating` will display a rating showing how good or popular someone o something is.
Latest version: 1.22.0

# MoleculeRating

`MoleculeRating` will display a rating showing how good or popular someone o something is.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/rating/)
[![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,rating)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-rating?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-rating)

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

## Installation

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

## Usage

```js
import MoleculeRating, {MoleculeRatingSizes} from '@s-ui/react-molecule-rating'
```

### Basic usage

```js
<MoleculeRating value={2} label="25 opiniones"/>
```

### With Link

```js
<MoleculeRating value={4} label="25 opiniones" link href="https://www.adevinta.com/"/>        
```

### With MEDIUM size

```js
<MoleculeRating value={4} label="25 opiniones" size={MoleculeRatingSizes.MEDIUM} link href="https://www.adevinta.com/"/>        
```

### With CUSTOM icons

```js
import {IconStarFilled, IconStarHalfFilled, IconStarEmpty} from './Icons'

const customPropsStar = {
  IconStarFilled,
  IconStarHalfFilled,
  IconStarEmpty
}

<MoleculeRating
    value={3.5}
    size={MoleculeRatingSizes.LARGE}
    label="25 opiniones"
    {...customPropsStar}
/>
```

### With Hover and onClick

```js
<MoleculeRating
  isHovered
  ratingValues={[1, 2, 3, 4, 5]}
  size={MoleculeRatingSizes.LARGE}
  onClick={handleClick}
/>
```





> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/rating/demo).**
npm package: @s-ui/react-molecule-select-popover
Description: A component that shows a popover to select data.
Latest version: 1.56.0

# MoleculeSelectPopover

A component that shows a popover to select data.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/molecule/selectPopover/)
[![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,selectPopover)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-molecule-select-popover?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-molecule-select-popover)

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

## Installation

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

## Usage

### Basic usage
```js
import MoleculeSelectPopover from '@s-ui/react-molecule-select-popover'

return (      
  <MoleculeSelectPopover
    acceptButtonText="Aceptar"
    cancelButtonText="Cancelar"
    iconArrowDown={IconArrowDown}
    isSelected={isSelected}
    onAccept={() => setItems(unconfirmedItems)}
    onCancel={() => setUnconfirmedItems(items)}
    selectText={selectText}
  >
    {children}
  </MoleculeSelectPopover>)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/selectPopover/demo).**
npm package: @s-ui/react-molecule-stepper
Description: > Description > Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. It provides a wizard-like workflow.
Latest version: 2.14.0

# MoleculeStepper

> Description
> Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. It provides a wizard-like workflow.

## Installation

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

## Usage

### Basic usage

#### Import package and use the component

##### Basic usage:

```js
import MoleculeStepper from 'sui-molecule-stepper'

return (
  <MoleculeStepper
    steps={3}
    step={1}
    icon={<Icon />}
    labels={['step-1', 'step-2', 'step-3']}
    onChange={(event, {step}) => {
      console.log(step)
    }}
  />
)
```

##### Compound usage:

```js
import MoleculeStepper, {Step} from 'sui-molecule-stepper'

return (
  <MoleculeStepper steps={3} step={1}>
    {new Array(steps).fill().map((i, index) => (
      <Step
        key={index}
        label={`step-${index}`}
        step={index + 1}
        visited={index < step}
        current={step === index}
        onClick={(event, {step}) => {
          console.log(step)
        }}
      >
        <CustomStep />
      </Step>
    ))}
  </MoleculeStepper>
)
```

When using the compound usage, the `<CustomStep/>` child will inherit `alignment, design, label, step, steps, current, visited, icon, visitedIcon, currentIcon` props to let teh children customize its own behavior.

#### Import the styles (Sass)

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

> **Find full description and more examples in the [demo page](https://sui-components.vercel.app/workbench/molecule/stepper/demo).**
npm package: @s-ui/react-molecule-validation-code
Description: > MoleculeValidationCode implements the AtomMoleculeValidationCode and adds it more features such as, clear button, send button and resend button. It also provides a label to provide information to the user.
Latest version: 1.8.0

# MoleculeValidationCode

> MoleculeValidationCode implements the AtomMoleculeValidationCode and adds it more features such as, clear button, send button and resend button. It also provides a label to provide information to the user.

## Installation

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

## Usage

### Basic usage

```js
import MoleculeValidationCode from '@s-ui/react-molecule-validation-code'

return (
  <MoleculeValidationCode
    sendButtonTextLabel="Send"
    deleteButtonTextLabel="Delete"
    labelText="Your verification code"
    resendButtonTextLabel="Resend"
    onChange={onChangeHandler}
  />
)
```

#### Import the styles (Sass)

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

### Placeholder usage

```js
<MoleculeValidationCode
  placeholder="A"
  onChange={onChangeHandler}
  defaultValue={code}
/>
```

### Password filter usage

```js
<MoleculeValidationCode
  isPassword
  onChange={onChangeHandler}
  defaultValue={code}
/>
```

### Sizes usage

```js
<MoleculeValidationCode
  size="medium"
  onChange={onChangeHandler}
  defaultValue={code}
/>
```

### Length usage

```js
<MoleculeValidationCode
  lenth={6}
  onChange={onChangeHandler}
  defaultValue={code}
/>
```

### Mask usage

```js
<MoleculeValidationCode
  mask="NUMBER"
  onChange={onChangeHandler}
  defaultValue={code}
/>
```

### Disabled usage

```js
<MoleculeValidationCode
  disabled
  onChange={onChangeHandler}
  defaultValue={code}
/>
```

### Status usage

```js
<MoleculeValidationCode
  status="error"
  onChange={onChangeHandler}
  defaultValue={code}
/>
```

### Children usage

```js
<MoleculeValidationCode onChange={onChangeHandler} defaultValue={code}>
  -
</MoleculeValidationCode>
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-organism-nested-checkboxes
Description: This component shows a parent checkbox with children that their controls his own state.
Latest version: 3.3.0

# OrganismNestedCheckboxes

This component shows a parent checkbox with children that their controls his own state.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/organism/nestedCheckboxes/)
[![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,organism,nestedCheckboxes)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-organism-nested-checkboxes?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-organism-nested-checkboxes)

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

## Installation

```sh
$ npm install @s-ui/react-organism-nested-checkboxes
```

## Usage

### Basic usage
```js
import OrganismNestedCheckboxes from '@s-ui/react-organism-nested-checkboxes'
import MoleculeCheckboxField from '@s-ui/react-molecule-checkboxField'

const data = [
  {id: 'nested-01', label: 'Nested 1', checked: true},
  {id: 'nested-02', label: 'Nested 2', checked: true},
  {id: 'nested-03', label: 'Nested 3', checked: true},
  {id: 'nested-04', label: 'Nested 4', checked: false},
  {id: 'nested-05', label: 'Nested 5', checked: false}
]

<OrganismNestedCheckboxes
  fullCheckedStyledIcon={IconCheck}
  halfCheckedStyledIcon={IconHalfCheck}
  id="nested"
  labelParent="Nested checkboxes"
  onChangeItem={handleChangeItem}
  onChangeParent={handleChangeParent}
>
 {
   data.map(item => {
      const {id: childId, checked} = item

      return (
        <MoleculeCheckboxField
          key={childId}
          id={childId}
          checked={checked}
          checkedIcon={IconCheck}
          intermediateIcon={IconHalfCheck}
          onChange={handleChangeItem}
          {...item}
        />
      )
    })
  }
</OrganismNestedCheckboxes>
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/organism/nestedCheckboxes/demo).**
npm package: @s-ui/react-pagination-basic
Description: > Component with a basic pagination system
Latest version: 1.9.0

# PaginationBasic

> Component with a basic pagination system

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

## Installation

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

## Usage

### Basic usage
```js
import PaginationBasic from '@s-ui/react-pagination-basic'

return (
  <PaginationBasic
    currentPage={20}
    handlePaginate={() => {}}
    showFirstLast
    totalPages={40}
    window={10}
  />
)
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-perf-dynamic-rendering
Description: This component improves performance using [dynamic rendering technique](https://developers.google.com/search/docs/guides/dynamic-rendering) at Component level.
Latest version: 1.22.0

# PerfDynamicRendering

This component improves performance using [dynamic rendering technique](https://developers.google.com/search/docs/guides/dynamic-rendering) at Component level.

It uses the `userAgent` prop to detect if the user is a bot or not.

*If you're a bot*, no matter if you're on the server side or the browser side, the wrapped content will be always rendered.

*If you're an user*:
  - On the server side, nothing is rendered.
  - On the client side, the content will be rendered when it is about to interesect the viewport.

You could completely disable the behaviour of the component using the prop `disabled` and thus it will render nothing until it is enabled. This could be useful to enable the component on the browser side when the user performs an action, like a click.

## Installation

```sh
$ npm install @s-ui/react-perf-dynamic-rendering --save
```

## Usage

### Basic usage
```js
import PerfDynamicRendering from '@s-ui/react-perf-dynamic-rendering'

return (
  <>
    <PerfDynamicRendering userAgent={navigator.userAgent}>
      <img src='https://huge-image.com/panda.jpg'/>
    </PerfDynamicRendering>

    <PerfDynamicRendering disabled={true} userAgent={navigator.userAgent}>
      <img src='https://huge-image.com/panda_02.jpg'/>
    </PerfDynamicRendering>

    <PerfDynamicRendering height={50} userAgent={navigator.userAgent}>
      <img src='https://huge-image.com/panda_02.jpg'/>
    </PerfDynamicRendering>

    <PerfDynamicRendering height={50} userAgent={navigator.userAgent} forceRender={true}>
      <p>This Image will be render in client and server even when the image it is outside of the viewport</p>
      <p>Or in the server even when is a regular user agent</p>
      <p>The practical effect of this, is make this component 100% transparent</p>
      <img src='https://huge-image.com/panda_02.jpg'/>
    </PerfDynamicRendering>

  </>
)
```

### Props

Common props you may want to specify include:

* `disabled` - Flag that determines if you want disable the Intersection Observer lazy load strategy. And use a controller lazy strategy ONLY in client side.
* `forceRender` - avoid any check and render always.
* `height` - Number that determines the height of the component that we're waiting in pixels.
* `userAgent` - String with the userAgent that will be used to check if is bot or normal user.
* `placeholder` - A component or html element that is used as a placeholder
* `rootMargin` - String in the format of the css margin property. the values serves to grow or shrink each side of the root element's bounding box before computing intersections.
* `botsUserAgents` - An Array of strings that is used to set the lists of userAgents for which the element is always rendered

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-primitive-injector
Description: > Description
Latest version: 1.2.0

# PrimitiveInjector

> Description

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

## Installation

```sh
$ npm install @s-ui/react-primitive-injector
```

## Usage

### Basic usage

#### Import package and use the component

```js
import Injector from '@s-ui/react-primitive-injector'
import {Fragment} from 'react'

const Component = ({
  children,
  className = 'injectorClassName',
  injectedProp = 'injectedProp',
  ignoredProp = false
}) => {
  return (
    <Injector
      className={className}
      injectedProp={injectedProp}
      ignoredProp={ignoredProp}
    >
      <Children className="childrenClassName" ignoredProp keptProp />
      <Fragment>
        <Children className="fragmentChildrenClassName" ignoredProp keptProp />
      </Fragment>
      {children}
    </Injector>
  )
}
```

The package also provides the default injector behavior as an equivalent function using:

```js
import {inject} from '@s-ui/react-primitive-injector'

// inject(children<React.Node/>, settings<Array>{props, combine, proviso}</Array)

const Component = ({
  children,
  className = 'injectorClassName',
  injectedProp = 'injectedProp',
  ignoredProp = false
}) => {
  return inject(
    <>
      <Children className="childrenClassName" ignoredProp keptProp />
      <>
        <Children className="fragmentChildrenClassName" ignoredProp keptProp />
      </>
      {children}
    </>,
    [{props: {className, injectedProp, ignoredProp}}]
  )
}
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-primitive-link-box
Description: > Description
Latest version: 1.2.0

# PrimitiveLinkBox

> Description

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/primitive/linkBox/)
[![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,primitive,linkBox)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-primitive-link-box?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-primitive-link-box)

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

## Installation

```sh
$ npm install @s-ui/react-primitive-link-box
```

## Usage

### Basic usage

#### Import package and use the component

```js
import PrimitiveLinkBox from '@s-ui/react-primitive-link-box'

return (<PrimitiveLinkBox />)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-primitive-link-box/lib/index';
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-primitive-loading-icon
Description: > Description
Latest version: 1.2.0

# PrimitiveLoadingIcon

> Description

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

## Installation

```sh
$ npm install @s-ui/react-primitive-loading-icon
```

## Usage

### Basic usage

#### Import package and use the component

```js
import PrimitiveLoadingIcon from '@s-ui/react-primitive-loading-icon'

return (<PrimitiveLoadingIcon />)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-primitive-loading-icon/lib/index';
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-primitive-typography
Description: > Description
Latest version: 0.3.0

# PrimitiveTypography

> Description

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

## Installation

```sh
$ npm install @s-ui/react-primitive-typography
```

## Usage

### Basic usage

#### Import package and use the component

```js
import PrimitiveTypography from '@s-ui/react-primitive-typography'

return (<PrimitiveTypography />)
```

#### Import the styles (Sass)

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


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-primitive-visually-hidden
Description: > Visually hides content while preserving it for assistive technology.
Latest version: 1.1.0

# PrimitiveVisuallyHidden

> Visually hides content while preserving it for assistive technology.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/primitive/visuallyHidden/)
[![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,primitive,visuallyHidden)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-primitive-visually-hidden?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-primitive-visually-hidden)

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

## Installation

```sh
$ npm install @s-ui/react-primitive-visually-hidden --save
```

## Usage

### Basic usage

```js
import VisuallyHidden from '@s-ui/react-primitive-visually-hidden'

return <VisuallyHidden>A</VisuallyHidden>
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/primitive/visuallyHidden/demo).**
npm package: @s-ui/react-rating-icons
Description: > Description
Latest version: 1.7.0

# ProfileRating

> Description

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

## Installation

```sh
$ npm install @s-ui/react-rating-icons --save
```

## Usage

The sui-rating-icons is made to work with any icon that we provide.
The profile rating will handle with the icon and our specifications and will build a rating menu to show up to our user their rating information

The ProfileRating accepts the following properties:

- *rating*: The rating of our user, if our user have 6/10 stars we should pass 6 you can pass it with decimals too. 6.5, 7, 7.5...
- *maxValue*: The max value that our rating have. For example if it have 10 max star we should put 10.
- *icon*: Our Icon to be used as a rating
- *iconSize*: Our icon size, this one is important to make width calcs on the mask
- *spacingBetween[OPTIONAL]*: A margin will be added to our we set this to a number(px),
- *fillColor[OPTIONAL]*: The color used for the *FILLED* mask. If you don't provide any color, it will fallback to our component scss variable $fill-profile-rating-filled
- *emptyColor[OPTIONAL]*: The color used for the *EMPTY* mask. If you don't provide any color, it will fallback to our component scss variable $fill-profile-rating-empty

```js
import ProfileRating from '@s-ui/react-rating-icons'

return (<ProfileRating
                        rating={9}
                        maxValue={10}
                        icon={() => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 8 8">
                                         <path d="M2 0c-.55 0-1.04.23-1.41.59-.36.36-.59.85-.59 1.41 0 .55.23 1.04.59 1.41l3.41 3.41 3.41-3.41c.36-.36.59-.85.59-1.41 0-.55-.23-1.04-.59-1.41-.36-.36-.85-.59-1.41-.59-.55 0-1.04.23-1.41.59-.36.36-.59.85-.59 1.41 0-.55-.23-1.04-.59-1.41-.36-.36-.85-.59-1.41-.59z"
                                         transform="translate(0 1)" />
                                       </svg>}
                        iconSize={28}
                        spacingBetween={5}
                        fillColor={'#ff0000'}
                        emptyColor={'#ffc1c1'}
/>)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-script-criteo
Description: React component to load criteo with given props.
Latest version: 1.6.0

# ScriptCriteo

> Component to load criteo with given props.

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

## Installation

```sh
$ npm install @s-ui/react-script-criteo --save
```

## Usage

### Basic usage

```js
import ScriptCriteo from '@s-ui/react-script-criteo'

return (
  <ScriptCriteo
    accountIds={[1234, 456]}
    customerId="12345678"
    siteType="m"
    hashedEmail="hashed-email-example"
    pageEvent={{ event: 'viewHome' }}
  />
)
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/script/criteo/demo).**
npm package: @s-ui/react-script-json-ld
Description: > Small script loader for structured data (json+ld)
Latest version: 1.4.0

# ScriptJsonLD

> Small script loader for structured data (json+ld)

## Installation

```sh
$ npm install @s-ui/react-script-json-ld
```

## Usage

### Basic usage
```js
import ScriptJsonLD from '@s-ui/react-script-json-ld'

const autoDealerStructuredData = {
  '@context': 'http://schema.org',
  '@type': 'AutoDealer',
  name: 'Dealer name',
  address: {
    '@type': 'PostalAddress',
    streetAddress: 'Avda. Maresme, 133',
    postalCode: '08302',
    addressLocality: 'Mataró'
  },
  image:
    'https://a.ccdn.es/coches/store_images_profesionales/123456_13032018103554.jpg',
  telephone: ['123456789'],
  geo: {
    '@type': 'GeoCoordinates',
    latitude: '41.53194',
    longitude: '2.442895'
  }
}

return (<ScriptJsonLD json={autoDealerStructuredData} />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-script-loader
Description: > Description
Latest version: 1.13.0

# ScriptLoader

> Description

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

This components ensures that the render prop is not executed until the given script has been loaded.
Also you can safely call this component in multiple places with the same src and it will load it only once.


## Installation

```sh
$ npm install @s-ui/react-script-loader --save
```

## Usage

### Basic usage
```js
import ScriptLoader from '@s-ui/react-script-loader'

const src = 'javascript file url'
const stylesheet = 'stylesheet file url'

return (<ScriptLoader src={src} verifier={() => true} isAsync={false} render={() => 'Ready to render!'} stylesheet={stylesheet}/>)
```

**Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/script/loader).**
npm package: @s-ui/react-section-basic
Description: > Just a basic section container wrapped in a `<section>` HTML tag, with customisable margin-bottom between its inner elements and the possibility to add an <hr> separator.
Latest version: 2.9.0

# SectionBasic

> Just a basic section container wrapped in a `<section>` HTML tag, with customisable margin-bottom between its inner elements and the possibility to add an <hr> separator.

## Installation

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

## Usage

### Basic usage
```js
import SectionBasic, {sectionBasicBottomSpacing} from '@s-ui/react-atom-panel'

return (
  <div>
    <SectionBasic
      title='Title of the section'
      separator
      sectionBottomSpacing={sectionBasicBottomSpacing.GIANT}
      headerBottomSpacing={sectionBasicBottomSpacing.XLARGE}
      contentBottomSpacing={sectionBasicBottomSpacing.MEDIUM}>
      <p>This section has a title</p>
      <p>There is a line separator displayed at the bottom of this section as an hr element.</p>
      <p>The margin-bottom of header, content and full section component have been customised.</p>
    </SectionBasic>
    <SectionBasic
      textContent='This section has no title, only text content and default vertical spacing.'
    />
  </div>
)

```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/section/basic/demo).**
npm package: @s-ui/react-section-info
Description: A responsive `section` container to display custom information based on Title and Content structure.
Latest version: 1.16.0

# SectionInfo

A responsive `section` container to display custom information based on Title and Content structure.

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

## Installation

```sh
$ npm install @schibstedspain/sui-section-info --save
```

## Usage
Provide an `string` to a `title` prop and wrap a child component as a `content`. If no `title` prop is provided or contains an empty string `''` the corresponding Title DOM element won't be rendered.

Check out **Basic Usage** section to get further info.

Set custom values to container sizing and flex properties using the following Sass variables:

```scss
// Max-width Section container value
$mw-section-info: 670px !default;

$c-sui-section-info-border: $c-gray-light !default;
$bdb-section-info: 1px solid $c-sui-section-info-border !default;

// Flex Grow Title and Container
$fg-section-info-title: 0 !default;
$fg-section-info-content: 0 !default;

// Flex Shrink Title and Container
$fs-section-info-title: 0 !default;
$fs-section-info-content: 1 !default;

// Flex Basis Title and Container
$fb-section-info-title: 200px !default;
$fb-section-info-content: 100% !default;

// Title and Container font-sizing
$fz-section-info-title: $fz-l !default;
$fz-section-info-content: $fz-m !default;

// Margins
$m-section-info-title: 0 !default;
$m-section-info-content: 0 !default;

// Paddings
$p-section-info-title: $p-l $p-m !default;
$p-section-info-content: 0 $p-m !default;
```

### Basic usage
```js
import SectionInfo from '@schibstedspain/sui-section-info'

const extras = 'Extras'
const extrasElement = <ul><li>air conditioning</li><li>elevator</li><li>parking</li></ul>

return (
  <div>
    <SectionInfo title={extras}>
      {extrasElement}
    </SectionInfo>
  </div>
)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-services-markdown
Description: Allows you to fetch an external markdown file and show it parsed in your React application. Keep in mind this functionality doesn't offer server-side rendering, so your Markdown content will be loaded only in the client.
Latest version: 1.16.0

# ServiceMarkdown

Allows you to fetch an external markdown file and show it parsed in your React application. Keep in mind this functionality doesn't offer server-side rendering, so your Markdown content will be loaded only in the client.

For the sake of the performance, it asynchronously loads the needed dependencies in order to be optimized for your bundle.

If you wish to add styling to the parsed markdown, you should wrap this component with another element with a className that will allow you to style it pointing directly to the descendant HTML elements.

## Installation

```sh
$ npm install @s-ui/react-services-markdown --save
```

## Usage

### Basic usage

#### Loading from external URL
```js
import ServiceMarkdown from '@s-ui/react-services-markdown'

return (
  <article className='myMarkdownFile'>
    <ServiceMarkdown src="https://mycdn.com/myfile.md"/>
  </article>
)
```

#### Using markdown content directly
```js
import ServiceMarkdown from '@s-ui/react-services-markdown'

const markdownContent = `
# Hello World
This is **bold** text and this is *italic* text.

- Item 1
- Item 2
- Item 3
`

return (
  <article className='myMarkdownFile'>
    <ServiceMarkdown content={markdownContent}/>
  </article>
)
```

```sass
@import '~@s-ui/theme/lib/index';

.myMarkdownFile {
  padding: $p-l;

  p {
    color: $c-gray;
    font-size: $fz-m;
  }
}
```

> **Find full description and more examples in the [demo page](/workbench/services/markdown/demo).**
npm package: @s-ui/react-sticky-content
Description: Component wrapper to set position fixed or sticky to children node.
Latest version: 1.8.0

# StickyContent

> Just a wrapper to set a position "fixed" or position "sticky"  (relative until component is out of view when scrolling, and then fixed) to your component.

## Installation

```sh
$ npm install @s-ui/react-sticky-content --save
```

## Usage

### Basic usage
```js
import StickyContent from '@s-ui/react-sticky-content'

return (
  <div>
    <StickyContent
      sticky
      scrollingElement={document.body}
      position='top'>
      <span>Sticky content: when document.body.scrollTop is higher than components top position, this text will be fixed to top.</span>
    </StickyContent>

    <StickyContent
      fixed
      fullWidth
      position='bottom'>
      <span>Fixed content: position will be fixed to bottom</span>
    </StickyContent>
  </div>
)
```


> **Find full description and more examples in the [demo page](../demo).**
npm package: @s-ui/react-table-basic
Description: > Table basic to show tabular information.
Latest version: 1.5.0

# TableBasic

> Table basic to show tabular information.

![Table Basic](./assets/preview.png)

## Installation

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

## Usage

### Basic usage

```js
import TableBasic from '@s-ui/react-table-basic'

const contentHeadMook = [
  'Versión',
  'Año',
  'Combustible',
  'Potencia',
  'Precio',
  ''
]

const contentBodyMook = [
  [
    {
      content: 'Volkswagen Golf Edition 1.0 TSI 85kW',
      type: 'th',
      isNowrap: true
    },
    {content: '2019'},
    {content: 'Gasolina'},
    {content: '115vc'},
    {content: 'Desde 24.000€'},
    {content: 'Más información'}
  ],
  [
    {
      content: 'Volkswagen Golf Edition 1.0 TSI 85kW',
      type: 'th',
      isNowrap: true
    },
    {content: '2019'},
    {content: 'Gasolina'},
    {content: '115vc'},
    {content: 'Desde 24.000€'},
    {content: 'Más información'}
  ]
]

return <TableBasic head={contentHeadMook} body={contentBodyMook} />
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-tag-selectable-list
Latest version: 1.15.0

### TagSelectableList


# @s-ui/react-tag-selectableList
> A React component that show a selectable tag list with optional button "all" for select or unselect all items

## Installation

```sh
npm install @s-ui/react-tag-selectableList --save
```


## Usage

```javascript
import TagSelectableList from '@s-ui/react-tag-selectableList'
```

```html
const tags = [
  {
    label: 'accusantium',
    value: 1
  },
  {
    label: 'et quibusdam',
    value: 2
  }
]

function onChange (values) {
  console.log('onChange', values)
}

const checkIcon = ({ svgClass }) => <svg className={svgClass} viewBox='0 0 64 64'><path d='M21.92,54.91,2.51,33.34a2,2,0,0,1,3-2.68L22.08,49.09,58.59,12.59a2,2,0,0,1,2.83,2.83Z' /></svg>

<TagSelectableList tagsList={tags} onChange={onChange} all="All options" checkIcon={checkIcon} />
```

* `if` parameter "All" is defined, `then show these button
npm package: @s-ui/react-tcf-first-layer
Description: > Description
Latest version: 1.15.0

# TcfFirstLayer

> Description

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

## Installation

```sh
$ npm install @s-ui/react-tcf-first-layer
```

## Usage

### Basic usage

```js
import TcfFirstLayer from '@s-ui/react-tcf-first-layer'

return (
  <TcfFirstLayer
    loadUserConsent
    getVendorList
    saveUserConsent
    openSecondLayer
  />
)
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-tcf-second-layer
Description: > Description
Latest version: 1.16.0

# TcfSecondLayer

> Description

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

## Installation

```sh
$ npm install @s-ui/react-tcf-second-layer
```

## Usage

### Basic usage

```js
import TcfSecondLayer from '@s-ui/react-tcf-second-layer'

return <TcfSecondLayer isOpen loadUserConsent saveUserConsent getVendorList />
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-tcf-services
Description: > Description
Latest version: 2.5.0
Deprecated: no longer maintained, @adv-ui/adit-boros-tcf-ui-consent should be used

# TcfServices

> Description

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

## Installation

```sh
$ npm install @s-ui/react-tcf-services
```

## Usage

### Basic usage
```js
import TcfServices from '@s-ui/react-tcf-services'

return (
<TcfServices>
    {service => (
        <TCFContainer
          getVendorList={() => service.getVendorList()}
          loadUserConsent={() => service.loadUserConsent()}
          saveUserConsent={({purpose, vendor}) =>
            service.saveUserConsent({purpose, vendor})
          }
        />
    )}
  </TCFServices>)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-tcf-ui
Description: > Description
Latest version: 2.19.0
Deprecated: no longer maintained, @adv-ui/adit-boros-tcf-ui-consent should be used

# TcfUi

> Description

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

## Installation

```sh
$ npm install @s-ui/react-tcf-ui
```

## Usage

### Basic usage
```js
import TcfUi from '@s-ui/react-tcf-ui'

return (<TcfUi />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-thumbnail-basic
Description: > Shows an image with an optional caption text. Can also be used as a link
Latest version: 1.20.0

# ThumbnailBasic

> Shows an image with an optional caption text. Can also be used as a link

## Installation

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

## Usage

### Basic usage
```js
import ThumbnailBasic from '@s-ui/react-thumbnail-basic'

return (
  <ThumbnailBasic
    src='image source'
    alt='image alt'
    href='link'
    target='link target'
    captionText='Show!'
    placeholder={
      <img src='image to be shown until loading thumbnailBasic src' />
    }
  />
)
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/thumbnail/basic/demo).**