@nypl/design-system-react-components 0.25.13 → 0.26.0

package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap

@@ -2,1213 +2,1429 @@
 
 exports[`Radio Button renders the UI snapshot correctly 1`] = `
 <fieldset
-  className=" css-0"
+  className="css-1u8qly9"
   id="radio-group-column"
 >
   <legend>
     column
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </legend>
   <div
-    aria-label={null}
-    className="chakra-stack css-1wdv1uh"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-2"
-        name="column"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
-          }
-        }
-        type="radio"
-        value="2"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 2
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
-    >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-3"
-        name="column"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="column"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="3"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 3
-      </span>
-    </label>
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="column"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
 </fieldset>
 `;
 
 exports[`Radio Button renders the UI snapshot correctly 2`] = `
 <fieldset
-  className=" css-0"
+  className="css-1u8qly9"
   id="radio-group-row"
 >
   <legend>
     row
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </legend>
   <div
-    aria-label={null}
-    className="chakra-stack css-1objuxj"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
+    <div
+      className="chakra-stack css-1objuxj"
     >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-2"
-        name="row"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
-          }
-        }
-        type="radio"
-        value="2"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 2
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
-    >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-3"
-        name="row"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="row"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="3"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 3
-      </span>
-    </label>
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="row"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
 </fieldset>
 `;
 
 exports[`Radio Button renders the UI snapshot correctly 3`] = `
 <fieldset
-  className=" css-0"
+  className="css-1u8qly9"
   id="radio-group-noLabel"
 >
   <legend>
     no label
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </legend>
   <div
     aria-label="no label"
-    className="chakra-stack css-1wdv1uh"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-2"
-        name="noLabel"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
-          }
-        }
-        type="radio"
-        value="2"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 2
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
-    >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-3"
-        name="noLabel"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="noLabel"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="3"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 3
-      </span>
-    </label>
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="noLabel"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
 </fieldset>
 `;
 
 exports[`Radio Button renders the UI snapshot correctly 4`] = `
 <fieldset
-  className=" css-0"
+  className="css-1u8qly9"
   id="radio-group-helperText"
 >
   <legend>
     helperText
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </legend>
   <div
-    aria-label={null}
-    className="chakra-stack css-1wdv1uh"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-2"
-        name="helperText"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
-          }
-        }
-        type="radio"
-        value="2"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 2
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
-    >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-3"
-        name="helperText"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="helperText"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="3"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 3
-      </span>
-    </label>
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="helperText"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
   <div
-    className="css-0"
-  >
-    <div
-      aria-atomic={true}
-      aria-live="off"
-      className=" css-0"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "helper text",
-        }
+    aria-atomic={true}
+    aria-live="off"
+    className="css-1xdhyk6"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "helper text",
       }
-      data-isinvalid={false}
-      id="helperText-helperErrorText"
-    />
-  </div>
+    }
+    data-isinvalid={false}
+    id="helperText-helperErrorText"
+  />
 </fieldset>
 `;
 
 exports[`Radio Button renders the UI snapshot correctly 5`] = `
 <fieldset
-  className=" css-0"
+  className="css-1u8qly9"
   id="radio-group-invalidText"
 >
   <legend>
     invalidText
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </legend>
   <div
-    aria-label={null}
-    className="chakra-stack css-1wdv1uh"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-2"
-        name="invalidText"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
-          }
-        }
-        type="radio"
-        value="2"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 2
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
-    >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-3"
-        name="invalidText"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="invalidText"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="3"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 3
-      </span>
-    </label>
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="invalidText"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
 </fieldset>
 `;
 
 exports[`Radio Button renders the UI snapshot correctly 6`] = `
 <fieldset
-  className=" css-0"
-  id="radio-group-optReq"
+  className="css-1u8qly9"
+  id="radio-group-noRequiredLabel"
 >
   <legend>
     no optional or required label
   </legend>
   <div
-    aria-label={null}
-    className="chakra-stack css-1wdv1uh"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-2"
-        name="optReq"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
-          }
-        }
-        type="radio"
-        value="2"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 2
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
-    >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-3"
-        name="optReq"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+        <input
+          aria-required={true}
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="noRequiredLabel"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={true}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="3"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 3
-      </span>
-    </label>
+        <input
+          aria-required={true}
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="noRequiredLabel"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={true}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
 </fieldset>
 `;
 
 exports[`Radio Button renders the UI snapshot correctly 7`] = `
 <fieldset
-  className=" css-0"
+  className="css-1u8qly9"
   id="radio-group-required"
 >
   <legend>
     required
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
+    <span>
+       (Required)
+    </span>
   </legend>
   <div
-    aria-label={null}
-    className="chakra-stack css-1wdv1uh"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        aria-required={true}
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-2"
-        name="required"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={true}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
-          }
-        }
-        type="radio"
-        value="2"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 2
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
-    >
-      <input
-        aria-required={true}
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-3"
-        name="required"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={true}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+        <input
+          aria-required={true}
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="required"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={true}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="3"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        Radio 3
-      </span>
-    </label>
+        <input
+          aria-required={true}
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="required"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={true}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
 </fieldset>
 `;
 
 exports[`Radio Button renders the UI snapshot correctly 8`] = `
 <fieldset
-  className=" css-0"
+  className="css-1u8qly9"
   id="radio-group-invalid"
 >
   <legend>
     invalid
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </legend>
   <div
-    aria-label={null}
-    className="chakra-stack css-1wdv1uh"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
-      data-invalid=""
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-2"
-        name="invalid"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
-          }
-        }
-        type="radio"
-        value="2"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
+      <label
+        className="chakra-radio css-13p0l12"
         data-invalid=""
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        data-invalid=""
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
       >
-        Radio 2
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
-      data-invalid=""
-    >
-      <input
-        aria-invalid={true}
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="radio-3"
-        name="invalid"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+        <input
+          aria-invalid={true}
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="invalid"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="3"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        data-invalid=""
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          data-invalid=""
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          data-invalid=""
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
         data-invalid=""
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
       >
-        Radio 3
-      </span>
-    </label>
+        <input
+          aria-invalid={true}
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="invalid"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          data-invalid=""
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          data-invalid=""
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
 </fieldset>
 `;
 
 exports[`Radio Button renders the UI snapshot correctly 9`] = `
 <fieldset
-  className=" css-0"
+  className="css-1u8qly9"
   id="radio-group-disabled"
 >
   <legend>
     disabled
-    <div
-      className="css-0"
-    >
-      Optional
-    </div>
   </legend>
   <div
-    aria-label={null}
-    className="chakra-stack css-1wdv1uh"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
-      data-disabled=""
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        aria-disabled={true}
-        checked={false}
-        className="chakra-radio__input"
-        disabled={true}
-        id="radio-2"
-        name="disabled"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
-          }
-        }
-        type="radio"
-        value="2"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        data-disabled=""
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
+      <label
+        className="chakra-radio css-13p0l12"
         data-disabled=""
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
       >
-        Radio 2
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
-      data-disabled=""
-    >
-      <input
-        aria-disabled={true}
-        checked={false}
-        className="chakra-radio__input"
-        disabled={true}
-        id="radio-3"
-        name="disabled"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+        <input
+          aria-disabled={true}
+          checked={false}
+          className="chakra-radio__input"
+          disabled={true}
+          id="radio-2"
+          name="disabled"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="3"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        data-disabled=""
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          data-disabled=""
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          data-disabled=""
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
         data-disabled=""
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
       >
-        Radio 3
-      </span>
-    </label>
+        <input
+          aria-disabled={true}
+          checked={false}
+          className="chakra-radio__input"
+          disabled={true}
+          id="radio-3"
+          name="disabled"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          data-disabled=""
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          data-disabled=""
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
 </fieldset>
 `;
 
 exports[`Radio Button renders the UI snapshot correctly 10`] = `
 <fieldset
-  className=" css-0"
+  className="css-1u8qly9"
   id="radio-group-jsxLabels"
 >
   <legend>
     RadioGroup example
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
     <div
-      className="css-0"
+      className="chakra-stack css-1wdv1uh"
     >
-      Optional
+      <label
+        className="chakra-radio css-13p0l12"
+      >
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="arts"
+          name="a11y-test"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="arts"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="css-k008qs"
+          >
+            <span>
+              Arts
+            </span>
+            <div
+              className="css-17xejub"
+            />
+            <span>
+              4
+            </span>
+          </div>
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
+      >
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="English"
+          name="a11y-test"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="English"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          <div
+            className="css-k008qs"
+          >
+            <span>
+              English
+            </span>
+            <div
+              className="css-17xejub"
+            />
+            <span>
+              23
+            </span>
+          </div>
+        </span>
+      </label>
     </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 11`] = `
+<fieldset
+  className="css-1y4kn3e"
+  id="radio-group-chakra"
+>
+  <legend>
+    chakra
   </legend>
   <div
-    aria-label={null}
-    className="chakra-stack css-1wdv1uh"
+    className="chakra-radio-group css-0"
     role="radiogroup"
   >
-    <label
-      className="chakra-radio css-13p0l12"
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="arts"
-        name="a11y-test"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+      <label
+        className="chakra-radio css-13p0l12"
+      >
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="chakra"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="arts"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        <div
-          className="css-k008qs"
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="chakra"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
         >
-          <span>
-            Arts
-          </span>
-          <div
-            className="css-17xejub"
-          />
-          <span>
-            4
-          </span>
-        </div>
-      </span>
-    </label>
-    <label
-      className="chakra-radio css-13p0l12"
+          Radio 3
+        </span>
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;
+
+exports[`Radio Button renders the UI snapshot correctly 12`] = `
+<fieldset
+  className="css-1u8qly9"
+  data-testid="props"
+  id="radio-group-props"
+>
+  <legend>
+    props
+  </legend>
+  <div
+    className="chakra-radio-group css-0"
+    role="radiogroup"
+  >
+    <div
+      className="chakra-stack css-1wdv1uh"
     >
-      <input
-        checked={false}
-        className="chakra-radio__input"
-        disabled={false}
-        id="English"
-        name="a11y-test"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        required={false}
-        style={
-          Object {
-            "border": "0px",
-            "clip": "rect(0px, 0px, 0px, 0px)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": "0px",
-            "position": "absolute",
-            "whiteSpace": "nowrap",
-            "width": "1px",
+      <label
+        className="chakra-radio css-13p0l12"
+      >
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-2"
+          name="props"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
           }
-        }
-        type="radio"
-        value="English"
-      />
-      <span
-        aria-hidden={true}
-        className="css-ssalds"
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-      />
-      <span
-        className="chakra-radio__label css-1y8kf23"
-        onMouseDown={[Function]}
-        onTouchStart={[Function]}
+          type="radio"
+          value="2"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
+        >
+          Radio 2
+        </span>
+      </label>
+      <label
+        className="chakra-radio css-13p0l12"
       >
-        <div
-          className="css-k008qs"
+        <input
+          checked={false}
+          className="chakra-radio__input"
+          disabled={false}
+          id="radio-3"
+          name="props"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          required={false}
+          style={
+            Object {
+              "border": "0px",
+              "clip": "rect(0px, 0px, 0px, 0px)",
+              "height": "1px",
+              "margin": "-1px",
+              "overflow": "hidden",
+              "padding": "0px",
+              "position": "absolute",
+              "whiteSpace": "nowrap",
+              "width": "1px",
+            }
+          }
+          type="radio"
+          value="3"
+        />
+        <span
+          aria-hidden={true}
+          className="css-14wybg9"
+          onMouseDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+          onMouseUp={[Function]}
+        />
+        <span
+          className="chakra-radio__label css-1y8kf23"
+          onMouseDown={[Function]}
+          onTouchStart={[Function]}
         >
-          <span>
-            English
-          </span>
-          <div
-            className="css-17xejub"
-          />
-          <span>
-            23
-          </span>
-        </div>
-      </span>
-    </label>
+          Radio 3
+        </span>
+      </label>
+    </div>
   </div>
 </fieldset>
 `;