@elastic/eui 89.1.0 → 91.0.0

package/dist/eui_theme_light.css

@@ -376,7 +376,7 @@ The following files still use the Sass version:
   white-space: nowrap;
   max-width: 100%;
   vertical-align: middle;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -504,7 +504,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -1196,6 +1196,7 @@ The following files still use the Sass version:
    * 1. Force field height to match other field heights.
    * 2. Force input height to expand to fill this element.
    * 3. Reset input appearance to mimic text
+   * 4. Ensure that no input states are visible on the hidden input
    */
 }
 .euiComboBox--fullWidth {
@@ -1222,7 +1223,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -1308,23 +1309,85 @@ The following files still use the Sass version:
           flex-wrap: wrap; /* 1 */
   -webkit-align-content: flex-start;
           align-content: flex-start;
-}
-.euiComboBox .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
   cursor: text;
 }
+.euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap--noWrap {
+  -webkit-align-items: center;
+          align-items: center;
+}
+.euiComboBox .euiComboBox__inputWrap.euiComboBox__inputWrap--plainText {
+  -webkit-padding-start: 8px;
+          padding-inline-start: 8px;
+}
+.euiComboBox .euiComboBox__inputWrap .euiComboBoxPlainTextSelection__prepend, .euiComboBox .euiComboBox__inputWrap .euiComboBoxPlainTextSelection__append {
+  -webkit-flex-shrink: 0;
+          flex-shrink: 0;
+  margin-inline: 2px;
+  display: -webkit-flex;
+  display: flex; /* Vertically centers any icons */
+}
+.euiComboBox .euiComboBox__inputWrap .euiComboBoxPlainTextSelection__prepend {
+  -webkit-margin-start: 4px;
+          margin-inline-start: 4px;
+}
+.euiComboBox .euiComboBox__inputWrap .euiComboBoxPlainTextSelection__append {
+  -webkit-margin-end: 4px;
+          margin-inline-end: 4px;
+}
 .euiComboBox .euiComboBox__input {
   block-size: 24px; /* 2 */
   min-inline-size: 2px;
   max-inline-size: 100%;
   margin: 4px;
   /* 3 */
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  outline: none;
-  border: none;
   background: transparent;
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+  letter-spacing: normal;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-font-kerning: normal;
+          font-kerning: normal;
+  font-size: 14px;
   color: #343741;
+  /* 4 */
+  -webkit-appearance: none !important;
+     -moz-appearance: none !important;
+          appearance: none !important;
+  border: none !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+.euiComboBox .euiComboBox__input::-webkit-input-placeholder {
+  color: #69707D;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input::-moz-placeholder {
+  color: #69707D;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input::placeholder {
+  color: #69707D;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input:disabled {
+  color: #98A2B3;
+  -webkit-text-fill-color: #98A2B3;
+  cursor: not-allowed;
+  background: #eef2f7;
+  box-shadow: inset 0 0 0 1px rgba(17, 42, 134, 0.1);
+}
+.euiComboBox .euiComboBox__input:disabled::-webkit-input-placeholder {
+  color: #98A2B3;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input:disabled::-moz-placeholder {
+  color: #98A2B3;
+  opacity: 1;
+}
+.euiComboBox .euiComboBox__input:disabled::placeholder {
+  color: #98A2B3;
+  opacity: 1;
 }
 .euiComboBox.euiComboBox-isOpen .euiComboBox__inputWrap {
   background-color: white;
@@ -1364,27 +1427,17 @@ The following files still use the Sass version:
   color: #98A2B3;
   opacity: 1;
 }
-.euiComboBox.euiComboBox-isDisabled .euiComboBoxPlaceholder,
-.euiComboBox.euiComboBox-isDisabled .euiComboBoxPill--plainText {
-  color: #98A2B3;
-  -webkit-text-fill-color: #98A2B3;
-}
-.euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
+.euiComboBox.euiComboBox-isDisabled .euiComboBox__inputWrap,
+.euiComboBox.euiComboBox-isDisabled .euiComboBoxPill {
   cursor: not-allowed;
 }
 .euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap {
   line-height: 32px; /* 2 */
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block: 0;
 }
-
-.euiComboBox__input {
-  max-width: 100%;
-}
-.euiComboBox__input input {
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
+.euiComboBox.euiComboBox--compressed .euiComboBox__inputWrap--plainText {
+  -webkit-padding-start: 4px;
+          padding-inline-start: 4px;
 }
 
 /*
@@ -1403,59 +1456,22 @@ The following files still use the Sass version:
 .euiComboBox--compressed .euiComboBoxPill, .euiComboBox--compressed .euiComboBoxPill + .euiComboBoxPill {
   margin: 5px 4px 0 0;
 }
-.euiComboBox--compressed .euiComboBoxPill--plainText {
-  margin-top: 4px;
-}
-.euiComboBoxPill--plainText {
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-weight: 400;
-  letter-spacing: normal;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -webkit-font-kerning: normal;
-          font-kerning: normal;
-  line-height: 24px;
-  font-size: 14px;
-  padding: 0;
-  color: #343741;
-  vertical-align: middle;
-  display: -webkit-inline-flex;
-  display: inline-flex;
-  -webkit-align-items: center;
-          align-items: center;
-}
 .euiComboBoxPill__prepend {
   margin-right: 4px;
 }
 .euiComboBoxPill__append {
   margin-left: 4px;
 }
-.euiComboBoxPill--plainText,
 .euiComboBoxPill .euiBadge__text {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
           align-items: center;
 }
-.euiComboBoxPill--plainText .euiIcon,
 .euiComboBoxPill .euiBadge__text .euiIcon {
   display: block;
 }
 
-.euiComboBoxPlaceholder {
-  max-width: 100%;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
-  padding-right: 40px;
-  position: absolute;
-  pointer-events: none;
-  padding-left: 4px;
-  line-height: 32px;
-  color: #69707D;
-  margin-bottom: 0 !important;
-}
-
 /**
  * 1. Using specificity to override panel shadow
  * 2. Prevent really long input from overflowing the container.
@@ -1574,247 +1590,6 @@ The following files still use the Sass version:
   color: #000;
 }
 
-.euiContextMenu {
-  width: 256px;
-  max-width: 100%;
-  position: relative;
-  overflow: hidden;
-  transition: height 150ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  border-radius: 6px;
-}
-.euiContextMenu .euiContextMenu__content {
-  padding: 8px;
-}
-
-/**
-  * 1. When there are multiple ContextMenuPanels, the ContextMenu will absolutely
-  *    position them. ContextMenuPanel will break the layout of a Popover if it's
-  *    absolutely positioned by default.
-  */
-.euiContextMenu__panel {
-  position: absolute; /* 1 */
-}
-
-.euiContextMenu__icon {
-  margin-right: 8px;
-}
-
-.euiContextMenuPanel {
-  width: 100%;
-  visibility: visible;
-  outline-offset: -2px;
-}
-.euiContextMenuPanel:focus {
-  outline: none;
-}
-.euiContextMenuPanel.euiContextMenuPanel-txInLeft {
-  pointer-events: none;
-  -webkit-animation: euiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-          animation: euiContextMenuPanelTxInLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-.euiContextMenuPanel.euiContextMenuPanel-txOutLeft {
-  pointer-events: none;
-  -webkit-animation: euiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-          animation: euiContextMenuPanelTxOutLeft 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-.euiContextMenuPanel.euiContextMenuPanel-txInRight {
-  pointer-events: none;
-  -webkit-animation: euiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-          animation: euiContextMenuPanelTxInRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-.euiContextMenuPanel.euiContextMenuPanel-txOutRight {
-  pointer-events: none;
-  -webkit-animation: euiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-          animation: euiContextMenuPanelTxOutRight 250ms cubic-bezier(0.694, 0.0482, 0.335, 1);
-  -webkit-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-}
-
-.euiContextMenuPanel--next {
-  -webkit-transform: translateX(256px);
-          transform: translateX(256px);
-  visibility: hidden;
-}
-
-.euiContextMenuPanel--previous {
-  -webkit-transform: translateX(-256px);
-          transform: translateX(-256px);
-  visibility: hidden;
-}
-
-.euiContextMenuPanelTitle {
-  overflow-wrap: break-word !important;
-  word-break: break-word;
-  color: #1a1c21;
-  font-size: 14px;
-  font-size: 1rem;
-  line-height: 1.7142857143rem;
-  font-weight: 700;
-  padding: 12px;
-  width: 100%;
-  text-align: left;
-  outline-offset: -2px;
-  border-bottom: 1px solid #D3DAE6;
-}
-.euiContextMenuPanelTitle:enabled:hover, .euiContextMenuPanelTitle:enabled:focus {
-  text-decoration: underline;
-}
-.euiContextMenuPanelTitle--small {
-  padding: 6px 8px;
-}
-
-@-webkit-keyframes euiContextMenuPanelTxInLeft {
-  0% {
-    -webkit-transform: translateX(256px);
-            transform: translateX(256px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-}
-
-@keyframes euiContextMenuPanelTxInLeft {
-  0% {
-    -webkit-transform: translateX(256px);
-            transform: translateX(256px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-}
-@-webkit-keyframes euiContextMenuPanelTxOutLeft {
-  0% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(-256px);
-            transform: translateX(-256px);
-  }
-}
-@keyframes euiContextMenuPanelTxOutLeft {
-  0% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(-256px);
-            transform: translateX(-256px);
-  }
-}
-@-webkit-keyframes euiContextMenuPanelTxInRight {
-  0% {
-    -webkit-transform: translateX(-256px);
-            transform: translateX(-256px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-}
-@keyframes euiContextMenuPanelTxInRight {
-  0% {
-    -webkit-transform: translateX(-256px);
-            transform: translateX(-256px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-}
-@-webkit-keyframes euiContextMenuPanelTxOutRight {
-  0% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(256px);
-            transform: translateX(256px);
-  }
-}
-@keyframes euiContextMenuPanelTxOutRight {
-  0% {
-    -webkit-transform: translateX(0);
-            transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(256px);
-            transform: translateX(256px);
-  }
-}
-.euiContextMenuItem {
-  display: block;
-  padding: 12px;
-  width: 100%;
-  text-align: left;
-  color: #343741;
-  outline-offset: -2px;
-}
-.euiContextMenuItem:hover, .euiContextMenuItem:focus {
-  text-decoration: underline;
-}
-.euiContextMenuItem:focus {
-  background-color: rgba(0, 119, 204, 0.1);
-}
-.euiContextMenuItem.euiContextMenuItem-isDisabled {
-  color: #ABB4C4;
-  cursor: default;
-}
-.euiContextMenuItem.euiContextMenuItem-isDisabled:hover, .euiContextMenuItem.euiContextMenuItem-isDisabled:focus {
-  text-decoration: none;
-}
-.euiContextMenuItem--small {
-  padding: 6px 8px;
-}
-.euiContextMenuItem--small .euiContextMenuItem__text {
-  font-size: 14px;
-  font-size: 1rem;
-  line-height: 1.7142857143rem;
-}
-
-.euiContextMenuItem__inner {
-  display: -webkit-flex;
-  display: flex;
-}
-
-.euiContextMenuItem__text {
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-  overflow: hidden;
-}
-
-.euiContextMenuItem__arrow {
-  -webkit-align-self: flex-end;
-          align-self: flex-end;
-}
-
-.euiContextMenu__itemLayout {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-          align-items: center;
-}
-.euiContextMenu__itemLayout.euiContextMenu__itemLayout--bottom {
-  -webkit-align-items: flex-end;
-          align-items: flex-end;
-}
-.euiContextMenu__itemLayout.euiContextMenu__itemLayout--top {
-  -webkit-align-items: flex-start;
-          align-items: flex-start;
-}
-.euiContextMenu__itemLayout .euiContextMenu__icon {
-  -webkit-flex-shrink: 0;
-          flex-shrink: 0;
-}
-
 .euiControlBar {
   background: #343741;
   color: white;
@@ -2206,10 +1981,32 @@ The following files still use the Sass version:
 }
 .euiSuperDatePicker__absoluteDateFormRow {
   padding: 0 8px 8px;
+  /* A bit of a visual trickery to make the format "hint" become an "error" text.
+     NOTE: Normally reordering visually (vs DOM) isn't super great for screen reader users,
+     but as the help text is already read out via `aria-describedby`, and the error text
+     is read out immediately via `aria-live`, we can fairly safely prioritize visuals instead */
+}
+.euiSuperDatePicker__absoluteDateFormRow .euiFormRow__fieldWrapper {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+          flex-direction: column;
+}
+.euiSuperDatePicker__absoluteDateFormRow .euiFormControlLayout {
+  -webkit-order: 0;
+          order: 0;
+}
+.euiSuperDatePicker__absoluteDateFormRow .euiFormHelpText {
+  -webkit-order: 1;
+          order: 1;
+}
+.euiSuperDatePicker__absoluteDateFormRow .euiFormErrorText {
+  -webkit-order: 2;
+          order: 2;
 }
 
 .euiDatePopoverButton {
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -2277,7 +2074,8 @@ The following files still use the Sass version:
   text-align: center;
 }
 
-.euiDatePopoverContent {
+.euiDatePopoverContent,
+.euiDatePopoverContent .react-datepicker {
   width: 400px;
   max-width: 100%;
 }
@@ -2336,10 +2134,6 @@ The following files still use the Sass version:
   gap: 4px;
 }
 
-.euiQuickSelectPopover__anchor {
-  height: 100%;
-}
-
 .euiQuickSelectPopover__sectionItem {
   font-size: 14px;
   line-height: 14px;
@@ -2417,7 +2211,7 @@ The following files still use the Sass version:
 }
 
 .euiSuperDatePicker__prettyFormat {
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -2971,7 +2765,6 @@ The following files still use the Sass version:
 .euiDataGridRowCell__contentWrapper {
   position: relative;
   height: 100%;
-  overflow: hidden;
 }
 
 .euiDataGridRowCell__defaultHeight {
@@ -2996,8 +2789,7 @@ The following files still use the Sass version:
 }
 
 .euiDataGridRowCell__numericalHeight [data-euiportal],
-.euiDataGridRowCell__numericalHeight .euiPopover,
-.euiDataGridRowCell__numericalHeight .euiPopover__anchor {
+.euiDataGridRowCell__numericalHeight .euiPopover {
   height: 100%;
 }
 
@@ -3639,7 +3431,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -3795,7 +3587,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -3956,7 +3748,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -4122,7 +3914,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -4532,7 +4324,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -4759,7 +4551,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -5008,7 +4800,6 @@ The following files still use the Sass version:
   }
 }
 .euiFormControlLayout--group > *,
-.euiFormControlLayout--group .euiPopover__anchor,
 .euiFormControlLayout--group .euiButtonEmpty,
 .euiFormControlLayout--group .euiText,
 .euiFormControlLayout--group .euiFormLabel,
@@ -5808,7 +5599,7 @@ The following files still use the Sass version:
   background-size: 0% 100%;
   box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(17, 42, 134, 0.1);
   transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -6324,7 +6115,7 @@ The following files still use the Sass version:
 }
 
 .euiMarkdownEditorTextArea {
-  font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "Inter", BlinkMacSystemFont, Helvetica, Arial, sans-serif;
   font-weight: 400;
   letter-spacing: normal;
   -webkit-text-size-adjust: 100%;
@@ -6550,230 +6341,6 @@ The following files still use the Sass version:
   stroke: #D3DAE6;
 }
 
-.euiPageContent {
-  width: 100%;
-  min-width: 0;
-}
-.euiPageContent.euiPageContent--borderRadiusNone {
-  border-left-width: 0;
-  border-right-width: 0;
-  border-bottom-width: 0;
-}
-.euiPageContent.euiPageContent--verticalCenter {
-  -webkit-align-self: center;
-          align-self: center;
-  margin-top: auto;
-  margin-bottom: auto;
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-}
-.euiPageContent.euiPageContent--horizontalCenter {
-  width: auto;
-  margin-left: auto;
-  margin-right: auto;
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-}
-
-.euiPageContentBody--restrictWidth-default, .euiPageContentBody--restrictWidth-custom {
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-}
-.euiPageContentBody--restrictWidth-default {
-  max-width: 1200px;
-}
-
-.euiPageContentBody--paddingSmall {
-  padding: 8px;
-}
-
-.euiPageContentBody--paddingMedium {
-  padding: 16px;
-}
-
-.euiPageContentBody--paddingLarge {
-  padding: 24px;
-}
-
-.euiPageContentHeader {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: row;
-          flex-direction: row;
-  -webkit-justify-content: space-between;
-          justify-content: space-between;
-  -webkit-align-items: center;
-          align-items: center;
-}
-.euiPageContent[class*=paddingSmall] .euiPageContentHeader {
-  margin-bottom: 8px;
-}
-.euiPageContent[class*=paddingMedium] .euiPageContentHeader {
-  margin-bottom: 16px;
-}
-.euiPageContent[class*=paddingLarge] .euiPageContentHeader {
-  margin-bottom: 24px;
-}
-
-@media only screen and (max-width: 574px) {
-  .euiPageContentHeader--responsive {
-    -webkit-flex-direction: column;
-            flex-direction: column;
-    -webkit-align-items: flex-start;
-            align-items: flex-start;
-  }
-}
-@media only screen and (min-width: 575px) and (max-width: 767px) {
-  .euiPageContentHeader--responsive {
-    -webkit-flex-direction: column;
-            flex-direction: column;
-    -webkit-align-items: flex-start;
-            align-items: flex-start;
-  }
-}
-.euiPageContentHeaderSection + .euiPageContentHeaderSection {
-  margin-left: 32px;
-}
-
-@media only screen and (max-width: 574px) {
-  .euiPageContent[class*=paddingSmall] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 4px;
-  }
-  .euiPageContent[class*=paddingMedium] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 8px;
-  }
-  .euiPageContent[class*=paddingLarge] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 12px;
-  }
-}
-@media only screen and (min-width: 575px) and (max-width: 767px) {
-  .euiPageContent[class*=paddingSmall] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 4px;
-  }
-  .euiPageContent[class*=paddingMedium] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 8px;
-  }
-  .euiPageContent[class*=paddingLarge] .euiPageContentHeader--responsive .euiPageContentHeaderSection + .euiPageContentHeaderSection {
-    margin-left: 0;
-    margin-top: 12px;
-  }
-}
-/**
- * Note: Margin is added in _page.scss when EuiPage has `paddingSize`
- * 1. Prevent side bar width from changing when content width changes.
- */
-.euiPageSideBar {
-  min-width: 240px;
-  -webkit-flex: 0 1 0%;
-          flex: 0 1 0%; /* 1 */
-}
-
-.euiPageSideBar--paddingSmall {
-  padding: 8px;
-}
-
-.euiPageSideBar--paddingMedium {
-  padding: 16px;
-}
-
-.euiPageSideBar--paddingLarge {
-  padding: 24px;
-}
-
-@media only screen and (max-width: 574px) {
-  .euiPageSideBar {
-    width: 100%;
-  }
-}
-@media only screen and (min-width: 575px) and (max-width: 767px) {
-  .euiPageSideBar {
-    width: 100%;
-  }
-}
-@media only screen and (min-width: 768px) and (max-width: 991px) {
-  .euiPageSideBar--sticky {
-    scrollbar-color: rgba(105, 112, 125, 0.5) transparent;
-    scrollbar-width: thin;
-    overflow-y: auto;
-    -webkit-flex-grow: 1;
-            flex-grow: 1;
-    position: -webkit-sticky;
-    position: sticky;
-    max-height: 100vh;
-    top: 0;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar {
-    width: 16px;
-    height: 16px;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-thumb {
-    background-color: rgba(105, 112, 125, 0.5);
-    background-clip: content-box;
-    border-radius: 16px;
-    border: 6px solid transparent;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-@media only screen and (min-width: 992px) and (max-width: 1199px) {
-  .euiPageSideBar--sticky {
-    scrollbar-color: rgba(105, 112, 125, 0.5) transparent;
-    scrollbar-width: thin;
-    overflow-y: auto;
-    -webkit-flex-grow: 1;
-            flex-grow: 1;
-    position: -webkit-sticky;
-    position: sticky;
-    max-height: 100vh;
-    top: 0;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar {
-    width: 16px;
-    height: 16px;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-thumb {
-    background-color: rgba(105, 112, 125, 0.5);
-    background-clip: content-box;
-    border-radius: 16px;
-    border: 6px solid transparent;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  .euiPageSideBar--sticky {
-    scrollbar-color: rgba(105, 112, 125, 0.5) transparent;
-    scrollbar-width: thin;
-    overflow-y: auto;
-    -webkit-flex-grow: 1;
-            flex-grow: 1;
-    position: -webkit-sticky;
-    position: sticky;
-    max-height: 100vh;
-    top: 0;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar {
-    width: 16px;
-    height: 16px;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-thumb {
-    background-color: rgba(105, 112, 125, 0.5);
-    background-clip: content-box;
-    border-radius: 16px;
-    border: 6px solid transparent;
-  }
-  .euiPageSideBar--sticky::-webkit-scrollbar-corner, .euiPageSideBar--sticky::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
 .euiTreeView__wrapper .euiTreeView {
   margin: 0;
   list-style-type: none;