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

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

@@ -1,616 +1,661 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Checkbox Renders the UI snapshot correctly 1`] = `
-<label
-  className="chakra-checkbox css-scawxr"
-  onClick={[Function]}
+<div
+  className="css-1xdhyk6"
+  id="inputID-wrapper"
 >
-  <input
-    aria-disabled={false}
-    aria-invalid={false}
-    checked={false}
-    className="chakra-checkbox__input"
-    disabled={false}
-    id="inputID"
-    name="default"
-    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"
-  />
-  <span
-    aria-hidden={true}
-    className="chakra-checkbox__control css-dnty2r"
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
+  <label
+    className="chakra-checkbox css-scawxr"
+    onClick={[Function]}
   >
-    <svg
-      className="chakra-icon css-1vfv7ic"
-      focusable={false}
-      viewBox="0 0 24 24"
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      checked={false}
+      className="chakra-checkbox__input"
+      disabled={false}
+      id="inputID"
+      name="default"
+      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"
+    />
+    <span
+      aria-hidden={true}
+      className="chakra-checkbox__control css-dnty2r"
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
     >
-      <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]}
-  >
-    Test Label
-  </span>
-</label>
+      <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]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
 `;
 
 exports[`Checkbox Renders the UI snapshot correctly 2`] = `
-<label
-  className="chakra-checkbox css-scawxr"
-  data-checked=""
-  onClick={[Function]}
+<div
+  className="css-1xdhyk6"
+  id="checkbox-checked-wrapper"
 >
-  <input
-    aria-disabled={false}
-    aria-invalid={false}
-    checked={true}
-    className="chakra-checkbox__input"
-    disabled={false}
-    id="checkbox-checked"
-    name="default"
-    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"
-  />
-  <span
-    aria-hidden={true}
-    className="chakra-checkbox__control css-dnty2r"
+  <label
+    className="chakra-checkbox css-scawxr"
     data-checked=""
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
+    onClick={[Function]}
   >
-    <svg
-      className="chakra-icon css-oi1lnb"
-      focusable={false}
-      viewBox="0 0 24 24"
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      checked={true}
+      className="chakra-checkbox__input"
+      disabled={false}
+      id="checkbox-checked"
+      name="default"
+      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"
+    />
+    <span
+      aria-hidden={true}
+      className="chakra-checkbox__control css-dnty2r"
+      data-checked=""
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
     >
-      <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-checked=""
-    onMouseDown={[Function]}
-    onTouchStart={[Function]}
-  >
-    Test Label
-  </span>
-</label>
+      <svg
+        className="chakra-icon css-oi1lnb"
+        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-checked=""
+      onMouseDown={[Function]}
+      onTouchStart={[Function]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
 `;
 
 exports[`Checkbox Renders the UI snapshot correctly 3`] = `
-<label
-  className="chakra-checkbox css-scawxr"
-  data-checked=""
-  onClick={[Function]}
+<div
+  className="css-1xdhyk6"
+  id="checkbox-checked-wrapper"
 >
-  <input
-    aria-disabled={false}
-    aria-invalid={false}
-    checked={true}
-    className="chakra-checkbox__input"
-    disabled={false}
-    id="checkbox-checked"
-    name="default"
-    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"
-  />
-  <span
-    aria-hidden={true}
-    className="chakra-checkbox__control css-dnty2r"
+  <label
+    className="chakra-checkbox css-scawxr"
     data-checked=""
-    data-indeterminate=""
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
+    onClick={[Function]}
   >
-    <div
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      checked={true}
+      className="chakra-checkbox__input"
+      disabled={false}
+      id="checkbox-checked"
+      name="default"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      required={false}
       style={
         Object {
-          "alignItems": "center",
-          "display": "flex",
-          "height": "100%",
-          "justifyContent": "center",
-          "transform": "none",
+          "border": "0px",
+          "clip": "rect(0px, 0px, 0px, 0px)",
+          "height": "1px",
+          "margin": "-1px",
+          "overflow": "hidden",
+          "padding": "0px",
+          "position": "absolute",
+          "whiteSpace": "nowrap",
+          "width": "1px",
         }
       }
+      type="checkbox"
+    />
+    <span
+      aria-hidden={true}
+      className="chakra-checkbox__control css-dnty2r"
+      data-checked=""
+      data-indeterminate=""
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
     >
-      <svg
-        className="css-o8vbdw"
+      <div
         style={
           Object {
-            "opacity": 1,
-            "stroke": "currentColor",
-            "strokeWidth": 4,
+            "alignItems": "center",
+            "display": "flex",
+            "height": "100%",
+            "justifyContent": "center",
             "transform": "none",
           }
         }
-        viewBox="0 0 24 24"
       >
-        <line
-          x1="21"
-          x2="3"
-          y1="12"
-          y2="12"
-        />
-      </svg>
-    </div>
-  </span>
-  <span
-    className="chakra-checkbox__label css-1oeb2oe"
-    data-checked=""
-    onMouseDown={[Function]}
-    onTouchStart={[Function]}
-  >
-    Test Label
-  </span>
-</label>
+        <svg
+          className="css-o8vbdw"
+          style={
+            Object {
+              "opacity": 1,
+              "stroke": "currentColor",
+              "strokeWidth": 4,
+              "transform": "none",
+            }
+          }
+          viewBox="0 0 24 24"
+        >
+          <line
+            x1="21"
+            x2="3"
+            y1="12"
+            y2="12"
+          />
+        </svg>
+      </div>
+    </span>
+    <span
+      className="chakra-checkbox__label css-1oeb2oe"
+      data-checked=""
+      onMouseDown={[Function]}
+      onTouchStart={[Function]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
 `;
 
 exports[`Checkbox Renders the UI snapshot correctly 4`] = `
-<label
-  className="chakra-checkbox css-scawxr"
-  onClick={[Function]}
+<div
+  className="css-1xdhyk6"
+  id="checkbox-required-wrapper"
 >
-  <input
-    aria-disabled={false}
-    aria-invalid={false}
-    checked={false}
-    className="chakra-checkbox__input"
-    disabled={false}
-    id="checkbox-required"
-    name="default"
-    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"
-  />
-  <span
-    aria-hidden={true}
-    className="chakra-checkbox__control css-dnty2r"
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
+  <label
+    className="chakra-checkbox css-scawxr"
+    onClick={[Function]}
   >
-    <svg
-      className="chakra-icon css-1vfv7ic"
-      focusable={false}
-      viewBox="0 0 24 24"
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      checked={false}
+      className="chakra-checkbox__input"
+      disabled={false}
+      id="checkbox-required"
+      name="default"
+      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"
+    />
+    <span
+      aria-hidden={true}
+      className="chakra-checkbox__control css-dnty2r"
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
     >
-      <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]}
-  >
-    Test Label
-  </span>
-</label>
+      <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]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
 `;
 
 exports[`Checkbox Renders the UI snapshot correctly 5`] = `
-<label
-  className="chakra-checkbox css-scawxr"
-  data-invalid=""
-  onClick={[Function]}
+<div
+  className="css-1xdhyk6"
+  id="checkbox-invalid-wrapper"
 >
-  <input
-    aria-disabled={false}
-    aria-invalid={true}
-    checked={false}
-    className="chakra-checkbox__input"
-    disabled={false}
-    id="checkbox-invalid"
-    name="default"
-    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"
-  />
-  <span
-    aria-hidden={true}
-    className="chakra-checkbox__control css-dnty2r"
+  <label
+    className="chakra-checkbox css-scawxr"
     data-invalid=""
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
+    onClick={[Function]}
   >
-    <svg
-      className="chakra-icon css-1vfv7ic"
-      focusable={false}
-      viewBox="0 0 24 24"
+    <input
+      aria-disabled={false}
+      aria-invalid={true}
+      checked={false}
+      className="chakra-checkbox__input"
+      disabled={false}
+      id="checkbox-invalid"
+      name="default"
+      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"
+    />
+    <span
+      aria-hidden={true}
+      className="chakra-checkbox__control css-dnty2r"
+      data-invalid=""
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
     >
-      <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]}
-  >
-    Test Label
-  </span>
-</label>
+      <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]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
 `;
 
 exports[`Checkbox Renders the UI snapshot correctly 6`] = `
-<label
-  className="chakra-checkbox css-scawxr"
-  data-disabled=""
-  onClick={[Function]}
+<div
+  className="css-1xdhyk6"
+  id="checkbox-disabled-wrapper"
 >
-  <input
-    aria-disabled={true}
-    aria-invalid={false}
-    checked={false}
-    className="chakra-checkbox__input"
-    disabled={true}
-    id="checkbox-disabled"
-    name="default"
-    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"
-  />
-  <span
-    aria-hidden={true}
-    className="chakra-checkbox__control css-dnty2r"
+  <label
+    className="chakra-checkbox css-scawxr"
     data-disabled=""
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
+    onClick={[Function]}
   >
-    <svg
-      className="chakra-icon css-1vfv7ic"
-      focusable={false}
-      viewBox="0 0 24 24"
+    <input
+      aria-disabled={true}
+      aria-invalid={false}
+      checked={false}
+      className="chakra-checkbox__input"
+      disabled={true}
+      id="checkbox-disabled"
+      name="default"
+      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"
+    />
+    <span
+      aria-hidden={true}
+      className="chakra-checkbox__control css-dnty2r"
+      data-disabled=""
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
     >
-      <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]}
-  >
-    Test Label
-  </span>
-</label>
+      <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]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
 `;
 
 exports[`Checkbox Renders the UI snapshot correctly 7`] = `
-<label
-  className="chakra-checkbox css-scawxr"
-  onClick={[Function]}
+<div
+  className="css-1xdhyk6"
+  id="jsxLabel-wrapper"
 >
-  <input
-    aria-disabled={false}
-    aria-invalid={false}
-    checked={false}
-    className="chakra-checkbox__input"
-    disabled={false}
-    id="jsxLabel"
-    name="default"
-    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]}
+  <label
+    className="chakra-checkbox css-scawxr"
+    onClick={[Function]}
   >
-    <svg
-      className="chakra-icon css-1vfv7ic"
-      focusable={false}
-      viewBox="0 0 24 24"
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      checked={false}
+      className="chakra-checkbox__input"
+      disabled={false}
+      id="jsxLabel"
+      name="default"
+      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]}
     >
-      <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"
+      <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]}
     >
-      <span>
-        Arts
-      </span>
       <div
-        className="css-17xejub"
-      />
-      <span>
-        4
-      </span>
-    </div>
-  </span>
-</label>
+        className="css-k008qs"
+      >
+        <span>
+          Arts
+        </span>
+        <div
+          className="css-17xejub"
+        />
+        <span>
+          4
+        </span>
+      </div>
+    </span>
+  </label>
+</div>
 `;
 
 exports[`Checkbox Renders the UI snapshot correctly 8`] = `
-<label
-  className="chakra-checkbox css-wkfjn4"
-  onClick={[Function]}
+<div
+  className="css-1xdhyk6"
+  id="checkbox-chakra-wrapper"
 >
-  <input
-    aria-disabled={false}
-    aria-invalid={false}
-    checked={false}
-    className="chakra-checkbox__input"
-    disabled={false}
-    id="checkbox-chakra"
-    name="default"
-    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"
-  />
-  <span
-    aria-hidden={true}
-    className="chakra-checkbox__control css-dnty2r"
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
+  <label
+    className="chakra-checkbox css-wkfjn4"
+    onClick={[Function]}
   >
-    <svg
-      className="chakra-icon css-1vfv7ic"
-      focusable={false}
-      viewBox="0 0 24 24"
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      checked={false}
+      className="chakra-checkbox__input"
+      disabled={false}
+      id="checkbox-chakra"
+      name="default"
+      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"
+    />
+    <span
+      aria-hidden={true}
+      className="chakra-checkbox__control css-dnty2r"
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
     >
-      <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]}
-  >
-    Test Label
-  </span>
-</label>
+      <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]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
 `;
 
 exports[`Checkbox Renders the UI snapshot correctly 9`] = `
-<label
-  className="chakra-checkbox css-scawxr"
+<div
+  className="css-1xdhyk6"
   data-testid="testid"
-  onClick={[Function]}
+  id="checkbox-props-wrapper"
 >
-  <input
-    aria-disabled={false}
-    aria-invalid={false}
-    checked={false}
-    className="chakra-checkbox__input"
-    disabled={false}
-    id="checkbox-props"
-    name="default"
-    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"
-  />
-  <span
-    aria-hidden={true}
-    className="chakra-checkbox__control css-dnty2r"
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
+  <label
+    className="chakra-checkbox css-scawxr"
+    onClick={[Function]}
   >
-    <svg
-      className="chakra-icon css-1vfv7ic"
-      focusable={false}
-      viewBox="0 0 24 24"
+    <input
+      aria-disabled={false}
+      aria-invalid={false}
+      checked={false}
+      className="chakra-checkbox__input"
+      disabled={false}
+      id="checkbox-props"
+      name="default"
+      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"
+    />
+    <span
+      aria-hidden={true}
+      className="chakra-checkbox__control css-dnty2r"
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
     >
-      <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]}
-  >
-    Test Label
-  </span>
-</label>
+      <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]}
+    >
+      Test Label
+    </span>
+  </label>
+</div>
 `;