- {JSON.stringify(values, 0, 2)}
-
- )}
-
- {`import { Link as RouterLink } from 'react-router-dom'
-
-
- Introduction
- Components
- Breadcrumb
- `}
-
-
-## Last child clickable
-
-By default we removed clickable the last child. You can change this by set to false `lastChildNotClickable`
-
-```jsx
-{`require('@welcome-ui/icons.font/fonts/welcome-icon-font.css')`}
-
-Here is an example on how to use css class to display icons:
-
-```jsx row
-
-
-
-```
-
-## Available icons
-
-**Note**: You can click on an icon to copy its name.
-
-### Arrows
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'arrows', isIconFont: true })
-}
-```
-
-### Actions
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'actions', isIconFont: true })
-}
-```
-
-### Miscellaneous
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'miscellaneous', isIconFont: true })
-}
-```
-
-### WTF
-
-```jsx withCode=false
-function() {
- return IconsList({ name: "wtf", isIconFont: true })
-}
-```
-
-### Files
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'files', isIconFont: true })
-}
-```
-
-### Player
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'player', isIconFont: true })
-}
-```
-
-### Avatar
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'avatar', isIconFont: true })
-}
-```
-
-### Markdown
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'markdown', isIconFont: true })
-}
-```
-
-### Table
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'table', isIconFont: true })
-}
-```
-
-### Brands
-
-```jsx withCode=false
-function() {
- return IconsList({ name: 'brands', isIconFont: true })
-}
-```
-
-## Packages
-
-### Dependencies
-
-
-{`import { Link as RouterLink } from 'react-router-dom'
-
-
- Jobs
-`}
-
-
-## Properties
-
-
- {`[
- { name: 'bold', title: 'Bold' },
- { name: 'italic', title: 'Italic' },
- { name: 'strikethrough', title: 'Strikethrough' },
- { name: 'link', title: 'Link' },
- { name: 'divider' },
- { name: 'heading_1', title: 'Heading 1' },
- { name: 'heading_2', title: 'Heading 2' },
- { name: 'divider' },
- { name: 'unordered_list', title: 'Unordered list' },
- { name: 'ordered_list', title: 'Ordered list' },
- { name: 'divider' },
- { name: 'code', title: 'Code' },
- { name: 'quote', title: 'Quote' },
- { name: 'divider' },
- { name: 'emoji', icon: '🙂', title: 'Emoji' }
-]`}
-
-
-## Actions
-
-You can add some actions on the bottom of the textarea with `actions` childrens. We calculate automatically the height of actions.
-
-```jsx
-function () {
- const [value, setValue] = React.useState('')
-
- const handleChange = event => {
- setValue(event.target.value)
- }
-
- return (
-
- {`{
- Search: [
- {Title: "Big Fish", Year: "2003", imdbID: "tt0319061", Type: "movie",…},
- {Title: "A Fish Called Wanda", Year: "1988", imdbID: "tt0095159", Type: "movie",…},
- {Title: "Fish Tank", Year: "2009", imdbID: "tt1232776", Type: "movie",…},
- {Title: "Rumble Fish", Year: "1983", imdbID: "tt0086216", Type: "movie",…},
- {Title: "Cold Fish", Year: "2010", imdbID: "tt1632547", Type: "movie",…},
- ],
- totalResults: "895",
- Response: "True"
-}`}
-
-
-We could pass the following prop to the `Search` component:
-
-
- {`search={async function asyncSearch(query) {
- const response = await fetch('https://www.omdbapi.com?apikey=' + YOUR_API_KEY + '&s=' + query)
- const data = await response.json()
- return data.Search
-}}`}
-
-
-To use option groups, you should return the results as follows:
-
-
- {`[
- {label: 'My first group label', options: [movie1, movie2]}
- {label: 'My second group label', options: [serie1, serie2]}
-]`}
-
-
-### renderItem
-
-A component that renders each of the results in the list e.g.
-
-{`renderItem={item => {item.Title} ({item.Year})}`}
-
-### itemToString
-
-A function that converts a selected result to a string e.g.
-
-{`itemToString={item => item && item.Title}`}
-
-### All properties
-
-The rest of the props are below:
-
-{`export default ${themeValues().space}`}
-
-## Borders
-
-By default, we have a border radius on components. You can remove it by set to 0 the radii borders. You can also configure the width of the border.
-
-{`export default ${themeValues().radii}`}
-
-## Breakpoints (screens)
-
-We use [screens from xstyled](https://xstyled.dev/docs/responsive-design/). Default sizes from the core theme are below. (Note: values are taken from [this article](https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a)).
-
-{`export default ${themeValues().screens}`}
-
-### Usage
-
-```jsx column
-{`export default ${themeValues().fonts}`}
-
-{themeTag()}
-
-You can check all our theme objects on each packages/component on file `theme.js`.
-
-### How to customize the component
-
-The entry is always in plurial (tags, buttons, etc.)
-
-```jsx live=false
-import React from 'react'
-import { createTheme, WuiProvider } from '@welcome-ui/core'
-import { Button } from '@welcome-ui/button'
-
-const yourTheme = {
- tags: {
- variants: {
- default: {
- backgroundColor: '#010101',
- color: '#FFF',
- },
- primary: {
- backgroundColor: '#FFF000',
- color: '#000',
- },
- },
- sizes: {
- sm: {
- padding: 10,
- height: 10,
- fontSize: 12,
- },
- md: {
- padding: 10,
- height: 14,
- fontSize: 14,
- },
- },
- },
-}
-const theme = createTheme(yourTheme)
-
-export default function Root() {
- return (
- {themeValues()}
-
-