@nypl/design-system-react-components 1.0.2 → 1.0.4

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

@@ -1,1842 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Checkbox renders the UI snapshot correctly 1`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="column-checkbox-group"
->
-  <legend>
-    column
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="column"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="column-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="column-0"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="column-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="column-1"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`Checkbox renders the UI snapshot correctly 2`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="row-checkbox-group"
->
-  <legend>
-    row
-  </legend>
-  <div
-    className="chakra-stack css-1objuxj"
-    data-testid="checkbox-group"
-    id="row"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="row-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="row-0"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="row-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="row-1"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`Checkbox renders the UI snapshot correctly 3`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="noLabel-checkbox-group"
->
-  <legend>
-    no label
-  </legend>
-  <div
-    aria-label="no label"
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="noLabel"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="noLabel-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="noLabel-0"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="noLabel-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="noLabel-1"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`Checkbox renders the UI snapshot correctly 4`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="helperText-checkbox-group"
->
-  <legend>
-    helperText
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="helperText"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="helperText-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="helperText-0"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="helperText-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="helperText-1"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </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[`Checkbox renders the UI snapshot correctly 5`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="invalidText-checkbox-group"
->
-  <legend>
-    invalidText
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="invalidText"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="invalidText-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="invalidText-0"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="invalidText-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="invalidText-1"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`Checkbox renders the UI snapshot correctly 6`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="noRequiredLabel-checkbox-group"
->
-  <legend>
-    no optional or required label
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="noRequiredLabel"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="noRequiredLabel-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="noRequiredLabel-0"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="noRequiredLabel-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="noRequiredLabel-1"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`Checkbox renders the UI snapshot correctly 7`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="required-checkbox-group"
->
-  <legend>
-    required
-    <span>
-       (Required)
-    </span>
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="required"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="required-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="required-0"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="required-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="required-1"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`Checkbox renders the UI snapshot correctly 8`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="invalid-checkbox-group"
->
-  <legend>
-    invalid
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="invalid"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="invalid-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        data-invalid=""
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={true}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="invalid-0"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          data-invalid=""
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          data-invalid=""
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="invalid-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        data-invalid=""
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={true}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="invalid-1"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          data-invalid=""
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          data-invalid=""
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`Checkbox renders the UI snapshot correctly 9`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="disabled-checkbox-group"
->
-  <legend>
-    disabled
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="disabled"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="disabled-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        data-disabled=""
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={true}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={true}
-          id="disabled-0"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          data-disabled=""
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          data-disabled=""
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="disabled-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        data-disabled=""
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={true}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={true}
-          id="disabled-1"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          data-disabled=""
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          data-disabled=""
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`Checkbox renders the UI snapshot correctly 10`] = `
-<fieldset
-  className="css-1u8qly9"
-  id="jsxLabels-checkbox-group"
->
-  <legend>
-    jsxLabels
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="jsxLabels"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="jsxLabels-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="jsxLabels-0"
-          name="jsxLabels"
-          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="checkbox"
-          value="arts"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          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="jsxLabels-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="jsxLabels-1"
-          name="jsxLabels"
-          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="checkbox"
-          value="English"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          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[`Checkbox renders the UI snapshot correctly 11`] = `
-<fieldset
-  className="css-2bbtg1"
-  id="chakraProps-checkbox-group"
->
-  <legend>
-    chakraProps
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="chakraProps"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="chakraProps-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="chakraProps-0"
-          name="chakraProps"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="chakraProps-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="chakraProps-1"
-          name="chakraProps"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;
-
-exports[`Checkbox renders the UI snapshot correctly 12`] = `
-<fieldset
-  className="css-1u8qly9"
-  data-testid="props"
-  id="otherProps-checkbox-group"
->
-  <legend>
-    otherProps
-  </legend>
-  <div
-    className="chakra-stack css-1wdv1uh"
-    data-testid="checkbox-group"
-    id="otherProps"
-  >
-    <div
-      className="css-1xdhyk6"
-      id="otherProps-0-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="otherProps-0"
-          name="otherProps"
-          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="checkbox"
-          value="2"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 2
-        </span>
-      </label>
-    </div>
-    <div
-      className="css-1xdhyk6"
-      id="otherProps-1-wrapper"
-    >
-      <label
-        className="chakra-checkbox css-scawxr"
-        onClick={[Function]}
-      >
-        <input
-          aria-disabled={false}
-          aria-invalid={false}
-          checked={false}
-          className="chakra-checkbox__input"
-          disabled={false}
-          id="otherProps-1"
-          name="otherProps"
-          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="checkbox"
-          value="3"
-        />
-        <span
-          aria-hidden={true}
-          className="chakra-checkbox__control css-dnty2r"
-          onMouseDown={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-          onMouseUp={[Function]}
-        >
-          <svg
-            className="chakra-icon css-1vfv7ic"
-            focusable={false}
-            viewBox="0 0 24 24"
-          >
-            <path
-              d="M8.795 15.875l-4.17-4.17-1.42 1.41 5.59 5.59 12-12-1.41-1.41-10.59 10.58z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="chakra-checkbox__label css-1oeb2oe"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
-        >
-          Checkbox 3
-        </span>
-      </label>
-    </div>
-  </div>
-</fieldset>
-`;