@wordpress/components 32.4.1-next.v.202603161435.0 → 32.5.0

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -18,13 +18,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-6 {
   font-size: 11px;
   font-weight: 499;
   line-height: 1.4;
@@ -34,7 +27,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   padding: 0;
 }
 
-.emotion-8 {
+.emotion-6 {
   background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
@@ -47,25 +40,25 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   height: 40px;
 }
 
-.emotion-8:hover {
+.emotion-6:hover {
   border-color: #ccc;
 }
 
-.emotion-8:focus-within {
+.emotion-6:focus-within {
   z-index: 1;
   outline: 1.5px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: 1px;
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-8[data-indicator-animated]::before {
+  .emotion-6[data-indicator-animated]::before {
     transition-property: transform,border-radius;
     transition-duration: 0.2s;
     transition-timing-function: ease-out;
   }
 }
 
-.emotion-8::before {
+.emotion-6::before {
   content: '';
   position: absolute;
   pointer-events: none;
@@ -88,7 +81,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   		);
 }
 
-.emotion-10 {
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -101,7 +94,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   flex: 1;
 }
 
-.emotion-12 {
+.emotion-10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -146,27 +139,27 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-12 {
+  .emotion-10 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-12::-moz-focus-inner {
+.emotion-10::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-12[disabled],
-.emotion-12[aria-disabled='true'] {
+.emotion-10[disabled],
+.emotion-10[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
-.emotion-13 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -175,7 +168,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   line-height: 1;
 }
 
-.emotion-17 {
+.emotion-15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -218,23 +211,23 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-17 {
+  .emotion-15 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-17::-moz-focus-inner {
+.emotion-15::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-17[disabled],
-.emotion-17[aria-disabled='true'] {
+.emotion-15[disabled],
+.emotion-15[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-15:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -245,41 +238,38 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
-      <div
-        class="emotion-4 emotion-5"
+      <label
+        class="components-base-control__label emotion-4 emotion-5"
+        for="wp-components-base-control-19"
       >
-        <span
-          class="components-base-control__label emotion-6 emotion-7"
-        >
-          Test Toggle Group Control
-        </span>
-      </div>
+        Test Toggle Group Control
+      </label>
       <div
         aria-label="Test Toggle Group Control"
-        class="components-toggle-group-control emotion-8 emotion-9"
+        class="components-toggle-group-control emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-12"
+        id="wp-components-base-control-19"
         role="radiogroup"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-8 emotion-9"
         >
           <button
             aria-checked="true"
             aria-label="Uppercase"
-            class="emotion-12 components-toggle-group-control-option-base"
+            class="emotion-10 components-toggle-group-control-option-base"
             data-active-item="true"
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-12-32"
+            id="wp-components-base-control-19-40"
             role="radio"
             type="button"
             value="uppercase"
           >
             <div
-              class="emotion-13 emotion-14"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-hidden="true"
@@ -297,22 +287,22 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
           </button>
         </div>
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-8 emotion-9"
         >
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-17 components-toggle-group-control-option-base"
+            class="emotion-15 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-12-33"
+            id="wp-components-base-control-19-41"
             role="radio"
             type="button"
             value="lowercase"
           >
             <div
-              class="emotion-13 emotion-14"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-hidden="true"
@@ -359,13 +349,6 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-6 {
   font-size: 11px;
   font-weight: 499;
   line-height: 1.4;
@@ -375,7 +358,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   padding: 0;
 }
 
-.emotion-8 {
+.emotion-6 {
   background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
@@ -388,25 +371,25 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   height: 40px;
 }
 
-.emotion-8:hover {
+.emotion-6:hover {
   border-color: #ccc;
 }
 
-.emotion-8:focus-within {
+.emotion-6:focus-within {
   z-index: 1;
   outline: 1.5px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: 1px;
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-8[data-indicator-animated]::before {
+  .emotion-6[data-indicator-animated]::before {
     transition-property: transform,border-radius;
     transition-duration: 0.2s;
     transition-timing-function: ease-out;
   }
 }
 
-.emotion-8::before {
+.emotion-6::before {
   content: '';
   position: absolute;
   pointer-events: none;
@@ -429,7 +412,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   		);
 }
 
-.emotion-10 {
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -442,7 +425,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   flex: 1;
 }
 
-.emotion-12 {
+.emotion-10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -481,27 +464,27 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-12 {
+  .emotion-10 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-12::-moz-focus-inner {
+.emotion-10::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-12[disabled],
-.emotion-12[aria-disabled='true'] {
+.emotion-10[disabled],
+.emotion-10[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
-.emotion-13 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -517,62 +500,59 @@ exports[`ToggleGroupControl controlled should render correctly with text options
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
-      <div
-        class="emotion-4 emotion-5"
+      <label
+        class="components-base-control__label emotion-4 emotion-5"
+        for="wp-components-base-control-18"
       >
-        <span
-          class="components-base-control__label emotion-6 emotion-7"
-        >
-          Test Toggle Group Control
-        </span>
-      </div>
+        Test Toggle Group Control
+      </label>
       <div
         aria-label="Test Toggle Group Control"
-        class="components-toggle-group-control emotion-8 emotion-9"
+        class="components-toggle-group-control emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-11"
+        id="wp-components-base-control-18"
         role="radiogroup"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-8 emotion-9"
         >
           <button
             aria-checked="false"
             aria-label="R"
-            class="emotion-12 components-toggle-group-control-option-base"
+            class="emotion-10 components-toggle-group-control-option-base"
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-11-30"
+            id="wp-components-base-control-18-38"
             role="radio"
             type="button"
             value="rigas"
           >
             <div
-              class="emotion-13 emotion-14"
+              class="emotion-11 emotion-12"
             >
               R
             </div>
           </button>
         </div>
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-8 emotion-9"
         >
           <button
             aria-checked="false"
             aria-label="J"
-            class="emotion-12 components-toggle-group-control-option-base"
+            class="emotion-10 components-toggle-group-control-option-base"
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-11-31"
+            id="wp-components-base-control-18-39"
             role="radio"
             type="button"
             value="jack"
           >
             <div
-              class="emotion-13 emotion-14"
+              class="emotion-11 emotion-12"
             >
               J
             </div>
@@ -608,13 +588,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-6 {
   font-size: 11px;
   font-weight: 499;
   line-height: 1.4;
@@ -624,7 +597,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   padding: 0;
 }
 
-.emotion-8 {
+.emotion-6 {
   background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
@@ -637,25 +610,25 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   height: 40px;
 }
 
-.emotion-8:hover {
+.emotion-6:hover {
   border-color: #ccc;
 }
 
-.emotion-8:focus-within {
+.emotion-6:focus-within {
   z-index: 1;
   outline: 1.5px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: 1px;
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-8[data-indicator-animated]::before {
+  .emotion-6[data-indicator-animated]::before {
     transition-property: transform,border-radius;
     transition-duration: 0.2s;
     transition-timing-function: ease-out;
   }
 }
 
-.emotion-8::before {
+.emotion-6::before {
   content: '';
   position: absolute;
   pointer-events: none;
@@ -678,7 +651,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   		);
 }
 
-.emotion-10 {
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -691,7 +664,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   flex: 1;
 }
 
-.emotion-12 {
+.emotion-10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -736,27 +709,27 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-12 {
+  .emotion-10 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-12::-moz-focus-inner {
+.emotion-10::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-12[disabled],
-.emotion-12[aria-disabled='true'] {
+.emotion-10[disabled],
+.emotion-10[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
-.emotion-13 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -765,7 +738,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   line-height: 1;
 }
 
-.emotion-17 {
+.emotion-15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -808,23 +781,23 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-17 {
+  .emotion-15 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-17::-moz-focus-inner {
+.emotion-15::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-17[disabled],
-.emotion-17[aria-disabled='true'] {
+.emotion-15[disabled],
+.emotion-15[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-15:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -835,41 +808,38 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
-      <div
-        class="emotion-4 emotion-5"
+      <label
+        class="components-base-control__label emotion-4 emotion-5"
+        for="wp-components-base-control-1"
       >
-        <span
-          class="components-base-control__label emotion-6 emotion-7"
-        >
-          Test Toggle Group Control
-        </span>
-      </div>
+        Test Toggle Group Control
+      </label>
       <div
         aria-label="Test Toggle Group Control"
-        class="components-toggle-group-control emotion-8 emotion-9"
+        class="components-toggle-group-control emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-1"
+        id="wp-components-base-control-1"
         role="radiogroup"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-8 emotion-9"
         >
           <button
             aria-checked="true"
             aria-label="Uppercase"
-            class="emotion-12 components-toggle-group-control-option-base"
+            class="emotion-10 components-toggle-group-control-option-base"
             data-active-item="true"
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-1-2"
+            id="wp-components-base-control-1-2"
             role="radio"
             type="button"
             value="uppercase"
           >
             <div
-              class="emotion-13 emotion-14"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-hidden="true"
@@ -887,22 +857,22 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
           </button>
         </div>
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-8 emotion-9"
         >
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-17 components-toggle-group-control-option-base"
+            class="emotion-15 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-1-3"
+            id="wp-components-base-control-1-3"
             role="radio"
             type="button"
             value="lowercase"
           >
             <div
-              class="emotion-13 emotion-14"
+              class="emotion-11 emotion-12"
             >
               <svg
                 aria-hidden="true"
@@ -943,13 +913,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-4 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-6 {
   font-size: 11px;
   font-weight: 499;
   line-height: 1.4;
@@ -959,7 +922,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   padding: 0;
 }
 
-.emotion-8 {
+.emotion-6 {
   background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
@@ -972,25 +935,25 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   height: 40px;
 }
 
-.emotion-8:hover {
+.emotion-6:hover {
   border-color: #ccc;
 }
 
-.emotion-8:focus-within {
+.emotion-6:focus-within {
   z-index: 1;
   outline: 1.5px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: 1px;
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-8[data-indicator-animated]::before {
+  .emotion-6[data-indicator-animated]::before {
     transition-property: transform,border-radius;
     transition-duration: 0.2s;
     transition-timing-function: ease-out;
   }
 }
 
-.emotion-8::before {
+.emotion-6::before {
   content: '';
   position: absolute;
   pointer-events: none;
@@ -1013,7 +976,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   		);
 }
 
-.emotion-10 {
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1026,7 +989,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   flex: 1;
 }
 
-.emotion-12 {
+.emotion-10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1065,27 +1028,27 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 @media not ( prefers-reduced-motion ) {
-  .emotion-12 {
+  .emotion-10 {
     -webkit-transition: color 160ms linear,font-weight 60ms linear;
     transition: color 160ms linear,font-weight 60ms linear;
   }
 }
 
-.emotion-12::-moz-focus-inner {
+.emotion-10::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-12[disabled],
-.emotion-12[aria-disabled='true'] {
+.emotion-10[disabled],
+.emotion-10[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
+.emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
-.emotion-13 {
+.emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1101,62 +1064,59 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
     <div
       class="components-base-control__field emotion-2 emotion-3"
     >
-      <div
-        class="emotion-4 emotion-5"
+      <label
+        class="components-base-control__label emotion-4 emotion-5"
+        for="wp-components-base-control-0"
       >
-        <span
-          class="components-base-control__label emotion-6 emotion-7"
-        >
-          Test Toggle Group Control
-        </span>
-      </div>
+        Test Toggle Group Control
+      </label>
       <div
         aria-label="Test Toggle Group Control"
-        class="components-toggle-group-control emotion-8 emotion-9"
+        class="components-toggle-group-control emotion-6 emotion-7"
         data-wp-c16t="true"
         data-wp-component="ToggleGroupControl"
-        id="toggle-group-control-as-radio-group-0"
+        id="wp-components-base-control-0"
         role="radiogroup"
       >
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-8 emotion-9"
         >
           <button
             aria-checked="false"
             aria-label="R"
-            class="emotion-12 components-toggle-group-control-option-base"
+            class="emotion-10 components-toggle-group-control-option-base"
             data-value="rigas"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-0-0"
+            id="wp-components-base-control-0-0"
             role="radio"
             type="button"
             value="rigas"
           >
             <div
-              class="emotion-13 emotion-14"
+              class="emotion-11 emotion-12"
             >
               R
             </div>
           </button>
         </div>
         <div
-          class="emotion-10 emotion-11"
+          class="emotion-8 emotion-9"
         >
           <button
             aria-checked="false"
             aria-label="J"
-            class="emotion-12 components-toggle-group-control-option-base"
+            class="emotion-10 components-toggle-group-control-option-base"
             data-value="jack"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
-            id="toggle-group-control-as-radio-group-0-1"
+            id="wp-components-base-control-0-1"
             role="radio"
             type="button"
             value="jack"
           >
             <div
-              class="emotion-13 emotion-14"
+              class="emotion-11 emotion-12"
             >
               J
             </div>