CINXE.COM
[Meta][CSS-in-JS] Switching to `emotion` · Issue #3912 · elastic/eui · GitHub
<!DOCTYPE html> <html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark" data-a11y-animated-images="system" data-a11y-link-underlines="true" > <head> <meta charset="utf-8"> <link rel="dns-prefetch" href="https://github.githubassets.com"> <link rel="dns-prefetch" href="https://avatars.githubusercontent.com"> <link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com"> <link rel="dns-prefetch" href="https://user-images.githubusercontent.com/"> <link rel="preconnect" href="https://github.githubassets.com" crossorigin> <link rel="preconnect" href="https://avatars.githubusercontent.com"> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-74231a1f3bbb.css" /><link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-8a995f0bacd4.css" /><link data-color-theme="dark_dimmed" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_dimmed-f37fb7684b1f.css" /><link data-color-theme="dark_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_high_contrast-9ac301c3ebe5.css" /><link data-color-theme="dark_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_colorblind-cd826e8636dc.css" /><link data-color-theme="light_colorblind" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_colorblind-f91b0f603451.css" /><link data-color-theme="light_high_contrast" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_high_contrast-83beb16e0ecf.css" /><link data-color-theme="light_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/light_tritanopia-6e122dab64fc.css" /><link data-color-theme="dark_tritanopia" crossorigin="anonymous" media="all" rel="stylesheet" data-href="https://github.githubassets.com/assets/dark_tritanopia-18119e682df0.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-225433424a87.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-cba26849680f.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-03f97e65e478.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/github-ea73c9cb5377.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/repository-4fce88777fa8.css" /> <script type="application/json" id="client-env">{"locale":"en","featureFlags":["copilot_immersive_issue_preview","copilot_new_references_ui","copilot_chat_repo_custom_instructions_preview","copilot_no_floating_button","copilot_topics_as_references","copilot_read_shared_conversation","copilot_duplicate_thread","copilot_buffered_streaming","dotcom_chat_client_side_skills","experimentation_azure_variant_endpoint","failbot_handle_non_errors","geojson_azure_maps","ghost_pilot_confidence_truncation_25","ghost_pilot_confidence_truncation_40","github_models_gateway_parse_params","github_models_o3_mini_streaming","insert_before_patch","issues_react_remove_placeholders","issues_react_blur_item_picker_on_close","issues_advanced_search_nested_ownership_filters","issues_dashboard_no_redirects","marketing_pages_search_explore_provider","primer_react_css_modules_ga","react_data_router_pull_requests","react_override_default_key","remove_child_patch","sample_network_conn_type","swp_enterprise_contact_form","site_proxima_australia_update","viewscreen_sandbox","issues_react_create_milestone","issues_react_cache_fix_workaround","lifecycle_label_name_updates","copilot_task_oriented_assistive_prompts","issue_types_prevent_private_type_creation","refresh_image_video_src","react_router_dispose_on_disconnect","codespaces_prebuild_region_target_update","turbo_app_id_restore","copilot_code_review_sign_up_closed"]}</script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/wp-runtime-da4ebdfa4a04.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover_js-9da652f58479.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_arianotify-polyfill_ariaNotify-polyfill_js-node_modules_github_mi-3abb8f-46b9f4874d95.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_failbot_failbot_ts-952d624642a1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/environment-f04cb2a9fc8c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_primer_behaviors_dist_esm_index_mjs-0dbb79f97f8f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_selector-observer_dist_index_esm_js-f690fd9ae3d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_relative-time-element_dist_index_js-62d275b7ddd9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_text-expander-element_dist_index_js-78748950cb0c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_auto-complete-element_dist_index_js-node_modules_github_catalyst_-8e9f78-a90ac05d2469.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_filter-input-element_dist_index_js-node_modules_github_remote-inp-b5f1d7-a1760ffda83d.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_markdown-toolbar-element_dist_index_js-ceef33f593fa.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_file-attachment-element_dist_index_js-node_modules_primer_view-co-c44a69-efa32db3a345.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/github-elements-394f8eb34f19.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/element-registry-0fd720babc23.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_braintree_browser-detection_dist_browser-detection_js-node_modules_githu-2906d7-2a07a295af40.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lit-html_lit-html_js-be8cb88f481b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_morphdom_dist_morphdom-e-7c534c-a4a1922eb55f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_turbo_dist_turbo_es2017-esm_js-a03ee12d659a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-893f9f-b6294cf703b7.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_color-convert_index_js-e3180fe3bcb3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_session-resume_-947061-e7a6c4a19f98.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_updatable-content_updatable-content_ts-62f3e9c52ece.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_task-list_ts-app_assets_modules_github_sso_ts-ui_packages-900dde-768abe60b1f8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_sticky-scroll-into-view_ts-3e000c5d31a9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_ajax-error_ts-app_assets_modules_github_behaviors_include-87a4ae-eda74b9de9cd.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/app_assets_modules_github_behaviors_commenting_edit_ts-app_assets_modules_github_behaviors_ht-83c235-e429cff6ceb1.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/behaviors-c92ce7c6a557.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_delegated-events_dist_index_js-node_modules_github_catalyst_lib_index_js-f6223d90c7ba.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-global-01e85cd1be94.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/primer-react-99bc880bd101.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-core-56004cde4e29.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/react-lib-f1bca44e0926.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/octicons-react-cf2f2ab8dab4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_emotion_is-prop-valid_dist_emotion-is-prop-valid_esm_js-node_modules_emo-434cb6-95f395b76298.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_mini-throttle_dist_index_js-node_modules_stacktrace-parser_dist_s-e7dcdd-9a233856b02c.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_oddbird_popover-polyfill_dist_popover-fn_js-55fea94174bf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dompurify_dist_purify_es_mjs-dd1d3ea6a436.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lodash-es__Stack_js-node_modules_lodash-es__Uint8Array_js-node_modules_l-4faaa6-4a736fde5c2f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_date-fns_format_mjs-6e4d0f904632.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_date-fns_addWeeks_mjs-node_modules_date-fns_addYears_mjs-node_modules_da-827f4f-cf37cd06c24f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_react-relay_index_js-2d54b665e445.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_clsx_dist_clsx_m_js-node_modules_focus-visible_dist_focus-visible_js-nod-e1e724-587ac117d2de.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hotkey_dist_index_js-node_modules_date-fns_getDaysInMonth_mjs-nod-70c11b-75afe0f5c344.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_lodash-es__baseIsEqual_js-8929eb9718d5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_hydro-analytics-client_dist_analytics-client_js-node_modules_gith-e0180f-d7cbd4bf80e8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_combobox-nav_dist_index_js-node_modules_github_g-emoji-element_di-24c074-57709bcf92f3.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_react-relay_hooks_js-node_modules_color2k_dist_index_exports_import_es_m-e8b6bb-d8ead802a1fd.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_dnd-kit_modifiers_dist_modifiers_esm_js-node_modules_dnd-kit_sortable_di-fe32b5-953cbe0ec5cf.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_quote-selection_dist_index_js-node_modules_github_jtml_lib_index_-adcc7e-14d496a6175f.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_aria-live_aria-live_ts-ui_packages_history_history_ts-ui_packages_promise-with-re-01dc80-b13b6c1d97b0.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_paths_index_ts-04e7ec2d63d9.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_ui-commands_ui-commands_ts-a91da5bca335.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_list-view_src_ListView_ListView_tsx-ui_packages_safe-html_SafeHTML_tsx-51c336a0c9f4.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_list-view_src_ListItem_ListItem_tsx-ui_packages_list-view_src_ListItem_Title_tsx-e9e6a7840430.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_date-picker_date-picker_ts-ui_packages_github-avatar_GitHubAvatar_tsx-5052e1c52fa2.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_item-picker_constants_labels_ts-ui_packages_item-picker_constants_values_ts-ui_pa-163a9a-ad68309ed9f8.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_item-picker_components_RepositoryPicker_tsx-3840f58896cc.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_app-uuid_app-uuid_ts-ui_packages_document-metadata_document-metadata_ts-ui_packag-0663c3-b0f87c5856f0.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_filter_providers_index_ts-c6dab77389ee.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_comment-box_api_file-upload_ts-ui_packages_comment-box_api_preview_ts-ui_packages-2c5e84-e37f38cd0014.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_issue-create_dialog_CreateIssueDialogEntry_tsx-1dfce5b68cb6.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_drag-and-drop_drag-and-drop_ts-5b98bdc4f5c5.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_signed-commit-badge_index_ts-ui_packages_use-navigate_use-navigate_ts-76280d232ec6.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_query-builder-element_query-builder-element_ts-b492d6900d5e.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_item-picker_components_PullRequestAndBranchPicker_tsx-2e5f57a7e421.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_use-client-value_use-client-value_ts-ui_packages_issue-viewer_components_IssueVie-d05a8f-02906720107a.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/ui_packages_issue-viewer_constants_hotkeys_ts-ui_packages_list-view-items-issues-prs_componen-f3edb7-a5c2ea0da44b.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/issues-react-6043e3d7c20d.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-react.7110f8bed75b67122d7a.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/ui_packages_use-client-value_use-client-value_ts-ui_packages_issue-viewer_components_IssueVie-d05a8f.db5091610514094ca5f8.module.css" /> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/issues-react.53dd80bc27cea59c634f.module.css" /> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/notifications-subscriptions-menu-0e7e3f0bfc4b.js"></script> <link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/notifications-subscriptions-menu.1bcff9205c241e99cff2.module.css" /> <title>[Meta][CSS-in-JS] Switching to `emotion` · Issue #3912 · elastic/eui · GitHub</title> <meta name="route-pattern" content="/_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format)" data-turbo-transient> <meta name="route-controller" content="voltron_issues_fragments" data-turbo-transient> <meta name="route-action" content="issue_layout" data-turbo-transient> <meta name="current-catalog-service-hash" content="81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114"> <meta name="request-id" content="8CBA:108047:FB380A:11606A9:67EE5C27" data-pjax-transient="true"/><meta name="html-safe-nonce" content="854008d3666492a7d354d473986f1ab9e951fe8f9a66fc8bd6d7b01a13f53e9a" data-pjax-transient="true"/><meta name="visitor-payload" content="eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiI4Q0JBOjEwODA0NzpGQjM4MEE6MTE2MDZBOTo2N0VFNUMyNyIsInZpc2l0b3JfaWQiOiI0MTMyMTEyODA1MDkxMzE4MTUiLCJyZWdpb25fZWRnZSI6InNvdXRoZWFzdGFzaWEiLCJyZWdpb25fcmVuZGVyIjoic291dGhlYXN0YXNpYSJ9" data-pjax-transient="true"/><meta name="visitor-hmac" content="fcba0173ee3e98d47adbc60db9429d8b0e60c1e1443963300d2ea13503d673c3" data-pjax-transient="true"/> <meta name="hovercard-subject-tag" content="issue:678713934" data-turbo-transient> <meta name="github-keyboard-shortcuts" content="repository,issues,copilot" data-turbo-transient="true" /> <meta name="selected-link" value="repo_issues" data-turbo-transient> <link rel="assets" href="https://github.githubassets.com/"> <meta name="google-site-verification" content="Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I"> <meta name="octolytics-url" content="https://collector.github.com/github/collect" /> <meta name="analytics-location" content="/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout" data-turbo-transient="true" /> <meta name="user-login" content=""> <meta name="viewport" content="width=device-width"> <meta name="description" content="This is a meta ticket to discuss the rollout plan of the CSS in JS solution (Emotion). It is for documenting the expected upgrade process both within EUI and by consuming applications, and being transparent about our timeline. (Tentative..."> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub"> <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub"> <meta property="fb:app_id" content="1401488693436528"> <meta name="apple-itunes-app" content="app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/elastic/eui/3912/issue_layout" /> <meta name="twitter:image" content="https://opengraph.githubassets.com/eb515f8359b10e37e9fc5e3ee6aa2df806c1c2e2831ca17f7a4a2430ad733208/elastic/eui/issues/3912" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content="[Meta][CSS-in-JS] Switching to `emotion` · Issue #3912 · elastic/eui" /><meta name="twitter:description" content="This is a meta ticket to discuss the rollout plan of the CSS in JS solution (Emotion). It is for documenting the expected upgrade process both within EUI and by consuming applications, and being tr..." /> <meta property="og:image" content="https://opengraph.githubassets.com/eb515f8359b10e37e9fc5e3ee6aa2df806c1c2e2831ca17f7a4a2430ad733208/elastic/eui/issues/3912" /><meta property="og:image:alt" content="This is a meta ticket to discuss the rollout plan of the CSS in JS solution (Emotion). It is for documenting the expected upgrade process both within EUI and by consuming applications, and being tr..." /><meta property="og:image:width" content="1200" /><meta property="og:image:height" content="600" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="[Meta][CSS-in-JS] Switching to `emotion` · Issue #3912 · elastic/eui" /><meta property="og:url" content="https://github.com/elastic/eui/issues/3912" /><meta property="og:description" content="This is a meta ticket to discuss the rollout plan of the CSS in JS solution (Emotion). It is for documenting the expected upgrade process both within EUI and by consuming applications, and being tr..." /><meta property="og:author:username" content="cchaos" /> <meta name="hostname" content="github.com"> <meta name="expected-hostname" content="github.com"> <meta http-equiv="x-pjax-version" content="3f35d680450bd65d06d7f9125011f427f230a04132d12921af2c8764aa0ebe00" data-turbo-track="reload"> <meta http-equiv="x-pjax-csp-version" content="e26f9f0ba624ee85cc7ac057d8faa8618a4f25a85eab052c33d018ac0f6b1a46" data-turbo-track="reload"> <meta http-equiv="x-pjax-css-version" content="3880f621a6450d86227686dafe66b79bb840ae1d588507e3f013719db633d34a" data-turbo-track="reload"> <meta http-equiv="x-pjax-js-version" content="25553ac0a78a151e68f6d8ce7ce3eb7c7952b82a38bbc969877a1c81caeb4969" data-turbo-track="reload"> <meta name="turbo-cache-control" content="no-preview" data-turbo-transient=""> <meta name="voltron-timing" value="976"> <meta name="go-import" content="github.com/elastic/eui git https://github.com/elastic/eui.git"> <meta name="octolytics-dimension-user_id" content="6764390" /><meta name="octolytics-dimension-user_login" content="elastic" /><meta name="octolytics-dimension-repository_id" content="107422373" /><meta name="octolytics-dimension-repository_nwo" content="elastic/eui" /><meta name="octolytics-dimension-repository_public" content="true" /><meta name="octolytics-dimension-repository_is_fork" content="false" /><meta name="octolytics-dimension-repository_network_root_id" content="107422373" /><meta name="octolytics-dimension-repository_network_root_nwo" content="elastic/eui" /> <meta name="turbo-body-classes" content="logged-out env-production page-responsive"> <meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats"> <meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors"> <meta name="release" content="2136cab7b89ead9947b2267161a1524828b31f0a"> <link rel="mask-icon" href="https://github.githubassets.com/assets/pinned-octocat-093da3e6fa40.svg" color="#000000"> <link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://github.githubassets.com/favicons/favicon.png"> <link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://github.githubassets.com/favicons/favicon.svg" data-base-href="https://github.githubassets.com/favicons/favicon"> <meta name="theme-color" content="#1e2327"> <meta name="color-scheme" content="light dark" /> <link rel="manifest" href="/manifest.json" crossOrigin="use-credentials"> </head> <body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div data-turbo-body class="logged-out env-production page-responsive" style="word-wrap: break-word;"> <div class="position-relative header-wrapper js-header-wrapper "> <a href="#start-of-content" data-skip-target-assigned="false" class="px-2 py-4 color-bg-accent-emphasis color-fg-on-emphasis show-on-focus js-skip-to-content">Skip to content</a> <span data-view-component="true" class="progress-pjax-loader Progress position-fixed width-full"> <span style="width: 0%;" data-view-component="true" class="Progress-item progress-pjax-loader-bar left-0 top-0 color-bg-accent-emphasis"></span> </span> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/keyboard-shortcuts-dialog-1edadb4bd04c.js"></script> <react-partial partial-name="keyboard-shortcuts-dialog" data-ssr="false" data-attempted-ssr="false" > <script type="application/json" data-target="react-partial.embeddedData">{"props":{"docsUrl":"https://docs.github.com/get-started/accessibility/keyboard-shortcuts"}}</script> <div data-target="react-partial.reactRoot"></div> </react-partial> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/vendors-node_modules_github_remote-form_dist_index_js-node_modules_delegated-events_dist_inde-94fd67-4898d1bf4b51.js"></script> <script crossorigin="anonymous" defer="defer" type="application/javascript" src="https://github.githubassets.com/assets/sessions-45d6658f8b6b.js"></script> <header class="HeaderMktg header-logged-out js-details-container js-header Details f4 py-3" role="banner" data-is-top="true" data-color-mode=light data-light-theme=light data-dark-theme=dark> <h2 class="sr-only">Navigation Menu</h2> <button type="button" class="HeaderMktg-backdrop d-lg-none border-0 position-fixed top-0 left-0 width-full height-full js-details-target" aria-label="Toggle navigation"> <span class="d-none">Toggle navigation</span> </button> <div class="d-flex flex-column flex-lg-row flex-items-center px-3 px-md-4 px-lg-5 height-full position-relative z-1"> <div class="d-flex flex-justify-between flex-items-center width-full width-lg-auto"> <div class="flex-1"> <button aria-label="Toggle navigation" aria-expanded="false" type="button" data-view-component="true" class="js-details-target js-nav-padding-recalculate js-header-menu-toggle Button--link Button--medium Button d-lg-none color-fg-inherit p-1"> <span class="Button-content"> <span class="Button-label"><div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div> <div class="HeaderMenu-toggle-bar rounded my-1"></div></span> </span> </button> </div> <a class="mr-lg-3 color-fg-inherit flex-order-2 js-prevent-focus-on-mobile-nav" href="/" aria-label="Homepage" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Logomark;ref_loc:Header"}"> <svg height="32" aria-hidden="true" viewBox="0 0 24 24" version="1.1" width="32" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12 1C5.9225 1 1 5.9225 1 12C1 16.8675 4.14875 20.9787 8.52125 22.4362C9.07125 22.5325 9.2775 22.2025 9.2775 21.9137C9.2775 21.6525 9.26375 20.7862 9.26375 19.865C6.5 20.3737 5.785 19.1912 5.565 18.5725C5.44125 18.2562 4.905 17.28 4.4375 17.0187C4.0525 16.8125 3.5025 16.3037 4.42375 16.29C5.29 16.2762 5.90875 17.0875 6.115 17.4175C7.105 19.0812 8.68625 18.6137 9.31875 18.325C9.415 17.61 9.70375 17.1287 10.02 16.8537C7.5725 16.5787 5.015 15.63 5.015 11.4225C5.015 10.2262 5.44125 9.23625 6.1425 8.46625C6.0325 8.19125 5.6475 7.06375 6.2525 5.55125C6.2525 5.55125 7.17375 5.2625 9.2775 6.67875C10.1575 6.43125 11.0925 6.3075 12.0275 6.3075C12.9625 6.3075 13.8975 6.43125 14.7775 6.67875C16.8813 5.24875 17.8025 5.55125 17.8025 5.55125C18.4075 7.06375 18.0225 8.19125 17.9125 8.46625C18.6138 9.23625 19.04 10.2125 19.04 11.4225C19.04 15.6437 16.4688 16.5787 14.0213 16.8537C14.42 17.1975 14.7638 17.8575 14.7638 18.8887C14.7638 20.36 14.75 21.5425 14.75 21.9137C14.75 22.2025 14.9563 22.5462 15.5063 22.4362C19.8513 20.9787 23 16.8537 23 12C23 5.9225 18.0775 1 12 1Z"></path> </svg> </a> <div class="flex-1 flex-order-2 text-right"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Felastic%2Feui%2Fissues%2F3912" class="HeaderMenu-link HeaderMenu-button d-inline-flex d-lg-none flex-order-1 f5 no-underline border color-border-default rounded-2 px-2 py-1 color-fg-inherit js-prevent-focus-on-mobile-nav" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/elastic/eui/issues/3912","user_id":null}}" data-hydro-click-hmac="dabe0a658fbb42726c3fa6ca5cd992280a56d5d5bec355ca49d62996d3ce85fa" data-analytics-event="{"category":"Marketing nav","action":"click to Sign in","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> </div> <div class="HeaderMenu js-header-menu height-fit position-lg-relative d-lg-flex flex-column flex-auto top-0"> <div class="HeaderMenu-wrapper d-flex flex-column flex-self-start flex-lg-row flex-auto rounded rounded-lg-0"> <nav class="HeaderMenu-nav" aria-label="Global"> <ul class="d-lg-flex list-style-none"> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Product <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_copilot","context":"product","tag":"link","label":"github_copilot_link_product_navbar"}" href="https://github.com/features/copilot"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Copilot</div> Write better code with AI </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_advanced_security","context":"product","tag":"link","label":"github_advanced_security_link_product_navbar"}" href="https://github.com/security/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Advanced Security</div> Find and fix vulnerabilities </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"actions","context":"product","tag":"link","label":"actions_link_product_navbar"}" href="https://github.com/features/actions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-workflow color-fg-subtle mr-3"> <path d="M1 3a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v6.5a2 2 0 0 1-2 2H7v4.063C7 16.355 7.644 17 8.438 17H12.5v-2.5a2 2 0 0 1 2-2H21a2 2 0 0 1 2 2V21a2 2 0 0 1-2 2h-6.5a2 2 0 0 1-2-2v-2.5H8.437A2.939 2.939 0 0 1 5.5 15.562V11.5H3a2 2 0 0 1-2-2Zm2-.5a.5.5 0 0 0-.5.5v6.5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5ZM14.5 14a.5.5 0 0 0-.5.5V21a.5.5 0 0 0 .5.5H21a.5.5 0 0 0 .5-.5v-6.5a.5.5 0 0 0-.5-.5Z"></path> </svg> <div> <div class="color-fg-default h4">Actions</div> Automate any workflow </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"codespaces","context":"product","tag":"link","label":"codespaces_link_product_navbar"}" href="https://github.com/features/codespaces"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-codespaces color-fg-subtle mr-3"> <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z"></path><path d="M10 17.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> <div> <div class="color-fg-default h4">Codespaces</div> Instant dev environments </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"issues","context":"product","tag":"link","label":"issues_link_product_navbar"}" href="https://github.com/features/issues"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-issue-opened color-fg-subtle mr-3"> <path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Zm9.5 2a2 2 0 1 1-.001-3.999A2 2 0 0 1 12 14Z"></path> </svg> <div> <div class="color-fg-default h4">Issues</div> Plan and track work </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"code_review","context":"product","tag":"link","label":"code_review_link_product_navbar"}" href="https://github.com/features/code-review"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-review color-fg-subtle mr-3"> <path d="M10.3 6.74a.75.75 0 0 1-.04 1.06l-2.908 2.7 2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M1.5 4.25c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v12.5a1.75 1.75 0 0 1-1.75 1.75h-9.69l-3.573 3.573A1.458 1.458 0 0 1 5 21.043V18.5H3.25a1.75 1.75 0 0 1-1.75-1.75ZM3.25 4a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 .75.75v3.19l3.72-3.72a.749.749 0 0 1 .53-.22h10a.25.25 0 0 0 .25-.25V4.25a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Review</div> Manage code changes </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"discussions","context":"product","tag":"link","label":"discussions_link_product_navbar"}" href="https://github.com/features/discussions"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Discussions</div> Collaborate outside of code </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"code_search","context":"product","tag":"link","label":"code_search_link_product_navbar"}" href="https://github.com/features/code-search"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-code-square color-fg-subtle mr-3"> <path d="M10.3 8.24a.75.75 0 0 1-.04 1.06L7.352 12l2.908 2.7a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 0 1 1.06.04Zm3.44 1.06a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.908-2.7-2.908-2.7Z"></path><path d="M2 3.75C2 2.784 2.784 2 3.75 2h16.5c.966 0 1.75.784 1.75 1.75v16.5A1.75 1.75 0 0 1 20.25 22H3.75A1.75 1.75 0 0 1 2 20.25Zm1.75-.25a.25.25 0 0 0-.25.25v16.5c0 .138.112.25.25.25h16.5a.25.25 0 0 0 .25-.25V3.75a.25.25 0 0 0-.25-.25Z"></path> </svg> <div> <div class="color-fg-default h4">Code Search</div> Find more, search less </div> </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="product-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="product-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"all_features","context":"product","tag":"link","label":"all_features_link_product_navbar"}" href="https://github.com/features"> All features </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"documentation","context":"product","tag":"link","label":"documentation_link_product_navbar"}" href="https://docs.github.com"> Documentation <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"github_skills","context":"product","tag":"link","label":"github_skills_link_product_navbar"}" href="https://skills.github.com"> GitHub Skills <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"blog","context":"product","tag":"link","label":"blog_link_product_navbar"}" href="https://github.blog"> Blog <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Solutions <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 pb-lg-3 mb-3 mb-lg-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-company-size-heading">By company size</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-company-size-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"enterprises","context":"solutions","tag":"link","label":"enterprises_link_solutions_navbar"}" href="https://github.com/enterprise"> Enterprises </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"small_and_medium_teams","context":"solutions","tag":"link","label":"small_and_medium_teams_link_solutions_navbar"}" href="https://github.com/team"> Small and medium teams </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"startups","context":"solutions","tag":"link","label":"startups_link_solutions_navbar"}" href="https://github.com/enterprise/startups"> Startups </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"nonprofits","context":"solutions","tag":"link","label":"nonprofits_link_solutions_navbar"}" href="/solutions/industry/nonprofits"> Nonprofits </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-use-case-heading">By use case</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-use-case-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devsecops","context":"solutions","tag":"link","label":"devsecops_link_solutions_navbar"}" href="/solutions/use-case/devsecops"> DevSecOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"solutions","tag":"link","label":"devops_link_solutions_navbar"}" href="/solutions/use-case/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ci_cd","context":"solutions","tag":"link","label":"ci_cd_link_solutions_navbar"}" href="/solutions/use-case/ci-cd"> CI/CD </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_use_cases","context":"solutions","tag":"link","label":"view_all_use_cases_link_solutions_navbar"}" href="/solutions/use-case"> View all use cases </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="solutions-by-industry-heading">By industry</span> <ul class="list-style-none f5" aria-labelledby="solutions-by-industry-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"healthcare","context":"solutions","tag":"link","label":"healthcare_link_solutions_navbar"}" href="/solutions/industry/healthcare"> Healthcare </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"financial_services","context":"solutions","tag":"link","label":"financial_services_link_solutions_navbar"}" href="/solutions/industry/financial-services"> Financial services </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"manufacturing","context":"solutions","tag":"link","label":"manufacturing_link_solutions_navbar"}" href="/solutions/industry/manufacturing"> Manufacturing </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"government","context":"solutions","tag":"link","label":"government_link_solutions_navbar"}" href="/solutions/industry/government"> Government </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all_industries","context":"solutions","tag":"link","label":"view_all_industries_link_solutions_navbar"}" href="/solutions/industry"> View all industries </a></li> </ul> </div> </div> <div class="HeaderMenu-trailing-link rounded-bottom-2 flex-shrink-0 mt-lg-4 px-lg-4 py-4 py-lg-3 f5 text-semibold"> <a href="/solutions"> View all solutions <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-right HeaderMenu-trailing-link-icon"> <path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path> </svg> </a> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Resources <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 d-lg-flex flex-wrap dropdown-menu-wide"> <div class="HeaderMenu-column px-lg-4 border-lg-right mb-4 mb-lg-0 pr-lg-7"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-topics-heading">Topics</span> <ul class="list-style-none f5" aria-labelledby="resources-topics-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ai","context":"resources","tag":"link","label":"ai_link_resources_navbar"}" href="/resources/articles/ai"> AI </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"devops","context":"resources","tag":"link","label":"devops_link_resources_navbar"}" href="/resources/articles/devops"> DevOps </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"security","context":"resources","tag":"link","label":"security_link_resources_navbar"}" href="/resources/articles/security"> Security </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"software_development","context":"resources","tag":"link","label":"software_development_link_resources_navbar"}" href="/resources/articles/software-development"> Software Development </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"view_all","context":"resources","tag":"link","label":"view_all_link_resources_navbar"}" href="/resources/articles"> View all </a></li> </ul> </div> </div> <div class="HeaderMenu-column px-lg-4"> <div class="border-bottom pb-3 pb-lg-0 border-lg-bottom-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="resources-explore-heading">Explore</span> <ul class="list-style-none f5" aria-labelledby="resources-explore-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"learning_pathways","context":"resources","tag":"link","label":"learning_pathways_link_resources_navbar"}" href="https://resources.github.com/learn/pathways"> Learning Pathways <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"events_amp_webinars","context":"resources","tag":"link","label":"events_amp_webinars_link_resources_navbar"}" href="https://resources.github.com"> Events & Webinars <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"ebooks_amp_whitepapers","context":"resources","tag":"link","label":"ebooks_amp_whitepapers_link_resources_navbar"}" href="https://github.com/resources/whitepapers"> Ebooks & Whitepapers </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"customer_stories","context":"resources","tag":"link","label":"customer_stories_link_resources_navbar"}" href="https://github.com/customer-stories"> Customer Stories </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary Link--external" target="_blank" data-analytics-event="{"location":"navbar","action":"partners","context":"resources","tag":"link","label":"partners_link_resources_navbar"}" href="https://partner.github.com"> Partners <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-link-external HeaderMenu-external-icon color-fg-subtle"> <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path> </svg> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"executive_insights","context":"resources","tag":"link","label":"executive_insights_link_resources_navbar"}" href="https://github.com/solutions/executive-insights"> Executive Insights </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Open Source <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"github_sponsors","context":"open_source","tag":"link","label":"github_sponsors_link_open_source_navbar"}" href="/sponsors"> <div> <div class="color-fg-default h4">GitHub Sponsors</div> Fund open source developers </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"the_readme_project","context":"open_source","tag":"link","label":"the_readme_project_link_open_source_navbar"}" href="https://github.com/readme"> <div> <div class="color-fg-default h4">The ReadME Project</div> GitHub community articles </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="open-source-repositories-heading">Repositories</span> <ul class="list-style-none f5" aria-labelledby="open-source-repositories-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"topics","context":"open_source","tag":"link","label":"topics_link_open_source_navbar"}" href="https://github.com/topics"> Topics </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"trending","context":"open_source","tag":"link","label":"trending_link_open_source_navbar"}" href="https://github.com/trending"> Trending </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary" data-analytics-event="{"location":"navbar","action":"collections","context":"open_source","tag":"link","label":"collections_link_open_source_navbar"}" href="https://github.com/collections"> Collections </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <button type="button" class="HeaderMenu-link border-0 width-full width-lg-auto px-0 px-lg-2 py-lg-2 no-wrap d-flex flex-items-center flex-justify-between js-details-target" aria-expanded="false"> Enterprise <svg opacity="0.5" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down HeaderMenu-icon ml-1"> <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path> </svg> </button> <div class="HeaderMenu-dropdown dropdown-menu rounded m-0 p-0 pt-2 pt-lg-4 position-relative position-lg-absolute left-0 left-lg-n3 pb-2 pb-lg-4 px-lg-4"> <div class="HeaderMenu-column"> <div class="border-bottom pb-3 pb-lg-0 pb-lg-3 mb-3 mb-lg-0 mb-lg-3"> <ul class="list-style-none f5" > <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"enterprise_platform","context":"enterprise","tag":"link","label":"enterprise_platform_link_enterprise_navbar"}" href="/enterprise"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-stack color-fg-subtle mr-3"> <path d="M11.063 1.456a1.749 1.749 0 0 1 1.874 0l8.383 5.316a1.751 1.751 0 0 1 0 2.956l-8.383 5.316a1.749 1.749 0 0 1-1.874 0L2.68 9.728a1.751 1.751 0 0 1 0-2.956Zm1.071 1.267a.25.25 0 0 0-.268 0L3.483 8.039a.25.25 0 0 0 0 .422l8.383 5.316a.25.25 0 0 0 .268 0l8.383-5.316a.25.25 0 0 0 0-.422Z"></path><path d="M1.867 12.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path><path d="M1.867 16.324a.75.75 0 0 1 1.035-.232l8.964 5.685a.25.25 0 0 0 .268 0l8.964-5.685a.75.75 0 0 1 .804 1.267l-8.965 5.685a1.749 1.749 0 0 1-1.874 0l-8.965-5.685a.75.75 0 0 1-.231-1.035Z"></path> </svg> <div> <div class="color-fg-default h4">Enterprise platform</div> AI-powered developer platform </div> </a></li> </ul> </div> <div class="border-bottom pb-3 pb-lg-0 border-bottom-0"> <span class="d-block h4 color-fg-default my-1" id="enterprise-available-add-ons-heading">Available add-ons</span> <ul class="list-style-none f5" aria-labelledby="enterprise-available-add-ons-heading"> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"github_advanced_security","context":"enterprise","tag":"link","label":"github_advanced_security_link_enterprise_navbar"}" href="https://github.com/security/advanced-security"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-shield-check color-fg-subtle mr-3"> <path d="M16.53 9.78a.75.75 0 0 0-1.06-1.06L11 13.19l-1.97-1.97a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l5-5Z"></path><path d="m12.54.637 8.25 2.675A1.75 1.75 0 0 1 22 4.976V10c0 6.19-3.771 10.704-9.401 12.83a1.704 1.704 0 0 1-1.198 0C5.77 20.705 2 16.19 2 10V4.976c0-.758.489-1.43 1.21-1.664L11.46.637a1.748 1.748 0 0 1 1.08 0Zm-.617 1.426-8.25 2.676a.249.249 0 0 0-.173.237V10c0 5.46 3.28 9.483 8.43 11.426a.199.199 0 0 0 .14 0C17.22 19.483 20.5 15.461 20.5 10V4.976a.25.25 0 0 0-.173-.237l-8.25-2.676a.253.253 0 0 0-.154 0Z"></path> </svg> <div> <div class="color-fg-default h4">GitHub Advanced Security</div> Enterprise-grade security features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description pb-lg-3" data-analytics-event="{"location":"navbar","action":"copilot_for_business","context":"enterprise","tag":"link","label":"copilot_for_business_link_enterprise_navbar"}" href="/features/copilot/copilot-business"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-copilot color-fg-subtle mr-3"> <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"></path><path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"></path> </svg> <div> <div class="color-fg-default h4">Copilot for business</div> Enterprise-grade AI features </div> </a></li> <li> <a class="HeaderMenu-dropdown-link d-block no-underline position-relative py-2 Link--secondary d-flex flex-items-center Link--has-description" data-analytics-event="{"location":"navbar","action":"premium_support","context":"enterprise","tag":"link","label":"premium_support_link_enterprise_navbar"}" href="/premium-support"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-comment-discussion color-fg-subtle mr-3"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z"></path><path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z"></path> </svg> <div> <div class="color-fg-default h4">Premium Support</div> Enterprise-grade 24/7 support </div> </a></li> </ul> </div> </div> </div> </li> <li class="HeaderMenu-item position-relative flex-wrap flex-justify-between flex-items-center d-block d-lg-flex flex-lg-nowrap flex-lg-items-center js-details-container js-header-menu-item"> <a class="HeaderMenu-link no-underline px-0 px-lg-2 py-3 py-lg-2 d-block d-lg-inline-block" data-analytics-event="{"location":"navbar","action":"pricing","context":"global","tag":"link","label":"pricing_link_global_navbar"}" href="https://github.com/pricing">Pricing</a> </li> </ul> </nav> <div class="d-flex flex-column flex-lg-row width-full flex-justify-end flex-lg-items-center text-center mt-3 mt-lg-0 text-lg-left ml-lg-3"> <qbsearch-input class="search-input" data-scope="repo:elastic/eui" data-custom-scopes-path="/search/custom_scopes" data-delete-custom-scopes-csrf="j5jn5U7BIieb0cv3NYNJhz7diby5SAEV5icQA8pQivPg5Zk6HjbahKrCA0s2ocAEOP-x8fId75BAsrHqt9svpA" data-max-custom-scopes="10" data-header-redesign-enabled="false" data-initial-value="" data-blackbird-suggestions-path="/search/suggestions" data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations" data-current-repository="elastic/eui" data-current-org="elastic" data-current-owner="" data-logged-in="false" data-copilot-chat-enabled="false" data-nl-search-enabled="false" data-retain-scroll-position="true"> <div class="search-input-container search-with-dialog position-relative d-flex flex-row flex-items-center mr-4 rounded" data-action="click:qbsearch-input#searchInputContainerClicked" > <button type="button" class="header-search-button placeholder input-button form-control d-flex flex-1 flex-self-stretch flex-items-center no-wrap width-full py-0 pl-2 pr-0 text-left border-0 box-shadow-none" data-target="qbsearch-input.inputButton" aria-label="Search or jump to…" aria-haspopup="dialog" placeholder="Search or jump to..." data-hotkey=s,/ autocapitalize="off" data-analytics-event="{"location":"navbar","action":"searchbar","context":"global","tag":"input","label":"searchbar_input_global_navbar"}" data-action="click:qbsearch-input#handleExpand" > <div class="mr-2 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </div> <span class="flex-1" data-target="qbsearch-input.inputButtonText">Search or jump to...</span> <div class="d-flex" data-target="qbsearch-input.hotkeyIndicator"> <svg xmlns="http://www.w3.org/2000/svg" width="22" height="20" aria-hidden="true" class="mr-1"><path fill="none" stroke="#979A9C" opacity=".4" d="M3.5.5h12c1.7 0 3 1.3 3 3v13c0 1.7-1.3 3-3 3h-12c-1.7 0-3-1.3-3-3v-13c0-1.7 1.3-3 3-3z"></path><path fill="#979A9C" d="M11.8 6L8 15.1h-.9L10.8 6h1z"></path></svg> </div> </button> <input type="hidden" name="type" class="js-site-search-type-field"> <div class="Overlay--hidden " data-modal-dialog-overlay> <modal-dialog data-action="close:qbsearch-input#handleClose cancel:qbsearch-input#handleClose" data-target="qbsearch-input.searchSuggestionsDialog" role="dialog" id="search-suggestions-dialog" aria-modal="true" aria-labelledby="search-suggestions-dialog-header" data-view-component="true" class="Overlay Overlay--width-large Overlay--height-auto"> <h1 id="search-suggestions-dialog-header" class="sr-only">Search code, repositories, users, issues, pull requests...</h1> <div class="Overlay-body Overlay-body--paddingNone"> <div data-view-component="true"> <div class="search-suggestions position-fixed width-full color-shadow-large border color-fg-default color-bg-default overflow-hidden d-flex flex-column query-builder-container" style="border-radius: 12px;" data-target="qbsearch-input.queryBuilderContainer" hidden > <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="query-builder-test-form" action="" accept-charset="UTF-8" method="get"> <query-builder data-target="qbsearch-input.queryBuilder" id="query-builder-query-builder-test" data-filter-key=":" data-view-component="true" class="QueryBuilder search-query-builder"> <div class="FormControl FormControl--fullWidth"> <label id="query-builder-test-label" for="query-builder-test" class="FormControl-label sr-only"> Search </label> <div class="QueryBuilder-StyledInput width-fit " data-target="query-builder.styledInput" > <span id="query-builder-test-leadingvisual-wrap" class="FormControl-input-leadingVisualWrap QueryBuilder-leadingVisualWrap"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search FormControl-input-leadingVisual"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </span> <div data-target="query-builder.styledInputContainer" class="QueryBuilder-StyledInputContainer"> <div aria-hidden="true" class="QueryBuilder-StyledInputContent" data-target="query-builder.styledInputContent" ></div> <div class="QueryBuilder-InputWrapper"> <div aria-hidden="true" class="QueryBuilder-Sizer" data-target="query-builder.sizer"></div> <input id="query-builder-test" name="query-builder-test" value="" autocomplete="off" type="text" role="combobox" spellcheck="false" aria-expanded="false" aria-describedby="validation-4b708a4c-aeab-4bb8-bddb-56de4cf48ff1" data-target="query-builder.input" data-action=" input:query-builder#inputChange blur:query-builder#inputBlur keydown:query-builder#inputKeydown focus:query-builder#inputFocus " data-view-component="true" class="FormControl-input QueryBuilder-Input FormControl-medium" /> </div> </div> <span class="sr-only" id="query-builder-test-clear">Clear</span> <button role="button" id="query-builder-test-clear-button" aria-labelledby="query-builder-test-clear query-builder-test-label" data-target="query-builder.clearButton" data-action=" click:query-builder#clear focus:query-builder#clearButtonFocus blur:query-builder#clearButtonBlur " variant="small" hidden="hidden" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium mr-1 px-2 py-0 d-flex flex-items-center rounded-1 color-fg-muted"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x-circle-fill Button-visual"> <path d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path> </svg> </button> </div> <template id="search-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search"> <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path> </svg> </template> <template id="code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="file-code-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-file-code"> <path d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0 1 14.25 15h-9a.75.75 0 0 1 0-1.5h9a.25.25 0 0 0 .25-.25V6h-2.75A1.75 1.75 0 0 1 10 4.25V1.5H5.75a.25.25 0 0 0-.25.25v2.5a.75.75 0 0 1-1.5 0Zm1.72 4.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l1.47-1.47-1.47-1.47a.75.75 0 0 1 0-1.06ZM3.28 7.78 1.81 9.25l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Zm8.22-6.218V4.25c0 .138.112.25.25.25h2.688l-.011-.013-2.914-2.914-.013-.011Z"></path> </svg> </template> <template id="history-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-history"> <path d="m.427 1.927 1.215 1.215a8.002 8.002 0 1 1-1.6 5.685.75.75 0 1 1 1.493-.154 6.5 6.5 0 1 0 1.18-4.458l1.358 1.358A.25.25 0 0 1 3.896 6H.25A.25.25 0 0 1 0 5.75V2.104a.25.25 0 0 1 .427-.177ZM7.75 4a.75.75 0 0 1 .75.75v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5A.75.75 0 0 1 7.75 4Z"></path> </svg> </template> <template id="repo-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> </template> <template id="bookmark-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bookmark"> <path d="M3 2.75C3 1.784 3.784 1 4.75 1h6.5c.966 0 1.75.784 1.75 1.75v11.5a.75.75 0 0 1-1.227.579L8 11.722l-3.773 3.107A.751.751 0 0 1 3 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.91l3.023-2.489a.75.75 0 0 1 .954 0l3.023 2.49V2.75a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="plus-circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-plus-circle"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7.25-3.25v2.5h2.5a.75.75 0 0 1 0 1.5h-2.5v2.5a.75.75 0 0 1-1.5 0v-2.5h-2.5a.75.75 0 0 1 0-1.5h2.5v-2.5a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="circle-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-dot-fill"> <path d="M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8Z"></path> </svg> </template> <template id="trash-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-trash"> <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75ZM4.496 6.675l.66 6.6a.25.25 0 0 0 .249.225h5.19a.25.25 0 0 0 .249-.225l.66-6.6a.75.75 0 0 1 1.492.149l-.66 6.6A1.748 1.748 0 0 1 10.595 15h-5.19a1.75 1.75 0 0 1-1.741-1.575l-.66-6.6a.75.75 0 1 1 1.492-.15ZM6.5 1.75V3h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25Z"></path> </svg> </template> <template id="team-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-people"> <path d="M2 5.5a3.5 3.5 0 1 1 5.898 2.549 5.508 5.508 0 0 1 3.034 4.084.75.75 0 1 1-1.482.235 4 4 0 0 0-7.9 0 .75.75 0 0 1-1.482-.236A5.507 5.507 0 0 1 3.102 8.05 3.493 3.493 0 0 1 2 5.5ZM11 4a3.001 3.001 0 0 1 2.22 5.018 5.01 5.01 0 0 1 2.56 3.012.749.749 0 0 1-.885.954.752.752 0 0 1-.549-.514 3.507 3.507 0 0 0-2.522-2.372.75.75 0 0 1-.574-.73v-.352a.75.75 0 0 1 .416-.672A1.5 1.5 0 0 0 11 5.5.75.75 0 0 1 11 4Zm-5.5-.5a2 2 0 1 0-.001 3.999A2 2 0 0 0 5.5 3.5Z"></path> </svg> </template> <template id="project-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-project"> <path d="M1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0ZM1.5 1.75v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25ZM11.75 3a.75.75 0 0 1 .75.75v7.5a.75.75 0 0 1-1.5 0v-7.5a.75.75 0 0 1 .75-.75Zm-8.25.75a.75.75 0 0 1 1.5 0v5.5a.75.75 0 0 1-1.5 0ZM8 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 3Z"></path> </svg> </template> <template id="pencil-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil"> <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path> </svg> </template> <template id="copilot-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot"> <path d="M7.998 15.035c-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.201-.508-.254-1.084-.254-1.656 0-.87.128-1.769.693-2.484.579-.733 1.494-1.124 2.724-1.261 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095v1.872c0 .766-3.351 3.795-8.002 3.795Zm0-1.485c2.28 0 4.584-1.11 5.002-1.433V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-1.146 0-2.059-.327-2.71-.991A3.222 3.222 0 0 1 8 6.303a3.24 3.24 0 0 1-.544.743c-.65.664-1.563.991-2.71.991-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433ZM6.762 2.83c-.193-.206-.637-.413-1.682-.297-1.019.113-1.479.404-1.713.7-.247.312-.369.789-.369 1.554 0 .793.129 1.171.308 1.371.162.181.519.379 1.442.379.853 0 1.339-.235 1.638-.54.315-.322.527-.827.617-1.553.117-.935-.037-1.395-.241-1.614Zm4.155-.297c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Z"></path><path d="M6.25 9.037a.75.75 0 0 1 .75.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 .75-.75Zm4.25.75v1.501a.75.75 0 0 1-1.5 0V9.787a.75.75 0 0 1 1.5 0Z"></path> </svg> </template> <template id="copilot-error-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copilot-error"> <path d="M16 11.24c0 .112-.072.274-.21.467L13 9.688V7.862l-.023-.116c-.49.21-1.075.291-1.727.291-.198 0-.388-.009-.571-.029L6.833 5.226a4.01 4.01 0 0 0 .17-.782c.117-.935-.037-1.395-.241-1.614-.193-.206-.637-.413-1.682-.297-.683.076-1.115.231-1.395.415l-1.257-.91c.579-.564 1.413-.877 2.485-.996 1.206-.134 2.262.034 2.944.765.05.053.096.108.139.165.044-.057.094-.112.143-.165.682-.731 1.738-.899 2.944-.765 1.23.137 2.145.528 2.724 1.261.566.715.693 1.614.693 2.484 0 .572-.053 1.148-.254 1.656.066.228.098.429.126.612.012.076.024.148.037.218.924.385 1.522 1.471 1.591 2.095Zm-5.083-8.707c-1.044-.116-1.488.091-1.681.297-.204.219-.359.679-.242 1.614.091.726.303 1.231.618 1.553.299.305.784.54 1.638.54.922 0 1.28-.198 1.442-.379.179-.2.308-.578.308-1.371 0-.765-.123-1.242-.37-1.554-.233-.296-.693-.587-1.713-.7Zm2.511 11.074c-1.393.776-3.272 1.428-5.43 1.428-4.562 0-7.873-2.914-7.998-3.749V9.338c.085-.628.677-1.686 1.588-2.065.013-.07.024-.143.036-.218.029-.183.06-.384.126-.612-.18-.455-.241-.963-.252-1.475L.31 4.107A.747.747 0 0 1 0 3.509V3.49a.748.748 0 0 1 .625-.73c.156-.026.306.047.435.139l14.667 10.578a.592.592 0 0 1 .227.264.752.752 0 0 1 .046.249v.022a.75.75 0 0 1-1.19.596Zm-1.367-.991L5.635 7.964a5.128 5.128 0 0 1-.889.073c-.652 0-1.236-.081-1.727-.291l-.023.116v4.255c.419.323 2.722 1.433 5.002 1.433 1.539 0 3.089-.505 4.063-.934Z"></path> </svg> </template> <template id="workflow-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-workflow"> <path d="M0 1.75C0 .784.784 0 1.75 0h3.5C6.216 0 7 .784 7 1.75v3.5A1.75 1.75 0 0 1 5.25 7H4v4a1 1 0 0 0 1 1h4v-1.25C9 9.784 9.784 9 10.75 9h3.5c.966 0 1.75.784 1.75 1.75v3.5A1.75 1.75 0 0 1 14.25 16h-3.5A1.75 1.75 0 0 1 9 14.25v-.75H5A2.5 2.5 0 0 1 2.5 11V7h-.75A1.75 1.75 0 0 1 0 5.25Zm1.75-.25a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Zm9 9a.25.25 0 0 0-.25.25v3.5c0 .138.112.25.25.25h3.5a.25.25 0 0 0 .25-.25v-3.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="book-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-book"> <path d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"></path> </svg> </template> <template id="code-review-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-review"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 13H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25v-8.5C0 1.784.784 1 1.75 1ZM1.5 2.75v8.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm5.28 1.72a.75.75 0 0 1 0 1.06L5.31 7l1.47 1.47a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-2-2a.75.75 0 0 1 0-1.06l2-2a.75.75 0 0 1 1.06 0Zm2.44 0a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L10.69 7 9.22 5.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </template> <template id="codespaces-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-codespaces"> <path d="M0 11.25c0-.966.784-1.75 1.75-1.75h12.5c.966 0 1.75.784 1.75 1.75v3A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm2-9.5C2 .784 2.784 0 3.75 0h8.5C13.216 0 14 .784 14 1.75v5a1.75 1.75 0 0 1-1.75 1.75h-8.5A1.75 1.75 0 0 1 2 6.75Zm1.75-.25a.25.25 0 0 0-.25.25v5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-5a.25.25 0 0 0-.25-.25Zm-2 9.5a.25.25 0 0 0-.25.25v3c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-3a.25.25 0 0 0-.25-.25Z"></path><path d="M7 12.75a.75.75 0 0 1 .75-.75h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Zm-4 0a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z"></path> </svg> </template> <template id="comment-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment"> <path d="M1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 13.25 12H9.06l-2.573 2.573A1.458 1.458 0 0 1 4 13.543V12H2.75A1.75 1.75 0 0 1 1 10.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h4.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> </template> <template id="comment-discussion-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </template> <template id="organization-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-organization"> <path d="M1.75 16A1.75 1.75 0 0 1 0 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 0 0 .25-.25V8.285a.25.25 0 0 0-.111-.208l-1.055-.703a.749.749 0 1 1 .832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0 1 14.25 16h-3.5a.766.766 0 0 1-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 0 1-.75-.75V14h-1v1.25a.75.75 0 0 1-.75.75Zm-.25-1.75c0 .138.112.25.25.25H4v-1.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v1.25h2.25a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM3.75 6h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 3.75A.75.75 0 0 1 3.75 3h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 3.75Zm4 3A.75.75 0 0 1 7.75 6h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 7 6.75ZM7.75 3h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5ZM3 9.75A.75.75 0 0 1 3.75 9h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 9.75ZM7.75 9h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="rocket-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-rocket"> <path d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.752 8.752 0 0 1-2.564 6.186l-.458.459c-.314.314-.641.616-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.749.749 0 0 1-1.11-.418l-.954-3.102a1.214 1.214 0 0 1-.145-.125L3.754 9.816a1.218 1.218 0 0 1-.124-.145L.528 8.717a.749.749 0 0 1-.418-1.11l1.71-2.774A1.748 1.748 0 0 1 3.31 4h3.204c.288-.338.59-.665.904-.979l.459-.458A8.749 8.749 0 0 1 14.064 0ZM8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.249 7.249 0 0 0-5.125 2.123ZM3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.234.234 0 0 1-.201-.064.234.234 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12Zm6.94-3.935c-.088.06-.177.118-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766c.058-.09.117-.178.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </template> <template id="shield-check-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield-check"> <path d="m8.533.133 5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667l5.25-1.68a1.748 1.748 0 0 1 1.066 0Zm-.61 1.429.001.001-5.25 1.68a.251.251 0 0 0-.174.237V7c0 1.36.275 2.666 1.057 3.859.784 1.194 2.121 2.342 4.366 3.298a.196.196 0 0 0 .154 0c2.245-.957 3.582-2.103 4.366-3.297C13.225 9.666 13.5 8.358 13.5 7V3.48a.25.25 0 0 0-.174-.238l-5.25-1.68a.25.25 0 0 0-.153 0ZM11.28 6.28l-3.5 3.5a.75.75 0 0 1-1.06 0l-1.5-1.5a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l.97.97 2.97-2.97a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="heart-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-heart"> <path d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"></path> </svg> </template> <template id="server-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-server"> <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v4c0 .372-.116.717-.314 1 .198.283.314.628.314 1v4a1.75 1.75 0 0 1-1.75 1.75H1.75A1.75 1.75 0 0 1 0 12.75v-4c0-.358.109-.707.314-1a1.739 1.739 0 0 1-.314-1v-4C0 1.784.784 1 1.75 1ZM1.5 2.75v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Zm.25 5.75a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25ZM7 4.75A.75.75 0 0 1 7.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5A.75.75 0 0 1 7 4.75ZM7.75 10h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM3 4.75A.75.75 0 0 1 3.75 4h.5a.75.75 0 0 1 0 1.5h-.5A.75.75 0 0 1 3 4.75ZM3.75 10h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1 0-1.5Z"></path> </svg> </template> <template id="globe-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-globe"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM5.78 8.75a9.64 9.64 0 0 0 1.363 4.177c.255.426.542.832.857 1.215.245-.296.551-.705.857-1.215A9.64 9.64 0 0 0 10.22 8.75Zm4.44-1.5a9.64 9.64 0 0 0-1.363-4.177c-.307-.51-.612-.919-.857-1.215a9.927 9.927 0 0 0-.857 1.215A9.64 9.64 0 0 0 5.78 7.25Zm-5.944 1.5H1.543a6.507 6.507 0 0 0 4.666 5.5c-.123-.181-.24-.365-.352-.552-.715-1.192-1.437-2.874-1.581-4.948Zm-2.733-1.5h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.507 6.507 0 0 0-4.666 5.5Zm10.181 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.507 6.507 0 0 0 4.666-5.5Zm2.733-1.5a6.507 6.507 0 0 0-4.666-5.5c.123.181.24.365.353.552.714 1.192 1.436 2.874 1.58 4.948Z"></path> </svg> </template> <template id="issue-opened-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </template> <template id="device-mobile-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-mobile"> <path d="M3.75 0h8.5C13.216 0 14 .784 14 1.75v12.5A1.75 1.75 0 0 1 12.25 16h-8.5A1.75 1.75 0 0 1 2 14.25V1.75C2 .784 2.784 0 3.75 0ZM3.5 1.75v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25ZM8 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </template> <template id="package-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-package"> <path d="m8.878.392 5.25 3.045c.54.314.872.89.872 1.514v6.098a1.75 1.75 0 0 1-.872 1.514l-5.25 3.045a1.75 1.75 0 0 1-1.756 0l-5.25-3.045A1.75 1.75 0 0 1 1 11.049V4.951c0-.624.332-1.201.872-1.514L7.122.392a1.75 1.75 0 0 1 1.756 0ZM7.875 1.69l-4.63 2.685L8 7.133l4.755-2.758-4.63-2.685a.248.248 0 0 0-.25 0ZM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432Zm6.25 8.271 4.625-2.683a.25.25 0 0 0 .125-.216V5.677L8.75 8.432Z"></path> </svg> </template> <template id="credit-card-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-credit-card"> <path d="M10.75 9a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-1.5Z"></path><path d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0 1 14.25 14H1.75A1.75 1.75 0 0 1 0 12.25ZM14.5 6.5h-13v5.75c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25Zm0-2.75a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25V5h13Z"></path> </svg> </template> <template id="play-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </template> <template id="gift-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gift"> <path d="M2 2.75A2.75 2.75 0 0 1 4.75 0c.983 0 1.873.42 2.57 1.232.268.318.497.668.68 1.042.183-.375.411-.725.68-1.044C9.376.42 10.266 0 11.25 0a2.75 2.75 0 0 1 2.45 4h.55c.966 0 1.75.784 1.75 1.75v2c0 .698-.409 1.301-1 1.582v4.918A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V9.332C.409 9.05 0 8.448 0 7.75v-2C0 4.784.784 4 1.75 4h.55c-.192-.375-.3-.8-.3-1.25ZM7.25 9.5H2.5v4.75c0 .138.112.25.25.25h4.5Zm1.5 0v5h4.5a.25.25 0 0 0 .25-.25V9.5Zm0-4V8h5.5a.25.25 0 0 0 .25-.25v-2a.25.25 0 0 0-.25-.25Zm-7 0a.25.25 0 0 0-.25.25v2c0 .138.112.25.25.25h5.5V5.5h-5.5Zm3-4a1.25 1.25 0 0 0 0 2.5h2.309c-.233-.818-.542-1.401-.878-1.793-.43-.502-.915-.707-1.431-.707ZM8.941 4h2.309a1.25 1.25 0 0 0 0-2.5c-.516 0-1 .205-1.43.707-.337.392-.646.975-.879 1.793Z"></path> </svg> </template> <template id="code-square-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code-square"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25Zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25Zm7.47 3.97a.75.75 0 0 1 1.06 0l2 2a.75.75 0 0 1 0 1.06l-2 2a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L10.69 8 9.22 6.53a.75.75 0 0 1 0-1.06ZM6.78 6.53 5.31 8l1.47 1.47a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-2-2a.75.75 0 0 1 0-1.06l2-2a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </template> <template id="device-desktop-icon"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-device-desktop"> <path d="M14.25 1c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 14.25 12h-3.727c.099 1.041.52 1.872 1.292 2.757A.752.752 0 0 1 11.25 16h-6.5a.75.75 0 0 1-.565-1.243c.772-.885 1.192-1.716 1.292-2.757H1.75A1.75 1.75 0 0 1 0 10.25v-7.5C0 1.784.784 1 1.75 1ZM1.75 2.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25ZM9.018 12H6.982a5.72 5.72 0 0 1-.765 2.5h3.566a5.72 5.72 0 0 1-.765-2.5Z"></path> </svg> </template> <div class="position-relative"> <ul role="listbox" class="ActionListWrap QueryBuilder-ListWrap" aria-label="Suggestions" data-action=" combobox-commit:query-builder#comboboxCommit mousedown:query-builder#resultsMousedown " data-target="query-builder.resultsList" data-persist-list=false id="query-builder-test-results" ></ul> </div> <div class="FormControl-inlineValidation" id="validation-4b708a4c-aeab-4bb8-bddb-56de4cf48ff1" hidden="hidden"> <span class="FormControl-inlineValidation--visual"> <svg aria-hidden="true" height="12" viewBox="0 0 12 12" version="1.1" width="12" data-view-component="true" class="octicon octicon-alert-fill"> <path d="M4.855.708c.5-.896 1.79-.896 2.29 0l4.675 8.351a1.312 1.312 0 0 1-1.146 1.954H1.33A1.313 1.313 0 0 1 .183 9.058ZM7 7V3H5v4Zm-1 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"></path> </svg> </span> <span></span> </div> </div> <div data-target="query-builder.screenReaderFeedback" aria-live="polite" aria-atomic="true" class="sr-only"></div> </query-builder></form> <div class="d-flex flex-row color-fg-muted px-3 text-small color-bg-default search-feedback-prompt"> <a target="_blank" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax" data-view-component="true" class="Link color-fg-accent text-normal ml-2">Search syntax tips</a> <div class="d-flex flex-1"></div> </div> </div> </div> </div> </modal-dialog></div> </div> <div data-action="click:qbsearch-input#retract" class="dark-backdrop position-fixed" hidden data-target="qbsearch-input.darkBackdrop"></div> <div class="color-fg-default"> <dialog-helper> <dialog data-target="qbsearch-input.feedbackDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="feedback-dialog" aria-modal="true" aria-labelledby="feedback-dialog-title" aria-describedby="feedback-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="feedback-dialog-title"> Provide feedback </h1> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="feedback-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="feedback-dialog-title"> <div data-view-component="true" class="Overlay-body"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="code-search-feedback-form" data-turbo="false" action="/search/feedback" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="47/JcCcr8pKEEcZKJ1LviCeFaFOQn3sB3AMecXjYZ25lwgScCkWt81aUjlFWhdwQp61te3P3exMglV/13iYfzA==" /> <p>We read every piece of feedback, and take your input very seriously.</p> <textarea name="feedback" class="form-control width-full mb-2" style="height: 120px" id="feedback"></textarea> <input name="include_email" id="include_email" aria-label="Include my email address so I can be contacted" class="form-control mr-2" type="checkbox"> <label for="include_email" style="font-weight: normal">Include my email address so I can be contacted</label> </form></div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd"> <button data-close-dialog-id="feedback-dialog" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="code-search-feedback-form" data-action="click:qbsearch-input#submitFeedback" type="submit" data-view-component="true" class="btn-primary btn"> Submit feedback </button> </div> </dialog></dialog-helper> <custom-scopes data-target="qbsearch-input.customScopesManager"> <dialog-helper> <dialog data-target="custom-scopes.customScopesModalDialog" data-action="close:qbsearch-input#handleDialogClose cancel:qbsearch-input#handleDialogClose" id="custom-scopes-dialog" aria-modal="true" aria-labelledby="custom-scopes-dialog-title" aria-describedby="custom-scopes-dialog-description" data-view-component="true" class="Overlay Overlay-whenNarrow Overlay--size-medium Overlay--motion-scaleFade Overlay--disableScroll"> <div data-view-component="true" class="Overlay-header Overlay-header--divided"> <div class="Overlay-headerContentWrap"> <div class="Overlay-titleWrap"> <h1 class="Overlay-title " id="custom-scopes-dialog-title"> Saved searches </h1> <h2 id="custom-scopes-dialog-description" class="Overlay-description">Use saved searches to filter your results more quickly</h2> </div> <div class="Overlay-actionWrap"> <button data-close-dialog-id="custom-scopes-dialog" aria-label="Close" type="button" data-view-component="true" class="close-button Overlay-closeButton"><svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg></button> </div> </div> </div> <scrollable-region data-labelled-by="custom-scopes-dialog-title"> <div data-view-component="true" class="Overlay-body"> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <div hidden class="create-custom-scope-form" data-target="custom-scopes.createCustomScopeForm"> <!-- '"` --><!-- </textarea></xmp> --></option></form><form id="custom-scopes-dialog-form" data-turbo="false" action="/search/custom_scopes" accept-charset="UTF-8" method="post"><input type="hidden" data-csrf="true" name="authenticity_token" value="lU8y+vMhBxaaXQ04SnltWsGakEdrxegiuB4ahFly2l7hgug1VSFrCP/yjz9BY8Aq6V+V414BPKWwkD0iUTvs8g==" /> <div data-target="custom-scopes.customScopesModalDialogFlash"></div> <input type="hidden" id="custom_scope_id" name="custom_scope_id" data-target="custom-scopes.customScopesIdField"> <div class="form-group"> <label for="custom_scope_name">Name</label> <auto-check src="/search/custom_scopes/check_name" required only-validate-on-blur="false"> <input type="text" name="custom_scope_name" id="custom_scope_name" data-target="custom-scopes.customScopesNameField" class="form-control" autocomplete="off" placeholder="github-ruby" required maxlength="50"> <input type="hidden" data-csrf="true" value="3kL/NgOV0WkuF3MJ2is8zGRl6oJs/gzvzqgpgcpIIJ0iF5Z0XE415DuoPxFlKI5l9K14rnnGkhbmkNtm/Ubxww==" /> </auto-check> </div> <div class="form-group"> <label for="custom_scope_query">Query</label> <input type="text" name="custom_scope_query" id="custom_scope_query" data-target="custom-scopes.customScopesQueryField" class="form-control" autocomplete="off" placeholder="(repo:mona/a OR repo:mona/b) AND lang:python" required maxlength="500"> </div> <p class="text-small color-fg-muted"> To see all available qualifiers, see our <a class="Link--inTextBlock" href="https://docs.github.com/search-github/github-code-search/understanding-github-code-search-syntax">documentation</a>. </p> </form> </div> <div data-target="custom-scopes.manageCustomScopesForm"> <div data-target="custom-scopes.list"></div> </div> </div> </scrollable-region> <div data-view-component="true" class="Overlay-footer Overlay-footer--alignEnd Overlay-footer--divided"> <button data-action="click:custom-scopes#customScopesCancel" type="button" data-view-component="true" class="btn"> Cancel </button> <button form="custom-scopes-dialog-form" data-action="click:custom-scopes#customScopesSubmit" data-target="custom-scopes.customScopesSubmitButton" type="submit" data-view-component="true" class="btn-primary btn"> Create saved search </button> </div> </dialog></dialog-helper> </custom-scopes> </div> </qbsearch-input> <div class="position-relative HeaderMenu-link-wrap d-lg-inline-block"> <a href="/login?return_to=https%3A%2F%2Fgithub.com%2Felastic%2Feui%2Fissues%2F3912" class="HeaderMenu-link HeaderMenu-link--sign-in HeaderMenu-button flex-shrink-0 no-underline d-none d-lg-inline-flex border border-lg-0 rounded rounded-lg-0 px-2 py-1" style="margin-left: 12px;" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/elastic/eui/issues/3912","user_id":null}}" data-hydro-click-hmac="dabe0a658fbb42726c3fa6ca5cd992280a56d5d5bec355ca49d62996d3ce85fa" data-analytics-event="{"category":"Marketing nav","action":"click to go to homepage","label":"ref_page:Marketing;ref_cta:Sign in;ref_loc:Header"}" > Sign in </a> </div> <a href="/signup?ref_cta=Sign+up&ref_loc=header+logged+out&ref_page=%2F%3Cuser-name%3E%2F%3Crepo-name%3E%2Fvoltron%2Fissues_fragments%2Fissue_layout&source=header-repo&source_repo=elastic%2Feui" class="HeaderMenu-link HeaderMenu-link--sign-up HeaderMenu-button flex-shrink-0 d-flex d-lg-inline-flex no-underline border color-border-default rounded px-2 py-1" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"site header menu","repository_id":null,"auth_type":"SIGN_UP","originating_url":"https://github.com/elastic/eui/issues/3912","user_id":null}}" data-hydro-click-hmac="dabe0a658fbb42726c3fa6ca5cd992280a56d5d5bec355ca49d62996d3ce85fa" data-analytics-event="{"category":"Sign up","action":"click to sign up for account","label":"ref_page:/<user-name>/<repo-name>/voltron/issues_fragments/issue_layout;ref_cta:Sign up;ref_loc:header logged out"}" > Sign up </a> <button type="button" class="sr-only js-header-menu-focus-trap d-block d-lg-none">Reseting focus</button> </div> </div> </div> </div> </header> <div hidden="hidden" data-view-component="true" class="js-stale-session-flash stale-session-flash flash flash-warn flash-full"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span class="js-stale-session-flash-signed-in" hidden>You signed in with another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-signed-out" hidden>You signed out in another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <span class="js-stale-session-flash-switched" hidden>You switched accounts on another tab or window. <a class="Link--inTextBlock" href="">Reload</a> to refresh your session.</span> <button id="icon-button-a56807ad-7d42-4f9d-8b94-3467798f6cbc" aria-labelledby="tooltip-34428366-d426-44db-8139-d7f24a307e60" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium flash-close js-flash-close"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x Button-visual"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button><tool-tip id="tooltip-34428366-d426-44db-8139-d7f24a307e60" for="icon-button-a56807ad-7d42-4f9d-8b94-3467798f6cbc" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Dismiss alert</tool-tip> </div> </div> <div id="start-of-content" class="show-on-focus"></div> <div id="js-flash-container" class="flash-container" data-turbo-replace> <template class="js-flash-template"> <div class="flash flash-full {{ className }}"> <div > <button autofocus class="flash-close js-flash-close" type="button" aria-label="Dismiss this message"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div aria-atomic="true" role="alert" class="js-flash-alert"> <div>{{ message }}</div> </div> </div> </div> </template> </div> <div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled data-issue-and-pr-hovercards-enabled data-project-hovercards-enabled > <div itemscope itemtype="http://schema.org/SoftwareSourceCode" class=""> <main id="js-repo-pjax-container" > <div id="repository-container-header" class="pt-3 hide-full-screen" style="background-color: var(--page-header-bgColor, var(--color-page-header-bg));" data-turbo-replace> <div class="d-flex flex-nowrap flex-justify-end mb-3 px-3 px-lg-5" style="gap: 1rem;"> <div class="flex-auto min-width-0 width-fit"> <div class=" d-flex flex-wrap flex-items-center wb-break-word f3 text-normal"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo color-fg-muted mr-2"> <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 1 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Zm10.5-1h-8a1 1 0 0 0-1 1v6.708A2.486 2.486 0 0 1 4.5 9h8ZM5 12.25a.25.25 0 0 1 .25-.25h3.5a.25.25 0 0 1 .25.25v3.25a.25.25 0 0 1-.4.2l-1.45-1.087a.249.249 0 0 0-.3 0L5.4 15.7a.25.25 0 0 1-.4-.2Z"></path> </svg> <span class="author flex-self-stretch" itemprop="author"> <a class="url fn" rel="author" data-hovercard-type="organization" data-hovercard-url="/orgs/elastic/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/elastic"> elastic </a> </span> <span class="mx-1 flex-self-stretch color-fg-muted">/</span> <strong itemprop="name" class="mr-2 flex-self-stretch"> <a data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" href="/elastic/eui">eui</a> </strong> <span></span><span class="Label Label--secondary v-align-middle mr-1">Public</span> </div> </div> <div id="repository-details-container" class="flex-shrink-0" data-turbo-replace style="max-width: 70%;"> <ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;"> <li> <a href="/login?return_to=%2Felastic%2Feui" rel="nofollow" id="repository-details-watch-button" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"notification subscription menu watch","repository_id":null,"auth_type":"LOG_IN","originating_url":"https://github.com/elastic/eui/issues/3912","user_id":null}}" data-hydro-click-hmac="426b78756849cdb515dfa16fb25ea42b7f7533bbf604c1fac1f25dda383c0fb1" aria-label="You must be signed in to change notification settings" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-bell mr-2"> <path d="M8 16a2 2 0 0 0 1.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 0 0 8 16ZM3 5a5 5 0 0 1 10 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.519 1.519 0 0 1 13.482 13H2.518a1.516 1.516 0 0 1-1.263-2.36l1.703-2.554A.255.255 0 0 0 3 7.947Zm5-3.5A3.5 3.5 0 0 0 4.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.017.017 0 0 0-.003.01l.001.006c0 .002.002.004.004.006l.006.004.007.001h10.964l.007-.001.006-.004.004-.006.001-.007a.017.017 0 0 0-.003-.01l-1.703-2.554a1.745 1.745 0 0 1-.294-.97V5A3.5 3.5 0 0 0 8 1.5Z"></path> </svg>Notifications </a> <tool-tip id="tooltip-e72322c2-e997-4b4d-b14d-4617fbdb735c" for="repository-details-watch-button" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">You must be signed in to change notification settings</tool-tip> </li> <li> <a icon="repo-forked" id="fork-button" href="/login?return_to=%2Felastic%2Feui" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"repo details fork button","repository_id":107422373,"auth_type":"LOG_IN","originating_url":"https://github.com/elastic/eui/issues/3912","user_id":null}}" data-hydro-click-hmac="556c156982f99b8a11b8b8645c38dd33bc35a9086af01fa0a16f30285d88fc27" data-view-component="true" class="btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-repo-forked mr-2"> <path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path> </svg>Fork <span id="repo-network-counter" data-pjax-replace="true" data-turbo-replace="true" title="846" data-view-component="true" class="Counter">846</span> </a> </li> <li> <div data-view-component="true" class="BtnGroup d-flex"> <a href="/login?return_to=%2Felastic%2Feui" rel="nofollow" data-hydro-click="{"event_type":"authentication.click","payload":{"location_in_page":"star button","repository_id":107422373,"auth_type":"LOG_IN","originating_url":"https://github.com/elastic/eui/issues/3912","user_id":null}}" data-hydro-click-hmac="dbe3ccc9c50323c5cd90540816c1d214501800340e7fea34c97ce50c866486af" aria-label="You must be signed in to star a repository" data-view-component="true" class="tooltipped tooltipped-sw btn-sm btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-star v-align-text-bottom d-inline-block mr-2"> <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path> </svg><span data-view-component="true" class="d-inline"> Star </span> <span id="repo-stars-counter-star" aria-label="6132 users starred this repository" data-singular-suffix="user starred this repository" data-plural-suffix="users starred this repository" data-turbo-replace="true" title="6,132" data-view-component="true" class="Counter js-social-count">6.1k</span> </a></div> </li> </ul> </div> </div> <div id="responsive-meta-container" data-turbo-replace> </div> <nav data-pjax="#js-repo-pjax-container" aria-label="Repository" data-view-component="true" class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5"> <ul data-view-component="true" class="UnderlineNav-body list-style-none"> <li data-view-component="true" class="d-inline-flex"> <a id="code-tab" href="/elastic/eui" data-tab-item="i0code-tab" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments repo_attestations /elastic/eui" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g c" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Code","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> <span data-content="Code">Code</span> <span id="code-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="issues-tab" href="/elastic/eui/issues" data-tab-item="i1issues-tab" data-selected-links="repo_issues repo_labels repo_milestones /elastic/eui/issues" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g i" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Issues","target":"UNDERLINE_NAV.TAB"}" aria-current="page" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item selected"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> <span data-content="Issues">Issues</span> <span id="issues-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="189" data-view-component="true" class="Counter">189</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="pull-requests-tab" href="/elastic/eui/pulls" data-tab-item="i2pull-requests-tab" data-selected-links="repo_pulls checks /elastic/eui/pulls" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g p" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Pull requests","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> <span data-content="Pull requests">Pull requests</span> <span id="pull-requests-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="15" data-view-component="true" class="Counter">15</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="discussions-tab" href="/elastic/eui/discussions" data-tab-item="i3discussions-tab" data-selected-links="repo_discussions /elastic/eui/discussions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g g" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Discussions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> <span data-content="Discussions">Discussions</span> <span id="discussions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="actions-tab" href="/elastic/eui/actions" data-tab-item="i4actions-tab" data-selected-links="repo_actions /elastic/eui/actions" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g a" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Actions","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> <span data-content="Actions">Actions</span> <span id="actions-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="projects-tab" href="/elastic/eui/projects" data-tab-item="i5projects-tab" data-selected-links="repo_projects new_repo_project repo_project /elastic/eui/projects" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g b" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Projects","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table UnderlineNav-octicon d-none d-sm-inline"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> <span data-content="Projects">Projects</span> <span id="projects-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="0" hidden="hidden" data-view-component="true" class="Counter">0</span> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="security-tab" href="/elastic/eui/security" data-tab-item="i6security-tab" data-selected-links="security overview alerts policy token_scanning code_scanning /elastic/eui/security" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-hotkey="g s" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Security","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <span data-content="Security">Security</span> <include-fragment src="/elastic/eui/security/overall-count" accept="text/fragment+html"></include-fragment> </a></li> <li data-view-component="true" class="d-inline-flex"> <a id="insights-tab" href="/elastic/eui/pulse" data-tab-item="i7insights-tab" data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /elastic/eui/pulse" data-pjax="#repo-content-pjax-container" data-turbo-frame="repo-content-turbo-frame" data-analytics-event="{"category":"Underline navbar","action":"Click tab","label":"Insights","target":"UNDERLINE_NAV.TAB"}" data-view-component="true" class="UnderlineNav-item no-wrap js-responsive-underlinenav-item js-selected-navigation-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> <span data-content="Insights">Insights</span> <span id="insights-repo-tab-count" data-pjax-replace="" data-turbo-replace="" title="Not available" data-view-component="true" class="Counter"></span> </a></li> </ul> <div style="visibility:hidden;" data-view-component="true" class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0"> <action-menu data-select-variant="none" data-view-component="true"> <focus-group direction="vertical" mnemonics retain> <button id="action-menu-61e6c8a1-51c1-4677-b925-89c1a2d7b256-button" popovertarget="action-menu-61e6c8a1-51c1-4677-b925-89c1a2d7b256-overlay" aria-controls="action-menu-61e6c8a1-51c1-4677-b925-89c1a2d7b256-list" aria-haspopup="true" aria-labelledby="tooltip-30d14fea-5dd5-4ac6-9e0d-e50f2eee77c2" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium UnderlineNav-item"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-30d14fea-5dd5-4ac6-9e0d-e50f2eee77c2" for="action-menu-61e6c8a1-51c1-4677-b925-89c1a2d7b256-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Additional navigation options</tool-tip> <anchored-position data-target="action-menu.overlay" id="action-menu-61e6c8a1-51c1-4677-b925-89c1a2d7b256-overlay" anchor="action-menu-61e6c8a1-51c1-4677-b925-89c1a2d7b256-button" align="start" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="action-menu-61e6c8a1-51c1-4677-b925-89c1a2d7b256-button" id="action-menu-61e6c8a1-51c1-4677-b925-89c1a2d7b256-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li hidden="hidden" data-menu-item="i0code-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-04fd79fe-7438-492d-93fa-dc7f0b4450e6" href="/elastic/eui" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-code"> <path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Code </span> </a> </li> <li hidden="hidden" data-menu-item="i1issues-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-0001ec53-e324-47d1-9c6b-557d38317780" href="/elastic/eui/issues" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-opened"> <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Issues </span> </a> </li> <li hidden="hidden" data-menu-item="i2pull-requests-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-a801f299-82bd-494f-bb38-0c0fec18ac1a" href="/elastic/eui/pulls" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-git-pull-request"> <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Pull requests </span> </a> </li> <li hidden="hidden" data-menu-item="i3discussions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-d289878f-1915-4a40-ac06-fd81ef09211b" href="/elastic/eui/discussions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion"> <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Discussions </span> </a> </li> <li hidden="hidden" data-menu-item="i4actions-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-8a1cd9dc-bca7-4e72-a067-1db2a25debf4" href="/elastic/eui/actions" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-play"> <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm4.879-2.773 4.264 2.559a.25.25 0 0 1 0 .428l-4.264 2.559A.25.25 0 0 1 6 10.559V5.442a.25.25 0 0 1 .379-.215Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Actions </span> </a> </li> <li hidden="hidden" data-menu-item="i5projects-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-946bba1b-6bc4-4a9a-aa4f-d6f4b701771f" href="/elastic/eui/projects" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-table"> <path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25ZM6.5 6.5v8h7.75a.25.25 0 0 0 .25-.25V6.5Zm8-1.5V1.75a.25.25 0 0 0-.25-.25H6.5V5Zm-13 1.5v7.75c0 .138.112.25.25.25H5v-8ZM5 5V1.5H1.75a.25.25 0 0 0-.25.25V5Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Projects </span> </a> </li> <li hidden="hidden" data-menu-item="i6security-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-91572796-b475-4d4e-8f6a-59e4b6e9336f" href="/elastic/eui/security" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-shield"> <path d="M7.467.133a1.748 1.748 0 0 1 1.066 0l5.25 1.68A1.75 1.75 0 0 1 15 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.697 1.697 0 0 1-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 0 1 1.217-1.667Zm.61 1.429a.25.25 0 0 0-.153 0l-5.25 1.68a.25.25 0 0 0-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.196.196 0 0 0 .154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.251.251 0 0 0-.174-.237l-5.25-1.68ZM8.75 4.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 1.5 0ZM9 10.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Security </span> </a> </li> <li hidden="hidden" data-menu-item="i7insights-tab" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem"> <a tabindex="-1" id="item-551b200a-105d-40f6-94b4-e9ab571c74eb" href="/elastic/eui/pulse" role="menuitem" data-view-component="true" class="ActionListContent ActionListContent--visual16"> <span class="ActionListItem-visual ActionListItem-visual--leading"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-graph"> <path d="M1.5 1.75V13.5h13.75a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75V1.75a.75.75 0 0 1 1.5 0Zm14.28 2.53-5.25 5.25a.75.75 0 0 1-1.06 0L7 7.06 4.28 9.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.25-3.25a.75.75 0 0 1 1.06 0L10 7.94l4.72-4.72a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path> </svg> </span> <span data-view-component="true" class="ActionListItem-label"> Insights </span> </a> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu></div> </nav> </div> <turbo-frame id="repo-content-turbo-frame" target="_top" data-turbo-action="advance" class=""> <div id="repo-content-pjax-container" class="repository-content " > <react-app app-name="issues-react" initial-path="/elastic/eui/issues/3912" style="display: block; min-height: calc(100vh - 64px);" data-attempted-ssr="true" data-ssr="true" data-lazy="false" data-alternate="false" data-data-router-enabled="false" > <script type="application/json" data-target="react-app.embeddedData">{"payload":{"preloaded_records":{},"preloadedQueries":[{"queryId":"3dddeeb0bc5f88ccaca7204fa97a09b8","queryName":"IssueViewerViewQuery","variables":{"id":"repository","number":3912,"owner":"elastic","repo":"eui"},"result":{"data":{"repository":{"isOwnerEnterpriseManaged":false,"issue":{"id":"MDU6SXNzdWU2Nzg3MTM5MzQ=","updatedAt":"2025-01-08T21:51:56Z","title":"[Meta][CSS-in-JS] Switching to `emotion`","number":3912,"repository":{"nameWithOwner":"elastic/eui","id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA=","url":"https://github.com/elastic"},"isArchived":false,"isPrivate":false,"databaseId":107422373,"slashCommandsEnabled":false,"viewerCanInteract":false,"viewerInteractionLimitReasonHTML":"","planFeatures":{"maximumAssignees":10},"visibility":"PUBLIC","pinnedIssues":{"totalCount":2},"viewerCanPinIssues":false,"issueTypes":{"edges":[{"node":{"id":"IT_kwDOAGc3Zs4ACgKA"}},{"node":{"id":"IT_kwDOAGc3Zs4ACgKC"}},{"node":{"id":"IT_kwDOAGc3Zs4ACgKG"}},{"node":{"id":"IT_kwDOAGc3Zs4BgY5R"}},{"node":{"id":"IT_kwDOAGc3Zs4BispK"}},{"node":{"id":"IT_kwDOAGc3Zs4BispU"}},{"node":{"id":"IT_kwDOAGc3Zs4Bisph"}},{"node":{"id":"IT_kwDOAGc3Zs4Bispo"}},{"node":{"id":"IT_kwDOAGc3Zs4Bisp7"}},{"node":{"id":"IT_kwDOAGc3Zs4BisqC"}}]}},"titleHTML":"[Meta][CSS-in-JS] Switching to \u003ccode\u003eemotion\u003c/code\u003e","url":"https://github.com/elastic/eui/issues/3912","viewerCanUpdateNext":false,"issueType":null,"state":"OPEN","stateReason":null,"duplicateOf":null,"linkedPullRequests":{"nodes":[]},"subIssuesSummary":{"total":3,"completed":0},"__isLabelable":"Issue","labels":{"edges":[{"node":{"id":"MDU6TGFiZWw3Mzg5MDkwMTY=","color":"0e8a16","name":"meta","nameHTML":"meta","description":"Used to group similar requests or tracking. Not an Epic.","url":"https://github.com/elastic/eui/labels/meta","__typename":"Label"},"cursor":"MQ"}],"pageInfo":{"endCursor":"MQ","hasNextPage":false}},"__isNode":"Issue","assignees":{"nodes":[]},"milestone":null,"databaseId":678713934,"viewerDidAuthor":false,"locked":false,"author":{"__typename":"User","__isActor":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","profileUrl":"https://github.com/cchaos","avatarUrl":"https://avatars.githubusercontent.com/u/549577?u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"__isComment":"Issue","body":"This is a meta ticket to discuss the rollout plan of the CSS in JS solution (Emotion). It is for documenting the expected upgrade process both within EUI and by consuming applications, and being transparent about our timeline.\n\n## (Tentative) Timeline \u0026 tasks\n\n### Spring 2021:\n\nGet the contexts built out and (partially) used in the EUI components and docs, as well as thoroughly tested in downstream applications like Kibana and Cloud. Figure out all the dependencies, hooks and possible state management that go with it.\n\n- [x] **EuiContext**: Overall context layer that would encompass theming, layering, etc… (#4440)\n- [x] **EuiThemeContext**: Theme specific layer with at least these properties: (#4440)\n - [x] `themeName`\n - [x] `colorMode: ‘light’ | ‘dark’`\n - [x] `{ colors: {primar, secondary, etc} }`\n- [x] `\u003cColorMode\u003e` aka: `\u003cDarkMode\u003e{component}\u003c/DarkMode\u003e` for switching of themes at the component level (#4440)\n\n### Summer 2021:\n\n- [x] Build out the theme layer (#4643)\n - [x] Convert all the SASS invisibles (variables, functions, etc) to JS\n - [x] Usage documentation\n- [x] Enable Emotion in Kibana (https://github.com/elastic/kibana/pull/98157)\n- [x] **Initial release of context layer and global theme** (#4511)\n- [x] Add more documentation (#5072)\n- [x] Add global theme context provider in Kibana (elastic/kibana#108972)\n\n### Fall 2021:\n\nStart shifting component styles from SASS to JS. This part will probably take a full year and probably means phasing out the old 'legacy' theme, making Amsterdam default.\n\n- [x] Add global reset file via Emotion (#5122)\n- [x] Deprecate current theme for Amsterdam (#5222)\n- [x] EUI breaking/major release with peerDep on `@emotion/react` (#5121) **from this point forward using only the generated CSS is not supported, EUI must be used through React**\n\n```[tasklist]\n### 2022-2024\n- [ ] #5685\n```\n\n### Beyond component conversions:\n\n- ~[ ] Deprecate Sass usage in EUI docs~ Not being done, as EUI docs will be deprecated in favor of EUI+\n- [ ] https://github.com/elastic/eui/issues/7561\n- [ ] https://github.com/elastic/eui/issues/7025\n- [ ] Convert Kibana's usage of `styled-components` to Emotion\n- [ ] Deprecate using EUI's SCSS mixins/variables\n- [ ] Elastic Charts theme as an EuiTheme\n\n### Needs discussion\n\n- [ ] Remove use of `ghost` and `ink` in favor of `EuiThemeProvider` + `colorMode` ([see discussion](https://github.com/elastic/eui/discussions/6820))\n - I'm not sure if this still needs to be done or if this is something to instead be visited in the new theme/visual refresh work.\n- [ ] Deprecate using EUI's classnames\n- [ ] Remove class names (after a lengthy deprecation period)\n - For context, the deprecation of `className`s was something Caroline and Greg were pushing for. I'm not convinced that it's even feasible considering Kibana however.","bodyHTML":"\u003cp dir=\"auto\"\u003eThis is a meta ticket to discuss the rollout plan of the CSS in JS solution (Emotion). It is for documenting the expected upgrade process both within EUI and by consuming applications, and being transparent about our timeline.\u003c/p\u003e\n\u003ch2 dir=\"auto\"\u003e(Tentative) Timeline \u0026amp; tasks\u003c/h2\u003e\n\u003ch3 dir=\"auto\"\u003eSpring 2021:\u003c/h3\u003e\n\u003cp dir=\"auto\"\u003eGet the contexts built out and (partially) used in the EUI components and docs, as well as thoroughly tested in downstream applications like Kibana and Cloud. Figure out all the dependencies, hooks and possible state management that go with it.\u003c/p\u003e\n\u003cul class=\"contains-task-list\"\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e \u003cstrong\u003eEuiContext\u003c/strong\u003e: Overall context layer that would encompass theming, layering, etc… (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-git-merge merged color-fg-done mr-1\" title=\"Merged\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"791443066\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/4440\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/elastic/eui/pull/4440/hovercard\" href=\"https://github.com/elastic/eui/pull/4440\"\u003e[CSS-in-JS] Context and foundation\u003cspan class=\"issue-shorthand\"\u003e #4440\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e \u003cstrong\u003eEuiThemeContext\u003c/strong\u003e: Theme specific layer with at least these properties: (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-git-merge merged color-fg-done mr-1\" title=\"Merged\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"791443066\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/4440\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/elastic/eui/pull/4440/hovercard\" href=\"https://github.com/elastic/eui/pull/4440\"\u003e[CSS-in-JS] Context and foundation\u003cspan class=\"issue-shorthand\"\u003e #4440\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\n\u003cul class=\"contains-task-list\"\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e \u003ccode class=\"notranslate\"\u003ethemeName\u003c/code\u003e\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e \u003ccode class=\"notranslate\"\u003ecolorMode: ‘light’ | ‘dark’\u003c/code\u003e\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e \u003ccode class=\"notranslate\"\u003e{ colors: {primar, secondary, etc} }\u003c/code\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e \u003ccode class=\"notranslate\"\u003e\u0026lt;ColorMode\u0026gt;\u003c/code\u003e aka: \u003ccode class=\"notranslate\"\u003e\u0026lt;DarkMode\u0026gt;{component}\u0026lt;/DarkMode\u0026gt;\u003c/code\u003e for switching of themes at the component level (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-git-merge merged color-fg-done mr-1\" title=\"Merged\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"791443066\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/4440\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/elastic/eui/pull/4440/hovercard\" href=\"https://github.com/elastic/eui/pull/4440\"\u003e[CSS-in-JS] Context and foundation\u003cspan class=\"issue-shorthand\"\u003e #4440\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 dir=\"auto\"\u003eSummer 2021:\u003c/h3\u003e\n\u003cul class=\"contains-task-list\"\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e Build out the theme layer (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-git-merge merged color-fg-done mr-1\" title=\"Merged\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"832185715\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/4643\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/elastic/eui/pull/4643/hovercard\" href=\"https://github.com/elastic/eui/pull/4643\"\u003e[CSS-in-JS] Global theme\u003cspan class=\"issue-shorthand\"\u003e #4643\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\n\u003cul class=\"contains-task-list\"\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e Convert all the SASS invisibles (variables, functions, etc) to JS\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e Usage documentation\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e Enable Emotion in Kibana (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-git-merge merged color-fg-done mr-1\" title=\"Merged\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"866218729\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/kibana/issues/98157\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/elastic/kibana/pull/98157/hovercard\" href=\"https://github.com/elastic/kibana/pull/98157\"\u003eEnable CSS-in-JS styling with \u003ccode\u003eemotion\u003c/code\u003e\u003cspan class=\"issue-shorthand\"\u003e kibana#98157\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e \u003cstrong\u003eInitial release of context layer and global theme\u003c/strong\u003e (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-git-merge merged color-fg-done mr-1\" title=\"Merged\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"805818793\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/4511\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/elastic/eui/pull/4511/hovercard\" href=\"https://github.com/elastic/eui/pull/4511\"\u003e[FEATURE] CSS-in-JS via \u003ccode\u003eemotion\u003c/code\u003e, initial release\u003cspan class=\"issue-shorthand\"\u003e #4511\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e Add more documentation (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-skip color-fg-muted mr-1\" title=\"Closed as not planned\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm9.78-2.22-5.5 5.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l5.5-5.5a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"978313438\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/5072\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/5072/hovercard\" href=\"https://github.com/elastic/eui/issues/5072\"\u003e[Docs] \u003ccode\u003eEuiThemeProvider\u003c/code\u003e global theme switching\u003cspan class=\"issue-shorthand\"\u003e #5072\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e Add global theme context provider in Kibana (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-issue-closed closed mr-1\" title=\"Closed\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"972967489\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/kibana/issues/108972\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/kibana/issues/108972/hovercard\" href=\"https://github.com/elastic/kibana/issues/108972\"\u003eCreate a theming React context provider integration for applications\u003cspan class=\"issue-shorthand\"\u003e kibana#108972\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 dir=\"auto\"\u003eFall 2021:\u003c/h3\u003e\n\u003cp dir=\"auto\"\u003eStart shifting component styles from SASS to JS. This part will probably take a full year and probably means phasing out the old 'legacy' theme, making Amsterdam default.\u003c/p\u003e\n\u003cul class=\"contains-task-list\"\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e Add global reset file via Emotion (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-git-merge merged color-fg-done mr-1\" title=\"Merged\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"985399671\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/5122\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/elastic/eui/pull/5122/hovercard\" href=\"https://github.com/elastic/eui/pull/5122\"\u003e[CSS-in-JS] Global style reset with \u003ccode\u003eemotion\u003c/code\u003e\u003cspan class=\"issue-shorthand\"\u003e #5122\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e Deprecate current theme for Amsterdam (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-git-merge merged color-fg-done mr-1\" title=\"Merged\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"1010316490\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/5222\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/elastic/eui/pull/5222/hovercard\" href=\"https://github.com/elastic/eui/pull/5222\"\u003e[CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy\u003cspan class=\"issue-shorthand\"\u003e #5222\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e)\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\" checked=\"\"\u003e EUI breaking/major release with peerDep on \u003ccode class=\"notranslate\"\u003e@emotion/react\u003c/code\u003e (\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-git-merge merged color-fg-done mr-1\" title=\"Merged\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"985279222\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/5121\" data-hovercard-type=\"pull_request\" data-hovercard-url=\"/elastic/eui/pull/5121/hovercard\" href=\"https://github.com/elastic/eui/pull/5121\"\u003e[CSS-in-JS] \u003ccode\u003e@emotion/react\u003c/code\u003e in \u003ccode\u003esrc/\u003c/code\u003e\u003cspan class=\"issue-shorthand\"\u003e #5121\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e) \u003cstrong\u003efrom this point forward using only the generated CSS is not supported, EUI must be used through React\u003c/strong\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ctracking-block data-id=\"84648206-aeb2-4c62-9324-29c6cf6eb36e\" data-readonly=\"\" data-query-type=\"DEFAULT\" data-response-source-type=\"GRAPH\" data-completion-completed=\"1\" data-completion-total=\"1\"\u003e\n \u003cdiv class=\"TrackingBlock border color-border-subtle rounded-2 mb-3 pb-2\" data-target=\"tracking-block.contentWrapper\" data-action=\"tracking-block-omnibar-append:tracking-block tasklist-block-title-update:tracking-block change:tracking-block click:tracking-block\"\u003e\n \u003cx-banner data-dismiss-scheme=\"none\" data-view-component=\"true\"\u003e\n \u003cdiv hidden=\"hidden\" data-target=\"tracking-block.staleBanner\" data-view-component=\"true\" class=\"Banner flash Banner--error flash-error mx-3 mt-3\"\u003e\n \u003cdiv class=\"Banner-visual\"\u003e\n \u003csvg aria-hidden=\"true\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-stop\"\u003e\n \u003cpath d=\"M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n \u003c/div\u003e\n \u003cdiv data-view-component=\"true\" class=\"Banner-message\"\u003e\n \u003cp class=\"Banner-title\" data-target=\"x-banner.titleText\"\u003eThe content you are editing has changed. Please copy your edits and refresh the page.\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\u003c/x-banner\u003e\n \u003cdiv class=\"mx-3 mt-3 d-flex flex-justify-between mb-1 gap-2\"\u003e\n \u003ctasklist-block-title class=\"tasklist-title-container width-full d-flex flex-items-center mt-n1 ml-n1\"\u003e\n \u003cdiv class=\"color-bg-done color-fg-done rounded p-1 d-flex flex-items-center flex-justify-center mr-1\"\u003e\n \u003csvg aria-hidden=\"true\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-checklist js-tracking-block-completion-icon color-fg-done\"\u003e\n \u003cpath d=\"M2.5 1.75v11.5c0 .138.112.25.25.25h3.17a.75.75 0 0 1 0 1.5H2.75A1.75 1.75 0 0 1 1 13.25V1.75C1 .784 1.784 0 2.75 0h8.5C12.216 0 13 .784 13 1.75v7.736a.75.75 0 0 1-1.5 0V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13.274 9.537v-.001l-4.557 4.45a.75.75 0 0 1-1.055-.008l-1.943-1.95a.75.75 0 0 1 1.062-1.058l1.419 1.425 4.026-3.932a.75.75 0 1 1 1.048 1.074ZM4.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM4 7.75A.75.75 0 0 1 4.75 7h2a.75.75 0 0 1 0 1.5h-2A.75.75 0 0 1 4 7.75Z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n \u003c/div\u003e\n\n \u003cdiv data-target=\"tracking-block.titleViewMode tasklist-block-title.titleViewMode\" data-view-component=\"true\" class=\"d-flex flex-items-center\"\u003e\n \u003ch3 data-target=\"tasklist-block-title.titleText\" data-view-component=\"true\" class=\"m-0 flex-1\"\u003e2022-2024\u003c/h3\u003e\n\u003c/div\u003e\u003c/tasklist-block-title\u003e\n\n\n \u003cdiv data-view-component=\"true\" class=\"flex-items-center flex-justify-between d-flex\"\u003e\n \u003cspan data-view-component=\"true\" class=\"Label Label--success\"\u003e\n Preview\n\u003c/span\u003e\n \u003ca style=\"margin-bottom: 2px; white-space: nowrap;\" target=\"_blank\" href=\"https://github.com/community/community/discussions/39106\" data-view-component=\"true\" class=\"Link Link--muted ml-2 mr-4\"\u003eGive feedback\u003c/a\u003e\n\n\u003c/div\u003e \u003c/div\u003e\n\n \u003col dir=\"auto\" class=\"TrackingBlock-list mb-0 list-style-none\" data-target=\"tracking-block.list\"\u003e\n \u003cli tabindex=\"0\" role=\"listitem\" class=\"TrackingBlock-item d-flex mt-0 px-3 py-1 gap-2 flex-justify-between position-relative js-tasklist-draggable-issue border-bottom\" data-issue=\"\" data-targets=\"tracking-block.listItems\" data-item-uuid=\"e78d5c9a-c1ad-5d1b-ba55-d3ae6b565ba7\" data-item-title=\"[Meta][CSS-in-JS] Component conversions\" data-item-state=\"closed\" data-item-position=\"100\" aria-label=\"Completed issue [Meta][CSS-in-JS] Component conversions eui 1158679461, assigned to cee-chen, 2 labels. You are on a link.\" data-item-id=\"1158679461\" data-display-number=\"5685\" data-repository-id=\"107422373\" data-repository-name=\"eui\"\u003e\n \u003cdiv class=\"tasklist-issue-content d-flex js-item-title flex-items-start my-1\"\u003e\n \u003cspan class=\"no-truncate\"\u003e\n \u003csvg aria-hidden=\"true\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-issue-closed closed issue-state-icon\"\u003e\n \u003cpath d=\"M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\n \u003ca href=\"https://github.com/elastic/eui/issues/5685\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/5685/hovercard\" class=\"js-navigation-open wb-break-word Link--secondary\" data-hydro-click=\"{\u0026quot;event_type\u0026quot;:\u0026quot;tasklist.item.link_click\u0026quot;,\u0026quot;payload\u0026quot;:{\u0026quot;link_type\u0026quot;:\u0026quot;issue\u0026quot;,\u0026quot;repository_id\u0026quot;:107422373,\u0026quot;child_url\u0026quot;:\u0026quot;https://github.com/elastic/eui/issues/5685\u0026quot;,\u0026quot;originating_url\u0026quot;:\u0026quot;https://github.com/elastic/eui/issues/3912\u0026quot;,\u0026quot;user_id\u0026quot;:null}}\" data-hydro-click-hmac=\"df58637d79c53a668b698a54d42a92e52aa04d35bef36ce663fd6d0b7a1c1d88\"\u003e\n \u003cspan class=\"color-fg-default\"\u003e[Meta][CSS-in-JS] Component conversions\u003c/span\u003e\n\n \u003cspan\u003e#5685\u003c/span\u003e\n\n \u003c/a\u003e\n \u003c/span\u003e\n\n \u003c/div\u003e\n \u003cdiv class=\"flex-shrink-0 mt-1 flex-items-start\"\u003e\n \u003cdiv\u003e\n \u003ctracked-issues-progress data-total=\"30\" data-completed=\"30\" data-type=\"tasklist_item\"\u003e\n \u003cdiv class=\"d-flex flex-row flex-justify-start flex-items-center text-small border ml-2\" style=\"border-radius: 30px; padding: 0px 2px 0px 4px; height: 20px\"\u003e\n \n\u003cspan style=\"transform:rotate(-90deg); width:12px; height:12px; display: inline-flex\"\u003e\n \u003csvg width=\"12\" height=\"12\" data-target=\"tracked-issues-progress.progress\" data-circumference=\"31\"\u003e\n \u003cpath fill=\"var(--bgColor-done-muted, var(--color-done-subtle))\" d=\"M 11.0 6.0 A 5 5 0 1 1 11.0 5.999999999999999 L 6 6\"\u003e\u003c/path\u003e\n \u003ccircle stroke=\"var(--borderColor-default, var(--color-border-default))\" stroke-width=\"2\" fill=\"transparent\" cx=\"50%\" cy=\"50%\" r=\"5\"\u003e\u003c/circle\u003e\n \u003ccircle data-target=\"tracked-issues-progress.stroke\" style=\"transition: stroke-dashoffset 0.35s; transform: rotate(5.806451612903226deg); transform-origin: center\" stroke=\"var(--fgColor-done, var(--color-done-fg))\" stroke-width=\"2\" stroke-dasharray=\"31\" stroke-dashoffset=\"0\" stroke-linecap=\"round\" fill=\"transparent\" cx=\"50%\" cy=\"50%\" r=\"5\"\u003e\u003c/circle\u003e\n \u003c/svg\u003e\n\u003c/span\u003e\n\n \u003cspan class=\"text-normal no-wrap mr-1 ml-1\" data-target=\"tracked-issues-progress.label\" style=\"color: var(--fgColor-muted, var(--color-fg-muted))\"\u003e30 of 30\u003c/span\u003e\n \u003c/div\u003e\n\u003c/tracked-issues-progress\u003e\n\n\u003c/div\u003e\n\n \u003c/div\u003e\n \u003cdiv style=\"flex-grow: 1\" data-view-component=\"true\"\u003e\n\u003c/div\u003e\n \u003cdiv class=\"js-label-loading-container d-flex flex-items-start mt-1 ml-1\"\u003e\n \u003cdiv class=\"Skeleton\"\u003e\u003c/div\u003e\n \u003cdiv class=\"Skeleton\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv data-view-component=\"true\" class=\"js-label-assignee-container hide-labels flex-justify-end flex-grow-1 flex-items-start d-flex ml-1 mt-1\"\u003e\n \n\u003cspan id=\"\" data-name=\"emotion\" style=\"--label-r:219;--label-g:101;--label-b:159;--label-h:330;--label-s:62;--label-l:62;\" data-view-component=\"true\" class=\"IssueLabel hx_IssueLabel js-item-label ml-1 v-align-middle\"\u003e\n \u003cspan class=\"css-truncate css-truncate-target width-fit v-align-middle\"\u003eemotion\u003c/span\u003e\n\u003c/span\u003e\n \n\u003cspan id=\"\" data-name=\"meta\" style=\"--label-r:14;--label-g:138;--label-b:22;--label-h:123;--label-s:81;--label-l:29;\" data-view-component=\"true\" class=\"IssueLabel hx_IssueLabel js-item-label ml-1 v-align-middle\"\u003e\n \u003cspan class=\"css-truncate css-truncate-target width-fit v-align-middle\"\u003emeta\u003c/span\u003e\n\u003c/span\u003e\n \n\u003cspan id=\"\" style=\"--label-r:189;--label-g:205;--label-b:164;--label-h:83;--label-s:29;--label-l:72;\" data-view-component=\"true\" class=\"IssueLabel hx_IssueLabel js-item-label label-template ml-1 v-align-middle\"\u003e\n \u003cspan class=\"css-truncate css-truncate-target width-fit v-align-middle\"\u003e\u003c/span\u003e\n\u003c/span\u003e\n \u003cbutton id=\"hidden-label-button-[Meta][CSS-in-JS] Component conversions-84648206-aeb2-4c62-9324-29c6cf6eb36e\" aria-label=\"emotion,meta\" data-action=\"click:tracking-block#toggleLabelCountPopover\" type=\"button\" data-view-component=\"true\" class=\"js-hidden-label-counter btn d-flex ml-1\"\u003e +2\n\u003c/button\u003e \u003cdiv style=\"position: relative\" class=\"js-label-count-popover-container\" hidden=\"\"\u003e\n \u003cdiv class=\"label-count-popover-overlay\" data-action=\"click:tracking-block#hideLabelCountPopover\"\u003e\u003c/div\u003e\n \u003cdiv style=\"top: 16px\" data-view-component=\"true\" class=\"Popover position-absolute right-0\"\u003e\n \u003cdiv data-view-component=\"true\" class=\"Popover-message Box Popover-message--top-right p-2 d-flex flex-wrap mt-2 mx-auto text-left\"\u003e\n \n \n\u003cspan id=\"\" hidden=\"hidden\" data-name=\"emotion\" style=\"--label-r:219;--label-g:101;--label-b:159;--label-h:330;--label-s:62;--label-l:62;\" data-view-component=\"true\" class=\"IssueLabel hx_IssueLabel js-item-label-in-popover mt-1 mb-1 mr-1 v-align-middle\"\u003e\n \u003cspan class=\"css-truncate css-truncate-target width-fit v-align-middle\"\u003eemotion\u003c/span\u003e\n\u003c/span\u003e\n \n\u003cspan id=\"\" hidden=\"hidden\" data-name=\"meta\" style=\"--label-r:14;--label-g:138;--label-b:22;--label-h:123;--label-s:81;--label-l:29;\" data-view-component=\"true\" class=\"IssueLabel hx_IssueLabel js-item-label-in-popover mt-1 mb-1 mr-1 v-align-middle\"\u003e\n \u003cspan class=\"css-truncate css-truncate-target width-fit v-align-middle\"\u003emeta\u003c/span\u003e\n\u003c/span\u003e\n \n\u003cspan id=\"\" hidden=\"hidden\" style=\"--label-r:189;--label-g:205;--label-b:164;--label-h:83;--label-s:29;--label-l:72;\" data-view-component=\"true\" class=\"IssueLabel hx_IssueLabel js-item-label-in-popover label-popover-template mt-1 mb-1 mr-1 v-align-middle\"\u003e\n \u003cspan class=\"css-truncate css-truncate-target width-fit v-align-middle\"\u003e\u003c/span\u003e\n\u003c/span\u003e\n\n\u003c/div\u003e\u003c/div\u003e \u003c/div\u003e\n\u003c/div\u003e\n \u003cdiv data-view-component=\"true\" class=\"d-flex flex-items-start mt-1\"\u003e\n \u003cdiv data-view-component=\"true\" class=\"AvatarStack js-item-avatar-stack AvatarStack--right AvatarStack--two\"\u003e\n \u003cdiv data-view-component=\"true\" class=\"AvatarStack-body\"\u003e\n \u003cimg data-hovercard-type=\"user\" data-hovercard-url=\"/users/cee-chen/hovercard\" src=\"https://avatars.githubusercontent.com/u/549407?v=4\" alt=\"cee-chen\" size=\"20\" height=\"20\" width=\"20\" data-view-component=\"true\" class=\"avatar avatar-small circle\"\u003e\n \u003ca href=\"\" data-view-component=\"true\" class=\"avatar-template avatar avatar-small circle lh-0 Link\"\u003e\u003cimg data-hovercard-type=\"user\" src=\"\" alt=\"\" size=\"20\" height=\"20\" width=\"20\" data-view-component=\"true\"\u003e\u003c/a\u003e\n\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\n\u003c/li\u003e\n\n\n \u003cli hidden=\"\" tabindex=\"0\" class=\"TrackingBlock-item js-template d-flex mt-0 px-3 py-1 gap-2 flex-justify-between position-relative js-tasklist-draggable-issue border-bottom\" data-target=\"tracking-block.emptyItemTemplate\" data-draft-issue=\"\"\u003e\n \u003cdiv class=\"tasklist-issue-handle js-tasklist-drag-handle draft-handle flex-self-start\"\u003e\n \u003csvg aria-hidden=\"true\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-grabber dragger-icon\"\u003e\n \u003cpath d=\"M10 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0-4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm5-9a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n \u003c/div\u003e\n \u003cdiv class=\"d-flex Truncate tasklist-flex-grow\"\u003e\n \u003clabel class=\"tasklist-checkbox\"\u003e\n \u003cinput data-action=\"change:tracking-block\" data-targets=\"tracking-block.inputs\" class=\"mr-2\" type=\"checkbox\"\u003e\n \u003cspan class=\"sr-only tasklist-draft\"\u003e\u003c/span\u003e\n \u003c/label\u003e\n\n \u003cdiv data-tracking-block-draft-title=\"\" class=\"tasklist-flex-grow d-flex\"\u003e\n \u003cdiv hidden=\"hidden\" data-morpheus-ignore=\"hidden\" data-view-component=\"true\" class=\"js-title-text-field-wrapper tasklist-textarea-container width-full\"\u003e\n \u003ctextarea class=\"js-size-to-fit size-to-fit\" aria-label=\"Draft title\" data-action=\"change:tracking-block keydown:tracking-block focusout:tracking-block#draftTitleInputOutFocus\" rows=\"1\"\u003e\u003c/textarea\u003e\n\u003c/div\u003e\n \u003cdiv data-targets=\"tracking-block.renderedTitles\" data-action=\"click:tracking-block#handleDraftTitleClick\" data-morpheus-ignore=\"hidden\" data-view-component=\"true\" class=\"js-draft-title tasklist-draft-title-container empty-template-title d-flex flex-items-center width-full\"\u003e\n \u003cspan data-view-component=\"true\" class=\"wb-break-word\"\u003e\u003c/span\u003e\n\u003c/div\u003e \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv data-targets=\"tracking-block.itemMenus\"\u003e\n \u003caction-menu data-select-variant=\"none\" data-view-component=\"true\" class=\"tracking-block-list-item-dropdown-menu\"\u003e\n \u003cfocus-group direction=\"vertical\" mnemonics=\"\" retain=\"\"\u003e\n \u003cbutton style=\"max-height:24px\" data-targets=\"tracking-block.dropdownMenu\" id=\"tracking-block-list-item-dropdown-menu-1234-1-button\" popovertarget=\"tracking-block-list-item-dropdown-menu-1234-1-overlay\" aria-controls=\"tracking-block-list-item-dropdown-menu-1234-1-list\" aria-haspopup=\"true\" aria-labelledby=\"tooltip-ead4c5fd-76be-4b3e-87e5-b322073b2a52\" type=\"button\" data-view-component=\"true\" class=\"Button Button--iconOnly Button--invisible Button--small Truncate color-bg-transparent p-1 m-0 position-relative\"\u003e \u003csvg aria-hidden=\"true\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-kebab-horizontal Button-visual\"\u003e\n \u003cpath d=\"M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n\u003c/button\u003e\u003ctool-tip id=\"tooltip-ead4c5fd-76be-4b3e-87e5-b322073b2a52\" for=\"tracking-block-list-item-dropdown-menu-1234-1-button\" popover=\"manual\" data-direction=\"s\" data-type=\"label\" data-view-component=\"true\" class=\"sr-only position-absolute\"\u003eOptions\u003c/tool-tip\u003e\n\n\n\u003canchored-position data-target=\"action-menu.overlay\" id=\"tracking-block-list-item-dropdown-menu-1234-1-overlay\" anchor=\"tracking-block-list-item-dropdown-menu-1234-1-button\" align=\"end\" side=\"outside-bottom\" anchor-offset=\"normal\" popover=\"auto\" data-view-component=\"true\"\u003e\n \u003cdiv data-view-component=\"true\" class=\"Overlay Overlay--size-auto\"\u003e\n \n \u003cdiv data-view-component=\"true\" class=\"Overlay-body Overlay-body--paddingNone\"\u003e \u003caction-list\u003e\n \u003cdiv data-view-component=\"true\"\u003e\n \u003cul aria-labelledby=\"tracking-block-list-item-dropdown-menu-1234-1-button\" id=\"tracking-block-list-item-dropdown-menu-1234-1-list\" role=\"menu\" data-view-component=\"true\" class=\"ActionListWrap--inset ActionListWrap\"\u003e\n \u003cli type=\"button\" data-tracking-block-convert-button=\"\" data-targets=\"action-list.items\" role=\"none\" data-view-component=\"true\" class=\"ActionListItem color-fg-default d-flex\"\u003e\n \n \n \u003cbutton tabindex=\"-1\" id=\"item-89c8c4ec-81e4-4acd-9cd5-4c3c1995bf21\" role=\"menuitem\" data-view-component=\"true\" class=\"ActionListContent\"\u003e\n \n \u003cspan data-view-component=\"true\" class=\"ActionListItem-label\"\u003e\n \u003cdiv data-view-component=\"true\" class=\"d-flex flex-items-center flex-justify-between\"\u003e\n \u003cspan data-view-component=\"true\"\u003eConvert to issue\u003c/span\u003e\n\u003c/div\u003e\n\u003c/span\u003e \n\u003c/button\u003e\n \n\u003c/li\u003e\n \u003cli type=\"button\" data-action=\"click:tracking-block#handleMarkAsDone\" data-targets=\"action-list.items\" role=\"none\" data-view-component=\"true\" class=\"ActionListItem color-fg-default\"\u003e\n \n \n \u003cbutton tabindex=\"-1\" id=\"item-78eb3a5d-74bb-49fa-afa2-6e9cbaf9c0d6\" role=\"menuitem\" data-view-component=\"true\" class=\"ActionListContent\"\u003e\n \n \u003cspan data-view-component=\"true\" class=\"ActionListItem-label\"\u003e\n \u003cdiv data-view-component=\"true\" class=\"d-flex flex-items-center flex-justify-between\"\u003e\n \u003cspan data-view-component=\"true\"\u003eToggle completion\u003c/span\u003e\n\u003c/div\u003e\n\u003c/span\u003e \n\u003c/button\u003e\n \n\u003c/li\u003e\n \u003cli type=\"button\" data-action=\"click:tracking-block#handleRename\" data-targets=\"action-list.items\" role=\"none\" data-view-component=\"true\" class=\"ActionListItem color-fg-default d-flex\"\u003e\n \n \n \u003cbutton tabindex=\"-1\" id=\"item-0197c891-ce42-485b-b0d3-429c545ab192\" role=\"menuitem\" data-view-component=\"true\" class=\"ActionListContent\"\u003e\n \n \u003cspan data-view-component=\"true\" class=\"ActionListItem-label\"\u003e\n \u003cdiv data-view-component=\"true\" class=\"d-flex flex-items-center flex-justify-between\"\u003e\n \u003cspan data-view-component=\"true\"\u003eRename\u003c/span\u003e\n\u003c/div\u003e\n\u003c/span\u003e \n\u003c/button\u003e\n \n\u003c/li\u003e\n \u003cli type=\"button\" data-tracking-block-remove-button=\"\" data-targets=\"action-list.items\" role=\"none\" data-view-component=\"true\" class=\"ActionListItem--danger ActionListItem d-flex\"\u003e\n \n \n \u003cbutton tabindex=\"-1\" id=\"item-ae6de280-76b0-4d7d-af8b-e14daef0a6af\" role=\"menuitem\" data-view-component=\"true\" class=\"ActionListContent\"\u003e\n \n \u003cspan data-view-component=\"true\" class=\"ActionListItem-label\"\u003e\n \u003cdiv data-view-component=\"true\" class=\"d-flex flex-items-center flex-justify-between\"\u003e\n \u003cspan data-view-component=\"true\"\u003eRemove\u003c/span\u003e\n\u003c/div\u003e\n\u003c/span\u003e \n\u003c/button\u003e\n \n\u003c/li\u003e\n\u003c/ul\u003e \n\u003c/div\u003e\u003c/action-list\u003e\n\n\n\u003c/div\u003e\n \n\u003c/div\u003e\u003c/anchored-position\u003e \u003c/focus-group\u003e\n\u003c/action-menu\u003e \u003c/div\u003e\n \u003c/li\u003e\n \u003cli hidden=\"\" class=\"TrackingBlock-item js-template d-flex mt-0 px-3 py-1 gap-2 flex-justify-between position-relative js-tasklist-draggable-issue\" data-target=\"tracking-block.emptyIssueTemplate\" data-issue=\"\"\u003e\n \u003cdiv class=\"tasklist-issue-handle js-tasklist-drag-handle draft-handle\"\u003e\n \u003csvg aria-hidden=\"true\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-grabber dragger-icon\"\u003e\n \u003cpath d=\"M10 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0-4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm5-9a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z\"\u003e\u003c/path\u003e\n\u003c/svg\u003e\n \u003c/div\u003e\n \u003cdiv class=\"d-flex js-item-title flex-items-center\"\u003e\n \u003cdiv class=\"js-issue-template-content\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv style=\"flex-grow: 1\" data-view-component=\"true\"\u003e\u003c/div\u003e\n \u003c/li\u003e\n \u003c/ol\u003e\n\n \u003c/div\u003e\n\u003c/tracking-block\u003e\n\n\u003ch3 dir=\"auto\"\u003eBeyond component conversions:\u003c/h3\u003e\n\u003cul class=\"contains-task-list\"\u003e\n\u003cli\u003e\u003cdel\u003e[ ] Deprecate Sass usage in EUI docs\u003c/del\u003e Not being done, as EUI docs will be deprecated in favor of EUI+\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\"\u003e \u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-issue-opened open mr-1\" title=\"Open\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"\u003e\u003c/path\u003e\u003cpath d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"2174610069\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/7561\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/7561/hovercard\" href=\"https://github.com/elastic/eui/issues/7561\"\u003e[Emotion] Memoize all generated styles\u003cspan class=\"issue-shorthand\"\u003e #7561\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\"\u003e \u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-issue-opened open mr-1\" title=\"Open\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\"\u003e\u003c/path\u003e\u003cpath d=\"M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"1831961913\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/7025\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/7025/hovercard\" href=\"https://github.com/elastic/eui/issues/7025\"\u003e[Emotion] Figure out what exports we do and don't want to make public\u003cspan class=\"issue-shorthand\"\u003e #7025\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\"\u003e Convert Kibana's usage of \u003ccode class=\"notranslate\"\u003estyled-components\u003c/code\u003e to Emotion\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\"\u003e Deprecate using EUI's SCSS mixins/variables\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\"\u003e Elastic Charts theme as an EuiTheme\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 dir=\"auto\"\u003eNeeds discussion\u003c/h3\u003e\n\u003cul class=\"contains-task-list\"\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\"\u003e Remove use of \u003ccode class=\"notranslate\"\u003eghost\u003c/code\u003e and \u003ccode class=\"notranslate\"\u003eink\u003c/code\u003e in favor of \u003ccode class=\"notranslate\"\u003eEuiThemeProvider\u003c/code\u003e + \u003ccode class=\"notranslate\"\u003ecolorMode\u003c/code\u003e (\u003ca href=\"https://github.com/elastic/eui/discussions/6820\" data-hovercard-type=\"discussion\" data-hovercard-url=\"/elastic/eui/discussions/6820/hovercard\"\u003esee discussion\u003c/a\u003e)\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eI'm not sure if this still needs to be done or if this is something to instead be visited in the new theme/visual refresh work.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\"\u003e Deprecate using EUI's classnames\u003c/li\u003e\n\u003cli class=\"task-list-item\"\u003e\u003cinput type=\"checkbox\" id=\"\" disabled=\"\" class=\"task-list-item-checkbox\"\u003e Remove class names (after a lengthy deprecation period)\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003eFor context, the deprecation of \u003ccode class=\"notranslate\"\u003eclassName\u003c/code\u003es was something Caroline and Greg were pushing for. I'm not convinced that it's even feasible considering Kibana however.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e","bodyVersion":"878880a402bfea8da164082d614fe3555ce79562539dafdb6a4f118172a03d7d","createdAt":"2020-08-13T20:26:47Z","__isReactable":"Issue","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":5,"nodes":[{"__typename":"User","login":"seeruk","__isNode":"User","id":"MDQ6VXNlcjIwODMwMzM="},{"__typename":"User","login":"atifsyedali","__isNode":"User","id":"MDQ6VXNlcjg1OTQ2ODU="},{"__typename":"User","login":"merqurio","__isNode":"User","id":"MDQ6VXNlcjE0ODUwNTY="},{"__typename":"User","login":"luishdez","__isNode":"User","id":"MDQ6VXNlcjM4MzQ3"},{"__typename":"User","login":"gabibianconi","__isNode":"User","id":"MDQ6VXNlcjI1Njk0MzQ4"}]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":4,"nodes":[{"__typename":"User","login":"seeruk","__isNode":"User","id":"MDQ6VXNlcjIwODMwMzM="},{"__typename":"User","login":"j-m","__isNode":"User","id":"MDQ6VXNlcjE1Mzg2NDkx"},{"__typename":"User","login":"Gervwyk","__isNode":"User","id":"MDQ6VXNlcjcxNjUwNjQ="},{"__typename":"User","login":"merqurio","__isNode":"User","id":"MDQ6VXNlcjE0ODUwNTY="}]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":12,"nodes":[{"__typename":"User","login":"snide","__isNode":"User","id":"MDQ6VXNlcjMyNDUxOQ=="},{"__typename":"User","login":"weltenwort","__isNode":"User","id":"MDQ6VXNlcjk3Mzc0MQ=="},{"__typename":"User","login":"elizabetdev","__isNode":"User","id":"MDQ6VXNlcjI3NTA2Njg="},{"__typename":"User","login":"bkniffler","__isNode":"User","id":"MDQ6VXNlcjQzNDkzMjQ="},{"__typename":"User","login":"sorenlouv","__isNode":"User","id":"MDQ6VXNlcjIwOTk2Ng=="}]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"viewerCanUpdateMetadata":false,"viewerCanComment":false,"viewerCanAssign":false,"viewerCanLabel":false,"__isIssueOrPullRequest":"Issue","projectItemsNext":{"edges":[],"pageInfo":{"endCursor":null,"hasNextPage":false}},"viewerCanSetMilestone":false,"isPinned":false,"viewerCanDelete":false,"viewerCanTransfer":false,"viewerCanConvertToDiscussion":false,"viewerCanLock":false,"viewerCanType":false,"frontTimelineItems":{"pageInfo":{"hasNextPage":true,"endCursor":"Y3Vyc29yOnYyOpPPAAABdyZ6obgCqjEwODM4OTQzMTU="},"totalCount":52,"edges":[{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":3653735679,"createdAt":"2020-08-13T20:26:47Z","actor":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/549577?s=64\u0026u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"label":{"id":"MDU6TGFiZWw3Mzg5MDkwMTY=","nameHTML":"meta","name":"meta","color":"0e8a16","description":"Used to group similar requests or tracking. Not an Epic."},"__isNode":"LabeledEvent","id":"MDEyOkxhYmVsZWRFdmVudDM2NTM3MzU2Nzk="},"cursor":"Y3Vyc29yOnYyOpPPAAABc-mA61gBqjM2NTM3MzU2Nzk="},{"node":{"__typename":"LabeledEvent","__isIssueTimelineItems":"LabeledEvent","__isTimelineEvent":"LabeledEvent","databaseId":3653735680,"createdAt":"2020-08-13T20:26:47Z","actor":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/549577?s=64\u0026u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"label":{"id":"MDU6TGFiZWwxODU4NjAwMTA4","nameHTML":"Amsterdam","name":"Amsterdam","color":"006DE4","description":null},"__isNode":"LabeledEvent","id":"MDEyOkxhYmVsZWRFdmVudDM2NTM3MzU2ODA="},"cursor":"Y3Vyc29yOnYyOpPPAAABc-mA61gBqjM2NTM3MzU2ODA="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1044917350,"createdAt":"2020-08-13T20:30:33Z","actor":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/549577?s=64\u0026u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWU0MTYzMzQ4NzE="},"willCloseTarget":false,"referencedAt":"2020-08-13T20:30:33Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWU0MTYzMzQ4NzE=","issueTitleHTML":"[DISCUSS] Unifying our tooling for generating style code across Elastic","url":"https://github.com/elastic/eui/issues/1656","number":1656,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA0NDkxNzM1MA=="},"cursor":"Y3Vyc29yOnYyOpPPAAABc-mEXigCqjEwNDQ5MTczNTA="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1046025196,"createdAt":"2020-08-24T15:39:01Z","actor":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/549577?s=64\u0026u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWU2ODQ3NDgxMTU="},"willCloseTarget":false,"referencedAt":"2020-08-24T15:39:01Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWU2ODQ3NDgxMTU=","issueTitleHTML":"Allow turning on dark mode for individual components.","url":"https://github.com/elastic/eui/issues/3957","number":3957,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA0NjAyNTE5Ng=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdCEfaggCqjEwNDYwMjUxOTY="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1049414668,"createdAt":"2020-09-18T17:54:07Z","actor":{"__typename":"User","login":"thompsongl","id":"MDQ6VXNlcjI3MjgyMTI=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/2728212?s=64\u0026u=bc35ccd1cf87bba82c35a92ad8362e4a49f0d2c1\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWU1NDUxNTIyMTI="},"willCloseTarget":false,"referencedAt":"2020-09-18T17:54:07Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWU1NDUxNTIyMTI=","issueTitleHTML":"Extract SCSS variables for use in JS","url":"https://github.com/elastic/eui/issues/2731","number":2731,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA0OTQxNDY2OA=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdKJaFhgCqjEwNDk0MTQ2Njg="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1049416203,"createdAt":"2020-09-18T18:11:06Z","actor":{"__typename":"User","login":"chandlerprall","id":"MDQ6VXNlcjMxMzEyNQ==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/313125?s=64\u0026u=03f9fe744c7f2b101ac9fc903fea0a9037f5ab1f\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWUzNzk4NzgxNDI="},"willCloseTarget":false,"referencedAt":"2020-09-18T18:11:06Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWUzNzk4NzgxNDI=","issueTitleHTML":"Sass linting leftovers","url":"https://github.com/elastic/eui/issues/1303","number":1303,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA0OTQxNjIwMw=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdKJpopACqjEwNDk0MTYyMDM="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1049428255,"createdAt":"2020-09-18T20:24:26Z","actor":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/549577?s=64\u0026u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWUzNTI3NzUwMTc="},"willCloseTarget":false,"referencedAt":"2020-09-18T20:24:26Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWUzNTI3NzUwMTc=","issueTitleHTML":"Code looks jarring within tooltip","url":"https://github.com/elastic/eui/issues/1131","number":1131,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA0OTQyODI1NQ=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdKLjtJACqjEwNDk0MjgyNTU="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1049496055,"createdAt":"2020-09-20T19:03:24Z","actor":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/549577?s=64\u0026u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWU3MDQ2NjU2NDQ="},"willCloseTarget":false,"referencedAt":"2020-09-20T19:03:24Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWU3MDQ2NjU2NDQ=","issueTitleHTML":"2021 Roadmap - First 6 months","url":"https://github.com/elastic/eui/issues/4054","number":4054,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA0OTQ5NjA1NQ=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdKzmPGACqjEwNDk0OTYwNTU="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1049870073,"createdAt":"2020-09-23T15:53:16Z","actor":{"__typename":"User","login":"thompsongl","id":"MDQ6VXNlcjI3MjgyMTI=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/2728212?s=64\u0026u=bc35ccd1cf87bba82c35a92ad8362e4a49f0d2c1\u0026v=4"},"source":{"__typename":"PullRequest","__isNode":"PullRequest","id":"MDExOlB1bGxSZXF1ZXN0NDUwNTYxNjQx"},"willCloseTarget":false,"referencedAt":"2020-09-23T15:53:16Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"PullRequest","__isReferencedSubject":"PullRequest","id":"MDExOlB1bGxSZXF1ZXN0NDUwNTYxNjQx","pullTitleHTML":"[WIP] Emotion \u0026amp; Propagate","url":"https://github.com/elastic/eui/pull/3760","number":3760,"state":"CLOSED","isDraft":true,"isInMergeQueue":false,"repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"PullRequest"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA0OTg3MDA3Mw=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdLurPeACqjEwNDk4NzAwNzM="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1051409165,"createdAt":"2020-10-06T15:38:11Z","actor":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/549577?s=64\u0026u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWU3MTU3ODUwMTk="},"willCloseTarget":false,"referencedAt":"2020-10-06T15:38:11Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWU3MTU3ODUwMTk=","issueTitleHTML":"[EuiLoadingX] Add \u003ccode\u003espeed\u003c/code\u003e prop (feature request)","url":"https://github.com/elastic/eui/issues/4116","number":4116,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA1MTQwOTE2NQ=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdP6QGrgCqjEwNTE0MDkxNjU="},{"node":{"__typename":"IssueComment","__isIssueTimelineItems":"IssueComment","databaseId":704358492,"viewerDidAuthor":false,"issue":{"author":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw=="},"id":"MDU6SXNzdWU2Nzg3MTM5MzQ=","number":3912,"locked":false,"databaseId":678713934},"author":{"__typename":"User","login":"cchaos","avatarUrl":"https://avatars.githubusercontent.com/u/549577?u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4","id":"MDQ6VXNlcjU0OTU3Nw=="},"id":"MDEyOklzc3VlQ29tbWVudDcwNDM1ODQ5Mg==","body":"# Requests\r\n\r\n- #4116\r\n- https://github.com/elastic/eui/issues/4878\r\n- https://github.com/elastic/eui/issues/4158\r\n- https://github.com/elastic/eui/issues/3385\r\n- https://github.com/elastic/eui/issues/2609\r\n- https://github.com/elastic/eui/issues/4140","bodyHTML":"\u003ch1 dir=\"auto\"\u003eRequests\u003c/h1\u003e\n\u003cul dir=\"auto\"\u003e\n\u003cli\u003e\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-issue-closed closed mr-1\" title=\"Closed\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"715785019\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/4116\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/4116/hovercard\" href=\"https://github.com/elastic/eui/issues/4116\"\u003e[EuiLoadingX] Add \u003ccode\u003espeed\u003c/code\u003e prop (feature request)\u003cspan class=\"issue-shorthand\"\u003e #4116\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e\u003c/li\u003e\n\u003cli\u003e\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-issue-closed closed mr-1\" title=\"Closed\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"920548652\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/4878\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/4878/hovercard\" href=\"https://github.com/elastic/eui/issues/4878\"\u003e[EuiFlexGrid] Add \u003ccode\u003ejustifyContent\u003c/code\u003e and \u003ccode\u003ealignItems\u003c/code\u003e like \u003ccode\u003eEuiFlexGroup\u003c/code\u003e\u003cspan class=\"issue-shorthand\"\u003e #4878\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e\u003c/li\u003e\n\u003cli\u003e\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-issue-closed closed mr-1\" title=\"Closed\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"725351523\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/4158\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/4158/hovercard\" href=\"https://github.com/elastic/eui/issues/4158\"\u003eBottom bar too subtle to get properly noticed\u003cspan class=\"issue-shorthand\"\u003e #4158\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e\u003c/li\u003e\n\u003cli\u003e\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-issue-closed closed mr-1\" title=\"Closed\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"606497253\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/3385\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/3385/hovercard\" href=\"https://github.com/elastic/eui/issues/3385\"\u003e[Discuss] Cross-browser focus states for overflow containers\u003cspan class=\"issue-shorthand\"\u003e #3385\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e\u003c/li\u003e\n\u003cli\u003e\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-issue-closed closed mr-1\" title=\"Closed\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"535004473\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/2609\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/2609/hovercard\" href=\"https://github.com/elastic/eui/issues/2609\"\u003e[EuiFlexGrid] Allow number of columns based on viewport size\u003cspan class=\"issue-shorthand\"\u003e #2609\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e\u003c/li\u003e\n\u003cli\u003e\u003cspan class=\"reference\"\u003e\u003csvg class=\"octicon octicon-issue-closed closed mr-1\" title=\"Closed\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"\u003e\u003cpath d=\"M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z\"\u003e\u003c/path\u003e\u003cpath d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z\"\u003e\u003c/path\u003e\u003c/svg\u003e\u003ca class=\"issue-link js-issue-link\" data-error-text=\"Failed to load title\" data-id=\"722248039\" data-permission-text=\"Title is private\" data-url=\"https://github.com/elastic/eui/issues/4140\" data-hovercard-type=\"issue\" data-hovercard-url=\"/elastic/eui/issues/4140/hovercard\" href=\"https://github.com/elastic/eui/issues/4140\"\u003e[EuiFlexGroup] Responsive mode doesn't respect gutterSize\u003cspan class=\"issue-shorthand\"\u003e #4140\u003c/span\u003e\u003c/a\u003e\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e","bodyVersion":"4d3bf47752e6b99f1b83dbb1cbae652824c6c67458c625056d2d922ba2bb417f","viewerCanUpdate":false,"url":"https://github.com/elastic/eui/issues/3912#issuecomment-704358492","createdAt":"2020-10-06T15:38:43Z","authorAssociation":"CONTRIBUTOR","viewerCanDelete":false,"viewerCanMinimize":false,"viewerCanReport":false,"viewerCanReportToMaintainer":false,"viewerCanBlockFromOrg":false,"viewerCanUnblockFromOrg":false,"isHidden":false,"minimizedReason":null,"showSpammyBadge":false,"createdViaEmail":false,"authorToRepoOwnerSponsorship":null,"repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","owner":{"__typename":"Organization","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA=","login":"elastic","url":"https://github.com/elastic"},"isPrivate":false,"slashCommandsEnabled":false,"nameWithOwner":"elastic/eui","databaseId":107422373},"__isComment":"IssueComment","viewerCanReadUserContentEdits":true,"lastEditedAt":"2022-04-19T13:48:28Z","lastUserContentEdit":{"editor":{"__typename":"User","url":"https://github.com/cchaos","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw=="},"id":"UCE_lALOBmcipc4p-6hcziKScBM"},"__isReactable":"IssueComment","reactionGroups":[{"content":"THUMBS_UP","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"THUMBS_DOWN","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"LAUGH","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HOORAY","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"CONFUSED","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"HEART","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"ROCKET","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}},{"content":"EYES","viewerHasReacted":false,"reactors":{"totalCount":0,"nodes":[]}}],"__isNode":"IssueComment"},"cursor":"Y3Vyc29yOnYyOpPPAAABdP6Ql7gAqTcwNDM1ODQ5Mg=="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1058497328,"createdAt":"2020-12-01T15:47:40Z","actor":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/549577?s=64\u0026u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWU1MjE3NTY1NzM="},"willCloseTarget":false,"referencedAt":"2020-12-01T15:47:40Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWU1MjE3NTY1NzM=","issueTitleHTML":"2020 Roadmap","url":"https://github.com/elastic/eui/issues/2520","number":2520,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA1ODQ5NzMyOA=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdh786WACqjEwNTg0OTczMjg="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1066178614,"createdAt":"2020-12-15T16:40:50Z","actor":{"__typename":"User","login":"cchaos","id":"MDQ6VXNlcjU0OTU3Nw==","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/549577?s=64\u0026u=913120cbf16cecc73fe6e9220cd30840fecb3e19\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWU3Njc3MTEzNjY="},"willCloseTarget":false,"referencedAt":"2020-12-15T16:40:50Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWU3Njc3MTEzNjY=","issueTitleHTML":"[EuiCodeBlock] Allow switching theme type","url":"https://github.com/elastic/eui/issues/4385","number":4385,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA2NjE3ODYxNA=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdmdGnlACqjEwNjYxNzg2MTQ="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1083871150,"createdAt":"2021-01-21T17:46:12Z","actor":{"__typename":"User","login":"thompsongl","id":"MDQ6VXNlcjI3MjgyMTI=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/2728212?s=64\u0026u=bc35ccd1cf87bba82c35a92ad8362e4a49f0d2c1\u0026v=4"},"source":{"__typename":"Issue","__isNode":"Issue","id":"MDU6SXNzdWU3OTEzNjYzNzg="},"willCloseTarget":false,"referencedAt":"2021-01-21T17:46:12Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"Issue","__isReferencedSubject":"Issue","id":"MDU6SXNzdWU3OTEzNjYzNzg=","issueTitleHTML":"[EuiProvider] App configuration provider","url":"https://github.com/elastic/eui/issues/4439","number":4439,"stateReason":"COMPLETED","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"Issue"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA4Mzg3MTE1MA=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdyYNwqACqjEwODM4NzExNTA="},{"node":{"__typename":"CrossReferencedEvent","__isIssueTimelineItems":"CrossReferencedEvent","__isTimelineEvent":"CrossReferencedEvent","databaseId":1083894315,"createdAt":"2021-01-21T19:45:07Z","actor":{"__typename":"User","login":"thompsongl","id":"MDQ6VXNlcjI3MjgyMTI=","__isActor":"User","avatarUrl":"https://avatars.githubusercontent.com/u/2728212?s=64\u0026u=bc35ccd1cf87bba82c35a92ad8362e4a49f0d2c1\u0026v=4"},"source":{"__typename":"PullRequest","__isNode":"PullRequest","id":"MDExOlB1bGxSZXF1ZXN0NTU5NTAxNjIx"},"willCloseTarget":false,"referencedAt":"2021-01-21T19:45:07Z","target":{"__typename":"Issue","repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"__isNode":"Issue","id":"MDU6SXNzdWU2Nzg3MTM5MzQ="},"innerSource":{"__typename":"PullRequest","__isReferencedSubject":"PullRequest","id":"MDExOlB1bGxSZXF1ZXN0NTU5NTAxNjIx","pullTitleHTML":"[CSS-in-JS] Context and foundation","url":"https://github.com/elastic/eui/pull/4440","number":4440,"state":"MERGED","isDraft":false,"isInMergeQueue":false,"repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","name":"eui","isPrivate":false,"owner":{"__typename":"Organization","login":"elastic","id":"MDEyOk9yZ2FuaXphdGlvbjY3NjQzOTA="}},"__isNode":"PullRequest"},"__isNode":"CrossReferencedEvent","id":"MDIwOkNyb3NzUmVmZXJlbmNlZEV2ZW50MTA4Mzg5NDMxNQ=="},"cursor":"Y3Vyc29yOnYyOpPPAAABdyZ6obgCqjEwODM4OTQzMTU="}]},"backTimelineItems":{"pageInfo":{"hasPreviousPage":true,"startCursor":null},"totalCount":52,"edges":[]}},"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM="},"safeViewer":null}},"timestamp":1743674408}]},"title":null,"appPayload":{"initial_view_content":{"team_id":null,"can_edit_view":true},"current_user":null,"current_user_settings":{"use_monospace_font":false,"use_single_key_shortcut":false,"preferred_emoji_skin_tone":null},"paste_url_link_as_plain_text":false,"base_avatar_url":"https://avatars.githubusercontent.com","help_url":"https://docs.github.com","sso_organizations":null,"multi_tenant":false,"tracing":false,"tracing_flamegraph":false,"catalog_service":"github/issues_experience","scoped_repository":{"id":"MDEwOlJlcG9zaXRvcnkxMDc0MjIzNzM=","owner":"elastic","name":"eui","is_archived":false},"copilot_api_url":null,"enabled_features":{"use_pull_request_subscriptions_enabled":false,"pull_request_single_subscription":true,"disable_issues_react_ssr":false,"issues_react":true,"issues_react_prefetch":false,"issue_types":true,"issues_react_dashboard_saved_views":false,"sub_issues":true,"issues_react_milestone_show":true,"copilot_natural_language_github_search":false,"private_avatars":false,"reserved_domain":true,"projects_classic_sunset_override":false,"issues_react_validate_timeline_items":false,"refresh_image_video_src":true,"issues_react_bypass_es_limits":true,"issues_react_csr_index_actions":true,"notifyd_issue_watch_activity_notify":false,"notifyd_enable_issue_thread_subscriptions":false,"issues_react_new_sort_dropdown":true,"issues_react_new_select_panel":false,"timeline_best_effort_count_optimization":false,"copilot_auto_assign_metadata":false,"issues_react_create_milestone":true,"issues_react_preload_labels":true,"copilot_workspace_use_moda":false,"copilot_workspace_cross_repo_selection":false,"issues_react_disable_sticky_header_observer":true,"issues_react_grouped_diff_on_edit_history":true,"issues_react_bypass_template_selection":true,"copilot_agent_mode":false,"issues_react_duplicate_issue":false,"issues_react_force_turbo_nav":false,"copilot_swe_agent":false,"issues_dashboard_use_sidepanel":true,"issues_dashboard_no_redirects":true,"copilot_plan_brainstorm_with_blackbird":false,"elasticsearch_semantic_indexing_issues_show_dupes":false,"issues_react_assignee_picker_v2":false,"copilot_workspace":null,"tasklist_block":true,"issues_react_perf_test":false}}}</script> <div data-target="react-app.reactRoot"><style data-styled="true" data-styled-version="5.3.11">.gjuRkX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;}/*!sc*/ .gjuRkX > *{width:100%;}/*!sc*/ .hzqxma{height:100%;}/*!sc*/ .fGkgDM{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;padding-top:16px;}/*!sc*/ .ehzXEi{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:1280px;width:100%;padding-top:0;padding-left:16px;padding-right:16px;padding-bottom:0;}/*!sc*/ @media screen and (min-width:544px){.ehzXEi{padding-left:16px;padding-right:16px;}}/*!sc*/ @media screen and (min-width:768px){.ehzXEi{padding-left:24px;padding-right:24px;}}/*!sc*/ .cEqqlB{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding-top:8px;}/*!sc*/ @media screen and (min-width:544px){.cEqqlB{padding-top:8px;}}/*!sc*/ @media screen and (min-width:768px){.cEqqlB{padding-top:0;}}/*!sc*/ @media screen and (min-width:1012px){.cEqqlB{padding-top:0;}}/*!sc*/ .dZmqGw{line-height:1;font-size:26px;font-weight:400;margin-right:8px;}/*!sc*/ @media screen and (min-width:544px){.dZmqGw{font-size:26px;}}/*!sc*/ @media screen and (min-width:768px){.dZmqGw{font-size:var(--text-title-size-large,32px);}}/*!sc*/ @media screen and (min-width:1012px){.dZmqGw{font-size:var(--text-title-size-large,32px);}}/*!sc*/ .lhNOUb{display:inline;word-break:break-word;}/*!sc*/ .YJa-Di{display:inline;white-space:nowrap;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));font-weight:300;}/*!sc*/ .ialRZd{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;width:100%;-webkit-box-pack:left;-webkit-justify-content:left;-ms-flex-pack:left;justify-content:left;}/*!sc*/ .cQpCwc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:4px;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:end;-webkit-justify-content:end;-ms-flex-pack:end;justify-content:end;}/*!sc*/ .lkyTpy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:4px;}/*!sc*/ @media screen and (min-width:544px){.lkyTpy{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}}/*!sc*/ @media screen and (min-width:768px){.lkyTpy{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}}/*!sc*/ @media screen and (min-width:1012px){.lkyTpy{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}}/*!sc*/ .bKeiGd{display:none;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;}/*!sc*/ @media screen and (min-width:544px){.bKeiGd{display:none;}}/*!sc*/ @media screen and (min-width:768px){.bKeiGd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media screen and (min-width:1012px){.bKeiGd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ .eshSer{height:100%;min-height:56px;width:100%;}/*!sc*/ .cySYaL{border-bottom:1px solid;border-color:var(--borderColor-muted,var(--color-border-subtle,rgba(31,35,40,0.15)));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;height:100%;width:100%;}/*!sc*/ .exQbKw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:8px;padding-top:var(--base-size-12,12px);padding-bottom:var(--base-size-12,12px);overflow:hidden;}/*!sc*/ .fKxfEJ{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;line-height:0;margin-right:8px;}/*!sc*/ .emuTBT{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));border-bottom:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));display:none;height:56px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:-webkit-sticky;position:sticky;width:100%;z-index:14;}/*!sc*/ .iEncmA{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;width:100%;}/*!sc*/ .fHWHoy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;gap:2px;overflow:hidden;width:100%;}/*!sc*/ .htJDeH{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;}/*!sc*/ .hVVawZ{color:var(--fgColor-default,var(--color-fg-default,#1F2328));display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-word;}/*!sc*/ .iQfnYL{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));margin-left:4px;}/*!sc*/ .jGasrR{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));display:none;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}/*!sc*/ @media screen and (min-width:544px){.jGasrR{display:none;}}/*!sc*/ @media screen and (min-width:768px){.jGasrR{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ @media screen and (min-width:1012px){.jGasrR{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ .jGasrR > *:not(:last-child)::after{content:"•";margin-left:4px;margin-right:4px;}/*!sc*/ .foDGRB{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;gap:4px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;overflow:hidden;height:100%;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;padding-left:8px;padding-right:8px;padding-top:4px;padding-bottom:8px;font-size:12px;}/*!sc*/ .gOJubP{overflow:hidden;}/*!sc*/ .byXXWC{position:absolute;visibility:visible;}/*!sc*/ .gxAvdY{top:-1px;height:1px;visibility:hidden;}/*!sc*/ .dkqtNN{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;max-width:1280px;width:100%;padding-top:0;padding-left:16px;padding-right:16px;padding-bottom:0;margin-bottom:24px;}/*!sc*/ @media screen and (min-width:544px){.dkqtNN{padding-left:16px;padding-right:16px;}}/*!sc*/ @media screen and (min-width:768px){.dkqtNN{padding-left:24px;padding-right:24px;}}/*!sc*/ .hfKjHv{width:100%;}/*!sc*/ .jonlJW{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:auto;-ms-flex:auto;flex:auto;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:stretch;-webkit-justify-content:stretch;-ms-flex-pack:stretch;justify-content:stretch;gap:8px;}/*!sc*/ @media screen and (min-width:544px){.jonlJW{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:8px;}}/*!sc*/ @media screen and (min-width:768px){.jonlJW{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}}/*!sc*/ @media screen and (min-width:1012px){.jonlJW{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:24px;}}/*!sc*/ .bSTcOH{width:100%;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));z-index:1;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;}/*!sc*/ @media screen and (min-width:544px){.bSTcOH{width:100%;}}/*!sc*/ @media screen and (min-width:768px){.bSTcOH{width:auto;}}/*!sc*/ @media screen and (min-width:1012px){.bSTcOH{width:auto;}}/*!sc*/ .gRssIw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:16px;}/*!sc*/ .bDlPR{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-order:1;-ms-flex-order:1;order:1;min-width:0;}/*!sc*/ @media screen and (min-width:544px){.bDlPR{-webkit-order:1;-ms-flex-order:1;order:1;}}/*!sc*/ @media screen and (min-width:768px){.bDlPR{-webkit-order:1;-ms-flex-order:1;order:1;}}/*!sc*/ @media screen and (min-width:1012px){.bDlPR{-webkit-order:1;-ms-flex-order:1;order:1;}}/*!sc*/ @media screen and (min-width:1280px){.bDlPR{-webkit-order:0;-ms-flex-order:0;order:0;}}/*!sc*/ .bDlPR video{aspect-ratio:16/9;width:100%;}/*!sc*/ .crMLA-D{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:8px;}/*!sc*/ .bjwYme{border:1px solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;min-width:0;}/*!sc*/ .jSpDiO{background-color:var(--bgColor-muted,var(--color-canvas-subtle,#f6f8fa));border-top-left-radius:6px;border-top-right-radius:6px;border-bottom:1px solid;border-bottom-color:var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));color:var(--fgColor-muted,var(--color-fg-muted,#656d76));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex:1;-ms-flex:1;flex:1;font-size:14px;padding-top:4px;padding-bottom:4px;padding-right:4px;padding-left:16px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;}/*!sc*/ .fnEhwD{width:100%;min-width:0;min-height:var(--control-small-size,28px);-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;padding-bottom:0;}/*!sc*/ .iKiGfw{place-self:center;grid-area:avatar;margin-right:8px;}/*!sc*/ .koxHLL{min-width:0;grid-column-start:title;grid-column-end:badges;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;-webkit-column-gap:0.45ch;column-gap:0.45ch;padding-top:4px;padding-bottom:4px;}/*!sc*/ .dqmClk{grid-area:title;margin-top:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;overflow:hidden;}/*!sc*/ .cRhwji{color:var(--fgColor-default,var(--color-fg-default,#1F2328));font-weight:500;grid-area:login;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;}/*!sc*/ .bJQcYY{grid-area:footer;line-height:1.4;}/*!sc*/ .bjFvWy{color:var(--fgColor-muted,var(--color-fg-muted,#656d76));}/*!sc*/ .kgTqOk{white-space:nowrap;grid-area:actions;-webkit-column-gap:var(--base-size-4,4px);column-gap:var(--base-size-4,4px);-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-flex-shrink:2;-ms-flex-negative:2;flex-shrink:2;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}/*!sc*/ .izrTon{grid-area:edits;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;overflow:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;margin-left:8px;}/*!sc*/ @media screen and (min-width:544px){.izrTon{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}/*!sc*/ @media screen and (min-width:768px){.izrTon{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}/*!sc*/ @media screen and (min-width:1012px){.izrTon{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}}/*!sc*/ .kpoUe{grid-column-start:badges;grid-column-end:actions;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-column-gap:var(--base-size-4,4px);column-gap:var(--base-size-4,4px);-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}/*!sc*/ .ezcJRX{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-column-gap:var(--base-size-8,8px);column-gap:var(--base-size-8,8px);margin-left:4px;}/*!sc*/ .dnyPuu{grid-area:actions;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-column-gap:var(--base-size-4,4px);column-gap:var(--base-size-4,4px);}/*!sc*/ .iwvKpZ[data-size="small"]{background-color:transparent;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:100px;padding-left:8px;padding-right:8px;box-shadow:none;}/*!sc*/ .iwvKpZ[data-size="small"]:hover:not([disabled]){background-color:var(--borderColor-accent-muted,var(--color-accent-muted,rgba(84,174,255,0.4)));}/*!sc*/ .gUkoLg{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}/*!sc*/ .bijsTi{margin-top:8px;margin-bottom:8px;margin-left:56px;}/*!sc*/ .cAuNrX{border-width:1px;border-style:solid;border-color:var(--borderColor-default,var(--color-border-default,#d0d7de));border-radius:6px;gap:24px;}/*!sc*/ .gDUyNS{padding:8px;height:40px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .bHuQdQ{font-size:14px;padding-left:8px;padding-right:8px;}/*!sc*/ .jWWqpP{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px;}/*!sc*/ .fDhSWy{margin-bottom:16px;}/*!sc*/ .kpqASb{width:auto;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}/*!sc*/ @media screen and (min-width:544px){.kpqASb{width:auto;}}/*!sc*/ @media screen and (min-width:768px){.kpqASb{width:256px;}}/*!sc*/ @media screen and (min-width:1012px){.kpqASb{width:296px;}}/*!sc*/ .kDreLw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;padding-top:4px;margin-bottom:16px;position:relative;width:100%;}/*!sc*/ .kDreLw:after{content:"";position:absolute;height:1px;bottom:-8px;left:8px;background-color:var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));width:calc(100% - 8px);}/*!sc*/ .bwxuvd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding-bottom:8px;}/*!sc*/ .jVkRst{top:4px;left:8px;font-size:12px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));position:relative;pointer-events:none;}/*!sc*/ .dCKzSy{font-size:12px;padding-left:8px;padding-right:8px;margin-bottom:8px;margin-top:4px;color:var(--fgColor-muted,var(--color-fg-muted,#656d76));display:block;}/*!sc*/ .flpEwB{height:0px;padding:0;margin:0;border:0;visibility:hidden;}/*!sc*/ .fUGKEb{width:100%;padding:0;}/*!sc*/ .gMMrYE{margin-left:8px;margin-top:4px;}/*!sc*/ .fBPJxs{padding-left:8px;padding-right:4px;width:100%;}/*!sc*/ .jZGZCQ{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;gap:16px;}/*!sc*/ .kqdiwS{height:40px;width:40px;margin-top:24px;}/*!sc*/ .bcnvkr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}/*!sc*/ .fwWvvw{padding-left:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .kRydKY{padding-bottom:16px;margin-left:4px;width:2px;background-color:var(--borderColor-muted,var(--color-border-muted,hsla(210,18%,87%,1)));}/*!sc*/ .fMCkUS{padding-bottom:16px;margin-right:4px;width:2px;}/*!sc*/ .jTVDGA{border:1px solid;border-color:var(--bgColor-neutral-muted,var(--color-neutral-muted,rgba(175,184,193,0.2)));border-radius:6px;background-color:var(--bgColor-default,var(--color-canvas-default,#ffffff));box-shadow:var(--shadow-resting-small,var(--color-shadow-small,0 1px 0 rgba(31,35,40,0.04)));overflow-x:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:16px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;}/*!sc*/ .ioNKhs{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}/*!sc*/ .jKxfJf{height:sm;width:150px;}/*!sc*/ .ieSmsH{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:8px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}/*!sc*/ .hpcToU{height:sm;width:random;}/*!sc*/ data-styled.g1[id="Box-sc-g0xbh4-0"]{content:"gjuRkX,hzqxma,fGkgDM,ehzXEi,cEqqlB,dZmqGw,lhNOUb,YJa-Di,ialRZd,cQpCwc,lkyTpy,bKeiGd,eshSer,cySYaL,exQbKw,fKxfEJ,emuTBT,iEncmA,fHWHoy,htJDeH,hVVawZ,iQfnYL,jGasrR,foDGRB,gOJubP,byXXWC,gxAvdY,dkqtNN,hfKjHv,jonlJW,bSTcOH,gRssIw,bDlPR,crMLA-D,bjwYme,jSpDiO,fnEhwD,iKiGfw,koxHLL,dqmClk,cRhwji,bJQcYY,bjFvWy,kgTqOk,izrTon,kpoUe,ezcJRX,dnyPuu,iwvKpZ,gUkoLg,bijsTi,cAuNrX,gDUyNS,bHuQdQ,jWWqpP,fDhSWy,kpqASb,kDreLw,bwxuvd,jVkRst,dCKzSy,flpEwB,fUGKEb,gMMrYE,fBPJxs,jZGZCQ,kqdiwS,bcnvkr,fwWvvw,kRydKY,fMCkUS,jTVDGA,ioNKhs,jKxfJf,ieSmsH,hpcToU,"}/*!sc*/ .dNXcPh{position:relative;display:inline-block;max-width:100%;}/*!sc*/ .dNXcPh::after{position:absolute;z-index:1000000;display:none;padding:0.5em 0.75em;font:normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";-webkit-font-smoothing:subpixel-antialiased;color:var(--tooltip-fgColor,var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff)));text-align:center;-webkit-text-decoration:none;text-decoration:none;text-shadow:none;text-transform:none;-webkit-letter-spacing:normal;-moz-letter-spacing:normal;-ms-letter-spacing:normal;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:var(--tooltip-bgColor,var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)));border-radius:6px;opacity:0;}/*!sc*/ @-webkit-keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ @keyframes tooltip-appear{from{opacity:0;}to{opacity:1;}}/*!sc*/ .dNXcPh:hover::after,.dNXcPh:active::after,.dNXcPh:focus::after,.dNXcPh:focus-within::after{display:inline-block;-webkit-text-decoration:none;text-decoration:none;-webkit-animation-name:tooltip-appear;animation-name:tooltip-appear;-webkit-animation-duration:0.1s;animation-duration:0.1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .dNXcPh.tooltipped-no-delay:hover::after,.dNXcPh.tooltipped-no-delay:active::after,.dNXcPh.tooltipped-no-delay:focus::after,.dNXcPh.tooltipped-no-delay:focus-within::after{-webkit-animation-delay:0s;animation-delay:0s;}/*!sc*/ .dNXcPh.tooltipped-multiline:hover::after,.dNXcPh.tooltipped-multiline:active::after,.dNXcPh.tooltipped-multiline:focus::after,.dNXcPh.tooltipped-multiline:focus-within::after{display:table-cell;}/*!sc*/ .dNXcPh.tooltipped-s::after,.dNXcPh.tooltipped-se::after,.dNXcPh.tooltipped-sw::after{top:100%;right:50%;margin-top:6px;}/*!sc*/ .dNXcPh.tooltipped-se::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .dNXcPh.tooltipped-sw::after{margin-right:-16px;}/*!sc*/ .dNXcPh.tooltipped-n::after,.dNXcPh.tooltipped-ne::after,.dNXcPh.tooltipped-nw::after{right:50%;bottom:100%;margin-bottom:6px;}/*!sc*/ .dNXcPh.tooltipped-ne::after{right:auto;left:50%;margin-left:-16px;}/*!sc*/ .dNXcPh.tooltipped-nw::after{margin-right:-16px;}/*!sc*/ .dNXcPh.tooltipped-s::after,.dNXcPh.tooltipped-n::after{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);}/*!sc*/ .dNXcPh.tooltipped-w::after{right:100%;bottom:50%;margin-right:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .dNXcPh.tooltipped-e::after{bottom:50%;left:100%;margin-left:6px;-webkit-transform:translateY(50%);-ms-transform:translateY(50%);transform:translateY(50%);}/*!sc*/ .dNXcPh.tooltipped-multiline::after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-wrap:break-word;white-space:pre-line;border-collapse:separate;}/*!sc*/ .dNXcPh.tooltipped-multiline.tooltipped-s::after,.dNXcPh.tooltipped-multiline.tooltipped-n::after{right:auto;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}/*!sc*/ .dNXcPh.tooltipped-multiline.tooltipped-w::after,.dNXcPh.tooltipped-multiline.tooltipped-e::after{right:100%;}/*!sc*/ .dNXcPh.tooltipped-align-right-2::after{right:0;margin-right:0;}/*!sc*/ .dNXcPh.tooltipped-align-left-2::after{left:0;margin-left:0;}/*!sc*/ data-styled.g16[id="Tooltip__TooltipBase-sc-17tf59c-0"]{content:"dNXcPh,"}/*!sc*/ .eoXvfR{margin:0;padding-inline-start:0;padding-top:0;padding-bottom:0;}/*!sc*/ data-styled.g17[id="List__ListBox-sc-1x7olzq-0"]{content:"eoXvfR,"}/*!sc*/ .hTWZgt{margin-right:4px;}/*!sc*/ data-styled.g39[id="Octicon-sc-9kayk9-0"]{content:"hTWZgt,"}/*!sc*/ .cpojIU{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:0;display:block;height:1.2em;}/*!sc*/ .cpojIU::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .qthD{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:50%;display:block;height:1.2em;border-radius:50%;width:40px;height:40px;margin-top:24px;}/*!sc*/ .qthD::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .eyUUZI{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:150px;height:16px;}/*!sc*/ .eyUUZI::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .bpBOYF{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:55%;height:16px;}/*!sc*/ .bpBOYF::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .itUJci{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:70%;height:16px;}/*!sc*/ .itUJci::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .jykjVo{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:58%;height:16px;}/*!sc*/ .jykjVo::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .izpEpw{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:63%;height:16px;}/*!sc*/ .izpEpw::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .cMnbhf{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:53%;height:16px;}/*!sc*/ .cMnbhf::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .dqaPp{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:62%;height:16px;}/*!sc*/ .dqaPp::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .likIaf{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:64%;height:16px;}/*!sc*/ .likIaf::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .inHxoF{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:44%;height:16px;}/*!sc*/ .inHxoF::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .iXfpGx{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:77%;height:16px;}/*!sc*/ .iXfpGx::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .hcMrcU{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:54%;height:16px;}/*!sc*/ .hcMrcU::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .gppubs{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:67%;height:16px;}/*!sc*/ .gppubs::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ .duUilQ{position:relative;overflow:hidden;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black);background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5)));border-radius:3px;display:block;height:1.2em;width:76%;height:16px;}/*!sc*/ .duUilQ::after{-webkit-animation:crVFvv 1.5s infinite linear;animation:crVFvv 1.5s infinite linear;background:linear-gradient(90deg,transparent,var(--bgColor-neutral-muted,var(--color-neutral-subtle,rgba(234,238,242,0.5))),transparent);content:'';position:absolute;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);bottom:0;left:0;right:0;top:0;}/*!sc*/ data-styled.g65[id="LoadingSkeleton-sc-695d630a-0"]{content:"cpojIU,qthD,eyUUZI,bpBOYF,itUJci,jykjVo,izpEpw,cMnbhf,dqaPp,likIaf,inHxoF,iXfpGx,hcMrcU,gppubs,duUilQ,"}/*!sc*/ .gcWyXp{font-size:inherit;}/*!sc*/ data-styled.g66[id="sc-aXZVg"]{content:"gcWyXp,"}/*!sc*/ .kIpASS{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:999px;cursor:auto;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;font-weight:600;font-family:inherit;-webkit-text-decoration:none;text-decoration:none;max-width:100%;position:relative;white-space:nowrap;font-size:12px;height:20px;line-height:20px;padding-left:8px;padding-right:8px;padding-top:0;padding-bottom:0;--label-r:14;--label-g:138;--label-b:22;--label-h:124;--label-s:82;--label-l:30;--perceived-lightness:calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);--lightness-switch:max(0,min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000),1));--border-color:var(--borderColor-muted,var(--color-border-subtle));position:relative;min-width:0;overflow:hidden;--lightness-threshold:0.453;--border-threshold:0.96;--background-alpha:0.20;--border-alpha:max(0,min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100),1));background:rgb(var(--label-r),var(--label-g),var(--label-b));color:hsl(0deg,0%,calc(var(--lightness-switch) * 100%));border-width:1px;border-style:solid;border-color:hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha));}/*!sc*/ data-styled.g105[id="TokenBase__StyledTokenBase-sc-a4e18a14-0"]{content:"kIpASS,"}/*!sc*/ .ljslTk{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent;border:0;font:inherit;margin:0;padding:0;width:auto;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;color:currentColor;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .ljslTk:is(a,button,[tabIndex='0']){cursor:pointer;}/*!sc*/ .ljslTk:is(a,button,[tabIndex='0'])::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;}/*!sc*/ data-styled.g106[id="TokenTextContainer-sc-eef9053-0"]{content:"ljslTk,"}/*!sc*/ .hohGHO{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:600;line-height:16px;color:var(--bgColor-default,var(--color-canvas-default,#ffffff));text-align:center;border-radius:100px;background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis,#1f883d));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis,#ffffff));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px;font-size:14px;white-space:nowrap;}/*!sc*/ data-styled.g114[id="StateLabel__StateLabelBase-sc-qthdln-0"]{content:"hohGHO,"}/*!sc*/ @-webkit-keyframes crVFvv{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}50%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}/*!sc*/ @keyframes crVFvv{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}50%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);}}/*!sc*/ data-styled.g119[id="sc-keyframes-crVFvv"]{content:"crVFvv,"}/*!sc*/ </style><!--$--><!--$--><div class="Box-sc-g0xbh4-0 gjuRkX"><div data-testid="issue-viewer-container" class="Box-sc-g0xbh4-0 hzqxma"><!--$--><div class="Box-sc-g0xbh4-0 fGkgDM IssueViewer-module__issueViewerContainer--flht4"><!--$--><div class="Box-sc-g0xbh4-0 ehzXEi"><div aria-label="Header" role="region" data-testid="issue-header"><div class="Box-sc-g0xbh4-0 prc-PageHeader-PageHeader-sT1Hp HeaderViewer-module__headerContainer--p0Eo1 "><div class="Box-sc-g0xbh4-0 cEqqlB prc-PageHeader-TitleArea-jxJZy" data-component="TitleArea" data-size-variant="medium"><h1 class="Box-sc-g0xbh4-0 dZmqGw prc-PageHeader-Title-LKOsd prc-Heading-Heading-6CmGO" data-component="PH_Title" data-hidden="false" style="--custom-font-size:26px,26px,var(--text-title-size-large, 32px),var(--text-title-size-large, 32px);--custom-line-height:1;--custom-font-weight:normal"><bdi class="Box-sc-g0xbh4-0 lhNOUb markdown-title" data-testid="issue-title">[Meta][CSS-in-JS] Switching to <code>emotion</code></bdi> <span class="Box-sc-g0xbh4-0 YJa-Di">#3912</span></h1></div><div class="Box-sc-g0xbh4-0 prc-PageHeader-ContextArea-6ykSJ" data-hidden-regular="true"><div class="Box-sc-g0xbh4-0 ialRZd prc-PageHeader-ContextAreaActions-RTJRk" data-hidden-regular="true"><div class="Box-sc-g0xbh4-0 cQpCwc"><div class="Box-sc-g0xbh4-0 lkyTpy"><a type="button" href="/login?return_to=" target="_blank" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="primary" aria-describedby=":R4ih9b:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x">New issue</span></span></a></div><button data-component="IconButton" type="button" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Reqh9b:-loading-announcement" aria-labelledby=":Rqh9b:"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><span class="CopyToClipboardButton-module__tooltip--Dq1IB prc-TooltipV2-Tooltip-cYMVY" data-direction="s" aria-label="Copy link" aria-hidden="true" id=":Rqh9b:">Copy link</span></div></div></div><div class="Box-sc-g0xbh4-0 bKeiGd prc-PageHeader-Actions-ygtmj" data-component="PH_Actions"><div class="Box-sc-g0xbh4-0 cQpCwc"><div class="Box-sc-g0xbh4-0 lkyTpy"><a type="button" href="/login?return_to=" target="_blank" class="prc-Button-ButtonBase-c50BI" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="primary" aria-describedby=":R4kh9b:-loading-announcement"><span data-component="buttonContent" data-align="center" class="prc-Button-ButtonContent-HKbr-"><span data-component="text" class="prc-Button-Label-pTQ3x">New issue</span></span></a></div><button data-component="IconButton" type="button" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":Resh9b:-loading-announcement" aria-labelledby=":Rsh9b:"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><span class="CopyToClipboardButton-module__tooltip--Dq1IB prc-TooltipV2-Tooltip-cYMVY" data-direction="s" aria-label="Copy link" aria-hidden="true" id=":Rsh9b:">Copy link</span></div></div></div></div></div><div class="Box-sc-g0xbh4-0 ehzXEi"><div data-testid="issue-metadata-fixed" class="Box-sc-g0xbh4-0 eshSer"><div class="Box-sc-g0xbh4-0 cySYaL"><div class="Box-sc-g0xbh4-0 exQbKw"><div><span data-testid="header-state" class="StateLabel__StateLabelBase-sc-qthdln-0 hohGHO"><svg focusable="false" aria-label="Issue" class="octicon octicon-issue-opened Octicon-sc-9kayk9-0 hTWZgt" role="img" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path></svg>Open</span></div><span class="prc-Token-TokenBase-PfQzJ HeaderSubIssuesSummary-module__token--M4gHr prc-Token-Token-L2-At" data-cursor-is-interactive="false" data-size="xlarge" text="[object Object]" data-is-remove-btn="false" style="border-width:1px"><div class="Box-sc-g0xbh4-0 fKxfEJ"><svg class="ProgressCircle-module__ringSvg--QYG_u" height="16" width="16" role="presentation" viewBox="0 0 100 100" aria-hidden="true" focusable="false"><circle class="ProgressCircle-module__circle--bZ9JZ" cx="50" cy="50" r="42.5" fill="none" stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))" stroke-width="15"></circle></svg></div><span class="prc-Token-TokenTextContainer--rlDJ"><span aria-hidden="true" class="HeaderSubIssuesSummary-module__visualLabel--h5fQk">0 / 3</span><span class="sr-only">0 of 3 issues completed</span></span></span><!--$--><!--/$--></div></div></div></div><div data-testid="issue-metadata-sticky" class="Box-sc-g0xbh4-0 emuTBT js-notification-shelf-offset-top"><div class="Box-sc-g0xbh4-0 ehzXEi"><div class="Box-sc-g0xbh4-0 iEncmA"><div><span data-testid="header-state" class="StateLabel__StateLabelBase-sc-qthdln-0 hohGHO"><svg focusable="false" aria-label="Issue" class="octicon octicon-issue-opened Octicon-sc-9kayk9-0 hTWZgt" role="img" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path></svg>Open</span></div><div class="Box-sc-g0xbh4-0 fHWHoy"><div class="Box-sc-g0xbh4-0 htJDeH"><a class="Box-sc-g0xbh4-0 hVVawZ prc-Link-Link-85e08" href="#top"><bdi class="Box-sc-g0xbh4-0 markdown-title" data-testid="issue-title-sticky">[Meta][CSS-in-JS] Switching to <code>emotion</code></bdi></a><span class="Box-sc-g0xbh4-0 iQfnYL prc-Text-Text-0ima0">#3912</span></div><div class="Box-sc-g0xbh4-0 jGasrR"><div class="HeaderSubIssuesSummary-module__smallSummary--n9ukK"><svg class="ProgressCircle-module__ringSvg--QYG_u" height="16" width="16" role="presentation" viewBox="0 0 100 100" aria-hidden="true" focusable="false"><circle class="ProgressCircle-module__circle--bZ9JZ" cx="50" cy="50" r="42.5" fill="none" stroke="var(--borderColor-default, var(--color-border-default, #d0d7de))" stroke-width="15"></circle></svg><span aria-hidden="true" class="HeaderSubIssuesSummary-module__visualLabel--h5fQk">0 / 3</span><span class="sr-only">0 of 3 issues completed</span></div><!--$--><!--/$--></div></div><div><div class="Box-sc-g0xbh4-0 cQpCwc"><button data-component="IconButton" type="button" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="medium" data-variant="invisible" aria-describedby=":R77i9b:-loading-announcement" aria-labelledby=":R7i9b:"><svg aria-hidden="true" focusable="false" class="octicon octicon-copy" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path></svg></button><span class="CopyToClipboardButton-module__tooltip--Dq1IB prc-TooltipV2-Tooltip-cYMVY" data-direction="s" aria-label="Copy link" aria-hidden="true" id=":R7i9b:">Copy link</span></div></div></div></div></div><div class="IssueMetadata-module__issueMetadata--KKAau"><div class="IssueMetadata-module__metadata--NFeDC"><div class="IssueMetadata-module__metadataTitle--QU1pi">Labels</div><div class="IssueMetadata-module__metadataValue--wfbKs"><div tabindex="-1" class="Box-sc-g0xbh4-0 foDGRB"><a class="Box-sc-g0xbh4-0 gOJubP prc-Link-Link-85e08" data-muted="true" href="https://github.com/elastic/eui/issues?q=state%3Aopen%20label%3A%22meta%22" muted="" aria-describedby=":Rqq9b:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 kIpASS"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="prc-Text-Text-0ima0">meta</span></span></span><span class="sr-only" id="MDU6TGFiZWw3Mzg5MDkwMTY=-tooltip">Used to group similar requests or tracking. Not an Epic.</span></a><span class="Box-sc-g0xbh4-0 byXXWC prc-TooltipV2-Tooltip-cYMVY" data-direction="s" aria-label="Used to group similar requests or tracking. Not an Epic." role="tooltip" aria-hidden="true" id=":Rqq9b:">Used to group similar requests or tracking. Not an Epic.</span></div></div></div></div><div class="Box-sc-g0xbh4-0 gxAvdY"></div><div class="Box-sc-g0xbh4-0 dkqtNN"><div class="Box-sc-g0xbh4-0 hfKjHv"></div></div><div class="Box-sc-g0xbh4-0 ehzXEi"><div class="Box-sc-g0xbh4-0 jonlJW"><div class="Box-sc-g0xbh4-0 bSTcOH"><div data-testid="issue-viewer-issue-container"><div class="Box-sc-g0xbh4-0 gRssIw"><a class="Avatar-module__avatarLink--S36bm Avatar-module__avatarOuter--MZJZH prc-Link-Link-85e08" href="/cchaos" data-hovercard-url="/users/cchaos/hovercard" aria-label="@cchaos's profile"><img data-component="Avatar" class="Avatar-module__issueViewerAvatar--grA_h prc-Avatar-Avatar-ZRS-m" alt="@cchaos" width="40" height="40" style="--avatarSize-regular:40px" src="https://avatars.githubusercontent.com/u/549577?u=913120cbf16cecc73fe6e9220cd30840fecb3e19&v=4&size=80" data-testid="github-avatar"/></a><div data-testid="issue-body" class="Box-sc-g0xbh4-0 bDlPR react-issue-body" data-hpc="true"><h2 class="sr-only">Description</h2><div class="Box-sc-g0xbh4-0 crMLA-D"><div class="Box-sc-g0xbh4-0 bjwYme"><div class="Box-sc-g0xbh4-0 jSpDiO"><div class="Box-sc-g0xbh4-0 fnEhwD ActivityHeader-module__activityHeader--Flalv"><div class="Box-sc-g0xbh4-0 iKiGfw Avatar-module__avatarInner--rVuJD"><a class="Avatar-module__avatarLink--S36bm prc-Link-Link-85e08" href="/cchaos" data-hovercard-url="/users/cchaos/hovercard" aria-label="@cchaos's profile"><img data-component="Avatar" class="prc-Avatar-Avatar-ZRS-m" alt="@cchaos" width="24" height="24" style="--avatarSize-regular:24px" src="https://avatars.githubusercontent.com/u/549577?u=913120cbf16cecc73fe6e9220cd30840fecb3e19&v=4&size=48" data-testid="github-avatar"/></a></div><div class="Box-sc-g0xbh4-0 koxHLL ActivityHeader-module__narrowViewportWrapper--Hjl75"><div class="Box-sc-g0xbh4-0 dqmClk"><a class="Box-sc-g0xbh4-0 cRhwji prc-Link-Link-85e08" href="https://github.com/cchaos" data-hovercard-url="/users/cchaos/hovercard" data-testid="issue-body-header-author">cchaos</a></div><div class="Box-sc-g0xbh4-0 bJQcYY ActivityHeader-module__footer--FVHp7"><span>opened </span><a class="Box-sc-g0xbh4-0 bjFvWy prc-Link-Link-85e08" href="https://github.com/elastic/eui/issues/3912#issue-678713934" data-testid="issue-body-header-link"><relative-time sx="[object Object]" class="sc-aXZVg gcWyXp">on <!-- -->Aug 13, 2020</relative-time></a></div></div><div class="Box-sc-g0xbh4-0 kgTqOk ActivityHeader-module__narrowViewportWrapper--Hjl75"><div class="Box-sc-g0xbh4-0 izrTon ActivityHeader-module__edits--LwHTE"></div><div class="Box-sc-g0xbh4-0 kpoUe"><div class="Box-sc-g0xbh4-0 ezcJRX"></div><div class="Box-sc-g0xbh4-0 dnyPuu"><button data-component="IconButton" type="button" aria-haspopup="true" aria-expanded="false" tabindex="0" class="prc-Button-ButtonBase-c50BI prc-Button-IconButton-szpyj" data-loading="false" data-no-visuals="true" data-size="small" data-variant="invisible" aria-describedby=":R15bd5db:-loading-announcement" aria-labelledby=":Rv5bd5db:" id=":R15bd5db:"><svg aria-hidden="true" focusable="false" class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" display="inline-block" overflow="visible" style="vertical-align:text-bottom"><path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path></svg></button><span class="prc-TooltipV2-Tooltip-cYMVY" data-direction="s" aria-hidden="true" id=":Rv5bd5db:">Issue body actions</span></div></div></div></div></div><div class="IssueBodyViewer-module__IssueBody--MXyFt"><div data-testid="markdown-body" data-team-hovercards-enabled="true" class="markdown-body" data-turbolinks="false"><div class="Box-sc-g0xbh4-0 markdown-body NewMarkdownViewer-module__safe-html-box--cRsz0"><p dir="auto">This is a meta ticket to discuss the rollout plan of the CSS in JS solution (Emotion). It is for documenting the expected upgrade process both within EUI and by consuming applications, and being transparent about our timeline.</p> <h2 dir="auto">(Tentative) Timeline & tasks</h2> <h3 dir="auto">Spring 2021:</h3> <p dir="auto">Get the contexts built out and (partially) used in the EUI components and docs, as well as thoroughly tested in downstream applications like Kibana and Cloud. Figure out all the dependencies, hooks and possible state management that go with it.</p> <ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <strong>EuiContext</strong>: Overall context layer that would encompass theming, layering, etc… (<span class="reference"><svg class="octicon octicon-git-merge merged color-fg-done mr-1" title="Merged" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="791443066" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/4440" data-hovercard-type="pull_request" data-hovercard-url="/elastic/eui/pull/4440/hovercard" href="https://github.com/elastic/eui/pull/4440">[CSS-in-JS] Context and foundation<span class="issue-shorthand"> #4440</span></a></span>)</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <strong>EuiThemeContext</strong>: Theme specific layer with at least these properties: (<span class="reference"><svg class="octicon octicon-git-merge merged color-fg-done mr-1" title="Merged" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="791443066" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/4440" data-hovercard-type="pull_request" data-hovercard-url="/elastic/eui/pull/4440/hovercard" href="https://github.com/elastic/eui/pull/4440">[CSS-in-JS] Context and foundation<span class="issue-shorthand"> #4440</span></a></span>) <ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">themeName</code></li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">colorMode: ‘light’ | ‘dark’</code></li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate">{ colors: {primar, secondary, etc} }</code></li> </ul> </li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <code class="notranslate"><ColorMode></code> aka: <code class="notranslate"><DarkMode>{component}</DarkMode></code> for switching of themes at the component level (<span class="reference"><svg class="octicon octicon-git-merge merged color-fg-done mr-1" title="Merged" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="791443066" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/4440" data-hovercard-type="pull_request" data-hovercard-url="/elastic/eui/pull/4440/hovercard" href="https://github.com/elastic/eui/pull/4440">[CSS-in-JS] Context and foundation<span class="issue-shorthand"> #4440</span></a></span>)</li> </ul> <h3 dir="auto">Summer 2021:</h3> <ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Build out the theme layer (<span class="reference"><svg class="octicon octicon-git-merge merged color-fg-done mr-1" title="Merged" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="832185715" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/4643" data-hovercard-type="pull_request" data-hovercard-url="/elastic/eui/pull/4643/hovercard" href="https://github.com/elastic/eui/pull/4643">[CSS-in-JS] Global theme<span class="issue-shorthand"> #4643</span></a></span>) <ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Convert all the SASS invisibles (variables, functions, etc) to JS</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Usage documentation</li> </ul> </li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Enable Emotion in Kibana (<span class="reference"><svg class="octicon octicon-git-merge merged color-fg-done mr-1" title="Merged" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="866218729" data-permission-text="Title is private" data-url="https://github.com/elastic/kibana/issues/98157" data-hovercard-type="pull_request" data-hovercard-url="/elastic/kibana/pull/98157/hovercard" href="https://github.com/elastic/kibana/pull/98157">Enable CSS-in-JS styling with <code>emotion</code><span class="issue-shorthand"> kibana#98157</span></a></span>)</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <strong>Initial release of context layer and global theme</strong> (<span class="reference"><svg class="octicon octicon-git-merge merged color-fg-done mr-1" title="Merged" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="805818793" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/4511" data-hovercard-type="pull_request" data-hovercard-url="/elastic/eui/pull/4511/hovercard" href="https://github.com/elastic/eui/pull/4511">[FEATURE] CSS-in-JS via <code>emotion</code>, initial release<span class="issue-shorthand"> #4511</span></a></span>)</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Add more documentation (<span class="reference"><svg class="octicon octicon-skip color-fg-muted mr-1" title="Closed as not planned" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm9.78-2.22-5.5 5.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l5.5-5.5a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="978313438" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/5072" data-hovercard-type="issue" data-hovercard-url="/elastic/eui/issues/5072/hovercard" href="https://github.com/elastic/eui/issues/5072">[Docs] <code>EuiThemeProvider</code> global theme switching<span class="issue-shorthand"> #5072</span></a></span>)</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Add global theme context provider in Kibana (<span class="reference"><svg class="octicon octicon-issue-closed closed mr-1" title="Closed" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="972967489" data-permission-text="Title is private" data-url="https://github.com/elastic/kibana/issues/108972" data-hovercard-type="issue" data-hovercard-url="/elastic/kibana/issues/108972/hovercard" href="https://github.com/elastic/kibana/issues/108972">Create a theming React context provider integration for applications<span class="issue-shorthand"> kibana#108972</span></a></span>)</li> </ul> <h3 dir="auto">Fall 2021:</h3> <p dir="auto">Start shifting component styles from SASS to JS. This part will probably take a full year and probably means phasing out the old 'legacy' theme, making Amsterdam default.</p> <ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Add global reset file via Emotion (<span class="reference"><svg class="octicon octicon-git-merge merged color-fg-done mr-1" title="Merged" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="985399671" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/5122" data-hovercard-type="pull_request" data-hovercard-url="/elastic/eui/pull/5122/hovercard" href="https://github.com/elastic/eui/pull/5122">[CSS-in-JS] Global style reset with <code>emotion</code><span class="issue-shorthand"> #5122</span></a></span>)</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Deprecate current theme for Amsterdam (<span class="reference"><svg class="octicon octicon-git-merge merged color-fg-done mr-1" title="Merged" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1010316490" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/5222" data-hovercard-type="pull_request" data-hovercard-url="/elastic/eui/pull/5222/hovercard" href="https://github.com/elastic/eui/pull/5222">[CSS-in-JS] [Breaking] Deprecating EUI theme to Legacy<span class="issue-shorthand"> #5222</span></a></span>)</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> EUI breaking/major release with peerDep on <code class="notranslate">@emotion/react</code> (<span class="reference"><svg class="octicon octicon-git-merge merged color-fg-done mr-1" title="Merged" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="985279222" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/5121" data-hovercard-type="pull_request" data-hovercard-url="/elastic/eui/pull/5121/hovercard" href="https://github.com/elastic/eui/pull/5121">[CSS-in-JS] <code>@emotion/react</code> in <code>src/</code><span class="issue-shorthand"> #5121</span></a></span>) <strong>from this point forward using only the generated CSS is not supported, EUI must be used through React</strong></li> </ul> <tracking-block data-id="84648206-aeb2-4c62-9324-29c6cf6eb36e" data-readonly="" data-query-type="DEFAULT" data-response-source-type="GRAPH" data-completion-completed="1" data-completion-total="1"> <div class="TrackingBlock border color-border-subtle rounded-2 mb-3 pb-2" data-target="tracking-block.contentWrapper" data-action="tracking-block-omnibar-append:tracking-block tasklist-block-title-update:tracking-block change:tracking-block click:tracking-block"> <x-banner data-dismiss-scheme="none" data-view-component="true"> <div hidden="hidden" data-target="tracking-block.staleBanner" data-view-component="true" class="Banner flash Banner--error flash-error mx-3 mt-3"> <div class="Banner-visual"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-stop"> <path d="M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </div> <div data-view-component="true" class="Banner-message"> <p class="Banner-title" data-target="x-banner.titleText">The content you are editing has changed. Please copy your edits and refresh the page.</p> </div></div></x-banner> <div class="mx-3 mt-3 d-flex flex-justify-between mb-1 gap-2"> <tasklist-block-title class="tasklist-title-container width-full d-flex flex-items-center mt-n1 ml-n1"> <div class="color-bg-done color-fg-done rounded p-1 d-flex flex-items-center flex-justify-center mr-1"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-checklist js-tracking-block-completion-icon color-fg-done"> <path d="M2.5 1.75v11.5c0 .138.112.25.25.25h3.17a.75.75 0 0 1 0 1.5H2.75A1.75 1.75 0 0 1 1 13.25V1.75C1 .784 1.784 0 2.75 0h8.5C12.216 0 13 .784 13 1.75v7.736a.75.75 0 0 1-1.5 0V1.75a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13.274 9.537v-.001l-4.557 4.45a.75.75 0 0 1-1.055-.008l-1.943-1.95a.75.75 0 0 1 1.062-1.058l1.419 1.425 4.026-3.932a.75.75 0 1 1 1.048 1.074ZM4.75 4h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM4 7.75A.75.75 0 0 1 4.75 7h2a.75.75 0 0 1 0 1.5h-2A.75.75 0 0 1 4 7.75Z"></path> </svg> </div> <div data-target="tracking-block.titleViewMode tasklist-block-title.titleViewMode" data-view-component="true" class="d-flex flex-items-center"> <h3 data-target="tasklist-block-title.titleText" data-view-component="true" class="m-0 flex-1">2022-2024</h3> </div></tasklist-block-title> <div data-view-component="true" class="flex-items-center flex-justify-between d-flex"> <span data-view-component="true" class="Label Label--success"> Preview </span> <a style="margin-bottom: 2px; white-space: nowrap;" target="_blank" href="https://github.com/community/community/discussions/39106" data-view-component="true" class="Link Link--muted ml-2 mr-4">Give feedback</a> </div> </div> <ol dir="auto" class="TrackingBlock-list mb-0 list-style-none" data-target="tracking-block.list"> <li tabindex="0" role="listitem" class="TrackingBlock-item d-flex mt-0 px-3 py-1 gap-2 flex-justify-between position-relative js-tasklist-draggable-issue border-bottom" data-issue="" data-targets="tracking-block.listItems" data-item-uuid="e78d5c9a-c1ad-5d1b-ba55-d3ae6b565ba7" data-item-title="[Meta][CSS-in-JS] Component conversions" data-item-state="closed" data-item-position="100" aria-label="Completed issue [Meta][CSS-in-JS] Component conversions eui 1158679461, assigned to cee-chen, 2 labels. You are on a link." data-item-id="1158679461" data-display-number="5685" data-repository-id="107422373" data-repository-name="eui"> <div class="tasklist-issue-content d-flex js-item-title flex-items-start my-1"> <span class="no-truncate"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-issue-closed closed issue-state-icon"> <path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z"></path><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z"></path> </svg> <a href="https://github.com/elastic/eui/issues/5685" data-hovercard-type="issue" data-hovercard-url="/elastic/eui/issues/5685/hovercard" class="js-navigation-open wb-break-word Link--secondary" data-hydro-click="{"event_type":"tasklist.item.link_click","payload":{"link_type":"issue","repository_id":107422373,"child_url":"https://github.com/elastic/eui/issues/5685","originating_url":"https://github.com/elastic/eui/issues/3912","user_id":null}}" data-hydro-click-hmac="df58637d79c53a668b698a54d42a92e52aa04d35bef36ce663fd6d0b7a1c1d88"> <span class="color-fg-default">[Meta][CSS-in-JS] Component conversions</span> <span>#5685</span> </a> </span> </div> <div class="flex-shrink-0 mt-1 flex-items-start"> <div> <tracked-issues-progress data-total="30" data-completed="30" data-type="tasklist_item"> <div class="d-flex flex-row flex-justify-start flex-items-center text-small border ml-2" style="border-radius: 30px; padding: 0px 2px 0px 4px; height: 20px"> <span style="transform:rotate(-90deg); width:12px; height:12px; display: inline-flex"> <svg width="12" height="12" data-target="tracked-issues-progress.progress" data-circumference="31"> <path fill="var(--bgColor-done-muted, var(--color-done-subtle))" d="M 11.0 6.0 A 5 5 0 1 1 11.0 5.999999999999999 L 6 6"></path> <circle stroke="var(--borderColor-default, var(--color-border-default))" stroke-width="2" fill="transparent" cx="50%" cy="50%" r="5"></circle> <circle data-target="tracked-issues-progress.stroke" style="transition: stroke-dashoffset 0.35s; transform: rotate(5.806451612903226deg); transform-origin: center" stroke="var(--fgColor-done, var(--color-done-fg))" stroke-width="2" stroke-dasharray="31" stroke-dashoffset="0" stroke-linecap="round" fill="transparent" cx="50%" cy="50%" r="5"></circle> </svg> </span> <span class="text-normal no-wrap mr-1 ml-1" data-target="tracked-issues-progress.label" style="color: var(--fgColor-muted, var(--color-fg-muted))">30 of 30</span> </div> </tracked-issues-progress> </div> </div> <div style="flex-grow: 1" data-view-component="true"> </div> <div class="js-label-loading-container d-flex flex-items-start mt-1 ml-1"> <div class="Skeleton"></div> <div class="Skeleton"></div> </div> <div data-view-component="true" class="js-label-assignee-container hide-labels flex-justify-end flex-grow-1 flex-items-start d-flex ml-1 mt-1"> <span id="" data-name="emotion" style="--label-r:219;--label-g:101;--label-b:159;--label-h:330;--label-s:62;--label-l:62;" data-view-component="true" class="IssueLabel hx_IssueLabel js-item-label ml-1 v-align-middle"> <span class="css-truncate css-truncate-target width-fit v-align-middle">emotion</span> </span> <span id="" data-name="meta" style="--label-r:14;--label-g:138;--label-b:22;--label-h:123;--label-s:81;--label-l:29;" data-view-component="true" class="IssueLabel hx_IssueLabel js-item-label ml-1 v-align-middle"> <span class="css-truncate css-truncate-target width-fit v-align-middle">meta</span> </span> <span id="" style="--label-r:189;--label-g:205;--label-b:164;--label-h:83;--label-s:29;--label-l:72;" data-view-component="true" class="IssueLabel hx_IssueLabel js-item-label label-template ml-1 v-align-middle"> <span class="css-truncate css-truncate-target width-fit v-align-middle"></span> </span> <button id="hidden-label-button-[Meta][CSS-in-JS] Component conversions-84648206-aeb2-4c62-9324-29c6cf6eb36e" aria-label="emotion,meta" data-action="click:tracking-block#toggleLabelCountPopover" type="button" data-view-component="true" class="js-hidden-label-counter btn d-flex ml-1"> +2 </button> <div style="position: relative" class="js-label-count-popover-container" hidden=""> <div class="label-count-popover-overlay" data-action="click:tracking-block#hideLabelCountPopover"></div> <div style="top: 16px" data-view-component="true" class="Popover position-absolute right-0"> <div data-view-component="true" class="Popover-message Box Popover-message--top-right p-2 d-flex flex-wrap mt-2 mx-auto text-left"> <span id="" hidden="hidden" data-name="emotion" style="--label-r:219;--label-g:101;--label-b:159;--label-h:330;--label-s:62;--label-l:62;" data-view-component="true" class="IssueLabel hx_IssueLabel js-item-label-in-popover mt-1 mb-1 mr-1 v-align-middle"> <span class="css-truncate css-truncate-target width-fit v-align-middle">emotion</span> </span> <span id="" hidden="hidden" data-name="meta" style="--label-r:14;--label-g:138;--label-b:22;--label-h:123;--label-s:81;--label-l:29;" data-view-component="true" class="IssueLabel hx_IssueLabel js-item-label-in-popover mt-1 mb-1 mr-1 v-align-middle"> <span class="css-truncate css-truncate-target width-fit v-align-middle">meta</span> </span> <span id="" hidden="hidden" style="--label-r:189;--label-g:205;--label-b:164;--label-h:83;--label-s:29;--label-l:72;" data-view-component="true" class="IssueLabel hx_IssueLabel js-item-label-in-popover label-popover-template mt-1 mb-1 mr-1 v-align-middle"> <span class="css-truncate css-truncate-target width-fit v-align-middle"></span> </span> </div></div> </div> </div> <div data-view-component="true" class="d-flex flex-items-start mt-1"> <div data-view-component="true" class="AvatarStack js-item-avatar-stack AvatarStack--right AvatarStack--two"> <div data-view-component="true" class="AvatarStack-body"> <img data-hovercard-type="user" data-hovercard-url="/users/cee-chen/hovercard" src="https://avatars.githubusercontent.com/u/549407?v=4" alt="cee-chen" size="20" height="20" width="20" data-view-component="true" class="avatar avatar-small circle"> <a href="" data-view-component="true" class="avatar-template avatar avatar-small circle lh-0 Link"><img data-hovercard-type="user" src="" alt="" size="20" height="20" width="20" data-view-component="true"></a> </div></div></div> </li> <li hidden="" tabindex="0" class="TrackingBlock-item js-template d-flex mt-0 px-3 py-1 gap-2 flex-justify-between position-relative js-tasklist-draggable-issue border-bottom" data-target="tracking-block.emptyItemTemplate" data-draft-issue=""> <div class="tasklist-issue-handle js-tasklist-drag-handle draft-handle flex-self-start"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-grabber dragger-icon"> <path d="M10 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0-4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm5-9a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </div> <div class="d-flex Truncate tasklist-flex-grow"> <label class="tasklist-checkbox"> <input data-action="change:tracking-block" data-targets="tracking-block.inputs" class="mr-2" type="checkbox"> <span class="sr-only tasklist-draft"></span> </label> <div data-tracking-block-draft-title="" class="tasklist-flex-grow d-flex"> <div hidden="hidden" data-morpheus-ignore="hidden" data-view-component="true" class="js-title-text-field-wrapper tasklist-textarea-container width-full"> <textarea class="js-size-to-fit size-to-fit" aria-label="Draft title" data-action="change:tracking-block keydown:tracking-block focusout:tracking-block#draftTitleInputOutFocus" rows="1"></textarea> </div> <div data-targets="tracking-block.renderedTitles" data-action="click:tracking-block#handleDraftTitleClick" data-morpheus-ignore="hidden" data-view-component="true" class="js-draft-title tasklist-draft-title-container empty-template-title d-flex flex-items-center width-full"> <span data-view-component="true" class="wb-break-word"></span> </div> </div> </div> <div data-targets="tracking-block.itemMenus"> <action-menu data-select-variant="none" data-view-component="true" class="tracking-block-list-item-dropdown-menu"> <focus-group direction="vertical" mnemonics="" retain=""> <button style="max-height:24px" data-targets="tracking-block.dropdownMenu" id="tracking-block-list-item-dropdown-menu-1234-1-button" popovertarget="tracking-block-list-item-dropdown-menu-1234-1-overlay" aria-controls="tracking-block-list-item-dropdown-menu-1234-1-list" aria-haspopup="true" aria-labelledby="tooltip-ead4c5fd-76be-4b3e-87e5-b322073b2a52" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--small Truncate color-bg-transparent p-1 m-0 position-relative"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-kebab-horizontal Button-visual"> <path d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path> </svg> </button><tool-tip id="tooltip-ead4c5fd-76be-4b3e-87e5-b322073b2a52" for="tracking-block-list-item-dropdown-menu-1234-1-button" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Options</tool-tip> <anchored-position data-target="action-menu.overlay" id="tracking-block-list-item-dropdown-menu-1234-1-overlay" anchor="tracking-block-list-item-dropdown-menu-1234-1-button" align="end" side="outside-bottom" anchor-offset="normal" popover="auto" data-view-component="true"> <div data-view-component="true" class="Overlay Overlay--size-auto"> <div data-view-component="true" class="Overlay-body Overlay-body--paddingNone"> <action-list> <div data-view-component="true"> <ul aria-labelledby="tracking-block-list-item-dropdown-menu-1234-1-button" id="tracking-block-list-item-dropdown-menu-1234-1-list" role="menu" data-view-component="true" class="ActionListWrap--inset ActionListWrap"> <li type="button" data-tracking-block-convert-button="" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem color-fg-default d-flex"> <button tabindex="-1" id="item-89c8c4ec-81e4-4acd-9cd5-4c3c1995bf21" role="menuitem" data-view-component="true" class="ActionListContent"> <span data-view-component="true" class="ActionListItem-label"> <div data-view-component="true" class="d-flex flex-items-center flex-justify-between"> <span data-view-component="true">Convert to issue</span> </div> </span> </button> </li> <li type="button" data-action="click:tracking-block#handleMarkAsDone" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem color-fg-default"> <button tabindex="-1" id="item-78eb3a5d-74bb-49fa-afa2-6e9cbaf9c0d6" role="menuitem" data-view-component="true" class="ActionListContent"> <span data-view-component="true" class="ActionListItem-label"> <div data-view-component="true" class="d-flex flex-items-center flex-justify-between"> <span data-view-component="true">Toggle completion</span> </div> </span> </button> </li> <li type="button" data-action="click:tracking-block#handleRename" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem color-fg-default d-flex"> <button tabindex="-1" id="item-0197c891-ce42-485b-b0d3-429c545ab192" role="menuitem" data-view-component="true" class="ActionListContent"> <span data-view-component="true" class="ActionListItem-label"> <div data-view-component="true" class="d-flex flex-items-center flex-justify-between"> <span data-view-component="true">Rename</span> </div> </span> </button> </li> <li type="button" data-tracking-block-remove-button="" data-targets="action-list.items" role="none" data-view-component="true" class="ActionListItem--danger ActionListItem d-flex"> <button tabindex="-1" id="item-ae6de280-76b0-4d7d-af8b-e14daef0a6af" role="menuitem" data-view-component="true" class="ActionListContent"> <span data-view-component="true" class="ActionListItem-label"> <div data-view-component="true" class="d-flex flex-items-center flex-justify-between"> <span data-view-component="true">Remove</span> </div> </span> </button> </li> </ul> </div></action-list> </div> </div></anchored-position> </focus-group> </action-menu> </div> </li> <li hidden="" class="TrackingBlock-item js-template d-flex mt-0 px-3 py-1 gap-2 flex-justify-between position-relative js-tasklist-draggable-issue" data-target="tracking-block.emptyIssueTemplate" data-issue=""> <div class="tasklist-issue-handle js-tasklist-drag-handle draft-handle"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-grabber dragger-icon"> <path d="M10 13a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm0-4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm-4 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm5-9a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path> </svg> </div> <div class="d-flex js-item-title flex-items-center"> <div class="js-issue-template-content"></div> </div> <div style="flex-grow: 1" data-view-component="true"></div> </li> </ol> </div> </tracking-block> <h3 dir="auto">Beyond component conversions:</h3> <ul class="contains-task-list"> <li><del>[ ] Deprecate Sass usage in EUI docs</del> Not being done, as EUI docs will be deprecated in favor of EUI+</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <span class="reference"><svg class="octicon octicon-issue-opened open mr-1" title="Open" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2174610069" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/7561" data-hovercard-type="issue" data-hovercard-url="/elastic/eui/issues/7561/hovercard" href="https://github.com/elastic/eui/issues/7561">[Emotion] Memoize all generated styles<span class="issue-shorthand"> #7561</span></a></span></li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> <span class="reference"><svg class="octicon octicon-issue-opened open mr-1" title="Open" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"></path><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z"></path></svg><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1831961913" data-permission-text="Title is private" data-url="https://github.com/elastic/eui/issues/7025" data-hovercard-type="issue" data-hovercard-url="/elastic/eui/issues/7025/hovercard" href="https://github.com/elastic/eui/issues/7025">[Emotion] Figure out what exports we do and don't want to make public<span class="issue-shorthand"> #7025</span></a></span></li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Convert Kibana's usage of <code class="notranslate">styled-components</code> to Emotion</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Deprecate using EUI's SCSS mixins/variables</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Elastic Charts theme as an EuiTheme</li> </ul> <h3 dir="auto">Needs discussion</h3> <ul class="contains-task-list"> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Remove use of <code class="notranslate">ghost</code> and <code class="notranslate">ink</code> in favor of <code class="notranslate">EuiThemeProvider</code> + <code class="notranslate">colorMode</code> (<a href="https://github.com/elastic/eui/discussions/6820" data-hovercard-type="discussion" data-hovercard-url="/elastic/eui/discussions/6820/hovercard">see discussion</a>) <ul dir="auto"> <li>I'm not sure if this still needs to be done or if this is something to instead be visited in the new theme/visual refresh work.</li> </ul> </li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Deprecate using EUI's classnames</li> <li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Remove class names (after a lengthy deprecation period) <ul dir="auto"> <li>For context, the deprecation of <code class="notranslate">className</code>s was something Caroline and Greg were pushing for. I'm not convinced that it's even feasible considering Kibana however.</li> </ul> </li> </ul></div></div><div class="IssueBodyViewer-module__IssueBodyTaskList--r4XEH"><!--$--><div role="toolbar" aria-label="Reactions" class="d-flex gap-1 flex-wrap"><span role="tooltip" aria-label="seeruk, atifsyedali, merqurio, luishdez and gabibianconi" id=":R6il5db:" class="Tooltip__TooltipBase-sc-17tf59c-0 dNXcPh tooltipped-ne tooltipped-align-left-2 tooltipped-multiline"><button type="button" aria-label="Unreact with 👍 (5 👍 reactions so far, including seeruk, atifsyedali, merqurio, luishdez and gabibianconi)" role="switch" aria-checked="false" class="Box-sc-g0xbh4-0 iwvKpZ prc-Button-ButtonBase-c50BI" data-loading="false" data-size="small" data-variant="default" aria-describedby=":R26il5db:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB">👍</span><span data-component="text" class="prc-Button-Label-pTQ3x">5</span></span></button></span><span role="tooltip" aria-label="seeruk, j-m, Gervwyk and merqurio" id=":Riil5db:" class="Tooltip__TooltipBase-sc-17tf59c-0 dNXcPh tooltipped-ne tooltipped-align-left-2 tooltipped-multiline"><button type="button" aria-label="Unreact with 🎉 (4 🎉 reactions so far, including seeruk, j-m, Gervwyk and merqurio)" role="switch" aria-checked="false" class="Box-sc-g0xbh4-0 iwvKpZ prc-Button-ButtonBase-c50BI" data-loading="false" data-size="small" data-variant="default" aria-describedby=":R2iil5db:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB">🎉</span><span data-component="text" class="prc-Button-Label-pTQ3x">4</span></span></button></span><span role="tooltip" aria-label="snide, weltenwort, elizabetdev, bkniffler, sorenlouv and 7 more" id=":Ruil5db:" class="Tooltip__TooltipBase-sc-17tf59c-0 dNXcPh tooltipped-ne tooltipped-align-left-2 tooltipped-multiline"><button type="button" aria-label="Unreact with 🚀 (5 🚀 reactions so far, including snide, weltenwort, elizabetdev, bkniffler, sorenlouv and 7 more)" role="switch" aria-checked="false" class="Box-sc-g0xbh4-0 iwvKpZ prc-Button-ButtonBase-c50BI" data-loading="false" data-size="small" data-variant="default" aria-describedby=":R2uil5db:-loading-announcement"><span data-component="buttonContent" class="Box-sc-g0xbh4-0 gUkoLg prc-Button-ButtonContent-HKbr-"><span data-component="leadingVisual" class="prc-Button-Visual-2epfX prc-Button-VisualWrap-Db-eB">🚀</span><span data-component="text" class="prc-Button-Label-pTQ3x">12</span></span></button></span></div><!--/$--></div></div></div></div></div></div></div><div data-testid="sub-issues-issue-container" class="Box-sc-g0xbh4-0 bijsTi"><div class="Box-sc-g0xbh4-0 cAuNrX"><div data-testid="sub-issues-loading-skeleton"><div class="Box-sc-g0xbh4-0 gDUyNS"><h3 class="Box-sc-g0xbh4-0 bHuQdQ">Sub-issues</h3></div><div class="Box-sc-g0xbh4-0 jWWqpP"><div class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 cpojIU"></div></div></div></div></div><div data-testid="issue-viewer-comments-container" class="react-comments-container"><div class="Box-sc-g0xbh4-0 fDhSWy"><!--$!--><template></template><div class="issue-timeline-loading-module__delaySkeletonLoad--qiw2o" data-testid="issue-timeline-loading"><div><div class="Box-sc-g0xbh4-0 jZGZCQ"><div height="40px" width="40px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 kqdiwS qthD"></div><div class="Box-sc-g0xbh4-0 bcnvkr"><div class="Box-sc-g0xbh4-0 fwWvvw"><div class="Box-sc-g0xbh4-0 kRydKY"></div><div class="Box-sc-g0xbh4-0 fMCkUS"></div></div><div data-testid="comment-skeleton" class="Box-sc-g0xbh4-0 jTVDGA"><div class="Box-sc-g0xbh4-0 ioNKhs"><div height="sm" width="150px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 jKxfJf eyUUZI"></div></div><div class="Box-sc-g0xbh4-0 ieSmsH"><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU bpBOYF"></div><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU itUJci"></div></div></div></div></div></div><div><div class="Box-sc-g0xbh4-0 jZGZCQ"><div height="40px" width="40px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 kqdiwS qthD"></div><div class="Box-sc-g0xbh4-0 bcnvkr"><div class="Box-sc-g0xbh4-0 fwWvvw"><div class="Box-sc-g0xbh4-0 kRydKY"></div><div class="Box-sc-g0xbh4-0 fMCkUS"></div></div><div data-testid="comment-skeleton" class="Box-sc-g0xbh4-0 jTVDGA"><div class="Box-sc-g0xbh4-0 ioNKhs"><div height="sm" width="150px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 jKxfJf eyUUZI"></div></div><div class="Box-sc-g0xbh4-0 ieSmsH"><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU jykjVo"></div><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU izpEpw"></div><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU cMnbhf"></div><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU dqaPp"></div><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU likIaf"></div></div></div></div></div></div><div><div class="Box-sc-g0xbh4-0 jZGZCQ"><div height="40px" width="40px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 kqdiwS qthD"></div><div class="Box-sc-g0xbh4-0 bcnvkr"><div class="Box-sc-g0xbh4-0 fwWvvw"><div class="Box-sc-g0xbh4-0 kRydKY"></div><div class="Box-sc-g0xbh4-0 fMCkUS"></div></div><div data-testid="comment-skeleton" class="Box-sc-g0xbh4-0 jTVDGA"><div class="Box-sc-g0xbh4-0 ioNKhs"><div height="sm" width="150px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 jKxfJf eyUUZI"></div></div><div class="Box-sc-g0xbh4-0 ieSmsH"><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU inHxoF"></div><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU iXfpGx"></div></div></div></div></div></div><div><div class="Box-sc-g0xbh4-0 jZGZCQ"><div height="40px" width="40px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 kqdiwS qthD"></div><div class="Box-sc-g0xbh4-0 bcnvkr"><div class="Box-sc-g0xbh4-0 fwWvvw"><div class="Box-sc-g0xbh4-0 kRydKY"></div><div class="Box-sc-g0xbh4-0 fMCkUS"></div></div><div data-testid="comment-skeleton" class="Box-sc-g0xbh4-0 jTVDGA"><div class="Box-sc-g0xbh4-0 ioNKhs"><div height="sm" width="150px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 jKxfJf eyUUZI"></div></div><div class="Box-sc-g0xbh4-0 ieSmsH"><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU itUJci"></div><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU hcMrcU"></div><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU gppubs"></div></div></div></div></div></div><div><div class="Box-sc-g0xbh4-0 jZGZCQ"><div height="40px" width="40px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 kqdiwS qthD"></div><div class="Box-sc-g0xbh4-0 bcnvkr"><div class="Box-sc-g0xbh4-0 fwWvvw"><div class="Box-sc-g0xbh4-0 kRydKY"></div><div class="Box-sc-g0xbh4-0 fMCkUS"></div></div><div data-testid="comment-skeleton" class="Box-sc-g0xbh4-0 jTVDGA"><div class="Box-sc-g0xbh4-0 ioNKhs"><div height="sm" width="150px" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 jKxfJf eyUUZI"></div></div><div class="Box-sc-g0xbh4-0 ieSmsH"><div height="sm" width="random" class="Box-sc-g0xbh4-0 LoadingSkeleton-sc-695d630a-0 hpcToU duUilQ"></div></div></div></div></div></div></div><!--/$--></div></div></div><div data-testid="issue-viewer-metadata-container" class="Box-sc-g0xbh4-0 kpqASb"><div class="IssueViewer-module__issueViewerMetadataPane--Q1n1b" data-testid="issue-viewer-metadata-pane"><h2 class="IssueViewer-module__metadataHeader--ZtOKL prc-Heading-Heading-6CmGO">Metadata</h2><h2 class="IssueViewer-module__largeScreenMetadataHeader--YW31U sr-only prc-Heading-Heading-6CmGO">Metadata</h2><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Assignees</h3></div><span class="Box-sc-g0xbh4-0 dCKzSy prc-Text-Text-0ima0">No one assigned</span><div class="Box-sc-g0xbh4-0 flpEwB"><ul class="List__ListBox-sc-1x7olzq-0 eoXvfR prc-ActionList-ActionList-X4RiC" data-dividers="false" data-variant="full"></ul></div></div></div><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Labels</h3></div></div><div class="Box-sc-g0xbh4-0 fUGKEb"><div tabindex="-1" data-testid="issue-labels" class="Box-sc-g0xbh4-0 foDGRB"><a class="Box-sc-g0xbh4-0 gOJubP prc-Link-Link-85e08" data-muted="true" href="https://github.com/elastic/eui/issues?q=state%3Aopen%20label%3A%22meta%22" muted="" aria-describedby=":Rpedb:"><span style="overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%" class="TokenBase__StyledTokenBase-sc-a4e18a14-0 kIpASS"><span class="TokenTextContainer-sc-eef9053-0 ljslTk"><span class="prc-Text-Text-0ima0">meta</span></span></span><span class="sr-only" id="MDU6TGFiZWw3Mzg5MDkwMTY=-tooltip">Used to group similar requests or tracking. Not an Epic.</span></a><span class="Box-sc-g0xbh4-0 byXXWC prc-TooltipV2-Tooltip-cYMVY" data-direction="s" aria-label="Used to group similar requests or tracking. Not an Epic." role="tooltip" aria-hidden="true" id=":Rpedb:">Used to group similar requests or tracking. Not an Epic.</span></div></div></div><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Type</h3></div><span class="Box-sc-g0xbh4-0 dCKzSy prc-Text-Text-0ima0">No type</span><div class="Box-sc-g0xbh4-0 flpEwB"><div class="Box-sc-g0xbh4-0 gMMrYE"><div class="Box-sc-g0xbh4-0 flpEwB"></div></div></div></div></div><!--$--><div data-testid="sidebar-projects-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Projects</h3></div><span class="Box-sc-g0xbh4-0 dCKzSy prc-Text-Text-0ima0">No projects</span><div class="Box-sc-g0xbh4-0 flpEwB"><div class="Box-sc-g0xbh4-0 fBPJxs"></div></div></div></div><!--/$--><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Milestone</h3></div><span class="Box-sc-g0xbh4-0 dCKzSy prc-Text-Text-0ima0">No milestone</span><div class="Box-sc-g0xbh4-0 flpEwB"><ul class="prc-ActionList-ActionList-X4RiC" data-dividers="false" data-variant="full"><div class="Box-sc-g0xbh4-0 flpEwB"></div></ul></div></div></div><!--$--><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Relationships</h3></div><span class="Box-sc-g0xbh4-0 dCKzSy prc-Text-Text-0ima0">None yet</span><div class="Box-sc-g0xbh4-0 flpEwB"></div></div></div><div data-testid="sidebar-section" class="Box-sc-g0xbh4-0 kDreLw"><div class="Box-sc-g0xbh4-0 hfKjHv"><div class="Box-sc-g0xbh4-0 bwxuvd"><h3 class="Box-sc-g0xbh4-0 jVkRst prc-Heading-Heading-6CmGO">Development</h3></div><span class="Box-sc-g0xbh4-0 dCKzSy prc-Text-Text-0ima0">No branches or pull requests</span><div class="Box-sc-g0xbh4-0 flpEwB"></div></div></div><!--/$--><h2 class="sr-only prc-Heading-Heading-6CmGO">Issue actions</h2><ul class="prc-ActionList-ActionList-X4RiC OptionsSection-module__ActionListOverrides--M6klF" data-dividers="false" data-variant="full"></ul></div></div></div></div><!--/$--></div><!--/$--></div></div><!--/$--><!--/$--><script type="application/json" id="__PRIMER_DATA_:R0:__">{"resolvedServerColorMode":"day"}</script></div> </react-app> </turbo-frame> </div> </turbo-frame> </main> </div> </div> <footer class="footer pt-8 pb-6 f6 color-fg-muted p-responsive" role="contentinfo" > <h2 class='sr-only'>Footer</h2> <div class="d-flex flex-justify-center flex-items-center flex-column-reverse flex-lg-row flex-wrap flex-lg-nowrap"> <div class="d-flex flex-items-center flex-shrink-0 mx-2"> <a aria-label="Homepage" title="GitHub" class="footer-octicon mr-2" href="https://github.com"> <svg aria-hidden="true" height="24" viewBox="0 0 24 24" version="1.1" width="24" data-view-component="true" class="octicon octicon-mark-github"> <path d="M12 1C5.9225 1 1 5.9225 1 12C1 16.8675 4.14875 20.9787 8.52125 22.4362C9.07125 22.5325 9.2775 22.2025 9.2775 21.9137C9.2775 21.6525 9.26375 20.7862 9.26375 19.865C6.5 20.3737 5.785 19.1912 5.565 18.5725C5.44125 18.2562 4.905 17.28 4.4375 17.0187C4.0525 16.8125 3.5025 16.3037 4.42375 16.29C5.29 16.2762 5.90875 17.0875 6.115 17.4175C7.105 19.0812 8.68625 18.6137 9.31875 18.325C9.415 17.61 9.70375 17.1287 10.02 16.8537C7.5725 16.5787 5.015 15.63 5.015 11.4225C5.015 10.2262 5.44125 9.23625 6.1425 8.46625C6.0325 8.19125 5.6475 7.06375 6.2525 5.55125C6.2525 5.55125 7.17375 5.2625 9.2775 6.67875C10.1575 6.43125 11.0925 6.3075 12.0275 6.3075C12.9625 6.3075 13.8975 6.43125 14.7775 6.67875C16.8813 5.24875 17.8025 5.55125 17.8025 5.55125C18.4075 7.06375 18.0225 8.19125 17.9125 8.46625C18.6138 9.23625 19.04 10.2125 19.04 11.4225C19.04 15.6437 16.4688 16.5787 14.0213 16.8537C14.42 17.1975 14.7638 17.8575 14.7638 18.8887C14.7638 20.36 14.75 21.5425 14.75 21.9137C14.75 22.2025 14.9563 22.5462 15.5063 22.4362C19.8513 20.9787 23 16.8537 23 12C23 5.9225 18.0775 1 12 1Z"></path> </svg> </a> <span> © 2025 GitHub, Inc. </span> </div> <nav aria-label="Footer"> <h3 class="sr-only" id="sr-footer-heading">Footer navigation</h3> <ul class="list-style-none d-flex flex-justify-center flex-wrap mb-2 mb-lg-0" aria-labelledby="sr-footer-heading"> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to Terms","label":"text:terms"}" href="https://docs.github.com/site-policy/github-terms/github-terms-of-service" data-view-component="true" class="Link--secondary Link">Terms</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to privacy","label":"text:privacy"}" href="https://docs.github.com/site-policy/privacy-policies/github-privacy-statement" data-view-component="true" class="Link--secondary Link">Privacy</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to security","label":"text:security"}" href="https://github.com/security" data-view-component="true" class="Link--secondary Link">Security</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to status","label":"text:status"}" href="https://www.githubstatus.com/" data-view-component="true" class="Link--secondary Link">Status</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to docs","label":"text:docs"}" href="https://docs.github.com/" data-view-component="true" class="Link--secondary Link">Docs</a> </li> <li class="mx-2"> <a data-analytics-event="{"category":"Footer","action":"go to contact","label":"text:contact"}" href="https://support.github.com?tags=dotcom-footer" data-view-component="true" class="Link--secondary Link">Contact</a> </li> <li class="mx-2" > <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"cookies","context":"subfooter","tag":"link","label":"cookies_link_subfooter_footer"}" > Manage cookies </button> </cookie-consent-link> </li> <li class="mx-2"> <cookie-consent-link> <button type="button" class="Link--secondary underline-on-hover border-0 p-0 color-bg-transparent" data-action="click:cookie-consent-link#showConsentManagement" data-analytics-event="{"location":"footer","action":"dont_share_info","context":"subfooter","tag":"link","label":"dont_share_info_link_subfooter_footer"}" > Do not share my personal information </button> </cookie-consent-link> </li> </ul> </nav> </div> </footer> <ghcc-consent id="ghcc" class="position-fixed bottom-0 left-0" style="z-index: 999999" data-initial-cookie-consent-allowed="" data-cookie-consent-required="false"></ghcc-consent> <div id="ajax-error-message" class="ajax-error-message flash flash-error" hidden> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-alert"> <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path> </svg> <button type="button" class="flash-close js-ajax-error-dismiss" aria-label="Dismiss error"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> You can’t perform that action at this time. </div> <template id="site-details-dialog"> <details class="details-reset details-overlay details-overlay-dark lh-default color-fg-default hx_rsm" open> <summary role="button" aria-label="Close dialog"></summary> <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast hx_rsm-dialog hx_rsm-modal"> <button class="Box-btn-octicon m-0 btn-octicon position-absolute right-0 top-0" type="button" aria-label="Close dialog" data-close-dialog> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-x"> <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"></path> </svg> </button> <div class="octocat-spinner my-6 js-details-dialog-spinner"></div> </details-dialog> </details> </template> <div class="Popover js-hovercard-content position-absolute" style="display: none; outline: none;"> <div class="Popover-message Popover-message--bottom-left Popover-message--large Box color-shadow-large" style="width:360px;"> </div> </div> <template id="snippet-clipboard-copy-button"> <div class="zeroclipboard-container position-absolute right-0 top-0"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn js-clipboard-copy m-2 p-0" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon m-2"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none m-2"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> <template id="snippet-clipboard-copy-button-unpositioned"> <div class="zeroclipboard-container"> <clipboard-copy aria-label="Copy" class="ClipboardButton btn btn-invisible js-clipboard-copy m-2 p-0 d-flex flex-justify-center flex-items-center" data-copy-feedback="Copied!" data-tooltip-direction="w"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-copy js-clipboard-copy-icon"> <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path><path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path> </svg> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-check js-clipboard-check-icon color-fg-success d-none"> <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path> </svg> </clipboard-copy> </div> </template> </div> <div id="js-global-screen-reader-notice" class="sr-only mt-n1" aria-live="polite" aria-atomic="true" ></div> <div id="js-global-screen-reader-notice-assertive" class="sr-only mt-n1" aria-live="assertive" aria-atomic="true"></div> </body> </html>