[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconCaretLeft.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import CaretLeft from './components/icon/CaretLeft/index'

export default CaretLeft

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/ToastContext.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { ToastContext } from './components/ToastProvider/index'

export default ToastContext

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/PageBlock.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PageBlock from './components/PageBlock/index'

export default PageBlock

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Pagination.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Pagination from './components/Pagination/index'

export default Pagination

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconOrderedList.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import IconOrderedList from './components/icon/OrderedList/index'

export default IconOrderedList

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Table.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Table from './components/Table/index'

export default Table

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/PasswordInput.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PasswordInput from './components/PasswordInput/index'

export default PasswordInput

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/package.json from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.styleguide",
  "dependencies": {
    "lodash": "^4.17.11",
    "react-color": "^2.17.0",
    "react-datepicker": "^2.0.0",
    "react-dom": "^16.9.0",
    "react-dropzone": "^10.1.8",
    "react-number-format": "^4.0.6",
    "react-outside-click-handler": "^1.2.2",
    "react-overlays": "^1.1.2",
    "react-responsive-modal": "^3.1.0",
    "react-select": "^2.1.2",
    "react-sticky": "^6.0.3",
    "react-virtualized": "^9.19.1",
    "recharts": "^1.8.5",
    "use-media": "^1.4.0",
    "uuid": "^3.3.2",
    "vtex-tachyons": "^2.10.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@types/classnames": "^2.2.9",
    "@types/jest": "^24.0.15",
    "@types/lodash": "^4.14.137",
    "@types/node": "^12.6.2",
    "@types/react": "^16.8.23",
    "@types/react-dom": "^16.9.0",
    "@types/recharts": "^1.8.0"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/InputButton.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
export { default } from './components/InputButton'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconCaretUp.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import CaretUp from './components/icon/CaretUp/index'

export default CaretUp

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconImage.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import IconImage from './components/icon/Image/index'

export default IconImage

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconCalendar.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Calendar from './components/icon/Calendar/index'

export default Calendar

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconArrowBack.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ArrowBack from './components/icon/ArrowBack/index'

export default ArrowBack

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Alert.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Alert from './components/Alert/index'

export default Alert

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Tag.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Tag from './components/Tag/index'

export default Tag

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Checkbox.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Checkbox from './components/Checkbox/index'

export default Checkbox

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/ButtonPlain.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { default } from './components/ButtonPlain'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconPrinter.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Printer from './components/icon/Printer/index'

export default Printer

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Divider.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import Divider from './components/Divider/index'

export default Divider

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconBold.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import IconBold from './components/icon/Bold'

export default IconBold

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconArrowUp.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ArrowUp from './components/icon/ArrowUp/index'

export default ArrowUp

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconExternalLinkMini.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ExternalLinkMini from './components/icon/ExternalLinkMini/index'

export default ExternalLinkMini

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/RadioGroup.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import RadioGroup from './components/RadioGroup/index'

export default RadioGroup

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/InputSearch.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import InputSearch from './components/InputSearch/index'

export default InputSearch

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconInfo.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Info from './components/icon/Info/index'

export default Info

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/EXPERIMENTAL_useTableVisibility.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { default } from './components/EXPERIMENTAL_Table/hooks/useTableVisibility'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconUnorderedList.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import IconUnorderedList from './components/icon/UnorderedList/index'

export default IconUnorderedList

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconHelp.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Help from './components/icon/Help/index'

export default Help

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/ProgressBar.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ProgressBar from './components/ProgressBar/index'

export default ProgressBar

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconColumns.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Columns from './components/icon/Columns/index'

export default Columns

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/ScatterChart.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import ScatterChart from './components/EXPERIMENTAL_Charts/ScatterChart'

export default ScatterChart

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/EXPERIMENTAL_useTableSort.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { default } from './components/EXPERIMENTAL_Table/hooks/useTableSort'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Button.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Button from './components/Button/index'

export default Button

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconUpload.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Upload from './components/icon/Upload/index'

export default Upload

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconText.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import IconText from './components/icon/Text/index'

export default IconText

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconItalic.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import IconItalic from './components/icon/Italic/index'

export default IconItalic

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/TimePicker.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import TimePicker from './components/TimePicker/index'

export default TimePicker

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconFailure.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Failure from './components/icon/Failure/index'

export default Failure

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Slider.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Slider from './components/Slider/index'

export default Slider

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/ButtonWithIcon.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import ButtonWithIcon from './components/ButtonWithIcon/index'

export default ButtonWithIcon

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconDensity.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Density from './components/icon/Density/index'

export default Density

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Card.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Card from './components/Card/index'

export default Card

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/FloatingActionBar.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { default } from './components/FloatingActionBar/index'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconBars.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Bars from './components/icon/Bars/index'

export default Bars

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconSuccess.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Success from './components/icon/Success/index'

export default Success

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconCog.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Cog from './components/icon/Cog/index'

export default Cog

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Radio.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Radio from './components/Radio/index'

export default Radio

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Box.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import Box from './components/Box/index'

export default Box

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconOptionsDots.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import OptionsDots from './components/icon/OptionsDots/index'

export default OptionsDots

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/EXPERIMENTAL_TableTree.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { default } from './components/EXPERIMENTAL_TableTree/index'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Modal.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Modal from './components/Modal/index'

export default Modal

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/LineChart.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import LineChart from './components/EXPERIMENTAL_Charts/LineChart'

export default LineChart

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconInlineGrid.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import InlineGrid from './components/icon/InlineGrid/index'

export default InlineGrid

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconCaretDown.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import CaretDown from './components/icon/CaretDown/index'

export default CaretDown

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/Input.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Input from './components/Input/index'

export default Input

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/withToast.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { withToast } from './components/ToastProvider/index'

export default withToast

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconDeny.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Deny from './components/icon/Deny/index'

export default Deny

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/EXPERIMENTAL_useCheckboxTree.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { default } from './components/EXPERIMENTAL_useCheckboxTree'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/EXPERIMENTAL_useTableMeasures.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export { default } from './components/EXPERIMENTAL_Table/hooks/useTableMeasures'

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconDelete.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Delete from './components/icon/Delete/index'

export default Delete

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/IconCaretRight.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import CaretRight from './components/icon/CaretRight/index'

export default CaretRight

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/BarChart.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import BarChart from './components/EXPERIMENTAL_Charts/BarChart'

export default BarChart

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/DatePicker.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import DatePicker from './components/DatePicker/index'

export default DatePicker

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/ToastConsumer.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { ToastConsumer } from './components/ToastProvider/index'

export default ToastConsumer

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/FlexLayout/Col.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages } from 'react-intl'
import useResponsiveValues from '../ResponsiveValues/useResponsiveValues'
import useCssHandles from '../CssHandles/useCssHandles'

import {
  FlexLayoutTypes,
  useFlexLayoutContext,
  FlexLayoutContextProvider,
} from './components/FlexLayoutContext'
import {
  TachyonsScaleInput,
  parseTachyonsGroup,
  parseMargins,
  parsePaddings,
  parseBorders,
} from './modules/valuesParser'

enum VerticalAlign {
  top = 'top',
  middle = 'middle',
  bottom = 'bottom',
}

enum HorizontalAlign {
  left = 'left',
  right = 'right',
  center = 'center',
}

interface Props extends Flex, Gap, Border {
  blockClass?: string
  height?: string
  marginLeft: TachyonsScaleInput
  marginRight: TachyonsScaleInput
  paddingLeft: TachyonsScaleInput
  paddingRight: TachyonsScaleInput
  preventVerticalStretch?: boolean
  verticalAlign?: VerticalAlign
  horizontalAlign?: HorizontalAlign
}

const parseVerticalAlign = (input?: string) => {
  switch (input) {
    case VerticalAlign.middle:
      return 'justify-center'
    case VerticalAlign.bottom:
      return 'justify-end'
  }
  return ''
}

const parseHorizontalAlign = (input?: string) => {
  switch (input) {
    case HorizontalAlign.center:
      return 'items-center'
    case HorizontalAlign.right:
      return 'items-end'
  }
  return ''
}

const CSS_HANDLES = ['flexCol', 'flexColChild'] as const

const Col: StorefrontFunctionComponent<Props> = ({ children, ...props }) => {
  const {
    colGap,
    rowGap,
    marginLeft,
    marginRight,
    paddingLeft,
    paddingRight,
    border,
    borderWidth,
    borderColor,
    grow,
    preventVerticalStretch,
    verticalAlign,
    horizontalAlign,
    blockClass,
  } = useResponsiveValues(props) as Props

  const context = useFlexLayoutContext()
  const handles = useCssHandles(CSS_HANDLES, {blockClass})

  const gaps = parseTachyonsGroup({
    colGap: colGap != null ? colGap : context.colGap,
    rowGap: rowGap != null ? rowGap : context.rowGap,
  })

  const margins = parseMargins({
    marginLeft,
    marginRight,
  })

  const paddings = parsePaddings({
    paddingLeft,
    paddingRight,
  })

  const borders = parseBorders({
    border,
    borderWidth,
    borderColor,
  })

  if (context.parent === FlexLayoutTypes.COL) {
    console.warn(
      'A `flex-layout.col` is being inserted directly into another `flex-layout.col`. This might might have unpredicted behaviour.'
    )
  }

  if (context.parent === FlexLayoutTypes.NONE) {
    console.warn(
      'A `flex-layout.col` block is being inserted directly into the page, but it needs to be inserted into a `flex-layout.row` block.'
    )
    return null
  }

  const vertical = parseVerticalAlign(verticalAlign)
  const horizontal = parseHorizontalAlign(horizontalAlign)

  const rowsNum = React.Children.count(children)

  return (
    <FlexLayoutContextProvider parent={FlexLayoutTypes.COL} {...gaps}>
      <div
        className={`${handles.flexCol} ${
          grow ? 'flex-grow-1' : ''
        } ${margins} ${paddings} ${borders} ${vertical} ${horizontal} flex flex-column h-100 w-100`}
      >
        {React.Children.map(children, (row, i) => {
          const isLast = i === rowsNum - 1
          const rowGap = isLast ? 0 : gaps.rowGap

          return (
            <div
              key={i}
              className={`${handles.flexColChild} pb${rowGap}`}
              style={{
                height:
                  preventVerticalStretch || verticalAlign ? 'auto' : '100%',
              }}
            >
              {row}
            </div>
          )
        })}
      </div>
    </FlexLayoutContextProvider>
  )
}

const messages = defineMessages({
  title: {
    defaultMessage: '',
    id: 'admin/editor.column.title',
  },
  description: {
    defaultMessage: '',
    id: 'admin/editor.column.description',
  },
})

Col.schema = {
  title: messages.title.id,
  description: messages.description.id,
}

export default Col as any

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/FlexLayout/Row.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages } from 'react-intl'
import useCssHandles from '../CssHandles/useCssHandles'

import {
  FlexLayoutTypes,
  FlexLayoutContextProvider,
  useFlexLayoutContext,
} from './components/FlexLayoutContext'

import { useResponsiveWidth } from './hooks/responsiveWidth'
import {
  parseTachyonsGroup,
  TachyonsScaleInput,
  parseMargins,
  parsePaddings,
  parseBorders,
} from './modules/valuesParser'

import styles from './Row.css'

enum HorizontalAlign {
  left = 'left',
  right = 'right',
  center = 'center',
}

const HORIZONTAL_ALIGN_MAP = {
  left: 'justify-start',
  center: 'justify-center',
  right: 'justify-end',
}

enum ColSizing {
  equal = 'equal',
  auto = 'auto',
}

enum ColJustify {
  between = 'between',
  around = 'around',
}

const JustifyValues = {
  [ColJustify.between]: 'justify-between',
  [ColJustify.around]: 'justify-around',
}

const CSS_HANDLES = ['flexRowContent'] as const

export interface Props extends Flex, Gap, Border {
  blockClass?: string
  marginTop: TachyonsScaleInput
  marginBottom: TachyonsScaleInput
  paddingTop: TachyonsScaleInput
  paddingBottom: TachyonsScaleInput
  preserveLayoutOnMobile?: boolean
  preventHorizontalStretch?: boolean
  preventVerticalStretch?: boolean
  horizontalAlign?: HorizontalAlign
  colSizing?: ColSizing
  colJustify?: ColJustify
}

const Row: StorefrontFunctionComponent<Props> = ({
  children,
  colGap,
  rowGap,
  marginTop,
  marginBottom,
  paddingTop,
  paddingBottom,
  border,
  borderWidth,
  borderColor,
  preserveLayoutOnMobile,
  preventHorizontalStretch,
  preventVerticalStretch,
  horizontalAlign,
  colSizing,
  colJustify = ColJustify.between,
  blockClass,
}) => {
  const context = useFlexLayoutContext()
  const handles = useCssHandles(CSS_HANDLES, {blockClass})

  const gaps = parseTachyonsGroup({
    colGap: colGap != null ? colGap : context.colGap,
    rowGap: rowGap != null ? rowGap : context.rowGap,
  })

  const margins = parseMargins({
    marginTop,
    marginBottom,
  })

  const paddings = parsePaddings({
    paddingTop,
    paddingBottom,
  })

  const borders = parseBorders({
    border,
    borderWidth,
    borderColor,
  })

  const { cols, breakOnMobile } = useResponsiveWidth(children, {
    preserveLayoutOnMobile,
  })

  if (context.parent === FlexLayoutTypes.ROW) {
    console.warn(
      'A flex-row is being inserted directly into another flex-row. This might have unpredicted behaviour.'
    )
  }

  const isSizingAuto = colSizing === ColSizing.auto

  const justifyToken =
    JustifyValues[colJustify] || JustifyValues[ColJustify.between]

  const horizontalAlignClass =
    HORIZONTAL_ALIGN_MAP[horizontalAlign || HorizontalAlign.left] ||
    HORIZONTAL_ALIGN_MAP.left

  return (
    <FlexLayoutContextProvider parent={FlexLayoutTypes.ROW} {...gaps}>
      <div
        className={`${
          breakOnMobile ? 'flex-none flex-ns' : 'flex'
        } ${margins} ${paddings} ${borders} ${horizontalAlignClass} ${
          isSizingAuto ? justifyToken : ''
        } ${handles.flexRowContent} items-stretch w-100`}
      >
        {cols.map((col, i) => {
          const isLast = i === cols.length - 1
          const colGap = isLast ? 0 : gaps.colGap
          const rowGap = isLast ? 0 : gaps.rowGap

          return (
            <div
              key={i}
              className={`${
                /** If it breaks line on mobile, use the rowGap as bottom padding */
                breakOnMobile
                  ? `pr${colGap}-ns pb${rowGap} pb0-ns`
                  : `pr${colGap}`
              } ${preventVerticalStretch ? '' : 'items-stretch'} ${
                preventHorizontalStretch ? '' : styles.stretchChildrenWidth
              } ${col.width === 'grow' ? 'flex-grow-1' : ''} flex`}
              style={{
                width:
                  preventHorizontalStretch ||
                  (isSizingAuto && !col.hasDefinedWidth)
                    ? 'auto'
                    : breakOnMobile
                    ? '100%'
                    : col.width,
              }}
            >
              {col.element}
            </div>
          )
        })}
      </div>
    </FlexLayoutContextProvider>
  )
}

const messages = defineMessages({
  title: {
    defaultMessage: '',
    id: 'admin/editor.row.title',
  },
  description: {
    defaultMessage: '',
    id: 'admin/editor.row.description',
  },
})

Row.schema = {
  title: messages.title.id,
  description: messages.description.id,
}

export default Row as any

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/FlexLayout/Row.css from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```css
/** Stretches the width of the children to 100% (except images, which would be distorted. They are then centered)
 * This is done because the direct parent of the children of the Row component is flex now, which changes the
 * way children blocks are rendered (children with display: block of non-flex elements have 100% width, and
 * children of flex elements have the minimum possible width in respect of their content).
 * This can be cancelled with the prop `preventHorizontalStretch`
 */

.stretchChildrenWidth {
  justify-content: center;
}
.stretchChildrenWidth > *:not(img) {
  width: 100%;
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/FlexLayout/FlexLayout.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages } from 'react-intl'
import useCssHandles from '../CssHandles/useCssHandles'
import Container from '../StoreComponents/Container'
import useResponsiveValues from '../ResponsiveValues/useResponsiveValues'

import {
  FlexLayoutTypes,
  useFlexLayoutContext,
} from './components/FlexLayoutContext'
import Row, { Props as RowProps } from './Row'

interface Props extends RowProps {
  fullWidth?: boolean
}

const CSS_HANDLES = ['flexRow'] as const

const FlexLayout: StorefrontFunctionComponent<Props> = props => {
  const responsiveProps = useResponsiveValues(props) as Props
  const { fullWidth } = responsiveProps
  const context = useFlexLayoutContext()
  const handles = useCssHandles(CSS_HANDLES)

  const content = <Row {...responsiveProps} />

  const isTopLevel = context.parent === FlexLayoutTypes.NONE

  if (fullWidth && !isTopLevel) {
    console.warn(
      'Prop `fullWidth` is allowed only on top-level `flex-layout.row` blocks.'
    )
  }

  if (fullWidth || !isTopLevel) {
    return <div className={handles.flexRow}>{content}</div>
  }

  return (
    <div className={handles.flexRow}>
      <Container>{content}</Container>
    </div>
  )
}

const messages = defineMessages({
  title: {
    defaultMessage: '',
    id: 'admin/editor.row.title',
  },
  description: {
    defaultMessage: '',
    id: 'admin/editor.row.description',
  },
})

FlexLayout.schema = {
  title: messages.title.id,
  description: messages.description.id,
}

export default FlexLayout

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/FlexLayout/FlexLayoutDummy.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'

const FlexLayoutDummy = () => {
  console.warn(
    'You are inserting the `flex-layout` block directly. Please use `flex-layout.row` instead.'
  )

  return <span />
}

export default FlexLayoutDummy

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/SliderLayout/SliderLayout.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages } from 'react-intl'
import useListContext from '../ListContext/useListContext'
import useResponsiveValue from '../ResponsiveValues/useResponsiveValue'

import Slider from './components/Slider'
import { SliderContextProvider } from './components/SliderContext'

const SliderLayout: StorefrontFunctionComponent<
  SliderLayoutProps & SliderLayoutSiteEditorProps
> = ({
  totalItems,
  infinite = false,
  showNavigationArrows = 'always',
  showPaginationDots = 'always',
  usePagination = true,
  fullWidth = true,
  arrowSize = 25,
  children,
  ...contextProps
}) => {
  const { list } = useListContext() || [] as any
  const totalSlides = totalItems || React.Children.count(children) + list.length
  const responsiveArrowIconSize = useResponsiveValue(arrowSize)

  return (
    <SliderContextProvider totalItems={totalSlides} {...contextProps}>
      <Slider
        infinite={infinite}
        showNavigationArrows={showNavigationArrows}
        showPaginationDots={showPaginationDots}
        totalItems={totalSlides}
        usePagination={usePagination}
        fullWidth={fullWidth}
        arrowSize={responsiveArrowIconSize}
      >
        {children}
      </Slider>
    </SliderContextProvider>
  )
}

const messages = defineMessages({
  sliderTitle: {
    id: 'admin/editor.slider-layout.title',
    defaultMessage: '',
  },
  sliderInfinite: {
    id: 'admin/editor.slider-layout.infinite',
    defaultMessage: '',
  },
  sliderShowNavigation: {
    id: 'admin/editor.slider-layout.showNavigation',
    defaultMessage: '',
  },
  sliderShowPaginationDots: {
    id: 'admin/editor.slider-layout.showPaginationDots',
    defaultMessage: '',
  },
  sliderUsePagination: {
    id: 'admin/editor.slider-layout.usePagination',
    defaultMessage: '',
  },
})

SliderLayout.schema = {
  title: messages.sliderTitle.id,
  description: messages.sliderTitle.id,
  type: 'object',
  properties: {
    infinite: {
      default: true,
      title: messages.sliderInfinite.id,
      type: 'boolean',
    },
    showNavigationArrows: {
      default: 'always',
      enum: ['mobileOnly', 'desktopOnly', 'always', 'never'],
      title: messages.sliderShowNavigation.id,
      type: 'string',
    },
    showPaginationDots: {
      default: 'always',
      enum: ['mobileOnly', 'desktopOnly', 'always', 'never'],
      title: messages.sliderShowPaginationDots.id,
      type: 'string',
    },
    usePagination: {
      default: true,
      title: messages.sliderUsePagination.id,
      type: 'boolean',
    },
  },
}

export default SliderLayout as any

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/AddToCartButton/AddToCartButton.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useEffect, useState } from 'react'
import { useMutation } from 'react-apollo'
import {
  FormattedMessage,
  injectIntl,
  WrappedComponentProps,
  defineMessages,
  MessageDescriptor,
} from 'react-intl'
import Button from '../Styleguide/Button'
import Tooltip from '../Styleguide/Tooltip'
import OrderForm from '../OrderManager/OrderForm'
import CheckoutUtils from '../CheckoutResources/Utils'
import useCssHandles from '../CssHandles/useCssHandles'
import { useRuntime } from '../../../../vtex.render-runtime'
import { usePixel } from '../PixelContext/PixelContext'
import { loader } from 'graphql.macro'

import ProductDispatchContext from '../ProductContext/ProductDispatchContext'
import PWAContext from '../StoreResources/PWAContext'

import { compareObjects } from './modules/compareObjects'
import { MapCatalogItemToCartReturn } from './modules/catalogItemToCart'

const ADD_TO_CART = loader('../CheckoutResources/mutations/addToCart.graphql')

const { useCheckoutURL } = CheckoutUtils
const { usePWA } = PWAContext
const { useProductDispatch } = ProductDispatchContext

interface Props extends WrappedComponentProps {
  isOneClickBuy: boolean
  available: boolean
  disabled: boolean
  customToastUrl: string
  customOneClickBuyLink: string
  skuItems: MapCatalogItemToCartReturn[]
  showToast: Function
  allSkuVariationsSelected: boolean
}

interface OrderFormContext {
  loading: boolean
  orderForm: OrderForm | undefined
  setOrderForm: (orderForm: Partial<OrderForm>) => void
}

const CSS_HANDLES = ['buttonText', 'buttonDataContainer']

const messages = defineMessages({
  success: { id: 'store/add-to-cart.success', defaultMessage: '' },
  duplicate: { id: 'store/add-to-cart.duplicate', defaultMessage: '' },
  error: { id: 'store/add-to-cart.failure', defaultMessage: '' },
  seeCart: { id: 'store/add-to-cart.see-cart', defaultMessage: '' },
})

const useWaitForOrderFormAndAddToCart = (
  orderFormLoading: boolean,
  addToCart: () => Promise<void>
): [boolean, (state: boolean) => void] => {
  const [waitingOrderFormLoad, setWaitForOrderForm] = useState(false)
  useEffect(() => {
    if (!orderFormLoading && waitingOrderFormLoad) {
      addToCart().then(() => {
        setWaitForOrderForm(false)
      })
    }
  }, [addToCart, orderFormLoading, waitingOrderFormLoad])

  return [waitingOrderFormLoad, setWaitForOrderForm]
}

const adjustItemsForMutationInput = (
  newItems: MapCatalogItemToCartReturn[]
): OrderFormItemInput[] => {
  return newItems.map(item => ({
    id: Number.parseInt(item.skuId),
    index: item.index,
    seller: item.seller,
    quantity: item.quantity,
    options: item.options,
  }))
}

const adjustSkuItemForPixelEvent = (skuItem: MapCatalogItemToCartReturn) => {
  // Changes this `/Apparel & Accessories/Clothing/Tops/`
  // to this `Apparel & Accessories/Clothing/Tops`
  const category = skuItem.category ? skuItem.category.slice(1, -1) : ''

  return {
    skuId: skuItem.skuId,
    variant: skuItem.variant,
    price: skuItem.price,
    name: skuItem.name,
    quantity: skuItem.quantity,
    productRefId: skuItem.productRefId,
    brand: skuItem.brand,
    category,
    detailUrl: skuItem.detailUrl,
    imageUrl: skuItem.imageUrl,
  }
}

const AddToCartButton: FC<Props> = ({
  intl,
  isOneClickBuy,
  customOneClickBuyLink,
  available,
  disabled,
  skuItems,
  customToastUrl,
  showToast,
  allSkuVariationsSelected = true,
}) => {
  const handles = useCssHandles(CSS_HANDLES)
  const {
    orderForm,
    setOrderForm,
    loading,
  }: OrderFormContext = OrderForm.useOrderForm()
  const dispatch = useProductDispatch()
  const { rootPath = '', navigate } = useRuntime()
  const { url: checkoutURL, major } = useCheckoutURL()
  const { push } = usePixel()
  const { settings = {}, showInstallPrompt = undefined } = usePWA() || {}
  const { promptOnCustomEvent } = settings
  const translateMessage = (message: MessageDescriptor) =>
    intl.formatMessage(message)

  const resolveToastMessage = (success: boolean, isNewItem: boolean) => {
    if (!success) return translateMessage(messages.error)
    if (!isNewItem) return translateMessage(messages.duplicate)

    return translateMessage(messages.success)
  }

  const toastMessage = ({
    success,
    isNewItem,
  }: {
    success: boolean
    isNewItem: boolean
  }) => {
    const message = resolveToastMessage(success, isNewItem)

    const action = success
      ? {
          label: translateMessage(messages.seeCart),
          href: customToastUrl,
        }
      : undefined

    showToast({ message, action })
  }

  const [
    addToCart,
    { error: mutationError, loading: mutationLoading },
  ] = useMutation<{ addToCart: OrderForm }, { items: OrderFormItemInput[] }>(
    ADD_TO_CART
  )

  const beforeAddToCart = (event: React.MouseEvent) => {
    event.stopPropagation()
    event.preventDefault()
  }

  const callAddToCart = async () => {
    const adjustedSkuItems = adjustItemsForMutationInput(skuItems)

    const mutationResult = await addToCart({
      variables: { items: adjustedSkuItems },
    })

    if (mutationError) {
      console.error(mutationError)
      toastMessage({ success: false, isNewItem: false })
      return
    }

    if (
      mutationResult.data &&
      compareObjects(mutationResult.data.addToCart, orderForm)
    ) {
      toastMessage({ success: true, isNewItem: false })
      return
    }

    // Update OrderForm from the context
    mutationResult.data && setOrderForm(mutationResult.data.addToCart)

    // Send event to pixel-manager
    const pixelEventItems = skuItems.map(adjustSkuItemForPixelEvent)
    push({
      event: 'addToCart',
      items: pixelEventItems,
    })

    if (isOneClickBuy) {
      if (
        major > 0 &&
        (!customOneClickBuyLink || customOneClickBuyLink === checkoutURL)
      ) {
        navigate({ to: checkoutURL })
      } else {
        window.location.assign(rootPath + (customOneClickBuyLink || checkoutURL))
      }
    }

    toastMessage({ success: true, isNewItem: true })

    /* PWA */
    if (promptOnCustomEvent === 'addToCart' && showInstallPrompt) {
      showInstallPrompt()
    }
  }

  const [
    waitingOrderFormLoad,
    setWaitOrderFormLoad,
  ] = useWaitForOrderFormAndAddToCart(loading, callAddToCart)

  const handleAddToCart = async (event: React.MouseEvent) => {
    beforeAddToCart(event)
    await callAddToCart()
  }

  const handleClick = (e: React.MouseEvent) => {
    if (dispatch) {
      dispatch({ type: 'SET_BUY_BUTTON_CLICKED', args: { clicked: true } })
    }

    if (allSkuVariationsSelected) {
      if (loading) {
        // Just call the beforeAddToCart method and wait for the hook useAddWhileLoadingHandler to call the add to cart logic
        beforeAddToCart(e)
        setWaitOrderFormLoad(true)
      } else {
        handleAddToCart(e)
      }
    }
  }

  const availableButtonContent = (
    <div className={`${handles.buttonDataContainer} flex justify-center`}>
      <FormattedMessage id="store/add-to-cart.add-to-cart">
        {message => <span className={handles.buttonText}>{message}</span>}
      </FormattedMessage>
    </div>
  )

  const unavailableButtonContent = (
    <FormattedMessage id="store/buyButton-label-unavailable">
      {message => <span className={handles.buttonText}>{message}</span>}
    </FormattedMessage>
  )

  const tooltipLabel = (
    <FormattedMessage id="store/add-to-cart.select-sku-variations">
      {message => <span className={handles.errorMessage}>{message}</span>}
    </FormattedMessage>
  )

  const ButtonWithLabel = (
    <Button
      block
      disabled={
        disabled || !available || mutationLoading || waitingOrderFormLoad
      }
      isLoading={mutationLoading || waitingOrderFormLoad}
      onClick={handleClick}
    >
      {available ? availableButtonContent : unavailableButtonContent}
    </Button>
  )

  return allSkuVariationsSelected ? (
    ButtonWithLabel
  ) : (
    <Tooltip trigger="click" label={tooltipLabel}>
      {ButtonWithLabel}
    </Tooltip>
  )
}

export default injectIntl(AddToCartButton)

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/AddToCartButton/Wrapper.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import useProduct from '../ProductContext/useProduct'
import withToast from '../Styleguide/withToast'

import AddToCartButton from './AddToCartButton'
import { mapCatalogItemToCart } from './modules/catalogItemToCart'

interface Props {
  isOneClickBuy: boolean
  available: boolean
  disabled: boolean
  customToastUrl: string
  customOneClickBuyLink: string
  showToast: Function
}

const Wrapper: FC<Props> = ({
  isOneClickBuy,
  available,
  disabled,
  customToastUrl,
  showToast,
  customOneClickBuyLink,
}) => {
  const productContext: any = useProduct()

  if (!productContext) {
    throw new Error('useProduct must be used within a ProductContextProvider')
  }

  const isEmptyContext = Object.keys(productContext).length === 0

  const product = productContext && productContext.product
  const selectedItem = productContext && productContext.selectedItem
  const assemblyOptions = productContext && productContext.assemblyOptions
  const selectedSeller =
    productContext &&
    productContext.selectedItem &&
    productContext.selectedItem.sellers[0]
  const selectedQuantity =
    productContext && productContext.selectedQuantity != null
      ? productContext.selectedQuantity
      : 1

  const skuItems = mapCatalogItemToCart({
    product,
    selectedItem,
    selectedQuantity,
    selectedSeller,
    assemblyOptions,
  })

  const isAvailable =
    isEmptyContext || available != null
      ? available
      : Boolean(
          selectedSeller &&
            selectedSeller.commertialOffer &&
            selectedSeller.commertialOffer.AvailableQuantity > 0
        )

  const groupsValidArray =
    (assemblyOptions &&
      assemblyOptions.areGroupsValid &&
      Object.values(assemblyOptions.areGroupsValid)) ||
    []

  const areAssemblyGroupsValid = groupsValidArray.every(Boolean)
  const isDisabled =
    isEmptyContext || disabled != null ? disabled : !areAssemblyGroupsValid

  const areAllSkuVariationsSelected =
    productContext && productContext.skuSelector.areAllVariationsSelected

  return (
    <AddToCartButton
      allSkuVariationsSelected={areAllSkuVariationsSelected}
      skuItems={skuItems}
      available={isAvailable}
      isOneClickBuy={isOneClickBuy}
      disabled={isDisabled}
      customToastUrl={customToastUrl}
      showToast={showToast}
      customOneClickBuyLink={customOneClickBuyLink}
    />
  )
}

export default withToast(Wrapper)

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/ResponsiveValues/useResponsiveValues.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useResponsiveValues } from './hooks/useResponsiveValue'

export default useResponsiveValues

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/ResponsiveValues/useResponsiveValue.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useResponsiveValue } from './hooks/useResponsiveValue'

export default useResponsiveValue

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Menu/index.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import PropTypes from 'prop-types'
import React, { ReactNode } from 'react'

import useCssHandles from '../CssHandles/useCssHandles'
import { Link } from '../../../../vtex.render-runtime'
import Container from '../StoreComponents/Container'
import Options from './constants/Options'

// This is required because is used in static schema attribute of Menu Component
const GLOBAL_PAGES =
  (global as any).__RUNTIME__ && Object.keys((global as any).__RUNTIME__.pages)

const MAX_ITEMS: number = 10

const CSS_HANDLES = [
  'container',
  'linkLeft',
  'linkMiddle',
  'linkRight',
  'menuLinkNav',
  'menuLinkDivLeft',
  'menuLinkDivMiddle',
  'menuLinkDivRight',
  'renderLink',
] as const

interface Link {
  text?: string | null
  internalPage: string | null
  params?: string | null
  externalPage?: string | null
  typeOfRoute?: string | null
  page?: string | null
  position?: string | null
}

interface Options {
  LEFT: string
  MIDDLE: string
  RIGHT: string
  INTERNAL: string
  EXTERNAL: string
}

interface Props {
  links?: Link[]
}

/**
 * Convert the string params to a js object
 */
const getParams = (params?: string | null): { [key: string]: string } => {
  const json: { [key: string]: string } = {}
  if (params) {
    const array: string[] = params.split(',')
    array.forEach((item: string) => {
      const pair: string[] = item.split('=')
      json[pair[0]] = pair[1]
    })
  }
  return json
}

const getValidPage = (page?: string | null): string => {
  if (!page || (!page.startsWith('http://') && !page.startsWith('https://'))) {
    page = `http://${page}`
  }
  return page
}

/**
 * Links MenuLink Component.
 * Shows a menu bar with links.
 */
const MenuLink: StorefrontFunctionComponent<Props> = ({ links = [] }) => {
  const handles = useCssHandles(CSS_HANDLES)

  const renderLink = (link: Link, index: number): ReactNode => {
    let className: string = `${handles.renderLink} t-small link c-muted-2 dib dim mr3 mr4-ns`
    switch (link.position) {
      case Options.LEFT:
        className = `${handles.linkLeft} ${className}`
        break
      case Options.MIDDLE:
        className = `${handles.linkMiddle} ${className}`
        break
      case Options.RIGHT:
        className = `${handles.linkRight} ${className}`
        break
    }
    return link.typeOfRoute === Options.INTERNAL ? (
      <Link
        className={className}
        key={`${link.text}-${link.position}-${index}`}
        page={link.internalPage}
        params={getParams(link.params)}
      >
        {link.text}
      </Link>
    ) : (
      <a
        className={className}
        key={`${link.text}-${link.position}-${index}`}
        href={getValidPage(link.externalPage)}
        target="_blank"
      >
        {link.text}
      </a>
    )
  }

  if (!links.length) {
    return null
  }
  return (
    <div className={`${handles.container} bg-base h2 c-muted-2 w-100 dn db-ns`}>
      <Container>
        <nav className={`${handles.menuLinkNav} flex justify-between`}>
          <div className={`${handles.menuLinkDivLeft} flex-grow pa3 flex items-center`}>
            {links
              .filter(link => link.position === Options.LEFT)
              .map((link, index) => {
                return renderLink(link, index)
              })}
          </div>
          <div className={`${handles.menuLinkDivMiddle} flex-grow pa3 flex items-center`}>
            {links
              .filter(link => link.position === Options.MIDDLE)
              .map((link, index) => {
                return renderLink(link, index)
              })}
          </div>
          <div className={`${handles.menuLinkDivRight} flex-grow pa3 flex items-center`}>
            {links
              .filter(link => link.position === Options.RIGHT)
              .map((link, index) => {
                return renderLink(link, index)
              })}
          </div>
        </nav>
      </Container>
    </div>
  )
}

// MenuLink.propTypes = {
//   links: PropTypes.arrayOf(
//     PropTypes.shape({
//       /** External page to redirect */
//       externalPage: PropTypes.string,
//       /** Internal page to redirect */
//       internalPage: PropTypes.string.isRequired,
//       /** Page route to redirect when clicked */
//       page: PropTypes.string,
//       /** Params to redirect to internal page */
//       params: PropTypes.string,
//       /** Link position  */
//       position: PropTypes.string,
//       /** Link text */
//       text: PropTypes.string,
//       /** Type of Route (internal or external) */
//       typeOfRoute: PropTypes.string,
//     }).isRequired
//   ),
// }

// tslint:disable: object-literal-sort-keys
MenuLink.schema = {
  title: 'admin/editor.menu-link',
  description: 'admin/editor.menu-link.description',
  type: 'object',
  properties: {
    links: {
      title: 'admin/editor.menu-link.links',
      type: 'array',
      minItems: 0,
      maxItems: MAX_ITEMS,
      items: {
        title: 'admin/editor.menu-link.links.link',
        type: 'object',
        properties: {
          text: {
            title: 'admin/editor.menu-link.links.link.text',
            type: 'string',
          },
          internalPage: {
            title: 'admin/editor.menu-link.links.link.internalPage',
            description:
              'admin/editor.menu-link.links.link.internalPage.description',
            type: 'string',
            enum: GLOBAL_PAGES,
          },
          params: {
            title: 'admin/editor.menu-link.links.link.params',
            description: 'admin/editor.menu-link.links.link.params.description',
            type: 'string',
          },
          externalPage: {
            title: 'admin/editor.menu-link.links.link.externalPage',
            description:
              'admin/editor.menu-link.links.link.externalPage.description',
            type: 'string',
          },
          typeOfRoute: {
            title: 'admin/editor.menu-link.links.link.typeOfRoute',
            type: 'string',
            enum: [Options.INTERNAL, Options.EXTERNAL],
            enumNames: [
              'admin/editor.menu-link.links.link.typeOfRoute.internal',
              'admin/editor.menu-link.links.link.typeOfRoute.external',
            ],
            default: Options.INTERNAL,
            widget: {
              'ui:widget': 'radio',
              'ui:options': {
                inline: true,
              },
            },
          },
          position: {
            title: 'admin/editor.menu-link.links.link.position',
            type: 'string',
            enum: [Options.LEFT, Options.MIDDLE, Options.RIGHT],
            enumNames: [
              'admin/editor.menu-link.links.link.position.left',
              'admin/editor.menu-link.links.link.position.middle',
              'admin/editor.menu-link.links.link.position.right',
            ],
            default: Options.MIDDLE,
          },
        },
      },
    },
  },
}

export default MenuLink

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Menu/Submenu.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import classNames from 'classnames'
import React from 'react'
import { defineMessages } from 'react-intl'

import useCssHandles from '../CssHandles/useCssHandles'

const CSS_HANDLES = ['submenu', 'submenuWrapper', 'submenuContainer'] as const

const MAX_TACHYONS_SCALE = 11

enum Orientation {
  horizontal = 'horizontal',
  vertical = 'vertical',
}

export type TachyonsScaleInput = string | number | undefined

/** TODO: This function is copied from the flex-layout app.
 * It should probably be exported to a separate package.
 */
const parseTachyonsValue = (value: TachyonsScaleInput, name?: string) => {
  if (!value) {
    return 0
  }

  const parsedValue = typeof value === 'string' ? parseInt(value, 10) : value

  if (isNaN(parsedValue) || String(parsedValue) !== String(value) || parsedValue < 0 || parsedValue > MAX_TACHYONS_SCALE) {
    if (name) {
      console.warn(`Invalid ${name} value. It should be an integer between 0 and ${MAX_TACHYONS_SCALE}.`)
    }
    return 0
  }

  return parsedValue
}

const Submenu: StorefrontFunctionComponent<SubmenuProps> = ({
  isOpen,
  width,
  children,
  orientation = Orientation.horizontal,
  paddingTop = 4,
  paddingBottom = 4,
}) => {
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <div className={`${handles.submenuContainer} ${width === '100%' ? '' : 'relative'}`}>
      <div
        className={classNames(handles.submenuWrapper, `absolute left-0 bg-base pt${parseTachyonsValue(paddingTop, 'paddingTop')} pb${parseTachyonsValue(paddingBottom, 'paddingBottom')} bw1 bb b--muted-3 z-2`,
          {
            dn: !isOpen,
            flex: isOpen,
            'w-100': width === '100%',
            'w-auto ml6': width === 'auto',
          }
        )}
      >
        <section className={classNames(handles.submenu, 'w-100 flex justify-center', { 'flex-column': orientation === Orientation.vertical })}>{children}</section>
      </div>
    </div>
  )
}

export interface SubmenuProps extends SubmenuSchema {
  isOpen: boolean
  orientation: Orientation
  paddingTop: number | string
  paddingBottom: number | string
  blockClass?: string
}

interface SubmenuSchema {
  width: '100%' | 'auto'
}

const messages = defineMessages({
  submenuTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.submenu.title',
  },
  submenuWidthTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.submenuWidth.title',
  },
})

// tslint:disable: object-literal-sort-keys
Submenu.getSchema = () => ({
  title: messages.submenuTitle.id,
})

export default Submenu

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Menu/SubmenuAccordion.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import classNames from 'classnames'
import React from 'react'
import { defineMessages } from 'react-intl'
import Collapsible from './components/Collapsible'

import useCssHandles from '../CssHandles/useCssHandles'

const CSS_HANDLES = ['submenuAccordion'] as const

interface Props {
  isOpen: boolean
  blockClass?: string
}

const SubmenuAccordion: StorefrontFunctionComponent<Props> = ({
  isOpen,
  children,
}) => {
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <Collapsible open={isOpen} >
      <section className={classNames(handles.submenuAccordion, 'w-100 flex pl4 flex')}>
        {children}
      </section>
    </Collapsible>
  )
}

const messages = defineMessages({
  submenuTitle: {
    defaultMessage: '',
    id: 'editor.menu.submenu.title',
  },
})

SubmenuAccordion.getSchema = () => ({
  title: messages.submenuTitle.id,
  type: 'object',
})

export default SubmenuAccordion

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Menu/MenuItem.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { path } from 'ramda'
import React, { Reducer, useReducer, useContext } from 'react'

import classNames from 'classnames'

import { defineMessages } from 'react-intl'
// import { ExtensionPoint } from 'vtex.render-runtime'
import { CategoryItemSchema } from './components/CategoryItem'
import { CustomItemSchema } from './components/CustomItem'
import Item from './components/Item'
import { IconProps} from './components/StyledLink'
import useSubmenuImplementation from './hooks/useSubmenuImplementation'

import useCssHandles from '../CssHandles/useCssHandles'
import MenuContext from './components/MenuContext'

const CSS_HANDLES = ['menuItem', 'menuItemInnerDiv']

const submenuInitialState = {
  hasBeenActive: false,
  isActive: false,
}

type SubmenuState = typeof submenuInitialState

type SubmenuAction =
  | {type: 'SHOW_SUBMENU'}
  | {type: 'HIDE_SUBMENU'}

const submenuReducer: Reducer<SubmenuState, SubmenuAction> =  (state, action) => {
  switch (action.type) {
    case 'SHOW_SUBMENU':
      return {
        hasBeenActive: true,
        isActive: true,
      }
    case 'HIDE_SUBMENU':
      return {
        ...state,
        isActive: false,
      }
    default:
      return state
  }
}

const MenuItem: StorefrontFunctionComponent<MenuItemSchema> = ({
  children,
  ...props
}) => {
  const { experimentalOptimizeRendering } = useContext(MenuContext)
  const [{ isActive, hasBeenActive }, dispatch] = useReducer(submenuReducer, submenuInitialState)
  const handles = useCssHandles(CSS_HANDLES)

  const setActive = (value: boolean) => {
    dispatch({ type: value ? 'SHOW_SUBMENU' : 'HIDE_SUBMENU' })
  }

  /* This is a temporary check of which kind of submenu is being
   * inserted. This will be replaced by new functionality of useChildBlocks
   * in the future. */
  const submenuImplementation = useSubmenuImplementation()
  const isCollapsible = submenuImplementation === 'submenu.accordion'

  if (isCollapsible) {
    return (
      <li className={classNames(handles.menuItem, 'list')}>
        <div className={handles.menuItemInnerDiv}
          onClick={event => {
            setActive(!isActive)
            event.stopPropagation()
          }}>
          <Item {...props} accordion active={isActive} />
        </div>
        {(hasBeenActive || !experimentalOptimizeRendering) && children && ( /* Collapsible menus need to still persist after being open,
                             * to make the closing transition work properly */
          <>
            {/* <ExtensionPoint id="submenu" isOpen={isActive} />
            <ExtensionPoint id="unstable--submenu" isOpen={isActive} /> */}
            {/* <S */}
            {/* {props.submenuProps ? <Submenu {...props.submenuProps} /> : null} */}
            {/* {children} */}
            {React.cloneElement(children, { isOpen: isActive})}
          </>
        )}
      </li>
    )
  }

  return (
    <li
      className={classNames(handles.menuItem, 'list')}
      onMouseEnter={() => setActive(true)}
      onMouseLeave={() => setActive(false)}>
      <Item {...props} active={isActive} />
      {(isActive || !experimentalOptimizeRendering) && children && (
        <>
        {/* {children} */}
          {React.cloneElement(children, { isOpen: isActive})}
          {/* <ExtensionPoint id="submenu" isOpen={isActive} />
          <ExtensionPoint id="unstable--submenu" isOpen={isActive} /> */}
        </>
      )}
    </li>
  )
}

export interface MenuItemSchema {
  id: string
  type: 'category' | 'custom'
  iconProps: IconProps
  iconPosition: 'left' | 'right'
  highlight: boolean
  itemProps: CategoryItemSchema | CustomItemSchema
  blockClass?: string
  experimentalOptimizeRendering?: boolean
  submenuProps?: any
}

const messages = defineMessages({
  categoryIdTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.categoryId.title',
  },
  categoryTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.category.title',
  },
  customTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.custom.title',
  },
  customTypeTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.type.title',
  },
  externalTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.external.title',
  },
  highlightTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.highlight.title',
  },
  hrefTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.href.title',
  },
  iconIdTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.iconId.title',
  },
  internalTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.internal.title',
  },
  itemIdTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.id.title',
  },
  itemsTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.items.title',
  },
  noFollowTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.noFollow.title',
  },
  paramsTextTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.text.title',
  },
  paramsTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.title',
  },
  tagTitleTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.params.tagTitle.title',
  },
  typeTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.item.type.title',
  },
})

MenuItem.getSchema = props => {
  const text = path(['itemProps', 'text'], props)
  const id = props && props.id ? props.id : ''

  // tslint:disable: object-literal-sort-keys
  return {
    title: [text, id, messages.itemsTitle.id].find(e => !!e),
    type: 'object',
    required: ['type'],
    properties: {
      id: {
        default: id,
        title: messages.itemIdTitle.id,
        type: 'string',
      },
    },
  }
}

export default MenuItem

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Menu/Menu.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable react-hooks/exhaustive-deps */
import React, { useContext, useMemo } from 'react'

import classNames from 'classnames'
import { defineMessages } from 'react-intl'

import CategoryMenu from './components/CategoryMenu'
import Item from './components/Item'
import LevelContext from './components/LevelContext'
import MenuContext from './components/MenuContext'
import MenuItem, { MenuItemSchema } from './MenuItem'

import useCssHandles from '../CssHandles/useCssHandles'

const CSS_HANDLES = ['menuContainer', 'menuContainerNav'] as const

const TypographyMap: Record<string, string> = {
  body: 't-body',
  heading1: 't-heading-1',
  heading2: 't-heading-2',
  heading3: 't-heading-3',
  heading4: 't-heading-4',
  heading5: 't-heading-5',
  mini: 't-mini',
  small: 't-small',
}

const Menu: StorefrontFunctionComponent<MenuSchema> = ({
  orientation = 'horizontal',
  textType,
  title,
  categoryId,
  items: itemsProps = [],
  children,
  experimentalOptimizeRendering = false,
}) => {
  const level = useContext(LevelContext)
  const handles = useCssHandles(CSS_HANDLES)
  const menuContext = useMemo(
    () => ({
      experimentalOptimizeRendering,
      hasTitle: title || categoryId ? true : false,
      orientation,
      textType: textType ? TypographyMap[textType] : TypographyMap.body,
    }),
    [orientation, textType]
  )

  const menuItems = itemsProps.map(
    ({ itemProps: { text }, itemProps, ...rest }) => (
      <MenuItem key={text} itemProps={itemProps} {...rest} />
    )
  )

  return (
    <LevelContext.Provider value={level + 1}>
      <MenuContext.Provider value={menuContext}>
          <nav className={handles.menuContainerNav}>
            <ul
              className={classNames(handles.menuContainer, 'list flex pl0 mv0', {
                'flex-column': orientation === 'vertical',
                'flex-row': orientation === 'horizontal',
              })}
            >
              {!categoryId && title && <Item {...title} isTitle />}
              {categoryId && <CategoryMenu categoryId={categoryId} />}
              {children}
              {menuItems}
            </ul>
          </nav>
      </MenuContext.Provider>
    </LevelContext.Provider>
  )
}

interface MenuSchema {
  orientation?: 'vertical' | 'horizontal'
  categoryId?: number
  textType?: Typography
  title?: MenuItemSchema
  additionalDef?: string
  blockClass?: string
  items?: MenuItemSchema[]
  experimentalOptimizeRendering?: boolean
}

enum Typography {
  heading1 = 't-heading-1',
  heading2 = 't-heading-2',
  heading3 = 't-heading-3',
  heading4 = 't-heading-4',
  heading5 = 't-heading-5',
  body = 't-body',
  small = 't-small',
  mini = 't-mini',
}

const messages = defineMessages({
  categoryDef: {
    defaultMessage: '',
    id: 'admin/editor.menu.def.category',
  },
  categoryIdTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.categoryId.title',
  },
  defTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.additionalDef.title',
  },
  horizontalLabel: {
    defaultMessage: '',
    id: 'admin/editor.menu.orientation.horizontal.label',
  },
  menuTitle: {
    defaultMessage: '',
    id: 'admin/editor.future-menu.title',
  },
  noneDef: {
    defaultMessage: '',
    id: 'admin/editor.menu.def.none',
  },
  orientationTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.orientation.title',
  },
  titleDef: {
    defaultMessage: '',
    id: 'admin/editor.menu.def.title',
  },
  typographyTitle: {
    defaultMessage: '',
    id: 'admin/editor.menu.typography.title',
  },
  verticalLabel: {
    defaultMessage: '',
    id: 'admin/editor.menu.orientation.vertical.label',
  },
})

Menu.getSchema = () => {
  // tslint:disable: object-literal-sort-keys
  return {
    title: messages.menuTitle.id,
  }
}

export default Menu

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Menu/Column.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'

const Column: FunctionComponent<Props> = props => {
  return <div>{props.children}</div>
}

interface Props {
  children: React.ReactChildren
}

export default Column

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/NativeTypes/IOMessage.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import { FormattedMessage, injectIntl } from 'react-intl'

const IOMessage = ({ children, id, ...props }) => {
  const intlMessage = props.intl.messages[id]

  if (intlMessage) {
    return (
      <FormattedMessage id={id} {...props}>
        {children}
      </FormattedMessage>
    )
  }

  if (children && typeof children === 'function') {
    return children(intlMessage === '' ? '' : id)
  }

  return intlMessage === '' ? null : <>{id}</>
}

export default injectIntl(IOMessage)
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/NativeTypes/formatIOMessage.js from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```javascript
const formatIOMessage = (
  { intl, ...messageDescriptor },
  values
) => {
  const { id } = messageDescriptor

  const intlMessage = intl.messages[id]

  if (intlMessage) {
    return intl.formatMessage(messageDescriptor, values)
  }

  if (intlMessage === '') {
    return ''
  }

  return id
}

export default formatIOMessage
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/OrderManager/OrderForm.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  createContext,
  useContext,
  useMemo,
  useReducer,
  useEffect,
  useState,
  FC,
} from 'react'
import { ApolloClient, ApolloError } from 'apollo-client'
import { useQuery } from 'react-apollo'
import { loader } from 'graphql.macro'

import { dummyOrderForm, emptyOrderForm } from './utils/dummyOrderForm'
import { logSplunk } from './utils/logger'

const OrderFormQuery = loader('../CheckoutResources/queries/orderForm.graphql')

type OrderForm = any

interface Context {
  loading: boolean
  orderForm: OrderForm | undefined
  setOrderForm: (orderForm: Partial<OrderForm>) => void
  error: ApolloError | undefined
}

const OrderFormContext = createContext<Context | undefined>(undefined)

const updateApolloCache = (client: ApolloClient<any>, orderForm: OrderForm) => {
  const data = client.readQuery({ query: OrderFormQuery })
  client.writeQuery({
    query: OrderFormQuery,
    data: {
      ...data,
      orderForm,
    },
  })
}

export const OrderFormProvider: FC = ({ children }) => {
  const { client, loading: loadingQuery, data, error } = useQuery<{
    orderForm: OrderForm
  }>(OrderFormQuery, {
    ssr: false,
  })

  const [orderForm, setOrderForm] = useReducer(
    (orderForm: OrderForm, newOrderForm: Partial<OrderForm>) => ({
      ...orderForm,
      ...newOrderForm,
    }),
    dummyOrderForm
  )

  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (error) {
      logSplunk({
        level: 'Important',
        type: 'Error',
        workflowType: 'OrderManager',
        workflowInstance: 'orderform-query',
        event: {
          message: error.message,
        },
      })
      console.error(error.message)
    }

    if (loadingQuery) {
      return
    }

    setLoading(false)

    if (data) {
      setOrderForm(data.orderForm)
      updateApolloCache(client, data.orderForm)
    }
  }, [client, data, error, loadingQuery])

  const value = useMemo(
    () => ({
      error,
      loading,
      orderForm: error ? emptyOrderForm : orderForm,
      setOrderForm: (newOrderForm: Partial<OrderForm>) => {
        updateApolloCache(client, { ...orderForm, ...newOrderForm })
        setOrderForm(newOrderForm)
      },
    }),
    [client, error, loading, orderForm]
  )
  return (
    <OrderFormContext.Provider value={value}>
      {children}
    </OrderFormContext.Provider>
  )
}

export const useOrderForm = () => {
  const context = useContext(OrderFormContext)
  if (context === undefined) {
    throw new Error('useOrderForm must be used within a OrderFormProvider')
  }

  return context
}

export default { OrderFormProvider, useOrderForm }

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/OrderManager/constants.ts from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```typescript
export enum QueueStatus {
  PENDING = 'Pending',
  FULFILLED = 'Fulfilled',
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/OrderManager/OrderQueue.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  createContext,
  FC,
  ReactNode,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react'

import { QueueStatus } from './constants'
import { TaskQueue } from './modules/TaskQueue'
import { CancellablePromiseLike } from './modules/SequentialTaskQueue'

type ListenFunction = (event: QueueStatus, callback: () => any) => () => void

interface Context {
  enqueue: <T extends any>(
    task: () => Promise<T>,
    id?: string
  ) => CancellablePromiseLike<T>
  listen: ListenFunction
  isWaiting: (id: string) => boolean
}

interface OrderQueueProviderProps {
  children: ReactNode
}

const OrderQueueContext = createContext<Context | undefined>(undefined)

export const useQueueStatus = (listen: ListenFunction) => {
  const queueStatus = useRef(QueueStatus.FULFILLED)

  useEffect(() => {
    const unlisten = listen(
      QueueStatus.PENDING,
      () => (queueStatus.current = QueueStatus.PENDING)
    )
    return unlisten
  }, [listen])

  useEffect(() => {
    const unlisten = listen(
      QueueStatus.FULFILLED,
      () => (queueStatus.current = QueueStatus.FULFILLED)
    )
    return unlisten
  }, [listen])

  return queueStatus
}

export const OrderQueueProvider: FC<OrderQueueProviderProps> = ({
  children,
}) => {
  const [queue] = useState(() => new TaskQueue())

  const value = useMemo(
    () => ({
      enqueue: queue.enqueue.bind(queue),
      listen: queue.listen.bind(queue),
      isWaiting: queue.isWaiting.bind(queue),
    }),
    [queue]
  )

  return (
    <OrderQueueContext.Provider value={value}>
      {children}
    </OrderQueueContext.Provider>
  )
}

export const useOrderQueue = () => {
  const context = useContext(OrderQueueContext)
  if (context === undefined) {
    throw new Error('useOrderQueue must be used within a OrderQueueProvider')
  }

  return context
}

export default {
  OrderQueueProvider,
  QueueStatus,
  useOrderQueue,
  useQueueStatus,
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/PixelContext/PixelContext.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import hoistNonReactStatics from 'hoist-non-react-statics'
import React, { useContext, createContext, PureComponent } from 'react'

type EventType =
  | 'homeView'
  | 'productView'
  | 'productClick'
  | 'productImpression'
  | 'otherView'
  | 'categoryView'
  | 'departmentView'
  | 'internalSiteSearchView'
  | 'pageInfo'
  | 'pageView'
  | 'addToCart'
  | 'removeFromCart'
  | 'pageComponentInteraction'
  | 'orderPlaced'
  | 'installWebApp'

export interface PixelData {
  event?: EventType
  [data: string]: any
}

interface PixelEvent extends Event {
  data: any
}

export interface PixelContextType {
  push: (data: PixelData) => void
}

declare var process: {
  env: {
    NODE_ENV: 'production' | 'development'
    VTEX_APP_ID: string
  }
}

interface Props {
  currency: string
}

const PixelContext = createContext<PixelContextType>({
  push: () => undefined,
})

const getDisplayName = <T extends {}>(comp: React.ComponentType<T>) =>
  comp.displayName || comp.name || 'Component'

export const usePixel = () => useContext(PixelContext)

/**
 * withPixel is the HOC Component that provides an event subscription to the
 * Wrapped Component. This component will be used by the installed apps.
 */
export function withPixel<T>(
  WrappedComponent: React.ComponentType<T & PixelContextType>
) {
  const PixelComponent: React.FC<T> = props => {
    const { push } = usePixel()
    return <WrappedComponent {...props} push={push} />
  }

  PixelComponent.displayName = `withPixel(${getDisplayName(WrappedComponent)})`

  return hoistNonReactStatics(PixelComponent, WrappedComponent)
}

class PixelProvider extends PureComponent<Props> {
  private pixelContextValue: PixelContextType

  public constructor(props: Props) {
    super(props)

    this.pixelContextValue = {
      push: this.push,
    }
  }

  public componentDidMount() {
    window.addEventListener('message', this.handleWindowMessage)
  }

  public componentWillUnmount() {
    window.removeEventListener('message', this.handleWindowMessage)
  }

  /**
   * Push event to iframe
   */
  public push = (data: PixelData) => {
    // Add all events to window when is linking to ease debugging
    // **Don't make those if's one!**
    if (process.env.NODE_ENV === 'development') {
      if (typeof window !== 'undefined') {
        window.pixelManagerEvents = window.pixelManagerEvents || []
        window.pixelManagerEvents.push(data)
      }
    }

    this.handlePixelEvent(data)
  }

  public render() {
    return (
      <PixelContext.Provider value={this.pixelContextValue}>
        {this.props.children}
      </PixelContext.Provider>
    )
  }

  private handleWindowMessage = (e: PixelEvent) => {
    if (e.data.pageComponentInteraction) {
      this.push({
        data: e.data,
        event: 'pageComponentInteraction',
      })
    }
  }

  private enhanceEvent = (event: PixelData, currency: string) => ({
    currency,
    eventName: `vtex:${event.event}`,
    ...event,
  })

  private handlePixelEvent = (event: PixelData) => {
    const eventData = this.enhanceEvent(event, this.props.currency)
    try {
      window.postMessage(eventData, window.origin)
    } catch (e) {
      // IE and Edge have a bug on postMessage inside promises.
      // Ignoring for now, will try to find a workaround that
      // makes postMessage work on those browsers.
      // https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14719328/
    }
  }
}

export default { Pixel: withPixel, withPixel, PixelProvider, usePixel }
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/DeviceDetector/DeviceDetector.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import useDevice, { DeviceInfo } from './useDevice'

export interface Props {
  children?: (deviceInfo: DeviceInfo) => React.ReactElement
}

const DeviceDetector: FunctionComponent<Props> = ({ children }) => {
  const { device, isMobile } = useDevice()

  if (!children) {
    return null
  }

  return children({ device, isMobile })
}

export default DeviceDetector

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/DeviceDetector/useDevice.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useMedia } from 'use-media'
import { useSSR, useRuntime } from '../../../../vtex.render-runtime'

export interface DeviceInfo {
  device: Device
  isMobile: boolean
}

export enum Device {
  phone = 'phone',
  tablet = 'tablet',
  desktop = 'desktop',
}

const useDevice = () => {
  const isSSR = useSSR()
  const { hints } = useRuntime()

  /** These screensizes are hardcoded, based on the default
   * Tachyons breakpoints. They should probably be the ones
   * configured via the style.json file, if available. */
  const isScreenMedium = useMedia({ minWidth: '40rem' })
  const isScreenLarge = useMedia({ minWidth: '64.1rem' })

  if (isSSR) {
    return {
      device: hints.phone
        ? Device.phone
        : hints.tablet
        ? Device.tablet
        : Device.desktop,
      isMobile: hints.mobile,
    }
  }

  return {
    device: isScreenLarge
      ? Device.desktop
      : isScreenMedium
      ? Device.tablet
      : Device.phone,
    isMobile: !isScreenLarge,
  }
}

export default useDevice

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/DeviceDetector/withDevice.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, ComponentType } from 'react'
import useDevice, { DeviceInfo } from './useDevice'

interface WithDeviceProps {
  deviceInfo: DeviceInfo
}

const withDevice = <P extends object>(
  Component: ComponentType<P>
): FC<P & WithDeviceProps> => ({ ...props }: WithDeviceProps) => {
  const { isMobile, device } = useDevice()

  return <Component device={device} isMobile={isMobile} {...(props as P)} />
}

export default withDevice

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/StoreImage/ImageList.tsx from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages } from 'react-intl'
import useDevice from '../DeviceDetector/useDevice'
import useListContext from '../ListContext/useListContext'
import ListContextProvider from '../ListContext/ListContextProvider'

import Image from './Image'

interface Link {
  url: string
  noFollow: boolean
  openNewTab: boolean
  title: string
}

interface Image {
  link?: Link
  image: string
  mobileImage: string
  description: string
}

interface Props {
  images: Image[]
  height: number
}

const ImageList: StorefrontFunctionComponent<Props> = ({
  images,
  height = 420,
  children,
}) => {
  const { isMobile } = useDevice()
  const { list } = useListContext() || { list: [] }

  const imageListContent = images.map(
    ({ link, image, mobileImage, description }, idx) => (
      <Image
        key={idx}
        src={isMobile && mobileImage ? mobileImage : image}
        alt={description}
        link={link}
        maxHeight={height}
        width="100%"
      />
    )
  )

  const newListContextValue = list.concat(imageListContent)

  return (
    <ListContextProvider list={newListContextValue}>
      {children}
    </ListContextProvider>
  )
}

const messages = defineMessages({
  title: { id: 'admin/editor.image-list.title', defaultMessage: '' },
  description: {
    id: 'admin/editor.image-list.description',
    defaultMessage: '',
  },
  imagesImageTitle: {
    id: 'admin/editor.image-list.images.image.title',
    defaultMessage: '',
  },
  imagesMobileImageTitle: {
    id: 'admin/editor.image-list.images.mobileImage.title',
    defaultMessage: '',
  },
  imagesImageDescription: {
    id: 'admin/editor.image-list.images.description.title',
    defaultMessage: '',
  },
  imagesImageLinkUrl: {
    id: 'admin/editor.image-list.images.link.url.title',
    defaultMessage: '',
  },
  imagesImageLinkOpenNewTab: {
    id: 'admin/editor.image-list.images.link.openNewTab.title',
    defaultMessage: '',
  },
  imagesImageLinkNoFollow: {
    id: 'admin/editor.image-list.images.link.noFollow.title',
    defaultMessage: '',
  },
  imagesImageLinkTitle: {
    id: 'admin/editor.image-list.images.link.title.title',
    defaultMessage: '',
  },
  imagesTitle: {
    id: 'admin/editor.image-list.images.title',
    defaultMessage: '',
  },
  heightTitle: {
    id: 'admin/editor.image-list.height.title',
    defaultMessage: '',
  },
})

ImageList.schema = {
  title: messages.title.id,
  description: messages.description.id,
  type: 'object',
  properties: {
    height: {
      default: 420,
      enum: [420, 440],
      isLayout: true,
      title: messages.heightTitle.id,
      type: 'number',
    },
  },
}

export default ImageList

```