@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/Controls/CheckBox/__snapshots__/CheckBox.stories.storyshot

@@ -1,2410 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Updated Components/Controls/CheckBox CheckBox label helptext 1`] = `
-.emotion-0 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  padding: 0.25rem;
-}
-
-.emotion-1 {
-  margin: 1rem;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.emotion-4 {
-  display: block;
-  cursor: pointer;
-  position: relative;
-}
-
-.emotion-4>span:nth-of-type(2) {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  width: 1.25rem;
-  height: 1.25rem;
-  box-sizing: border-box;
-  border: 0.125rem solid #b9cdfc;
-  border-radius: 0.25rem;
-}
-
-.emotion-4 svg {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.emotion-4:hover,
-.emotion-4[data-focus-visible='true'] {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  background: rgba(84,94,255,0.06);
-  box-shadow: 0px 0px 0px 8px rgba(84,94,255,0.06);
-  border-radius: 100%;
-}
-
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-4[data-selected='true']>span:last-child,
-.emotion-4[data-indeterminate='true']>span:last-child {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  border-color: #175bf5;
-  background: #175bf5;
-}
-
-.emotion-4[data-selected='true'] svg,
-.emotion-4[data-indeterminate='true'] svg {
-  visibility: visible;
-  opacity: 1;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-}
-
-.emotion-4[data-disabled='true'] {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-4[data-disabled='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-5 {
-  padding: 0.125rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-6 {
-  fill: #ffffff;
-  width: 1rem;
-  height: 1rem;
-}
-
-.emotion-6 path {
-  fill: #ffffff;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.emotion-8 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  color: #1B214F;
-}
-
-.emotion-9 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1rem;
-  font-size: 0.75rem;
-  letter-spacing: 0.015625rem;
-  color: #686BB3;
-}
-
-<div
-  className="emotion-0"
->
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="emotion-2"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-3"
-        >
-          <label
-            className="emotion-4"
-            data-rac=""
-            data-testid="undefined_label_checkbox"
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-          >
-            <span
-              onBlur={null}
-              onFocus={null}
-              style={
-                Object {
-                  "border": 0,
-                  "clip": "rect(0 0 0 0)",
-                  "clipPath": "inset(50%)",
-                  "height": "1px",
-                  "margin": "-1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": "1px",
-                }
-              }
-            >
-              <input
-                checked={false}
-                data-testid="undefined_label_checkbox"
-                disabled={false}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                type="checkbox"
-                value="label"
-              />
-            </span>
-            <span
-              className="emotion-5"
-              onClick={[Function]}
-            >
-              <span
-                className="emotion-6"
-              />
-            </span>
-          </label>
-          <div
-            className="emotion-7"
-          >
-            <div
-              className="emotion-8"
-              data-testid="undefined_radio_label_label"
-            >
-              Option
-            </div>
-            <div
-              className="emotion-9"
-              data-testid="undefined_radio_label_helpText"
-            >
-              This is the helptext of the option
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Updated Components/Controls/CheckBox CheckBox label placement 1`] = `
-.emotion-0 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  padding: 0.25rem;
-}
-
-.emotion-1 {
-  margin: 1rem;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  height: 3.125rem;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.emotion-4 {
-  display: block;
-  cursor: pointer;
-  position: relative;
-}
-
-.emotion-4>span:nth-of-type(2) {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  width: 1.25rem;
-  height: 1.25rem;
-  box-sizing: border-box;
-  border: 0.125rem solid #b9cdfc;
-  border-radius: 0.25rem;
-}
-
-.emotion-4 svg {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.emotion-4:hover,
-.emotion-4[data-focus-visible='true'] {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  background: rgba(84,94,255,0.06);
-  box-shadow: 0px 0px 0px 8px rgba(84,94,255,0.06);
-  border-radius: 100%;
-}
-
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-4[data-selected='true']>span:last-child,
-.emotion-4[data-indeterminate='true']>span:last-child {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  border-color: #175bf5;
-  background: #175bf5;
-}
-
-.emotion-4[data-selected='true'] svg,
-.emotion-4[data-indeterminate='true'] svg {
-  visibility: visible;
-  opacity: 1;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-}
-
-.emotion-4[data-disabled='true'] {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-4[data-disabled='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-5 {
-  padding: 0.125rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-6 {
-  fill: #ffffff;
-  width: 1rem;
-  height: 1rem;
-}
-
-.emotion-6 path {
-  fill: #ffffff;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.emotion-8 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  color: #1B214F;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-<div
-  className="emotion-0"
->
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="emotion-2"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-3"
-        >
-          <label
-            className="emotion-4"
-            data-rac=""
-            data-testid="undefined_label_checkbox"
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-          >
-            <span
-              onBlur={null}
-              onFocus={null}
-              style={
-                Object {
-                  "border": 0,
-                  "clip": "rect(0 0 0 0)",
-                  "clipPath": "inset(50%)",
-                  "height": "1px",
-                  "margin": "-1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": "1px",
-                }
-              }
-            >
-              <input
-                checked={false}
-                data-testid="undefined_label_checkbox"
-                disabled={false}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                type="checkbox"
-                value="label"
-              />
-            </span>
-            <span
-              className="emotion-5"
-              onClick={[Function]}
-            >
-              <span
-                className="emotion-6"
-              />
-            </span>
-          </label>
-          <div
-            className="emotion-7"
-          >
-            <div
-              className="emotion-8"
-              data-testid="undefined_radio_label_label"
-            >
-              Option
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="emotion-9"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-10"
-        >
-          <label
-            className="emotion-4"
-            data-rac=""
-            data-testid="undefined_label_checkbox"
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-          >
-            <span
-              onBlur={null}
-              onFocus={null}
-              style={
-                Object {
-                  "border": 0,
-                  "clip": "rect(0 0 0 0)",
-                  "clipPath": "inset(50%)",
-                  "height": "1px",
-                  "margin": "-1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": "1px",
-                }
-              }
-            >
-              <input
-                checked={false}
-                data-testid="undefined_label_checkbox"
-                disabled={false}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                type="checkbox"
-                value="label"
-              />
-            </span>
-            <span
-              className="emotion-5"
-              onClick={[Function]}
-            >
-              <span
-                className="emotion-6"
-              />
-            </span>
-          </label>
-          <div
-            className="emotion-7"
-          >
-            <div
-              className="emotion-8"
-              data-testid="undefined_radio_label_label"
-            >
-              Option
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Updated Components/Controls/CheckBox CheckBox label sizes 1`] = `
-.emotion-0 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  padding: 0.25rem;
-}
-
-.emotion-1 {
-  margin: 1rem;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  height: 3.125rem;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.emotion-4 {
-  display: block;
-  cursor: pointer;
-  position: relative;
-}
-
-.emotion-4>span:nth-of-type(2) {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  width: 1.25rem;
-  height: 1.25rem;
-  box-sizing: border-box;
-  border: 0.125rem solid #b9cdfc;
-  border-radius: 0.25rem;
-}
-
-.emotion-4 svg {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.emotion-4:hover,
-.emotion-4[data-focus-visible='true'] {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  background: rgba(84,94,255,0.06);
-  box-shadow: 0px 0px 0px 8px rgba(84,94,255,0.06);
-  border-radius: 100%;
-}
-
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-4[data-selected='true']>span:last-child,
-.emotion-4[data-indeterminate='true']>span:last-child {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  border-color: #175bf5;
-  background: #175bf5;
-}
-
-.emotion-4[data-selected='true'] svg,
-.emotion-4[data-indeterminate='true'] svg {
-  visibility: visible;
-  opacity: 1;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-}
-
-.emotion-4[data-disabled='true'] {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-4[data-disabled='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-5 {
-  padding: 0.125rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-6 {
-  fill: #ffffff;
-  width: 1rem;
-  height: 1rem;
-}
-
-.emotion-6 path {
-  fill: #ffffff;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.emotion-8 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  color: #1B214F;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-15 {
-  font-family: Roboto;
-  font-weight: 700;
-  line-height: 1.75rem;
-  font-size: 1.25rem;
-  letter-spacing: 0rem;
-  color: #1B214F;
-}
-
-<div
-  className="emotion-0"
->
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="emotion-2"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-3"
-        >
-          <label
-            className="emotion-4"
-            data-rac=""
-            data-testid="undefined_label_checkbox"
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-          >
-            <span
-              onBlur={null}
-              onFocus={null}
-              style={
-                Object {
-                  "border": 0,
-                  "clip": "rect(0 0 0 0)",
-                  "clipPath": "inset(50%)",
-                  "height": "1px",
-                  "margin": "-1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": "1px",
-                }
-              }
-            >
-              <input
-                checked={false}
-                data-testid="undefined_label_checkbox"
-                disabled={false}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                type="checkbox"
-                value="label"
-              />
-            </span>
-            <span
-              className="emotion-5"
-              onClick={[Function]}
-            >
-              <span
-                className="emotion-6"
-              />
-            </span>
-          </label>
-          <div
-            className="emotion-7"
-          >
-            <div
-              className="emotion-8"
-              data-testid="undefined_radio_label_label"
-            >
-              Normal Option
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="emotion-9"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-3"
-        >
-          <label
-            className="emotion-4"
-            data-rac=""
-            data-testid="undefined_label_checkbox"
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-          >
-            <span
-              onBlur={null}
-              onFocus={null}
-              style={
-                Object {
-                  "border": 0,
-                  "clip": "rect(0 0 0 0)",
-                  "clipPath": "inset(50%)",
-                  "height": "1px",
-                  "margin": "-1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": "1px",
-                }
-              }
-            >
-              <input
-                checked={false}
-                data-testid="undefined_label_checkbox"
-                disabled={false}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                type="checkbox"
-                value="label"
-              />
-            </span>
-            <span
-              className="emotion-5"
-              onClick={[Function]}
-            >
-              <span
-                className="emotion-6"
-              />
-            </span>
-          </label>
-          <div
-            className="emotion-7"
-          >
-            <div
-              className="emotion-15"
-              data-testid="undefined_radio_label_label"
-            >
-              Large Option
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Updated Components/Controls/CheckBox Disabled CheckBox 1`] = `
-.emotion-0 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  padding: 0.25rem;
-}
-
-.emotion-1 {
-  margin: 1rem;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  height: 3.125rem;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 0.75rem;
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-4 {
-  display: block;
-  cursor: pointer;
-  position: relative;
-}
-
-.emotion-4>span:nth-of-type(2) {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  width: 1.25rem;
-  height: 1.25rem;
-  box-sizing: border-box;
-  border: 0.125rem solid #b9cdfc;
-  border-radius: 0.25rem;
-}
-
-.emotion-4 svg {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.emotion-4:hover,
-.emotion-4[data-focus-visible='true'] {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  background: rgba(84,94,255,0.06);
-  box-shadow: 0px 0px 0px 8px rgba(84,94,255,0.06);
-  border-radius: 100%;
-}
-
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-4[data-selected='true']>span:last-child,
-.emotion-4[data-indeterminate='true']>span:last-child {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  border-color: #175bf5;
-  background: #175bf5;
-}
-
-.emotion-4[data-selected='true'] svg,
-.emotion-4[data-indeterminate='true'] svg {
-  visibility: visible;
-  opacity: 1;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-}
-
-.emotion-4[data-disabled='true'] {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-4[data-disabled='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-5 {
-  padding: 0.125rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-6 {
-  fill: #ffffff;
-  width: 1rem;
-  height: 1rem;
-}
-
-.emotion-6 path {
-  fill: #ffffff;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.emotion-8 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  color: #1B214F;
-}
-
-.emotion-9 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-16 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1rem;
-  font-size: 0.75rem;
-  letter-spacing: 0.015625rem;
-  color: #686BB3;
-}
-
-<div
-  className="emotion-0"
->
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="emotion-2"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-3"
-        >
-          <label
-            className="emotion-4"
-            data-disabled={true}
-            data-rac=""
-            data-testid="undefined_label_checkbox"
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-          >
-            <span
-              onBlur={null}
-              onFocus={null}
-              style={
-                Object {
-                  "border": 0,
-                  "clip": "rect(0 0 0 0)",
-                  "clipPath": "inset(50%)",
-                  "height": "1px",
-                  "margin": "-1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": "1px",
-                }
-              }
-            >
-              <input
-                checked={false}
-                data-testid="undefined_label_checkbox"
-                disabled={true}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                type="checkbox"
-                value="label"
-              />
-            </span>
-            <span
-              className="emotion-5"
-              onClick={[Function]}
-            >
-              <span
-                className="emotion-6"
-              />
-            </span>
-          </label>
-          <div
-            className="emotion-7"
-          >
-            <div
-              className="emotion-8"
-              data-testid="undefined_radio_label_label"
-            >
-              Option
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      className="emotion-9"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-3"
-        >
-          <label
-            className="emotion-4"
-            data-disabled={true}
-            data-rac=""
-            data-testid="undefined_label_checkbox"
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-          >
-            <span
-              onBlur={null}
-              onFocus={null}
-              style={
-                Object {
-                  "border": 0,
-                  "clip": "rect(0 0 0 0)",
-                  "clipPath": "inset(50%)",
-                  "height": "1px",
-                  "margin": "-1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": "1px",
-                }
-              }
-            >
-              <input
-                checked={false}
-                data-testid="undefined_label_checkbox"
-                disabled={true}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                type="checkbox"
-                value="label"
-              />
-            </span>
-            <span
-              className="emotion-5"
-              onClick={[Function]}
-            >
-              <span
-                className="emotion-6"
-              />
-            </span>
-          </label>
-          <div
-            className="emotion-7"
-          >
-            <div
-              className="emotion-8"
-              data-testid="undefined_radio_label_label"
-            >
-              Option
-            </div>
-            <div
-              className="emotion-16"
-              data-testid="undefined_radio_label_helpText"
-            >
-              This option is disabled
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Updated Components/Controls/CheckBox Indeterminate CheckBox 1`] = `
-.emotion-0 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  padding: 0.25rem;
-}
-
-.emotion-1 {
-  margin: 1rem;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  height: 8.75rem;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.emotion-4 {
-  display: block;
-  cursor: pointer;
-  position: relative;
-}
-
-.emotion-4>span:nth-of-type(2) {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  width: 1.25rem;
-  height: 1.25rem;
-  box-sizing: border-box;
-  border: 0.125rem solid #b9cdfc;
-  border-radius: 0.25rem;
-}
-
-.emotion-4 svg {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.emotion-4:hover,
-.emotion-4[data-focus-visible='true'] {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  background: rgba(84,94,255,0.06);
-  box-shadow: 0px 0px 0px 8px rgba(84,94,255,0.06);
-  border-radius: 100%;
-}
-
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-4[data-selected='true']>span:last-child,
-.emotion-4[data-indeterminate='true']>span:last-child {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  border-color: #175bf5;
-  background: #175bf5;
-}
-
-.emotion-4[data-selected='true'] svg,
-.emotion-4[data-indeterminate='true'] svg {
-  visibility: visible;
-  opacity: 1;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-}
-
-.emotion-4[data-disabled='true'] {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-4[data-disabled='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-5 {
-  padding: 0.125rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-6 {
-  fill: #ffffff;
-  width: 1rem;
-  height: 1rem;
-}
-
-.emotion-6 path {
-  fill: #ffffff;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.emotion-8 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  color: #1B214F;
-}
-
-<div
-  className="emotion-0"
->
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="emotion-2"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          style={
-            Object {
-              "display": "flex",
-              "flexDirection": "column",
-              "gap": "32px",
-            }
-          }
-        >
-          <div>
-            <div
-              className="emotion-3"
-            >
-              <label
-                className="emotion-4"
-                data-rac=""
-                data-testid="undefined_select all_checkbox"
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-              >
-                <span
-                  onBlur={null}
-                  onFocus={null}
-                  style={
-                    Object {
-                      "border": 0,
-                      "clip": "rect(0 0 0 0)",
-                      "clipPath": "inset(50%)",
-                      "height": "1px",
-                      "margin": "-1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "absolute",
-                      "whiteSpace": "nowrap",
-                      "width": "1px",
-                    }
-                  }
-                >
-                  <input
-                    checked={false}
-                    data-testid="undefined_select all_checkbox"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onClick={[Function]}
-                    onDragStart={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchCancel={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    type="checkbox"
-                    value="select all"
-                  />
-                </span>
-                <span
-                  className="emotion-5"
-                  onClick={[Function]}
-                >
-                  <span
-                    className="emotion-6"
-                  />
-                </span>
-              </label>
-              <div
-                className="emotion-7"
-              >
-                <div
-                  className="emotion-8"
-                  data-testid="undefined_radio_select_all_label"
-                >
-                  Select All
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            style={
-              Object {
-                "display": "flex",
-                "flexDirection": "column",
-                "gap": "24px",
-              }
-            }
-          >
-            <div
-              className="emotion-3"
-            >
-              <label
-                className="emotion-4"
-                data-rac=""
-                data-testid="undefined_option 1_checkbox"
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-              >
-                <span
-                  onBlur={null}
-                  onFocus={null}
-                  style={
-                    Object {
-                      "border": 0,
-                      "clip": "rect(0 0 0 0)",
-                      "clipPath": "inset(50%)",
-                      "height": "1px",
-                      "margin": "-1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "absolute",
-                      "whiteSpace": "nowrap",
-                      "width": "1px",
-                    }
-                  }
-                >
-                  <input
-                    checked={false}
-                    data-testid="undefined_option 1_checkbox"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onClick={[Function]}
-                    onDragStart={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchCancel={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    type="checkbox"
-                    value="option 1"
-                  />
-                </span>
-                <span
-                  className="emotion-5"
-                  onClick={[Function]}
-                >
-                  <span
-                    className="emotion-6"
-                  />
-                </span>
-              </label>
-              <div
-                className="emotion-7"
-              >
-                <div
-                  className="emotion-8"
-                  data-testid="undefined_radio_option_1_label"
-                >
-                  Option 1
-                </div>
-              </div>
-            </div>
-            <div
-              className="emotion-3"
-            >
-              <label
-                className="emotion-4"
-                data-rac=""
-                data-testid="undefined_option 2_checkbox"
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-              >
-                <span
-                  onBlur={null}
-                  onFocus={null}
-                  style={
-                    Object {
-                      "border": 0,
-                      "clip": "rect(0 0 0 0)",
-                      "clipPath": "inset(50%)",
-                      "height": "1px",
-                      "margin": "-1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "absolute",
-                      "whiteSpace": "nowrap",
-                      "width": "1px",
-                    }
-                  }
-                >
-                  <input
-                    checked={false}
-                    data-testid="undefined_option 2_checkbox"
-                    disabled={false}
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onClick={[Function]}
-                    onDragStart={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    onKeyUp={[Function]}
-                    onMouseDown={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                    onMouseUp={[Function]}
-                    onTouchCancel={[Function]}
-                    onTouchEnd={[Function]}
-                    onTouchMove={[Function]}
-                    onTouchStart={[Function]}
-                    type="checkbox"
-                    value="option 2"
-                  />
-                </span>
-                <span
-                  className="emotion-5"
-                  onClick={[Function]}
-                >
-                  <span
-                    className="emotion-6"
-                  />
-                </span>
-              </label>
-              <div
-                className="emotion-7"
-              >
-                <div
-                  className="emotion-8"
-                  data-testid="undefined_radio_option_2_label"
-                >
-                  Option 2
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Updated Components/Controls/CheckBox Overview 1`] = `
-.emotion-0 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  padding: 0.25rem;
-}
-
-.emotion-1 {
-  margin: 1rem;
-}
-
-.emotion-2 {
-  margin: -16px;
-}
-
-.emotion-3 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1.375rem;
-  font-size: 1rem;
-  letter-spacing: 0.015625rem;
-  color: #1B214F;
-}
-
-<div
-  className="emotion-0"
->
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="emotion-2"
-    >
-      <p
-        className="emotion-3"
-        id="a-component-that-allows-the-user-to-select-one-or-more-items-from-a-set."
-      >
-        A component that allows the user to select one or more items from a set.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Updated Components/Controls/CheckBox Playground 1`] = `
-.emotion-0 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  padding: 0.25rem;
-}
-
-.emotion-1 {
-  margin: 1rem;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.emotion-4 {
-  display: block;
-  cursor: pointer;
-  position: relative;
-}
-
-.emotion-4>span:nth-of-type(2) {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  width: 1.25rem;
-  height: 1.25rem;
-  box-sizing: border-box;
-  border: 0.125rem solid #b9cdfc;
-  border-radius: 0.25rem;
-}
-
-.emotion-4 svg {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.emotion-4:hover,
-.emotion-4[data-focus-visible='true'] {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  background: rgba(84,94,255,0.06);
-  box-shadow: 0px 0px 0px 8px rgba(84,94,255,0.06);
-  border-radius: 100%;
-}
-
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-4[data-selected='true']>span:last-child,
-.emotion-4[data-indeterminate='true']>span:last-child {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  border-color: #175bf5;
-  background: #175bf5;
-}
-
-.emotion-4[data-selected='true'] svg,
-.emotion-4[data-indeterminate='true'] svg {
-  visibility: visible;
-  opacity: 1;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-}
-
-.emotion-4[data-disabled='true'] {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-4[data-disabled='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-5 {
-  padding: 0.125rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-6 {
-  fill: #ffffff;
-  width: 1rem;
-  height: 1rem;
-}
-
-.emotion-6 path {
-  fill: #ffffff;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.emotion-8 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  color: #1B214F;
-}
-
-<div
-  className="emotion-0"
->
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="emotion-2"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-3"
-        >
-          <label
-            className="emotion-4"
-            data-rac=""
-            data-testid="undefined_label_checkbox"
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-          >
-            <span
-              onBlur={null}
-              onFocus={null}
-              style={
-                Object {
-                  "border": 0,
-                  "clip": "rect(0 0 0 0)",
-                  "clipPath": "inset(50%)",
-                  "height": "1px",
-                  "margin": "-1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": "1px",
-                }
-              }
-            >
-              <input
-                checked={false}
-                data-testid="undefined_label_checkbox"
-                disabled={false}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                type="checkbox"
-                value="label"
-              />
-            </span>
-            <span
-              className="emotion-5"
-              onClick={[Function]}
-            >
-              <span
-                className="emotion-6"
-              />
-            </span>
-          </label>
-          <div
-            className="emotion-7"
-          >
-            <div
-              className="emotion-8"
-              data-testid="undefined_radio_label_label"
-            >
-              Option
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Updated Components/Controls/CheckBox Simple CheckBox 1`] = `
-.emotion-0 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  position: relative;
-  padding: 0.25rem;
-}
-
-.emotion-1 {
-  margin: 1rem;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  height: 3.125rem;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.emotion-4 {
-  display: block;
-  cursor: pointer;
-  position: relative;
-}
-
-.emotion-4>span:nth-of-type(2) {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  width: 1.25rem;
-  height: 1.25rem;
-  box-sizing: border-box;
-  border: 0.125rem solid #b9cdfc;
-  border-radius: 0.25rem;
-}
-
-.emotion-4 svg {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.emotion-4:hover,
-.emotion-4[data-focus-visible='true'] {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  background: rgba(84,94,255,0.06);
-  box-shadow: 0px 0px 0px 8px rgba(84,94,255,0.06);
-  border-radius: 100%;
-}
-
-.emotion-4[data-selected='true']:hover,
-.emotion-4[data-indeterminate='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-4[data-selected='true']>span:last-child,
-.emotion-4[data-indeterminate='true']>span:last-child {
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  border-color: #175bf5;
-  background: #175bf5;
-}
-
-.emotion-4[data-selected='true'] svg,
-.emotion-4[data-indeterminate='true'] svg {
-  visibility: visible;
-  opacity: 1;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-}
-
-.emotion-4[data-disabled='true'] {
-  opacity: 50%;
-  cursor: not-allowed;
-}
-
-.emotion-4[data-disabled='true']:hover {
-  background: none;
-  box-shadow: none;
-}
-
-.emotion-5 {
-  padding: 0.125rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  -webkit-justify-content: center;
-  justify-content: center;
-}
-
-.emotion-6 {
-  fill: #ffffff;
-  width: 1rem;
-  height: 1rem;
-}
-
-.emotion-6 path {
-  fill: #ffffff;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 0.125rem;
-}
-
-.emotion-8 {
-  font-family: Roboto;
-  font-weight: 400;
-  line-height: 1.25rem;
-  font-size: 0.875rem;
-  letter-spacing: 0.015625rem;
-  color: #1B214F;
-}
-
-<div
-  className="emotion-0"
->
-  <div
-    className="emotion-1"
-  >
-    <div
-      className="emotion-2"
-    >
-      <div
-        style={
-          Object {
-            "margin": 5,
-          }
-        }
-      >
-        <div
-          className="emotion-3"
-        >
-          <label
-            className="emotion-4"
-            data-rac=""
-            data-testid="undefined_label_checkbox"
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-          >
-            <span
-              onBlur={null}
-              onFocus={null}
-              style={
-                Object {
-                  "border": 0,
-                  "clip": "rect(0 0 0 0)",
-                  "clipPath": "inset(50%)",
-                  "height": "1px",
-                  "margin": "-1px",
-                  "overflow": "hidden",
-                  "padding": 0,
-                  "position": "absolute",
-                  "whiteSpace": "nowrap",
-                  "width": "1px",
-                }
-              }
-            >
-              <input
-                checked={false}
-                data-testid="undefined_label_checkbox"
-                disabled={false}
-                onBlur={[Function]}
-                onChange={[Function]}
-                onClick={[Function]}
-                onDragStart={[Function]}
-                onFocus={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                onMouseDown={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                onMouseUp={[Function]}
-                onTouchCancel={[Function]}
-                onTouchEnd={[Function]}
-                onTouchMove={[Function]}
-                onTouchStart={[Function]}
-                type="checkbox"
-                value="label"
-              />
-            </span>
-            <span
-              className="emotion-5"
-              onClick={[Function]}
-            >
-              <span
-                className="emotion-6"
-              />
-            </span>
-          </label>
-          <div
-            className="emotion-7"
-          >
-            <div
-              className="emotion-8"
-              data-testid="undefined_radio_label_label"
-            >
-              Label
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;