From 752b7eb85153b457e074f25e87de6095d782e33a Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 15 Aug 2024 10:51:29 -0700
Subject: [PATCH] Update downstream snapshots

---
 .../__snapshots__/color_picker.test.tsx.snap  |    4 +-
 .../quick_select_popover.test.tsx.snap        |    2 +-
 .../checkbox_group.test.tsx.snap              |    2 +-
 .../described_form_group.test.tsx.snap        |    2 +-
 .../field_password.test.tsx.snap              |    6 +-
 .../form_control_layout.test.tsx.snap         |    4 +-
 .../__snapshots__/form_fieldset.test.tsx.snap |    2 +-
 .../__snapshots__/form_row.test.tsx.snap      | 1240 ++++++++++++++++-
 .../__snapshots__/radio_group.test.tsx.snap   |    2 +-
 .../__snapshots__/super_select.test.tsx.snap  |    4 +-
 .../inline_edit_form.test.tsx.snap            |    2 +-
 .../__snapshots__/key_pad_menu.test.tsx.snap  |    2 +-
 12 files changed, 1236 insertions(+), 36 deletions(-)

diff --git a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
index 71d6ac1e6e8..c94923514f1 100644
--- a/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap
@@ -570,7 +570,7 @@ exports[`EuiColorPicker prepend and append 1`] = `
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         prepend
       </label>
@@ -619,7 +619,7 @@ exports[`EuiColorPicker prepend and append 1`] = `
       class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         append
       </label>
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index f0a8e28e33c..8e11651e26b 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -316,7 +316,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             id="generated-id"
           >
             <label
-              class="euiFormLabel"
+              class="euiFormLabel emotion-euiFormLabel"
             >
               Refresh every
             </label>
diff --git a/packages/eui/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap b/packages/eui/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap
index a2d9bbc2fbc..4181c4ed6b7 100644
--- a/packages/eui/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap
+++ b/packages/eui/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = `
   class="euiCheckboxGroup emotion-euiCheckboxGroup"
 >
   <legend
-    class="euiFormLegend"
+    class="euiFormLegend emotion-euiFormLegend"
   >
     A legend
   </legend>
diff --git a/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap b/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
index 19e7eea0f8c..fadf9767ebe 100644
--- a/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
+++ b/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap
@@ -308,7 +308,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
       >
         <label
           aria-invalid="true"
-          class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
+          class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid emotion-euiFormLabel-invalid"
           for="generated-id"
           id="generated-id-label"
         >
diff --git a/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index 39845a04ec3..260aeb8580b 100644
--- a/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/packages/eui/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -102,7 +102,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       String
     </label>
@@ -299,7 +299,7 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
     class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       String
     </label>
@@ -333,7 +333,7 @@ exports[`EuiFieldPassword props prepend and append is rendered 1`] = `
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       String
     </label>
diff --git a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
index 6093a747678..b711adb7d68 100644
--- a/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
+++ b/packages/eui/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.tsx.snap
@@ -369,7 +369,7 @@ exports[`EuiFormControlLayout props one append string is rendered 1`] = `
     class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       1
     </label>
@@ -421,7 +421,7 @@ exports[`EuiFormControlLayout props one prepend string is rendered 1`] = `
     class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
   >
     <label
-      class="euiFormLabel"
+      class="euiFormLabel emotion-euiFormLabel"
     >
       1
     </label>
diff --git a/packages/eui/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap b/packages/eui/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap
index 20203c9e495..aab6d4f6a24 100644
--- a/packages/eui/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap
+++ b/packages/eui/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`EuiFormFieldset is rendered 1`] = `
 exports[`EuiFormFieldset props legend is rendered 1`] = `
 <fieldset>
   <legend
-    class="euiFormLegend"
+    class="euiFormLegend emotion-euiFormLegend"
   >
     Legend
   </legend>
diff --git a/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap b/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap
index d63486f1acb..d8c90eed485 100644
--- a/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap
+++ b/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap
@@ -28,13 +28,313 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = `
         type="label"
       >
         <label
-          className="euiFormLabel euiFormRow__label"
+          css="unknown styles"
           htmlFor="generated-id"
           id="generated-id-label"
         >
-          <span>
-            Label
-          </span>
+          <Insertion
+            cache={
+              {
+                "insert": [Function],
+                "inserted": {
+                  "1hahvl7-euiFormLabel-focused": true,
+                  "1sg06nd-euiFormErrorText": true,
+                  "1u652sy-euiFormHelpText": true,
+                  "hzubt8-euiFormLabel-invalid": true,
+                  "hzx95w-euiTestCss": true,
+                  "xxpepq-euiFormLabel": true,
+                },
+                "key": "css",
+                "nonce": undefined,
+                "registered": {
+                  "css-hzx95w-euiTestCss": "color:red;label:euiTestCss;",
+                },
+                "sheet": StyleSheet {
+                  "_alreadyInsertedOrderInsensitiveRule": true,
+                  "_insertTag": [Function],
+                  "before": null,
+                  "container": <head>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-4ieeuw-euiColorMode-LIGHT{color:#343741;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel{transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1hahvl7-euiFormLabel-focused{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#07C;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-1hahvl7-euiFormLabel-focused{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1hahvl7-euiFormLabel-focused:where([for]){cursor:pointer;}
+                    </style>
+                  </head>,
+                  "ctr": 12,
+                  "insertionPoint": undefined,
+                  "isSpeedy": false,
+                  "key": "css",
+                  "nonce": undefined,
+                  "prepend": undefined,
+                  "tags": [
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1hahvl7-euiFormLabel-focused{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#07C;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-1hahvl7-euiFormLabel-focused{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1hahvl7-euiFormLabel-focused:where([for]){cursor:pointer;}
+                    </style>,
+                  ],
+                },
+              }
+            }
+            isStringTag={true}
+            serialized={
+              {
+                "map": undefined,
+                "name": "xxpepq-euiFormLabel",
+                "next": undefined,
+                "styles": "
+    font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;
+    font-weight: 600;
+    
+  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
+  word-break: break-word;
+
+   display:inline-block;@media screen and (prefers-reduced-motion: no-preference){transition:color 150ms cubic-bezier(.694, .0482, .335, 1);};label:euiFormLabel;;;
+      &:where([for]) {
+        cursor: pointer;
+      }
+    ;;;",
+                "toString": [Function],
+              }
+            }
+          />
+          <label
+            className="euiFormLabel euiFormRow__label emotion-euiFormLabel"
+            htmlFor="generated-id"
+            id="generated-id-label"
+          >
+            <span>
+              Label
+            </span>
+          </label>
         </label>
       </EuiFormLabel>
     </div>
@@ -79,13 +379,313 @@ exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = `
         type="label"
       >
         <label
-          className="euiFormLabel euiFormRow__label"
+          css="unknown styles"
           htmlFor="generated-id"
           id="generated-id-label"
         >
-          <span>
-            Label
-          </span>
+          <Insertion
+            cache={
+              {
+                "insert": [Function],
+                "inserted": {
+                  "1hahvl7-euiFormLabel-focused": true,
+                  "1sg06nd-euiFormErrorText": true,
+                  "1u652sy-euiFormHelpText": true,
+                  "hzubt8-euiFormLabel-invalid": true,
+                  "hzx95w-euiTestCss": true,
+                  "xxpepq-euiFormLabel": true,
+                },
+                "key": "css",
+                "nonce": undefined,
+                "registered": {
+                  "css-hzx95w-euiTestCss": "color:red;label:euiTestCss;",
+                },
+                "sheet": StyleSheet {
+                  "_alreadyInsertedOrderInsensitiveRule": true,
+                  "_insertTag": [Function],
+                  "before": null,
+                  "container": <head>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-4ieeuw-euiColorMode-LIGHT{color:#343741;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel{transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1hahvl7-euiFormLabel-focused{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#07C;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-1hahvl7-euiFormLabel-focused{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1hahvl7-euiFormLabel-focused:where([for]){cursor:pointer;}
+                    </style>
+                  </head>,
+                  "ctr": 12,
+                  "insertionPoint": undefined,
+                  "isSpeedy": false,
+                  "key": "css",
+                  "nonce": undefined,
+                  "prepend": undefined,
+                  "tags": [
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1hahvl7-euiFormLabel-focused{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#07C;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-1hahvl7-euiFormLabel-focused{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1hahvl7-euiFormLabel-focused:where([for]){cursor:pointer;}
+                    </style>,
+                  ],
+                },
+              }
+            }
+            isStringTag={true}
+            serialized={
+              {
+                "map": undefined,
+                "name": "xxpepq-euiFormLabel",
+                "next": undefined,
+                "styles": "
+    font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;
+    font-weight: 600;
+    
+  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
+  word-break: break-word;
+
+   display:inline-block;@media screen and (prefers-reduced-motion: no-preference){transition:color 150ms cubic-bezier(.694, .0482, .335, 1);};label:euiFormLabel;;;
+      &:where([for]) {
+        cursor: pointer;
+      }
+    ;;;",
+                "toString": [Function],
+              }
+            }
+          />
+          <label
+            className="euiFormLabel euiFormRow__label emotion-euiFormLabel"
+            htmlFor="generated-id"
+            id="generated-id-label"
+          >
+            <span>
+              Label
+            </span>
+          </label>
         </label>
       </EuiFormLabel>
     </div>
@@ -130,13 +730,313 @@ exports[`EuiFormRow behavior onFocus is called in child 1`] = `
         type="label"
       >
         <label
-          className="euiFormLabel euiFormRow__label euiFormLabel-isFocused"
+          css="unknown styles"
           htmlFor="generated-id"
           id="generated-id-label"
         >
-          <span>
-            Label
-          </span>
+          <Insertion
+            cache={
+              {
+                "insert": [Function],
+                "inserted": {
+                  "1hahvl7-euiFormLabel-focused": true,
+                  "1sg06nd-euiFormErrorText": true,
+                  "1u652sy-euiFormHelpText": true,
+                  "hzubt8-euiFormLabel-invalid": true,
+                  "hzx95w-euiTestCss": true,
+                  "xxpepq-euiFormLabel": true,
+                },
+                "key": "css",
+                "nonce": undefined,
+                "registered": {
+                  "css-hzx95w-euiTestCss": "color:red;label:euiTestCss;",
+                },
+                "sheet": StyleSheet {
+                  "_alreadyInsertedOrderInsensitiveRule": true,
+                  "_insertTag": [Function],
+                  "before": null,
+                  "container": <head>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-4ieeuw-euiColorMode-LIGHT{color:#343741;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-xxpepq-euiFormLabel{transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-xxpepq-euiFormLabel{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel-focused{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#07C;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel-focused{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel-focused:where([for]){cursor:pointer;}
+                    </style>
+                  </head>,
+                  "ctr": 12,
+                  "insertionPoint": undefined,
+                  "isSpeedy": false,
+                  "key": "css",
+                  "nonce": undefined,
+                  "prepend": undefined,
+                  "tags": [
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-xxpepq-euiFormLabel{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel-focused{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#07C;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel-focused{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel-focused:where([for]){cursor:pointer;}
+                    </style>,
+                  ],
+                },
+              }
+            }
+            isStringTag={true}
+            serialized={
+              {
+                "map": undefined,
+                "name": "1hahvl7-euiFormLabel-focused",
+                "next": undefined,
+                "styles": "
+    font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;
+    font-weight: 600;
+    
+  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
+  word-break: break-word;
+
+   display:inline-block;@media screen and (prefers-reduced-motion: no-preference){transition:color 150ms cubic-bezier(.694, .0482, .335, 1);};label:euiFormLabel;;;
+      &:where([for]) {
+        cursor: pointer;
+      }
+    ;;color:#07C;;label:focused;;;",
+                "toString": [Function],
+              }
+            }
+          />
+          <label
+            className="euiFormLabel euiFormRow__label euiFormLabel-isFocused emotion-euiFormLabel-focused"
+            htmlFor="generated-id"
+            id="generated-id-label"
+          >
+            <span>
+              Label
+            </span>
+          </label>
         </label>
       </EuiFormLabel>
     </div>
@@ -181,13 +1081,313 @@ exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] =
         type="label"
       >
         <label
-          className="euiFormLabel euiFormRow__label euiFormLabel-isFocused"
+          css="unknown styles"
           htmlFor="generated-id"
           id="generated-id-label"
         >
-          <span>
-            Label
-          </span>
+          <Insertion
+            cache={
+              {
+                "insert": [Function],
+                "inserted": {
+                  "1hahvl7-euiFormLabel-focused": true,
+                  "1sg06nd-euiFormErrorText": true,
+                  "1u652sy-euiFormHelpText": true,
+                  "hzubt8-euiFormLabel-invalid": true,
+                  "hzx95w-euiTestCss": true,
+                  "xxpepq-euiFormLabel": true,
+                },
+                "key": "css",
+                "nonce": undefined,
+                "registered": {
+                  "css-hzx95w-euiTestCss": "color:red;label:euiTestCss;",
+                },
+                "sheet": StyleSheet {
+                  "_alreadyInsertedOrderInsensitiveRule": true,
+                  "_insertTag": [Function],
+                  "before": null,
+                  "container": <head>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-4ieeuw-euiColorMode-LIGHT{color:#343741;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-xxpepq-euiFormLabel{transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-xxpepq-euiFormLabel{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel-focused{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#07C;}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel-focused{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel-focused:where([for]){cursor:pointer;}
+                    </style>
+                  </head>,
+                  "ctr": 12,
+                  "insertionPoint": undefined,
+                  "isSpeedy": false,
+                  "key": "css",
+                  "nonce": undefined,
+                  "prepend": undefined,
+                  "tags": [
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzx95w-euiTestCss{color:red;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#BD271E;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-hzubt8-euiFormLabel-invalid{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-hzubt8-euiFormLabel-invalid:where([for]){cursor:pointer;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1sg06nd-euiFormErrorText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#BD271E;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-1u652sy-euiFormHelpText{padding-block-start:4px;font-size:0.8571rem;line-height:1.1429rem;color:#69707D;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.css-xxpepq-euiFormLabel{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .css-xxpepq-euiFormLabel:where([for]){cursor:pointer;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel-focused{font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;font-weight:600;overflow-wrap:break-word!important;word-break:break-word;display:inline-block;color:#07C;}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      @media screen and (prefers-reduced-motion: no-preference){.emotion-euiFormLabel-focused{-webkit-transition:color 150ms cubic-bezier(.694, .0482, .335, 1);transition:color 150ms cubic-bezier(.694, .0482, .335, 1);}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+                      
+                      .emotion-euiFormLabel-focused:where([for]){cursor:pointer;}
+                    </style>,
+                  ],
+                },
+              }
+            }
+            isStringTag={true}
+            serialized={
+              {
+                "map": undefined,
+                "name": "1hahvl7-euiFormLabel-focused",
+                "next": undefined,
+                "styles": "
+    font-size:0.8571rem;line-height:1.1429rem;color:#1a1c21;
+    font-weight: 600;
+    
+  overflow-wrap: break-word !important; // makes sure the long string will wrap and not bust out of the container
+  word-break: break-word;
+
+   display:inline-block;@media screen and (prefers-reduced-motion: no-preference){transition:color 150ms cubic-bezier(.694, .0482, .335, 1);};label:euiFormLabel;;;
+      &:where([for]) {
+        cursor: pointer;
+      }
+    ;;color:#07C;;label:focused;;;",
+                "toString": [Function],
+              }
+            }
+          />
+          <label
+            className="euiFormLabel euiFormRow__label euiFormLabel-isFocused emotion-euiFormLabel-focused"
+            htmlFor="generated-id"
+            id="generated-id-label"
+          >
+            <span>
+              Label
+            </span>
+          </label>
         </label>
       </EuiFormLabel>
     </div>
@@ -521,7 +1721,7 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = `
   >
     <label
       aria-invalid="true"
-      class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
+      class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid emotion-euiFormLabel-invalid"
       for="generated-id"
       id="generated-id-label"
     >
@@ -547,7 +1747,7 @@ exports[`EuiFormRow props label append is rendered 1`] = `
     class="euiFormRow__labelWrapper"
   >
     <label
-      class="euiFormLabel euiFormRow__label"
+      class="euiFormLabel euiFormRow__label emotion-euiFormLabel"
       for="generated-id"
       id="generated-id-label"
     >
@@ -575,7 +1775,7 @@ exports[`EuiFormRow props label is rendered 1`] = `
     class="euiFormRow__labelWrapper"
   >
     <label
-      class="euiFormLabel euiFormRow__label"
+      class="euiFormLabel euiFormRow__label emotion-euiFormLabel"
       for="generated-id"
       id="generated-id-label"
     >
@@ -601,7 +1801,7 @@ exports[`EuiFormRow props label renders as a legend and subsquently a fieldset w
     class="euiFormRow__labelWrapper"
   >
     <legend
-      class="euiFormLabel euiFormRow__label"
+      class="euiFormLabel euiFormRow__label emotion-euiFormLabel"
       id="generated-id-label"
     >
       label
diff --git a/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap b/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
index 5f1100224b5..669d5102dd8 100644
--- a/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
+++ b/packages/eui/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap
@@ -59,7 +59,7 @@ exports[`EuiRadioGroup props legend is rendered 1`] = `
   class="euiRadioGroup emotion-euiRadioGroup"
 >
   <legend
-    class="euiFormLegend"
+    class="euiFormLegend emotion-euiFormLegend"
   >
     A legend
   </legend>
diff --git a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
index ea1da48dd23..e068fa19900 100644
--- a/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
+++ b/packages/eui/src/components/form/super_select/__snapshots__/super_select.test.tsx.snap
@@ -91,7 +91,7 @@ exports[`EuiSuperSelect props prepend and append 1`] = `
       class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         prepend
       </label>
@@ -123,7 +123,7 @@ exports[`EuiSuperSelect props prepend and append 1`] = `
       class="euiFormControlLayout__append emotion-euiFormControlLayout__side-append"
     >
       <label
-        class="euiFormLabel"
+        class="euiFormLabel emotion-euiFormLabel"
       >
         append
       </label>
diff --git a/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap b/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
index 30e83d49749..2a4b4f41a1c 100644
--- a/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
+++ b/packages/eui/src/components/inline_edit/__snapshots__/inline_edit_form.test.tsx.snap
@@ -204,7 +204,7 @@ exports[`EuiInlineEditForm edit mode editModeProps.inputProps 1`] = `
               class="euiFormControlLayout__prepend emotion-euiFormControlLayout__side-prepend"
             >
               <label
-                class="euiFormLabel"
+                class="euiFormLabel emotion-euiFormLabel"
                 for="generated-id"
               >
                 Prepend Example
diff --git a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap
index c742806258b..18dba8256a7 100644
--- a/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap
+++ b/packages/eui/src/components/key_pad_menu/__snapshots__/key_pad_menu.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`EuiKeyPadMenu checkable is rendered as with a legend 1`] = `
 >
   <legend
     aria-label="aria-label"
-    class="euiFormLabel testClass1 testClass2 emotion-euiKeyPadMenu__legend-euiTestCss"
+    class="euiFormLabel testClass1 testClass2 emotion-euiFormLabel-euiKeyPadMenu__legend-euiTestCss"
     data-test-subj="test subject string"
   >
     Legend