From 38445a58b626287868ad838d3b9885dccb7c720d Mon Sep 17 00:00:00 2001
From: SamTolmay <sam@lowdefy.com>
Date: Thu, 23 Sep 2021 16:37:38 +0200
Subject: [PATCH] fix(blocksAntd): Fix selector option labels and filter
 function.

---
 .../src/blocks/AutoComplete/AutoComplete.js   |    4 +-
 .../blocks/ButtonSelector/ButtonSelector.js   |    4 +-
 .../CheckboxSelector/CheckboxSelector.js      |    4 +-
 .../MultipleSelector/MultipleSelector.js      |    4 +-
 .../src/blocks/RadioSelector/RadioSelector.js |    4 +-
 .../src/blocks/Selector/Selector.js           |    4 +-
 .../AutoComplete.mock.test.js.snap            |  781 +++++++++++-
 .../__snapshots__/ButtonSelector.test.js.snap |  840 +++++++++----
 .../CheckboxSelector.test.js.snap             |  600 +++++++---
 .../MultipleSelector.mock.test.js.snap        | 1043 ++++++++++++++++-
 .../__snapshots__/RadioSelector.test.js.snap  |  696 ++++++++---
 .../__snapshots__/Selector.mock.test.js.snap  | 1035 +++++++++++++++-
 12 files changed, 4416 insertions(+), 603 deletions(-)

diff --git a/packages/blocks/blocksAntd/src/blocks/AutoComplete/AutoComplete.js b/packages/blocks/blocksAntd/src/blocks/AutoComplete/AutoComplete.js
index 5013712c6..1f9e841f2 100644
--- a/packages/blocks/blocksAntd/src/blocks/AutoComplete/AutoComplete.js
+++ b/packages/blocks/blocksAntd/src/blocks/AutoComplete/AutoComplete.js
@@ -80,7 +80,7 @@ const AutoCompleteInput = ({
                   key={i}
                   value={i}
                 >
-                  {`${opt}`}
+                  {renderHtml({ html: `${opt}`, methods })}
                 </Option>
               ) : (
                 <Option
@@ -92,7 +92,7 @@ const AutoCompleteInput = ({
                   value={i}
                 >
                   {type.isNone(opt.label)
-                    ? `${opt.value}`
+                    ? renderHtml({ html: `${opt.value}`, methods })
                     : renderHtml({ html: opt.label, methods })}
                 </Option>
               )
diff --git a/packages/blocks/blocksAntd/src/blocks/ButtonSelector/ButtonSelector.js b/packages/blocks/blocksAntd/src/blocks/ButtonSelector/ButtonSelector.js
index 9719f4660..3557d3a41 100644
--- a/packages/blocks/blocksAntd/src/blocks/ButtonSelector/ButtonSelector.js
+++ b/packages/blocks/blocksAntd/src/blocks/ButtonSelector/ButtonSelector.js
@@ -72,7 +72,7 @@ const ButtonSelector = ({
             {uniqueValueOptions.map((opt, i) =>
               type.isPrimitive(opt) ? (
                 <Radio.Button id={`${blockId}_${i}`} key={i} value={i}>
-                  {`${opt}`}
+                  {renderHtml({ html: `${opt}`, methods })}
                 </Radio.Button>
               ) : (
                 <Radio.Button
@@ -83,7 +83,7 @@ const ButtonSelector = ({
                   className={methods.makeCssClass(opt.style)}
                 >
                   {type.isNone(opt.label)
-                    ? `${opt.value}`
+                    ? renderHtml({ html: `${opt.value}`, methods })
                     : renderHtml({ html: opt.label, methods })}
                 </Radio.Button>
               )
diff --git a/packages/blocks/blocksAntd/src/blocks/CheckboxSelector/CheckboxSelector.js b/packages/blocks/blocksAntd/src/blocks/CheckboxSelector/CheckboxSelector.js
index 2d68e82b4..42de4e169 100644
--- a/packages/blocks/blocksAntd/src/blocks/CheckboxSelector/CheckboxSelector.js
+++ b/packages/blocks/blocksAntd/src/blocks/CheckboxSelector/CheckboxSelector.js
@@ -73,7 +73,7 @@ const CheckboxSelector = ({
             {uniqueValueOptions.map((opt, i) =>
               type.isPrimitive(opt) ? (
                 <Checkbox id={`${blockId}_${i}`} key={i} value={i}>
-                  {`${opt}`}
+                  {renderHtml({ html: `${opt}`, methods })}
                 </Checkbox>
               ) : (
                 <Checkbox
@@ -84,7 +84,7 @@ const CheckboxSelector = ({
                   className={methods.makeCssClass(opt.style)}
                 >
                   {type.isNone(opt.label)
-                    ? `${opt.value}`
+                    ? renderHtml({ html: `${opt.value}`, methods })
                     : renderHtml({ html: opt.label, methods })}
                 </Checkbox>
               )
diff --git a/packages/blocks/blocksAntd/src/blocks/MultipleSelector/MultipleSelector.js b/packages/blocks/blocksAntd/src/blocks/MultipleSelector/MultipleSelector.js
index b12b740f7..0f12553d8 100644
--- a/packages/blocks/blocksAntd/src/blocks/MultipleSelector/MultipleSelector.js
+++ b/packages/blocks/blocksAntd/src/blocks/MultipleSelector/MultipleSelector.js
@@ -113,7 +113,7 @@ const MultipleSelector = ({
                     key={i}
                     value={i}
                   >
-                    {`${opt}`}
+                    {renderHtml({ html: `${opt}`, methods })}
                   </Option>
                 ) : (
                   <Option
@@ -125,7 +125,7 @@ const MultipleSelector = ({
                     value={i}
                   >
                     {type.isNone(opt.label)
-                      ? `${opt.value}`
+                      ? renderHtml({ html: `${opt.value}`, methods })
                       : renderHtml({ html: opt.label, methods })}
                   </Option>
                 )
diff --git a/packages/blocks/blocksAntd/src/blocks/RadioSelector/RadioSelector.js b/packages/blocks/blocksAntd/src/blocks/RadioSelector/RadioSelector.js
index 685f65d68..bfc870e1a 100644
--- a/packages/blocks/blocksAntd/src/blocks/RadioSelector/RadioSelector.js
+++ b/packages/blocks/blocksAntd/src/blocks/RadioSelector/RadioSelector.js
@@ -73,7 +73,7 @@ const RadioSelector = ({
             {uniqueValueOptions.map((opt, i) =>
               type.isPrimitive(opt) ? (
                 <Radio id={`${blockId}_${opt}`} key={i} value={i}>
-                  {`${opt}`}
+                  {renderHtml({ html: `${opt}`, methods })}
                 </Radio>
               ) : (
                 <Radio
@@ -84,7 +84,7 @@ const RadioSelector = ({
                   className={methods.makeCssClass(opt.style)}
                 >
                   {type.isNone(opt.label)
-                    ? `${opt.value}`
+                    ? renderHtml({ html: `${opt.value}`, methods })
                     : renderHtml({ html: opt.label, methods })}
                 </Radio>
               )
diff --git a/packages/blocks/blocksAntd/src/blocks/Selector/Selector.js b/packages/blocks/blocksAntd/src/blocks/Selector/Selector.js
index 0c56626e2..d3d6891be 100644
--- a/packages/blocks/blocksAntd/src/blocks/Selector/Selector.js
+++ b/packages/blocks/blocksAntd/src/blocks/Selector/Selector.js
@@ -102,7 +102,7 @@ const Selector = ({
                     key={i}
                     value={i}
                   >
-                    {`${opt}`}
+                    {renderHtml({ html: `${opt}`, methods })}
                   </Option>
                 ) : (
                   <Option
@@ -114,7 +114,7 @@ const Selector = ({
                     value={i}
                   >
                     {type.isNone(opt.label)
-                      ? `${opt.value}`
+                      ? renderHtml({ html: `${opt.value}`, methods })
                       : renderHtml({ html: opt.label, methods })}
                   </Option>
                 )
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/AutoComplete.mock.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/AutoComplete.mock.test.js.snap
index 7a6d449d8..3182366de 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/AutoComplete.mock.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/AutoComplete.mock.test.js.snap
@@ -36,14 +36,88 @@ Array [
           id="properties.allowClear: false_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.allowClear: false_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{}",
@@ -74,14 +148,88 @@ Array [
           id="properties.autoFocus: true_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.autoFocus: true_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{}",
@@ -112,14 +260,88 @@ Array [
           id="properties.backfill: true_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.backfill: true_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{}",
@@ -150,14 +372,92 @@ Array [
           id="properties.inputStyle: CSS style applied_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "border": "1px solid red",
+                      },
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"border\\":\\"1px solid red\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.inputStyle: CSS style applied_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "border": "1px solid red",
+                      },
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"border\\":\\"1px solid red\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":{\\"border\\":\\"1px solid red\\"}}",
@@ -750,21 +1050,160 @@ Array [
           id="properties.options: html_0"
           value={0}
         >
-          &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+          <HtmlComponent
+            html=<div>
+  Some main text
+</div>
+<div style="font-size: 6px;">
+  Some small subtext
+</div>
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options: html_1"
           value={1}
         >
-          &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+          <HtmlComponent
+            html=<div style="color: green;">
+  Option green
+</div>
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options: html_2"
           value={2}
         >
-          Option 3
+          <HtmlComponent
+            html="Option 3"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{}",
@@ -919,14 +1358,88 @@ Array [
           id="properties.options-string_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options-string_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{}",
@@ -1085,14 +1598,96 @@ Array [
           id="properties.optionsStyle: CSS style applied_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      Object {
+                        "color": "blue",
+                      },
+                    ],
+                    Array [
+                      Object {
+                        "color": "blue",
+                      },
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{\\"style\\":{\\"color\\":\\"blue\\"}}"
           id="properties.optionsStyle: CSS style applied_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      Object {
+                        "color": "blue",
+                      },
+                    ],
+                    Array [
+                      Object {
+                        "color": "blue",
+                      },
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{}",
@@ -1146,14 +1741,88 @@ Array [
           id="properties.size: large_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.size: large_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{}",
@@ -1184,14 +1853,88 @@ Array [
           id="properties.size: small_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.size: small_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{}",
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/ButtonSelector.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/ButtonSelector.test.js.snap
index df24d52b8..8945a8b33 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/ButtonSelector.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/ButtonSelector.test.js.snap
@@ -99,7 +99,9 @@ exports[`Render properties.buttonStyle: outline - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -127,7 +129,9 @@ exports[`Render properties.buttonStyle: outline - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -196,7 +200,9 @@ exports[`Render properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -224,7 +230,9 @@ exports[`Render properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -293,7 +301,9 @@ exports[`Render properties.color_yellow - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -321,7 +331,9 @@ exports[`Render properties.color_yellow - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -391,7 +403,9 @@ exports[`Render properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -420,7 +434,9 @@ exports[`Render properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -489,7 +505,9 @@ exports[`Render properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -517,7 +535,9 @@ exports[`Render properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -572,7 +592,9 @@ exports[`Render properties.label.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -600,7 +622,9 @@ exports[`Render properties.label.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -669,7 +693,9 @@ exports[`Render properties.label.extra: showingextra - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -697,7 +723,9 @@ exports[`Render properties.label.extra: showingextra - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -773,7 +801,9 @@ exports[`Render properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -801,7 +831,9 @@ exports[`Render properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -878,7 +910,9 @@ exports[`Render properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -906,7 +940,9 @@ exports[`Render properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -975,7 +1011,9 @@ exports[`Render properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1003,7 +1041,9 @@ exports[`Render properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1203,7 +1243,9 @@ exports[`Render properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1231,7 +1273,9 @@ exports[`Render properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1259,7 +1303,9 @@ exports[`Render properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1328,7 +1374,9 @@ exports[`Render properties.options-boolean - value[0] 1`] = `
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1356,7 +1404,9 @@ exports[`Render properties.options-boolean - value[0] 1`] = `
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1425,7 +1475,9 @@ exports[`Render properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1453,7 +1505,9 @@ exports[`Render properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1623,7 +1677,9 @@ exports[`Render properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1651,7 +1707,9 @@ exports[`Render properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1821,7 +1879,9 @@ exports[`Render properties.size: small - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1849,7 +1909,9 @@ exports[`Render properties.size: small - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1918,7 +1980,9 @@ exports[`Render properties.size_large - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1946,7 +2010,9 @@ exports[`Render properties.size_large - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2015,7 +2081,9 @@ exports[`Render properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2043,7 +2111,9 @@ exports[`Render properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2152,7 +2222,9 @@ exports[`Render required = true properties.buttonStyle: outline - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2180,7 +2252,9 @@ exports[`Render required = true properties.buttonStyle: outline - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2249,7 +2323,9 @@ exports[`Render required = true properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2277,7 +2353,9 @@ exports[`Render required = true properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2346,7 +2424,9 @@ exports[`Render required = true properties.color_yellow - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2374,7 +2454,9 @@ exports[`Render required = true properties.color_yellow - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2444,7 +2526,9 @@ exports[`Render required = true properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2473,7 +2557,9 @@ exports[`Render required = true properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2542,7 +2628,9 @@ exports[`Render required = true properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2570,7 +2658,9 @@ exports[`Render required = true properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2625,7 +2715,9 @@ exports[`Render required = true properties.label.disabled: true - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2653,7 +2745,9 @@ exports[`Render required = true properties.label.disabled: true - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2722,7 +2816,9 @@ exports[`Render required = true properties.label.extra: showingextra - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2750,7 +2846,9 @@ exports[`Render required = true properties.label.extra: showingextra - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2826,7 +2924,9 @@ exports[`Render required = true properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2854,7 +2954,9 @@ exports[`Render required = true properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2931,7 +3033,9 @@ exports[`Render required = true properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2959,7 +3063,9 @@ exports[`Render required = true properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3028,7 +3134,9 @@ exports[`Render required = true properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3056,7 +3164,9 @@ exports[`Render required = true properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3256,7 +3366,9 @@ exports[`Render required = true properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3284,7 +3396,9 @@ exports[`Render required = true properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3312,7 +3426,9 @@ exports[`Render required = true properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3381,7 +3497,9 @@ exports[`Render required = true properties.options-boolean - value[0] 1`] = `
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3409,7 +3527,9 @@ exports[`Render required = true properties.options-boolean - value[0] 1`] = `
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3478,7 +3598,9 @@ exports[`Render required = true properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3506,7 +3628,9 @@ exports[`Render required = true properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3676,7 +3800,9 @@ exports[`Render required = true properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3704,7 +3830,9 @@ exports[`Render required = true properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3874,7 +4002,9 @@ exports[`Render required = true properties.size: small - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3902,7 +4032,9 @@ exports[`Render required = true properties.size: small - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3971,7 +4103,9 @@ exports[`Render required = true properties.size_large - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3999,7 +4133,9 @@ exports[`Render required = true properties.size_large - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4068,7 +4204,9 @@ exports[`Render required = true properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4096,7 +4234,9 @@ exports[`Render required = true properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4233,7 +4373,9 @@ exports[`Render validation.status = error properties.buttonStyle: outline - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4261,7 +4403,9 @@ exports[`Render validation.status = error properties.buttonStyle: outline - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4358,7 +4502,9 @@ exports[`Render validation.status = error properties.color_red - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4386,7 +4532,9 @@ exports[`Render validation.status = error properties.color_red - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4483,7 +4631,9 @@ exports[`Render validation.status = error properties.color_yellow - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4511,7 +4661,9 @@ exports[`Render validation.status = error properties.color_yellow - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4609,7 +4761,9 @@ exports[`Render validation.status = error properties.disabled: true - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4638,7 +4792,9 @@ exports[`Render validation.status = error properties.disabled: true - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4735,7 +4891,9 @@ exports[`Render validation.status = error properties.label.colon: false - value[
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4763,7 +4921,9 @@ exports[`Render validation.status = error properties.label.colon: false - value[
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4846,7 +5006,9 @@ exports[`Render validation.status = error properties.label.disabled: true - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4874,7 +5036,9 @@ exports[`Render validation.status = error properties.label.disabled: true - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4971,7 +5135,9 @@ exports[`Render validation.status = error properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4999,7 +5165,9 @@ exports[`Render validation.status = error properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5096,7 +5264,9 @@ exports[`Render validation.status = error properties.label: align_right - value[
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5124,7 +5294,9 @@ exports[`Render validation.status = error properties.label: align_right - value[
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5229,7 +5401,9 @@ exports[`Render validation.status = error properties.label: inline_true - value[
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5257,7 +5431,9 @@ exports[`Render validation.status = error properties.label: inline_true - value[
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5354,7 +5530,9 @@ exports[`Render validation.status = error properties.label: span_12 - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5382,7 +5560,9 @@ exports[`Render validation.status = error properties.label: span_12 - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5638,7 +5818,9 @@ exports[`Render validation.status = error properties.options: html - value[0] 1`
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5666,7 +5848,9 @@ exports[`Render validation.status = error properties.options: html - value[0] 1`
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5694,7 +5878,9 @@ exports[`Render validation.status = error properties.options: html - value[0] 1`
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5791,7 +5977,9 @@ exports[`Render validation.status = error properties.options-boolean - value[0]
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5819,7 +6007,9 @@ exports[`Render validation.status = error properties.options-boolean - value[0]
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5916,7 +6106,9 @@ exports[`Render validation.status = error properties.options-number - value[0] 1
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5944,7 +6136,9 @@ exports[`Render validation.status = error properties.options-number - value[0] 1
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6170,7 +6364,9 @@ exports[`Render validation.status = error properties.options-string - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6198,7 +6394,9 @@ exports[`Render validation.status = error properties.options-string - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6424,7 +6622,9 @@ exports[`Render validation.status = error properties.size: small - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6452,7 +6652,9 @@ exports[`Render validation.status = error properties.size: small - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6549,7 +6751,9 @@ exports[`Render validation.status = error properties.size_large - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6577,7 +6781,9 @@ exports[`Render validation.status = error properties.size_large - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6674,7 +6880,9 @@ exports[`Render validation.status = error properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6702,7 +6910,9 @@ exports[`Render validation.status = error properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6839,7 +7049,9 @@ exports[`Render validation.status = null properties.buttonStyle: outline - value
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6867,7 +7079,9 @@ exports[`Render validation.status = null properties.buttonStyle: outline - value
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6936,7 +7150,9 @@ exports[`Render validation.status = null properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6964,7 +7180,9 @@ exports[`Render validation.status = null properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7033,7 +7251,9 @@ exports[`Render validation.status = null properties.color_yellow - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7061,7 +7281,9 @@ exports[`Render validation.status = null properties.color_yellow - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7131,7 +7353,9 @@ exports[`Render validation.status = null properties.disabled: true - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7160,7 +7384,9 @@ exports[`Render validation.status = null properties.disabled: true - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7229,7 +7455,9 @@ exports[`Render validation.status = null properties.label.colon: false - value[0
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7257,7 +7485,9 @@ exports[`Render validation.status = null properties.label.colon: false - value[0
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7312,7 +7542,9 @@ exports[`Render validation.status = null properties.label.disabled: true - value
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7340,7 +7572,9 @@ exports[`Render validation.status = null properties.label.disabled: true - value
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7409,7 +7643,9 @@ exports[`Render validation.status = null properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7437,7 +7673,9 @@ exports[`Render validation.status = null properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7513,7 +7751,9 @@ exports[`Render validation.status = null properties.label: align_right - value[0
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7541,7 +7781,9 @@ exports[`Render validation.status = null properties.label: align_right - value[0
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7618,7 +7860,9 @@ exports[`Render validation.status = null properties.label: inline_true - value[0
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7646,7 +7890,9 @@ exports[`Render validation.status = null properties.label: inline_true - value[0
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7715,7 +7961,9 @@ exports[`Render validation.status = null properties.label: span_12 - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7743,7 +7991,9 @@ exports[`Render validation.status = null properties.label: span_12 - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7943,7 +8193,9 @@ exports[`Render validation.status = null properties.options: html - value[0] 1`]
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7971,7 +8223,9 @@ exports[`Render validation.status = null properties.options: html - value[0] 1`]
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7999,7 +8253,9 @@ exports[`Render validation.status = null properties.options: html - value[0] 1`]
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8068,7 +8324,9 @@ exports[`Render validation.status = null properties.options-boolean - value[0] 1
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8096,7 +8354,9 @@ exports[`Render validation.status = null properties.options-boolean - value[0] 1
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8165,7 +8425,9 @@ exports[`Render validation.status = null properties.options-number - value[0] 1`
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8193,7 +8455,9 @@ exports[`Render validation.status = null properties.options-number - value[0] 1`
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8363,7 +8627,9 @@ exports[`Render validation.status = null properties.options-string - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8391,7 +8657,9 @@ exports[`Render validation.status = null properties.options-string - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8561,7 +8829,9 @@ exports[`Render validation.status = null properties.size: small - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8589,7 +8859,9 @@ exports[`Render validation.status = null properties.size: small - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8658,7 +8930,9 @@ exports[`Render validation.status = null properties.size_large - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8686,7 +8960,9 @@ exports[`Render validation.status = null properties.size_large - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8755,7 +9031,9 @@ exports[`Render validation.status = null properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8783,7 +9061,9 @@ exports[`Render validation.status = null properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8915,7 +9195,9 @@ exports[`Render validation.status = success properties.buttonStyle: outline - va
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8943,7 +9225,9 @@ exports[`Render validation.status = success properties.buttonStyle: outline - va
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9035,7 +9319,9 @@ exports[`Render validation.status = success properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9063,7 +9349,9 @@ exports[`Render validation.status = success properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9155,7 +9443,9 @@ exports[`Render validation.status = success properties.color_yellow - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9183,7 +9473,9 @@ exports[`Render validation.status = success properties.color_yellow - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9276,7 +9568,9 @@ exports[`Render validation.status = success properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9305,7 +9599,9 @@ exports[`Render validation.status = success properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9397,7 +9693,9 @@ exports[`Render validation.status = success properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9425,7 +9723,9 @@ exports[`Render validation.status = success properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9503,7 +9803,9 @@ exports[`Render validation.status = success properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9531,7 +9833,9 @@ exports[`Render validation.status = success properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9623,7 +9927,9 @@ exports[`Render validation.status = success properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9651,7 +9957,9 @@ exports[`Render validation.status = success properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9750,7 +10058,9 @@ exports[`Render validation.status = success properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9778,7 +10088,9 @@ exports[`Render validation.status = success properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9878,7 +10190,9 @@ exports[`Render validation.status = success properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9906,7 +10220,9 @@ exports[`Render validation.status = success properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9998,7 +10314,9 @@ exports[`Render validation.status = success properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10026,7 +10344,9 @@ exports[`Render validation.status = success properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10272,7 +10592,9 @@ exports[`Render validation.status = success properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10300,7 +10622,9 @@ exports[`Render validation.status = success properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10328,7 +10652,9 @@ exports[`Render validation.status = success properties.options: html - value[0]
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10420,7 +10746,9 @@ exports[`Render validation.status = success properties.options-boolean - value[0
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10448,7 +10776,9 @@ exports[`Render validation.status = success properties.options-boolean - value[0
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10540,7 +10870,9 @@ exports[`Render validation.status = success properties.options-number - value[0]
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10568,7 +10900,9 @@ exports[`Render validation.status = success properties.options-number - value[0]
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10784,7 +11118,9 @@ exports[`Render validation.status = success properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10812,7 +11148,9 @@ exports[`Render validation.status = success properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11028,7 +11366,9 @@ exports[`Render validation.status = success properties.size: small - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11056,7 +11396,9 @@ exports[`Render validation.status = success properties.size: small - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11148,7 +11490,9 @@ exports[`Render validation.status = success properties.size_large - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11176,7 +11520,9 @@ exports[`Render validation.status = success properties.size_large - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11268,7 +11614,9 @@ exports[`Render validation.status = success properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11296,7 +11644,9 @@ exports[`Render validation.status = success properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11456,7 +11806,9 @@ exports[`Render validation.status = warning properties.buttonStyle: outline - va
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11484,7 +11836,9 @@ exports[`Render validation.status = warning properties.buttonStyle: outline - va
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11581,7 +11935,9 @@ exports[`Render validation.status = warning properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11609,7 +11965,9 @@ exports[`Render validation.status = warning properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11706,7 +12064,9 @@ exports[`Render validation.status = warning properties.color_yellow - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11734,7 +12094,9 @@ exports[`Render validation.status = warning properties.color_yellow - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11832,7 +12194,9 @@ exports[`Render validation.status = warning properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11861,7 +12225,9 @@ exports[`Render validation.status = warning properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11958,7 +12324,9 @@ exports[`Render validation.status = warning properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11986,7 +12354,9 @@ exports[`Render validation.status = warning properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -12069,7 +12439,9 @@ exports[`Render validation.status = warning properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -12097,7 +12469,9 @@ exports[`Render validation.status = warning properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -12194,7 +12568,9 @@ exports[`Render validation.status = warning properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -12222,7 +12598,9 @@ exports[`Render validation.status = warning properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -12319,7 +12697,9 @@ exports[`Render validation.status = warning properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -12347,7 +12727,9 @@ exports[`Render validation.status = warning properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -12452,7 +12834,9 @@ exports[`Render validation.status = warning properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -12480,7 +12864,9 @@ exports[`Render validation.status = warning properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -12577,7 +12963,9 @@ exports[`Render validation.status = warning properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -12605,7 +12993,9 @@ exports[`Render validation.status = warning properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -12861,7 +13251,9 @@ exports[`Render validation.status = warning properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -12889,7 +13281,9 @@ exports[`Render validation.status = warning properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -12917,7 +13311,9 @@ exports[`Render validation.status = warning properties.options: html - value[0]
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -13014,7 +13410,9 @@ exports[`Render validation.status = warning properties.options-boolean - value[0
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -13042,7 +13440,9 @@ exports[`Render validation.status = warning properties.options-boolean - value[0
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -13139,7 +13539,9 @@ exports[`Render validation.status = warning properties.options-number - value[0]
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -13167,7 +13569,9 @@ exports[`Render validation.status = warning properties.options-number - value[0]
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -13393,7 +13797,9 @@ exports[`Render validation.status = warning properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -13421,7 +13827,9 @@ exports[`Render validation.status = warning properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -13647,7 +14055,9 @@ exports[`Render validation.status = warning properties.size: small - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -13675,7 +14085,9 @@ exports[`Render validation.status = warning properties.size: small - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -13772,7 +14184,9 @@ exports[`Render validation.status = warning properties.size_large - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -13800,7 +14214,9 @@ exports[`Render validation.status = warning properties.size_large - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -13897,7 +14313,9 @@ exports[`Render validation.status = warning properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -13925,7 +14343,9 @@ exports[`Render validation.status = warning properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/CheckboxSelector.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/CheckboxSelector.test.js.snap
index 390733826..36edef2c3 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/CheckboxSelector.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/CheckboxSelector.test.js.snap
@@ -99,7 +99,9 @@ exports[`Render properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -127,7 +129,9 @@ exports[`Render properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -197,7 +201,9 @@ exports[`Render properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -226,7 +232,9 @@ exports[`Render properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -295,7 +303,9 @@ exports[`Render properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -323,7 +333,9 @@ exports[`Render properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -378,7 +390,9 @@ exports[`Render properties.label.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -406,7 +420,9 @@ exports[`Render properties.label.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -475,7 +491,9 @@ exports[`Render properties.label.extra: showingextra - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -503,7 +521,9 @@ exports[`Render properties.label.extra: showingextra - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -579,7 +599,9 @@ exports[`Render properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -607,7 +629,9 @@ exports[`Render properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -684,7 +708,9 @@ exports[`Render properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -712,7 +738,9 @@ exports[`Render properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -781,7 +809,9 @@ exports[`Render properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -809,7 +839,9 @@ exports[`Render properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1009,7 +1041,9 @@ exports[`Render properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1037,7 +1071,9 @@ exports[`Render properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1065,7 +1101,9 @@ exports[`Render properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1134,7 +1172,9 @@ exports[`Render properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1162,7 +1202,9 @@ exports[`Render properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1332,7 +1374,9 @@ exports[`Render properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1360,7 +1404,9 @@ exports[`Render properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1530,7 +1576,9 @@ exports[`Render properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1558,7 +1606,9 @@ exports[`Render properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1667,7 +1717,9 @@ exports[`Render required = true properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1695,7 +1747,9 @@ exports[`Render required = true properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1765,7 +1819,9 @@ exports[`Render required = true properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1794,7 +1850,9 @@ exports[`Render required = true properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1863,7 +1921,9 @@ exports[`Render required = true properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1891,7 +1951,9 @@ exports[`Render required = true properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1946,7 +2008,9 @@ exports[`Render required = true properties.label.disabled: true - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1974,7 +2038,9 @@ exports[`Render required = true properties.label.disabled: true - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2043,7 +2109,9 @@ exports[`Render required = true properties.label.extra: showingextra - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2071,7 +2139,9 @@ exports[`Render required = true properties.label.extra: showingextra - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2147,7 +2217,9 @@ exports[`Render required = true properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2175,7 +2247,9 @@ exports[`Render required = true properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2252,7 +2326,9 @@ exports[`Render required = true properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2280,7 +2356,9 @@ exports[`Render required = true properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2349,7 +2427,9 @@ exports[`Render required = true properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2377,7 +2457,9 @@ exports[`Render required = true properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2577,7 +2659,9 @@ exports[`Render required = true properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2605,7 +2689,9 @@ exports[`Render required = true properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2633,7 +2719,9 @@ exports[`Render required = true properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2702,7 +2790,9 @@ exports[`Render required = true properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2730,7 +2820,9 @@ exports[`Render required = true properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2900,7 +2992,9 @@ exports[`Render required = true properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2928,7 +3022,9 @@ exports[`Render required = true properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3098,7 +3194,9 @@ exports[`Render required = true properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3126,7 +3224,9 @@ exports[`Render required = true properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3263,7 +3363,9 @@ exports[`Render validation.status = error properties.color_red - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3291,7 +3393,9 @@ exports[`Render validation.status = error properties.color_red - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3389,7 +3493,9 @@ exports[`Render validation.status = error properties.disabled: true - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3418,7 +3524,9 @@ exports[`Render validation.status = error properties.disabled: true - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3515,7 +3623,9 @@ exports[`Render validation.status = error properties.label.colon: false - value[
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3543,7 +3653,9 @@ exports[`Render validation.status = error properties.label.colon: false - value[
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3626,7 +3738,9 @@ exports[`Render validation.status = error properties.label.disabled: true - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3654,7 +3768,9 @@ exports[`Render validation.status = error properties.label.disabled: true - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3751,7 +3867,9 @@ exports[`Render validation.status = error properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3779,7 +3897,9 @@ exports[`Render validation.status = error properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3876,7 +3996,9 @@ exports[`Render validation.status = error properties.label: align_right - value[
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3904,7 +4026,9 @@ exports[`Render validation.status = error properties.label: align_right - value[
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4009,7 +4133,9 @@ exports[`Render validation.status = error properties.label: inline_true - value[
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4037,7 +4163,9 @@ exports[`Render validation.status = error properties.label: inline_true - value[
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4134,7 +4262,9 @@ exports[`Render validation.status = error properties.label: span_12 - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4162,7 +4292,9 @@ exports[`Render validation.status = error properties.label: span_12 - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4418,7 +4550,9 @@ exports[`Render validation.status = error properties.options: html - value[0] 1`
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4446,7 +4580,9 @@ exports[`Render validation.status = error properties.options: html - value[0] 1`
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4474,7 +4610,9 @@ exports[`Render validation.status = error properties.options: html - value[0] 1`
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4571,7 +4709,9 @@ exports[`Render validation.status = error properties.options-number - value[0] 1
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4599,7 +4739,9 @@ exports[`Render validation.status = error properties.options-number - value[0] 1
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4825,7 +4967,9 @@ exports[`Render validation.status = error properties.options-string - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4853,7 +4997,9 @@ exports[`Render validation.status = error properties.options-string - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5079,7 +5225,9 @@ exports[`Render validation.status = error properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5107,7 +5255,9 @@ exports[`Render validation.status = error properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5244,7 +5394,9 @@ exports[`Render validation.status = null properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5272,7 +5424,9 @@ exports[`Render validation.status = null properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5342,7 +5496,9 @@ exports[`Render validation.status = null properties.disabled: true - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5371,7 +5527,9 @@ exports[`Render validation.status = null properties.disabled: true - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5440,7 +5598,9 @@ exports[`Render validation.status = null properties.label.colon: false - value[0
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5468,7 +5628,9 @@ exports[`Render validation.status = null properties.label.colon: false - value[0
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5523,7 +5685,9 @@ exports[`Render validation.status = null properties.label.disabled: true - value
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5551,7 +5715,9 @@ exports[`Render validation.status = null properties.label.disabled: true - value
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5620,7 +5786,9 @@ exports[`Render validation.status = null properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5648,7 +5816,9 @@ exports[`Render validation.status = null properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5724,7 +5894,9 @@ exports[`Render validation.status = null properties.label: align_right - value[0
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5752,7 +5924,9 @@ exports[`Render validation.status = null properties.label: align_right - value[0
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5829,7 +6003,9 @@ exports[`Render validation.status = null properties.label: inline_true - value[0
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5857,7 +6033,9 @@ exports[`Render validation.status = null properties.label: inline_true - value[0
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5926,7 +6104,9 @@ exports[`Render validation.status = null properties.label: span_12 - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5954,7 +6134,9 @@ exports[`Render validation.status = null properties.label: span_12 - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6154,7 +6336,9 @@ exports[`Render validation.status = null properties.options: html - value[0] 1`]
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6182,7 +6366,9 @@ exports[`Render validation.status = null properties.options: html - value[0] 1`]
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6210,7 +6396,9 @@ exports[`Render validation.status = null properties.options: html - value[0] 1`]
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6279,7 +6467,9 @@ exports[`Render validation.status = null properties.options-number - value[0] 1`
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6307,7 +6497,9 @@ exports[`Render validation.status = null properties.options-number - value[0] 1`
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6477,7 +6669,9 @@ exports[`Render validation.status = null properties.options-string - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6505,7 +6699,9 @@ exports[`Render validation.status = null properties.options-string - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6675,7 +6871,9 @@ exports[`Render validation.status = null properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6703,7 +6901,9 @@ exports[`Render validation.status = null properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6835,7 +7035,9 @@ exports[`Render validation.status = success properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6863,7 +7065,9 @@ exports[`Render validation.status = success properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6956,7 +7160,9 @@ exports[`Render validation.status = success properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6985,7 +7191,9 @@ exports[`Render validation.status = success properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7077,7 +7285,9 @@ exports[`Render validation.status = success properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7105,7 +7315,9 @@ exports[`Render validation.status = success properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7183,7 +7395,9 @@ exports[`Render validation.status = success properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7211,7 +7425,9 @@ exports[`Render validation.status = success properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7303,7 +7519,9 @@ exports[`Render validation.status = success properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7331,7 +7549,9 @@ exports[`Render validation.status = success properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7430,7 +7650,9 @@ exports[`Render validation.status = success properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7458,7 +7680,9 @@ exports[`Render validation.status = success properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7558,7 +7782,9 @@ exports[`Render validation.status = success properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7586,7 +7812,9 @@ exports[`Render validation.status = success properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7678,7 +7906,9 @@ exports[`Render validation.status = success properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7706,7 +7936,9 @@ exports[`Render validation.status = success properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7952,7 +8184,9 @@ exports[`Render validation.status = success properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7980,7 +8214,9 @@ exports[`Render validation.status = success properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8008,7 +8244,9 @@ exports[`Render validation.status = success properties.options: html - value[0]
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8100,7 +8338,9 @@ exports[`Render validation.status = success properties.options-number - value[0]
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8128,7 +8368,9 @@ exports[`Render validation.status = success properties.options-number - value[0]
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8344,7 +8586,9 @@ exports[`Render validation.status = success properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8372,7 +8616,9 @@ exports[`Render validation.status = success properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8588,7 +8834,9 @@ exports[`Render validation.status = success properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8616,7 +8864,9 @@ exports[`Render validation.status = success properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8776,7 +9026,9 @@ exports[`Render validation.status = warning properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8804,7 +9056,9 @@ exports[`Render validation.status = warning properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8902,7 +9156,9 @@ exports[`Render validation.status = warning properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8931,7 +9187,9 @@ exports[`Render validation.status = warning properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9028,7 +9286,9 @@ exports[`Render validation.status = warning properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9056,7 +9316,9 @@ exports[`Render validation.status = warning properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9139,7 +9401,9 @@ exports[`Render validation.status = warning properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9167,7 +9431,9 @@ exports[`Render validation.status = warning properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9264,7 +9530,9 @@ exports[`Render validation.status = warning properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9292,7 +9560,9 @@ exports[`Render validation.status = warning properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9389,7 +9659,9 @@ exports[`Render validation.status = warning properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9417,7 +9689,9 @@ exports[`Render validation.status = warning properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9522,7 +9796,9 @@ exports[`Render validation.status = warning properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9550,7 +9826,9 @@ exports[`Render validation.status = warning properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9647,7 +9925,9 @@ exports[`Render validation.status = warning properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9675,7 +9955,9 @@ exports[`Render validation.status = warning properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9931,7 +10213,9 @@ exports[`Render validation.status = warning properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9959,7 +10243,9 @@ exports[`Render validation.status = warning properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9987,7 +10273,9 @@ exports[`Render validation.status = warning properties.options: html - value[0]
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10084,7 +10372,9 @@ exports[`Render validation.status = warning properties.options-number - value[0]
               />
             </span>
             <span>
-              15
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10112,7 +10402,9 @@ exports[`Render validation.status = warning properties.options-number - value[0]
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10338,7 +10630,9 @@ exports[`Render validation.status = warning properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10366,7 +10660,9 @@ exports[`Render validation.status = warning properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10592,7 +10888,9 @@ exports[`Render validation.status = warning properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10620,7 +10918,9 @@ exports[`Render validation.status = warning properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/MultipleSelector.mock.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/MultipleSelector.mock.test.js.snap
index 09345fcc2..0f049a880 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/MultipleSelector.mock.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/MultipleSelector.mock.test.js.snap
@@ -40,14 +40,116 @@ Array [
           id="properties.allowClear: false_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.allowClear: false_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -83,14 +185,116 @@ Array [
           id="properties.autoFocus: true_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.autoFocus: true_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -126,14 +330,116 @@ Array [
           id="properties.clearIcon: ChromeFilled_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.clearIcon: ChromeFilled_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -194,14 +500,116 @@ Array [
           id="properties.clearIcon-object: ChromeFilled_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.clearIcon-object: ChromeFilled_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1037,21 +1445,202 @@ Array [
           id="properties.options: html_0"
           value={0}
         >
-          &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+          <HtmlComponent
+            html=<div>
+  Some main text
+</div>
+<div style="font-size: 6px;">
+  Some small subtext
+</div>
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options: html_1"
           value={1}
         >
-          &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+          <HtmlComponent
+            html=<div style="color: green;">
+  Option green
+</div>
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options: html_2"
           value={2}
         >
-          Option 3
+          <HtmlComponent
+            html="Option 3"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1087,14 +1676,116 @@ Array [
           id="properties.options-boolean_0"
           value={0}
         >
-          true
+          <HtmlComponent
+            html="true"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options-boolean_1"
           value={1}
         >
-          false
+          <HtmlComponent
+            html="false"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1130,14 +1821,116 @@ Array [
           id="properties.options-number_0"
           value={0}
         >
-          10
+          <HtmlComponent
+            html="10"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options-number_1"
           value={1}
         >
-          12
+          <HtmlComponent
+            html="12"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1330,14 +2123,116 @@ Array [
           id="properties.options-string_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options-string_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1534,14 +2429,124 @@ Array [
           id="properties.optionsStyle: CSS style applied_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      Object {
+                        "color": "blue",
+                      },
+                    ],
+                    Array [
+                      Object {
+                        "color": "blue",
+                      },
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{\\"style\\":{\\"color\\":\\"blue\\"}}"
           id="properties.optionsStyle: CSS style applied_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      Object {
+                        "color": "blue",
+                      },
+                    ],
+                    Array [
+                      Object {
+                        "color": "blue",
+                      },
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"color\\":\\"blue\\"}}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/RadioSelector.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/RadioSelector.test.js.snap
index 532ed0927..bd8076466 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/RadioSelector.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/RadioSelector.test.js.snap
@@ -99,7 +99,9 @@ exports[`Render properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -127,7 +129,9 @@ exports[`Render properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -197,7 +201,9 @@ exports[`Render properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -226,7 +232,9 @@ exports[`Render properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -295,7 +303,9 @@ exports[`Render properties.inputStyle. CSS style - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -323,7 +333,9 @@ exports[`Render properties.inputStyle. CSS style - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -392,7 +404,9 @@ exports[`Render properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -420,7 +434,9 @@ exports[`Render properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -475,7 +491,9 @@ exports[`Render properties.label.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -503,7 +521,9 @@ exports[`Render properties.label.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -572,7 +592,9 @@ exports[`Render properties.label.extra: showingextra - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -600,7 +622,9 @@ exports[`Render properties.label.extra: showingextra - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -676,7 +700,9 @@ exports[`Render properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -704,7 +730,9 @@ exports[`Render properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -781,7 +809,9 @@ exports[`Render properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -809,7 +839,9 @@ exports[`Render properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -878,7 +910,9 @@ exports[`Render properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -906,7 +940,9 @@ exports[`Render properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1106,7 +1142,9 @@ exports[`Render properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1134,7 +1172,9 @@ exports[`Render properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1162,7 +1202,9 @@ exports[`Render properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1231,7 +1273,9 @@ exports[`Render properties.options-boolean - value[0] 1`] = `
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1259,7 +1303,9 @@ exports[`Render properties.options-boolean - value[0] 1`] = `
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1328,7 +1374,9 @@ exports[`Render properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              16
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1356,7 +1404,9 @@ exports[`Render properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1526,7 +1576,9 @@ exports[`Render properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1554,7 +1606,9 @@ exports[`Render properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1724,7 +1778,9 @@ exports[`Render properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1752,7 +1808,9 @@ exports[`Render properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1861,7 +1919,9 @@ exports[`Render required = true properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1889,7 +1949,9 @@ exports[`Render required = true properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -1959,7 +2021,9 @@ exports[`Render required = true properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -1988,7 +2052,9 @@ exports[`Render required = true properties.disabled: true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2057,7 +2123,9 @@ exports[`Render required = true properties.inputStyle. CSS style - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2085,7 +2153,9 @@ exports[`Render required = true properties.inputStyle. CSS style - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2154,7 +2224,9 @@ exports[`Render required = true properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2182,7 +2254,9 @@ exports[`Render required = true properties.label.colon: false - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2237,7 +2311,9 @@ exports[`Render required = true properties.label.disabled: true - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2265,7 +2341,9 @@ exports[`Render required = true properties.label.disabled: true - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2334,7 +2412,9 @@ exports[`Render required = true properties.label.extra: showingextra - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2362,7 +2442,9 @@ exports[`Render required = true properties.label.extra: showingextra - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2438,7 +2520,9 @@ exports[`Render required = true properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2466,7 +2550,9 @@ exports[`Render required = true properties.label: align_right - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2543,7 +2629,9 @@ exports[`Render required = true properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2571,7 +2659,9 @@ exports[`Render required = true properties.label: inline_true - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2640,7 +2730,9 @@ exports[`Render required = true properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2668,7 +2760,9 @@ exports[`Render required = true properties.label: span_12 - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2868,7 +2962,9 @@ exports[`Render required = true properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2896,7 +2992,9 @@ exports[`Render required = true properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -2924,7 +3022,9 @@ exports[`Render required = true properties.options: html - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -2993,7 +3093,9 @@ exports[`Render required = true properties.options-boolean - value[0] 1`] = `
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3021,7 +3123,9 @@ exports[`Render required = true properties.options-boolean - value[0] 1`] = `
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3090,7 +3194,9 @@ exports[`Render required = true properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              16
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3118,7 +3224,9 @@ exports[`Render required = true properties.options-number - value[0] 1`] = `
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3288,7 +3396,9 @@ exports[`Render required = true properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3316,7 +3426,9 @@ exports[`Render required = true properties.options-string - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3486,7 +3598,9 @@ exports[`Render required = true properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3514,7 +3628,9 @@ exports[`Render required = true properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3651,7 +3767,9 @@ exports[`Render validation.status = error properties.color_red - value[0] 1`] =
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3679,7 +3797,9 @@ exports[`Render validation.status = error properties.color_red - value[0] 1`] =
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3777,7 +3897,9 @@ exports[`Render validation.status = error properties.disabled: true - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3806,7 +3928,9 @@ exports[`Render validation.status = error properties.disabled: true - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -3903,7 +4027,9 @@ exports[`Render validation.status = error properties.inputStyle. CSS style - val
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -3931,7 +4057,9 @@ exports[`Render validation.status = error properties.inputStyle. CSS style - val
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4028,7 +4156,9 @@ exports[`Render validation.status = error properties.label.colon: false - value[
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4056,7 +4186,9 @@ exports[`Render validation.status = error properties.label.colon: false - value[
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4139,7 +4271,9 @@ exports[`Render validation.status = error properties.label.disabled: true - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4167,7 +4301,9 @@ exports[`Render validation.status = error properties.label.disabled: true - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4264,7 +4400,9 @@ exports[`Render validation.status = error properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4292,7 +4430,9 @@ exports[`Render validation.status = error properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4389,7 +4529,9 @@ exports[`Render validation.status = error properties.label: align_right - value[
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4417,7 +4559,9 @@ exports[`Render validation.status = error properties.label: align_right - value[
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4522,7 +4666,9 @@ exports[`Render validation.status = error properties.label: inline_true - value[
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4550,7 +4696,9 @@ exports[`Render validation.status = error properties.label: inline_true - value[
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4647,7 +4795,9 @@ exports[`Render validation.status = error properties.label: span_12 - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4675,7 +4825,9 @@ exports[`Render validation.status = error properties.label: span_12 - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -4931,7 +5083,9 @@ exports[`Render validation.status = error properties.options: html - value[0] 1`
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4959,7 +5113,9 @@ exports[`Render validation.status = error properties.options: html - value[0] 1`
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -4987,7 +5143,9 @@ exports[`Render validation.status = error properties.options: html - value[0] 1`
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5084,7 +5242,9 @@ exports[`Render validation.status = error properties.options-boolean - value[0]
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5112,7 +5272,9 @@ exports[`Render validation.status = error properties.options-boolean - value[0]
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5209,7 +5371,9 @@ exports[`Render validation.status = error properties.options-number - value[0] 1
               />
             </span>
             <span>
-              16
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5237,7 +5401,9 @@ exports[`Render validation.status = error properties.options-number - value[0] 1
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5463,7 +5629,9 @@ exports[`Render validation.status = error properties.options-string - value[0] 1
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5491,7 +5659,9 @@ exports[`Render validation.status = error properties.options-string - value[0] 1
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5717,7 +5887,9 @@ exports[`Render validation.status = error properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5745,7 +5917,9 @@ exports[`Render validation.status = error properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5882,7 +6056,9 @@ exports[`Render validation.status = null properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -5910,7 +6086,9 @@ exports[`Render validation.status = null properties.color_red - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -5980,7 +6158,9 @@ exports[`Render validation.status = null properties.disabled: true - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6009,7 +6189,9 @@ exports[`Render validation.status = null properties.disabled: true - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6078,7 +6260,9 @@ exports[`Render validation.status = null properties.inputStyle. CSS style - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6106,7 +6290,9 @@ exports[`Render validation.status = null properties.inputStyle. CSS style - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6175,7 +6361,9 @@ exports[`Render validation.status = null properties.label.colon: false - value[0
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6203,7 +6391,9 @@ exports[`Render validation.status = null properties.label.colon: false - value[0
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6258,7 +6448,9 @@ exports[`Render validation.status = null properties.label.disabled: true - value
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6286,7 +6478,9 @@ exports[`Render validation.status = null properties.label.disabled: true - value
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6355,7 +6549,9 @@ exports[`Render validation.status = null properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6383,7 +6579,9 @@ exports[`Render validation.status = null properties.label.extra: showingextra -
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6459,7 +6657,9 @@ exports[`Render validation.status = null properties.label: align_right - value[0
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6487,7 +6687,9 @@ exports[`Render validation.status = null properties.label: align_right - value[0
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6564,7 +6766,9 @@ exports[`Render validation.status = null properties.label: inline_true - value[0
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6592,7 +6796,9 @@ exports[`Render validation.status = null properties.label: inline_true - value[0
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6661,7 +6867,9 @@ exports[`Render validation.status = null properties.label: span_12 - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6689,7 +6897,9 @@ exports[`Render validation.status = null properties.label: span_12 - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -6889,7 +7099,9 @@ exports[`Render validation.status = null properties.options: html - value[0] 1`]
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6917,7 +7129,9 @@ exports[`Render validation.status = null properties.options: html - value[0] 1`]
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -6945,7 +7159,9 @@ exports[`Render validation.status = null properties.options: html - value[0] 1`]
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7014,7 +7230,9 @@ exports[`Render validation.status = null properties.options-boolean - value[0] 1
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7042,7 +7260,9 @@ exports[`Render validation.status = null properties.options-boolean - value[0] 1
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7111,7 +7331,9 @@ exports[`Render validation.status = null properties.options-number - value[0] 1`
               />
             </span>
             <span>
-              16
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7139,7 +7361,9 @@ exports[`Render validation.status = null properties.options-number - value[0] 1`
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7309,7 +7533,9 @@ exports[`Render validation.status = null properties.options-string - value[0] 1`
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7337,7 +7563,9 @@ exports[`Render validation.status = null properties.options-string - value[0] 1`
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7507,7 +7735,9 @@ exports[`Render validation.status = null properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7535,7 +7765,9 @@ exports[`Render validation.status = null properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7667,7 +7899,9 @@ exports[`Render validation.status = success properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7695,7 +7929,9 @@ exports[`Render validation.status = success properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7788,7 +8024,9 @@ exports[`Render validation.status = success properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7817,7 +8055,9 @@ exports[`Render validation.status = success properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -7909,7 +8149,9 @@ exports[`Render validation.status = success properties.inputStyle. CSS style - v
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -7937,7 +8179,9 @@ exports[`Render validation.status = success properties.inputStyle. CSS style - v
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8029,7 +8273,9 @@ exports[`Render validation.status = success properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8057,7 +8303,9 @@ exports[`Render validation.status = success properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8135,7 +8383,9 @@ exports[`Render validation.status = success properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8163,7 +8413,9 @@ exports[`Render validation.status = success properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8255,7 +8507,9 @@ exports[`Render validation.status = success properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8283,7 +8537,9 @@ exports[`Render validation.status = success properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8382,7 +8638,9 @@ exports[`Render validation.status = success properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8410,7 +8668,9 @@ exports[`Render validation.status = success properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8510,7 +8770,9 @@ exports[`Render validation.status = success properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8538,7 +8800,9 @@ exports[`Render validation.status = success properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8630,7 +8894,9 @@ exports[`Render validation.status = success properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8658,7 +8924,9 @@ exports[`Render validation.status = success properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -8904,7 +9172,9 @@ exports[`Render validation.status = success properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8932,7 +9202,9 @@ exports[`Render validation.status = success properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -8960,7 +9232,9 @@ exports[`Render validation.status = success properties.options: html - value[0]
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9052,7 +9326,9 @@ exports[`Render validation.status = success properties.options-boolean - value[0
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9080,7 +9356,9 @@ exports[`Render validation.status = success properties.options-boolean - value[0
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9172,7 +9450,9 @@ exports[`Render validation.status = success properties.options-number - value[0]
               />
             </span>
             <span>
-              16
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9200,7 +9480,9 @@ exports[`Render validation.status = success properties.options-number - value[0]
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9416,7 +9698,9 @@ exports[`Render validation.status = success properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9444,7 +9728,9 @@ exports[`Render validation.status = success properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9660,7 +9946,9 @@ exports[`Render validation.status = success properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9688,7 +9976,9 @@ exports[`Render validation.status = success properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9848,7 +10138,9 @@ exports[`Render validation.status = warning properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -9876,7 +10168,9 @@ exports[`Render validation.status = warning properties.color_red - value[0] 1`]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -9974,7 +10268,9 @@ exports[`Render validation.status = warning properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10003,7 +10299,9 @@ exports[`Render validation.status = warning properties.disabled: true - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10100,7 +10398,9 @@ exports[`Render validation.status = warning properties.inputStyle. CSS style - v
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10128,7 +10428,9 @@ exports[`Render validation.status = warning properties.inputStyle. CSS style - v
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10225,7 +10527,9 @@ exports[`Render validation.status = warning properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10253,7 +10557,9 @@ exports[`Render validation.status = warning properties.label.colon: false - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10336,7 +10642,9 @@ exports[`Render validation.status = warning properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10364,7 +10672,9 @@ exports[`Render validation.status = warning properties.label.disabled: true - va
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10461,7 +10771,9 @@ exports[`Render validation.status = warning properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10489,7 +10801,9 @@ exports[`Render validation.status = warning properties.label.extra: showingextra
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10586,7 +10900,9 @@ exports[`Render validation.status = warning properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10614,7 +10930,9 @@ exports[`Render validation.status = warning properties.label: align_right - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10719,7 +11037,9 @@ exports[`Render validation.status = warning properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10747,7 +11067,9 @@ exports[`Render validation.status = warning properties.label: inline_true - valu
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -10844,7 +11166,9 @@ exports[`Render validation.status = warning properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -10872,7 +11196,9 @@ exports[`Render validation.status = warning properties.label: span_12 - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11128,7 +11454,9 @@ exports[`Render validation.status = warning properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11156,7 +11484,9 @@ exports[`Render validation.status = warning properties.options: html - value[0]
               />
             </span>
             <span>
-              &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11184,7 +11514,9 @@ exports[`Render validation.status = warning properties.options: html - value[0]
               />
             </span>
             <span>
-              Option 3
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11281,7 +11613,9 @@ exports[`Render validation.status = warning properties.options-boolean - value[0
               />
             </span>
             <span>
-              true
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11309,7 +11643,9 @@ exports[`Render validation.status = warning properties.options-boolean - value[0
               />
             </span>
             <span>
-              false
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11406,7 +11742,9 @@ exports[`Render validation.status = warning properties.options-number - value[0]
               />
             </span>
             <span>
-              16
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11434,7 +11772,9 @@ exports[`Render validation.status = warning properties.options-number - value[0]
               />
             </span>
             <span>
-              20
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11660,7 +12000,9 @@ exports[`Render validation.status = warning properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11688,7 +12030,9 @@ exports[`Render validation.status = warning properties.options-string - value[0]
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
@@ -11914,7 +12258,9 @@ exports[`Render validation.status = warning properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 1
+              <span
+                className="{}"
+              />
             </span>
           </label>
           <label
@@ -11942,7 +12288,9 @@ exports[`Render validation.status = warning properties.title - value[0] 1`] = `
               />
             </span>
             <span>
-              Option 2
+              <span
+                className="{}"
+              />
             </span>
           </label>
         </div>
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/Selector.mock.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/Selector.mock.test.js.snap
index 9b6c65eb5..0885c401b 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/Selector.mock.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/Selector.mock.test.js.snap
@@ -40,14 +40,116 @@ Array [
           id="properties.allowClear: false_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.allowClear: false_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -83,14 +185,116 @@ Array [
           id="properties.autoFocus: true_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.autoFocus: true_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -126,14 +330,116 @@ Array [
           id="properties.clearIcon: ChromeFilled_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.clearIcon: ChromeFilled_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -194,14 +500,116 @@ Array [
           id="properties.clearIcon-object: ChromeFilled_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.clearIcon-object: ChromeFilled_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1009,21 +1417,202 @@ Array [
           id="properties.options: html_0"
           value={0}
         >
-          &lt;div&gt;Some main text&lt;/div&gt;&lt;div style="font-size: 6px;"&gt;Some small subtext&lt;/div&gt;
+          <HtmlComponent
+            html=<div>
+  Some main text
+</div>
+<div style="font-size: 6px;">
+  Some small subtext
+</div>
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options: html_1"
           value={1}
         >
-          &lt;div style="color: green;"&gt;Option green&lt;/div&gt;
+          <HtmlComponent
+            html=<div style="color: green;">
+  Option green
+</div>
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options: html_2"
           value={2}
         >
-          Option 3
+          <HtmlComponent
+            html="Option 3"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1059,14 +1648,116 @@ Array [
           id="properties.options-number_0"
           value={0}
         >
-          10
+          <HtmlComponent
+            html="10"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options-number_1"
           value={1}
         >
-          12
+          <HtmlComponent
+            html="12"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1259,14 +1950,116 @@ Array [
           id="properties.options-string_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.options-string_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1519,14 +2312,116 @@ Array [
           id="properties.showSearch: false_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.showSearch: false_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
@@ -1562,14 +2457,116 @@ Array [
           id="properties.showSearch: true_0"
           value={0}
         >
-          Option 1
+          <HtmlComponent
+            html="Option 1"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
         <mockConstructor
           className="{}"
           id="properties.showSearch: true_1"
           value={1}
         >
-          Option 2
+          <HtmlComponent
+            html="Option 2"
+            methods={
+              Object {
+                "makeCssClass": [MockFunction] {
+                  "calls": Array [
+                    Array [
+                      Object {
+                        "width": "100%",
+                      },
+                    ],
+                    Array [
+                      Array [
+                        Object {
+                          "width": "100%",
+                        },
+                        undefined,
+                      ],
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                    Array [
+                      undefined,
+                    ],
+                  ],
+                  "results": Array [
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":{\\"width\\":\\"100%\\"}}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                    Object {
+                      "type": "return",
+                      "value": "{}",
+                    },
+                  ],
+                },
+                "registerEvent": [Function],
+                "registerMethod": [Function],
+                "setValue": [Function],
+                "triggerEvent": [Function],
+              }
+            }
+          />
         </mockConstructor>,
       ],
       "className": "{\\"style\\":[{\\"width\\":\\"100%\\"},null]}",