[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 omnichannel-order-status/react/components/OrdersB2B/index.tsx from the omnichannel-order-status VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState, FunctionComponent } from 'react'
import { ContentWrapper } from 'vtex.my-account-commons'
import ApiB2B from '../Services/ApiB2b'
import { tableOrdersPeriod, tableOrders } from "./tableOrders"
import { FormattedMessage } from 'react-intl'
import { format } from 'date-fns'
import {
  DatePicker,
  Spinner,
  Alert,
  Button,
  Table,
  Input,
} from 'vtex.styleguide'

type typeOrder =  "orderWeb" | "orderERP" | "myOrder"

const OrdersB2B: FunctionComponent<Props> = ({}) => {
  const [formFileds, setFormFileds] = useState<any | {}>({
    inputOrderWeb: '',
    inputOrderErp: '',
    inputOrderInpt: '',
  })

  const [pedidoWebInputError, setOrderWebInputError] = useState<any | {}>({})
  const [dataPedidosWeb, setDataPedidoWeb] = useState<any | []>([])
  const [dataPedidoPeriod, setDataPedidoPeriod] = useState<any | []>([])

  const [dateInicial, setDateInicial] = useState(new Date())
  const [dateFim, setEndDateFim] = useState(new Date())

  const [loadSpinner, setLoadSpinner] = useState<boolean | false>(false)
  const [noResult, setNoResult] = useState<boolean | false>(false)

  const itensPeriodOrder = dataPedidoPeriod.itens
  const orders = [dataPedidosWeb]

  function validateOrderInput(type: typeOrder){
    switch(type){
      case "myOrder": {
        if (formFileds.inputOrderInpt === '') {
          setOrderWebInputError({
            ...pedidoWebInputError,
            inputOrderInpt: <FormattedMessage id="label.required" />,
          })
          return true;
        }
        return null;
      }
      case "orderWeb": {
        if (formFileds.inputOrderWeb === '') {
          setOrderWebInputError({
            ...pedidoWebInputError,
            inptOrderWeb: <FormattedMessage id="label.required" />,
          })
          return true;
        }
        return null;
      }
      case "orderERP": {
        if (formFileds.inputOrderErp === '') {
          setOrderWebInputError({
            ...pedidoWebInputError,
            inptOrderERP: <FormattedMessage id="label.required" />,
          })
          return true;
        }
        return null;
      }
      default: {
        return null;
      }
    }
  }

  async function searchMyOrder(type: typeOrder){
    const validation = validateOrderInput(type);

    if(!validation){
      setDataPedidoPeriod([])
      setLoadSpinner(true)
      setNoResult(false)

      try {
        const result = await ApiB2B.get('ordersb2b/' + formFileds.inputOrderWeb + formFileds.inputOrderErp, formFileds.inputOrderInpt)
        setLoadSpinner(false)
        setDataPedidoWeb(result.data)
      } catch (err) {
        setDataPedidoWeb([])
        setLoadSpinner(false)
        setNoResult(true)
      }
    }
  }

  async function searchOrderData() {
    setDataPedidoWeb([])
    setLoadSpinner(true)
    setNoResult(false)

    const parseDateIncial = format(dateInicial, 'yyyy-MM-dd')
    const parseDateFinal = format(dateFim, 'yyyy-MM-dd')

    try {
      const data = {
        porPeriodo: {
          dataInicial: parseDateIncial,
          dataFim: parseDateFinal,
        },
      }

      const result = await ApiB2B.post('/ordersb2b/date', data)
      setDataPedidoPeriod(result.data)
      setLoadSpinner(false)
    } catch (err) {
      setLoadSpinner(false)
      setNoResult(true)
    }
  }

  return (
    <ContentWrapper titleId="title.OrderPage" namespace="custom-page">
      {() => (
        <div>
          <div className="vtex_ordersb2b flex flex-column-s flex-row-ns">
            <div className="w-60-ns w-100-s">
              <form>
                <p className="f4">
                  {<FormattedMessage id="title.searchOrders" />}
                </p>
                <div className="w-80-l mb4 cf">
                  <div className="mw5-l fl w-100 w-60-s">
                    <Input
                      label={<FormattedMessage id="label.numberOrderWeb" />}
                      type="text"
                      size="small"
                      id="pedido_web"
                      name="pedido_web"
                      errorMessage={pedidoWebInputError.inptOrderWeb}
                      onChange={(e: any) => {
                        setFormFileds({
                          ...formFileds,
                          inputOrderWeb: e.target.value,
                        })
                        if (pedidoWebInputError.inptOrderWeb !== '') {
                          setOrderWebInputError({
                            ...pedidoWebInputError,
                            inptOrderWeb: '',
                          })
                        }
                      }}
                    ></Input>
                  </div>

                  <div className="fl mw4 w-100 ml2 mt6 w-30-s">
                    <Button
                      size="small"
                      variation="primary"
                      onClick={() => searchMyOrder("orderWeb")}
                    >
                      <FormattedMessage id="btn.search" />
                    </Button>
                  </div>
                </div>

                <div className="w-80-l mb4 cf">
                  <div className="mw5-l fl w-100 w-60-s">
                    <Input
                      size="small"
                      label={<FormattedMessage id="label.numberDigimess" />}
                      type="text"
                      id="digimess"
                      name="digimess"
                      errorMessage={pedidoWebInputError.inptOrderERP}
                      onChange={(e: any) => {
                        setFormFileds({
                          ...formFileds,
                          inputOrderErp: e.target.value,
                        })
                        if (pedidoWebInputError.inptOrderERP !== '') {
                          setOrderWebInputError({
                            ...pedidoWebInputError,
                            inptOrderERP: '',
                          })
                        }
                      }}
                    ></Input>
                  </div>
                  <div className="fl mw4 w-100 ml2 mt6 w-30-s">
                    <Button
                      size="small"
                      variation="primary"
                      onClick={() => searchMyOrder("orderERP")}
                    >
                      <FormattedMessage id="btn.search" />
                    </Button>
                  </div>
                </div>

                <div className="w-80-l b4 cf">
                  <div className="mw5-l fl w-100 w-60-s">
                    <Input
                      size="small"
                      label={<FormattedMessage id="label.myOrder" />}
                      type="text"
                      id="meu_pedido"
                      name="meu_pedido"
                      errorMessage={pedidoWebInputError.inputOrderInpt}
                      onChange={(e: any) => {
                        setFormFileds({
                          ...formFileds,
                          inputOrderInpt: e.target.value,
                        })
                        if (pedidoWebInputError.inputOrderInpt !== '') {
                          setOrderWebInputError({
                            ...pedidoWebInputError,
                            inputOrderInpt: '',
                          })
                        }
                      }}
                    ></Input>
                  </div>

                  <div className="fl mw4 w-100 ml2 mt6 w-30-s">
                    <Button
                      size="small"
                      variation="primary"
                      onClick={() => searchMyOrder("myOrder")}
                    >
                      <FormattedMessage id="btn.search" />
                    </Button>
                  </div>
                </div>
              </form>
            </div>

            <div className="w-60-ns w-100-s">
              <p className="f4">{<FormattedMessage id="title.searchDate" />}</p>

              <form className="flex">
                <div className="w-60-ns w-100">
                  <DatePicker
                    label={<FormattedMessage id="label.date" />}
                    id="start_data"
                    name="start_data"
                    className="w-100 ma0 border-box bw1 br2  b--solid outline-0 near-black b--light-gray hover-b--silver bg-white f6 pv3 ph5"
                    value={dateInicial}
                    locale="pt-BR"
                    onChange={(date: any) => setDateInicial(date)}
                  />
                </div>

                <div className="w-60-ns w-100 ph2">
                  <DatePicker
                    label={<FormattedMessage id="label.dateUpTo" />}
                    id="end_data"
                    name="end_data"
                    className="w-100 ma0 border-box bw1 br2  b--solid outline-0 near-black b--light-gray hover-b--silver bg-white f6 pv3 ph5"
                    value={dateFim}
                    locale="pt-BR"
                    s
                    onChange={(date: any) => setEndDateFim(date)}
                  />
                </div>
              </form>
              <div className="db mt4">
                <Button
                  block
                  size="small"
                  variation="primary"
                  onClick={searchOrderData}
                >
                  <FormattedMessage id="btn.search" />
                </Button>
              </div>
            </div>
          </div>

          <div className="vtex_order-table flex flex-column-s flex-row-ns">
            <div className="w-100 mt7">
              {loadSpinner ? (
                <div className="tc">
                  <Spinner />
                </div>
              ) : dataPedidosWeb?.itens ? (
                <Table
                  fullWidth
                  dynamicRowHeight
                  schema={tableOrders}
                  items={orders}
                  density="high"
                />
              ) : (
                <div></div>
              )}

              {noResult ? (
                <Alert type="error" onClose={() => console.log('Closed!')}>
                  <FormattedMessage id="message.results" />
                </Alert>
              ) : (
                <div></div>
              )}

              {dataPedidoPeriod?.itens ? (
                <Table
                  fullWidth
                  dynamicRowHeight
                  schema={tableOrdersPeriod}
                  items={itensPeriodOrder}
                  density="high"
                />
              ) : (
                <div></div>
              )}
            </div>
          </div>
        </div>
      )}
    </ContentWrapper>
  )
}

type Props = {
  match: {
    params: {
      param: string
    }
  }
}

export default OrdersB2B

```


[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 omnichannel-order-status/react/components/OrdersB2B/tableOrders.tsx from the omnichannel-order-status VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from "react"
import { Link } from 'react-router-dom'
import { FormattedMessage } from 'react-intl'
import { orderStatus } from "../../utils/order"
import { format } from 'date-fns'
import { FormattedCurrency } from 'vtex.format-currency'

export const tableOrdersPeriod = {
    properties: {
      pedidoErpId: {
        title: <FormattedMessage id="label.numberOrderWeb" />,
      },
      dataPedido: {
        title: <FormattedMessage id="table.orderDate" />,
        cellRenderer: ({ rowData }: any) => {
          return format(new Date(rowData.dataPedido), 'dd/MM/yyyy')
        },
      },
      notaFiscal: {
        title: <FormattedMessage id="table.invoice" />,
      },
      status: {
        title: <FormattedMessage id="table.orderStatus" />,
        cellRenderer: ({ rowData }: any) => {
          return orderStatus(rowData.status)
        },
      },
      totalPedido: {
        title: <FormattedMessage id="table.orderTotal" />,
        cellRenderer: ({ rowData }: any) => {
          return <FormattedCurrency value={rowData.totalPedido} />
        },
      },
      details: {
        title: <FormattedMessage id="table.details" />,
        cellRenderer: ({ rowData }: any) => {
          return (
            <Link className="" to={`b2b-order-details/${rowData.pedidoErpId}`}>
              <FormattedMessage id="table.details" />
            </Link>
          )
        },
      },
    },
  }

export const tableOrders = {
  properties: {
    pedidoErpId: {
      title: <FormattedMessage id="label.numberOrderWeb" />,
    },
    pedidoErp: {
      title: <FormattedMessage id="label.numberDigimess" />,
    },
    meuPedido: {
      title: <FormattedMessage id="label.myOrder" />,
    },
    status: {
      title: <FormattedMessage id="table.orderStatus" />,
      cellRenderer: ({ rowData }: any) => {
        return orderStatus(rowData.status)
      },
    },
    dataPedido: {
      title: <FormattedMessage id="table.orderDate" />,
      cellRenderer: ({ rowData }: any) => {
        return format(new Date(rowData.dataPedido), 'dd/MM/yyyy')
      },
    },
    valorTotalPedido: {
      title: <FormattedMessage id="table.orderTotal" />,
      cellRenderer: ({ rowData }: any) => {
        return <FormattedCurrency value={rowData.valorTotalPedido} />
      },
    },
    details: {
      title: <FormattedMessage id="table.details" />,
      cellRenderer: ({ rowData }: any) => {
        return (
          <Link className="" to={`b2b-order-details/${rowData.pedidoErpId}`}>
            <FormattedMessage id="table.details" />
          </Link>
        )
      },
    },
  },
}

```


[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 omnichannel-order-status/react/components/Services/ApiB2b.tsx from the omnichannel-order-status VTEX app.

[Assistant]
Here's the implementation:

```tsx
import axios from 'axios';

const apiB2B = axios.create({
   responseType: 'json',
   baseURL: '/_v/',
});

export default apiB2B;
```


[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 search-demo-theme/sitemap/sitemap.json from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "urlset": {
    "url": [
      {
        "loc": "https://storetheme.vtex.com/about-us"
      }
    ]
  }
}
```


[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 search-demo-theme/docs/README.md from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Store theme 5.x
Our boilerplate theme to create stores in the VTEX IO platform.

## Preview
![](https://user-images.githubusercontent.com/1354492/63937047-e8d81c80-ca37-11e9-86fc-61e88847bbfb.png)

## Tutorial
To understand how things work check our tutorial [Build a store using VTEX IO](https://help.vtex.com/en/tracks/build-a-store-using-vtex-io)

## Dependencies
All store components that you see on this document are open source too. Production ready, you can found those apps in this GitHub organization.

Store framework is the baseline to create any store using _VTEX IO Web Framework_.
- [Store](https://github.com/vtex-apps/store/blob/master/README.md)

Store GraphQL is a middleware to access all VTEX APIs.
- [Store GraphQL](https://github.com/vtex-apps/store-graphql/blob/master/README.md)

### Store Component Apps
- [Header](https://github.com/vtex-apps/store-header/blob/master/README.md)
- [Footer](https://github.com/vtex-apps/store-footer/blob/master/README.md)
- [Carousel](https://github.com/vtex-apps/carousel/blob/master/README.md)
- [Shelf](https://github.com/vtex-apps/shelf/blob/master/README.md)
- [Telemarketing](https://github.com/vtex-apps/telemarketing/blob/master/README.md)
- [Menu](https://github.com/vtex-apps/menu/blob/master/README.md)
- [Login](https://github.com/vtex-apps/login/blob/master/README.md)
- [Minicart](https://github.com/vtex-apps/minicart/blob/master/README.md)
- [Category Menu](https://github.com/vtex-apps/category-menu/blob/master/README.md)
- [Product Summary](https://github.com/vtex-apps/product-summary/blob/master/README.md)
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb/blob/master/README.md)
- [Search Result](https://github.com/vtex-apps/search-result/blob/master/README.md)
- [Product Details](https://github.com/vtex-apps/product-details/blob/master/README.md)
- [Storecomponents](https://github.com/vtex-apps/store-components/blob/master/README.md)
- [Product Kit](https://github.com/vtex-apps/product-kit/blob/master/README.md) :construction: under construction
- [WishList](https://github.com/vtex-apps/wishlist/blob/master/README.md)  :construction: under construction
- [Order Placed](https://github.com/vtex-apps/order-placed/blob/master/README.md) :construction: under construction

### Store Pixel Apps

 - [Facebook Pixel](https://github.com/vtex-apps/facebook-pixel/blob/master/README.md)
 - [Google Analytics](https://github.com/vtex-apps/google-analytics/blob/master/README.md)
 - [Google Tag Manager](https://github.com/vtex-apps/google-tag-manager/blob/master/README.md)

## Contributing

Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.

```


[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 search-demo-theme/store/blocks.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
/* Blocks can be defined both on the store/blocks.json file, and in any number of json
 * files inside the store/blocks directory, with any arbitrary directory structure.
 *
 * Additionally, all blocks files can support comments, such as this one, if given the
 * .jsonc file extension.
 *
 * The store/blocks.json file is intended for backwards compatibility, for miscellaneous
 * blocks, or if the app is simple enough that it doesn't warrant splitting the file.
 */
{
  "store.orderplaced": {
    "blocks": ["order-placed"]
  },

  "store.account": {
    "blocks": ["my-account"],
    "parent": {
      "challenge": "challenge.profile"
    }
  },

  "store.login": {
    "blocks": ["login-content#default"]
  },

  "login-content#default": {
    "props": {
      "isInitialScreenOptionOnly": false,
      "defaultOption": 1,
      "showPasswordVerificationIntoTooltip": true
    }
  },

  "store.product-review-form": {
    "blocks": ["product-review-form"]
  },

  "store.custom#recommendation-shelf-cart": {
    "blocks": ["flex-layout.row#recommendation-cart"]
  },

  "store.not-found#product": {
    "blocks": ["rich-text#not-found"]
  },

  "store.not-found#search": {
    "blocks": ["rich-text#not-found"]
  },

  "rich-text#not-found": {
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "**PAGE NOT FOUND**",
      "font": "t-heading-1"
    }
  }
}

```


[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 search-demo-theme/store/routes.json from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "path": "/about-us"
  },
  "store.custom#faq": {
    "path": "/faq"
  },
  "store.custom#contact-us": {
    "path": "/contact-us"
  },
  "store.custom#recommendation-shelf-cart": {
    "path": "/_v/public/recommendations-embedded-shelf"
  }
}

```


[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 search-demo-theme/styles/css/vtex.store-video.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.videoContainer {
  width: 100%;
  height: 300px;
  margin-top: 2%;
}

@media only screen and (min-width: 640px) {
  .videoContainer {
    height: 700px;
  }
}

```


[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 search-demo-theme/styles/css/vtex.product-price.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.listPrice {
  color: #727273;
  margin-bottom: .25rem;
  font-size: 1rem;
}

.sellingPrice {
  color: #3f3f40;
  font-size: 1.25rem;
}

.sellingPriceValue {
  font-size: 2.25rem;
  font-weight: 700;
}

.installments {
  color: #727273;
  margin-bottom: 1rem;
}

.savings {
  font-weight: 500;
  color: #79B03A;
}

.sellingPriceValue--summary {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2E2E2E;
}

.savings--summary {
  background: #8BC34A;
  border-radius: 1000px;
  align-items: center;
  display: flex;

  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
}

.savings-discount--summary {
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.listPrice--summary {
  margin-bottom: 0.25rem;
  font-size: .875rem;
}

.installments--summary {
  margin-bottom: 2rem;
  font-size: 0.875rem;
}

.savings--summaryPercentage {
  background: #0f3e99;
  border-radius: 1000px;
  align-items: center;
  display: flex;
}

.savingsPercentage--summaryPercentage {
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

```


[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 search-demo-theme/styles/css/vtex.recommendation-shelf.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.shelfTitle {
  color: #727273;
  font-size: 2.25rem; /* 36px */
  font-weight: 300;
  font-family: "San Francisco", -apple-system, "system-ui", "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
}

.shelfTitleContainer {
  margin-bottom: 1rem; /* 15px */
}

.recommendationShelfContainer.recommendationShelfContainer--recommendation-shelf-cross-sell-cart {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.recommendationShelfContainer {
  margin-bottom: 2.5rem;
}

@media (max-width: 768px) {
  .shelfTitle {
    font-size: 1.5rem; /* 24px */
  }

  .shelfTitleContainer {
    margin-bottom: 0.75rem; /* 12px */
    padding-bottom: 1rem; /* 16px */
    padding-top: 1.5rem; /* 24px */
  }
}

@media (max-width: 480px) {
  .shelfTitle {
    font-size: 1.25rem; /* 20px */
  }
}

```


[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 search-demo-theme/styles/css/vtex.rich-text.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container--deals {
  color: #ffffff;
  text-align: center;
  justify-content: center;
}

.container--shelfTitle {
  color: #727273;
  justify-content: center;
  text-align: center;
}

.headingLevel2--shelfTitle {
  font-weight: 200;
}

.container--deals .paragraph {
  margin: 0;
}

.container--link {
  justify-content: center;
}

.container--question {
  justify-content: center;
}

.container--question .paragraph {
  text-align: center;
  max-width: 540px;
  margin: 0 16px;
  padding-top: 120px;
  color: #03034E;
}

.container--question .strong {
  font-size: 32px;
  line-height: 2rem;
  font-weight: 700;
}

.container--link .paragraph {
  text-align: center;
  max-width: 540px;
  padding-top: 36px;
  padding-bottom: 84px;
  color: #03034E;
}

.container--link .strong {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.container--link .link {
  text-decoration: none;
  font-size: 36px;
  font-weight: 300;
  color: #03034E;
}

.container--title {
  color: #03034E;
  font-size: 28px;
  font-weight: 700;
}

@media only screen and (min-width: 640px) {
  .container--question .strong {
    font-size: 40px;
    line-height: 3rem;
  }

  .container--about {
    max-width: 85%;
  }

  .container--title {
    color: #03034E;
    font-size: 40px;
    font-weight: 700;
    max-width: 60%;
  }

  .container--title .paragraph {
    line-height: 1.3em;
  }
}

```


[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 search-demo-theme/styles/css/vtex.product-summary.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
  border-radius: 50%;
}

.container :global(.vtex-modal-layout-0-x-triggerContainer) {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
  opacity: 1;
}

@media screen and (max-width: 40em) {
  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
    display: none;
  }
}

.nameContainer {
  justify-content: start;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brandName {
  font-weight: 600;
  font-size: 18px;
  color: #2E2E2E;
}

.container {
  text-align: start;
}

.imageContainer {
  text-align: center;
}

.image {
  border-radius: 0.25rem;
}

```


[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 search-demo-theme/styles/css/vtex.modal-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
@media screen and (min-width: 40em) {
  .paper--quickview {
    height: 260px;
    width: 580px;
  }

  .actionsContainer--quickview {
    padding: 0 2rem 2rem 2rem;
  }
}

@media screen and (min-width: 50em) {
  .paper--quickview {
    height: 450px;
    width: 900px;
  }
}

@media screen and (min-width: 75em) {
  .paper--quickview {
    width: calc(100% - 4rem);
    height: auto;
  }
}

@media screen and (min-width: 82em) {
  .actionsContainer--quickview {
    padding: 0 2.5rem 2.5rem 2.5rem;
  }
}

.paper--quickview {
  min-width: 320px;
  max-width: 96rem;
}

.headerContainer--quickview {
  border: none;
  position: absolute;
  right: 0;
}

.actionsContainer--quickview {
  height: 100%;
  width: 100%;
  transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: transparent;
  box-shadow: -4px 0px 27px -12px transparent;
}

.actionsContentWrapper {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #aaa;
  padding-top: 1.5rem;
}

.contentContainer--quickviewContent {
  padding: 2.5rem 0 2.5rem 2rem;
  overflow-x: hidden;
}

.triggerContainer--quickview {
  padding: .75rem;
}

.triggerContainer {
  outline: none;
}

.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) {
  border-top-color: rgb(238, 238, 238);
  box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64);
}

.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper {
  border-top-color: transparent;
}

.closeButton {
  padding-right: 1rem;
}

.paper--product-gifts {
  padding: 1.5rem;
}

```


[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 search-demo-theme/styles/css/vtex.store-header.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
/* add transitions */
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-store-components-3-x-logoLink),
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-minicart-2-x-openIconContainer),
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-store-components-3-x-searchBarContainer) {
  transition: all 0.3s ease;
  display: block;
}

/* desktop/mobile main header padding and background transitions */
:global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
  transition: background 0.3s ease;
  will-change: padding, background;
}

/* main header desktop has a bigger padding when not stuck */
:global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* add a box-shadow to desktop/mobile header when stuck */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

/*
 * remove the extra padding when stuck from the desktop header
 * we add a transition only when "stuck" for the "unstick" step seem faster
 */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
  transition: padding 0.3s ease, background 0.3s ease;
  padding-top: 0;
  padding-bottom: 0;
}

/* if supported add some translucency to the desktop/mobile header background */
@supports (backdrop-filter: blur(5px)) {
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
    backdrop-filter: blur(8px);
  }

  /* header background when stuck and not hovered */
  :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
    background: rgba(240, 240, 240, 0.8);
  }
}

/* stick wrapper with the same color as the desktop/mobile header */
:global(.vtex-sticky-layout-0-x-wrapper--sticky-header) {
  background-color: #f0f0f0;
}

/* resize the logo for neat effect */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-store-components-3-x-logoLink) {
  transform: scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-store-components-3-x-logoLink),
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-minicart-2-x-openIconContainer),
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-store-components-3-x-searchBarContainer),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
    transition: none;
  }
}

```


[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 search-demo-theme/styles/css/vtex.store-components.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.notificationBarContainer {
  background-color: #e6f1e6;
  color: #03034e;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
}

.infoCardContainer--info-card-home {
  max-width: 1520px;
  margin: 0 auto;
  background-color: #e6f1e6;
  padding: 0px;
}

.newsletter {
  background-color: #03054e;
  max-width: 1528px;
  margin: 0 auto;
}

.newsletter .container {
  padding: 60px 10px;
}

.label {
  color: #fff;
  font-size: 26px;
}

.inputGroup {
  padding-bottom: 4px;
  display: flex;
  color: #fff;
}

.inputGroup :global(.vtex-styleguide-9-x-hideDecorators) {
  background-color: transparent;
  color: #fff;
  border: none;
}

.inputGroup :global(.vtex-styleguide-9-x-hideDecorators)::placeholder {
  color: #fff;
  font-size: 16px;
}

.inputGroup :global(.vtex-button) {
  background-color: transparent;
  color: #fff;
  border: none;
  margin-right: -24px;
}

.buttonContainer {
  padding-top: 0px;
}

.imageElement--storePrint {
  max-height: 300px;
  margin-bottom: 20px;
}

.skuSelectorContainer {
  margin: 1rem 0;
}

@media only screen and (min-width: 640px) {
  .newsletter .container {
    padding: 140px;
  }
  .label {
     font-size: 40px;
  }
  .infoCardContainer--info-card-home .infoCardTextContainer {
    width: 30%;
  }
  .infoCardContainer--info-card-home .infoCardImageContainer {
    width: 70%;
  }
  .imageElement--storePrint {
    margin-bottom: 0px;
    max-height: 600px;
  }
}

.productImagesContainer--quickview .carouselContainer {
  justify-content: flex-start;
}

.productImagesContainer--quickview .productImageTag {
  object-fit: cover !important;
}

.productImagesContainer--quickview .carouselGaleryThumbs {
  display: none;
}

.productImagesContainer--quickview .carouselGaleryCursor {
  margin: 0;
  padding: 0;
  width: 100%;
}

.productNameContainer {
  color: #3f3f40;
  font-weight: bold;
  font-size: 30px;
}

.image {
  image-rendering: -webkit-optimize-contrast;
}

```


[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 search-demo-theme/styles/css/vtex.store-footer.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.row--menu-row {
  padding-right: 24px;
}

.row--menu-row .rowContainer {
  align-items: flex-start;
}

.row--payment-methods {
  padding-top: 16px;
}

```


[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 search-demo-theme/styles/css/vtex.product-identifier.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.product-identifier--productReference {
  margin-bottom: 1rem;
}

```


[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 search-demo-theme/styles/css/vtex.reviews-and-ratings.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  max-width: 96rem;
  padding-left: .5rem;
  padding-right: .5rem;
}

.inlineContainer {
  margin-left: 0rem;
}

.star--filled {
  color: #FFB100;
}

.star--empty {
  color: #FFB100;
}

```


[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 search-demo-theme/styles/css/vtex.tab-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.listContainer--home-tab-layout {
  display: flex;
  align-items: center;
  gap: 72px;
  border-bottom: 2px solid rgba(234, 239, 239, 1);
  min-height: 31px;
  margin-bottom: 36px;
  margin-top: 36px;

  @media screen and (max-width: 1024px) {
    gap: 24px;
    flex-wrap: nowrap;
    scrollbar-color: #fff #fff;
    padding: 0px 24px;
    overflow: auto;
  }
}

.listItem--home-tab-layout-item {
  margin: 0;
  padding: 0;

  :global(.vtex-button) {
    font-size: 20px;
    text-transform: none;
    background: none;
    border: none;
    color: rgba(139, 151, 159, 1);
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 1024px) {
      font-size: 14px;
      color: rgba(187, 202, 210, 1);
    }

    :global(.vtex-button__label) {
      padding: 0 !important;
      position: relative;
      height: 31px;
      display: flex;
      align-items: center;
      justify-content: center;

      @media screen and (max-width: 1024px) {
        text-wrap: nowrap;
      }
    }
  }
}
.listItemActive--home-tab-layout-item {
  :global(.vtex-button) {
    color: rgba(62, 80, 85, 1);
    font-weight: 700;

    :global(.vtex-button__label) {
      &::after {
        content: "";
        border-bottom: 2px solid #0F3E99;
        position: absolute;
        top: 100%;
        width: 100%;
        @media screen and (max-width: 1024px) {
          top: 98%;
        }
      }
    }
  }
}

```


[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 search-demo-theme/styles/css/vtex.product-highlights.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.productHighlightWrapper--collection {
  position: absolute;
  top: 10px;
  left: 5px;
  width: 200px;
}

.productHighlightText {
  background: antiquewhite;
  border-radius: 20px;
  padding: 5px 10px;
}

```


[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 search-demo-theme/styles/css/vtex.flex-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRowContent--menu-link,
.flexRowContent--main-header {
  padding: 0 0.5rem;
}

@media screen and (min-width: 40em) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 1rem;
  }
}

@media screen and (min-width: 80rem) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 0.25rem;
  }
}

.flexRowContent--menu-link {
  background-color: #03044e;
  color: #fff;
}

.flexRowContent--main-header {
  background-color: #f0f0f0;
}

.flexRowContent--main-header-mobile {
  align-items: center;
  padding: 0.625rem 0.5rem;
  background-color: #f0f0f0;
}

.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
  color: #ffffff;
  font-size: 14px;
}

.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
  color: #727273;
  font-size: 14px;
}

.flexRow--deals {
  background-color: #0F3E99;
  padding: 14px 0px;
}

.flexRow--deals .stretchChildrenWidth {
  align-items: center;
}

.flexRow--deals .flexCol {
  align-items: center;
  margin-bottom: 5px;
  padding-top: 5px;
}

.flexCol--filterCol {
  max-width: 500px;
  min-width: 230px;
}

.flexCol--productCountCol {
  align-items: flex-start;
}

.flexCol--orderByCol {
  align-items: flex-end;
}

.flexCol--orderByMobileCol {
  width: 42%;
}

.flexCol--filterMobileCol {
  width: 38%;
}

.flexRow--quickviewMainRow {
  display: flex;
  max-height: 100%;
}

.flexColChild--quickviewDetails:first-child {
  overflow-y: auto;
  height: 66% !important;
  overflow-x: hidden;
}

.flexColChild--quickviewDetails:last-child {
  height: 34% !important;
}

.flexRow--addToCartRow {
  padding-bottom: 1rem;
}

```


[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 search-demo-theme/styles/css/vtex.carousel.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.containerImg {
  background-color: #f0f0f0;
}

.containerImg .img {
  max-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 search-demo-theme/styles/css/vtex.search-result.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.galleryLayoutOptionButton {
  background-color: #F0F0F0;
  color: #3F3F40;
  padding: 0.375rem 0.75rem 0.375rem 0.75rem;
}

.galleryLayoutOptionButton--selected {
  background-color: #3F3F40;
  color: #FFFFFF;
}

.galleryLayoutSwitcher {
  border-radius: 4px 4px 4px 4px;
  justify-content: center;
  overflow: hidden;
  width: auto !important;
  align-self: center
}

.galleryItem--list {
  border-bottom: 1px #E7E9EE solid;
}

```


[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 search-demo-theme/styles/css/vtex.slider-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.sliderLayoutContainer {
  justify-content: center;
}

.sliderLayoutContainer--carousel {
  background-color: #F0F0F0;
  min-height: 450px;
}

.sliderTrackContainer {
  max-width: 100%;
}

.paginationDotsContainer {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.layoutContainer--shelf {
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 96rem;
  min-height: 550px;
}

.slide--shelf {
  margin-bottom: 25px;
  padding-left: .5rem;
  padding-right: .5rem;
  min-height: 550px;
}

.sliderTrack--vtex-recommendation-shelf-slider{
  gap: 3rem;
}

```


[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 search-demo-theme/styles/css/vtex.stack-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.stackItem--product {
  width: 100%;
  min-height: 257px
}

.stackItem--quickview {
  right: 0;
  top: 0;
  left: auto;
}

```


[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 search-demo-theme/styles/configs/style.json from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "typeScale": [
      3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
    ],
    "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
    "customMedia": [
      { "s": 20 },
      { "ns": {
          "value": 40,
          "minWidth": true
        }
      },
      { "m": {
          "value": 40,
          "minWidth": true
        }
      },
      { "l": {
        "value": 64,
        "minWidth": true
      }
      },
      { "xl": {
          "value": 80,
          "minWidth": true
        }
      }
    ],
    "colors": {
      "black-90": "rgba(0,0,0,.9)",
      "black-80": "rgba(0,0,0,.8)",
      "black-70": "rgba(0,0,0,.7)",
      "black-60": "rgba(0,0,0,.6)",
      "black-50": "rgba(0,0,0,.5)",
      "black-40": "rgba(0,0,0,.4)",
      "black-30": "rgba(0,0,0,.3)",
      "black-20": "rgba(0,0,0,.2)",
      "black-10": "rgba(0,0,0,.1)",
      "black-05": "rgba(0,0,0,.05)",
      "black-025": "rgba(0,0,0,.025)",
      "black-0125": "rgba(0,0,0,.0125)",

      "white-90": "rgba(255,255,255,.9)",
      "white-80": "rgba(255,255,255,.8)",
      "white-70": "rgba(255,255,255,.7)",
      "white-60": "rgba(255,255,255,.6)",
      "white-50": "rgba(255,255,255,.5)",
      "white-40": "rgba(255,255,255,.4)",
      "white-30": "rgba(255,255,255,.3)",
      "white-20": "rgba(255,255,255,.2)",
      "white-10": "rgba(255,255,255,.1)",
      "white-05": "rgba(255,255,255,.05)",
      "white-025": "rgba(255,255,255,.025)",
      "white-0125": "rgba(255,255,255,.0125)"
    },
    "semanticColors": {
      "background": {
        "base": "#ffffff",
        "base--inverted": "#03044e",
        "action-primary": "#0F3E99",
        "action-secondary": "#eef3f7",
        "emphasis": "#f71963",
        "disabled": "#f2f4f5",
        "success": "#8bc34a",
        "success--faded": "#eafce3",
        "danger": "#ff4c4c",
        "danger--faded": "#ffe6e6",
        "warning": "#ffb100",
        "warning--faded": "#fff6e0",
        "muted-1": "#727273",
        "muted-2": "#979899",
        "muted-3": "#cacbcc",
        "muted-4": "#e3e4e6",
        "muted-5": "#f2f4f5"
      },
      "hover-background": {
        "action-primary": "#072c75",
        "action-secondary": "#dbe9fd",
        "emphasis": "#dd1659",
        "success": "#8bc34a",
        "success--faded": "#eafce3",
        "danger": "#e13232",
        "danger--faded": "#ffe6e6",
        "warning": "#ffb100",
        "warning--faded": "#fff6e0",
        "muted-1": "#727273",
        "muted-2": "#979899",
        "muted-3": "#cacbcc",
        "muted-4": "#e3e4e6",
        "muted-5": "#f2f4f5"
      },
      "active-background": {
        "action-primary": "#0c389f",
        "action-secondary": "#d2defc",
        "emphasis": "#dd1659",
        "success": "#8bc34a",
        "success--faded": "#eafce3",
        "danger": "#ff4c4c",
        "danger--faded": "#ffe6e6",
        "warning": "#ffb100",
        "warning--faded": "#fff6e0",
        "muted-1": "#727273",
        "muted-2": "#979899",
        "muted-3": "#cacbcc",
        "muted-4": "#e3e4e6",
        "muted-5": "#f2f4f5"
      },
      "text": {
        "action-primary": "#0F3E99",
        "action-secondary": "#eef3f7",
        "link": "#0F3E99",
        "emphasis": "#f71963",
        "disabled": "#979899",
        "success": "#8bc34a",
        "success--faded": "#eafce3",
        "danger": "#ff4c4c",
        "danger--faded": "#ffe6e6",
        "warning": "#ffb100",
        "warning--faded": "#fff6e0",
        "muted-1": "#727273",
        "muted-2": "#979899",
        "muted-3": "#cacbcc",
        "muted-4": "#e3e4e6",
        "muted-5": "#f2f4f5"
      },
      "visited-text": {
        "link": "#0c389f"
      },
      "hover-text": {
        "action-primary": "#072c75",
        "action-secondary": "#dbe9fd",
        "link": "#0c389f",
        "emphasis": "#dd1659",
        "success": "#8bc34a",
        "success--faded": "#eafce3",
        "danger": "#e13232",
        "danger--faded": "#ffe6e6",
        "warning": "#ffb100",
        "warning--faded": "#fff6e0"
      },
      "active-text": {
        "link": "#0c389f",
        "emphasis": "#dd1659",
        "success": "#8bc34a",
        "success--faded": "#eafce3",
        "danger": "#ff4c4c",
        "danger--faded": "#ffe6e6",
        "warning": "#ffb100",
        "warning--faded": "#fff6e0"
      },
      "border": {
        "action-primary": "#0F3E99",
        "action-secondary": "#eef3f7",
        "emphasis": "#f71963",
        "disabled": "#e3e4e6",
        "success": "#8bc34a",
        "success--faded": "#eafce3",
        "danger": "#ff4c4c",
        "danger--faded": "#ffe6e6",
        "warning": "#ffb100",
        "warning--faded": "#fff6e0",
        "muted-1": "#727273",
        "muted-2": "#979899",
        "muted-3": "#cacbcc",
        "muted-4": "#e3e4e6",
        "muted-5": "#f2f4f5"
      },
      "hover-border": {
        "action-primary": "#072c75",
        "action-secondary": "#dbe9fd",
        "emphasis": "#dd1659",
        "success": "#8bc34a",
        "success--faded": "#eafce3",
        "danger": "#e13232",
        "danger--faded": "#ffe6e6",
        "warning": "#ffb100",
        "warning--faded": "#fff6e0",
        "muted-1": "#727273",
        "muted-2": "#979899",
        "muted-3": "#cacbcc",
        "muted-4": "#e3e4e6",
        "muted-5": "#f2f4f5"
      },
      "active-border": {
        "action-primary": "#0c389f",
        "action-secondary": "#d2defc",
        "emphasis": "#dd1659",
        "success": "#8bc34a",
        "success--faded": "#eafce3",
        "danger": "#ff4c4c",
        "danger--faded": "#ffe6e6",
        "warning": "#ffb100",
        "warning--faded": "#fff6e0",
        "muted-1": "#727273",
        "muted-2": "#979899",
        "muted-3": "#cacbcc",
        "muted-4": "#e3e4e6",
        "muted-5": "#f2f4f5"
      },
      "on": {
        "base": "#3f3f40",
        "base--inverted": "#ffffff",
        "action-primary": "#ffffff",
        "action-secondary": "#0F3E99",
        "emphasis": "#ffffff",
        "disabled": "#979899",
        "success": "#ffffff",
        "success--faded": "#3f3f40",
        "danger": "#ffffff",
        "danger--faded": "#3f3f40",
        "warning": "#ffffff",
        "warning--faded": "#1a1a1a",
        "muted-1": "#ffffff",
        "muted-2": "#ffffff",
        "muted-3": "#3f3f40",
        "muted-4": "#3f3f40",
        "muted-5": "#3f3f40"
      },
      "hover-on": {
        "action-primary": "#ffffff",
        "action-secondary": "#0F3E99",
        "emphasis": "#ffffff",
        "success": "#ffffff",
        "success--faded": "#3f3f40",
        "danger": "#ffffff",
        "danger--faded": "#3f3f40",
        "warning": "#ffffff",
        "warning--faded": "#1a1a1a"
      },
      "active-on": {
        "action-primary": "#ffffff",
        "action-secondary": "#0F3E99",
        "emphasis": "#ffffff",
        "success": "#ffffff",
        "success--faded": "#3f3f40",
        "danger": "#ffffff",
        "danger--faded": "#3f3f40",
        "warning": "#ffffff",
        "warning--faded": "#1a1a1a"
      }
    },
    "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
    "borderRadius": [0, 0.125, 0.25, 0.5, 1],
    "widths": [1, 2, 4, 8, 16],
    "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
    "heights": [1, 2, 4, 8, 16],
    "sizes": [
      {"name": "small", "value": 2},
      {"name": "regular", "value": 2.5},
      {"name": "large", "value": 3}
    ],
    "typography":{
      "measure": [30, 34, 20],
      "styles": {
        "heading-1": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "700",
          "fontSize": "3rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        },
        "heading-2": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "700",
          "fontSize": "2.25rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        },
        "heading-3": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "700",
          "fontSize": "1.75rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        },
        "heading-4": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "normal",
          "fontSize": "1.5rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        },
        "heading-5": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "normal",
          "fontSize": "1.25rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        },
        "heading-6": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "normal",
          "fontSize": "1.25rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        },
        "body": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "normal",
          "fontSize": "1rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        },
        "small": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "normal",
          "fontSize": "0.875rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        },
        "mini": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "normal",
          "fontSize": "0.75rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        },
        "action": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "500",
          "fontSize": "1rem",
          "textTransform": "uppercase",
          "letterSpacing": "0"
        },
        "action--small": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "500",
          "fontSize": "0.875rem",
          "textTransform": "uppercase",
          "letterSpacing": "0"
        },
        "action--large": {
          "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
          "fontWeight": "500",
          "fontSize": "1.25rem",
          "textTransform": "uppercase",
          "letterSpacing": "0"
        },
        "code": {
          "fontFamily": "Consolas, monaco, monospace",
          "fontWeight": "normal",
          "fontSize": "1rem",
          "textTransform": "initial",
          "letterSpacing": "0"
        }
      }
    },
    "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 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 search-demo-theme/styles/css/contact/vtex.flex-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRowContent--contact {
  max-width: 700px;
  margin: auto;
}

.flexRowContent--contact :global(.vtex-input__label),
.flexRowContent--contact :global(.vtex-textarea__label) {
  font-size: 1rem;
  color: #3f3f40;
}

.flexRowContent--contact :global(.vtex-input),
.flexRowContent--contact :global(.vtex-textarea) {
  display: block;
  margin-bottom: 1rem;
}

```


[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 search-demo-theme/styles/css/faq/vtex.flex-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRowContent--faq {
  max-width: 700px;
  margin: auto;
}

```


[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 search-demo-theme/styles/css/faq/vtex.disclosure-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.trigger--question {
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
}

.trigger--question :global(.vtex-rich-text-0-x-paragraph) {
  font-weight: bold;
}

.trigger--question:focus,
.trigger--question:focus :global(.vtex-rich-text-0-x-paragraph) {
  color: #0F3E99;
}

.trigger :global(.vtex-store-icons-0-x-caretIcon) {
  margin-right: 1rem;
}

.content--answer {
  transition: opacity 250ms ease-in-out, height 250ms ease-in-out, transform 250ms ease-in-out;
  opacity: 0;
  height: 0;
  transform: translate3d(0, -10%, 0);
}

.content--answer[data-enter] {
  opacity: 1;
  height: fit-content;
  transform: translate3d(0, 0, 0);
}

.content--answer[data-leave] {
  height: 0;
  overflow: hidden;
}

```


[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 search-demo-theme/styles/css/search/vtex.rich-text.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container--layout-option {
  margin-left: 0.3em;
}

.paragraph--layout-option {
  margin: 0;
}

.paragraph--summarySpecificationBullet {
  margin: 0;
  line-height: initial;
  font-size: 1.25rem;
  line-height: 1.15rem;
}

```


[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 search-demo-theme/styles/css/search/vtex.product-summary.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.nameContainer--summaryListDesktop {
  padding-top: 0.25rem;
  padding-bottom: 0.75rem;
  justify-content: start;
}

.nameContainer--summaryListMobile {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  justify-content: start;
}

.brandName--summaryListMobile {
  font-weight: 400;
  font-size: 0.875rem;
  color: black;
}

.container--listLayout {
  max-width: none !important;
}

.image--summaryListDesktop {
  width: 180px !important;
}

.image--summaryListMobile {
  width: 140px !important;
  min-width: 140px;
  height: inherit !important;
}

```


[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 search-demo-theme/styles/css/search/vtex.store-components.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.productBrandName--summaryListDesktop {
  text-decoration: none;
  font-weight: 500;
  color: #0067C7;
  font-size: .875rem;
}

.productBrandName--summaryListMobile {
  text-decoration: none;
  color: #0067C7;
  font-size: .875rem;
}

```


[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 search-demo-theme/styles/css/search/vtex.flex-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--orderByAndSwitcher {
  padding-right: 1.5em;
}

.flexRowContent--savingsSummaryListDesktop {
  justify-content: flex-start;
}

.flexCol--summaryRightListDesktop {
  justify-content: space-around;
}

.flexRow--buyNowButton :global(.vtex-button) {
  background: #eef3f7;
  border-color:#eef3f7;
  color: #0f3e99;
}

.flexRow--buyNowButton:hover :global(.vtex-button) {
  background: #dbe9fd;
  border-color:#dbe9fd;
}

.flexCol--productRating {
  margin-bottom: 3rem;
}

.flexCol--summaryDetailsListMobile {
  justify-content: space-between;
}

.flexCol--summaryUpDetailsListMobile {
  margin-bottom: 0.25rem
}

```


[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 search-demo-theme/styles/css/product-specification-table/vtex.flex-layout.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--productSpecificationGroup:not(:first-child) {
  margin-top: 1.5rem;
}

.flexRow--productSpecificationGroupName {
  background-color: #eaeaea;
  padding: 0.5rem 1rem;
}

.flexCol--productSpecificationName {
  padding: 1rem;
}

.flexCol--productSpecificationValue {
  padding: 1rem 1rem 1rem 0;
}

.flexRow--productSpecification:nth-child(even) {
  background-color: #f9f9f9;
}

```


[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 search-demo-theme/styles/css/product-specification-table/vtex.product-specifications.css from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.groupName {
  font-size: 1.25rem;
}

.specificationName {
  font-weight: bold;
}

```


[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 search-demo-theme/store/blocks/about-us.json from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "blocks": [
      "flex-layout.row#about-us",
      "video#about-us"
    ]
  },

  "flex-layout.row#about-us": {
    "children": [
      "image#mobile-phone",
      "flex-layout.col#text-about-us"
    ]
  },

  "flex-layout.col#text-about-us": {
    "children": [
      "rich-text#title-about-us",
      "rich-text#about-us"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title-about-us": {
    "props": {
      "text":
      "# Create meaningful and relevant experiences.",
      "blockClass": "title"
    }
  },

  "image#mobile-phone": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png",
      "maxHeight": "",
      "maxWidth": "",
      "blockClass": "storePrint"
    }
  },
  "video#about-us": {
    "props": {
      "src": "https://www.youtube.com/embed/JgkrlaF52WQ",
      "width": "100%",
      "height": "100%"
    }
  },
  "rich-text#about-us": {
    "props": {
      "text": "**Optimized store framework** \n Free your front-end with our React + Node store framework. Improve usability and SEO, while driving more conversion with modular components, single page applications, and a ready-for-PWA structure. \n **Multi-currency and language** \n Go international with multiple storefronts to support different languages and easily manage local currencies and payment conditions. \n **Serverless development platform** \n Reduce loading time, improve usability, and make the best out of SEO. Developing scalable components with a comprehensive, easy-to-use toolset, you can build stores faster than ever.",
      "blockClass": "about"
    }
  }
}

```


[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 search-demo-theme/store/blocks/recommendations.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  // Cart Shelf
  "flex-layout.row#recommendation-cart": {
    "children": ["recommendation-shelf#cart"]
  },
  "recommendation-shelf#cart": {
    "blocks": ["list-context.product-list-static#recommendations-cart"],
    "props": {
      "campaignVrn": "vrn:recommendations:biggy:rec-cross-v2:1ac9593d-f96a-4929-9d96-af60897e6cc1",
      "blockClass": "recommendation-shelf-cross-sell-cart",
      "itemsContext": ["CART"]
    }
  },
  // Similar items
  "flex-layout.row#recommendation-similar-items": {
    "children": ["recommendation-shelf#similar-items"]
  },
  "recommendation-shelf#similar-items": {
    "blocks": ["list-context.product-list-static#recommendations"],
    "props": {
      "campaignVrn": "vrn:recommendations:biggy:rec-similar-v2:26d53537-065d-4fff-92ac-1aeba049b33d",
      "blockClass": "recommendation-shelf-similar-items"
    }
  },
  // Cross-sell
  "flex-layout.row#recommendation-cross-sell": {
    "children": ["recommendation-shelf#cross-sell"]
  },
  "recommendation-shelf#cross-sell": {
    "blocks": ["list-context.product-list-static#recommendations"],
    "props": {
      "campaignVrn": "vrn:recommendations:biggy:rec-cross-v2:ca2acae8-41a4-4bcd-9ffd-0ac40b7c0a57",
      "blockClass": "recommendation-shelf-cross-sell"
    }
  },
  // Top items
  "flex-layout.row#recommendation-top-items": {
    "children": ["recommendation-shelf#top-items"]
  },
  "recommendation-shelf#top-items": {
    "blocks": ["list-context.product-list-static#recommendations"],
    "props": {
      "campaignVrn": "vrn:recommendations:biggy:rec-top-items-v2:2860bc12-c343-4f1c-9006-ab1184fa4ca3",
      "blockClass": "recommendation-shelf-top-items",
      "displayTitle": false
    }
  },
  // Personalized recommendations
  "flex-layout.row#recommendation-personalized": {
    "children": ["recommendation-shelf#personalized"]
  },
  "flex-layout.row#recommendation-personalized-with-title": {
    "children": ["recommendation-shelf#personalized-with-title"]
  },
  "recommendation-shelf#personalized": {
    "blocks": ["list-context.product-list-static#recommendations"],
    "props": {
      "campaignVrn": "vrn:recommendations:biggy:rec-persona-v2:ebc2cdc4-b610-4ea1-88f1-b34908daf7cb",
      "blockClass": "recommendation-shelf-personalized",
      "displayTitle": false
    }
  },
  "recommendation-shelf#personalized-with-title": {
    "blocks": ["list-context.product-list-static#recommendations"],
    "props": {
      "campaignVrn": "vrn:recommendations:biggy:rec-persona-v2:ebc2cdc4-b610-4ea1-88f1-b34908daf7cb",
      "blockClass": "recommendation-shelf-personalized"
    }
  },
  // Last seen
  "flex-layout.row#recommendation-last-seen": {
    "children": ["recommendation-shelf#last-seen"]
  },
  "recommendation-shelf#last-seen": {
    "blocks": ["list-context.product-list-static#recommendations"],
    "props": {
      "campaignVrn": "vrn:recommendations:biggy:rec-last-v2:fad5f2b7-24be-469e-8ccb-0b1e98faec6a",
      "blockClass": "recommendation-shelf-last-seen",
      "title": "Continue shopping"
    }
  },
  // Search Based Best discounts
  "flex-layout.row#recommendation-best-discounts": {
    "children": ["recommendation-shelf#best-discounts"]
  },
  "recommendation-shelf#best-discounts": {
    "blocks": ["list-context.product-list-static#recommendations"],
    "props": {
      "campaignVrn": "vrn:recommendations:biggy:rec-search-v2:217c0e34-96e9-44fc-8e1a-2459399779e7",
      "blockClass": "recommendation-shelf-best-discounts",
      "displayTitle": false
    }
  },
  // Personalized Tab
  "flex-layout.row#home-tab": {
    "children": ["tab-layout#home"]
  },
  "tab-layout#home": {
    "children": ["tab-list#home", "tab-content#home"],
    "props": {
      "blockClass": "home-tab-layout",
      "defaultActiveTabId": "personalized"
    }
  },
  "tab-list#home": {
    "children": [
      "tab-list.item#personalized",
      "tab-list.item#best-sellers",
      "tab-list.item#best-discounts"
    ],
    "props": {
      "blockClass": "home-tab-layout"
    }
  },
  "tab-content#home": {
    "children": [
      "tab-content.item#personalized",
      "tab-content.item#best-sellers",
      "tab-content.item#best-discounts"
    ],
    "props": {
      "blockClass": "home-tab-layout"
    }
  },
  "tab-list.item#personalized": {
    "props": {
      "tabId": "personalized",
      "label": "For you",
      "defaultActiveTab": true,
      "blockClass": "home-tab-layout-item"
    }
  },
  "tab-list.item#best-discounts": {
    "props": {
      "tabId": "best-discounts",
      "label": "Best Discounts",
      "blockClass": "home-tab-layout-item"
    }
  },
  "tab-list.item#best-sellers": {
    "props": {
      "tabId": "best-sellers",
      "label": "Best Sellers",
      "blockClass": "home-tab-layout-item"
    }
  },
  "tab-content.item#personalized": {
    "children": ["flex-layout.row#recommendation-personalized"],
    "props": {
      "tabId": "personalized"
    }
  },
  "tab-content.item#best-discounts": {
    "children": ["flex-layout.row#recommendation-best-discounts"],
    "props": {
      "tabId": "best-discounts"
    }
  },
  "tab-content.item#best-sellers": {
    "children": ["flex-layout.row#recommendation-top-items"],
    "props": {
      "tabId": "best-sellers"
    }
  },
  // Commons
  "product-summary.shelf#recommendation-cart": {
    "children": [
      "stack-layout#prodsum",
      "product-summary-name",
      "flex-layout.col#productRating",
      "product-summary-space",
      "product-list-price#summary",
      "flex-layout.row#selling-price-savings",
      "product-installments#summary",
      "add-to-cart-button#buyNow"
    ]
  },
  "list-context.product-list-static#recommendations-cart": {
    "blocks": ["product-summary.shelf#recommendation-cart"],
    "children": ["slider-layout#recommendation-slider"]
  },
  "list-context.product-list-static#recommendations": {
    "blocks": ["product-summary.shelf"],
    "children": ["slider-layout#recommendation-slider"]
  },
  "slider-layout#recommendation-slider": {
    "props": {
      "blockClass": "vtex-recommendation-shelf-slider",
      "itemsPerPage": {
        "desktop": 5,
        "tablet": 3,
        "phone": 2
      },
      "infinite": true
    }
  }
}

```


[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 search-demo-theme/store/blocks/product-price.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#selling-price": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 4
    },
    "children": [
      "product-selling-price"
    ]
  },

  "flex-layout.row#list-price-savings": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 2,
      "marginTop": 5
    },
    "children": [
      "product-list-price",
      "product-price-savings"
    ]
  }
}

```


[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 search-demo-theme/store/blocks/minicart.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "add-to-cart-button": {
    "props": {
      "addToCartFeedback": "customEvent",
      "customPixelEventId": "add-to-cart-button"
    }
  },

  "minicart.v2": {
    "props": {
      "customPixelEventId": "add-to-cart-button"
    },
    "children": ["minicart-base-content"]
  },
  "minicart-base-content": {
    "blocks": ["minicart-empty-state"],
    "children": ["minicart-product-list", "flex-layout.row#minicart-footer"]
  },
  "flex-layout.row#minicart-footer": {
    "props": {
      "blockClass": "minicart-footer"
    },
    "children": ["flex-layout.col#minicart-footer"]
  },
  "flex-layout.col#minicart-footer": {
    "children": ["minicart-summary", "minicart-checkout-button"]
  },
  "minicart-product-list": {
    "blocks": ["product-list#minicart"],
    "props": {
      "splitItem": false
    }
  }
}

```


[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 search-demo-theme/store/blocks/search.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.search": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#brand": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "orderByField": "OrderByReleaseDateDESC",
        "hideUnavailableItems": true,
        "maxItemsPerPage": 10,
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#department": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#category": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#subcategory": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "search-result-layout": {
    "blocks": [
      "search-result-layout.desktop",
      "search-result-layout.mobile",
      "search-not-found-layout"
    ]
  },

  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#searchbread",
      "flex-layout.row#searchtitle",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "preventRouteChange": false,
      "defaultGalleryLayout": "grid"
    }
  },
  "flex-layout.row#searchbread": {
    "children": ["breadcrumb.search"],
    "props": {
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "flex-layout.row#searchtitle": {
    "children": ["search-title.v2"]
  },
  "flex-layout.row#result": {
    "children": ["flex-layout.col#filter", "flex-layout.col#content"],
    "props": {
      "preventHorizontalStretch": true,
      "fullWidth": true
    }
  },
  "flex-layout.col#filter": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterCol"
    }
  },
  "flex-layout.col#content": {
    "children": [
      "flex-layout.row#searchinfo",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#products",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "width": "grow",
      "preventVerticalStretch": true
    }
  },
  "flex-layout.row#searchinfo": {
    "children": [
      "flex-layout.col#productCount",
      "flex-layout.row#orderByAndSwitcher"
    ]
  },
  "flex-layout.row#orderByAndSwitcher": {
    "children": ["order-by.v2", "gallery-layout-switcher"],
    "props": {
      "horizontalAlign": "right",
      "preventHorizontalStretch": true,
      "blockClass": "orderByAndSwitcher",
      "colGap": 3
    }
  },
  "flex-layout.col#productCount": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountCol"
    }
  },
  "flex-layout.row#fetchprevious": {
    "props": {
      "marginBottom": 3
    },
    "children": ["search-fetch-previous"]
  },
  "flex-layout.row#fetchmore": {
    "props": {
      "marginTop": 3
    },
    "children": ["search-fetch-more"]
  },
  "search-fetch-previous": {
    "props": {
      "htmlElementForButton": "a"
    }
  },
  "search-fetch-more": {
    "props": {
      "htmlElementForButton": "a"
    }
  },
  "flex-layout.row#products": {
    "children": ["search-content"]
  },
  "search-content": {
    "blocks": ["gallery", "not-found"]
  },

  "search-result-layout.mobile": {
    "children": [
      "flex-layout.row#searchinfomobile",
      "flex-layout.row#searchbread",
      "flex-layout.row#productCountMobile",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#contentmobile",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      },
      "defaultGalleryLayout": "grid"
    }
  },
  "flex-layout.row#contentmobile": {
    "children": ["search-content"],
    "props": {
      "preserveLayoutOnMobile": true
    }
  },

  "flex-layout.row#searchinfomobile": {
    "children": [
      "flex-layout.col#orderByMobile",
      "flex-layout.col#filterMobile",
      "flex-layout.col#switcherMobile"
    ],
    "props": {
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "colJustify": "around"
    }
  },

  "flex-layout.col#orderByMobile": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByMobileCol"
    }
  },

  "flex-layout.row#productCountMobile": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountMobileRow"
    }
  },

  "flex-layout.col#filterMobile": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterMobileCol"
    }
  },
  "flex-layout.col#switcherMobile": {
    "children": ["gallery-layout-switcher"],
    "props": {
      "verticalAlign": "middle"
    }
  },
  "search-not-found-layout": {
    "children": [
      "flex-layout.row#searchbread",
      "flex-layout.row#notfound",
      "flex-layout.row#recommendation-personalized-with-title"
    ]
  },

  "flex-layout.row#notfound": {
    "children": ["not-found"],
    "props": {
      "fullWidth": true
    }
  },

  "breadcrumb": {
    "props": {
      "showOnMobile": true
    }
  },

  "gallery": {
    "props": {
      "layouts": [
        {
          "name": "grid",
          "component": "GridSummary",
          "itemsPerRow": {
            "(min-width:1300px)": 4,
            "desktop": 3,
            "tablet": 3,
            "phone": 2
          }
        },
        {
          "name": "list",
          "component": "ListSummary",
          "itemsPerRow": 1
        }
      ],
      "ListSummary": "product-summary.shelf#listLayout",
      "GridSummary": "product-summary.shelf"
    }
  },
  "gallery-layout-switcher": {
    "children": [
      /*
       * For accessbility to work properly,
       * It's important to define the options in the same order as the layouts
       */
      "gallery-layout-option#grid",
      "gallery-layout-option#list"
    ]
  },
  "gallery-layout-option#grid": {
    "props": {
      "name": "grid"
    },
    "children": ["icon-grid", "responsive-layout.desktop#textOptionGrid"]
  },
  "gallery-layout-option#list": {
    "props": {
      "name": "list"
    },
    "children": ["icon-inline-grid", "responsive-layout.desktop#textOptionList"]
  },
  "responsive-layout.desktop#textOptionGrid": {
    "children": ["rich-text#option-grid"]
  },
  "responsive-layout.desktop#textOptionList": {
    "children": ["rich-text#option-list"]
  },
  "rich-text#option-grid": {
    "props": {
      "text": "Grid",
      "textColor": "c-auto",
      "blockClass": "layout-option"
    }
  },
  "rich-text#option-list": {
    "props": {
      "text": "List",
      "textColor": "c-auto",
      "blockClass": "layout-option"
    }
  }
}

```


[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 search-demo-theme/store/blocks/contact.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#contact-us": {
    "children": [
      "flex-layout.row#contact-us"
    ]
  },

  "flex-layout.row#contact-us": {
    "props": {
      "blockClass": "contact"
    },
    "children": [
      "flex-layout.col#contact-us"
    ]
  },

  "flex-layout.col#contact-us": {
    "children": [
      "rich-text#contact-us",
      "form#contact-us"
    ]
  },
  "rich-text#contact-us": {
    "props": {
      "text": "## Contact Us"
    }
  },

  "form#contact-us": {
    "props": {
      "entity": "contact",
      "schema": "site-contact"
    },
    "blocks": [
      "form-success#contact-us"
    ],
    "children": [
      "form-input.text#title",
      "form-input.text#name",
      "form-input.text#email",
      "form-input.textarea#message",
      "form-submit#contact"
    ]
  },

  "form-success#contact-us": {
    "children": [
      "rich-text#success-submit"
    ]
  },
  "rich-text#success-submit": {
    "props": {
      "text": "Thanks for reaching out! We will come back shortly.",
      "textAlignment": "CENTER",
      "textPosition": "CENTER"
    }
  },

  "form-input.text#title": {
    "props": {
      "pointer": "#/properties/title"
    }
  },
  "form-input.text#name": {
    "props": {
      "pointer": "#/properties/name"
    }
  },
  "form-input.text#email": {
    "props": {
      "pointer": "#/properties/email"
    }
  },
  "form-input.textarea#message": {
    "props": {
      "pointer": "#/properties/message"
    }
  },

  "form-submit#contact": {
    "props": {
      "label": "Submit"
    }
  }
}

```


[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 search-demo-theme/store/blocks/orderplaced.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "order-placed": {
    "blocks": ["op-header", "op-order"]
  },
  "op-header": {
    "children": [
      "op-section#confirmation",
      "op-section#notices",
      "op-summary-section",
      "op-bank-invoice-section"
    ]
  },
  "op-section#confirmation": {
    "props": {
      "name": "confirmation",
      "marginBottom": 9,
      "borderless": true
    },
    "children": [
      "op-confirmation-icon",
      "op-confirmation-title",
      "op-confirmation-message",
      "flex-layout.row#confirmation-buttons"
    ]
  },
  "flex-layout.row#confirmation-buttons": {
    "props": {
      "blockClass": "confirmationButtons",
      "marginTop": 8,
      "marginBottom": 8,
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true
    },
    "children": ["flex-layout.col#confirmation-buttons"]
  },
  "flex-layout.col#confirmation-buttons": {
    "children": ["op-print-button"]
  },
  "op-section#notices": {
    "props": {
      "name": "notices",
      "marginBottom": 9,
      "borderless": true
    },
    "children": ["op-notices"]
  },
  // each order section
  "op-order": {
    "children": [
      "flex-layout.row#order-header",
      "op-order-split-notice",
      "op-order-customer",
      "op-section#payments",
      "op-section#pickup-packages",
      "op-section#delivery-packages",
      "op-order-takeaway-packages",
      "op-order-total"
    ]
  },
  // each order header
  "flex-layout.row#order-header": {
    "props": {
      "fullWidth": true,
      "colSizing": "auto",
      "colGap": 5,
      "marginBottom": 5
    },
    "children": [
      "flex-layout.col#order-header-info",
      "flex-layout.col#order-header-options"
    ]
  },
  "flex-layout.col#order-header-info": {
    "children": ["op-order-number", "op-order-datetime", "op-order-seller"]
  },
  "flex-layout.col#order-header-options": {
    "children": ["responsive-layout.desktop#order-options-desktop"]
  },
  "responsive-layout.desktop#order-options-desktop": {
    "children": ["op-order-options"]
  },
  // payment section
  "op-section#payments": {
    "props": {
      "name": "paymentMethods"
    },
    "children": [
      "op-order-payment",
      "responsive-layout.mobile#order-options-mobile"
    ]
  },
  // bottom of top section of order header
  "responsive-layout.mobile#order-options-mobile": {
    "children": ["op-order-options#mobile"]
  },
  "op-order-options#mobile": {
    "props": {
      "blockClass": "mobile",
      "fullWidth": true
    }
  },
  "op-section#pickup-packages": {
    "props": {
      "name": "pickupPackages"
    },
    "children": ["op-order-pickup-packages"]
  },
  "op-section#delivery-packages": {
    "props": {
      "name": "deliveryPackages"
    },
    "children": ["op-order-delivery-packages"]
  }
}

```


[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 search-demo-theme/store/blocks/faq.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#faq": {
    "children": [
      "flex-layout.row#faq"
    ]
  },

  "flex-layout.row#faq": {
    "props": {
      "blockClass": "faq"
    },
    "children": [
      "flex-layout.col#faq"
    ]
  },

  "flex-layout.col#faq": {
    "children": [
      "rich-text#faq",
      "disclosure-layout-group#group"
    ]
  },
  "rich-text#faq": {
    "props": {
      "text": "## FAQ"
    }
  },

  "disclosure-layout-group#group": {
    "children": [
      "disclosure-layout#first",
      "disclosure-layout#second",
      "disclosure-layout#third",
      "disclosure-layout#fourth"
    ]
  },

  "disclosure-layout#first": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#first", "disclosure-content#first"]
  },
  "disclosure-trigger#first": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question1"]
  },
  "disclosure-content#first": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer1"]
  },
  "rich-text#question1": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer1": {
    "props": {
      "text": "Call us at the number (212) 1234-1234."
    }
  },

  "disclosure-layout#second": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#second", "disclosure-content#second"]
  },
  "disclosure-trigger#second": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question2"]
  },
  "disclosure-content#second": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer2"]
  },
  "rich-text#question2": {
    "props": {
      "text": "How can I track my order?"
    }
  },
  "rich-text#answer2": {
    "props": {
      "text": "After logging into your account, you can find this info at the link Orders."
    }
  },

  "disclosure-layout#third": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#third", "disclosure-content#third"]
  },
  "disclosure-trigger#third": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question3"]
  },
  "disclosure-content#third": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer3"]
  },
  "rich-text#question3": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer3": {
    "props": {
      "text": "Call us at the number (212) 1234-1234."
    }
  },

  "disclosure-layout#fourth": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#fourth", "disclosure-content#fourth"]
  },
  "disclosure-trigger#fourth": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question4"]
  },
  "disclosure-content#fourth": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer2"]
  },
  "rich-text#question4": {
    "props": {
      "text": "How can I track my order?"
    }
  },
  "rich-text#answer4": {
    "props": {
      "text": "After logging into your account, you can find this info at the link Orders."
    }
  },

  "disclosure-state-indicator": {
    "props": {
      "Show": "icon-caret#down",
      "Hide": "icon-caret#up"
    }
  },
  "icon-caret#down": {
    "props": {
      "orientation": "down"
    }
  },
  "icon-caret#up": {
    "props": {
      "orientation": "up"
    }
  }
}

```


[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 search-demo-theme/store/blocks/home/home.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": [
      "flex-layout.row#image-list",
      /* You can make references to blocks defined in other files.
       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
      "flex-layout.row#deals",
      "__fold__",
      "flex-layout.row#home-tab",
      "flex-layout.row#recommendation-last-seen",
      "info-card#home",
      "rich-text#question",
      "rich-text#link",
      "newsletter"
    ]
  },

  "flex-layout.row#image-list": {
    "children": ["list-context.image-list#demo"]
  },

  "list-context.image-list#demo": {
    "children": ["slider-layout#demo-images"],
    "props": {
      "height": 570,
      "preload": true,
      "images": [
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner-principal.png",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        },
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner.jpg",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        }
      ]
    }
  },
  "slider-layout#demo-images": {
    "props": {
      "itemsPerPage": {
        "desktop": 1,
        "tablet": 1,
        "phone": 1
      },
      "infinite": true,
      "showNavigationArrows": "desktopOnly",
      "blockClass": "carousel"
    }
  },

  "info-card#home": {
    "props": {
      "id": "info-card-home",
      "isFullModeStyle": false,
      "textPosition": "left",
      "imageUrl": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
      "headline": "Clearance Sale",
      "callToActionText": "DISCOVER",
      "callToActionUrl": "/sale/d",
      "blockClass": "info-card-home",
      "textAlignment": "center"
    }
  },

  "rich-text#question": {
    "props": {
      "text": "**This is an example store built using the VTEX platform.\nWant to know more?**",
      "blockClass": "question"
    }
  },

  "rich-text#link": {
    "props": {
      "text": "\n**Reach us at**\nwww.vtex.com.br",
      "blockClass": "link"
    }
  }
}

```


[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 search-demo-theme/store/blocks/home/deals.json from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#deals": {
    "children": [
      "flex-layout.col#deals1",
      "flex-layout.col#deals2",
      "flex-layout.col#deals3",
      "flex-layout.col#deals4"
    ],
    "props": {
      "blockClass": "deals"
    }
  },

  "flex-layout.col#deals1": {
    "children": [
      "image#deal1",
      "rich-text#deal1"
    ]
  },
  "image#deal1": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal1": {
    "props": {
      "text": "Free shipping",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals2": {
    "children": [
      "image#deal2",
      "rich-text#deal2"
    ]
  },
  "image#deal2": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/delivery-fast.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal2": {
    "props": {
      "text": "One day delivery",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals3": {
    "children": [
      "image#deal3",
      "rich-text#deal3"
    ]
  },
  "image#deal3": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/store.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal3": {
    "props": {
      "text": "Pick up in store",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals4": {
    "children": [
      "image#deal4",
      "rich-text#deal4"
    ]
  },
  "image#deal4": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/coupon.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal4": {
    "props": {
      "text": "Exclusive deals",
      "blockClass": "deals"
    }
  }
}

```


[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 search-demo-theme/store/blocks/footer/footer.json from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-1-desktop",
      "flex-layout.row#footer-2-desktop",
      "flex-layout.row#footer-3-desktop"
    ]
  },
  "flex-layout.row#footer-1-desktop": {
    "children": [
      "vtex.menu@2.x:menu#Products",
      "vtex.menu@2.x:menu#footer-clothing",
      "vtex.menu@2.x:menu#footer-decoration",
      "vtex.menu@2.x:menu#footer-bags",
      "footer-spacer",
      "social-networks"
    ],
    "props": {
      "blockClass": "menu-row",
      "paddingTop": 6,
      "paddingBottom": 3
    }
  },

  "social-networks": {
    "props": {
      "socialNetworks": [
        {
          "name": "Facebook",
          "url": "https://www.facebook.com/vtexonline/"
        },
        {
          "name": "Instagram",
          "url": "https://www.instagram.com/vtextruecloud/"
        },
        {
          "name": "Twitter",
          "url": "https://twitter.com/vtexonline"
        },
        {
          "name": "Youtube",
          "url": "https://www.youtube.com/user/VTEXTV"
        }
      ]
    }
  },

  "flex-layout.row#footer-2-desktop": {
    "children": ["accepted-payment-methods"],
    "props": {
      "blockClass": "payment-methods"
    }
  },
  "accepted-payment-methods": {
    "props": {
      "paymentMethods": ["MasterCard", "Visa", "Diners Club"]
    }
  },

  "flex-layout.row#footer-3-desktop": {
    "children": ["rich-text#footer"],
    "props": {
      "blockClass": "credits"
    }
  },
  "rich-text#footer": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  },

  "footer-layout.mobile": {
    "children": [
      "flex-layout.row#1-footer-mobile",
      "flex-layout.row#2-footer-mobile"
    ]
  },
  "flex-layout.row#2-footer-mobile": {
    "children": ["flex-layout.col#footer-1-mobile"],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4
    }
  },
  "flex-layout.col#footer-1-mobile": {
    "children": [
      "accepted-payment-methods",
      "social-networks",
      "rich-text#footer-mobile"
    ],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4,
      "rowGap": 4
    }
  },
  "flex-layout.row#1-footer-mobile": {
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    },
    "children": ["vtex.menu@2.x:menu#footer-mobile"]
  },
  "rich-text#footer-mobile": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  }
}

```