@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

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

@@ -1,1550 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Radio Button renders the UI snapshot correctly 1`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-column"
->
-  <legend>
-    column
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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-14wybg9"
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          />
-          <span
-            className="chakra-radio__label css-1y8kf23"
-            onMouseDown={[Function]}
-            onTouchStart={[Function]}
-          >
-            Radio 2
-          </span>
-        </label>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <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",
-              }
-            }
-            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>
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 2`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-row"
->
-  <legend>
-    row
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1objuxj"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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-14wybg9"
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          />
-          <span
-            className="chakra-radio__label css-1y8kf23"
-            onMouseDown={[Function]}
-            onTouchStart={[Function]}
-          >
-            Radio 2
-          </span>
-        </label>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <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",
-              }
-            }
-            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>
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 3`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-noLabel"
->
-  <legend>
-    no label
-  </legend>
-  <div
-    aria-label="no label"
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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-14wybg9"
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          />
-          <span
-            className="chakra-radio__label css-1y8kf23"
-            onMouseDown={[Function]}
-            onTouchStart={[Function]}
-          >
-            Radio 2
-          </span>
-        </label>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <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",
-              }
-            }
-            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>
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 4`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-helperText"
->
-  <legend>
-    helperText
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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-14wybg9"
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          />
-          <span
-            className="chakra-radio__label css-1y8kf23"
-            onMouseDown={[Function]}
-            onTouchStart={[Function]}
-          >
-            Radio 2
-          </span>
-        </label>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <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",
-              }
-            }
-            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>
-  <div
-    aria-atomic={true}
-    aria-live="off"
-    className="css-1xdhyk6"
-    dangerouslySetInnerHTML={
-      Object {
-        "__html": "helper text",
-      }
-    }
-    data-isinvalid={false}
-    id="helperText-helperErrorText"
-  />
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 5`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-invalidText"
->
-  <legend>
-    invalidText
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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-14wybg9"
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          />
-          <span
-            className="chakra-radio__label css-1y8kf23"
-            onMouseDown={[Function]}
-            onTouchStart={[Function]}
-          >
-            Radio 2
-          </span>
-        </label>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <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",
-              }
-            }
-            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>
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 6`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-noRequiredLabel"
->
-  <legend>
-    no optional or required label
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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="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>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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>
-  </div>
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 7`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-required"
->
-  <legend>
-    required
-    <span>
-       (Required)
-    </span>
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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-14wybg9"
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-          />
-          <span
-            className="chakra-radio__label css-1y8kf23"
-            onMouseDown={[Function]}
-            onTouchStart={[Function]}
-          >
-            Radio 2
-          </span>
-        </label>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <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",
-              }
-            }
-            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>
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 8`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-invalid"
->
-  <legend>
-    invalid
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-          data-invalid=""
-        >
-          <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-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>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <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",
-              }
-            }
-            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>
-  </div>
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 9`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-disabled"
->
-  <legend>
-    disabled
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-          data-disabled=""
-        >
-          <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-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>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <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",
-              }
-            }
-            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>
-  </div>
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 10`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="radio-group-jsxLabels"
->
-  <legend>
-    RadioGroup example
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="arts-wrapper"
-      >
-        <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>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="English-wrapper"
-      >
-        <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>
-  </div>
-</fieldset>
-`;
-
-exports[`Radio Button renders the UI snapshot correctly 11`] = `
-<fieldset
-  className="css-1y4kn3e"
-  id="radio-group-chakra"
->
-  <legend>
-    chakra
-  </legend>
-  <div
-    className="chakra-radio-group css-0"
-    role="radiogroup"
-  >
-    <div
-      className="chakra-stack css-1wdv1uh"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <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="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>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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]}
-          >
-            Radio 3
-          </span>
-        </label>
-      </div>
-    </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"
-    >
-      <div
-        className="css-1xdhyk6"
-        id="radio-2-wrapper"
-      >
-        <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="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>
-      </div>
-      <div
-        className="css-1xdhyk6"
-        id="radio-3-wrapper"
-      >
-        <label
-          className="chakra-radio css-13p0l12"
-        >
-          <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]}
-          >
-            Radio 3
-          </span>
-        </label>
-      </div>
-    </div>
-  </div>
-</fieldset>
-`;