@charcoal-ui/react 4.0.0-beta.1 → 4.0.0-beta.11

package/src/components/Radio/__snapshots__/index.story.storyshot

@@ -1,189 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Radio Basic 1`] = `
-.c2 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 4px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.c2[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c3[type='radio'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 6px;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 999999px;
-  background-color: var(--charcoal-surface1);
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:disabled {
-  cursor: default;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio'][aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface1-hover);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio'][aria-disabled='false']:active {
-  background-color: var(--charcoal-surface1-press);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
-.c3[type='radio'][aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
-.c3[type='radio'][aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--charcoal-text3);
-}
-
-.c3[type='radio']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c3[type='radio']:checked::after {
-  content: '';
-  display: block;
-  width: 8px;
-  height: 8px;
-  pointer-events: none;
-  background-color: var(--charcoal-text5);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio']:checked[aria-disabled='false']:hover {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
-.c3[type='radio']:checked[aria-disabled='false']:hover::after {
-  background-color: var(--charcoal-text5-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio']:checked[aria-disabled='false']:active {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
-.c3[type='radio']:checked[aria-disabled='false']:active::after {
-  background-color: var(--charcoal-text5-press);
-}
-
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 8px;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 24px;
-}
-
+exports[`Storybook Tests react/Radio Default 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    style={
+      {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
   >
     <div
-      aria-label="label"
+      aria-label="default story"
       aria-orientation="vertical"
-      className="c1"
+      className="charcoal-radio-group"
       role="radiogroup"
     >
       <label
         aria-disabled={false}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={true}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="default_story"
           onChange={[Function]}
           type="radio"
           value="1"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           1
@@ -191,20 +42,20 @@ exports[`Storybook Tests Radio Basic 1`] = `
       </label>
       <label
         aria-disabled={false}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="default_story"
           onChange={[Function]}
           type="radio"
           value="2"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           2
@@ -212,20 +63,20 @@ exports[`Storybook Tests Radio Basic 1`] = `
       </label>
       <label
         aria-disabled={false}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="default_story"
           onChange={[Function]}
           type="radio"
           value="3"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           3
@@ -236,190 +87,42 @@ exports[`Storybook Tests Radio Basic 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Radio Disabled 1`] = `
-.c2 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 4px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.c2[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c3[type='radio'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 6px;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 999999px;
-  background-color: var(--charcoal-surface1);
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:disabled {
-  cursor: default;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio'][aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface1-hover);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio'][aria-disabled='false']:active {
-  background-color: var(--charcoal-surface1-press);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
-.c3[type='radio'][aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
-.c3[type='radio'][aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--charcoal-text3);
-}
-
-.c3[type='radio']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c3[type='radio']:checked::after {
-  content: '';
-  display: block;
-  width: 8px;
-  height: 8px;
-  pointer-events: none;
-  background-color: var(--charcoal-text5);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio']:checked[aria-disabled='false']:hover {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
-.c3[type='radio']:checked[aria-disabled='false']:hover::after {
-  background-color: var(--charcoal-text5-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio']:checked[aria-disabled='false']:active {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
-.c3[type='radio']:checked[aria-disabled='false']:active::after {
-  background-color: var(--charcoal-text5-press);
-}
-
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 8px;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 24px;
-}
-
+exports[`Storybook Tests react/Radio Disabled 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    style={
+      {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
   >
     <div
-      aria-label="label"
+      aria-disabled={true}
+      aria-label="disabled_stroy"
       aria-orientation="vertical"
-      className="c1"
+      className="charcoal-radio-group"
       role="radiogroup"
     >
       <label
         aria-disabled={true}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={true}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="disabled story"
           onChange={[Function]}
           type="radio"
           value="1"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           1
@@ -427,20 +130,20 @@ exports[`Storybook Tests Radio Disabled 1`] = `
       </label>
       <label
         aria-disabled={true}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="disabled story"
           onChange={[Function]}
           type="radio"
           value="2"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           2
@@ -448,20 +151,20 @@ exports[`Storybook Tests Radio Disabled 1`] = `
       </label>
       <label
         aria-disabled={true}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="disabled story"
           onChange={[Function]}
           type="radio"
           value="3"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           3
@@ -472,191 +175,42 @@ exports[`Storybook Tests Radio Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Radio Invalid 1`] = `
-.c2 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 4px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.c2[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c3[type='radio'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 6px;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 999999px;
-  background-color: var(--charcoal-surface1);
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:disabled {
-  cursor: default;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio'][aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface1-hover);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio'][aria-disabled='false']:active {
-  background-color: var(--charcoal-surface1-press);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
-.c3[type='radio'][aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
-.c3[type='radio'][aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--charcoal-text3);
-}
-
-.c3[type='radio']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c3[type='radio']:checked::after {
-  content: '';
-  display: block;
-  width: 8px;
-  height: 8px;
-  pointer-events: none;
-  background-color: var(--charcoal-text5);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio']:checked[aria-disabled='false']:hover {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
-.c3[type='radio']:checked[aria-disabled='false']:hover::after {
-  background-color: var(--charcoal-text5-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio']:checked[aria-disabled='false']:active {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
-.c3[type='radio']:checked[aria-disabled='false']:active::after {
-  background-color: var(--charcoal-text5-press);
-}
-
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 8px;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 24px;
-}
-
+exports[`Storybook Tests react/Radio Invalid 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    style={
+      {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
   >
     <div
       aria-invalid={true}
-      aria-label="label"
+      aria-label="invalid story"
       aria-orientation="vertical"
-      className="c1"
+      className="charcoal-radio-group"
       role="radiogroup"
     >
       <label
         aria-disabled={false}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={true}
           checked={true}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="invalid_story"
           onChange={[Function]}
           type="radio"
           value="1"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           1
@@ -664,20 +218,20 @@ exports[`Storybook Tests Radio Invalid 1`] = `
       </label>
       <label
         aria-disabled={false}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={true}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="invalid_story"
           onChange={[Function]}
           type="radio"
           value="2"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           2
@@ -685,20 +239,20 @@ exports[`Storybook Tests Radio Invalid 1`] = `
       </label>
       <label
         aria-disabled={false}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={true}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="invalid_story"
           onChange={[Function]}
           type="radio"
           value="3"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           3
@@ -709,190 +263,41 @@ exports[`Storybook Tests Radio Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Radio PartialDisabled 1`] = `
-.c2 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 4px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.c2[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c3[type='radio'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 6px;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 999999px;
-  background-color: var(--charcoal-surface1);
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:disabled {
-  cursor: default;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio'][aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface1-hover);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio'][aria-disabled='false']:active {
-  background-color: var(--charcoal-surface1-press);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
-.c3[type='radio'][aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
-.c3[type='radio'][aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--charcoal-text3);
-}
-
-.c3[type='radio']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c3[type='radio']:checked::after {
-  content: '';
-  display: block;
-  width: 8px;
-  height: 8px;
-  pointer-events: none;
-  background-color: var(--charcoal-text5);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio']:checked[aria-disabled='false']:hover {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
-.c3[type='radio']:checked[aria-disabled='false']:hover::after {
-  background-color: var(--charcoal-text5-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio']:checked[aria-disabled='false']:active {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
-.c3[type='radio']:checked[aria-disabled='false']:active::after {
-  background-color: var(--charcoal-text5-press);
-}
-
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 8px;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 24px;
-}
-
+exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    style={
+      {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
   >
     <div
-      aria-label="label"
+      aria-label="partial disabled story"
       aria-orientation="vertical"
-      className="c1"
+      className="charcoal-radio-group"
       role="radiogroup"
     >
       <label
         aria-disabled={false}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={true}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="partial_disabled_story"
           onChange={[Function]}
           type="radio"
           value="1"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           1
@@ -900,20 +305,20 @@ exports[`Storybook Tests Radio PartialDisabled 1`] = `
       </label>
       <label
         aria-disabled={true}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="partial_disabled_story"
           onChange={[Function]}
           type="radio"
           value="2"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           2
@@ -921,20 +326,20 @@ exports[`Storybook Tests Radio PartialDisabled 1`] = `
       </label>
       <label
         aria-disabled={false}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="partial_disabled_story"
           onChange={[Function]}
           type="radio"
           value="3"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           3
@@ -945,190 +350,41 @@ exports[`Storybook Tests Radio PartialDisabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Radio Readonly 1`] = `
-.c2 {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-gap: 4px;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.c2[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c3[type='radio'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: block;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 6px;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 999999px;
-  background-color: var(--charcoal-surface1);
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:disabled {
-  cursor: default;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio'][aria-disabled='false']:hover {
-  background-color: var(--charcoal-surface1-hover);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio'][aria-disabled='false']:active {
-  background-color: var(--charcoal-surface1-press);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus,
-.c3[type='radio'][aria-disabled='false']:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c3[type='radio'][aria-disabled='false']:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
-.c3[type='radio'][aria-disabled='false']:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true'] {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:disabled):not([aria-disabled])[aria-invalid='true']:focus,
-.c3[type='radio'][aria-disabled='false'][aria-invalid='true']:focus {
-  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
-}
-
-.c3[type='radio']:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--charcoal-text3);
-}
-
-.c3[type='radio']:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c3[type='radio']:checked::after {
-  content: '';
-  display: block;
-  width: 8px;
-  height: 8px;
-  pointer-events: none;
-  background-color: var(--charcoal-text5);
-  border-radius: 999999px;
-  -webkit-transition: 0.2s background-color,0.2s box-shadow;
-  transition: 0.2s background-color,0.2s box-shadow;
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
-.c3[type='radio']:checked[aria-disabled='false']:hover {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
-.c3[type='radio']:checked[aria-disabled='false']:hover::after {
-  background-color: var(--charcoal-text5-hover);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
-.c3[type='radio']:checked[aria-disabled='false']:active {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c3[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
-.c3[type='radio']:checked[aria-disabled='false']:active::after {
-  background-color: var(--charcoal-text5-press);
-}
-
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-  color: var(--charcoal-text2);
-}
-
-.c4::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c4::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-.c1 {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 8px;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  gap: 24px;
-}
-
+exports[`Storybook Tests react/Radio Readonly 1`] = `
 <div
   data-dark={false}
 >
   <div
-    className="c0"
+    style={
+      {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": 24,
+      }
+    }
   >
     <div
-      aria-label="label"
+      aria-label="readonly story"
       aria-orientation="vertical"
-      className="c1"
+      className="charcoal-radio-group"
       role="radiogroup"
     >
       <label
         aria-disabled={false}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={true}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={false}
-          name="name"
+          name="readonly_story"
           onChange={[Function]}
           type="radio"
           value="1"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           1
@@ -1136,20 +392,20 @@ exports[`Storybook Tests Radio Readonly 1`] = `
       </label>
       <label
         aria-disabled={true}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="readonly_story"
           onChange={[Function]}
           type="radio"
           value="2"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           2
@@ -1157,20 +413,20 @@ exports[`Storybook Tests Radio Readonly 1`] = `
       </label>
       <label
         aria-disabled={true}
-        className="c2"
+        className="charcoal-radio__label"
       >
         <input
           aria-invalid={false}
           checked={false}
-          className="c3"
+          className="charcoal-radio-input"
           disabled={true}
-          name="name"
+          name="readonly_story"
           onChange={[Function]}
           type="radio"
           value="3"
         />
         <div
-          className="c4"
+          className="charcoal-radio__label_div"
         >
           Value 
           3