# Variables Wrapper

## Wrapping SilkeCssNumberField

```js
const [value, setValue] = React.useState('0px');

const formats = ['px', '%'];

<SilkeCSSContext
  viewport={[1920, 1080]}
  fontSize={18}
  container={[200, 150]}
  variablesv2={[
    { key: 'A', name: 'size-xs', value: '10', unit: 'px', type: 'number' },
    { key: 'B', name: 'size-s', value: '50', unit: 'px', type: 'number' },
    { key: 'C', name: 'size-m', value: '100', unit: 'px', type: 'number' },
  ]}
>
  <SilkeBox>
    <SilkeBox column gap="xl">
      <SilkeBox gap="l">
        {['default', 'zombie', 'ghost'].map((kind) => (
          <SilkeVariablesWrapper
            key={kind}
            component={SilkeCssNumberField}
            kind={kind}
            value={value}
            formats={formats}
            label={kind}
            onChange={setValue}
            hasLabelTop
            flex
          />
        ))}
      </SilkeBox>
      <SilkeBox gap="l">
        {['default', 'zombie', 'ghost'].map((kind) => (
          <TextFieldContext inline="label-inside" size="s" key={kind}>
            <SilkeVariablesWrapper
              component={SilkeCssNumberField}
              value={value}
              kind={kind}
              formats={formats}
              label={kind}
              axis="x"
              label="X"
              onChange={setValue}
            />
          </TextFieldContext>
        ))}
      </SilkeBox>
      <SilkeBox gap="l">
        {['default', 'zombie', 'ghost'].map((kind) => (
          <TextFieldContext size="s" key={kind}>
            <SilkeVariablesWrapper
              component={SilkeCssNumberField}
              value={value}
              kind={kind}
              formats={formats}
              label={kind}
              axis="x"
              label="X"
              hasLabelTop
              onChange={setValue}
            />
          </TextFieldContext>
        ))}
      </SilkeBox>
    </SilkeBox>
  </SilkeBox>
</SilkeCSSContext>;
```

## Wrapping SilkeInput

```js
const [value, setValue] = React.useState('0px');

const formats = ['px', '%'];

<SilkeCSSContext
  viewport={[1920, 1080]}
  fontSize={18}
  container={[200, 150]}
  variablesv2={[
    { key: 'D', name: 'size-xs', value: '10', unit: 'px', type: 'number' },
    { key: 'E', name: 'size-s', value: '50', unit: 'px', type: 'number' },
    { key: 'F', name: 'size-m', value: '100', unit: 'px', type: 'number' },
  ]}
>
  <SilkeBox>
    <SilkeBox column gap="xl">
      <SilkeBox gap="l" style={{ width: 400 }}>
        {['default', 'zombie', 'ghost'].map((kind) => (
          <SilkeVariablesWrapper
            key={kind}
            component={SilkeTextField}
            value={value}
            kind={kind}
            onChange={setValue}
            formats={formats}
            label={kind}
            hasLabelTop
          />
        ))}
      </SilkeBox>
      <SilkeBox gap="l">
        {['default', 'zombie', 'ghost'].map((kind) => (
          <TextFieldContext inline="label-inside" size="s" key={kind}>
            <SilkeVariablesWrapper
              value={value}
              component={SilkeTextField}
              onChange={setValue}
              formats={formats}
              label={kind}
              kind={kind}
              inline="label-inside"
            />
          </TextFieldContext>
        ))}
      </SilkeBox>
    </SilkeBox>
  </SilkeBox>
</SilkeCSSContext>;
```

## Wrapping text

```js
const [value, setValue] = React.useState('value');

<>
  <div style={{ padding: '10px', margin: '20px 0', background: '#000' }}>
    {JSON.stringify(value, null, 2)}
  </div>
  <SilkeCSSContext
    viewport={[1920, 1080]}
    fontSize={18}
    container={[200, 150]}
    variablesv2={[
      { key: 'D', name: 'text-1', value: '10', type: 'number' },
      { key: 'E', name: 'text-2', value: '50', type: 'number' },
      { key: 'F', name: 'text-3', value: '100', type: 'number' },
    ]}
  >
    <SilkeBox>
      <SilkeBox column gap="xl">
        <SilkeBox gap="l">
          {['default', 'zombie', 'ghost'].map((kind) => (
            <SilkeVariablesWrapper
              key={kind}
              component={SilkeTextField}
              value={value}
              kind={kind}
              onChange={setValue}
              label={kind}
              hasLabelTop
              variableType="text"
            />
          ))}
        </SilkeBox>
      </SilkeBox>
    </SilkeBox>
  </SilkeCSSContext>
</>;
```

## With default variable selected

```js
const [value, setValue] = React.useState('var(--vev-C)');

const formats = ['px', '%'];

<SilkeCSSContext
  viewport={[1920, 1080]}
  fontSize={18}
  container={[200, 150]}
  variablesv2={[
    { key: 'A', name: 'size-xs', value: '10', unit: 'px', type: 'number' },
    { key: 'B', name: 'size-s', value: '50', unit: 'px', type: 'number' },
    { key: 'C', name: 'size-m', value: '100', unit: 'px', type: 'number', default: true },
  ]}
>
  <SilkeBox>
    <SilkeBox column gap="xl">
      <SilkeBox gap="l">
        {['default', 'zombie', 'ghost'].map((kind) => (
          <SilkeVariablesWrapper
            key={kind}
            component={SilkeCssNumberField}
            kind={kind}
            value={value}
            formats={formats}
            label={kind}
            onChange={setValue}
            hasLabelTop
            flex
          />
        ))}
      </SilkeBox>
      <SilkeBox gap="l">
        {['default', 'zombie', 'ghost'].map((kind) => (
          <TextFieldContext inline="label-inside" size="s" key={kind}>
            <SilkeVariablesWrapper
              component={SilkeCssNumberField}
              value={value}
              kind={kind}
              formats={formats}
              label={kind}
              axis="x"
              label="X"
              onChange={setValue}
            />
          </TextFieldContext>
        ))}
      </SilkeBox>
      <SilkeBox gap="l">
        {['default', 'zombie', 'ghost'].map((kind) => (
          <TextFieldContext size="s" key={kind}>
            <SilkeVariablesWrapper
              component={SilkeCssNumberField}
              value={value}
              kind={kind}
              formats={formats}
              label={kind}
              axis="x"
              label="X"
              hasLabelTop
              onChange={setValue}
            />
          </TextFieldContext>
        ))}
      </SilkeBox>
    </SilkeBox>
  </SilkeBox>
</SilkeCSSContext>;
```