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

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

@@ -1,1722 +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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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
-    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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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>
-</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"
-  >
-    <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>
-    <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>
-</fieldset>
-`;