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

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

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'

const TotalizerLabel = ({ label, mobileScroll }) => (
  <div className={`c-muted-2 f6 ${mobileScroll ? 'nowrap' : ''}`}>{label}</div>
)

TotalizerLabel.propTypes = {
  label: PropTypes.string.isRequired,
  mobileScroll: PropTypes.bool,
}

export default TotalizerLabel

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import Spinner from '../Spinner'

class TotalizerValue extends PureComponent {
  render() {
    const {
      item: { value, isLoading },
      mobileScroll,
    } = this.props

    if (isLoading) {
      return (
        <div className="c-muted-1">
          <Spinner size={14} color="currentColor" />
        </div>
      )
    }

    if (value == null) {
      return null
    }

    return (
      <div className={`f4 fw5 c-on-base ${mobileScroll ? 'nowrap' : ''}`}>
        {value}
      </div>
    )
  }
}

TotalizerValue.propTypes = {
  mobileScroll: PropTypes.bool,
  item: PropTypes.shape({
    label: PropTypes.string.isRequired,
    value: PropTypes.node,
    iconBackgroundColor: PropTypes.string,
    icon: PropTypes.node,
    isLoading: PropTypes.bool,
  }),
}

export default TotalizerValue

```


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

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

[Assistant]
Here's the implementation:

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

import Button from '../Button/index.js'

import './action-bar.global.css'

const propTypes = {
  /** The Save button props (label + Styleguide Button props) */
  save: PropTypes.shape({
    /** Label to save button */
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    /** Styleguide Button props */
    ...Button.propTypes,
  }),
  /** The Cancel button props (label + Styleguide Button props) */
  cancel: PropTypes.shape({
    /** Label to save button */
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    /** Styleguide Button props */
    ...Button.propTypes,
  }),
}

const defaultProps = {
  save: {},
  cancel: {},
}

const FloatingActionBar: FC<PropTypes.InferProps<typeof propTypes>> = ({
  save: { label: saveLabel, ...saveProps },
  cancel: { label: cancelLabel, ...cancelProps },
}) => (
  <div className="styleguide__floating-action-bar shadow-active w-100 bg-base tr pv5 pr7 absolute fixed bottom-0 left-0 z-999">
    <span className="mr5">
      <Button variation="tertiary" {...cancelProps}>
        {cancelLabel}
      </Button>
    </span>
    <span>
      <Button variation="primary" {...saveProps}>
        {saveLabel}
      </Button>
    </span>
  </div>
)

FloatingActionBar.propTypes = propTypes
FloatingActionBar.defaultProps = defaultProps

export default FloatingActionBar

```


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

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

[Assistant]
Here's the implementation:

```css
.shadow-active {
  box-shadow: 0px 1px 18px rgba(0, 0, 0, 0.14);
}

@media (min-width: 64rem) {
  .styleguide__layout .mw8 .styleguide__floating-action-bar {
    padding-right: calc((100% - 60.2rem) / 2);
  }
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
#### Floating Action Bar allow users to easily find the save button while editing an instance of an entity.

### 👍 Dos

- Only use when the action affects the whole page.
- The actions on this component may be used to help user cancel or proceed a new change.
- This component can be used anywhere but it will always show at the bottom of the page.

### Usage

See the action bar at the bottom of this page.

```js
class ActionBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = { loading: false }
  }
  render() {
    return (
      <FloatingActionBar
        save={{
          label: 'save',
          isLoading: this.state.loading,
          onClick: () => {
            this.setState({ loading: true })
            setTimeout(() => {
              alert('This was invoked because save was pressed')
              this.setState({ loading: false })
            }, 2000)
          },
        }}
        cancel={{
          label: 'cancel',
        }}
      />
    )
  }
}

;<ActionBar />
```

```


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

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

[Assistant]
Here's the implementation:

```typescript
// From @reach-ui
const props = ['width', 'height', 'top', 'right', 'bottom', 'left']

const rectChanged = (a = {}, b = {}) => props.some(prop => a[prop] !== b[prop])

const observedNodes = new Map()
let rafId = null

const run = () => {
  observedNodes.forEach(state => {
    if (state.hasRectChanged) {
      state.callbacks.forEach(cb => cb(state.rect))
      state.hasRectChanged = false
    }
  })

  setTimeout(() => {
    observedNodes.forEach((state, node) => {
      if (node) {
        const newRect = node.getBoundingClientRect()
        if (rectChanged(newRect, state.rect)) {
          state.hasRectChanged = true
          state.rect = newRect
        }
      }
    })
  }, 0)

  rafId = requestAnimationFrame(run)
}

export default (node, cb) => ({
  observe() {
    const wasEmpty = observedNodes.size === 0
    if (observedNodes.has(node)) {
      observedNodes.get(node).callbacks.push(cb)
    } else {
      observedNodes.set(node, {
        rect: undefined,
        hasRectChanged: true,
        callbacks: [cb],
      })
    }
    if (wasEmpty) run()
  },

  unobserve() {
    const state = observedNodes.get(node)
    if (state) {
      // Remove the callback
      const index = state.callbacks.indexOf(cb)
      if (index >= 0) state.callbacks.splice(index, 1)

      // Remove the node reference
      if (!state.callbacks.length) observedNodes.delete(node)

      // Stop the loop
      if (!observedNodes.size) cancelAnimationFrame(rafId)
    }
  },
})

```


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

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

[Assistant]
Here's the implementation:

```typescript
import { getFlat, getToggledState } from '../util'

const props = ['children', 'related', 'friends']
const comparator = item => candidate => item.name === candidate.name

describe('CheckboxTree util tests', () => {
  it('should flat the tree correctly', () => {
    props.forEach(prop => {
      expect(getFlat(treeForProp(prop), [], prop)).toEqual(
        flattenedTreeForProp(prop)
      )
    })
  })
  it('should toggle state correctly on a item without chidren', () => {
    props.forEach(prop => {
      expect(
        getToggledState([], { name: 'Alok' }, prop, comparator, () => false)
      ).toEqual([{ name: 'Alok' }])
      expect(
        getToggledState([], { name: 'KVSH' }, prop, comparator, () => false)
      ).toEqual([{ name: 'KVSH' }])
    })
  })
  it('should toggle state correctly on a item with chidren', () => {
    props.forEach(prop => {
      expect(
        getToggledState(
          [],
          {
            name: 'Vintage Culture',
            [prop]: [
              { name: 'Alok' },
              {
                name: 'Cat Dealers',
                [prop]: [{ name: 'KVSH' }],
              },
            ],
          },
          prop,
          comparator,
          () => false
        )
      ).toEqual([
        {
          name: 'Vintage Culture',
          [prop]: [
            { name: 'Alok' },
            {
              name: 'Cat Dealers',
              [prop]: [{ name: 'KVSH' }],
            },
          ],
        },
        { name: 'Alok' },
        {
          name: 'Cat Dealers',
          [prop]: [{ name: 'KVSH' }],
        },
        { name: 'KVSH' },
      ])
    })
  })
})

function treeForProp(prop: string) {
  return {
    vtexTableTreeRoot: 'root',
    [prop]: [
      {
        name: 'Vintage Culture',
        [prop]: [
          { name: 'Alok' },
          {
            name: 'Cat Dealers',
            [prop]: [{ name: 'KVSH' }],
          },
        ],
      },
      {
        name: 'Metallica',
        [prop]: [
          {
            name: 'Iron Maiden',
            [prop]: [
              {
                name: 'Pantera',
                [prop]: [{ name: 'Slayer' }],
              },
            ],
          },
        ],
      },
    ],
  }
}

function flattenedTreeForProp(prop: string) {
  return [
    {
      [prop]: [
        {
          [prop]: [
            { name: 'Alok' },
            {
              [prop]: [{ name: 'KVSH' }],

              name: 'Cat Dealers',
            },
          ],

          name: 'Vintage Culture',
        },
        {
          [prop]: [
            {
              [prop]: [
                {
                  [prop]: [{ name: 'Slayer' }],

                  name: 'Pantera',
                },
              ],

              name: 'Iron Maiden',
            },
          ],
          name: 'Metallica',
        },
      ],
      vtexTableTreeRoot: 'root',
    },
    {
      [prop]: [
        { name: 'Alok' },
        {
          [prop]: [{ name: 'KVSH' }],

          name: 'Cat Dealers',
        },
      ],
      name: 'Vintage Culture',
    },
    { name: 'Alok' },
    {
      [prop]: [{ name: 'KVSH' }],
      name: 'Cat Dealers',
    },
    { name: 'KVSH' },
    {
      [prop]: [
        {
          [prop]: [
            {
              [prop]: [{ name: 'Slayer' }],
              name: 'Pantera',
            },
          ],
          name: 'Iron Maiden',
        },
      ],
      name: 'Metallica',
    },
    {
      [prop]: [
        {
          [prop]: [{ name: 'Slayer' }],

          name: 'Pantera',
        },
      ],
      name: 'Iron Maiden',
    },
    {
      [prop]: [{ name: 'Slayer' }],
      name: 'Pantera',
    },
    { name: 'Slayer' },
  ]
}

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'

import Select from '../../EXPERIMENTAL_Select'
import { withForwardedRef, refShape } from '../../../modules/withForwardedRef'

class SubjectAtom extends React.Component {
  handleChangeStatement = (newValue, structure) => {
    this.props.onChangeStatement(newValue, structure)
  }

  render() {
    const {
      forwardedRef,
      options,
      statements,
      isFullWidth,
      statementIndex,
      placeholder,
    } = this.props
    const condition = statements[statementIndex]

    const subjectOptions = Object.keys(options).map(choiceKey => {
      return {
        value: choiceKey,
        label: options[choiceKey].label,
        unique: options[choiceKey].unique || false,
      }
    })

    const subjectsInUse = statements
      .map(statement => {
        return statement.subject
      })
      .filter(subject => {
        return subject !== ''
      })

    const uniqueOptions = subjectOptions.filter(option => {
      if (!option.unique) {
        return true
      }

      const alreadyInUse = subjectsInUse.indexOf(option.value) > -1
      if (!alreadyInUse) {
        return true
      }

      if (subjectsInUse.indexOf(option.value) === statementIndex) {
        return true
      }

      return false
    })

    return (
      <div className={`mh3 ${isFullWidth ? 'pb3' : ''} w-30`}>
        <Select
          ref={forwardedRef}
          placeholder={placeholder}
          options={uniqueOptions}
          value={
            !condition.subject
              ? ''
              : uniqueOptions.find(
                  option => option.value === condition.subject
                ) || ''
          }
          onChange={value => {
            const subject = value !== null ? value.value : null
            this.handleChangeStatement(subject, 'subject')
          }}
          multi={false}
        />
      </div>
    )
  }
}

SubjectAtom.defaultProps = {
  onChangeStatement: () => {},
}

SubjectAtom.propTypes = {
  /** @ignore Forwarded Ref */
  forwardedRef: refShape,
  /** Current selected options for this Statement */
  statements: PropTypes.arrayOf(
    PropTypes.shape({
      subject: PropTypes.string,
      verb: PropTypes.string,
      object: PropTypes.any,
      error: PropTypes.string,
    })
  ),
  /** Possible options and respective data types, verb options */
  options: PropTypes.object.isRequired,
  /** Placeholder for dropdown */
  placeholder: PropTypes.string.isRequired,
  /** Stretch component to 100% of the width */
  isFullWidth: PropTypes.bool,
  /** To which row does this Statement belong to?  */
  statementIndex: PropTypes.number,
  /** Value changed callback */
  onChangeStatement: PropTypes.func,
}

export default withForwardedRef(SubjectAtom)

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'

import Select from '../../EXPERIMENTAL_Select'
import { withForwardedRef, refShape } from '../../../modules/withForwardedRef'

class VerbAtom extends React.Component {
  handleChangeStatement = (newValue, structure) => {
    this.props.onChangeStatement(newValue, structure)
  }

  render() {
    const {
      forwardedRef,
      options,
      isFullWidth,
      statements,
      statementIndex,
    } = this.props
    const condition = statements[statementIndex]
    const myChoice = options[condition.subject]
    const verbs = (myChoice && myChoice.verbs) || [{ label: '', value: '' }]
    return (
      <div className={`mh3 ${isFullWidth ? 'pb3' : ''} flex-grow-1`}>
        <Select
          ref={forwardedRef}
          placeholder=""
          options={verbs}
          value={
            !condition.subject
              ? ''
              : verbs.find(verb => verb.value === condition.verb) || ''
          }
          onChange={value => {
            const verb = value !== null ? value.value : null
            this.handleChangeStatement(verb, 'verb')
          }}
          multi={false}
          disabled={!condition.subject}
        />
      </div>
    )
  }
}

VerbAtom.defaultProps = {
  onChangeStatement: () => {},
}

VerbAtom.propTypes = {
  /** @ignore Forwarded Ref */
  forwardedRef: refShape,
  /** Current selected options for this Statement */
  statements: PropTypes.arrayOf(
    PropTypes.shape({
      subject: PropTypes.string,
      verb: PropTypes.string,
      object: PropTypes.any,
      error: PropTypes.string,
    })
  ),
  /** Possible options and respective data types, verb options */
  options: PropTypes.object.isRequired,
  /** Stretch component to 100% of the width */
  isFullWidth: PropTypes.bool,
  /** To which row does this Statement belong to?  */
  statementIndex: PropTypes.number,
  /** Value changed callback */
  onChangeStatement: PropTypes.func,
}

export default withForwardedRef(VerbAtom)

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'

import Input from '../../Input'

class ObjectAtom extends React.Component {
  static EmptyObjectAtom = () => (
    <div className="flex-auto">
      <div className="mh3 mb3">
        <Input disabled />
      </div>
    </div>
  )

  render() {
    const {
      options,
      isFullWidth,
      statements,
      statementIndex,
      onChangeObjectCallback,
    } = this.props
    const condition = statements[statementIndex]
    const myChoice = options[condition.subject]

    if (!condition.verb) {
      return <ObjectAtom.EmptyObjectAtom />
    }

    if (!myChoice) {
      return <ObjectAtom.EmptyObjectAtom />
    }

    const currentVerb = myChoice.verbs.find(
      verb => verb.value === condition.verb
    )

    if (!currentVerb) {
      return <ObjectAtom.EmptyObjectAtom />
    }

    return (
      <div className="mh3 flex-auto">
        {currentVerb.object.renderFn({
          statementIndex: statementIndex,
          statements: statements,
          isFullWidth: isFullWidth,
          values: condition.object,
          error: null,
          extraParams: currentVerb.object.extraParams,
          onChangeObjectCallback,
        })}
      </div>
    )
  }
}

ObjectAtom.defaultProps = {
  onChangeStatement: () => {},
  onChangeObjectCallback: () => {},
}

ObjectAtom.propTypes = {
  /** Current selected options for this Statement */
  statements: PropTypes.arrayOf(
    PropTypes.shape({
      subject: PropTypes.string,
      verb: PropTypes.string,
      object: PropTypes.any,
      error: PropTypes.string,
    })
  ),
  /** Possible options and respective data types, verb options */
  options: PropTypes.object.isRequired,
  /** Stretch component to 100% of the width */
  isFullWidth: PropTypes.bool,
  /** To which row does this Statement belong to?  */
  statementIndex: PropTypes.number,
  /** Value changed callback */
  onChangeStatement: PropTypes.func,
  /** Object Value changed callback */
  onChangeObjectCallback: PropTypes.func,
}

export default ObjectAtom

```


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

[User] Show me the implementation of store-on-localhost/src/monobloco/components/new/Styleguide/components/Progress/Steps/styles.css from the store-on-localhost VTEX app.

[Assistant]
Here's the implementation:

```css
@keyframes scroll{
  0% {
    transform: translate3d(0,0,0);
  }
  100% {
    transform: translate3d(26px,0,0);
  }
}

.scrollStep {
  animation: scroll 300ms infinite linear;
}

.roundedLeft {
  border-radius: 4px 0 0 4px
}

.roundedRight {
  border-radius: 0 4px 4px 0
}

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import Step from './Step'

export const ProgressStepsTypes = {
  /** Array of steps, it should be composed of instances of the following strings:'completed', 'inProgress' and 'toDo' */
  steps: PropTypes.arrayOf(
    PropTypes.oneOf(['completed', 'inProgress', 'toDo'])
  ),
  /** Boolean representing a dangerous state of the progress (e.g. a late or critical progress), if true this changes the color of the steps */
  danger: PropTypes.bool,
  /** Boolean representing if the progress bar should be slim or not, if true this decreases the height of the bar */
  slim: PropTypes.bool,
}

export class ProgressSteps extends PureComponent {
  isFirstElement(index) {
    return index === 0
  }

  isLastElement(index, array) {
    return index === array.length - 1
  }

  render() {
    const { steps, danger, slim } = this.props

    const stepsElements = steps.map((type, index) => {
      const isFirstElement = this.isFirstElement(index)
      const isLastElement = this.isLastElement(index, steps)

      const marginRightCSS = isLastElement ? '' : 'mr2'
      return (
        <div className={`w-100 ${marginRightCSS}`} key={index}>
          <Step
            type={type}
            roundLeft={isFirstElement}
            roundRight={isLastElement}
            danger={danger}
            slim={slim}
          />
        </div>
      )
    })
    return <div className="w-100 mb3 inline-flex flex-row">{stepsElements}</div>
  }
}

ProgressSteps.propTypes = ProgressStepsTypes

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { scrollStep, roundedRight, roundedLeft } from './styles.css'

const COMPLETED = 'completed'
const IN_PROGRESS = 'inProgress'
const TO_DO = 'toDo'

class Step extends PureComponent {
  render() {
    const { type, roundLeft, roundRight, danger, slim } = this.props

    const halfOpacity = 'rgba(255, 255, 255, 0.5)'
    const fullOpacity = 'rgba(255, 255, 255, 0)'
    const gradientBackgroundStyle = {
      background: `repeating-linear-gradient(-45deg,  ${fullOpacity}, ${fullOpacity} 10px, ${halfOpacity} 10px, ${halfOpacity} 20px)`,
    }

    const backgroundColorClass = danger ? 'bg-danger' : 'bg-action-primary'

    const roundLeftCSS = roundLeft ? roundedLeft : ''
    const roundRightCSS = roundRight ? roundedRight : ''
    const roundingStyle =
      roundLeft && roundRight ? 'br2' : roundRightCSS || roundLeftCSS

    const paddingClass = slim ? 'pa1' : 'pa2'

    switch (type) {
      case IN_PROGRESS:
        return (
          <div
            className={`relative ${paddingClass} ${backgroundColorClass} overflow-hidden ${roundingStyle}`}>
            <div
              style={gradientBackgroundStyle}
              className={`${scrollStep} absolute top-0 bottom-0 right-0 left--2 pr2`}
            />
          </div>
        )
      case COMPLETED:
        return (
          <div
            className={`${roundingStyle} ${paddingClass} ${backgroundColorClass} flex flex-row`}
          />
        )
      case TO_DO:
      default:
        return (
          <div
            className={`${roundingStyle} ${paddingClass} bg-muted-3 flex flex-row `}
          />
        )
    }
  }
}

Step.propTypes = {
  type: PropTypes.oneOf([COMPLETED, IN_PROGRESS, TO_DO]).isRequired,
  roundLeft: PropTypes.bool,
  roundRight: PropTypes.bool,
  danger: PropTypes.bool,
  slim: PropTypes.bool,
}

export default Step

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Select from '../../EXPERIMENTAL_Select/index'
import { VerbOption } from './VerbAtom'
import { GroupedOptions, SelectOptionGroup, SelectedOption } from '../typings'

const ATOM_COMPONENT_MIN_WIDTH = '20%'

export type SubjectOptions = {
  [key: string]: {
    group?: string
    label: string
    unique?: boolean
    verbs: VerbOption[]
  }
}

type Props = {
  subject?: string
  onChange: (string) => void
  options: SubjectOptions
  placeholder: string
  isFullWidth: boolean
}

const groupOptions = options => {
  const groupedOptions = Object.keys(options).reduce<GroupedOptions>(
    (optionsGroup, subject) => {
      const option = options[subject]
      return {
        ...optionsGroup,
        [option.group]: [
          ...(optionsGroup[option.group] || []),
          {
            value: subject,
            label: option.label || subject,
          },
        ],
      }
    },
    {}
  )

  return Object.keys(groupedOptions).map<SelectOptionGroup>(group => {
    return {
      label: group,
      options: groupedOptions[group],
    }
  })
}

const SubjectAtom: React.FC<Props> = ({
  isFullWidth,
  onChange,
  options,
  placeholder,
  subject,
}) => {
  const optionsGroup = groupOptions(options)

  const subjectOptions =
    optionsGroup.length === 1 && optionsGroup[0].label === 'undefined'
      ? optionsGroup[0].options
      : optionsGroup

  const selected = optionsGroup.reduce<SelectedOption>((selected, group) => {
    if (selected) {
      return selected
    }

    const option = group.options.find(option => option.value === subject)
    if (option) {
      return {
        group: group.label !== 'undefined' ? group.label : undefined,
        option: option,
      }
    }
  }, undefined)

  return (
    <div
      className={`mh3 ${isFullWidth ? 'pb3' : ''}`}
      style={{ minWidth: ATOM_COMPONENT_MIN_WIDTH }}>
      <Select
        clearable={false}
        multi={false}
        onChange={option => onChange(option && option.value)}
        options={subjectOptions}
        placeholder={placeholder}
        value={selected && selected.option}
      />
    </div>
  )
}

export default SubjectAtom

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Select from '../../EXPERIMENTAL_Select/index'
import { ObjectOption } from './ObjectAtom'

export type VerbOption = {
  label: string
  value: string
  object: ObjectOption
}

type Props = {
  disabled?: boolean
  isFullWidth?: boolean
  verb?: string
  verbOptions: VerbOption[]
  onChange: (string) => void
}

const VerbAtom: React.FC<Props> = ({
  disabled,
  isFullWidth,
  onChange,
  verb,
  verbOptions,
}) => {
  const value = verbOptions.find(option => option.value === verb)

  return (
    <div
      className={`mh3 ${isFullWidth ? 'pb3' : ''} flex items-center`}
      style={verbOptions.length !== 1 ? { minWidth: '20%' } : {}}>
      {verbOptions.length !== 1 ? (
        <div className="flex-auto">
          <Select
            clearable={false}
            disabled={disabled}
            multi={false}
            onChange={option => onChange(option && option.value)}
            options={verbOptions}
            placeholder=""
            value={value}
          />
        </div>
      ) : (
        <span>{value.label}</span>
      )}
    </div>
  )
}

export default VerbAtom

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import Input from '../../Input/index'

export type ObjectOption = (renderProps: RenderProps) => React.ReactElement

type RenderProps = {
  error: Props['error']
  onChange: Props['onChange']
  value: Props['object']
}

type Props = {
  /** Disabled state */
  disabled?: boolean
  /** Statement error message */
  error?: string
  /** Current selected object for this Statement */
  object: unknown
  /** Object Value changed callback */
  onChange: (value: Props['object'], error?: Props['error']) => void
  /** Possible options and respective data types, verb options */
  renderObject: ObjectOption
}

const EmptyObjectAtom = () => (
  <div className="flex-auto mh3">
    <Input disabled />
  </div>
)

const ObjectAtom: React.FC<Props> = ({
  disabled,
  error,
  object,
  onChange,
  renderObject,
}) => {
  if (disabled) {
    return <EmptyObjectAtom />
  }

  return (
    <div className="mh3 flex-auto">
      {renderObject({
        error,
        onChange,
        value: object,
      })}
    </div>
  )
}

export default ObjectAtom

```


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

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

[Assistant]
Here's the implementation:

```tsx
import classNames from 'classnames'
import PropTypes from 'prop-types'
import React, { useState } from 'react'

import IconSearch from '../../icon/Search'
import ClearInputIcon from '../../icon/Clear'

const propTypes = {
  /** Determine if the input's bottom corners should be rounded or not */
  roundedBottom: PropTypes.bool,

  /* Input props */
  /** Input value */
  value: PropTypes.string,
  /** Clear event handler */
  onClear: PropTypes.func,
  /** Change event handler */
  onChange: PropTypes.func,
  /** Search event handler. Called on enter or when clicking the search button */
  onSearch: PropTypes.func,
  /** Focus event handler */
  onFocus: PropTypes.func,
  /** Blur event handler */
  onBlur: PropTypes.func,
  /** Determine if the input and the button should be disabled */
  disabled: PropTypes.bool,
}

const defaultProps = {
  roundedBottom: true,
}

const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
  Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'value'>> = props => {
  const {
    onClear,
    onSearch,
    roundedBottom,
    value,
    onChange,
    onFocus,
    onBlur,
    disabled,
    ...inputProps
  } = props

  const [focused, setFocused] = useState(false)

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange && onChange(e.target.value)
  }

  const handleClear = () => {
    onClear && onClear()
  }

  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
    setFocused(true)
    onFocus && onFocus(e)
  }

  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    setFocused(false)
    onBlur && onBlur(e)
  }

  const activeClass = classNames({
    'b--muted-3': focused,
    'b--muted-4': !focused,
    'br--top': !roundedBottom,
  })

  const buttonClasses = classNames(
    activeClass,
    'bg-base br2 br--right h-regular w3 bw1 ba pa0 bl-0',
    {
      'c-link pointer': !disabled,
      'c-disabled': disabled,
    }
  )

  return (
    <div className="flex flex-row">
      <div className="relative w-100">
        <input
          className={`${activeClass} w-100 ma0 border-box bw1 br2 ba outline-0 bg-base c-on-base t-body h-regular ph5 pr8 br--left`}
          value={value as any}
          onFocus={handleFocus}
          onBlur={handleBlur}
          onChange={handleChange}
          disabled={disabled}
          {...inputProps}
        />
        {onClear && value && (
          <span
            className="absolute c-muted-3 fw5 flex items-center ph3 t-body top-0 right-0 h-100 pointer"
            onClick={handleClear}>
            <ClearInputIcon />
          </span>
        )}
      </div>
      <button
        className={buttonClasses}
        disabled={disabled}
        onClick={() => onSearch(value)}>
        <IconSearch size={16} />
      </button>
    </div>
  )
}

SearchInput.propTypes = propTypes
SearchInput.defaultProps = defaultProps

export default SearchInput

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useCallback } from 'react'
import uuid from 'uuid'

import {
  comparatorCurry,
  Checkboxes,
  Tree as TreeType,
} from '../../EXPERIMENTAL_useCheckboxTree/types'
import { Column, Items } from '../../EXPERIMENTAL_Table/types'
import { Density } from '../../EXPERIMENTAL_Table/hooks/useTableMeasures'
import Node from './Node'

const Tree: FC<TreeProps> = ({
  checkboxes,
  items,
  comparator,
  ...nodeProps
}) => {
  const [collapsedItems, setCollapsedItems] = React.useState<Array<unknown>>([])

  const listToRender = checkboxes ? items[nodeProps.nodesKey] : items

  const isCollapsed = useCallback(
    (item: unknown) => collapsedItems.some(comparator(item)),
    [collapsedItems, comparator]
  )

  const toggleCollapsed = React.useCallback(
    (item: unknown) => {
      isCollapsed(item)
        ? setCollapsedItems(
            collapsedItems.filter(
              collapsedItem => !comparator(collapsedItem)(item)
            )
          )
        : setCollapsedItems([...collapsedItems, item])
    },
    [collapsedItems, comparator, isCollapsed]
  )

  return (
    <>
      {listToRender.map(data => (
        <Node
          isCollapsed={isCollapsed}
          toggleCollapsed={toggleCollapsed}
          checkboxes={checkboxes}
          {...nodeProps}
          key={`row-${uuid()}`}
          data={data}
        />
      ))}
    </>
  )
}

type TreeProps = {
  items: Items
  currentDensity: Density
  nodesKey: string
  columns: Array<Column>
  comparator: comparatorCurry<TreeType<unknown>>
  rowHeight: number
  checkboxes?: Checkboxes<unknown>
  onRowClick?: ({ rowData: unknown }) => void
}

export default React.memo(Tree)

```


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

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

[Assistant]
Here's the implementation:

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

import CaretUp from '../../icon/CaretUp/index.js'
import CaretDown from '../../icon/CaretDown/index.js'
import ButtonWithIcon from '../../ButtonWithIcon/index.js'

const ICON_SIZE = 14

const CollapseToggle: FC<CollapseToggleProps> = ({ collapsed, onClick }) => {
  const icon = collapsed ? (
    <CaretUp size={ICON_SIZE} />
  ) : (
    <CaretDown size={ICON_SIZE} />
  )
  return (
    <ButtonWithIcon
      size="small"
      onClick={onClick}
      icon={icon}
      variation="tertiary"
    />
  )
}

export type CollapseToggleProps = {
  collapsed: boolean
  onClick: Function
}

export default CollapseToggle

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useCallback } from 'react'
import uuid from 'uuid'
import isEmpty from 'lodash/isEmpty'
import pick from 'lodash/pick'

import Row, { ROW_TRANSITIONS } from '../../EXPERIMENTAL_Table/DataTable/Row'
import CollapseToggle from './CollapseToggle'
import { Checkboxes } from '../../EXPERIMENTAL_useCheckboxTree/types'
import { Column } from '../../EXPERIMENTAL_Table/types'
import { Density } from '../../EXPERIMENTAL_Table/hooks/useTableMeasures'
import useTableMotion from '../../EXPERIMENTAL_Table/hooks/useTableMotion'

const Node: FC<NodeProps> = ({
  columns,
  rowHeight,
  nodesKey,
  checkboxes,
  toggleCollapsed,
  isCollapsed,
  data,
  depth,
  currentDensity,
  onRowClick,
}) => {
  const motion = useTableMotion(ROW_TRANSITIONS)
  const toggleChildren = useCallback(() => toggleCollapsed(data), [
    data,
    toggleCollapsed,
  ])
  const toggleChecked = useCallback(() => checkboxes.toggle(data), [
    checkboxes,
    data,
  ])

  const isRowChecked = checkboxes && checkboxes.isChecked(data)
  const isRowPartiallyChecked =
    checkboxes && checkboxes.isPartiallyChecked(data)
  const isRowSelected = isRowChecked || isRowPartiallyChecked
  const hasChildren = data[nodesKey] && !isEmpty(data[nodesKey])

  const clickableRow = onRowClick
    ? { onClick: () => onRowClick({ rowData: data }) }
    : undefined

  const clickableCell = hasChildren
    ? clickableRow
      ? undefined
      : { onClick: toggleChildren }
    : undefined

  const renderCells = (hasChild?: boolean) => {
    return (
      <Row
        {...clickableRow}
        motion={motion}
        height={rowHeight}
        active={isRowSelected}>
        {columns.map((column: Column, cellIndex: number) => {
          const { cellRenderer, width } = column
          const cellData = column.condensed
            ? pick(data, column.condensed)
            : column.extended
            ? data
            : data[column.id]
          const content = cellRenderer
            ? cellRenderer({
                data: cellData,
                rowHeight,
                currentDensity,
                motion,
              })
            : cellData
          return cellIndex === 0 ? (
            <Row.Cell {...clickableCell} key={`cel-${uuid()}`} width={width}>
              <Row.Cell.Prefix depth={depth}>
                {hasChild && (
                  <CollapseToggle
                    collapsed={isCollapsed(data)}
                    onClick={toggleChildren}
                  />
                )}
                {checkboxes && (
                  <span className="ph3">
                    <Row.Cell.Prefix.Checkbox
                      checked={isRowChecked}
                      partial={isRowPartiallyChecked}
                      onClick={toggleChecked}
                    />
                  </span>
                )}
              </Row.Cell.Prefix>
              {content}
            </Row.Cell>
          ) : (
            <Row.Cell key={`cel-${uuid()}`} width={width}>
              {content}
            </Row.Cell>
          )
        })}
      </Row>
    )
  }

  return hasChildren ? (
    <>
      {renderCells(true)}
      {isCollapsed(data) &&
        (data[nodesKey] as Array<unknown>).map(data => (
          <Node
            onRowClick={onRowClick}
            currentDensity={currentDensity}
            isCollapsed={isCollapsed}
            toggleCollapsed={toggleCollapsed}
            checkboxes={checkboxes}
            nodesKey={nodesKey}
            rowHeight={rowHeight}
            columns={columns}
            key={`row-child-${uuid()}`}
            depth={depth + 1}
            data={data}
          />
        ))}
    </>
  ) : (
    renderCells()
  )
}

type NodeProps = {
  toggleCollapsed: (uniqueKey: unknown) => void
  isCollapsed: (uniqueKey: unknown) => boolean
  columns: Array<Column>
  currentDensity: Density
  rowHeight: number
  nodesKey: string
  checkboxes?: Checkboxes<unknown>
  data: unknown
  depth?: number
  onRowClick?: ({ rowData: unknown }) => void
}

Node.defaultProps = {
  depth: 0,
}

export default Node

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 14,
  height: 10,
}

class CaretDown extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="caret-down" size={newSize} block={block} viewBox="0 0 14 10">
        <path
          d="M7.72356 8.48154C7.32958 8.89452 6.67042 8.89452 6.27644 8.48154L0 1.90235L1.81481 0L7 5.43529L12.1852 0L14 1.90235L7.72356 8.48154Z"
          fill={color}
        />
      </Svg>
    )
  }
}

CaretDown.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

CaretDown.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default CaretDown

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class PlusLines extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="PlusLines" size={newSize} block={block}>
        <path
          d="M14 7C14 7.55228 13.5523 8 13 8H8V13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13V8H1C0.447715 8 0 7.55228 0 7C0 6.44772 0.447715 6 1 6H6V1C6 0.447715 6.44772 0 7 0C7.55228 0 8 0.447715 8 1V6H13C13.5523 6 14 6.44772 14 7Z"
          fill={color}
        />
      </Svg>
    )
  }
}

PlusLines.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

PlusLines.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default PlusLines

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class InlineGrid extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="inline-grid" size={newSize} block={block}>
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M1 0C0.447715 0 0 0.447715 0 1V6C0 6.55228 0.447715 7 1 7H15C15.5523 7 16 6.55228 16 6V1C16 0.447715 15.5523 0 15 0H1ZM1 9C0.447715 9 0 9.44771 0 10V15C0 15.5523 0.447715 16 1 16H15C15.5523 16 16 15.5523 16 15V10C16 9.44772 15.5523 9 15 9H1Z"
          fill={color}
        />
      </Svg>
    )
  }
}

InlineGrid.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

InlineGrid.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default InlineGrid

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 14,
  height: 10,
}

class CaretUp extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="caret-up" size={newSize} block={block} viewBox="0 0 14 10">
        <path
          d="M7.72356 8.48154C7.32958 8.89452 6.67042 8.89452 6.27644 8.48154L0 1.90235L1.81481 0L7 5.43529L12.1852 0L14 1.90235L7.72356 8.48154Z"
          transform="translate(14 10) rotate(-180)"
          fill={color}
        />
      </Svg>
    )
  }
}

CaretUp.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

CaretUp.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default CaretUp

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 11,
}

class ArrowBack extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="arrow-back" size={newSize} block={block} viewBox="0 0 16 11">
        <path
          d="M5.5 15.5002C5.75781 15.5002 5.92969 15.4169 6.10156 15.2502L11 10.5002L9.79687 9.33356L6.35938 12.6669L6.35938 0H4.64063L4.64062 12.6669L1.20312 9.33356L0 10.5002L4.89844 15.2502C5.07031 15.4169 5.24219 15.5002 5.5 15.5002Z"
          transform="translate(16.0002) rotate(90)"
          fill={color}
        />
      </Svg>
    )
  }
}

ArrowBack.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

ArrowBack.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default ArrowBack

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 12,
  height: 12,
}

class CheckPartial extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="check" size={newSize} block={block} viewBox="0 0 12 12">
        <path d="M2 5V7H10V5H2Z" fill={color} />
      </Svg>
    )
  }
}

CheckPartial.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

CheckPartial.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default CheckPartial

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class OptionsDots extends PureComponent {
  render() {
    const { color, size, block, radius } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="options-dots" size={newSize} block={block} viewBox="0 0 32 32">
        <g className="nc-icon-wrapper" fill={color}>
          <g
            className="nc-interact_dots-close-o-32"
            transform="rotate(90 16 16)">
            {' '}
            <g className="nc-dot_left" transform="translate(0)">
              {' '}
              <circle
                cx="6"
                cy="16"
                r={radius}
                fill={color}
                data-cap="butt"
                data-stroke="none"
                strokeLinecap="butt"
                strokeLinejoin="miter"
              />{' '}
              <circle
                cx="6"
                cy="16"
                r={radius}
                fill="none"
                stroke={color}
                strokeLinecap="square"
                strokeLinejoin="miter"
                strokeWidth="2"
              />{' '}
            </g>{' '}
            <g className="nc-dot_right" transform="translate(-0)">
              {' '}
              <circle
                cx="26"
                cy="16"
                r={radius}
                fill={color}
                data-cap="butt"
                data-stroke="none"
                strokeLinecap="butt"
                strokeLinejoin="miter"
              />{' '}
              <circle
                cx="26"
                cy="16"
                r={radius}
                fill="none"
                stroke={color}
                strokeLinecap="square"
                strokeLinejoin="miter"
                strokeWidth="2"
              />{' '}
            </g>{' '}
            <g className="nc-dot_center">
              {' '}
              <circle
                cx="16"
                cy="16"
                r={radius}
                fill={color}
                data-cap="butt"
                data-stroke="none"
                strokeLinecap="butt"
                strokeLinejoin="miter"
              />{' '}
              <circle
                cx="16"
                cy="16"
                r={radius}
                fill="none"
                stroke={color}
                strokeLinecap="square"
                strokeLinejoin="miter"
                strokeWidth="2"
              />{' '}
            </g>{' '}
            <path
              className="nc-line_top-right"
              data-cap="none"
              fill="none"
              stroke={color}
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M16 16L27 5"
              strokeDasharray="15.56 15.56"
              strokeDashoffset="15.56"
              opacity="0"
            />{' '}
            <path
              className="nc-line_bottom-left"
              data-cap="none"
              fill="none"
              stroke={color}
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 27l11-11"
              strokeDasharray="15.56 15.56"
              strokeDashoffset="-15.56"
              opacity="0"
            />{' '}
            <path
              className="nc-line_bottom-right"
              data-cap="none"
              fill="none"
              stroke={color}
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M16 16l11 11"
              strokeDasharray="15.56 15.56"
              strokeDashoffset="15.56"
              opacity="0"
            />{' '}
            <path
              className="nc-line_top-left"
              data-cap="none"
              fill="none"
              stroke={color}
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M5 5l11 11"
              strokeDasharray="15.56 15.56"
              strokeDashoffset="-15.56"
              opacity="0"
            />{' '}
          </g>
        </g>
      </Svg>
    )
  }
}

OptionsDots.defaultProps = {
  color: '#444444',
  size: 16,
  radius: 2,
  block: false,
}

OptionsDots.propTypes = {
  color: PropTypes.string,
  radius: PropTypes.number,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default OptionsDots

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Calendar extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="calendar" size={newSize} block={block}>
        <path
          d="M4.66667 7.2H3.11111V8.8H4.66667V7.2ZM7.77778 7.2H6.22222V8.8H7.77778V7.2ZM10.8889 7.2H9.33333V8.8H10.8889V7.2ZM12.4444 1.6H11.6667V0H10.1111V1.6H3.88889V0H2.33333V1.6H1.55556C0.692222 1.6 0.00777777 2.32 0.00777777 3.2L0 14.4C0 15.28 0.692222 16 1.55556 16H12.4444C13.3 16 14 15.28 14 14.4V3.2C14 2.32 13.3 1.6 12.4444 1.6ZM12.4444 14.4H1.55556V5.6H12.4444V14.4Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Calendar.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Calendar.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Calendar

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class VisibilityOff extends PureComponent {
  render() {
    const { color, size, solid } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="visibility-off"
        variation={solid ? 'solid' : null}
        size={newSize}>
        {solid ? (
          <>
            <path
              d="M14.6 5.59961L6.39999 13.7996C6.89999 13.8996 7.49999 13.9996 7.99999 13.9996C11.6 13.9996 14.4 10.8996 15.6 9.09961C16.1 8.39961 16.1 7.49961 15.6 6.79961C15.4 6.49961 15 6.09961 14.6 5.59961Z"
              fill={color}
            />
            <path
              d="M14.3 0.3L11.6 3C10.5 2.4 9.3 2 8 2C4.4 2 1.6 5.1 0.4 6.9C-0.1 7.6 -0.1 8.5 0.4 9.1C0.9 9.9 1.8 10.9 2.8 11.8L0.3 14.3C-0.1 14.7 -0.1 15.3 0.3 15.7C0.5 15.9 0.7 16 1 16C1.3 16 1.5 15.9 1.7 15.7L15.7 1.7C16.1 1.3 16.1 0.7 15.7 0.3C15.3 -0.1 14.7 -0.1 14.3 0.3ZM5.3 9.3C5.1 8.9 5 8.5 5 8C5 6.3 6.3 5 8 5C8.5 5 8.9 5.1 9.3 5.3L5.3 9.3Z"
              fill={color}
            />
          </>
        ) : (
          <>
            <path
              d="M14.5744 5.66895L13.1504 7.09295C13.4284 7.43995 13.6564 7.75695 13.8194 7.99995C13.0594 9.12995 10.9694 11.8199 8.25838 11.9849L6.44337 13.7999C6.93937 13.9239 7.45737 13.9999 8.00037 13.9999C12.7074 13.9999 15.7444 8.71594 15.8714 8.49194C16.0424 8.18794 16.0434 7.81595 15.8724 7.51195C15.8254 7.42695 15.3724 6.63095 14.5744 5.66895Z"
              fill={color}
            />
            <path
              d="M0.293375 15.7072C0.488375 15.9022 0.744375 16.0002 1.00038 16.0002C1.25638 16.0002 1.51238 15.9022 1.70738 15.7072L15.7074 1.70725C16.0984 1.31625 16.0984 0.68425 15.7074 0.29325C15.3164 -0.09775 14.6844 -0.09775 14.2934 0.29325L11.5484 3.03825C10.5154 2.43125 9.33137 2.00025 8.00037 2.00025C3.24537 2.00025 0.251375 7.28925 0.126375 7.51425C-0.0426249 7.81725 -0.0416249 8.18625 0.128375 8.48925C0.198375 8.61425 1.17238 10.2913 2.82138 11.7653L0.292375 14.2942C-0.0976249 14.6842 -0.0976249 15.3162 0.293375 15.7072ZM2.18138 7.99925C2.95838 6.83525 5.14637 4.00025 8.00037 4.00025C8.74237 4.00025 9.43737 4.20125 10.0784 4.50825L8.51237 6.07425C8.34837 6.02925 8.17837 6.00025 8.00037 6.00025C6.89537 6.00025 6.00038 6.89525 6.00038 8.00025C6.00038 8.17825 6.02938 8.34825 6.07438 8.51225L4.24038 10.3462C3.28538 9.51025 2.55938 8.56225 2.18138 7.99925Z"
              fill={color}
            />
          </>
        )}
      </Svg>
    )
  }
}

VisibilityOff.defaultProps = {
  color: 'currentColor',
  size: 16,
  solid: false,
}

VisibilityOff.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  solid: PropTypes.bool,
}

export default VisibilityOff

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 18,
}

class Close extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="close" size={newSize} block={block} viewBox="0 0 18 18">
        <g fill={color}>
          <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z" />
        </g>
      </Svg>
    )
  }
}

Close.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Close.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Close

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Success extends PureComponent {
  render() {
    const { color, size, solid, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="success"
        variation={solid ? 'solid' : null}
        size={newSize}
        block={block}>
        {solid ? (
          <path
            d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM7 11.4L3.6 8L5 6.6L7 8.6L11 4.6L12.4 6L7 11.4Z"
            fill={color}
          />
        ) : (
          <>
            <path
              d="M8 0C3.589 0 0 3.589 0 8C0 12.411 3.589 16 8 16C12.411 16 16 12.411 16 8C16 3.589 12.411 0 8 0ZM8 14C4.691 14 2 11.309 2 8C2 4.691 4.691 2 8 2C11.309 2 14 4.691 14 8C14 11.309 11.309 14 8 14Z"
              fill={color}
            />
            <path
              d="M3.414 6.828L-3.43323e-08 3.414L1.414 2L3.414 4L7.414 -3.43323e-08L8.828 1.414L3.414 6.828Z"
              transform="translate(3.58606 4.586)"
              fill={color}
            />
          </>
        )}
      </Svg>
    )
  }
}

Success.defaultProps = {
  color: 'currentColor',
  size: 16,
  solid: false,
  block: false,
}

Success.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  solid: PropTypes.bool,
  block: PropTypes.bool,
}

export default Success

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 12,
}

class Underline extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="underline"
        size={newSize}
        block={block}
        viewBox="0 0 64 64"
        fill={color}>
        <path
          d="M55,4H37V8h4a2,2,0,0,1,2,2V34.51c0,5.742-4.187,10.879-9.9,11.436A11.012,11.012,0,0,1,21,35V10a2,2,0,0,1,2-2h4V4H9V8h4a2,2,0,0,1,2,2V34.4c0,9.046,6.811,16.957,15.836,17.561A17.018,17.018,0,0,0,49,35V10a2,2,0,0,1,2-2h4Z"
          fill={color}
        />
        <path fill={color} d="M62,60H2a1,1,0,0,1,0-2H62a1,1,0,0,1,0,2Z" />
      </Svg>
    )
  }
}

Underline.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

Underline.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Underline

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 14,
  height: 14,
}

class Minus extends PureComponent {
  render() {
    const { color, size, block, solid } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="minus"
        variation={solid ? 'solid' : null}
        size={newSize}
        block={block}>
        {solid ? (
          <path
            xmlns="http://www.w3.org/2000/svg"
            fillRule="evenodd"
            clipRule="evenodd"
            d="M8 16C12.418 16 16 12.4185 16 8C16 3.58154 12.418 0 8 0C3.58203 0 0 3.58154 0 8C0 12.4185 3.58203 16 8 16ZM5 7C4.44727 7 4 7.44775 4 8C4 8.55225 4.44727 9 5 9H11C11.5527 9 12 8.55225 12 8C12 7.44775 11.5527 7 11 7H5Z"
            fill={color}
          />
        ) : (
          <>
            <circle cx="8" cy="8" r="7" stroke={color} strokeWidth="2" />
            <path
              d="M4 8.5V7.5C4 7.22386 4.22386 7 4.5 7H11.5C11.7761 7 12 7.22386 12 7.5V8.5C12 8.77614 11.7761 9 11.5 9H4.5C4.22386 9 4 8.77614 4 8.5Z"
              fill={color}
            />
          </>
        )}
      </Svg>
    )
  }
}

Minus.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
  solid: false,
}

Minus.propTypes = {
  color: PropTypes.string,
  solid: PropTypes.bool,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Minus

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Delete extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="delete" size={newSize} block={block}>
        <path d="M2 0H0V6H2V0Z" transform="translate(5 7)" fill={color} />
        <path d="M2 0H0V6H2V0Z" transform="translate(9 7)" fill={color} />
        <path
          d="M12 1C12 0.4 11.6 0 11 0H5C4.4 0 4 0.4 4 1V3H0V5H1V15C1 15.6 1.4 16 2 16H14C14.6 16 15 15.6 15 15V5H16V3H12V1ZM6 2H10V3H6V2ZM13 5V14H3V5H13Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Delete.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Delete.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Delete

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class VisibilityOn extends PureComponent {
  render() {
    const { color, size, solid } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="visibility-on"
        variation={solid ? 'solid' : null}
        size={newSize}>
        {solid ? (
          <path
            d="M7.975 14C11.575 14 14.375 10.9 15.575 9.1C16.075 8.4 16.075 7.5 15.575 6.8C14.375 5.1 11.575 2 7.975 2C4.375 2 1.575 5.1 0.375 6.9C-0.125 7.6 -0.125 8.5 0.375 9.1C1.575 10.9 4.375 14 7.975 14ZM7.975 5C9.675 5 10.975 6.3 10.975 8C10.975 9.7 9.675 11 7.975 11C6.275 11 4.975 9.7 4.975 8C4.975 6.3 6.275 5 7.975 5Z"
            fill={color}
          />
        ) : (
          <>
            <g clipPath="url(#clip0)">
              <path
                d="M8.00013 14C12.7071 14 15.7441 8.716 15.8711 8.492C16.0421 8.188 16.0431 7.816 15.8721 7.512C15.7461 7.287 12.7311 2 8.00013 2C3.24513 2 0.251127 7.289 0.126127 7.514C-0.0428725 7.817 -0.0418725 8.186 0.128127 8.489C0.254127 8.713 3.26913 14 8.00013 14ZM8.00013 4C10.8391 4 13.0361 6.835 13.8181 8C13.0341 9.166 10.8371 12 8.00013 12C5.15913 12 2.96213 9.162 2.18113 7.999C2.95813 6.835 5.14613 4 8.00013 4Z"
                fill={color}
              />
              <path
                d="M8.00013 10C9.1047 10 10.0001 9.10457 10.0001 8C10.0001 6.89543 9.1047 6 8.00013 6C6.89556 6 6.00013 6.89543 6.00013 8C6.00013 9.10457 6.89556 10 8.00013 10Z"
                fill={color}
              />
            </g>
            <defs>
              <clipPath id="clip0">
                <rect width="16" height="16" fill="none" />
              </clipPath>
            </defs>
          </>
        )}
      </Svg>
    )
  }
}

VisibilityOn.defaultProps = {
  color: 'currentColor',
  size: 16,
  solid: false,
}

VisibilityOn.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  solid: PropTypes.bool,
}

export default VisibilityOn

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 17,
  height: 16,
}

class ArrowUp extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="arrow-up" size={newSize} block={block} viewBox="0 0 17 16">
        <path
          d="M8.39162 16C8.78498 16 9.04721 15.8667 9.30945 15.6L16.7832 8L14.9476 6.13333L9.70281 11.4667V0H7.08043V11.4667L1.83567 6.13333L3.12612e-08 8L7.47379 15.6C7.73602 15.8667 7.99826 16 8.39162 16Z"
          transform="translate(16.7832 16) rotate(-180)"
          fill={color}
        />
      </Svg>
    )
  }
}

ArrowUp.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

ArrowUp.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default ArrowUp

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 14,
  height: 14,
}

class ExternalLinkMini extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="external-link-mini"
        size={newSize}
        block={block}
        viewBox="0 0 14 14">
        <path
          d="M12.5567 0H2.45361V2.8866H9.09278L0 11.9794L2.02062 14L11.1134 4.90722V11.5464H14V1.4433C14 0.57732 13.4227 0 12.5567 0Z"
          fill={color}
        />
      </Svg>
    )
  }
}

ExternalLinkMini.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

ExternalLinkMini.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default ExternalLinkMini

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 15,
}

class Printer extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="Printer" size={newSize} block={block} viewBox="0 0 16 15">
        <path
          d="M13.6 4H2.4C1.072 4 0 5.072 0 6.4V10.2C0 10.7523 0.447715 11.2 1 11.2H3.2V13.4C3.2 13.9523 3.64772 14.4 4.2 14.4H11.8C12.3523 14.4 12.8 13.9523 12.8 13.4V11.2H15C15.5523 11.2 16 10.7523 16 10.2V6.4C16 5.072 14.928 4 13.6 4ZM11.2 12.8H4.8V8.8H11.2V12.8ZM13.6 7.2C13.16 7.2 12.8 6.84 12.8 6.4C12.8 5.96 13.16 5.6 13.6 5.6C14.04 5.6 14.4 5.96 14.4 6.4C14.4 6.84 14.04 7.2 13.6 7.2ZM12.8 1C12.8 0.447716 12.3523 0 11.8 0H4.2C3.64771 0 3.2 0.447715 3.2 1V3.2H12.8V1Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Printer.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Printer.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Printer

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 12,
}

class OrderedList extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="orderedList"
        size={newSize}
        block={block}
        viewBox="0 0 64 64"
        fill={color}>
        <path d="M3.985,18.909V17.014l2.063-.168c.336-.024.384-.12.384-.481V7.994c0-.288-.073-.432-.312-.5L4.033,7.058,4.3,5.091h5.757V16.365c0,.384.024.457.384.481l1.967.168v1.895Z" />{' '}
        <path
          data-color="color-2"
          d="M2.738,39.088v-2.23l3.214-3.143c2.423-2.351,3.454-3.311,3.454-4.678,0-.887-.432-1.535-1.7-1.535-1.319,0-1.87.431-1.87,2.135L2.57,29.349c.024-3.814,2.927-4.437,5.445-4.437,3.718,0,5.038,1.583,5.038,3.838s-1.56,3.741-3.311,5.421L7.032,36.76h3.525c.241,0,.336-.047.384-.285l.336-1.9H13.82v4.51Z"
        />{' '}
        <path
          data-color="color-2"
          d="M10.834,51.736A3.385,3.385,0,0,1,14,55.43c0,3.166-2.375,4.654-5.8,4.654a7.921,7.921,0,0,1-5.8-2.207l1.919-2.113a4.781,4.781,0,0,0,3.6,1.586c1.343,0,2.494-.481,2.494-2.16,0-1.463-.911-2.063-2.4-2.063a9.691,9.691,0,0,0-1.775.168V50.9L7.4,50.752c1.728-.215,2.663-1.055,2.663-2.59,0-.912-.408-1.656-1.751-1.656-1.3,0-1.92.431-1.92,2.134l-3.286-.287c0-3.789,2.854-4.437,5.373-4.437,3.7,0,5.11,1.414,5.11,3.98a3.756,3.756,0,0,1-2.758,3.743Z"
          fill={color}
        />
        <path d="M61,13H21a1,1,0,0,1,0-2H61a1,1,0,0,1,0,2Z" fill={color} />
        <path d="M46,33H21a1,1,0,0,1,0-2H46a1,1,0,0,1,0,2Z" fill={color} />
        <path d="M61,53H21a1,1,0,0,1,0-2H61a1,1,0,0,1,0,2Z" fill={color} />
      </Svg>
    )
  }
}

OrderedList.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

OrderedList.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default OrderedList

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 20,
  height: 20,
}

class Cog extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="cog" size={newSize} block={block} viewBox="0 0 20 20">
        <path
          d="M18.9188 8.48C17.29 8.0725 16.5175 6.2075 17.3813 4.76875C17.7838 4.09875 17.6625 3.52125 17.2638 3.12375L16.8763 2.73625C16.4788 2.33875 15.9013 2.2175 15.2313 2.61875C13.7913 3.4825 11.9262 2.71 11.52 1.08125C11.3312 0.3225 10.8362 0 10.2738 0H9.72625C9.16375 0 8.67 0.3225 8.48 1.08125C8.0725 2.71 6.2075 3.4825 4.76875 2.61875C4.09875 2.21625 3.52 2.3375 3.1225 2.735L2.735 3.1225C2.3375 3.52 2.21625 4.09875 2.61875 4.76875C3.4825 6.20875 2.71 8.07375 1.08125 8.48C0.325 8.66875 0 9.1625 0 9.72625V10.2738C0 10.8362 0.3225 11.33 1.08125 11.52C2.71 11.9275 3.4825 13.7925 2.61875 15.2313C2.21625 15.9013 2.3375 16.4788 2.73625 16.8763L3.12375 17.2638C3.5225 17.6625 4.10125 17.7825 4.76875 17.3813C6.20875 16.5175 8.07375 17.29 8.48 18.9188C8.66875 19.6775 9.16375 20 9.72625 20H10.2738C10.8362 20 11.33 19.6775 11.52 18.9188C11.9275 17.29 13.7925 16.5175 15.2313 17.3813C15.9 17.7825 16.4775 17.6625 16.8763 17.2638L17.2638 16.8763C17.6612 16.4788 17.7825 15.9013 17.3813 15.2313C16.5175 13.7913 17.29 11.9262 18.9188 11.52C19.6775 11.3312 20 10.8362 20 10.2738V9.72625C20 9.1625 19.675 8.66875 18.9188 8.48ZM10 13.75C7.92875 13.75 6.25 12.0712 6.25 10C6.25 7.92875 7.92875 6.25 10 6.25C12.0712 6.25 13.75 7.92875 13.75 10C13.75 12.0712 12.0712 13.75 10 13.75Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Cog.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Cog.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Cog

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 12,
}

class Italic extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="italic" size={newSize} block={block} viewBox="0 0 64 64">
        <path
          fill={color}
          d="M18,62v-4l5.25626-0.64264c1.16066-0.08098,1.32598-0.41163,1.49131-1.65664l6.62993-47.40145 c0.16533-1.24501,0.08435-1.57566-1.07631-1.66001L26,6V2h20v4l-5.58691,0.72361c-1.24501,0.16533-1.32936,0.33065-1.49469,1.57566 l-6.7109,47.32048c-0.16533,1.32598-0.16533,1.49131,1.07631,1.65664L38,58v4H18z"
        />
      </Svg>
    )
  }
}

Italic.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

Italic.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Italic

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 14,
  height: 13,
}

class Density extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="density"
        size={newSize}
        block={block}
        viewBox="0 0 14 13"
        fill={color}>
        <rect
          y="11.1426"
          width={newSize.width}
          height="1.85714"
          rx="0.928571"
          fill={color}
        />
        <rect
          y="7.42871"
          width={newSize.width}
          height="1.85714"
          rx="0.928571"
          fill={color}
        />
        <rect width={newSize.width} height="5.57143" rx="1" fill={color} />
      </Svg>
    )
  }
}

Density.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Density.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Density

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 44,
  height: 44,
}

class User extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="user" size={newSize} block={block} viewBox="0 0 32 32">
        <path
          d="M16 0C7.17733 0 0 7.17733 0 16C0 24.8227 7.17733 32 16 32C24.8227 32 32 24.8227 32 16C32 7.17733 24.8227 0 16 0ZM24.9307 25.872C24.0453 23.2413 21.5973 21.3333 18.6667 21.3333H13.3333C10.4027 21.3333 7.95733 23.2427 7.072 25.8733C4.37467 23.432 2.66667 19.916 2.66667 16C2.66667 8.648 8.648 2.66667 16 2.66667C23.352 2.66667 29.3333 8.648 29.3333 16C29.3333 19.9147 27.6267 23.4307 24.9307 25.872Z"
          fill={color}
        />
        <path
          d="M15.9998 6.66699C13.0545 6.66699 10.6665 9.05499 10.6665 12.0003V13.3337C10.6665 16.279 13.0545 18.667 15.9998 18.667C18.9452 18.667 21.3332 16.279 21.3332 13.3337V12.0003C21.3332 9.05499 18.9452 6.66699 15.9998 6.66699Z"
          fill={color}
        />
      </Svg>
    )
  }
}

User.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

User.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default User

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 12,
}

class Image extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="image"
        size={newSize}
        block={block}
        viewBox="0 0 64 64"
        fill={color}>
        <path d="M52,10H12V6a2,2,0,0,1,2-2H50a2,2,0,0,1,2,2Z" fill={color} />
        <path
          d="M59,12H5a2,2,0,0,0-2,2V58a2,2,0,0,0,2,2H59a2,2,0,0,0,2-2V14A2,2,0,0,0,59,12ZM21,20a4,4,0,1,1-4,4A4,4,0,0,1,21,20ZM52.87,49.493A1,1,0,0,1,52,50H12a1,1,0,0,1-.832-1.555l8-12a1,1,0,0,1,1.539-.152l7.185,7.185L39.2,28.4a.973.973,0,0,1,.852-.4,1,1,0,0,1,.8.484l12,20A1,1,0,0,1,52.87,49.493Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Image.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

Image.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Image

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Search extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="search" size={newSize} block={block}>
        <path
          d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Search.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Search.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Search

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'

class Clear extends PureComponent {
  render() {
    const { size, color } = this.props
    const newSize = {
      width: size,
      height: size,
    }
    return (
      <Svg name="clear" size={newSize} viewBox="0 0 16 16">
        <path
          d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM11.1464 9.74645C11.3417 9.94171 11.3417 10.2583 11.1464 10.4536L10.4536 11.1464C10.2583 11.3417 9.94171 11.3417 9.74645 11.1464L8 9.4L6.25355 11.1464C6.05829 11.3417 5.74171 11.3417 5.54645 11.1464L4.85355 10.4536C4.65829 10.2583 4.65829 9.94171 4.85355 9.74645L6.6 8L4.85355 6.25355C4.65829 6.05829 4.65829 5.74171 4.85355 5.54645L5.54645 4.85355C5.74171 4.65829 6.05829 4.65829 6.25355 4.85355L8 6.6L9.74645 4.85355C9.94171 4.65829 10.2583 4.65829 10.4536 4.85355L11.1464 5.54645C11.3417 5.74171 11.3417 6.05829 11.1464 6.25355L9.4 8L11.1464 9.74645Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Clear.defaultProps = {
  size: 16,
  color: 'currentColor',
}

Clear.propTypes = {
  size: PropTypes.number.isRequired,
  color: PropTypes.string.isRequired,
}

export default Clear

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 18,
  height: 12,
}

class Bars extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="bars" size={newSize} block={block} viewBox="0 0 18 12">
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M0 12H18V10H0V12ZM0 7H18V5H0V7ZM0 0V2H18V0H0Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Bars.defaultProps = {
  color: 'currentColor',
  size: 20,
  block: false,
}

Bars.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Bars

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

const Info = ({ color, size, block }) => {
  const newSize = calcIconSize(iconBase, size)

  return (
    <Svg name="info" size={newSize} block={block}>
      <path
        d="M8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16ZM8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2Z"
        fill={color}
      />
      <path d="M7 12H9V7H7L7 12Z" fill={color} />
      <path
        d="M8 4C7.44772 4 7 4.44772 7 5C7 5.55228 7.44772 6 8 6C8.55228 6 9 5.55228 9 5C9 4.44772 8.55228 4 8 4Z"
        fill={color}
      />
    </Svg>
  )
}

Info.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Info.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Info

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Edit extends PureComponent {
  render() {
    const { color, size, solid, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="edit"
        variation={solid ? 'solid' : null}
        size={newSize}
        block={block}>
        {solid ? (
          <>
            <path
              d="M8.1 0L0.3 7.8C0.1 8 0 8.2 0 8.5V11.5C0 12.1 0.4 12.5 1 12.5H4C4.3 12.5 4.5 12.4 4.7 12.2L12.5 4.4L8.1 0Z"
              transform="translate(0 3.5)"
              fill={color}
            />
            <path
              d="M6.2 3.3L3.2 0.3C2.8 -0.1 2.2 -0.1 1.8 0.3L0 2.1L4.4 6.5L6.2 4.7C6.6 4.3 6.6 3.7 6.2 3.3Z"
              transform="translate(9.5)"
              fill={color}
            />
          </>
        ) : (
          <path
            d="M11.7 0.3C11.3 -0.1 10.7 -0.1 10.3 0.3L0.3 10.3C0.1 10.5 0 10.7 0 11V15C0 15.6 0.4 16 1 16H5C5.3 16 5.5 15.9 5.7 15.7L15.7 5.7C16.1 5.3 16.1 4.7 15.7 4.3L11.7 0.3ZM4.6 14H2V11.4L8 5.4L10.6 8L4.6 14ZM12 6.6L9.4 4L11 2.4L13.6 5L12 6.6Z"
            fill={color}
          />
        )}
      </Svg>
    )
  }
}

Edit.defaultProps = {
  color: 'currentColor',
  size: 16,
  solid: false,
  block: false,
}

Edit.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  solid: PropTypes.bool,
  block: PropTypes.bool,
}

export default Edit

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Warning extends PureComponent {
  render() {
    const { color, size, solid, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg
        name="warning"
        variation={solid ? 'solid' : null}
        size={newSize}
        block={block}>
        {solid ? (
          <path
            d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 12C7.4 12 7 11.6 7 11C7 10.4 7.4 10 8 10C8.6 10 9 10.4 9 11C9 11.6 8.6 12 8 12ZM9 9H7V4H9V9Z"
            fill={color}
          />
        ) : (
          <>
            <path
              d="M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 14C4.7 14 2 11.3 2 8C2 4.7 4.7 2 8 2C11.3 2 14 4.7 14 8C14 11.3 11.3 14 8 14Z"
              fill={color}
            />
            <path d="M2 0H0V5H2V0Z" transform="translate(7 4)" fill={color} />
            <path
              d="M1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2Z"
              transform="translate(7 10)"
              fill={color}
            />
          </>
        )}
      </Svg>
    )
  }
}

Warning.defaultProps = {
  color: 'currentColor',
  size: 16,
  solid: false,
  block: false,
}

Warning.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  solid: PropTypes.bool,
  block: PropTypes.bool,
}

export default Warning

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 14,
  height: 14,
}

class Deny extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="deny" size={newSize} block={block} viewBox="0 0 14 14">
        <path
          d="M11.9071 0.707107C11.5166 0.316582 10.8834 0.316582 10.4929 0.707107L7 4.2L3.50711 0.707107C3.11658 0.316582 2.48342 0.316583 2.09289 0.707107L0.707107 2.09289C0.316582 2.48342 0.316583 3.11658 0.707107 3.50711L4.2 7L0.707107 10.4929C0.316582 10.8834 0.316583 11.5166 0.707107 11.9071L2.09289 13.2929C2.48342 13.6834 3.11658 13.6834 3.50711 13.2929L7 9.8L10.4929 13.2929C10.8834 13.6834 11.5166 13.6834 11.9071 13.2929L13.2929 11.9071C13.6834 11.5166 13.6834 10.8834 13.2929 10.4929L9.8 7L13.2929 3.50711C13.6834 3.11658 13.6834 2.48342 13.2929 2.09289L11.9071 0.707107Z"
          fill={color}
        />
      </Svg>
    )
  }
}

Deny.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Deny.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Deny

```


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

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

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

import { Svg } from '../IconBase'
import { calcIconSize } from '../utils'

const iconBase = {
  width: 16,
  height: 16,
}

class Link extends PureComponent {
  render() {
    const { color, size, block } = this.props
    const newSize = calcIconSize(iconBase, size)

    return (
      <Svg name="link" size={newSize} block={block}>
        <path
          d="M5 0C3.7 0 2.4 0.5 1.5 1.5L0.3 2.6C-0.0999998 3 -0.0999998 3.6 0.3 4C0.7 4.4 1.3 4.4 1.7 4L2.9 2.8C4 1.7 6 1.7 7.1 2.8C7.7 3.4 8 4.2 8 5C8 5.8 7.7 6.6 7.1 7.1L6 8.3C5.6 8.7 5.6 9.3 6 9.7C6.2 9.9 6.5 10 6.7 10C6.9 10 7.2 9.9 7.4 9.7L8.6 8.5C9.5 7.6 10 6.3 10 5C10 3.7 9.5 2.4 8.5 1.5C7.6 0.5 6.3 0 5 0Z"
          transform="translate(6)"
          fill={color}
        />
        <path
          d="M8.3 6L7.1 7.2C6 8.3 4 8.3 2.9 7.2C2.3 6.6 2 5.8 2 5C2 4.2 2.3 3.4 2.9 2.9L4 1.7C4.4 1.3 4.4 0.7 4 0.3C3.6 -0.0999998 3 -0.0999998 2.6 0.3L1.5 1.5C0.5 2.4 0 3.7 0 5C0 6.3 0.5 7.6 1.5 8.5C2.4 9.5 3.7 10 5 10C6.3 10 7.6 9.5 8.5 8.5L9.7 7.3C10.1 6.9 10.1 6.3 9.7 5.9C9.3 5.5 8.7 5.6 8.3 6Z"
          transform="translate(0 6)"
          fill={color}
        />
        <path
          d="M4.5 0.3L0.3 4.5C-0.1 4.9 -0.1 5.5 0.3 5.9C0.5 6.1 0.8 6.2 1 6.2C1.2 6.2 1.5 6.1 1.7 5.9L5.9 1.7C6.3 1.3 6.3 0.7 5.9 0.3C5.5 -0.1 4.9 -0.1 4.5 0.3Z"
          transform="translate(4.8999 4.90002)"
          fill={color}
        />
      </Svg>
    )
  }
}

Link.defaultProps = {
  color: 'currentColor',
  size: 16,
  block: false,
}

Link.propTypes = {
  color: PropTypes.string,
  size: PropTypes.number,
  block: PropTypes.bool,
}

export default Link

```