JSPM

`MoleculeAutosuggest` is an input that will display a list of suggestions while values are entered It allows Single and Multiple Selection

SUI Breadcrumb Basic

> 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.

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

> 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.

`MoleculePhotoUploader` is a component that lets you drag and drop images on it, or click it to add images. Also, on mobile, let you add photos directly taken with the camera.

AtomImage is a component that loads an image inside, maintaining all the accesibility attributes. This component can be set to show a placeholder image, a skeleton and/or a spinner while the final image is being loaded. This component will also show an Er

> Help Text is a feedback that the system gives users to make them clearly understand which information is required

`MoleculeButtonGroup` is a component that wraps a group of buttons, related in content.

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

`MoleculeSelectField` is a component that wraps a composition of Label + some input (input, textarea, ...) + Validation Messages for a [`MoleculeSelect`](https://sui-components.now.sh/workbench/molecule/select/demo) component

`MoleculePagination` is a component that displays a range of pages with the current page highlighted and the proper buttons to navigate across the available pages in the entire range of total pages

> Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.

> The Label is the name of the associated field, that explains what is the about. It should be clear, concise and short.

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

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

Display the loading state of a component while avoiding layout shift

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

`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.

Minimalistic and smooth touch carousel component for React ⚛️

The Avatar component is the representation of a user.

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

> Visually hides content while preserving it for assistive technology.

AtomUpload is a component that handles the file selection (via click or drag & drop) and displays the different statuses of the uploading process

AtomCard is a component that structures two main containers (media & info for example), with the purpose of giving information about a product/client/article and linking to more detailed information about it.

> Description

> The keyboard key component exists to show which key or combination of keys performs a given action.