[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 css-handles/docs/README.md from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```markdown
# CSS Handles

Utility for generating CSS handles for store components.

<!-- @import "[TOC]" {cmd="toc" depthFrom=3 depthTo=6 orderedList=false} -->

<!-- code_chunk_output -->

- [useCssHandles](#usecsshandles)
- [useCustomClasses](#usecustomclasses)
- [createCssHandlesContext](#createcsshandlescontext)
  - [Example of issues that `createCssHandlesContext` solves](#example-of-issues-that-createcsshandlescontext-solves)
  - [Example with the usage of `createCssHandlesContext`](#example-with-the-usage-of-createcsshandlescontext)

<!-- /code_chunk_output -->

## API

### useCssHandles

The `useCssHandles` hook creates handles that are used to customize parts of an app. These names are unique for each app, so two apps using the same handle identifier will not receive the same class name. It returns an object of type `CssHandlesBag`, which you can check out below.

This hook is extensible via the `classes` option, so other apps that import this component can customize the classes. See the docs for the `useCustomClasses` hook for more information.

There are cases where multiple components of a block have handles. In this cases, `useCssHandles` must be called only on the root component (the entrypoint of the block) and it must receive the handles of all nested components. To learn more about this use case, check out the `useContextCssHandles` hook.

| Parameter | Type                | Description                                                                                | Default value |
| --------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| `handles` | `[string]`          | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) List of handles to be created. The array is preferably a const (see example below) | `undefined`   |
| `options` | `CssHandlesOptions` | Configurations that change how the hook must behave.                                                                                | `{}`          |

- `CssHandlesOptions` object:

| Keys            | Type               | Description                                                                                | Default value                                                                                |
| --------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `migrationFrom` | `string            | [string]`                                                                                | Used to preserve the behavior of a block when migrating code from one app to another. Receives APP IDs and creates additional handles for each one of them. | `undefined` |
| `classes`       | `CustomCSSClasses` | Used to override the default handle definitions. The value must be received via props, thus giving the parent component the ability incorporate the handles of its children in its API. To understand more about this option, read about the `useCustomClasses` hook. | `undefined`                                                                                |

- `CssHandlesBag` object:

| Keys            | Type                                   | Description                                                                                |
| --------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `handles`       | `Record<string, string>`               | An object where the keys are the handles and its values are the classes.                                                                                |
| `withModifiers` | `function(string, string[]) => string` | Appends modifier suffixes to the CSS handles, for selection of specific items. The first argument receives the name of a handle, and the second argument might be a list or a string of the modifier to be appended. |

- Example of usage:

```tsx
import React from 'react'
import { useCssHandles } from 'vtex.css-handles'

/* Using `as const at the end` hints to Typescript that this array
 * won't change, thus allowing autocomplete and other goodies. */
const CSS_HANDLES = ['container', 'background', 'text', 'item'] as const

function MyExampleComponent({ classes }) {
  const { handles, withModifiers } = useCssHandles(CSS_HANDLES, { classes })

  return (

      <div className={`${handles.background} bg-red`}>
        <h1 className={`${handles.text} f1 c-white`}>Hello world

          {['blue', 'yellow', 'green'].map((color) => (
            <li
              {/*
               * Appends modifier suffixes to the CSS handles.
               * For example, `item item--color` */}
              className={`${withModifiers('item', color)} bg-${color}`}
              key={color}
            >
              Color {color}

          ))}

  )
}

export default MyExampleComponent
```

### useCustomClasses

The `useCustomClasses` hook acts as a handle API overrider. This hook is used to create new handles that can override the ones present on child components. It exists so a parent component can incorporate its children handle API into its own. The parent may determine if modifiers on the children should be applied, or change the names of the handles.

This hook receives a function and an array of dependencies, just like other React hooks such as `useEffect`. The function must return an object containing `CustomClassValue` values. The result can then be provided to its children via the `classes` prop, as demonstrated on the example below.

| Parameter | Type                           | Description                                                                                | Default value |
| --------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
| `classes` | `function => CustomClassValue` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) A function that returns a `CustomClassValue` object. | `undefined`   |
| `deps`    | `any[]`                        | Array of dependencies. If any of the dependences change, the hook function is called again.                                                      | `[]`          |

- `CustomClassValue` object

The keys of the `CustomClassValue` object should match the name of the handles of the child it is going to override. The values must be of type `string | CustomClassItem | [string | CustomClassItem]`. See example below for more details.

- `CustomClassItem` object

| Parameter       | Type      | Description                                                                         | Default value                                                    |
| --------------- | --------- | ----------------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| `name`          | `string`  | Sets the name of the child handle. Avoid using the same name for multiple children. | Name of the `CustomClassValue` key corresponding to this object. |
| `withModifiers` | `boolean` | Defines if the child will be able to run withModifiers on that specific handle.     | `true`                                                           |

- Example of usage (related to the previous example):

```tsx
import React from 'react'
import { useCssHandles, useCustomClasses } from 'vtex.css-handles'

// That is the example above
import MyExampleComponent from './MyExampleComponent'

function MyComponent() {
  const classes = useCustomClasses(() => {
    container: 'foobar childContainer',
    text: ['anArray', 'example'],
    item: ['db', { name: 'myItem', applyModifiers: true }],
  })

  return (

      {/* ChildComponent will now render:
        - The handle "container" will render the class "foobar childContainer"
        - The handle "background" was not customized, it will render the original handle
        - The handle "text" will render the classes "anArray example"
        - The handle "item" will render the class "db myItem" and will apply the modifiers applied to the class "myItem", example: "db myItem myItem--red".
      */}
      <MyExampleComponent classes={classes} />

  )
}

export default MyComponent
```

### createCssHandlesContext

The `createCssHandlesContext` function can be used to create a context provider and consumer for handles. It makes easier to manage handles that are located in components of different levels of the tree, avoiding [prop drilling](https://kentcdodds.com/blog/prop-drilling).

The function expects a list of handle names as input:

| Parameter | Type       | Description                                                                                | Default value |
| --------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `handles` | `[string]` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) List of handles to be supported by the whole block. The array is preferably a const (see example below) | `undefined`   |

The function outputs a `CssHandlesProvider` component and a `useContextCssHandles` hook.

1. The `CssHandlesProvider` is used on the public component to provide all the `handles` and the `withModifier` function to its children via context. You should wrap your component with the provider as shown on the example bellow.
2. Children of the public component that have handles of their own should use the `useContextCssHandles`. It outputs a `CssHandlesBag` just like the `useCssHandles` hook, and expects no input.

#### Example of issues that `createCssHandlesContext` solves

```tsx
/* PublicAPIComponent.tsx */
import React from 'react'
import { useCssHandles } from 'vtex.css-handles'

import { NestedPrivateComponent } from './NestedPrivateComponent'

/**
 * Problem: the nested handles are not included in the API of PublicAPIComponent.
 * TypeScript will complain if the user passes the class "nestedPublicHandle",
 * as "nestedPublicHandle" handle does not exist in PublicAPIComponent API.
 */
const CSS_HANDLES = ['root'] as const

const PublicAPIComponent({ classes }) {
  const { handles, withModifiers } = useCssHandles(CSS_HANDLES, { classes })

  return (

      {/* Problem: we need to pass the classes prop down. */}
      <NestedPrivateComponent classes={classes} />

  )
}

export default PublicAPIComponent
```

```tsx
/* NestedPrivateComponent.tsx */
import React from 'react'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['nestedPublicHandle'] as const

/**
 * Problem: if this component had another nested component it would need to pass
 * the classes prop down again!
 */
const NestedPrivateComponent({ classes }) {
  const { handles } = useCssHandles(CSS_HANDLES, { classes })

  return
Nested Component

}

export default NestedPrivateComponent
```

#### Example with the usage of `createCssHandlesContext`

```tsx
/* PublicAPIComponent.tsx */
import React from 'react'
import { useCssHandles } from 'vtex.css-handles'

import { CssHandlesProvider } from './cssHandlesContext'
import { NestedPrivateComponent } from './NestedPrivateComponent'

/**
 * Solution: include the NestedPrivateComponent CSS handles in the
 * PublicAPIComponent API.
 */
export const CSS_HANDLES = ['root', ...NestedPrivateComponent.cssHandles] as const

const PublicAPIComponent({ classes }) {
  const { handles, withModifiers } = useCssHandles(CSS_HANDLES, { classes })

  return (
    {/* Solution: provide handles by context */}
    <CssHandlesProvider handles={handles} withModifiers={withModifiers}>

        {/* Solution: no need to pass the classes prop down */}
        <NestedPrivateComponent />

    </CssHandlesProvider>
  )
}

export default PublicAPIComponent
```

```tsx
/* NestedPrivateComponent.tsx */
import React from 'react'

import { useContextCssHandles } from './cssHandlesContext.ts'

/*
 * Solution: if this component had another nested component, just merge the nested
 * component CSS Handles here, just like we did in PublicAPIComponent.
 */
const CSS_HANDLES = ['nestedPublicHandle'] as const

const NestedPrivateComponent() {
  // Use the hook created by `createCssHandlesContext`
  const { handles } = useContextCssHandles()

  return
Nested Component

}

NestedPrivateComponent.cssHandles = CSS_HANDLES

export default NestedPrivateComponent
```

```ts
/* cssHandlesContext.ts */
import { createCssHandlesContext } from 'vtex.css-handles'

import { CSS_HANDLES } from './PublicAPIComponent'

const { CssHandlesProvider, useContextCssHandles } = createCssHandlesContext(
  CSS_HANDLES
)

export { CssHandlesProvider, useContextCssHandles }
```

```


[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 css-handles/react/createCssHandlesContext.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  createContext,
  useContext,
  useMemo,
  PropsWithChildren,
} from 'react'

import type { CssHandlesList, CssHandlesBag } from './CssHandlesTypes'

interface ProviderProps<T extends CssHandlesList> {
  withModifiers: CssHandlesBag<T>['withModifiers']
  handles: CssHandlesBag<T>['handles']
}

export default function createCssHandlesContext<T extends CssHandlesList>(
  _handles: T
) {
  const Context = createContext<CssHandlesBag<T> | null>(null)

  const useContextCssHandles = () => {
    return useContext(Context) as CssHandlesBag<T>
  }

  const CssHandlesProvider = ({
    withModifiers,
    handles,
    children,
  }: PropsWithChildren<ProviderProps<T>>) => {
    const value = useMemo(
      () => ({
        handles,
        withModifiers,
      }),
      [withModifiers, handles]
    )

    return <Context.Provider value={value}>{children}</Context.Provider>
  }

  return {
    CssHandlesProvider,
    useContextCssHandles,
  }
}

```


[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 css-handles/react/CssHandlesTypes.ts from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { SYMBOL_CUSTOM_CLASSES } from './useCustomClasses'

export type ValuesOf<T extends readonly unknown[]> = T[number]

type CustomClassItem =
  | string
  | {
      name: string
      applyModifiers?: boolean
    }

export type CssHandlesList = readonly string[]

export type CssHandles<T extends CssHandlesList> = Record<ValuesOf<T>, string>

export type WithModifiers<T extends CssHandlesList> = (
  handleName: ValuesOf<T>,
  modifier: string | string[]
) => string

/**
 * Collection of css handle utilities returned by `useCssHandles`
 */
export type CssHandlesBag<T extends CssHandlesList> = {
  handles: CssHandles<T>
  withModifiers: WithModifiers<T>
}

/**
 * Props added to a wrapped component via `withCssHandles`
 */
export type WithCssHandlesBag<T extends CssHandlesList, Props> = Props &
  CssHandlesBag<T>

export type CustomClassValue = CustomClassItem | CustomClassItem[]

export type CustomClasses<T extends CssHandlesList> = {
  [key in ValuesOf<T>]?: CustomClassValue
} & {
  /**
   * Internal custom classes key
   * @private
   */
  __useCustomClasses: typeof SYMBOL_CUSTOM_CLASSES
}

export interface CssHandlesOptions<T extends CssHandlesList> {
  migrationFrom?: string | string[]
  classes?: CustomClasses<T>
}

```


[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 css-handles/react/applyModifiers.ts from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { validateModifier } from './modules/modifier'

const applyModifiers = (handles: string, modifier: string | string[]) => {
  const normalizedModifiers =
    typeof modifier === 'string' ? [modifier] : modifier

  if (!Array.isArray(normalizedModifiers)) {
    console.error(
      'Invalid modifier type on `cssHandles.applyModifier`. Please use either a string or an array of strings'
    )

    return handles
  }

  const splitHandles = handles.split(' ')

  const modifiedHandles = normalizedModifiers
    .map((currentModifier) => {
      const isValid = validateModifier(currentModifier)

      if (!isValid) {
        return ''
      }

      return splitHandles
        .map((handle) => `${handle}--${currentModifier}`)
        .join(' ')
        .trim()
    })
    .filter((l) => l.length > 0)
    .join(' ')
    .trim()

  return splitHandles.concat(modifiedHandles).join(' ').trim()
}

export default applyModifiers

```


[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 css-handles/react/package.json from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.3",
    "react": "^16.10.1",
    "react-apollo": "^2.5.8",
    "react-dom": "^16.8.6",
    "react-intl": "^2.9.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^4.0.0",
    "@types/react": "^16.9.56",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.5.2",
    "typescript": "3.9.7",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.124.3/public/@types/vtex.render-runtime"
  },
  "version": "1.0.1"
}

```


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

[User] Show me the implementation of css-handles/react/withCssHandles.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

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

import useCssHandles from './useCssHandles'
import type {
  CssHandlesList,
  CssHandlesOptions,
  CssHandlesBag,
} from './CssHandlesTypes'

// eslint-disable-next-line @typescript-eslint/ban-types
const withCssHandles = <T extends CssHandlesList, Props = {}>(
  handles: T,
  options?: CssHandlesOptions<T>
) => (Component: ComponentType<Props & CssHandlesBag<T>>) => {
  const EnhancedComponent = (props: Props) => {
    const handlesBag = useCssHandles(handles, options)

    return <Component {...props} {...handlesBag} />
  }

  const displayName = Component.displayName ?? Component.name ?? 'Component'

  EnhancedComponent.displayName = `withCssHandles(${displayName})`

  return EnhancedComponent
}

export default withCssHandles

```


[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 css-handles/react/useCssHandles.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useMemo } from 'react'

import { useExtension } from './hooks/useExtension'
import {
  computeCustomClassValue,
  ComputedCustomClass,
} from './modules/customClasses'
import { validateModifier } from './modules/modifier'
import applyModifiers from './applyModifiers'
import { SYMBOL_CUSTOM_CLASSES } from './useCustomClasses'
import type {
  CssHandlesList,
  CssHandles,
  CssHandlesOptions,
  ValuesOf,
  CssHandlesBag,
  CustomClassValue,
} from './CssHandlesTypes'

const VALID_CSS_HANDLE_PATTERN = /^[^\d][\w-]+$/
const APP_NAME_PATTERN = /([^.]+)\.([^@]+)@(\d+)/

/** Verifies if the handle contains only letters, numbers and -, and does not begin with a number  */
const validateCssHandle = (handle: string) =>
  VALID_CSS_HANDLE_PATTERN.test(handle)

const parseComponentName = (componentName: string) => {
  const [, vendor, name, major] = componentName.match(APP_NAME_PATTERN) ?? []

  return { vendor, name, major }
}

const normalizeComponentName = (componentName: string) => {
  const { vendor, name, major } = parseComponentName(componentName)

  if (vendor && name && major) {
    return `${vendor}-${name}-${major}-x`
  }

  return null
}

const generateCssHandles = <T extends CssHandlesList>(
  namespace: string,
  handles: T,
  modifiers?: string | string[]
) => {
  return handles.reduce((acc, handle: ValuesOf<T>) => {
    const isValid = !!namespace && validateCssHandle(handle)
    const transformedHandle = `${namespace}-${handle}`

    acc[handle] = isValid
      ? modifiers
        ? applyModifiers(transformedHandle, modifiers)
        : transformedHandle
      : ''

    if (!isValid) {
      console.error(
        `Invalid CSS handle "${handle}". It should only contain letters or numbers, and should start with a letter.`
      )
    }

    return acc
  }, {} as CssHandles<T>)
}

/**
 * Useful for creating CSS handles without creating a CSS file with empty
 * declarations.
 * Receives an array of strings (e.g. ['foo', 'bar']) and returns an
 * object with generated css class names, e.g.
 * { foo: 'vendor-appname-1-x-foo', bar: 'vendor-appname-1-x-bar' }.
 */
const useCssHandles = <T extends CssHandlesList>(
  handleList: T,
  options: CssHandlesOptions<T> = {}
): CssHandlesBag<T> => {
  const extension = useExtension()

  const { content = {}, props = {}, component = '' } = extension ?? {}
  const blockClass = props.cssHandle || content.blockClass || props.blockClass
  const { migrationFrom, classes: handlesOverride } = options

  const values = useMemo<CssHandlesBag<T>>(() => {
    const normalizedComponent = normalizeComponentName(component)

    const namespaces = normalizedComponent ? [normalizedComponent] : []
    const handlesSet = new Set<ValuesOf<T>>(handleList)
    const handles = {} as CssHandles<T>
    const computedCustomClasses = new Map<ValuesOf<T>, ComputedCustomClass>()

    if (migrationFrom) {
      const migrations = Array.isArray(migrationFrom)
        ? migrationFrom
        : [migrationFrom]

      const normalizedMigrations = migrations
        .map(normalizeComponentName)
        .filter(
          (current) => !!current && current !== normalizedComponent
        ) as string[]

      namespaces.push(...normalizedMigrations)
    }

    if (handlesOverride) {
      if (
        process.env.NODE_ENV === 'development' &&
        handlesOverride.__useCustomClasses !== SYMBOL_CUSTOM_CLASSES
      ) {
        throw new Error(
          "[css-handles] Invalid 'classes' option. Use the 'useCustomClasses' hook to generate a valid 'classes' object."
        )
      }

      Object.keys(handlesOverride).forEach((handleName: ValuesOf<T>) => {
        // the secret symbol can be safely ignored here
        if (handleName === '__useCustomClasses') return

        // side-effect to remove handles that we don't need to generate full names
        handlesSet.delete(handleName)

        const computedCustomClass = computeCustomClassValue(
          handlesOverride[handleName] as Required<CustomClassValue>
        )

        handles[handleName] = computedCustomClass.classNames.join(' ')
        computedCustomClasses.set(handleName, computedCustomClass)
      })
    }

    // `handlesToGenerate` are handles that were not overriden by classes
    const handlesToGenerate = [...handlesSet]

    namespaces.forEach((componentName) => {
      const namespaceHandles = generateCssHandles(
        componentName,
        handlesToGenerate,
        blockClass
      )

      Object.keys(namespaceHandles).forEach((key: ValuesOf<T>) => {
        if (key in handles) {
          handles[key] = `${handles[key]} ${namespaceHandles[key]}`
        } else {
          handles[key] = namespaceHandles[key]
        }
      })
    })

    const withModifiers = (id: ValuesOf<T>, modifier: string | string[]) => {
      const normalizedModifiers =
        typeof modifier === 'string' ? [modifier] : modifier

      if (!Array.isArray(normalizedModifiers)) {
        console.error(
          'Invalid modifier type on `withModifier`. Please use either a string or an array of strings'
        )

        return handles[id]
      }

      let baseClassNames: string[] = []
      let classesToApplyModifiers: string[] = []

      const computedCustomClass = computedCustomClasses.get(id)

      if (computedCustomClass) {
        baseClassNames = computedCustomClass.classNames
        classesToApplyModifiers = computedCustomClass.toApplyModifiers
      } else {
        baseClassNames = handles[id].split(' ')
        classesToApplyModifiers = baseClassNames
      }

      const modifiedClasses = normalizedModifiers
        .map((currentModifier) => {
          const isValid = validateModifier(currentModifier)

          if (!isValid) {
            return ''
          }

          return classesToApplyModifiers
            .map((className) => `${className}--${currentModifier}`)
            .join(' ')
            .trim()
        })
        .filter((l) => l.length > 0)
        .join(' ')
        .trim()

      return baseClassNames.concat(modifiedClasses).join(' ').trim()
    }

    return {
      handles,
      withModifiers,
    }
  }, [blockClass, component, handleList, migrationFrom, handlesOverride])

  return values
}

export default useCssHandles

```


[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 css-handles/react/useCustomClasses.ts from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useMemo } from 'react'

import type { CustomClasses, CssHandlesList } from './CssHandlesTypes'

export const SYMBOL_CUSTOM_CLASSES: unique symbol = Symbol('customClasses')

const useCustomClasses = <T extends CssHandlesList>(
  classes: () => Omit<CustomClasses<T>, '__useCustomClasses'>,
  deps: unknown[] = []
): CustomClasses<T> => {
  // we know what we're doing *wink wink*
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const memo = useMemo(classes, deps) as CustomClasses<T>

  // __useCustomClasses is added to guarantee that consumers will use this hooks
  // instead of just passing a new object at every render
  memo.__useCustomClasses = SYMBOL_CUSTOM_CLASSES

  return memo
}

export default useCustomClasses

```


[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 css-handles/react/__fixtures__/Nested.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { useContextCssHandles } from './handles'

const Nested = () => {
  const { handles } = useContextCssHandles()

  return <div className={handles.nested}>Nested content</div>
}

Nested.handles = ['nested'] as const

export default Nested

```


[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 css-handles/react/__fixtures__/Root.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import useCssHandles from '../useCssHandles'
import { CustomClasses } from '../CssHandlesTypes'
import { CssHandlesProvider } from './handles'
import Nested from './Nested'

export const ROOT_HANDLES = ['root', ...Nested.handles] as const

interface Props {
  classes?: CustomClasses<typeof ROOT_HANDLES>
}

const Root = ({ classes }: Props) => {
  const { handles, withModifiers } = useCssHandles(ROOT_HANDLES, { classes })

  return (
    <CssHandlesProvider withModifiers={withModifiers} handles={handles}>
      <div className={handles.root}>
        Root Component
        <Nested />
      </div>
    </CssHandlesProvider>
  )
}

export default Root

```


[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 css-handles/react/__fixtures__/handles.ts from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```typescript
import createCssHandlesContext from '../createCssHandlesContext'
import { ROOT_HANDLES } from './Root'

const { CssHandlesProvider, useContextCssHandles } = createCssHandlesContext(
  ROOT_HANDLES
)

export { CssHandlesProvider, useContextCssHandles }

```


[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 css-handles/react/__tests__/useCssHandles.test.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```tsx
import useCssHandles from '../useCssHandles'
import { useExtension } from '../hooks/useExtension'
import { SYMBOL_CUSTOM_CLASSES } from '../useCustomClasses'
import { resetInvalidModifiers } from '../modules/modifier'

jest.mock('react', () => ({
  useMemo: (callback: () => any) => callback(),
}))

jest.mock('../hooks/useExtension', () => ({
  useExtension: jest.fn(() => ({
    component: 'vtex.app@2.1.0',
    props: {
      blockClass: 'blockClass',
    },
  })),
}))

jest.useFakeTimers()

const mockedUseExtension = useExtension as jest.Mock
const consoleError = jest.spyOn(console, 'error').mockImplementation()

describe('basic usage', () => {
  it('should apply proper classes to proper handles', () => {
    const CSS_HANDLES = ['element1', 'element2']

    const { handles } = useCssHandles(CSS_HANDLES)

    expect(handles).toStrictEqual({
      element1: 'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass',
      element2: 'vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass',
    })
  })

  it('should not apply blockClasses if not available', () => {
    const CSS_HANDLES = ['element1', 'element2']

    mockedUseExtension.mockImplementationOnce(() => ({
      component: 'vtex.app@2.1.0',
      props: {},
    }))

    const { handles } = useCssHandles(CSS_HANDLES)

    expect(handles).toStrictEqual({
      element1: 'vtex-app-2-x-element1',
      element2: 'vtex-app-2-x-element2',
    })
  })

  it('make invalid class names be transformed to empty strings', () => {
    const CSS_HANDLES = ['element1', 'element-2', 'element+3', '4element']

    mockedUseExtension.mockImplementationOnce(() => ({
      component: 'vtex.app@2.1.0',
      props: {},
    }))

    const { handles } = useCssHandles(CSS_HANDLES)

    expect(handles).toStrictEqual({
      element1: 'vtex-app-2-x-element1',
      'element-2': 'vtex-app-2-x-element-2',
      'element+3': '',
      '4element': '',
    })
  })
})

describe('migration', () => {
  it('should add both the current app and the migration app', () => {
    const CSS_HANDLES = ['element1', 'element2']

    const { handles } = useCssHandles(CSS_HANDLES, {
      migrationFrom: 'vtex.previous-app@3.0.0',
    })

    expect(handles).toStrictEqual({
      element1:
        'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass vtex-previous-app-3-x-element1 vtex-previous-app-3-x-element1--blockClass',
      element2:
        'vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass vtex-previous-app-3-x-element2 vtex-previous-app-3-x-element2--blockClass',
    })
  })

  it('should add more than one migration if needed', () => {
    const CSS_HANDLES = ['element1', 'element2']

    const { handles } = useCssHandles(CSS_HANDLES, {
      migrationFrom: ['vtex.previous-app@2.0.0', 'vtex.previous-app@3.0.0'],
    })

    expect(handles).toStrictEqual({
      element1:
        'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass vtex-previous-app-2-x-element1 vtex-previous-app-2-x-element1--blockClass vtex-previous-app-3-x-element1 vtex-previous-app-3-x-element1--blockClass',
      element2:
        'vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass vtex-previous-app-2-x-element2 vtex-previous-app-2-x-element2--blockClass vtex-previous-app-3-x-element2 vtex-previous-app-3-x-element2--blockClass',
    })
  })

  it('doesnt repeat the migration if the current app happens to be the same as the migration one', () => {
    const CSS_HANDLES = ['element1', 'element2']

    const { handles } = useCssHandles(CSS_HANDLES, {
      migrationFrom: [
        'vtex.previous-app@2.0.0',
        'vtex.previous-app@3.0.0',
        'vtex.app@2.1.0',
      ],
    })

    expect(handles).toStrictEqual({
      element1:
        'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass vtex-previous-app-2-x-element1 vtex-previous-app-2-x-element1--blockClass vtex-previous-app-3-x-element1 vtex-previous-app-3-x-element1--blockClass',
      element2:
        'vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass vtex-previous-app-2-x-element2 vtex-previous-app-2-x-element2--blockClass vtex-previous-app-3-x-element2 vtex-previous-app-3-x-element2--blockClass',
    })
  })
})

describe('custom classes', () => {
  it('should override handles with passed custom classes', () => {
    const CSS_HANDLES = [
      'element1',
      'element2',
      'element3',
      'element4',
      'element5',
      'element6',
      'element7',
      'element8',
    ] as const

    const { handles } = useCssHandles(CSS_HANDLES, {
      classes: {
        element2: 'a',
        element3: ['b'],
        element4: { name: 'a' },
        element5: [{ name: 'a' }],
        element6: ['a', { name: 'b' }],
        element7: ['a', 'b'],
        element8: [{ name: 'a' }, { name: 'b' }],
        __useCustomClasses: SYMBOL_CUSTOM_CLASSES,
      },
    })

    expect(handles).toMatchObject({
      element1: 'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass',
      element2: 'a',
      element3: 'b',
      element4: 'a',
      element5: 'a',
      element6: 'a b',
      element7: 'a b',
      element8: 'a b',
    })
  })
})

describe('withModifiers', () => {
  beforeEach(() => {
    consoleError.mockClear()
    resetInvalidModifiers()
  })

  it('should work with no custom classes', () => {
    const CSS_HANDLES = ['handle1'] as const

    const { withModifiers } = useCssHandles(CSS_HANDLES)

    const singleMod = withModifiers('handle1', 'mod')
    const multiMod = withModifiers('handle1', ['mod', 'mod2'])
    // @ts-expect-error passing wrong param for tests
    const multiNullMod = withModifiers('handle1', ['mod', null, 'mod2'])

    expect(singleMod).toBe(
      'vtex-app-2-x-handle1 vtex-app-2-x-handle1--blockClass vtex-app-2-x-handle1--mod vtex-app-2-x-handle1--blockClass--mod'
    )
    expect(multiMod).toBe(
      'vtex-app-2-x-handle1 vtex-app-2-x-handle1--blockClass vtex-app-2-x-handle1--mod vtex-app-2-x-handle1--blockClass--mod vtex-app-2-x-handle1--mod2 vtex-app-2-x-handle1--blockClass--mod2'
    )
    expect(multiNullMod).toBe(
      'vtex-app-2-x-handle1 vtex-app-2-x-handle1--blockClass vtex-app-2-x-handle1--mod vtex-app-2-x-handle1--blockClass--mod vtex-app-2-x-handle1--mod2 vtex-app-2-x-handle1--blockClass--mod2'
    )
  })

  it('should not add an invalid modifier parameter', () => {
    const CSS_HANDLES = ['handle1'] as const

    const { withModifiers } = useCssHandles(CSS_HANDLES)

    const invalidModifierParam = 1
    // @ts-expect-error passing wrong param for test
    const result = withModifiers('handle1', invalidModifierParam)

    expect(consoleError).toHaveBeenCalledWith(
      'Invalid modifier type on `withModifier`. Please use either a string or an array of strings'
    )
    expect(result).toBe('vtex-app-2-x-handle1 vtex-app-2-x-handle1--blockClass')
  })

  it('should not add an invalid modifier value', async () => {
    const CSS_HANDLES = ['handle1'] as const

    const { withModifiers } = useCssHandles(CSS_HANDLES)

    const invalidModifierValue = 'i.n.v.a.l.i.d'
    const result = withModifiers('handle1', invalidModifierValue)

    jest.runAllTimers()

    expect(consoleError).toHaveBeenLastCalledWith(
      'Invalid CSS modifiers. All modifiers should be strings, and only contain letters, numbers, or -. Found: i.n.v.a.l.i.d'
    )
    expect(result).toBe('vtex-app-2-x-handle1 vtex-app-2-x-handle1--blockClass')
  })

  it('should apply modifiers only on custom classes with applyModifiers', () => {
    const CSS_HANDLES = ['handle1', 'handle2', 'handle3'] as const

    const { withModifiers } = useCssHandles(CSS_HANDLES, {
      classes: {
        handle1: 'customClass',
        handle2: [
          'customClass',
          { name: 'anotherClass', applyModifiers: true },
        ],
        handle3: { name: 'customClass', applyModifiers: true },
        __useCustomClasses: SYMBOL_CUSTOM_CLASSES,
      },
    })

    const handle1 = withModifiers('handle1', 'mod')
    const handle2 = withModifiers('handle2', 'mod')
    const handle3 = withModifiers('handle3', 'mod')

    expect(handle1).toBe('customClass')
    expect(handle2).toBe('customClass anotherClass anotherClass--mod')
    expect(handle3).toBe('customClass customClass--mod')
  })

  it('should apply modifier on all passed classes in the same name', () => {
    const CSS_HANDLES = ['handle1', 'handle2', 'handle3'] as const

    const { withModifiers } = useCssHandles(CSS_HANDLES, {
      classes: {
        handle1: { name: 'customClass1 customClass2', applyModifiers: true },
        __useCustomClasses: SYMBOL_CUSTOM_CLASSES,
      },
    })

    const handle1 = withModifiers('handle1', 'mod')

    expect(handle1).toBe(
      'customClass1 customClass2 customClass1--mod customClass2--mod'
    )
  })
})

```


[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 css-handles/react/__tests__/createCssHandlesContext.test.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'

import { SYMBOL_CUSTOM_CLASSES } from '../useCustomClasses'
import Root from '../__fixtures__/Root'

jest.mock('../hooks/useExtension', () => ({
  useExtension: jest.fn(() => ({
    component: 'vtex.app@2.1.0',
  })),
}))

test('should create nested CSS Handles', () => {
  const { container } = render(<Root />)

  const rootElement = container.querySelector('.vtex-app-2-x-root')
  const nestedElement = container.querySelector('.vtex-app-2-x-nested')

  expect(rootElement).toBeInTheDocument()
  expect(nestedElement).toBeInTheDocument()
})

test('should work with custom classes', () => {
  const { container } = render(
    <Root
      classes={{
        root: 'customRoot',
        __useCustomClasses: SYMBOL_CUSTOM_CLASSES,
      }}
    />
  )

  const rootElement = container.querySelector('.customRoot')
  const nestedElement = container.querySelector('.vtex-app-2-x-nested')

  expect(rootElement).toBeInTheDocument()
  expect(nestedElement).toBeInTheDocument()
})

```


[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 css-handles/react/__tests__/applyModifiers.test.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```tsx
import applyModifiers from '../applyModifiers'

jest.spyOn(console, 'error').mockImplementation()

describe('applyModifier', () => {
  it('should apply a single modifier properly', () => {
    const handle = 'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass'
    const modifier = 'test'

    const modified = applyModifiers(handle, modifier)

    expect(modified).toBe(
      'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass vtex-app-2-x-handle--test vtex-app-2-x-handle--blockClass--test'
    )
  })
  it('should apply multiple modifiers properly', () => {
    const handle = 'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass'
    const modifiers = ['test', 'test2']

    const modified = applyModifiers(handle, modifiers)

    expect(modified).toBe(
      'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass vtex-app-2-x-handle--test vtex-app-2-x-handle--blockClass--test vtex-app-2-x-handle--test2 vtex-app-2-x-handle--blockClass--test2'
    )
  })
  it('should not apply modifier if its not a string', () => {
    const handle = 'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass'
    const modifier = 0 as any

    const modified = applyModifiers(handle, modifier)

    expect(modified).toBe('vtex-app-2-x-handle vtex-app-2-x-handle--blockClass')
  })

  describe('validation', () => {
    it('should refrain from applying a modifier from an array if its not a string', () => {
      const handle = 'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass'
      const modifiers = ['ok', 0, null] as any

      const modified = applyModifiers(handle, modifiers)

      expect(modified).toBe(
        'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass vtex-app-2-x-handle--ok vtex-app-2-x-handle--blockClass--ok'
      )
    })
    it('should not apply a modifier with spaces, should allow with dashes', () => {
      const handle = 'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass'
      const modifiers = ['ok', 'test 1', 'test-2', 'test\t3', 'test\n4']

      const modified = applyModifiers(handle, modifiers)

      expect(modified).toBe(
        'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass vtex-app-2-x-handle--ok vtex-app-2-x-handle--blockClass--ok vtex-app-2-x-handle--test-2 vtex-app-2-x-handle--blockClass--test-2'
      )
    })
    it('should not apply a modifier if its empty', () => {
      const handle = 'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass'
      const modifiers = ['ok', '', '\t', ' ']

      const modified = applyModifiers(handle, modifiers)

      expect(modified).toBe(
        'vtex-app-2-x-handle vtex-app-2-x-handle--blockClass vtex-app-2-x-handle--ok vtex-app-2-x-handle--blockClass--ok'
      )
    })
  })
})

```


[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 css-handles/react/__tests__/useCustomClasses.test.ts from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { renderHook } from '@vtex/test-tools/react'

import useCustomClasses, { SYMBOL_CUSTOM_CLASSES } from '../useCustomClasses'

test('returns the same object keyed with "__useCustomClasses"', () => {
  const obj = {
    container: 'potato-container',
    wrapper: [{ name: 'wrapper' }, 'wrapper--potato'],
    item: { name: 'item' },
  }

  const callback = jest.fn(() => ({ ...obj }))

  const { result } = renderHook(() => {
    return useCustomClasses(callback)
  })

  expect(result.current.__useCustomClasses).toBe(SYMBOL_CUSTOM_CLASSES)
  expect(result.current).toMatchObject(obj)
  expect(callback).toHaveBeenCalledTimes(1)
})

test('memoizes the result with no dependencies', () => {
  const obj = {
    container: 'potato-container',
    wrapper: [{ name: 'wrapper' }, 'wrapper--potato'],
    item: { name: 'item' },
  }

  const callback = jest.fn(() => ({ ...obj }))

  const { rerender } = renderHook(() => {
    return useCustomClasses(callback)
  })

  rerender()
  rerender()

  expect(callback).toHaveBeenCalledTimes(1)
})

test('returns new object when dependencies change', () => {
  const obj = {
    container: 'potato-container',
    wrapper: [{ name: 'wrapper' }, 'wrapper--potato'],
    item: { name: 'item' },
  }

  let dependency = 'foo'

  const callback = jest.fn(() => ({ ...obj }))

  const { rerender } = renderHook(() => {
    return useCustomClasses(callback, [dependency])
  })

  expect(callback).toHaveBeenCalledTimes(1)
  rerender()

  dependency = 'bar'

  rerender()
  expect(callback).toHaveBeenCalledTimes(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 css-handles/react/__tests__/withCssHandles.test.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { render } from '@vtex/test-tools/react'

import withCssHandles from '../withCssHandles'
import { useExtension } from '../hooks/useExtension'
import type {
  CssHandlesList,
  CssHandlesBag,
  CssHandlesOptions,
} from '../CssHandlesTypes'

jest.mock('../hooks/useExtension', () => ({
  useExtension: jest.fn(() => ({
    component: 'vtex.app@2.1.0',
    props: {
      blockClass: 'blockClass',
    },
  })),
}))

describe('withCssHandles', () => {
  const renderComponent = (
    handlesNames: CssHandlesList,
    options?: CssHandlesOptions<any>
  ) => {
    type InternalProps = CssHandlesBag<typeof handlesNames>

    const ExampleComponent: FC<InternalProps> = ({ handles }) => {
      return (
        <div
          data-testid="test-div"
          className={Object.values(handles).join(' ')}
        />
      )
    }

    const EnhancedComponent = withCssHandles<typeof handlesNames>(
      handlesNames,
      options
    )(ExampleComponent)

    return render(<EnhancedComponent />)
  }

  it('should apply proper classes to proper handles', () => {
    const CSS_HANDLES = ['element1', 'element2'] as const
    const { getByTestId } = renderComponent(CSS_HANDLES)

    expect(getByTestId('test-div').className).toBe(
      'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass'
    )
  })

  it('should not apply blockClasses if not available', () => {
    const CSS_HANDLES = ['element1', 'element2'] as const

    ;(useExtension as any).mockImplementationOnce(() => ({
      component: 'vtex.app@2.1.0',
      props: {},
    }))

    const { getByTestId } = renderComponent(CSS_HANDLES)

    expect(getByTestId('test-div').className).toBe(
      'vtex-app-2-x-element1 vtex-app-2-x-element2'
    )
  })

  describe('migration', () => {
    it('should add both the current app and the migration app', () => {
      const CSS_HANDLES = ['element1', 'element2']
      const options = {
        migrationFrom: 'vtex.previous-app@3.0.0',
      }

      const { getByTestId } = renderComponent(CSS_HANDLES, options)

      expect(getByTestId('test-div').className).toBe(
        'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass vtex-previous-app-3-x-element1 vtex-previous-app-3-x-element1--blockClass vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass vtex-previous-app-3-x-element2 vtex-previous-app-3-x-element2--blockClass'
      )
    })

    it('should add more than one migration if needed', () => {
      const CSS_HANDLES = ['element1', 'element2']
      const options = {
        migrationFrom: ['vtex.previous-app@2.0.0', 'vtex.previous-app@3.0.0'],
      }

      const { getByTestId } = renderComponent(CSS_HANDLES, options)

      expect(getByTestId('test-div').className).toBe(
        'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass vtex-previous-app-2-x-element1 vtex-previous-app-2-x-element1--blockClass vtex-previous-app-3-x-element1 vtex-previous-app-3-x-element1--blockClass vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass vtex-previous-app-2-x-element2 vtex-previous-app-2-x-element2--blockClass vtex-previous-app-3-x-element2 vtex-previous-app-3-x-element2--blockClass'
      )
    })

    it('doesnt repeat the migration if the current app happens to be the same as the migration one', () => {
      const CSS_HANDLES = ['element1', 'element2']
      const options = {
        migrationFrom: [
          'vtex.previous-app@2.0.0',
          'vtex.previous-app@3.0.0',
          'vtex.app@2.1.0',
        ],
      }

      const { getByTestId } = renderComponent(CSS_HANDLES, options)

      expect(getByTestId('test-div').className).toBe(
        'vtex-app-2-x-element1 vtex-app-2-x-element1--blockClass vtex-previous-app-2-x-element1 vtex-previous-app-2-x-element1--blockClass vtex-previous-app-3-x-element1 vtex-previous-app-3-x-element1--blockClass vtex-app-2-x-element2 vtex-app-2-x-element2--blockClass vtex-previous-app-2-x-element2 vtex-previous-app-2-x-element2--blockClass vtex-previous-app-3-x-element2 vtex-previous-app-3-x-element2--blockClass'
      )
    })
  })
})

```


[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 css-handles/react/hooks/useExtension.tsx from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```tsx
// @ts-expect-error - private API
import { useRuntime, useTreePath } from 'vtex.render-runtime'

/** This code has been copied and adapted from vtex.render-runtime,
 * while it doesn't export this hook */

function mountTreePath(base: string, children: string[]) {
  return [base, ...children].filter((id) => !!id).join('/')
}

interface Options {
  children?: string[] | string
}

interface Extension {
  /* eslint-disable @typescript-eslint/no-explicit-any */
  props?: Record<string, any>
  component?: string
  [key: string]: any
}

export const useExtension = ({ children }: Options = {}): Extension | null => {
  // @ts-expect-error - private API
  const { extensions } = useRuntime()

  const { treePath: baseTreePath } = useTreePath()

  const treePath = children
    ? mountTreePath(
        baseTreePath,
        Array.isArray(children) ? children : [children]
      )
    : baseTreePath

  const extension = treePath && extensions[treePath]

  return (extension as Extension) || null
}

```


[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 css-handles/react/modules/customClasses.ts from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { CustomClassValue } from '../CssHandlesTypes'

export type ComputedCustomClass = {
  toApplyModifiers: string[]
  classNames: string[]
}

export function computeCustomClassValue(customClass: CustomClassValue) {
  customClass = Array.isArray(customClass) ? customClass : [customClass]

  return customClass.filter(Boolean).reduce<ComputedCustomClass>(
    (acc, className) => {
      if (typeof className === 'string') {
        acc.classNames.push(className)

        return acc
      }

      const names = className.name.split(' ')

      acc.classNames.push(...names)

      if (className.applyModifiers) {
        acc.toApplyModifiers.push(...names)
      }

      return acc
    },
    { toApplyModifiers: [], classNames: [] }
  )
}

```


[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 css-handles/react/modules/modifier.ts from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```typescript
const INVALID_MODIFIER_PATTERN = /[^A-z0-9-]/

const MODIFIER_ERROR_LOG_DELAY = 3000

/** Simplified debounce */
function debounce(fn: () => void, delay: number) {
  let timeout: NodeJS.Timeout | undefined

  return () => {
    if (timeout) {
      clearTimeout(timeout)
      timeout = undefined
    }

    timeout = setTimeout(fn, delay)
  }
}

type InvalidModifier = unknown

const invalidModifiers = new Set<InvalidModifier>([])

// Useful for testing purposes
export const resetInvalidModifiers = () => {
  invalidModifiers.clear()
}

const displayModifierErrors = debounce(() => {
  console.error(
    `Invalid CSS modifiers. All modifiers should be strings, and only contain letters, numbers, or -. Found: ${Array.from(
      invalidModifiers.values()
    ).join(', ')}`
  )
  invalidModifiers.clear()
}, MODIFIER_ERROR_LOG_DELAY)

/** Accumulates modifier errors to log them on a single error,
 * rather than a potentially huge wall of errors.
 */
function logModifierError(modifier: InvalidModifier) {
  if (process.env.NODE_ENV === 'production') {
    return
  }

  invalidModifiers.add(modifier)
  displayModifierErrors()
}

export const validateModifier = (modifier: string) => {
  if (typeof modifier !== 'string') {
    logModifierError(modifier)

    return false
  }

  /* This is not an error, so doesn't log any message, but should
   * invalidate the current modifier and not include it */
  if (modifier === '') {
    return false
  }

  if (INVALID_MODIFIER_PATTERN.test(modifier)) {
    logModifierError(modifier)

    return false
  }

  return true
}

```


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

[User] Show me the implementation of minicart/messages/sl.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini košarica",
  "admin/editor.minicart.description": "Enostavna mini košarica, ki kaže vse izdelke, ki ste jih dodali notri",
  "admin/editor.minicart.showDiscount.title": "Kaže količino prihranjenega denarja",
  "admin/editor.minicart.iconLabel.title": "Besedilo, ki se pokaže zraven ikone",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Besedilo, ki se prikaže, ko je mini košarica prazna",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Povezava za preusmeritev, ko kliknete na gumb Pojdi na plačilo",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Besedilo, ki se prikaže v gumbu zaključi nakupovanje",
  "admin/editor.minicart.showShippingCost.title": "Kaže stroške odpošiljanja nad nogo",
  "admin/editor.minicart.type.title": "Vrsta mini košarice",
  "admin/editor.minicart.type.popup": "Pojavno",
  "admin/editor.minicart.type.sidebar": "Stranska vrstica",
  "store/finish-shopping-button-label": "Pojdite na plačilo",
  "store/minicart-empty": "Vaša košarica je prazna!",
  "store/sidebar-title": "Moja mini košarica",
  "store/minicart-content-footer-discount": "Shrani",
  "store/minicart.error-removal": "Odstranjevanje izdelka ni uspelo, poskusite znova",
  "store/minicart.shipping-cost": "Skupni stroški odpošiljanja",
  "store/minicart.checkout-failure": "Nekaj je šlo narobe. Poskusite znova.",
  "store/minicart.go-to-checkout": "Pojdite na plačilo",
  "store/minicart.empty-state": "Vaša košarica je prazna.",
  "store/minicart.title": "Košarica"
}

```


[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 minicart/messages/hu.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini kosár",
  "admin/editor.minicart.description": "Egyszerű mini kosár, amely megjeleníti az összes hozzáadott terméket",
  "admin/editor.minicart.showDiscount.title": "A megtakarított összeg megjelenítése",
  "admin/editor.minicart.iconLabel.title": "Az ikon mellett megjelenő szöveg",
  "admin/editor.minicart.labelMiniCartEmpty.title": "A szöveg akkor jelenik meg, ha a mini kosár üres",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Az átirányításra mutató hivatkozás az Ugrás a pénztárhoz gombra kattintást követően",
  "admin/editor.minicart.labelButtonFinishShopping.title": "A vásárlás befejezése gombban megjelenő szöveg",
  "admin/editor.minicart.showShippingCost.title": "A szállítási költség megjelenítése a lábléc felett",
  "admin/editor.minicart.type.title": "Mini kosár típusa",
  "admin/editor.minicart.type.popup": "Előugró ablak",
  "admin/editor.minicart.type.sidebar": "Oldalsáv",
  "store/finish-shopping-button-label": "Ugrás a pénztárhoz",
  "store/minicart-empty": "A kosár üres!",
  "store/sidebar-title": "Saját mini kosár",
  "store/minicart-content-footer-discount": "Mentés",
  "store/minicart.error-removal": "A tétel eltávolítása sikertelen, próbálja újra",
  "store/minicart.shipping-cost": "Teljes szállítási költség",
  "store/minicart.checkout-failure": "Hiba történt. Próbálja újra.",
  "store/minicart.go-to-checkout": "Ugrás a pénztárhoz",
  "store/minicart.empty-state": "A kosár üres.",
  "store/minicart.title": "Kosár"
}

```


[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 minicart/messages/nl.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini winkelwagen",
  "admin/editor.minicart.description": "Een eenvoudige mini winkelwagen die alle producten laat zien die eraan zijn toegevoegd",
  "admin/editor.minicart.showDiscount.title": "Toon de hoeveelheid gespaard geld",
  "admin/editor.minicart.iconLabel.title": "Tekst die naast het pictogram moet verschijnen",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Tekst die moet verschijnen als de mini cart leeg is",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link naar omleiding nadat u op de knop ga naar afrekenen hebt geklikt",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Tekst die moet verschijnen in de knop winkelen voltooien",
  "admin/editor.minicart.showShippingCost.title": "Toon de verzendkosten boven de voettekst",
  "admin/editor.minicart.type.title": "Type mini winkelwagen",
  "admin/editor.minicart.type.popup": "Popup",
  "admin/editor.minicart.type.sidebar": "Sidebar",
  "store/finish-shopping-button-label": "Ga naar de kassa",
  "store/minicart-empty": "Uw winkelwagen is leeg!",
  "store/sidebar-title": "Mijn mini winkelwagen",
  "store/minicart-content-footer-discount": "Opslaan",
  "store/minicart.error-removal": "Itemverwijdering is mislukt, probeer het opnieuw",
  "store/minicart.shipping-cost": "Totale verzendkosten",
  "store/minicart.checkout-failure": "Er is iets misgegaan. Probeer het nog eens.",
  "store/minicart.go-to-checkout": "Ga naar de kassa",
  "store/minicart.empty-state": "Uw winkelwagen is leeg.",
  "store/minicart.title": "Winkelwagen"
}

```


[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 minicart/messages/ja.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "ミニカート",
  "admin/editor.minicart.description": "追加されたすべての製品を表示するシンプルなミニカート",
  "admin/editor.minicart.showDiscount.title": "節約できた金額を表示する",
  "admin/editor.minicart.iconLabel.title": "アイコンの隣に表示されるテキスト",
  "admin/editor.minicart.labelMiniCartEmpty.title": "ミニカートが空の時に表示されるテキスト",
  "admin/editor.minicart.linkButtonFinishShopping.title": "[チェックアウトに進む] ボタンをクリックしたときのリダイレクト先リンク",
  "admin/editor.minicart.labelButtonFinishShopping.title": "買い物を終えるボタンの中で表示されるテキスト",
  "admin/editor.minicart.showShippingCost.title": "フッターの上に発送コストを表示する",
  "admin/editor.minicart.type.title": "ミニカートタイプ",
  "admin/editor.minicart.type.popup": "ポップアップ",
  "admin/editor.minicart.type.sidebar": "サイドバー",
  "store/finish-shopping-button-label": "チェックアウトに進む",
  "store/minicart-empty": "カートは空です！",
  "store/sidebar-title": "マイミニカート",
  "store/minicart-content-footer-discount": "保存",
  "store/minicart.error-removal": "項目を削除できませんでした。もう一度やり直してください",
  "store/minicart.shipping-cost": "合計発送コスト",
  "store/minicart.checkout-failure": "エラーが発生しました。もう一度やり直してください。",
  "store/minicart.go-to-checkout": "チェックアウトに進む",
  "store/minicart.empty-state": "カートは空です。",
  "store/minicart.title": "カート"
}

```


[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 minicart/messages/de.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini-Wagen",
  "admin/editor.minicart.description": "Ein einfacher Mini-Wagen, der alle hinzugefügten Produkte anzeigt",
  "admin/editor.minicart.showDiscount.title": "Zeigen Sie die Menge des gesparten Geldes an",
  "admin/editor.minicart.iconLabel.title": "Text, der neben dem Symbol erscheint",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Text, der erscheint, wenn der Mini-Wagen leer ist",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link zur Weiterleitung nach Klicken auf die Schaltfläche Zur Kasse gehen",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Text, der in der Schaltfläche Einkauf beenden erscheint",
  "admin/editor.minicart.showShippingCost.title": "Die Versandkosten über der Fußzeile anzeigen",
  "admin/editor.minicart.type.title": "Mini-Wagentyp",
  "admin/editor.minicart.type.popup": "Pop Up",
  "admin/editor.minicart.type.sidebar": "Seitenleiste",
  "store/finish-shopping-button-label": "Zur Kasse gehen",
  "store/minicart-empty": "Ihr Einkaufswagen ist leer!",
  "store/sidebar-title": "Mein Mini-Wagen",
  "store/minicart-content-footer-discount": "Speichern",
  "store/minicart.error-removal": "Das Entfernen des Artikels ist fehlgeschlagen, bitte versuchen Sie es erneut",
  "store/minicart.shipping-cost": "Gesamte Versandkosten",
  "store/minicart.checkout-failure": "Etwas ist schief gelaufen, bitte versuchen Sie es später noch einmal.",
  "store/minicart.go-to-checkout": "Zur Kasse gehen",
  "store/minicart.empty-state": "Ihr Einkaufswagen ist leer.",
  "store/minicart.title": "Einkaufswagen"
}

```


[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 minicart/messages/ru.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Мини-корзина",
  "admin/editor.minicart.description": "Простая мини-корзина, в которой показаны все товары",
  "admin/editor.minicart.showDiscount.title": "Показать количество сэкономленных денег",
  "admin/editor.minicart.iconLabel.title": "Текст, который появляется рядом со значком",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Текст, который появляется, когда мини-корзина пуста",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Ссылка для переадресации после нажатия кнопки Перейти к оформлению заказа",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Текст, который будет отображаться на кнопке завершения покупки",
  "admin/editor.minicart.showShippingCost.title": "Показать стоимость доставки выше нижнего колонтитула",
  "admin/editor.minicart.type.title": "Тип мини-корзины",
  "admin/editor.minicart.type.popup": "Всплывающее окно",
  "admin/editor.minicart.type.sidebar": "Боковая панель",
  "store/finish-shopping-button-label": "Перейти к оформлению заказа",
  "store/minicart-empty": "Ваша корзина пуста!",
  "store/sidebar-title": "Моя мини-корзина",
  "store/minicart-content-footer-discount": "Сохранить",
  "store/minicart.error-removal": "Не удалось удалить товар. Повторите попытку",
  "store/minicart.shipping-cost": "Общая стоимость доставки",
  "store/minicart.checkout-failure": "Что-то пошло не так. Пожалуйста, попробуйте еще раз.",
  "store/minicart.go-to-checkout": "Перейти к оформлению заказа",
  "store/minicart.empty-state": "Ваша корзина пуста.",
  "store/minicart.title": "Корзина"
}

```


[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 minicart/messages/pl.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini koszyk",
  "admin/editor.minicart.description": "Prosty mini koszyk, który pokazuje wszystkie produkty dodane do niego",
  "admin/editor.minicart.showDiscount.title": "Pokaż sumę zaoszczędzonych pieniędzy",
  "admin/editor.minicart.iconLabel.title": "Tekst pojawiający się obok ikony",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Tekst pojawiający się, gdy mini koszyk jest pusty",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link do przekierowania po kliknięciu przycisku Idź do kasy",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Tekst pojawiający się w przycisku zakończ zakupy",
  "admin/editor.minicart.showShippingCost.title": "Pokaż koszt wysyłki powyżej stopki",
  "admin/editor.minicart.type.title": "Typ mini koszyka",
  "admin/editor.minicart.type.popup": "Wyskakujące okno",
  "admin/editor.minicart.type.sidebar": "Pasek boczny",
  "store/finish-shopping-button-label": "Idź do kasy",
  "store/minicart-empty": "Twój koszyk jest pusty!",
  "store/sidebar-title": "Mój mini koszyk",
  "store/minicart-content-footer-discount": "Zapisz",
  "store/minicart.error-removal": "Niepowodzenie usunięcia pozycji, spróbuj ponownie",
  "store/minicart.shipping-cost": "Ogólny koszt wysyłki",
  "store/minicart.checkout-failure": "Coś poszło nie tak. Spróbuj ponownie.",
  "store/minicart.go-to-checkout": "Idź do kasy",
  "store/minicart.empty-state": "Twój koszyk jest pusty.",
  "store/minicart.title": "Koszyk"
}

```


[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 minicart/messages/uk.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Міні-кошик",
  "admin/editor.minicart.description": "Невеличкий міні-кошик, який показує всі додані продукти",
  "admin/editor.minicart.showDiscount.title": "Показує кількість зекономлених грошей",
  "admin/editor.minicart.iconLabel.title": "Текст, який з’явиться поруч із піктограмою",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Текст, який з’являється, коли міні-кошик порожній",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Посилання для переадресації після натискання кнопки Перейти до оформлення замовлення",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Текст, який відображатиметься у кнопці завершення покупки",
  "admin/editor.minicart.showShippingCost.title": "Показати вартість доставки вище нижнього колонтитулу",
  "admin/editor.minicart.type.title": "Тип міні-кошика",
  "admin/editor.minicart.type.popup": "Спливаючий",
  "admin/editor.minicart.type.sidebar": "Бічна панель",
  "store/finish-shopping-button-label": "Перейти до оформлення замовлення",
  "store/minicart-empty": "Ваш кошик порожній!",
  "store/sidebar-title": "Мій міні-кошик",
  "store/minicart-content-footer-discount": "Зберегти",
  "store/minicart.error-removal": "Видалення елемента не відбулося. Повторіть спробу",
  "store/minicart.shipping-cost": "Загальна вартість доставки",
  "store/minicart.checkout-failure": "Щось пішло не так, будь ласка, спробуйте ще раз.",
  "store/minicart.go-to-checkout": "Перейти до оформлення замовлення",
  "store/minicart.empty-state": "Ваш кошик порожній.",
  "store/minicart.title": "Кошик"
}

```


[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 minicart/messages/fi.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Miniostoskori",
  "admin/editor.minicart.description": "Yksinkertainen miniostoskori, joka näyttää kaikki siihen lisätyt tuotteet",
  "admin/editor.minicart.showDiscount.title": "Näytä säästetyn rahan määrä",
  "admin/editor.minicart.iconLabel.title": "Kuvakkeen vieressä näkyvä teksti",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Teksti, joka näkyy miniostoskorin ollessa tyhjä",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Linkki, joka uudelleenohjaa, kun Siirry maksamaan -painiketta napsautetaan",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Valmis-painikkeessa näkyvä teksti",
  "admin/editor.minicart.showShippingCost.title": "Näytä toimituskulu alatunnisteen yläpuolella",
  "admin/editor.minicart.type.title": "Miniostoskorin tyyppi",
  "admin/editor.minicart.type.popup": "Ponnahdusikkuna",
  "admin/editor.minicart.type.sidebar": "Sivupalkki",
  "store/finish-shopping-button-label": "Siirry kassalle",
  "store/minicart-empty": "Ostoskorisi on tyhjä!",
  "store/sidebar-title": "Oma miniostoskorini",
  "store/minicart-content-footer-discount": "Tallenna",
  "store/minicart.error-removal": "Tuotteen poistaminen epäonnistui, yritä uudelleen",
  "store/minicart.shipping-cost": "Toimituskulu yhteensä",
  "store/minicart.checkout-failure": "Jotain meni vikaan. Yritä uudelleen.",
  "store/minicart.go-to-checkout": "Siirry kassalle",
  "store/minicart.empty-state": "Ostoskorisi on tyhjä.",
  "store/minicart.title": "Ostoskori"
}

```


[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 minicart/messages/sk.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini košík",
  "admin/editor.minicart.description": "Jednoduchý malý vozík, ktorý zobrazuje všetky pridané produkty",
  "admin/editor.minicart.showDiscount.title": "Zobraziť ušetrené peniaze",
  "admin/editor.minicart.iconLabel.title": "Text sa zobrazí vedľa ikony",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Text, ktorý sa objaví, keď je mini košík prázdny",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Odkaz na presmerovanie po kliknutí na tlačidlo Prejsť k pokladni",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Text sa zobrazí v tlačidle dokončenia nákupu",
  "admin/editor.minicart.showShippingCost.title": "Zobraziť prepravné náklady nad pätou strany",
  "admin/editor.minicart.type.title": "Typ mini košíka",
  "admin/editor.minicart.type.popup": "Vyskakovacie okno",
  "admin/editor.minicart.type.sidebar": "Bočný panel",
  "store/finish-shopping-button-label": "Prejsť k pokladni",
  "store/minicart-empty": "Váš košík je prázdny!",
  "store/sidebar-title": "Môj mini košík",
  "store/minicart-content-footer-discount": "Uložiť",
  "store/minicart.error-removal": "Odstránenie položky zlyhalo, skúste to znova",
  "store/minicart.shipping-cost": "Celkové náklady na dopravu",
  "store/minicart.checkout-failure": "Niečo sa nepodarilo. Skúste to znova.",
  "store/minicart.go-to-checkout": "Prejsť k pokladni",
  "store/minicart.empty-state": "Váš košík je prázdny.",
  "store/minicart.title": "Košík"
}

```


[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 minicart/messages/pt.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Carrinho de compras",
  "admin/editor.minicart.description": "Um carrinho de compras que mostra todos os produtos adicionados a ele",
  "admin/editor.minicart.showDiscount.title": "Mostrar a quantidade de dinheiro economizado",
  "admin/editor.minicart.iconLabel.title": "Texto que irá aparecer ao lado do ícone",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Texto que irá aparecer quando o carrinho estiver vazio",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link de redirecionamento ao clicar no botão de finalizar compra",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Texto que irá aparecer no botão de finalizar compra",
  "admin/editor.minicart.showShippingCost.title": "Mostrar o valor do frete",
  "admin/editor.minicart.type.title": "Tipo de carrinho de compras",
  "admin/editor.minicart.type.popup": "Pop up",
  "admin/editor.minicart.type.sidebar": "Barra lateral",
  "store/finish-shopping-button-label": "Finalizar compra",
  "store/minicart-empty": "Seu carrinho está vazio!",
  "store/sidebar-title": "Meu carrinho",
  "store/minicart-content-footer-discount": "Economize",
  "store/minicart.error-removal": "Erro ao remover o item. Por favor, tente novamente.",
  "store/minicart.shipping-cost": "Valor do frete",
  "store/minicart.checkout-failure": "Algo deu errado. Por favor, tente novamente.",
  "store/minicart.go-to-checkout": "Ir para o checkout",
  "store/minicart.empty-state": "Seu carrinho está vazio.",
  "store/minicart.title": "Carrinho"
}

```


[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 minicart/messages/en.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini Cart",
  "admin/editor.minicart.description": "A simple mini cart that shows all products added to it",
  "admin/editor.minicart.showDiscount.title": "Show the quantity of saved money",
  "admin/editor.minicart.iconLabel.title": "Text to appear next to the icon",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Text to appear when the mini cart is empty",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link to redirect after clicking in the Go to Checkout button",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Text to appear in the finish shopping button",
  "admin/editor.minicart.showShippingCost.title": "Show the shipping cost above footer",
  "admin/editor.minicart.type.title": "Mini Cart Type",
  "admin/editor.minicart.type.popup": "Pop Up",
  "admin/editor.minicart.type.sidebar": "Sidebar",
  "store/finish-shopping-button-label": "Go to checkout",
  "store/minicart-empty": "Your cart is empty!",
  "store/sidebar-title": "My mini cart",
  "store/minicart-content-footer-discount": "Save",
  "store/minicart.error-removal": "Item removal failed, please try again",
  "store/minicart.shipping-cost": "Total shipping cost",
  "store/minicart.checkout-failure": "Something went wrong. Please, try again.",
  "store/minicart.go-to-checkout": "Go to checkout",
  "store/minicart.empty-state": "Your cart is empty.",
  "store/minicart.title": "Cart"
}

```


[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 minicart/messages/it.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini Carrello",
  "admin/editor.minicart.description": "Un semplice mini carrello che mostra tutti i prodotti aggiunti",
  "admin/editor.minicart.showDiscount.title": "Mostra l'ammontare del denaro risparmiato",
  "admin/editor.minicart.iconLabel.title": "Testo che appare accanto all'icona",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Testo che appare quando il mini carrello è vuoto",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link di reindirizzamento quando si clicca sul tasto \"Vai al checkout\"",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Testo da visualizzare sul tasto \"Termina l'acquisto\"",
  "admin/editor.minicart.showShippingCost.title": "Mostra i costi di spedizione sopra al piè di pagina",
  "admin/editor.minicart.type.title": "Tipo di Mini Carrello",
  "admin/editor.minicart.type.popup": "Pop Up",
  "admin/editor.minicart.type.sidebar": "Barra laterale",
  "store/finish-shopping-button-label": "Vai alla cassa",
  "store/minicart-empty": "Il tuo carrello è vuoto!",
  "store/sidebar-title": "Il mio mini carrello",
  "store/minicart-content-footer-discount": "Salvare",
  "store/minicart.error-removal": "Rimozione dell'articolo non riuscita, si prega di riprovare",
  "store/minicart.shipping-cost": "Costo totale della spedizione",
  "store/minicart.checkout-failure": "Qualcosa è andato storto, si prega di riprovare.",
  "store/minicart.go-to-checkout": "Vai alla cassa",
  "store/minicart.empty-state": "Il tuo carrello è vuoto.",
  "store/minicart.title": "Carrello"
}

```


[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 minicart/messages/fr.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini panier",
  "admin/editor.minicart.description": "Un simple mini panier qui montre tous les produits qui y sont ajoutés",
  "admin/editor.minicart.showDiscount.title": "Afficher le montant économisé",
  "admin/editor.minicart.iconLabel.title": "Texte affiché à côté de l’icône",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Texte affiché lorsque le mini chariot est vide",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Lien de redirection après avoir cliqué sur le bouton Paiement",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Texte affiché avec le bouton Terminer les achats",
  "admin/editor.minicart.showShippingCost.title": "Afficher les frais d’expédition en bas de page",
  "admin/editor.minicart.type.title": "Type Mini panier",
  "admin/editor.minicart.type.popup": "Pop up",
  "admin/editor.minicart.type.sidebar": "Barre latérale",
  "store/finish-shopping-button-label": "Payer",
  "store/minicart-empty": "Votre panier est vide !",
  "store/sidebar-title": "Mon mini panier",
  "store/minicart-content-footer-discount": "Enregistrer",
  "store/minicart.error-removal": "Le retrait de l’article a échoué, veuillez réessayer",
  "store/minicart.shipping-cost": "Total des frais de port",
  "store/minicart.checkout-failure": "Tentative échouée. Veuillez réessayez.",
  "store/minicart.go-to-checkout": "Payer",
  "store/minicart.empty-state": "Votre panier est vide.",
  "store/minicart.title": "Panier"
}

```


[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 minicart/messages/el.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Μίνι Καλάθι",
  "admin/editor.minicart.description": "Απλό μίνι καλάθι που δείχνει όλα τα προϊόντα που προστίθενται σε αυτό",
  "admin/editor.minicart.showDiscount.title": "Προβολή της ποσότητας αποταμιευμένων χρημάτων",
  "admin/editor.minicart.iconLabel.title": "Κείμενο που εμφανίζεται δίπλα στο εικονίδιο",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Κείμενο που εμφανίζεται όταν το μίνι καλάθι είναι άδειο",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Σύνδεσμος για ανακατεύθυνση αφού γίνει κλικ στο πλήκτρο Μετάβαση στην Ολοκλήρωση Αγοράς",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Κείμενο που εμφανίζεται στο πλήκτρο ολοκλήρωσης των αγορών",
  "admin/editor.minicart.showShippingCost.title": "Προβολή του κόστους αγορών πάνω από το υποσέλιδο",
  "admin/editor.minicart.type.title": "Τύπος Μίνι Καλαθιού",
  "admin/editor.minicart.type.popup": "Αναδυόμενο",
  "admin/editor.minicart.type.sidebar": "Πλευρική γραμμή",
  "store/finish-shopping-button-label": "Μεταβείτε στην ολοκλήρωση αγοράς",
  "store/minicart-empty": "Το καλάθι σας είναι άδειο!",
  "store/sidebar-title": "Το δικό μου μίνι καλάθι",
  "store/minicart-content-footer-discount": "Αποθήκευση",
  "store/minicart.error-removal": "Η αφαίρεση προϊόντος απέτυχε, δοκιμάστε ξανά",
  "store/minicart.shipping-cost": "Συνολικό κόστος αποστολής",
  "store/minicart.checkout-failure": "Κάτι πήγε στραβά. Δοκιμάστε ξανά.",
  "store/minicart.go-to-checkout": "Μεταβείτε στην ολοκλήρωση αγοράς",
  "store/minicart.empty-state": "Το καλάθι σας είναι άδειο.",
  "store/minicart.title": "Καλάθι"
}

```


[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 minicart/messages/bg.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Мини количка",
  "admin/editor.minicart.description": "Проста мини количка, която показва всички добавени в нея продукти",
  "admin/editor.minicart.showDiscount.title": "Показва сумата спестени пари",
  "admin/editor.minicart.iconLabel.title": "Текст, който се появява до иконата",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Текст, който се появява ако мини количката е празна",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Линк за пренасочване при натискане на бутона Преминаване към финализиране",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Текст, който се появява в бутона за завършване на покупката",
  "admin/editor.minicart.showShippingCost.title": "Показване на цената за доставка над долния колонтитул",
  "admin/editor.minicart.type.title": "Вид на мини количката",
  "admin/editor.minicart.type.popup": "Изскачащ",
  "admin/editor.minicart.type.sidebar": "Странична лента",
  "store/finish-shopping-button-label": "Преминаване към финализиране",
  "store/minicart-empty": "Вашата количка е празна!",
  "store/sidebar-title": "Моята мини количка",
  "store/minicart-content-footer-discount": "Запазване",
  "store/minicart.error-removal": "Неуспешно отстраняване на елемента. Моля, опитайте отново",
  "store/minicart.shipping-cost": "Обща стойност на доставката",
  "store/minicart.checkout-failure": "Нещо се обърка, моля, опитайте отново.",
  "store/minicart.go-to-checkout": "Преминаване към финализиране",
  "store/minicart.empty-state": "Вашата количка е празна.",
  "store/minicart.title": "Количка"
}

```


[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 minicart/messages/ro.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Mini Cart",
  "admin/editor.minicart.description": "Un mini cart simplu care afișează toate produsele adăugate în el",
  "admin/editor.minicart.showDiscount.title": "Arată cantitatea banilor economisiți",
  "admin/editor.minicart.iconLabel.title": "Text care să apară lângă iconiță",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Text care să apară când mini cart-ul este gol",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link pentru redirecționare după apăsarea butonului Go to Checkout",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Text care să apară în butonul Finish Shopping",
  "admin/editor.minicart.showShippingCost.title": "Arată costul de expediere deasupra textului de subsol",
  "admin/editor.minicart.type.title": "Tip Mini Cart",
  "admin/editor.minicart.type.popup": "Pop Up",
  "admin/editor.minicart.type.sidebar": "Bară laterală",
  "store/finish-shopping-button-label": "Finalizează comanda",
  "store/minicart-empty": "Coșul tău de cumpărături este gol!",
  "store/sidebar-title": "Mini cart-ul meu",
  "store/minicart-content-footer-discount": "Salvează",
  "store/minicart.error-removal": "E eșuat ștergerea articolului, te rugăm încearcă din nou",
  "store/minicart.shipping-cost": "Total costuri livrare",
  "store/minicart.checkout-failure": "A apărut o eroare. Te rugăm să încerci din nou.",
  "store/minicart.go-to-checkout": "Finalizează comanda",
  "store/minicart.empty-state": "Coșul tău de cumpărături este gol.",
  "store/minicart.title": "Coș de cumpărături"
}

```


[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 minicart/messages/ca.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Minicarretó",
  "admin/editor.minicart.description": "Un minicarretó senzill en què es mostren tots els productes que hi heu afegit",
  "admin/editor.minicart.showDiscount.title": "Mostra la quantitat de diners estalviats",
  "admin/editor.minicart.iconLabel.title": "Text que es mostra al costat de la icona",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Text que es mostra quan el minicarretó està buit",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Enllaç de redirecció després de fer clic al botó Ves a la caixa",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Text que es mostra al botó per finalitzar la compra",
  "admin/editor.minicart.showShippingCost.title": "Mostra el cost de l'enviament sobre el peu de pàgina",
  "admin/editor.minicart.type.title": "Tipus de minicarretó",
  "admin/editor.minicart.type.popup": "Emergent",
  "admin/editor.minicart.type.sidebar": "Barra lateral",
  "store/finish-shopping-button-label": "Ves a la caixa",
  "store/minicart-empty": "El carretó és buit",
  "store/sidebar-title": "El meu minicarretó",
  "store/minicart-content-footer-discount": "Desa",
  "store/minicart.error-removal": "No s'ha pogut suprimir l'element. Torneu-ho a provar.",
  "store/minicart.shipping-cost": "Cost de l'enviament total",
  "store/minicart.checkout-failure": "Alguna cosa no ha anat bé. Torneu-ho a provar.",
  "store/minicart.go-to-checkout": "Ves a la caixa",
  "store/minicart.empty-state": "El carretó és buit.",
  "store/minicart.title": "Carretó"
}

```


[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 minicart/messages/context.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "admin/editor.minicart.title",
  "admin/editor.minicart.description": "admin/editor.minicart.description",
  "admin/editor.minicart.showDiscount.title": "admin/editor.minicart.showDiscount.title",
  "admin/editor.minicart.iconLabel.title": "admin/editor.minicart.iconLabel.title",
  "admin/editor.minicart.labelMiniCartEmpty.title": "admin/editor.minicart.labelMiniCartEmpty.title",
  "admin/editor.minicart.linkButtonFinishShopping.title": "admin/editor.minicart.linkButtonFinishShopping.title",
  "admin/editor.minicart.labelButtonFinishShopping.title": "admin/editor.minicart.labelButtonFinishShopping.title",
  "admin/editor.minicart.showShippingCost.title": "admin/editor.minicart.showShippingCost.title",
  "admin/editor.minicart.type.title": "admin/editor.minicart.type.title",
  "admin/editor.minicart.type.popup": "admin/editor.minicart.type.popup",
  "admin/editor.minicart.type.sidebar": "admin/editor.minicart.type.sidebar",
  "store/finish-shopping-button-label": "store/finish-shopping-button-label",
  "store/minicart-empty": "store/minicart-empty",
  "store/sidebar-title": "store/sidebar-title",
  "store/minicart-content-footer-discount": "store/minicart-content-footer-discount",
  "store/minicart.error-removal": "store/minicart.error-removal",
  "store/minicart.shipping-cost": "store/minicart.shipping-cost",
  "store/minicart.checkout-failure": "Message showed when there is a problem to a request to the server.",
  "store/minicart.go-to-checkout": "Go to checkout",
  "store/minicart.empty-state": "store/cart.empty-state",
  "store/minicart.title": "store/cart.empty-state"
}

```


[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 minicart/messages/ko.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "미니 카트",
  "admin/editor.minicart.description": "추가된 모든 제품을 보여주는 간단한 미니 카트",
  "admin/editor.minicart.showDiscount.title": "저축 금액 표시",
  "admin/editor.minicart.iconLabel.title": "아이콘 옆에 표시할 텍스트",
  "admin/editor.minicart.labelMiniCartEmpty.title": "미니 카트가 비어있을 때 표시되는 텍스트",
  "admin/editor.minicart.linkButtonFinishShopping.title": "결제 화면으로 가기 버튼을 클릭한 후 리디렉션할 링크",
  "admin/editor.minicart.labelButtonFinishShopping.title": "쇼핑 완료 버튼에 표시할 텍스트",
  "admin/editor.minicart.showShippingCost.title": "푸터 위에 배송비 표시",
  "admin/editor.minicart.type.title": "미니 카트 유형",
  "admin/editor.minicart.type.popup": "팝업",
  "admin/editor.minicart.type.sidebar": "사이드바",
  "store/finish-shopping-button-label": "결제 화면으로 가기",
  "store/minicart-empty": "장바구니가 비어 있습니다!",
  "store/sidebar-title": "내 미니 카트",
  "store/minicart-content-footer-discount": "저장",
  "store/minicart.error-removal": "항목을 제거하지 못했습니다, 다시 시도하십시오",
  "store/minicart.shipping-cost": "총 배송비",
  "store/minicart.checkout-failure": "문제가 발생했습니다. 나중에 다시 시도하십시오.",
  "store/minicart.go-to-checkout": "결제 화면으로 가기",
  "store/minicart.empty-state": "장바구니가 비어 있습니다.",
  "store/minicart.title": "장바구니"
}

```


[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 minicart/messages/cs.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Minikošík",
  "admin/editor.minicart.description": "Jednoduchý minikošík, který zobrazuje všechny do něj přidané produkty",
  "admin/editor.minicart.showDiscount.title": "Zobrazit objem ušetřených peněz",
  "admin/editor.minicart.iconLabel.title": "Text k zobrazení vedle ikony",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Text k zobrazení v případě prázdného minikošíku",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link k přesměrování po kliknutí na tlačítko Přejít k pokladně",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Text k zobrazení v tlačítku Dokončit nákup",
  "admin/editor.minicart.showShippingCost.title": "Zobrazit náklady na dopravu nad zápatím",
  "admin/editor.minicart.type.title": "Typ minikošíku",
  "admin/editor.minicart.type.popup": "Vyskakovací",
  "admin/editor.minicart.type.sidebar": "Postranní panel",
  "store/finish-shopping-button-label": "Přejít k pokladně",
  "store/minicart-empty": "Váš košík je prázdný!",
  "store/sidebar-title": "Můj minikošík",
  "store/minicart-content-footer-discount": "Uložit",
  "store/minicart.error-removal": "Odstranění položky se nezdařilo, zkuste to prosím znovu",
  "store/minicart.shipping-cost": "Celkové náklady na dopravu",
  "store/minicart.checkout-failure": "Došlo k chybě, zkuste to znovu.",
  "store/minicart.go-to-checkout": "Přejít k pokladně",
  "store/minicart.empty-state": "Váš košík je prázdný.",
  "store/minicart.title": "Košík"
}

```


[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 minicart/messages/id.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Troli Mini",
  "admin/editor.minicart.description": "Troli mini sederhana yang menampilkan semua produk yang ditambah ke troli",
  "admin/editor.minicart.showDiscount.title": "Menampilkan jumlah uang yang dihemat",
  "admin/editor.minicart.iconLabel.title": "Teks akan muncul di samping ikon",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Teks akan muncul saat troli mini kosong",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Tautan untuk mengalihkan setelah mengklik tombol Lanjut ke Checkout",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Teks akan muncul di tombol selesai belanja",
  "admin/editor.minicart.showShippingCost.title": "Tampilkan ongkos kirim di atas footer",
  "admin/editor.minicart.type.title": "Jenis Troli Mini",
  "admin/editor.minicart.type.popup": "Pop Up",
  "admin/editor.minicart.type.sidebar": "Bilah sisi",
  "store/finish-shopping-button-label": "Lanjut ke checkout",
  "store/minicart-empty": "Troli Anda kosong!",
  "store/sidebar-title": "Troli mini saya",
  "store/minicart-content-footer-discount": "Simpan",
  "store/minicart.error-removal": "Gagal menghapus item, silakan coba lagi",
  "store/minicart.shipping-cost": "Total ongkos kirim",
  "store/minicart.checkout-failure": "Terjadi kesalahan. Silakan coba lagi.",
  "store/minicart.go-to-checkout": "Lanjut ke checkout",
  "store/minicart.empty-state": "Troli Anda kosong.",
  "store/minicart.title": "Troli"
}

```


[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 minicart/messages/no.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Minihandlevogn",
  "admin/editor.minicart.description": "En enkel minihandlevogn som viser alle produktene som er lagt til",
  "admin/editor.minicart.showDiscount.title": "Vis mengden sparte penger",
  "admin/editor.minicart.iconLabel.title": "Tekst som skal vises ved siden av ikonet",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Tekst som skal vises når minihandlevognen er tom",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link til omdirigering etter å ha klikket på Gå til kassen-knappen",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Tekst som skal vises i Ferdig å handle-knappen",
  "admin/editor.minicart.showShippingCost.title": "Vis fraktkostnaden over bunnteksten",
  "admin/editor.minicart.type.title": "Type minihandlevogn",
  "admin/editor.minicart.type.popup": "Popup",
  "admin/editor.minicart.type.sidebar": "Sidefelt",
  "store/finish-shopping-button-label": "Gå til kassen",
  "store/minicart-empty": "Handlevognen din er tom!",
  "store/sidebar-title": "Min minihandlevogn",
  "store/minicart-content-footer-discount": "Lagre",
  "store/minicart.error-removal": "Fjerning av vare mislyktes. Prøv igjen",
  "store/minicart.shipping-cost": "Total fraktkostnad",
  "store/minicart.checkout-failure": "Noe gikk galt. Prøv igjen.",
  "store/minicart.go-to-checkout": "Gå til kassen",
  "store/minicart.empty-state": "Handlevognen din er tom.",
  "store/minicart.title": "Handlevogn"
}

```


[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 minicart/messages/da.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.minicart.title": "Minikurv",
  "admin/editor.minicart.description": "En simpel minikurv, der viser alle produkter, der er tilføjet",
  "admin/editor.minicart.showDiscount.title": "Vis mængden af sparede penge",
  "admin/editor.minicart.iconLabel.title": "Tekst der vises ved siden af ikonet",
  "admin/editor.minicart.labelMiniCartEmpty.title": "Tekst, der skal vises, når minikurven er tom",
  "admin/editor.minicart.linkButtonFinishShopping.title": "Link til omdirigering efter at have klikket på knappen Gå til kassen",
  "admin/editor.minicart.labelButtonFinishShopping.title": "Tekst, der skal vises på slutkøbsknappen",
  "admin/editor.minicart.showShippingCost.title": "Vis forsendelsesomkostninger over sidefoden",
  "admin/editor.minicart.type.title": "Minikurv type",
  "admin/editor.minicart.type.popup": "Pop op",
  "admin/editor.minicart.type.sidebar": "Sidebjælke",
  "store/finish-shopping-button-label": "Gå til betaling",
  "store/minicart-empty": "Din kurv er tom!",
  "store/sidebar-title": "Min minikurv",
  "store/minicart-content-footer-discount": "Gem",
  "store/minicart.error-removal": "Kunne ikke fjerne vare, prøv venligst igen",
  "store/minicart.shipping-cost": "Samlede forsendelsesomkostninger",
  "store/minicart.checkout-failure": "Der gik noget galt, prøv venligst igen.",
  "store/minicart.go-to-checkout": "Gå til betaling",
  "store/minicart.empty-state": "Din kurv er tom.",
  "store/minicart.title": "Kurv"
}

```