diff --git a/src/platform/plugins/private/interactive_setup/public/app.scss b/src/platform/plugins/private/interactive_setup/public/app.scss
deleted file mode 100644
index a3e2fddfbfbe2..0000000000000
--- a/src/platform/plugins/private/interactive_setup/public/app.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.interactiveSetup__header {
-  position: relative;
-  z-index: 10;
-  padding: $euiSizeXL;
-}
-
-.interactiveSetup__logo {
-  margin-bottom: $euiSizeXL;
-
-  display: inline-block;
-  @include euiBottomShadowMedium;
-}
-
-.interactiveSetup__content {
-  position: relative;
-  z-index: 10;
-  margin: auto;
-  margin-bottom: $euiSizeXL;
-  max-width: map-get($euiBreakpoints, 's') - $euiSizeXL;
-  padding-left: $euiSizeXL;
-  padding-right: $euiSizeXL;
-}
diff --git a/src/platform/plugins/private/interactive_setup/public/app.tsx b/src/platform/plugins/private/interactive_setup/public/app.tsx
index eaa3d062e91c3..38161392d399b 100644
--- a/src/platform/plugins/private/interactive_setup/public/app.tsx
+++ b/src/platform/plugins/private/interactive_setup/public/app.tsx
@@ -7,9 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './app.scss';
-
-import { EuiIcon, EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiIcon, EuiPanel, EuiSpacer, EuiTitle, useEuiShadow, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { FunctionComponent } from 'react';
 import React, { useState } from 'react';
 import useAsync from 'react-use/lib/useAsync';
@@ -40,6 +39,9 @@ export const App: FunctionComponent<AppProps> = ({ onSuccess }) => {
   );
 
   const kbnFullScreenBgCss = useKbnFullScreenBgCss();
+  const theme = useEuiTheme();
+  const { euiTheme } = theme;
+  const euiShadowM = useEuiShadow('m');
 
   if (state.loading) {
     return null;
@@ -58,9 +60,22 @@ export const App: FunctionComponent<AppProps> = ({ onSuccess }) => {
 
   return (
     <div css={kbnFullScreenBgCss}>
-      <header className="interactiveSetup__header eui-textCenter">
+      <header
+        css={css`
+          position: relative;
+          z-index: 10;
+          padding: ${euiTheme.size.xl};
+          text-align: center;
+        `}
+      >
         <EuiSpacer size="xxl" />
-        <span className="interactiveSetup__logo">
+        <span
+          css={css`
+            margin-bottom: ${euiTheme.size.xl};
+            display: inline-block;
+            ${euiShadowM};
+          `}
+        >
           <EuiIcon type="logoElastic" size="xxl" />
         </span>
         <EuiTitle size="m">
@@ -73,7 +88,17 @@ export const App: FunctionComponent<AppProps> = ({ onSuccess }) => {
         </EuiTitle>
         <EuiSpacer size="xl" />
       </header>
-      <div className="interactiveSetup__content">
+      <div
+        css={css`
+          position: relative;
+          z-index: 10;
+          margin: auto;
+          margin-bottom: ${euiTheme.size.xl};
+          max-width: calc(${euiTheme.breakpoint.s}px - ${euiTheme.size.xl});
+          padding-left: ${euiTheme.size.xl};
+          padding-right: ${euiTheme.size.xl};
+        `}
+      >
         <EuiPanel paddingSize="l">
           <div hidden={page !== 'token'}>
             <EnrollmentTokenForm
diff --git a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/change_all_privileges.scss b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/change_all_privileges.scss
deleted file mode 100644
index 612bd837f7470..0000000000000
--- a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/change_all_privileges.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.secPrivilegeFeatureChangeAllLink {
-  margin-left: $euiSizeS;
-}
diff --git a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/change_all_privileges.tsx b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/change_all_privileges.tsx
index e475a5da7a106..4f4c218edc22a 100644
--- a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/change_all_privileges.tsx
+++ b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/change_all_privileges.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './change_all_privileges.scss';
-
 import {
   EuiContextMenuItem,
   EuiContextMenuPanel,
@@ -15,6 +13,7 @@ import {
   EuiPopover,
   EuiText,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { Component } from 'react';
 
 import { i18n } from '@kbn/i18n';
@@ -79,7 +78,9 @@ export class ChangeAllPrivilegesControl extends Component<Props, State> {
     const button = (
       <EuiLink
         onClick={this.onButtonClick}
-        className={'secPrivilegeFeatureChangeAllLink'}
+        css={({ euiTheme }) => css`
+          margin-left: ${euiTheme.size.s};
+        `}
         data-test-subj="changeAllPrivilegesButton"
       >
         <EuiText size="xs">
@@ -118,7 +119,6 @@ export class ChangeAllPrivilegesControl extends Component<Props, State> {
           this.onSelectPrivilege(NO_PRIVILEGE_VALUE);
         }}
         disabled={this.props.disabled}
-        // @ts-expect-error leaving this here so that when https://github.com/elastic/eui/issues/8123 is fixed we remove this comment
         css={({ euiTheme }) => ({ color: euiTheme.colors.danger })}
       >
         {this.getPrivilegeCopy(NO_PRIVILEGE_VALUE).label}
diff --git a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/components/feature_table_cell.scss b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/components/feature_table_cell.scss
deleted file mode 100644
index 8a002996b67ed..0000000000000
--- a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/components/feature_table_cell.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.featurePrivilegeName:hover, .featurePrivilegeName:focus {
-  text-decoration: underline;
-}
diff --git a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/components/feature_table_cell.tsx b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/components/feature_table_cell.tsx
index 4a9fdf4b9055d..f7d1b920b2e95 100644
--- a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/components/feature_table_cell.tsx
+++ b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/components/feature_table_cell.tsx
@@ -5,19 +5,19 @@
  * 2.0.
  */
 
-import './feature_table_cell.scss';
-
-import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiText, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React from 'react';
 
 import type { SecuredFeature } from '@kbn/security-role-management-model';
 
 interface Props {
   feature: SecuredFeature;
-  className?: string;
+  hasSubFeaturePrivileges?: boolean;
 }
 
-export const FeatureTableCell = ({ feature, className }: Props) => {
+export const FeatureTableCell = ({ feature, hasSubFeaturePrivileges }: Props) => {
+  const { euiTheme } = useEuiTheme();
   let tooltipElement = null;
   if (feature.getPrivilegesTooltip()) {
     const tooltipContent = (
@@ -38,10 +38,28 @@ export const FeatureTableCell = ({ feature, className }: Props) => {
   }
 
   return (
-    <EuiFlexGroup className={className} direction="column" gutterSize="none" component="span">
+    <EuiFlexGroup
+      css={
+        !hasSubFeaturePrivileges &&
+        css`
+          margin-left: calc(${euiTheme.size.l} + ${euiTheme.size.xs});
+        `
+      }
+      direction="column"
+      gutterSize="none"
+      component="span"
+    >
       <EuiFlexItem data-test-subj={`featureTableCell`} component="span">
         <EuiFlexGroup gutterSize="xs">
-          <EuiFlexItem className="featurePrivilegeName" grow={false}>
+          <EuiFlexItem
+            css={css`
+              &:hover,
+              &:focus {
+                text-decoration: underline;
+              }
+            `}
+            grow={false}
+          >
             {feature.name}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>{tooltipElement}</EuiFlexItem>
diff --git a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.scss b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.scss
index f03a4582598ee..b99491c8b3771 100644
--- a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.scss
+++ b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.scss
@@ -1,11 +1,3 @@
 .euiAccordionWithDescription:hover, .euiAccordionWithDescription:focus {
   text-decoration: none;
 }
-
-.subFeaturePanel {
-  margin-left: $euiSizeL + $euiSizeXS;
-}
-
-.noSubFeaturePrivileges {
-  margin-left: $euiSizeL + $euiSizeXS;
-}
diff --git a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx
index edffd6e7c7b0e..8311a895e0cdf 100644
--- a/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx
+++ b/x-pack/platform/packages/private/security/ui_components/src/kibana_privilege_table/feature_table.tsx
@@ -22,7 +22,7 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import classNames from 'classnames';
+import { css } from '@emotion/react';
 import type { ReactElement } from 'react';
 import React, { Component } from 'react';
 
@@ -240,7 +240,13 @@ export class FeatureTable extends Component<Props, State> {
               }}
             >
               <EuiSpacer size="s" />
-              <EuiPanel color="subdued" paddingSize="s" className="subFeaturePanel">
+              <EuiPanel
+                color="subdued"
+                paddingSize="s"
+                css={({ euiTheme }) => css`
+                  margin-left: calc(${euiTheme.size.l} + ${euiTheme.size.xs});
+                `}
+              >
                 <FeatureTableExpandedRow
                   feature={feature}
                   privilegeIndex={this.props.privilegeIndex}
@@ -265,9 +271,7 @@ export class FeatureTable extends Component<Props, State> {
     const primaryFeaturePrivileges = feature.getPrimaryFeaturePrivileges();
 
     if (feature.reserved && primaryFeaturePrivileges.length === 0) {
-      const buttonContent = (
-        <FeatureTableCell className="noSubFeaturePrivileges" feature={feature} />
-      );
+      const buttonContent = <FeatureTableCell feature={feature} />;
 
       const extraAction = (
         <EuiText css={{ maxWidth: 200 }} size={'xs'} data-test-subj="reservedFeatureDescription">
@@ -333,10 +337,7 @@ export class FeatureTable extends Component<Props, State> {
 
     const hasSubFeaturePrivileges = feature.getSubFeaturePrivileges().length > 0;
     const buttonContent = (
-      <FeatureTableCell
-        className={classNames({ noSubFeaturePrivileges: !hasSubFeaturePrivileges })}
-        feature={feature}
-      />
+      <FeatureTableCell hasSubFeaturePrivileges={hasSubFeaturePrivileges} feature={feature} />
     );
 
     const extraAction = (
diff --git a/x-pack/platform/packages/private/security/ui_components/tsconfig.json b/x-pack/platform/packages/private/security/ui_components/tsconfig.json
index e754725b8b9e6..df2aa0c465cbb 100644
--- a/x-pack/platform/packages/private/security/ui_components/tsconfig.json
+++ b/x-pack/platform/packages/private/security/ui_components/tsconfig.json
@@ -4,7 +4,7 @@
     "outDir": "target/types",
     "types": ["jest", "node", "react"]
   },
-  "include": ["**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "../../../../../../typings/**/*"],
   "exclude": ["target/**/*"],
   "kbn_references": [
     "@kbn/core",
@@ -13,6 +13,6 @@
     "@kbn/security-plugin-types-common",
     "@kbn/test-jest-helpers",
     "@kbn/security-role-management-model",
-    "@kbn/features-plugin",
+    "@kbn/features-plugin"
   ]
 }
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.scss b/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.scss
deleted file mode 100644
index 7a9557fb7d8d4..0000000000000
--- a/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.secAccessAgreementPage .secAuthenticationStatePage__content {
-  max-width: 600px;
-}
-
-.secAccessAgreementPage__textWrapper {
-  overflow-y: hidden;
-}
-
-.secAccessAgreementPage__text {
-  max-height: 400px;
-  padding: $euiSize $euiSizeL 0;
-
-  @include euiYScrollWithShadows;
-}
-
-.secAccessAgreementPage__footer {
-  padding: $euiSize $euiSizeL $euiSizeL;
-}
-
-.secAccessAgreementPage__footerInner {
-  text-align: left;
-}
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.test.tsx b/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.test.tsx
index 1060717ddafa7..0e113998a93bd 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiSkeletonText } from '@elastic/eui';
+import { EuiProvider, EuiSkeletonText } from '@elastic/eui';
 import { act } from '@testing-library/react';
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -28,11 +28,13 @@ describe('AccessAgreementPage', () => {
     coreStartMock.http.get.mockResolvedValue({ accessAgreement: 'This is [link](../link)' });
 
     const wrapper = mountWithIntl(
-      <AccessAgreementPage
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        fatalErrors={coreStartMock.fatalErrors}
-      />
+      <EuiProvider>
+        <AccessAgreementPage
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+        />
+      </EuiProvider>
     );
 
     expect(wrapper.exists(EuiSkeletonText)).toBe(true);
@@ -59,11 +61,13 @@ describe('AccessAgreementPage', () => {
     coreStartMock.http.get.mockRejectedValue(error);
 
     const wrapper = mountWithIntl(
-      <AccessAgreementPage
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        fatalErrors={coreStartMock.fatalErrors}
-      />
+      <EuiProvider>
+        <AccessAgreementPage
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+        />
+      </EuiProvider>
     );
 
     await act(async () => {
@@ -88,11 +92,13 @@ describe('AccessAgreementPage', () => {
       '/some-base-path/app/kibana#/home?_g=()'
     )}`;
     const wrapper = mountWithIntl(
-      <AccessAgreementPage
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        fatalErrors={coreStartMock.fatalErrors}
-      />
+      <EuiProvider>
+        <AccessAgreementPage
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+        />
+      </EuiProvider>
     );
 
     await act(async () => {
@@ -127,11 +133,13 @@ describe('AccessAgreementPage', () => {
 
     window.location.href = currentURL;
     const wrapper = mountWithIntl(
-      <AccessAgreementPage
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        fatalErrors={coreStartMock.fatalErrors}
-      />
+      <EuiProvider>
+        <AccessAgreementPage
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          fatalErrors={coreStartMock.fatalErrors}
+        />
+      </EuiProvider>
     );
 
     await act(async () => {
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.tsx b/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.tsx
index 7477552c0ae88..3a394f2f81d73 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.tsx
+++ b/x-pack/platform/plugins/shared/security/public/authentication/access_agreement/access_agreement_page.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './access_agreement_page.scss';
-
 import {
   EuiButton,
   EuiFlexGroup,
@@ -15,7 +13,9 @@ import {
   EuiSkeletonText,
   EuiSpacer,
   EuiText,
+  useEuiOverflowScroll,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { FormEvent, MouseEvent } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -51,6 +51,8 @@ export function AccessAgreementPage({ http, fatalErrors, notifications }: Props)
       .catch((err) => fatalErrors.add(err));
   }, [http, fatalErrors]);
 
+  const overFlowMixin = useEuiOverflowScroll('y', true);
+
   const onAcknowledge = useCallback(
     async (e: MouseEvent<HTMLButtonElement> | FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -76,15 +78,37 @@ export function AccessAgreementPage({ http, fatalErrors, notifications }: Props)
     <form onSubmit={onAcknowledge}>
       <EuiPanel paddingSize="none">
         <EuiFlexGroup gutterSize="none" direction="column">
-          <EuiFlexItem className="secAccessAgreementPage__textWrapper">
-            <div className="secAccessAgreementPage__text">
+          <EuiFlexItem
+            css={css`
+              overflow-y: hidden;
+            `}
+          >
+            <div
+              css={({ euiTheme }) =>
+                css`
+                  max-height: '400px';
+                  padding: ${euiTheme.size.base} ${euiTheme.size.l} 0;
+                  ${overFlowMixin};
+                `
+              }
+            >
               <EuiText textAlign="left">
                 <ReactMarkdown>{accessAgreement}</ReactMarkdown>
               </EuiText>
             </div>
           </EuiFlexItem>
-          <EuiFlexItem className="secAccessAgreementPage__footer">
-            <div className="secAccessAgreementPage__footerInner">
+          <EuiFlexItem
+            css={({ euiTheme }) =>
+              css`
+                padding: ${euiTheme.size.base} ${euiTheme.size.l} ${euiTheme.size.l};
+              `
+            }
+          >
+            <div
+              css={css`
+                text-align: left;
+              `}
+            >
               <EuiButton
                 fill
                 type="submit"
@@ -112,7 +136,9 @@ export function AccessAgreementPage({ http, fatalErrors, notifications }: Props)
 
   return (
     <AuthenticationStatePage
-      className="secAccessAgreementPage"
+      cssStyles={css`
+        max-width: 600px;
+      `}
       title={
         <FormattedMessage
           id="xpack.security.accessAgreement.title"
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.scss b/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.scss
deleted file mode 100644
index 1645e8e4cc086..0000000000000
--- a/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.secAuthenticationStatePage__header {
-  position: relative;
-  padding: $euiSizeXL;
-  z-index: 10;
-}
-
-.secAuthenticationStatePage__logo {
-  margin-bottom: $euiSizeXL;
-
-  display: inline-block;
-  @include euiBottomShadowMedium;
-}
-
-.secAuthenticationStatePage__content {
-  position: relative;
-  margin: auto;
-  max-width: 460px;
-  padding-left: $euiSizeXL;
-  padding-right: $euiSizeXL;
-  z-index: 10;
-}
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.test.tsx b/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.test.tsx
index 032bc3c93f7ce..73c3cac6b5c92 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.test.tsx
@@ -21,11 +21,11 @@ describe('AuthenticationStatePage', () => {
     );
 
     // Page wrapper with expected class
-    const wrapper = container.querySelector('.secAuthenticationStatePage');
+    const wrapper = container.querySelector('[data-test-subj="secAuthenticationStatePage"]');
     expect(wrapper).toBeInTheDocument();
 
     // Header section
-    const header = container.querySelector('.secAuthenticationStatePage__header');
+    const header = container.querySelector('[data-test-subj="secAuthenticationStatePageHeader"]');
     expect(header).toBeInTheDocument();
 
     // Title in <h1>
@@ -36,22 +36,13 @@ describe('AuthenticationStatePage', () => {
     expect(screen.getByText('hello world')).toBeInTheDocument();
 
     // Icon wrapper with logo class
-    const logoWrapper = container.querySelector('.secAuthenticationStatePage__logo');
+    const logoWrapper = container.querySelector(
+      '[data-test-subj="secAuthenticationStatePageLogo"]'
+    );
     expect(logoWrapper).toBeInTheDocument();
 
     // Check the EuiIcon is rendered with correct type
     const icon = logoWrapper?.querySelector('[data-euiicon-type="logoElastic"]');
     expect(icon).toBeInTheDocument();
   });
-
-  it('renders with custom CSS class', () => {
-    const { container } = renderWithI18n(
-      <AuthenticationStatePage className="customClassName" title={'foo'}>
-        <span>hello world</span>
-      </AuthenticationStatePage>
-    );
-    expect(
-      container.querySelector('.secAuthenticationStatePage.customClassName')
-    ).toBeInTheDocument();
-  });
 });
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.tsx b/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.tsx
index f0d70db66a9ab..7f097268bdfe0 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.tsx
+++ b/x-pack/platform/plugins/shared/security/public/authentication/components/authentication_state_page/authentication_state_page.tsx
@@ -5,9 +5,8 @@
  * 2.0.
  */
 
-import './authentication_state_page.scss';
-
-import { EuiIcon, EuiImage, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiIcon, EuiImage, EuiSpacer, EuiTitle, useEuiShadow, useEuiTheme } from '@elastic/eui';
+import { css, type SerializedStyles } from '@emotion/react';
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 
@@ -17,30 +16,73 @@ interface Props {
   className?: string;
   title: React.ReactNode;
   logo?: string;
+  cssStyles?: SerializedStyles;
 }
 
 export const AuthenticationStatePage: FC<PropsWithChildren<Props>> = (props) => {
   const kbnFullScreenBgCss = useKbnFullScreenBgCss();
+  const theme = useEuiTheme();
+  const { euiTheme } = theme;
+  const euiBottomShadowM = useEuiShadow('m');
 
   return (
-    <div className={`secAuthenticationStatePage ${props.className || ''}`} css={kbnFullScreenBgCss}>
-      <header className="secAuthenticationStatePage__header">
-        <div className="secAuthenticationStatePage__content eui-textCenter">
+    <div css={kbnFullScreenBgCss} data-test-subj="secAuthenticationStatePage">
+      <header
+        data-test-subj="secAuthenticationStatePageHeader"
+        css={css`
+          position: relative;
+          padding: ${euiTheme.size.xl};
+          z-index: 10;
+        `}
+      >
+        <div
+          data-test-subj="secAuthenticationStatePageContent"
+          css={css`
+            position: relative;
+            margin: auto;
+            max-width: 460px;
+            padding-left: ${euiTheme.size.xl};
+            padding-right: ${euiTheme.size.xl};
+            z-index: 10;
+            text-align: center;
+            ${props.cssStyles || ''}
+          `}
+        >
           <EuiSpacer size="xxl" />
-          <span className="secAuthenticationStatePage__logo">
+          <span
+            data-test-subj="secAuthenticationStatePageLogo"
+            css={css`
+              margin-bottom: ${euiTheme.size.xl};
+              display: inline-block;
+              ${euiBottomShadowM};
+            `}
+          >
             {props.logo ? (
               <EuiImage src={props.logo} size={40} alt={'logo'} />
             ) : (
               <EuiIcon type="logoElastic" size="xxl" />
             )}
           </span>
-          <EuiTitle size="l" className="secAuthenticationStatePage__title">
+          <EuiTitle size="l">
             <h1>{props.title}</h1>
           </EuiTitle>
           <EuiSpacer size="xl" />
         </div>
       </header>
-      <div className="secAuthenticationStatePage__content eui-textCenter">{props.children}</div>
+      <div
+        css={css`
+          position: relative;
+          margin: auto;
+          max-width: 460px;
+          padding-left: ${euiTheme.size.xl};
+          padding-right: ${euiTheme.size.xl};
+          z-index: 10;
+          text-align: center;
+          ${props.cssStyles || ''}
+        `}
+      >
+        {props.children}
+      </div>
     </div>
   );
 };
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap
index b98b2183b9d08..4ee98ed11a674 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/security/public/authentication/login/__snapshots__/login_page.test.tsx.snap
@@ -295,13 +295,14 @@ exports[`LoginPage enabled form state renders as expected when loginHelp is set
 exports[`LoginPage page renders as expected 1`] = `
 <div>
   <div
-    class="loginWelcome login-form css-vvcdom-kbnFullScreenBgCss"
+    class="css-vvcdom-kbnFullScreenBgCss"
+    data-test-subj="loginForm"
   >
     <header
-      class="loginWelcome__header"
+      class="css-1uhsdzt-LoginPage"
     >
       <div
-        class="loginWelcome__content eui-textCenter"
+        class="css-das9jl-LoginPage"
       >
         <span
           class="loginWelcome__logo"
@@ -319,7 +320,7 @@ exports[`LoginPage page renders as expected 1`] = `
       </div>
     </header>
     <div
-      class="loginWelcome__content loginWelcome-body"
+      class="css-das9jl-LoginPage"
     >
       <div
         class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
@@ -475,13 +476,14 @@ exports[`LoginPage page renders as expected 1`] = `
 exports[`LoginPage page renders with custom branding 1`] = `
 <div>
   <div
-    class="loginWelcome login-form css-vvcdom-kbnFullScreenBgCss"
+    class="css-vvcdom-kbnFullScreenBgCss"
+    data-test-subj="loginForm"
   >
     <header
-      class="loginWelcome__header"
+      class="css-1uhsdzt-LoginPage"
     >
       <div
-        class="loginWelcome__content eui-textCenter"
+        class="css-das9jl-LoginPage"
       >
         <span
           class="loginWelcome__logo"
@@ -507,7 +509,7 @@ exports[`LoginPage page renders with custom branding 1`] = `
       </div>
     </header>
     <div
-      class="loginWelcome__content loginWelcome-body"
+      class="css-das9jl-LoginPage"
     >
       <div
         class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
index e74b11d86bb38..725914538e831 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/__snapshots__/login_form.test.tsx.snap
@@ -49,83 +49,2465 @@ exports[`LoginForm properly switches to login help: Login Help 1`] = `
 `;
 
 exports[`LoginForm renders as expected 1`] = `
-<Fragment>
-  <EuiPanel
-    color="transparent"
-    data-test-subj="loginForm"
+<EuiProviderNestedCheck>
+  <EuiCacheProvider
+    cache={
+      Object {
+        "compat": true,
+        "insert": [Function],
+        "inserted": Object {},
+        "key": "css",
+        "nonce": undefined,
+        "registered": Object {},
+        "sheet": StyleSheet {
+          "_insertTag": [Function],
+          "before": null,
+          "container": <head />,
+          "ctr": 0,
+          "insertionPoint": undefined,
+          "isSpeedy": false,
+          "key": "css",
+          "nonce": undefined,
+          "prepend": undefined,
+          "speedy": [Function],
+          "tags": Array [],
+        },
+      }
+    }
   >
-    <form
-      onSubmit={[Function]}
-    >
-      <EuiFormRow
-        isInvalid={false}
-        label={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Username"
-            id="xpack.security.login.basicLoginForm.usernameFormRowLabel"
-          />
+    <EuiSystemDefaultsProvider>
+      <EuiThemeProvider
+        theme={
+          Object {
+            "animation": Object {
+              "bounce": "cubic-bezier(.34, 1.61, .7, 1)",
+              "extraFast": "90ms",
+              "extraSlow": "500ms",
+              "fast": "150ms",
+              "normal": "250ms",
+              "resistance": "cubic-bezier(.694, .0482, .335, 1)",
+              "slow": "350ms",
+            },
+            "base": 16,
+            "border": Object {
+              "color": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "colors.borderBaseSubdued",
+                ],
+              },
+              "editable": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "border.width",
+                  "border.color",
+                ],
+              },
+              "radius": Object {
+                "medium": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [],
+                },
+                "small": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [],
+                },
+              },
+              "thick": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "border.width",
+                  "border.color",
+                ],
+              },
+              "thin": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "border.width",
+                  "border.color",
+                ],
+              },
+              "width": Object {
+                "thick": "2px",
+                "thin": "1px",
+              },
+            },
+            "breakpoint": Object {
+              "l": 992,
+              "m": 768,
+              "s": 575,
+              "xl": 1200,
+              "xs": 0,
+            },
+            "colors": Object {
+              "DARK": Object {
+                "accent": "#EE72A6",
+                "accentSecondary": "#16C5C0",
+                "accentText": "#EE72A6",
+                "backgroundBaseAccent": "#351725",
+                "backgroundBaseAccentSecondary": "#03282B",
+                "backgroundBaseDanger": "#351721",
+                "backgroundBaseDisabled": "#1D2A3E",
+                "backgroundBaseFormsControlDisabled": "#2B394F",
+                "backgroundBaseFormsPrepend": "#243147",
+                "backgroundBaseHighlighted": "#172336",
+                "backgroundBaseInteractiveHover": "rgba(255,255,255, 0.08)",
+                "backgroundBaseInteractiveOverlay": "rgba(43,57,79, 0.7)",
+                "backgroundBaseInteractiveSelect": "#0D2F5E",
+                "backgroundBaseInteractiveSelectHover": "#123778",
+                "backgroundBaseNeutral": "#002938",
+                "backgroundBasePlain": "#0B1628",
+                "backgroundBasePrimary": "#0A2342",
+                "backgroundBaseRisk": "#361D18",
+                "backgroundBaseSkeletonEdge": "rgba(255,255,255, 0.16)",
+                "backgroundBaseSkeletonMiddle": "rgba(255,255,255, 0.08)",
+                "backgroundBaseSubdued": "#07101F",
+                "backgroundBaseSuccess": "#092A26",
+                "backgroundBaseWarning": "#2C2721",
+                "backgroundFilledAccent": "#EE72A6",
+                "backgroundFilledAccentSecondary": "#16C5C0",
+                "backgroundFilledDanger": "#F6726A",
+                "backgroundFilledNeutral": "#63C8E3",
+                "backgroundFilledPrimary": "#61A2FF",
+                "backgroundFilledRisk": "#FF995E",
+                "backgroundFilledSuccess": "#24C292",
+                "backgroundFilledText": "#8E9FBC",
+                "backgroundFilledWarning": "#FACB3D",
+                "backgroundLightAccent": "#481E32",
+                "backgroundLightAccentSecondary": "#023436",
+                "backgroundLightDanger": "#491D27",
+                "backgroundLightNeutral": "#003447",
+                "backgroundLightPrimary": "#0D2F5E",
+                "backgroundLightRisk": "#4A221C",
+                "backgroundLightSuccess": "#0D362B",
+                "backgroundLightText": "#2B394F",
+                "backgroundLightWarning": "#3D3014",
+                "backgroundTransparent": "transparent",
+                "backgroundTransparentAccent": "#351725",
+                "backgroundTransparentAccentSecondary": "#351725",
+                "backgroundTransparentDanger": "#351721",
+                "backgroundTransparentHighlighted": "#07101F",
+                "backgroundTransparentNeutral": "#002938",
+                "backgroundTransparentPlain": "#0B1628",
+                "backgroundTransparentPrimary": "#0A2342",
+                "backgroundTransparentRisk": "#361D18",
+                "backgroundTransparentSubdued": "#07101F",
+                "backgroundTransparentSuccess": "#092A26",
+                "backgroundTransparentWarning": "#2C2721",
+                "body": "#07101F",
+                "borderBaseAccent": "#5E2140",
+                "borderBaseAccentSecondary": "#044949",
+                "borderBaseDanger": "#5E2129",
+                "borderBaseDisabled": "#485975",
+                "borderBaseFloating": "#2B394F",
+                "borderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)",
+                "borderBaseFormsControl": "#6A7FA0",
+                "borderBaseNeutral": "#00425C",
+                "borderBasePlain": "#485975",
+                "borderBasePrimary": "#123778",
+                "borderBaseRisk": "#5E281A",
+                "borderBaseSubdued": "#2B394F",
+                "borderBaseSuccess": "#094837",
+                "borderBaseWarning": "#513910",
+                "borderInteractiveFormsHoverDanger": "#EE4C48",
+                "borderInteractiveFormsHoverPlain": "#5A6D8C",
+                "borderStrongAccent": "#EE72A6",
+                "borderStrongAccentSecondary": "#16C5C0",
+                "borderStrongDanger": "#F6726A",
+                "borderStrongNeutral": "#37B8DC",
+                "borderStrongPrimary": "#61A2FF",
+                "borderStrongRisk": "#FF995E",
+                "borderStrongSuccess": "#24C292",
+                "borderStrongText": "#8E9FBC",
+                "borderStrongWarning": "#FACB3D",
+                "danger": "#F6726A",
+                "dangerText": "#F6726A",
+                "darkShade": "#7186A8",
+                "darkestShade": "#CAD3E2",
+                "disabled": "#1D2A3E",
+                "disabledText": "#6A7FA0",
+                "emptyShade": "#0B1628",
+                "fullShade": "#FFFFFF",
+                "highlight": "#1750BA",
+                "lightShade": "#243147",
+                "lightestShade": "#172336",
+                "link": "#61A2FF",
+                "mediumShade": "#516381",
+                "primary": "#61A2FF",
+                "primaryText": "#61A2FF",
+                "severity": Object {
+                  "danger": "#EE4C48",
+                  "neutral": "#B5E5F2",
+                  "risk": "#FF995E",
+                  "success": "#24C292",
+                  "unknown": "#E3E8F2",
+                  "warning": "#FCD883",
+                },
+                "shadow": "#000000",
+                "subduedText": "#8E9FBC",
+                "success": "#24C292",
+                "successText": "#24C292",
+                "text": "#CAD3E2",
+                "textAccent": "#EE72A6",
+                "textAccentSecondary": "#16C5C0",
+                "textDanger": "#F6726A",
+                "textDisabled": "#6A7FA0",
+                "textHeading": "#E3E8F2",
+                "textInverse": "#07101F",
+                "textNeutral": "#37B8DC",
+                "textParagraph": "#CAD3E2",
+                "textPrimary": "#61A2FF",
+                "textRisk": "#FF995E",
+                "textSubdued": "#8E9FBC",
+                "textSuccess": "#24C292",
+                "textWarning": "#FCD883",
+                "title": "#E3E8F2",
+                "vis": Object {
+                  "euiColorVis0": "#16C5C0",
+                  "euiColorVis1": "#A6EDEA",
+                  "euiColorVis2": "#61A2FF",
+                  "euiColorVis3": "#BFDBFF",
+                  "euiColorVis4": "#EE72A6",
+                  "euiColorVis5": "#FFC7DB",
+                  "euiColorVis6": "#F6726A",
+                  "euiColorVis7": "#FFC9C2",
+                  "euiColorVis8": "#EAAE01",
+                  "euiColorVis9": "#FCD883",
+                  "euiColorVisBase0": "#F6F9FC",
+                  "euiColorVisBehindText0": "#16C5C0",
+                  "euiColorVisBehindText1": "#A6EDEA",
+                  "euiColorVisBehindText2": "#61A2FF",
+                  "euiColorVisBehindText3": "#BFDBFF",
+                  "euiColorVisBehindText4": "#EE72A6",
+                  "euiColorVisBehindText5": "#FFC7DB",
+                  "euiColorVisBehindText6": "#F6726A",
+                  "euiColorVisBehindText7": "#FFC9C2",
+                  "euiColorVisBehindText8": "#EAAE01",
+                  "euiColorVisBehindText9": "#FCD883",
+                  "euiColorVisComplementary0": "#61A2FF",
+                  "euiColorVisComplementary1": "#EAAE01",
+                  "euiColorVisCool0": "#E8F1FF",
+                  "euiColorVisCool1": "#A3CBFF",
+                  "euiColorVisCool2": "#61A2FF",
+                  "euiColorVisDanger0": "#F6726A",
+                  "euiColorVisDanger1": "#FFC9C2",
+                  "euiColorVisGrey0": "#CAD3E2",
+                  "euiColorVisGrey1": "#8E9FBC",
+                  "euiColorVisGrey2": "#5A6D8C",
+                  "euiColorVisGrey3": "#1D2A3E",
+                  "euiColorVisNeutral0": "#37B8DC",
+                  "euiColorVisNeutral1": "#B5E5F2",
+                  "euiColorVisRisk0": "#FC8544",
+                  "euiColorVisRisk1": "#FFCDA1",
+                  "euiColorVisSuccess0": "#24C292",
+                  "euiColorVisSuccess1": "#AEE8D2",
+                  "euiColorVisText0": "#16C5C0",
+                  "euiColorVisText1": "#A6EDEA",
+                  "euiColorVisText2": "#61A2FF",
+                  "euiColorVisText3": "#BFDBFF",
+                  "euiColorVisText4": "#EE72A6",
+                  "euiColorVisText5": "#FFC7DB",
+                  "euiColorVisText6": "#F6726A",
+                  "euiColorVisText7": "#FFC9C2",
+                  "euiColorVisText8": "#EAAE01",
+                  "euiColorVisText9": "#FCD883",
+                  "euiColorVisWarm0": "#FFE8E5",
+                  "euiColorVisWarm1": "#FFB5AD",
+                  "euiColorVisWarm2": "#F6726A",
+                  "euiColorVisWarning0": "#EAAE01",
+                  "euiColorVisWarning1": "#FCD883",
+                },
+                "warning": "#FACB3D",
+                "warningText": "#FCD883",
+              },
+              "LIGHT": Object {
+                "accent": "#BC1E70",
+                "accentSecondary": "#008B87",
+                "accentText": "#A11262",
+                "backgroundBaseAccent": "#FFEBF5",
+                "backgroundBaseAccentSecondary": "#E2F9F7",
+                "backgroundBaseDanger": "#FFE8E5",
+                "backgroundBaseDisabled": "#ECF1F9",
+                "backgroundBaseFormsControlDisabled": "#CAD3E2",
+                "backgroundBaseFormsPrepend": "#ECF1F9",
+                "backgroundBaseHighlighted": "#F6F9FC",
+                "backgroundBaseInteractiveHover": "rgba(23,80,186, 0.04)",
+                "backgroundBaseInteractiveOverlay": "rgba(72,89,117, 0.7)",
+                "backgroundBaseInteractiveSelect": "#E8F1FF",
+                "backgroundBaseInteractiveSelectHover": "#D9E8FF",
+                "backgroundBaseNeutral": "#E5F6FA",
+                "backgroundBasePlain": "#FFFFFF",
+                "backgroundBasePrimary": "#E8F1FF",
+                "backgroundBaseRisk": "#FFEDD6",
+                "backgroundBaseSkeletonEdge": "rgba(72,89,117, 0.16)",
+                "backgroundBaseSkeletonMiddle": "rgba(72,89,117, 0.04)",
+                "backgroundBaseSubdued": "#F6F9FC",
+                "backgroundBaseSuccess": "#E2F8F0",
+                "backgroundBaseWarning": "#FDF3D8",
+                "backgroundFilledAccent": "#BC1E70",
+                "backgroundFilledAccentSecondary": "#008B87",
+                "backgroundFilledDanger": "#C61E25",
+                "backgroundFilledNeutral": "#1C8CB5",
+                "backgroundFilledPrimary": "#0B64DD",
+                "backgroundFilledRisk": "#ED6723",
+                "backgroundFilledSuccess": "#008A5E",
+                "backgroundFilledText": "#5A6D8C",
+                "backgroundFilledWarning": "#FACB3D",
+                "backgroundLightAccent": "#FDDDE9",
+                "backgroundLightAccentSecondary": "#C9F3F0",
+                "backgroundLightDanger": "#FDDDD8",
+                "backgroundLightNeutral": "#CFEEF7",
+                "backgroundLightPrimary": "#D9E8FF",
+                "backgroundLightRisk": "#FFDEBF",
+                "backgroundLightSuccess": "#C9F3E3",
+                "backgroundLightText": "#E3E8F2",
+                "backgroundLightWarning": "#FDE9B5",
+                "backgroundTransparent": "transparent",
+                "backgroundTransparentAccent": "#FFEBF5",
+                "backgroundTransparentAccentSecondary": "#E2F9F7",
+                "backgroundTransparentDanger": "#FFE8E5",
+                "backgroundTransparentHighlighted": "#ECF1F9",
+                "backgroundTransparentNeutral": "#E5F6FA",
+                "backgroundTransparentPlain": "#ECF1F9",
+                "backgroundTransparentPrimary": "#E8F1FF",
+                "backgroundTransparentRisk": "#FFEDD6",
+                "backgroundTransparentSubdued": "#ECF1F9",
+                "backgroundTransparentSuccess": "#E2F8F0",
+                "backgroundTransparentWarning": "#FDF3D8",
+                "body": "#F6F9FC",
+                "borderBaseAccent": "#FFC7DB",
+                "borderBaseAccentSecondary": "#A6EDEA",
+                "borderBaseDanger": "#FFC9C2",
+                "borderBaseDisabled": "#CAD3E2",
+                "borderBaseFloating": "transparent",
+                "borderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)",
+                "borderBaseFormsControl": "#8E9FBC",
+                "borderBaseNeutral": "#B5E5F2",
+                "borderBasePlain": "#CAD3E2",
+                "borderBasePrimary": "#BFDBFF",
+                "borderBaseRisk": "#FFCDA1",
+                "borderBaseSubdued": "#E3E8F2",
+                "borderBaseSuccess": "#AEE8D2",
+                "borderBaseWarning": "#FCD883",
+                "borderInteractiveFormsHoverDanger": "#DA3737",
+                "borderInteractiveFormsHoverPlain": "#B4C1D5",
+                "borderStrongAccent": "#BC1E70",
+                "borderStrongAccentSecondary": "#008B87",
+                "borderStrongDanger": "#C61E25",
+                "borderStrongNeutral": "#19799F",
+                "borderStrongPrimary": "#0B64DD",
+                "borderStrongRisk": "#C24411",
+                "borderStrongSuccess": "#008A5E",
+                "borderStrongText": "#5A6D8C",
+                "borderStrongWarning": "#966B03",
+                "danger": "#C61E25",
+                "dangerText": "#A71627",
+                "darkShade": "#5A6D8C",
+                "darkestShade": "#2B394F",
+                "disabled": "#E3E8F2",
+                "disabledText": "#6A7FA0",
+                "emptyShade": "#FFFFFF",
+                "fullShade": "#07101F",
+                "highlight": "#E8F1FF",
+                "lightShade": "#CAD3E2",
+                "lightestShade": "#ECF1F9",
+                "link": "#1750BA",
+                "mediumShade": "#8E9FBC",
+                "primary": "#0B64DD",
+                "primaryText": "#1750BA",
+                "severity": Object {
+                  "danger": "#EE4C48",
+                  "neutral": "#B5E5F2",
+                  "risk": "#FF995E",
+                  "success": "#24C292",
+                  "unknown": "#E3E8F2",
+                  "warning": "#FCD883",
+                },
+                "shadow": "#000000",
+                "subduedText": "#516381",
+                "success": "#008A5E",
+                "successText": "#09724D",
+                "text": "#1D2A3E",
+                "textAccent": "#A11262",
+                "textAccentSecondary": "#047471",
+                "textDanger": "#A71627",
+                "textDisabled": "#798EAF",
+                "textHeading": "#111C2C",
+                "textInverse": "#FFFFFF",
+                "textNeutral": "#0F658A",
+                "textParagraph": "#1D2A3E",
+                "textPrimary": "#1750BA",
+                "textRisk": "#9E3A16",
+                "textSubdued": "#516381",
+                "textSuccess": "#09724D",
+                "textWarning": "#825803",
+                "title": "#111C2C",
+                "vis": Object {
+                  "euiColorVis0": "#16C5C0",
+                  "euiColorVis1": "#A6EDEA",
+                  "euiColorVis2": "#61A2FF",
+                  "euiColorVis3": "#BFDBFF",
+                  "euiColorVis4": "#EE72A6",
+                  "euiColorVis5": "#FFC7DB",
+                  "euiColorVis6": "#F6726A",
+                  "euiColorVis7": "#FFC9C2",
+                  "euiColorVis8": "#EAAE01",
+                  "euiColorVis9": "#FCD883",
+                  "euiColorVisBase0": "#F6F9FC",
+                  "euiColorVisBehindText0": "#16C5C0",
+                  "euiColorVisBehindText1": "#A6EDEA",
+                  "euiColorVisBehindText2": "#61A2FF",
+                  "euiColorVisBehindText3": "#BFDBFF",
+                  "euiColorVisBehindText4": "#EE72A6",
+                  "euiColorVisBehindText5": "#FFC7DB",
+                  "euiColorVisBehindText6": "#F6726A",
+                  "euiColorVisBehindText7": "#FFC9C2",
+                  "euiColorVisBehindText8": "#EAAE01",
+                  "euiColorVisBehindText9": "#FCD883",
+                  "euiColorVisComplementary0": "#61A2FF",
+                  "euiColorVisComplementary1": "#EAAE01",
+                  "euiColorVisCool0": "#E8F1FF",
+                  "euiColorVisCool1": "#A3CBFF",
+                  "euiColorVisCool2": "#61A2FF",
+                  "euiColorVisDanger0": "#F6726A",
+                  "euiColorVisDanger1": "#FFC9C2",
+                  "euiColorVisGrey0": "#CAD3E2",
+                  "euiColorVisGrey1": "#8E9FBC",
+                  "euiColorVisGrey2": "#5A6D8C",
+                  "euiColorVisGrey3": "#1D2A3E",
+                  "euiColorVisNeutral0": "#37B8DC",
+                  "euiColorVisNeutral1": "#B5E5F2",
+                  "euiColorVisRisk0": "#FC8544",
+                  "euiColorVisRisk1": "#FFCDA1",
+                  "euiColorVisSuccess0": "#24C292",
+                  "euiColorVisSuccess1": "#AEE8D2",
+                  "euiColorVisText0": "#065B58",
+                  "euiColorVisText1": "#047471",
+                  "euiColorVisText2": "#154399",
+                  "euiColorVisText3": "#0B64DD",
+                  "euiColorVisText4": "#A11262",
+                  "euiColorVisText5": "#D13680",
+                  "euiColorVisText6": "#A71627",
+                  "euiColorVisText7": "#DA3737",
+                  "euiColorVisText8": "#6A4906",
+                  "euiColorVisText9": "#966B03",
+                  "euiColorVisWarm0": "#FFE8E5",
+                  "euiColorVisWarm1": "#FFB5AD",
+                  "euiColorVisWarm2": "#F6726A",
+                  "euiColorVisWarning0": "#EAAE01",
+                  "euiColorVisWarning1": "#FCD883",
+                },
+                "warning": "#FACB3D",
+                "warningText": "#825803",
+              },
+              "ghost": "#FFFFFF",
+              "ink": "#07101F",
+              "plainDark": "#07101F",
+              "plainLight": "#FFFFFF",
+            },
+            "components": Object {
+              "DARK": Object {
+                "badgeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBackgroundSubdued": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBorderColorHollow": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "badgeIconButtonBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "bottomBarBackground": "#07101F",
+                "breadcrumbsApplicationBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "breadcrumbsApplicationColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "buttonGroupBackgroundDisabledSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "buttonGroupBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupBorderColorSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupFocusColor": "#FFFFFF",
+                "codeAdditionColor": "#16C5C0",
+                "codeAttributeColor": "inherit",
+                "codeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "codeBackgroundSelected": "inherit",
+                "codeColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textParagraph",
+                  ],
+                },
+                "codeCommentColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeDeletionColor": "#F6726A",
+                "codeFunctionTitleColor": "inherit",
+                "codeInlineBackground": "#172336",
+                "codeInlineCodeKeywordColor": "#B084F5",
+                "codeInlineColor": "#B084F5",
+                "codeKeywordColor": "#B084F5",
+                "codeMetaColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeNameColor": "#61A2FF",
+                "codeNumberColor": "#16C5C0",
+                "codeParamsColor": "inherit",
+                "codeSectionColor": "#F6726A",
+                "codeSelectorClassColor": "inherit",
+                "codeSelectorColor": "inherit",
+                "codeSelectorIdColor": "inherit",
+                "codeStringColor": "#EE72A6",
+                "codeSymbolColor": "#F6726A",
+                "codeTagColor": "#61A2FF",
+                "codeTitleColor": "#EAAE01",
+                "codeTypeColor": "#61A2FF",
+                "collapsibleNavGroupBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "collapsibleNavGroupBackgroundDark": "#07101F",
+                "dataGridBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dataGridRowBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "dataGridRowBackgroundMarked": "#2C2721",
+                "dataGridRowBackgroundMarkedHover": "#3D3014",
+                "dataGridRowBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowBorderActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "dataGridRowBorderHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongText",
+                  ],
+                },
+                "dataGridRowBorderMarked": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongWarning",
+                  ],
+                },
+                "dataGridRowStripesBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowStripesBackgroundHover": "#1D2A3E",
+                "dataGridRowStripesBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowStripesBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStriped": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStripedHover": "#1D2A3E",
+                "dataGridVerticalLineBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dragDropDraggingBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "dragDropDraggingOverBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightSuccess",
+                  ],
+                },
+                "filterButtonBadgeBackgroundHover": "#3F4F69",
+                "filterSelectItemBackgroundFocusDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "flyoutCloseButtonInsideBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "flyoutFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "headerBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "headerDarkBackground": "#0B1628",
+                "headerDarkSearchBorderColor": "#485975",
+                "headerDarkSectionItemBackgroundFocus": "#0A2342",
+                "keyPadMenuItemBackgroundDisabledSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "listGroupItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundSubduedActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "loadingChartMonoBackground0": "#384861",
+                "loadingChartMonoBackground1": "#485975",
+                "loadingChartMonoBackground2": "#5A6D8C",
+                "loadingChartMonoBackground3": "#6A7FA0",
+                "loadingSpinnerBorder": "#485975",
+                "loadingSpinnerHighlight": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "markBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightPrimary",
+                  ],
+                },
+                "markdownFormatTableBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "overlayMaskBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveOverlay",
+                  ],
+                },
+                "overlayMaskBackgroundHighContrast": "rgba(17,28,44, 0.9)",
+                "popoverFooterBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "popoverPanelBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "scrollbarTrackColor": "#0B1628",
+                "selectableListItemBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "sideNavItemEmphasizedBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "skeletonBackgroundSkeletonMiddleHighContrast": "rgba(255,255,255, 0.3)",
+                "superDatePickerBackgroundSuccees": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "switchBackgroundOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchBackgroundOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchCompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchIconDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textDisabled",
+                  ],
+                },
+                "switchMiniBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchThumbBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "switchThumbBorderOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchThumbBorderOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchUncompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "tableCellSortableIconColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "tableRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowBackgroundMarked": "#2C2721",
+                "tableRowBackgroundMarkedHover": "#3D3014",
+                "tableRowBackgroundSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "tableRowBackgroundSelectedHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundFocus": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tooltipBackground": "#07101F",
+                "tooltipBorder": "#2B394F",
+                "tooltipBorderFloating": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseFloating",
+                  ],
+                },
+                "tourFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "treeViewItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+              },
+              "LIGHT": Object {
+                "badgeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBackgroundSubdued": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBorderColorHollow": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "badgeIconButtonBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "bottomBarBackground": "#07101F",
+                "breadcrumbsApplicationBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "breadcrumbsApplicationColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "buttonGroupBackgroundDisabledSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "buttonGroupBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupBorderColorSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupFocusColor": "#07101F",
+                "codeAdditionColor": "#047471",
+                "codeAttributeColor": "inherit",
+                "codeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "codeBackgroundSelected": "inherit",
+                "codeColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textParagraph",
+                  ],
+                },
+                "codeCommentColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeDeletionColor": "#A71627",
+                "codeFunctionTitleColor": "inherit",
+                "codeInlineBackground": "#ECF1F9",
+                "codeInlineCodeKeywordColor": "#6B3C9F",
+                "codeInlineColor": "#6B3C9F",
+                "codeKeywordColor": "#1750BA",
+                "codeMetaColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeNameColor": "#1750BA",
+                "codeNumberColor": "#047471",
+                "codeParamsColor": "inherit",
+                "codeSectionColor": "#A71627",
+                "codeSelectorClassColor": "inherit",
+                "codeSelectorColor": "inherit",
+                "codeSelectorIdColor": "inherit",
+                "codeStringColor": "#A11262",
+                "codeSymbolColor": "#A71627",
+                "codeTagColor": "#1750BA",
+                "codeTitleColor": "#825803",
+                "codeTypeColor": "#1750BA",
+                "collapsibleNavGroupBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "collapsibleNavGroupBackgroundDark": "#07101F",
+                "dataGridBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dataGridRowBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "dataGridRowBackgroundMarked": "#FDF3D8",
+                "dataGridRowBackgroundMarkedHover": "#FDE9B5",
+                "dataGridRowBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowBorderActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "dataGridRowBorderHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongText",
+                  ],
+                },
+                "dataGridRowBorderMarked": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongWarning",
+                  ],
+                },
+                "dataGridRowStripesBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowStripesBackgroundHover": "#ECF1F9",
+                "dataGridRowStripesBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowStripesBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStriped": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStripedHover": "#ECF1F9",
+                "dataGridVerticalLineBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dragDropDraggingBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "dragDropDraggingOverBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightSuccess",
+                  ],
+                },
+                "filterButtonBadgeBackgroundHover": "#D6DDEA",
+                "filterSelectItemBackgroundFocusDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "flyoutCloseButtonInsideBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "flyoutFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "headerBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "headerDarkBackground": "#0B1628",
+                "headerDarkSearchBorderColor": "#485975",
+                "headerDarkSectionItemBackgroundFocus": "#0A2342",
+                "keyPadMenuItemBackgroundDisabledSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "listGroupItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundSubduedActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "loadingChartMonoBackground0": "#E3E8F2",
+                "loadingChartMonoBackground1": "#CAD3E2",
+                "loadingChartMonoBackground2": "#B4C1D5",
+                "loadingChartMonoBackground3": "#A2B1C9",
+                "loadingSpinnerBorder": "#CAD3E2",
+                "loadingSpinnerHighlight": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "markBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightPrimary",
+                  ],
+                },
+                "markdownFormatTableBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "overlayMaskBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveOverlay",
+                  ],
+                },
+                "overlayMaskBackgroundHighContrast": "rgba(17,28,44, 0.9)",
+                "popoverFooterBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "popoverPanelBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "scrollbarTrackColor": "#ECF1F9",
+                "selectableListItemBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "sideNavItemEmphasizedBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "skeletonBackgroundSkeletonMiddleHighContrast": "rgba(72,89,117, 0.04)",
+                "superDatePickerBackgroundSuccees": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "switchBackgroundOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchBackgroundOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchCompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchIconDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textDisabled",
+                  ],
+                },
+                "switchMiniBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchThumbBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "switchThumbBorderOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchThumbBorderOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchUncompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "tableCellSortableIconColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "tableRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowBackgroundMarked": "#FDF3D8",
+                "tableRowBackgroundMarkedHover": "#FDE9B5",
+                "tableRowBackgroundSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "tableRowBackgroundSelectedHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundFocus": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "tooltipBackground": "#07101F",
+                "tooltipBorder": "#2B394F",
+                "tooltipBorderFloating": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseFloating",
+                  ],
+                },
+                "tourFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "treeViewItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+              },
+              "buttons": Object {
+                "DARK": Object {
+                  "backgroundAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccent",
+                    ],
+                  },
+                  "backgroundAccentActive": "rgba(229,74,145, 0.2)",
+                  "backgroundAccentHover": "rgba(229,74,145, 0.16)",
+                  "backgroundAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccentSecondary",
+                    ],
+                  },
+                  "backgroundAccentSecondaryActive": "rgba(0,176,170, 0.2)",
+                  "backgroundAccentSecondaryHover": "rgba(0,176,170, 0.16)",
+                  "backgroundDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightDanger",
+                    ],
+                  },
+                  "backgroundDangerActive": "rgba(238,76,72, 0.2)",
+                  "backgroundDangerHover": "rgba(238,76,72, 0.16)",
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundEmptyAccentActive": "rgba(229,74,145, 0.2)",
+                  "backgroundEmptyAccentHover": "rgba(229,74,145, 0.16)",
+                  "backgroundEmptyAccentSecondaryActive": "rgba(0,176,170, 0.2)",
+                  "backgroundEmptyAccentSecondaryHover": "rgba(0,176,170, 0.16)",
+                  "backgroundEmptyDangerActive": "rgba(238,76,72, 0.2)",
+                  "backgroundEmptyDangerHover": "rgba(238,76,72, 0.16)",
+                  "backgroundEmptyNeutralActive": "rgba(13,161,201, 0.2)",
+                  "backgroundEmptyNeutralHover": "rgba(13,161,201, 0.16)",
+                  "backgroundEmptyPrimaryActive": "rgba(55,136,255, 0.2)",
+                  "backgroundEmptyPrimaryHover": "rgba(55,136,255, 0.16)",
+                  "backgroundEmptyRiskActive": "rgba(252,133,68, 0.16)",
+                  "backgroundEmptyRiskHover": "rgba(252,133,68, 0.12)",
+                  "backgroundEmptySuccessActive": "rgba(4,174,126, 0.2)",
+                  "backgroundEmptySuccessHover": "rgba(4,174,126, 0.16)",
+                  "backgroundEmptyTextActive": "rgba(255,255,255, 0.16)",
+                  "backgroundEmptyTextHover": "rgba(255,255,255, 0.12)",
+                  "backgroundEmptyWarningActive": "rgba(234,174,1, 0.16)",
+                  "backgroundEmptyWarningHover": "rgba(234,174,1, 0.12)",
+                  "backgroundFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccent",
+                    ],
+                  },
+                  "backgroundFilledAccentActive": "#D13680",
+                  "backgroundFilledAccentHover": "#E54A91",
+                  "backgroundFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccentSecondary",
+                    ],
+                  },
+                  "backgroundFilledAccentSecondaryActive": "#009E99",
+                  "backgroundFilledAccentSecondaryHover": "#00B0AA",
+                  "backgroundFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledDanger",
+                    ],
+                  },
+                  "backgroundFilledDangerActive": "#DA3737",
+                  "backgroundFilledDangerHover": "#EE4C48",
+                  "backgroundFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledNeutral",
+                    ],
+                  },
+                  "backgroundFilledNeutralActive": "#1C8CB5",
+                  "backgroundFilledNeutralHover": "#0dA1C9",
+                  "backgroundFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledPrimary",
+                    ],
+                  },
+                  "backgroundFilledPrimaryActive": "#2476F0",
+                  "backgroundFilledPrimaryHover": "#3788FF",
+                  "backgroundFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledRisk",
+                    ],
+                  },
+                  "backgroundFilledRiskActive": "#ED6723",
+                  "backgroundFilledRiskHover": "#FC8544",
+                  "backgroundFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledSuccess",
+                    ],
+                  },
+                  "backgroundFilledSuccessActive": "#00996B",
+                  "backgroundFilledSuccessHover": "#04AE7E",
+                  "backgroundFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledText",
+                    ],
+                  },
+                  "backgroundFilledTextActive": "#6A7FA0",
+                  "backgroundFilledTextHover": "#798EAF",
+                  "backgroundFilledWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledWarning",
+                    ],
+                  },
+                  "backgroundFilledWarningActive": "#EAAE01",
+                  "backgroundFilledWarningHover": "#F5BC00",
+                  "backgroundNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightNeutral",
+                    ],
+                  },
+                  "backgroundNeutralActive": "rgba(13,161,201, 0.2)",
+                  "backgroundNeutralHover": "rgba(13,161,201, 0.16)",
+                  "backgroundPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightPrimary",
+                    ],
+                  },
+                  "backgroundPrimaryActive": "rgba(55,136,255, 0.2)",
+                  "backgroundPrimaryHover": "rgba(55,136,255, 0.16)",
+                  "backgroundRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightRisk",
+                    ],
+                  },
+                  "backgroundRiskActive": "rgba(252,133,68, 0.16)",
+                  "backgroundRiskHover": "rgba(252,133,68, 0.12)",
+                  "backgroundSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightSuccess",
+                    ],
+                  },
+                  "backgroundSuccessActive": "rgba(4,174,126, 0.2)",
+                  "backgroundSuccessHover": "rgba(4,174,126, 0.16)",
+                  "backgroundText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "flags.buttonVariant",
+                      "colors.backgroundBasePlain",
+                      "colors.backgroundLightText",
+                    ],
+                  },
+                  "backgroundTextActive": "rgba(255,255,255, 0.16)",
+                  "backgroundTextHover": "rgba(255,255,255, 0.12)",
+                  "backgroundWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightWarning",
+                    ],
+                  },
+                  "backgroundWarningActive": "rgba(234,174,1, 0.16)",
+                  "backgroundWarningHover": "rgba(234,174,1, 0.12)",
+                  "textColorAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccent",
+                    ],
+                  },
+                  "textColorAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccentSecondary",
+                    ],
+                  },
+                  "textColorDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDanger",
+                    ],
+                  },
+                  "textColorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledWarning": "#6A4906",
+                  "textColorNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textNeutral",
+                    ],
+                  },
+                  "textColorPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textPrimary",
+                    ],
+                  },
+                  "textColorRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textRisk",
+                    ],
+                  },
+                  "textColorSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSuccess",
+                    ],
+                  },
+                  "textColorText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textParagraph",
+                    ],
+                  },
+                  "textColorWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textWarning",
+                    ],
+                  },
+                },
+                "LIGHT": Object {
+                  "backgroundAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccent",
+                    ],
+                  },
+                  "backgroundAccentActive": "rgba(229,74,145, 0.16)",
+                  "backgroundAccentHover": "rgba(229,74,145, 0.12)",
+                  "backgroundAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccentSecondary",
+                    ],
+                  },
+                  "backgroundAccentSecondaryActive": "rgba(0,176,170, 0.16)",
+                  "backgroundAccentSecondaryHover": "rgba(0,176,170, 0.12)",
+                  "backgroundDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightDanger",
+                    ],
+                  },
+                  "backgroundDangerActive": "rgba(238,76,72, 0.16)",
+                  "backgroundDangerHover": "rgba(238,76,72, 0.12)",
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundEmptyAccentActive": "rgba(229,74,145, 0.16)",
+                  "backgroundEmptyAccentHover": "rgba(229,74,145, 0.12)",
+                  "backgroundEmptyAccentSecondaryActive": "rgba(0,176,170, 0.16)",
+                  "backgroundEmptyAccentSecondaryHover": "rgba(0,176,170, 0.12)",
+                  "backgroundEmptyDangerActive": "rgba(238,76,72, 0.16)",
+                  "backgroundEmptyDangerHover": "rgba(238,76,72, 0.12)",
+                  "backgroundEmptyNeutralActive": "rgba(13,161,201, 0.16)",
+                  "backgroundEmptyNeutralHover": "rgba(13,161,201, 0.12)",
+                  "backgroundEmptyPrimaryActive": "rgba(55,136,255, 0.16)",
+                  "backgroundEmptyPrimaryHover": "rgba(55,136,255, 0.12)",
+                  "backgroundEmptyRiskActive": "rgba(252,133,68, 0.2)",
+                  "backgroundEmptyRiskHover": "rgba(252,133,68, 0.16)",
+                  "backgroundEmptySuccessActive": "rgba(4,174,126, 0.16)",
+                  "backgroundEmptySuccessHover": "rgba(4,174,126, 0.12)",
+                  "backgroundEmptyTextActive": "rgba(23,80,186, 0.12)",
+                  "backgroundEmptyTextHover": "rgba(23,80,186, 0.08)",
+                  "backgroundEmptyWarningActive": "rgba(234,174,1, 0.2)",
+                  "backgroundEmptyWarningHover": "rgba(234,174,1, 0.16)",
+                  "backgroundFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccent",
+                    ],
+                  },
+                  "backgroundFilledAccentActive": "#831652",
+                  "backgroundFilledAccentHover": "#A11262",
+                  "backgroundFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccentSecondary",
+                    ],
+                  },
+                  "backgroundFilledAccentSecondaryActive": "#065B58",
+                  "backgroundFilledAccentSecondaryHover": "#047471",
+                  "backgroundFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledDanger",
+                    ],
+                  },
+                  "backgroundFilledDangerActive": "#7F1F27",
+                  "backgroundFilledDangerHover": "#A71627",
+                  "backgroundFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledNeutral",
+                    ],
+                  },
+                  "backgroundFilledNeutralActive": "#055476",
+                  "backgroundFilledNeutralHover": "#0F658A",
+                  "backgroundFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledPrimary",
+                    ],
+                  },
+                  "backgroundFilledPrimaryActive": "#154399",
+                  "backgroundFilledPrimaryHover": "#1750BA",
+                  "backgroundFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledRisk",
+                    ],
+                  },
+                  "backgroundFilledRiskActive": "#C24411",
+                  "backgroundFilledRiskHover": "#DB541B",
+                  "backgroundFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledSuccess",
+                    ],
+                  },
+                  "backgroundFilledSuccessActive": "#0C5A3F",
+                  "backgroundFilledSuccessHover": "#09724D",
+                  "backgroundFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledText",
+                    ],
+                  },
+                  "backgroundFilledTextActive": "#384861",
+                  "backgroundFilledTextHover": "#485975",
+                  "backgroundFilledWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledWarning",
+                    ],
+                  },
+                  "backgroundFilledWarningActive": "#EAAE01",
+                  "backgroundFilledWarningHover": "#F5BC00",
+                  "backgroundNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightNeutral",
+                    ],
+                  },
+                  "backgroundNeutralActive": "rgba(13,161,201, 0.16)",
+                  "backgroundNeutralHover": "rgba(13,161,201, 0.12)",
+                  "backgroundPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightPrimary",
+                    ],
+                  },
+                  "backgroundPrimaryActive": "rgba(55,136,255, 0.16)",
+                  "backgroundPrimaryHover": "rgba(55,136,255, 0.12)",
+                  "backgroundRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightRisk",
+                    ],
+                  },
+                  "backgroundRiskActive": "rgba(252,133,68, 0.2)",
+                  "backgroundRiskHover": "rgba(252,133,68, 0.16)",
+                  "backgroundSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightSuccess",
+                    ],
+                  },
+                  "backgroundSuccessActive": "rgba(4,174,126, 0.16)",
+                  "backgroundSuccessHover": "rgba(4,174,126, 0.12)",
+                  "backgroundText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "flags.buttonVariant",
+                      "colors.backgroundBasePlain",
+                      "colors.backgroundLightText",
+                    ],
+                  },
+                  "backgroundTextActive": "rgba(23,80,186, 0.12)",
+                  "backgroundTextHover": "rgba(23,80,186, 0.08)",
+                  "backgroundWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightWarning",
+                    ],
+                  },
+                  "backgroundWarningActive": "rgba(234,174,1, 0.2)",
+                  "backgroundWarningHover": "rgba(234,174,1, 0.16)",
+                  "textColorAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccent",
+                    ],
+                  },
+                  "textColorAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccentSecondary",
+                    ],
+                  },
+                  "textColorDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDanger",
+                    ],
+                  },
+                  "textColorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledWarning": "#6A4906",
+                  "textColorNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textNeutral",
+                    ],
+                  },
+                  "textColorPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textPrimary",
+                    ],
+                  },
+                  "textColorRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textRisk",
+                    ],
+                  },
+                  "textColorSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSuccess",
+                    ],
+                  },
+                  "textColorText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textParagraph",
+                    ],
+                  },
+                  "textColorWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textWarning",
+                    ],
+                  },
+                },
+              },
+              "forms": Object {
+                "DARK": Object {
+                  "background": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePrimary",
+                    ],
+                  },
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundDropping": "rgba(4,174,126, 0.16)",
+                  "backgroundFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundReadOnly": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "border": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePlain",
+                    ],
+                  },
+                  "borderAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePrimary",
+                    ],
+                  },
+                  "borderAutofilledHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "borderFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverPlain",
+                    ],
+                  },
+                  "borderInvalid": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongDanger",
+                    ],
+                  },
+                  "borderInvalidHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverDanger",
+                    ],
+                  },
+                  "clearButtonBackground": "#5A6D8C",
+                  "colorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "colorHasPlaceholder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSubdued",
+                    ],
+                  },
+                  "controlBackgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsControlDisabled",
+                    ],
+                  },
+                  "controlBackgroundUnselected": "transparent",
+                  "controlBorder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseFormsControl",
+                    ],
+                  },
+                  "controlBorderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "controlBorderSelected": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "iconDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "prependBackground": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsPrepend",
+                    ],
+                  },
+                },
+                "LIGHT": Object {
+                  "background": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePrimary",
+                    ],
+                  },
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundDropping": "rgba(4,174,126, 0.16)",
+                  "backgroundFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundReadOnly": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "border": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePlain",
+                    ],
+                  },
+                  "borderAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePrimary",
+                    ],
+                  },
+                  "borderAutofilledHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "borderFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverPlain",
+                    ],
+                  },
+                  "borderInvalid": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongDanger",
+                    ],
+                  },
+                  "borderInvalidHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverDanger",
+                    ],
+                  },
+                  "clearButtonBackground": "#8E9FBC",
+                  "colorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "colorHasPlaceholder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSubdued",
+                    ],
+                  },
+                  "controlBackgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsControlDisabled",
+                    ],
+                  },
+                  "controlBackgroundUnselected": "transparent",
+                  "controlBorder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseFormsControl",
+                    ],
+                  },
+                  "controlBorderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "controlBorderSelected": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "iconDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "prependBackground": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsPrepend",
+                    ],
+                  },
+                },
+                "maxWidth": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "size.base",
+                  ],
+                },
+              },
+            },
+            "flags": Object {
+              "buttonVariant": "refresh",
+              "formVariant": "refresh",
+              "hasGlobalFocusColor": true,
+              "hasVisColorAdjustment": false,
+            },
+            "focus": Object {
+              "backgroundColor": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "colors.backgroundBaseInteractiveHover",
+                ],
+              },
+              "color": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "colors.textPrimary",
+                ],
+              },
+              "transparency": Object {
+                "DARK": 0.2,
+                "LIGHT": 0.1,
+              },
+              "width": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+            },
+            "font": Object {
+              "baseline": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "base",
+                ],
+              },
+              "body": Object {
+                "scale": "s",
+                "weight": "regular",
+              },
+              "defaultUnits": "rem",
+              "family": "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif",
+              "familyCode": "'Roboto Mono', Menlo, Courier, monospace",
+              "familySerif": "Georgia, Times, Times New Roman, serif",
+              "featureSettings": "'calt' 1, 'kern' 1, 'liga' 1",
+              "lineHeightMultiplier": 1.5,
+              "scale": Object {
+                "l": 1.25,
+                "m": 1,
+                "s": 0.875,
+                "xl": 1.5,
+                "xs": 0.75,
+                "xxl": 1.875,
+                "xxs": 0.6875,
+                "xxxs": 0.5625,
+              },
+              "title": Object {
+                "weight": "bold",
+              },
+              "weight": Object {
+                "bold": 600,
+                "light": 300,
+                "medium": 450,
+                "regular": 400,
+                "semiBold": 500,
+              },
+            },
+            "levels": Object {
+              "content": 0,
+              "flyout": 1000,
+              "header": 1000,
+              "mask": 6000,
+              "maskBelowHeader": 1000,
+              "menu": 2000,
+              "modal": 8000,
+              "navigation": 6000,
+              "toast": 9000,
+            },
+            "overrides": Object {
+              "HCM": Object {
+                "colors": Object {
+                  "LIGHT": Object {
+                    "severity": Object {
+                      "danger": "#EE4C48",
+                      "neutral": "#0dA1C9",
+                      "risk": "#ED6723",
+                      "success": "#00996B",
+                      "unknown": "#798EAF",
+                      "warning": "#AD7E00",
+                    },
+                    "vis": Object {
+                      "euiColorVis0": "#065B58",
+                      "euiColorVis1": "#009E99",
+                      "euiColorVis2": "#154399",
+                      "euiColorVis3": "#2476F0",
+                      "euiColorVis4": "#831652",
+                      "euiColorVis5": "#D13680",
+                      "euiColorVis6": "#7F1F27",
+                      "euiColorVis7": "#DA3737",
+                      "euiColorVis8": "#6A4906",
+                      "euiColorVis9": "#AD7E00",
+                      "euiColorVisBase0": "#F6F9FC",
+                      "euiColorVisBehindText0": "#065B58",
+                      "euiColorVisBehindText1": "#009E99",
+                      "euiColorVisBehindText2": "#154399",
+                      "euiColorVisBehindText3": "#2476F0",
+                      "euiColorVisBehindText4": "#831652",
+                      "euiColorVisBehindText5": "#D13680",
+                      "euiColorVisBehindText6": "#7F1F27",
+                      "euiColorVisBehindText7": "#DA3737",
+                      "euiColorVisBehindText8": "#6A4906",
+                      "euiColorVisBehindText9": "#AD7E00",
+                      "euiColorVisComplementary0": "#2476F0",
+                      "euiColorVisComplementary1": "#AD7E00",
+                      "euiColorVisCool0": "#E8F1FF",
+                      "euiColorVisCool1": "#85B7FF",
+                      "euiColorVisCool2": "#1750BA",
+                      "euiColorVisDanger0": "#A71627",
+                      "euiColorVisDanger1": "#DA3737",
+                      "euiColorVisGrey0": "#CAD3E2",
+                      "euiColorVisGrey1": "#8E9FBC",
+                      "euiColorVisGrey2": "#5A6D8C",
+                      "euiColorVisGrey3": "#1D2A3E",
+                      "euiColorVisNeutral0": "#0F658A",
+                      "euiColorVisNeutral1": "#1C8CB5",
+                      "euiColorVisRisk0": "#9E3A16",
+                      "euiColorVisRisk1": "#DB541B",
+                      "euiColorVisSuccess0": "#09724D",
+                      "euiColorVisSuccess1": "#00996B",
+                      "euiColorVisText0": "#065B58",
+                      "euiColorVisText1": "#047471",
+                      "euiColorVisText2": "#154399",
+                      "euiColorVisText3": "#0B64DD",
+                      "euiColorVisText4": "#A11262",
+                      "euiColorVisText5": "#D13680",
+                      "euiColorVisText6": "#A71627",
+                      "euiColorVisText7": "#DA3737",
+                      "euiColorVisText8": "#6A4906",
+                      "euiColorVisText9": "#966B03",
+                      "euiColorVisWarm0": "#FFE8E5",
+                      "euiColorVisWarm1": "#FC9188",
+                      "euiColorVisWarm2": "#A71627",
+                      "euiColorVisWarning0": "#825803",
+                      "euiColorVisWarning1": "#AD7E00",
+                    },
+                  },
+                  "ghost": "#FFFFFF",
+                  "ink": "#000000",
+                },
+              },
+            },
+            "size": Object {
+              "base": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "l": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "m": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "s": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xs": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxs": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxxl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxxxl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+            },
+          }
         }
       >
-        <EuiFieldText
-          aria-required={true}
-          autoComplete="off"
-          data-test-subj="loginUsername"
-          disabled={false}
-          id="username"
-          inputRef={[Function]}
-          isInvalid={false}
-          name="username"
-          onChange={[Function]}
-          value=""
-        />
-      </EuiFormRow>
-      <EuiFormRow
-        isInvalid={false}
-        label={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Password"
-            id="xpack.security.login.basicLoginForm.passwordFormRowLabel"
+        <EuiCacheProvider>
+          <EuiGlobalStyles />
+        </EuiCacheProvider>
+        <EuiCacheProvider>
+          <EuiUtilityClasses />
+        </EuiCacheProvider>
+        <EuiComponentDefaultsProvider>
+          <LoginForm
+            http={
+              Object {
+                "addLoadingCountSource": [MockFunction],
+                "anonymousPaths": Object {
+                  "isAnonymous": [MockFunction],
+                  "register": [MockFunction],
+                },
+                "basePath": BasePath {
+                  "assetsHrefBase": "",
+                  "basePath": "",
+                  "get": [Function],
+                  "prepend": [Function],
+                  "publicBaseUrl": undefined,
+                  "remove": [Function],
+                  "serverBasePath": "",
+                },
+                "delete": [MockFunction],
+                "externalUrl": Object {
+                  "isInternalUrl": [MockFunction],
+                  "validateUrl": [MockFunction],
+                },
+                "fetch": [MockFunction],
+                "get": [MockFunction],
+                "getLoadingCount$": [MockFunction],
+                "head": [MockFunction],
+                "intercept": [MockFunction],
+                "options": [MockFunction],
+                "patch": [MockFunction],
+                "post": [MockFunction],
+                "put": [MockFunction],
+                "staticAssets": Object {
+                  "getPluginAssetHref": [MockFunction],
+                },
+              }
+            }
+            loginAssistanceMessage=""
+            notifications={
+              Object {
+                "showErrorDialog": [MockFunction],
+                "toasts": Object {
+                  "add": [MockFunction],
+                  "addDanger": [MockFunction],
+                  "addError": [MockFunction],
+                  "addInfo": [MockFunction],
+                  "addSuccess": [MockFunction],
+                  "addWarning": [MockFunction],
+                  "get$": [MockFunction],
+                  "remove": [MockFunction],
+                },
+              }
+            }
+            selector={
+              Object {
+                "enabled": false,
+                "providers": Array [
+                  Object {
+                    "name": "basic",
+                    "showInSelector": true,
+                    "type": "basic",
+                    "usesLoginForm": true,
+                  },
+                ],
+              }
+            }
           />
-        }
-      >
-        <EuiFieldPassword
-          aria-required={true}
-          autoComplete="off"
-          data-test-subj="loginPassword"
-          disabled={false}
-          id="password"
-          isInvalid={false}
-          name="password"
-          onChange={[Function]}
-          type="dual"
-          value=""
-        />
-      </EuiFormRow>
-      <EuiSpacer />
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="s"
-        responsive={false}
-      >
-        <EuiFlexItem>
-          <EuiButton
-            color="primary"
-            data-test-subj="loginSubmit"
-            fill={true}
-            fullWidth={true}
-            isDisabled={false}
-            isLoading={false}
-            onClick={[Function]}
-            type="submit"
-          >
-            <MemoizedFormattedMessage
-              defaultMessage="Log in"
-              id="xpack.security.login.basicLoginForm.logInButtonLabel"
-            />
-          </EuiButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </form>
-  </EuiPanel>
-</Fragment>
+        </EuiComponentDefaultsProvider>
+      </EuiThemeProvider>
+    </EuiSystemDefaultsProvider>
+  </EuiCacheProvider>
+</EuiProviderNestedCheck>
 `;
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.scss b/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.scss
deleted file mode 100644
index 028ad4ee3cdfd..0000000000000
--- a/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-.secLoginCard {
-  display: block;
-  box-shadow: none;
-  padding: $euiSize;
-  text-align: left;
-  width: 100%;
-
-  &:hover {
-    .secLoginCard__title {
-      text-decoration: underline;
-    }
-  }
-
-  &:disabled {
-    pointer-events: none;
-  }
-
-  &:not(.secLoginCard-isLoading):disabled {
-    .secLoginCard__title,
-    .secLoginCard__hint {
-      color: $euiColorMediumShade;
-    }
-  }
-
-  &:focus {
-    border-color: transparent;
-    border-radius: $euiBorderRadius;
-
-    @include euiFocusRing;
-
-    .secLoginCard__title {
-      text-decoration: underline;
-    }
-
-    // Make the focus ring clean and without borders
-    + .secLoginCard {
-      border-color: transparent;
-    }
-  }
-
-  + .secLoginCard {
-    border-top: $euiBorderThin;
-  }
-}
-
-.secLoginCard__hint {
-  @include euiFontSizeXS;
-  color: $euiColorDarkShade;
-  margin-top: $euiSizeXS;
-}
-
-.secLoginAssistanceMessage {
-  // This tightens up the layout if message is present
-  margin-top: -($euiSizeXL);
-  padding: 0 $euiSize;
-
-  img {
-    max-width: 100%;
-  }
-}
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.test.tsx b/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.test.tsx
index 7d3a9b22d37ab..b86326fbeedcd 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiCallOut, EuiIcon } from '@elastic/eui';
+import { EuiCallOut, EuiIcon, EuiProvider } from '@elastic/eui';
 import { act } from '@testing-library/react';
 import type { ReactWrapper } from 'enzyme';
 import React from 'react';
@@ -69,9 +69,31 @@ describe('LoginForm', () => {
     const coreStartMock = coreMock.createStart();
     expect(
       shallowWithIntl(
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginAssistanceMessage=""
+            selector={{
+              enabled: false,
+              providers: [
+                { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+              ],
+            }}
+          />
+        </EuiProvider>
+      )
+    ).toMatchSnapshot();
+  });
+
+  it('renders an info message when provided.', () => {
+    const coreStartMock = coreMock.createStart();
+    const wrapper = mountWithIntl(
+      <EuiProvider>
         <LoginForm
           http={coreStartMock.http}
           notifications={coreStartMock.notifications}
+          message={{ type: MessageType.Info, content: 'Hey this is an info message' }}
           loginAssistanceMessage=""
           selector={{
             enabled: false,
@@ -80,23 +102,7 @@ describe('LoginForm', () => {
             ],
           }}
         />
-      )
-    ).toMatchSnapshot();
-  });
-
-  it('renders an info message when provided.', () => {
-    const coreStartMock = coreMock.createStart();
-    const wrapper = mountWithIntl(
-      <LoginForm
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        message={{ type: MessageType.Info, content: 'Hey this is an info message' }}
-        loginAssistanceMessage=""
-        selector={{
-          enabled: false,
-          providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
-        }}
-      />
+      </EuiProvider>
     );
 
     expectPageMode(wrapper, PageMode.Form);
@@ -107,16 +113,20 @@ describe('LoginForm', () => {
   it('renders `Need help?` link if login help text is provided.', () => {
     const coreStartMock = coreMock.createStart();
     const wrapper = mountWithIntl(
-      <LoginForm
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        loginHelp={'**Hey this is a login help message**'}
-        loginAssistanceMessage=""
-        selector={{
-          enabled: false,
-          providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
-        }}
-      />
+      <EuiProvider>
+        <LoginForm
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          loginHelp={'**Hey this is a login help message**'}
+          loginAssistanceMessage=""
+          selector={{
+            enabled: false,
+            providers: [
+              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+            ],
+          }}
+        />
+      </EuiProvider>
     );
 
     expectPageMode(wrapper, PageMode.Form);
@@ -129,15 +139,19 @@ describe('LoginForm', () => {
     coreStartMock.http.post.mockRejectedValue({ response: { status: 401 } });
 
     const wrapper = mountWithIntl(
-      <LoginForm
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        loginAssistanceMessage=""
-        selector={{
-          enabled: false,
-          providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
-        }}
-      />
+      <EuiProvider>
+        <LoginForm
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          loginAssistanceMessage=""
+          selector={{
+            enabled: false,
+            providers: [
+              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+            ],
+          }}
+        />
+      </EuiProvider>
     );
 
     expectPageMode(wrapper, PageMode.Form);
@@ -161,15 +175,19 @@ describe('LoginForm', () => {
     coreStartMock.http.post.mockRejectedValue({ response: { status: 500 } });
 
     const wrapper = mountWithIntl(
-      <LoginForm
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        loginAssistanceMessage=""
-        selector={{
-          enabled: false,
-          providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
-        }}
-      />
+      <EuiProvider>
+        <LoginForm
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          loginAssistanceMessage=""
+          selector={{
+            enabled: false,
+            providers: [
+              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+            ],
+          }}
+        />
+      </EuiProvider>
     );
 
     expectPageMode(wrapper, PageMode.Form);
@@ -196,15 +214,19 @@ describe('LoginForm', () => {
     coreStartMock.http.post.mockResolvedValue({ location: '/some-base-path/app/home#/?_g=()' });
 
     const wrapper = mountWithIntl(
-      <LoginForm
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        loginAssistanceMessage=""
-        selector={{
-          enabled: false,
-          providers: [{ type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true }],
-        }}
-      />
+      <EuiProvider>
+        <LoginForm
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          loginAssistanceMessage=""
+          selector={{
+            enabled: false,
+            providers: [
+              { type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
+            ],
+          }}
+        />
+      </EuiProvider>
     );
 
     expectPageMode(wrapper, PageMode.Form);
@@ -237,16 +259,20 @@ describe('LoginForm', () => {
   it('properly switches to login help', async () => {
     const coreStartMock = coreMock.createStart({ basePath: '/some-base-path' });
     const wrapper = mountWithIntl(
-      <LoginForm
-        http={coreStartMock.http}
-        notifications={coreStartMock.notifications}
-        loginAssistanceMessage=""
-        loginHelp="**some help**"
-        selector={{
-          enabled: false,
-          providers: [{ type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true }],
-        }}
-      />
+      <EuiProvider>
+        <LoginForm
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          loginAssistanceMessage=""
+          loginHelp="**some help**"
+          selector={{
+            enabled: false,
+            providers: [
+              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+            ],
+          }}
+        />
+      </EuiProvider>
     );
 
     expectPageMode(wrapper, PageMode.Form);
@@ -270,53 +296,55 @@ describe('LoginForm', () => {
     it('renders as expected with providers that use login form', async () => {
       const coreStartMock = coreMock.createStart();
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginAssistanceMessage=""
-          selector={{
-            enabled: true,
-            providers: [
-              {
-                type: 'basic',
-                name: 'basic',
-                usesLoginForm: true,
-                hint: 'Basic hint',
-                icon: 'logoElastic',
-                showInSelector: true,
-              },
-              {
-                type: 'saml',
-                name: 'saml1',
-                description: 'Log in w/SAML',
-                usesLoginForm: false,
-                showInSelector: true,
-              },
-              {
-                type: 'pki',
-                name: 'pki1',
-                description: 'Log in w/PKI',
-                hint: 'PKI hint',
-                usesLoginForm: false,
-                showInSelector: true,
-              },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginAssistanceMessage=""
+            selector={{
+              enabled: true,
+              providers: [
+                {
+                  type: 'basic',
+                  name: 'basic',
+                  usesLoginForm: true,
+                  hint: 'Basic hint',
+                  icon: 'logoElastic',
+                  showInSelector: true,
+                },
+                {
+                  type: 'saml',
+                  name: 'saml1',
+                  description: 'Log in w/SAML',
+                  usesLoginForm: false,
+                  showInSelector: true,
+                },
+                {
+                  type: 'pki',
+                  name: 'pki1',
+                  description: 'Log in w/PKI',
+                  hint: 'PKI hint',
+                  usesLoginForm: false,
+                  showInSelector: true,
+                },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectPageMode(wrapper, PageMode.Selector);
 
-      expect(
-        wrapper.find('.secLoginCard').map((card) => {
-          const hint = card.find('.secLoginCard__hint');
-          return {
-            title: card.find('p.secLoginCard__title').text(),
-            hint: hint.exists() ? hint.text() : '',
-            icon: card.find(EuiIcon).props().type,
-          };
-        })
-      ).toEqual([
+      const result = findTestSubject(wrapper, 'loginCard-', '^=').map((card) => {
+        const hint = findTestSubject(card, 'card-hint');
+        return {
+          title: findTestSubject(card, 'card-title').text(),
+          hint: hint.exists() ? hint.text() : '',
+          icon: card.find(EuiIcon).props().type,
+        };
+      });
+
+      expect(result).toEqual([
         { title: 'Log in with basic/basic', hint: 'Basic hint', icon: 'logoElastic' },
         { title: 'Log in w/SAML', hint: '', icon: 'empty' },
         { title: 'Log in w/PKI', hint: 'PKI hint', icon: 'empty' },
@@ -326,45 +354,45 @@ describe('LoginForm', () => {
     it('renders as expected without providers that use login form', async () => {
       const coreStartMock = coreMock.createStart();
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginAssistanceMessage=""
-          selector={{
-            enabled: true,
-            providers: [
-              {
-                type: 'saml',
-                name: 'saml1',
-                description: 'Login w/SAML',
-                hint: 'SAML hint',
-                usesLoginForm: false,
-                showInSelector: true,
-              },
-              {
-                type: 'pki',
-                name: 'pki1',
-                icon: 'some-icon',
-                usesLoginForm: false,
-                showInSelector: true,
-              },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginAssistanceMessage=""
+            selector={{
+              enabled: true,
+              providers: [
+                {
+                  type: 'saml',
+                  name: 'saml1',
+                  description: 'Login w/SAML',
+                  hint: 'SAML hint',
+                  usesLoginForm: false,
+                  showInSelector: true,
+                },
+                {
+                  type: 'pki',
+                  name: 'pki1',
+                  icon: 'some-icon',
+                  usesLoginForm: false,
+                  showInSelector: true,
+                },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectPageMode(wrapper, PageMode.Selector);
-
-      expect(
-        wrapper.find('.secLoginCard').map((card) => {
-          const hint = card.find('.secLoginCard__hint');
-          return {
-            title: card.find('p.secLoginCard__title').text(),
-            hint: hint.exists() ? hint.text() : '',
-            icon: card.find(EuiIcon).props().type,
-          };
-        })
-      ).toEqual([
+      const result = findTestSubject(wrapper, 'loginCard-', '^=').map((card) => {
+        const hint = findTestSubject(card, 'card-hint');
+        return {
+          title: findTestSubject(card, 'card-title').text(),
+          hint: hint.exists() ? hint.text() : '',
+          icon: card.find(EuiIcon).props().type,
+        };
+      });
+      expect(result).toEqual([
         { title: 'Login w/SAML', hint: 'SAML hint', icon: 'empty' },
         { title: 'Log in with pki/pki1', hint: '', icon: 'some-icon' },
       ]);
@@ -382,31 +410,33 @@ describe('LoginForm', () => {
 
       window.location.href = currentURL;
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginAssistanceMessage=""
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
-              {
-                type: 'saml',
-                name: 'saml1',
-                description: 'Login w/SAML',
-                usesLoginForm: false,
-                showInSelector: true,
-              },
-              {
-                type: 'pki',
-                name: 'pki1',
-                description: 'Login w/PKI',
-                usesLoginForm: false,
-                showInSelector: true,
-              },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginAssistanceMessage=""
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+                {
+                  type: 'saml',
+                  name: 'saml1',
+                  description: 'Login w/SAML',
+                  usesLoginForm: false,
+                  showInSelector: true,
+                },
+                {
+                  type: 'pki',
+                  name: 'pki1',
+                  description: 'Login w/PKI',
+                  usesLoginForm: false,
+                  showInSelector: true,
+                },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectPageMode(wrapper, PageMode.Selector);
@@ -439,18 +469,20 @@ describe('LoginForm', () => {
 
       window.location.href = currentURL;
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginAssistanceMessage=""
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
-              { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginAssistanceMessage=""
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+                { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectPageMode(wrapper, PageMode.Selector);
@@ -487,18 +519,20 @@ describe('LoginForm', () => {
 
       window.location.href = currentURL;
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginAssistanceMessage=""
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
-              { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginAssistanceMessage=""
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+                { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectPageMode(wrapper, PageMode.Selector);
@@ -530,18 +564,20 @@ describe('LoginForm', () => {
       const coreStartMock = coreMock.createStart({ basePath: '/some-base-path' });
       window.location.href = currentURL;
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginAssistanceMessage=""
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
-              { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginAssistanceMessage=""
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+                { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectPageMode(wrapper, PageMode.Selector);
@@ -558,19 +594,21 @@ describe('LoginForm', () => {
     it('properly switches to login help', async () => {
       const coreStartMock = coreMock.createStart({ basePath: '/some-base-path' });
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginAssistanceMessage=""
-          loginHelp="**some help**"
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
-              { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginAssistanceMessage=""
+            loginHelp="**some help**"
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+                { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectPageMode(wrapper, PageMode.Selector);
@@ -595,19 +633,21 @@ describe('LoginForm', () => {
     it('properly switches to login form -> login help and back', async () => {
       const coreStartMock = coreMock.createStart({ basePath: '/some-base-path' });
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginAssistanceMessage=""
-          loginHelp="**some help**"
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
-              { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginAssistanceMessage=""
+            loginHelp="**some help**"
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic', usesLoginForm: true, showInSelector: true },
+                { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectPageMode(wrapper, PageMode.Selector);
@@ -645,20 +685,22 @@ describe('LoginForm', () => {
     it('automatically switches to the Login Form mode if provider suggested by the auth provider hint needs it', () => {
       const coreStartMock = coreMock.createStart();
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginHelp={'**Hey this is a login help message**'}
-          loginAssistanceMessage="Need assistance?"
-          authProviderHint="basic1"
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
-              { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginHelp={'**Hey this is a login help message**'}
+            loginAssistanceMessage="Need assistance?"
+            authProviderHint="basic1"
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
+                { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectPageMode(wrapper, PageMode.Form);
@@ -677,20 +719,22 @@ describe('LoginForm', () => {
 
       window.location.href = currentURL;
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginHelp={'**Hey this is a login help message**'}
-          loginAssistanceMessage="Need assistance?"
-          authProviderHint="saml1"
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
-              { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginHelp={'**Hey this is a login help message**'}
+            loginAssistanceMessage="Need assistance?"
+            authProviderHint="saml1"
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
+                { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectAutoLoginOverlay(wrapper);
@@ -721,20 +765,22 @@ describe('LoginForm', () => {
 
       window.location.href = currentURL;
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginHelp={'**Hey this is a login help message**'}
-          loginAssistanceMessage="Need assistance?"
-          authProviderHint="saml1"
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
-              { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: false },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginHelp={'**Hey this is a login help message**'}
+            loginAssistanceMessage="Need assistance?"
+            authProviderHint="saml1"
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
+                { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: false },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectAutoLoginOverlay(wrapper);
@@ -765,20 +811,22 @@ describe('LoginForm', () => {
 
       window.location.href = currentURL;
       const wrapper = mountWithIntl(
-        <LoginForm
-          http={coreStartMock.http}
-          notifications={coreStartMock.notifications}
-          loginHelp={'**Hey this is a login help message**'}
-          loginAssistanceMessage="Need assistance?"
-          authProviderHint="saml1"
-          selector={{
-            enabled: true,
-            providers: [
-              { type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
-              { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
-            ],
-          }}
-        />
+        <EuiProvider>
+          <LoginForm
+            http={coreStartMock.http}
+            notifications={coreStartMock.notifications}
+            loginHelp={'**Hey this is a login help message**'}
+            loginAssistanceMessage="Need assistance?"
+            authProviderHint="saml1"
+            selector={{
+              enabled: true,
+              providers: [
+                { type: 'basic', name: 'basic1', usesLoginForm: true, showInSelector: true },
+                { type: 'saml', name: 'saml1', usesLoginForm: false, showInSelector: true },
+              ],
+            }}
+          />
+        </EuiProvider>
       );
 
       expectAutoLoginOverlay(wrapper);
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.tsx b/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.tsx
index 84e213f64d28e..af8c2d1cbb5f4 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.tsx
+++ b/x-pack/platform/plugins/shared/security/public/authentication/login/components/login_form/login_form.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './login_form.scss';
-
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -15,6 +13,7 @@ import {
   EuiFieldText,
   EuiFlexGroup,
   EuiFlexItem,
+  euiFocusRing,
   EuiFormRow,
   EuiHorizontalRule,
   EuiIcon,
@@ -24,7 +23,9 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  type UseEuiTheme,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { ChangeEvent, FormEvent, MouseEvent } from 'react';
 import React, { Component, Fragment } from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -79,6 +80,56 @@ export enum PageMode {
   LoginHelp,
 }
 
+const cardCss = (theme: UseEuiTheme, isLoading: boolean) => css`
+  display: block;
+  box-shadow: none;
+  padding: ${theme.euiTheme.size.base};
+  text-align: left;
+  width: 100%;
+  &:hover p[data-title] {
+    text-decoration: underline;
+  }
+  &:disabled {
+    pointer-events: none;
+  }
+  /* disabled + not‐loading → fade title & hint */
+  ${!isLoading &&
+  css`
+    &:disabled p[data-title],
+    &:disabled p[data-hint] {
+      color: ${theme.euiTheme.colors.mediumShade};
+    }
+  `}
+  &:focus {
+    border-color: transparent;
+    border-radius: ${theme.euiTheme.border.radius.medium};
+    ${euiFocusRing(theme)}
+    p[data-title] {
+      text-decoration: underline;
+    }
+    + button {
+      border-color: transparent;
+    }
+  }
+  & + button {
+    border-top: ${theme.euiTheme.border.thin};
+  }
+`;
+
+const hintCss = (theme: UseEuiTheme) => css`
+  font-size: ${theme.euiTheme.size.m};
+  color: ${theme.euiTheme.colors.darkShade};
+  margin-top: ${theme.euiTheme.size.xs};
+`;
+
+const assistanceCss = (theme: UseEuiTheme) => css`
+  margin-top: -${theme.euiTheme.size.xl};
+  padding: 0 ${theme.euiTheme.size.base};
+  img {
+    max-width: 100%;
+  }
+`;
+
 export class LoginForm extends Component<LoginFormProps, State> {
   private readonly validator: LoginValidator;
 
@@ -140,7 +191,7 @@ export class LoginForm extends Component<LoginFormProps, State> {
     }
 
     return (
-      <div data-test-subj="loginAssistanceMessage" className="secLoginAssistanceMessage">
+      <div data-test-subj="loginAssistanceMessage" css={(theme) => assistanceCss(theme)}>
         <EuiHorizontalRule size="half" />
         <EuiText size="xs">
           <ReactMarkdown>{this.props.loginAssistanceMessage}</ReactMarkdown>
@@ -288,54 +339,58 @@ export class LoginForm extends Component<LoginFormProps, State> {
   };
 
   private renderSelector = () => {
-    const providers = this.props.selector.providers.filter((provider) => provider.showInSelector);
+    const providers = this.props.selector.providers.filter((p) => p.showInSelector);
     return (
       <EuiPanel data-test-subj="loginSelector" paddingSize="none">
-        {providers.map((provider) => (
-          <button
-            key={provider.name}
-            data-test-subj={`loginCard-${provider.type}/${provider.name}`}
-            disabled={!this.isLoadingState(LoadingStateType.None)}
-            onClick={() =>
-              provider.usesLoginForm
-                ? this.onPageModeChange(PageMode.Form)
-                : this.loginWithSelector({ provider })
-            }
-            className={`secLoginCard ${
-              this.isLoadingState(LoadingStateType.Selector, provider.name)
-                ? 'secLoginCard-isLoading'
-                : ''
-            }`}
-          >
-            <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
-              <EuiFlexItem grow={false}>
-                <EuiIcon size="xl" type={provider.icon ? provider.icon : 'empty'} />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiTitle size="xs" className="secLoginCard__title">
-                  <p>
-                    {provider.description ?? (
-                      <FormattedMessage
-                        id="xpack.security.loginPage.loginProviderDescription"
-                        defaultMessage="Log in with {providerType}/{providerName}"
-                        values={{
-                          providerType: provider.type,
-                          providerName: provider.name,
-                        }}
-                      />
-                    )}
-                  </p>
-                </EuiTitle>
-                {provider.hint ? <p className="secLoginCard__hint">{provider.hint}</p> : null}
-              </EuiFlexItem>
-              {this.isLoadingState(LoadingStateType.Selector, provider.name) ? (
+        {providers.map((provider) => {
+          const loading = this.isLoadingState(LoadingStateType.Selector, provider.name);
+
+          return (
+            <button
+              key={provider.name}
+              data-test-subj={`loginCard-${provider.type}/${provider.name}`}
+              disabled={!this.isLoadingState(LoadingStateType.None)}
+              onClick={() =>
+                provider.usesLoginForm
+                  ? this.onPageModeChange(PageMode.Form)
+                  : this.loginWithSelector({ provider })
+              }
+              css={(theme) => cardCss(theme, loading)}
+            >
+              <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
                 <EuiFlexItem grow={false}>
-                  <EuiLoadingSpinner size="m" />
+                  <EuiIcon size="xl" type={provider.icon ?? 'empty'} />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiTitle size="xs">
+                    <p data-title data-test-subj="card-title">
+                      {provider.description ?? (
+                        <FormattedMessage
+                          id="xpack.security.loginPage.loginProviderDescription"
+                          defaultMessage="Log in with {providerType}/{providerName}"
+                          values={{
+                            providerType: provider.type,
+                            providerName: provider.name,
+                          }}
+                        />
+                      )}
+                    </p>
+                  </EuiTitle>
+                  {provider.hint && (
+                    <p data-hint data-test-subj="card-hint" css={(theme) => hintCss(theme)}>
+                      {provider.hint}
+                    </p>
+                  )}
                 </EuiFlexItem>
-              ) : null}
-            </EuiFlexGroup>
-          </button>
-        ))}
+                {loading && (
+                  <EuiFlexItem grow={false}>
+                    <EuiLoadingSpinner size="m" />
+                  </EuiFlexItem>
+                )}
+              </EuiFlexGroup>
+            </button>
+          );
+        })}
       </EuiPanel>
     );
   };
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/login/login_page.scss b/x-pack/platform/plugins/shared/security/public/authentication/login/login_page.scss
deleted file mode 100644
index aa99fb94c50f7..0000000000000
--- a/x-pack/platform/plugins/shared/security/public/authentication/login/login_page.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.loginWelcome__header {
-  margin-top: calc($euiSizeXXL * 3);
-  position: relative;
-  padding: $euiSize;
-  z-index: 10;
-}
-
-.loginWelcome__logo {
-  margin-bottom: $euiSizeXL;
-  display: inline-block;
-}
-
-.loginWelcome__content {
-  position: relative;
-  margin: auto;
-  max-width: 460px;
-  padding-left: $euiSizeXL;
-  padding-right: $euiSizeXL;
-  z-index: 10;
-
-  &.loginWelcome__contentDisabledForm {
-    max-width: 700px;
-  }
-}
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/login/login_page.tsx b/x-pack/platform/plugins/shared/security/public/authentication/login/login_page.tsx
index c74abe201d24a..a90740b56661a 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/login/login_page.tsx
+++ b/x-pack/platform/plugins/shared/security/public/authentication/login/login_page.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './login_page.scss';
-
 import {
   EuiButton,
   EuiFlexGroup,
@@ -15,9 +13,10 @@ import {
   EuiImage,
   EuiSpacer,
   EuiText,
+  type EuiThemeComputed,
   EuiTitle,
 } from '@elastic/eui';
-import classNames from 'classnames';
+import { css } from '@emotion/react';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import type { Subscription } from 'rxjs';
@@ -138,13 +137,24 @@ export class LoginPage extends Component<Props, State> {
         ? false
         : allowLogin && layout === 'form';
 
-    const contentHeaderClasses = classNames('loginWelcome__content', 'eui-textCenter', {
-      ['loginWelcome__contentDisabledForm']: !loginIsSupported,
-    });
+    const loginWelcomeStyle = (euiTheme: EuiThemeComputed) =>
+      css`
+        position: relative;
+        margin: auto;
+        max-width: 460px;
+        padding-left: ${euiTheme.size.xl};
+        padding-right: ${euiTheme.size.xl};
+        z-index: 10;
+        text-align: center;
+      `;
 
-    const contentBodyClasses = classNames('loginWelcome__content', 'loginWelcome-body', {
-      ['loginWelcome__contentDisabledForm']: !loginIsSupported,
-    });
+    const contentHeaderStyles = (euiTheme: EuiThemeComputed) => [
+      loginWelcomeStyle(euiTheme),
+      !loginIsSupported &&
+        css`
+          max-width: 700px;
+        `,
+    ];
 
     const customLogo = this.state.customBranding?.logo;
     const logo = customLogo ? (
@@ -155,9 +165,16 @@ export class LoginPage extends Component<Props, State> {
     // custom logo needs to be centered
     const logoStyle = customLogo ? { padding: 0 } : {};
     return (
-      <div className="loginWelcome login-form" css={kbnFullScreenBgCss}>
-        <header className="loginWelcome__header">
-          <div className={contentHeaderClasses}>
+      <div data-test-subj="loginForm" css={kbnFullScreenBgCss}>
+        <header
+          css={({ euiTheme }) => css`
+            margin-top: calc(${euiTheme.size.xxl} * 3);
+            position: relative;
+            padding: ${euiTheme.size.base};
+            z-index: 10;
+          `}
+        >
+          <div css={({ euiTheme }) => contentHeaderStyles(euiTheme)}>
             <span className="loginWelcome__logo" style={logoStyle}>
               {logo}
             </span>
@@ -171,7 +188,7 @@ export class LoginPage extends Component<Props, State> {
             </EuiTitle>
           </div>
         </header>
-        <div className={contentBodyClasses}>
+        <div css={({ euiTheme }) => contentHeaderStyles(euiTheme)}>
           <EuiFlexGroup gutterSize="l">
             <EuiFlexItem>
               {this.getLoginForm({
diff --git a/x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap
index dad44270ad7f9..894919621f3a4 100644
--- a/x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/security/public/authentication/overwritten_session/__snapshots__/overwritten_session_page.test.tsx.snap
@@ -2,26 +2,30 @@
 
 exports[`OverwrittenSessionPage renders as expected 1`] = `
 <div
-  class="secAuthenticationStatePage  css-1mxql93-kbnFullScreenBgCss"
+  class="css-1mxql93-kbnFullScreenBgCss"
+  data-test-subj="secAuthenticationStatePage"
 >
   <header
-    class="secAuthenticationStatePage__header"
+    class="css-8720cn-AuthenticationStatePage"
+    data-test-subj="secAuthenticationStatePageHeader"
   >
     <div
-      class="secAuthenticationStatePage__content eui-textCenter"
+      class="css-1a7zelw-AuthenticationStatePage"
+      data-test-subj="secAuthenticationStatePageContent"
     >
       <div
         class="euiSpacer euiSpacer--xxl emotion-euiSpacer-xxl"
       />
       <span
-        class="secAuthenticationStatePage__logo"
+        class="css-18y6396-AuthenticationStatePage"
+        data-test-subj="secAuthenticationStatePageLogo"
       >
         <span
           data-euiicon-type="logoElastic"
         />
       </span>
       <h1
-        class="euiTitle secAuthenticationStatePage__title emotion-euiTitle-l"
+        class="euiTitle emotion-euiTitle-l"
       >
         You previously logged in as a different user.
       </h1>
@@ -31,7 +35,7 @@ exports[`OverwrittenSessionPage renders as expected 1`] = `
     </div>
   </header>
   <div
-    class="secAuthenticationStatePage__content eui-textCenter"
+    class="css-1a7zelw-AuthenticationStatePage"
   >
     <a
       class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-primary"
diff --git a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/edit_role_mapping_page.test.tsx b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/edit_role_mapping_page.test.tsx
index c6e4695f25703..e7eccfe12ff62 100644
--- a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/edit_role_mapping_page.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/edit_role_mapping_page.test.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { EuiProvider } from '@elastic/eui';
 import React from 'react';
 
 import { coreMock, scopedHistoryMock } from '@kbn/core/public/mocks';
@@ -44,17 +45,19 @@ describe('EditRoleMappingPage', () => {
 
     return mountWithIntl(
       <KibanaContextProvider services={coreStart}>
-        <EditRoleMappingPage
-          action="edit"
-          name={name}
-          roleMappingsAPI={roleMappingsAPI}
-          securityFeaturesAPI={securityFeaturesAPI}
-          rolesAPIClient={rolesAPI}
-          notifications={coreStart.notifications}
-          docLinks={coreStart.docLinks}
-          history={history}
-          readOnly={!coreStart.application.capabilities.role_mappings.save}
-        />
+        <EuiProvider>
+          <EditRoleMappingPage
+            action="edit"
+            name={name}
+            roleMappingsAPI={roleMappingsAPI}
+            securityFeaturesAPI={securityFeaturesAPI}
+            rolesAPIClient={rolesAPI}
+            notifications={coreStart.notifications}
+            docLinks={coreStart.docLinks}
+            history={history}
+            readOnly={!coreStart.application.capabilities.role_mappings.save}
+          />
+        </EuiProvider>
       </KibanaContextProvider>
     );
   };
diff --git a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_editor_panel.test.tsx b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_editor_panel.test.tsx
index 21ece31571ae1..0cd40db8ed254 100644
--- a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_editor_panel.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_editor_panel.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiErrorBoundary } from '@elastic/eui';
+import { EuiErrorBoundary, EuiProvider } from '@elastic/eui';
 import React from 'react';
 
 import { coreMock } from '@kbn/core/public/mocks';
@@ -24,7 +24,9 @@ describe('RuleEditorPanel', () => {
     const viewProps = { ...props, docLinks: coreStart.docLinks };
     return mountWithIntl(
       <KibanaContextProvider services={coreStart}>
-        <RuleEditorPanel {...viewProps} />
+        <EuiProvider>
+          <RuleEditorPanel {...viewProps} />
+        </EuiProvider>
       </KibanaContextProvider>
     );
   };
diff --git a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.scss b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.scss
deleted file mode 100644
index de64b80599720..0000000000000
--- a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.secRoleMapping__ruleEditorGroup--even {
-  background-color: $euiColorLightestShade;
-}
-
-.secRoleMapping__ruleEditorGroup--odd {
-  background-color: $euiColorEmptyShade;
-}
\ No newline at end of file
diff --git a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.test.tsx b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.test.tsx
index 3bd34cb00c2a7..a0daf229c2fc4 100644
--- a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.test.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiContextMenuItem } from '@elastic/eui';
+import { EuiContextMenuItem, EuiProvider } from '@elastic/eui';
 import React from 'react';
 
 import { findTestSubject, mountWithIntl, nextTick, shallowWithIntl } from '@kbn/test-jest-helpers';
@@ -16,6 +16,12 @@ import { RuleGroupEditor } from './rule_group_editor';
 import { RuleGroupTitle } from './rule_group_title';
 import { AllRule, AnyRule, ExceptAnyRule, FieldRule } from '../../model';
 
+const shallowWithEuiProvider = (node: React.ReactElement) =>
+  shallowWithIntl(<EuiProvider>{node}</EuiProvider>);
+
+const mountWithEuiProvider = (node: React.ReactElement) =>
+  mountWithIntl(<EuiProvider>{node}</EuiProvider>);
+
 describe('RuleGroupEditor', () => {
   it('renders an empty group', () => {
     const props = {
@@ -25,8 +31,8 @@ describe('RuleGroupEditor', () => {
       onChange: jest.fn(),
       onDelete: jest.fn(),
     };
-    const wrapper = shallowWithIntl(<RuleGroupEditor {...props} />);
-    expect(wrapper.find(RuleGroupEditor)).toHaveLength(0);
+    const wrapper = mountWithEuiProvider(<RuleGroupEditor {...props} />);
+    expect(wrapper.find(RuleGroupEditor)).toHaveLength(1);
     expect(wrapper.find(FieldRuleEditor)).toHaveLength(0);
     expect(wrapper.find(AddRuleButton)).toHaveLength(1);
   });
@@ -39,7 +45,7 @@ describe('RuleGroupEditor', () => {
       onChange: jest.fn(),
       onDelete: jest.fn(),
     };
-    const wrapper = mountWithIntl(<RuleGroupEditor {...props} />);
+    const wrapper = mountWithEuiProvider(<RuleGroupEditor {...props} />);
     expect(wrapper.find(RuleGroupEditor)).toHaveLength(1);
     expect(wrapper.find(FieldRuleEditor)).toHaveLength(1);
     expect(wrapper.find(AddRuleButton)).toHaveLength(1);
@@ -71,7 +77,7 @@ describe('RuleGroupEditor', () => {
       onChange: jest.fn(),
       onDelete: jest.fn(),
     };
-    const wrapper = mountWithIntl(<RuleGroupEditor {...props} />);
+    const wrapper = mountWithEuiProvider(<RuleGroupEditor {...props} />);
     expect(wrapper.find(RuleGroupEditor)).toHaveLength(2);
     expect(wrapper.find(FieldRuleEditor)).toHaveLength(1);
     expect(wrapper.find(AddRuleButton)).toHaveLength(2);
@@ -109,7 +115,7 @@ describe('RuleGroupEditor', () => {
       onChange: jest.fn(),
       onDelete: jest.fn(),
     };
-    const wrapper = mountWithIntl(<RuleGroupEditor {...props} />);
+    const wrapper = mountWithEuiProvider(<RuleGroupEditor {...props} />);
     expect(wrapper.find(RuleGroupEditor)).toHaveLength(2);
     expect(wrapper.find(FieldRuleEditor)).toHaveLength(1);
     expect(wrapper.find(AddRuleButton)).toHaveLength(2);
@@ -142,7 +148,7 @@ describe('RuleGroupEditor', () => {
       onChange: jest.fn(),
       onDelete: jest.fn(),
     };
-    const wrapper = shallowWithIntl(<RuleGroupEditor {...props} />);
+    const wrapper = shallowWithEuiProvider(<RuleGroupEditor {...props} />);
     expect(wrapper.find(AddRuleButton)).toHaveLength(0);
   });
 
@@ -155,7 +161,7 @@ describe('RuleGroupEditor', () => {
       onDelete: jest.fn(),
       readOnly: true,
     };
-    const wrapper = mountWithIntl(<RuleGroupEditor {...props} />);
+    const wrapper = mountWithEuiProvider(<RuleGroupEditor {...props} />);
 
     // Any/all title selectors are read-only
     const ruleGroupTitles = wrapper.find(RuleGroupTitle);
diff --git a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.tsx b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.tsx
index b4a8a029abbb5..f424365cd84a3 100644
--- a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_editor.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './rule_group_editor.scss';
-
 import {
   EuiButtonEmpty,
   EuiFlexGroup,
@@ -14,6 +12,7 @@ import {
   EuiHorizontalRule,
   EuiPanel,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { Component, Fragment } from 'react';
 
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -41,7 +40,11 @@ export class RuleGroupEditor extends Component<Props, {}> {
   public render() {
     return (
       <EuiPanel
-        className={`secRoleMapping__ruleEditorGroup--${this.props.ruleDepth % 2 ? 'odd' : 'even'}`}
+        css={({ euiTheme }) => css`
+          background-color: ${this.props.ruleDepth % 2
+            ? euiTheme.colors.emptyShade
+            : euiTheme.colors.lightestShade};
+        `}
         hasBorder={true}
         hasShadow={false}
       >
diff --git a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_title.tsx b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_title.tsx
index 5b101006c4cd3..b1b889523fec9 100644
--- a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_title.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/rule_group_title.tsx
@@ -32,7 +32,7 @@ const rules = [new AllRule(), new AnyRule()];
 const exceptRules = [new ExceptAllRule(), new ExceptAnyRule()];
 
 export const RuleGroupTitle = (props: Props) => {
-  if (props.readOnly === undefined) props.readOnly = false;
+  const readOnly = props.readOnly ?? false;
 
   const [isMenuOpen, setIsMenuOpen] = useState(false);
 
@@ -71,12 +71,12 @@ export const RuleGroupTitle = (props: Props) => {
 
   const ruleButton = (
     <EuiLink
-      disabled={props.readOnly}
+      disabled={readOnly}
       onClick={() => setIsMenuOpen(!isMenuOpen)}
       data-test-subj="ruleGroupTitle"
     >
       {props.rule.getDisplayTitle()}
-      {props.readOnly === false && <EuiIcon type="arrowDown" />}
+      {readOnly === false && <EuiIcon type="arrowDown" />}
     </EuiLink>
   );
 
diff --git a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/visual_rule_editor.test.tsx b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/visual_rule_editor.test.tsx
index 2090e83548643..803d9202fb8cb 100644
--- a/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/visual_rule_editor.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/visual_rule_editor.test.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { EuiProvider } from '@elastic/eui';
 import React from 'react';
 
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
@@ -14,6 +15,9 @@ import { RuleGroupEditor } from './rule_group_editor';
 import { VisualRuleEditor } from './visual_rule_editor';
 import { AllRule, AnyRule, ExceptAllRule, ExceptAnyRule, FieldRule } from '../../model';
 
+const mountWithEuiProvider = (node: React.ReactElement) =>
+  mountWithIntl(<EuiProvider>{node}</EuiProvider>);
+
 describe('VisualRuleEditor', () => {
   it('renders an add rule prompt when no rules are defined', () => {
     const props = {
@@ -22,7 +26,7 @@ describe('VisualRuleEditor', () => {
       onSwitchEditorMode: jest.fn(),
       onChange: jest.fn(),
     };
-    const wrapper = mountWithIntl(<VisualRuleEditor {...props} />);
+    const wrapper = mountWithEuiProvider(<VisualRuleEditor {...props} />);
 
     findTestSubject(wrapper, 'roleMappingsAddRuleButton').simulate('click');
     expect(props.onChange).toHaveBeenCalledTimes(1);
@@ -39,7 +43,7 @@ describe('VisualRuleEditor', () => {
       onSwitchEditorMode: jest.fn(),
       onChange: jest.fn(),
     };
-    const wrapper = mountWithIntl(<VisualRuleEditor {...props} />);
+    const wrapper = mountWithEuiProvider(<VisualRuleEditor {...props} />);
     expect(findTestSubject(wrapper, 'roleMappingsNoRulesDefined')).toHaveLength(1);
     expect(findTestSubject(wrapper, 'roleMappingsRulesTooComplex')).toHaveLength(0);
   });
@@ -51,7 +55,7 @@ describe('VisualRuleEditor', () => {
       onSwitchEditorMode: jest.fn(),
       onChange: jest.fn(),
     };
-    const wrapper = mountWithIntl(<VisualRuleEditor {...props} />);
+    const wrapper = mountWithEuiProvider(<VisualRuleEditor {...props} />);
     findTestSubject(wrapper, 'roleMappingsAddRuleButton').simulate('click');
 
     expect(props.onChange).toHaveBeenCalledTimes(1);
@@ -82,7 +86,7 @@ describe('VisualRuleEditor', () => {
       onSwitchEditorMode: jest.fn(),
       onChange: jest.fn(),
     };
-    const wrapper = mountWithIntl(<VisualRuleEditor {...props} />);
+    const wrapper = mountWithEuiProvider(<VisualRuleEditor {...props} />);
 
     expect(wrapper.find(RuleGroupEditor)).toHaveLength(5);
     expect(wrapper.find(FieldRuleEditor)).toHaveLength(4);
@@ -122,7 +126,7 @@ describe('VisualRuleEditor', () => {
       onSwitchEditorMode: jest.fn(),
       onChange: jest.fn(),
     };
-    const wrapper = mountWithIntl(<VisualRuleEditor {...props} />);
+    const wrapper = mountWithEuiProvider(<VisualRuleEditor {...props} />);
     expect(findTestSubject(wrapper, 'roleMappingsRulesTooComplex')).toHaveLength(1);
   });
 
@@ -135,7 +139,7 @@ describe('VisualRuleEditor', () => {
         onChange: jest.fn(),
         readOnly: true,
       };
-      const wrapper = mountWithIntl(<VisualRuleEditor {...props} />);
+      const wrapper = mountWithEuiProvider(<VisualRuleEditor {...props} />);
 
       expect(findTestSubject(wrapper, 'roleMappingsAddRuleButton')).toHaveLength(0);
     });
@@ -155,7 +159,7 @@ describe('VisualRuleEditor', () => {
         onChange: jest.fn(),
         readOnly: true,
       };
-      const wrapper = mountWithIntl(<VisualRuleEditor {...props} />);
+      const wrapper = mountWithEuiProvider(<VisualRuleEditor {...props} />);
 
       const groupEditors = wrapper.find(RuleGroupEditor);
       expect(groupEditors).toHaveLength(5);
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/__snapshots__/collapsible_panel.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/__snapshots__/collapsible_panel.test.tsx.snap
index 978c2431c905b..45908b9c54e59 100644
--- a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/__snapshots__/collapsible_panel.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/__snapshots__/collapsible_panel.test.tsx.snap
@@ -1,47 +1,2407 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`it renders without blowing up 1`] = `
-<EuiPanel
-  hasBorder={true}
-  hasShadow={false}
->
-  <EuiFlexGroup
-    alignItems="baseline"
-    gutterSize="s"
-    responsive={false}
+<EuiProviderNestedCheck>
+  <EuiCacheProvider
+    cache={
+      Object {
+        "compat": true,
+        "insert": [Function],
+        "inserted": Object {},
+        "key": "css",
+        "nonce": undefined,
+        "registered": Object {},
+        "sheet": StyleSheet {
+          "_insertTag": [Function],
+          "before": null,
+          "container": <head />,
+          "ctr": 0,
+          "insertionPoint": undefined,
+          "isSpeedy": false,
+          "key": "css",
+          "nonce": undefined,
+          "prepend": undefined,
+          "speedy": [Function],
+          "tags": Array [],
+        },
+      }
+    }
   >
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiTitle>
-        <h2>
-          <EuiIcon
-            className="collapsiblePanel__logo"
-            size="xl"
-            type="logoElasticsearch"
-          />
-           
-          Elasticsearch
-        </h2>
-      </EuiTitle>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiLink
-        data-test-subj="showHidePrivilege"
-        onClick={[Function]}
+    <EuiSystemDefaultsProvider>
+      <EuiThemeProvider
+        theme={
+          Object {
+            "animation": Object {
+              "bounce": "cubic-bezier(.34, 1.61, .7, 1)",
+              "extraFast": "90ms",
+              "extraSlow": "500ms",
+              "fast": "150ms",
+              "normal": "250ms",
+              "resistance": "cubic-bezier(.694, .0482, .335, 1)",
+              "slow": "350ms",
+            },
+            "base": 16,
+            "border": Object {
+              "color": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "colors.borderBaseSubdued",
+                ],
+              },
+              "editable": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "border.width",
+                  "border.color",
+                ],
+              },
+              "radius": Object {
+                "medium": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [],
+                },
+                "small": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [],
+                },
+              },
+              "thick": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "border.width",
+                  "border.color",
+                ],
+              },
+              "thin": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "border.width",
+                  "border.color",
+                ],
+              },
+              "width": Object {
+                "thick": "2px",
+                "thin": "1px",
+              },
+            },
+            "breakpoint": Object {
+              "l": 992,
+              "m": 768,
+              "s": 575,
+              "xl": 1200,
+              "xs": 0,
+            },
+            "colors": Object {
+              "DARK": Object {
+                "accent": "#EE72A6",
+                "accentSecondary": "#16C5C0",
+                "accentText": "#EE72A6",
+                "backgroundBaseAccent": "#351725",
+                "backgroundBaseAccentSecondary": "#03282B",
+                "backgroundBaseDanger": "#351721",
+                "backgroundBaseDisabled": "#1D2A3E",
+                "backgroundBaseFormsControlDisabled": "#2B394F",
+                "backgroundBaseFormsPrepend": "#243147",
+                "backgroundBaseHighlighted": "#172336",
+                "backgroundBaseInteractiveHover": "rgba(255,255,255, 0.08)",
+                "backgroundBaseInteractiveOverlay": "rgba(43,57,79, 0.7)",
+                "backgroundBaseInteractiveSelect": "#0D2F5E",
+                "backgroundBaseInteractiveSelectHover": "#123778",
+                "backgroundBaseNeutral": "#002938",
+                "backgroundBasePlain": "#0B1628",
+                "backgroundBasePrimary": "#0A2342",
+                "backgroundBaseRisk": "#361D18",
+                "backgroundBaseSkeletonEdge": "rgba(255,255,255, 0.16)",
+                "backgroundBaseSkeletonMiddle": "rgba(255,255,255, 0.08)",
+                "backgroundBaseSubdued": "#07101F",
+                "backgroundBaseSuccess": "#092A26",
+                "backgroundBaseWarning": "#2C2721",
+                "backgroundFilledAccent": "#EE72A6",
+                "backgroundFilledAccentSecondary": "#16C5C0",
+                "backgroundFilledDanger": "#F6726A",
+                "backgroundFilledNeutral": "#63C8E3",
+                "backgroundFilledPrimary": "#61A2FF",
+                "backgroundFilledRisk": "#FF995E",
+                "backgroundFilledSuccess": "#24C292",
+                "backgroundFilledText": "#8E9FBC",
+                "backgroundFilledWarning": "#FACB3D",
+                "backgroundLightAccent": "#481E32",
+                "backgroundLightAccentSecondary": "#023436",
+                "backgroundLightDanger": "#491D27",
+                "backgroundLightNeutral": "#003447",
+                "backgroundLightPrimary": "#0D2F5E",
+                "backgroundLightRisk": "#4A221C",
+                "backgroundLightSuccess": "#0D362B",
+                "backgroundLightText": "#2B394F",
+                "backgroundLightWarning": "#3D3014",
+                "backgroundTransparent": "transparent",
+                "backgroundTransparentAccent": "#351725",
+                "backgroundTransparentAccentSecondary": "#351725",
+                "backgroundTransparentDanger": "#351721",
+                "backgroundTransparentHighlighted": "#07101F",
+                "backgroundTransparentNeutral": "#002938",
+                "backgroundTransparentPlain": "#0B1628",
+                "backgroundTransparentPrimary": "#0A2342",
+                "backgroundTransparentRisk": "#361D18",
+                "backgroundTransparentSubdued": "#07101F",
+                "backgroundTransparentSuccess": "#092A26",
+                "backgroundTransparentWarning": "#2C2721",
+                "body": "#07101F",
+                "borderBaseAccent": "#5E2140",
+                "borderBaseAccentSecondary": "#044949",
+                "borderBaseDanger": "#5E2129",
+                "borderBaseDisabled": "#485975",
+                "borderBaseFloating": "#2B394F",
+                "borderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)",
+                "borderBaseFormsControl": "#6A7FA0",
+                "borderBaseNeutral": "#00425C",
+                "borderBasePlain": "#485975",
+                "borderBasePrimary": "#123778",
+                "borderBaseRisk": "#5E281A",
+                "borderBaseSubdued": "#2B394F",
+                "borderBaseSuccess": "#094837",
+                "borderBaseWarning": "#513910",
+                "borderInteractiveFormsHoverDanger": "#EE4C48",
+                "borderInteractiveFormsHoverPlain": "#5A6D8C",
+                "borderStrongAccent": "#EE72A6",
+                "borderStrongAccentSecondary": "#16C5C0",
+                "borderStrongDanger": "#F6726A",
+                "borderStrongNeutral": "#37B8DC",
+                "borderStrongPrimary": "#61A2FF",
+                "borderStrongRisk": "#FF995E",
+                "borderStrongSuccess": "#24C292",
+                "borderStrongText": "#8E9FBC",
+                "borderStrongWarning": "#FACB3D",
+                "danger": "#F6726A",
+                "dangerText": "#F6726A",
+                "darkShade": "#7186A8",
+                "darkestShade": "#CAD3E2",
+                "disabled": "#1D2A3E",
+                "disabledText": "#6A7FA0",
+                "emptyShade": "#0B1628",
+                "fullShade": "#FFFFFF",
+                "highlight": "#1750BA",
+                "lightShade": "#243147",
+                "lightestShade": "#172336",
+                "link": "#61A2FF",
+                "mediumShade": "#516381",
+                "primary": "#61A2FF",
+                "primaryText": "#61A2FF",
+                "severity": Object {
+                  "danger": "#EE4C48",
+                  "neutral": "#B5E5F2",
+                  "risk": "#FF995E",
+                  "success": "#24C292",
+                  "unknown": "#E3E8F2",
+                  "warning": "#FCD883",
+                },
+                "shadow": "#000000",
+                "subduedText": "#8E9FBC",
+                "success": "#24C292",
+                "successText": "#24C292",
+                "text": "#CAD3E2",
+                "textAccent": "#EE72A6",
+                "textAccentSecondary": "#16C5C0",
+                "textDanger": "#F6726A",
+                "textDisabled": "#6A7FA0",
+                "textHeading": "#E3E8F2",
+                "textInverse": "#07101F",
+                "textNeutral": "#37B8DC",
+                "textParagraph": "#CAD3E2",
+                "textPrimary": "#61A2FF",
+                "textRisk": "#FF995E",
+                "textSubdued": "#8E9FBC",
+                "textSuccess": "#24C292",
+                "textWarning": "#FCD883",
+                "title": "#E3E8F2",
+                "vis": Object {
+                  "euiColorVis0": "#16C5C0",
+                  "euiColorVis1": "#A6EDEA",
+                  "euiColorVis2": "#61A2FF",
+                  "euiColorVis3": "#BFDBFF",
+                  "euiColorVis4": "#EE72A6",
+                  "euiColorVis5": "#FFC7DB",
+                  "euiColorVis6": "#F6726A",
+                  "euiColorVis7": "#FFC9C2",
+                  "euiColorVis8": "#EAAE01",
+                  "euiColorVis9": "#FCD883",
+                  "euiColorVisBase0": "#F6F9FC",
+                  "euiColorVisBehindText0": "#16C5C0",
+                  "euiColorVisBehindText1": "#A6EDEA",
+                  "euiColorVisBehindText2": "#61A2FF",
+                  "euiColorVisBehindText3": "#BFDBFF",
+                  "euiColorVisBehindText4": "#EE72A6",
+                  "euiColorVisBehindText5": "#FFC7DB",
+                  "euiColorVisBehindText6": "#F6726A",
+                  "euiColorVisBehindText7": "#FFC9C2",
+                  "euiColorVisBehindText8": "#EAAE01",
+                  "euiColorVisBehindText9": "#FCD883",
+                  "euiColorVisComplementary0": "#61A2FF",
+                  "euiColorVisComplementary1": "#EAAE01",
+                  "euiColorVisCool0": "#E8F1FF",
+                  "euiColorVisCool1": "#A3CBFF",
+                  "euiColorVisCool2": "#61A2FF",
+                  "euiColorVisDanger0": "#F6726A",
+                  "euiColorVisDanger1": "#FFC9C2",
+                  "euiColorVisGrey0": "#CAD3E2",
+                  "euiColorVisGrey1": "#8E9FBC",
+                  "euiColorVisGrey2": "#5A6D8C",
+                  "euiColorVisGrey3": "#1D2A3E",
+                  "euiColorVisNeutral0": "#37B8DC",
+                  "euiColorVisNeutral1": "#B5E5F2",
+                  "euiColorVisRisk0": "#FC8544",
+                  "euiColorVisRisk1": "#FFCDA1",
+                  "euiColorVisSuccess0": "#24C292",
+                  "euiColorVisSuccess1": "#AEE8D2",
+                  "euiColorVisText0": "#16C5C0",
+                  "euiColorVisText1": "#A6EDEA",
+                  "euiColorVisText2": "#61A2FF",
+                  "euiColorVisText3": "#BFDBFF",
+                  "euiColorVisText4": "#EE72A6",
+                  "euiColorVisText5": "#FFC7DB",
+                  "euiColorVisText6": "#F6726A",
+                  "euiColorVisText7": "#FFC9C2",
+                  "euiColorVisText8": "#EAAE01",
+                  "euiColorVisText9": "#FCD883",
+                  "euiColorVisWarm0": "#FFE8E5",
+                  "euiColorVisWarm1": "#FFB5AD",
+                  "euiColorVisWarm2": "#F6726A",
+                  "euiColorVisWarning0": "#EAAE01",
+                  "euiColorVisWarning1": "#FCD883",
+                },
+                "warning": "#FACB3D",
+                "warningText": "#FCD883",
+              },
+              "LIGHT": Object {
+                "accent": "#BC1E70",
+                "accentSecondary": "#008B87",
+                "accentText": "#A11262",
+                "backgroundBaseAccent": "#FFEBF5",
+                "backgroundBaseAccentSecondary": "#E2F9F7",
+                "backgroundBaseDanger": "#FFE8E5",
+                "backgroundBaseDisabled": "#ECF1F9",
+                "backgroundBaseFormsControlDisabled": "#CAD3E2",
+                "backgroundBaseFormsPrepend": "#ECF1F9",
+                "backgroundBaseHighlighted": "#F6F9FC",
+                "backgroundBaseInteractiveHover": "rgba(23,80,186, 0.04)",
+                "backgroundBaseInteractiveOverlay": "rgba(72,89,117, 0.7)",
+                "backgroundBaseInteractiveSelect": "#E8F1FF",
+                "backgroundBaseInteractiveSelectHover": "#D9E8FF",
+                "backgroundBaseNeutral": "#E5F6FA",
+                "backgroundBasePlain": "#FFFFFF",
+                "backgroundBasePrimary": "#E8F1FF",
+                "backgroundBaseRisk": "#FFEDD6",
+                "backgroundBaseSkeletonEdge": "rgba(72,89,117, 0.16)",
+                "backgroundBaseSkeletonMiddle": "rgba(72,89,117, 0.04)",
+                "backgroundBaseSubdued": "#F6F9FC",
+                "backgroundBaseSuccess": "#E2F8F0",
+                "backgroundBaseWarning": "#FDF3D8",
+                "backgroundFilledAccent": "#BC1E70",
+                "backgroundFilledAccentSecondary": "#008B87",
+                "backgroundFilledDanger": "#C61E25",
+                "backgroundFilledNeutral": "#1C8CB5",
+                "backgroundFilledPrimary": "#0B64DD",
+                "backgroundFilledRisk": "#ED6723",
+                "backgroundFilledSuccess": "#008A5E",
+                "backgroundFilledText": "#5A6D8C",
+                "backgroundFilledWarning": "#FACB3D",
+                "backgroundLightAccent": "#FDDDE9",
+                "backgroundLightAccentSecondary": "#C9F3F0",
+                "backgroundLightDanger": "#FDDDD8",
+                "backgroundLightNeutral": "#CFEEF7",
+                "backgroundLightPrimary": "#D9E8FF",
+                "backgroundLightRisk": "#FFDEBF",
+                "backgroundLightSuccess": "#C9F3E3",
+                "backgroundLightText": "#E3E8F2",
+                "backgroundLightWarning": "#FDE9B5",
+                "backgroundTransparent": "transparent",
+                "backgroundTransparentAccent": "#FFEBF5",
+                "backgroundTransparentAccentSecondary": "#E2F9F7",
+                "backgroundTransparentDanger": "#FFE8E5",
+                "backgroundTransparentHighlighted": "#ECF1F9",
+                "backgroundTransparentNeutral": "#E5F6FA",
+                "backgroundTransparentPlain": "#ECF1F9",
+                "backgroundTransparentPrimary": "#E8F1FF",
+                "backgroundTransparentRisk": "#FFEDD6",
+                "backgroundTransparentSubdued": "#ECF1F9",
+                "backgroundTransparentSuccess": "#E2F8F0",
+                "backgroundTransparentWarning": "#FDF3D8",
+                "body": "#F6F9FC",
+                "borderBaseAccent": "#FFC7DB",
+                "borderBaseAccentSecondary": "#A6EDEA",
+                "borderBaseDanger": "#FFC9C2",
+                "borderBaseDisabled": "#CAD3E2",
+                "borderBaseFloating": "transparent",
+                "borderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)",
+                "borderBaseFormsControl": "#8E9FBC",
+                "borderBaseNeutral": "#B5E5F2",
+                "borderBasePlain": "#CAD3E2",
+                "borderBasePrimary": "#BFDBFF",
+                "borderBaseRisk": "#FFCDA1",
+                "borderBaseSubdued": "#E3E8F2",
+                "borderBaseSuccess": "#AEE8D2",
+                "borderBaseWarning": "#FCD883",
+                "borderInteractiveFormsHoverDanger": "#DA3737",
+                "borderInteractiveFormsHoverPlain": "#B4C1D5",
+                "borderStrongAccent": "#BC1E70",
+                "borderStrongAccentSecondary": "#008B87",
+                "borderStrongDanger": "#C61E25",
+                "borderStrongNeutral": "#19799F",
+                "borderStrongPrimary": "#0B64DD",
+                "borderStrongRisk": "#C24411",
+                "borderStrongSuccess": "#008A5E",
+                "borderStrongText": "#5A6D8C",
+                "borderStrongWarning": "#966B03",
+                "danger": "#C61E25",
+                "dangerText": "#A71627",
+                "darkShade": "#5A6D8C",
+                "darkestShade": "#2B394F",
+                "disabled": "#E3E8F2",
+                "disabledText": "#6A7FA0",
+                "emptyShade": "#FFFFFF",
+                "fullShade": "#07101F",
+                "highlight": "#E8F1FF",
+                "lightShade": "#CAD3E2",
+                "lightestShade": "#ECF1F9",
+                "link": "#1750BA",
+                "mediumShade": "#8E9FBC",
+                "primary": "#0B64DD",
+                "primaryText": "#1750BA",
+                "severity": Object {
+                  "danger": "#EE4C48",
+                  "neutral": "#B5E5F2",
+                  "risk": "#FF995E",
+                  "success": "#24C292",
+                  "unknown": "#E3E8F2",
+                  "warning": "#FCD883",
+                },
+                "shadow": "#000000",
+                "subduedText": "#516381",
+                "success": "#008A5E",
+                "successText": "#09724D",
+                "text": "#1D2A3E",
+                "textAccent": "#A11262",
+                "textAccentSecondary": "#047471",
+                "textDanger": "#A71627",
+                "textDisabled": "#798EAF",
+                "textHeading": "#111C2C",
+                "textInverse": "#FFFFFF",
+                "textNeutral": "#0F658A",
+                "textParagraph": "#1D2A3E",
+                "textPrimary": "#1750BA",
+                "textRisk": "#9E3A16",
+                "textSubdued": "#516381",
+                "textSuccess": "#09724D",
+                "textWarning": "#825803",
+                "title": "#111C2C",
+                "vis": Object {
+                  "euiColorVis0": "#16C5C0",
+                  "euiColorVis1": "#A6EDEA",
+                  "euiColorVis2": "#61A2FF",
+                  "euiColorVis3": "#BFDBFF",
+                  "euiColorVis4": "#EE72A6",
+                  "euiColorVis5": "#FFC7DB",
+                  "euiColorVis6": "#F6726A",
+                  "euiColorVis7": "#FFC9C2",
+                  "euiColorVis8": "#EAAE01",
+                  "euiColorVis9": "#FCD883",
+                  "euiColorVisBase0": "#F6F9FC",
+                  "euiColorVisBehindText0": "#16C5C0",
+                  "euiColorVisBehindText1": "#A6EDEA",
+                  "euiColorVisBehindText2": "#61A2FF",
+                  "euiColorVisBehindText3": "#BFDBFF",
+                  "euiColorVisBehindText4": "#EE72A6",
+                  "euiColorVisBehindText5": "#FFC7DB",
+                  "euiColorVisBehindText6": "#F6726A",
+                  "euiColorVisBehindText7": "#FFC9C2",
+                  "euiColorVisBehindText8": "#EAAE01",
+                  "euiColorVisBehindText9": "#FCD883",
+                  "euiColorVisComplementary0": "#61A2FF",
+                  "euiColorVisComplementary1": "#EAAE01",
+                  "euiColorVisCool0": "#E8F1FF",
+                  "euiColorVisCool1": "#A3CBFF",
+                  "euiColorVisCool2": "#61A2FF",
+                  "euiColorVisDanger0": "#F6726A",
+                  "euiColorVisDanger1": "#FFC9C2",
+                  "euiColorVisGrey0": "#CAD3E2",
+                  "euiColorVisGrey1": "#8E9FBC",
+                  "euiColorVisGrey2": "#5A6D8C",
+                  "euiColorVisGrey3": "#1D2A3E",
+                  "euiColorVisNeutral0": "#37B8DC",
+                  "euiColorVisNeutral1": "#B5E5F2",
+                  "euiColorVisRisk0": "#FC8544",
+                  "euiColorVisRisk1": "#FFCDA1",
+                  "euiColorVisSuccess0": "#24C292",
+                  "euiColorVisSuccess1": "#AEE8D2",
+                  "euiColorVisText0": "#065B58",
+                  "euiColorVisText1": "#047471",
+                  "euiColorVisText2": "#154399",
+                  "euiColorVisText3": "#0B64DD",
+                  "euiColorVisText4": "#A11262",
+                  "euiColorVisText5": "#D13680",
+                  "euiColorVisText6": "#A71627",
+                  "euiColorVisText7": "#DA3737",
+                  "euiColorVisText8": "#6A4906",
+                  "euiColorVisText9": "#966B03",
+                  "euiColorVisWarm0": "#FFE8E5",
+                  "euiColorVisWarm1": "#FFB5AD",
+                  "euiColorVisWarm2": "#F6726A",
+                  "euiColorVisWarning0": "#EAAE01",
+                  "euiColorVisWarning1": "#FCD883",
+                },
+                "warning": "#FACB3D",
+                "warningText": "#825803",
+              },
+              "ghost": "#FFFFFF",
+              "ink": "#07101F",
+              "plainDark": "#07101F",
+              "plainLight": "#FFFFFF",
+            },
+            "components": Object {
+              "DARK": Object {
+                "badgeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBackgroundSubdued": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBorderColorHollow": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "badgeIconButtonBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "bottomBarBackground": "#07101F",
+                "breadcrumbsApplicationBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "breadcrumbsApplicationColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "buttonGroupBackgroundDisabledSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "buttonGroupBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupBorderColorSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupFocusColor": "#FFFFFF",
+                "codeAdditionColor": "#16C5C0",
+                "codeAttributeColor": "inherit",
+                "codeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "codeBackgroundSelected": "inherit",
+                "codeColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textParagraph",
+                  ],
+                },
+                "codeCommentColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeDeletionColor": "#F6726A",
+                "codeFunctionTitleColor": "inherit",
+                "codeInlineBackground": "#172336",
+                "codeInlineCodeKeywordColor": "#B084F5",
+                "codeInlineColor": "#B084F5",
+                "codeKeywordColor": "#B084F5",
+                "codeMetaColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeNameColor": "#61A2FF",
+                "codeNumberColor": "#16C5C0",
+                "codeParamsColor": "inherit",
+                "codeSectionColor": "#F6726A",
+                "codeSelectorClassColor": "inherit",
+                "codeSelectorColor": "inherit",
+                "codeSelectorIdColor": "inherit",
+                "codeStringColor": "#EE72A6",
+                "codeSymbolColor": "#F6726A",
+                "codeTagColor": "#61A2FF",
+                "codeTitleColor": "#EAAE01",
+                "codeTypeColor": "#61A2FF",
+                "collapsibleNavGroupBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "collapsibleNavGroupBackgroundDark": "#07101F",
+                "dataGridBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dataGridRowBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "dataGridRowBackgroundMarked": "#2C2721",
+                "dataGridRowBackgroundMarkedHover": "#3D3014",
+                "dataGridRowBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowBorderActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "dataGridRowBorderHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongText",
+                  ],
+                },
+                "dataGridRowBorderMarked": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongWarning",
+                  ],
+                },
+                "dataGridRowStripesBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowStripesBackgroundHover": "#1D2A3E",
+                "dataGridRowStripesBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowStripesBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStriped": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStripedHover": "#1D2A3E",
+                "dataGridVerticalLineBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dragDropDraggingBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "dragDropDraggingOverBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightSuccess",
+                  ],
+                },
+                "filterButtonBadgeBackgroundHover": "#3F4F69",
+                "filterSelectItemBackgroundFocusDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "flyoutCloseButtonInsideBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "flyoutFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "headerBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "headerDarkBackground": "#0B1628",
+                "headerDarkSearchBorderColor": "#485975",
+                "headerDarkSectionItemBackgroundFocus": "#0A2342",
+                "keyPadMenuItemBackgroundDisabledSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "listGroupItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundSubduedActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "loadingChartMonoBackground0": "#384861",
+                "loadingChartMonoBackground1": "#485975",
+                "loadingChartMonoBackground2": "#5A6D8C",
+                "loadingChartMonoBackground3": "#6A7FA0",
+                "loadingSpinnerBorder": "#485975",
+                "loadingSpinnerHighlight": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "markBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightPrimary",
+                  ],
+                },
+                "markdownFormatTableBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "overlayMaskBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveOverlay",
+                  ],
+                },
+                "overlayMaskBackgroundHighContrast": "rgba(17,28,44, 0.9)",
+                "popoverFooterBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "popoverPanelBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "scrollbarTrackColor": "#0B1628",
+                "selectableListItemBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "sideNavItemEmphasizedBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "skeletonBackgroundSkeletonMiddleHighContrast": "rgba(255,255,255, 0.3)",
+                "superDatePickerBackgroundSuccees": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "switchBackgroundOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchBackgroundOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchCompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchIconDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textDisabled",
+                  ],
+                },
+                "switchMiniBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchThumbBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "switchThumbBorderOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchThumbBorderOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchUncompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "tableCellSortableIconColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "tableRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowBackgroundMarked": "#2C2721",
+                "tableRowBackgroundMarkedHover": "#3D3014",
+                "tableRowBackgroundSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "tableRowBackgroundSelectedHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundFocus": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tooltipBackground": "#07101F",
+                "tooltipBorder": "#2B394F",
+                "tooltipBorderFloating": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseFloating",
+                  ],
+                },
+                "tourFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "treeViewItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+              },
+              "LIGHT": Object {
+                "badgeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBackgroundSubdued": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBorderColorHollow": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "badgeIconButtonBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "bottomBarBackground": "#07101F",
+                "breadcrumbsApplicationBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "breadcrumbsApplicationColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "buttonGroupBackgroundDisabledSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "buttonGroupBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupBorderColorSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupFocusColor": "#07101F",
+                "codeAdditionColor": "#047471",
+                "codeAttributeColor": "inherit",
+                "codeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "codeBackgroundSelected": "inherit",
+                "codeColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textParagraph",
+                  ],
+                },
+                "codeCommentColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeDeletionColor": "#A71627",
+                "codeFunctionTitleColor": "inherit",
+                "codeInlineBackground": "#ECF1F9",
+                "codeInlineCodeKeywordColor": "#6B3C9F",
+                "codeInlineColor": "#6B3C9F",
+                "codeKeywordColor": "#1750BA",
+                "codeMetaColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeNameColor": "#1750BA",
+                "codeNumberColor": "#047471",
+                "codeParamsColor": "inherit",
+                "codeSectionColor": "#A71627",
+                "codeSelectorClassColor": "inherit",
+                "codeSelectorColor": "inherit",
+                "codeSelectorIdColor": "inherit",
+                "codeStringColor": "#A11262",
+                "codeSymbolColor": "#A71627",
+                "codeTagColor": "#1750BA",
+                "codeTitleColor": "#825803",
+                "codeTypeColor": "#1750BA",
+                "collapsibleNavGroupBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "collapsibleNavGroupBackgroundDark": "#07101F",
+                "dataGridBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dataGridRowBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "dataGridRowBackgroundMarked": "#FDF3D8",
+                "dataGridRowBackgroundMarkedHover": "#FDE9B5",
+                "dataGridRowBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowBorderActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "dataGridRowBorderHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongText",
+                  ],
+                },
+                "dataGridRowBorderMarked": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongWarning",
+                  ],
+                },
+                "dataGridRowStripesBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowStripesBackgroundHover": "#ECF1F9",
+                "dataGridRowStripesBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowStripesBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStriped": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStripedHover": "#ECF1F9",
+                "dataGridVerticalLineBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dragDropDraggingBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "dragDropDraggingOverBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightSuccess",
+                  ],
+                },
+                "filterButtonBadgeBackgroundHover": "#D6DDEA",
+                "filterSelectItemBackgroundFocusDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "flyoutCloseButtonInsideBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "flyoutFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "headerBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "headerDarkBackground": "#0B1628",
+                "headerDarkSearchBorderColor": "#485975",
+                "headerDarkSectionItemBackgroundFocus": "#0A2342",
+                "keyPadMenuItemBackgroundDisabledSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "listGroupItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundSubduedActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "loadingChartMonoBackground0": "#E3E8F2",
+                "loadingChartMonoBackground1": "#CAD3E2",
+                "loadingChartMonoBackground2": "#B4C1D5",
+                "loadingChartMonoBackground3": "#A2B1C9",
+                "loadingSpinnerBorder": "#CAD3E2",
+                "loadingSpinnerHighlight": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "markBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightPrimary",
+                  ],
+                },
+                "markdownFormatTableBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "overlayMaskBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveOverlay",
+                  ],
+                },
+                "overlayMaskBackgroundHighContrast": "rgba(17,28,44, 0.9)",
+                "popoverFooterBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "popoverPanelBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "scrollbarTrackColor": "#ECF1F9",
+                "selectableListItemBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "sideNavItemEmphasizedBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "skeletonBackgroundSkeletonMiddleHighContrast": "rgba(72,89,117, 0.04)",
+                "superDatePickerBackgroundSuccees": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "switchBackgroundOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchBackgroundOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchCompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchIconDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textDisabled",
+                  ],
+                },
+                "switchMiniBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchThumbBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "switchThumbBorderOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchThumbBorderOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchUncompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "tableCellSortableIconColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "tableRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowBackgroundMarked": "#FDF3D8",
+                "tableRowBackgroundMarkedHover": "#FDE9B5",
+                "tableRowBackgroundSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "tableRowBackgroundSelectedHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundFocus": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "tooltipBackground": "#07101F",
+                "tooltipBorder": "#2B394F",
+                "tooltipBorderFloating": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseFloating",
+                  ],
+                },
+                "tourFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "treeViewItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+              },
+              "buttons": Object {
+                "DARK": Object {
+                  "backgroundAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccent",
+                    ],
+                  },
+                  "backgroundAccentActive": "rgba(229,74,145, 0.2)",
+                  "backgroundAccentHover": "rgba(229,74,145, 0.16)",
+                  "backgroundAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccentSecondary",
+                    ],
+                  },
+                  "backgroundAccentSecondaryActive": "rgba(0,176,170, 0.2)",
+                  "backgroundAccentSecondaryHover": "rgba(0,176,170, 0.16)",
+                  "backgroundDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightDanger",
+                    ],
+                  },
+                  "backgroundDangerActive": "rgba(238,76,72, 0.2)",
+                  "backgroundDangerHover": "rgba(238,76,72, 0.16)",
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundEmptyAccentActive": "rgba(229,74,145, 0.2)",
+                  "backgroundEmptyAccentHover": "rgba(229,74,145, 0.16)",
+                  "backgroundEmptyAccentSecondaryActive": "rgba(0,176,170, 0.2)",
+                  "backgroundEmptyAccentSecondaryHover": "rgba(0,176,170, 0.16)",
+                  "backgroundEmptyDangerActive": "rgba(238,76,72, 0.2)",
+                  "backgroundEmptyDangerHover": "rgba(238,76,72, 0.16)",
+                  "backgroundEmptyNeutralActive": "rgba(13,161,201, 0.2)",
+                  "backgroundEmptyNeutralHover": "rgba(13,161,201, 0.16)",
+                  "backgroundEmptyPrimaryActive": "rgba(55,136,255, 0.2)",
+                  "backgroundEmptyPrimaryHover": "rgba(55,136,255, 0.16)",
+                  "backgroundEmptyRiskActive": "rgba(252,133,68, 0.16)",
+                  "backgroundEmptyRiskHover": "rgba(252,133,68, 0.12)",
+                  "backgroundEmptySuccessActive": "rgba(4,174,126, 0.2)",
+                  "backgroundEmptySuccessHover": "rgba(4,174,126, 0.16)",
+                  "backgroundEmptyTextActive": "rgba(255,255,255, 0.16)",
+                  "backgroundEmptyTextHover": "rgba(255,255,255, 0.12)",
+                  "backgroundEmptyWarningActive": "rgba(234,174,1, 0.16)",
+                  "backgroundEmptyWarningHover": "rgba(234,174,1, 0.12)",
+                  "backgroundFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccent",
+                    ],
+                  },
+                  "backgroundFilledAccentActive": "#D13680",
+                  "backgroundFilledAccentHover": "#E54A91",
+                  "backgroundFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccentSecondary",
+                    ],
+                  },
+                  "backgroundFilledAccentSecondaryActive": "#009E99",
+                  "backgroundFilledAccentSecondaryHover": "#00B0AA",
+                  "backgroundFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledDanger",
+                    ],
+                  },
+                  "backgroundFilledDangerActive": "#DA3737",
+                  "backgroundFilledDangerHover": "#EE4C48",
+                  "backgroundFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledNeutral",
+                    ],
+                  },
+                  "backgroundFilledNeutralActive": "#1C8CB5",
+                  "backgroundFilledNeutralHover": "#0dA1C9",
+                  "backgroundFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledPrimary",
+                    ],
+                  },
+                  "backgroundFilledPrimaryActive": "#2476F0",
+                  "backgroundFilledPrimaryHover": "#3788FF",
+                  "backgroundFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledRisk",
+                    ],
+                  },
+                  "backgroundFilledRiskActive": "#ED6723",
+                  "backgroundFilledRiskHover": "#FC8544",
+                  "backgroundFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledSuccess",
+                    ],
+                  },
+                  "backgroundFilledSuccessActive": "#00996B",
+                  "backgroundFilledSuccessHover": "#04AE7E",
+                  "backgroundFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledText",
+                    ],
+                  },
+                  "backgroundFilledTextActive": "#6A7FA0",
+                  "backgroundFilledTextHover": "#798EAF",
+                  "backgroundFilledWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledWarning",
+                    ],
+                  },
+                  "backgroundFilledWarningActive": "#EAAE01",
+                  "backgroundFilledWarningHover": "#F5BC00",
+                  "backgroundNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightNeutral",
+                    ],
+                  },
+                  "backgroundNeutralActive": "rgba(13,161,201, 0.2)",
+                  "backgroundNeutralHover": "rgba(13,161,201, 0.16)",
+                  "backgroundPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightPrimary",
+                    ],
+                  },
+                  "backgroundPrimaryActive": "rgba(55,136,255, 0.2)",
+                  "backgroundPrimaryHover": "rgba(55,136,255, 0.16)",
+                  "backgroundRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightRisk",
+                    ],
+                  },
+                  "backgroundRiskActive": "rgba(252,133,68, 0.16)",
+                  "backgroundRiskHover": "rgba(252,133,68, 0.12)",
+                  "backgroundSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightSuccess",
+                    ],
+                  },
+                  "backgroundSuccessActive": "rgba(4,174,126, 0.2)",
+                  "backgroundSuccessHover": "rgba(4,174,126, 0.16)",
+                  "backgroundText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "flags.buttonVariant",
+                      "colors.backgroundBasePlain",
+                      "colors.backgroundLightText",
+                    ],
+                  },
+                  "backgroundTextActive": "rgba(255,255,255, 0.16)",
+                  "backgroundTextHover": "rgba(255,255,255, 0.12)",
+                  "backgroundWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightWarning",
+                    ],
+                  },
+                  "backgroundWarningActive": "rgba(234,174,1, 0.16)",
+                  "backgroundWarningHover": "rgba(234,174,1, 0.12)",
+                  "textColorAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccent",
+                    ],
+                  },
+                  "textColorAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccentSecondary",
+                    ],
+                  },
+                  "textColorDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDanger",
+                    ],
+                  },
+                  "textColorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledWarning": "#6A4906",
+                  "textColorNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textNeutral",
+                    ],
+                  },
+                  "textColorPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textPrimary",
+                    ],
+                  },
+                  "textColorRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textRisk",
+                    ],
+                  },
+                  "textColorSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSuccess",
+                    ],
+                  },
+                  "textColorText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textParagraph",
+                    ],
+                  },
+                  "textColorWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textWarning",
+                    ],
+                  },
+                },
+                "LIGHT": Object {
+                  "backgroundAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccent",
+                    ],
+                  },
+                  "backgroundAccentActive": "rgba(229,74,145, 0.16)",
+                  "backgroundAccentHover": "rgba(229,74,145, 0.12)",
+                  "backgroundAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccentSecondary",
+                    ],
+                  },
+                  "backgroundAccentSecondaryActive": "rgba(0,176,170, 0.16)",
+                  "backgroundAccentSecondaryHover": "rgba(0,176,170, 0.12)",
+                  "backgroundDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightDanger",
+                    ],
+                  },
+                  "backgroundDangerActive": "rgba(238,76,72, 0.16)",
+                  "backgroundDangerHover": "rgba(238,76,72, 0.12)",
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundEmptyAccentActive": "rgba(229,74,145, 0.16)",
+                  "backgroundEmptyAccentHover": "rgba(229,74,145, 0.12)",
+                  "backgroundEmptyAccentSecondaryActive": "rgba(0,176,170, 0.16)",
+                  "backgroundEmptyAccentSecondaryHover": "rgba(0,176,170, 0.12)",
+                  "backgroundEmptyDangerActive": "rgba(238,76,72, 0.16)",
+                  "backgroundEmptyDangerHover": "rgba(238,76,72, 0.12)",
+                  "backgroundEmptyNeutralActive": "rgba(13,161,201, 0.16)",
+                  "backgroundEmptyNeutralHover": "rgba(13,161,201, 0.12)",
+                  "backgroundEmptyPrimaryActive": "rgba(55,136,255, 0.16)",
+                  "backgroundEmptyPrimaryHover": "rgba(55,136,255, 0.12)",
+                  "backgroundEmptyRiskActive": "rgba(252,133,68, 0.2)",
+                  "backgroundEmptyRiskHover": "rgba(252,133,68, 0.16)",
+                  "backgroundEmptySuccessActive": "rgba(4,174,126, 0.16)",
+                  "backgroundEmptySuccessHover": "rgba(4,174,126, 0.12)",
+                  "backgroundEmptyTextActive": "rgba(23,80,186, 0.12)",
+                  "backgroundEmptyTextHover": "rgba(23,80,186, 0.08)",
+                  "backgroundEmptyWarningActive": "rgba(234,174,1, 0.2)",
+                  "backgroundEmptyWarningHover": "rgba(234,174,1, 0.16)",
+                  "backgroundFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccent",
+                    ],
+                  },
+                  "backgroundFilledAccentActive": "#831652",
+                  "backgroundFilledAccentHover": "#A11262",
+                  "backgroundFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccentSecondary",
+                    ],
+                  },
+                  "backgroundFilledAccentSecondaryActive": "#065B58",
+                  "backgroundFilledAccentSecondaryHover": "#047471",
+                  "backgroundFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledDanger",
+                    ],
+                  },
+                  "backgroundFilledDangerActive": "#7F1F27",
+                  "backgroundFilledDangerHover": "#A71627",
+                  "backgroundFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledNeutral",
+                    ],
+                  },
+                  "backgroundFilledNeutralActive": "#055476",
+                  "backgroundFilledNeutralHover": "#0F658A",
+                  "backgroundFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledPrimary",
+                    ],
+                  },
+                  "backgroundFilledPrimaryActive": "#154399",
+                  "backgroundFilledPrimaryHover": "#1750BA",
+                  "backgroundFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledRisk",
+                    ],
+                  },
+                  "backgroundFilledRiskActive": "#C24411",
+                  "backgroundFilledRiskHover": "#DB541B",
+                  "backgroundFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledSuccess",
+                    ],
+                  },
+                  "backgroundFilledSuccessActive": "#0C5A3F",
+                  "backgroundFilledSuccessHover": "#09724D",
+                  "backgroundFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledText",
+                    ],
+                  },
+                  "backgroundFilledTextActive": "#384861",
+                  "backgroundFilledTextHover": "#485975",
+                  "backgroundFilledWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledWarning",
+                    ],
+                  },
+                  "backgroundFilledWarningActive": "#EAAE01",
+                  "backgroundFilledWarningHover": "#F5BC00",
+                  "backgroundNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightNeutral",
+                    ],
+                  },
+                  "backgroundNeutralActive": "rgba(13,161,201, 0.16)",
+                  "backgroundNeutralHover": "rgba(13,161,201, 0.12)",
+                  "backgroundPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightPrimary",
+                    ],
+                  },
+                  "backgroundPrimaryActive": "rgba(55,136,255, 0.16)",
+                  "backgroundPrimaryHover": "rgba(55,136,255, 0.12)",
+                  "backgroundRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightRisk",
+                    ],
+                  },
+                  "backgroundRiskActive": "rgba(252,133,68, 0.2)",
+                  "backgroundRiskHover": "rgba(252,133,68, 0.16)",
+                  "backgroundSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightSuccess",
+                    ],
+                  },
+                  "backgroundSuccessActive": "rgba(4,174,126, 0.16)",
+                  "backgroundSuccessHover": "rgba(4,174,126, 0.12)",
+                  "backgroundText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "flags.buttonVariant",
+                      "colors.backgroundBasePlain",
+                      "colors.backgroundLightText",
+                    ],
+                  },
+                  "backgroundTextActive": "rgba(23,80,186, 0.12)",
+                  "backgroundTextHover": "rgba(23,80,186, 0.08)",
+                  "backgroundWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightWarning",
+                    ],
+                  },
+                  "backgroundWarningActive": "rgba(234,174,1, 0.2)",
+                  "backgroundWarningHover": "rgba(234,174,1, 0.16)",
+                  "textColorAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccent",
+                    ],
+                  },
+                  "textColorAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccentSecondary",
+                    ],
+                  },
+                  "textColorDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDanger",
+                    ],
+                  },
+                  "textColorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledWarning": "#6A4906",
+                  "textColorNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textNeutral",
+                    ],
+                  },
+                  "textColorPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textPrimary",
+                    ],
+                  },
+                  "textColorRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textRisk",
+                    ],
+                  },
+                  "textColorSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSuccess",
+                    ],
+                  },
+                  "textColorText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textParagraph",
+                    ],
+                  },
+                  "textColorWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textWarning",
+                    ],
+                  },
+                },
+              },
+              "forms": Object {
+                "DARK": Object {
+                  "background": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePrimary",
+                    ],
+                  },
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundDropping": "rgba(4,174,126, 0.16)",
+                  "backgroundFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundReadOnly": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "border": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePlain",
+                    ],
+                  },
+                  "borderAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePrimary",
+                    ],
+                  },
+                  "borderAutofilledHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "borderFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverPlain",
+                    ],
+                  },
+                  "borderInvalid": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongDanger",
+                    ],
+                  },
+                  "borderInvalidHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverDanger",
+                    ],
+                  },
+                  "clearButtonBackground": "#5A6D8C",
+                  "colorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "colorHasPlaceholder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSubdued",
+                    ],
+                  },
+                  "controlBackgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsControlDisabled",
+                    ],
+                  },
+                  "controlBackgroundUnselected": "transparent",
+                  "controlBorder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseFormsControl",
+                    ],
+                  },
+                  "controlBorderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "controlBorderSelected": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "iconDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "prependBackground": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsPrepend",
+                    ],
+                  },
+                },
+                "LIGHT": Object {
+                  "background": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePrimary",
+                    ],
+                  },
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundDropping": "rgba(4,174,126, 0.16)",
+                  "backgroundFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundReadOnly": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "border": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePlain",
+                    ],
+                  },
+                  "borderAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePrimary",
+                    ],
+                  },
+                  "borderAutofilledHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "borderFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverPlain",
+                    ],
+                  },
+                  "borderInvalid": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongDanger",
+                    ],
+                  },
+                  "borderInvalidHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverDanger",
+                    ],
+                  },
+                  "clearButtonBackground": "#8E9FBC",
+                  "colorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "colorHasPlaceholder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSubdued",
+                    ],
+                  },
+                  "controlBackgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsControlDisabled",
+                    ],
+                  },
+                  "controlBackgroundUnselected": "transparent",
+                  "controlBorder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseFormsControl",
+                    ],
+                  },
+                  "controlBorderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "controlBorderSelected": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "iconDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "prependBackground": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsPrepend",
+                    ],
+                  },
+                },
+                "maxWidth": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "size.base",
+                  ],
+                },
+              },
+            },
+            "flags": Object {
+              "buttonVariant": "refresh",
+              "formVariant": "refresh",
+              "hasGlobalFocusColor": true,
+              "hasVisColorAdjustment": false,
+            },
+            "focus": Object {
+              "backgroundColor": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "colors.backgroundBaseInteractiveHover",
+                ],
+              },
+              "color": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "colors.textPrimary",
+                ],
+              },
+              "transparency": Object {
+                "DARK": 0.2,
+                "LIGHT": 0.1,
+              },
+              "width": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+            },
+            "font": Object {
+              "baseline": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "base",
+                ],
+              },
+              "body": Object {
+                "scale": "s",
+                "weight": "regular",
+              },
+              "defaultUnits": "rem",
+              "family": "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif",
+              "familyCode": "'Roboto Mono', Menlo, Courier, monospace",
+              "familySerif": "Georgia, Times, Times New Roman, serif",
+              "featureSettings": "'calt' 1, 'kern' 1, 'liga' 1",
+              "lineHeightMultiplier": 1.5,
+              "scale": Object {
+                "l": 1.25,
+                "m": 1,
+                "s": 0.875,
+                "xl": 1.5,
+                "xs": 0.75,
+                "xxl": 1.875,
+                "xxs": 0.6875,
+                "xxxs": 0.5625,
+              },
+              "title": Object {
+                "weight": "bold",
+              },
+              "weight": Object {
+                "bold": 600,
+                "light": 300,
+                "medium": 450,
+                "regular": 400,
+                "semiBold": 500,
+              },
+            },
+            "levels": Object {
+              "content": 0,
+              "flyout": 1000,
+              "header": 1000,
+              "mask": 6000,
+              "maskBelowHeader": 1000,
+              "menu": 2000,
+              "modal": 8000,
+              "navigation": 6000,
+              "toast": 9000,
+            },
+            "overrides": Object {
+              "HCM": Object {
+                "colors": Object {
+                  "LIGHT": Object {
+                    "severity": Object {
+                      "danger": "#EE4C48",
+                      "neutral": "#0dA1C9",
+                      "risk": "#ED6723",
+                      "success": "#00996B",
+                      "unknown": "#798EAF",
+                      "warning": "#AD7E00",
+                    },
+                    "vis": Object {
+                      "euiColorVis0": "#065B58",
+                      "euiColorVis1": "#009E99",
+                      "euiColorVis2": "#154399",
+                      "euiColorVis3": "#2476F0",
+                      "euiColorVis4": "#831652",
+                      "euiColorVis5": "#D13680",
+                      "euiColorVis6": "#7F1F27",
+                      "euiColorVis7": "#DA3737",
+                      "euiColorVis8": "#6A4906",
+                      "euiColorVis9": "#AD7E00",
+                      "euiColorVisBase0": "#F6F9FC",
+                      "euiColorVisBehindText0": "#065B58",
+                      "euiColorVisBehindText1": "#009E99",
+                      "euiColorVisBehindText2": "#154399",
+                      "euiColorVisBehindText3": "#2476F0",
+                      "euiColorVisBehindText4": "#831652",
+                      "euiColorVisBehindText5": "#D13680",
+                      "euiColorVisBehindText6": "#7F1F27",
+                      "euiColorVisBehindText7": "#DA3737",
+                      "euiColorVisBehindText8": "#6A4906",
+                      "euiColorVisBehindText9": "#AD7E00",
+                      "euiColorVisComplementary0": "#2476F0",
+                      "euiColorVisComplementary1": "#AD7E00",
+                      "euiColorVisCool0": "#E8F1FF",
+                      "euiColorVisCool1": "#85B7FF",
+                      "euiColorVisCool2": "#1750BA",
+                      "euiColorVisDanger0": "#A71627",
+                      "euiColorVisDanger1": "#DA3737",
+                      "euiColorVisGrey0": "#CAD3E2",
+                      "euiColorVisGrey1": "#8E9FBC",
+                      "euiColorVisGrey2": "#5A6D8C",
+                      "euiColorVisGrey3": "#1D2A3E",
+                      "euiColorVisNeutral0": "#0F658A",
+                      "euiColorVisNeutral1": "#1C8CB5",
+                      "euiColorVisRisk0": "#9E3A16",
+                      "euiColorVisRisk1": "#DB541B",
+                      "euiColorVisSuccess0": "#09724D",
+                      "euiColorVisSuccess1": "#00996B",
+                      "euiColorVisText0": "#065B58",
+                      "euiColorVisText1": "#047471",
+                      "euiColorVisText2": "#154399",
+                      "euiColorVisText3": "#0B64DD",
+                      "euiColorVisText4": "#A11262",
+                      "euiColorVisText5": "#D13680",
+                      "euiColorVisText6": "#A71627",
+                      "euiColorVisText7": "#DA3737",
+                      "euiColorVisText8": "#6A4906",
+                      "euiColorVisText9": "#966B03",
+                      "euiColorVisWarm0": "#FFE8E5",
+                      "euiColorVisWarm1": "#FC9188",
+                      "euiColorVisWarm2": "#A71627",
+                      "euiColorVisWarning0": "#825803",
+                      "euiColorVisWarning1": "#AD7E00",
+                    },
+                  },
+                  "ghost": "#FFFFFF",
+                  "ink": "#000000",
+                },
+              },
+            },
+            "size": Object {
+              "base": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "l": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "m": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "s": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xs": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxs": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxxl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxxxl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+            },
+          }
+        }
       >
-        <MemoizedFormattedMessage
-          defaultMessage="hide"
-          id="xpack.security.management.editRole.collapsiblePanel.hideLinkText"
-        />
-      </EuiLink>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer />
-  <p>
-    child
-  </p>
-</EuiPanel>
+        <EuiCacheProvider>
+          <EuiGlobalStyles />
+        </EuiCacheProvider>
+        <EuiCacheProvider>
+          <EuiUtilityClasses />
+        </EuiCacheProvider>
+        <EuiComponentDefaultsProvider>
+          <CollapsiblePanel
+            iconType="logoElasticsearch"
+            title="Elasticsearch"
+          >
+            <p>
+              child
+            </p>
+          </CollapsiblePanel>
+        </EuiComponentDefaultsProvider>
+      </EuiThemeProvider>
+    </EuiSystemDefaultsProvider>
+  </EuiCacheProvider>
+</EuiProviderNestedCheck>
 `;
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.scss b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.scss
deleted file mode 100644
index 678d1f6da6015..0000000000000
--- a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.collapsiblePanel__logo {
-  margin-right: $euiSizeS;
-  vertical-align: text-bottom;
-}
\ No newline at end of file
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.test.tsx b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.test.tsx
index 4ae5c61552242..3efa4b1a50009 100644
--- a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.test.tsx
@@ -5,15 +5,21 @@
  * 2.0.
  */
 
-import { EuiLink } from '@elastic/eui';
+import { EuiLink, EuiProvider } from '@elastic/eui';
 import React from 'react';
 
 import { mountWithIntl, shallowWithIntl } from '@kbn/test-jest-helpers';
 
 import { CollapsiblePanel } from './collapsible_panel';
 
+const mountWithEuiProvider = (node: React.ReactElement) =>
+  mountWithIntl(<EuiProvider>{node}</EuiProvider>);
+
+const shallowWithEuiProvider = (node: React.ReactElement) =>
+  shallowWithIntl(<EuiProvider>{node}</EuiProvider>);
+
 test('it renders without blowing up', () => {
-  const wrapper = shallowWithIntl(
+  const wrapper = shallowWithEuiProvider(
     <CollapsiblePanel iconType="logoElasticsearch" title="Elasticsearch">
       <p>child</p>
     </CollapsiblePanel>
@@ -23,7 +29,7 @@ test('it renders without blowing up', () => {
 });
 
 test('it renders children by default', () => {
-  const wrapper = mountWithIntl(
+  const wrapper = mountWithEuiProvider(
     <CollapsiblePanel iconType="logoElasticsearch" title="Elasticsearch">
       <p className="child">child 1</p>
       <p className="child">child 2</p>
@@ -35,7 +41,7 @@ test('it renders children by default', () => {
 });
 
 test('it hides children when the "hide" link is clicked', () => {
-  const wrapper = mountWithIntl(
+  const wrapper = mountWithEuiProvider(
     <CollapsiblePanel iconType="logoElasticsearch" title="Elasticsearch">
       <p className="child">child 1</p>
       <p className="child">child 2</p>
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.tsx b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.tsx
index ac09602072161..c5628eae02ffa 100644
--- a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/collapsible_panel/collapsible_panel.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './collapsible_panel.scss';
-
 import type { IconType } from '@elastic/eui';
 import {
   EuiFlexGroup,
@@ -16,7 +14,9 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  useEuiTheme,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { ReactNode } from 'react';
 import React, { Component, Fragment } from 'react';
 
@@ -32,6 +32,59 @@ interface State {
   collapsed: boolean;
 }
 
+const CollapsiblePanelTitle = ({
+  iconType,
+  title,
+  collapsed,
+  toggleCollapsed,
+}: {
+  iconType?: IconType;
+  title: string | ReactNode;
+  collapsed?: boolean;
+  toggleCollapsed?: () => void;
+}) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup alignItems={'baseline'} gutterSize="s" responsive={false}>
+      <EuiFlexItem grow={false}>
+        <EuiTitle>
+          <h2>
+            {iconType && (
+              <Fragment>
+                <EuiIcon
+                  type={iconType}
+                  size="xl"
+                  css={css`
+                    margin-right: ${euiTheme.size.s};
+                    vertical-align: text-bottom;
+                  `}
+                />{' '}
+              </Fragment>
+            )}
+            {title}
+          </h2>
+        </EuiTitle>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiLink data-test-subj="showHidePrivilege" onClick={toggleCollapsed}>
+          {collapsed ? (
+            <FormattedMessage
+              id="xpack.security.management.editRole.collapsiblePanel.showLinkText"
+              defaultMessage="show"
+            />
+          ) : (
+            <FormattedMessage
+              id="xpack.security.management.editRole.collapsiblePanel.hideLinkText"
+              defaultMessage="hide"
+            />
+          )}
+        </EuiLink>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
 export class CollapsiblePanel extends Component<React.PropsWithChildren<Props>, State> {
   public state = {
     collapsed: false,
@@ -55,39 +108,12 @@ export class CollapsiblePanel extends Component<React.PropsWithChildren<Props>,
 
   public getTitle = () => {
     return (
-      <EuiFlexGroup alignItems={'baseline'} gutterSize="s" responsive={false}>
-        <EuiFlexItem grow={false}>
-          <EuiTitle>
-            <h2>
-              {this.props.iconType && (
-                <Fragment>
-                  <EuiIcon
-                    type={this.props.iconType}
-                    size={'xl'}
-                    className={'collapsiblePanel__logo'}
-                  />{' '}
-                </Fragment>
-              )}
-              {this.props.title}
-            </h2>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiLink data-test-subj="showHidePrivilege" onClick={this.toggleCollapsed}>
-            {this.state.collapsed ? (
-              <FormattedMessage
-                id="xpack.security.management.editRole.collapsiblePanel.showLinkText"
-                defaultMessage="show"
-              />
-            ) : (
-              <FormattedMessage
-                id="xpack.security.management.editRole.collapsiblePanel.hideLinkText"
-                defaultMessage="hide"
-              />
-            )}
-          </EuiLink>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <CollapsiblePanelTitle
+        iconType={this.props.iconType}
+        title={this.props.title}
+        collapsed={this.state.collapsed}
+        toggleCollapsed={this.toggleCollapsed}
+      />
     );
   };
 
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
index 31716e708e14b..9762483f5b9ef 100644
--- a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
@@ -1,152 +1,2665 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SimplePrivilegeForm> renders without crashing 1`] = `
-<Fragment>
-  <EuiFlexGroup
-    direction="column"
+<EuiProviderNestedCheck>
+  <EuiCacheProvider
+    cache={
+      Object {
+        "compat": true,
+        "insert": [Function],
+        "inserted": Object {},
+        "key": "css",
+        "nonce": undefined,
+        "registered": Object {},
+        "sheet": StyleSheet {
+          "_insertTag": [Function],
+          "before": null,
+          "container": <head />,
+          "ctr": 0,
+          "insertionPoint": undefined,
+          "isSpeedy": false,
+          "key": "css",
+          "nonce": undefined,
+          "prepend": undefined,
+          "speedy": [Function],
+          "tags": Array [],
+        },
+      }
+    }
   >
-    <EuiFlexItem>
-      <EuiText
-        color="subdued"
-        size="s"
-      >
-        <p>
-          <MemoizedFormattedMessage
-            defaultMessage="Specifies the Kibana privilege for this role."
-            id="xpack.security.management.editRole.simplePrivilegeForm.specifyPrivilegeForRoleDescription"
-          />
-        </p>
-      </EuiText>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiFormRow
-        label={
-          <Memo(MemoizedFormattedMessage)
-            defaultMessage="Kibana privileges"
-            id="xpack.security.management.editRole.simplePrivilegeForm.kibanaPrivilegesTitle"
-          />
-        }
-      >
-        <EuiSuperSelect
-          compressed={false}
-          disabled={false}
-          fullWidth={false}
-          hasDividers={true}
-          isInvalid={false}
-          isLoading={false}
-          onChange={[Function]}
-          options={
-            Array [
-              Object {
-                "dropdownDisplay": <React.Fragment>
-                  <strong>
-                    <Memo(MemoizedFormattedMessage)
-                      defaultMessage="None"
-                      id="xpack.security.management.editRole.simplePrivilegeForm.noPrivilegeDropdown"
-                    />
-                  </strong>
-                  <EuiText
-                    color="subdued"
-                    size="s"
-                  >
-                    <p>
-                      <Memo(MemoizedFormattedMessage)
-                        defaultMessage="No access to Kibana"
-                        id="xpack.security.management.editRole.simplePrivilegeForm.noPrivilegeDropdownDescription"
-                      />
-                    </p>
-                  </EuiText>
-                </React.Fragment>,
-                "inputDisplay": <Memo(MemoizedFormattedMessage)
-                  defaultMessage="None"
-                  id="xpack.security.management.editRole.simplePrivilegeForm.noPrivilegeInput"
-                />,
-                "value": "none",
+    <EuiSystemDefaultsProvider>
+      <EuiThemeProvider
+        theme={
+          Object {
+            "animation": Object {
+              "bounce": "cubic-bezier(.34, 1.61, .7, 1)",
+              "extraFast": "90ms",
+              "extraSlow": "500ms",
+              "fast": "150ms",
+              "normal": "250ms",
+              "resistance": "cubic-bezier(.694, .0482, .335, 1)",
+              "slow": "350ms",
+            },
+            "base": 16,
+            "border": Object {
+              "color": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "colors.borderBaseSubdued",
+                ],
               },
-              Object {
-                "dropdownDisplay": <React.Fragment>
-                  <strong>
-                    <Memo(MemoizedFormattedMessage)
-                      defaultMessage="Read"
-                      id="xpack.security.management.editRole.simplePrivilegeForm.readPrivilegeDropdown"
-                    />
-                  </strong>
-                  <EuiText
-                    color="subdued"
-                    size="s"
-                  >
-                    <p>
-                      <Memo(MemoizedFormattedMessage)
-                        defaultMessage="Grants read-only access to all of Kibana"
-                        id="xpack.security.management.editRole.simplePrivilegeForm.readPrivilegeDropdownDescription"
-                      />
-                    </p>
-                  </EuiText>
-                </React.Fragment>,
-                "inputDisplay": <Memo(MemoizedFormattedMessage)
-                  defaultMessage="Read"
-                  id="xpack.security.management.editRole.simplePrivilegeForm.readPrivilegeInput"
-                />,
-                "value": "read",
+              "editable": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "border.width",
+                  "border.color",
+                ],
               },
-              Object {
-                "dropdownDisplay": <React.Fragment>
-                  <strong>
-                    <Memo(MemoizedFormattedMessage)
-                      defaultMessage="All"
-                      id="xpack.security.management.editRole.simplePrivilegeForm.allPrivilegeDropdown"
-                    />
-                  </strong>
-                  <EuiText
-                    color="subdued"
-                    size="s"
-                  >
-                    <p>
-                      <Memo(MemoizedFormattedMessage)
-                        defaultMessage="Grants full access to all of Kibana"
-                        id="xpack.security.management.editRole.simplePrivilegeForm.allPrivilegeDropdownDescription"
-                      />
-                    </p>
-                  </EuiText>
-                </React.Fragment>,
-                "inputDisplay": <Memo(MemoizedFormattedMessage)
-                  defaultMessage="All"
-                  id="xpack.security.management.editRole.simplePrivilegeForm.allPrivilegeInput"
-                />,
-                "value": "all",
+              "radius": Object {
+                "medium": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [],
+                },
+                "small": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [],
+                },
               },
-              Object {
-                "dropdownDisplay": <React.Fragment>
-                  <strong>
-                    <Memo(MemoizedFormattedMessage)
-                      defaultMessage="Custom"
-                      id="xpack.security.management.editRole.simplePrivilegeForm.customPrivilegeDropdown"
-                    />
-                  </strong>
-                  <EuiText
-                    color="subdued"
-                    size="s"
-                  >
-                    <p>
-                      <Memo(MemoizedFormattedMessage)
-                        defaultMessage="Customize access to Kibana"
-                        id="xpack.security.management.editRole.simplePrivilegeForm.customPrivilegeDropdownDescription"
-                      />
-                    </p>
-                  </EuiText>
-                </React.Fragment>,
-                "inputDisplay": <Memo(MemoizedFormattedMessage)
-                  defaultMessage="Custom"
-                  id="xpack.security.management.editRole.simplePrivilegeForm.customPrivilegeInput"
-                />,
-                "value": "custom",
-              },
-            ]
+              "thick": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "border.width",
+                  "border.color",
+                ],
+              },
+              "thin": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "border.width",
+                  "border.color",
+                ],
+              },
+              "width": Object {
+                "thick": "2px",
+                "thin": "1px",
+              },
+            },
+            "breakpoint": Object {
+              "l": 992,
+              "m": 768,
+              "s": 575,
+              "xl": 1200,
+              "xs": 0,
+            },
+            "colors": Object {
+              "DARK": Object {
+                "accent": "#EE72A6",
+                "accentSecondary": "#16C5C0",
+                "accentText": "#EE72A6",
+                "backgroundBaseAccent": "#351725",
+                "backgroundBaseAccentSecondary": "#03282B",
+                "backgroundBaseDanger": "#351721",
+                "backgroundBaseDisabled": "#1D2A3E",
+                "backgroundBaseFormsControlDisabled": "#2B394F",
+                "backgroundBaseFormsPrepend": "#243147",
+                "backgroundBaseHighlighted": "#172336",
+                "backgroundBaseInteractiveHover": "rgba(255,255,255, 0.08)",
+                "backgroundBaseInteractiveOverlay": "rgba(43,57,79, 0.7)",
+                "backgroundBaseInteractiveSelect": "#0D2F5E",
+                "backgroundBaseInteractiveSelectHover": "#123778",
+                "backgroundBaseNeutral": "#002938",
+                "backgroundBasePlain": "#0B1628",
+                "backgroundBasePrimary": "#0A2342",
+                "backgroundBaseRisk": "#361D18",
+                "backgroundBaseSkeletonEdge": "rgba(255,255,255, 0.16)",
+                "backgroundBaseSkeletonMiddle": "rgba(255,255,255, 0.08)",
+                "backgroundBaseSubdued": "#07101F",
+                "backgroundBaseSuccess": "#092A26",
+                "backgroundBaseWarning": "#2C2721",
+                "backgroundFilledAccent": "#EE72A6",
+                "backgroundFilledAccentSecondary": "#16C5C0",
+                "backgroundFilledDanger": "#F6726A",
+                "backgroundFilledNeutral": "#63C8E3",
+                "backgroundFilledPrimary": "#61A2FF",
+                "backgroundFilledRisk": "#FF995E",
+                "backgroundFilledSuccess": "#24C292",
+                "backgroundFilledText": "#8E9FBC",
+                "backgroundFilledWarning": "#FACB3D",
+                "backgroundLightAccent": "#481E32",
+                "backgroundLightAccentSecondary": "#023436",
+                "backgroundLightDanger": "#491D27",
+                "backgroundLightNeutral": "#003447",
+                "backgroundLightPrimary": "#0D2F5E",
+                "backgroundLightRisk": "#4A221C",
+                "backgroundLightSuccess": "#0D362B",
+                "backgroundLightText": "#2B394F",
+                "backgroundLightWarning": "#3D3014",
+                "backgroundTransparent": "transparent",
+                "backgroundTransparentAccent": "#351725",
+                "backgroundTransparentAccentSecondary": "#351725",
+                "backgroundTransparentDanger": "#351721",
+                "backgroundTransparentHighlighted": "#07101F",
+                "backgroundTransparentNeutral": "#002938",
+                "backgroundTransparentPlain": "#0B1628",
+                "backgroundTransparentPrimary": "#0A2342",
+                "backgroundTransparentRisk": "#361D18",
+                "backgroundTransparentSubdued": "#07101F",
+                "backgroundTransparentSuccess": "#092A26",
+                "backgroundTransparentWarning": "#2C2721",
+                "body": "#07101F",
+                "borderBaseAccent": "#5E2140",
+                "borderBaseAccentSecondary": "#044949",
+                "borderBaseDanger": "#5E2129",
+                "borderBaseDisabled": "#485975",
+                "borderBaseFloating": "#2B394F",
+                "borderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)",
+                "borderBaseFormsControl": "#6A7FA0",
+                "borderBaseNeutral": "#00425C",
+                "borderBasePlain": "#485975",
+                "borderBasePrimary": "#123778",
+                "borderBaseRisk": "#5E281A",
+                "borderBaseSubdued": "#2B394F",
+                "borderBaseSuccess": "#094837",
+                "borderBaseWarning": "#513910",
+                "borderInteractiveFormsHoverDanger": "#EE4C48",
+                "borderInteractiveFormsHoverPlain": "#5A6D8C",
+                "borderStrongAccent": "#EE72A6",
+                "borderStrongAccentSecondary": "#16C5C0",
+                "borderStrongDanger": "#F6726A",
+                "borderStrongNeutral": "#37B8DC",
+                "borderStrongPrimary": "#61A2FF",
+                "borderStrongRisk": "#FF995E",
+                "borderStrongSuccess": "#24C292",
+                "borderStrongText": "#8E9FBC",
+                "borderStrongWarning": "#FACB3D",
+                "danger": "#F6726A",
+                "dangerText": "#F6726A",
+                "darkShade": "#7186A8",
+                "darkestShade": "#CAD3E2",
+                "disabled": "#1D2A3E",
+                "disabledText": "#6A7FA0",
+                "emptyShade": "#0B1628",
+                "fullShade": "#FFFFFF",
+                "highlight": "#1750BA",
+                "lightShade": "#243147",
+                "lightestShade": "#172336",
+                "link": "#61A2FF",
+                "mediumShade": "#516381",
+                "primary": "#61A2FF",
+                "primaryText": "#61A2FF",
+                "severity": Object {
+                  "danger": "#EE4C48",
+                  "neutral": "#B5E5F2",
+                  "risk": "#FF995E",
+                  "success": "#24C292",
+                  "unknown": "#E3E8F2",
+                  "warning": "#FCD883",
+                },
+                "shadow": "#000000",
+                "subduedText": "#8E9FBC",
+                "success": "#24C292",
+                "successText": "#24C292",
+                "text": "#CAD3E2",
+                "textAccent": "#EE72A6",
+                "textAccentSecondary": "#16C5C0",
+                "textDanger": "#F6726A",
+                "textDisabled": "#6A7FA0",
+                "textHeading": "#E3E8F2",
+                "textInverse": "#07101F",
+                "textNeutral": "#37B8DC",
+                "textParagraph": "#CAD3E2",
+                "textPrimary": "#61A2FF",
+                "textRisk": "#FF995E",
+                "textSubdued": "#8E9FBC",
+                "textSuccess": "#24C292",
+                "textWarning": "#FCD883",
+                "title": "#E3E8F2",
+                "vis": Object {
+                  "euiColorVis0": "#16C5C0",
+                  "euiColorVis1": "#A6EDEA",
+                  "euiColorVis2": "#61A2FF",
+                  "euiColorVis3": "#BFDBFF",
+                  "euiColorVis4": "#EE72A6",
+                  "euiColorVis5": "#FFC7DB",
+                  "euiColorVis6": "#F6726A",
+                  "euiColorVis7": "#FFC9C2",
+                  "euiColorVis8": "#EAAE01",
+                  "euiColorVis9": "#FCD883",
+                  "euiColorVisBase0": "#F6F9FC",
+                  "euiColorVisBehindText0": "#16C5C0",
+                  "euiColorVisBehindText1": "#A6EDEA",
+                  "euiColorVisBehindText2": "#61A2FF",
+                  "euiColorVisBehindText3": "#BFDBFF",
+                  "euiColorVisBehindText4": "#EE72A6",
+                  "euiColorVisBehindText5": "#FFC7DB",
+                  "euiColorVisBehindText6": "#F6726A",
+                  "euiColorVisBehindText7": "#FFC9C2",
+                  "euiColorVisBehindText8": "#EAAE01",
+                  "euiColorVisBehindText9": "#FCD883",
+                  "euiColorVisComplementary0": "#61A2FF",
+                  "euiColorVisComplementary1": "#EAAE01",
+                  "euiColorVisCool0": "#E8F1FF",
+                  "euiColorVisCool1": "#A3CBFF",
+                  "euiColorVisCool2": "#61A2FF",
+                  "euiColorVisDanger0": "#F6726A",
+                  "euiColorVisDanger1": "#FFC9C2",
+                  "euiColorVisGrey0": "#CAD3E2",
+                  "euiColorVisGrey1": "#8E9FBC",
+                  "euiColorVisGrey2": "#5A6D8C",
+                  "euiColorVisGrey3": "#1D2A3E",
+                  "euiColorVisNeutral0": "#37B8DC",
+                  "euiColorVisNeutral1": "#B5E5F2",
+                  "euiColorVisRisk0": "#FC8544",
+                  "euiColorVisRisk1": "#FFCDA1",
+                  "euiColorVisSuccess0": "#24C292",
+                  "euiColorVisSuccess1": "#AEE8D2",
+                  "euiColorVisText0": "#16C5C0",
+                  "euiColorVisText1": "#A6EDEA",
+                  "euiColorVisText2": "#61A2FF",
+                  "euiColorVisText3": "#BFDBFF",
+                  "euiColorVisText4": "#EE72A6",
+                  "euiColorVisText5": "#FFC7DB",
+                  "euiColorVisText6": "#F6726A",
+                  "euiColorVisText7": "#FFC9C2",
+                  "euiColorVisText8": "#EAAE01",
+                  "euiColorVisText9": "#FCD883",
+                  "euiColorVisWarm0": "#FFE8E5",
+                  "euiColorVisWarm1": "#FFB5AD",
+                  "euiColorVisWarm2": "#F6726A",
+                  "euiColorVisWarning0": "#EAAE01",
+                  "euiColorVisWarning1": "#FCD883",
+                },
+                "warning": "#FACB3D",
+                "warningText": "#FCD883",
+              },
+              "LIGHT": Object {
+                "accent": "#BC1E70",
+                "accentSecondary": "#008B87",
+                "accentText": "#A11262",
+                "backgroundBaseAccent": "#FFEBF5",
+                "backgroundBaseAccentSecondary": "#E2F9F7",
+                "backgroundBaseDanger": "#FFE8E5",
+                "backgroundBaseDisabled": "#ECF1F9",
+                "backgroundBaseFormsControlDisabled": "#CAD3E2",
+                "backgroundBaseFormsPrepend": "#ECF1F9",
+                "backgroundBaseHighlighted": "#F6F9FC",
+                "backgroundBaseInteractiveHover": "rgba(23,80,186, 0.04)",
+                "backgroundBaseInteractiveOverlay": "rgba(72,89,117, 0.7)",
+                "backgroundBaseInteractiveSelect": "#E8F1FF",
+                "backgroundBaseInteractiveSelectHover": "#D9E8FF",
+                "backgroundBaseNeutral": "#E5F6FA",
+                "backgroundBasePlain": "#FFFFFF",
+                "backgroundBasePrimary": "#E8F1FF",
+                "backgroundBaseRisk": "#FFEDD6",
+                "backgroundBaseSkeletonEdge": "rgba(72,89,117, 0.16)",
+                "backgroundBaseSkeletonMiddle": "rgba(72,89,117, 0.04)",
+                "backgroundBaseSubdued": "#F6F9FC",
+                "backgroundBaseSuccess": "#E2F8F0",
+                "backgroundBaseWarning": "#FDF3D8",
+                "backgroundFilledAccent": "#BC1E70",
+                "backgroundFilledAccentSecondary": "#008B87",
+                "backgroundFilledDanger": "#C61E25",
+                "backgroundFilledNeutral": "#1C8CB5",
+                "backgroundFilledPrimary": "#0B64DD",
+                "backgroundFilledRisk": "#ED6723",
+                "backgroundFilledSuccess": "#008A5E",
+                "backgroundFilledText": "#5A6D8C",
+                "backgroundFilledWarning": "#FACB3D",
+                "backgroundLightAccent": "#FDDDE9",
+                "backgroundLightAccentSecondary": "#C9F3F0",
+                "backgroundLightDanger": "#FDDDD8",
+                "backgroundLightNeutral": "#CFEEF7",
+                "backgroundLightPrimary": "#D9E8FF",
+                "backgroundLightRisk": "#FFDEBF",
+                "backgroundLightSuccess": "#C9F3E3",
+                "backgroundLightText": "#E3E8F2",
+                "backgroundLightWarning": "#FDE9B5",
+                "backgroundTransparent": "transparent",
+                "backgroundTransparentAccent": "#FFEBF5",
+                "backgroundTransparentAccentSecondary": "#E2F9F7",
+                "backgroundTransparentDanger": "#FFE8E5",
+                "backgroundTransparentHighlighted": "#ECF1F9",
+                "backgroundTransparentNeutral": "#E5F6FA",
+                "backgroundTransparentPlain": "#ECF1F9",
+                "backgroundTransparentPrimary": "#E8F1FF",
+                "backgroundTransparentRisk": "#FFEDD6",
+                "backgroundTransparentSubdued": "#ECF1F9",
+                "backgroundTransparentSuccess": "#E2F8F0",
+                "backgroundTransparentWarning": "#FDF3D8",
+                "body": "#F6F9FC",
+                "borderBaseAccent": "#FFC7DB",
+                "borderBaseAccentSecondary": "#A6EDEA",
+                "borderBaseDanger": "#FFC9C2",
+                "borderBaseDisabled": "#CAD3E2",
+                "borderBaseFloating": "transparent",
+                "borderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)",
+                "borderBaseFormsControl": "#8E9FBC",
+                "borderBaseNeutral": "#B5E5F2",
+                "borderBasePlain": "#CAD3E2",
+                "borderBasePrimary": "#BFDBFF",
+                "borderBaseRisk": "#FFCDA1",
+                "borderBaseSubdued": "#E3E8F2",
+                "borderBaseSuccess": "#AEE8D2",
+                "borderBaseWarning": "#FCD883",
+                "borderInteractiveFormsHoverDanger": "#DA3737",
+                "borderInteractiveFormsHoverPlain": "#B4C1D5",
+                "borderStrongAccent": "#BC1E70",
+                "borderStrongAccentSecondary": "#008B87",
+                "borderStrongDanger": "#C61E25",
+                "borderStrongNeutral": "#19799F",
+                "borderStrongPrimary": "#0B64DD",
+                "borderStrongRisk": "#C24411",
+                "borderStrongSuccess": "#008A5E",
+                "borderStrongText": "#5A6D8C",
+                "borderStrongWarning": "#966B03",
+                "danger": "#C61E25",
+                "dangerText": "#A71627",
+                "darkShade": "#5A6D8C",
+                "darkestShade": "#2B394F",
+                "disabled": "#E3E8F2",
+                "disabledText": "#6A7FA0",
+                "emptyShade": "#FFFFFF",
+                "fullShade": "#07101F",
+                "highlight": "#E8F1FF",
+                "lightShade": "#CAD3E2",
+                "lightestShade": "#ECF1F9",
+                "link": "#1750BA",
+                "mediumShade": "#8E9FBC",
+                "primary": "#0B64DD",
+                "primaryText": "#1750BA",
+                "severity": Object {
+                  "danger": "#EE4C48",
+                  "neutral": "#B5E5F2",
+                  "risk": "#FF995E",
+                  "success": "#24C292",
+                  "unknown": "#E3E8F2",
+                  "warning": "#FCD883",
+                },
+                "shadow": "#000000",
+                "subduedText": "#516381",
+                "success": "#008A5E",
+                "successText": "#09724D",
+                "text": "#1D2A3E",
+                "textAccent": "#A11262",
+                "textAccentSecondary": "#047471",
+                "textDanger": "#A71627",
+                "textDisabled": "#798EAF",
+                "textHeading": "#111C2C",
+                "textInverse": "#FFFFFF",
+                "textNeutral": "#0F658A",
+                "textParagraph": "#1D2A3E",
+                "textPrimary": "#1750BA",
+                "textRisk": "#9E3A16",
+                "textSubdued": "#516381",
+                "textSuccess": "#09724D",
+                "textWarning": "#825803",
+                "title": "#111C2C",
+                "vis": Object {
+                  "euiColorVis0": "#16C5C0",
+                  "euiColorVis1": "#A6EDEA",
+                  "euiColorVis2": "#61A2FF",
+                  "euiColorVis3": "#BFDBFF",
+                  "euiColorVis4": "#EE72A6",
+                  "euiColorVis5": "#FFC7DB",
+                  "euiColorVis6": "#F6726A",
+                  "euiColorVis7": "#FFC9C2",
+                  "euiColorVis8": "#EAAE01",
+                  "euiColorVis9": "#FCD883",
+                  "euiColorVisBase0": "#F6F9FC",
+                  "euiColorVisBehindText0": "#16C5C0",
+                  "euiColorVisBehindText1": "#A6EDEA",
+                  "euiColorVisBehindText2": "#61A2FF",
+                  "euiColorVisBehindText3": "#BFDBFF",
+                  "euiColorVisBehindText4": "#EE72A6",
+                  "euiColorVisBehindText5": "#FFC7DB",
+                  "euiColorVisBehindText6": "#F6726A",
+                  "euiColorVisBehindText7": "#FFC9C2",
+                  "euiColorVisBehindText8": "#EAAE01",
+                  "euiColorVisBehindText9": "#FCD883",
+                  "euiColorVisComplementary0": "#61A2FF",
+                  "euiColorVisComplementary1": "#EAAE01",
+                  "euiColorVisCool0": "#E8F1FF",
+                  "euiColorVisCool1": "#A3CBFF",
+                  "euiColorVisCool2": "#61A2FF",
+                  "euiColorVisDanger0": "#F6726A",
+                  "euiColorVisDanger1": "#FFC9C2",
+                  "euiColorVisGrey0": "#CAD3E2",
+                  "euiColorVisGrey1": "#8E9FBC",
+                  "euiColorVisGrey2": "#5A6D8C",
+                  "euiColorVisGrey3": "#1D2A3E",
+                  "euiColorVisNeutral0": "#37B8DC",
+                  "euiColorVisNeutral1": "#B5E5F2",
+                  "euiColorVisRisk0": "#FC8544",
+                  "euiColorVisRisk1": "#FFCDA1",
+                  "euiColorVisSuccess0": "#24C292",
+                  "euiColorVisSuccess1": "#AEE8D2",
+                  "euiColorVisText0": "#065B58",
+                  "euiColorVisText1": "#047471",
+                  "euiColorVisText2": "#154399",
+                  "euiColorVisText3": "#0B64DD",
+                  "euiColorVisText4": "#A11262",
+                  "euiColorVisText5": "#D13680",
+                  "euiColorVisText6": "#A71627",
+                  "euiColorVisText7": "#DA3737",
+                  "euiColorVisText8": "#6A4906",
+                  "euiColorVisText9": "#966B03",
+                  "euiColorVisWarm0": "#FFE8E5",
+                  "euiColorVisWarm1": "#FFB5AD",
+                  "euiColorVisWarm2": "#F6726A",
+                  "euiColorVisWarning0": "#EAAE01",
+                  "euiColorVisWarning1": "#FCD883",
+                },
+                "warning": "#FACB3D",
+                "warningText": "#825803",
+              },
+              "ghost": "#FFFFFF",
+              "ink": "#07101F",
+              "plainDark": "#07101F",
+              "plainLight": "#FFFFFF",
+            },
+            "components": Object {
+              "DARK": Object {
+                "badgeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBackgroundSubdued": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBorderColorHollow": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "badgeIconButtonBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "bottomBarBackground": "#07101F",
+                "breadcrumbsApplicationBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "breadcrumbsApplicationColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "buttonGroupBackgroundDisabledSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "buttonGroupBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupBorderColorSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupFocusColor": "#FFFFFF",
+                "codeAdditionColor": "#16C5C0",
+                "codeAttributeColor": "inherit",
+                "codeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "codeBackgroundSelected": "inherit",
+                "codeColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textParagraph",
+                  ],
+                },
+                "codeCommentColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeDeletionColor": "#F6726A",
+                "codeFunctionTitleColor": "inherit",
+                "codeInlineBackground": "#172336",
+                "codeInlineCodeKeywordColor": "#B084F5",
+                "codeInlineColor": "#B084F5",
+                "codeKeywordColor": "#B084F5",
+                "codeMetaColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeNameColor": "#61A2FF",
+                "codeNumberColor": "#16C5C0",
+                "codeParamsColor": "inherit",
+                "codeSectionColor": "#F6726A",
+                "codeSelectorClassColor": "inherit",
+                "codeSelectorColor": "inherit",
+                "codeSelectorIdColor": "inherit",
+                "codeStringColor": "#EE72A6",
+                "codeSymbolColor": "#F6726A",
+                "codeTagColor": "#61A2FF",
+                "codeTitleColor": "#EAAE01",
+                "codeTypeColor": "#61A2FF",
+                "collapsibleNavGroupBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "collapsibleNavGroupBackgroundDark": "#07101F",
+                "dataGridBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dataGridRowBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "dataGridRowBackgroundMarked": "#2C2721",
+                "dataGridRowBackgroundMarkedHover": "#3D3014",
+                "dataGridRowBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowBorderActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "dataGridRowBorderHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongText",
+                  ],
+                },
+                "dataGridRowBorderMarked": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongWarning",
+                  ],
+                },
+                "dataGridRowStripesBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowStripesBackgroundHover": "#1D2A3E",
+                "dataGridRowStripesBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowStripesBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStriped": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStripedHover": "#1D2A3E",
+                "dataGridVerticalLineBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dragDropDraggingBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "dragDropDraggingOverBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightSuccess",
+                  ],
+                },
+                "filterButtonBadgeBackgroundHover": "#3F4F69",
+                "filterSelectItemBackgroundFocusDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "flyoutCloseButtonInsideBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "flyoutFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "headerBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "headerDarkBackground": "#0B1628",
+                "headerDarkSearchBorderColor": "#485975",
+                "headerDarkSectionItemBackgroundFocus": "#0A2342",
+                "keyPadMenuItemBackgroundDisabledSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "listGroupItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundSubduedActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "loadingChartMonoBackground0": "#384861",
+                "loadingChartMonoBackground1": "#485975",
+                "loadingChartMonoBackground2": "#5A6D8C",
+                "loadingChartMonoBackground3": "#6A7FA0",
+                "loadingSpinnerBorder": "#485975",
+                "loadingSpinnerHighlight": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "markBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightPrimary",
+                  ],
+                },
+                "markdownFormatTableBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "overlayMaskBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveOverlay",
+                  ],
+                },
+                "overlayMaskBackgroundHighContrast": "rgba(17,28,44, 0.9)",
+                "popoverFooterBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "popoverPanelBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "scrollbarTrackColor": "#0B1628",
+                "selectableListItemBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "sideNavItemEmphasizedBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "skeletonBackgroundSkeletonMiddleHighContrast": "rgba(255,255,255, 0.3)",
+                "superDatePickerBackgroundSuccees": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "switchBackgroundOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchBackgroundOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchCompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchIconDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textDisabled",
+                  ],
+                },
+                "switchMiniBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchThumbBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "switchThumbBorderOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchThumbBorderOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchUncompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "tableCellSortableIconColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "tableRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowBackgroundMarked": "#2C2721",
+                "tableRowBackgroundMarkedHover": "#3D3014",
+                "tableRowBackgroundSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "tableRowBackgroundSelectedHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundFocus": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tooltipBackground": "#07101F",
+                "tooltipBorder": "#2B394F",
+                "tooltipBorderFloating": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseFloating",
+                  ],
+                },
+                "tourFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "treeViewItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+              },
+              "LIGHT": Object {
+                "badgeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBackgroundSubdued": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "badgeBorderColorHollow": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "badgeIconButtonBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "bottomBarBackground": "#07101F",
+                "breadcrumbsApplicationBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightText",
+                  ],
+                },
+                "breadcrumbsApplicationColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "buttonGroupBackgroundDisabledSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "buttonGroupBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupBorderColorSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "buttonGroupFocusColor": "#07101F",
+                "codeAdditionColor": "#047471",
+                "codeAttributeColor": "inherit",
+                "codeBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "codeBackgroundSelected": "inherit",
+                "codeColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textParagraph",
+                  ],
+                },
+                "codeCommentColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeDeletionColor": "#A71627",
+                "codeFunctionTitleColor": "inherit",
+                "codeInlineBackground": "#ECF1F9",
+                "codeInlineCodeKeywordColor": "#6B3C9F",
+                "codeInlineColor": "#6B3C9F",
+                "codeKeywordColor": "#1750BA",
+                "codeMetaColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textSubdued",
+                  ],
+                },
+                "codeNameColor": "#1750BA",
+                "codeNumberColor": "#047471",
+                "codeParamsColor": "inherit",
+                "codeSectionColor": "#A71627",
+                "codeSelectorClassColor": "inherit",
+                "codeSelectorColor": "inherit",
+                "codeSelectorIdColor": "inherit",
+                "codeStringColor": "#A11262",
+                "codeSymbolColor": "#A71627",
+                "codeTagColor": "#1750BA",
+                "codeTitleColor": "#825803",
+                "codeTypeColor": "#1750BA",
+                "collapsibleNavGroupBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "collapsibleNavGroupBackgroundDark": "#07101F",
+                "dataGridBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dataGridRowBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "dataGridRowBackgroundMarked": "#FDF3D8",
+                "dataGridRowBackgroundMarkedHover": "#FDE9B5",
+                "dataGridRowBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowBorderActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "dataGridRowBorderHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongText",
+                  ],
+                },
+                "dataGridRowBorderMarked": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongWarning",
+                  ],
+                },
+                "dataGridRowStripesBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "dataGridRowStripesBackgroundHover": "#ECF1F9",
+                "dataGridRowStripesBackgroundSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "dataGridRowStripesBackgroundSelectHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStriped": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSubdued",
+                  ],
+                },
+                "dataGridRowStripesBackgroundStripedHover": "#ECF1F9",
+                "dataGridVerticalLineBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "dragDropDraggingBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "dragDropDraggingOverBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightSuccess",
+                  ],
+                },
+                "filterButtonBadgeBackgroundHover": "#D6DDEA",
+                "filterSelectItemBackgroundFocusDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "flyoutCloseButtonInsideBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "flyoutFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "headerBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "headerDarkBackground": "#0B1628",
+                "headerDarkSearchBorderColor": "#485975",
+                "headerDarkSectionItemBackgroundFocus": "#0A2342",
+                "keyPadMenuItemBackgroundDisabledSelect": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseDisabled",
+                  ],
+                },
+                "listGroupItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "listGroupItemBackgroundPrimaryHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "listGroupItemBackgroundSubduedActive": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "loadingChartMonoBackground0": "#E3E8F2",
+                "loadingChartMonoBackground1": "#CAD3E2",
+                "loadingChartMonoBackground2": "#B4C1D5",
+                "loadingChartMonoBackground3": "#A2B1C9",
+                "loadingSpinnerBorder": "#CAD3E2",
+                "loadingSpinnerHighlight": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderStrongPrimary",
+                  ],
+                },
+                "markBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundLightPrimary",
+                  ],
+                },
+                "markdownFormatTableBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBasePlain",
+                  ],
+                },
+                "overlayMaskBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveOverlay",
+                  ],
+                },
+                "overlayMaskBackgroundHighContrast": "rgba(17,28,44, 0.9)",
+                "popoverFooterBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "popoverPanelBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "scrollbarTrackColor": "#ECF1F9",
+                "selectableListItemBorderColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseSubdued",
+                  ],
+                },
+                "sideNavItemEmphasizedBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "skeletonBackgroundSkeletonMiddleHighContrast": "rgba(72,89,117, 0.04)",
+                "superDatePickerBackgroundSuccees": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseSuccess",
+                  ],
+                },
+                "switchBackgroundOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchBackgroundOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchCompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchIconDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.textDisabled",
+                  ],
+                },
+                "switchMiniBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "switchThumbBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBasePlain",
+                  ],
+                },
+                "switchThumbBorderOff": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "switchThumbBorderOn": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledPrimary",
+                  ],
+                },
+                "switchUncompressedBackgroundDisabled": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseFormsControlDisabled",
+                  ],
+                },
+                "tableCellSortableIconColor": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundFilledText",
+                  ],
+                },
+                "tableRowBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowBackgroundMarked": "#FDF3D8",
+                "tableRowBackgroundMarkedHover": "#FDE9B5",
+                "tableRowBackgroundSelected": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "tableRowBackgroundSelectedHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelectHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundFocus": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+                "tableRowInteractiveBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveSelect",
+                  ],
+                },
+                "tooltipBackground": "#07101F",
+                "tooltipBorder": "#2B394F",
+                "tooltipBorderFloating": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.borderBaseFloating",
+                  ],
+                },
+                "tourFooterBackground": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseHighlighted",
+                  ],
+                },
+                "treeViewItemBackgroundHover": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "colors.backgroundBaseInteractiveHover",
+                  ],
+                },
+              },
+              "buttons": Object {
+                "DARK": Object {
+                  "backgroundAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccent",
+                    ],
+                  },
+                  "backgroundAccentActive": "rgba(229,74,145, 0.2)",
+                  "backgroundAccentHover": "rgba(229,74,145, 0.16)",
+                  "backgroundAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccentSecondary",
+                    ],
+                  },
+                  "backgroundAccentSecondaryActive": "rgba(0,176,170, 0.2)",
+                  "backgroundAccentSecondaryHover": "rgba(0,176,170, 0.16)",
+                  "backgroundDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightDanger",
+                    ],
+                  },
+                  "backgroundDangerActive": "rgba(238,76,72, 0.2)",
+                  "backgroundDangerHover": "rgba(238,76,72, 0.16)",
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundEmptyAccentActive": "rgba(229,74,145, 0.2)",
+                  "backgroundEmptyAccentHover": "rgba(229,74,145, 0.16)",
+                  "backgroundEmptyAccentSecondaryActive": "rgba(0,176,170, 0.2)",
+                  "backgroundEmptyAccentSecondaryHover": "rgba(0,176,170, 0.16)",
+                  "backgroundEmptyDangerActive": "rgba(238,76,72, 0.2)",
+                  "backgroundEmptyDangerHover": "rgba(238,76,72, 0.16)",
+                  "backgroundEmptyNeutralActive": "rgba(13,161,201, 0.2)",
+                  "backgroundEmptyNeutralHover": "rgba(13,161,201, 0.16)",
+                  "backgroundEmptyPrimaryActive": "rgba(55,136,255, 0.2)",
+                  "backgroundEmptyPrimaryHover": "rgba(55,136,255, 0.16)",
+                  "backgroundEmptyRiskActive": "rgba(252,133,68, 0.16)",
+                  "backgroundEmptyRiskHover": "rgba(252,133,68, 0.12)",
+                  "backgroundEmptySuccessActive": "rgba(4,174,126, 0.2)",
+                  "backgroundEmptySuccessHover": "rgba(4,174,126, 0.16)",
+                  "backgroundEmptyTextActive": "rgba(255,255,255, 0.16)",
+                  "backgroundEmptyTextHover": "rgba(255,255,255, 0.12)",
+                  "backgroundEmptyWarningActive": "rgba(234,174,1, 0.16)",
+                  "backgroundEmptyWarningHover": "rgba(234,174,1, 0.12)",
+                  "backgroundFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccent",
+                    ],
+                  },
+                  "backgroundFilledAccentActive": "#D13680",
+                  "backgroundFilledAccentHover": "#E54A91",
+                  "backgroundFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccentSecondary",
+                    ],
+                  },
+                  "backgroundFilledAccentSecondaryActive": "#009E99",
+                  "backgroundFilledAccentSecondaryHover": "#00B0AA",
+                  "backgroundFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledDanger",
+                    ],
+                  },
+                  "backgroundFilledDangerActive": "#DA3737",
+                  "backgroundFilledDangerHover": "#EE4C48",
+                  "backgroundFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledNeutral",
+                    ],
+                  },
+                  "backgroundFilledNeutralActive": "#1C8CB5",
+                  "backgroundFilledNeutralHover": "#0dA1C9",
+                  "backgroundFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledPrimary",
+                    ],
+                  },
+                  "backgroundFilledPrimaryActive": "#2476F0",
+                  "backgroundFilledPrimaryHover": "#3788FF",
+                  "backgroundFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledRisk",
+                    ],
+                  },
+                  "backgroundFilledRiskActive": "#ED6723",
+                  "backgroundFilledRiskHover": "#FC8544",
+                  "backgroundFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledSuccess",
+                    ],
+                  },
+                  "backgroundFilledSuccessActive": "#00996B",
+                  "backgroundFilledSuccessHover": "#04AE7E",
+                  "backgroundFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledText",
+                    ],
+                  },
+                  "backgroundFilledTextActive": "#6A7FA0",
+                  "backgroundFilledTextHover": "#798EAF",
+                  "backgroundFilledWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledWarning",
+                    ],
+                  },
+                  "backgroundFilledWarningActive": "#EAAE01",
+                  "backgroundFilledWarningHover": "#F5BC00",
+                  "backgroundNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightNeutral",
+                    ],
+                  },
+                  "backgroundNeutralActive": "rgba(13,161,201, 0.2)",
+                  "backgroundNeutralHover": "rgba(13,161,201, 0.16)",
+                  "backgroundPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightPrimary",
+                    ],
+                  },
+                  "backgroundPrimaryActive": "rgba(55,136,255, 0.2)",
+                  "backgroundPrimaryHover": "rgba(55,136,255, 0.16)",
+                  "backgroundRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightRisk",
+                    ],
+                  },
+                  "backgroundRiskActive": "rgba(252,133,68, 0.16)",
+                  "backgroundRiskHover": "rgba(252,133,68, 0.12)",
+                  "backgroundSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightSuccess",
+                    ],
+                  },
+                  "backgroundSuccessActive": "rgba(4,174,126, 0.2)",
+                  "backgroundSuccessHover": "rgba(4,174,126, 0.16)",
+                  "backgroundText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "flags.buttonVariant",
+                      "colors.backgroundBasePlain",
+                      "colors.backgroundLightText",
+                    ],
+                  },
+                  "backgroundTextActive": "rgba(255,255,255, 0.16)",
+                  "backgroundTextHover": "rgba(255,255,255, 0.12)",
+                  "backgroundWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightWarning",
+                    ],
+                  },
+                  "backgroundWarningActive": "rgba(234,174,1, 0.16)",
+                  "backgroundWarningHover": "rgba(234,174,1, 0.12)",
+                  "textColorAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccent",
+                    ],
+                  },
+                  "textColorAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccentSecondary",
+                    ],
+                  },
+                  "textColorDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDanger",
+                    ],
+                  },
+                  "textColorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledWarning": "#6A4906",
+                  "textColorNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textNeutral",
+                    ],
+                  },
+                  "textColorPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textPrimary",
+                    ],
+                  },
+                  "textColorRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textRisk",
+                    ],
+                  },
+                  "textColorSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSuccess",
+                    ],
+                  },
+                  "textColorText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textParagraph",
+                    ],
+                  },
+                  "textColorWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textWarning",
+                    ],
+                  },
+                },
+                "LIGHT": Object {
+                  "backgroundAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccent",
+                    ],
+                  },
+                  "backgroundAccentActive": "rgba(229,74,145, 0.16)",
+                  "backgroundAccentHover": "rgba(229,74,145, 0.12)",
+                  "backgroundAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightAccentSecondary",
+                    ],
+                  },
+                  "backgroundAccentSecondaryActive": "rgba(0,176,170, 0.16)",
+                  "backgroundAccentSecondaryHover": "rgba(0,176,170, 0.12)",
+                  "backgroundDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightDanger",
+                    ],
+                  },
+                  "backgroundDangerActive": "rgba(238,76,72, 0.16)",
+                  "backgroundDangerHover": "rgba(238,76,72, 0.12)",
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundEmptyAccentActive": "rgba(229,74,145, 0.16)",
+                  "backgroundEmptyAccentHover": "rgba(229,74,145, 0.12)",
+                  "backgroundEmptyAccentSecondaryActive": "rgba(0,176,170, 0.16)",
+                  "backgroundEmptyAccentSecondaryHover": "rgba(0,176,170, 0.12)",
+                  "backgroundEmptyDangerActive": "rgba(238,76,72, 0.16)",
+                  "backgroundEmptyDangerHover": "rgba(238,76,72, 0.12)",
+                  "backgroundEmptyNeutralActive": "rgba(13,161,201, 0.16)",
+                  "backgroundEmptyNeutralHover": "rgba(13,161,201, 0.12)",
+                  "backgroundEmptyPrimaryActive": "rgba(55,136,255, 0.16)",
+                  "backgroundEmptyPrimaryHover": "rgba(55,136,255, 0.12)",
+                  "backgroundEmptyRiskActive": "rgba(252,133,68, 0.2)",
+                  "backgroundEmptyRiskHover": "rgba(252,133,68, 0.16)",
+                  "backgroundEmptySuccessActive": "rgba(4,174,126, 0.16)",
+                  "backgroundEmptySuccessHover": "rgba(4,174,126, 0.12)",
+                  "backgroundEmptyTextActive": "rgba(23,80,186, 0.12)",
+                  "backgroundEmptyTextHover": "rgba(23,80,186, 0.08)",
+                  "backgroundEmptyWarningActive": "rgba(234,174,1, 0.2)",
+                  "backgroundEmptyWarningHover": "rgba(234,174,1, 0.16)",
+                  "backgroundFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccent",
+                    ],
+                  },
+                  "backgroundFilledAccentActive": "#831652",
+                  "backgroundFilledAccentHover": "#A11262",
+                  "backgroundFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledAccentSecondary",
+                    ],
+                  },
+                  "backgroundFilledAccentSecondaryActive": "#065B58",
+                  "backgroundFilledAccentSecondaryHover": "#047471",
+                  "backgroundFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledDanger",
+                    ],
+                  },
+                  "backgroundFilledDangerActive": "#7F1F27",
+                  "backgroundFilledDangerHover": "#A71627",
+                  "backgroundFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledNeutral",
+                    ],
+                  },
+                  "backgroundFilledNeutralActive": "#055476",
+                  "backgroundFilledNeutralHover": "#0F658A",
+                  "backgroundFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledPrimary",
+                    ],
+                  },
+                  "backgroundFilledPrimaryActive": "#154399",
+                  "backgroundFilledPrimaryHover": "#1750BA",
+                  "backgroundFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledRisk",
+                    ],
+                  },
+                  "backgroundFilledRiskActive": "#C24411",
+                  "backgroundFilledRiskHover": "#DB541B",
+                  "backgroundFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledSuccess",
+                    ],
+                  },
+                  "backgroundFilledSuccessActive": "#0C5A3F",
+                  "backgroundFilledSuccessHover": "#09724D",
+                  "backgroundFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledText",
+                    ],
+                  },
+                  "backgroundFilledTextActive": "#384861",
+                  "backgroundFilledTextHover": "#485975",
+                  "backgroundFilledWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundFilledWarning",
+                    ],
+                  },
+                  "backgroundFilledWarningActive": "#EAAE01",
+                  "backgroundFilledWarningHover": "#F5BC00",
+                  "backgroundNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightNeutral",
+                    ],
+                  },
+                  "backgroundNeutralActive": "rgba(13,161,201, 0.16)",
+                  "backgroundNeutralHover": "rgba(13,161,201, 0.12)",
+                  "backgroundPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightPrimary",
+                    ],
+                  },
+                  "backgroundPrimaryActive": "rgba(55,136,255, 0.16)",
+                  "backgroundPrimaryHover": "rgba(55,136,255, 0.12)",
+                  "backgroundRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightRisk",
+                    ],
+                  },
+                  "backgroundRiskActive": "rgba(252,133,68, 0.2)",
+                  "backgroundRiskHover": "rgba(252,133,68, 0.16)",
+                  "backgroundSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightSuccess",
+                    ],
+                  },
+                  "backgroundSuccessActive": "rgba(4,174,126, 0.16)",
+                  "backgroundSuccessHover": "rgba(4,174,126, 0.12)",
+                  "backgroundText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "flags.buttonVariant",
+                      "colors.backgroundBasePlain",
+                      "colors.backgroundLightText",
+                    ],
+                  },
+                  "backgroundTextActive": "rgba(23,80,186, 0.12)",
+                  "backgroundTextHover": "rgba(23,80,186, 0.08)",
+                  "backgroundWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundLightWarning",
+                    ],
+                  },
+                  "backgroundWarningActive": "rgba(234,174,1, 0.2)",
+                  "backgroundWarningHover": "rgba(234,174,1, 0.16)",
+                  "textColorAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccent",
+                    ],
+                  },
+                  "textColorAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textAccentSecondary",
+                    ],
+                  },
+                  "textColorDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDanger",
+                    ],
+                  },
+                  "textColorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledAccent": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledAccentSecondary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDanger": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "textColorFilledNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textInverse",
+                    ],
+                  },
+                  "textColorFilledWarning": "#6A4906",
+                  "textColorNeutral": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textNeutral",
+                    ],
+                  },
+                  "textColorPrimary": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textPrimary",
+                    ],
+                  },
+                  "textColorRisk": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textRisk",
+                    ],
+                  },
+                  "textColorSuccess": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSuccess",
+                    ],
+                  },
+                  "textColorText": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textParagraph",
+                    ],
+                  },
+                  "textColorWarning": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textWarning",
+                    ],
+                  },
+                },
+              },
+              "forms": Object {
+                "DARK": Object {
+                  "background": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePrimary",
+                    ],
+                  },
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundDropping": "rgba(4,174,126, 0.16)",
+                  "backgroundFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundReadOnly": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "border": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePlain",
+                    ],
+                  },
+                  "borderAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePrimary",
+                    ],
+                  },
+                  "borderAutofilledHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "borderFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverPlain",
+                    ],
+                  },
+                  "borderInvalid": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongDanger",
+                    ],
+                  },
+                  "borderInvalidHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverDanger",
+                    ],
+                  },
+                  "clearButtonBackground": "#5A6D8C",
+                  "colorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "colorHasPlaceholder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSubdued",
+                    ],
+                  },
+                  "controlBackgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsControlDisabled",
+                    ],
+                  },
+                  "controlBackgroundUnselected": "transparent",
+                  "controlBorder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseFormsControl",
+                    ],
+                  },
+                  "controlBorderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "controlBorderSelected": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "iconDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "prependBackground": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsPrepend",
+                    ],
+                  },
+                },
+                "LIGHT": Object {
+                  "background": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePrimary",
+                    ],
+                  },
+                  "backgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "backgroundDropping": "rgba(4,174,126, 0.16)",
+                  "backgroundFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBasePlain",
+                    ],
+                  },
+                  "backgroundReadOnly": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseDisabled",
+                    ],
+                  },
+                  "border": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePlain",
+                    ],
+                  },
+                  "borderAutofilled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBasePrimary",
+                    ],
+                  },
+                  "borderAutofilledHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "borderFocused": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "borderHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverPlain",
+                    ],
+                  },
+                  "borderInvalid": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongDanger",
+                    ],
+                  },
+                  "borderInvalidHovered": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderInteractiveFormsHoverDanger",
+                    ],
+                  },
+                  "clearButtonBackground": "#8E9FBC",
+                  "colorDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "colorHasPlaceholder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textSubdued",
+                    ],
+                  },
+                  "controlBackgroundDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsControlDisabled",
+                    ],
+                  },
+                  "controlBackgroundUnselected": "transparent",
+                  "controlBorder": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseFormsControl",
+                    ],
+                  },
+                  "controlBorderDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderBaseDisabled",
+                    ],
+                  },
+                  "controlBorderSelected": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.borderStrongPrimary",
+                    ],
+                  },
+                  "iconDisabled": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.textDisabled",
+                    ],
+                  },
+                  "prependBackground": Computed {
+                    "computer": [Function],
+                    "dependencies": Array [
+                      "colors.backgroundBaseFormsPrepend",
+                    ],
+                  },
+                },
+                "maxWidth": Computed {
+                  "computer": [Function],
+                  "dependencies": Array [
+                    "size.base",
+                  ],
+                },
+              },
+            },
+            "flags": Object {
+              "buttonVariant": "refresh",
+              "formVariant": "refresh",
+              "hasGlobalFocusColor": true,
+              "hasVisColorAdjustment": false,
+            },
+            "focus": Object {
+              "backgroundColor": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "colors.backgroundBaseInteractiveHover",
+                ],
+              },
+              "color": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "colors.textPrimary",
+                ],
+              },
+              "transparency": Object {
+                "DARK": 0.2,
+                "LIGHT": 0.1,
+              },
+              "width": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+            },
+            "font": Object {
+              "baseline": Computed {
+                "computer": [Function],
+                "dependencies": Array [
+                  "base",
+                ],
+              },
+              "body": Object {
+                "scale": "s",
+                "weight": "regular",
+              },
+              "defaultUnits": "rem",
+              "family": "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif",
+              "familyCode": "'Roboto Mono', Menlo, Courier, monospace",
+              "familySerif": "Georgia, Times, Times New Roman, serif",
+              "featureSettings": "'calt' 1, 'kern' 1, 'liga' 1",
+              "lineHeightMultiplier": 1.5,
+              "scale": Object {
+                "l": 1.25,
+                "m": 1,
+                "s": 0.875,
+                "xl": 1.5,
+                "xs": 0.75,
+                "xxl": 1.875,
+                "xxs": 0.6875,
+                "xxxs": 0.5625,
+              },
+              "title": Object {
+                "weight": "bold",
+              },
+              "weight": Object {
+                "bold": 600,
+                "light": 300,
+                "medium": 450,
+                "regular": 400,
+                "semiBold": 500,
+              },
+            },
+            "levels": Object {
+              "content": 0,
+              "flyout": 1000,
+              "header": 1000,
+              "mask": 6000,
+              "maskBelowHeader": 1000,
+              "menu": 2000,
+              "modal": 8000,
+              "navigation": 6000,
+              "toast": 9000,
+            },
+            "overrides": Object {
+              "HCM": Object {
+                "colors": Object {
+                  "LIGHT": Object {
+                    "severity": Object {
+                      "danger": "#EE4C48",
+                      "neutral": "#0dA1C9",
+                      "risk": "#ED6723",
+                      "success": "#00996B",
+                      "unknown": "#798EAF",
+                      "warning": "#AD7E00",
+                    },
+                    "vis": Object {
+                      "euiColorVis0": "#065B58",
+                      "euiColorVis1": "#009E99",
+                      "euiColorVis2": "#154399",
+                      "euiColorVis3": "#2476F0",
+                      "euiColorVis4": "#831652",
+                      "euiColorVis5": "#D13680",
+                      "euiColorVis6": "#7F1F27",
+                      "euiColorVis7": "#DA3737",
+                      "euiColorVis8": "#6A4906",
+                      "euiColorVis9": "#AD7E00",
+                      "euiColorVisBase0": "#F6F9FC",
+                      "euiColorVisBehindText0": "#065B58",
+                      "euiColorVisBehindText1": "#009E99",
+                      "euiColorVisBehindText2": "#154399",
+                      "euiColorVisBehindText3": "#2476F0",
+                      "euiColorVisBehindText4": "#831652",
+                      "euiColorVisBehindText5": "#D13680",
+                      "euiColorVisBehindText6": "#7F1F27",
+                      "euiColorVisBehindText7": "#DA3737",
+                      "euiColorVisBehindText8": "#6A4906",
+                      "euiColorVisBehindText9": "#AD7E00",
+                      "euiColorVisComplementary0": "#2476F0",
+                      "euiColorVisComplementary1": "#AD7E00",
+                      "euiColorVisCool0": "#E8F1FF",
+                      "euiColorVisCool1": "#85B7FF",
+                      "euiColorVisCool2": "#1750BA",
+                      "euiColorVisDanger0": "#A71627",
+                      "euiColorVisDanger1": "#DA3737",
+                      "euiColorVisGrey0": "#CAD3E2",
+                      "euiColorVisGrey1": "#8E9FBC",
+                      "euiColorVisGrey2": "#5A6D8C",
+                      "euiColorVisGrey3": "#1D2A3E",
+                      "euiColorVisNeutral0": "#0F658A",
+                      "euiColorVisNeutral1": "#1C8CB5",
+                      "euiColorVisRisk0": "#9E3A16",
+                      "euiColorVisRisk1": "#DB541B",
+                      "euiColorVisSuccess0": "#09724D",
+                      "euiColorVisSuccess1": "#00996B",
+                      "euiColorVisText0": "#065B58",
+                      "euiColorVisText1": "#047471",
+                      "euiColorVisText2": "#154399",
+                      "euiColorVisText3": "#0B64DD",
+                      "euiColorVisText4": "#A11262",
+                      "euiColorVisText5": "#D13680",
+                      "euiColorVisText6": "#A71627",
+                      "euiColorVisText7": "#DA3737",
+                      "euiColorVisText8": "#6A4906",
+                      "euiColorVisText9": "#966B03",
+                      "euiColorVisWarm0": "#FFE8E5",
+                      "euiColorVisWarm1": "#FC9188",
+                      "euiColorVisWarm2": "#A71627",
+                      "euiColorVisWarning0": "#825803",
+                      "euiColorVisWarning1": "#AD7E00",
+                    },
+                  },
+                  "ghost": "#FFFFFF",
+                  "ink": "#000000",
+                },
+              },
+            },
+            "size": Object {
+              "base": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "l": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "m": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "s": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xs": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxs": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxxl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+              "xxxxl": Computed {
+                "computer": [Function],
+                "dependencies": Array [],
+              },
+            },
           }
-          valueOfSelected="none"
-        />
-      </EuiFormRow>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-</Fragment>
+        }
+      >
+        <EuiCacheProvider>
+          <EuiGlobalStyles />
+        </EuiCacheProvider>
+        <EuiCacheProvider>
+          <EuiUtilityClasses />
+        </EuiCacheProvider>
+        <EuiComponentDefaultsProvider>
+          <SimplePrivilegeSection
+            canCustomizeSubFeaturePrivileges={true}
+            editable={true}
+            features={
+              Array [
+                SecuredFeature {
+                  "config": Object {
+                    "app": Array [
+                      "app",
+                    ],
+                    "category": Object {
+                      "id": "foo",
+                      "label": "foo",
+                    },
+                    "id": "feature1",
+                    "name": "Feature 1",
+                    "privileges": Object {
+                      "all": Object {
+                        "app": Array [
+                          "app",
+                        ],
+                        "savedObject": Object {
+                          "all": Array [
+                            "foo",
+                          ],
+                          "read": Array [],
+                        },
+                        "ui": Array [
+                          "app-ui",
+                        ],
+                      },
+                      "read": Object {
+                        "app": Array [
+                          "app",
+                        ],
+                        "savedObject": Object {
+                          "all": Array [],
+                          "read": Array [],
+                        },
+                        "ui": Array [
+                          "app-ui",
+                        ],
+                      },
+                    },
+                  },
+                  "minimalPrimaryFeaturePrivileges": Array [
+                    PrimaryFeaturePrivilege {
+                      "actions": Array [],
+                      "config": Object {
+                        "app": Array [
+                          "app",
+                        ],
+                        "savedObject": Object {
+                          "all": Array [
+                            "foo",
+                          ],
+                          "read": Array [],
+                        },
+                        "ui": Array [
+                          "app-ui",
+                        ],
+                      },
+                      "id": "minimal_all",
+                    },
+                    PrimaryFeaturePrivilege {
+                      "actions": Array [],
+                      "config": Object {
+                        "app": Array [
+                          "app",
+                        ],
+                        "savedObject": Object {
+                          "all": Array [],
+                          "read": Array [],
+                        },
+                        "ui": Array [
+                          "app-ui",
+                        ],
+                      },
+                      "id": "minimal_read",
+                    },
+                  ],
+                  "primaryFeaturePrivileges": Array [
+                    PrimaryFeaturePrivilege {
+                      "actions": Array [],
+                      "config": Object {
+                        "app": Array [
+                          "app",
+                        ],
+                        "savedObject": Object {
+                          "all": Array [
+                            "foo",
+                          ],
+                          "read": Array [],
+                        },
+                        "ui": Array [
+                          "app-ui",
+                        ],
+                      },
+                      "id": "all",
+                    },
+                    PrimaryFeaturePrivilege {
+                      "actions": Array [],
+                      "config": Object {
+                        "app": Array [
+                          "app",
+                        ],
+                        "savedObject": Object {
+                          "all": Array [],
+                          "read": Array [],
+                        },
+                        "ui": Array [
+                          "app-ui",
+                        ],
+                      },
+                      "id": "read",
+                    },
+                  ],
+                  "securedSubFeatures": Array [],
+                  "subFeaturePrivileges": Array [],
+                  "subFeatures": Array [],
+                },
+              ]
+            }
+            kibanaPrivileges={
+              KibanaPrivileges {
+                "feature": Map {
+                  "feature1" => SecuredFeature {
+                    "config": Object {
+                      "app": Array [
+                        "app",
+                      ],
+                      "category": Object {
+                        "id": "foo",
+                        "label": "foo",
+                      },
+                      "id": "feature1",
+                      "name": "Feature 1",
+                      "privileges": Object {
+                        "all": Object {
+                          "app": Array [
+                            "app",
+                          ],
+                          "savedObject": Object {
+                            "all": Array [
+                              "foo",
+                            ],
+                            "read": Array [],
+                          },
+                          "ui": Array [
+                            "app-ui",
+                          ],
+                        },
+                        "read": Object {
+                          "app": Array [
+                            "app",
+                          ],
+                          "savedObject": Object {
+                            "all": Array [],
+                            "read": Array [],
+                          },
+                          "ui": Array [
+                            "app-ui",
+                          ],
+                        },
+                      },
+                    },
+                    "minimalPrimaryFeaturePrivileges": Array [
+                      PrimaryFeaturePrivilege {
+                        "actions": Array [],
+                        "config": Object {
+                          "app": Array [
+                            "app",
+                          ],
+                          "savedObject": Object {
+                            "all": Array [
+                              "foo",
+                            ],
+                            "read": Array [],
+                          },
+                          "ui": Array [
+                            "app-ui",
+                          ],
+                        },
+                        "id": "minimal_all",
+                      },
+                      PrimaryFeaturePrivilege {
+                        "actions": Array [],
+                        "config": Object {
+                          "app": Array [
+                            "app",
+                          ],
+                          "savedObject": Object {
+                            "all": Array [],
+                            "read": Array [],
+                          },
+                          "ui": Array [
+                            "app-ui",
+                          ],
+                        },
+                        "id": "minimal_read",
+                      },
+                    ],
+                    "primaryFeaturePrivileges": Array [
+                      PrimaryFeaturePrivilege {
+                        "actions": Array [
+                          "*",
+                        ],
+                        "config": Object {
+                          "app": Array [
+                            "app",
+                          ],
+                          "savedObject": Object {
+                            "all": Array [
+                              "foo",
+                            ],
+                            "read": Array [],
+                          },
+                          "ui": Array [
+                            "app-ui",
+                          ],
+                        },
+                        "id": "all",
+                      },
+                      PrimaryFeaturePrivilege {
+                        "actions": Array [
+                          "read",
+                        ],
+                        "config": Object {
+                          "app": Array [
+                            "app",
+                          ],
+                          "savedObject": Object {
+                            "all": Array [],
+                            "read": Array [],
+                          },
+                          "ui": Array [
+                            "app-ui",
+                          ],
+                        },
+                        "id": "read",
+                      },
+                    ],
+                    "securedSubFeatures": Array [],
+                    "subFeaturePrivileges": Array [],
+                    "subFeatures": Array [],
+                  },
+                },
+                "global": Map {},
+                "spaces": Map {},
+              }
+            }
+            onChange={[MockFunction]}
+            role={
+              Object {
+                "elasticsearch": Object {
+                  "cluster": Array [
+                    "manage",
+                  ],
+                  "indices": Array [],
+                  "run_as": Array [],
+                },
+                "kibana": Array [],
+                "name": "",
+              }
+            }
+          />
+        </EuiComponentDefaultsProvider>
+      </EuiThemeProvider>
+    </EuiSystemDefaultsProvider>
+  </EuiCacheProvider>
+</EuiProviderNestedCheck>
 `;
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/simple_privilege_section.test.tsx b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/simple_privilege_section.test.tsx
index 3ca7cf5c8b92f..f4977d37977ed 100644
--- a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/simple_privilege_section.test.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/privileges/kibana/simple_privilege_section/simple_privilege_section.test.tsx
@@ -6,7 +6,7 @@
  */
 
 import type { EuiButtonGroupProps } from '@elastic/eui';
-import { EuiButtonGroup, EuiComboBox, EuiSuperSelect } from '@elastic/eui';
+import { EuiButtonGroup, EuiComboBox, EuiProvider, EuiSuperSelect } from '@elastic/eui';
 import React from 'react';
 
 import type { Role } from '@kbn/security-plugin-types-common';
@@ -16,6 +16,12 @@ import { mountWithIntl, shallowWithIntl } from '@kbn/test-jest-helpers';
 import { SimplePrivilegeSection } from './simple_privilege_section';
 import { UnsupportedSpacePrivilegesWarning } from './unsupported_space_privileges_warning';
 
+const shallowWithThemeProvider = (node: React.ReactElement) =>
+  shallowWithIntl(<EuiProvider>{node}</EuiProvider>);
+
+const mountWithThemeProvider = (node: React.ReactElement) =>
+  mountWithIntl(<EuiProvider>{node}</EuiProvider>);
+
 const buildProps = (customProps: any = {}) => {
   const features = [
     new SecuredFeature({
@@ -83,12 +89,14 @@ const buildProps = (customProps: any = {}) => {
 
 describe('<SimplePrivilegeForm>', () => {
   it('renders without crashing', () => {
-    expect(shallowWithIntl(<SimplePrivilegeSection {...buildProps()} />)).toMatchSnapshot();
+    expect(
+      shallowWithThemeProvider(<SimplePrivilegeSection {...buildProps()} />)
+    ).toMatchSnapshot();
   });
 
   it('displays "none" when no privilege is selected', () => {
     const props = buildProps();
-    const wrapper = shallowWithIntl(<SimplePrivilegeSection {...props} />);
+    const wrapper = mountWithThemeProvider(<SimplePrivilegeSection {...props} />);
     const selector = wrapper.find(EuiSuperSelect);
     expect(selector.props()).toMatchObject({
       valueOfSelected: 'none',
@@ -111,7 +119,7 @@ describe('<SimplePrivilegeForm>', () => {
         ],
       },
     });
-    const wrapper = shallowWithIntl(<SimplePrivilegeSection {...props} />);
+    const wrapper = mountWithThemeProvider(<SimplePrivilegeSection {...props} />);
     const selector = wrapper.find(EuiSuperSelect);
     expect(selector.props()).toMatchObject({
       valueOfSelected: 'custom',
@@ -132,7 +140,7 @@ describe('<SimplePrivilegeForm>', () => {
         ],
       },
     });
-    const wrapper = shallowWithIntl(<SimplePrivilegeSection {...props} />);
+    const wrapper = mountWithThemeProvider(<SimplePrivilegeSection {...props} />);
     const selector = wrapper.find(EuiSuperSelect);
     expect(selector.props()).toMatchObject({
       valueOfSelected: 'read',
@@ -154,7 +162,7 @@ describe('<SimplePrivilegeForm>', () => {
         ],
       },
     });
-    const wrapper = shallowWithIntl(<SimplePrivilegeSection {...props} />);
+    const wrapper = mountWithThemeProvider(<SimplePrivilegeSection {...props} />);
     const selector = wrapper.find(EuiComboBox);
     expect(selector.props()).toMatchObject({
       isDisabled: true,
@@ -165,7 +173,7 @@ describe('<SimplePrivilegeForm>', () => {
 
   it('fires its onChange callback when the privilege changes', () => {
     const props = buildProps();
-    const wrapper = mountWithIntl(<SimplePrivilegeSection {...props} />);
+    const wrapper = mountWithThemeProvider(<SimplePrivilegeSection {...props} />);
     const selector = wrapper.find(EuiSuperSelect);
     (selector.props() as any).onChange('all');
 
@@ -188,8 +196,17 @@ describe('<SimplePrivilegeForm>', () => {
           role,
         });
       },
+      role: {
+        kibana: [
+          {
+            spaces: ['*'],
+            base: [],
+            feature: {},
+          },
+        ],
+      },
     });
-    const wrapper = mountWithIntl(<SimplePrivilegeSection {...props} />);
+    const wrapper = mountWithThemeProvider(<SimplePrivilegeSection {...props} />);
     const selector = wrapper.find(EuiSuperSelect);
     (selector.props() as any).onChange('custom');
 
@@ -242,7 +259,7 @@ describe('<SimplePrivilegeForm>', () => {
         ],
       },
     });
-    const wrapper = mountWithIntl(<SimplePrivilegeSection {...props} />);
+    const wrapper = mountWithThemeProvider(<SimplePrivilegeSection {...props} />);
     expect(wrapper.find(UnsupportedSpacePrivilegesWarning)).toHaveLength(1);
   });
 });
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.scss b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.scss
deleted file mode 100644
index 3a8ce0166b359..0000000000000
--- a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.secSpacesPopoverList__buttonText {
-  font-size: $euiFontSizeXS;
-}
diff --git a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx
index acc71203dfff1..31683cb95a7f7 100644
--- a/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx
+++ b/x-pack/platform/plugins/shared/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx
@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import './spaces_popover_list.scss';
-
 import type { EuiSelectableOption } from '@elastic/eui';
 import {
   EuiButtonEmpty,
@@ -16,8 +14,10 @@ import {
   EuiPopoverTitle,
   EuiSelectable,
   EuiText,
+  useEuiFontSize,
 } from '@elastic/eui';
-import React, { Component, memo, Suspense } from 'react';
+import { css } from '@emotion/react';
+import React, { Component, type FC, memo, Suspense } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -35,6 +35,26 @@ interface State {
   isPopoverOpen: boolean;
 }
 
+interface ButtonProps {
+  onButtonClick: () => void;
+  buttonText: string;
+}
+
+const EmptyButton: FC<ButtonProps> = ({ onButtonClick, buttonText }) => {
+  const { fontSize } = useEuiFontSize('xs');
+  return (
+    <EuiButtonEmpty size={'xs'} onClick={onButtonClick}>
+      <span
+        css={css`
+          font-size: ${fontSize};
+        `}
+      >
+        {buttonText}
+      </span>
+    </EuiButtonEmpty>
+  );
+};
+
 export class SpacesPopoverList extends Component<Props, State> {
   public state = {
     allowSpacesListFocus: false,
@@ -43,9 +63,7 @@ export class SpacesPopoverList extends Component<Props, State> {
 
   public render() {
     const button = (
-      <EuiButtonEmpty size={'xs'} onClick={this.onButtonClick}>
-        <span className="secSpacesPopoverList__buttonText">{this.props.buttonText}</span>
-      </EuiButtonEmpty>
+      <EmptyButton onButtonClick={this.onButtonClick} buttonText={this.props.buttonText} />
     );
 
     return (
@@ -77,7 +95,6 @@ export class SpacesPopoverList extends Component<Props, State> {
 
     return (
       <EuiSelectable
-        className={'spcMenu'}
         title={i18n.translate('xpack.security.management.editRole.spacesPopoverList.popoverTitle', {
           defaultMessage: 'Spaces',
         })}
diff --git a/x-pack/platform/plugins/shared/security/tsconfig.json b/x-pack/platform/plugins/shared/security/tsconfig.json
index 70785de4f4f00..d410f6db2af51 100644
--- a/x-pack/platform/plugins/shared/security/tsconfig.json
+++ b/x-pack/platform/plugins/shared/security/tsconfig.json
@@ -1,14 +1,14 @@
 {
   "extends": "../../../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "target/types",
+    "outDir": "target/types"
   },
   "include": [
     "common/**/*",
     "public/**/*",
     "server/**/*",
     "__mocks__/**/*",
-    "../../../../../typings/**/*",
+    "../../../../../typings/emotion.d.ts"
   ],
   "kbn_references": [
     "@kbn/cloud-plugin",
@@ -95,9 +95,7 @@
     "@kbn/react-kibana-context-theme",
     "@kbn/css-utils",
     "@kbn/licensing-types",
-    "@kbn/lazy-object",
+    "@kbn/lazy-object"
   ],
-  "exclude": [
-    "target/**/*",
-  ]
+  "exclude": ["target/**/*"]
 }
diff --git a/x-pack/platform/test/functional/page_objects/security_page.ts b/x-pack/platform/test/functional/page_objects/security_page.ts
index 22ea9cd71762b..063e04030de6b 100644
--- a/x-pack/platform/test/functional/page_objects/security_page.ts
+++ b/x-pack/platform/test/functional/page_objects/security_page.ts
@@ -169,7 +169,7 @@ export class SecurityPageObject extends FtrService {
         if (alert && alert.accept) {
           await alert.accept();
         }
-        return await this.find.existsByDisplayedByCssSelector('.login-form');
+        return await this.isLoginFormVisible();
       }
     );
   }
@@ -307,7 +307,7 @@ export class SecurityPageObject extends FtrService {
     { waitForLoginPage }: { waitForLoginPage: boolean } = { waitForLoginPage: true }
   ) {
     this.log.debug('SecurityPage.forceLogout');
-    if (await this.find.existsByDisplayedByCssSelector('.login-form', 100)) {
+    if (await this.isLoginFormVisible()) {
       this.log.debug('Already on the login page, not forcing anything');
       return;
     }