From e93f9c16f46dfa11da1a149c93126baddc22885f Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 29 May 2024 18:26:17 -0700
Subject: [PATCH 01/15] Convert EuiTextArea to Emotion

+ remove className map

+ simplify `definedRows` variable
---
 packages/eui/src/components/form/_index.scss  |  1 -
 .../__snapshots__/text_area.test.tsx.snap     |  4 +-
 .../src/components/form/text_area/_index.scss |  1 -
 .../components/form/text_area/_text_area.scss | 39 --------
 .../form/text_area/text_area.styles.ts        | 93 +++++++++++++++++++
 .../form/text_area/text_area.test.tsx         |  2 +-
 .../components/form/text_area/text_area.tsx   | 47 ++++------
 7 files changed, 113 insertions(+), 74 deletions(-)
 delete mode 100644 packages/eui/src/components/form/text_area/_index.scss
 delete mode 100644 packages/eui/src/components/form/text_area/_text_area.scss
 create mode 100644 packages/eui/src/components/form/text_area/text_area.styles.ts

diff --git a/packages/eui/src/components/form/_index.scss b/packages/eui/src/components/form/_index.scss
index c80dd014ae00..d959bbeb305e 100644
--- a/packages/eui/src/components/form/_index.scss
+++ b/packages/eui/src/components/form/_index.scss
@@ -15,4 +15,3 @@
 @import 'form_row/index';
 @import 'radio/index';
 @import 'switch/index';
-@import 'text_area/index';
diff --git a/packages/eui/src/components/form/text_area/__snapshots__/text_area.test.tsx.snap b/packages/eui/src/components/form/text_area/__snapshots__/text_area.test.tsx.snap
index 222e43c6551b..6f40f228304f 100644
--- a/packages/eui/src/components/form/text_area/__snapshots__/text_area.test.tsx.snap
+++ b/packages/eui/src/components/form/text_area/__snapshots__/text_area.test.tsx.snap
@@ -2,14 +2,14 @@
 
 exports[`EuiTextArea is rendered 1`] = `
 <div
-  class="euiFormControlLayout euiFormControlLayout--euiTextArea"
+  class="euiFormControlLayout euiFormControlLayout--euiTextArea emotion-euiTextArea"
 >
   <div
     class="euiFormControlLayout__childrenWrapper"
   >
     <textarea
       aria-label="aria-label"
-      class="euiTextArea euiTextArea--resizeVertical testClass1 testClass2 emotion-euiTestCss"
+      class="euiTextArea testClass1 testClass2 emotion-euiTextArea-vertical-euiTestCss"
       data-test-subj="test subject string"
       rows="6"
     />
diff --git a/packages/eui/src/components/form/text_area/_index.scss b/packages/eui/src/components/form/text_area/_index.scss
deleted file mode 100644
index f14b87660661..000000000000
--- a/packages/eui/src/components/form/text_area/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'text_area';
diff --git a/packages/eui/src/components/form/text_area/_text_area.scss b/packages/eui/src/components/form/text_area/_text_area.scss
deleted file mode 100644
index 3122fd44140d..000000000000
--- a/packages/eui/src/components/form/text_area/_text_area.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.euiTextArea {
-  @include euiFormControlStyle;
-  line-height: $euiLineHeight; // give more spacing between multiple lines
-
-  // <textarea>s default to `inline-block`, which causes an extra 2-3px of
-  // unnecessary height within its parent `block` form control wrapper.
-  // @see https://stackoverflow.com/a/27536461/4294462
-  display: block;
-
-  // Textareas have their own sizing
-  &,
-  &--compressed {
-    height: auto;
-  }
-}
-
-.euiFormControlLayout--euiTextArea {
-  height: auto;
-
-  .euiFormControlLayoutIcons {
-    top: auto;
-    bottom: $euiFormControlPadding;
-  }
-}
-
-// resize modifiers
-$textareaResizing: (
-  vertical: 'resizeVertical',
-  horizontal: 'resizeHorizontal',
-  both: 'resizeBoth',
-  none: 'resizeNone',
-);
-
-// Create button modifiers based upon the map.
-@each $direction, $modifier in $textareaResizing {
-  .euiTextArea--#{$modifier} {
-    resize: #{$direction};
-  }
-}
diff --git a/packages/eui/src/components/form/text_area/text_area.styles.ts b/packages/eui/src/components/form/text_area/text_area.styles.ts
new file mode 100644
index 000000000000..9316abc3e043
--- /dev/null
+++ b/packages/eui/src/components/form/text_area/text_area.styles.ts
@@ -0,0 +1,93 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+import { logicalCSS } from '../../../global_styling';
+import { euiFormControlStyles, euiFormVariables } from '../form.styles';
+
+export const euiTextAreaStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const formStyles = euiFormControlStyles(euiThemeContext);
+  const formVars = euiFormVariables(euiThemeContext);
+
+  return {
+    euiTextArea: css`
+      ${formStyles.shared}
+
+      /* Give more spacing between multiple lines */
+      line-height: ${euiTheme.font.lineHeightMultiplier};
+
+      &:invalid {
+        ${formStyles.invalid}
+      }
+
+      &:focus {
+        ${formStyles.focus}
+      }
+
+      &:disabled {
+        ${formStyles.disabled}
+      }
+
+      &[readOnly] {
+        ${formStyles.readOnly}
+      }
+
+      &:autofill {
+        ${formStyles.autoFill}
+      }
+    `,
+    resize: {
+      vertical: css`
+        resize: vertical;
+      `,
+      horizontal: css`
+        resize: horizontal;
+      `,
+      both: css`
+        resize: both;
+      `,
+      none: css`
+        resize: none;
+      `,
+    },
+
+    // Skip the css() on the default height to avoid generating a className
+    uncompressed: `
+      ${logicalCSS('height', 'auto')}
+      padding: ${formVars.controlPadding};
+      border-radius: ${formVars.controlBorderRadius};
+    `,
+    compressed: css`
+      ${logicalCSS('height', 'auto')}
+      padding: ${formVars.controlCompressedPadding};
+      border-radius: ${formVars.controlCompressedBorderRadius};
+    `,
+
+    // Skip the css() on the default width to avoid generating a className
+    formWidth: formStyles.formWidth,
+    fullWidth: css(formStyles.fullWidth),
+
+    // EuiFormControlLayout styles
+    formControlLayout: {
+      euiTextArea: css`
+        /* TODO: Remove extra && specificity override once EuiFormControlLayout is converted to Emotion */
+        && {
+          ${logicalCSS('height', 'auto')}
+        }
+
+        .euiFormControlLayoutIcons {
+          ${logicalCSS('top', 'auto')}
+          ${logicalCSS('bottom', formVars.controlPadding)}
+        }
+      `,
+    },
+  };
+};
diff --git a/packages/eui/src/components/form/text_area/text_area.test.tsx b/packages/eui/src/components/form/text_area/text_area.test.tsx
index 52caf44128b4..2c45685da2d0 100644
--- a/packages/eui/src/components/form/text_area/text_area.test.tsx
+++ b/packages/eui/src/components/form/text_area/text_area.test.tsx
@@ -29,7 +29,7 @@ describe('EuiTextArea', () => {
       );
 
       const element = container.querySelector('.euiTextArea');
-      expect(element).toHaveClass('euiTextArea--fullWidth');
+      expect(element!.className).toContain('fullWidth');
     });
   });
 });
diff --git a/packages/eui/src/components/form/text_area/text_area.tsx b/packages/eui/src/components/form/text_area/text_area.tsx
index fb1e95074c26..42bed9113949 100644
--- a/packages/eui/src/components/form/text_area/text_area.tsx
+++ b/packages/eui/src/components/form/text_area/text_area.tsx
@@ -16,13 +16,17 @@ import React, {
 import classNames from 'classnames';
 
 import { CommonProps } from '../../common';
-import { useCombinedRefs } from '../../../services';
+import { useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
 
 import { EuiFormControlLayout } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
 import { useFormContext } from '../eui_form_context';
 import { EuiFormControlLayoutIconsProps } from '../form_control_layout/form_control_layout_icons';
 
+import { euiTextAreaStyles } from './text_area.styles';
+
+export const RESIZE = ['vertical', 'horizontal', 'both', 'none'] as const;
+
 export type EuiTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
   CommonProps & {
     icon?: EuiFormControlLayoutIconsProps['icon'];
@@ -44,20 +48,11 @@ export type EuiTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
      * Which direction, if at all, should the textarea resize
      * @default vertical
      */
-    resize?: keyof typeof resizeToClassNameMap;
+    resize?: (typeof RESIZE)[number];
 
     inputRef?: Ref<HTMLTextAreaElement>;
   };
 
-const resizeToClassNameMap = {
-  vertical: 'euiTextArea--resizeVertical',
-  horizontal: 'euiTextArea--resizeHorizontal',
-  both: 'euiTextArea--resizeBoth',
-  none: 'euiTextArea--resizeNone',
-};
-
-export const RESIZE = Object.keys(resizeToClassNameMap);
-
 export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
   const { defaultFullWidth } = useFormContext();
   const {
@@ -78,25 +73,15 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
     ...rest
   } = props;
 
-  const classes = classNames(
-    'euiTextArea',
-    resizeToClassNameMap[resize],
-    {
-      'euiTextArea--fullWidth': fullWidth,
-      'euiTextArea--compressed': compressed,
-    },
-    className
-  );
-
-  let definedRows: number;
+  const classes = classNames('euiTextArea', className);
 
-  if (rows) {
-    definedRows = rows;
-  } else if (compressed) {
-    definedRows = 3;
-  } else {
-    definedRows = 6;
-  }
+  const styles = useEuiMemoizedStyles(euiTextAreaStyles);
+  const cssStyles = [
+    styles.euiTextArea,
+    styles.resize[resize],
+    compressed ? styles.compressed : styles.uncompressed,
+    fullWidth ? styles.fullWidth : styles.formWidth,
+  ];
 
   const ref = useRef<HTMLTextAreaElement | null>(null);
   const refs = useCombinedRefs([ref, inputRef]);
@@ -137,12 +122,14 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
       clear={clear}
       icon={icon}
       className="euiFormControlLayout--euiTextArea"
+      css={styles.formControlLayout.euiTextArea}
     >
       <EuiValidatableControl isInvalid={isInvalid}>
         <textarea
           className={classes}
+          css={cssStyles}
           {...rest}
-          rows={definedRows}
+          rows={rows ? rows : compressed ? 3 : 6}
           name={name}
           id={id}
           ref={refs}

From 75157f07d68dee95643df72bf24e21c8a6a5e934 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 13:08:14 -0700
Subject: [PATCH 02/15] [EuiSelect] Remove unnecessary vendor prefixes

- no impact on modern/latest browsers of Edge or Firefox
---
 .../eui/src/components/form/select/_select.scss  | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/packages/eui/src/components/form/select/_select.scss b/packages/eui/src/components/form/select/_select.scss
index a985d0422c7a..42e729ea694e 100644
--- a/packages/eui/src/components/form/select/_select.scss
+++ b/packages/eui/src/components/form/select/_select.scss
@@ -23,20 +23,4 @@
   &--inGroup#{&}--compressed {
     line-height: $euiFormControlLayoutGroupInputCompressedHeight; /* 1 */
   }
-
-  // Turn off linter for some MS specific bits.
-  // stylelint-disable selector-no-vendor-prefix
-  &::-ms-expand {
-    display: none;
-  }
-
-  &:focus::-ms-value {
-    color: $euiTextColor;
-    background: transparent;
-  }
-
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 $euiTextColor;
-  }
 }

From 30609ff5f6bbe0bf826e910fe7ace6466fef0ffd Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 14:34:27 -0700
Subject: [PATCH 03/15] Convert EuiSelect to Emotion

---
 packages/eui/src/components/form/_index.scss  |  1 -
 .../select/__snapshots__/select.test.tsx.snap | 14 ++--
 .../src/components/form/select/_index.scss    |  1 -
 .../src/components/form/select/_select.scss   | 26 -------
 .../components/form/select/select.styles.ts   | 67 +++++++++++++++++++
 .../components/form/select/select.test.tsx    |  2 +-
 .../eui/src/components/form/select/select.tsx | 43 +++++++-----
 7 files changed, 102 insertions(+), 52 deletions(-)
 delete mode 100644 packages/eui/src/components/form/select/_index.scss
 delete mode 100644 packages/eui/src/components/form/select/_select.scss
 create mode 100644 packages/eui/src/components/form/select/select.styles.ts

diff --git a/packages/eui/src/components/form/_index.scss b/packages/eui/src/components/form/_index.scss
index d959bbeb305e..5e504de684e2 100644
--- a/packages/eui/src/components/form/_index.scss
+++ b/packages/eui/src/components/form/_index.scss
@@ -4,7 +4,6 @@
 @import 'form';
 
 // Selects must come before form_control_layout for proper padding
-@import 'select/index';
 @import 'super_select/index';
 
 @import 'form_control_layout/index';
diff --git a/packages/eui/src/components/form/select/__snapshots__/select.test.tsx.snap b/packages/eui/src/components/form/select/__snapshots__/select.test.tsx.snap
index c1de6cf32e1a..e554be7edab0 100644
--- a/packages/eui/src/components/form/select/__snapshots__/select.test.tsx.snap
+++ b/packages/eui/src/components/form/select/__snapshots__/select.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiSelect is rendered 1`] = `
   <eui-validatable-control>
     <select
       aria-label="aria-label"
-      class="euiSelect euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+      class="euiSelect testClass1 testClass2 emotion-euiSelect-euiTestCss"
       data-test-subj="test subject string"
       id="id"
       name="name"
@@ -29,7 +29,7 @@ exports[`EuiSelect props disabled options are rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--1icons"
+      class="euiSelect emotion-euiSelect"
     >
       <option
         value="1"
@@ -56,7 +56,7 @@ exports[`EuiSelect props fullWidth is rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth"
+      class="euiSelect emotion-euiSelect-fullWidth"
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -74,7 +74,7 @@ exports[`EuiSelect props isInvalid is rendered 1`] = `
     isinvalid="true"
   >
     <select
-      class="euiSelect euiFormControlLayout--2icons"
+      class="euiSelect emotion-euiSelect"
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -89,7 +89,7 @@ exports[`EuiSelect props isLoading is rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--2icons euiSelect-isLoading"
+      class="euiSelect euiSelect-isLoading emotion-euiSelect"
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -104,7 +104,7 @@ exports[`EuiSelect props options are rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--1icons"
+      class="euiSelect emotion-euiSelect"
     >
       <option
         value="1"
@@ -130,7 +130,7 @@ exports[`EuiSelect props value option is rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--1icons"
+      class="euiSelect emotion-euiSelect"
     >
       <option
         value="1"
diff --git a/packages/eui/src/components/form/select/_index.scss b/packages/eui/src/components/form/select/_index.scss
deleted file mode 100644
index e16bb999b26f..000000000000
--- a/packages/eui/src/components/form/select/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'select';
diff --git a/packages/eui/src/components/form/select/_select.scss b/packages/eui/src/components/form/select/_select.scss
deleted file mode 100644
index 42e729ea694e..000000000000
--- a/packages/eui/src/components/form/select/_select.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * 1. Ensure the descenders don't get cut off
- */
-
-.euiSelect {
-  @include euiFormControlStyle;
-
-  appearance: none;
-  line-height: $euiFormControlHeight; /* 1 */
-  padding-top: 0; /* 1 */
-  padding-bottom: 0; /* 1 */
-
-  &--compressed {
-    line-height: $euiFormControlCompressedHeight; /* 1 */
-    padding-top: 0; /* 1 */
-    padding-bottom: 0; /* 1 */
-  }
-
-  &--inGroup {
-    line-height: $euiFormControlLayoutGroupInputHeight; /* 1 */
-  }
-
-  &--inGroup#{&}--compressed {
-    line-height: $euiFormControlLayoutGroupInputCompressedHeight; /* 1 */
-  }
-}
diff --git a/packages/eui/src/components/form/select/select.styles.ts b/packages/eui/src/components/form/select/select.styles.ts
new file mode 100644
index 000000000000..dbf391938f18
--- /dev/null
+++ b/packages/eui/src/components/form/select/select.styles.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+import { euiFormControlStyles, euiFormVariables } from '../form.styles';
+
+export const euiSelectStyles = (euiThemeContext: UseEuiTheme) => {
+  const formStyles = euiFormControlStyles(euiThemeContext);
+  const formVariables = euiFormVariables(euiThemeContext);
+
+  return {
+    euiSelect: css`
+      appearance: none;
+      ${formStyles.shared}
+
+      &:invalid {
+        ${formStyles.invalid}
+      }
+
+      &:focus {
+        ${formStyles.focus}
+      }
+
+      &:disabled {
+        ${formStyles.disabled}
+      }
+
+      &[readOnly] {
+        ${formStyles.readOnly}
+      }
+
+      &:autofill {
+        ${formStyles.autoFill}
+      }
+    `,
+
+    // Skip the css() on the default height to avoid generating a className
+    uncompressed: formStyles.uncompressed,
+    compressed: css(formStyles.compressed),
+
+    // Skip the css() on the default width to avoid generating a className
+    formWidth: formStyles.formWidth,
+    fullWidth: css(formStyles.fullWidth),
+
+    // Layout modifiers
+    inGroup: css(formStyles.inGroup),
+
+    // Ensure text descenders don't get cut off
+    // by making line-height match the input height
+    lineHeight: {
+      removePadding: `padding-block: 0;`,
+      uncompressed: `line-height: ${formVariables.controlHeight};`,
+      compressed: `line-height: ${formVariables.controlCompressedHeight};`,
+      inGroup: {
+        uncompressed: `line-height: ${formVariables.controlLayoutGroupInputHeight}`,
+        compressed: `line-height: ${formVariables.controlLayoutGroupInputCompressedHeight}`,
+      },
+    },
+  };
+};
diff --git a/packages/eui/src/components/form/select/select.test.tsx b/packages/eui/src/components/form/select/select.test.tsx
index 7fd3b6104cff..6fab983a1f65 100644
--- a/packages/eui/src/components/form/select/select.test.tsx
+++ b/packages/eui/src/components/form/select/select.test.tsx
@@ -165,7 +165,7 @@ describe('EuiSelect', () => {
       );
 
       const select = container.querySelector('.euiSelect');
-      expect(select).toHaveClass('euiSelect--fullWidth');
+      expect(select!.className).toContain('fullWidth');
     });
   });
 });
diff --git a/packages/eui/src/components/form/select/select.tsx b/packages/eui/src/components/form/select/select.tsx
index cd75d3fc5604..e395af423f59 100644
--- a/packages/eui/src/components/form/select/select.tsx
+++ b/packages/eui/src/components/form/select/select.tsx
@@ -12,15 +12,19 @@ import React, {
   Ref,
   FunctionComponent,
 } from 'react';
-import { CommonProps } from '../../common';
 import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
+import { CommonProps } from '../../common';
+
+import { useFormContext } from '../eui_form_context';
 import {
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
 } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
-import { useFormContext } from '../eui_form_context';
-import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
+
+import { euiSelectStyles } from './select.styles';
 
 export interface EuiSelectOption
   extends OptionHTMLAttributes<HTMLOptionElement> {
@@ -105,24 +109,30 @@ export const EuiSelect: FunctionComponent<EuiSelectProps> = (props) => {
     if (onMouseUp) onMouseUp(e);
   };
 
-  const numIconsClass = getFormControlClassNameForIconCount({
-    isInvalid,
-    isLoading,
-    isDropdown: true,
-  });
-
   const classes = classNames(
     'euiSelect',
-    numIconsClass,
-    {
-      'euiSelect--fullWidth': fullWidth,
-      'euiSelect--compressed': compressed,
-      'euiSelect--inGroup': prepend || append,
-      'euiSelect-isLoading': isLoading,
-    },
+    { 'euiSelect-isLoading': isLoading },
     className
   );
 
+  const inGroup = !!(prepend || append);
+
+  const styles = useEuiMemoizedStyles(euiSelectStyles);
+  const cssStyles = [
+    styles.euiSelect,
+    compressed ? styles.compressed : styles.uncompressed,
+    fullWidth ? styles.fullWidth : styles.formWidth,
+    inGroup && styles.inGroup,
+    styles.lineHeight.removePadding,
+    inGroup
+      ? compressed
+        ? styles.lineHeight.inGroup.compressed
+        : styles.lineHeight.inGroup.uncompressed
+      : compressed
+      ? styles.lineHeight.compressed
+      : styles.lineHeight.uncompressed,
+  ];
+
   let emptyOptionNode;
   if (hasNoInitialSelection) {
     emptyOptionNode = (
@@ -156,6 +166,7 @@ export const EuiSelect: FunctionComponent<EuiSelectProps> = (props) => {
           id={id}
           name={name}
           className={classes}
+          css={cssStyles}
           ref={inputRef}
           defaultValue={selectDefaultValue}
           value={value}

From e4bd38d4997ef03a607f1e34187c5bc5af3663a3 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 14:47:09 -0700
Subject: [PATCH 04/15] [EuiSelect] Misc cleanup

- memoization
- code order
- reduce inline let's
---
 .../components/form/select/select.test.tsx    |  2 +-
 .../eui/src/components/form/select/select.tsx | 46 +++++++++----------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/eui/src/components/form/select/select.test.tsx b/packages/eui/src/components/form/select/select.test.tsx
index 6fab983a1f65..4ef41eb63d23 100644
--- a/packages/eui/src/components/form/select/select.test.tsx
+++ b/packages/eui/src/components/form/select/select.test.tsx
@@ -119,7 +119,7 @@ describe('EuiSelect', () => {
         >
            
         </option>
-`);
+      `);
     });
 
     it('can be reset to an empty initial selection', () => {
diff --git a/packages/eui/src/components/form/select/select.tsx b/packages/eui/src/components/form/select/select.tsx
index e395af423f59..1674b649e42f 100644
--- a/packages/eui/src/components/form/select/select.tsx
+++ b/packages/eui/src/components/form/select/select.tsx
@@ -11,6 +11,7 @@ import React, {
   OptionHTMLAttributes,
   Ref,
   FunctionComponent,
+  useCallback,
 } from 'react';
 import classNames from 'classnames';
 
@@ -100,14 +101,21 @@ export const EuiSelect: FunctionComponent<EuiSelectProps> = (props) => {
   // value needs to fallback to an empty string to interact properly with `defaultValue`
   const value = hasNoInitialSelection ? _value ?? '' : _value;
 
-  const handleMouseUp = (e: React.MouseEvent<HTMLSelectElement>) => {
-    // Normalizes cross-browser mouse eventing by preventing propagation,
-    // notably for use in conjunction with EuiOutsideClickDetector.
-    // See https://github.com/elastic/eui/pull/1926 for full discussion on
-    // rationale and alternatives should this intervention become problematic.
-    e.nativeEvent.stopImmediatePropagation();
-    if (onMouseUp) onMouseUp(e);
-  };
+  // React HTML input can not have both value and defaultValue properties.
+  // https://reactjs.org/docs/uncontrolled-components.html#default-values
+  const selectDefaultValue = value != null ? undefined : defaultValue || '';
+
+  const handleMouseUp = useCallback(
+    (e: React.MouseEvent<HTMLSelectElement>) => {
+      // Normalizes cross-browser mouse eventing by preventing propagation,
+      // notably for use in conjunction with EuiOutsideClickDetector.
+      // See https://github.com/elastic/eui/pull/1926 for full discussion on
+      // rationale and alternatives should this intervention become problematic.
+      e.nativeEvent.stopImmediatePropagation();
+      onMouseUp?.(e);
+    },
+    [onMouseUp]
+  );
 
   const classes = classNames(
     'euiSelect',
@@ -133,22 +141,6 @@ export const EuiSelect: FunctionComponent<EuiSelectProps> = (props) => {
       : styles.lineHeight.uncompressed,
   ];
 
-  let emptyOptionNode;
-  if (hasNoInitialSelection) {
-    emptyOptionNode = (
-      <option value="" disabled hidden style={{ display: 'none' }}>
-        &nbsp;
-      </option>
-    );
-  }
-
-  // React HTML input can not have both value and defaultValue properties.
-  // https://reactjs.org/docs/uncontrolled-components.html#default-values
-  let selectDefaultValue;
-  if (value == null) {
-    selectDefaultValue = defaultValue || '';
-  }
-
   return (
     <EuiFormControlLayout
       isDropdown={true}
@@ -174,7 +166,11 @@ export const EuiSelect: FunctionComponent<EuiSelectProps> = (props) => {
           disabled={disabled}
           {...rest}
         >
-          {emptyOptionNode}
+          {hasNoInitialSelection && (
+            <option value="" disabled hidden style={{ display: 'none' }}>
+              &nbsp;
+            </option>
+          )}
           {options.map((option, index) => {
             const { text, ...rest } = option;
             return (

From 838e4ce86ccd8572b7d02ca2d4e1606ace1de231 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 14:53:32 -0700
Subject: [PATCH 05/15] [EuiSelect] Misc Storybook cleanup

---
 .../src/components/form/select/select.stories.tsx   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/eui/src/components/form/select/select.stories.tsx b/packages/eui/src/components/form/select/select.stories.tsx
index 8fd4011123db..deb4e0401f2c 100644
--- a/packages/eui/src/components/form/select/select.stories.tsx
+++ b/packages/eui/src/components/form/select/select.stories.tsx
@@ -20,6 +20,12 @@ import { EuiSelect, EuiSelectProps } from './select';
 const meta: Meta<EuiSelectProps> = {
   title: 'Forms/EuiSelect',
   component: EuiSelect,
+  parameters: {
+    controls: {
+      // Excude onMouseUp from controls, as it's not a terribly useful prop to document
+      exclude: ['onMouseUp'],
+    },
+  },
   argTypes: {
     append: {
       control: 'radio',
@@ -53,18 +59,13 @@ const meta: Meta<EuiSelectProps> = {
   },
 };
 // adding onChange for visibility
-enableFunctionToggleControls(meta, ['onChange', 'onMouseUp']);
+enableFunctionToggleControls(meta, ['onChange']);
 disableStorybookControls(meta, ['inputRef']);
 
 export default meta;
 type Story = StoryObj<EuiSelectProps>;
 
 export const Playground: Story = {
-  parameters: {
-    controls: {
-      exclude: ['onMouseUp'],
-    },
-  },
   args: {
     defaultValue: 'option-2',
     options: [

From e77c3df0c271439146dfe9e88fe5e2b4ce85b62e Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 15:49:00 -0700
Subject: [PATCH 06/15] [EuiSuperSelect] Convert initial listbox CSS

- trying to avoid having to wrap a class component with a generic type in a theme HOC, so opting for static className util instead
---
 .../__snapshots__/super_select.test.tsx.snap  |  2 +-
 .../form/super_select/_super_select.scss      |  7 ------
 .../form/super_select/super_select.styles.ts  | 19 ++++++++++++++++
 .../form/super_select/super_select.tsx        | 22 +++++++++----------
 4 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 packages/eui/src/components/form/super_select/super_select.styles.ts

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 1ed089c97e8f..f17e6c0e15e7 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
@@ -198,7 +198,7 @@ exports[`EuiSuperSelect renders 1`] = `
             <div
               aria-describedby="euiSuperSelect__generated-id__screenreaderDescribeId"
               aria-label="Select listbox"
-              class="euiSuperSelect__listbox"
+              class="euiSuperSelect__listbox eui-scrollBar emotion-euiSuperSelect__listbox"
               role="listbox"
               tabindex="0"
             >
diff --git a/packages/eui/src/components/form/super_select/_super_select.scss b/packages/eui/src/components/form/super_select/_super_select.scss
index 8d12623129b5..d02b50426a43 100644
--- a/packages/eui/src/components/form/super_select/_super_select.scss
+++ b/packages/eui/src/components/form/super_select/_super_select.scss
@@ -1,10 +1,3 @@
-.euiSuperSelect__listbox {
-  @include euiScrollBar;
-  max-height: 300px;
-  overflow: hidden;
-  overflow-y: auto;
-}
-
 .euiSuperSelect__item {
   @include euiFontSizeS;
   @include euiInteractiveStates;
diff --git a/packages/eui/src/components/form/super_select/super_select.styles.ts b/packages/eui/src/components/form/super_select/super_select.styles.ts
new file mode 100644
index 000000000000..c3deecd2cc0a
--- /dev/null
+++ b/packages/eui/src/components/form/super_select/super_select.styles.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { logicalCSS, logicalCSSWithFallback } from '../../../global_styling';
+
+export const euiSuperSelectStyles = {
+  euiSuperSelect__listbox: css`
+    ${logicalCSS('max-height', '300px')}
+    ${logicalCSSWithFallback('overflow-y', 'auto')}
+    ${logicalCSSWithFallback('overflow-x', 'hidden')}
+  `,
+};
diff --git a/packages/eui/src/components/form/super_select/super_select.tsx b/packages/eui/src/components/form/super_select/super_select.tsx
index 5e609b5f970b..e264c51c497f 100644
--- a/packages/eui/src/components/form/super_select/super_select.tsx
+++ b/packages/eui/src/components/form/super_select/super_select.tsx
@@ -9,22 +9,19 @@
 import React, { Component, FocusEvent, ReactNode, createRef } from 'react';
 import classNames from 'classnames';
 
+import { htmlIdGenerator, keys } from '../../../services';
 import { CommonProps } from '../../common';
-
+import { EuiI18n } from '../../i18n';
 import { EuiScreenReaderOnly } from '../../accessibility';
-import { htmlIdGenerator, keys } from '../../../services';
+import { EuiInputPopover, type EuiInputPopoverProps } from '../../popover';
+import { EuiContextMenuItem, type EuiContextMenuItemLayoutAlignment } from '../../context_menu';
+
 import {
   EuiSuperSelectControl,
-  EuiSuperSelectControlProps,
-  EuiSuperSelectOption,
+  type EuiSuperSelectControlProps,
+  type EuiSuperSelectOption,
 } from './super_select_control';
-import { EuiInputPopover, EuiInputPopoverProps } from '../../popover';
-import {
-  EuiContextMenuItem,
-  EuiContextMenuItemLayoutAlignment,
-} from '../../context_menu';
-
-import { EuiI18n } from '../../i18n';
+import { euiSuperSelectStyles as styles } from './super_select.styles';
 
 enum ShiftDirection {
   BACK = 'back',
@@ -364,7 +361,8 @@ export class EuiSuperSelect<T = string> extends Component<
             <div
               aria-label={ariaLabel}
               aria-describedby={this.describedById}
-              className="euiSuperSelect__listbox"
+              css={styles.euiSuperSelect__listbox}
+              className="euiSuperSelect__listbox eui-scrollBar"
               role="listbox"
               aria-activedescendant={
                 valueOfSelected != null ? String(valueOfSelected) : undefined

From 4daa79657485ae7418ebed424dab3bcc2459ab30 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 15:50:35 -0700
Subject: [PATCH 07/15] [EuiSuperSelect] Convert individual item/option styles
 + create new subcomponent util to make it easier to use style hooks

+ move location of Option type outside of control (makes slightly more sense here, file-wise)
---
 .../__snapshots__/super_select.test.tsx.snap  |  4 +-
 .../form/super_select/_super_select.scss      |  9 ---
 .../src/components/form/super_select/index.ts |  7 +--
 .../form/super_select/super_select.styles.ts  | 12 ++++
 .../form/super_select/super_select.tsx        | 27 ++++-----
 .../super_select/super_select_control.tsx     |  8 +--
 .../form/super_select/super_select_item.tsx   | 55 +++++++++++++++++++
 7 files changed, 84 insertions(+), 38 deletions(-)
 create mode 100644 packages/eui/src/components/form/super_select/super_select_item.tsx

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 f17e6c0e15e7..6b2a3543b8bd 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
@@ -204,7 +204,7 @@ exports[`EuiSuperSelect renders 1`] = `
             >
               <button
                 aria-selected="false"
-                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
+                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center-euiSuperSelect__item"
                 id="1"
                 role="option"
                 type="button"
@@ -222,7 +222,7 @@ exports[`EuiSuperSelect renders 1`] = `
               </button>
               <button
                 aria-selected="false"
-                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center"
+                class="euiContextMenuItem euiSuperSelect__item emotion-euiContextMenuItem-m-center-euiSuperSelect__item"
                 id="2"
                 role="option"
                 type="button"
diff --git a/packages/eui/src/components/form/super_select/_super_select.scss b/packages/eui/src/components/form/super_select/_super_select.scss
index d02b50426a43..e69de29bb2d1 100644
--- a/packages/eui/src/components/form/super_select/_super_select.scss
+++ b/packages/eui/src/components/form/super_select/_super_select.scss
@@ -1,9 +0,0 @@
-.euiSuperSelect__item {
-  @include euiFontSizeS;
-  @include euiInteractiveStates;
-  padding: $euiSizeS;
-}
-
-.euiSuperSelect__item--hasDividers:not(:last-of-type) {
-  border-bottom: $euiBorderThin;
-}
diff --git a/packages/eui/src/components/form/super_select/index.ts b/packages/eui/src/components/form/super_select/index.ts
index d043ad140222..eb2bc5d69c38 100644
--- a/packages/eui/src/components/form/super_select/index.ts
+++ b/packages/eui/src/components/form/super_select/index.ts
@@ -8,8 +8,7 @@
 
 export type { EuiSuperSelectProps } from './super_select';
 export { EuiSuperSelect } from './super_select';
-export type {
-  EuiSuperSelectControlProps,
-  EuiSuperSelectOption,
-} from './super_select_control';
+export type { EuiSuperSelectOption } from './super_select_item';
+
+export type { EuiSuperSelectControlProps } from './super_select_control';
 export { EuiSuperSelectControl } from './super_select_control';
diff --git a/packages/eui/src/components/form/super_select/super_select.styles.ts b/packages/eui/src/components/form/super_select/super_select.styles.ts
index c3deecd2cc0a..bf416d468663 100644
--- a/packages/eui/src/components/form/super_select/super_select.styles.ts
+++ b/packages/eui/src/components/form/super_select/super_select.styles.ts
@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 
+import { UseEuiTheme } from '../../../services';
 import { logicalCSS, logicalCSSWithFallback } from '../../../global_styling';
 
 export const euiSuperSelectStyles = {
@@ -17,3 +18,14 @@ export const euiSuperSelectStyles = {
     ${logicalCSSWithFallback('overflow-x', 'hidden')}
   `,
 };
+
+export const euiSuperSelectItemStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiSuperSelect__item: css`
+    padding: ${euiTheme.size.s};
+  `,
+  hasDividers: css`
+    &:not(:last-of-type) {
+      ${logicalCSS('border-bottom', euiTheme.border.thin)}
+    }
+  `,
+});
diff --git a/packages/eui/src/components/form/super_select/super_select.tsx b/packages/eui/src/components/form/super_select/super_select.tsx
index e264c51c497f..ae6a30163697 100644
--- a/packages/eui/src/components/form/super_select/super_select.tsx
+++ b/packages/eui/src/components/form/super_select/super_select.tsx
@@ -14,13 +14,16 @@ import { CommonProps } from '../../common';
 import { EuiI18n } from '../../i18n';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiInputPopover, type EuiInputPopoverProps } from '../../popover';
-import { EuiContextMenuItem, type EuiContextMenuItemLayoutAlignment } from '../../context_menu';
+import { type EuiContextMenuItemLayoutAlignment } from '../../context_menu';
 
 import {
   EuiSuperSelectControl,
   type EuiSuperSelectControlProps,
-  type EuiSuperSelectOption,
 } from './super_select_control';
+import {
+  EuiSuperSelectItem,
+  type EuiSuperSelectOption,
+} from './super_select_item';
 import { euiSuperSelectStyles as styles } from './super_select.styles';
 
 enum ShiftDirection {
@@ -287,14 +290,6 @@ export class EuiSuperSelect<T = string> extends Component<
       className
     );
 
-    const itemClasses = classNames(
-      'euiSuperSelect__item',
-      {
-        'euiSuperSelect__item--hasDividers': hasDividers,
-      },
-      itemClassName
-    );
-
     const button = (
       <EuiSuperSelectControl
         options={options}
@@ -318,21 +313,21 @@ export class EuiSuperSelect<T = string> extends Component<
       if (value == null) return;
 
       return (
-        <EuiContextMenuItem
+        <EuiSuperSelectItem
           key={index}
-          className={itemClasses}
+          id={String(value)}
+          className={itemClassName}
+          hasDividers={hasDividers}
+          layoutAlign={itemLayoutAlign}
           icon={valueOfSelected === value ? 'check' : 'empty'}
           onClick={() => this.itemClicked(value)}
           onKeyDown={this.onItemKeyDown}
-          layoutAlign={itemLayoutAlign}
           buttonRef={(node) => this.setItemNode(node, index)}
-          role="option"
-          id={String(value)}
           aria-selected={valueOfSelected === value}
           {...optionRest}
         >
           {dropdownDisplay || inputDisplay}
-        </EuiContextMenuItem>
+        </EuiSuperSelectItem>
       );
     });
 
diff --git a/packages/eui/src/components/form/super_select/super_select_control.tsx b/packages/eui/src/components/form/super_select/super_select_control.tsx
index 83bb39f40e61..1aaedbc869f6 100644
--- a/packages/eui/src/components/form/super_select/super_select_control.tsx
+++ b/packages/eui/src/components/form/super_select/super_select_control.tsx
@@ -27,13 +27,7 @@ import {
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
 import { useFormContext } from '../eui_form_context';
 
-export interface EuiSuperSelectOption<T> {
-  value: NonNullable<T>;
-  inputDisplay?: ReactNode;
-  dropdownDisplay?: ReactNode;
-  disabled?: boolean;
-  'data-test-subj'?: string;
-}
+import { EuiSuperSelectOption } from './super_select_item';
 
 export interface EuiSuperSelectControlProps<T>
   extends CommonProps,
diff --git a/packages/eui/src/components/form/super_select/super_select_item.tsx b/packages/eui/src/components/form/super_select/super_select_item.tsx
new file mode 100644
index 000000000000..dcb4b2ae3e8b
--- /dev/null
+++ b/packages/eui/src/components/form/super_select/super_select_item.tsx
@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, ComponentProps, ReactNode } from 'react';
+import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiContextMenuItem } from '../../context_menu';
+import { euiSuperSelectItemStyles } from './super_select.styles';
+
+// Type exposed to consumers via API
+export interface EuiSuperSelectOption<T> {
+  value: NonNullable<T>;
+  inputDisplay?: ReactNode;
+  dropdownDisplay?: ReactNode;
+  disabled?: boolean;
+  'data-test-subj'?: string;
+}
+
+// Actual props used by below component, transmogged by parent EuiSuperSelect
+// from consumer props to internal EUI props
+type EuiSuperSelectItemProps = ComponentProps<typeof EuiContextMenuItem> & {
+  hasDividers?: boolean;
+};
+
+// Internal subcomponent util, primarily for easier usage of hooks
+export const EuiSuperSelectItem: FunctionComponent<EuiSuperSelectItemProps> = ({
+  children,
+  className,
+  hasDividers,
+  ...rest
+}) => {
+  const classes = classNames('euiSuperSelect__item', className);
+  const styles = useEuiMemoizedStyles(euiSuperSelectItemStyles);
+  const cssStyles = [
+    styles.euiSuperSelect__item,
+    hasDividers && styles.hasDividers,
+  ];
+
+  return (
+    <EuiContextMenuItem
+      css={cssStyles}
+      className={classes}
+      role="option"
+      {...rest}
+    >
+      {children}
+    </EuiContextMenuItem>
+  );
+};

From f9eea312531a649cb622db71d0363e1d7c787511 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 16:31:27 -0700
Subject: [PATCH 08/15] [EuiSuperSelect] Convert form control/button to Emotion

- our more granular/explicit architecture (vs an all in one mixin) pays off!! :tada:

- we now also get to remove a `ts-ignore` + invalid `readonly` attribute (doesn't apply to buttons)

- also remove extra className modifier which isn't great BEM (no Kibana usages)
---
 .../__snapshots__/super_select.test.tsx.snap  |  8 +--
 .../super_select_control.test.tsx.snap        | 20 +++---
 .../super_select/_super_select_control.scss   | 36 ----------
 .../form/super_select/super_select.styles.ts  | 69 ++++++++++++++++++-
 .../form/super_select/super_select.tsx        | 10 +--
 .../super_select_control.test.tsx             |  2 +-
 .../super_select/super_select_control.tsx     | 35 ++++++----
 7 files changed, 106 insertions(+), 74 deletions(-)

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 6b2a3543b8bd..b430f7fa69b8 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
@@ -16,7 +16,7 @@ exports[`EuiSuperSelect props compressed 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control-compressed"
         type="button"
       />
       <div
@@ -53,7 +53,7 @@ exports[`EuiSuperSelect props fullWidth 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--fullWidth"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control-fullWidth"
         type="button"
       />
       <div
@@ -95,7 +95,7 @@ exports[`EuiSuperSelect props prepend and append 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--inGroup"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control-inGroup"
         type="button"
       />
       <div
@@ -140,7 +140,7 @@ exports[`EuiSuperSelect renders 1`] = `
           <button
             aria-haspopup="listbox"
             aria-label="aria-label"
-            class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button testClass1 testClass2 emotion-euiTestCss"
+            class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-open-euiTestCss"
             data-test-subj="test subject string"
             type="button"
           />
diff --git a/packages/eui/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap b/packages/eui/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
index 67e5eec7d39c..86128fdb5364 100644
--- a/packages/eui/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
+++ b/packages/eui/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`EuiSuperSelectControl is rendered 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       />
@@ -51,7 +51,7 @@ exports[`EuiSuperSelectControl props compressed is rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control-compressed"
         type="button"
       />
       <div
@@ -86,7 +86,7 @@ exports[`EuiSuperSelectControl props disabled options are rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control"
         type="button"
       />
       <div
@@ -121,7 +121,7 @@ exports[`EuiSuperSelectControl props empty value option is rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control"
         type="button"
       />
       <div
@@ -156,7 +156,7 @@ exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--fullWidth"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control-fullWidth"
         type="button"
       />
       <div
@@ -191,7 +191,7 @@ exports[`EuiSuperSelectControl props isInvalid is rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--2icons euiSuperSelectControl-isInvalid"
+        class="euiSuperSelectControl euiSuperSelectControl-isInvalid emotion-euiSuperSelect__control-invalid"
         type="button"
       />
       <div
@@ -230,7 +230,7 @@ exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--2icons euiSuperSelectControl-isLoading"
+        class="euiSuperSelectControl euiSuperSelectControl-isLoading emotion-euiSuperSelect__control"
         type="button"
       />
       <div
@@ -270,11 +270,11 @@ exports[`EuiSuperSelectControl props placeholder is rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control"
         type="button"
       >
         <span
-          class="euiSuperSelectControl__placeholder"
+          class="euiSuperSelectControl__placeholder emotion-euiSuperSelect__placeholder"
         >
           Select an option
         </span>
@@ -311,7 +311,7 @@ exports[`EuiSuperSelectControl props value option is rendered 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control"
         type="button"
       >
         Option #1
diff --git a/packages/eui/src/components/form/super_select/_super_select_control.scss b/packages/eui/src/components/form/super_select/_super_select_control.scss
index c96bafd913fb..e69de29bb2d1 100644
--- a/packages/eui/src/components/form/super_select/_super_select_control.scss
+++ b/packages/eui/src/components/form/super_select/_super_select_control.scss
@@ -1,36 +0,0 @@
-/**
- * 1. Ensure the descenders don't get cut off
- * 2. Makes sure the height is correct when there's no selection
- */
-
-.euiSuperSelectControl {
-  @include euiFormControlStyle;
-
-  display: block; /* 2 */
-  text-align: left;
-  line-height: $euiFormControlHeight; /* 1 */
-  padding-top: 0; /* 1 */
-  padding-bottom: 0; /* 1 */
-  // Truncate the text
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  &-isInvalid {
-    @include euiFormControlInvalidStyle;
-  }
-
-  &--compressed {
-    line-height: $euiFormControlCompressedHeight; /* 1 */
-    padding-top: 0; /* 1 */
-    padding-bottom: 0; /* 1 */
-  }
-
-  &__placeholder {
-    @include euiFormControlDisabledTextStyle;
-  }
-
-  &.euiSuperSelect--isOpen__button { // since this is a button, we also want the visual indicator of active when options are shown
-    @include euiFormControlFocusStyle;
-  }
-}
diff --git a/packages/eui/src/components/form/super_select/super_select.styles.ts b/packages/eui/src/components/form/super_select/super_select.styles.ts
index bf416d468663..8230b459114b 100644
--- a/packages/eui/src/components/form/super_select/super_select.styles.ts
+++ b/packages/eui/src/components/form/super_select/super_select.styles.ts
@@ -9,7 +9,13 @@
 import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../../services';
-import { logicalCSS, logicalCSSWithFallback } from '../../../global_styling';
+import {
+  euiTextTruncate,
+  logicalCSS,
+  logicalCSSWithFallback,
+  logicalTextAlignCSS,
+} from '../../../global_styling';
+import { euiFormControlStyles, euiFormVariables } from '../form.styles';
 
 export const euiSuperSelectStyles = {
   euiSuperSelect__listbox: css`
@@ -29,3 +35,64 @@ export const euiSuperSelectItemStyles = ({ euiTheme }: UseEuiTheme) => ({
     }
   `,
 });
+
+export const euiSuperSelectControlStyles = (euiThemeContext: UseEuiTheme) => {
+  const formStyles = euiFormControlStyles(euiThemeContext);
+  const formVariables = euiFormVariables(euiThemeContext);
+
+  return {
+    euiSuperSelect__control: css`
+      ${formStyles.shared}
+      display: block; /* Makes sure the height is correct when there's no selection */
+      ${logicalTextAlignCSS('left')}
+      ${euiTextTruncate(
+        '' // maxWidth is already set by width modifiers below
+      )}
+
+      &:focus {
+        ${formStyles.focus}
+      }
+    `,
+    // Since the control is a button and not an actual input, we have to set
+    // certain state styles manually instead of relying on CSS selectors
+    open: css`
+      /* Also show focus indicator when the dropdown is open */
+      ${formStyles.focus}
+    `,
+    invalid: css`
+      ${formStyles.invalid}
+    `,
+    disabled: css`
+      ${formStyles.disabled}
+    `,
+    readOnly: css`
+      ${formStyles.readOnly}
+    `,
+
+    // Skip the css() on the default height to avoid generating a className
+    uncompressed: `
+      ${formStyles.uncompressed}
+      /* Match line height with inputs */
+      ${logicalCSS('padding-vertical', 0)}
+      line-height: ${formVariables.controlHeight};
+    `,
+    compressed: css`
+      ${formStyles.compressed}
+      /* Match line height with inputs */
+      ${logicalCSS('padding-vertical', 0)}
+      line-height: ${formVariables.controlCompressedHeight};
+    `,
+
+    // Skip the css() on the default width to avoid generating a className
+    formWidth: formStyles.formWidth,
+    fullWidth: css(formStyles.fullWidth),
+
+    // Layout modifiers
+    inGroup: css(formStyles.inGroup),
+
+    // Children
+    euiSuperSelect__placeholder: css`
+      color: ${formVariables.controlDisabledColor};
+    `,
+  };
+};
diff --git a/packages/eui/src/components/form/super_select/super_select.tsx b/packages/eui/src/components/form/super_select/super_select.tsx
index ae6a30163697..53f010feddbf 100644
--- a/packages/eui/src/components/form/super_select/super_select.tsx
+++ b/packages/eui/src/components/form/super_select/super_select.tsx
@@ -283,13 +283,6 @@ export class EuiSuperSelect<T = string> extends Component<
       popoverProps?.className
     );
 
-    const buttonClasses = classNames(
-      {
-        'euiSuperSelect--isOpen__button': this.state.isPopoverOpen,
-      },
-      className
-    );
-
     const button = (
       <EuiSuperSelectControl
         options={options}
@@ -299,12 +292,13 @@ export class EuiSuperSelect<T = string> extends Component<
           this.state.isPopoverOpen ? this.closePopover : this.openPopover
         }
         onKeyDown={this.onSelectKeyDown}
-        className={buttonClasses}
+        className={className}
         fullWidth={fullWidth}
         isInvalid={isInvalid}
         compressed={compressed}
         {...rest}
         buttonRef={this.controlButtonRef}
+        isDropdownOpen={this.state.isPopoverOpen}
       />
     );
 
diff --git a/packages/eui/src/components/form/super_select/super_select_control.test.tsx b/packages/eui/src/components/form/super_select/super_select_control.test.tsx
index 0e17bfa48b79..da81a4f2edbd 100644
--- a/packages/eui/src/components/form/super_select/super_select_control.test.tsx
+++ b/packages/eui/src/components/form/super_select/super_select_control.test.tsx
@@ -119,7 +119,7 @@ describe('EuiSuperSelectControl', () => {
       );
 
       const control = container.querySelector('.euiSuperSelectControl');
-      expect(control).toHaveClass('euiSuperSelectControl--fullWidth');
+      expect(control!.className).toContain('fullWidth');
     });
   });
 
diff --git a/packages/eui/src/components/form/super_select/super_select_control.tsx b/packages/eui/src/components/form/super_select/super_select_control.tsx
index 1aaedbc869f6..1fe61894a54a 100644
--- a/packages/eui/src/components/form/super_select/super_select_control.tsx
+++ b/packages/eui/src/components/form/super_select/super_select_control.tsx
@@ -17,6 +17,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps } from '../../common';
 import { EuiScreenReaderOnly } from '../../accessibility';
 
@@ -24,10 +25,10 @@ import {
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
 } from '../form_control_layout';
-import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
 import { useFormContext } from '../eui_form_context';
 
 import { EuiSuperSelectOption } from './super_select_item';
+import { euiSuperSelectControlStyles } from './super_select.styles';
 
 export interface EuiSuperSelectControlProps<T>
   extends CommonProps,
@@ -73,7 +74,7 @@ export interface EuiSuperSelectControlProps<T>
 }
 
 export const EuiSuperSelectControl: <T = string>(
-  props: EuiSuperSelectControlProps<T>
+  props: EuiSuperSelectControlProps<T> & { isDropdownOpen?: boolean }
 ) => ReturnType<FunctionComponent<EuiSuperSelectControlProps<T>>> = (props) => {
   const { defaultFullWidth } = useFormContext();
   const {
@@ -85,6 +86,7 @@ export const EuiSuperSelectControl: <T = string>(
     fullWidth = defaultFullWidth,
     isLoading = false,
     isInvalid = false,
+    isDropdownOpen,
     readOnly,
     defaultValue,
     compressed = false,
@@ -95,25 +97,28 @@ export const EuiSuperSelectControl: <T = string>(
     disabled,
     ...rest
   } = props;
-  const numIconsClass = getFormControlClassNameForIconCount({
-    isInvalid,
-    isLoading,
-    isDropdown: true,
-  });
 
   const classes = classNames(
     'euiSuperSelectControl',
-    numIconsClass,
     {
-      'euiSuperSelectControl--fullWidth': fullWidth,
-      'euiSuperSelectControl--compressed': compressed,
-      'euiSuperSelectControl--inGroup': prepend || append,
       'euiSuperSelectControl-isLoading': isLoading,
       'euiSuperSelectControl-isInvalid': isInvalid,
     },
     className
   );
 
+  const styles = useEuiMemoizedStyles(euiSuperSelectControlStyles);
+  const cssStyles = [
+    styles.euiSuperSelect__control,
+    compressed ? styles.compressed : styles.uncompressed,
+    fullWidth ? styles.fullWidth : styles.formWidth,
+    (prepend || append) && styles.inGroup,
+    isDropdownOpen && styles.open,
+    isInvalid && styles.invalid,
+    readOnly && styles.readOnly,
+    disabled && !readOnly && styles.disabled,
+  ];
+
   const inputValue = value != null ? value : defaultValue;
 
   const selectedValue = useMemo(() => {
@@ -170,17 +175,19 @@ export const EuiSuperSelectControl: <T = string>(
         <button
           type="button"
           className={classes}
+          css={cssStyles}
           aria-haspopup="listbox"
           aria-labelledby={ariaLabelledBy}
           id={buttonId}
           disabled={disabled || readOnly}
-          // @ts-ignore Using as a selector only for mixin use
-          readOnly={readOnly}
           {...rest}
           ref={buttonRef}
         >
           {showPlaceholder ? (
-            <span className="euiSuperSelectControl__placeholder">
+            <span
+              className="euiSuperSelectControl__placeholder"
+              css={styles.euiSuperSelect__placeholder}
+            >
               {placeholder}
             </span>
           ) : (

From 3f9c93990c729257194bde20e13bb7ca191ecb42 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 16:31:57 -0700
Subject: [PATCH 09/15] [EuiSuperSelect] Delete Sass files

---
 packages/eui/src/components/form/_index.scss                  | 4 ----
 packages/eui/src/components/form/super_select/_index.scss     | 2 --
 .../eui/src/components/form/super_select/_super_select.scss   | 0
 .../components/form/super_select/_super_select_control.scss   | 0
 4 files changed, 6 deletions(-)
 delete mode 100644 packages/eui/src/components/form/super_select/_index.scss
 delete mode 100644 packages/eui/src/components/form/super_select/_super_select.scss
 delete mode 100644 packages/eui/src/components/form/super_select/_super_select_control.scss

diff --git a/packages/eui/src/components/form/_index.scss b/packages/eui/src/components/form/_index.scss
index 5e504de684e2..83c850af4208 100644
--- a/packages/eui/src/components/form/_index.scss
+++ b/packages/eui/src/components/form/_index.scss
@@ -2,10 +2,6 @@
 @import 'described_form_group/index';
 @import 'file_picker/index';
 @import 'form';
-
-// Selects must come before form_control_layout for proper padding
-@import 'super_select/index';
-
 @import 'form_control_layout/index';
 @import 'form_error_text/index';
 @import 'form_fieldset/index';
diff --git a/packages/eui/src/components/form/super_select/_index.scss b/packages/eui/src/components/form/super_select/_index.scss
deleted file mode 100644
index ce308688e46f..000000000000
--- a/packages/eui/src/components/form/super_select/_index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import 'super_select';
-@import 'super_select_control';
diff --git a/packages/eui/src/components/form/super_select/_super_select.scss b/packages/eui/src/components/form/super_select/_super_select.scss
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/packages/eui/src/components/form/super_select/_super_select_control.scss b/packages/eui/src/components/form/super_select/_super_select_control.scss
deleted file mode 100644
index e69de29bb2d1..000000000000

From 88d025b356017c708663e39bff90325ef71f29a1 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 16:40:06 -0700
Subject: [PATCH 10/15] Update downstream snapshots

---
 .../color_palette_picker.test.tsx.snap             | 14 +++++++-------
 .../quick_select_popover.test.tsx.snap             |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
index 2b60ef545987..d8277f1cf44c 100644
--- a/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
+++ b/packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       />
@@ -56,7 +56,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -97,7 +97,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -166,7 +166,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -215,7 +215,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -264,7 +264,7 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -304,7 +304,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control-open"
         data-test-subj="colorPalettePicker"
         type="button"
       >
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 6d200d8fb67d..b7df63978ef5 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
@@ -94,7 +94,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             <select
               aria-describedby="generated-id generated-id"
               aria-label="Time tense"
-              class="euiSelect euiFormControlLayout--1icons euiSelect--compressed"
+              class="euiSelect emotion-euiSelect-compressed"
             >
               <option
                 value="last"
@@ -155,7 +155,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             <select
               aria-describedby="generated-id generated-id"
               aria-label="Time unit"
-              class="euiSelect euiFormControlLayout--1icons euiSelect--compressed"
+              class="euiSelect emotion-euiSelect-compressed"
             >
               <option
                 value="s"
@@ -372,7 +372,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             <select
               aria-describedby="generated-id generated-id"
               aria-label="Refresh interval units"
-              class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--compressed"
+              class="euiSelect emotion-euiSelect-compressed-fullWidth"
               data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
               disabled=""
             >

From b8201ba008c0955ca01a5c8c87dd73202255d2dc Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 4 Jun 2024 16:58:26 -0700
Subject: [PATCH 11/15] changelog

---
 packages/eui/changelogs/upcoming/7812.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/7812.md

diff --git a/packages/eui/changelogs/upcoming/7812.md b/packages/eui/changelogs/upcoming/7812.md
new file mode 100644
index 000000000000..ef4dd542e4fc
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7812.md
@@ -0,0 +1,5 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiTextArea` to Emotion
+- Converted `EuiSelect` to Emotion
+- Converted `EuiSuperSelect` to Emotion

From 5a0ebfb7f0212734e32e61e2f0a1a1e0fc7e6378 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 5 Jun 2024 08:33:56 -0700
Subject: [PATCH 12/15] Update VRT screenshots

---
 ...ome_desktop_Forms_EuiSelect_Playground.png | Bin 2105 -> 2115 bytes
 ...esktop_Forms_EuiSuperSelect_Playground.png | Bin 1902 -> 1909 bytes
 ...e_desktop_Forms_EuiTextArea_Icon_Shape.png | Bin 1862 -> 1881 bytes
 ...e_desktop_Forms_EuiTextArea_Playground.png | Bin 993 -> 1016 bytes
 ...rome_mobile_Forms_EuiSelect_Playground.png | Bin 4995 -> 5022 bytes
 ...mobile_Forms_EuiSuperSelect_Playground.png | Bin 4458 -> 4479 bytes
 ...me_mobile_Forms_EuiTextArea_Icon_Shape.png | Bin 4592 -> 4650 bytes
 ...me_mobile_Forms_EuiTextArea_Playground.png | Bin 2456 -> 2504 bytes
 8 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelect_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSelect_Playground.png
index a7706db03da3baad09dc90065a24364b1d1436d4..dd9937bbf7e6679ffe12136fa631af5720ad92ff 100644
GIT binary patch
delta 2073
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
bKN1iXI$QkPJrS)=0e&DXk?>jzkA(jKtr8;;

literal 2105
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

diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperSelect_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperSelect_Playground.png
index 682f2f6532b885b1e176e7eb64711cb9a0b6c808..782e071a80cececd2b1430ddaea735dd0ea78708 100644
GIT binary patch
delta 1865
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
DIoOrc

delta 1858
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

diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png
index e3fb5d6648af985cd6c5ed41cb398c144327fb94..bd289143b099e1eee95ed0af0342a8e0036e6a76 100644
GIT binary patch
delta 1409
zcmV-{1%CR*4%rTn7YdmO1^@s60mp2xks%*{2Lnk&K~#90?c7_8++`id;qM%}yX|gm
zOK2@EEs&tG5XwnFC{PkEgh)b&93mJ5IkhMRZoHI46R(H_RB+Kql?0857$FjZauBp?
z2^KI=gCO=uyVMrCWp;Mw;01I61KNF+Y}q`|-Mo1-zxVEwnK%D`r7_a#<}J<9k&KRi
zG&9<6rQ7WU04kMgdTRCb^!28<r|<3c#z?E%>9jLEyep|x(%;{odcB@Xr80@f1z=y%
z?RL{@wX%En?xfqzz`)E@tF<=+vh%ea>FMpwK!5*apA&$6*skH>w8q9V>m##MZH_im
ztyIJVfd6Xdz(6WVnxoBBn<I_P7#Nr}>@xxIAu+wbKh2Rws;zcA)9UrfJ`VsN64UDS
zwA$@dJKc^8a{%^QwOUQ5+evk@4+6l4las*$WV6r#RRNRG0StfYlYIaHJ{W)4@N({a
zYE9M+4dwZvSCS-4=FZQOx$|=IvB%~30}uM2zF$B9rkK%oJ2(9LfqZ|>>Rfx$sX6<w
zBXZ1wMQL?9dHR)2S+j9{&b(tVD^6IJ8%{qXJ+)fVoXUpHTe|b+&ig+fAArfw>U6UF
z_HSj*^cfjE=lp*x{K%~L+_!$`j$C!`PqVAp%%fL+IrZwqZZx(HZF2_#FqM4$;RiFV
zTFZSGU;e)FNRq{~=j2zHT$yRLYQFKvLq)R$1Yn9-vvGaCz54OodBNvXsZ?_Jvuks~
zkAIl0!@I`!y!6lQIq$AjdGLjGsZ=Uib>2m}`S*|IsZD<yCOl6-0H%oVty!J(mmZZx
zvt}nr?tSi={NlN1vu<eX_@1?!H|Cem|0NHsdoD?G(Cj%m=kTTZ!IOWS@I06308_+Y
zhqmR?V^0|We9Kv%&Dl$i$nrxD9bY@=@TFOG?u9w)6Nitl9lz+H-2Kej3D5Hj1YnAI
zVf#={Tzr4<_~-rm`*Xq4qu;fsQmN!~M;?=zy}jdW$1hy`u3ss8OF#goh@M(4l_Zb-
z{ckzxwwu#zwcdAcv(?I{Zo4U~*T0<JdM&kTWy13W1Yn9-I)7o-ZrPmWha8$Y)2HX!
z`|o+recf(1*W7nc=Jn6aiHi@;pEqyLQ3o72;dy@o0x(4!dBB1^^UCHV$&b#zD9>-*
zmdk(slWczdwedaw*tsK@{Oqp0@aj-joqJ)DWbKxXIeNju3D5H&A;1*z;`Uc_#vR|y
z>Xp}L|Nj1rw%hsU6OZJ^-#(Isvu35$>15mRu6*Ux({ugFr=?!4X3MVEbIRZ?dFYE*
z=a7H>_S@@O+lICY2*6Zw<KqwK(U)G#{a?6Zd~K}V&bpzksa2}^*#2`f?X6drbi3W0
zxoR+He0)i+Tef^cb3BO-FvVQI?6kZ#(#U64-JVTv{dG01R?89d7v!*y&L5A*`kgy+
z=BmLo#>R5ZiKi6J@(ToDiWzOU^R?eRn8ANP{VvxnJ1w6)a8Zt1xH!#rD^G9PlqWZB
z$W2c?nw2M<oUfk#>7th@`U?wS3i}{m=Pn=s6mbUvz=U1Bazzr)fdDW8SFc==!NI{K
zNwr$3rqk(6@{s`8*X@bNSgW0CrJ8EJR?FCbcwY(t?1@La)6H0`m3pm~YER#cG<JXQ
zp6s&$u#b9YJd)%~E3QgU-;7lIdU}#1yM~7+^Lzm8gZ@1pS6qHs25%osUr*1Qm*_M4
zXQuJS8`-{ndm4>K+U@qF9vFbhw<jK>W34nAja+u=CAsz1?<9Hi!NW>pq}AQCxj8zL
z(UE3G+pToFF4h4^DwS$_YW4K=^`<Ger|<3ccLoFi_Lk>B04O3L02KKb^;p<l<m@`E
P00000NkvXXu0mjf0B88v

delta 1396
zcmV-)1&jLG4#p0U7YddL1^@s6@R8nSks%*{2JlHlK~#90?cH09oMj!y@!$LI>;bk%
z0=2fZg@h2Hp$Mh|mQzAv<$@Sdz<>#0ffRxoxbe<Y;uY~o5Ei1fMu>+XQG-epDj*_M
zLji?G1fiv;Ew%K#vpWYb3L7;L*+<FN_4B!#Cr{@8+<o)TlbNXwjI_FWO>?xBk!CA@
ztyU-9?)WkQ|HrDTN~2L{puds+zQ*`^BS|`)PWJ2@O;sf`ruC)Ks8dzdq#YK3Lr1sU
zO{;aV6C=%5rVsX|uIp3>Mq1sSyY^>bpf}S8`zHIG035=0?`>vuw4GTq4olq}ZKtkl
z@c`i8nlY_ERaK=q+D<*v9Lw}+;sL-cTQhC2HzUol)U9?Wy^VUZ&jY~!h~7p|TJ28i
zZl~+Q9Duj1uB&uA-FWl>vycI(0h2%i6Mxc}>;nMs_W0d~7qj|_wOPM?d!8NMnj|@4
z&fJ`E)SO&#>e9S-!J_}@{RISIiWzOU^O;}$Ja;_)Xg;;<?0o3NlXB|31!;9Ud2;Kf
zJic*5maiJhwWlx3=g#{;`g(eb=2ROu@9NH-Gwr{8d;lgxtJBF@x8I!E1Bd613x6-p
z{24RfaNmYkcjoFJ{UCcrn|bJ(>(i(wcB8R%c&|GUfT`pQ58RjDx+nKue$|`CBS{v{
znw?)<c};qI>U?p{FN<ag2*4DvcH@TJ{M(0f=OrIYRaN=H)9Z5aU8}Qg@1F5JFZ^vs
zK62-`bKi68Q&m;IbJ1n_>LU;44}Y6BPI#Vx08A0LuYEL^EO~bp%$$`Zx#v$$<(_Ar
z&id`!#`iq2`Q`lh*+1sq_0J?p7R{QS3l}fRH-G=wgy*?L2bdz(zcQSUzvr~^*Ee7A
z;e7DKlXA|n$BnODxOhocUvz0Mc-P|bwbK?X%J-jMH{p4nKmewQ=U&;KGk+EyGyeL>
z!NGiV$tnM|r>d%4dh)56-rqmIw)E(QSwFlj6D1%3Q$$}+PpTvj{`D_8{noFg*=oJ%
z-e#+n)4uVQJo?g$>2LI;r>-VEPe1^sh?D2e&$=y}bI!5HW%j^f`NU7}e#3p;Za3He
z<nGKFoSril9g`<EZ_X+2Jb!w^^8^H7ia2@RygapabCTq{mt2--hKIA_?(b#u?p@=1
zUV3$BF8|?O`SXtLS$)x^Ns@J2Ud}1==TCT^FA@Sw5zp^<CGY>%ZF%gv8*=2}U`E^R
zeCgpex#^)bIeO;Iv^t$^+q);9KKs1fc-FaT)OEJ(*_~y#eLeTDxPLCk9&yB5p0#y&
zuYdqdB{x0vK-RqQe13Mt)#Gbp?RK8szAZgfo#T%@D!s4$bV;|{&GJ=4Isf<*a>JSD
zOlXd8q617ZH=cQJb~O*={8hJS(`z4H_4f2+$=rEa{EoTf@!0U{&MaRwlmo4?eDZx~
z70vPl0x-plw%hsq{eSo6w#OdH4a?5W(gh2$bpFCL+pRpgWmDF^yfI(?&98Ia>1XD%
z=PfV#F-0F?0Zd_U=g+wd2mnRgfdEiUKmaHrAOI8*5CA6R+LbGl2nYZZaP7*K85$Z&
zlGIgQrPJw7@{s^I)V&^$R=bm`u2MI8>WsD8lYK4#4q>myqkq%wW~|jtqo+<i(BGTA
z`^F~wYycdh{xKd&vU26h4D|P=?(aMJ753eGo0EAy01iR_8jlrMU7g#9hSJ~HbMO*<
z+Ts1#w|^|dJN9M&fw8pPok=|~0F&?ac#O5$*?(XxS6sOwx7>1Tl7s(VSREK?jo+X*
zM_U<bw$f^K(kbn_SO?(X|EM<_bq4wy>F;Zdum2r(X3?=qysMM|0000<MNUMnLSTZw
C_35Ml

diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Playground.png
index 23f6400513b66a6922559dccec90c02b03be7b10..501accad465f2754a7144f71b5c5b9ecebd7a005 100644
GIT binary patch
delta 496
zcmV<M0T2G+2lxk&7YdmO1^@s60mp2xks%;|qDe$SRCt{2+skg-W)y|dLrS4kOK$s!
z3DTlY`aBKbzN3*AmP1{5=^!-{bkbx`C<AK^e{is8-{62ve;nre*Xew$^YK*Yaj1Eo
z3ILj>t!}lhZo8>XxBc?oABTCG#yT7xtD2^EyIrl<>uQ>2!MOlji+P@F7>0U!da9ak
z=i2XYt8G`G1M=73AFJDJYQNhpy%T^d_INndaJke^KmJ_p>3piTX~YA7|8=|HS5sA|
z^Qqd?v9Fu`e(6mBybwR^c6B=T)ehrWuh#3O_W<xhyjrho7{_X-d2%oZ;G4B=ThlyM
zyYvtMUM91F0gVBZU;<lz_%83?-Bp!<0Pr2&zq_mZ`}?Y@YTKr*X_^+E1i-a>j>lyf
zt8Ln9*Q-@shGFSl09>)>c#P9rmtm;&YE^Bwy{Z1`Y3XeMT&b_)QC0Q(-EY-xZ>rsP
zT~$>*9u7<H1K<k%Hy*$K^0w~(ysvH7eLkY!>~5?7^r;>m9;)wS`x?h_(ZK*L?>Qdl
z%TRsa*V{L*>%)gXs%lkLRZV{!=I4)3=VP6Zr#g>A&9lQg098%XR<~MLx82mH+kScf
mIv@b>t^5Z9Ktw<Qi2MVz%%$bRdF2cM0000<MNUMnLSTY@nFON%

delta 471
zcmV;|0Vw|X2jK^h7YddL1^@s6@R8nSks%;|i%CR5RCt{2*~@O6MHGe6Q{}%e;EQ-f
zP(bQDP=w4QA|XU#yKn!6L9m6GknBk}Vy$6~_Uu#XwEbaR>MzIBScl_S<2cu{ygdW(
zKh|2SVd%Bp47FJgZ|_4@)jZGj>G@QxRXyCTYZ!X9)-E;{fa|d=OO4~_P8^P7-QTWc
ztM^`Qe;AkF|9GkGc2)Pc>r3wh;EH{GI@akl)prlyR6m}k>b;8x0RQUYZd0wbI-aKL
zhvT{K@5BRuFLQUhs>AVIeVpc64gJ!40Qiqs4L3DTbM<9j9LxduV!gLo=B0c+lc552
zvw#700e`?(dB59Lm4E>772fZ5_4xQ$RaL$9R`a}EcoG2D?lm6cG*|1b`f$_hJWiM1
z1;7=1jmNw!bsnc0ZhH0YW>rtm=Syz`;7a{H9#vJl-LAHqRrSsKrmCtwJ{>Q)4}dH5
z&v?B1@u&Lb@v%1Ro6kq|yKgu3{Bo{ee|xT%{ZzT8X};)S050z}9_MkYm;JfE|KVMI
z`0#U8wW_LW`@{HlK|h|xIvmFu$GMipVI6>~)>;iiukB{2&3bry{}V=rp8%TEv-AJ}
N002ovPDHLkV1hh|{9*tA

diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelect_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSelect_Playground.png
index 69842e4a72114bc7eedb502487e221817c00c262..d31afe8a659a0230a5c395484a4060ba9d60012d 100644
GIT binary patch
delta 4663
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
JguCgJ_&*9ZP&ohq

delta 4646
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
acJw1sghd}D&%XmD_~0hi#??3ej{P41#Wy+t

diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperSelect_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperSelect_Playground.png
index 056ab1e904a9d3d7be353e3a763dad24d1270f55..2702b2c7b6d75791c6514eed99534e23280dbf47 100644
GIT binary patch
delta 4262
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
BR|x<B

delta 4245
zcmX9>c_5Tu7oIFxBiR#*ERj7l)_!Gav81w0vSujD*w<lRQg)^&`%<zLO&AQ>CJAXU
z3E7uHmKd_lV2t@@`p$pvd+#~t-gC}<&Ut83f25xO2MF9S`tM#?K5;5M?A|c7dy_ml
zhR$Gl0J<>8^j#KKKPn~vYn;<&z!gO*KVtci<gAEEl9F%4+`f?X`bm-yYmISD^c5uo
zlrbNK6=DQ^e4QO4>z3YgkxW9~P!`qTNIWN+jc~-zZ%^jK`zJf}jy8LGKF!R(<9@32
z=ON_YGeC;viHj70z3exr@@QR(A*LxEF)q=AkDt%^6M}Wy3GcA*7H2Pr(9!p^uVPep
zc?J3C@>pN!dG4H){&1|c#b*@1_qB8UPT`*&b9Te>!zL{zVREpn7#I0JNeKxF*Kr!=
z$+t((3nZQ7HfBFAJs`%z23c{`lkhO3WdqKuRqS{8*a;x+^8YL{g&TB3qUkyb*QK6b
zm6d@W>rF^xEh!Jbe#?J?Omwyv<PNNE;fx--rwtL^%nCC$qRXjH^u_PrWAE9-fxh)#
zZ?|s^@B%&kA`7j*>XT<ybrr=hcP97@51WsAYe|`jttaj~Gt0FBCC=klpl5+czJ`x7
zR?J6@{@FS$t=JJuxa0?lsaXDla)Ah04~zK+q6It|s|(9ZewV*}bbOBDG^xJGC4Dj_
zb0+|vA7N$2I7XVN1d>0iIbv8#r0X3772KTiwg2BjNuu5`SFLqByUAtmu1k!FB%D$7
zRQJB@Z9*QE{{<6Z#1m{Y<YtFMSL68x6I~fu2>9^6r<$h%7nS%=VKw6ouUbYO6FB1o
z(@Ef?k>%_o%;I1$3)8Xj24DR9^8Ebe6~@Nv%%@I!<8agu_6;#DQTs0sA{+CS(Gzuq
zm&yez!_92UwyuHXw@7Nt;UUw<Pm4FZ4&CovUHW-uB6RJm?fsi3CdWMr$CL&J|K*sE
z<3?JM?^OQ>NTA*BfT!7D%7mPz<}*d$V`F|EB3z$1Uhh-$NkBNu`It{&;Qckx#8d1n
zVeSXpExW&TK|AYH898|Uf>{XT3U%Dwg?dG-esi0msIAYoi@ngU-Z2s$0?FA~8z{hh
z0zZ{@;pF5T+ZhwO`sO5PWo5-Ickk>>^X#Ee4jze!)C7->wQL^T3SQr*0tmCgFZ2HM
zyAk#a`%2KkvOcrOoeQM3edJV`vm!lsJ@Nnm{_$NAQ|sPG=o||KT_!x87Y$$Xd7$@N
z(!yg+*IQ8VRc{_yNCm&Ifxs5QyYxN}l@~3v1mX>fx5w(?yih1xPfvdu+)!VinqW|+
znO)Y?E9^K|KeFhOD+^@ttl^KCjlC!TLW;{}=?+bEtR+!htDAoP;Hb3arH@B$C*lZt
zb7Mrm`zVDkT_=jvR!eP<Ee8a6xVQf0rmH*24KbCJmImOIw6}I%%KeSdr+e7rK>Gi6
z4u4xD%oEQ$;epFUrPA0g&4sr+zk?L<C1&5VX3g6bMF0S6;9`r#&7>?g$vq{0Nl{ai
z@fzVD^b#$BD%l?yU_W_W44u}D>$zLz0<ozz97JC%3=80VyU~VhHkra<4ITuuxQ~aS
zFs_ujTUD+QA&c^icu9#{6PQo&;(??w4}VHk+~&^E3O%!bv#@O)<}@-F<tPaYeD(@l
zBKS80;fSt#Z3hv;wH|oF{BTjgUuUocG7mP@6fpIpQZ%dw1fR^c9NFyM5ti4v&GNbJ
zFcQ|b%L7twEiu%d_7ew@k3!BoGd5Q9sYf|sU+nuTyG<ROc$s+sx^8*vtp|RcTOtyi
z^<YvmzJpJr>|Nti_<9s5dUGCO+RY=Lts4p$Bxfm0tN2R3NVpLaB6dK1t<pgA6aj-b
zZ8OAvR@(A*83sv;>(=>h+0pBGe`YpBGAV{@Izp@n-~Dv+p<0S>!}{Y~S$+vb%5O!R
zaUYBF+E0Vt={6jg{e9NRt)6la_cD#y!jL#*f)o$fbzW>a(CO@yY1!_d%XYT6vI5#M
zsEK2v=>0&GDXQ+FprD((yWgQdanva++B{FI_VJ*5+kvNW2dtGN8jV(mpShwcf(F*d
z=DC}x$pud7MNTINZ64C=zeU|c83b#{gLwpX{tnvO9ckVV+dXaI*czA27WrA4*YKqM
zR6BajLr_R)E52vYt~o>>3?2&t)_%l1p;9g=?ba+$m3oh%UqMtXx>t8E9Z+ssTF!s+
zpoxUaJfLGzNmnPc@?6uKYuVZ~70^Yen)IY3kfol%o1RzizYtW(Q-(3TH0q0~knKM0
zA7uE9esQ2dzReB8)nC4KRct(KGbJ_j(<Lh(7=XelTRnJ{>W$%}pWT4r*5xU9e$SKr
zKs!v(IbW5?Snb6&xA<j9trK(tBMy2H;1AeDH9l#NRc3p=9ja6Fr$g|=fuHf)?-8vH
zYf-vGj++@cyR8P+7CkQ=6$8Uma^~SPz7E*&SxH4&k78ACs;E7@U!w@fX=#ZvE7Hp8
z+)#F&7E{@tPJi|wco;Yf3PJ2^ZqVjqWuu(pT;zx7sCxbFr2YX9Obn4s-HxXnB@AHO
zkQEgbCV&YP8cqLDksV5t2!{7AVKQxQT+t0hK%GKYf7SQQ!%539r;R<=@+b!i{xIf>
zprxKxOq#gvs84}z=-j{!-ZAP?lb=;a5!E~sy7`4`fD_=HYAWm+rF4I7aa#=1`Sd$e
zO!Nm<5>$n)IlBm?jpHa27$1)<Nr~TUf&J)-7DwJtWK-<WkO1fxYU0NlIGK)zLraT!
zzO&PC9;G#uLvx|7$#g8Xc&_>(uf#=<g?DNn9Ga(L&E!I>!^0-8`)(iO2Nl|XEp3mD
z_yqD|fd*3Ec)jkWt|eWO2K?*)vNAF=@0YjUEl;CkE`PM8SJcYPucad2dBboDXm7<j
zc6BOVJ<KmibJWSIo&GR8iQ7~zO2EymjMX}Lt3=bi24Nu~&A={3-#H<szHqZ^+OX>=
zoQ^+}q{@N4Na$|b1!ZNIJ)h9dmJ~zM5unB`8URi1uRn)6<?V%C+1PB%)0<ue*L7dA
z!~fia3==d92Q85>({DIj!|FW3-rkGYM;xB-ji3}*c|jw(Nd^9tpbbab1!v95&+X3J
z73Uef>r&V3e_0wwZz#l~(DlP47ip6_x2v%hGf$pSxy97d9hym?0c^2l?jG>EwNJz9
zzRak*n}p8co0iF$h0Xe`FB-MzInrZbE^#-l3L>Lro`FX1DYm6rhs{PuMSbDu9+^<l
z*6yBOjd*?esKU$Lgc|QEGCU!d>lAj4@mBnmX#-be%_D#GtHQ~P{;PjqsIeIk$F?P5
z;s)tal;RD2aKUl<<2hFbFj*JZ-K^GcbI_$k;MeudC7dWYy^juuDDL<Em~%t#TIa+b
zeQ{q7Q&3POuD*O3XDPjX&rtieXaby;SNfSTEu8Y1m0{kaX7Cg5I2apua!dLPJ4J5F
zOkjx4dkM|*3JS-IH-xB1J&6y7HYgnVn~X@qcl37TD8XV{fM)n%nR#B!qi0Vw@E`0W
zxK0~9e?w}0=`N9)m!9tGBnivA(id}L`u;<PtF(|PisR>(J;?Fl{75Kt60uYz3ijk~
zLoc`4BfI+~%k?Z~+Jw&sRH)G-N?IR|O-WfU957DKytLw$j7G<j-U}`jgj%#}Iz*MW
zH4;HGZNQzgO;>Ysa>kZDy6;l<rkIDZsILW<5YZRcOCrqj-1YC$-Imlxkq@`CwRSJ)
z!e3=kh)SgwE?m&l^-*6c3bl|bw==C|v9B7zSyr_$MLRT;RcU=#t%$Wi4aYiLgDP4$
zwNyGJaueE04%ryzx<cW%+_O=s8vcb^eM|}l%pE4fFe6PP^}j^u0RQ5lagjl54tU;D
zE#9jj!c*A2Kl>)Wa7s)hM+6m8vaSN`2WF}OMbu|(*`!{xaf}bHG#>ncP;ZETNSFYa
zov+XkCys2Yy~ijIz<b@n<5Yy9*N8DLa(87=anZ3)Vk8cu7J0YIQU6h1-Zd+K4j@@r
zWgac*c&cIMC)oz{JU92tr=`NFWxOzBlFJQRjW}J^q8AHLy#y_?GTLS+>sFM)+m+&0
z!?KFWrV@x~IuuB~V4s)B{dR3$uExK^BfIP|nd{lr$em5Ol+#rE!h$2FlhnT1n3{)w
zD33r|zWe#w*qT#k60^+;x42&c!z#WfBm~4FYsZZgFAA)wlr%P$SkZX0aGj~z57<6;
zSB|Ixh^gTvdUr#+J-#&R2q#*Xl$UD$sYSA2XDqF({CfdSnf@;XzXEv7l|$hPMxA(G
zKErdc+x(o1;^;RNcmGkRpnY_0|DVnsk1|!*;d#<}-^2Z+SM(-w3P5(7!(hq;zwGq%
zJ8)lxD_DfEI%0Ce)q<R~gyCyY{k`G=*;)U&jPuOwY}yqg9(dXwE~p>utcYurnUa^2
zAJJ8vCc_jRn)1y|B6P5Tr)w<!v`!Gam=?_aHydpMdAA6<3CFDrP`NMST<I+(<jvf6
zzkZ$z4Y<pX1xgol4$7D8=q?(`81J#~uNC9F>QY+*S+oybA59)HaI8Ds<^%@hkw5Ti
zgr=9*Fyq(@$I<#1`-=Fv<G#@w8HFAX|D*jS^_}rb*R(vJZ%Ada>o6FPhI_v&;Y%oy
zM9&d|R9h*E@S2JqqZLd3&5)!$@4S^czx@iRK~PPaf_16Ycy;brQ@PanK31-9YAUPu
zL{ouJJrC^idSl4pT5e_I(SaASfrCLFN}yoU!v4i*eq<G`Iy!TKOzBaPr;pr8xD_c~
z?YuPc@rnAu(`dI9PKlg77SM)rL<W5*w#)2XpMqadP>|A8N>!Ev<jRa}^<)5<QUQTA
zIVJtnG;y6#<3us9jcGkjF0NybMm~xc=mdNJ3}eji`=l*$7Bh!k4Yh1%C&)s-l;Cqb
z^^U{UUV`6`Pl0keq3c7-Z|L*H!h)M*+e3W|o%hUg1w#aTB%_R9EPB;vbu;S1=zjW>
ze<bQWE2}-j?hP4Ej+uuOXMD!p#^qez9WV&nHyY-tt?^05^5eAJ3ik1&vl)d<mUOnl
z4s=wsshU@|r!mqZWh$oIp>syW!Xs!vOCasM-_3u2&22MWPOyn6mrIX}sPlv67<OLB
zR`ygYXT=Z#z;9Ds{_h%$q0^*>i9|xMX{^s{1+(+TQ5c4S0Ph5&i%ixopceWlg+xsd
zzaA5yDDdm*((M3zFH96j)^i{|3As2IBU}`;B)lg2`e@0A7KIv(|Ff?Y^w!xI)rqWb
zW$>6kIv9)c*bgZJAO(f1dptHSknzm33@4_-IJCSH*KI34ma~c-$sK%3akF$HO=MZE
z;<kc_5*Jj@EVz}<ZeHeBh5oyMUHk2)r<?##WmAaH{ffN0d&nq5*-<8zSibLv*0)<-
zy)KJ~=_~8O<Q$Rw9e#ClJO5ZFV13^86n75GHNJ``F1_F0bcl?*mCS~8OBCD7jWT7I
z-N?ZvReMe_h~zh`ufMgv-6Xq;m=wVMV|`NTG+QL?B&V^eG@lvHrD}n(Nim^LKAyS5
o#pQBAW5IC=Bv(Tv>@{lBDN-z5&ny<E2BOOiV+*5?SDl~y52~JSFaQ7m

diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Icon_Shape.png
index 1282ed9ea0fa017cbebaf3a084b3b2e8f701367a..b212567b568df3887ae8977ae883f021c1ed2c56 100644
GIT binary patch
literal 4650
zcmeHL`Bzg{9)FfW+5&@0tAij^K~hDaf`aVU1sahci%<e2SR(r(L<nI?I&~@{vKXou
z!{P`MDPUL=Adp~DB8DVNzyKk^g(OOhK*G|50Q0bO=A8Lq{(w2B@0@quxy$+9`(5tm
z^FFuW49v&y^PQgq0AL9H?nEE}d_o0)O%9)K278R2mNCK4CUl_BG2j8$>>b$n3;Gx|
z_*3x7{S<Wt0Je@mPkbAkRiO}Jf2llwjx|3O*>*anwY1sl>(76>(`sh4rT&zzJWx0j
z5WeH;SDnpS@bD&u#nM81LQ`bK)w|@0;j7^zA@}Tbzx-my(Fpz4nlpR;zQt;=k(eVB
z3%v-R84#g&QM-A$o_NmWaxZVCXFZRXBVKX8(c)*^J5(!RXXUsz&Cj2{Xg#c08fFiX
zb%4GHfzZ7j35Pr2wj39<1Nk7NJ~+k`-`%WO>^3nm<<zybpro^(0DV<_Un!SV&cLdI
z>Vs)6J$_@<359`S@}veu9gnMf9#<=ls|}!#;iAkf05CS%ElQa%HYUc=_$f4g0*#P_
zBhaHB9+e&<1#zplQ7vmMO-xPw_CuTC?7qIEJBtRYdUXKcmN#9*efcuVRRkOMmGWlU
zTC9p@KDCqjrpeD_r}-(uP^Fvws{Z!c)=JFZ03ga=zL*X6bL;$~p@cPE9U{M?%&OiR
zn)Ab+<HwD>6-V*R`?|o(0CHeG>JHNjE#vwU3=9qHMpGc;+o+@gZ}Z&MJ52m6=L-PH
zJhuLmZvELr=w6elL$|H!m$F6IXim&4Zr^;<>@3p*0JnRA^|g4m&iH(YO)tWEbbfxm
zR{3%U9BH<Xb0Wo$n3Ad|ic83@jPv9FfcG-W$zWYDZ)<MqwY^b<{AwJIpf0v=2Y$@s
zp!#9$LU4gH(}SOe1Hh7PnW0d=7+5*!ASnI;0Ny83os!P8(~+QMiZNJXUwk|E32^2w
z=k$T2TmNAT04KNn+4*Nc{w#(+55oT~GTfh4d<Fn>Z--|troXdwmZF^z<)*XYBxLcm
z>9yzAg98VL8I1P=K{>?M?JIk%@*s9?tIxfF28CiD1iHULFv<5Ntd=X7G#N-vh<04k
zA^b`aMRM07*WOa`0+vT+x<Du{ui~-teZ0ZGiY_|#GM}C*%7cRV+1DsgEGpL;7&n-7
zr98~b>84fuiv$<RvwqdWar5fc6-`_2tD^)IXW(JuE|Ve5haSr*tvWd#Lx&Rfs-!Y|
z|2!BMslFDx|AvPvegl;^vz#UEXD!%*6y{#2vh#7F%9)4z7O_xEMj>iiM6<=zaP_1=
zg)My0d0?G(E{`yc&9@+yFtrOFnuQP$+=tR>Q%pPNa!bjy%*eger2{Tr6xt8T{g3Qh
zoS{$|N9p`QJ&GD8){NSdMGEP&y}ruFj)-c=d)h^3PVRni6W<gzS(tM8o(tm1E?nNt
zWus{onQ6_kMb2Lt&^{DlB#$lVUoRIK$mR>nr)N}aR)sRo)Jeyxanu<6gFX;-GaloL
z9c0-*t&|I72laPI=rYFqR-a^o8S`~ZmsIP;d8nh0W@+@4t^T+}3Rvupp)46lUq6OP
zs~M|B5gCF?VrVM3XmzDTM;|jjX0v&_6phcyl#ZIJUsQUry^t9aJJTGWjSL)U&CL25
zkC#ZG1dRK#u8XEm5>!0Zyi^r&VU(6W8i}bD$T>&2Cuk&!I1_ExBNcWfvW-~QyXd(m
z*EF=MYAdY3*`Bv*X-WUxt`3s435dB)i^RnbSWmcI93)iGl<$IyMW8+RMV(o0_?nD~
ze(Ga4^s5}_{^rQ6c0i!a*|DA|UXb{vPv?k<*I$feq)yGX$4)n|-i*0_xC#@IHlET|
zp1;AqZI8ZdxKXn9b_Gf>>X};(${Cx{D_?(4-M5a<V{eP%cWGm3DXVn8T=LYd4o3@U
zka*Z<1rVn1THx$S))OUhAKZ>_q<9;Wxq7pmE;3_W46Di;+bT5kQl4u-?dn+H<XF5o
z7wu!`c7cSh!aoYwaN!!pwM)AcPIF;2jAB;41c0pI&IKxoV8tU^CzMT(^cO!_!7V>l
zPbAY~B+=$1fjNHoT6FK?FS3}hsh=j(*SocAWhI<{`Yw@{dZt|87pUiSLS@6@soYsJ
z^|TMpSh#y5Y6TXQE;lGu{cx-{yW_Sh#50eCNhPap{amPAlJ!L8%RD4~mk3r~U9u0z
zb9GE}${qmpM1DEH%*tl_hi*x4=JZQj--0Gn6R|?D?PIibqHCZ8mcfCEXhB4a1pXWN
z%M)1#ueX9`V=v@Q_@?xD=C8dGqQ{e+y<X4T(-l(pSJmR{{$40zGdx3e*rwk7^*rXp
z$B3=ie_v|Vg~^JO$2vEKljwTR(rdh2_Xg*b-#b{0#C}Z$b>?-WxO4aNUky`MwN<uw
ze?$)Ek8QN7SD}QJ%NDt|FL_nigyL|<9#f~}r|}JTFpL|$h=aN-<k*BpR=f(afiz|%
zi7yO0(#+|YIP?jN<~!?Kxj5FxLQQ-BEh+T)?+@)mQdb)hO);Zv-f3hFF%h2@%GJJy
z48P07WDgajIFs`<(dvhy2L4n<*;$Ia<zjx4cCMf9jFfj?3VDB*ev8<w3*6dUg?VIL
zW`*pW@7`DKg&QPjg}%t^rwF`=^|GFsHVfV(*rR0dtlM~Iq}g@NYl3ZVL@W%4PQUy)
z2!AVc&`*%swRD{>wWj`2QDn316A3p?;SP2lM0QCo?_(jf)6vQ<KJRG-+;)ADFHaxR
zT`x7l&C*ShX;hQg3%NmdoipJsn(B2=WRIFm45!F^V;Oe#xx>$cxb*1(IhyzE%<T?1
ztnysYmB{+mY>r2-)%g0k@cWy9GgWBj98tSsMB%jP+44GM%y`n9(5Z}AMAuABS1g;}
zQj~C*W!AZeMLBXrfq;00wOI>9^ccCZ=t~`a6_L*!nzu1`J71APDSu<1i%I!DCzb2+
zsy1ToxAG6vobLaiv$C+r^y9J2q>=m?+J&BleXL|O3=9i-ZP^Dqbv9IbxnmjT#!X{~
zP8UH|V-T4`X+h%p%JvyNzQS=`WxV0n3uk5qZ7nOwAt||j10BtJE(B~OS;d$|5S?-F
zR4yOxTtbiGe90C3`=jXtLH<un{5^IjZg!SRGnOTF8OvbNO7EZ7n|=bmeQU(yi%Tm4
z2?wb@Mwl*vxnfHiuasu}0GgIxYlmZB_;{AeKSY+XY!MYU$Yqw$a1{CY_QN6<b^k1H
zrpQz|BGHp61y$ARBB`B8j&+%T(rT6g2)pkRom3!{mtWG`F6A!D(Zl&-Qgvh3%GQ#V
z8hWVgkr4v|*87v)h1+F?u{|j?AI0&{Hc<C%-`ZM4=8G;D)brPkCOd})Ef`<zK&UD!
z;Zpf4>uym*7Kesb=1)~;SXyq($(4-CQ1QsAlw0bdo~yvW`NAUiwU<({zJeueK%bNX
z!y^8hwq{LJpMbP=$Sdb%Ih0Ulf%)DuXQH7kPTV8%SZrzp4IL%a@)c4f1D_#IdwgCk
zc^gMS!J2Ny?#j->y(wi$eq{W;@%tmC1u2lkeDBsw)HhSTs^SPNOJOp5kzmEvXq2Hm
z91fAA<p(weFTK_N3@V(Uq`#T|!Ity=iH;7O0R#TKRPNw7i!y|)(o7l*5$UAZBOV~_
z^|iw*VT^2{Us#5y1T9~cE7{ktPkOl$PVEny5R|Wi<{#Z-D_d(y*s8yJ?Jt5SQ@EiY
z<rF(_6VS|aTkk>B)@(s69E13IE09`sIAJVs2Po5?p+*=pXUVeW{*v!r7l4~uxs~s&
zaIBgiIsiXXx&ctlM%b(o>%q%Km!O1%Y?A-X+D;*P6DXD)B1fnYr_?P0(7mHGH#1nE
z6wZmg49Ynj{>fyrP&m;%ns9h@P&WfIq3Ct=1qE|4@valL`JB81{%c3JWdQ_4Qg=;~
zJ&5#0c&!hV;9WyZXd6FGXdhtl-(6gq3*H1oWxHLSP;osVl`sf?UX}_4$9oYC<gnD*
z!_T<`MW$`2K|-%X8YrvVYwml1e)1DKl(z*Hl{F=vPNNCQs&u4kMN@`wcususY;F#5
z%M}2UsEz@`6dL+P7=>E^c`)?)WFa9bj73E>++*TZzfq&3YfQ{`o}vi!L7fV9E1p0P
zCv>DsiLuj<ZrJdX4mms@&+T!b#{VEET7pweO`(Kfn^6M;1C(-C1n6gF<`*5ZDwU=k
z-c*sd6y}m9c{-A~Xw}igk{j)6OciUvmVuE`olqXrKVS&T@%Tfec&DB5PNe#f<dDrk
z-v>vNj;5s(6N*f@B6FfCWFY(vlyJi)6ug3{6E>Yzi+_Po%eqCd%lY}kx0|V8+Dgnh
z*_Qg-7s&9YWOUL*bL9wlC2>10_O9p@O$en4eeK1)x<J&ju*WZD?`VSUVzwp6+p)+y
qTB@S$0Q1mHnfvX){}SE5<6(PZe^wt-bb|Li0Q4m6#Dil|Km7}86bruq

literal 4592
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
BDck@6

diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png
index ed1a199d0c5535f0180283ca8836b34321997283..1dd01220e53eedfb1dff77d5711eaa8ace6c7ee4 100644
GIT binary patch
literal 2504
zcmeHJ|4)-g96oS-QH!`OiZH%7LSPt%+5v(oItiq_V(DOtI1mOR9a9Uo<AoQoT{OT<
zwUq(`DbhtEkd!&JqX-3xYnrZ>!e-S%%L{e|8ibZFg+eL9UjKmovY)vh?s9jZyURWI
zx#xLqeU(Ub+u^kX0N@72$0h^dC<4F%@9K<=xIeFwV2uMknHU2e4SG*woe$_S&}mn!
zl)C2p1i*G06no-yaf1m>$WN0yl<PSage6k4dcEuc>V(GemiS?$DsboHUrYxS<Lu8z
zK0-cg4E^D1dS+Tc%90*Qxse->D>~?W^PX(PMjhl0&?D4=I#r;Ub>3=^qK^@L0AK{O
zLY{b+htw+D=1^ttLdKKS9%N(Y54dp!fvp51g`(gc-wA-<V8bYLem}>TFpzz?2fu!D
znA#E?6hx-Nxf;V!Lu76^+w-gdClzEm0wDSQ9fP0OsifB9NneZ95sJw~^Rs73=3g}j
zRm|Ya{AlLSLZMONe{Pr3+sEgkx7^*19q}f-Iq$i;g-m}eiJzL#ONq$p8@+0kG)xs4
zqoSfA?x<vQe}#+7xt>YfHULV$vk;6EOJPPM1>#C?HjSo@Cvb5P-ULTQAs==SD=HrB
z1wW2A$g(S&q|*0mAsTHlOqX|(wnt>73}tv9k0kW;);NOxYmtP=KWV9ftQ`6V0m2Vh
zj`2*BCq|o^nsn)Y0QA&idq@RtBPy7Oj8TR!M=1W0nOp!U@MzP_+!id*G_X+7-qjtE
z)%6X!_yW5MQ`oJoLr>{&Vu4fyUvdCXFFpDMK0@-GvaNmUoV645qcpVLLZCcl;5Dpl
z07k=)xQU;3n=u^BN3r=Yowlki47T!M>l<uQ!T(~y{`<>lCntYnFQ&MokS57)a32qX
zQaZc#0kFzUCz_1>&2Z+bfzKU&>;&GhZOBW8btH4~?>RQtH4S6oyPIrnfNff#4p7{+
z(Oxhlk{X!<=(iW2f0-y|1t|PkI4KQT9zsoRy8#%}7babM%+L3N_m$%eXNJwq({Rdm
z0P+`_TS*yVv)^|Ow5Q*JW``ZYyv`zOC2^UXGkl19HJy_Bn+D>Va;sP@mV3`>0E&By
z;!K?!i9#leW321#n8viFD9^kW9M+-LLFC2>1Lt^OP1!ck-+=`djUO9?#VSoEvxa=k
zMla7o5L6>2Rwx=~Lop?c?k#(WMLt})rOm5foUCOIweWq7D}L9jC*Jz%UeWGJrApS7
zp}|Juv;vw!c44|2KgZVQKS8M$nFmwZBA1`zT!1}l4J@GrRSi%mLv+|00^vi-G3lOM
z!-WE{UO%>{gCnsKMY=0}Yj2gMC8Z6oXf-*=7kz8C+USz`LxRZzEiGgre+9#njH&+Z
znZnnGy5*AlS@Wr$m|tj|X+;yor_|M^u!~x%aD>VYkjv$s@<OX!mcYN3C%0-D%u2Po
z>T;1;guPbhg<dauK|x(sY9HRJZSRf1Y=$^koX2~&;ctJ}5H&c4!8{`_4J@k6O3m%?
t68dU9<qImy`1@=qI2(EBKZvz#6EJAkm4C(TCSz_4Kyit&k7B;P@h|NQ0@VNj

literal 2456
zcmeHJ>razc7(Zph;RVUID0sncYQko`^aCh~6CweXXp2B!y248LZgbLiR0PIlm9|bI
z&UmR=g1QFU8ClU&cyVegw(DhMgJ4&PqZfQjO{)WDuPBycFS2+4!annSc%Gc+oSgig
zC+GZr&)LI_{mIMLE&~807aqtj0U$vQ0A*{^5;C)M^$e2?l=_nWc>o_-|BPI`S)W(P
zOd_o%>5K0GSejRuzn9tE;dfTlq_frxxtqS6^QBL_?zYb-9GH0j_vBt?drjWDRhz$G
zwl_!w&*$?dHb-e0+tvJco@6F|n<AD?KajSnTEb(>$t-i@uI-`irjjTMooElQ1FMw6
zNvGruU=-8Gn2xdrPDR+JBwlimv0tLkmA^HzFAMJPu{7?oX}O8ur1uWfI;=zXWV2cI
z1up$6^#IL2o2oSp`vgv_CJ2LC4~wtrwIl+UxJGtm?cn`36b{g=Zd!UxCcQIf+#+!5
zp2yaq(HGWhmHsviLO&6i`MOlNFtr?j<L|bixIym6WK-qP^J~1pX|Qu28&){tXb-j0
zr-YuryZXk?uq4eC;8JWgl^or%QsrEUAfbQUI-;ZKm;*wz!|PMs5XP!DVHD8cAXVHP
zlI(1#tLw1HbmLYu`&e<65~{TWlXI=)#xC_?0OmhrP;sT7z#w)nmr>(5!p6k<x5ERa
z#mj-wZ_lI)kLO%+QWfQwe<Gaj<}Q{Y5WAiRK+_;uHO!S08wRl*3RN8H9<@_|(ZCbt
zTqTcVL$#u(8v&SDm72W!;%u$N?@c9f<Na0RN7$YhyFb%^uml)6^$%~+JE`GB^1jYn
ziQv6ci*B(8i|=6Z8!S@6|6)SdNW}B#j!Axc8_B4D6<9=3vmHTHn&CeHsd7&?Vz~>k
zrqC=mrh$j5Ns0KpQbLU8MESy*`ATGI1pt9d;tK?XL3t2D$QhwZrzc?(N!(@qTd*Ns
z&f{t+rVV7@O&@%=Z*>v?!Ft3pVyb&|i(hKRH3|sZQ2h@`0x(LNS(dW+9h9Y16IQsp
za{YgZ?wKS7e8kFq9qWeB6U7O-c!k3$>fzlUT@6k;+`{6h@7b7i>b^cc<t25vSA+NJ
zgIJm(5_qK+%{`2-V`l^KNi)|X3i;Unl+w66T;#c8h|pF16CVY<?l^rLl69fJQ#a0C
zctE0_C^}0FWLvLrMa5L{3!d=hd>0%U{n@WkFsK_+)WQ&UV>;LO6}$Q%04{+p7n9r2
ztDfOhxqV39Qtm}qPhT|>rj*QT8>h3QM+q@)x~ETk0y)#V$p}FIhTu7(TijCaaDH4Q
zTYtULstQHA)5`i5Zoicw3~?%s?g*>?JSYsu)dYUiEI_<^rCFm?^KtiR0&p!@3oI+2
zGS8qmIV8NM*#fjOBt1hF_w=Tm&vH2DZL-#HWM1E-e&10?0yuuIC!%Iht0CWUFTh!&
zPHn5j$<k<tvWiO02TP9x$^P1}@gV;)ro|(8Z%BZ|J^mkcGb!y9!TBv_?`d+n0)+*P
Kd_3>dQ~v^oAGD<a


From 9b14b6e9891097775e42d8eb36b300e5715426dd Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 5 Jun 2024 08:34:31 -0700
Subject: [PATCH 13/15] =?UTF-8?q?[EuiTextArea]=20Fix=20missed=20CSS=20conv?=
 =?UTF-8?q?ersion=20that=20VRT=20tests=20caught=20=F0=9F=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...e_desktop_Forms_EuiTextArea_Icon_Shape.png | Bin 1881 -> 1865 bytes
 ...e_desktop_Forms_EuiTextArea_Playground.png | Bin 1016 -> 1001 bytes
 ...me_mobile_Forms_EuiTextArea_Icon_Shape.png | Bin 4650 -> 4617 bytes
 ...me_mobile_Forms_EuiTextArea_Playground.png | Bin 2504 -> 2472 bytes
 .../form/text_area/text_area.styles.ts        |   5 +++++
 5 files changed, 5 insertions(+)

diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Icon_Shape.png
index bd289143b099e1eee95ed0af0342a8e0036e6a76..499c602733f007d6829a6cac09d5ac7b4252deb7 100644
GIT binary patch
delta 1401
zcmV-<1%~?B4#^IX7YddL1^@s6@R8nSks%*{2J=ZoK~#90?c7_8++`id;qM$eyY05N
zCA5~77D&)o2<0Ro6etN7LL?zX4iOB3oLUqDH(pAjiC07dD!6E*N`gj2j1UPyIS5*{
z1Pd6bK@fYSU1|&6GCR9-@B+Gu0cBq$TQ<*gH*em|@4frvKX2w=X^ymec}r__B%>pL
zt&Dcs>Giq+fJ&vBMy;Mke_#3<{r_BVj<kE-ZYRUTyOT;K0|Nu8*XyZNDwB9z0QMEV
zUN7x-JA3x*NqW7^oH;AiYVFN{?0Riy8hw44IWREU=LBFMwtILu?Xj`U{?MFMTcfR1
zD;4no;J=zRb7m?@TBEI0TO-ZPm^pJbvd;v-2gLM&fwV@NskS?vOsm%?`#b=AKuoLG
z)9!Rq?e@AZ%mH}Ms?}<`y>6<LeGmXXn6n`Q7Xgz%0-}GB`eYvffcMAmHolxYpIV#s
zLqmCf=#?bN(s>KAbl&`2eC%;K{=kF&r|%aKfGK9Q)5#6Ld?4RlyC&D3bZX8%?1&t*
zaB<q*Zk~Q+bJlL!kTdTX%*qp%=Z4eINTXIOnp4@hWovK#y!rp<;{z}m+TCte-2RQs
zojxOj=bV3^MIV~|j{7$3+L^2F{c(1;T6y%!FQ#6d*p0^aq3!NK0H%_!KKx*&RcpEL
z;>+JP9!auf&fNUsk}ET<R?XKQd8lZXfB;MpYd3AkH`hF#J1_WbDwRs^es*0h_~G}n
zZFu+io|pc<Bj??<IuE|EK9x!(tIxYAH~;prJhgv$<Amo42*4EaowaLn{<5R8c=ntm
z$-U1#lb=2JY}OBL8{e~T%clJN`9I}>_0J_q4w^GJ=N!H)-+S`+6Q1W19bk(1^U(HO
zdh7|~pKm$q(>Z(T5m|A_q2p`k9KI~8&%H2beeCe@wc{5bl)Il<H{p4nKmewQ7j_Kg
z#3g?RkAL2OU?3MPJNj*VDwRq;bL26Z)z>$^cKo6xZ+l94uLJ~OifGhosU&&quYbu&
zx80mpyZx?vTkUo}aobH<v*G3R)oZC$D-)h4AOKUuvIUE>ZtIq;IONdGojyI+-ha<K
z?(6k>x#qrmGJjxJPF!+u{<vjJjymAL3D18M5P&J-$O9JUnOC+XNq%ttMR|VP_FVqc
zA7#tyuZ{2d+pe9t<R^FKg;$5N`rHeXB<r?r%FzoKO?aL^5&}#SFYb6XXWa4atXXw^
z_8%C?Xs45}Kk-Oz{PiPQG<$a1-EOuI@6MM_Jw4Z-d|K+&YPRlvJ*N!bl7~Kjbq;^o
zZ@>3EYx~f40RfmwZhZXVJo?g$x&L!ljIWJ#I$1xoEwxHDAK8CiroHv*l3uTuGglAh
zjE^qOb<0;wXpVoP157d3FF!4>jWqMA)wgH!TR&Y*tJQMEf`vKk!wbgav0>NFoVj{1
z&9SjubK)sQvpj(SOfjRKPQLQ12Qz>8hu`G7<)`K22QJQWi<YF-Y3J#!oAc!6jk)QG
zN3-gLlk?@%KUwrLML%HyOkwZm>)ZtdfFkZd04OFP02C1r0E!3*026Zcs+CCu1b_*+
zdezDd4h|+ss?|z0-EMc1j|9NJZf`us+MQG@)l}=XTE_mvD}MoCZ#+8PUdDgg?bK_v
zR2%&>(%iFWvd;#<KI&iNktAPOc~u(yGg9quG?FB{hleNgd;si&{yiR7Tz**wZy!v5
zqw(e?`iy~DX}<ABcI?=ZX0w@2r!%Ps24M2-jmPL%JI!V@mtA^EZoTzeN#1;SR;4-8
z?(N;&8Xd{#NGqeAc6vP*>i{Jrl}a^@T0M>azVtQv$JhS>_TSWQ?tJcY00000NkvXX
Hu0mjfepb;j

delta 1405
zcmV-@1%mp?4%rTn7YdmO1^@s60mp2xks%*{2Lnk&K~#90?c7_8++`id;qM%}yX|gm
zOK2@EEs&tG5XwnFC{PkEgh)b&93mJ5IkhMRZoHI46R(H_RB+Kql?0857$FjZauBp?
z2^KI=gCO=uyVMrCWp;Mw;01I61KNF+Y}q`|-Mo1-zxVEwnK%D`r7_a#<}J<9k&KRi
zG&9<6rQ7WU04kMgdTRCb^!28<r|<3c#z?E%>9jLEyep|x(%;{odcB@Xr80@f1z=y%
z?RL{@wX%En?xfqzz`)E@tF<=+vh%ea>FMpwK!5*apA&$6*skH>w8q9V>m##MZH_im
ztyIJVfd6Xdz(6WVnxoBBn<I_P7#Nr}>@xxIAu+wbKh2Rws;zcA)9UrfJ`VsN64UDS
zwA$@dJKc^8a{%^QwOUQ5+evk@4+6l4le2#TtpSs;0vLbllYIaHJ{W)4@N({aYE9M+
z4dwZvSCS-4=FZQOx$|=IvB%~30}uM2zF$B9rkK%oJ2(9LfqZ|>>Rfx$sX6<wBXZ1w
zMQL?9dHR)2S+j9{&b(tVD^6IJ8%{qXJ+)fVoXUpHTe|b+&ig+fAArfw>U6UF_HSj*
z^cfjE=lp*x{K%~L+_!$`j$C!`PqVAp%%fL+IrZwqZZx(HZF2_#FqM4$;RiFVTFZSG
zU;e)FNRq{~=j2zHT$yRLYQFKvLq)R$1Yn9-vvGaCz54OodBNvXsZ?_Jvuks~kAIl0
z!@I`!y!6lQIq$AjdGLjGsZ=Uib>2m}`S*|IsZD<yCOl6-0H%oVty!J(mmZZxvt}nr
z?tSi={NlN1vu<eX_@1?!H|Cem|0NHsdoD?G(Cj%m=kTTZ!IOWS@I06308_+YhqmR?
zV^0|We9Kv%&Dl$i$nrxD9bY@=@TFOG?u9w)6Nitl9lz+H-2Kej3D5Hj1YnAIVf#={
zTzr4<_~-rm`*Xq4qu;fsQmN!~M;?=zy}jdW$1hy`u3ss8OF#goh@M(4l_Zb-{ckzx
zwwu#zwcdAcv(?I{Zo4U~*T0<JdM&kTWy13W1Yn9-I)7o-ZrPmWha8$Y)2HX!`|o+r
zecf(1*W7nc=Jn6aiHi@;pEqyLQ3o72;dy@o0x(4!dBB1^^UCHV$&b#zD9>-*mdk(s
zlWczdwedaw*tsK@{Oqp0@aj-joqJ)DWbKxXIeNju3D5H&A;1*z;`Uc_#vR|y>Xp}L
z|Nj1rw%hsU6OZJ^-#(Isvu35$>15mRu6*Ux({ugFr=?!4X3MVEbIRZ?dFYE*=a7H>
z_S@@O+lICY2*6Zw<KqwK(U)G#{a?6Zd~K}V&bpzksa2}^*#2`f?X6drbi3W0xoR+H
ze0)i+Tef^cb3BO-FvVQI?6kZ#(#U64-JVTv{dG01R?89d7v!*y&L5A*`kgy+=BmLo
z#>R5ZiKi6J@(ToDiWzOU^R?eRn8ANP{VvxnJ1w6)a8Zt1xH!#rD^G9PlqWZB$W2c?
znw2M<oUfk#>7th@`U?wS3i}{m=Pn=s6mbUvz=U1Bazzr)fdDW8SFc==!NI{KNwr$3
zrqk(6@{s`8*X@bNSgW0CrJ8EJR?FCbcwY(t?1@La)6H0`m3pm~YER#cG<JXQp6s&$
zu#b9YJd)%~E3QgU-;7lIdU}#1yM~7+^Lzm8gZ@1pS6qHs25%osUr*1Qm*_M4XQuJS
z8`-{ndm4>K+U@qF9vFbhw<jK>W34nAja+u=CAsz1?<9Hi!NW>pq}AQCxj8zL(UE3G
z+pToFF4h4^DwS$_YW4K=^`<Ger|<3ccLoFi_Lk>B04O3L02KKb^;p<l<m@`E00000
LNkvXXu0mjf1u6Fx

diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiTextArea_Playground.png
index 501accad465f2754a7144f71b5c5b9ecebd7a005..a507d2bc7e0d0a90225a3a469dabf66001734ee6 100644
GIT binary patch
delta 481
zcmV<70UrMN2k8fp7YddL1^@s6@R8nSks%;|lSxEDRCt{2+0BmIWEh6w*N*FiNd`DX
zP(e(~@la_v$5BC()cLVv7G(gjfj%2&r0ZIK`WDabUcAk49OwGe>3pp7@l@w&ta-i`
z05nZo{i>^ev#xc&`TKo1j`Q_8)qek6)ikx;Zma9MYMN%jxd7aXd7f(=$2uGiRr6eJ
zyWM@Y?do$te*67n_3L%*w%et50&v5g_xl<zm-^=GZ>v3>Pt`V!cmVL9?svOts_Jw;
zReL%Pb+_9sy$OI<;;ZepPRF6zahmE)*DbvVfLG#8*VQ;p)n4bTgE;{ITidpEov+m{
zJp_Q)NwZ-AwE>fW0W*KT$oqE>RV5$*e1Z4x9_sP&v8t-twrT5ny)HZnfLr$xkIOh!
z+qBhot5sdbap_$E+_0B;OxL+C<5=BlRc*hytKo21dK&;Y>Ywqbs`~lir|LI%)o%K}
zs;Zv%`z7}QaD)CGj~{<{TaUj!)~4@2AJOl&_ceU_R8LP&H4IflP1CgKU;vi)5|8s`
ztYH}H?f2i+hY!D0)vBthn&CLkFP~56W1WwuI!|NGv%@+7RZY`Yzv`;rtZUtG{(Aod
Xwo{?@dGq9n00000NkvXXu0mjfY(xW(

delta 496
zcmV<M0T2G^2lxk&7YdmO1^@s60mp2xks%;|qDe$SRCt{2+skg-W)y|dLrS4kOK$s!
z3DTlY`aBKbzN3*AmP1{5=^!-{bkbx`C<AK^e{is8-{62ve;nre*Xew$^YK*Yaj1Eo
z3ILj>t!}lhZo8>XxBc?oABTCG#yT7xtD2^EyIrl<>uQ>2!MOlji+P@F7>0U!da9ak
z=i2XYt8G`G1M=73AFJDJYQNhpy%T^d_INndaJke^KmJ_p>3piTX~YA7|8=|HS5sA|
z^Qqd?v9Fu`e(6mBybwR^c6B=T)ehrWuh#3O_W<xhyjrho7{_X-d2%oZ;G4B=ThlyM
zyYvtMUM90q0mK255CSBB_%83?-Bp!<0Pr2&zq_mZ`}?Y@YTKr*X_^+E1i-a>j>lyf
zt8Ln9*Q-@shGFSl09>)>c#P9rmtm;&YE^Bwy{Z1`Y3XeMT&b_)QC0Q(-EY-xZ>rsP
zT~$>*9u7<H1K<k%Hy*$K^0w~(ysvH7eLkY!>~5?7^r;>m9;)wS`x?h_(ZK*L?>Qdl
z%TRsa*V{L*>%)gXs%lkLRZV{!=I4)3=VP6Zr#g>A&9lQg098%XR<~MLx82mH+kScf
mIv@b>t^5Z9Ktw<Qi2MVz%%$bRdF2cM0000<MNUMnLSTX!yaX!%

diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Icon_Shape.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Icon_Shape.png
index b212567b568df3887ae8977ae883f021c1ed2c56..dd1133e11c65488c1dd90bdb17359e659c0580b2 100644
GIT binary patch
literal 4617
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
AuK)l5

literal 4650
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

diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiTextArea_Playground.png
index 1dd01220e53eedfb1dff77d5711eaa8ace6c7ee4..ca7328088313e2399a88539e75bb4339777e5c6d 100644
GIT binary patch
delta 920
zcmV;J184lm6Q~oA7YZy01^@s6HWu(yks%;|Qb|NXRCt{2-OX-W#{q`nkB2<;pQNU_
zg`(XB-C3LTPMW4kfW`^Xc9rC|V@tL~9*U<6{Wz}e*ewz(`tUp}K{F(VyBCAO%;M~P
zH|K5UIh$#d?PinR#V-5(oH=iw4gdhZltmU<4nvm9W!CrZ<=%KNSuEZ@|4m^#&-*-o
zKYNk$v$N#wp9KJb4`)v9KX{Nw4<2T*7+xEGEo`^bl#`REH#@WIah-7-vl_>Yt5t^K
z^)CScfM42vzt6PWWj9TkrYYNLo8)pQ_u$|t_txuI=D!lQ&tE*x+1ZO^kt~O0j*gBp
zj^l^@1pol>2Gca<*|TT4*k2@b^6=psqda`@@MiobY&YBUoSdE{N$%f&ki&z6EPm#b
zSpgv>8MQ};hoTk$fZv?OVv(c6!`#3BAW3p^@+{kFN^%vp=V#Af9+RH|6#*iXwE-pp
z<+I!YqXmEMH&1T<7PbHY+)39_`@{F&B}rDdxflQd_<vkS?Ps6;HGlZypOV<I1pwfV
z`DxUC`srWt(eI9u2wMOE?vVeE+9dh$>9Zuskoj`be!st!#Q^}o`*>5-PP>aF$s&sk
z!*Y4`&)w~;5C8z);Z0F{v7c`mb{K{X<5k%1rs;onRtW$AKjUpto4jn;)pD6(xf+w$
zu>}C&x98`gHc9^duYV><#&Mlty<R6twwp~ZE-pUsQUL(q&E6HY-#qy`7Z(@#;rs8h
zUazxSEmv8u#%y;}o<4n=k3atSRu&Eb0N36Xwcmd8B-`yaUw!puKKbO&8HVNMbzcu3
z9VUNsvb)&j<n;6wmJR>_m)<98r)kO;U;I6fA0OxUAAOYM>K@zGa+$-!%ZqK#&R*o%
z$w}sU4gdgrNbio?ue055^ZDn0%j4tYtj96Ci_7uF+4=5f=JT@`IXiovBpDV%j*gCU
zeFhf*0DevHirOb%|0CP&HeY`EMIIj?XSIJ^C0X8#uYUSvj~+bCYPrhk>9g$TeSUoU
zW0u1*<9eO-IA*<GXBa$I1^~dX=Q?V)(=O9AWjjrow%csBn<UBc@o~m+o&A3C%I99$
zvAwq6U*z=kB-@?4Z2<uI?O3nI92^{G7?!V%y)kUBP1BU^Zpv=jX1~A4em`f9v$re&
u0Q~wcpUGWh7?xSB#;nJ6#&LY>{Qm%xfqB-`Dt=c00000<MNUMnLSTXlOy5iZ

delta 914
zcmV;D18w}M6UY;g7YZ^61^@s656Y9jks%;|a!Eu%RCt{2-Aiv<#{q`nkB2<;O;XeR
zg`(XB-9?-9pEOOA0F4u%?JCLNjxE^|c_^MPba7l?TO?NW;dxeqW=IToF9w5|#o768
z&YR40Hq$2C%_h5xUH1DqbKX21004d|i!8DnhAfxMtnb~+z42bMSiE`u>%w-P_jz`I
z_B`ijXUUsC3jhEg&YawT@F0&KJj`M-yfXYs*lwpOCnryCc4pV(I^#HIHI5lqs|>@d
zUjhICzqI{+pJ}(tZkjSpQ?}DK$>mP&!NF1Pt=BKje<^IAJ%5(7v**boSq{q_9UWyH
z#}E4p007`MrfJI4r%!XSzewif;loE7dHCSr&G=2&Znoz+IXy{|+`s=IhX)5)yycTx
z0U-eqlY9Xf3^dzmN^%vp=V#Ae9Fw2{6#+bxwgDyq#k1W3qXmE6w~ufB7PbHY+)39_
z`{NJaCrMVfxflQd_<vkS?dPBWHGlZypOV<I1pwfV`FYfS_Ss+Z(eI9u2wMOE?vVeE
z+9dhu$<rjskoj`be!st!#Q^}o`*>Z{PP>aF$s&sk!*Y4`&)w~;5C8z);dN1av7c`m
zb{K{X<5k%1rs<Ra2L*p`@usLvUNr1#xy-O!jY;g-0s!#a^R}o>l7Ii}pGlH&TxVFX
z*GZD?W|NDHix0e1004NscSY^DkH5*q#YKMn;rp!D>#SDGRo1I9+uf8WPoCuCk3YVZ
zg#!S<wRc7Bci%qFcDv2jUw@TPKKXNoVR?Do*TYAL$(-yib~%4JJ-vmc0|3CK_leqR
zn)2nBf6u3%9_RNTeU#+t9^2J&nZv`&i*3)&p6BVwN#=PD004YQ?~dAUvfXa;#TS3e
zr^m-xk7IThm*b1G^WDwNXJ^lIcJ?euGAxE19UbNR3@!iw{F>eswU58~N4DE-zWVCR
ze0qGG)pC_&c{6{$`uUeVdhjr-<tnGAPqUx*`RU0|Sq{sL>vh)SnDu&{VenWP006(9
z>!{sMyG+xR?KEZDZnN2Lk|f8+#~H_U_WQ+4pL=P?_S$}bk<-(YY<KRq1pwf;W4#)4
zaB!GmSiUm$+OWMgO;fhJDZ6Q#{r)2R{hT?@-U0yd>$@6!CU=oxSZ1{vvmVzO$MMbc
o-xjt20B~10Fq3ft7Z-*90Df|P%g{m)PXGV_07*qoM6N<$f~3FRZvX%Q

diff --git a/packages/eui/src/components/form/text_area/text_area.styles.ts b/packages/eui/src/components/form/text_area/text_area.styles.ts
index 9316abc3e043..80ed465ba9d6 100644
--- a/packages/eui/src/components/form/text_area/text_area.styles.ts
+++ b/packages/eui/src/components/form/text_area/text_area.styles.ts
@@ -24,6 +24,11 @@ export const euiTextAreaStyles = (euiThemeContext: UseEuiTheme) => {
       /* Give more spacing between multiple lines */
       line-height: ${euiTheme.font.lineHeightMultiplier};
 
+      /* <textarea>s default to 'inline-block', which causes an extra 2-3px of
+       * unnecessary height within its parent 'block' form control wrapper.
+       * @see https://stackoverflow.com/a/27536461/4294462 */
+      display: block;
+
       &:invalid {
         ${formStyles.invalid}
       }

From 93393f828817075a048f3824be7131a551776290 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 6 Jun 2024 10:42:40 -0700
Subject: [PATCH 14/15] [PR feedback] Typing

---
 .../src/components/form/super_select/super_select_control.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eui/src/components/form/super_select/super_select_control.tsx b/packages/eui/src/components/form/super_select/super_select_control.tsx
index 1fe61894a54a..ca5ab20c5f8c 100644
--- a/packages/eui/src/components/form/super_select/super_select_control.tsx
+++ b/packages/eui/src/components/form/super_select/super_select_control.tsx
@@ -27,7 +27,7 @@ import {
 } from '../form_control_layout';
 import { useFormContext } from '../eui_form_context';
 
-import { EuiSuperSelectOption } from './super_select_item';
+import { type EuiSuperSelectOption } from './super_select_item';
 import { euiSuperSelectControlStyles } from './super_select.styles';
 
 export interface EuiSuperSelectControlProps<T>

From c2f14e31835eba9658cea0440407cf1b2823546a Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 6 Jun 2024 10:51:08 -0700
Subject: [PATCH 15/15] [PR feedback] Explicitly call `euiFontSize('s')`

---
 .../form/super_select/super_select.styles.ts  | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/eui/src/components/form/super_select/super_select.styles.ts b/packages/eui/src/components/form/super_select/super_select.styles.ts
index 8230b459114b..dc6d9286afa6 100644
--- a/packages/eui/src/components/form/super_select/super_select.styles.ts
+++ b/packages/eui/src/components/form/super_select/super_select.styles.ts
@@ -10,6 +10,7 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../../services';
 import {
+  euiFontSize,
   euiTextTruncate,
   logicalCSS,
   logicalCSSWithFallback,
@@ -25,16 +26,21 @@ export const euiSuperSelectStyles = {
   `,
 };
 
-export const euiSuperSelectItemStyles = ({ euiTheme }: UseEuiTheme) => ({
-  euiSuperSelect__item: css`
-    padding: ${euiTheme.size.s};
-  `,
-  hasDividers: css`
-    &:not(:last-of-type) {
-      ${logicalCSS('border-bottom', euiTheme.border.thin)}
-    }
-  `,
-});
+export const euiSuperSelectItemStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiSuperSelect__item: css`
+      padding: ${euiTheme.size.s};
+      ${euiFontSize(euiThemeContext, 's')}
+    `,
+    hasDividers: css`
+      &:not(:last-of-type) {
+        ${logicalCSS('border-bottom', euiTheme.border.thin)}
+      }
+    `,
+  };
+};
 
 export const euiSuperSelectControlStyles = (euiThemeContext: UseEuiTheme) => {
   const formStyles = euiFormControlStyles(euiThemeContext);