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

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

@@ -2,83 +2,93 @@
 
 exports[`Select Renders the UI snapshot correctly 1`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
-  <label
+  <div
     className="css-0"
-    htmlFor="select"
-    id="select-label"
   >
-    Which Succession sibling are you?
     <div
       className="css-0"
     >
-      Optional
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
     </div>
-  </label>
-  <div
-    className="chakra-select__wrapper css-42b2qy"
-  >
-    <select
-      className="chakra-select css-1ik61og"
-      disabled={false}
-      id="select"
-      name="succession-sibling"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      required={false}
-    >
-      <option>
-        Kendall
-      </option>
-      <option>
-        Shiv
-      </option>
-      <option>
-        Connor
-      </option>
-      <option>
-        Roman
-      </option>
-      <option>
-        Tom
-      </option>
-    </select>
     <div
-      className="chakra-select__icon-wrapper css-162mkon"
+      className="chakra-select__wrapper css-42b2qy"
     >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon chakra-select__icon css-onkibi"
-        focusable={false}
-        id="select-icon"
-        role="img"
-        title="arrow icon"
-        viewBox="0 0 24 24"
+      <select
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="select"
+        name="succession-sibling"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        required={false}
+      >
+        <option>
+          Kendall
+        </option>
+        <option>
+          Shiv
+        </option>
+        <option>
+          Connor
+        </option>
+        <option>
+          Roman
+        </option>
+        <option>
+          Tom
+        </option>
+      </select>
+      <div
+        className="chakra-select__icon-wrapper css-162mkon"
       >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
+        <svg
+          aria-hidden={true}
+          className="chakra-icon chakra-select__icon css-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          title="arrow icon"
+          viewBox="0 0 24 24"
         >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
   </div>
 </div>
@@ -86,84 +96,94 @@ exports[`Select Renders the UI snapshot correctly 1`] = `
 
 exports[`Select Renders the UI snapshot correctly 2`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
-  <label
+  <div
     className="css-0"
-    htmlFor="select"
-    id="select-label"
   >
-    Which Succession sibling are you?
     <div
       className="css-0"
     >
-      Optional
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
     </div>
-  </label>
-  <div
-    className="chakra-select__wrapper css-42b2qy"
-  >
-    <select
-      className="chakra-select css-1ik61og"
-      disabled={true}
-      id="select"
-      name="succession-sibling"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      required={false}
-    >
-      <option>
-        Kendall
-      </option>
-      <option>
-        Shiv
-      </option>
-      <option>
-        Connor
-      </option>
-      <option>
-        Roman
-      </option>
-      <option>
-        Tom
-      </option>
-    </select>
     <div
-      className="chakra-select__icon-wrapper css-162mkon"
-      data-disabled=""
+      className="chakra-select__wrapper css-42b2qy"
     >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon chakra-select__icon css-onkibi"
-        focusable={false}
-        id="select-icon"
-        role="img"
-        title="arrow icon"
-        viewBox="0 0 24 24"
+      <select
+        className="chakra-select css-1ik61og"
+        disabled={true}
+        id="select"
+        name="succession-sibling"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        required={false}
+      >
+        <option>
+          Kendall
+        </option>
+        <option>
+          Shiv
+        </option>
+        <option>
+          Connor
+        </option>
+        <option>
+          Roman
+        </option>
+        <option>
+          Tom
+        </option>
+      </select>
+      <div
+        className="chakra-select__icon-wrapper css-162mkon"
+        data-disabled=""
       >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
+        <svg
+          aria-hidden={true}
+          className="chakra-icon chakra-select__icon css-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          title="arrow icon"
+          viewBox="0 0 24 24"
         >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
   </div>
 </div>
@@ -171,94 +191,99 @@ exports[`Select Renders the UI snapshot correctly 2`] = `
 
 exports[`Select Renders the UI snapshot correctly 3`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
-  <label
+  <div
     className="css-0"
-    htmlFor="select"
-    id="select-label"
   >
-    Which Succession sibling are you?
     <div
       className="css-0"
     >
-      Optional
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
     </div>
-  </label>
-  <div
-    className="chakra-select__wrapper css-42b2qy"
-  >
-    <select
-      aria-invalid={true}
-      className="chakra-select css-1ik61og"
-      disabled={false}
-      id="select"
-      name="succession-sibling"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      required={false}
-    >
-      <option>
-        Kendall
-      </option>
-      <option>
-        Shiv
-      </option>
-      <option>
-        Connor
-      </option>
-      <option>
-        Roman
-      </option>
-      <option>
-        Tom
-      </option>
-    </select>
     <div
-      className="chakra-select__icon-wrapper css-162mkon"
+      className="chakra-select__wrapper css-42b2qy"
     >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon chakra-select__icon css-onkibi"
-        focusable={false}
-        id="select-icon"
-        role="img"
-        title="arrow icon"
-        viewBox="0 0 24 24"
+      <select
+        aria-invalid={true}
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="select"
+        name="succession-sibling"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        required={false}
+      >
+        <option>
+          Kendall
+        </option>
+        <option>
+          Shiv
+        </option>
+        <option>
+          Connor
+        </option>
+        <option>
+          Roman
+        </option>
+        <option>
+          Tom
+        </option>
+      </select>
+      <div
+        className="chakra-select__icon-wrapper css-162mkon"
       >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
+        <svg
+          aria-hidden={true}
+          className="chakra-icon chakra-select__icon css-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          title="arrow icon"
+          viewBox="0 0 24 24"
         >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
-  </div>
-  <div
-    aria-disabled={false}
-    className="css-0"
-  >
     <div
       aria-atomic={true}
       aria-live="polite"
-      className=" css-0"
+      className="css-1xdhyk6"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Tom doesn't count as a sibling :(.",
@@ -273,94 +298,99 @@ exports[`Select Renders the UI snapshot correctly 3`] = `
 
 exports[`Select Renders the UI snapshot correctly 4`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
 >
-  <label
+  <div
     className="css-0"
-    htmlFor="select"
-    id="select-label"
   >
-    Which Succession sibling are you?
     <div
       className="css-0"
     >
-      Optional
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
     </div>
-  </label>
-  <div
-    className="chakra-select__wrapper css-42b2qy"
-  >
-    <select
-      aria-describedby="select-helperText"
-      className="chakra-select css-1ik61og"
-      disabled={false}
-      id="select"
-      name="succession-sibling"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      required={false}
-    >
-      <option>
-        Kendall
-      </option>
-      <option>
-        Shiv
-      </option>
-      <option>
-        Connor
-      </option>
-      <option>
-        Roman
-      </option>
-      <option>
-        Tom
-      </option>
-    </select>
     <div
-      className="chakra-select__icon-wrapper css-162mkon"
+      className="chakra-select__wrapper css-42b2qy"
     >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon chakra-select__icon css-onkibi"
-        focusable={false}
-        id="select-icon"
-        role="img"
-        title="arrow icon"
-        viewBox="0 0 24 24"
+      <select
+        aria-describedby="select-helperText"
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="select"
+        name="succession-sibling"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        required={false}
       >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
+        <option>
+          Kendall
+        </option>
+        <option>
+          Shiv
+        </option>
+        <option>
+          Connor
+        </option>
+        <option>
+          Roman
+        </option>
+        <option>
+          Tom
+        </option>
+      </select>
+      <div
+        className="chakra-select__icon-wrapper css-162mkon"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon chakra-select__icon css-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          title="arrow icon"
+          viewBox="0 0 24 24"
         >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
-  </div>
-  <div
-    aria-disabled={false}
-    className="css-0"
-  >
     <div
       aria-atomic={true}
       aria-live="off"
-      className=" css-0"
+      className="css-1xdhyk6"
       dangerouslySetInnerHTML={
         Object {
           "__html": "Remember, Logan will judge you no matter who you pick.",
@@ -375,170 +405,480 @@ exports[`Select Renders the UI snapshot correctly 4`] = `
 
 exports[`Select Renders the UI snapshot correctly 5`] = `
 <div
-  className="css-0"
+  className="css-1xdhyk6"
+>
+  <div
+    className="css-0"
+  >
+    <div
+      className="css-0"
+    >
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+        <span>
+           (Required)
+        </span>
+      </label>
+    </div>
+    <div
+      className="chakra-select__wrapper css-42b2qy"
+    >
+      <select
+        aria-required={true}
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="select"
+        name="succession-sibling"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        required={true}
+      >
+        <option>
+          Kendall
+        </option>
+        <option>
+          Shiv
+        </option>
+        <option>
+          Connor
+        </option>
+        <option>
+          Roman
+        </option>
+        <option>
+          Tom
+        </option>
+      </select>
+      <div
+        className="chakra-select__icon-wrapper css-162mkon"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon chakra-select__icon css-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          title="arrow icon"
+          viewBox="0 0 24 24"
+        >
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 6`] = `
+<div
+  className="css-1xdhyk6"
 >
-  <label
+  <div
     className="css-0"
-    htmlFor="select"
-    id="select-label"
   >
-    Which Succession sibling are you?
     <div
       className="css-0"
     >
-      Required
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+        <span>
+           (Required)
+        </span>
+      </label>
+    </div>
+    <div
+      className="chakra-select__wrapper css-42b2qy"
+    >
+      <select
+        aria-required={true}
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="select"
+        name="succession-sibling"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        required={true}
+      >
+        <option>
+          Kendall
+        </option>
+        <option>
+          Shiv
+        </option>
+        <option>
+          Connor
+        </option>
+        <option>
+          Roman
+        </option>
+        <option>
+          Tom
+        </option>
+      </select>
+      <div
+        className="chakra-select__icon-wrapper css-162mkon"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon chakra-select__icon css-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          title="arrow icon"
+          viewBox="0 0 24 24"
+        >
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
-  </label>
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 7`] = `
+<div
+  className="css-1xdhyk6"
+>
   <div
-    className="chakra-select__wrapper css-42b2qy"
+    className="css-0"
   >
-    <select
-      aria-required={true}
-      className="chakra-select css-1ik61og"
-      disabled={false}
-      id="select"
-      name="succession-sibling"
-      onBlur={[Function]}
-      onFocus={[Function]}
-      required={true}
+    <div
+      className="css-0"
     >
-      <option>
-        Kendall
-      </option>
-      <option>
-        Shiv
-      </option>
-      <option>
-        Connor
-      </option>
-      <option>
-        Roman
-      </option>
-      <option>
-        Tom
-      </option>
-    </select>
+      <label
+        className="css-1xdhyk6"
+        htmlFor="select"
+        id="select-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
     <div
-      className="chakra-select__icon-wrapper css-162mkon"
+      className="chakra-select__wrapper css-42b2qy"
     >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon chakra-select__icon css-onkibi"
-        focusable={false}
-        id="select-icon"
-        role="img"
-        title="arrow icon"
-        viewBox="0 0 24 24"
+      <select
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="select"
+        name="succession-sibling"
+        onBlur={[Function]}
+        onChange={[MockFunction]}
+        onFocus={[Function]}
+        required={false}
+        value=""
+      >
+        <option>
+          Kendall
+        </option>
+        <option>
+          Shiv
+        </option>
+        <option>
+          Connor
+        </option>
+        <option>
+          Roman
+        </option>
+        <option>
+          Tom
+        </option>
+      </select>
+      <div
+        className="chakra-select__icon-wrapper css-162mkon"
       >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
+        <svg
+          aria-hidden={true}
+          className="chakra-icon chakra-select__icon css-1grhd2q"
+          focusable={false}
+          id="select-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          title="arrow icon"
+          viewBox="0 0 24 24"
         >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`Select Renders the UI snapshot correctly 6`] = `
+exports[`Select Renders the UI snapshot correctly 8`] = `
 <div
-  className="css-0"
+  className="css-kle7zy"
 >
-  <label
+  <div
     className="css-0"
-    htmlFor="select"
-    id="select-label"
   >
-    Which Succession sibling are you?
     <div
       className="css-0"
     >
-      Optional
+      <label
+        className="css-1xdhyk6"
+        htmlFor="chakra"
+        id="chakra-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
+    <div
+      className="chakra-select__wrapper css-42b2qy"
+    >
+      <select
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="chakra"
+        name="succession-sibling"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        required={false}
+      >
+        <option>
+          Kendall
+        </option>
+        <option>
+          Shiv
+        </option>
+        <option>
+          Connor
+        </option>
+        <option>
+          Roman
+        </option>
+        <option>
+          Tom
+        </option>
+      </select>
+      <div
+        className="chakra-select__icon-wrapper css-162mkon"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon chakra-select__icon css-1grhd2q"
+          focusable={false}
+          id="chakra-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          title="arrow icon"
+          viewBox="0 0 24 24"
+        >
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
-  </label>
+  </div>
+</div>
+`;
+
+exports[`Select Renders the UI snapshot correctly 9`] = `
+<div
+  className="css-1xdhyk6"
+  data-testid="props"
+>
   <div
-    className="chakra-select__wrapper css-42b2qy"
+    className="css-0"
   >
-    <select
-      className="chakra-select css-1ik61og"
-      disabled={false}
-      id="select"
-      name="succession-sibling"
-      onBlur={[Function]}
-      onChange={[MockFunction]}
-      onFocus={[Function]}
-      required={false}
-      value=""
+    <div
+      className="css-0"
     >
-      <option>
-        Kendall
-      </option>
-      <option>
-        Shiv
-      </option>
-      <option>
-        Connor
-      </option>
-      <option>
-        Roman
-      </option>
-      <option>
-        Tom
-      </option>
-    </select>
+      <label
+        className="css-1xdhyk6"
+        htmlFor="props"
+        id="props-label"
+      >
+        Which Succession sibling are you?
+      </label>
+    </div>
     <div
-      className="chakra-select__icon-wrapper css-162mkon"
+      className="chakra-select__wrapper css-42b2qy"
     >
-      <svg
-        aria-hidden={true}
-        className="chakra-icon chakra-select__icon css-onkibi"
-        focusable={false}
-        id="select-icon"
-        role="img"
-        title="arrow icon"
-        viewBox="0 0 24 24"
+      <select
+        className="chakra-select css-1ik61og"
+        disabled={false}
+        id="props"
+        name="succession-sibling"
+        onBlur={[Function]}
+        onFocus={[Function]}
+        required={false}
+      >
+        <option>
+          Kendall
+        </option>
+        <option>
+          Shiv
+        </option>
+        <option>
+          Connor
+        </option>
+        <option>
+          Roman
+        </option>
+        <option>
+          Tom
+        </option>
+      </select>
+      <div
+        className="chakra-select__icon-wrapper css-162mkon"
       >
-        <g
-          stroke="currentColor"
-          strokeWidth="1.5"
+        <svg
+          aria-hidden={true}
+          className="chakra-icon chakra-select__icon css-1grhd2q"
+          focusable={false}
+          id="props-icon"
+          role="presentation"
+          style={
+            Object {
+              "color": "currentColor",
+              "height": "1em",
+              "width": "1em",
+            }
+          }
+          title="arrow icon"
+          viewBox="0 0 24 24"
         >
-          <path
-            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
-            fill="none"
-            strokeLinecap="round"
-          />
-          <path
-            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
-            fill="currentColor"
-            strokeLinecap="round"
-          />
-          <circle
-            cx="12"
-            cy="12"
-            fill="none"
-            r="11.25"
-            strokeMiterlimit="10"
-          />
-        </g>
-      </svg>
+          <g
+            stroke="currentColor"
+            strokeWidth="1.5"
+          >
+            <path
+              d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+              fill="none"
+              strokeLinecap="round"
+            />
+            <path
+              d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+              fill="currentColor"
+              strokeLinecap="round"
+            />
+            <circle
+              cx="12"
+              cy="12"
+              fill="none"
+              r="11.25"
+              strokeMiterlimit="10"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
   </div>
 </div>